/* =========================================================
   RAZ CLOUD — SOURCE LAYOUT POLISH V4
   Topbar / Headers / Dashboard / Customers
   Sidebar geometry untouched
   ========================================================= */


/* =========================================================
   PAGE CONTENT
   ========================================================= */

.main,
.source-page {

    padding:
        20px 28px 32px !important;
}


.source-page-head,
.ops-header {

    min-height:
        62px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        22px;

    margin-bottom:
        18px !important;
}


.source-page-head h1,
.ops-header h1 {

    margin:
        2px 0 3px !important;

    font-size:
        24px !important;

    line-height:
        1.15 !important;

    letter-spacing:
        -.35px;
}


.source-eyebrow,
.ops-eyebrow {

    font-size:
        7px !important;

    font-weight:
        800 !important;

    letter-spacing:
        1.45px !important;

    color:
        var(--raz-primary) !important;
}


.source-page-head p,
.ops-header p {

    margin:
        0 !important;

    font-size:
        9px !important;

    line-height:
        1.45 !important;
}


/* =========================================================
   HEADER RIGHT SIDE
   ========================================================= */

.source-head-tools,
.ops-header-tools {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        9px;
}


/* =========================================================
   SEARCH
   ========================================================= */

.source-search,
.ops-search,
.header-search {

    width:
        min(390px, 34vw) !important;

    height:
        40px !important;

    display:
        flex;

    align-items:
        center;

    padding:
        0 12px !important;

    border:
        1px solid
        var(--raz-border) !important;

    border-radius:
        calc(
            var(--raz-radius)
            + 2px
        ) !important;

    background:
        var(--raz-surface) !important;

    box-sizing:
        border-box;

    box-shadow:
        none !important;
}


.source-search input,
.ops-search input,
.header-search input {

    width:
        100%;

    height:
        100%;

    padding:
        0 8px !important;

    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    font-size:
        8px !important;
}


/* =========================================================
   USER CARD
   ========================================================= */

.user-menu {

    min-width:
        190px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        5px 7px !important;

    border:
        1px solid
        var(--raz-border) !important;

    border-radius:
        calc(
            var(--raz-radius)
            + 2px
        ) !important;

    background:
        var(--raz-surface) !important;

    box-sizing:
        border-box;
}


.user-avatar {

    width:
        34px !important;

    height:
        34px !important;

    min-width:
        34px;

    display:
        grid;

    place-items:
        center;

    font-size:
        9px !important;

    font-weight:
        800;
}


.user-info {

    flex:
        1;

    min-width:
        0;
}


.user-info strong {

    display:
        block;

    font-size:
        9px !important;

    line-height:
        1.2;
}


.user-info span {

    display:
        block;

    margin-top:
        2px;

    font-size:
        7px !important;
}


.logout-button {

    height:
        30px;

    padding:
        0 10px !important;

    font-size:
        7px !important;
}


/* =========================================================
   DASHBOARD EDGE HERO
   ========================================================= */

.edge-card,
.selected-edge {

    min-height:
        86px;

    padding:
        14px 16px !important;

    border:
        1px solid
        var(--raz-border) !important;

    border-radius:
        calc(
            var(--raz-radius)
            + 2px
        ) !important;

    background:
        var(--raz-surface) !important;
}


.edge-card .brand-mark,
.selected-edge .brand-mark {

    width:
        42px !important;

    height:
        42px !important;

    min-width:
        42px !important;

    border:
        1px solid
        rgba(
            var(--raz-primary-rgb),
            .25
        ) !important;

    background:
        rgba(
            var(--raz-primary-rgb),
            .07
        ) !important;

    color:
        var(--raz-primary) !important;
}


/* =========================================================
   DASHBOARD SUMMARY
   ========================================================= */

.dashboard-stats,
.dashboard-summary,
.system-summary {

    gap:
        10px !important;
}


.dashboard-stat,
.system-summary article {

    min-height:
        86px !important;

    padding:
        13px 14px !important;

    border:
        1px solid
        var(--raz-border) !important;

    border-radius:
        calc(
            var(--raz-radius)
            + 1px
        ) !important;

    box-sizing:
        border-box;
}


.dashboard-stat span,
.dashboard-stat small {

    font-size:
        7px !important;
}


.dashboard-stat strong {

    display:
        block;

    margin-top:
        7px;

    font-size:
        20px !important;

    line-height:
        1;
}


/* =========================================================
   CARD HEADERS
   ========================================================= */

.source-card-head,
.ops-card-head {

    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        10px 14px !important;

    border-bottom:
        1px solid
        var(--raz-border) !important;

    box-sizing:
        border-box;
}


.source-card-head h2,
.ops-card-head h2 {

    margin:
        0 !important;

    font-size:
        11px !important;
}


.source-card-head p,
.ops-card-head p {

    margin:
        3px 0 0 !important;

    font-size:
        7px !important;
}


/* =========================================================
   QUICK ACTIONS
   ========================================================= */

.quick-actions-grid {

    gap:
        8px !important;
}


.quick-action {

    min-height:
        58px !important;

    padding:
        9px 10px !important;

    border:
        1px solid
        var(--raz-border) !important;

    border-radius:
        calc(
            var(--raz-radius)
            + 1px
        ) !important;
}


.quick-action strong {

    font-size:
        8px !important;
}


.quick-action small,
.quick-action span {

    font-size:
        6.5px !important;
}


/* =========================================================
   CUSTOMERS FILTER PANEL
   ========================================================= */

.customer-filters,
.customer-toolbar,
.filter-panel {

    border:
        1px solid
        var(--raz-border) !important;

    border-radius:
        calc(
            var(--raz-radius)
            + 2px
        ) !important;

    background:
        var(--raz-surface) !important;
}


.filter-pill {

    min-height:
        30px !important;

    padding:
        0 11px !important;

    font-size:
        7px !important;

    white-space:
        nowrap;
}


/* =========================================================
   TABLES
   ========================================================= */

.source-table,
.ops-table,
.customer-table {

    width:
        100%;

    border-collapse:
        collapse;
}


.source-table th,
.ops-table th,
.customer-table th {

    height:
        34px;

    padding:
        0 12px !important;

    font-size:
        6.5px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .55px !important;

    text-transform:
        uppercase;
}


.source-table td,
.ops-table td,
.customer-table td {

    min-height:
        44px;

    padding:
        9px 12px !important;

    font-size:
        7.5px !important;
}


.source-table td strong,
.ops-table td strong {

    font-size:
        8px !important;
}


/* =========================================================
   TABLE ACTION BUTTON
   ========================================================= */

.source-table button,
.ops-table button {

    border-radius:
        var(--raz-radius) !important;
}


/* =========================================================
   CUSTOMER TOTAL ROWS
   ========================================================= */

.page-total-row td,
.grand-total-row td,
tfoot td {

    height:
        34px !important;

    font-size:
        6.5px !important;

    font-weight:
        700;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-raz-theme="dark"]
.source-search,

html[data-raz-theme="dark"]
.user-menu,

html[data-raz-theme="dark"]
.edge-card,

html[data-raz-theme="dark"]
.selected-edge {

    background:
        var(--raz-surface) !important;
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

html[data-raz-theme="light"]
.source-search,

html[data-raz-theme="light"]
.user-menu,

html[data-raz-theme="light"]
.edge-card,

html[data-raz-theme="light"]
.selected-edge {

    background:
        #ffffff !important;
}


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

@media(max-width:1100px) {

    .source-search,
    .ops-search {

        width:
            300px !important;
    }

}


@media(max-width:900px) {

    .main,
    .source-page {

        padding:
            16px !important;
    }


    .source-page-head,
    .ops-header {

        flex-direction:
            column;
    }


    .source-head-tools,
    .ops-header-tools {

        width:
            100%;

        justify-content:
            space-between;
    }


    .source-search,
    .ops-search {

        width:
            100% !important;
    }

}