/* =====================================================================
   Mazaya Noura — Analytics workspace
   Palette: light canvas · navy ink · gold accent (from the app's own brand)
   ===================================================================== */
:root {
    --mz-navy:      #1B2A4A;   /* headings, sidebar, primary text */
    --mz-navy-2:    #2C4066;   /* secondary navy */
    --mz-gold:      #B19300;   /* brand accent — KPIs, active, highlights */
    --mz-gold-soft: #D4B62C;   /* lighter gold for gradients */
    --mz-gold-bg:   #FBF6E3;   /* faint gold wash for chips/cards */

    --mz-ink:       #24303F;   /* body text */
    --mz-muted:     #7A899B;   /* captions, axis labels */
    --mz-line:      #E7EAEF;   /* hairlines, borders */
    --mz-canvas:    #F4F6F9;   /* page background */
    --mz-card:      #FFFFFF;   /* card surface */

    /* chart categorical ramp — navy→gold family, readable on white */
    --c1: #1B2A4A; --c2: #B19300; --c3: #3E6DB5; --c4: #C98A00;
    --c5: #5B8AC9; --c6: #7A6E12; --c7: #9AB4DC; --c8: #E0C64B;

    --mz-ok:   #2E7D5B;
    --mz-warn: #C7891F;
    --mz-err:  #C0442E;

    --mz-shadow: 0 1px 3px rgba(27,42,74,.06), 0 8px 24px rgba(27,42,74,.05);
    --mz-radius: 16px;
}

/* ---------- shell: sidebar + workspace ---------- */
.mz {
    /* Barre latérale du dashboard retirée : la navigation vient du menu ERP.
       Rendu en pleine largeur à l'intérieur du shell ERP (bloc, pas de grille racine). */
    display: block;
    width: 100%;
    background: var(--mz-canvas);
    direction: rtl;
    font-family: "Segoe UI", "Tahoma", system-ui, sans-serif;
    color: var(--mz-ink);
}

/* ---- sidebar ---- */
.mz-side {
    background: var(--mz-navy);
    color: #DCE3EE;
    padding: 22px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mz-brand {
    display: flex; align-items: center; gap: 11px;
    padding: 4px 8px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 12px;
}
.mz-brand-mark {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--mz-gold), var(--mz-gold-soft));
    display: grid; place-items: center;
    color: var(--mz-navy); font-weight: 800; font-size: 17px;
}
.mz-brand-t b { display: block; font-size: 14.5px; color: #fff; font-weight: 800; }
.mz-brand-t span { font-size: 11px; color: #9FB0CC; }

.mz-nav { display: flex; flex-direction: column; gap: 3px; }
.mz-nav-eyebrow {
    font-size: 10px; letter-spacing: .12em; color: #6E82A6;
    padding: 14px 10px 6px; font-weight: 700;
}
.mz-navlink {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 12px; border-radius: 10px;
    color: #C4D0E4; text-decoration: none;
    font-size: 13.5px; font-weight: 600;
    border: 1px solid transparent;
    transition: background .15s, color .15s;
}
.mz-navlink:hover { background: rgba(255,255,255,.06); color: #fff; }
.mz-navlink.active {
    background: linear-gradient(90deg, rgba(177,147,0,.22), rgba(177,147,0,.05));
    color: #fff;
    border-color: rgba(177,147,0,.4);
}
.mz-navlink .ic { width: 20px; text-align: center; font-size: 15px; opacity: .9; }
.mz-navlink.active .ic { color: var(--mz-gold-soft); }

/* ---- workspace ---- */
.mz-main { padding: 0; min-width: 0; }

.mz-top {
    background: var(--mz-card);
    border-bottom: 1px solid var(--mz-line);
    padding: 20px 28px 0;
    position: sticky; top: 0; z-index: 20;
}
.mz-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mz-title h1 { margin: 0; font-size: 23px; font-weight: 800; color: var(--mz-navy); letter-spacing: -.01em; }
.mz-title p  { margin: 3px 0 0; font-size: 13px; color: var(--mz-muted); }
.mz-eyebrow {
    font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
    color: var(--mz-gold); text-transform: uppercase; margin-bottom: 6px;
}

/* filter bar */
.mz-filters {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
    padding: 16px 0 18px;
}
.mz-field { display: flex; flex-direction: column; gap: 5px; }
.mz-field label { font-size: 11px; font-weight: 700; color: var(--mz-muted); padding-inline-start: 2px; }
.mz-field select, .mz-field input {
    padding: 8px 12px; border: 1px solid var(--mz-line); border-radius: 9px;
    background: #fff; font-size: 13px; font-family: inherit; color: var(--mz-ink);
    min-width: 150px; cursor: pointer;
}
.mz-field select:focus, .mz-field input:focus {
    outline: 2px solid var(--mz-gold); outline-offset: -1px; border-color: var(--mz-gold);
}
.mz-reset {
    padding: 8px 14px; border: 1px solid var(--mz-line); border-radius: 9px;
    background: #fff; color: var(--mz-navy-2); font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: inherit;
}
.mz-reset:hover { border-color: var(--mz-gold); color: var(--mz-gold); }

/* ---- content grid ---- */
.mz-body { padding: 24px 28px 60px; }

/* Grille interne du dashboard. Classes préfixées mz-col-* pour NE PAS entrer en
   collision avec le système .col-* de Bootstrap chargé globalement par l'ERP
   (sinon les cartes reçoivent un flex/width Bootstrap et la grille casse). */
.mz-grid { display: grid; gap: 18px; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.mz-grid > * { min-width: 0; }               /* évite le débordement des graphiques dans une cellule */
.mz-col-3  { grid-column: span 3; }
.mz-col-4  { grid-column: span 4; }
.mz-col-6  { grid-column: span 6; }
.mz-col-8  { grid-column: span 8; }
.mz-col-12 { grid-column: span 12; }
@media (max-width: 1200px) {
    .mz-col-3 { grid-column: span 6; }
    .mz-col-4 { grid-column: span 6; }
    .mz-col-8 { grid-column: span 12; }
}
@media (max-width: 760px) {
    .mz-body { padding: 16px 14px 48px; }
    [class^="mz-col-"], [class*=" mz-col-"] { grid-column: span 12; }
}

/* ---- cards ---- */
.mz-card {
    background: var(--mz-card);
    border: 1px solid var(--mz-line);
    border-radius: var(--mz-radius);
    box-shadow: var(--mz-shadow);
    padding: 18px 20px;
}
.mz-card-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.mz-card-h h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--mz-navy); }
.mz-card-h span { font-size: 11.5px; color: var(--mz-muted); }

/* ---- KPI cards ---- */
.mz-kpi {
    background: var(--mz-card);
    border: 1px solid var(--mz-line);
    border-radius: var(--mz-radius);
    box-shadow: var(--mz-shadow);
    padding: 18px 20px;
    position: relative; overflow: hidden;
}
.mz-kpi::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
    width: 4px; background: var(--mz-gold);
}
.mz-kpi.navy::before { background: var(--mz-navy); }
.mz-kpi .k-label { font-size: 12.5px; color: var(--mz-muted); font-weight: 600; }
.mz-kpi .k-value { font-size: 30px; font-weight: 800; color: var(--mz-navy); margin: 6px 0 2px; letter-spacing: -.02em; }
.mz-kpi .k-foot  { font-size: 11px; color: var(--mz-muted); }
.mz-kpi.hero { background: linear-gradient(135deg, var(--mz-navy), var(--mz-navy-2)); border-color: transparent; }
.mz-kpi.hero::before { background: var(--mz-gold); }
.mz-kpi.hero .k-label, .mz-kpi.hero .k-foot { color: #AEBED8; }
.mz-kpi.hero .k-value { color: #fff; }

/* ---- data tables ---- */
.mz-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mz-table thead th {
    text-align: right; padding: 9px 12px; color: var(--mz-muted);
    font-weight: 700; font-size: 11.5px; border-bottom: 2px solid var(--mz-line);
}
.mz-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--mz-line); }
.mz-table tbody tr:hover { background: #FAFBFC; }
.mz-badge {
    display: inline-block; min-width: 30px; text-align: center;
    padding: 3px 9px; border-radius: 7px; font-weight: 800; font-size: 12px;
    background: var(--mz-gold-bg); color: var(--mz-gold);
}
.mz-yn { font-size: 11.5px; font-weight: 700; }
.mz-yn.y { color: var(--mz-ok); }
.mz-yn.n { color: var(--mz-muted); }

/* ---- states ---- */
.mz-empty { text-align: center; padding: 40px 20px; color: var(--mz-muted); font-size: 13.5px; }
.mz-error {
    margin: 16px 28px; padding: 14px 16px; border-radius: 12px;
    background: #FCF0EE; border: 1px solid #F0C9C1; color: var(--mz-err); font-size: 13px;
}
.mz-loading { display: grid; place-items: center; padding: 60px; color: var(--mz-muted); }
.mz-skel {
    height: 8px; border-radius: 4px; background: linear-gradient(90deg,#eef1f5,#f6f8fa,#eef1f5);
    background-size: 200% 100%; animation: mz-sh 1.3s infinite;
}
@keyframes mz-sh { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* =====================================================================
   Feature/partner list components — styled in Mazaya colours.
   (These components came from the original dashboard; their classes
   are themed here so rows read cleanly: name, gold value, percent bar.)
   ===================================================================== */
.empty-state { text-align: center; padding: 32px 16px; color: var(--mz-muted); font-size: 13px; }

.rows-list, .stacked-list { display: flex; flex-direction: column; }

.stat-row, .stacked-row {
    padding: 12px 2px;
    border-bottom: 1px solid var(--mz-line);
}
.stat-row:last-child, .stacked-row:last-child { border-bottom: none; }

.row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.row-text { min-width: 0; flex: 1; }
.row-name {
    font-size: 13.5px; font-weight: 700; color: var(--mz-navy);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-sub {
    font-size: 11.5px; color: var(--mz-muted); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.row-values { text-align: left; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; }
.row-values b { font-size: 17px; font-weight: 800; color: var(--mz-gold); line-height: 1.1; }
.row-values small { font-size: 11px; color: var(--mz-muted); margin-top: 1px; }

/* percent track */
.row-track {
    margin-top: 9px; height: 6px; border-radius: 4px;
    background: #EEF1F5; overflow: hidden;
}
.row-track > span {
    display: block; height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--mz-gold), var(--mz-gold-soft));
}

/* the ranking / feature tables */
.modern-table, .feature-table, .ranking-table, .compact-feature-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.modern-table thead th, .feature-table thead th,
.ranking-table thead th, .compact-feature-table thead th {
    text-align: right; padding: 9px 12px; color: var(--mz-muted);
    font-weight: 700; font-size: 11.5px; border-bottom: 2px solid var(--mz-line);
}
.modern-table tbody td, .feature-table tbody td,
.ranking-table tbody td, .compact-feature-table tbody td {
    padding: 10px 12px; border-bottom: 1px solid var(--mz-line);
}
.modern-table tbody tr:hover, .feature-table tbody tr:hover,
.ranking-table tbody tr:hover, .compact-feature-table tbody tr:hover { background: #FAFBFC; }
.compact td, .compact th { padding-top: 7px; padding-bottom: 7px; }

/* rank / count badge inside those tables */
.feature-table .badge, .ranking-table .badge, .modern-table .badge, .badge {
    display: inline-block; min-width: 28px; text-align: center;
    padding: 3px 9px; border-radius: 7px; font-weight: 800; font-size: 12px;
    background: var(--mz-gold-bg); color: var(--mz-gold);
}

/* these components sometimes wrap themselves in their own panel/title;
   inside our cards we neutralise that so they sit flush */
.panel { background: transparent; border: none; box-shadow: none; padding: 0; }
.panel-title { display: none; }