/* =========================================================================
   AfriPaie v7 (12/11/2026) - maquette validee par le responsable le 12/11/2026
   (« AfriPaie v5 design sample » : tableau de bord, periode de paie, fiche
   salarie, composants).

   HABILLAGE SEUL : feuille chargee APRES style.css (cf. base.html), elle ne
   fait que redefinir des jetons et surcharger l'apparence de classes
   existantes. Aucun element, identifiant, nom de champ, adresse ni
   comportement n'est modifie. Retirer la ligne <link ... v7.css> de
   base.html restitue exactement l'apparence precedente (blocs v5 « Console
   juridique » et v6 « Hub » de style.css).

   Remplace en particulier, du v6 « Hub » (15/10/2026) : le menu lateral blanc
   (redevient sombre), le bandeau bleu ciel et le titre en pastille marine
   (titre de page simple), les boutons en pilule (rayon 8 px) et le bouton
   secondaire cercle de bleu (bordure grise neutre).

   Principes :
   - un seul accent (bleu #1677D2 conserve), menu lateral sombre neutre ;
   - contrastes WCAG 2.2 AA (texte >= 4,5:1) : gris de texte fonces, couleurs
     d'etat en texte fonce sur fond clair, boutons colores a texte blanc
     lisible ;
   - grille d'espacement de 4 px, rayons 8 px (champs, boutons) et 12 px
     (cartes) ;
   - montants en Inter a chiffres de chasse fixe (tabular-nums), alignes ;
   - surfaces calmes : pas de deplacement au survol, pas de liseret colore,
     pas de zebrage ;
   - focus clavier toujours visible.
   ========================================================================= */

:root {
  --grey-bg: #f6f8fb;
  --grey-bg-alt: #f2f4f7;
  --grey-border: #e4e7ec;
  --grey-border-strong: #d0d5dd;
  --surface: #ffffff;
  --surface-alt: #f9fafb;
  --row-hover: #f5f8fc;

  --text-primary: #172033;
  --text-secondary: #475467;
  --text-muted: #667085;          /* 4,8:1 sur blanc (8891a0 : 3,4:1) */
  --text-muted-on-bg: #5d6b82;
  --text-on-tinted: #475467;
  --heading-navy: #172033;

  --teal: #1677d2;                /* accent unique, inchange */
  --teal-light: #1263b0;          /* survol : plus fonce, toujours lisible */
  --heading-teal: #175cd3;

  --navy: #1d2939;
  --navy-light: #344054;

  --success: #067647;  --success-bg: #ecfdf3;
  --danger: #d92d20;   --danger-bg: #fef3f2;
  --amber: #b54708;    --flash-warning-bg: #fffaeb;  --flash-warning-text: #93370d;
  --info: #175cd3;

  --pill-success-bg: #ecfdf3; --pill-success-fg: #067647;
  --pill-danger-bg: #fef3f2;  --pill-danger-fg: #b42318;
  --pill-warning-bg: #fffaeb; --pill-warning-fg: #b54708;
  --pill-neutral-bg: #f2f4f7; --pill-neutral-fg: #475467;

  --sb-bg: #0f1b2d;
  --sb-bg-deep: #0b1524;
  --sb-text: #c3cddb;
  --sb-muted: #8797ad;
  --sb-hover: rgba(255, 255, 255, 0.06);
  --sb-border: rgba(255, 255, 255, 0.08);
  --sb-active: #8cc2f5;           /* anneau de focus du menu */
  --sb-active-bg: #1c3352;        /* fond de l'element actif */
  --hub-band: transparent;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 8px 16px -4px rgba(16, 24, 40, 0.08), 0 2px 6px -2px rgba(16, 24, 40, 0.04);
  --shadow-focus: 0 0 0 3px rgba(22, 119, 210, 0.22);
  --shadow-focus-danger: 0 0 0 3px rgba(217, 45, 32, 0.2);

  --btn-primary: #1677d2;
  --btn-primary-hover: #1263b0;
  --btn-danger: #d92d20;
  --btn-danger-hover: #b42318;
}

:root[data-theme="dark"] {
  --grey-bg: #0b1220;
  --grey-bg-alt: #16213a;
  --grey-border: #22304a;
  --grey-border-strong: #2e3e5c;
  --surface: #111a2b;
  --surface-alt: #0e1626;
  --row-hover: rgba(77, 157, 235, 0.08);

  --text-primary: #e6ebf2;
  --text-secondary: #b4bfce;
  --text-muted: #93a1b5;
  --text-muted-on-bg: #a3b0c2;
  --text-on-tinted: #c3cddb;
  --heading-navy: #e6ebf2;

  --teal: #4d9deb;
  --teal-light: #6aaef0;
  --heading-teal: #8cc2f5;

  --navy: #344054;
  --navy-light: #475467;

  --success: #5bd69b;  --success-bg: #0f2e22;
  --danger: #f79b93;   --danger-bg: #3a1716;
  --amber: #f5b860;    --flash-warning-bg: #33240e;  --flash-warning-text: #f5b860;
  --info: #8cc2f5;

  --pill-success-bg: #0f2e22; --pill-success-fg: #5bd69b;
  --pill-danger-bg: #3a1716;  --pill-danger-fg: #f79b93;
  --pill-warning-bg: #33240e; --pill-warning-fg: #f5b860;
  --pill-neutral-bg: rgba(255, 255, 255, 0.08); --pill-neutral-fg: #c3cddb;

  --sb-bg: #070d18;
  --sb-bg-deep: #050a13;
  --sb-active-bg: #16304f;
  --hub-band: transparent;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px rgba(77, 157, 235, 0.32);

  /* boutons pleins : fonds assez fonces pour un texte blanc a 4,5:1 */
  --btn-primary: #1e6fc2;
  --btn-primary-hover: #2a7fd6;
  --btn-danger: #c4320a;
  --btn-danger-hover: #d9420f;
}

/* ---------------------------------------------------------------- base */
body { line-height: 1.5; }
a:hover { color: var(--teal-light); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
h1 { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1rem; font-weight: 600; letter-spacing: 0; }

/* -------------------------------------------------------- menu lateral */
.app-sidebar { background: var(--sb-bg); border-right: 1px solid var(--sb-bg); color: var(--sb-text); }
.sidebar-brand-row { border-bottom: 1px solid var(--sb-border); }
.sidebar-brand { color: #fff; }
.sidebar-brand::before { background: #1677d2; }
.sidebar-toggle { color: var(--sb-muted); }
.sidebar-toggle:hover { background: var(--sb-hover); color: #fff; }
.sidebar-section-title { color: var(--sb-muted); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.sidebar-group-title, .menu-titre { color: var(--sb-muted); }
.menu-titre:hover { color: #fff; background: var(--sb-hover); }
.sidebar-favoris-vide { color: var(--sb-muted); }
.sidebar-link { color: var(--sb-text); padding: 9px 12px; border-radius: 8px; }
.sidebar-link .nav-icon { color: var(--sb-muted); }
.sidebar-link:hover { background: var(--sb-hover); color: #fff; }
.sidebar-link:hover .nav-icon { color: #fff; }
.sidebar-link[aria-current="page"] { background: var(--sb-active-bg); color: #fff; font-weight: 600; box-shadow: none; }
.sidebar-link[aria-current="page"] .nav-icon { color: #8cc2f5; }
.sidebar-link:focus-visible { outline: 2px solid var(--sb-active); outline-offset: 1px; }
.app-sidebar .nav-badge { background: #1677d2; color: #fff; }
.app-sidebar { scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }

/* ------------------------------------- en-tete de page (sans bandeau bleu) */
.app-main { background: none; }
.fil-ariane, .fil-ariane li:not(:last-child)::after { color: var(--text-muted); }
.fil-ariane li[aria-current="page"] { color: var(--text-primary); font-weight: 500; }
.container h1:not(.card h1) {
  display: block; width: auto; background: none; color: var(--heading-navy);
  padding: 0; border-radius: 0; box-shadow: none; font-size: 1.625rem;
}

/* ------------------------------------------------------ barre superieure */
.app-topbar { background: var(--surface); border-bottom: 1px solid var(--grey-border); box-shadow: none; }
.user-avatar { background: #eaf3fc; color: #175cd3; }
:root[data-theme="dark"] .user-avatar { background: #16304f; color: #8cc2f5; }

/* --------------------------------------------------------------- cartes */
.card { border-radius: var(--radius-lg); border-color: var(--grey-border); box-shadow: var(--shadow-xs); padding: 20px 24px; }
.card:hover { box-shadow: var(--shadow-xs); border-color: var(--grey-border); }

/* ------------------------------------------------------- indicateurs */
.kpi { border-top: 1px solid var(--grey-border); border-radius: var(--radius-lg); padding: 18px 20px; }
.kpi:hover { transform: none; box-shadow: var(--shadow-sm); }
.kpi.featured, .kpi.kpi-accent-teal, .kpi.kpi-accent-amber, .kpi.kpi-accent-green, .kpi.kpi-accent-red,
.kpi.kpi-accent-purple, .kpi.kpi-alert,
.kpi:has(.kpi-icon-teal), .kpi:has(.kpi-icon-info), .kpi:has(.kpi-icon-purple),
.kpi:has(.kpi-icon-amber), .kpi:has(.kpi-icon-green), .kpi:has(.kpi-icon-red) { border-top-color: var(--grey-border); }
.kpi .value, .kpi .kpi-value { font-family: inherit; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
.kpi .label, .kpi .kpi-label { font-size: 0.8125rem; font-weight: 500; }
.kpi .kpi-sub { font-size: 0.75rem; color: var(--text-muted); }

/* -------------------------------------------------------------- tableaux */
table { font-size: 0.875rem; }
th, td { padding: 11px 14px; }
th {
  background: var(--surface-alt);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--grey-border);
}
.table-freeze-scroll thead th:nth-child(1), .table-freeze-scroll thead th:nth-child(2) { background: var(--surface-alt); }
tbody tr:nth-child(even) { background: transparent; }
tbody tr:hover { background: var(--row-hover); }
.table-wrap { border-radius: var(--radius-md); }
.num { font-family: inherit; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* --------------------------------------------------------------- boutons */
.btn {
  border-radius: var(--radius-md);
  padding: 9px 16px;
  font-size: 0.875rem;
  line-height: 1.4;
  background: var(--btn-primary);
  box-shadow: var(--shadow-xs);
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: none; opacity: 1; box-shadow: var(--shadow-xs); background: var(--btn-primary-hover); }
.btn:active { transform: none; }
.btn-teal { background: var(--btn-primary); }
.btn-teal:hover { background: var(--btn-primary-hover); box-shadow: var(--shadow-xs); }
.btn-navy { background: var(--navy); }
.btn-navy:hover { background: var(--navy-light); }
.btn-amber { background: #b54708; }
.btn-amber:hover { background: #93370d; }
.btn-danger { background: var(--btn-danger); }
.btn-danger:hover { background: var(--btn-danger-hover); }
.btn-outline { background: var(--surface); color: var(--text-primary); border: 1px solid var(--grey-border-strong); box-shadow: var(--shadow-xs); }
.btn-outline:hover { background: var(--surface-alt); border-color: var(--grey-border-strong); color: var(--text-primary); }
.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ------------------------------------------------------------- formulaires */
label { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; }
input, select, textarea {
  border: 1px solid var(--grey-border-strong);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font-size: 0.875rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: var(--shadow-focus); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-alt); color: var(--text-muted); }

/* ------------------------------------------------------ statuts, messages */
.badge {
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
}
.pill { font-size: 0.75rem; padding: 2px 10px; }
.flash {
  border: 1px solid transparent;
  border-left-width: 1px;
  border-radius: var(--radius-md);
  box-shadow: none;
  font-size: 0.875rem;
  padding: 12px 16px;
}
.flash-success { border-color: rgba(6, 118, 71, 0.22); }
.flash-danger { border-color: rgba(217, 45, 32, 0.22); }
.flash-warning { border-color: rgba(181, 71, 8, 0.22); }
:root[data-theme="dark"] .flash-success, :root[data-theme="dark"] .flash-danger, :root[data-theme="dark"] .flash-warning { border-color: rgba(255, 255, 255, 0.08); }

/* ------------------------------------------------------- barre de progression */
#nprogress-bar { background: #1677d2; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}