/* =========================================================
   APP.CSS — Refactor
   - Nettoyage des doublons
   - Header compact + logo plein hauteur
   - Organisation par sections
   ========================================================= */

/* ---------------------------
   0) Reset & Variables
--------------------------- */
:root{
  /* ── Brand ─────────────────────────────────── */
  --primary:        #1a5fac;   /* deeper blue — AA on white */
  --primary-hover:  #134d8f;
  --primary-light:  #e8f1fc;
  --primary-color:  #1a5fac;   /* alias for legacy refs */

  --danger:         #c0392b;
  --danger-hover:   #a93226;
  --danger-light:   #fdecea;

  --success:        #1a7a4a;
  --success-hover:  #155f3a;
  --success-light:  #e6f5ed;

  /* ── Neutrals ────────────────────────────── */
  --text-primary:   #1a2332;
  --text-secondary: #4a5568;
  --text-muted:     #718096;
  --text-color:     #1a2332;   /* legacy alias */
  --muted-color:    #718096;   /* legacy alias */

  --border-color:   #d1dae8;
  --border-strong:  #bcc9dc;
  --border-focus:   #1a5fac;

  --bg-app:         #f0f4f9;
  --bg-light:       #f0f4f9;   /* legacy alias */
  --bg-surface:     #ffffff;
  --bg-subtle:      #f7f9fc;
  --bg-muted:       #eef3f8;
  --bg-raise:       #fbfdff;
  --card-bg:        #ffffff;
  --header-bg:      #ffffff;

  /* ── Semantic surfaces ───────────────────── */
  --info-bg:        #eef5ff;
  --info-fg:        #1f4f93;
  --info-border:    #c8daf6;
  --warning-bg:     #fff7db;
  --warning-fg:     #7b5600;
  --warning-border: #f2d48a;
  --danger-bg:      #fdeeee;
  --danger-fg:      #8f3028;
  --danger-border:  #efc2bd;
  --success-bg:     #eaf6ef;
  --success-fg:     #155f3a;
  --success-border: #bfe1ca;

  /* ── Shared component tokens ─────────────── */
  --panel-border:   var(--border-color);
  --panel-shadow:   var(--shadow-sm);
  --section-accent: var(--primary);
  --tab-bg:         var(--bg-subtle);
  --tab-bg-hover:   var(--primary-light);
  --tab-bg-active:  var(--bg-surface);
  --tab-fg:         var(--text-secondary);
  --tab-fg-active:  var(--primary);
  --tab-border:     var(--border-color);
  --tab-border-active: var(--primary);
  --overlay-scrim:  rgba(15,23,42,0.52);

  /* ── Typography ──────────────────────────── */
  --font-ui:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "JetBrains Mono", "Fira Code", "Courier New", monospace;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */

  --leading-tight:   1.3;
  --leading-normal:  1.55;

  /* ── Spacing ─────────────────────────────── */
  --spacing-xs: 0.25rem;   /* 4px  */
  --spacing-sm: 0.5rem;    /* 8px  */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */

  --page-gutter: clamp(8px, 2vw, 24px);

  /* ── Radii ───────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill:999px;

  /* ── Shadows ─────────────────────────────── */
  --shadow-xs:  0 1px 3px rgba(15,23,42,0.06);
  --shadow-sm:  0 2px 6px rgba(15,23,42,0.07);
  --shadow-md:  0 4px 14px rgba(15,23,42,0.08);
  --shadow-lg:  0 10px 28px rgba(15,23,42,0.12);

  /* ── Component sizing ────────────────────── */
  --ctrl-height:  38px;   /* buttons, inputs, dropdowns */
  --ctrl-pad-x:   0.75rem;

  /* ── Focus ring ──────────────────────────── */
  --focus-ring: 0 0 0 3px rgba(26,95,172,0.22);

  /* ── Header ──────────────────────────────── */
  --header-height:     56px;
  --header-pad-x:      12px;
  --header-gap:        8px;
  --header-bottom-gap: 6px;
}

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Global focus-visible ring — keyboard navigation only */
:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Suppress focus ring for mouse/touch (preserves ring for keyboard) */
:focus:not(:focus-visible){
  outline: none;
  box-shadow: none;
}

body{
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-app);
}

/* ---------------------------
   1) App Shell / Layout
--------------------------- */
.app{ min-height: 100vh; }

.container{
  width: auto;
  max-width: none;
  margin-inline: var(--page-gutter);
  padding-inline: clamp(2px, 1.5vw, var(--spacing-md));
}

/* ---------------------------
   2) Header (compact)
   - réduit l'espace vertical
   - logo = hauteur du header
--------------------------- */
.app-header{
  display:flex;
  justify-content: space-between;
  align-items:center;

  height: var(--header-height);
  padding: 0; /* clé: pas de padding vertical => header compact */
  gap: var(--header-gap);

  border-bottom: 1px solid var(--border-color);
  background-color: var(--header-bg);

  margin-bottom: var(--header-bottom-gap);
  flex-wrap: wrap; /* responsive */
}

.app-header.container{
  margin-inline: 0;
  padding-inline: var(--header-pad-x);
}

.header-left{
  height: 100%;
  display:flex;
  align-items:center;
}

.app-logo{
  height: 100%;
  width: auto;
  display:block;
  object-fit: contain;
}

.app-title{
  font-size: 1.5rem;
  font-weight: 500;
  min-width: 0;
  word-break: break-word;
}

.header-controls{
  display:flex;
  gap: var(--spacing-md);
  min-width: 0;
  flex-wrap: wrap;
}

.toolbar{
  display:flex;
  align-items:center;
  gap: var(--spacing-sm);
  min-width: 0;
  flex-wrap: wrap;
}

/* ---------------------------
   3) Utilities
--------------------------- */
.mt-xs{ margin-top: var(--spacing-xs); }
.mt-sm{ margin-top: var(--spacing-sm); }
.mt-md{ margin-top: var(--spacing-md); }
.mb-sm{ margin-bottom: var(--spacing-sm); }
.mb-2{  margin-bottom: 0.5rem; }

.ml-1{ margin-left: 0.25rem; }
.ml-2{ margin-left: var(--spacing-sm); }
.pl-md{ padding-left: var(--spacing-md); }

.muted{
  opacity: .6;
  font-size: .875rem;
}

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

.text-sm{ font-size: 0.85rem; }
.text-lg{ font-size: 1.25rem; }
.mono{ font-family: var(--font-mono); }

.hidden{ display:none; }

.status-message{
  min-height: 1.25rem;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--text-secondary);
}

.status-message--inline{
  display: inline-flex;
  align-items: center;
  min-height: var(--ctrl-height);
}

.status-message--info{ color: var(--info-fg); }
.status-message--success{ color: var(--success-fg); }
.status-message--warning{ color: var(--warning-fg); }
.status-message--danger{ color: var(--danger-fg); }

.row-start{ display:flex; align-items:center; }
.row-between{ display:flex; justify-content:space-between; align-items:center; }
.row-wrap{ display:flex; flex-wrap:wrap; align-items:center; }

.gap-md{ gap: var(--spacing-md); }
.gap-sm{ gap: var(--spacing-sm); }

.flex-0{ flex:0.8; min-width:0; }
.flex-1{ flex:1;   min-width:0; }
.flex-2{ flex:2;   min-width:0; }
.flex-3{ flex:3;   min-width:0; }

.w-100{ width:100%; }

/* Flex helpers (Bootstrap-like) */
.d-flex{ display:flex; }
.justify-content-between{ justify-content: space-between; }
.align-items-center{ align-items:center; }

/* ---------------------------
   4) Badges / Tips / Banners
--------------------------- */
.legend{
  font-size: 0.75rem;
  margin-left: var(--spacing-sm);
}
.legend.red{ color: var(--danger); }

.tip{
  display:block;
  margin-top: var(--spacing-xs);
  font-size: 0.8rem;
  color: var(--muted-color);
}

.badge.warn{
  display:inline-block;
  background-color: var(--warning-bg);
  color: var(--warning-fg);
  padding:0.2rem 0.5rem;
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm);
  font-weight:bold;
  font-size:0.8rem;
}

.badge.tips{
  display:inline-block;
  background-color: var(--info-bg);
  color: var(--info-fg);
  border: 1px solid var(--info-border);
  padding:0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-weight:bold;
  font-size:0.8rem;
  margin-top: var(--spacing-xs);
  margin-left:auto;
}

.badge.tips.details{
  background-color: var(--bg-raise);
  color: var(--text-secondary);
  border:1px solid var(--border-color);
}

/* PCS warning banners */
.pcs-warning-banner,
.pcs-invalid-banner{
  margin-left: 12px;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
}
.pcs-warning-banner{
  background-color: var(--warning-bg);
  color: var(--warning-fg);
  border: 1px solid var(--warning-border);
}
.pcs-invalid-banner{
  background-color: var(--danger-bg);
  color: var(--danger-fg);
  border: 1px solid var(--danger-border);
}
.pcs-warning-icon{ font-size:1rem; }
.pcs-warning-text{ white-space:nowrap; }

/* ---------------------------
   5) Grid layout
--------------------------- */
.grid{ display:grid; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.wrap{ gap: var(--spacing-md); }

@media (max-width: 900px){
  .grid-3, .grid-4{ grid-template-columns: 1fr; }
}

.app-startup-overlay{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(248, 250, 252, 0.72);
  backdrop-filter:blur(3px);
  opacity:1;
  transition:opacity 0.25s ease;
}

.app-startup-overlay.is-hidden{
  opacity:0;
  pointer-events:none;
}

.app-startup-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:22px 26px;
  border-radius:18px;
  background:rgba(255, 255, 255, 0.78);
  border:1px solid rgba(219, 228, 240, 0.95);
  box-shadow:0 18px 40px rgba(15, 23, 42, 0.10);
}

.app-startup-spinner{
  width:38px;
  height:38px;
  border-radius:999px;
  border:4px solid rgba(0, 163, 224, 0.18);
  border-top-color: var(--primary-color);
  animation:startup-spin 0.8s linear infinite;
}

.app-startup-text{
  font-size:0.9rem;
  font-weight:600;
  color:#334155;
}

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

/* PCS panels */
.pcs-builder-shell{
  padding-top: 8px;
  padding-bottom: 10px;
  font-size: 0.9rem;
}

.pcs-hero-card{
  border:1px solid #dbe4f0;
  border-radius:14px;
  padding:10px 14px;
  background: linear-gradient(135deg, #f8fbff 0%, #eef7ff 52%, #ffffff 100%);
  box-shadow:0 8px 20px rgba(15, 23, 42, 0.05);
  margin-bottom: 8px;
}

.pcs-hero-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.pcs-page-title{
  margin:0;
  font-size:1.08rem;
  font-weight:700;
  color:#0f172a;
}

.pcs-page-subtitle{
  margin:4px 0 0;
  max-width:760px;
  color:#475569;
  font-size:0.8rem;
  line-height:1.25;
}

.pcs-code-entry-card{
  border-radius:12px;
  border:1px solid #d8e3ef;
  background:#ffffff;
  padding:8px 10px;
}

.pcs-progress-card{
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.pcs-progress-card--compact{
  margin-top: 0;
  padding: 10px 12px;
}

.pcs-progress-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.pcs-progress-title{
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #35506f;
}

.pcs-progress-subtitle{
  margin-top: 3px;
  font-size: 0.78rem;
  color: #64748b;
}

.pcs-progress-status{
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.pcs-progress-track{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.pcs-progress-card--compact .pcs-progress-track{
  gap: 6px;
}

.pcs-progress-step{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 86px;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid #d8e3ef;
  background: #ffffff;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.pcs-progress-card--compact .pcs-progress-step{
  min-height: 72px;
  padding: 8px 6px;
}

.pcs-progress-step.is-complete{
  border-color: #9cc0ea;
  background: #eef5ff;
  box-shadow: 0 4px 12px rgba(26, 95, 172, 0.08);
}

.pcs-progress-step.is-current{
  border-color: var(--primary);
  background: #f8fbff;
  box-shadow: 0 0 0 2px rgba(26, 95, 172, 0.10);
}

.pcs-progress-step.is-pending{
  background: #f8fafc;
  border-style: dashed;
}

.pcs-progress-index{
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}

.pcs-progress-value{
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0f172a;
}

.pcs-progress-card--compact .pcs-progress-value{
  font-size: 1rem;
}

.pcs-progress-label{
  font-size: 0.73rem;
  line-height: 1.2;
  color: #475569;
}

.pcs-progress-card--compact .pcs-progress-label{
  font-size: 0.68rem;
}

.pcs-helper-text{
  display:block;
  margin-top:4px;
  color:#64748b;
  font-size:0.72rem;
  line-height:1.2;
}

.pcs-upper-grid{
  margin-top: 8px;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.pcs-top-field{
  padding:8px 10px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#ffffff;
  box-shadow:0 4px 14px rgba(15, 23, 42, 0.04);
}

.pcs-top-field-note{
  margin-top: 6px;
  font-size: 0.74rem;
  color: #64748b;
}

.pcs-top-field--operation{
  padding: 12px 14px;
  background: linear-gradient(135deg, #f7fbff 0%, #eef6ff 100%);
  border-color: #cfe0f4;
  box-shadow: 0 8px 24px rgba(26, 95, 172, 0.08);
}

.pcs-op-spotlight{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #d6e4f5;
}

.pcs-op-spotlight-label{
  margin-bottom: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4c6a8d;
}

.pcs-op-definition{
  color:#24364d;
  font-size:0.95rem;
  font-weight: 500;
  line-height:1.45;
  min-height: 2.8em;
}

.pcs-panels{
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  align-items:flex-start;
}
.pcs-panels > .card{ height:100%; }

.pcs-axis-card{
  border-radius:12px;
  border:1px solid #e2e8f0;
  box-shadow:0 4px 12px rgba(15, 23, 42, 0.04);
  min-height:unset;
  padding:10px 12px;
}

.pcs-axis-card .card-title{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom:6px;
  padding-bottom:6px;
}

.pcs-axis-card .card-title strong{
  font-size:0.94rem;
  color: #0f172a;
}

.pcs-axis-kicker{
  margin-bottom: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.pcs-axis-card .btn-xs{
  padding:2px 6px;
  font-size:0.72rem;
}

.pcs-axis-state{
  margin-bottom: 8px;
  font-size: 0.76rem;
  line-height: 1.35;
  color: #5b6f88;
  min-height: 2.1em;
}

.pcs-axis-options{
  max-height: min(38vh, 320px);
  overflow-y:auto;
  padding-right:4px;
  padding-top: 4px;
  border-top: 1px solid #edf2f7;
}

.pcs-axis-card label{
  display:flex !important;
  align-items:flex-start;
  gap:8px;
  padding:7px 8px;
  border-radius:8px;
  line-height:1.2;
  font-size:0.84rem;
  margin-bottom:4px;
}

.pcs-axis-card input[type="radio"]{
  margin-top:2px;
  transform: scale(0.92);
}

.pcs-axis-card label:hover{
  background:#f8fafc;
}

.pcs-bottom-grid{
  display:grid;
  grid-template-columns: minmax(360px, 1.4fr) minmax(320px, 1fr);
  gap: 10px;
  margin-top: 10px;
}

@media (max-width: 1024px){
  .pcs-progress-track{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pcs-panels{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .pcs-bottom-grid{ grid-template-columns: 1fr; }
  .pcs-hero-head{ flex-direction:column; }
  .pcs-upper-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .pcs-builder-shell{
    padding-top: 4px;
    padding-bottom: 8px;
    font-size: 0.85rem;
  }

  .pcs-hero-card{ padding:8px 10px; }
  .pcs-page-title{ font-size:1rem; }
  .pcs-page-subtitle{ font-size:0.74rem; }
  .pcs-progress-head{ flex-direction: column; }
  .pcs-progress-status{ white-space: normal; }
  .pcs-progress-track{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pcs-code-row{
    flex-direction:column;
    align-items:stretch;
  }

  .pcs-code-input{ max-width:none; }

  .pcs-panels{ grid-template-columns: 1fr; }
  .pcs-axis-options{ max-height:220px; }

  .pcs-progress-card--compact .pcs-progress-track{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pcs-summary-card,
.pcs-codelist-card{
  border-radius:12px;
  border:1px solid #e2e8f0;
  box-shadow:0 4px 14px rgba(15, 23, 42, 0.05);
  padding:10px 12px;
}

.pcs-summary-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  margin-bottom:8px;
}

.pcs-summary-label{
  font-size:0.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#64748b;
}

.pcs-summary-actions,
.pcs-codelist-actions{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap:wrap;
}

.pcs-description-box{
  margin-top:8px;
  padding:8px 10px;
  border-radius:10px;
  background:#ffffff;
  border:1px solid #e8eef5;
  color:#334155;
  min-height:38px;
  line-height:1.25;
  font-size:0.82rem;
  max-height:4.8em;
  overflow:auto;
}

.pcs-codelist-dd{ margin-bottom:8px; }

/* ---------------------------
   6) Forms & Inputs
--------------------------- */
.form-field{
  display:flex;
  flex-direction: column;
  width:100%;
}

.field-label{
  font-weight:500;
  margin-bottom:0.25rem;
  font-size:0.9rem;
}
.field-label-italic{
  font-weight:500;
  margin-bottom:0.25rem;
  font-size:0.9rem;
  font-style: italic;
}
.field-label-inline{
  font-weight:500;
  font-size:0.9rem;
}

.input{
  height: var(--ctrl-height);
  padding: 0 var(--ctrl-pad-x);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-surface);
  width: 100%;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.input:focus{
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

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

.textarea{
  padding: var(--spacing-sm) var(--ctrl-pad-x);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-surface);
  width: 100%;
  resize: vertical;
  line-height: var(--leading-normal);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.textarea:focus{
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.textarea.tall{ min-height: 80px; }
.textarea.h-52vh{ min-height: 52vh; }

.input-wide{ width: 100%; }
.input-md{ width: 300px; }

.bg-muted{ background-color: var(--bg-subtle); }

.input-lg{
  height: calc(var(--ctrl-height) + 4px);
  font-size: var(--text-base);
}

/* PCS code row */
.pcs-code-row{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-top: 4px;
}
.pcs-code-input{
  max-width:320px;
  padding:0.45rem 0.75rem;
  font-size:0.95rem;
  font-weight:700;
  letter-spacing:0.08em;
}
.pcs-code-error{
  min-height:1.3rem;
  display:flex;
  align-items:center;
  flex:1 1 auto;
  font-size:0.78rem;
}

/* Form grids (modal Izicod) */
.form-grid{
  display:grid;
  grid-template-columns: max-content 1fr;
  gap: var(--spacing-sm) var(--spacing-md);
  align-items:center;
}
.form-grid > .textarea{ grid-column: 2; }

/* Form stacking block */
.form-stack{
  max-width:900px;
  margin:0 auto;
  padding: var(--spacing-md);
  background: transparent;
  box-shadow:none;
  border:0;
}
.stack > * + *{ margin-top: var(--spacing-sm); }

/* Inline form overrides */
.form-field.flex-0{
  flex: 0 0 auto;
  width: auto;
  max-width:none;
}
.form-field.inline-item{
  width:auto;
  flex-grow:0;
}
.form-field.inline-item.w-min-lg{ min-width:200px; }

/* ---------------------------
   7) Dash Dropdowns (react-virtualized-select)
--------------------------- */
.dd .Select-control,
.dd .Select-menu-outer{
  border-color: var(--border-color);
  border-radius: var(--radius-md);
}

.dd .Select-control{
  box-shadow: none;
  min-height: var(--ctrl-height);
  border-width: 1.5px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.dd .Select-control:hover{ border-color: #a0aec0; }

.dd.is-focused .Select-control,
.dd .Select-control:focus-within{
  border-color: var(--border-focus) !important;
  box-shadow: var(--focus-ring) !important;
}

/* Standard height alignment */
.dd .Select-placeholder,
.dd .Select--single > .Select-control .Select-value{
  line-height: calc(var(--ctrl-height) - 4px);
  padding: 0 var(--ctrl-pad-x);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.dd .Select-input{
  height: calc(var(--ctrl-height) - 4px);
  padding: 0 var(--ctrl-pad-x);
}
.dd .Select-input > input{
  height: calc(var(--ctrl-height) - 4px);
  padding: 0;
  font-size: var(--text-sm);
}

.dd .Select-arrow-zone,
.dd .Select-clear-zone{
  height: calc(var(--ctrl-height) - 2px);
  padding-top: 0;
  padding-bottom: 0;
}

/* Compact variant: one size down (used in toolbar) */
.dd.compact .Select-control{ min-height: 32px; }
.dd.compact .Select-placeholder,
.dd.compact .Select--single > .Select-control .Select-value{
  line-height: 30px;
  padding: 0 8px;
  font-size: var(--text-xs);
}
.dd.compact .Select-input{ height: 30px; padding: 0 8px; }
.dd.compact .Select-input > input{ height: 30px; padding: 0; }
.dd.compact .Select-arrow-zone,
.dd.compact .Select-clear-zone{ height: 30px; }

.toolbar .dd{ flex: 0 0 auto; }
.toolbar .dd.compact{ min-width: 120px; }

/* Options wrap (général) */
.dd .Select-option,
.dd .VirtualizedSelectOption{
  white-space: normal !important;
  line-height: 1.25;
}

/* Dropdown ICD (libellés longs) */
.icd-dd .Select-option,
.icd-dd .VirtualizedSelectOption{
  white-space: normal !important;
  line-height: 1.25;
}
.icd-dd .VirtualizedSelectOption{
  height:56px !important;
  display:flex;
  align-items:center;
  padding:6px 8px;
  box-sizing:border-box;
}
.icd-dd .Select-menu-outer{ max-height:420px; }

.dd .Select-menu-outer{ max-height:420px; }

/* Valeur sélectionnée: 1 ligne */
.dd .Select-value-label,
.dd .Select-placeholder{
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* Dropdown année: 1 ligne stricte */
.year-dd .Select-option,
.year-dd .VirtualizedSelectOption{
  white-space: nowrap !important;
  height:36px !important;
  line-height:36px !important;
  padding:0 10px !important;
  box-sizing:border-box;
}
.year-dd .Select-menu-outer{
  max-height:220px;
  padding-bottom:2px;
}

/* Dropdown langue cible */
.dd.lang-target{
  width:140px;
  min-width:140px;
  max-width:140px;
  flex: 0 0 140px;
}
@media (max-width:600px){
  .dd.lang-target{
    width:100%;
    min-width:0;
    max-width:none;
    flex: 1 1 auto;
  }
}

/* ---------------------------
   8) Buttons
--------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: var(--ctrl-height);
  padding: 0 var(--ctrl-pad-x);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
  user-select: none;
}

.btn:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:disabled,
.btn[disabled]{
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary */
.btn-primary{
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-primary:hover{ background-color: var(--primary-hover); border-color: var(--primary-hover); }

/* Danger */
.btn-danger{
  background-color: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover{ background-color: var(--danger-hover); border-color: var(--danger-hover); }

/* Danger outline */
.btn-danger-outline{
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
.btn-danger-outline:hover{ background-color: var(--danger); color: #fff; }

/* Secondary */
.btn-secondary{
  background-color: var(--text-muted);
  border-color: var(--text-muted);
  color: #fff;
}
.btn-secondary:hover{ background-color: #5a6472; border-color: #5a6472; }

/* Ghost (no background) */
.btn-ghost{
  background: transparent;
  border-color: var(--border-color);
  color: var(--primary);
  height: auto;
  padding: 0.25rem 0.5rem;
}
.btn-ghost:hover{ background-color: var(--primary-light); }

/* Full-width */
.btn-block{ width: 100%; margin-top: var(--spacing-md); }

/* Extra-small (axis cards, inline actions) */
.btn-xs{
  height: auto;
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

/* Clipboard */
.btn-clip{
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 1.1rem;
  padding: 0 0.4rem;
  height: auto;
}
.btn-clip:hover{ opacity: 0.75; }
.btn-clip:focus-visible{ outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* Clear / dismiss */
.btn-clear{
  border: 0;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  opacity: 0.65;
  height: auto;
}
.btn-clear:hover{ opacity: 1; }

/* ---------------------------
   9) Cards
--------------------------- */
.card{
  background-color: var(--bg-surface);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
}

.card-soft{
  background-color: var(--warning-bg);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--warning-border);
}

.card-title{
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------------------------
   10) Tabs
--------------------------- */
.custom-tabs{
  border-bottom: 1px solid var(--border-color);
  margin-top: var(--spacing-sm);
}

.custom-tab,
.custom-tab--selected{
  font-weight: 500;
  font-size: var(--text-sm);
  padding: 8px 15px;
  border: 1px solid var(--tab-border);
  border-bottom: none;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  background-color: var(--tab-bg);
  color: var(--tab-fg);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.custom-tab:hover{
  background-color: var(--tab-bg-hover);
  color: var(--tab-fg-active);
}

.custom-tab--selected{
  border-color: var(--tab-border);
  border-bottom: 3px solid var(--tab-border-active);
  background-color: var(--tab-bg-active);
  color: var(--tab-fg-active);
  font-weight: 600;
}

/* ---------------------------
   11) Login Overlay
--------------------------- */
.login-overlay{
  position:fixed;
  inset:0;
  background-color: rgba(255,255,255,0.95);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:1000;
}

#login-loading{
  display:inline-block;
  width:auto;
}

.login-card{
  background:#fff;
  padding: var(--spacing-lg);
  border-radius:8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  width:350px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.login-boot-mask{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:24px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index:2;
  text-align:center;
}

.login-boot-spinner{
  width:34px;
  height:34px;
  border-radius:999px;
  border:3px solid rgba(26,95,172,0.18);
  border-top-color: var(--primary);
  animation: startup-spin 0.8s linear infinite;
}

.login-boot-text{
  font-size:0.98rem;
  font-weight:700;
  color:#22324a;
}

.login-boot-subtext{
  font-size:0.84rem;
  color:#64748b;
  line-height:1.35;
  max-width:260px;
}

html.app-booting #login-username,
html.app-booting #login-password,
html.app-booting #login-submit{
  pointer-events:none;
  opacity:0.65;
}

html.app-ready .login-boot-mask{
  display:none;
}

.flag-bar{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:6px;
  background: linear-gradient(
    to right,
    #da291c 0%, #da291c 33%,
    #ffffff 33%, #ffffff 66%,
    #00a1e3 66%, #00a1e3 100%
  );
}

.login-title{
  margin-top: var(--spacing-sm);
  font-size:1.8rem;
}

.login-card .field-label{
  text-align:left;
  display:block;
  margin-top: var(--spacing-md);
}

.login-error{
  color: var(--danger);
  margin-top: var(--spacing-sm);
  font-weight:500;
}

/* ---------------------------
   12) Modals
--------------------------- */
.modal-overlay{
  position:fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color: var(--overlay-scrim);
  z-index:2000;
}

.modal-card{
  background-color: var(--bg-surface);
  padding: var(--spacing-lg);
  border-radius: var(--radius-xl);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.modal-title{
  font-size:1.5rem;
  font-weight:600;
  margin-bottom: var(--spacing-md);
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-color);
}

.modal-close{
  position: absolute;
  top: 10px; right: 10px;
  background: transparent;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  line-height: 1;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.modal-close:hover{
  border-color: var(--danger);
  color: var(--danger);
}
.modal-close:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Modal transparent + blur */
.modal-overlay-transparent{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  background-color: var(--overlay-scrim);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:3000;
}

.modal-card-fixed{
  background-color: var(--bg-surface);
  width:90%;
  max-width:950px;
  height:85vh;
  max-height:85vh;
  min-height:0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-lg);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}

.modal-header-sticky{
  flex: 0 0 auto;
  padding: 1.2rem 1.5rem;
  border-bottom:1px solid var(--border-color);
  background: rgba(255,255,255,0.96);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.modal-body-scroll{
  flex: 1 1 auto;
  min-height:0;
  padding: 1.5rem 2rem;
  overflow-y:auto;
  background: var(--bg-surface);
}

.modal-body-scroll h3{
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
  border-left: 4px solid var(--section-accent);
  padding-left: 10px;
}

/* FAQ Modals (ADD/EDIT) — robust scroll with dcc.Loading */
#loading-faq-edit-modal,
#loading-faq-add-modal{
  display:flex;
  flex-direction:column;
  flex: 1 1 auto;
  min-height:0;
}

#loading-faq-edit-modal .dash-loading-content,
#loading-faq-add-modal  .dash-loading-content,
#loading-faq-edit-modal .dash-loading-container,
#loading-faq-add-modal  .dash-loading-container{
  display:flex;
  flex-direction:column;
  flex: 1 1 auto;
  min-height:0;
}

#loading-faq-edit-modal .dash-spinner,
#loading-faq-add-modal  .dash-spinner{
  flex: 0 0 auto;
}

#loading-faq-edit-modal > div,
#loading-faq-add-modal  > div,
#loading-faq-edit-modal > div > div,
#loading-faq-add-modal  > div > div{
  display:flex;
  flex-direction:column;
  flex: 1 1 auto;
  min-height:0;
}

#loading-faq-edit-modal *,
#loading-faq-add-modal *{
  min-height:0;
}

/* ---------------------------
   13) PDF Frame
--------------------------- */
.doc-page-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:10px;
}

.doc-page-title{
  margin:0;
  font-size:1.15rem;
  font-weight:700;
  color:#0f172a;
}

.doc-page-subtitle{
  margin:0;
  color:#64748b;
  font-size:0.88rem;
}

.pdf-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.pdf-select-field{
  flex:1 1 420px;
  min-width:320px;
}

.pdf-open-modal-btn{
  white-space:nowrap;
  margin-bottom: var(--spacing-md);
}

.pdf-link-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:4px 0 10px;
  padding:8px 0;
}

.pdf-doc-link{
  color:var(--primary-color);
  font-size:0.9rem;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

.pdf-doc-link:hover{
  color:var(--primary-hover);
}

.pdf-frame{
  width:100%;
  height: calc(100vh - 120px);
  min-height:900px;
  border:none;
  background:#f2f2f2;
}

.filter-bar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.filters-collapse-panel{
  position:relative;
  z-index:10;
  width:100%;
  height:auto;
  display:flex;
  flex-direction:column;
  overflow:visible;
  border:1px solid var(--panel-border);
  border-radius:16px;
  background: var(--bg-surface);
  box-shadow:0 10px 28px rgba(15, 23, 42, 0.08);
  padding:14px;
  margin-bottom:12px;
}

@media (max-width: 640px){
  .filter-bar{
    gap:8px;
    margin-bottom:8px;
  }

  .filter-bar .btn{
    padding:0.42rem 0.7rem;
    font-size:0.85rem;
  }

  .filters-collapse-panel{
    position:fixed;
    top:0;
    right:0;
    z-index:100002;
    width:100vw;
    max-width:100vw;
    height:100dvh;
    padding:12px;
    margin-bottom:0;
    overflow-y:auto;
    border:none;
    border-left:1px solid var(--panel-border);
    border-radius:0;
    box-shadow:-18px 0 40px rgba(15, 23, 42, 0.16);
  }

  .filters-drawer-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .filters-drawer-actions{
    width:100%;
    justify-content:flex-end;
    flex-wrap:wrap;
  }

  .filters-vertical-stack{
    flex-direction:column;
    flex-wrap:nowrap;
  }

  .filters-vertical-stack .form-field{
    width:100%;
    min-width:0;
  }
}

.filters-vertical-stack{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}

.filters-vertical-stack .form-field{
  flex:1 1 220px;
  width:auto;
  min-width:220px;
  max-width:none;
  margin-bottom:0 !important;
}

.filters-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  margin-bottom:12px;
  border-bottom:1px solid var(--border-color);
}

.filters-drawer-title{
  font-size:1rem;
  font-weight:700;
  color: var(--text-primary);
}

.filters-drawer-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.filters-search-gap{
  margin-top: 10px;
}

.filters-search-gap .form-field{
  margin-bottom: 6px;
}

.filters-count-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  margin-left:8px;
  border-radius:999px;
  background:var(--primary-color);
  color:#fff;
  font-size:0.72rem;
  font-weight:700;
}

.pdf-fullscreen-overlay{
  z-index:100001;
  padding:16px;
}

.pdf-fullscreen-modal-card{
  position:relative;
  z-index:2;
  width:min(96vw, 1800px);
  height:94vh;
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  border:1px solid var(--panel-border);
  box-shadow:0 24px 70px rgba(15, 23, 42, 0.25);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

@media (max-width: 640px){
  .doc-page-title{ font-size:1rem; }
  .doc-page-subtitle{ font-size:0.8rem; }
  .pdf-doc-link{ font-size:0.85rem; }

  .pdf-fullscreen-overlay{ padding:0; }

  .pdf-fullscreen-modal-card{
    width:100vw;
    height:100dvh;
    border-radius:0;
  }

  .pdf-fullscreen-modal-header{
    padding:8px 10px;
  }

  .pdf-fullscreen-modal-title{ font-size:0.9rem; }
}

.pdf-fullscreen-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-bottom:1px solid var(--border-color);
  background: var(--bg-subtle);
}

.pdf-fullscreen-modal-title{
  font-size:0.95rem;
  font-weight:700;
  color: var(--text-primary);
}

.pdf-modal-frame{
  width:100%;
  flex:1 1 auto;
  border:none;
  background:#f2f2f2;
}

/* Page 4 — PDF dropdown sizing */
#page4-content .form-field{
  max-width:720px;
  margin-bottom: var(--spacing-md);
}
#page4-content #pdf-select,
#page4-content #pdf-select .Select-control{
  width:100%;
}
#page4-content .pdf-frame{
  display:block;
  width:100%;
  margin-top: var(--spacing-sm);
}

/* ---------------------------
   14) Pre blocks
--------------------------- */
.pre{
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: monospace;
  background-color:#f8f9fa;
  padding: var(--spacing-sm);
  border: 1px solid #dee2e6;
  border-radius:4px;
  margin-top: var(--spacing-sm);
  font-size:0.9rem;
}

/* ---------------------------
   15) DataTables
--------------------------- */
#faq-results,
#izicod-results{
  border:1px solid var(--border-color);
  border-radius:14px;
  overflow:hidden;
  box-shadow: 0 10px 26px rgba(28, 40, 52, 0.06);
  background: #fff;
}

#faq-results .dash-spreadsheet-container table,
#izicod-results .dash-spreadsheet-container table{
  table-layout: fixed;
}

#faq-results th,
#izicod-results th{
  letter-spacing: 0.01em;
}

#faq-results td,
#izicod-results td{
  vertical-align: top;
}

#faq-results td[data-dash-column="Questions"],
#faq-results td[data-dash-column="Réponses"],
#izicod-results td[data-dash-column="Libellé schéma"],
#izicod-results td[data-dash-column="Code"],
#izicod-results td[data-dash-column="Commentaire"]{
  color: #1b2a36;
}

#faq-results td[data-dash-column="Questions"],
#izicod-results td[data-dash-column="Code"]{
  font-weight: 700;
}

#faq-results td[data-dash-column="Réponses"]{
  background: linear-gradient(180deg, rgba(243, 249, 255, 0.9), rgba(255, 255, 255, 0.96));
}

#faq-results td[data-dash-column="Questions"]{
  background: linear-gradient(180deg, rgba(255, 247, 231, 0.96), rgba(255, 255, 255, 0.98));
}

#izicod-results td[data-dash-column="Commentaire"]{
  background: linear-gradient(180deg, rgba(241, 249, 246, 0.96), rgba(255, 255, 255, 0.98));
}

#faq-results td[data-dash-column="Chapitre"],
#faq-results td[data-dash-column="Responsable"],
#izicod-results td[data-dash-column="Type"],
#izicod-results td[data-dash-column="Code Schéma"]{
  font-size: 0.92rem;
}

#faq-results td[data-dash-column="Créé le"],
#faq-results td[data-dash-column="Créé par"],
#faq-results td[data-dash-column="Dernière mise à jour"],
#faq-results td[data-dash-column="Mis à jour par"],
#izicod-results td[data-dash-column="Modifié par"],
#izicod-results td[data-dash-column="Modifié le"],
#izicod-results td[data-dash-column="Libellé en anglais"]{
  color: #66758a;
  font-size: 0.88rem;
}

#faq-results td[data-dash-column="Actions"],
#izicod-results td[data-dash-column="Actions"]{
  text-align: center;
}

#faq-results .previous-next-container,
#izicod-results .previous-next-container{
  padding: 12px 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: linear-gradient(180deg, #faf8f2, #f4efe5);
}

#faq-results .previous-next-container button,
#izicod-results .previous-next-container button{
  border-radius: 999px;
  border: 1px solid #cfbda5;
  background: #fffdf7;
  color: #5a4730;
  font-weight: 600;
}

#faq-results .previous-next-container input,
#izicod-results .previous-next-container input{
  border-radius: 999px;
  border: 1px solid #cfbda5;
  padding: 4px 10px;
  background: #fff;
}

/* Izicod latéralité */
.izi-lat-left{ background-color: rgba(0,123,255,0.1); }
.izi-lat-right{ background-color: rgba(255,99,71,0.1); }
.izi-lat-bilateral{ background-color: rgba(255,193,7,0.1); }

.text-success{
  color:#28a745;
  font-weight:500;
}

/* ---------------------------
   16) Izicod (layout helpers)
--------------------------- */
.izicod-warning{ display:flex; align-items:center; gap:0.5rem; }
.izicod-warning-title{ font-weight:600; }

.izicod-toolbar{ justify-content:flex-end; }
.izicod-codelist-row{ align-items:flex-start; }

.izicod-toolbar-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap: var(--spacing-sm);
}

#izi-color-legend{ margin-top: var(--spacing-xs); }
#izi-legend-inner{
  background-color: var(--bg-light);
  padding:0.35rem 0.75rem;
  border-radius:999px;
}

.izi-laterality-help{
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #d7e3de;
  border-radius: 14px;
  background: linear-gradient(180deg, #f7fcfa, #eef6f3);
}

.izi-laterality-help-title{
  font-weight: 600;
  color: #23453c;
  margin-bottom: 8px;
}

.izi-laterality-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.izi-lat-chip{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  font-size: 0.9rem;
  font-weight: 600;
  color: #22313f;
}

.izi-lat-chip--left{
  background: #f6f1f7;
  border-color: #dac4df;
}

.izi-lat-chip--right{
  background: #def7eb;
  border-color: #b4dfcf;
}

.izi-lat-chip--bilateral{
  background: #f1f7a4;
  border-color: #d8dd83;
}

.izi-lat-chip--neutral{
  background: #e8f1f8;
  border-color: #bfd4e4;
}

/* ---------------------------
   17) Inline bar
--------------------------- */
.inline-bar{
  display:flex;
  align-items:center;
  gap: var(--spacing-sm);
}
.inline-bar .btn{ flex:0 0 auto; }
.inline-bar .dd { flex:1 1 auto; }

.center-actions{
  display:flex;
  justify-content:center;
  margin-top: var(--spacing-md);
}

/* ---------------------------
   18) Split (DeepTranslate 2 colonnes)
   (remplace tes 2 définitions .split)
--------------------------- */
.split{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--spacing-md);
  align-items:start;
}
.h-52vh{ min-height:52vh; }

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

/* ---------------------------
   19) Index anti-overlap (mobile)
--------------------------- */
.field-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
}

@media (max-width: 720px){
  div:has(> label.form-field.flex-2):has(> small.badge.tips.details){
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap: var(--spacing-xs);
  }

  div:has(> label.form-field.flex-2):has(> small.badge.tips.details)
  > label.form-field.flex-2{
    display:block;
    width:100%;
    margin:0;
    position:static;
  }

  div:has(> label.form-field.flex-2):has(> small.badge.tips.details)
  > small.badge.tips.details{
    display:block;
    width:100%;
    margin-left:0;
    margin-top:0;
    white-space:normal;
  }
}

/* ---------------------------
   20) Page 7 — Split pane (Index | Tabular)
--------------------------- */
.split-pane{
  --split-left: 36%;
  --split-top: 46%;

  display:flex;
  gap:0;
  align-items:stretch;
  width:100%;
}

@media (min-width:1101px){
  .split-pane{ height: calc(100vh - 220px); }
  .split-pane > .card{ height:100%; }
}

.pane-left{
  flex: 0 0 var(--split-left);
  min-width:280px;
  max-width:70%;
  overflow:auto;
  border-right:0;
}

.pane-right{
  flex:1 1 auto;
  min-width:360px;
  overflow:auto;
}

.splitter{
  flex:0 0 10px;
  cursor: col-resize;
  position:relative;
  background:transparent;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}
.splitter::before{
  content:"";
  position:absolute;
  inset:0;
  margin:0 auto;
  width:2px;
  height:100%;
  background: rgba(0,0,0,0.15);
}
.splitter:hover::before,
.splitter:focus-visible::before{
  background: rgba(0,0,0,0.35);
}
.splitter:focus-visible{
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(26,95,172,0.16);
}

@media (max-width:1100px){
  .split-pane{
    flex-direction:column;
    height: calc(100vh - 260px);
  }

  .pane-left{
    flex: 0 0 var(--split-top);
    min-width:0;
    max-width:none;
    min-height:220px;
    max-height:70vh;
  }

  .pane-right{
    min-width:0;
    flex: 1 1 auto;
  }

  .splitter{
    width:100%;
    height:10px;
    cursor: row-resize;
  }
  .splitter::before{
    width:100%;
    height:2px;
  }
}

@media (max-width:720px){
  .split-pane{ height:auto; }
  .pane-left{ min-height:0; max-height:none; }
  .pane-right{ min-height:260px; }
}

/* drag state */
.split-pane.is-resizing,
.split-pane.is-resizing *{
  -webkit-user-select:none;
  user-select:none;
}

.pane-left, .pane-right{
  overscroll-behavior: contain;
}

/* Remove checklist add button in left pane */
.pane-left button[id*="indexes-add-button"]{ display:none; }

/* ---------------------------
   21) Tabular — UI blocks
--------------------------- */
.details-link-btn,
.code-link-btn,
.tabular-code-link,
.crumb-link{
  background:none;
  border:none;
  padding:0;
  color: var(--primary);
  text-decoration:underline;
  cursor:pointer;
  font-weight:600;
}

.details-link-btn:hover,
.code-link-btn:hover,
.tabular-code-link:hover,
.crumb-link:hover{
  opacity:0.85;
}

.code-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:6px 0;
}
.code-desc-span{ color:#111; }

.modal-section-title{ font-weight:700; margin-bottom:6px; }
.modal-title-line{ font-weight:700; font-size:18px; }

.tabular-code-block{
  padding:8px 0;
  border-top:1px solid #eee;
}

.tabular-code-header{
  display:flex;
  gap:12px;
  align-items:baseline;
}

.tabular-code-desc{
  color:#111;
  font-weight:700;
}

.tabular-code-instructions{
  margin-left:18px;
  margin-top:8px;
  color:#111;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ---- Instruction block base ---- */
.tabular-instruction{
  border:1px solid rgba(0,0,0,0.08);
  border-left-width:5px;
  border-radius:6px;
  padding:8px 12px 8px 12px;
  position:relative;
}

/* Critical rules get a stronger left border + slight shadow */
.tabular-instruction--critical{
  border-left-width:5px;
  box-shadow:0 2px 6px rgba(0,0,0,0.06);
}

/* ---- Title wrapper: clears default styles ---- */
.tabular-instruction-title{
  display:block;
  margin-bottom:5px;
  background:none;
  padding:0;
}

/* ---- Rule tag pill (the .rule-tag--* spans inside the title div) ---- */
.rule-tag{
  display:inline-flex;
  align-items:center;
  padding:2px 9px;
  border-radius:99px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  line-height:1.6;
  white-space:nowrap;
}

/* Body text */
.tabular-instruction-body{
  font-size:0.875rem;
  line-height:1.55;
  color:#222;
}
.tabular-instruction-body pre{
  margin:0;
  font-family:inherit;
  font-size:14px;
  white-space:pre-wrap;
}

/* ================================================================
   Rule themes — block + tag pill
   ================================================================ */

/* --- Excludes 1 (CRITICAL: never code together) --- */
.tabular-instruction--excludes1{
  background:#fef2f2;
  border-color:#fca5a5;
  border-left-color:#b91c1c;
}
.rule-tag--excludes1{
  background:#b91c1c;
  color:#fff;
}

/* --- Code First (CRITICAL: sequencing obligation) --- */
.tabular-instruction--codeFirst{
  background:#eff6ff;
  border-color:#bfdbfe;
  border-left-color:#1d4ed8;
}
.rule-tag--codeFirst{
  background:#1d4ed8;
  color:#fff;
}

/* --- Use Additional Code (CRITICAL: mandatory pairing) --- */
.tabular-instruction--useAdditionalCode{
  background:#f0fdf4;
  border-color:#bbf7d0;
  border-left-color:#15803d;
}
.rule-tag--useAdditionalCode{
  background:#15803d;
  color:#fff;
}

/* --- Excludes 2 (informational: separate condition possible) --- */
.tabular-instruction--excludes2{
  background:#fffbeb;
  border-color:#fde68a;
  border-left-color:#d97706;
}
.rule-tag--excludes2{
  background:#d97706;
  color:#fff;
}

/* --- Code Also --- */
.tabular-instruction--codeAlso{
  background:#faf5ff;
  border-color:#e9d5ff;
  border-left-color:#7c3aed;
}
.rule-tag--codeAlso{
  background:#7c3aed;
  color:#fff;
}

/* --- Includes / Inclusion terms / Note / 7th char (informational) --- */
.tabular-instruction--includes,
.tabular-instruction--inclusionTerm{
  background:#f8fafc;
  border-color:#e2e8f0;
  border-left-color:#64748b;
}
.rule-tag--includes,
.rule-tag--inclusionTerm{
  background:#e2e8f0;
  color:#334155;
}

.tabular-instruction--note,
.tabular-instruction--sevenChrNote,
.tabular-instruction--sevenChrDef{
  background:#f8fafc;
  border-color:#e2e8f0;
  border-left-color:#94a3b8;
}
.rule-tag--note,
.rule-tag--sevenChrNote,
.rule-tag--sevenChrDef{
  background:#e2e8f0;
  color:#475569;
}

/* ================================================================
   breadcrumb, parent notes, actions row, consistency
   ================================================================ */

/* breadcrumb */
.breadcrumb-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.parent-notes-block{
  padding:8px 10px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#f8fafc;
}
.parent-notes-title{ font-weight:700; color:#1a2332; }
.parent-notes-header{ margin-bottom:6px; }
.parent-notes-body{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-left:18px;
}

.tabular-actions-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.consistency-blocks{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.tabular-instruction--consistency-hac{
  background:#fff7e6;
  border-color:#fed7aa;
  border-left-color:#ea580c;
}
.tabular-instruction--consistency-hac .tabular-instruction-title .rule-tag,
.tabular-instruction--consistency-hac .tabular-instruction-title{
  background:#fff7e6;
}
.rule-tag--consistency-hac{
  background:#ea580c;
  color:#fff;
}

.tabular-instruction--consistency-poa{
  background:#f0fdf4;
  border-color:#bbf7d0;
  border-left-color:#16a34a;
}
.rule-tag--consistency-poa{
  background:#16a34a;
  color:#fff;
}

/* ---------------------------
   22) Mobile fixes — IZICOD + FAQ
--------------------------- */
@media (max-width: 720px){

  #page5-content .row-wrap,
  #page3-content .row-wrap{
    flex-direction:column;
    align-items:stretch;
  }

  #page5-content .flex-0,
  #page5-content .flex-1,
  #page5-content .flex-2,
  #page5-content .flex-3,
  #page3-content .flex-0,
  #page3-content .flex-1,
  #page3-content .flex-2,
  #page3-content .flex-3{
    flex: 1 1 100%;
    width:100%;
    min-width:0;
  }

  /* override inline auto width on mobile */
  #page5-content .form-field.flex-0,
  #page3-content .form-field.flex-0{
    width:100%;
  }

  #page5-content .btn,
  #page3-content .btn{
    width:100%;
  }

  #page5-content .izicod-codelist-row{ align-items:stretch; }

  #page5-content .izicod-toolbar-actions{
    margin-left:0;
    width:100%;
    justify-content:stretch;
  }

  #page5-content #izi-codelist-dd,
  #page5-content #izi-codelist-dd .Select-control{
    width:100%;
  }

  #page3-content #faq-query,
  #page3-content .dd,
  #page3-content .dd .Select-control{
    width:100%;
  }

  #page5-content .badge.tips,
  #page3-content .badge.tips{
    margin-left:0;
    display:block;
    width:100%;
  }

  #page5-content .izi-laterality-chips{
    flex-direction: column;
  }
}

@media (max-width: 420px){
  #page5-content .gap-md,
  #page3-content .gap-md{ gap: var(--spacing-sm); }
}

/* ---------------------------
   23) Tablet fixes — IZICOD + FAQ (721→1024)
--------------------------- */
@media (min-width:721px) and (max-width:1024px){

  #page5-content .row-wrap,
  #page3-content .row-wrap{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:flex-end;
  }

  #page5-content .form-field,
  #page3-content .form-field{
    flex: 1 1 calc(50% - var(--spacing-md));
    width: calc(50% - var(--spacing-md));
    min-width:280px;
  }

  #page5-content #izicod-comment-q,
  #page3-content #faq-query{
    width:100%;
  }

  #page5-content .form-field:has(#izicod-comment-q),
  #page3-content .form-field:has(#faq-query){
    flex: 1 1 100%;
    width:100%;
  }

  #page5-content .btn,
  #page3-content .btn{ width:auto; }

  #page5-content .izicod-codelist-row{ align-items:center; }

  #page5-content #izi-codelist-dd{
    flex: 1 1 100%;
    width:100%;
    min-width:0;
  }

  #page5-content .izicod-codelist-row > .btn,
  #page5-content .izicod-codelist-row > .btn-clip{
    flex: 0 0 auto;
  }

  #page5-content .izicod-toolbar-actions{
    margin-left:auto;
    flex: 1 1 100%;
    width:100%;
    justify-content:flex-end;
  }

  #page3-content #btn-export-faq{ white-space:nowrap; }

  #page5-content .dd,
  #page3-content .dd{ min-width:0; }
}

/* ---------------------------
   24) Header responsive
--------------------------- */
#year-dd,
#year-dd .Select-control{
  min-width:12rem;
  max-width:100%;
}

@media (max-width:720px){
  .app-header{
    flex-direction:column;
    align-items:stretch;
    height:auto;         /* sur mobile on laisse respirer */
    padding: 8px 0;      /* un tout petit padding */
  }

  .header-left{ height: var(--header-height); } /* logo conserve une "ligne" stable */
  .app-logo{ height: 100%; }

  .header-controls{
    flex-direction:column;
    align-items:stretch;
  }

  .header-controls .toolbar{
    width:100%;
    justify-content:space-between;
    align-items:center;
  }

  .field-label-inline{
    flex:0 0 auto;
    white-space:nowrap;
  }

  #year-dd,
  #year-dd .Select-control{
    flex: 1 1 auto;
    min-width:0;
    width:100%;
  }

  .header-controls .toolbar:last-child{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
  }
  .header-controls .toolbar:last-child .btn{ width:100%; }
}

@media (min-width:721px) and (max-width:1024px){
  .app-header{ align-items:flex-start; }
  .app-title{ flex: 1 1 100%; }
  .header-controls{
    flex: 1 1 100%;
    justify-content:space-between;
  }
  #year-dd,
  #year-dd .Select-control{ min-width:10rem; }
}

/* ---------------------------
   25) Minor UI
--------------------------- */
@media (max-width: 480px){
  .app-title{ display:none; }
}


.gynemap-filter-row{
  display:flex;
  gap:18px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.filter-block{
  display:flex;
  flex-direction:column;
}

.filter-label{
  font-size:12px;
  font-weight:600;
  margin-bottom:4px;
  color:#555;
}

.filter-field{
  width:200px;
}

/* Dash DatePicker fix */
.filter-field .DateInput,
.filter-field .SingleDatePickerInput{
  width:200px;
}

.filter-button{
  justify-content:flex-end;
}
.gynemap-help{
  font-size: 14px;
  line-height: 1.45;
}
.gynemap-help h2{
  margin: 0 0 10px 0;
}

/* 0 scroll dans la modale */
.modal-body-noscr{
  padding: 16px 18px;
  overflow: visible;      /* pas de scroll */
  max-height: none;       /* pas de contrainte */
}

/* IMPORTANT : neutralise un éventuel style "pre" appliqué à la modale */
.modal-body-noscr,
.modal-body-noscr *{
  white-space: normal !important;    /* évite le rendu type code */
  font-family: inherit !important;   /* évite monospace */
}

.gynemap-help-html{
  font-size: 16px;
  line-height: 1.5;
}
.gynemap-help-html ul{
  padding-left: 22px;
}
.gynemap-help-html li{
  margin: 6px 0;
}

.gynemap-rules-panel{
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-raise);
  box-shadow: var(--shadow-xs);
}

.gynemap-rules-head{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.gynemap-rules-title{
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.gynemap-rules-subtitle{
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.gynemap-rules-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.gynemap-rule-card{
  padding: 12px 13px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
}

.gynemap-rule-card--critical{
  border-left: 4px solid #b91c1c;
}

.gynemap-rule-card--major{
  border-left: 4px solid #b7791f;
}

.gynemap-rule-card--info{
  border-left: 4px solid #64748b;
}

.gynemap-rule-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.gynemap-rule-id{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
}

.gynemap-rule-period{
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.gynemap-rule-priority{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.gynemap-rule-priority--critical{
  background: #fef2f2;
  color: #b91c1c;
}

.gynemap-rule-priority--major{
  background: #fffbeb;
  color: #b7791f;
}

.gynemap-rule-priority--info{
  background: #f8fafc;
  color: #475569;
}

.gynemap-rule-title{
  margin-bottom: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.gynemap-rule-row{
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.gynemap-rule-label{
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.gynemap-rule-text{
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-primary);
}

.gynemap-rule-source{
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.gynemap-interaction-hint{
  margin: 8px 0 12px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.gynemap-detail-panel{
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.gynemap-detail-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.gynemap-detail-kicker{
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.gynemap-detail-title{
  margin-top: 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.gynemap-detail-subtitle{
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.gynemap-detail-summary{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--info-bg);
  color: var(--info-fg);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.gynemap-detail-context{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.gynemap-detail-section + .gynemap-detail-section{
  margin-top: 14px;
}

.gynemap-detail-section-head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.gynemap-detail-section-count{
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.gynemap-detail-section-title{
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.gynemap-legacy-panel{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.gynemap-legacy-text{
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.gynemap-event-selector{
  margin-bottom: 12px;
}

.gynemap-event-chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.gynemap-event-chip{
  height: auto;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1.2;
}

.gynemap-event-chip.is-active{
  background: var(--primary-light);
  border-color: var(--info-border);
  color: var(--primary);
}

.gynemap-event-chip.is-selected{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

@media (max-width: 720px){
  .gynemap-interaction-hint{
    margin-bottom: 10px;
  }

  .gynemap-event-chip-row{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .gynemap-event-chip{
    flex: 0 0 auto;
    min-height: 38px;
  }

  .gynemap-detail-head{
    flex-direction: column;
  }

  .gynemap-detail-summary{
    white-space: normal;
  }

  .gynemap-rules-grid{
    grid-template-columns: 1fr;
  }
}

/* Si ta card fixe une hauteur, on s'assure qu'elle s'adapte */
.modal-card-fixed{
  height: auto;
  max-height: 85vh;       /* sécurité: ne déborde pas de l'écran */
}

/* =========================================================
   Admin Tab — Redesign
   ========================================================= */

.admin-page {
  padding-top: var(--spacing-lg);
}

/* Page header */
.admin-page-header {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--bg-light);
  display: flex;
  align-items: baseline;
  gap: var(--spacing-md);
}

.admin-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
}

.admin-page-subtitle {
  color: var(--muted-color);
  font-size: 0.875rem;
  margin: 0;
}

/* ---- Main tabs (pill style) ---- */

/*
  parent_className wraps BOTH the tab-list row AND the content panels.
  Must be display:block so the content panels sit BELOW (not beside) the tabs.
*/
.admin-main-tabs-parent {
  display: block;
  margin-bottom: 0;
}

/*
  className wraps ONLY the tab-list row.
  Render as a horizontal flex row of pills.
*/
.admin-main-tabs {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  border-bottom: none !important;
  margin-bottom: var(--spacing-lg) !important;
  padding-bottom: 0 !important;
}

.admin-main-tab {
  flex: none !important;
  width: auto !important;
  background: var(--bg-light) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 20px !important;
  padding: 7px 20px !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  color: var(--muted-color) !important;
  cursor: pointer !important;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.admin-main-tab:hover {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.admin-main-tab--selected {
  flex: none !important;
  width: auto !important;
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  border-radius: 20px !important;
  padding: 7px 20px !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  border-bottom: 1px solid var(--primary) !important;
}

/* Tab content area */
.admin-tab-content {
  padding-top: var(--spacing-md);
}

/* ---- Inner tabs — segmented control style ---- */

/*
  IMPORTANT: parent_className wraps BOTH the tab list AND the tab panels.
  → Must be display:block (not flex) to avoid tabs + content going side-by-side.
*/
.admin-inner-tabs-parent {
  display: block;
  margin-bottom: var(--spacing-lg);
}

/*
  className wraps ONLY the tab buttons row.
  Render as an inline segmented control (pill background, white active chip).
*/
.admin-inner-tabs {
  display: inline-flex !important;
  gap: 2px !important;
  background: var(--bg-light) !important;
  border-radius: 8px !important;
  padding: 3px !important;
  border-bottom: none !important;
  margin-bottom: var(--spacing-md) !important;
}

/* Each tab button — compact */
.admin-inner-tab {
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 5px 14px !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  color: var(--muted-color) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}

.admin-inner-tab:hover {
  color: var(--text-color) !important;
  background: rgba(15, 23, 42, 0.06) !important;
}

/* Selected tab — white chip with shadow */
.admin-inner-tab--selected {
  background: var(--bg-surface) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 5px 14px !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  color: var(--primary) !important;
  box-shadow: var(--shadow-xs) !important;
  line-height: 1.4 !important;
}

/* ---- Section label (inline divider) ---- */
.admin-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--spacing-sm);
}

.admin-section-label span:first-child {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-color);
  white-space: nowrap;
}

.admin-section-line {
  flex: 1;
  height: 1px;
  background: var(--bg-light);
  display: block !important;
}

/* ---- Form card with accent border ---- */
.admin-form-card {
  border-left: 3px solid var(--primary);
  border-radius: 8px;
}

/* ---- Import / Ref slide panel ---- */
.admin-import-slide,
.admin-ref-slide {
  background: var(--card-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: var(--shadow-xs);
}

/* ---- Upload box improvements ---- */
.upload-box {
  transition: border-color 0.2s, background 0.2s;
}

.upload-box:hover {
  border-color: var(--primary);
  background: #f0f6ff;
}

/* ---- btn-secondary-outline (missing variant) ---- */
.btn-secondary-outline {
  background: transparent;
  border: 1px solid var(--muted-color);
  color: var(--muted-color);
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.btn-secondary-outline:hover {
  background: var(--muted-color);
  color: #fff;
}

/* ---- row-start utility ---- */
.row-start {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

/* ---- Admin buttons — taille naturelle, pas d'étirement ---- */
.btn-admin {
  flex: none !important;
  width: auto !important;
  white-space: nowrap !important;
}

/* ---- Admin form fields in row — annule le width:100% de .form-field ---- */
.admin-form-card .row-wrap > .form-field {
  width: auto;
}

/* ---- Global scroll arrows ---- */
.global-scroll-btn {
  opacity: 0.35;
  transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.global-scroll-btn:hover,
.global-scroll-btn:focus-visible {
  opacity: 1;
  box-shadow: 0 10px 26px rgba(0,0,0,0.3) !important;
  transform: translateX(-50%) scale(1.04);
}

/* ---------------------------
   Index search results panel
   Replaces .pre#search-output
---------------------------- */

/* Container replacing the old <pre> */
.search-results-panel {
  margin-top: var(--spacing-sm);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* One main-term block (tree root) */
.sr-entry {
  background: #fff;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 6px;
  box-shadow: 0 1px 4px rgba(15,23,42,0.04);
}

/* Every rendered line inside an entry */
.sr-line {
  display: block;
  white-space: normal;
  word-break: break-word;
  padding: 1px 0;
}

/* Level 0 = main term: bold */
.sr-line.sr-level-0 {
  font-weight: 600;
  color: #1a2332;
}

/* Levels 1-4: progressive indent via padding-left */
.sr-line.sr-level-1 { padding-left: 18px; }
.sr-line.sr-level-2 { padding-left: 36px; }
.sr-line.sr-level-3 { padding-left: 54px; }
.sr-line.sr-level-4 { padding-left: 72px; }

/* Cell rows (from <cell> nodes): slightly muted */
.sr-line.sr-cell {
  color: #4a5568;
  font-size: 0.84rem;
}

/* ---- Code badges ---- */
.sr-code-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 120ms ease;
  vertical-align: baseline;
  margin: 0 2px;
}

.sr-code-badge:hover {
  filter: brightness(0.88);
}

/* ICD-10-CM codes: blue */
.sr-code-badge--icd {
  background: #e8f1fc;
  color: #1a5fac;
  border: 1px solid rgba(26,95,172,0.25);
}

/* PCS codes: red-tinted */
.sr-code-badge--pcs {
  background: #fdecea;
  color: #c0392b;
  border: 1px solid rgba(192,57,43,0.25);
}

/* Range badges (A00-B99): neutral */
.sr-code-badge--range {
  background: #f0f4f9;
  color: #4a5568;
  border: 1px solid #cdd5e0;
  cursor: pointer;
}

/* HAC / POA markers */
.sr-hac-mark {
  margin-left: 2px;
  color: #a00;
  font-size: 0.8em;
}

.sr-poa-mark {
  margin-left: 2px;
  color: #333;
  font-size: 0.8em;
}