/* =============================================================================
   TOKENS & BASE
   ============================================================================= */

/* ---- Variables globales (tokens) ---- */
:root{
  /* Brand / Bootstrap fallbacks */
  --brand-primary:       var(--bs-primary, #0086a8);
  --brand-primary-rgb:   var(--bs-primary-rgb, 0,134,168);
  --border-color:        var(--bs-border-color, #dee2e6);
  --body-bg:             var(--bs-body-bg, #fff);

  /* Couleurs de colonnes (prépa/retour/total/hors) */
  --col-prepa-bg:  #E6F6FA;
  --col-prepa-fg:  #0b3a47;
  --col-prepa-hbg: #D5F0F7;

  --col-retour-bg:  #FFF1DE;
  --col-retour-fg:  #6f3b00;
  --col-retour-hbg: #FFE7C8;

  --col-total-bg:  #0086a8;
  --col-total-fg:  #fff;

  --col-hors-bg:   #00B3DF;
  --col-hors-fg:   #fff;

  /* Décors / halos */
  --halo-amber: 255,230,186;
  --shadow-strong: 0 8px 20px rgba(0,0,0,.28);
  --shadow-soft:   0 6px 18px rgba(0,0,0,.12);

  /* Typo/rythme */
  --fs-table:    .92rem;
  --fs-table-sm: .88rem;
  --lh-table:    1.25;
  --gap-xxs:     .1rem;
  --gap-xs:      .25rem;
  --gap-sm:      .45rem;
  --gap-md:      .5rem;
  --radius-sm:   .375rem;
  --focus-ring:  0 0 0 .18rem rgba(0,134,168,.35);
}

/* Réduction des animations (Loader) */
@media (prefers-reduced-motion: reduce){
  #loader .spinner-border::before,
  #loader .spinner-border::after{ animation: none !important; }
}

/* ---- Fond de page (dégradé subtil + halos brand) ---- */
html, body { height: 100%; }
body{
  padding-top: 2rem;
  background-color: #f7f9fc;
  background-image:
    radial-gradient(1200px 1200px at 10% -10%, rgba(var(--brand-primary-rgb), .08), rgba(0,0,0,0) 45%),
    radial-gradient(900px 900px at 110% 0%, rgba(var(--halo-amber), .35), rgba(0,0,0,0) 40%),
    linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ---- Alignements rapides ---- */
table th{ text-align:center !important; vertical-align:middle !important; }

/* HH:MM compact et aligné */
.input-group-text.hp-hhmm{
  min-width: 64px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   LOADER (overlay + halo + fade + ping)
   ============================================================================= */

#loader{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background:
    radial-gradient(900px 600px at 15% 0%, rgba(var(--brand-primary-rgb), .06) 0, rgba(0,0,0,0) 60%),
    radial-gradient(900px 600px at 85% 100%, rgba(var(--halo-amber), .25) 0, rgba(0,0,0,0) 60%),
    rgba(255,255,255,.72);
  backdrop-filter: blur(4px) saturate(115%);
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  cursor: progress;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}
#loader[style*="display: block"], /* compat JS inline */
#loader.is-visible{
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* Spinner + halos */
#loader .spinner-border{
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  border-width: .35rem;
  color: var(--brand-primary);
  filter: drop-shadow(var(--shadow-soft));
  border-right-color: transparent;
}
#loader .spinner-border::before,
#loader .spinner-border::after{
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 9999px;
  border: 2px solid rgba(var(--brand-primary-rgb), .22);
  animation: aic-ping 1.6s cubic-bezier(.2,.8,.2,1) infinite;
}
#loader .spinner-border::after{
  inset: -22px;
  border-color: rgba(var(--brand-primary-rgb), .12);
  animation-delay: .25s;
}
#loader .spinner-border::marker{ content:none; }
#loader .spinner-border + .loader-text{
  margin-top: .75rem;
  font-weight: 600;
  letter-spacing: .2px;
  color: #0b2443;
  opacity: .7;
}

/* Animation du halo */
@keyframes aic-ping{
  0%   { transform: scale(.85); opacity: .7; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { opacity: 0; }
}

/* =============================================================================
   DROPDOWN DE VISIBILITÉ (tech-dd)
   ============================================================================= */

.dropdown-menu.tech-dd{ padding: 1rem 2rem !important; }
.tech-dd .dd-header .badge{ font-weight: 600; }
.tech-dd .form-check.form-check-sm{ padding: .25rem .5rem; }
.tech-dd .form-check.form-check-sm .form-check-input{ width: 1rem; height: 1rem; margin-top: .2rem; }
.tech-dd .form-check.form-check-sm .form-check-label{ cursor: pointer; color: #000; }
.tech-dd .dimmed{ opacity: .55; }
.tech-dd .hit{ font-weight: 600; }
.tech-dd .section-title{
  position: sticky; top: 0; z-index: 1;
  padding: .25rem .5rem; font-size: .8rem; text-transform: uppercase; color: #000;
  background: var(--body-bg); border-bottom: 1px dashed var(--border-color);
}

/* =============================================================================
   CONTENEUR DE DONNÉES
   ============================================================================= */

#data-container{ margin-top: 1rem; padding-bottom: 2rem; }
table.data-table{ width: 100%; }
table.data-table :is(th, td){ text-align: center; }

/* =============================================================================
   TABLES — Style unifié (synthèses, résultats labo, résumés, overview-tab)
   ============================================================================= */

/* Cible : tables commençant par aic-* + tables dans overview-tab-* */
:is(
  table[id^="aic-synth-"],
  table[id^="aic-labres-"],
  table[id^="aic-labsum-"],
  div[id^="overview-tab-"] table
){
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-table);
  line-height: var(--lh-table);
}
:is(
  table[id^="aic-synth-"],
  table[id^="aic-labres-"],
  table[id^="aic-labsum-"],
  div[id^="overview-tab-"] table
) :is(th, td){ text-align: center; }

/* Head collant + séparateur */
:is(
  table[id^="aic-synth-"],
  table[id^="aic-labres-"],
  table[id^="aic-labsum-"],
  div[id^="activities-tab-"] table,
  div[id^="overview-tab-"] table
) thead th{
  position: sticky; top: 0; z-index: 1;
  background: #f8f9fa !important; color: #000 !important;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  padding-block: var(--gap-sm);
}

/* Cellules typées / numériques */
:is(
  table[id^="aic-synth-"],
  table[id^="aic-labres-"],
  table[id^="aic-labsum-"],
  div[id^="overview-tab-"] table
) td.name{
  white-space: nowrap; font-weight: 600; text-align: center;
}
:is(
  table[id^="aic-synth-"],
  table[id^="aic-labres-"],
  table[id^="aic-labsum-"],
  div[id^="overview-tab-"] table
) td.num{ text-align: center; }

/* Mapping couleurs */
td.col-prepa { background: var(--col-prepa-bg) !important;  color: var(--col-prepa-fg) !important; }
td.col-retour{ background: var(--col-retour-bg) !important; color: var(--col-retour-fg) !important; }
td.col-total { background: var(--col-total-bg) !important; color: var(--col-total-fg) !important; }
td.col-hors  { background: var(--col-hors-bg)  !important; color: var(--col-hors-fg)  !important; }

/* Hover contextuel (respecte .table-hover) */
:is(
  table[id^="aic-synth-"].table-hover,
  table[id^="aic-labres-"].table-hover,
  table[id^="aic-labsum-"].table-hover,
  div[id^="overview-tab-"] table.table-hover
) tbody tr:hover > td.col-prepa { background: var(--col-prepa-hbg) !important;  color: var(--col-prepa-fg) !important; }
:is(
  table[id^="aic-synth-"].table-hover,
  table[id^="aic-labres-"].table-hover,
  table[id^="aic-labsum-"].table-hover,
  div[id^="overview-tab-"] table.table-hover
) tbody tr:hover > td.col-retour{ background: var(--col-retour-hbg) !important; color: var(--col-retour-fg) !important; }
:is(
  table[id^="aic-synth-"].table-hover,
  table[id^="aic-labres-"].table-hover,
  table[id^="aic-labsum-"].table-hover,
  div[id^="overview-tab-"] table.table-hover
) tbody tr:hover > td.col-total { background: var(--col-total-bg) !important; color: var(--col-total-fg) !important; }
:is(
  table[id^="aic-synth-"].table-hover,
  table[id^="aic-labres-"].table-hover
) tbody tr:hover > td.col-hors{ background:#6c757d !important; color:#fff !important; } /* spécial existant */

/* Pieds de tableau (moyennes / totaux) */
:is(table[id^="aic-synth-"], table[id^="aic-labres-"]) tfoot tr.row-avg  > td{
  background: rgba(var(--halo-amber),1) !important; color: #856000 !important; font-weight: 600;
}
:is(table[id^="aic-synth-"], table[id^="aic-labres-"], table[id^="aic-labsum-"]) tfoot tr.row-sum  > td{
  background: var(--col-total-bg) !important; color: var(--col-total-fg) !important; font-weight: 700;
}

/* Badges / annotations */
:is(
  table[id^="aic-synth-"],
  table[id^="aic-labres-"],
  table[id^="aic-labsum-"]
) .chip{
  display:block; font-size: .82em; background: #e9ecef; color: #000;
  border-radius: 10px; padding: 2px 6px;
}
:is(
  table[id^="aic-synth-"],
  table[id^="aic-labres-"],
  table[id^="aic-labsum-"],
  div[id^="overview-tab-"] table
) .sub{ font-size: .75em; opacity: .75; }
td.col-total .sub, td.col-hors .sub{ opacity: .9; }

/* Interactions (drill) — factorisées */
.cell-drill,
.cell-overview-drill{
  cursor: pointer;
  outline: none;
  transition: background-color .12s ease, box-shadow .12s ease, transform .05s ease;
  text-decoration: none;
}
.cell-drill:hover,
.cell-overview-drill:hover{ box-shadow: inset 0 0 0 9999px rgba(255,255,255,.08); text-decoration: underline dotted; }
.cell-drill:active,
.cell-overview-drill:active{ transform: scale(.995); }
.cell-drill:focus-visible,
.cell-overview-drill:focus-visible{ box-shadow: var(--focus-ring); }

/* Caption spécifique résultats labo */
table[id^="aic-labres-"] caption{
  caption-side: top;
  padding: .25rem 0 .5rem;
}

/* =============================================================================
   RÉSUMÉ GLOBAL EN CARDS
   ============================================================================= */

.aic-overview-card{
  margin-inline: auto;
}
.aic-overview-card .card-header{
  background: #f8f9fa;
  border-bottom: 1px solid var(--border-color);
}
.aic-overview-card .badge{ font-weight: 700; }

/* Items */
.aic-overview-card .list-group-item{
  display:flex; justify-content:space-between; align-items:baseline;
}
.aic-overview-card .name{ font-weight: 500; }

/* Valeurs (puces colorées) */
.aic-overview-card .num{
  justify-content:center;text-align:center;
  min-width:72px; padding:5px; border-radius:var(--radius-sm);
  font-variant-numeric:tabular-nums; line-height:1.2;
}
.aic-overview-card .num .sub{ display:block; margin-left:5px; font-size:.75em; opacity:.75; }

/* Mappage couleurs (réutilise tokens tables) */
.aic-overview-card .num.col-prepa  { background: var(--col-prepa-bg) !important;  color: var(--col-prepa-fg) !important; }
.aic-overview-card .num.col-retour { background: var(--col-retour-bg) !important; color: var(--col-retour-fg) !important; }
.aic-overview-card .num.col-total  { background: var(--col-total-bg) !important; color: var(--col-total-fg) !important; }

/* Interactions (réutilise .cell-overview-drill) */
.aic-overview-card .cell-overview-drill{ /* styles globaux déjà en place */ }

/* Wrap des cards — centrage horizontal */
div[id^="overview-tab-"] .d-flex.flex-wrap.gap-3{
  align-items: stretch;
  justify-content: center !important;
  margin-inline: auto;
}

/* Responsive : card pleine largeur sur très petit écran */
@media (max-width: 400px){
  .aic-overview-card{ width: 100%; min-width: 0; max-width: 100%; }
}

/* =============================================================================
   TABLES DANS LES ONGLETS OVERVIEW (règles additionnelles minimes)
   ============================================================================= */

div[id^="overview-tab-"] table :is(thead th, tbody td){
  vertical-align: middle;
  padding-block: var(--gap-sm);
}

/* =============================================================================
   MODAL DÉTAILS
   ============================================================================= */

#details-modal .modal-body{ font-size: .9rem; }
#details-modal .table-responsive{
  max-height: min(70vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#details-modal table{ font-size: var(--fs-table-sm); }
#details-modal table :is(th, td){ text-align: center; }
#details-modal thead th{
  position: sticky; top: 0; z-index: 3;
  background: #f8f9fa; border-bottom: 1px solid var(--border-color);
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
#details-meta{ color: #6c757d; }
.link-dossier{ font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.link-dossier:hover{ text-decoration-thickness: 2px; }

/* Pagination */
.pagination{ gap: var(--gap-xs); }

/* Skip links a11y */
.skip-link{
  position: fixed; left:50%; top:.5rem; transform: translate(-50%, -200%);
  z-index:11000; padding:.5rem .75rem; border-radius:.5rem; font-weight:700;
  background:#000; color:#fff; text-decoration:none; box-shadow: var(--shadow-strong);
}
.skip-link:focus{ transform: translate(-50%, 0); outline: none; }

/* Tabs service */
#service-tabs{ gap:.5rem; justify-content:center; width:100%; }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 576px){
  :is(table[id^="aic-synth-"], table[id^="aic-labres-"]){ font-size: var(--fs-table-sm); }
  #service-tabs{ row-gap: .5rem; }
}

td.col-obj .obj-cell {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

td.col-obj .obj-main {
  font-weight: 600;
}

td.col-obj .obj-label {
  opacity: 0.7;
  margin-right: 0.25rem;
}

td.col-obj .obj-unit {
  opacity: 0.7;
  margin-left: 0.25rem;
  font-size: 0.85em;
}

td.col-obj .obj-sub {
  font-size: 0.8em;
  margin-top: 0.15rem;
}

/* Statuts KPI */
.kpi-great   { color: #1b7f2a; background:#FFF; padding:2px; border-radius: var(--radius-sm);opacity:1!important;}  /* vert foncé */
.kpi-ok      { color: #2f9e44; background:#FFF; padding:2px; border-radius: var(--radius-sm);opacity:1!important;}  /* vert */
.kpi-watch   { color: #e69500; background:#FFF; padding:2px; border-radius: var(--radius-sm);opacity:1!important;}  /* orange */
.kpi-bad     { color: #c92a2a; background:#FFF; padding:2px; border-radius: var(--radius-sm);opacity:1!important;}  /* rouge */
.kpi-neutral { color: #666; background:#FFF; padding:2px; border-radius: var(--radius-sm);opacity:1!important;}