/* ============================================================
   ADMINISTRATION — feuille de base de la coquille
   admin/shell/shell.css · codia-modules (socle « core »)
   ============================================================
   Tableaux (.data-table, version mobile en une colonne), onglets
   (.admin-tabs), en-têtes d'écran (.admin-head), recherche et filtres,
   indicateurs (.kpi-*), colonnes et cartes (.admin-cols, .admin-card),
   champs d'éditeur (.editor-*), aides, sous-onglets (.admin-subtabs).
   Les écrans ont leur feuille dans admin/modules/<key>/<key>.css ; un projet
   complète cette base dans admin/shell/shell.project.css (non haché).
   ============================================================ */

.data-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line, rgba(10, 31, 56, 0.12));
  border-radius: 0;
  overflow: hidden;
}
.data-table-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr 0.5fr;
  gap: 16px;
  padding: 14px 18px;
  font-size: 14px;
  align-items: center;
  border-bottom: 1px solid var(--c-line, rgba(10, 31, 56, 0.12));
  transition: background 0.15s;
}
.data-table-row:last-child { border-bottom: none; }
/* Lignes alternées (une sur deux, comptées parmi les lignes VISIBLES : un
   filtre qui masque des lignes ne casse pas l'alternance) ; survol bleuté. */
.data-table { background: var(--c-paper, #FDFCFA); }
.data-table-row:nth-child(even of .data-table-row:not(.data-table-head):not([hidden])) { background: var(--c-shadow, rgba(10, 31, 56, 0.035)); }
.data-table-row:not(.data-table-head):hover { background: var(--c-accent-soft, rgba(35, 111, 168, 0.07)); }
.data-table-head {
  background: var(--c-table-head, #E2ECF5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-table-head-ink, #1B4A75);
}
.data-table-row.data-table-head:hover { background: var(--c-table-head, #E2ECF5); }
@media (max-width: 760px) {
  .data-table-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 16px;
  }
  .data-table-head { display: none; }
  .data-table-row:not(.data-table-head) > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.admin-tabs {
  display: flex;
  gap: 4px;
  padding: clamp(20px, 4vw, 32px) 0 0;
  margin-bottom: 32px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: wrap;
}
.admin-tab {
  padding: 10px 12px; /* 11 onglets sur une ligne à pleine largeur (1216 px utiles) */
  font-size: 14px;
  font-weight: 500;
  color: var(--c-primary, #0A1F38);
  background: var(--c-paper, #FDFCFA);
  border: 1px solid var(--c-line, rgba(10, 31, 56, 0.12));
  text-decoration: none;
  border-radius: 0;
  white-space: nowrap;
  transition: all 0.2s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.admin-tab:hover {
  color: var(--c-accent, #236FA8);
  background: var(--c-accent-soft, rgba(35, 111, 168, 0.08));
  border-color: var(--c-accent-soft, rgba(35, 111, 168, 0.3));
}
.admin-tab.active,
.admin-tab.active:hover {
  color: var(--c-on-strong, white);
  background: linear-gradient(135deg, var(--c-accent, #236FA8), var(--c-primary, #0A1F38));
  border-color: transparent;
  box-shadow: 0 4px 12px -2px var(--c-accent-soft, rgba(35, 111, 168, 0.35));
}

.admin-body { padding-bottom: 80px; }

.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.admin-head h1 {
  font-family: var(--f-display, Georgia, serif);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.admin-sub { color: var(--c-mute, rgba(10, 31, 56, 0.6)); margin: 4px 0 0; font-size: 14px; }
.admin-head-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.count-badge {
  font-family: var(--f-body, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--c-focus-soft, rgba(50, 188, 236, 0.15)), var(--c-accent-soft, rgba(35, 111, 168, 0.12)));
  color: var(--c-accent, #236FA8);
  padding: 4px 12px;
  border-radius: 0;
}
.admin-search {
  font-family: inherit;
  padding: 10px 14px;
  border: 1px solid var(--c-line, rgba(10, 31, 56, 0.12));
  border-radius: 0;
  font-size: 14px;
  min-width: 220px;
  background: var(--c-paper, #FDFCFA);
}
.admin-select {
  font-family: inherit;
  padding: 10px 14px;
  border: 1px solid var(--c-line, rgba(10, 31, 56, 0.12));
  border-radius: 0;
  font-size: 14px;
  background: var(--c-paper, #FDFCFA);
}
.admin-search:focus, .admin-select:focus {
  outline: none;
  border-color: var(--c-accent, #236FA8);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.kpi-grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kpi {
  padding: 20px 24px;
  background: var(--c-paper, #FDFCFA);
  border: 1px solid var(--c-line, rgba(10, 31, 56, 0.12));
  border-radius: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow 0.25s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -16px var(--c-shadow, rgba(10, 31, 56, 0.2));
}
.kpi-warn { border-left: 3px solid var(--c-highlight, #D4A24A); }
.kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-mute, rgba(10, 31, 56, 0.6));
  margin-bottom: 8px;
}
.kpi-value {
  font-family: var(--f-display, Georgia, serif);
  font-weight: 500;
  font-size: 36px;
  color: var(--c-primary, #0A1F38);
  line-height: 1;
  letter-spacing: -0.02em;
}
.kpi-foot { font-size: 12px; color: var(--c-mute, rgba(10, 31, 56, 0.6)); margin-top: 8px; }

.kpi-grid-colored .kpi {
  padding: 24px;
  border-left-width: 4px;
  border-left-style: solid;
}
/* Icône calée dans le coin haut-droit ; le libellé lui réserve sa place
   (padding-right) → plus de chevauchement (« Recettes cumulées »). */
.kpi-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kpi-icon svg { width: 18px; height: 18px; }
.kpi:has(.kpi-icon) .kpi-label { padding-right: 26px; }

.kpi-success {
  border-left-color: var(--c-success, #0F9F70);
  background: linear-gradient(135deg, var(--c-success-soft, rgba(15, 159, 112, 0.06)), transparent 60%), var(--c-paper, #FDFCFA);
}
.kpi-success .kpi-icon { background: var(--c-success-soft, rgba(15, 159, 112, 0.12)); color: var(--c-success, #0F9F70); }
.kpi-success .kpi-value { color: var(--c-success-ink, #0A3D2D); }

.kpi-warn {
  border-left-color: var(--c-highlight, #D4A24A);
  background: linear-gradient(135deg, var(--c-highlight-soft, rgba(212, 162, 74, 0.08)), transparent 60%), var(--c-paper, #FDFCFA);
}
.kpi-grid-colored .kpi-warn .kpi-icon { background: var(--c-highlight-soft, rgba(212, 162, 74, 0.14)); color: var(--c-warning, #A66B0F); }
.kpi-grid-colored .kpi-warn .kpi-value { color: var(--c-warning-ink, #6E4708); }

.kpi-info {
  border-left-color: var(--c-accent, #236FA8);
  background: linear-gradient(135deg, var(--c-accent-soft, rgba(35, 111, 168, 0.07)), transparent 60%), var(--c-paper, #FDFCFA);
}
.kpi-info .kpi-icon { background: var(--c-accent-soft, rgba(35, 111, 168, 0.12)); color: var(--c-accent, #236FA8); }

.kpi-accent {
  border-left-color: var(--c-focus, #32BCEC);
  background: linear-gradient(135deg, var(--c-focus-soft, rgba(50, 188, 236, 0.08)), transparent 60%), var(--c-paper, #FDFCFA);
}
.kpi-accent .kpi-icon { background: var(--c-focus-soft, rgba(50, 188, 236, 0.14)); color: var(--c-focus-ink, #1080AF); }

.kpi-purple {
  border-left-color: var(--c-extra, #7E57C2);
  background: linear-gradient(135deg, var(--c-extra-soft, rgba(126, 87, 194, 0.08)), transparent 60%), var(--c-paper, #FDFCFA);
}
.kpi-purple .kpi-icon { background: var(--c-extra-soft, rgba(126, 87, 194, 0.14)); color: var(--c-extra, #5D3FA0); }
.kpi-purple .kpi-value { color: var(--c-extra-ink, #3F2D6F); }

.admin-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 800px) { .admin-cols { grid-template-columns: 1.5fr 1fr; } }
.admin-card {
  background: var(--c-paper, #FDFCFA);
  border: 1px solid var(--c-line, rgba(10, 31, 56, 0.12));
  border-radius: 0;
  padding: 24px;
}
.admin-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.admin-card-head h2 {
  font-family: var(--f-display, Georgia, serif);
  font-weight: 500;
  font-size: 20px;
  margin: 0;
}
.admin-card-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-accent, #236FA8);
  text-decoration: none;
}

.editor-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
.editor-field > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-mute, rgba(10, 31, 56, 0.6));
  margin-bottom: 8px;
}
.editor-input {
  font-family: inherit;
  border: 1px solid var(--c-line, rgba(10, 31, 56, 0.12));
  border-radius: 0;
  padding: 12px 14px;
  font-size: 15px;
  background: var(--c-paper, #FDFCFA);
  color: var(--c-ink, #1A1A1A);
  transition: border-color 0.2s;
}
.editor-input:focus {
  outline: none;
  border-color: var(--c-accent, #236FA8);
  box-shadow: 0 0 0 3px var(--c-accent-soft, rgba(35,111,168,0.1));
}
.editor-input-title {
  font-family: var(--f-display, Georgia, serif);
  font-size: 28px;
  font-weight: 500;
  padding: 16px 18px;
  letter-spacing: -0.02em;
}
.editor-textarea {
  font-family: inherit;
  resize: vertical;
  min-height: 200px;
  line-height: 1.7;
}

.editor-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.editor-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--c-paper, #FDFCFA);
  border: 1px solid var(--c-line, rgba(10, 31, 56, 0.12));
  border-radius: 0;
  position: sticky;
  top: calc(var(--header-h, 84px) + 20px);
}
.editor-help {
  padding: 20px;
  background: var(--c-soft, #F7F3EC);
  border-radius: 0;
  font-size: 13px;
  color: var(--c-mute, rgba(10, 31, 56, 0.6));
  line-height: 1.6;
}
.editor-help h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-primary, #0A1F38);
  margin: 0 0 8px;
}
.editor-help p { margin: 0 0 8px; }
.editor-help code {
  background: var(--c-paper, #FDFCFA);
  padding: 2px 6px;
  border-radius: 0;
  font-size: 12px;
}

.admin-helper {
  font-size: 14px;
  color: var(--c-mute, rgba(10, 31, 56, 0.6));
  margin: -16px 0 28px;
  max-width: 720px;
}

/* Sous-onglets de page (liens) */
.admin-subtabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--c-line, rgba(10, 31, 56, 0.12));
  margin: -8px 0 20px;
  /* Sur téléphone, les sous-onglets défilent au lieu d'élargir la page. */
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-subtabs::-webkit-scrollbar { display: none; }
.admin-subtabs > .admin-subtab { flex-shrink: 0; white-space: nowrap; }
.admin-subtab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 11px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-mute, rgba(10, 31, 56, 0.6));
  text-decoration: none;
}
.admin-subtab:hover { color: var(--c-primary, #0A1F38); }
.admin-subtab[aria-current="page"] {
  color: var(--c-primary, #0A1F38);
  border-bottom-color: var(--c-accent, #236FA8);
}
.admin-subtab-count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  background: var(--c-soft, #F7F3EC);
  color: var(--c-mute, rgba(10, 31, 56, 0.6));
}
.admin-subtab[aria-current="page"] .admin-subtab-count {
  background: var(--c-accent-soft, rgba(35, 111, 168, 0.12));
  color: var(--c-accent, #236FA8);
}
.admin-subtabs + .admin-helper { margin-top: 0; margin-bottom: 20px; }

/* Tableaux de l'admin sur téléphone : une colonne. Placé en fin de fichier
   pour passer après les grilles propres à chaque tableau (même spécificité). */
@media (max-width: 760px) {
  /* Les cellules mobiles sont en « space-between » : les boutons restent groupés à droite. */
  .data-table .data-table-row > .cell-actions { justify-content: flex-end; gap: 6px; }
}