/* SEAO-HUB Design System - Tokyo Night Trading Terminal */
/* Version 1.1 - Fixed table layout */

/* ============================================================================
   Color Palette
   ========================================================================= */
:root {
  /* Base layers (depth separation).
     Iter 16 (2026-05-12 Pete UX) — `--bg-preview` ajouté pour le panneau
     droit du Beast IDE (fiches ressources, contenu textuel). Couleur
     intermédiaire entre `--bg-base` (centre workspace) et `--bg-panel`
     (sidebar gauche) → donne un relief visuel sans rivaliser avec la
     sidebar. Inspiration : panneau Welcome VS Code (légèrement gris vs
     tree adjacent). RGB ≈ (29, 31, 44) ≈ subtilement plus clair que base. */
  --bg-base: #1a1b26;
  --bg-preview: #1d1f2c;
  --bg-panel: #24283b;
  --bg-card: #1f2335;
  --bg-hover: #2d3149;

  /* Text hierarchy */
  --text-primary: #c0caf5;
  --text-secondary: #9aa5ce;
  --text-muted: #565f89;
  --text-inverse: #1a1b26;

  /* Accent (use sparingly) */
  --accent-primary: #7aa2f7;
  --accent-glow: rgba(122, 162, 247, 0.25);

  /* Semantic colors (finance terminal standard) */
  --success: #00d26a;
  --warning: #e0af68;
  --error: #f7768e;
  --info: #7dcfff;

  /* %E — écart de l'estimé au résultat gagnant (colonne T4). Rouge/vert EFFACÉS :
     désaturés + assombris vs --error/--success pour NE PAS compétitionner avec le vert
     bright du gagnant ni le rouge plein du % (Écart). Registre atténué du DÉRIVÉ, dans
     la même famille que le gris --text-secondary de la colonne Estimé. Valeurs pinnées
     au harnais getComputedStyle (SI115/SI133). Zéro (calibration) = --text-secondary. */
  --estimate-ecart-neg: #c07683;
  --estimate-ecart-pos: #5fa383;

  /* Borders and dividers */
  --border-subtle: #414868;
  --border-strong: #565f89;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Layout chrome */
  --header-height: 48px;

  /* Font stacks */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Transitions */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   Base Styles
   ========================================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

h1 {
  font-size: 24px;
  margin-bottom: var(--space-md);
}

h2 {
  font-size: 18px;
  margin-bottom: var(--space-sm);
}

h3 {
  font-size: 16px;
  margin-bottom: var(--space-sm);
}

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--info);
}

/* ============================================================================
   Layout
   ========================================================================= */
.container {
  max-width: 100%;
  /* Allow full width on large screens */
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.header {
  height: var(--header-height);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  padding: 0 var(--space-lg);
}

.header-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.main-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-lg);
  padding-top: var(--space-lg);
  min-height: calc(100vh - var(--header-height));
}

.sidebar {
  position: sticky;
  top: var(--space-lg);
  height: fit-content;
}

.content {
  min-width: 0;
  /* Prevent overflow */
}

/* ============================================================================
   Cards
   ========================================================================= */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: var(--space-md);
  transition: border-color var(--transition-fast);
}

.card:hover {
  border-color: var(--border-strong);
}

.card-elevated {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.card-header {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-subtle);
}

.card-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

/* ============================================================================
   Tables - Smart Auto Layout
   ========================================================================= */

/* Table container - scrolls internally with sticky header */
.table-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  /* Height calcul: viewport - header (~60px) - filters (~100px) - stats (~80px) - margins (~80px) */
  max-height: calc(100vh - 320px);
  min-height: 400px;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  /* Add border to show scroll context */
  border-radius: 4px;
}



.table-premium {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  /* FIXED layout = essentiel pour permettre le redimensionnement manuel */
  table-layout: fixed;
  /* Min-width garantit que les colonnes ne disparaissent jamais */
  /* Calcul: fixes (~610px) + flexibles (7 × 50px min = 350px) = ~960px, arrondi à 1200px pour confort */
  min-width: 1200px;
}

.table-premium thead {
  background: var(--bg-panel);
  position: sticky;
  top: 0;
  z-index: 10;
}

.table-premium th {
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
  /* Resize horizontal activé par table-layout: fixed + overflow */
  resize: horizontal;
  overflow: hidden;
  /* Sticky header shadow when scrolled */
  background: var(--bg-panel);
}

/* Sortable column headers */
.table-premium th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}

.table-premium td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Highlight row on hover */
.tender-row:hover td {
  background-color: var(--bg-hover);
}

/* --- COLONNES FIXES (Largeurs en Pixels pour stabilité) --- */

/* Dates */
.col-date {
  width: 95px;
  max-width: 95px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* Catégorie */
.col-cat {
  width: 50px;
  max-width: 50px;
  text-align: center;
  white-space: nowrap;
}

/* Référence - FLEXIBLE */
.col-ref {
  width: 7%;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col-ref a {
  color: #3b82f6;
  text-decoration: underline;
}

/* Résultat */
.col-result {
  width: 150px;
  max-width: 150px;
  white-space: nowrap;
  font-family: var(--font-mono);
  text-align: right;
}

.table-premium th.col-result {
  text-align: right;
  font-family: inherit;
  width: 150px;
}

/* Estimé (le prix de Recon, volet B T3) — clone STRICT de .col-result (même largeur,
   même piste mono, même alignement droite) ; seule la teinte du MONTANT diffère. */
.col-estimate {
  width: 150px;
  max-width: 150px;
  white-space: nowrap;
  font-family: var(--font-mono);
  text-align: right;
}

.table-premium th.col-estimate {
  text-align: right;
  font-family: inherit;
  width: 150px;
}

/* Le montant en gris #9aa5ce (--text-secondary) = registre du DÉRIVÉ (jugement Recon)
   vs blanc = FAIT (Résultats) ; scopé aux cellules de données, pas l'en-tête. Rien
   d'italique (cohérence des tableaux). Spécificité (0,2,1) requise : `.table-premium td`
   (0,1,1, défini APRÈS) posait color:--text-primary et gagnait à l'ordre source. */
.table-premium td.col-estimate {
  color: var(--text-secondary);
}

/* Écart (%) */
.col-ecart {
  width: 75px;
  max-width: 75px;
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-mono);
}

.table-premium th.col-ecart {
  text-align: right;
  font-family: inherit;
  width: 75px;
  max-width: 75px;
}

/* Δ1ᵉʳ (écart estimé↔résultat gagnant, T4 — libellé T5, ex-%E) — clone STRICT de
   .col-ecart (même 75px, mono, droite). La couleur du signe est portée par le <span>
   inline de la cellule (rouge/vert effacé, ou gris neutre à 0.0%), pas ici. */
.col-ecart-estime {
  width: 75px;
  max-width: 75px;
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-mono);
}

.table-premium th.col-ecart-estime {
  text-align: right;
  font-family: inherit;
  width: 75px;
  max-width: 75px;
}

/* ΔM̄ (écart estimé↔moyenne des soumissions, T5) — clone STRICT de .col-ecart-estime. */
.col-ecart-moyenne {
  width: 75px;
  max-width: 75px;
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-mono);
}

.table-premium th.col-ecart-moyenne {
  text-align: right;
  font-family: inherit;
  width: 75px;
  max-width: 75px;
}

/* Barre de moyenne (x̄) sur le M des en-têtes ΔM̄ — l'overline CSS rend net dans
   toutes les fontes (le combining macron U+0304 casse en mono). */
.th-overline {
  text-decoration: overline;
}

/* Position / Soumissions (#) */
.col-rank {
  width: 50px;
  max-width: 50px;
  font-family: var(--font-mono);
  text-align: center;
  white-space: nowrap;
}

.table-premium th.col-rank {
  text-align: center;
  font-family: inherit;
  width: 50px;
  max-width: 50px;
}

/* Suivi */
.col-follow {
  width: 50px;
  max-width: 50px;
  text-align: center;
  white-space: nowrap;
}

th.col-follow {
  text-align: left;
}

/* Nombre de soumissions (# dans company profile) */
.col-bids {
  width: 50px;
  max-width: 50px;
  font-family: var(--font-mono);
  text-align: center;
  white-space: nowrap;
}

/* Montant soumis (company profile) - même style que col-result */
.col-amount {
  width: 150px;
  max-width: 150px;
  white-space: nowrap;
  font-family: var(--font-mono);
  text-align: right;
}


/* --- COLONNES FLEXIBLES (Pourcentages, total ~85% du restant) --- */
/* Note: En table-layout: fixed, les % s'appliquent sur la largeur totale de la table */

/* Titre - 30% */
.col-title {
  width: 30%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sortable column headers */
.table-premium th.sortable {
  user-select: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

/* Sort indicator */
.table-premium th .sort-icon {
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.3;
  transition: opacity var(--transition-fast);
}

.table-premium th.sortable:hover .sort-icon {
  opacity: 0.6;
}

.table-premium th.sort-active .sort-icon {
  opacity: 1;
  color: var(--accent-primary);
}

/* Sticky header scroll shadow */
.table-premium thead.scrolled th {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.table-premium td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.table-premium tbody tr {
  transition: background var(--transition-fast);
}

.table-premium tbody tr:hover {
  background: var(--bg-hover);
  cursor: pointer;
}


/* Gagnant - 15% */
.col-winner {
  width: 15%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Organisme - 15% */
.col-org {
  width: 15%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #bb9af7;
  /* Tokyo Night purple */
}

.col-org a {
  color: #bb9af7 !important;
}

/* Statut - 5% */
.col-status {
  width: 8%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Région - 8% */
.col-region {
  width: 8%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Type - 8% */
.col-type {
  width: 8%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================================
   Status Colors
   ========================================================================= */
.status-text {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
  line-height: 1.2;
  border: 0.5px solid currentColor;
  background: transparent;
  white-space: nowrap;
}

.status-published {
  color: #c0caf5;
  /* Tokyo Night white */
}

.status-awaiting-results {
  color: #9d7cd8;
  /* Tokyo Night purple */
}

.status-awaiting-conclusion {
  color: #7dcfff;
  /* Tokyo Night cyan */
}

.status-concluded {
  color: #00d26a;
  /* Stock market green */
}

.status-completed {
  color: #565f89;
  /* Muted gray */
}

.status-other {
  color: #ff9e64;
  /* Tokyo Night Orange */
}

.status-available {
  color: rgba(255, 180, 128, 0.6);
  /* Pale orange */
}

.status-cancelled {
  color: #f7768e;
  /* Tokyo Night red */
}

/* Winner row */
.table-premium tr.winner td {
  color: var(--success);
  font-weight: 500;
}

/* ============================================================================
   Badges
   ========================================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.badge-success {
  background: var(--success);
  color: var(--text-inverse);
}

.badge-info {
  background: var(--info);
  color: var(--text-inverse);
}

.badge-warning {
  background: var(--warning);
  color: var(--text-inverse);
}

.badge-warning-light {
  background: rgba(255, 158, 100, 0.25);
  color: #ffb380;
  border: 1px solid rgba(255, 158, 100, 0.4);
}

.badge-error {
  background: var(--error);
  color: var(--text-inverse);
}

.badge-neutral {
  background: var(--bg-panel);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

/* ============================================================================
   Filter Pills
   ========================================================================= */
.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.filter-pill {
  padding: 6px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-pill:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.filter-pill.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-inverse);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* ============================================================================
   Search Input
   ========================================================================= */
.search-container {
  position: relative;
  margin-bottom: var(--space-md);
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-sans);
  transition: all var(--transition-base);
}

/* Year/Period custom dropdown (replaces native <select> for dark theme) */
.year-dropdown {
  position: relative;
  display: inline-block;
}

.year-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  min-width: 90px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.year-dropdown-btn:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.year-dropdown-btn svg {
  transition: transform var(--transition-fast);
}

.year-dropdown.open .year-dropdown-btn svg {
  transform: rotate(180deg);
}

.year-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 100%;
  background: #1f2335;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  max-height: 280px;
  overflow-y: auto;
}

.year-dropdown.open .year-dropdown-menu {
  display: block;
}

.year-dropdown-item {
  padding: 5px 14px;
  color: #c0caf5;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition-fast);
  white-space: nowrap;
}

.year-dropdown-item:first-child {
  border-radius: 5px 5px 0 0;
}

.year-dropdown-item:last-child {
  border-radius: 0 0 5px 5px;
}

.year-dropdown-item:hover {
  background: #292e42;
}

.year-dropdown-item.selected {
  background: rgba(122, 162, 247, 0.15);
  color: #7aa2f7;
}

.search-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.search-input::placeholder {
  color: var(--text-muted);
}

/* ============================================================================
   Filter Bar - Responsive Layout
   ========================================================================= */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: flex-end;
}

.filter-bar .filter-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Allow shrinking */
}

.filter-bar .filter-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* Search field - flexible, takes remaining space */
.filter-bar .filter-search {
  flex: 1 1 200px;
  min-width: 150px;
  max-width: 400px;
}

/* Date field selector */
.filter-bar .filter-date-field {
  flex: 0 0 auto;
  min-width: 100px;
}

/* Date inputs */
.filter-bar .filter-date {
  flex: 0 0 auto;
  min-width: 130px;
}

/* Multi-select dropdowns */
.filter-bar .filter-dropdown {
  flex: 1 1 150px;
  min-width: 140px;
  max-width: 250px;
  position: relative;
}

/* Filter ordering: Category before Status */
.filter-bar .category-filter-container {
  order: 10;
}

.filter-bar .status-filter-container {
  order: 11;
}

.filter-bar .region-filter-container {
  order: 12;
}

.filter-bar .type-filter-container {
  order: 13;
}

.filter-bar .folder-filter-container {
  order: 14;
}

.filter-bar .action-filter-container {
  order: 15;
}

.filter-bar .filter-actions {
  order: 99;
}

/* Action buttons */
.filter-bar .filter-actions {
  display: flex;
  gap: var(--space-xs);
  flex: 0 0 auto;
  align-items: center;
}

/* Follow toggle pill */
.follow-filter-toggle {
  height: 38px;
  padding: 0 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  user-select: none;
}

.follow-filter-toggle:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.follow-filter-toggle.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
  box-shadow: 0 0 12px var(--accent-glow);
}

.filter-bar .filter-btn-primary {
  height: 38px;
  padding: 0 20px;
  background: var(--accent-primary);
  border: none;
  border-radius: 6px;
  color: white;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.filter-bar .filter-btn-primary:hover {
  background: #6b93e0;
  transform: translateY(-1px);
}

.filter-bar .filter-btn-secondary {
  height: 38px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}

.filter-bar .filter-btn-secondary:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

/* Icon-only buttons in the filter actions row: « ✕ Effacer » régularisé + picker
   de colonnes. Look minimaliste inspiré de .pieces-filter-clear-btn (tableau des
   sessions), dimensionné pour s'aligner sur la rangée 38px. */
.filter-bar .filter-btn-clear,
.filter-bar .filter-btn-columns {
  height: 38px;
  width: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.filter-bar .filter-btn-clear:hover,
.filter-bar .filter-btn-columns:hover,
.filter-bar .filter-btn-columns[aria-expanded="true"] {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

/* Column picker dropdown (generic; panel content built by table-column-picker.js) */
.filter-col-picker {
  position: relative;
  display: inline-flex;
}

.filter-col-picker-panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  z-index: 1000;
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px 0;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.filter-col-picker-panel[hidden] {
  display: none;
}

.filter-col-picker-header {
  padding: 8px 14px;
  margin-bottom: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.filter-col-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  cursor: pointer;
}

.filter-col-picker-item:hover {
  background: var(--bg-elevated);
}

.filter-col-picker-item input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent-primary);
}

.filter-col-picker-item.is-pinned,
.filter-col-picker-item.is-pinned input[type="checkbox"] {
  cursor: default;
  color: var(--text-secondary);
}

.filter-col-picker-label {
  flex: 1;
}

.filter-col-picker-hint {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  opacity: 0.6;
}

/* Dropdown button styling */
.filter-bar .filter-dropdown-btn {
  padding-left: 12px;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Responsive breakpoints */
@media (max-width: 1400px) {
  .filter-bar .filter-search {
    flex: 1 1 180px;
    max-width: 300px;
  }

  .filter-bar .filter-dropdown {
    flex: 1 1 140px;
    max-width: 200px;
  }
}

@media (max-width: 1100px) {
  .filter-bar {
    gap: var(--space-xs);
  }

  .filter-bar .filter-search {
    flex: 1 1 100%;
    max-width: none;
    order: -1;
    /* Search always first */
  }

  .filter-bar .filter-dropdown {
    flex: 1 1 calc(50% - var(--space-xs));
    max-width: none;
  }
}

@media (max-width: 768px) {

  .filter-bar .filter-date-field,
  .filter-bar .filter-date {
    flex: 1 1 calc(33% - var(--space-xs));
    min-width: 100px;
  }

  .filter-bar .filter-dropdown {
    flex: 1 1 100%;
  }

  .filter-bar .filter-actions {
    flex: 1 1 100%;
    justify-content: stretch;
  }

  .filter-bar .filter-btn-primary,
  .filter-bar .filter-btn-secondary {
    flex: 1;
    justify-content: center;
  }
}

/* ============================================================================
   Stats Bar v3 - Clean Market Ticker Style
   ========================================================================= */
.stats-ticker-grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  /* No outer border - avoids "container in container" look */
  background: transparent;
  border: none;
  border-radius: 0;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
  overflow-x: auto;
  gap: 0;
}

/* Scrollbar styling for the ticker */
.stats-ticker-grid::-webkit-scrollbar {
  height: 4px;
}

.stats-ticker-grid::-webkit-scrollbar-track {
  background: transparent;
}

.stats-ticker-grid::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 2px;
}

.ticker-card {
  flex: 0 0 auto;
  min-width: 155px;
  background: transparent;
  padding: 8px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  /* Separator line - subtle divider */
  border-right: 1px solid var(--border-subtle);
  border-radius: 0;
  border-top: none;
  border-bottom: none;
  border-left: none;
}

.ticker-card:first-child {
  /* Same padding as other cards for uniformity */
  padding-left: 20px;
  /* Add left border like other cards for uniformity */
  border-left: 1px solid var(--border-subtle);
}

.ticker-card:last-child {
  border-right: none;
}

/* Subtle hover effect */
.ticker-card:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* Clickable KPI filter cards */
.kpi-filter-card {
  transition: all 0.2s ease;
}

.kpi-filter-card:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.kpi-filter-card.active {
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--kpi-color, var(--accent-primary)), 0 4px 12px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.03);
}

.ticker-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
  white-space: nowrap;
}

.ticker-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: visible;
  /* Prevent clipping */
}

.ticker-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.ticker-trend {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 2px;
  white-space: nowrap;
}

.ticker-trend.up {
  color: var(--success);
  background: rgba(158, 206, 106, 0.15);
}

.ticker-trend.down {
  color: var(--error);
  background: rgba(247, 118, 142, 0.15);
}

.ticker-sub {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Hot List Special Style */
.measure-danger-glow {
  border-color: rgba(247, 118, 142, 0.4);
  background: linear-gradient(to bottom right, var(--bg-card), rgba(247, 118, 142, 0.05));
}

.measure-danger-glow .ticker-value {
  text-shadow: 0 0 10px rgba(247, 118, 142, 0.3);
}

.text-danger {
  color: var(--error) !important;
}

/* Loading skeleton for stats */
.stats-skeleton {
  height: 80px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* Sync Indicator - Compact metric pushed to far right of stats bar */
.sync-indicator {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  cursor: default;
  white-space: nowrap;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.sync-indicator:hover {
  opacity: 0.85;
}

.sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
  animation: pulse 3s ease-in-out infinite;
}

.sync-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.sync-time {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

/* ============================================================================
   Charts Grid - Responsive 5-column layout for company profile charts
   ========================================================================= */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.chart-item {
  min-width: 0;
  /* Allow shrinking */
}

.chart-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-container {
  height: 140px;
  position: relative;
  overflow: hidden;
}

.chart-legend {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  justify-content: center;
  font-size: 9px;
  color: var(--text-muted);
}

/* Responsive: 3 columns on medium screens */
@media (max-width: 1400px) {
  .charts-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .chart-container {
    height: 120px;
  }
}

/* Responsive: 2 columns on smaller screens */
@media (max-width: 900px) {
  .charts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .chart-container {
    height: 100px;
  }
}

/* Responsive: 1 column on mobile */
@media (max-width: 600px) {
  .charts-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .chart-container {
    height: 120px;
  }
}

/* ============================================================================
   Loading States
   ========================================================================= */
.htmx-indicator {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  color: var(--text-secondary);
  font-size: 13px;
}

.htmx-request .htmx-indicator {
  display: flex;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================================
   Utility Classes
   ========================================================================= */
.text-muted {
  color: var(--text-muted);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-success {
  color: var(--success);
}

.text-warning {
  color: var(--warning);
}

.text-error {
  color: var(--error);
}

.mt-sm {
  margin-top: var(--space-sm);
}

.mt-md {
  margin-top: var(--space-md);
}

.mt-lg {
  margin-top: var(--space-lg);
}

.mb-sm {
  margin-bottom: var(--space-sm);
}

.mb-md {
  margin-bottom: var(--space-md);
}

.mb-lg {
  margin-bottom: var(--space-lg);
}

/* ============================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
  .main-grid {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .table-premium {
    font-size: 12px;
  }

  .table-premium th,
  .table-premium td {
    padding: 8px 12px;
  }
}

/* ============================================================================
   Mon Hub - Navigation Pill
   ========================================================================= */
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
  position: relative;
}

.nav-pill:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.nav-pill.active {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: rgba(122, 162, 247, 0.1);
}

.notification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  background: var(--error);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 8px;
}

/* ============================================================================
   Header — Breadcrumb écosystème SW (préparation intégration future)
   Porté de l'IDE-SW (static/css/themes.css .ide-breadcrumb-*) : le header global
   adopte le chemin « [SW] | Département / Section / Session ». Segments scindés
   (label = navigation, caret = menu), sans bordure au repos (hover léger).
   `--overlay-medium` (absent ici) → `--bg-hover`.
   ========================================================================= */
[x-cloak] { display: none !important; }

.ide-breadcrumb {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ide-breadcrumb-seg {
  position: relative;
}

/* Bouton scindé : moitié « nom » (navigation) + moitié « caret » (menu).
   Séparateur révélé seulement au survol → pastille propre au repos. */
.ide-breadcrumb-split {
  display: inline-flex;
  align-items: stretch;
  border-radius: 7px;
}

.ide-breadcrumb-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px 5px 10px;
  border-radius: 7px 0 0 7px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.ide-breadcrumb-go:hover {
  background: var(--bg-hover);
}

.ide-breadcrumb-caret {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px 5px 7px;
  background: transparent;
  border: none;
  border-radius: 0 7px 7px 0;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.ide-breadcrumb-caret:hover {
  background: var(--bg-hover);
}

.ide-breadcrumb-caret::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 14px;
  transform: translateY(-50%);
  background: var(--border-subtle);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.ide-breadcrumb-split:hover .ide-breadcrumb-caret::before {
  opacity: 1;
}

/* Noms de département en majuscules — scopé au segment « département »
   (le segment « section » partage ces classes et reste en casse normale). */
.ide-breadcrumb-seg--dept .ide-breadcrumb-label,
.ide-breadcrumb-seg--dept .ide-breadcrumb-item-label {
  text-transform: uppercase;
}

.ide-breadcrumb-chevron {
  width: 11px;
  height: 11px;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.ide-breadcrumb-caret:hover .ide-breadcrumb-chevron {
  color: var(--text-primary);
}

.ide-breadcrumb-caret.is-open .ide-breadcrumb-chevron {
  transform: rotate(180deg);
}

.ide-breadcrumb-sep {
  color: var(--text-muted);
  opacity: 0.55;
  /* 2026-06-17 (Pete) — barre oblique allongée vers les proportions Railway
     (était 15px, trop courte). font-size scale uniforme = préserve l'angle du
     slash ; line-height:1 évite d'agrandir la hauteur de ligne du breadcrumb. */
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  margin: 0 2px;
  user-select: none;
}

.ide-breadcrumb-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  padding: 5px;
  z-index: 10050;
}

.ide-breadcrumb-menu-title {
  padding: 6px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ide-breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 7px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 12.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ide-breadcrumb-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.ide-breadcrumb-item.is-current {
  background: var(--accent-glow);
}

.ide-breadcrumb-item-label {
  font-weight: 600;
  flex: 1;
}

.ide-breadcrumb-check {
  margin-left: auto;
  color: var(--accent-primary);
  font-weight: 700;
}

/* Icône La Bête — raccourci membres Beast, SANS contour (Pete 2026-06-15).
   Vit au niveau 2 du breadcrumb, entre Sections et le « / » de Session. */
.ide-breadcrumb-bete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 7px;
  margin: 0 1px;
  border-radius: 7px;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.ide-breadcrumb-bete:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Paire Recon + La Bête adjacente (Pete 2026-07-19) : écart resserré — on
   rétrécit les paddings INTÉRIEURS de la paire (5px au lieu de 7px → ~12px
   entre les glyphes, l'entre-deux validé ; 2px était trop serré). Zones de
   clic disjointes, côtés extérieurs et reste du breadcrumb inchangés. */
.ide-breadcrumb-bete:has(+ .ide-breadcrumb-bete) {
  padding-right: 5px;
  margin-right: 0;
}
.ide-breadcrumb-bete + .ide-breadcrumb-bete {
  padding-left: 5px;
  margin-left: 0;
}

.ide-breadcrumb-bete.is-active {
  color: var(--accent-primary);
}

/* Stub « IDE général » (Session, niveau 3) — empty-state sombre, présentation IDE. */
.general-ide-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: calc(100vh - var(--header-height));
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
}

.general-ide-empty h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-secondary);
}

.general-ide-empty p {
  margin: 0;
  max-width: 460px;
  font-size: 13px;
}

/* ============================================================================
   Mon Hub - Folder Menu
   ========================================================================= */
.folder-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.folder-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.folder-tab:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.folder-tab.active {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: rgba(122, 162, 247, 0.1);
}

.folder-tab .folder-icon {
  font-size: 14px;
}

.folder-tab .folder-count {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-panel);
  padding: 2px 6px;
  border-radius: 10px;
}

.folder-group {
  /* Note: This is for the folder menu tabs, not the filter dropdown */
  /* The filter dropdown uses .folder-group but needs block layout */
  display: block;
}

.folder-children {
  display: flex;
  gap: var(--space-xs);
  margin-left: var(--space-xs);
}

.folder-child {
  padding: 4px 10px;
  font-size: 12px;
}

.folder-add {
  border-style: dashed;
}

.folder-add:hover {
  border-style: solid;
}

/* ============================================================================
   Mon Hub - Follow Checkbox
   ========================================================================= */
.col-follow {
  width: 50px;
  text-align: center;
}

/* Archived row - strikethrough on data cells only, not action columns */
tr.archived td:not(.col-follow):not(.col-folder):not(.col-share):not(.col-notes) {
  text-decoration: line-through;
}

/* Disable folder/share/notes controls in archived rows - must reactivate first */
tr.archived .folder-dropdown,
tr.archived .team-share-btn,
tr.archived .notes-btn {
  pointer-events: none;
  opacity: 0.3;
}

.follow-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.follow-checkbox input {
  display: none;
}

.follow-icon {
  font-size: 18px;
  color: var(--text-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.follow-checkbox:hover .follow-icon {
  color: var(--warning);
  transform: scale(1.1);
}

.follow-checkbox input:checked+.follow-icon {
  color: var(--warning);
}

.follow-checkbox.in-beast {
  /* Orange signature La Bête (retour à l'original, Pete 2026-07-19) —
     Recon passe au BLANC pur (l'orange/vert/jaune se confondaient entre
     eux à petite taille ; blanc = achromatique, contraste garanti). */
  accent-color: #e0af68;
}

/* T1 Recon (Pete 2026-07-19) — BLANC pur ; priorité Bête (orange) > Recon
   appliquée au rendu (classes exclusives). */
.follow-checkbox.in-recon {
  accent-color: #ffffff;
}

/* Train S7 (D15, proposition à ratifier par Pete) — Privé en VIOLET (#bb9af7),
   distinct de l'orange Bête et du blanc Recon ; classes exclusives, priorité
   appliquée au rendu, UN SEUL ordre partout : Bête > Recon > Privé — Team Hub
   (S7 D15) ET case Suivi de l'IDE (`sidebar_layer.html`, train S16, passe W3,
   CR-1). */
.follow-checkbox.in-prive {
  accent-color: #bb9af7;
}

/* ============================================================================
   Mon Hub - Folder Select Dropdown
   ========================================================================= */
.col-folder {
  width: 120px;
}

.col-action {
  width: 120px;
}

.folder-select {
  width: 100%;
  padding: 4px 24px 4px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition-fast);
  /* Dark theme for dropdown */
  color-scheme: dark;
  /* Custom arrow */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23787c99' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}

.folder-select:hover {
  border-color: var(--border-strong);
  background-color: var(--bg-hover);
}

.folder-select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(122, 162, 247, 0.2);
}

/* Dark theme for dropdown options */
.folder-select option {
  background: #1a1b26;
  color: #c0caf5;
  padding: 8px 12px;
}

.folder-select option:hover,
.folder-select option:focus,
.folder-select option:checked {
  background: #292e42;
  color: #7aa2f7;
}

.folder-select optgroup {
  background: #1a1b26;
  color: #565f89;
  font-weight: 600;
  font-style: normal;
}

/* Custom Folder Dropdown (Tokyo Night themed) */
.folder-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Allow dropdowns to overflow outside table cells */
.table-premium td.col-folder,
.table-premium td.col-shared,
.table-premium td.col-notes {
  overflow: visible;
}

.folder-dropdown-btn {
  width: 100%;
  padding: 4px 24px 4px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.folder-dropdown-btn::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
  transition: transform var(--transition-fast);
}

.folder-dropdown.open .folder-dropdown-btn::after {
  transform: translateY(-50%) rotate(180deg);
}

.folder-dropdown-btn:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.folder-dropdown.open .folder-dropdown-btn {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(122, 162, 247, 0.2);
}

.folder-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 160px;
  max-height: 240px;
  overflow-y: auto;
  background: #1a1b26;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}

.folder-dropdown.open .folder-dropdown-menu {
  display: block;
}

.folder-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: #c0caf5;
  font-size: 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.folder-dropdown-item:first-child {
  border-radius: 5px 5px 0 0;
}

.folder-dropdown-item:last-child {
  border-radius: 0 0 5px 5px;
}

.folder-dropdown-item:hover,
.folder-dropdown-item:focus {
  background: #292e42;
  outline: none;
}

.folder-dropdown-item.selected {
  background: rgba(122, 162, 247, 0.15);
  color: #7aa2f7;
}

.folder-dropdown-item.selected::before {
  content: '✓';
  margin-right: 4px;
  font-size: 10px;
}

.folder-dropdown-item.child {
  padding-left: 24px;
  color: #a9b1d6;
  font-size: 11px;
}

.folder-dropdown-item.child::before {
  content: '└';
  color: #565f89;
  margin-right: 4px;
}

.folder-dropdown-item.child.selected::before {
  content: '✓';
  color: #7aa2f7;
}

/* S111 (D2) — en-tête de groupe d'une liste en mode « formulaire » (groupes de
   catégories) : NON choisissable (ni élément, ni focus), au style des en-têtes
   de colonnes du tableau ; les éléments qui le suivent sont en retrait. */
.folder-dropdown-group {
  padding: 8px 12px 4px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: default;
  user-select: none;
}

.folder-dropdown-group ~ .folder-dropdown-item {
  padding-left: 20px;
}

/* La liste ouverte d'un mode « formulaire » prend la largeur de ses libellés
   (« code - nom ») au lieu de celle, étroite, de la cellule. */
.folder-dropdown[data-mode="form"] .folder-dropdown-menu {
  width: max-content;
  max-width: 560px;
  text-align: left;   /* la cellule de catégorie est centrée (`.col-cat`) */
}

/* ============================================================================
   S111 (D1, D3) — Team Hub, équipe Privé : la ligne d'AJOUT seule.
   Chaque champ prend la POLICE de sa colonne (celle de l'affichage des rangées :
   mono 12 px pour les dates) et la LARGEUR de sa cellule ; une marge intérieure
   compacte fait tenir une date COMPLÈTE et son indicateur de calendrier dans les
   95 px de la colonne figée, et le code de catégorie dans ses 50 px. Les
   largeurs des colonnes ne changent pas. Couleurs : les jetons de l'application.
   ========================================================================= */
/* Les cellules de la ligne d'ajout ROGNENT comme toutes les cellules du tableau
   (aucun `overflow: visible` : un contrôle plus large que sa cellule — Statut,
   Région, Titre à 1 440 px — ne chevauche jamais sa voisine, F3 de S111 W3) ; la
   liste OUVERTE s'en échappe par son placement `fixed` (hub-manager.js). */
.table-premium tr.private-entry-row td {
  padding: 4px 1px;
}

.private-entry-row input[type="date"],
.private-entry-row input[type="text"],
.private-entry-row .private-entry-buyer-btn,
.private-entry-row .folder-dropdown-btn {
  font: inherit;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-primary);
  color-scheme: dark;
}

.private-entry-row input[type="date"],
.private-entry-row input[type="text"],
.private-entry-row .private-entry-buyer-btn {
  padding: 3px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

/* Titre et Organisme suivent la largeur de leur cellule (D3), jusqu'à la cellule
   la plus étroite : leur marge horizontale est proportionnelle à la cellule
   (2 % de sa largeur, au plus 2 px), si bien qu'une cellule réduite à presque
   rien par la disposition fixe du tableau (21 colonnes : Organisme ≈ 6,6 px à
   1 440 px, Titre et Organisme 0 px à 1 280 px — S111 W3) ne porte plus qu'un
   champ de sa bordure (2 px), rogné par la cellule. Les colonnes ne changent pas. */
.private-entry-row input[name="title"],
.private-entry-row .private-entry-buyer-btn {
  padding-left: min(2px, 2%);
  padding-right: min(2px, 2%);
}

/* La date : les marges INTERNES du contrôle natif (champs année / mois / jour,
   séparateurs, indicateur de calendrier) ramenées au minimum — mesuré au
   navigateur (boîtes de l'arbre UA par CDP) : « 2026-10-06 » en mono 12 px
   occupe 72 px, l'indicateur 12 px à 2 px du jour, le tout dans les 87 px utiles. */
.private-entry-row input[type="date"]::-webkit-datetime-edit,
.private-entry-row input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.private-entry-row input[type="date"]::-webkit-datetime-edit-year-field,
.private-entry-row input[type="date"]::-webkit-datetime-edit-month-field,
.private-entry-row input[type="date"]::-webkit-datetime-edit-day-field,
.private-entry-row input[type="date"]::-webkit-datetime-edit-text {
  padding: 0;
}

.private-entry-row input[type="date"]::-webkit-calendar-picker-indicator {
  margin-inline-start: 2px;
  margin-inline-end: 0;
  padding: 0;
  width: 12px;
  height: 12px;
}

/* Le bouton d'une liste : marges serrées et flèche au bord, pour que le code de
   catégorie le plus LARGE au rendu (Meu1 ≈ 32,3 px en Inter 13 px, mesuré sur
   les 59 éléments du référentiel réel — S111 W3, F1) tienne en entier dans les
   48 px de la colonne figée (50 px − 2 × 1 px de marge de cellule) : contenu
   = 48 − 2 (bordure) − 2 − 10 = 34 px ; la flèche (8 px, à 2 px du bord)
   occupe la marge droite, sans toucher le texte. La colonne ne s'élargit pas. */
.private-entry-row .folder-dropdown-btn {
  padding: 3px 10px 3px 2px;
}

.private-entry-row .folder-dropdown-btn::after {
  right: 2px;
}

/* ============================================================================
   Action Dropdown (parallel to folder dropdown)
   ========================================================================= */
.action-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Allow action dropdowns to overflow outside table cells */
.table-premium td.col-action {
  overflow: visible;
}

.action-dropdown-btn {
  width: 100%;
  padding: 4px 24px 4px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.action-dropdown-btn::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
  transition: transform var(--transition-fast);
}

.action-dropdown.open .action-dropdown-btn::after {
  transform: translateY(-50%) rotate(180deg);
}

.action-dropdown-btn:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.action-dropdown.open .action-dropdown-btn {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(122, 162, 247, 0.2);
}

.action-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 160px;
  max-height: 240px;
  overflow-y: auto;
  background: #1a1b26;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}

.action-dropdown.open .action-dropdown-menu {
  display: block;
}

.action-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: #c0caf5;
  font-size: 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.action-dropdown-item:first-child {
  border-radius: 5px 5px 0 0;
}

.action-dropdown-item:last-child {
  border-radius: 0 0 5px 5px;
}

.action-dropdown-item:hover,
.action-dropdown-item:focus {
  background: #292e42;
  outline: none;
}

.action-dropdown-item.selected {
  background: rgba(122, 162, 247, 0.15);
  color: #7aa2f7;
}

.action-dropdown-item.selected::before {
  content: '✓';
  margin-right: 4px;
  font-size: 10px;
}

.action-dropdown-item.child {
  padding-left: 24px;
  color: #a9b1d6;
  font-size: 11px;
}

.action-dropdown-item.child::before {
  content: '└';
  color: #565f89;
  margin-right: 4px;
}

.action-dropdown-item.child.selected::before {
  content: '✓';
  color: #7aa2f7;
}

/* Action filter panel container */
.action-filter-container {
  position: relative;
}

.action-group {
  display: block;
}

.action-group-header {
  display: flex;
  align-items: center;
}

/* ============================================================================
   Mon Hub - Modal
   ========================================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: var(--space-lg);
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Form elements for modal */
.form-group {
  margin-bottom: var(--space-md);
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.form-group input[type="text"],
.form-group select {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-sans);
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent-primary);
}

/* Color picker */
.color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.color-option {
  cursor: pointer;
}

.color-option input {
  display: none;
}

.color-swatch {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all var(--transition-fast);
}

.color-option:hover .color-swatch {
  transform: scale(1.1);
}

.color-option input:checked+.color-swatch {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent-primary);
}

/* Icon picker */
.icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.icon-option {
  cursor: pointer;
}

.icon-option input {
  display: none;
}

.icon-display {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 18px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  transition: all var(--transition-fast);
}

.icon-option:hover .icon-display {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.icon-option input:checked+.icon-display {
  border-color: var(--accent-primary);
  background: rgba(122, 162, 247, 0.1);
}

/* Buttons */
.btn {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
}

.btn-primary {
  background: var(--accent-primary);
  color: #fff;
}

.btn-primary:hover {
  background: #6890e0;
}

.btn-secondary {
  background: var(--bg-panel);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.btn-secondary:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ============================================================================
   Team Hub Styles
   ========================================================================= */

/* Contributor column */
.col-contributor {
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Share checkbox */
.share-checkbox {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: var(--accent-primary);
}

.share-checkbox:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Notes column */
.col-notes {
  width: 60px;
  text-align: center;
  white-space: nowrap;
}

.notes-btn {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.notes-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.notes-btn.has-unread {
  background: rgba(247, 118, 142, 0.25);
  border-color: var(--error);
  color: #ff6b8a;
  font-weight: 600;
  animation: pulse-unread 2s ease-in-out infinite;
}

@keyframes pulse-unread {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(247, 118, 142, 0.4);
  }

  50% {
    box-shadow: 0 0 8px 2px rgba(247, 118, 142, 0.3);
  }
}

/* Notes dropdown */
.notes-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  width: 350px;
  max-height: 400px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  overflow: hidden;
}

.notes-dropdown-content {
  display: flex;
  flex-direction: column;
  max-height: 400px;
}

.notes-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
}

.notes-list {
  flex: 1;
  overflow-y: auto;
  max-height: 280px;
}

.note-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.note-item:last-child {
  border-bottom: none;
}

.note-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 11px;
}

.note-author {
  font-weight: 600;
  color: var(--accent-primary);
}

.note-time {
  color: var(--text-muted);
}

.note-content {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
  /* Notes d'agent multi-lignes (T-N3) — les notes humaines naissent d'un
     input type=text (aucun \n possible) : sans effet sur la pop existante. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.notes-input {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-panel);
}

.notes-input input {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 13px;
}

.notes-input input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.notes-input button {
  padding: 8px 16px;
  background: var(--accent-primary);
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.notes-input button:hover {
  background: #6890e0;
}

/* Shared column */
.col-shared {
  width: 60px;
  text-align: center;
}

/* Team Share Dropdown (multi-team) */
.team-share-dropdown {
  position: relative;
  display: inline-block;
}

.team-share-btn {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  min-width: 32px;
}

.team-share-btn:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.team-share-btn.in-beast {
  border-color: #e0af68;
  color: #e0af68;
}

.team-share-btn.in-beast:hover {
  border-color: #e0af68;
  background: rgba(224, 175, 104, 0.1);
}

/* T1 Recon (Pete 2026-07-19) — BLANC pur. */
.team-share-btn.in-recon {
  border-color: #ffffff;
  color: #ffffff;
}

.team-share-btn.in-recon:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

/* Train S7 (D15, à ratifier) — Privé en violet. */
.team-share-btn.in-prive {
  border-color: #bb9af7;
  color: #bb9af7;
}

.team-share-btn.in-prive:hover {
  border-color: #bb9af7;
  background: rgba(187, 154, 247, 0.1);
}

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

.team-share-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 100;
  min-width: 160px;
  padding: 8px 0;
}

.team-share-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  transition: background var(--transition-fast);
  white-space: nowrap;
}

.team-share-item:hover {
  background: var(--bg-hover);
}

.team-share-item input[type="checkbox"] {
  accent-color: var(--accent-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ============================================================================
   Settings — Sidebar Nav (Phase 1 MasterFormat UI integration)
   Foundation pour onglets extensibles : Profil / Organisation / MasterFormat
   (futurs : BNQ, RBQ, etc.). Progressive enhancement — server-rendered <a>
   liens, JS hijack via history.replaceState.
   ========================================================================= */
.settings-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-lg);
  /* Pete UX 2026-05-10 : élargi pour minimiser truncation des titres MasterFormat
     longs (ex: "Mise en service des équipements de manutention…"). Cap à 1600px
     pour rester lisible sur écrans ultra-wide tout en exploitant l'espace dispo. */
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
}

.settings-sidebar {
  position: sticky;
  top: var(--space-lg);
  height: fit-content;
}

.settings-back-link {
  display: inline-block;
  margin-bottom: var(--space-md);
  font-size: 13px;
  text-decoration: none;
}

.settings-sidebar__title {
  margin: 0 0 var(--space-lg) 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.settings-nav__item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.settings-nav__item.active {
  background: rgba(122, 162, 247, 0.1);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.settings-main {
  min-width: 0;
}

.settings-tab-panel {
  display: none;
}

.settings-tab-panel.active {
  display: block;
}

/* ============================================================================
   Settings — MasterFormat (Phase 3 — tier-1 dense layout, Pete UX 2026-05-10)
   Tree view 35 L1 + 1435 L2 (post-inert filter), eager DOM, JS toggle.
   Density target : ~18 L1 visible per viewport (vs 12-13 baseline).
   ========================================================================= */

/* --- Card 1 : Préférence d'affichage (compact horizontal bar) -------------- */
.mf-pref-card {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
}

.mf-pref-bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.mf-pref-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.mf-pref-controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-left: auto;
}

.mf-pref-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all var(--transition-fast);
}

.mf-pref-opt:hover {
  background: var(--bg-hover);
}

.mf-pref-opt input[type="radio"] {
  margin: 0;
  accent-color: var(--accent-primary);
}

.mf-pref-divider {
  width: 1px;
  height: 18px;
  background: var(--border-subtle);
  margin: 0 var(--space-xs);
}

/* F12 v2 (Pete UX 2026-05-10) — mode button cycle (no checkbox visual).
   Pattern : button avec label "X : Y" où Y est le mode actif. Click cycle.
   Visual states reflètent data-mode pour subtle hint sur sélection actuelle. */
.mf-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-panel);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.mf-mode-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.mf-mode-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mf-mode-btn__label {
  color: var(--text-secondary);
  font-weight: 500;
}

.mf-mode-btn__value {
  color: var(--accent-primary);
  font-weight: 600;
}

/* Subtle visual hint quand mode actif diffère du défaut (engagement visible) */
.mf-mode-btn[data-mode="hidden"],
.mf-mode-btn[data-mode="checked_only"],
.mf-mode-btn[data-mode="checked"],
.mf-mode-btn[data-mode="expanded"] {
  border-color: var(--accent-primary);
  background: rgba(122, 162, 247, 0.08);
}

.mf-pref-save {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--accent-primary);
  color: var(--text-inverse);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity var(--transition-fast);
  margin-left: var(--space-xs);
}

/* Phase 4 iter9 (2026-05-11) — Toolbar harmonization Pete UX.
   Phase 4 iter10 (2026-05-11) — Tier-1 polish : visible border + Tokyo Night
   focus/hover/active states (replace native gray default). Custom chevron.

   Pattern unifié pour les 3 dropdowns settings + picker (Filtre, Sous-section,
   Vue) + 2 bulk buttons. */
.mf-mode-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-left: var(--space-xs);
}
.mf-mode-dropdown__label {
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}
.mf-mode-dropdown__select {
  appearance: none;
  -webkit-appearance: none;
  padding: 4px 24px 4px 10px;
  font-size: 12px;
  font-weight: 500;
  background-color: var(--bg-elevated, #1a1b26);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239aa5ce' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='4,6 8,10 12,6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px;
  color: var(--text-primary);
  border: 1px solid var(--border-default, #414868);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.mf-mode-dropdown__select:hover {
  border-color: var(--accent-primary, #7aa2f7);
  background-color: var(--bg-hover, #24283b);
}
.mf-mode-dropdown__select:focus {
  outline: none;
  border-color: var(--accent-primary, #7aa2f7);
  box-shadow: 0 0 0 2px rgba(122, 162, 247, 0.25);
}
/* Native option styling fallback — limited browser support but Tokyo Night accent
   when supported. Most browsers use OS default for option dropdown ; CSS targets
   only the select element itself for visual prominence. */
.mf-mode-dropdown__select option {
  background-color: var(--bg-elevated, #1a1b26);
  color: var(--text-primary);
}
/* Compact variant : pour picker modal toolbar (espace plus restreint). */
.mf-mode-dropdown--compact {
  margin-left: 0;
  gap: 4px;
}
.mf-mode-dropdown--compact .mf-mode-dropdown__label {
  font-size: 11px;
}
.mf-mode-dropdown--compact .mf-mode-dropdown__select {
  font-size: 11px;
  padding: 3px 20px 3px 8px;
  background-size: 10px;
  background-position: right 5px center;
}

/* Phase 4 iter10 (2026-05-11) — 2-row toolbar pattern.
   Row 1 = search full-width. Row 2 = controls (Langue + Filtres + Bulk).
   Pattern identique settings + picker pour cohérence cross-context. */
.mf-toolbar--2row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-sm);
}
.mf-toolbar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.mf-toolbar-row--search {
  width: 100%;
}
.mf-toolbar-row--search .mf-search-input {
  width: 100%;
  flex: 1;
}
.mf-toolbar-row--controls {
  gap: 8px;
}
.mf-toolbar-divider {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--border-subtle);
  margin: 0 4px;
}

/* Phase 4 iter12 (2026-05-11) — Custom dropdown component.
   Pete UX directive : native <select> dropdown menu uses OS-native gray
   styling (Chrome/Safari ignore `option { background }`). Custom dropdown
   = button trigger + Alpine-managed options panel, fully Tokyo Night themed.
   Shared between settings + picker (cross-context harmonization). */
.mf-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-left: var(--space-xs);
}
.mf-dropdown__label {
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}
.mf-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  background-color: var(--bg-panel, #24283b);
  color: var(--text-primary);
  border: 1px solid var(--border-default, #414868);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
  min-width: 110px;
}
.mf-dropdown__trigger:hover {
  border-color: var(--accent-primary, #7aa2f7);
  background-color: var(--bg-hover, #2d3149);
}
.mf-dropdown__trigger:focus,
.mf-dropdown__trigger--open {
  outline: none;
  border-color: var(--accent-primary, #7aa2f7);
  box-shadow: 0 0 0 2px rgba(122, 162, 247, 0.25);
}
.mf-dropdown__value {
  flex: 1;
  text-align: left;
}
.mf-dropdown__chevron {
  width: 12px;
  height: 12px;
  color: var(--text-secondary);
  transition: transform 0.15s;
}
.mf-dropdown__trigger--open .mf-dropdown__chevron {
  transform: rotate(180deg);
}
.mf-dropdown__options {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background-color: var(--bg-panel, #24283b);
  border: 1px solid var(--border-default, #414868);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 10001;
  max-height: 280px;
  overflow-y: auto;
}
.mf-dropdown__option {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-primary);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.1s;
  user-select: none;
}
.mf-dropdown__option:hover {
  background-color: var(--bg-hover, #2d3149);
}
.mf-dropdown__option--selected {
  background-color: rgba(122, 162, 247, 0.18);
  color: var(--accent-primary, #7aa2f7);
  font-weight: 600;
}
.mf-dropdown__option--selected:hover {
  background-color: rgba(122, 162, 247, 0.28);
}

/* Langue control (inline radios + Enregistrer button) — used both contexts. */
.mf-lang-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
}
.mf-lang-control__label {
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  margin-right: 2px;
}

.mf-pref-save:hover {
  opacity: 0.85;
}

/* --- Card 2 : Tree (compact rows, max viewport usage) --------------------- */
.mf-tree-card {
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

.mf-tree-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.mf-tree-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.mf-tree-subtitle {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
}

.mf-readonly-hint {
  padding: 6px 10px;
  background: rgba(125, 207, 255, 0.08);
  color: var(--info);
  border: 1px solid rgba(125, 207, 255, 0.2);
  border-radius: 4px;
  margin-bottom: var(--space-sm);
  font-size: 11px;
}

.mf-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-sm);
}

.mf-search-input {
  flex: 1;
  padding: 5px 10px;
  font-size: 12px;
  background: var(--bg-base);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  transition: border-color var(--transition-fast);
}

.mf-search-input:focus {
  border-color: var(--accent-primary);
  outline: none;
}

.mf-search-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.mf-bulk-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-panel);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.mf-bulk-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.mf-bulk-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mf-tree {
  max-height: calc(100vh - 280px);
  min-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-base);
}

.mf-division {
  border-bottom: 1px solid var(--border-subtle);
}

.mf-division:last-child {
  border-bottom: none;
}

.mf-division__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background var(--transition-fast);
  user-select: none;
  min-height: 28px;
}

.mf-division__header:hover {
  background: var(--bg-hover);
}

.mf-chevron {
  font-size: 9px;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
  width: 10px;
  display: inline-block;
  flex-shrink: 0;
}

.mf-chevron--sm {
  font-size: 8px;
  width: 8px;
}

/* F12 v3 (Pete UX 2026-05-10) : hide chevron L2 quand aucun L3 child
   (rien à expand). Préserve layout via visibility:hidden (width occupée). */
.mf-chevron--invisible {
  visibility: hidden;
}

.mf-division--expanded > .mf-division__header > .mf-chevron,
.mf-section-wrap--expanded > .mf-section__header > .mf-chevron {
  transform: rotate(90deg);
}

.mf-division__code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  min-width: 28px;
  flex-shrink: 0;
}

/* Pete UX 2026-05-10 : count inline next to title (vs right-aligned end of row).
   `.mf-row__main` is the flex container holding (title, count) — it takes the
   remaining row width and ellipsizes the title if too long, preserving count. */
.mf-row__main {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.mf-division__title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

.mf-division__count,
.mf-section__count {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.mf-badge--reserved {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(224, 175, 104, 0.15);
  color: var(--warning);
  flex-shrink: 0;
}

.mf-section-list {
  display: none;
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
}

.mf-section-list--expanded {
  display: block;
}

/* L2 wrapper (collapsable for L3 children, Pete UX 2026-05-10). */
.mf-section-wrap {
  border-bottom: 1px solid var(--border-subtle);
}

.mf-section-wrap:last-child {
  border-bottom: none;
}

.mf-section__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 30px;
  cursor: pointer;
  transition: background var(--transition-fast);
  user-select: none;
  min-height: 24px;
}

.mf-section__header:hover {
  background: var(--bg-hover);
}

.mf-section__code {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  min-width: 60px;
  flex-shrink: 0;
}

.mf-section__title {
  font-size: 12px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

.mf-section-empty {
  padding: 5px 10px 5px 30px;
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  background: var(--bg-card);
}

/* L3 subsections (Pete UX 2026-05-10 — collapsable inside L2). */
.mf-subsection-list {
  display: none;
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
}

.mf-section-wrap--expanded > .mf-subsection-list {
  display: block;
}

.mf-subsection {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 56px;
  cursor: pointer;
  transition: background var(--transition-fast);
  user-select: none;
  min-height: 22px;
}

.mf-subsection:hover {
  background: var(--bg-hover);
}

.mf-subsection__code {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  min-width: 76px;
  flex-shrink: 0;
}

.mf-subsection__title {
  flex: 1;
  font-size: 11px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.mf-tree-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.mf-dirty-count {
  font-size: 11px;
  color: var(--text-secondary);
}

.mf-tree-save {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  background: var(--accent-primary);
  color: var(--text-inverse);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.mf-tree-save:hover {
  opacity: 0.85;
}

.mf-tree-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mf-tree input[type="checkbox"] {
  accent-color: var(--accent-primary);
  cursor: pointer;
  margin: 0;
}

.mf-tree[data-readonly="true"] input[type="checkbox"] {
  cursor: not-allowed;
  opacity: 0.6;
}

.mf-search-empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* Pete UX 2026-05-10 F12 v3 : visibility filtering en JS (pas CSS :has).
   Raison : :has(input:checked) inconsistent cross-browser pour state 1
   (cb.checked=true + cb.indeterminate=true). JS source-of-truth pour
   comportement déterministe + tri-state state 1 explicit handling.

   CSS reste minimal : show_l3='hidden' cache chevron L2 + count L2
   (visuels redondants quand pas de L3 displayed). */
.mf-tree[data-show-l3="hidden"] .mf-section__header > .mf-chevron,
.mf-tree[data-show-l3="hidden"] .mf-section__count {
  display: none;
}

.beast-share-item input[type="checkbox"] {
  accent-color: #e0af68;
}

/* T1 Recon (Pete 2026-07-19) — checkbox Recon du menu de partage en blanc. */
.recon-share-item input[type="checkbox"] {
  accent-color: #ffffff;
}

/* Train S7 (D15, à ratifier) — checkbox Privé du menu de partage en violet. */
.prive-share-item input[type="checkbox"] {
  accent-color: #bb9af7;
}