/* ===========================================================================
   CRAABS CTI — craabs-theme.css
   Surcouche visuelle globale. Ne modifie aucun HTML, aucun template.

   Agit sur :
     1. les jetons de thème  (couleurs, rayons, hauteur de barre)
     2. la barre de navigation et ses panneaux pleine largeur
     3. le vocabulaire commun : page-header, card, data-tbl, btn, badge,
        score, empty-state, filtres, pagination, formulaires

   Installation : une ligne dans base.html, APRÈS ui.css.
   Retrait      : supprimer cette ligne. Aucun autre effet.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&display=swap');

/* ═══ 0. BARRE — SUIT DÉSORMAIS LE THÈME ══════════════════════════════════ */
/* Historique : le fond de <nav> était figé en sombre, indépendamment du
   thème actif, ce qui rendait le texte illisible en mode clair. Le fond
   de la navbar suit maintenant correctement [data-theme] (voir base.html
   et les blocs [data-theme] ci-dessous) : plus besoin de figer quoi que
   ce soit ici, chaque thème a déjà son propre --bg-nav + couleurs de
   texte cohérentes et lisibles. */

/* ═══ 1. JETONS ═══════════════════════════════════════════════════════════ */

[data-theme="dark"]{
  --bg-0:#090D13;          /* fond plus profond, les cartes ressortent   */
  --bg-1:#111721;
  --bg-2:#18202C;
  --bg-3:#212B39;
  --bg-card:rgba(17,23,33,.94);
  --bg-card-h:rgba(24,32,44,.98);
  --bg-input:#141B25;
  --bg-nav:rgba(9,13,19,.97);
  --bg-drop:rgba(12,17,25,.99);
  --border-0:rgba(255,255,255,.06);
  --border-1:rgba(255,255,255,.11);
  --border-h:rgba(217,144,47,.5);
  --text-0:#EAEEF4;
  --text-1:#A9B4C1;
  --text-2:#77848F;
  --text-3:#4E5B6B;
  --shadow:0 10px 32px rgba(0,0,0,.45);
  --shadow-sm:0 2px 10px rgba(0,0,0,.32);
}

[data-theme="light"]{
  --bg-0:#F2F4F7;
  --bg-1:#FFFFFF;
  --bg-2:#E9ECF1;
  --border-0:rgba(13,19,26,.09);
  --border-1:rgba(13,19,26,.16);
  --text-0:#0E141B;
  --text-1:#3D4855;
}

:root{
  --font-display:'Barlow Condensed','Space Grotesk',var(--font);
  --r:9px;
  --rs:6px;
  --nav-h:64px!important;
  --mega-pad:max(24px, calc((100% - var(--max-w)) / 2));
}

/* ═══ 2. NAVIGATION ═══════════════════════════════════════════════════════ */

/* hauteur forcée : certaines feuilles la fixent en dur */
nav{height:64px!important;}
.n-in{height:100%!important;}

.n-items{gap:4px;}

.n-items .n-link{
  font-family:var(--font-display);
  font-size:16px!important;font-weight:700;
  letter-spacing:.045em;text-transform:uppercase;
  height:auto!important;padding:10px 18px!important;
  border-radius:999px;border:1px solid transparent;
  color:var(--text-1);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:color .16s,border-color .16s,box-shadow .16s,background .16s;
}
.n-items > .n-item > .n-link > .n-link-icon{display:none;}
.n-items .n-link:hover{
  color:var(--text-0);background:transparent;
  border-color:var(--border-h);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.n-items .n-link.active{
  color:var(--accent-text);background:var(--accent-soft);
  border-color:var(--border-h);
}
.n-chevron{width:11px!important;height:11px!important;opacity:.45;}

/* panneau pleine largeur : .n-item devient statique pour se caler sur <nav> */
.n-item{position:static;}

.n-drop{
  position:absolute;top:100%;left:0;right:0;
  width:auto;min-width:0;max-width:none;
  border-radius:0;border-left:0;border-right:0;
  border-top:2px solid var(--accent);
  border-bottom:1px solid var(--border-1);
  box-shadow:0 26px 50px rgba(0,0,0,.45);
  padding:26px var(--mega-pad) 30px;
  transform:translateY(-8px);
  column-count:3;column-gap:46px;
}
[data-theme="light"] .n-drop{box-shadow:0 22px 44px rgba(20,28,38,.14);}
.n-item:hover .n-drop{transform:translateY(0);}
.n-item:focus-within .n-drop{opacity:1;visibility:visible;transform:translateY(0);}
.n-drop > *{break-inside:avoid;}

.n-drop-label{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:1.8px;color:var(--text-3);
  padding:0 0 12px;margin-top:22px;
  border-bottom:1px solid var(--border-0);
  break-after:avoid;
}
.n-drop-label:first-child{margin-top:0;}
.n-drop-sep{display:none;}

.n-drop a{
  font-size:14px;font-weight:600;padding:10px 0;gap:11px;
  border-radius:var(--rs);
  transition:color .14s,transform .14s;
}
.n-drop a:hover{background:transparent;color:var(--accent-text);transform:translateX(4px);}
.n-drop a svg{width:17px;height:17px;flex-shrink:0;opacity:.75;}
.n-drop a:hover svg{opacity:1;}

.n-badge{font-family:var(--mono);font-size:9px;font-weight:700;padding:2px 7px;border-radius:999px;margin-left:8px;}

/* Nom de marque en une seule couleur : le dégradé d'origine sur « ABS »
   entrait en concurrence avec l'ambre de la toile. L'accent reste au logo. */
.n-logo{color:var(--text-0);}
.n-logo em{
  background:none;
  background-clip:border-box;
  -webkit-background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  color:inherit;
}
/* Variante ambre : remplacer la ligne ci-dessus par color:var(--accent-text); */

/* Le sous-titre « Cyber Threat Intelligence » était en --text-3, un gris trop
   sombre pour rester lisible sur le fond de barre assombri (2,8:1, sous le
   seuil de 4,5:1). Remonté à --text-2. */
.n-tag{color:var(--text-2)!important;}

/* ═══ 3. EN-TÊTE DE PAGE ══════════════════════════════════════════════════ */

.page-header{
  padding-bottom:20px;margin-bottom:26px;
  border-bottom:1px solid var(--border-0);
  position:relative;
}
/* trait d'accent court sous le titre : repère visuel commun à toutes les pages */
.page-header::after{
  content:"";position:absolute;left:0;bottom:-1px;
  width:52px;height:2px;background:var(--accent);
}
.page-title{
  font-family:var(--font-display);
  font-size:34px;font-weight:600;
  letter-spacing:.005em;line-height:1.1;
  color:var(--text-0);
}
.page-subtitle{
  font-family:var(--mono);font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);margin-top:7px;
}

/* ═══ 4. CARTES ═══════════════════════════════════════════════════════════ */

.card{
  background:var(--bg-card);
  border:1px solid var(--border-0);
  border-radius:var(--r);
  box-shadow:none;
  transition:border-color .18s,background .18s;
}
.card:hover{border-color:var(--border-1);}

.card-item{
  border:1px solid var(--border-0);border-radius:var(--r);
  transition:border-color .18s,transform .18s;
}
.card-item:hover{border-color:var(--border-h);transform:translateY(-2px);}
.card-item-name{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:.01em;}
.card-item-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-3);}

/* ═══ 5. TABLEAUX DE DONNÉES ══════════════════════════════════════════════ */

.data-wrap{border:1px solid var(--border-0);border-radius:var(--r);overflow:auto;}

.data-tbl{width:100%;border-collapse:collapse;}
.data-tbl thead th{
  font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-3);
  background:var(--bg-2);
  padding:11px 14px;
  border-bottom:1px solid var(--border-1);
  white-space:nowrap;
  position:sticky;top:0;z-index:2;
}
.data-tbl tbody td{
  padding:11px 14px;
  border-bottom:1px solid var(--border-0);
  font-size:12.5px;
  vertical-align:middle;
}
/* les valeurs d'indicateurs se lisent mieux en chasse fixe */
.data-tbl tbody td:first-child{font-family:var(--mono);font-size:12px;}
.data-tbl tbody tr{transition:background .13s;box-shadow:inset 2px 0 0 transparent;}
.data-tbl tbody tr:hover{
  background:var(--bg-2);
  box-shadow:inset 2px 0 0 var(--accent);
}
.data-tbl tbody tr:last-child td{border-bottom:0;}

/* ═══ 6. BOUTONS ══════════════════════════════════════════════════════════ */

.btn{
  font-family:var(--font-display);
  font-size:15px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  border-radius:999px;
  padding:9px 20px;
  border:1px solid transparent;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.btn-lg{font-size:17px;padding:12px 28px;}
.btn-sm{font-size:13px;padding:7px 15px;}
.btn-xs{font-size:11.5px;padding:5px 12px;letter-spacing:.04em;}

.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.btn-primary:hover{filter:brightness(1.1);box-shadow:0 0 0 3px var(--accent-soft);}

.btn-ghost{background:transparent;color:var(--text-1);border-color:var(--border-1);}
.btn-ghost:hover{color:var(--text-0);border-color:var(--border-h);background:transparent;box-shadow:0 0 0 3px var(--accent-soft);}

.btn-danger{background:transparent;color:var(--red);border-color:var(--red);}
.btn-danger:hover{background:var(--red);color:#fff;}

.btn-success{background:transparent;color:var(--green);border-color:var(--green);}
.btn-success:hover{background:var(--green);color:#fff;}

.btn-amber{background:transparent;color:var(--amber);border-color:var(--amber);}
.btn-amber:hover{background:var(--amber);color:var(--accent-ink);}

/* ═══ 7. ÉTIQUETTES ET SCORES ═════════════════════════════════════════════ */

.badge,.mono-tag{
  font-family:var(--mono);
  font-size:9.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;
  border:1px solid transparent;
}
.badge-red,.badge-crit{background:rgba(211,47,47,.13);color:var(--red-verdict);border-color:rgba(211,47,47,.4);}
.badge-score-crit{background:rgba(255,82,82,.16);color:var(--red-critical);border-color:rgba(255,82,82,.4);}
.badge-amber,.badge-high{background:rgba(211,135,63,.13);color:var(--amber);border-color:rgba(211,135,63,.3);}
.badge-violet,.badge-med{background:rgba(169,139,192,.13);color:var(--purple);border-color:rgba(169,139,192,.3);}
.badge-green,.badge-low{background:rgba(95,164,120,.13);color:var(--green);border-color:rgba(95,164,120,.3);}
.badge-cyan,.badge-info{background:rgba(79,163,163,.13);color:var(--cyan);border-color:rgba(79,163,163,.3);}
.badge-grey{background:var(--bg-2);color:var(--text-2);border-color:var(--border-0);}

/* le score est le chiffre que l'on cherche en premier : on lui donne du poids */
.score{
  font-family:var(--mono);font-size:13px;font-weight:700;
  padding:3px 10px;border-radius:var(--rs);
  border:1px solid transparent;letter-spacing:.02em;
}
.score-high{background:rgba(224,85,76,.14);color:var(--red);border-color:rgba(224,85,76,.32);}
.score-med{background:rgba(211,135,63,.14);color:var(--amber);border-color:rgba(211,135,63,.32);}
.score-low{background:rgba(95,164,120,.14);color:var(--green);border-color:rgba(95,164,120,.32);}

/* ═══ 8. FILTRES ET FORMULAIRES ═══════════════════════════════════════════ */

.filter-wrap{gap:8px;}
.filter-input,.filter-select,.add-field input,.add-field select,.add-field textarea{
  background:var(--bg-input);
  border:1px solid var(--border-0);
  border-radius:var(--rs);
  color:var(--text-0);
  font-family:var(--mono);font-size:12.5px;
  padding:9px 12px;
  transition:border-color .15s,box-shadow .15s;
}
.filter-input:focus,.filter-select:focus,
.add-field input:focus,.add-field select:focus,.add-field textarea:focus{
  outline:none;
  border-color:var(--border-h);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.filter-btn{border-radius:999px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;}

.add-card{background:var(--bg-card);border:1px solid var(--border-0);border-radius:var(--r);}
.add-card-title{
  font-family:var(--font-display);font-size:20px;font-weight:600;
  letter-spacing:.01em;
}
.add-field label{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--text-3);
}

/* ═══ 9. ÉTATS VIDES, PAGINATION, DIVERS ══════════════════════════════════ */

.empty-state{
  border:1px dashed var(--border-1);
  border-radius:var(--r);
  background:transparent;
  color:var(--text-2);
  padding:44px 24px;
  text-align:center;
}
.empty-state svg{opacity:.35;}

.pagination{gap:5px;}
.pag-btn{
  border-radius:var(--rs);
  border:1px solid var(--border-0);
  font-family:var(--mono);font-size:12px;
  min-width:34px;
  transition:border-color .14s,color .14s;
}
.pag-btn:hover{border-color:var(--border-h);color:var(--text-0);}
.pag-btn.active{background:var(--accent-soft);border-color:var(--border-h);color:var(--accent-text);}

.section-divider{border-top:1px solid var(--border-0);}

.mono{font-family:var(--mono);}

/* barre publique (pages hors connexion) */
.pub-bar-link{font-family:var(--font-display);font-size:14.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}

/* ═══ 10. PETITS ÉCRANS ═══════════════════════════════════════════════════ */

@media (max-width:1100px){
  .n-drop{column-count:2;column-gap:34px;padding:22px 24px 26px;}
  .n-items .n-link{font-size:13.5px;padding:8px 13px;}
  .page-title{font-size:29px;}
}
@media (max-width:820px){
  .n-drop{column-count:1;}
  .page-title{font-size:26px;}
  .data-tbl thead th{position:static;}
}
@media (prefers-reduced-motion:reduce){
  .n-items .n-link,.n-drop,.n-drop a,.card,.card-item,.data-tbl tbody tr,.btn{transition:none;}
}