/* =========================================================
   GRACEXTOL OWNER PORTAL
   SHARED STYLES
========================================================= */

:root {

    --purple: #6d3df5;
    --purple-dark: #4d25c7;
    --purple-light: #eee8ff;

    --background: #f7f7fb;
    --surface: #ffffff;
    --surface-soft: #faf9ff;

    --text: #1c1b20;
    --muted: #77747f;

    --border: #e9e7ef;

    --success: #18864b;
    --success-bg: #e8f7ef;

    --danger: #c53b45;
    --danger-bg: #fdebed;

    --shadow:
        0 8px 30px rgba(
            30,
            22,
            60,
            0.07
        );
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;
    padding: 0;

    min-height: 100%;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        var(--background);

    color:
        var(--text);
}


body {
    min-height: 100vh;
}


button,
input,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


a {
    color: inherit;
    text-decoration: none;
}


img {
    max-width: 100%;
}


.hidden {
    display: none !important;
}


/* =========================================================
   LOADER
========================================================= */

.page-loader {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    background:
        var(--background);

    z-index: 9999;
}


.page-loader p {

    margin:
        15px 0 0;

    color:
        var(--muted);

    font-size:
        13px;
}


.spinner {

    width: 42px;
    height: 42px;

    border:
        4px solid #ddd7f5;

    border-top-color:
        var(--purple);

    border-radius: 50%;

    animation:
        ownerSpin
        0.8s linear infinite;
}


@keyframes ownerSpin {

    to {
        transform:
            rotate(360deg);
    }

}


/* =========================================================
   OWNER DASHBOARD APPLICATION
========================================================= */

.app {

    min-height: 100vh;

    display: flex;

}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {

    width: 250px;

    min-height: 100vh;

    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;

    display: flex;
    flex-direction: column;

    background:
        var(--surface);

    border-right:
        1px solid var(--border);

    z-index: 100;
}


/* =========================================================
   BRAND
========================================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        20px 18px;

    border-bottom:
        1px solid var(--border);
}


.brand-logo {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}


.brand-logo img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit:
        contain;
}


.brand-text h1 {

    margin: 0;

    font-size: 17px;

    line-height: 1.2;
}


.brand-text span {

    display: block;

    margin-top: 3px;

    color:
        var(--muted);

    font-size: 12px;
}


/* =========================================================
   SIDEBAR NAVIGATION
========================================================= */

.sidebar-nav {

    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;

    padding:
        16px 10px;

    overflow-y: auto;
}


.nav-item {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        12px 14px;

    border: 0;

    border-radius: 10px;

    background:
        transparent;

    color:
        #5f5b68;

    font-size: 14px;

    text-align: left;

    transition:
        0.2s ease;
}


.nav-icon {

    width: 20px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}


.nav-item:hover {

    background:
        var(--surface-soft);

    color:
        var(--text);
}


.nav-item.active {

    background:
        var(--purple-light);

    color:
        var(--purple);

    font-weight:
        700;
}


.nav-item.disabled {

    opacity:
        0.62;

    cursor:
        default;
}


.nav-item small {

    margin-left:
        auto;

    padding:
        3px 7px;

    border-radius:
        5px;

    background:
        #f0eff4;

    color:
        var(--muted);

    font-size:
        9px;

    font-weight:
        700;

    text-transform:
        uppercase;
}


/* =========================================================
   SIDEBAR FOOTER
========================================================= */

.sidebar-bottom {

    padding:
        14px 10px;

    border-top:
        1px solid var(--border);
}


.logout-btn {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        12px 14px;

    border: 0;

    border-radius:
        10px;

    background:
        transparent;

    color:
        #a3343c;

    text-align:
        left;
}


.logout-btn:hover {

    background:
        var(--danger-bg);
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.main-content {

    width:
        calc(100% - 250px);

    margin-left:
        250px;

    min-height:
        100vh;

    padding:
        30px 32px;
}


/* =========================================================
   TOP BAR
========================================================= */

.topbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom:
        26px;
}


.eyebrow {

    margin:
        0 0 6px;

    color:
        var(--purple);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.topbar h2 {

    margin:
        0;

    font-size:
        27px;

    line-height:
        1.2;
}


.owner-profile {

    display: flex;

    align-items: center;

    gap: 10px;
}


.owner-avatar {

    width:
        44px;

    height:
        44px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius:
        50%;

    background:
        var(--purple-light);

    overflow:
        hidden;
}


.owner-avatar img {

    width:
        75%;

    height:
        75%;

    object-fit:
        contain;
}


.owner-info strong,
.owner-info span {

    display:
        block;
}


.owner-info strong {

    font-size:
        14px;
}


.owner-info span {

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        11px;
}


/* =========================================================
   WELCOME CARD
========================================================= */

.welcome-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        20px;

    padding:
        28px;

    margin-bottom:
        22px;

    border:
        1px solid #e4ddf8;

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f5f1ff 100%
        );

    box-shadow:
        var(--shadow);
}


.welcome-card h3 {

    margin:
        0;

    font-size:
        24px;
}


.welcome-card p:last-child {

    margin:
        8px 0 0;

    color:
        var(--muted);

    font-size:
        13px;
}


.welcome-badge {

    padding:
        12px 17px;

    border-radius:
        999px;

    background:
        var(--purple);

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


/* =========================================================
   STATISTICS
========================================================= */

.stats-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        17px;

    margin-bottom:
        22px;
}


.stat-card {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        19px;

    border:
        1px solid var(--border);

    border-radius:
        15px;

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}


.stat-icon {

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        var(--purple-light);

    font-size:
        20px;
}


.stat-card span,
.stat-card strong {

    display:
        block;
}


.stat-card span {

    color:
        var(--muted);

    font-size:
        12px;
}


.stat-card strong {

    margin-top:
        4px;

    font-size:
        24px;
}


/* =========================================================
   CONTENT GRID
========================================================= */

.content-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(0, 0.75fr);

    gap:
        20px;
}


.panel {

    padding:
        22px;

    border:
        1px solid var(--border);

    border-radius:
        16px;

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}


.panel-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        18px;
}


.panel-header h3,
.page-heading h3 {

    margin:
        0;

    font-size:
        19px;
}


.panel-link {

    color:
        var(--purple);

    font-size:
        13px;

    font-weight:
        700;
}


.overview-list {

    display:
        flex;

    flex-direction:
        column;
}


.overview-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        14px 0;

    border-bottom:
        1px solid var(--border);
}


.overview-row:last-child {

    border-bottom:
        0;
}


.overview-row div strong,
.overview-row div span {

    display:
        block;
}


.overview-row div strong {

    font-size:
        14px;
}


.overview-row div span {

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        11px;
}


.overview-row > strong {

    font-size:
        19px;
}


/* =========================================================
   MODULE LIST
========================================================= */

.module-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


.module-item {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        12px;

    border-radius:
        10px;

    background:
        var(--surface-soft);
}


.module-symbol {

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;
}


.module-content {

    flex:
        1;
}


.module-content strong,
.module-content p {

    display:
        block;
}


.module-content strong {

    font-size:
        13px;
}


.module-content p {

    margin:
        3px 0 0;

    color:
        var(--muted);

    font-size:
        11px;
}


.coming-soon {

    padding:
        4px 7px;

    border-radius:
        5px;

    background:
        #efedf3;

    color:
        var(--muted);

    font-size:
        9px;

    font-weight:
        800;

    text-transform:
        uppercase;
}


/* =========================================================
   USERS PAGE
========================================================= */

.page-heading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        22px;
}


.page-heading > div:first-child {

    flex:
        1;
}


.page-heading p:last-child {

    margin:
        7px 0 0;

    color:
        var(--muted);

    font-size:
        13px;
}


.user-summary {

    display:
        flex;

    gap:
        10px;
}


.user-summary > div {

    min-width:
        90px;

    padding:
        12px;

    border:
        1px solid var(--border);

    border-radius:
        10px;

    background:
        var(--surface);
}


.user-summary span,
.user-summary strong {

    display:
        block;
}


.user-summary span {

    color:
        var(--muted);

    font-size:
        10px;
}


.user-summary strong {

    margin-top:
        4px;

    font-size:
        20px;
}


/* =========================================================
   TABLE TOOLBAR
========================================================= */

.table-toolbar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        18px;
}


.search-box {

    flex:
        1;
}


.search-box input,
.table-toolbar select {

    width:
        100%;

    padding:
        11px 12px;

    border:
        1px solid var(--border);

    border-radius:
        9px;

    background:
        #ffffff;

    outline:
        none;

    font-size:
        13px;
}


.search-box input:focus,
.table-toolbar select:focus {

    border-color:
        var(--purple);

    box-shadow:
        0 0 0 3px
        rgba(
            109,
            61,
            245,
            0.08
        );
}


.table-toolbar select {

    width:
        150px;
}


/* =========================================================
   TABLE
========================================================= */

.table-wrapper {

    width:
        100%;

    overflow-x:
        auto;
}


.users-table {

    width:
        100%;

    min-width:
        720px;

    border-collapse:
        collapse;
}


.users-table th {

    padding:
        11px 10px;

    border-bottom:
        1px solid var(--border);

    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        800;

    text-align:
        left;

    text-transform:
        uppercase;
}


.users-table td {

    padding:
        15px 10px;

    border-bottom:
        1px solid var(--border);

    vertical-align:
        middle;

    font-size:
        13px;
}


.user-name {

    font-weight:
        700;
}


.user-email {

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        11px;
}


/* =========================================================
   BADGES
========================================================= */

.role-badge,
.status-badge {

    display:
        inline-block;

    padding:
        5px 8px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        capitalize;
}


.role-owner {

    background:
        #ece5ff;

    color:
        var(--purple-dark);
}


.role-teacher {

    background:
        #eaf2ff;

    color:
        #3267ba;
}


.role-student {

    background:
        #eaf8f0;

    color:
        #21804b;
}


.status-active {

    background:
        var(--success-bg);

    color:
        var(--success);
}


.status-inactive {

    background:
        var(--danger-bg);

    color:
        var(--danger);
}


/* =========================================================
   USER ACTION
========================================================= */

.user-action {

    padding:
        7px 10px;

    border:
        0;

    border-radius:
        7px;

    font-size:
        11px;

    font-weight:
        700;
}


.user-action.deactivate {

    background:
        var(--danger-bg);

    color:
        var(--danger);
}


.user-action.activate {

    background:
        var(--success-bg);

    color:
        var(--success);
}


.user-action.disabled {

    background:
        #f0eff3;

    color:
        var(--muted);

    cursor:
        not-allowed;
}


.empty-row {

    padding:
        40px !important;

    color:
        var(--muted);

    text-align:
        center;
}


/* =========================================================
   TOAST
========================================================= */

.toast {

    position:
        fixed;

    right:
        24px;

    bottom:
        24px;

    max-width:
        350px;

    padding:
        13px 16px;

    border-radius:
        10px;

    background:
        #1e1d23;

    color:
        #ffffff;

    box-shadow:
        var(--shadow);

    font-size:
        13px;

    opacity:
        0;

    pointer-events:
        none;

    transform:
        translateY(10px);

    transition:
        0.2s ease;

    z-index:
        11000;
}


.toast.show {

    opacity:
        1;

    transform:
        translateY(0);
}


/* =========================================================
   OWNER LOGIN PAGE
========================================================= */

.owner-login-page {

    min-height:
        100vh;

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    background:
        linear-gradient(
            135deg,
            #f7f7fb 0%,
            #eee8ff 100%
        );
}


.owner-login-wrapper {

    width:
        100%;

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.owner-login-card {

    width:
        min(
            100%,
            440px
        );

    padding:
        38px 34px;

    border:
        1px solid var(--border);

    border-radius:
        22px;

    background:
        #ffffff;

    box-shadow:
        0 20px 60px
        rgba(
            51,
            35,
            110,
            0.12
        );
}


/* LOGIN LOGO */

.owner-login-logo {

    width:
        90px;

    height:
        90px;

    margin:
        0 auto 22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.owner-login-logo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    display:
        block;
}


/* LOGIN HEADING */

.owner-login-heading {

    margin-bottom:
        28px;

    text-align:
        center;
}


.owner-login-heading h1 {

    margin:
        0;

    font-size:
        28px;

    line-height:
        1.2;
}


.owner-login-heading p:last-child {

    margin:
        9px 0 0;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.5;
}


/* LOGIN FORM */

.owner-login-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;
}


.owner-form-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.owner-form-group label {

    color:
        var(--text);

    font-size:
        12px;

    font-weight:
        700;
}


.owner-form-group input {

    width:
        100%;

    padding:
        13px 14px;

    border:
        1px solid var(--border);

    border-radius:
        10px;

    outline:
        none;

    background:
        #ffffff;

    color:
        var(--text);

    font-size:
        13px;

    transition:
        0.2s ease;
}


.owner-form-group input:focus {

    border-color:
        var(--purple);

    box-shadow:
        0 0 0 3px
        rgba(
            109,
            61,
            245,
            0.08
        );
}


/* PASSWORD */

.owner-password-wrapper {

    position:
        relative;

    width:
        100%;
}


.owner-password-wrapper input {

    padding-right:
        48px;
}


.owner-password-toggle {

    position:
        absolute;

    right:
        8px;

    top:
        50%;

    width:
        36px;

    height:
        36px;

    transform:
        translateY(-50%);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    cursor:
        pointer;
}


/* LOGIN MESSAGE */

.owner-login-message {

    min-height:
        20px;

    color:
        var(--danger);

    font-size:
        12px;

    line-height:
        1.5;

    text-align:
        center;
}


.owner-login-message.error {

    color:
        var(--danger);
}


.owner-login-message.success {

    color:
        var(--success);
}


/* LOGIN BUTTON */

.owner-login-button {

    width:
        100%;

    min-height:
        48px;

    border:
        0;

    border-radius:
        10px;

    background:
        var(--purple);

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        0.2s ease;
}


.owner-login-button:hover {

    background:
        var(--purple-dark);
}


.owner-login-button:disabled {

    opacity:
        0.7;

    cursor:
        not-allowed;
}


/* LOGIN SPINNER */

.owner-login-spinner {

    width:
        16px;

    height:
        16px;

    display:
        inline-block;

    vertical-align:
        middle;

    margin-right:
        7px;

    border:
        2px solid
        rgba(
            255,
            255,
            255,
            0.4
        );

    border-top-color:
        #ffffff;

    border-radius:
        50%;

    animation:
        loginSpinner
        0.7s linear infinite;
}


@keyframes loginSpinner {

    to {

        transform:
            rotate(360deg);

    }

}


/* LOGIN NOTE */

.owner-login-note {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    margin-top:
        21px;

    padding:
        12px;

    border-radius:
        10px;

    background:
        var(--surface-soft);
}


.owner-login-note span {

    flex-shrink:
        0;
}


.owner-login-note p {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        10px;

    line-height:
        1.5;
}


/* LOGIN BACK LINK */

.owner-back-link {

    display:
        block;

    margin-top:
        20px;

    color:
        var(--purple);

    font-size:
        12px;

    font-weight:
        700;

    text-align:
        center;
}


.owner-back-link:hover {

    text-decoration:
        underline;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .stats-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .content-grid {

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 760px) {

    .app {

        flex-direction:
            column;
    }


    .sidebar {

        position:
            static;

        width:
            100%;

        min-height:
            auto;
    }


    .sidebar-nav {

        flex-direction:
            row;

        overflow-x:
            auto;

        padding:
            10px;
    }


    .nav-item {

        width:
            auto;

        flex:
            0 0 auto;
    }


    .nav-item > span:last-of-type {

        display:
            none;
    }


    .sidebar-bottom {

        display:
            none;
    }


    .main-content {

        width:
            100%;

        margin-left:
            0;

        padding:
            20px;
    }


    .topbar {

        align-items:
            flex-start;
    }


    .owner-info {

        display:
            none;
    }


    .welcome-card {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .stats-grid {

        grid-template-columns:
            1fr;
    }


    .page-heading {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .table-toolbar {

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .table-toolbar select {

        width:
            100%;
    }


    .owner-login-card {

        padding:
            30px 22px;

        border-radius:
            18px;
    }


    .owner-login-heading h1 {

        font-size:
            25px;
    }

}
/* =========================================
   OWNER DASHBOARD REDESIGN
========================================= */

.owner-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 30px;
    margin-bottom: 22px;
    background: linear-gradient(120deg, #f4efff 0%, #fff 78%);
    border: 1px solid #e8defe;
    border-radius: 18px;
}

.owner-welcome h3 {
    margin: 7px 0;
    font-size: clamp(22px, 2.2vw, 30px);
    color: #21163f;
}

.owner-welcome p:not(.eyebrow) {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.owner-primary-link {
    display: inline-flex;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--purple);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.owner-primary-link:hover {
    background: var(--purple-dark);
}

/* STATISTICS */

.owner-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.owner-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 19px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow);
}

.owner-stat-icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--purple-light);
    color: var(--purple);
    font-size: 20px;
}

.owner-stat-card span,
.owner-stat-card small {
    display: block;
    color: var(--muted);
}

.owner-stat-card span {
    font-size: 12px;
}

.owner-stat-card strong {
    display: block;
    margin: 5px 0;
    color: #251b3d;
    font-size: 27px;
}

.owner-stat-card small {
    font-size: 10px;
}

.owner-stat-attention .owner-stat-icon {
    background: #fff3df;
    color: #a96600;
}

/* DASHBOARD PANELS */

.owner-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 22px;
}

.owner-panel {
    min-width: 0;
    padding: 23px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.owner-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.owner-panel-heading h3 {
    margin: 5px 0 0;
    color: #251b3d;
    font-size: 19px;
}

.owner-panel-heading > a,
.owner-panel-footer-link {
    color: var(--purple);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.owner-panel-description {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13px;
}

/* ORGANIZATION AND SUBSCRIPTION SUMMARIES */

.owner-summary-list {
    display: grid;
}

.owner-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid #f0eef5;
    color: #504a5d;
    font-size: 13px;
}

.owner-summary-row:last-child {
    border-bottom: 0;
}

.owner-summary-row strong {
    color: #251b3d;
    font-size: 16px;
}

.owner-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 9px;
    border-radius: 50%;
}

.dot-active {
    background: #20a36b;
}

.dot-pending {
    background: #e6a23c;
}

.dot-trial {
    background: var(--purple);
}

.dot-expired {
    background: #d94c58;
}

.owner-panel-footer-link {
    display: inline-block;
    margin-top: 15px;
}

.owner-neutral-pill {
    padding: 7px 10px;
    border-radius: 99px;
    background: #f4f1fa;
    color: #746b87;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

/* PENDING PAYMENTS */

.owner-payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid #f0eef5;
}

.owner-payment-main strong,
.owner-payment-main span {
    display: block;
}

.owner-payment-main strong {
    color: #302744;
    font-size: 13px;
}

.owner-payment-main span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.owner-payment-amount {
    text-align: right;
    white-space: nowrap;
}

.owner-payment-amount strong {
    display: block;
    color: #251b3d;
    font-size: 13px;
}

.owner-payment-amount a {
    display: inline-block;
    margin-top: 5px;
    color: var(--purple);
    font-size: 11px;
    font-weight: 700;
}

.owner-empty-state {
    padding: 15px 0;
    color: var(--muted);
    font-size: 13px;
}

/* RESPONSIVE LAYOUT */

@media (max-width: 1150px) {
    .owner-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .owner-welcome {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }

    .owner-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .owner-panel {
        padding: 19px;
    }

    .owner-panel-heading {
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .owner-stat-grid {
        grid-template-columns: 1fr;
    }

    .owner-payment-row {
        align-items: flex-start;
    }
}