/* Global */
:root{
  /* Theme: primary maps to existing blue palette by default */
  --primary:#1565c0;
  --primary-700:#0d47a1;
  /* RGB triplet for dynamic rgba usages */
  --primary-rgb:21,101,192;
  --white:#ffffff;
  --gray-50:#f9fafb;
  --gray-100:#f3f6f9;
  --gray-200:#e5e7eb;
  --gray-300:#d1d5db;
  --gray-600:#4b5563;
  --gray-700:#374151;
  --green:#16a34a;
  --red:#dc2626;
  --warning:#f59e0b;
  --cyan:#0891b2;
}
*{ box-sizing:border-box; }
html, body { margin:0; padding:0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--gray-100); color:#111; }
a{ color:var(--primary); text-decoration:none; transition: color .12s ease, box-shadow .12s ease; }
a:hover{ color: var(--primary-700); text-decoration:underline; box-shadow: 0 1px 0 0 rgba(var(--primary-rgb), 0.6); }

/* Layout */
.layout{ display:flex; min-height:100vh; }
/* Sidebar: revenir à l'ancien modèle (pas de page blanche en bas) */
.sidebar{ width:260px; flex:0 0 260px; background:linear-gradient(180deg, var(--primary), var(--primary-700)); color:var(--white); padding:24px 16px; transition: width .2s ease; display:flex; flex-direction:column; min-height:100vh; position:sticky; top:0; overflow:visible; }
.sidebar .logo{ font-size:28px; margin-bottom:24px; }
.sidebar nav a{ display:block; color:var(--white); padding:10px 12px; border-radius:8px; margin-bottom:8px; font-weight:600; font-size:14px; }
.sidebar nav a:hover{ background:rgba(255,255,255,0.12); }
.sidebar nav a.active{ background:rgba(255,255,255,0.18); border-left:4px solid rgba(255,255,255,0.9); padding-left:8px; }
.sidebar .icon{ width:18px; height:18px; }
.sidebar nav a .icon{ margin-right:8px; vertical-align:-3px; }
.sidebar details > summary{ display:flex; align-items:center; gap:8px; color:#fff; padding:10px 12px; border-radius:8px; }
.sidebar details > summary .icon{ margin-right:8px; }
.sidebar details[open] > summary, .sidebar details > summary:hover{ background:rgba(255,255,255,0.12); }

/* Count badge at end of menu summary */
.sidebar .count-badge{
  margin-left:auto;
  display:inline-flex; align-items:center; justify-content:center;
  height:22px; min-width:22px; padding:0 8px;
  background: rgba(255,255,255,0.16); color:#fff; border-radius:999px; border:1px solid rgba(255,255,255,0.35);
  font-size:12px; font-weight:700;
}

/* Collapse control button (bottom) */
.sidebar .collapse-ctl .icon-btn{ background:#ffffff; color:var(--primary-700); border:1px solid rgba(0,0,0,0.08); }
.sidebar .collapse-ctl .icon-btn:hover{ background:#f6f7fb; }

/* Collapsed sidebar */
.sidebar.collapsed{ width:72px; flex:0 0 72px; }
.sidebar.collapsed nav a,
.sidebar.collapsed details > summary{ font-size:0; padding:10px; justify-content:center; }
.sidebar.collapsed nav a .icon,
.sidebar.collapsed details > summary .icon{ margin-right:0; }
.sidebar.collapsed nav a.active{ border-left:none; padding-left:10px; }
.sidebar.collapsed .count-badge{ display:none; }
.sidebar.collapsed .logo span{ display:none; }
.sidebar.collapsed .org-block{ text-align:center; }
.sidebar.collapsed .org-block div{ justify-content:center; }

/* Only the menu area (between top logo and org block) scrolls */
.sidebar nav{ flex:1; overflow:auto; overscroll-behavior: contain; }
.content{ flex:1; display:flex; flex-direction:column; }

/* Hide sidebar on demand (desktop) */
body.sidebar-hidden .sidebar{ width:0; flex:0 0 0; padding:0; overflow:hidden; border:none; }
body.sidebar-hidden .content{ margin-left:0; }
.topbar{ background:var(--white); padding:12px 16px; border-bottom:1px solid var(--gray-300); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20; gap:12px; }
.brand{ font-weight:700; color:var(--primary-700); font-size:18px; }
.topbar .user{ margin-right:12px; color:var(--gray-700); }
.topbar .actions{ display:flex; align-items:center; gap:12px; }
.topbar .icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; border:1px solid var(--gray-300); background:#fff; cursor:pointer; }
.topbar .icon-btn:hover{ background:var(--gray-50); }
.avatar{ width:32px; height:32px; border-radius:999px; background:var(--primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
.user-chip{ display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--gray-300); border-radius:999px; background:#fff; }
.user-chip .name{ font-weight:700; color:var(--gray-700); }
.user-chip .role{ font-size:12px; color:var(--gray-600); }
.user-menu .card a{ text-decoration:none; padding:8px 10px; border-radius:8px; }
.user-menu .card a:hover{ text-decoration:none; background: rgba(var(--primary-rgb), 0.09); }
.page{ padding:24px; }
.footer{ margin-top:auto; padding:14px 20px; background:var(--white); border-top:1px solid var(--gray-300); color:var(--gray-700); text-align:center; }
.footer small{ color:#6b7280; font-size:12px; opacity:.9; }

/* Cards, forms */
.card{ background:var(--white); border:1px solid var(--gray-300); border-radius:12px; padding:18px; box-shadow:0 1px 3px rgba(0,0,0,0.05); transition: box-shadow .12s ease, transform .12s ease; }
.card:hover{ box-shadow:0 4px 14px rgba(0,0,0,0.08); transform: translateY(-1px); }
.card .actions{ border-top:1px solid var(--gray-300); padding-top:10px; margin-top:12px; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.grid{ display:grid; gap:16px; }
.grid.col-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.col-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.col-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.col-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); }

label{ font-weight:600; display:block; margin-bottom:6px; }
input[type="text"], input[type="date"], input[type="email"], input[type="password"], select, textarea {
  width:100%; padding:10px 12px; border:1px solid var(--gray-300); border-radius:8px; background:#fff; outline:none;
}
input[type="file"]{ display:block; }

.btn{ display:inline-block; background:var(--primary); color:var(--white); padding:10px 14px; border-radius:8px; font-weight:700; border:none; cursor:pointer; transition: none; }
.btn:hover{ background:var(--primary); transform:none; box-shadow:none; }
.btn:disabled, .btn[disabled], .btn.disabled{ opacity:.6; cursor:not-allowed; filter:grayscale(10%); transform:none; box-shadow:none; }
.btn.loading{ position:relative; pointer-events:none; }
.btn.loading::after{ content:""; position:absolute; right:10px; top:50%; width:16px; height:16px; margin-top:-8px; border:2px solid rgba(255,255,255,0.7); border-top-color:transparent; border-radius:50%; animation: spin .6s linear infinite; }
.btn.secondary{ background: rgba(var(--primary-rgb), 0.08); color: var(--primary-700); }
.btn.secondary:hover{ background: rgba(var(--primary-rgb), 0.08); }
.btn.danger{ background:var(--red); }
.btn.danger:hover{ filter:none; background:var(--red); }
.btn.ghost{ background:transparent; color:var(--primary-700); border:1px solid var(--gray-300); }
.btn.icon{ display:inline-flex; align-items:center; gap:6px; font-size:0; }
.btn.circle{ border-radius:999px; padding:8px 10px; width:auto; }
.btn.icon:hover{ filter:none !important; box-shadow:none !important; }
.btn.csv{ background:var(--primary); color:#fff; }
.btn.csv:hover{ background:var(--primary); }
.btn.add{ background: var(--primary); color:#fff; }
.btn.add:hover{ background: var(--primary); }
.btn.reset{ background:var(--primary); color:#fff; }

.btn.reset:hover{ background: var(--primary); }
/* Icônes SVG visibles dans tous les boutons (héritent de la couleur du bouton) */
.btn svg { width:16px; height:16px; display:inline-block; vertical-align:middle; fill: currentColor; stroke: currentColor; }
/* Renfort pour contrer fill="none" inline sur certains éléments */
.btn svg path,
.btn svg rect,
.btn svg circle,
.btn svg polygon,
.btn svg line,
.btn svg polyline { fill: currentColor !important; stroke: currentColor !important; }
/* Redondance utile pour .btn.icon */
.btn.icon svg { width:16px; height:16px; fill: currentColor; stroke: currentColor; }

/* Boost: force color on all SVG descendants inside buttons (covers <g> and nested shapes) */
.btn svg *,
summary.btn svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Assurer la visibilité des icônes SVG dans tous les boutons (bleus et secondaires) */
.btn svg { width:16px; height:16px; display:inline-block; vertical-align:middle; fill: currentColor; stroke: currentColor; }
/* Forcer aussi les enfants pour contrer fill="none" inline */
.btn svg path,
.btn svg rect,
.btn svg circle,
.btn svg polygon,
.btn svg line,
.btn svg polyline{ fill: currentColor !important; stroke: currentColor !important; }
.btn.icon svg { width:16px; height:16px; }
.btn.sm svg { width:16px; height:16px; }

.btn.icon{ display:inline-flex; align-items:center; gap:6px; }
/* Icon-only: hide text and keep icon visible. Use title for tooltip. */
.btn.icon{ font-size:0; }
.btn.icon svg{ width:16px; height:16px; fill: currentColor; stroke: currentColor; }

/* Table */
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ padding:12px 14px; border-bottom:1px solid var(--gray-300); text-align:left; }
.table th{ background:#f8fafc; font-weight:700; }
.table tr:hover td{ background:#fafafa; }
/* Sticky header for wide tables */
.table thead th{ position:sticky; top:0; z-index:5; }

.badge{ display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700; }
/* Succès / vert remplacés par le bleu système avec texte blanc */
.badge.success{ background: var(--primary); color: #fff; border:1px solid var(--primary-700); }
.badge.warning{ background: rgba(245,158,11,0.12); color: var(--warning); border:1px solid rgba(245,158,11,0.28); }
.badge.danger{ background: rgba(220,38,38,0.1); color: var(--red); border:1px solid rgba(220,38,38,0.23); }
.badge.info{ background: rgba(var(--primary-rgb), 0.14); color: var(--primary-700); border:1px solid rgba(var(--primary-rgb), 0.25); }
/* rétro-compatibilité: toute pastille .green devient bleue */
.badge.green{ background: var(--primary); color: #fff; border:1px solid var(--primary-700); }
.badge.red{ background: rgba(220,38,38,0.1); color: var(--red); border:1px solid rgba(220,38,38,0.23); }
.badge.blue{ background: rgba(var(--primary-rgb), 0.14); color: var(--primary-700); border: 1px solid rgba(var(--primary-rgb), 0.25); }

/* Notification bell */
.notif{ position:relative; }
.notif .badge{ position:absolute; top:-6px; right:-6px; background: var(--primary); color: #fff; }

/* Auth box */
.auth-box{ max-width:460px; margin:12px auto; }
.center{ text-align:center; }

/* Compact filters */
.filters-mini label{ font-size:11px; color:var(--gray-700); }
.filters-mini input[type="text"],
.filters-mini input[type="month"],
.filters-mini select{
  font-size:12.5px; padding:6px 8px; height:30px;
}
.filters-mini .btn{ font-size:12.5px; padding:6px 10px; height:30px; }
@media (max-width: 900px){ .filters-mini { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 600px){ .filters-mini { grid-template-columns: 1fr !important; } }
.filters-actions{ grid-column: 1 / -1; display:flex; gap:8px; align-items:center; }
.filters-actions > *{ margin:0; }
.filters-actions .spacer{ flex:1; }

/* Standard filter bar: single line with horizontal scroll if overflow */
.filters-bar{ display:flex; align-items:flex-end; justify-content:space-between; gap:6px; flex-wrap:wrap; overflow:visible; }
.filters-bar .filters-mini{ display:flex; gap:6px; align-items:flex-end; flex-wrap:nowrap; }

/* Horizontal actions row for tables */
.actions-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
}

/* Utility classes to reduce inline styles */
.inline-flex-center{ display:inline-flex; align-items:center; gap:6px; }
.row-end{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

/* Ribbon banner (e.g., Archive Mode) */
.ribbon{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(var(--primary-rgb), 0.25);
  background: rgba(var(--primary-rgb), 0.06);
  border-radius:10px;
}
.ribbon.archive{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
/* Compact variant + color variants */
.ribbon.compact{ gap:6px; padding:6px 8px; border-radius:8px; }
.ribbon.info{ border-color:#bfdbfe; background:#eff6ff; color:#1e40af; }
.ribbon.warning{ border-color:#fde68a; background:#fffbeb; color:#92400e; }
.ribbon.danger{ border-color:#fecaca; background:#fef2f2; color:#991b1b; }
.ribbon.muted{ border-color:#e5e7eb; background:#f9fafb; color:#111827; }

/* Page titles smaller across the app */
h1{ font-size:20px; margin:8px 0 12px; color:#111; }
h2{ font-size:16px; margin:8px 0; color:#111; }

/* Small buttons */
.btn.sm{ font-size:13px; padding:6px 10px; height:32px; }
.btn.icon{ display:inline-flex; align-items:center; gap:6px; }
/* Icon-only: hide text and keep icon visible. Use title for tooltip. */
.btn.icon{ font-size:0; }
.btn.icon svg{ width:16px; height:16px; fill: currentColor; stroke: currentColor; }

/* Minimal utility classes */
.text-sm{ font-size:12.5px; }
.text-gray-600{ color: var(--gray-600); }
.mt-2{ margin-top:6px; }
.mt-4{ margin-top:10px; }
.ml-4{ margin-left:18px; }
.flex{ display:flex; }
.inline-block{ display:inline-block; }
.gap-2{ gap:6px; }
.gap-4{ gap:10px; }
.flex-wrap{ flex-wrap:wrap; }
.justify-end{ justify-content:flex-end; }
.text-right{ text-align:right; }

/* Login page fine-tuning */
body.login .page{ padding-top: 16px; }
body.login .auth-box.card{ padding:16px !important; }
body.login .auth-box h2{ font-size:18px !important; margin-top:6px; margin-bottom:8px; }
body.login .auth-box input[type="text"],
body.login .auth-box input[type="password"]{
  border-color: rgba(var(--primary-rgb), 0.35);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.12);
}
body.login .auth-box input[type="text"]:hover,
body.login .auth-box input[type="password"]:hover{
  border-color: rgba(var(--primary-rgb), 0.5);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.2);
}
body.login .auth-box input[type="text"]:focus,
body.login .auth-box input[type="password"]:focus{
  border-color: rgba(var(--primary-rgb), 0.9);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25), 0 0 0 1px rgba(var(--primary-rgb), 0.4) inset;
}

/* Register page: reuse the same input visual treatments */
body.register .auth-box input[type="text"],
body.register .auth-box input[type="email"],
body.register .auth-box input[type="password"]{
  border-color: rgba(var(--primary-rgb), 0.35);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.12);
}
body.register .auth-box input[type="text"]:hover,
body.register .auth-box input[type="email"]:hover,
body.register .auth-box input[type="password"]:hover{
  border-color: rgba(var(--primary-rgb), 0.5);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.2);
}
body.register .auth-box input[type="text"]:focus,
body.register .auth-box input[type="email"]:focus,
body.register .auth-box input[type="password"]:focus{
  border-color: rgba(var(--primary-rgb), 0.9);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25), 0 0 0 1px rgba(var(--primary-rgb), 0.4) inset;
}

/* Dashboard interactive cards */
.dashboard-card{ transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; cursor:pointer; }
.dashboard-card:hover{ transform: translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,0.08); text-decoration:none; }
.dashboard-card:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }
.dashboard-card.stat-en-cours{ background:#e8f4ff; border-color:#bcd9ff; }
.dashboard-card.stat-en-cours div:last-child{ color:#0d47a1 !important; }
.dashboard-card.stat-clos{ background:#f5f5f5; border-color:#e2e8f0; }
.dashboard-card.stat-clos div:last-child{ color:#374151 !important; }

/* Reusable modal styles */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.4); display:none; align-items:center; justify-content:center; z-index:20000; }
.modal-overlay[style*="display:block"],
.modal-overlay[style*="display: block"],
.modal-overlay[style*="display:flex"],
.modal-overlay[style*="display: flex"]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.modal{ background:#fff; border-radius:10px; padding:16px; width:560px; max-width:90vw; box-shadow:0 10px 25px rgba(0,0,0,0.2); opacity:0; animation: fadeIn .12s ease forwards; position:relative; margin:0; max-height:95vh; overflow:auto; }
.modal h3{ margin:0 0 8px 0; font-size:18px; }
.modal p{ margin:6px 0; color:#374151; }
.modal .actions{ display:flex; gap:8px; margin-top:12px; justify-content:flex-end; }
.modal input[type="text"]{ width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; }
/* Bouton de fermeture (croix) en haut à gauche des modals */
.modal .modal-close{
  position:absolute;
  right:10px; top:10px;
  width:28px; height:28px;
  border-radius:6px;
  border:1px solid var(--gray-300);
  background:#fff; color: var(--primary-700);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1; padding:0;
}
.modal .modal-close:hover{ background:#f9fafb; }
@media (max-width:600px){ .modal{ padding:12px; } }

/* Animations */
/* Supprime l'animation scale pour éviter le tremblement */
@keyframes fadeIn{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:translateY(0);} }
@keyframes spin{ to{ transform: rotate(360deg);} }
details[open] > .card, details[open] > .theme-panel{ animation: fadeIn .12s ease; }

/* Responsive sidebar */
@media (max-width: 1024px){
  .sidebar{ position:fixed; left:-260px; top:0; bottom:0; z-index:30; overflow:auto; transition:left .2s ease; }
  body.sidebar-open .sidebar{ left:0; }
  .content{ margin-left:0; }
}

/* Theme panel */
.theme-panel{ position:absolute; right:10px; top:48px; width:280px; background:#fff; border:1px solid var(--gray-300); border-radius:12px; padding:12px; box-shadow:0 8px 20px rgba(0,0,0,0.08); }
.theme-panel h4{ margin:0 0 8px 0; font-size:14px; color:var(--gray-700); }

/* Focus visible (accessibility) */
:focus{ outline:none; }
a:focus-visible, button:focus-visible, .icon-btn:focus-visible, .user-chip:focus-visible, summary:focus-visible{
  outline: 3px solid rgba(var(--primary-rgb), 0.5);
  outline-offset: 2px;
  border-radius: 8px;
}
.theme-row{ display:flex; align-items:center; gap:8px; }
.theme-row input[type="color"]{ width:40px; height:32px; padding:0; border:none; background:transparent; }

/* Details dropdown panels */
details > summary{ list-style:none; }
details[open] > summary::marker, summary::-webkit-details-marker{ display:none; }

/* Désactiver les hover spécifiques connus (pages paramètres) */
#btn-open-add-crit:hover, #btn-open-add-type-top:hover{ filter:none !important; box-shadow:none !important; }
button.btn.icon[data-type-rename]:hover, button.btn.icon[data-type-delete]:hover{ filter:none !important; box-shadow:none !important; }

/* Verrouiller le scroll quand une modale est ouverte */
body.modal-open{ overflow:hidden; }

/* Variante sans animation: visible immédiatement et stable */
.modal.no-anim{ animation:none !important; transform:none !important; will-change:auto !important; opacity:1 !important; }
.modal-overlay.no-anim{ animation:none !important; }
.modal-overlay.no-anim *{ animation:none !important; transition:none !important; }

/* Fix global icons: force fill/stroke to inherit button color (white on blue) */
.btn svg,
.btn.icon svg,
summary.btn svg {
  width:16px; height:16px;
  display:inline-block; vertical-align:middle;
  fill: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 1.6 !important; /* visible même si l’icône est stroke-only */
}

/* Couvrir toutes les formes */
.btn svg path,
.btn svg rect,
.btn svg circle,
.btn svg polygon,
.btn svg line,
.btn svg polyline {
  fill: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 1.6 !important;
}