/* ── Vue Commercial — bandeau & layout (scopé .view-commercial) ───────────── */
/* Header : barre plus aérée + dégradé subtil + nav en pilule centrée. */
.view-commercial .hdr {
    height: 64px;
    padding: 0 28px;
    background: linear-gradient(180deg, var(--bg2) 0%, color-mix(in srgb, var(--bg2) 88%, var(--bg)) 100%);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.20);
}
.view-commercial .hdr-left,
.view-commercial .hdr-right { flex: 1; }
.view-commercial .hdr-right { justify-content: flex-end; }
.view-commercial .hdr-logo span { letter-spacing: 1.5px; }

/* Conteneur nav : pilule encadrée, ne s'étire pas (reste centrée). */
.view-commercial .hdr-center {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 1 auto;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14);
}
.view-commercial .nav-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 600;
    white-space: nowrap;
}
/* Déconnexion : présente dans la barre flottante mobile uniquement. */
.view-commercial .nav-logout-m { display: none; }
.view-commercial .nav-tab:hover { color: var(--text); background: var(--bg3); }
.view-commercial .nav-tab.active {
    color: #fff;
    background: var(--blue);
    border-color: transparent;
    box-shadow: 0 2px 10px var(--blue-glow);
}

/* Pages : contenu centré avec une largeur max généreuse (occupe l'espace
   sur grand écran sans s'étaler bord à bord). */
.view-commercial .page {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px 28px;
}
/* Détail fiche client : sort du plafond 1600px de .page (breakout classique
   left:50% + margin-left:-50vw, ignore le padding de l'ancêtre) — pleine largeur
   viewport, cf. demande. Repadding horizontal identique à .page pour ne pas coller
   le contenu aux bords de l'écran. */
#portefeuilleDetail {
    width: 100vw; max-width: 100vw;
    position: relative; left: 50%; right: 50%;
    margin-left: -50vw; margin-right: -50vw;
    padding: 0 28px; box-sizing: border-box;
}

/* ── Vue Commercial — tout ce qui n'est PAS desktop (tablette + téléphone) ────
   Le menu quitte le header et devient une barre HORIZONTALE collée en BAS de
   l'écran (bottom nav), pleine largeur. Header épuré : logo + badge rôle. */
@media (max-width: 1100px) {
    /* IMPORTANT : on retire le backdrop-filter du header (.hdr a un
       `backdrop-filter: blur(10px)` global). Un backdrop-filter crée un bloc
       englobant : sinon la barre `position:fixed` ci-dessous se cale sur le bas
       du HEADER (donc en haut de page) au lieu du bas de l'écran. */
    .view-commercial .hdr { padding: 8px 14px; gap: 8px; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .view-commercial .hdr-left { display: flex; flex: 1 1 auto; }
    .view-commercial .hdr-right { display: none; }
    /* La déconnexion du header est masquée : elle vit en bout de la barre du bas. */
    .view-commercial .hdr-logout-m { display: none; }

    /* Menu = barre horizontale pleine largeur, fixée en bas de l'écran. */
    .view-commercial .hdr-center {
        position: fixed;
        left: 0; right: 0;
        bottom: 0;
        z-index: 200;
        display: flex;
        gap: 0;
        width: 100%;
        max-width: none;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border: none;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: var(--bg2);
        box-shadow: 0 -4px 18px rgba(16,37,58,0.14);
    }
    .view-commercial .nav-tab {
        flex: 1 1 0;
        justify-content: center;
        width: auto; height: 56px;
        padding: 0;
        border-radius: 0;
        gap: 0;
    }
    /* Onglet actif : fond discret + liseré rouge en haut (l'emoji ne se teinte
       pas, le liseré fait le repère — pas de pilule rouge ici). */
    .view-commercial .nav-tab.active {
        background: var(--bg3);
        color: var(--text);
        box-shadow: inset 0 2px 0 var(--blue);
    }
    /* Icône bien visible, titre retiré. */
    .view-commercial .nav-ico { font-size: 1.45rem; line-height: 1; }
    .view-commercial .nav-lbl { display: none; }
    /* Déconnexion en bout de barre : révélée + nuance visuelle. */
    .view-commercial .nav-logout-m { display: inline-flex; }
    .view-commercial .nav-logout-m .nav-ico { color: var(--red); }

    /* Marge basse des pages pour ne pas passer sous la barre. */
    .view-commercial .page { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* Conteneur scrollable autour des tableaux denses (.cmd-table) : évite que le
   tableau déborde la page sur petit écran — on scrolle dans le tableau, pas
   dans toute la mise en page. Inoffensif sur desktop (tableau en 100%). */
.cmd-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Vue Commercial — affinages spécifiques téléphone (la bottom-nav, elle, est
   gérée plus haut dès ≤1100px) ─────────────────────────────────────────────── */
@media (max-width: 760px) {
    /* Pages : marges latérales réduites (la marge basse vient du bloc ≤1100). */
    .view-commercial .page { padding-left: 12px; padding-right: 12px; padding-top: 14px; }

    /* KPI hero empilés, valeurs un peu plus petites. */
    .view-commercial .hero-grid { grid-template-columns: 1fr; gap: 10px; }
    .view-commercial .hero-tile { padding: 14px 16px; gap: 12px; }
    .view-commercial .hero-tile-icon { font-size: 1.9rem; }
    .view-commercial .hero-tile-value { font-size: 1.9rem; }

    /* KPI factures : 2 colonnes au lieu de 4 (override du grid inline). */
    #facturesKpis { grid-template-columns: repeat(2, 1fr) !important; }

    /* Tableaux denses : largeur mini pour rester lisibles, le wrap scrolle. */
    .view-commercial .cmd-table { min-width: 640px; }
    /* …sauf l'historique commandes du détail client : on masque Lignes + Poids
       (secondaires) → 4 colonnes (N° · Date · CA · Palette) qui tiennent sans scroll. */
    #clientDetailContent .cmd-table { min-width: 0; }
    #clientDetailContent .cmd-table th:nth-child(3), #clientDetailContent .cmd-table td:nth-child(3),
    #clientDetailContent .cmd-table th:nth-child(4), #clientDetailContent .cmd-table td:nth-child(4) { display: none; }

    /* Calendrier : pastilles + petites pour tenir 7 colonnes sans déborder. */
    .view-commercial #calendarGrid { gap: 4px !important; }
    .view-commercial .calendar-day { width: 36px; height: 36px; margin-right: 0; margin-bottom: 0; }
    .view-commercial .calendar-day-num { font-size: 0.72rem; }
    .view-commercial .calendar-day-count { font-size: 0.55rem; }

    /* Tournée : carte plus basse + actions geo sur toute la largeur. */
    .leaflet-host { height: 320px; }
    .geo-widget-header { padding: 12px 14px; }
    .geo-widget-h1 { font-size: 1rem; }
    .geo-widget-robot { font-size: 1.8rem; }
    .geo-widget-actions { width: 100%; justify-content: space-between; }
    .tournee-panel { position: static; }
}

@media (max-width: 480px) {
    /* Très petits écrans : on masque le nom (déjà visible dans le menu rôle). */
    .view-commercial .user-badge { display: none; }
    /* Barre horizontale un poil plus basse sur très petit écran. */
    .view-commercial .nav-tab { height: 52px; padding: 0; }
    .view-commercial .nav-ico { font-size: 1.35rem; }
    .view-commercial .hero-tile-value { font-size: 1.7rem; }
}

/* ── « Mes pièces » — table dense repliée en cartes sur mobile ────────────────
   Desktop / tablette (≥861px) : vraie table, scroll horizontal maîtrisé par
   min-width. Mobile (≤860px) : chaque <tr> devient une carte empilée → zéro
   scroll horizontal.

   Les libellés et masquages ciblent les colonnes PAR POSITION (nth-child) —
   même pattern que l'historique client plus haut. L'ordre DOIT rester aligné
   sur renderFacturesTable() dans commercial.js :
     1 N°Cmd · 2 BL · 3 Facture · 4 Date · 5 Client · 6 Lignes · 7 Sous-réfs ·
     8 CA · 9 Commission · 10 Score · 11 Statut · 12 Origine · 13 Export
   Si l'ordre change là-bas, mettre à jour les nth-child ci-dessous. */
.factures-table { min-width: 820px; }

/* ── Mes pièces : actions de la colonne « Export » ──────────────────────────
   Proforma / Mail / Masquer / Recommander / Ouvrir-convertir partagent une
   seule primitive : elles s'empilent et s'étirent à la largeur de la cellule.
   min-height 38px = cible tactile atteignable au doigt (le gabarit précédent,
   0.78rem + 4px de padding, tombait à ~26px). Toute nouvelle action de pièce
   passe par .piece-act — ne pas réintroduire de style inline par bouton. */
.piece-act-col { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.piece-act {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-height: 38px; padding: 9px 12px;
    font-size: 0.84rem; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg2); color: var(--text); cursor: pointer;
    transition: background .12s, filter .12s;
}
.piece-act:hover:not(:disabled) { background: var(--bg3); }
.piece-act:disabled { opacity: 0.5; cursor: not-allowed; }
/* Masquer : action de retrait — volontairement en retrait visuel. */
.piece-act.is-muted { background: var(--bg); color: var(--muted); }
.piece-act.is-muted:hover:not(:disabled) { background: var(--bg3); color: var(--text); }
/* Ouvrir / convertir : action principale d'un devis émis. */
.piece-act.is-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.piece-act.is-primary:hover:not(:disabled) { filter: brightness(1.08); }
/* Supprimer : action destructive et définitive — contour rouge au repos (se
   distingue du is-primary plein), bascule en plein au survol pour l'intention. */
.piece-act.is-danger { background: transparent; border-color: var(--red-dim); color: var(--red); }
.piece-act.is-danger:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: #fff; }
/* Le <select> proforma (pièces Divalto) suit le même gabarit — display:block
   car inline-flex n'est pas fiable sur un select. */
select.piece-act { display: block; width: 100%; text-align: center; }

@media (max-width: 860px) {
    .factures-table { min-width: 0; width: 100%; }
    .factures-table thead { display: none; }
    .factures-table, .factures-table tbody { display: block; width: 100%; }

    .factures-table tr {
        display: flex; flex-direction: column; gap: 2px;
        border: 1px solid var(--border) !important; border-radius: 10px;
        background: var(--bg2); padding: 10px 12px; margin-bottom: 10px;
    }
    .factures-table td {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; text-align: right !important;
        padding: 5px 0 !important; border: none !important;
        white-space: normal !important; max-width: none !important;
    }
    /* Libellé de colonne (à gauche), injecté par position. */
    .factures-table td::before {
        flex: 0 0 auto; text-align: left;
        font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.03em; color: var(--muted);
    }
    .factures-table td:nth-child(1)::before  { content: "N° Cmd"; }
    .factures-table td:nth-child(4)::before  { content: "Date"; }
    .factures-table td:nth-child(6)::before  { content: "Lignes"; }
    .factures-table td:nth-child(8)::before  { content: "CA"; }
    .factures-table td:nth-child(9)::before  { content: "Commission"; }
    .factures-table td:nth-child(11)::before { content: "Suivi"; }
    .factures-table td:nth-child(12)::before { content: "Origine"; }

    /* Client (5) = en-tête de carte : pleine largeur, en haut, sans libellé. */
    .factures-table td:nth-child(5) {
        order: -1; justify-content: flex-start;
        font-size: 0.95rem !important; font-weight: 700;
        padding-bottom: 8px !important; margin-bottom: 4px;
        border-bottom: 1px solid var(--border) !important;
    }
    /* Export (13) = actions en pleine largeur, en bas de carte. */
    .factures-table td:nth-child(13) { display: block; padding-top: 8px !important; }
    .factures-table td:nth-child(13)::before { content: none; }

    /* Colonnes secondaires masquées sur mobile (info déjà portée par la carte
       ou par la colonne Suivi). */
    .factures-table td:nth-child(2),   /* BL */
    .factures-table td:nth-child(3),   /* Facture */
    .factures-table td:nth-child(7),   /* Sous-réfs */
    .factures-table td:nth-child(10) { /* Score palette */
        display: none !important;
    }
}

/* ── Header sticky sous le bandeau hors-ligne (fixed top:0) ────────────────
   offline.js publie la hauteur du bandeau dans --bp-ban-h ; le header collant
   se cale juste en dessous → plus de chevauchement quand on scrolle. */
.hdr { top: var(--bp-ban-h, 0px); }

/* Bandeau hors-ligne : compact sur mobile (sinon trop haut quand coupé). */
@media (max-width: 600px) {
    #bp-offline-banner {
        gap: 8px !important; padding: 5px 10px !important;
        flex-wrap: wrap !important; row-gap: 6px !important;
        font-size: 11px !important; line-height: 1.2 !important;
    }
    #bp-offline-banner a {
        min-height: 30px !important; padding: 5px 12px !important;
        font-size: 12px !important; border-width: 1px !important;
    }
}

.card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
.card-title { font-family: var(--font-brand); font-size: 0.85rem; font-weight: 600; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.card-a { border-top: 2px solid var(--red); }
.card-b { border-top: 2px solid var(--teal); }

.top-row  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.main-row { display: grid; grid-template-columns: 280px 1fr 1fr; gap: 14px; margin-bottom: 14px; }

input[type=text], input[type=password] { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; color: var(--text); font-size: 0.85rem; margin-bottom: 8px; transition: border-color 0.2s; }
input:focus { outline: none; border-color: var(--blue); }

.client-wrap { position: relative; }
#clientDropdown { display:none; border:1px solid var(--border); border-radius:var(--radius-md); max-height:220px; overflow-y:auto; background:var(--bg3); position:absolute; width:100%; z-index:200; box-shadow: 0 8px 32px #00000060; }
.client-opt { padding:9px 13px; cursor:pointer; border-bottom:1px solid var(--border); font-size:0.82rem; }
.client-opt:hover { background: var(--bg4); }
.client-opt strong { color: var(--red); }
#clientInfo { display:none; font-size:0.75rem; color:var(--muted); background:var(--bg3); padding:6px 10px; border-radius:var(--radius-sm); margin-bottom:0; border-left: 2px solid var(--red); }

.pal-opts { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.pal-opt { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 6px; text-align: center; cursor: pointer; transition: all 0.15s; background: var(--bg3); }
.pal-opt:hover { border-color: var(--muted); }
.pal-opt.sel-a { border-color: var(--red); background: var(--bg4); box-shadow: 0 0 12px var(--red-glow); }
.pal-opt.sel-b { border-color: var(--teal); background: var(--bg4); box-shadow: 0 0 12px var(--teal)20; }
.pal-opt .pname { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.pal-opt .pdet  { font-size: 0.68rem; color: var(--muted); margin: 2px 0; }
.pal-opt .pprix { font-size: 0.75rem; font-weight: 700; }
.pal-opt.sel-a .pprix { color: var(--red); }
.pal-opt.sel-b .pprix { color: var(--teal); }

.refs-container { max-height: 480px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ref-row { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.ref-row:hover { background: var(--bg3); }
.ref-name { flex: 1; min-width: 0; }
.ref-name strong { color: var(--red); font-size: 0.82rem; }
.ref-name .meta { font-size: 0.66rem; color: var(--muted); }
.qty-grp { display: flex; align-items: center; gap: 3px; }
.qbtn { width: 20px; height: 20px; border-radius: 4px; border: 1px solid; font-size: 0.8rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; transition: all 0.1s; }
.qbtn-a { border-color: var(--red-dim); background: var(--bg3); color: var(--red); }
.qbtn-a:hover { background: var(--red); color: white; }
.qbtn-b { border-color: var(--teal-dim); background: var(--bg3); color: var(--teal); }
.qbtn-b:hover { background: var(--teal-dim); color: white; }
.qval { min-width: 22px; text-align: center; font-size: 0.82rem; font-weight: 700; }
.qval-a { color: var(--red); } .qval-b { color: var(--teal); }
.sep { color: var(--border); }

.pal-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.pal-table th { padding: 6px 8px; text-align: right; font-size: 0.68rem; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); letter-spacing: 1px; text-transform: uppercase; }
.pal-table th:first-child { text-align: left; }
.pal-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: right; color: var(--text); }
.pal-table td:first-child { text-align: left; }
.pal-table tr:hover td { background: var(--bg3); }
.pal-table .total-row td { font-weight: 700; background: var(--bg3); border-top: 1px solid var(--border); color: var(--text); }
.pal-table .pal-row td { color: var(--muted); font-style: italic; }
.btn-rm { background: none; border: none; color: var(--border); cursor: pointer; font-size: 0.85rem; padding: 0 2px; transition: color 0.1s; }
.btn-rm:hover { color: var(--red); }
.vert { color: var(--green); font-weight: 600; } .rouge { color: var(--red); font-weight: 600; }

.sbar { border-radius: var(--radius-sm); padding: 7px 12px; font-size: 0.75rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; margin-top: 10px; background: var(--bg3); border: 1px solid var(--border); }
.sbar-a span { color: var(--red); font-weight: 700; }
.sbar-b span { color: var(--teal); font-weight: 700; }

.sim-btn { display: block; width: 100%; padding: 14px; background: var(--red); color: white; border: none; border-radius: var(--radius-md); font-family: var(--font-brand); font-size: 1.1rem; font-weight: 700; letter-spacing: 2px; cursor: pointer; transition: all 0.2s; box-shadow: 0 0 20px var(--red-glow); }
.sim-btn:hover { background: var(--red-dim); box-shadow: 0 0 40px var(--red-glow); }
.sim-btn:disabled { background: var(--bg4); color: var(--muted); box-shadow: none; cursor: not-allowed; }

.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.res-col { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; background: var(--bg2); }
.res-col.rc-a { border-top: 2px solid var(--red); }
.res-col.rc-b { border-top: 2px solid var(--teal); }
.res-col.alert-col { border-color: var(--red); background: #DC262608; }
.res-col h3 { font-family: var(--font-brand); font-size: 1rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.rc-a h3 { color: var(--red); } .rc-b h3 { color: var(--teal); }

.compte { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-bottom: 14px; }
.compte td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text); }
.compte td:nth-child(2) { text-align: right; color: var(--muted); font-size: 0.72rem; }
.compte td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.compte .row-sep td { border-top: 1px solid var(--border); padding-top: 8px; }
.compte .row-final td { font-weight: 700; font-size: 0.9rem; background: var(--bg3); }

.seuil-alert { background: #DC262618; border: 1px solid var(--red); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 12px; font-size: 0.82rem; color: var(--red); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.seuil-ok    { background: #16A34A18; border: 1px solid var(--green); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 12px; font-size: 0.82rem; color: var(--green); font-weight: 600; display: flex; align-items: center; gap: 8px; }

.tarif-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px; background: var(--bg3); }
.tarif-card.best { border-color: var(--green); }
.tc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px; }
.tc-name { font-weight: 700; font-size: 0.85rem; color: var(--text); }
.tc-svc  { font-size: 0.72rem; color: var(--muted); }
.tc-amt  { font-size: 1.1rem; font-weight: 700; }
.rc-a .tc-amt { color: var(--red); } .rc-b .tc-amt { color: var(--teal); }
.tc-marge { font-size: 0.78rem; display: flex; justify-content: space-between; background: var(--bg4); padding: 5px 8px; border-radius: var(--radius-sm); margin-bottom: 5px; color: var(--muted); }
.tc-det { font-size: 0.7rem; color: var(--muted); }
.det-r  { display: flex; justify-content: space-between; padding: 1px 0; }

/* Formes (structure) uniquement — les tons (background/color/border) des
   variantes .pill-* et .delta-* sont centralisés dans components.css § Tons
   partagés "tag", pour éviter la duplication avec .trk-badge--*. */
.taux-pill { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-lg); margin-left: 4px; }

/* Delta pills (variations vs M-1 / N-1 dans la vue dirco) */
.delta-pill { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }

.badge { display:inline-block; color:white; font-size:var(--font-xs); padding:2px 7px; border-radius:var(--radius-md); margin-left:4px; font-weight:600; }

/* Badge « code OP détecté » (temps réel, sous le sélecteur de code OP). */
.codeop-hint { margin-bottom:4px; font-size:0.76rem; line-height:1.3; color:var(--muted); }
.codeop-hint:empty { margin-bottom:0; }
.codeop-hint--ok   { color:var(--green); }
.codeop-hint--lock { color:var(--orange); }
.codeop-hint--warn { color:var(--red); font-weight:600; }
.codeop-hint strong { font-weight:700; }
.b-red  { background: var(--red); } .b-teal { background: var(--teal-dim); }
.b-green{ background: #1E8449; }    .b-warn { background: var(--red); } .b-ok { background: #1E8449; }

.export-btn { padding: 8px 16px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); font-size: 0.82rem; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.15s; white-space: nowrap; }
.export-btn:hover { border-color: var(--text); color: var(--text); }
#btnToggleCalendar { color: var(--muted); }
#btnToggleCalendar:hover { border-color: var(--blue); color: var(--blue); }

.histo-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.histo-table th { background: var(--bg3); color: var(--muted); padding: 10px 14px; text-align: left; font-size: 0.72rem; font-weight: 600; border-bottom: 1px solid var(--border); letter-spacing: 1px; text-transform: uppercase; }
.histo-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.histo-table tr:hover td { background: var(--bg3); }
.histo-link { color: var(--blue); cursor: pointer; text-decoration: underline; font-size: 0.78rem; }

.loading { text-align:center; padding:32px; color:var(--muted); }
.empty   { text-align:center; padding:32px; color:var(--border); font-size:0.88rem; }
.kpi-src { position:relative; display:inline-flex; align-items:center; }
.kpi-src-icon { display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; border-radius:50%; border:1px solid var(--muted); color:var(--muted); font-size:0.55rem; font-weight:700; cursor:default; margin-left:4px; line-height:1; flex-shrink:0; }
.kpi-src-icon:hover { border-color:var(--text); color:var(--text); }
.kpi-src-tip { display:none; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--bg4); border:1px solid var(--border); border-radius:6px; padding:6px 10px; font-size:0.68rem; color:var(--muted); white-space:nowrap; z-index:200; pointer-events:none; box-shadow:var(--shadow-md); }
.kpi-src-tip strong { color:var(--text); }
.kpi-src-tip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--border); }
.kpi-src-icon:hover + .kpi-src-tip,
.kpi-src:hover .kpi-src-tip { display:block; }
details summary { cursor: pointer; font-size: 0.72rem; color: var(--muted); margin-top: 4px; }
details summary:hover { color: var(--text); }