/*
 * pdp-premium.css
 *
 * CSS PARTAGÉ de la refonte "premium" des écrans de file d'attente PDP :
 *   - FileAttentePdp (Émission)  — lib/view/FileAttentePdp.php
 *   - FactureRecue   (Réception) — lib/view/FactureRecue.php
 *
 * Deux niveaux de portée dans ce fichier (cf. sections plus bas) :
 *
 *   1. Style de grille de BASE — sélecteur générique ".k-grid", GLOBAL à
 *      TOUTES les grilles Kendo de mobi-demat (admin compris) : aération des
 *      lignes, hover, alignement droite des montants, boutons d'action
 *      discrets. Portée volontairement large — vérifié sans régression sur
 *      d'autres écrans admin (grilles CRUD classiques type TypesMimes).
 *
 *   2. Structurel + signature visuelle CIBLÉE — cartes de statut, onglets
 *      Type, pastille de statut consolidée, toolbar intégrée, ET la
 *      signature "fond + majuscules" des en-têtes (jugée trop marquée pour
 *      être imposée par défaut à tous les écrans admin). Scope : classe
 *      marqueur .pdp-premium, posée en PHP uniquement quand !$isAdmin,
 *      directement sur le wrapper .k-grid de CHAQUE écran :
 *          $crud->Grid->attr('class', 'pdp-premium');
 *      (ou équivalent jQuery .addClass('pdp-premium') si la grille n'est pas
 *      construite via GridWizard). L'id du wrapper (#FileAttentePdp,
 *      #FactureRecue…) étant potentiellement partagé entre admin et
 *      souscripteur selon l'écran, on ne peut pas s'appuyer sur lui seul
 *      pour distinguer les deux contextes — d'où le scope générique
 *      ".k-grid.pdp-premium" plutôt qu'un id précis. L'admin ne reçoit
 *      jamais cette classe, et le HTML des cartes/onglets/pastille n'est
 *      généré QUE côté souscripteur dans les vues -> admin strictement
 *      inchangé sur les deux écrans.
 *
 * Basé sur les design tokens mobi-base/css/design-tokens.css (var(--x, repli)
 * partout : fonctionne même si ce fichier n'est pas chargé avant celui-ci).
 */

/* ── Bande compacte : cartes de statut + onglets Type sur une seule ligne ──
 * Rendue DANS la toolbar native de la grille Kendo (item toolbar avec
 * template) — pas une insertion DOM externe. Tout tient dans
 * .fapdp-header-row (flex, wrap seulement si la largeur ne suffit plus). Un
 * séparateur vertical discret distingue les deux groupes (cartes / onglets). */
.fapdp-header-row{
	display:flex;align-items:center;gap:var(--space-sm, 8px);flex-wrap:wrap;
	/* Se contracte dans le k-toolbar-item Kendo qui l'englobe (flex parent) au
	 * lieu de s'étaler à sa largeur naturelle — sinon la toolbar déborde et
	 * Kendo replie les boutons (ex. "Exporter vers Excel") dans le menu
	 * overflow (⋮) en permanence. */
	min-width:0;flex:1 1 auto;
}
.fapdp-header-sep{
	width:1px;align-self:stretch;background:var(--color-divider, #dbdbdb);
	min-height:32px;flex-shrink:0;
}

/* ── Cartes de statut (compactes) ─────────────────────────────────────── */
/* Padding/gap resserrés : la bande vit DANS la toolbar Kendo, aux côtés du
 * caption et des boutons d'action — moins de place que sur une ligne dédiée. */
.fapdp-cards{display:flex;gap:3px;flex-wrap:wrap;min-width:0}
.fapdp-card{
	display:flex;align-items:center;gap:3px;padding:4px 7px;min-width:0;
	border-radius:var(--radius-md, 6px);background:var(--color-bg-muted, #f3f3f3);
	color:var(--color-text-muted, #6c757d);cursor:pointer;user-select:none;
	border:1px solid transparent;
	transition:box-shadow var(--transition-fast, 120ms ease-out),transform var(--transition-fast, 120ms ease-out);
}
.fapdp-card:hover{box-shadow:var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));transform:translateY(-1px)}
.fapdp-card-count{font-size:var(--font-size-sm, 12px);font-weight:var(--font-weight-bold, 700);line-height:1}
.fapdp-card-label{font-size:var(--font-size-xs, 11px);font-weight:var(--font-weight-medium, 500);letter-spacing:.1px;white-space:nowrap}
/* Palette de statut partagée (mêmes tons pastel qu'Émission) — les catégories
 * "c-<cat>" sont génériques : Émission les utilise pour a_envoyer/deposee/
 * refusee/rejetee/encaissee, Réception réutilise le même jeu de tons pour ses
 * propres catégories (recue/prise_en_charge/approuvee/refusee/encaissee) en
 * mappant vers les classes existantes (cf. lib/view/FactureRecue.php). */
.fapdp-card.c-a_envoyer,.fapdp-card.c-recue{background:rgb(228,235,247);color:rgb(37,71,120)}
.fapdp-card.c-deposee,.fapdp-card.c-prise_en_charge{background:rgb(224,231,255);color:rgb(55,48,163)}
.fapdp-card.c-en_cours{background:rgb(212,238,243);color:rgb(13,110,138)}
.fapdp-card.c-refusee{background:rgb(253,236,214);color:rgb(146,89,10)}
.fapdp-card.c-rejetee{background:rgb(250,222,222);color:rgb(158,28,28)}
.fapdp-card.c-encaissee,.fapdp-card.c-approuvee{background:rgb(219,242,227);color:rgb(21,110,71)}
/* Actif : bascule pastel -> couleur pleine (même logique que .fapdp-tab-active,
 * qui passe de contour blanc à fond bleu plein). Un simple liseré ne se voyait
 * pas à côté du fond bleu plein des onglets Type -> confusion "Tous reste actif"
 * alors qu'un filtre statut est bien appliqué en plus. Chaque statut garde SA
 * couleur (pas de bleu générique, pour ne pas se confondre avec l'onglet Tous). */
.fapdp-card-active{
	box-shadow:var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
	font-weight:var(--font-weight-bold, 700);
}
.fapdp-card-active.c-a_envoyer,.fapdp-card-active.c-recue{background:rgb(37,71,120);color:#fff}
.fapdp-card-active.c-deposee,.fapdp-card-active.c-prise_en_charge{background:rgb(55,48,163);color:#fff}
.fapdp-card-active.c-en_cours{background:rgb(13,110,138);color:#fff}
.fapdp-card-active.c-refusee{background:rgb(146,89,10);color:#fff}
.fapdp-card-active.c-rejetee{background:rgb(158,28,28);color:#fff}
.fapdp-card-active.c-encaissee,.fapdp-card-active.c-approuvee{background:rgb(21,110,71);color:#fff}
.fapdp-card-active::after{
	content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
	background:currentColor;margin-left:2px;
}

/* ── Onglets Type (pills, compacts) ───────────────────────────────────── */
.fapdp-tabs{display:flex;gap:3px;flex-wrap:wrap;min-width:0}
.fapdp-tab{
	display:inline-flex;align-items:center;gap:3px;padding:4px 8px;
	border-radius:var(--radius-pill, 9999px);background:var(--color-bg-surface, #fff);
	color:var(--color-text-muted, #6c757d);font-size:var(--font-size-xs, 11px);
	font-weight:var(--font-weight-medium, 500);cursor:pointer;user-select:none;
	border:1px solid var(--color-border, #ddd);
	transition:background var(--transition-fast, 120ms ease-out),color var(--transition-fast, 120ms ease-out);
}
.fapdp-tab:hover{background:var(--color-bg-muted, #f3f3f3)}
.fapdp-tab-active{
	background:var(--color-primary, #1e4e9e);color:var(--color-primary-text, #fff);
	border-color:var(--color-primary, #1e4e9e);
}
.fapdp-tab-count{
	display:inline-block;min-width:18px;padding:0 6px;border-radius:var(--radius-pill, 9999px);
	background:rgba(0,0,0,.08);font-size:var(--font-size-xs, 11px);text-align:center;
}
.fapdp-tab-active .fapdp-tab-count{background:rgba(255,255,255,.25);color:#fff}

/* ── Pastille de statut consolidée (colonne "Statut") ────────────────── */
.fapdp-statut-pill{
	display:inline-flex;align-items:center;gap:5px;padding:4px 12px;
	border-radius:var(--radius-pill, 9999px);font-size:var(--font-size-xs, 11px);
	font-weight:var(--font-weight-bold, 700);white-space:nowrap;letter-spacing:.2px;
}
.fapdp-statut-info{cursor:help;opacity:.8;font-size:13px}
.fapdp-statut-info:hover{opacity:1}

/* Badge "certifié PDP" à côté de l'icône Factur-X (pièce déposée chez la PA). */
.fapdp-facturx-cell{display:inline-flex;align-items:center;justify-content:center;gap:4px}
.fapdp-certif{display:inline-flex;align-items:center;line-height:0}
.fapdp-certif svg{display:block}

/* Pastille "Erreur" cliquable -> ouvre la modale de détail (crud.js). */
.fapdp-erreur-open{cursor:pointer}
.fapdp-erreur-open:hover{filter:brightness(.96);text-decoration:underline}
.fapdp-erreur-open .fapdp-statut-info{cursor:pointer}

/* ── Modale "Détail de l'erreur" ─────────────────────────────────────── */
.fapdp-err-modal{font-size:var(--font-size-sm, 13px);color:var(--color-text, #1f2430);line-height:1.5}
.fapdp-err-modal .fapdp-err-code{margin:0 0 6px;color:var(--color-text-muted, #6b7280)}
.fapdp-err-modal .fapdp-err-msg{margin:0 0 8px;font-weight:var(--font-weight-medium, 600)}
.fapdp-err-modal .fapdp-err-detail{
	margin:0;padding:8px 10px;background:var(--color-bg-alt, #f6f8fb);
	border:1px solid var(--color-divider, #e2e6ec);border-radius:var(--radius-sm, 6px);
	font-family:var(--font-mono, monospace);font-size:12px;white-space:pre-wrap;
	word-break:break-word;max-height:280px;overflow:auto;
}

/* ══════════════════════════════════════════════════════════════════════
 * GRILLE — style de BASE, GLOBAL à TOUTES les .k-grid de mobi-demat
 * (admin compris). Aération des lignes, hover, alignement droite des
 * montants (classes explicites .right/.fapdp-montant — posées à la main
 * dans les colonnes concernées, aucun risque de collision ailleurs).
 * Vérifié sans régression sur d'autres grilles admin (TypesMimes, etc.)
 * avant globalisation — cf. rapport de la passe "harmonisation Réception".
 *
 * NB : la règle "boutons .no-text discrets" a été testée en global puis
 * RETIRÉE — .no-text est un pattern déjà utilisé par le framework GridWizard
 * pour SES PROPRES boutons (ex. TypesMimes : bouton Éditer = "no-text
 * k-button-primary"), et notre background:transparent écrasait leur couleur
 * de fond, rendant l'icône quasi invisible. Cette règle reste donc CIBLÉE
 * (.pdp-premium ci-dessous), où elle ne s'applique qu'à nos propres boutons.
 * ══════════════════════════════════════════════════════════════════════ */
.k-grid .k-grid-content td{padding-top:10px;padding-bottom:10px}
.k-grid .k-grid-content tr:hover td{background:var(--color-bg-muted, #f3f3f3)}
.k-grid td.right,
.k-grid th.right .k-column-title,
.k-grid .fapdp-montant{
	text-align:right;
}

/* ══════════════════════════════════════════════════════════════════════
 * GRILLE — signature visuelle "premium" CIBLÉE (scope .pdp-premium
 * uniquement, souscripteur Émission/Réception). Fond + majuscules d'en-tête
 * sont une identité visuelle marquée, gardée hors du scope global pour ne
 * pas changer par défaut l'apparence de tous les écrans admin de l'appli.
 * Les boutons d'action discrets (.no-text) restent ici aussi (cf. note
 * ci-dessus — risque de collision avec d'autres boutons .no-text ailleurs).
 * ══════════════════════════════════════════════════════════════════════ */
/* La toolbar Kendo (.k-grid-toolbar) gère déjà son layout + repli "overflow"
 * (menu ⋮) nativement — ne PAS forcer display:flex ici, ça désactive le wrap
 * naturel et pousse les boutons de droite dans l'overflow en permanence.
 * On ajuste juste l'espacement interne, pas le conteneur Kendo. */
.k-grid.pdp-premium .k-grid-toolbar{
	padding:var(--space-sm, 8px) var(--space-md, 12px);
}
.k-grid.pdp-premium .k-grid-header{
	background:var(--color-bg-alt, #f0f2f5);
	font-weight:var(--font-weight-medium, 500);
}
.k-grid.pdp-premium .k-grid-content .k-button.no-text{
	border-color:transparent;background:transparent;box-shadow:none;
}
.k-grid.pdp-premium .k-grid-content .k-button.no-text:hover{
	background:var(--color-bg-muted, #f3f3f3);border-color:var(--color-border, #ddd);
}
.k-grid.pdp-premium .k-grid-header .k-column-title{
	font-size:var(--font-size-sm, 12px);color:var(--color-text-muted, #6c757d);
	text-transform:uppercase;letter-spacing:.4px;
}

/* Pas de scroll horizontal du BODY : seule la grille scrolle (déjà scrollable Kendo) */
.fapdp-cards,.fapdp-tabs{max-width:100%}