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

/* ---------------------------
   0) Reset & Variables
--------------------------- */
:root{
  --primary: #007bff;
  --danger:  #dc3545;

  --text-color:  #333;
  --muted-color: #6c757d;
  --border-color:#ccc;

  --bg-light:  #f4f7fa;
  --card-bg:   #ffffff;
  --header-bg: #ffffff;

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;

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

  /* Header (compact & stable) */
  --header-height: 56px;
  --header-pad-x:  12px;
  --header-gap:    8px;
  --header-bottom-gap: 6px;
}

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

body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-light);
}

/* ---------------------------
   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-sm{ font-size: 0.85rem; }
.text-lg{ font-size: 1.25rem; }
.mono{ font-family: monospace; }

.hidden{ display:none; }

.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:#ffc107;
  color:#333;
  padding:0.2rem 0.5rem;
  border-radius:4px;
  font-weight:bold;
  font-size:0.8rem;
}

.badge.tips{
  display:inline-block;
  background-color: rgba(13,110,253,.08);
  color:#084298;
  padding:0.2rem 0.5rem;
  border-radius:4px;
  font-weight:bold;
  font-size:0.8rem;
  margin-top: var(--spacing-xs);
  margin-left:auto;
}

.badge.tips.details{
  background-color:#fffde7;
  color:#424242;
  border:1px solid #f9fbe7;
}

/* 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:#fff3cd;
  color:#664d03;
}
.pcs-invalid-banner{
  background-color:#f8d7da;
  color:#842029;
}
.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; }
}

/* PCS panels */
.pcs-panels{
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items:flex-start;
}
.pcs-panels > .card{ height:100%; }

/* ---------------------------
   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, .textarea{
  padding:0.5rem 0.75rem;
  border:1px solid var(--border-color);
  border-radius:4px;
  font-size:1rem;
  width:100%;
}

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

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

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

.input-lg{
  padding:0.6rem 0.9rem;
  font-size:1.05rem;
}

/* PCS code row */
.pcs-code-row{
  display:flex;
  align-items:center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}
.pcs-code-input{ max-width:260px; }
.pcs-code-error{
  min-height:1.8rem;
  display:flex;
  align-items:center;
}

/* 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:4px;
}

.dd .Select-control{ box-shadow:none; }

/* Compact dropdown: aligné boutons (~36px) */
.dd.compact .Select-control{ min-height:36px; height:36px; }
.dd.compact .Select-placeholder,
.dd.compact .Select--single > .Select-control .Select-value{
  line-height:34px;
  padding:0 8px;
}
.dd.compact .Select-input{ height:34px; }
.dd.compact .Select-input > input{ height:34px; padding:0; }
.dd.compact .Select-arrow-zone,
.dd.compact .Select-clear-zone{
  height:34px;
  padding-top:0;
  padding-bottom:0;
}
.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{
  padding:0.5rem 1rem;
  border:none;
  border-radius:4px;
  cursor:pointer;
  font-size:1rem;
  font-weight:600;
  transition: background-color 0.2s;
}

.btn-primary{ background-color: var(--primary); color:#fff; }
.btn-primary:hover{ background-color:#0056b3; }

.btn-danger{ background-color: var(--danger); color:#fff; }
.btn-danger:hover{ background-color:#bd2130; }

.btn-danger-outline{
  background:transparent;
  border:1px solid var(--danger);
  color: var(--danger);
}
.btn-danger-outline:hover{ background-color: var(--danger); color:#fff; }

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

.btn-ghost{
  background:transparent;
  color: var(--primary);
  padding:0.25rem 0.5rem;
}
.btn-ghost:hover{ background-color: rgba(0,123,255,0.1); }

.btn-block{ width:100%; margin-top: var(--spacing-md); }
.btn-xs{ font-size:0.75rem; padding:0.1rem 0.4rem; }

/* Clipboard button */
.btn-clip{
  cursor:pointer;
  background:transparent;
  border:none;
  color: var(--primary);
  font-size:1.2rem;
  padding:0 0.5rem;
}
.btn-clip:hover{ opacity:0.8; }

/* Small clear button */
.btn-clear{
  border:0;
  background:transparent;
  font-size:1.25rem;
  line-height:1;
  padding: .25rem .5rem;
  cursor:pointer;
  opacity:.75;
}
.btn-clear:hover{ opacity:1; }

/* ---------------------------
   9) Cards
--------------------------- */
.card{
  background-color: var(--card-bg);
  padding: var(--spacing-md);
  border-radius:8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.card-soft{
  background-color:#fff8e1;
  padding:0.75rem 1rem;
  border-radius:8px;
}

.card-title{
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--bg-light);
}

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

.custom-tab,
.custom-tab--selected{
  font-weight:500;
  padding:8px 15px;
  border:1px solid transparent;
  border-bottom:none;
  cursor:pointer;
  transition: background-color 0.2s;
  background-color: var(--bg-light);
}

.custom-tab--selected{
  border-color: var(--border-color);
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  border-bottom:2px solid var(--card-bg);
  background-color: var(--card-bg);
  color: var(--primary);
}

/* ---------------------------
   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;
}

.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: rgba(0,0,0,0.6);
  z-index:2000;
}

.modal-card{
  background-color: var(--card-bg);
  padding: var(--spacing-lg);
  border-radius:8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  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(--bg-light);
}

.modal-close{
  position:absolute;
  top:10px; right:10px;
  background:transparent;
  border:1px solid var(--danger);
  border-radius:4px;
  color: var(--danger);
  font-size:1rem;
  cursor:pointer;
  padding:0.5rem;
}
.modal-close:hover{
  background-color: var(--danger);
  color:#fff;
}

/* Modal transparent + blur */
.modal-overlay-transparent{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  background-color: rgba(0,0,0,0.4);
  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:#fff;
  width:90%;
  max-width:950px;
  height:85vh;
  max-height:85vh;
  min-height:0;
  border-radius:12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  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 #eeeeee;
  background: rgba(255,255,255,0.95);
  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:#fff;
}

.modal-body-scroll h3{
  margin-top:1.5rem;
  margin-bottom:0.75rem;
  color:#1a1a1a;
  border-left:4px solid var(--primary);
  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
--------------------------- */
.pdf-frame{
  width:100%;
  height: calc(100vh - 120px);
  min-height:900px;
  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:4px;
  overflow:hidden;
}

/* 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;
}

/* ---------------------------
   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::before{
  background: rgba(0,0,0,0.35);
}
.splitter:focus{ outline:none; }

@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:#0d6efd;
  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;
}

.tabular-instruction{
  border:1px solid rgba(0,0,0,0.08);
  border-left-width:6px;
  border-radius:4px;
  padding:6px 10px;
}

.tabular-instruction-title{
  display:inline-block;
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:2px 6px;
  border-radius:3px;
  margin-bottom:4px;
  background: rgba(0,0,0,0.06);
}

.tabular-instruction-body pre{
  margin:0;
  font-family:inherit;
  font-size:14px;
  white-space: pre-wrap;
}

/* themes */
.tabular-instruction--excludes1{
  background:#fdecea;
  border-left-color:#d93025;
}
.tabular-instruction--excludes1 .tabular-instruction-title{ background:#f9d3cf; }

.tabular-instruction--excludes2{
  background:#f3e9d4;
  border-left-color:#efdcb7;
}
.tabular-instruction--excludes2 .tabular-instruction-title{ background:#e4c488; }

.tabular-instruction--useAdditionalCode{
  background:#e8f1fe;
  border-left-color:#1a73e8;
}
.tabular-instruction--useAdditionalCode .tabular-instruction-title{ background:#d2e3fc; }

.tabular-instruction--codeFirst{
  background:#e3f2fd;
  border-left-color:#0288d1;
}
.tabular-instruction--codeFirst .tabular-instruction-title{ background:#d6ecfb; }

.tabular-instruction--codeAlso{
  background:#f3e8fd;
  border-left-color:#7e57c2;
}
.tabular-instruction--codeAlso .tabular-instruction-title{ background:#e7d7fb; }

.tabular-instruction--note,
.tabular-instruction--sevenChrNote,
.tabular-instruction--sevenChrDef,
.tabular-instruction--includes,
.tabular-instruction--inclusionTerm{
  background:#f7f7f7;
  border-left-color:#bdbdbd;
}
.tabular-instruction--note .tabular-instruction-title,
.tabular-instruction--sevenChrNote .tabular-instruction-title,
.tabular-instruction--sevenChrDef .tabular-instruction-title,
.tabular-instruction--includes .tabular-instruction-title,
.tabular-instruction--inclusionTerm .tabular-instruction-title{
  background:#eeeeee;
}

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

.parent-notes-block{
  padding:8px 10px;
  border:1px solid #eee;
  border-radius:6px;
  background:#fafafa;
}
.parent-notes-title{ font-weight:700; color:#111; }
.parent-notes-header{ margin-bottom:6px; }
.parent-notes-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  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-left-color:#f29900;
}
.tabular-instruction--consistency-hac .tabular-instruction-title{ background:#ffe6b3; }

.tabular-instruction--consistency-poa{
  background:#e8efeb;
  border-left-color:#4ebe8c;
}
.tabular-instruction--consistency-poa .tabular-instruction-title{ background:#c9e5d8; }

/* ---------------------------
   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%;
  }
}

@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; }
}