/* =========================================================
   ip-history.css — v5 ADVANCED (LIGHT ONLY)
   - contraste fort (texte foncé)
   - grid responsive + table sticky header + first column
   - table -> cartes sous 768px (pas besoin de changer le Twig)
   - scrollbars, focus, animations douces
   ========================================================= */

:root{
  /* Palette claire forcée */
  --bg:#f5f7fb;
  --paper:#ffffff;
  --ink:#0b1220;         /* texte principal très foncé */
  --ink-muted:#263142;   /* sous-texte lisible */
  --primary:#1d4ed8;
  --primary-ink:#ffffff;
  --ring:#d9e1ec;
  --ring-soft:#e9eef6;
  --chip:#eef2f7;
  --good:#16a34a; --danger:#dc2626; --warn:#d97706;
  --table-stripe:#f8fafc; --table-hover:#eef2f7;
  --grad-header:linear-gradient(135deg,#3b82f6 0%, #a855f7 100%);
  --radius-xl:14px; --radius-lg:12px; --radius-md:10px;
  --shadow-sm:0 3px 10px rgba(0,0,0,.06);
  --shadow-md:0 8px 24px rgba(0,0,0,.08);
  --shadow-lg:0 14px 40px rgba(0,0,0,.10);
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* ---------- HERO ---------- */
.hero{background:var(--grad-header);color:#fff;padding:40px 0;border-radius:0 0 18px 18px;box-shadow:var(--shadow-md)}
.hero .breadcrumbs{opacity:1;font-size:.95rem;margin-bottom:6px}
.hero .breadcrumbs a{color:#fff;text-decoration:none}
.hero h1{margin:6px 0;letter-spacing:.2px}
.hero .ip{background:rgba(255,255,255,.22);padding:.12rem .55rem;border-radius:.55rem}
.hero .subtitle{opacity:.95;margin:0}

/* ---------- TOOLBAR ---------- */
.toolbar{position:sticky;top:0;z-index:5;margin-top:-18px;padding:14px;
  background:var(--paper);border:1px solid var(--ring);border-radius:var(--radius-xl);
  display:flex;gap:14px;align-items:flex-end;box-shadow:var(--shadow-md)}
.toolbar .inputs{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;flex:1}
.field{display:flex;flex-direction:column;gap:6px;min-width:160px}
.field.grow{flex:1}
.field span{font-size:.86rem;color:var(--ink);font-weight:800}
.field input,.field select{height:42px;border:1px solid var(--ring);border-radius:var(--radius-md);
  padding:0 12px;background:var(--paper);color:var(--ink)}
.field input:focus,.field select:focus{outline:2px solid color-mix(in oklab, var(--primary) 65%, transparent);outline-offset:1px}

/* ---------- BUTTONS ---------- */
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{height:42px;border:1px solid var(--ring);background:var(--paper);color:var(--ink);
  padding:0 14px;border-radius:var(--radius-md);display:inline-flex;gap:8px;align-items:center;
  text-decoration:none;box-shadow:var(--shadow-sm)}
.btn.primary{background:var(--primary);border-color:transparent;color:var(--primary-ink);
  box-shadow:0 6px 16px color-mix(in oklab, var(--primary) 35%, transparent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.tiny{height:30px;padding:0 10px;border-radius:8px}
.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* ---------- CARDS / LAYOUT ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}
@media (max-width:1000px){.grid{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--ring);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:16px}
.card-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.card-h h3{margin:0;font-size:1.06rem;color:var(--ink);font-weight:900}
.hint{font-size:.95rem;color:var(--ink-muted)}
.skel{height:110px;border-radius:12px;background:linear-gradient(90deg,#eef2f7,#e5ecfa,#eef2f7);animation:sh 1.4s infinite;background-size:400px 100%;display:none}
@keyframes sh {0%{background-position:-200px 0}100%{background-position:200px 0}}

/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}
@media (max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{display:flex;gap:12px;align-items:center}
.stat-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#e8f0ff;color:#3478ff}
.stat-kpi{font-size:1.38rem;color:var(--ink)}
.stat-label{color:var(--ink);opacity:.92;font-size:1rem}

/* ---------- CHIPS & LISTES (fallbacks visibles) ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--chip);border:1px solid var(--ring);border-radius:999px;padding:.28rem .7rem;font-size:.95rem;color:var(--ink)}
.fallback-list{margin:0 0 8px 18px;padding-left:0}
.fallback-list li{color:var(--ink);margin:.22rem 0}
.fallback-list small{color:var(--ink-muted)}
.empty-msg{padding:14px;border:1px dashed var(--ring);border-radius:10px;color:var(--ink-muted);display:none}
.visible{display:block !important}

/* ---------- TABLE ---------- */
.table-card{margin-top:14px}
.table-wrap{overflow:auto}
.table{width:100%;border-collapse:separate;border-spacing:0;min-width:980px}
.table thead th{
  position:sticky;top:0;background:#f3f6ff;color:#0a1020;z-index:2;text-align:left;
  border-bottom:2px solid var(--ring);padding:12px;font-size:1rem
}
/* 1ère colonne sticky (Quand) */
.table thead th:first-child,.table tbody td:first-child{
  position:sticky;left:0;background:linear-gradient(90deg,#f3f6ff 0%, #ffffff 85%);
  z-index:1;border-right:1px solid var(--ring)
}
.table tbody td{padding:12px;border-bottom:1px solid var(--ring-soft);vertical-align:middle;color:var(--ink)}
.table tbody tr:nth-child(odd){background:var(--table-stripe)}
.table tbody tr:hover{background:var(--table-hover)}
.table .badge{display:inline-block;padding:.16rem .55rem;border:1px dashed var(--ring);border-radius:6px;font-size:.82rem;color:var(--ink)}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;color:var(--ink)}
.ellipsis{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tagcol .tag{display:inline-block;background:#fee2e2;border:1px solid #fecaca;color:#b91c1c;
  padding:.22rem .5rem;border-radius:.5rem;margin-right:.25rem;font-weight:900}
.score{color:var(--ink)}
.muted{color:var(--ink-muted)}
.actions{text-align:right}
.empty-state{display:flex;gap:10px;flex-direction:column;align-items:center;padding:18px;color:var(--ink-muted);font-weight:700}
.pagination{margin-top:12px}

/* ---------- TABLE → CARTES (mobile < 768px) ---------- */
@media (max-width:768px){
  .table{min-width:0;border-collapse:separate}
  .table thead{display:none}
  .table tbody tr{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
    border:1px solid var(--ring);border-radius:var(--radius-lg);padding:10px;margin:10px 0;background:var(--paper);
    box-shadow:var(--shadow-sm)
  }
  .table tbody td{
    border:none;padding:4px 0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
  }
  /* libellés automatiques via nth-child (pas besoin de data-label) */
  .table tbody td:nth-child(1)::before {content:"Quand";color:var(--ink-muted);display:block}
  .table tbody td:nth-child(2)::before {content:"Proto";color:var(--ink-muted);display:block}
  .table tbody td:nth-child(3)::before {content:"Port";color:var(--ink-muted);display:block}
  .table tbody td:nth-child(4)::before {content:"Méthode";color:var(--ink-muted);display:block}
  .table tbody td:nth-child(5)::before {content:"Host";color:var(--ink-muted);display:block}
  .table tbody td:nth-child(6)::before {content:"Path";color:var(--ink-muted);display:block}
  .table tbody td:nth-child(7)::before {content:"Score";color:var(--ink-muted);display:block}
  .table tbody td:nth-child(8)::before {content:"Tags";color:var(--ink-muted);display:block}
  .table tbody td:nth-child(9)::before {content:"UA";color:var(--ink-muted);display:block}
  .table tbody td:nth-child(10)::before {content:"Signature";color:var(--ink-muted);display:block}
  .table tbody td:nth-child(11)::before {content:"Actions";color:var(--ink-muted);display:block}
}

/* ---------- LINKS / FOCUS / SCROLLBARS ---------- */
.ip-history a{color:#1d4ed8;text-decoration:none}
a:hover{filter:brightness(1.06)}
:focus-visible{outline:2px dashed var(--primary);outline-offset:2px}

/* scrollbars */
*{scrollbar-color:#c8d4ea #eef2f7}
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-thumb{background:#c8d4ea;border-radius:999px;border:2px solid #eef2f7}
*::-webkit-scrollbar-track{background:#eef2f7;border-radius:999px}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .skel{animation:none}
  .btn,.card,.table tbody tr{transition:none}
}

/* ---------- PRINT ---------- */
@media print{
  .toolbar,.pagination,.hero .breadcrumbs,.btn{display:none !important}
  body{background:#fff}
  .card{box-shadow:none;border-color:#ddd}
}

/* ===== Overrides v5.1 (scope & toolbar) ===== */

/* Ne pas toucher le menu global : liens uniquement DANS la page historique */
.ip-history a{
  color:#1d4ed8;
  
  text-decoration:none;
}
.ip-history a:hover{ filter:brightness(1.06) }

/* Toolbar : ne chevauche pas le HERO, reste lisible et non tronquée en scroll */
.ip-history .toolbar{
  position: sticky !important;
  top: 12px !important;         /* espace sous la barre du site */
  margin-top: 16px !important;  /* plus de marge négative */
  z-index: 50 !important;       /* au-dessus du contenu */
  max-width: 100%;
  overflow: visible;
}

/* Par sécurité, si ton layout global force un gras dans la nav */
header a, nav a, .navbar a, .site-nav a, .main-menu a {  }

/* Assure que la toolbar wrap correctement et ne “casse” pas */
.ip-history .toolbar .inputs{ flex-wrap:wrap; min-width:0 }
.ip-history .toolbar .actions{ flex-wrap:wrap }

/* Les tables/sections de l’historique gardent leur lisibilité */
.ip-history .card, .ip-history .table, .ip-history .table * { opacity:1 !important }

/* Le bloc hero reste séparé visuellement de la toolbar */
.ip-history .hero{ margin-bottom: 4px; }

/* --- UX tags : bouton +x déployable --- */
.more-tags{
  display:inline-flex; align-items:center; justify-content:center;
  height:22px; min-width:28px; padding:0 .5rem;
  border-radius:10px; border:1px solid var(--ring);
  background:#f0f5ff; color:#1d4ed8; font-weight:800; font-size:.8rem;
  cursor:pointer; margin:.15rem .15rem; line-height:1;
}
.more-tags:hover{ filter:brightness(1.03) }
.more-tags:focus{ outline:none; box-shadow:0 0 0 2px rgba(29,78,216,.25) }

/* --- Table actions : focus discret au lieu d un bandeau bleu/gris sous les boutons --- */
.table .actions .btn{ position:relative; z-index:1 }
.table .actions .btn:focus{ outline:none; box-shadow:0 0 0 2px rgba(29,78,216,.25) }
.table .actions{ white-space:nowrap }
.table-wrap *:focus{ outline:none }
.table-wrap *:focus-visible{ outline:none; box-shadow:0 0 0 2px rgba(29,78,216,.25) }

/* ==== PATCH UX tags & focus ==== */
/* Bouton +x pour tags cachés */
.more-tags{
  display:inline-flex; align-items:center; justify-content:center;
  height:22px; min-width:28px; padding:0 .5rem;
  border-radius:10px; border:1px solid var(--ring);
  background:#f0f5ff; color:#1d4ed8; font-weight:800; font-size:.8rem;
  cursor:pointer; margin:.15rem .15rem; line-height:1;
}
.more-tags:hover{ filter:brightness(1.03) }
.more-tags:focus{ outline:none; box-shadow:0 0 0 2px rgba(29,78,216,.25) }

/* Neutralise la grande barre bleutée par défaut sous les boutons dans le tableau */
.ip-history .table .actions .btn{ position:relative; z-index:1 }
.ip-history .table .actions .btn:focus,
.ip-history .table .actions .btn:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 2px rgba(29,78,216,.25) !important;
}
.ip-history .table-wrap *:focus{ outline:none !important }
.ip-history .table-wrap *:focus-visible{ outline:none !important; box-shadow:0 0 0 2px rgba(29,78,216,.25) !important }

/* Optionnel : adoucir encore le focus sur tous les liens/boutons de la page historique */
.ip-history a:focus, .ip-history a:focus-visible,
.ip-history button:focus, .ip-history button:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 2px rgba(29,78,216,.20) !important;
}

/* Lisibilité de la hint */
.hint{ color:#334155; font-weight:600 }