/*
 * ereporting-premium.css
 *
 * CSS SPÉCIFIQUE à l'écran E-Reporting (lib/view/EReporting.php) — tableau de
 * bord souscripteur des déclarations DGFiP (B2C agrégé / B2B international /
 * Paiements). Complète css/pdp-premium.css (règles ".k-grid" globales +
 * signature ".k-grid.pdp-premium" partagée avec Émission/Réception, chargé
 * séparément — NE PAS dupliquer ces règles ici).
 *
 * Toutes les classes sont préfixées .erep-* pour rester strictement isolées
 * du scope .fapdp-* (Émission/Réception), même si la structure HTML et les
 * design tokens réutilisés sont volontairement identiques (cohérence visuelle
 * transverse mobi-demat).
 *
 * Basé sur mobi-base/css/design-tokens.css (var(--x, repli) partout).
 */

/* ── Bande de cartes de statut, rendue dans la toolbar Kendo (item template),
 * comme .fapdp-header-row côté Émission/Réception — pas d'insertion DOM
 * externe. Une bande par onglet (B2C / B2B intl / Paiements), 3 dimensions de
 * cartes indépendantes (EN_ATTENTE / ENVOYÉ / ERREUR + total). ────────────── */
.erep-header-row{
	display:flex;align-items:center;gap:var(--space-sm, 8px);flex-wrap:wrap;
	min-width:0;flex:1 1 auto;
}

.erep-cards{display:flex;gap:3px;flex-wrap:wrap;min-width:0}
.erep-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);
}
.erep-card:hover{box-shadow:var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));transform:translateY(-1px)}
.erep-card-count{font-size:var(--font-size-sm, 12px);font-weight:var(--font-weight-bold, 700);line-height:1}
.erep-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 — mêmes tons que la pastille _tmplStatut() du PHP, pour
 * qu'une carte "ERREUR" et sa pastille de ligne se répondent visuellement. */
.erep-card.c-total{background:var(--color-bg-alt, #f0f2f5);color:var(--color-text, #333)}
.erep-card.c-en_attente{background:rgb(255,247,224);color:rgb(138,109,59)}
.erep-card.c-envoye{background:rgb(230,244,234);color:rgb(30,126,52)}
.erep-card.c-erreur{background:rgb(253,226,225);color:rgb(166,27,27)}

.erep-card-active{
	box-shadow:0 0 0 2px currentColor inset,var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
	font-weight:var(--font-weight-bold, 700);
}
.erep-card-active::after{
	content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
	background:currentColor;margin-left:2px;
}

/* ── TabStrip premium (B2C agrégé / B2B International / Paiements) ──────── */
.erep-tabstrip.k-tabstrip{border:none;background:transparent}
.erep-tabstrip.k-tabstrip > .k-tabstrip-items-wrapper{
	background:var(--color-bg-alt, #f0f2f5);border-radius:var(--radius-lg, 8px);
	padding:var(--space-xs, 4px);margin-bottom:var(--space-md, 12px);
}
.erep-tabstrip.k-tabstrip .k-tabstrip-items .k-item{
	border:none;background:transparent;color:var(--color-text-muted, #6c757d);
	font-weight:var(--font-weight-medium, 500);border-radius:var(--radius-md, 6px);
	margin:0 2px;transition:background var(--transition-fast, 120ms ease-out),color var(--transition-fast, 120ms ease-out);
}
.erep-tabstrip.k-tabstrip .k-tabstrip-items .k-item .k-link{
	padding:var(--space-sm, 8px) var(--space-lg, 16px);display:flex;align-items:center;gap:6px;
}
.erep-tabstrip.k-tabstrip .k-tabstrip-items .k-item:hover{
	background:var(--color-bg-surface, #fff);color:var(--color-text, #333);
}
.erep-tabstrip.k-tabstrip .k-tabstrip-items .k-item.k-active,
.erep-tabstrip.k-tabstrip .k-tabstrip-items .k-item.k-state-active{
	background:var(--color-bg-surface, #fff);color:var(--color-primary, #1e4e9e);
	box-shadow:var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));font-weight:var(--font-weight-bold, 700);
}
.erep-tabstrip.k-tabstrip .k-content{border:none;padding:0}

/* ── Pastille de statut consolidée (colonne "Statut"), structure seule — les
 * couleurs par statut sont posées inline par _tmplStatut() (PHP). ─────────── */
.erep-statut-pill{
	display:inline-flex;align-items:center;padding:2px 10px;
	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;
	text-align:center;
}

/* ── État vide harmonisé ──────────────────────────────────────────────── */
.erep-no-records{
	text-align:center;color:var(--color-text-muted, #6c757d);padding:32px 0;
	font-size:var(--font-size-sm, 12px);
}

/* Pas de scroll horizontal du body : seule la grille scrolle */
.erep-cards{max-width:100%}