/* ============================================================================
   Habillage « Comptoir » — jetons + utilitaires partagés (D-CPT-4).
   Source : maquette Claude Design « Module PV.dc.html » (thème émeraude), reprise
   À L'IDENTIQUE pour le clair ; la déclinaison SOMBRE est dérivée de la PaletteDark
   de PetalesTheme (pas de maquette sombre — à valider à l'œil, D-CPT-4).
   Consommé par les composants partagés Petales.Erp.Ui (SparkBars, TintedThumb,
   InitialsAvatar…) et par le chrome du host (classes pt-nav-*, lot L2).
   Cf. DOCUMENTS_DE_REFERENCE/PLAN_ACTION_HABILLAGE_COMPTOIR.md.
   ============================================================================ */

:root {
    /* Jetons — thème CLAIR (émeraude, jetons du template). */
    --pt-accent: #0d9d6b;
    --pt-accent-2: #0a7d52;
    --pt-accent-soft: #dcf3e9;
    --pt-accent-glow: rgba(13, 157, 107, .35);
    --pt-bg: #f3f6f4;
    --pt-card: #ffffff;
    --pt-line: #e6eae8;
    --pt-track: #eef1ef;
    --pt-row-hover: #f6f9f7;
    --pt-ink: #14211c;
    --pt-ink-soft: #5b6a63;
    --pt-ink-mute: #8b958f;

    /* Sidebar — TOUJOURS sombre (identique clair/sombre, cf. D-CPT-4). */
    --pt-sb-bg: #0e1a15;
    --pt-sb-line: #1d2c25;
    --pt-sb-title: #eaf2ee;
    --pt-sb-fg: #cdd9d3;
    --pt-sb-mute: #7c8d85;
    --pt-sb-hover: #172620;
    --pt-sb-active: #15271f;

    /* Tons de badge (fond pastel / encre) du template. */
    --pt-tone-green-bg: #dcf3e9;  --pt-tone-green-fg: #0a7d52;
    --pt-tone-amber-bg: #fdf0d5;  --pt-tone-amber-fg: #9a6a08;
    --pt-tone-red-bg: #fbe3e3;    --pt-tone-red-fg: #b3261e;
    --pt-tone-blue-bg: #e3edfb;   --pt-tone-blue-fg: #1f5fb8;
    --pt-tone-gray-bg: #eceef1;   --pt-tone-gray-fg: #5b6470;
    --pt-tone-violet-bg: #ece9fb; --pt-tone-violet-fg: #5b46c9;
    /* Duos supplémentaires des vignettes teintées (TintedThumb/ProduitThumb — revue L2). */
    --pt-tone-orange-bg: #fde8d4; --pt-tone-orange-fg: #c2701e;
    --pt-tone-rose-bg: #f6e0ef;   --pt-tone-rose-fg: #b03a86;
}

/* Déclinaison SOMBRE — dérivée de PetalesTheme.PaletteDark (sans maquette).
   La classe theme-dark est posée par les coquilles (pont DEC-PV-2 / D-CPT-10) :
   aujourd'hui sur le MudContainer des pages, en L2 aussi sur la racine du layout. */
.theme-dark {
    --pt-accent-soft: rgba(13, 157, 107, .18);
    --pt-accent-2: #35c391; /* encre accent relevée pour rester lisible sur fond sombre */
    --pt-bg: #0b1410;
    --pt-card: #12211b;
    --pt-line: #1d2c25;
    --pt-track: #1a2a23;
    --pt-row-hover: #16241e;
    --pt-ink: #eaf2ee;
    --pt-ink-soft: #9fb0a8;
    --pt-ink-mute: #7c8d85;

    --pt-tone-green-bg: rgba(13, 157, 107, .18);  --pt-tone-green-fg: #6fdcae;
    --pt-tone-amber-bg: rgba(208, 160, 42, .16);  --pt-tone-amber-fg: #e6c26a;
    --pt-tone-red-bg: rgba(224, 90, 77, .16);     --pt-tone-red-fg: #f0907f;
    --pt-tone-blue-bg: rgba(92, 159, 224, .16);   --pt-tone-blue-fg: #8fc0ec;
    --pt-tone-gray-bg: rgba(140, 150, 160, .16);  --pt-tone-gray-fg: #aab4ad;
    --pt-tone-violet-bg: rgba(123, 104, 238, .18);--pt-tone-violet-fg: #b3a6f2;
    --pt-tone-orange-bg: rgba(194, 112, 30, .16); --pt-tone-orange-fg: #e8a86a;
    --pt-tone-rose-bg: rgba(176, 58, 134, .16);   --pt-tone-rose-fg: #e393c4;
}

/* ── Utilitaires ──────────────────────────────────────────────────────────── */

/* Chiffres en IBM Plex Mono (D-CPT-5) — police chargée par app.css. */
.pt-mono { font-family: 'IBM Plex Mono', monospace; }

/* Carte Comptoir (rayon 14, liseré, surface). */
.pt-card {
    background: var(--pt-card);
    border: 1px solid var(--pt-line);
    border-radius: 14px;
}

/* Badge pastel (tons du template) : <span class="pt-badge pt-badge-green">Ouvert</span>. */
.pt-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.pt-badge-green  { background: var(--pt-tone-green-bg);  color: var(--pt-tone-green-fg); }
.pt-badge-amber  { background: var(--pt-tone-amber-bg);  color: var(--pt-tone-amber-fg); }
.pt-badge-red    { background: var(--pt-tone-red-bg);    color: var(--pt-tone-red-fg); }
.pt-badge-blue   { background: var(--pt-tone-blue-bg);   color: var(--pt-tone-blue-fg); }
.pt-badge-gray   { background: var(--pt-tone-gray-bg);   color: var(--pt-tone-gray-fg); }
.pt-badge-violet { background: var(--pt-tone-violet-bg); color: var(--pt-tone-violet-fg); }

/* Chip d'évolution des KPI (+8,4 % / -0,6 %) — D-CPT-6 : exacte ou absente. */
.pt-delta-up, .pt-delta-down {
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}
.pt-delta-up   { color: var(--pt-tone-green-fg); background: var(--pt-tone-green-bg); }
.pt-delta-down { color: var(--pt-tone-red-fg);   background: var(--pt-tone-red-bg); }

/* Sparkline en barres (composant SparkBars) : barres proportionnelles, la queue en accent. */
.pt-spark {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 30px;
    margin-top: 8px;
}
.pt-spark > i {
    display: block;
    flex: 1;
    min-width: 3px;
    border-radius: 2px;
    background: var(--pt-track);
}
.pt-spark > i.on { background: var(--pt-accent); }

/* Vignette produit teintée (composants TintedThumb / ProduitThumb) — la teinte (fond/encre) est
   posée en style inline par le composant (duo stable dérivé du nom). ProduitThumb (D-CPT-11)
   superpose l'image RÉELLE du produit quand elle existe : l'<img> couvre la pastille (object-fit)
   et se masque elle-même (onerror) si le produit n'a pas de vignette → la teinte reste visible. */
.pt-thumb {
    position: relative;
    overflow: hidden;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pt-thumb > img.pt-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Avatar à initiales (composant InitialsAvatar) — accent-soft / encre accent. */
.pt-avatar {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 9px;
    background: var(--pt-accent-soft);
    color: var(--pt-accent-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}

/* Barre de progression fine (répartitions) : <div class="pt-track-bar"><i style="width:64%"></i></div>. */
.pt-track-bar {
    height: 9px;
    background: var(--pt-track);
    border-radius: 6px;
    overflow: hidden;
}
.pt-track-bar > i {
    display: block;
    height: 100%;
    background: var(--pt-accent);
    border-radius: 6px;
}

/* ── Patron « écran table » Comptoir (lot L4) — habillage OPT-IN des grilles ──
   Poser Class="pt-table" sur un GenericCrudGrid/MudDataGrid OU un MudTable (mêmes
   classes mud-table-*) : carte 14 px, en-têtes en petites capitales sur fond doux,
   survol de ligne, liserés discrets. Le contenu des cellules reste le choix de la
   colonne (pt-mono pour les chiffres, StatusChip/pt-badge pour les états). */
.pt-table.mud-table {
    background: var(--pt-card);
    border: 1px solid var(--pt-line);
    border-radius: 14px;
    box-shadow: none;
    overflow: hidden;
}
.pt-table .mud-table-toolbar {
    padding: 10px 18px;
    border-bottom: 1px solid var(--pt-line);
}
.pt-table .mud-table-head .mud-table-cell {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pt-ink-mute);
    background: var(--pt-bg);
    border-bottom: 1px solid var(--pt-line);
}
.pt-table .mud-table-body .mud-table-cell {
    font-size: 13.5px;
    border-bottom: 1px solid var(--pt-line);
}
.pt-table .mud-table-body .mud-table-row:hover { background: var(--pt-row-hover); }
.pt-table .mud-table-pagination { border-top: 1px solid var(--pt-line); }

/* ── Navigation Comptoir (consommées par le chrome du host — lot L2) ─────────
   Sections PLATES toujours dépliées (D-CPT-2) : intitulé de groupe en petites
   capitales, items en pilule, actif = fond sb-active + encre accent, badge rouge. */
.pt-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 12px 14px;
}
.pt-nav-section {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pt-sb-mute);
    padding: 14px 10px 6px;
}
.pt-nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 38px;
    padding: 0 11px;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    margin-top: 2px;
    font-weight: 500;
    background: transparent;
    color: var(--pt-sb-fg);
    text-decoration: none;
}
.pt-nav-item:hover { background: var(--pt-sb-hover); color: var(--pt-sb-fg); }
.pt-nav-item.active {
    font-weight: 700;
    background: var(--pt-sb-active);
    color: var(--pt-accent);
}
.pt-nav-item .mud-icon-root {
    flex: none;
    font-size: 19px;
}
.pt-nav-label {
    flex: 1 1 auto;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Feuille de PREMIER NIVEAU (hors section) : respiration pour ne pas paraître appartenir
   à la section précédente (revue L2 — ex. « Stock du point de vente » après « Sorties »). */
.pt-nav-item.pt-nav-root { margin-top: 12px; }
.pt-nav-badge {
    flex: none;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e5484d;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pt-nav-item.active .pt-nav-badge { background: var(--pt-accent); }

/* Bloc marque en tête de tiroir (E3) : pastille accent + nom du module + sous-titre.
   Rendu comme une ANCRE (retour à l'atterrissage du module) — pas de soulignement. */
.pt-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 20px 18px 14px;
    text-decoration: none;
    flex: none;
}
.pt-brand-text {
    display: block;
    line-height: 1.1;
    min-width: 0;
}
.pt-brand-title,
.pt-brand-sub {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pt-brand-logo {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 9px;
    background: var(--pt-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px var(--pt-accent-glow);
}
.pt-brand-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--pt-sb-title);
    line-height: 1.1;
}
.pt-brand-sub {
    font-size: 11px;
    color: var(--pt-sb-mute);
    font-weight: 500;
    letter-spacing: .02em;
}

/* ── Responsive mobile/tablette (chantier D-RWD) — utilitaires GLOBAUX ────────
   Cibles : 390 px (mobile) et 768 px (tablette), ≥ 960 px inchangé (non-régression
   bureau). Principe : la PAGE ne défile JAMAIS horizontalement ; tout contenu
   intrinsèquement large (table, journal, éditeur de lignes) défile DANS sa carte. */

/* Enveloppe de défilement horizontal : à poser autour de toute table nue
   (MudSimpleTable, <table> natif) ou de tout bloc intrinsèquement large. */
.pt-scroll-x {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tables MudBlazor (MudTable / MudDataGrid / MudSimpleTable partagent
   .mud-table-container) : le rouleau natif défile horizontalement dans sa carte
   plutôt que de pousser la page au-delà du viewport. Sans effet sur bureau
   (aucun débordement ⇒ aucune barre). */
.mud-table .mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Dialogues sur MOBILE : quel que soit le MaxWidth demandé (Small/Medium/Large),
   la boîte occupe l'écran moins une marge fine — les marges Material de 32 px
   mangeaient un quart d'un écran de 390 px. Le plein écran explicite
   (mud-dialog-fullscreen) reste intact. */
@media (max-width: 599px) {
    .mud-dialog:not(.mud-dialog-fullscreen) {
        margin: 10px;
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
    }
    .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-title { padding: 12px 16px 8px; }
    .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-content { padding: 8px 16px; }
    .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-actions { padding: 8px 12px; flex-wrap: wrap; }
}

/* Onglets et fil d'Ariane : sur mobile, la rangée déborde en DÉFILEMENT discret
   (MudTabs sait déjà défiler ; le fil d'Ariane, non). */
@media (max-width: 767px) {
    .mud-breadcrumbs { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .mud-breadcrumbs ul { flex-wrap: nowrap; white-space: nowrap; }
}