/* _content/FalkGroupIntranet.App/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-xnrgl60fxh] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-xnrgl60fxh] {
    flex: 1;
}

.sidebar[b-xnrgl60fxh] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-xnrgl60fxh] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-xnrgl60fxh]  a, .top-row[b-xnrgl60fxh]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-xnrgl60fxh]  a:hover, .top-row[b-xnrgl60fxh]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-xnrgl60fxh]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-xnrgl60fxh] {
        justify-content: space-between;
    }

    .top-row[b-xnrgl60fxh]  a, .top-row[b-xnrgl60fxh]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-xnrgl60fxh] {
        flex-direction: row;
    }

    .sidebar[b-xnrgl60fxh] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-xnrgl60fxh] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-xnrgl60fxh]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-xnrgl60fxh], article[b-xnrgl60fxh] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-xnrgl60fxh] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-xnrgl60fxh] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/FalkGroupIntranet.App/Components/Pages/Home.razor.rz.scp.css */
/* ==========================================================================
   Dashboard page – scoped styles (Blazor CSS isolation)
   Brand: Primary  #337fa6   Secondary  #f4ad70
   Shared patterns (.falk-card-head, .fy-chip) live in wwwroot/app.css.
   ========================================================================== */

/* ── Page shell ─────────────────────────────────────────────────────────── */
.falk-dashboard-page[b-8vbxgsj16v] {
    padding: 32px 32px 56px 32px !important;
    max-width: var(--falk-page-max-width);
    margin: 0 auto;
    background:
        radial-gradient(1200px 360px at 0% -10%, rgba(51, 127, 166, 0.06), transparent 60%),
        radial-gradient(900px 280px at 100% 0%, rgba(244, 173, 112, 0.05), transparent 55%);
    min-height: 100%;
}

/* Page-level MudGrid: stretch row items so all 3 columns share the row height
   (DTS / KPI stack / Margin Watchlist line up at top AND bottom). */
.falk-dashboard-page[b-8vbxgsj16v]  > .mud-grid {
    align-items: stretch;
}
.falk-dashboard-page[b-8vbxgsj16v]  > .mud-grid > .mud-grid-item {
    display: flex;
    flex-direction: column;
}

/* ── Welcome strip above the DTS card (column-scoped header) ────────────── */
.column-header[b-8vbxgsj16v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px 14px 4px;
    min-height: 56px;
}
.column-header__titles[b-8vbxgsj16v] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.column-header__title[b-8vbxgsj16v] {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
}
.column-header__sub[b-8vbxgsj16v] {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

/* KPI mini-stack column has no header above → push cards down by Welcome-
   strip height so their tops align with the DTS card top. The inner grid
   then fills the remaining vertical space and the two KPI cards stretch
   to equal halves so the bottom edge aligns with DTS / Margin Watchlist. */
.kpi-stack-col[b-8vbxgsj16v] {
    padding-top: 56px;
    display: flex !important;
    flex-direction: column;
}
.kpi-stack-grid[b-8vbxgsj16v] {
    flex: 1 1 auto !important;
    align-content: stretch !important;
    align-items: stretch !important;
}
.kpi-stack-grid[b-8vbxgsj16v]  > .mud-grid-item {
    flex: 1 1 0 !important;
    display: flex !important;
    min-height: 0 !important;
}
.kpi-stack-grid[b-8vbxgsj16v]  .dashboard-kpi-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 130px;
}

/* ── Card surface (every MudCard on the dashboard, incl. those from
       HotelKpis / ProviderLogKpiView) ───────────────────────────────────── */
.falk-dashboard-page[b-8vbxgsj16v]  .mud-card {
    border-radius: var(--falk-radius-card);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--falk-shadow-card);
    border: 1px solid rgba(51, 127, 166, 0.07);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
    position: relative;
}
.falk-dashboard-page[b-8vbxgsj16v]  .mud-card:hover {
    box-shadow: var(--falk-shadow-elevated);
    transform: translateY(-1px);
    border-color: rgba(51, 127, 166, 0.18);
}

/* Top accent stripe */
.falk-dashboard-page[b-8vbxgsj16v]  .mud-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #337fa6 0%, #5fa9c6 55%, #f4ad70 100%);
    opacity: 0.65;
    border-top-left-radius: var(--falk-radius-card);
    border-top-right-radius: var(--falk-radius-card);
    pointer-events: none;
    z-index: 1;
}

/* ── ALL avatars on the dashboard → rounded-square hero look.
       Targets .mud-avatar directly to beat MudBlazor's 50%-circle default,
       regardless of which subcomponent renders the avatar. */
.falk-dashboard-page[b-8vbxgsj16v]  .mud-avatar,
.falk-dashboard-page[b-8vbxgsj16v]  .mud-avatar.mud-fab,
.falk-dashboard-page[b-8vbxgsj16v]  .dashboard-kpi-avatar {
    border-radius: 8px !important;
    width: 38px !important;
    height: 38px !important;
    background: linear-gradient(135deg, rgba(51, 127, 166, 0.16), rgba(244, 173, 112, 0.18)) !important;
    color: #1f5b78 !important;
}
.falk-dashboard-page[b-8vbxgsj16v]  .mud-avatar .mud-icon-root,
.falk-dashboard-page[b-8vbxgsj16v]  .mud-avatar.mud-fab .mud-icon-root,
.falk-dashboard-page[b-8vbxgsj16v]  .dashboard-kpi-avatar .mud-icon-root {
    color: #1f5b78 !important;
    font-size: 1.2rem !important;
}
/* DTS avatar keeps the warm Secondary accent */
.dts-card[b-8vbxgsj16v]  .mud-card-header .mud-avatar {
    background: linear-gradient(135deg, rgba(244, 173, 112, 0.30), rgba(244, 173, 112, 0.10)) !important;
}
.dts-card[b-8vbxgsj16v]  .mud-card-header .mud-avatar .mud-icon-root {
    color: var(--mud-palette-secondary) !important;
}
/* Numbered avatars inside MudTable (Sales Audit ranks) stay small & plain */
.falk-dashboard-page[b-8vbxgsj16v]  .mud-table .mud-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
}

/* ── KPI mini-cards (Total Sales / Margin): no elevation, no border ─────── */
.falk-dashboard-page[b-8vbxgsj16v]  .dashboard-kpi-card {
    position: relative;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 16px !important;
}
.falk-dashboard-page[b-8vbxgsj16v]  .dashboard-kpi-card:hover {
    transform: none;
    box-shadow: none !important;
}
.falk-dashboard-page[b-8vbxgsj16v]  .dashboard-kpi-card::before {
    display: none;
}
.falk-dashboard-page[b-8vbxgsj16v]  .dashboard-kpi-card .mud-typography-h5 {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.2;
}
.falk-dashboard-page[b-8vbxgsj16v]  .dashboard-kpi-footer {
    margin-top: auto;
    border-top: 1px solid var(--mud-palette-divider);
    padding-top: 8px;
}

/* ── Unified card shell + min heights ───────────────────────────────────── */
.falk-dashboard-card[b-8vbxgsj16v] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.falk-dashboard-card--row1[b-8vbxgsj16v] { min-height: 240px; }
.falk-dashboard-card--row2[b-8vbxgsj16v] { min-height: 286px; }
.falk-dashboard-card--row3[b-8vbxgsj16v] { min-height: 400px; }

/* ── Card body variants ─────────────────────────────────────────────────── */
.falk-card-body[b-8vbxgsj16v] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.falk-card-body--chart[b-8vbxgsj16v]  { padding: 0 8px 8px 8px; }
.falk-card-body--table[b-8vbxgsj16v]  { padding: 0; }
.falk-card-body--chart[b-8vbxgsj16v]  .apexcharts-canvas,
.falk-card-body--chart[b-8vbxgsj16v]  .apexcharts-svg {
    width: 100% !important;
}

/* ── Sales Audit table inside the shell ─────────────────────────────────── */
.falk-card-body--table[b-8vbxgsj16v]  .mud-table-toolbar {
    padding-left: 16px;
    padding-right: 16px;
    min-height: 44px;
}
.falk-card-body--table[b-8vbxgsj16v]  .mud-table-container {
    flex: 1 1 auto;
}
.falk-card-body--table[b-8vbxgsj16v]  .mud-table-pagination {
    border-top: 1px solid var(--mud-palette-divider);
}

/* ──────────────────────────────────────────────────────────────────────────
   Daily Target Sales card content
   ────────────────────────────────────────────────────────────────────────── */
.dts-card[b-8vbxgsj16v]  .mud-card-header {
    padding: 18px 16px 4px 16px !important;
}
.dts-card[b-8vbxgsj16v]  .mud-card-header-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.dts-card[b-8vbxgsj16v]  .mud-card-header-content .mud-typography-h6 {
    line-height: 1.15;
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
}

.dts-content[b-8vbxgsj16v] {
    padding: 4px 16px 12px 16px !important;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    overflow: hidden;
}
.dts-grid[b-8vbxgsj16v] {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 10px;
    width: 100%;
    align-items: center;
}
.dts-kpis[b-8vbxgsj16v] { display: flex; flex-direction: column; gap: 4px; }
.dts-kpis-caption[b-8vbxgsj16v] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    line-height: 1.2;
    margin-bottom: 4px;
}
.dts-kpi-row[b-8vbxgsj16v] {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-height: 22px;
}
.dts-kpi-label[b-8vbxgsj16v] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    white-space: nowrap;
}
.dts-kpi-value[b-8vbxgsj16v] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dts-chip[b-8vbxgsj16v] {
    height: 20px !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    padding: 0 6px !important;
    min-width: 76px;
    justify-content: center;
}
.dts-chip[b-8vbxgsj16v]  .mud-chip-icon {
    font-size: 0.95rem !important;
    margin-right: 2px !important;
}
.dts-donut[b-8vbxgsj16v] {
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dts-donut[b-8vbxgsj16v]  .apexcharts-canvas,
.dts-donut[b-8vbxgsj16v]  .apexcharts-svg {
    width: 130px !important;
    height: 130px !important;
}
.dts-footer-row[b-8vbxgsj16v] {
    border-top: 1px solid var(--mud-palette-divider);
    padding-top: 6px;
    margin-top: 2px;
}

/* ── BestSeller wrapper (HotelKpis renders its own hero head + table) ──── */
.dashboard-bestseller-tile[b-8vbxgsj16v] {
    display: flex;
    height: 100%;
}
.dashboard-bestseller-tile[b-8vbxgsj16v]  .mud-card {
    width: 100%;
    height: 100%;
    min-height: 240px;
    display: flex;
    flex-direction: column;
}
/* Drop the default .p-2 padding when our hero head provides the spacing */
.dashboard-bestseller-tile[b-8vbxgsj16v]  .mud-card.p-2 {
    padding: 0 !important;
}
.dashboard-bestseller-tile[b-8vbxgsj16v]  .mud-table {
    flex: 1 1 auto;
}