/* ==========================================================
   FDR 2026 - Sadem Group  |  01 - Fondations
   Direction : "Atelier" - Swiss editorial sur papier chaud.
   Encres chaudes, surfaces os, filets fins, ombres diffuses.
   Display : Bricolage Grotesque / UI : Instrument Sans
   ========================================================== */

:root {
  /* --- Typographie --- */
  --sf:      'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --display: 'Bricolage Grotesque', 'Instrument Sans', 'Segoe UI', sans-serif;
  --mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  /* --- Surfaces (neutres chauds) --- */
  --page:       #f6f5f2;
  --surface:    #ffffff;
  --surface-2:  #f4f3ef;
  --surface-3:  rgba(28,25,20,0.055);
  --surface-4:  rgba(28,25,20,0.09);
  --glass:      rgba(255,255,255,0.86);

  /* --- Filets --- */
  --border:     rgba(28,25,20,0.10);
  --border-2:   rgba(28,25,20,0.18);
  --border-3:   rgba(28,25,20,0.28);

  /* --- Encres --- */
  --t1: #191713;
  --t2: #45413a;
  --t3: #756f65;
  --t4: #a8a29a;

  /* Encre pleine : actions primaires */
  --ink:    #1b1814;
  --ink-2:  #35302a;

  /* --- Accents (palette categorielle accordee, AA sur blanc) --- */
  --blue:    #2b52e0;
  --green:   #0b8055;
  --orange:  #b45309;
  --red:     #e02424;
  --purple:  #7c3aed;
  --teal:    #0e7490;
  --indigo:  #4f46e5;
  --pink:    #e11d63;
  --gray:    #78716c;
  --magenta: #d6127e;

  /* Variantes claires (fonds de pastilles) */
  --blue-soft:   rgba(43,82,224,0.10);
  --green-soft:  rgba(11,128,85,0.10);
  --orange-soft: rgba(180,83,9,0.10);
  --red-soft:    rgba(224,36,36,0.09);

  /* Etats presses */
  --blue-press:    #2244c4;
  --green-press:   #0a6c48;
  --red-press:     #c31d1d;
  --magenta-press: #b00d68;

  /* --- Couleurs par type d'operation --- */
  --c-major:  #2b52e0;
  --c-pneu:   #0b8055;
  --c-soldes: #b45309;
  --c-vp:     #e11d63;
  --c-event:  #7c3aed;
  --c-reseau: #0e7490;
  --c-autre:  #78716c;

  /* --- Marques --- */
  --brand-axxe:    #c2560c;
  --brand-maxxess: #8a6f00;

  /* --- Rayons --- */
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-full: 999px;

  /* --- Ombres : diffuses, teintees chaud --- */
  --shadow-xs: 0 1px 1px rgba(28,25,20,0.04);
  --shadow-sm: 0 1px 2px rgba(28,25,20,0.05), 0 1px 3px -1px rgba(28,25,20,0.05);
  --shadow-md: 0 2px 4px -2px rgba(28,25,20,0.06), 0 10px 22px -8px rgba(28,25,20,0.13);
  --shadow-lg: 0 2px 6px -2px rgba(28,25,20,0.06), 0 16px 40px -12px rgba(28,25,20,0.16),
               0 40px 72px -32px rgba(28,25,20,0.14);

  /* Anneau de focus */
  --ring: 0 0 0 3px rgba(43,82,224,0.16);

  /* --- Courbes --- */
  --ease:     cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}

body {
  font-family: var(--sf);
  font-optical-sizing: auto;
  background: var(--page);
  color: var(--t1);
  height: 100vh;
  overflow: hidden;
  letter-spacing: -0.006em;
}

/* Atmosphere : lavis radial tres doux + grain fin, fixes derriere tout */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 12% -8%,  rgba(43,82,224,0.045), transparent 62%),
    radial-gradient(900px 520px at 92% 4%,    rgba(180,83,9,0.038),  transparent 60%),
    radial-gradient(760px 620px at 50% 108%,  rgba(11,128,85,0.030), transparent 62%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

button { font-family: inherit; cursor: pointer; letter-spacing: inherit; }
input, select, textarea { font-family: inherit; letter-spacing: inherit; }
a { color: var(--blue); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Chiffres alignes partout ou ils comptent */
.filter-pill-count, .lsb-month-count, .filter-active-badge,
.admin-count, .history-date, .op-card-gantt-months,
.card-dt-val, .gantt-row-date, .op-card-todo-count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --- Layout --- */
.app {
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 1fr;
  height: 100vh;
}

/* ==========================================================
   Topbar
   ========================================================== */
.topbar {
  grid-column: 1 / -1;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 26px;
  position: relative;
  z-index: 100;
  min-width: 0;
}
.topbar-icon {
  color: var(--ink);
  display: flex;
  align-items: center;
}
.topbar-icon svg { width: 50px; height: 50px; }

.topbar-title-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  flex-shrink: 1;
}
.topbar h1 {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.038em;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  line-height: 1.05;
}
.topbar-logo {
  height: 19px;
  width: auto;
  vertical-align: middle;
  margin-left: 10px;
  opacity: 0.8;
  display: inline-block;
}

/* Recherche extensible */
.topbar-search {
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
  width: 38px;
  overflow: hidden;
  cursor: text;
  background: var(--surface-3);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  transition: width 0.42s var(--ease-out), background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.topbar-search:hover,
.topbar-search:focus-within { width: 240px; }
.topbar-search:hover { background: var(--surface-4); }
.topbar-search:focus-within {
  background: var(--surface);
  border-color: var(--blue);
  box-shadow: var(--ring);
}
.topbar-search svg {
  position: absolute;
  left: 12px;
  color: var(--t3);
  width: 14px; height: 14px;
  pointer-events: none;
  flex-shrink: 0;
}
.topbar-search-input {
  width: 240px;
  flex-shrink: 0;
  padding: 7px 14px 7px 34px;
  background: transparent;
  border: none;
  font-size: 13px;
  color: var(--t1);
  outline: none;
  opacity: 0;
  transition: opacity 0.18s;
}
.topbar-search:hover .topbar-search-input,
.topbar-search:focus-within .topbar-search-input { opacity: 1; }
.topbar-search-input::placeholder { color: var(--t4); }

/* Action primaire : magenta, pour ressortir du reste de la topbar */
.topbar-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  background: var(--magenta);
  color: #fff;
  border: none;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm), 0 1px 0 rgba(255,255,255,0.14) inset;
  transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
}
.topbar-add-btn:hover {
  background: var(--magenta-press);
  box-shadow: var(--shadow-md), 0 1px 0 rgba(255,255,255,0.14) inset;
}
.topbar-add-btn:active { transform: scale(0.97); }
.topbar-add-btn svg { width: 13px; height: 13px; }

/* Spacer invisible : ne sert qu'a forcer un retour a la ligne dans le
   topbar mobile (voir 10-responsive.css), inerte partout ailleurs. */
.topbar-linebreak { display: none; }

/* Conteneur des icones de gestion : display:contents par defaut pour
   que ses enfants se comportent comme des enfants directs de .topbar
   (layout desktop inchange) ; devient un vrai flex item en mobile
   (voir 10-responsive.css) pour partager la ligne avec la recherche. */
.topbar-mgmt-icons { display: contents; }

.topbar-history-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  background: var(--surface);
  color: var(--t2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  box-shadow: var(--shadow-xs);
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
}
.topbar-history-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--t1);
}
.topbar-history-btn:active { transform: scale(0.97); }
.topbar-history-btn svg { width: 14px; height: 14px; }

.admin-pending-badge,
.history-unseen-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--page);
  box-shadow: 0 2px 6px rgba(224,36,36,0.35);
  box-sizing: border-box;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--border-2);
  flex-shrink: 0;
}
.topbar-user-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-full);
  padding: 4px 8px 4px 6px;
  transition: background .18s;
}
.topbar-user-link:hover { background: var(--surface-3); }
.topbar-user-email {
  font-size: 12px;
  color: var(--t3);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-user-role {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--blue-soft);
  color: var(--blue);
}
.topbar-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--t3);
  box-shadow: var(--shadow-xs);
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.topbar-logout-btn:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 4px 12px rgba(224,36,36,0.32);
  transform: translateY(-1px);
}
.topbar-logout-btn i { font-size: 12px; }