/* Carrefour brand identity — blue primary, red secondary. */
:root {
    --queens-primary: #004E9F;   /* Carrefour blue */
    --queens-secondary: #E2001A; /* Carrefour red */
    /* Clean, professional type: Inter (Latin + numerals), Cairo (Arabic), Segoe UI offline fallback. */
    --qs-font: 'Inter', 'Cairo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

html, body {
    font-family: var(--qs-font);
    -webkit-font-smoothing: antialiased;      /* crisper, thinner strokes on WebKit */
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -.006em;                  /* Inter reads a touch tighter and cleaner */
}

/* Apply the family to MudBlazor's root too (it sets its own font-family via the theme). */
.mud-typography, .mud-input, .mud-button-root, .mud-table, body .mud-application {
    font-family: var(--qs-font);
}

/* Financial figures: real tabular numerals so columns of numbers line up perfectly. */
.mud-table-root td, .mud-table-root th,
.qs-kpi-value, .qs-ledger-tbl td, .qs-ledger-tbl th,
td[style*="text-align:right"], .mud-table-cell {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ============================================================================
   Executive report styling — applies to every MudTable + report KPI card.
   Conditional inline row colors (e.g. verification/bank-rec) still win over the
   zebra below because inline styles out-rank these class rules.
   ============================================================================ */

/* Table header: quiet, uppercase, tinted */
.mud-table-root thead th {
    background: #f6f7f9;
    color: #5b6472;
    font-weight: 600 !important;
    font-size: .72rem !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 2px solid #e7e9ee !important;
}

/* Zebra striping + row hover */
.mud-table-root tbody tr:nth-of-type(even) { background: #fafbfd; }
.mud-table-root tbody tr:hover { background: #eef3ff; }

/* Tabular figures so columns line up */
.mud-table-root td, .mud-table-root th { font-variant-numeric: tabular-nums; }

/* TOTAL / footer row emphasis */
.mud-table-root tfoot td {
    border-top: 2px solid #dfe3ea !important;
    background: #f6f7f9;
    font-weight: 700;
}

/* ---- KPI cards ---- */
.qs-kpi {
    border-radius: 14px !important;
    border-left: 3px solid var(--kpi-accent, #6d5ef0);
    box-shadow: 0 1px 2px rgba(20,30,60,.04), 0 8px 20px rgba(20,30,60,.05);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.qs-kpi:hover {
    box-shadow: 0 2px 4px rgba(20,30,60,.05), 0 14px 32px rgba(33,37,64,.11);
    transform: translateY(-2px);
}
.qs-kpi .qs-kpi-label {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    color: #8a93a3; font-weight: 600;
}
.qs-kpi .qs-kpi-value {
    font-size: 1.6rem; font-weight: 750; line-height: 1.12; letter-spacing: -.015em;
    font-variant-numeric: tabular-nums; color: #1f2533;
}
.qs-kpi .qs-kpi-sub { font-size: .72rem; color: #9aa2b1; font-weight: 500; }

/* ---- Share / proportion bar inside a table cell ---- */
.qs-bar {
    height: 6px; width: 72px; border-radius: 4px; background: #edeff3;
    display: inline-block; vertical-align: middle; overflow: hidden; margin-left: 8px;
}
.qs-bar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #6d5ef0, #9a8cff); }

/* ---- RAG health pills ---- */
.qs-rag {
    display: flex; align-items: center; gap: 10px; min-width: 210px; flex: 1 1 210px;
    padding: 8px 12px; border: 1px solid #e7e9ee; border-left-width: 4px; border-radius: 8px; background: #fff;
}
.qs-rag-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }

/* ============================================================================
   Modern sidebar navigation (.qs-nav) — rounded hover pills, brand active state,
   quiet uppercase group headers. Scoped to the nav so it won't touch other menus.
   ============================================================================ */
.qs-nav { padding: 10px 10px 24px; }

/* Links & group headers — rounded, roomy, smooth */
.qs-nav .mud-nav-link {
    border-radius: 10px;
    margin: 2px 6px;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: .9rem;
    color: #3a4250;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.qs-nav .mud-nav-link:hover { background: #e8f1fb; color: var(--queens-primary); }

.qs-nav .mud-nav-link .mud-nav-link-icon {
    color: #9aa2b1;
    min-width: 34px;
    transition: color .15s ease;
}
.qs-nav .mud-nav-link:hover .mud-nav-link-icon { color: var(--queens-primary); }

/* Active item — brand pill with an inset accent bar */
.qs-nav .mud-nav-link.active,
.qs-nav .mud-nav-link.mud-nav-link-active {
    background: linear-gradient(90deg, rgba(0, 78, 159, .12), rgba(0, 78, 159, .03));
    color: var(--queens-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--queens-primary);
}
.qs-nav .mud-nav-link.active .mud-nav-link-icon,
.qs-nav .mud-nav-link.mud-nav-link-active .mud-nav-link-icon { color: var(--queens-primary); }

/* Group header (GL / Inventory / Purchase / …) — quiet, uppercase section label */
.qs-nav .mud-nav-group { margin-top: 10px; }
.qs-nav .mud-nav-group > .mud-nav-link {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .72rem;
    font-weight: 700;
    color: #8a93a3;
}
.qs-nav .mud-nav-group > .mud-nav-link:hover { background: transparent; color: var(--queens-primary); }
.qs-nav .mud-nav-group > .mud-nav-link .mud-nav-link-icon { color: #b3b9c4; }

/* Slightly indent the items inside a group so the hierarchy reads */
.qs-nav .mud-collapse-container .mud-nav-link { padding-left: 18px; }

/* ============================================================================
   Top-bar navigation (.qs-topnav) — horizontal dropdown menus in the app bar,
   replacing the old left sidebar. Buttons inherit the app-bar (white) color.
   ============================================================================ */
.qs-topnav-wrap { overflow-x: auto; overflow-y: hidden; }
.qs-topnav-wrap::-webkit-scrollbar { height: 0; }            /* hide the strip's scrollbar */
.qs-topnav { gap: 2px; flex-wrap: nowrap; }
.qs-topnav .mud-button-root {
    text-transform: none;            /* readable labels, not SHOUTING CAPS */
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: .01em;
    border-radius: 8px;
    padding: 4px 10px;
}
.qs-topnav .mud-button-root:hover { background: rgba(255, 255, 255, .14); }
/* tighten the dropdown caret so it hugs the label */
.qs-topnav .mud-button-root .mud-button-icon-end { margin-left: -2px; }

/* ============================================================================
   Module rail (.qs-module-rail) — thin fixed strip on the far left holding the
   POS / GLS switch. The app bar and main content are pushed right by its width.
   ============================================================================ */
:root { --qs-rail-w: 68px; }

.qs-module-rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--qs-rail-w);
    z-index: 1301;                                   /* above the app bar (1300) */
    background: var(--queens-primary, #004e9f);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 8px;
    box-shadow: 2px 0 6px rgba(0, 0, 0, .18);
}

.qs-module-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 2px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, .72);
    font: 700 .68rem/1 inherit;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.qs-module-btn .mud-icon-root { font-size: 1.35rem; }
.qs-module-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.qs-module-btn--active {
    background: #fff;
    color: var(--queens-primary, #004e9f);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.qs-module-btn--active:hover { background: #fff; color: var(--queens-primary, #004e9f); }

/* Offset the app bar and content so the rail never overlaps them */
.qs-appbar-railed { left: var(--qs-rail-w) !important; width: calc(100% - var(--qs-rail-w)) !important; }
.qs-content-railed { margin-left: var(--qs-rail-w); }

/* Report directory cards (/gls/reports) — lift + accent border on hover */
.qs-report-card { transition: box-shadow .15s ease, transform .15s ease; border: 1px solid transparent; }
.qs-report-card:hover {
    box-shadow: 0 4px 14px rgba(0, 78, 159, .16) !important;
    transform: translateY(-2px);
    border-color: rgba(0, 78, 159, .25);
}

/* ---- AI insights markdown spacing ---- */
.report-insights-md h1, .report-insights-md h2, .report-insights-md h3 { font-size: 1.02rem; margin: .5rem 0 .2rem; font-weight: 700; }
.report-insights-md ul, .report-insights-md ol { margin: .2rem 0 .6rem 1.15rem; }
.report-insights-md p { margin: .3rem 0; }
.report-insights-md li { margin: .12rem 0; }

/* ============================================================================
   Mobile / responsive shell (≤ md, 960px). The 68px module rail and the
   in-app-bar menu strip don't fit a phone, so below 960px we hide the rail,
   drop the content offset, and move navigation into a temporary drawer opened
   by the hamburger in the app bar (see MainLayout.razor + TopNavMenu).
   ============================================================================ */
.qs-appbar-burger { margin-right: 2px; }

/* Drawer body: module switch row on top, vertical full-width menu below. */
.qs-mobile-drawer .mud-drawer-content { padding: 12px 10px; }
.qs-mobile-mods { display: flex; gap: 10px; margin-bottom: 4px; }
.qs-mobile-mods .qs-module-btn { flex: 1 1 0; color: #3a4250; background: #f1f4f9; }
.qs-mobile-mods .qs-module-btn--active { background: var(--queens-primary); color: #fff; }

/* The horizontal top-bar menu, re-laid-out vertically inside the drawer. */
.qs-mobile-drawer .qs-topnav { flex-direction: column; align-items: stretch; gap: 2px; }
.qs-mobile-drawer .qs-topnav .mud-button-root {
    width: 100%; justify-content: flex-start; color: #3a4250; white-space: normal;
}
.qs-mobile-drawer .qs-topnav .mud-button-root:hover { background: #e8f1fb; }

@media (max-width: 959.98px) {
    .qs-module-rail { display: none; }
    .qs-appbar-railed { left: 0 !important; width: 100% !important; }
    .qs-content-railed { margin-left: 0; }
    html[dir="rtl"] .qs-appbar-railed { right: 0 !important; }
    html[dir="rtl"] .qs-content-railed { margin-right: 0; }
    /* RAG health pills stack full-width instead of forcing 210px overflow. */
    .qs-rag { min-width: 0; flex-basis: 100%; }
}

@media (max-width: 599.98px) {
    .qs-assistant-cta { display: none; }   /* AI still reachable via the floating FAB + drawer */
    .qs-user-text { display: none; }
    .qs-brand-text { display: none; }       /* logo alone — frees width for the burger + actions */
}

/* ============================================================================
   GUI enhancement pass — a cohesive polish applied to EVERY report at once via
   the shared hooks (MudPaper cards, .mud-table-root, .qs-kpi, .qs-toolbar).
   Additive and conservative so it lifts the look without fighting existing rules.
   ============================================================================ */

/* --- Canvas: a soft tint so white report cards visibly lift off the page --- */
.mud-main-content { background: #f3f5f9; }

/* --- Report titles (Typo.h4 + inline icon) get a bit more presence --- */
.mud-main-content .mud-typography-h4 {
    display: inline-flex; align-items: center; gap: .45rem;
    font-weight: 700; letter-spacing: -.01em; color: #1f2533;
}
.mud-main-content .mud-typography-h4 .mud-icon-root { color: var(--queens-primary); }

/* --- Cards: crisp hairline border + softer layered shadow on the elevation-1
       papers that reports use for filter bars, KPI tiles, chart panels and
       result tables. Slightly more radius + a gentle hover lift so chart cards
       read as premium, tactile surfaces. --- */
.mud-main-content .mud-paper.mud-elevation-1 {
    border: 1px solid #e8edf3;
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(20, 30, 60, .03),
        0 4px 10px rgba(20, 30, 60, .04),
        0 12px 28px rgba(20, 30, 60, .05) !important;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
/* Hover lift for display cards (chart panels, result tables, KPI tiles).
   The filter/toolbar surface (.qs-toolbar) is excluded — it holds live controls
   the user reaches into, so it should stay put rather than lift on hover. */
.mud-main-content .mud-paper.mud-elevation-1:not(.qs-toolbar):hover {
    border-color: #dbe3ee;
    box-shadow:
        0 1px 2px rgba(20, 30, 60, .04),
        0 6px 14px rgba(20, 30, 60, .06),
        0 18px 40px rgba(20, 30, 60, .08) !important;
    transform: translateY(-2px);
}

/* --- Chart-card subtitle helper: quiet caption a card wrapper can place under
       its title (e.g. "Visits by weekday · last 90 days"). --- */
.qs-chart-subtitle {
    font-size: 11px;
    line-height: 1.35;
    color: #8a93a3;
    font-weight: 500;
    letter-spacing: .01em;
    margin-top: 1px;
}

/* --- Shared filter / toolbar card — subtle vertical wash + rounded, so the
       controls read as one grouped surface. Opt in with class="qs-toolbar". --- */
.qs-toolbar {
    border: 1px solid #e5eaf1 !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #ffffff, #f7f9fc) !important;
    box-shadow: 0 1px 2px rgba(20, 30, 60, .05) !important;
}

/* --- Tables: rounded clipped container, denser rows, crisper header & hover --- */
.mud-table-root { border-radius: 10px; }
.mud-table-root tbody tr { transition: background .12s ease; }
.mud-table-root tbody td, .mud-table-root thead th { padding-top: 6px; padding-bottom: 6px; }
.mud-table-root tbody tr:hover { background: #eaf1ff; }
.mud-table-root tfoot td { color: #1f2533; }

/* --- KPI tiles: faint gradient wash for a little depth (hover lift already set) --- */
.qs-kpi { background: linear-gradient(180deg, #ffffff, #fbfcfe); }

/* --- Account-type group header / subtotal rows on the classified Balance Sheet --- */
.qs-grp-hdr {
    background: #eef3fb !important; color: var(--queens-primary) !important;
    font-weight: 700 !important; text-transform: uppercase; letter-spacing: .04em;
    font-size: .72rem !important; border-top: 1px solid #d7e2f2 !important;
}
.qs-grp-ftr {
    background: #f7f9fc !important; font-weight: 700 !important; color: #1f2533 !important;
    border-bottom: 2px solid #e3e8f0 !important;
}

/* --- Item Movement (Comprehensive): dense rows, group-banded columns, and a Balance column frozen to the
       right edge (Item stays frozen left) so the closing value is always visible on the very wide table. --- */
.qs-imf td, .qs-imf th { padding: 2px 7px !important; font-size: .78rem; }
.qs-imf .qs-imf-gstart { border-left: 2px solid #e2e8f1 !important; }         /* boundary between column groups */
.qs-imf thead th.qs-imf-hodd { background: #eef4fc !important; }              /* alternate group banding in the header */
.qs-imf thead th.qs-imf-hbal { background: #e7f2e7 !important; color: #1b7e34 !important; }
.qs-imf .qs-imf-balq {
    position: sticky; right: 130px; z-index: 2; min-width: 100px; width: 100px;
    background: #eef7ee !important; font-weight: 600;
}
.qs-imf .qs-imf-balc {
    position: sticky; right: 0; z-index: 2; min-width: 130px; width: 130px;
    background: #eef7ee !important; font-weight: 700; box-shadow: -6px 0 8px -6px rgba(0,0,0,.18);
}
.qs-imf thead th.qs-imf-balq, .qs-imf thead th.qs-imf-balc { z-index: 5; }    /* header freeze above body */

/* --- Drill-down rows: signal that clicking opens the account statement --- */
.qs-drill { cursor: pointer; }
.qs-drill:hover td:nth-child(2) { text-decoration: underline; text-decoration-color: rgba(0,78,159,.4); }

/* --- Refined professional statement coloring: brand-blue column headers + totals,
       dark-slate body text. Codes/amounts keep their own inline colors (inline wins). --- */
.mud-main-content .mud-table-root thead th,
.qs-ledger-tbl thead th { color: var(--queens-primary); }
/* Dark-slate body text — the second selector out-specifies MudBlazor's own .mud-table-cell color
   so account names render clearly instead of the theme's faint default gray. */
.mud-main-content .mud-table-root tbody td,
.mud-main-content .mud-table-root tbody td.mud-table-cell { color: #1f2533; }
.mud-main-content .mud-table-root tfoot td { color: var(--queens-primary); }
/* Same table polish inside dialogs (they render outside .mud-main-content). */
.mud-dialog .mud-table-root thead th { color: var(--queens-primary); }
.mud-dialog .mud-table-root tbody td.mud-table-cell { color: #1f2533; }
.mud-dialog .mud-table-root td, .mud-dialog .mud-table-root th { font-variant-numeric: tabular-nums; }

/* --- Custom ledger tables (Stock Card etc.) share the zebra + hover polish --- */
.qs-ledger-tbl tbody tr:nth-of-type(even) td { background: #fafbfd; }
.qs-ledger-tbl tbody tr:hover td { background: #eaf1ff; }

/* --- Modern thin scrollbars throughout --- */
* { scrollbar-width: thin; scrollbar-color: #c6cdd8 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: #cdd4df; border-radius: 8px;
    border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #b1bac8; }

/* --- Mobile: tighten page padding and let wide tables scroll horizontally --- */
@media (max-width: 959.98px) {
    .mud-main-content .pa-4 { padding: 12px !important; }
    .mud-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --- Print: white canvas, drop the card chrome so ink goes to the data --- */
@media print {
    .mud-main-content { background: #fff; }
    .mud-main-content .mud-paper.mud-elevation-1,
    .mud-main-content .mud-paper.mud-elevation-1:hover {
        border: 1px solid #e8edf3;
        box-shadow: none !important;
        transform: none !important;
    }
    .qs-kpi, .qs-kpi:hover {
        box-shadow: none !important;
        transform: none !important;
    }
}

/* ===========================================================================
   Pseudo-3D chart treatment — scoped to the Customer Visits charts page.
   `.qs-charts-3d` wraps the chart grid. Pure CSS/SVG (no 3D library): layered
   SVG drop-shadow filters fake a side face + cast shadow so bars/slices/tiles
   read as extruded and raised, while the plot itself stays flat so axes and
   tooltips remain accurate. Combined with gradient fills (enabled on the page
   master) this gives a glossy 3D look.
   =========================================================================== */
.qs-charts-3d .apexcharts-bar-area,
.qs-charts-3d .apexcharts-rangebar-area {
    /* right sliver = side face; soft offset = cast shadow */
    filter: drop-shadow(2px 0 0 rgba(15, 23, 55, .20)) drop-shadow(3px 5px 3px rgba(15, 23, 55, .28));
}
.qs-charts-3d .apexcharts-pie-area,
.qs-charts-3d .apexcharts-donut-slice {
    filter: drop-shadow(2px 4px 4px rgba(15, 23, 55, .34));
}
.qs-charts-3d .apexcharts-treemap-rect {
    filter: drop-shadow(2px 2px 0 rgba(15, 23, 55, .16)) drop-shadow(2px 4px 3px rgba(15, 23, 55, .24));
}
.qs-charts-3d .apexcharts-heatmap-rect {
    filter: drop-shadow(1px 1px 0 rgba(15, 23, 55, .12)) drop-shadow(1px 2px 1px rgba(15, 23, 55, .16));
}
.qs-charts-3d .apexcharts-marker {
    filter: drop-shadow(1.5px 2px 1px rgba(15, 23, 55, .40));
}
.qs-charts-3d .apexcharts-line,
.qs-charts-3d .apexcharts-area {
    filter: drop-shadow(0 3px 3px rgba(15, 23, 55, .22));
}
/* The radar/polar web lifts a touch too. */
.qs-charts-3d .apexcharts-radar-series polygon,
.qs-charts-3d .apexcharts-pie path {
    filter: drop-shadow(1px 2px 2px rgba(15, 23, 55, .22));
}
@media print {
    .qs-charts-3d *, .qs-charts-3d *:hover { filter: none !important; }
}