/* ========== Design System : Gardes pharmaceutiques ========== */
:root{
  --bg: #f8fafc;             /* slate-50 */
  --surface: #ffffff;         /* white */
  --text: #0f172a;            /* slate-900 */
  --muted: #64748b;           /* slate-500 */
  --line: #e2e8f0;            /* slate-200 */
  --brand: #059669;           /* emerald-600 */
  --brand-weak: #ecfdf5;      /* emerald-50 */
  --brand-strong: #047857;    /* emerald-700 */
  --warn: #f59e0b;            /* amber-500 */
  --danger: #ef4444;          /* red-500 */
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(2,6,23,.06), 0 8px 24px rgba(2,6,23,.06);
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --space: 24px;              /* gutter principal */
  --sidebar-w: 240px;
  --degarde: #0b7530;
  --degardewe: #94267c;
  --degardefer: #282f91;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Topbar */
.topbar{
  position: sticky; top:0; z-index: 40;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid var(--line);
}
.topbar__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px var(--space);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.brand__logo{
  width:36px; height:36px; border-radius:12px; background: var(--brand);
}
.brand__title{ font-weight: 600; font-size: 16px; line-height:1; }
.brand__subtitle{ color: var(--muted); font-size:12px; margin-top:2px; }

/* Search + actions */
.search{
  position: relative; display:none;
}
@media (min-width: 900px){
  .search{ display:block; }
}
.search input{
  width: 340px; max-width: 42vw;
  border:1px solid var(--line);
  background: #f1f5f9; /* slate-100 */
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  outline: none;
}
.search input:focus{
  background: #ffffff;
  border-color: var(--brand);
}
.topbar__actions{ display:flex; align-items:center; gap:8px; }

/* Page grid */
.page{
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space);
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: var(--space);
  align-items: start;

}

@media (min-width: 1000px){
  .page{
    grid-template-columns: var(--sidebar-w) 1fr;
  }
}

/* Sidebar */
.sidebar{
  display:none;
}
@media (min-width: 1000px){
  .sidebar{
    display:block;
    border:1px solid var(--line);
    background: var(--surface);
    border-radius: var(--radius);
    padding: 8px;
    height: fit-content;
  }
}
.nav a, .nav button{
  display:block; width:100%; text-align:left;
  border:0; background: transparent;
  padding:10px 12px; border-radius:12px;
  color:#334155; /* slate-700 */
  font-size:14px; cursor:pointer;
}
.nav a:hover, .nav button:hover{ background:#f8fafc; }
.nav .active{ background: var(--brand-weak); color: var(--brand-strong); }
.nav .divider{ height:1px; background: var(--line); margin:8px 0; }


/* ====== Components ====== */
.kpis{
  display:grid; gap:16px;
  grid-template-columns: 1fr;
}
@media (min-width: 800px){
  .kpis{ grid-template-columns: repeat(3, 1fr); }
}
.card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
}
.kpi__title{ text-transform: uppercase; letter-spacing:.03em; font-size:12px; color: var(--muted); }
.kpi__value{ margin-top:4px; font-weight: 700; font-size: 22px; }
.kpi__hint{ font-size:12px; color: var(--muted); }

.panel{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); }
.panel__head{
  padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:8px;
  border-bottom:1px solid var(--line);
}
.panel__title{ font-weight:600; font-size:14px; color:#334155; }
.panel__body{ padding:16px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 12px; border-radius:12px; border:1px solid var(--line);
  background:#fff; font-size:12px; cursor:pointer;
}
.btn:hover{ background:#f8fafc; }
.btn--primary{
  background: var(--brand); color:#fff; border-color: var(--brand);
}
.btn--primary:hover{ background: var(--brand-strong); }

.btn--ghost{
  background: transparent; border-color: var(--line);
}
.actions{ display:flex; align-items:center; gap:8px; }

.quickgrid{
  display:grid; gap:8px; grid-template-columns: 1fr;
}
.quickgrid .btn{ width: 100%; }

/* Tables */
.table{
  width:100%; border-collapse: collapse; font-size:14px;
}
.table thead th{
  text-align:left; padding:10px; color: var(--muted);
  background: #f8fafc; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-weight:600; font-size:12px;
}
.table tbody td{ padding:10px; border-bottom:1px solid var(--line); }
.table .cell-right{ text-align:right; white-space: nowrap; }



/* Calendar placeholder */
.calendar{
  display:grid; grid-template-columns: repeat(7, 1fr); gap:8px;
  border:1px solid var(--line); border-radius: var(--radius); padding:12px;
}
.calendar .day{
  height: 90px; border:1px solid var(--line); border-radius: 10px; background:#f8fafc; padding:6px;
  display:flex; flex-direction:column; gap:6px;
}
.calendar .day .num{ font-size:10px; color: var(--muted); }
.calendar .day .pill{ flex:1; border-radius: 8px; background: #d1fae5; } /* emerald-100 */

/* Map placeholder */
.map{ aspect-ratio: 16/9; border:1px solid var(--line); border-radius: 12px; background:#f1f5f9; }

/* Footer */
.footer{ text-align:center; color: var(--muted); font-size:12px; padding: 24px 0; }

/* Utilities */
.container{ max-width:1200px; margin:0 auto; }
.hide-sm{ display:none; } @media (min-width: 900px){ .hide-sm{ display:block; } }
.scroll-x{ 
  overflow-x:auto; 
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.scroll-x table {
  min-width: max-content; /* <-- empêche le table de forcer un wrap foireux */
}

/* Print (rapports/affiches, minimal) */
@media print{
  .sidebar, .topbar { display:none !important; }
  .page{ grid-template-columns: 1fr; padding: 0; }
  .panel{ box-shadow: none; border-color:#ddd; }
}


/* --- Layout forcé en flex : sidebar fixe à gauche, main fluide --- */
.page{
  display: flex !important;
  align-items: flex-start;
  gap: var(--space);
  padding: var(--space);
  margin: 0 !important;
  max-width: none !important;   /* tue tout centrage global résiduel */
  width: 100% !important;
}

.sidebar{
  display: block !important;
  flex: 0 0 var(--sidebar-w);   /* largeur fixe */
  width: var(--sidebar-w) !important;
  align-self: flex-start;
  position: sticky; top: 16px;  /* optionnel : sidebar collée en scroll */
}

.main{
  flex: 1 1 auto;               /* prend tout l’espace restant */
  min-width: 0;                 /* évite les débordements de tableaux */
  width: auto !important;
}

/* Si tu veux limiter la largeur du contenu sans toucher à la sidebar */
.main__inner{ max-width: 1200px; margin: 0 auto; width: 100%; }

.sidebar .nav a,
.sidebar .nav button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;

  border: 0;
  background: transparent;
  color: #334155; /* slate-700 */
  text-decoration: none;       /* enlève souligné */
}

.sidebar .nav a:hover,
.sidebar .nav button:hover {
  background: #f8fafc;
  color: #0f172a;
}

.sidebar .nav .active {
  background: var(--brand-weak);
  color: var(--brand-strong);
  font-weight: 600;
}

.sidebar .nav .divider {
  height: 1px;
  background: var(--line);
  margin: 8px 0;
}

/* Liens globaux */
a {
  color: var(--brand);           /* vert emerald */
  text-decoration: none;         /* pas souligné par défaut */
}

a:hover {
  color: var(--brand-strong);    /* plus foncé au survol */
  text-decoration: underline;    /* underline seulement au hover */
}

/* Liens dans .btn déjà stylés → on ne change pas */
.btn a { color: inherit; text-decoration: none; }

.tag{
  display:inline-block;
  padding:2px 8px;
  font-size:12px;
  background: var(--brand-weak);
  color: var(--brand-strong);
  border-radius: 999px;
  border:1px solid #a7f3d0; /* emerald-200 */
}

.tag.tag--on  { 
  background: #ecfdf5;
  color:#065f46; 
  border-color:#a7f3d0; 
}  /* vert soft */

.tag.tag--off { 
  background: #fee2e2;
  color:#991b1b; 
  border-color:#fecaca; 
}  /* rouge soft */

/* --- Modal CSV : autoriser le shrink des conteneurs flex/grid --- */
#csv-modal > div {           /* la "carte" de la modale */
  display: flex;
  flex-direction: column;
  min-width: 0;              /* clé 1 */
  max-height: 90vh;
  width: min(95vw, 900px);
}
#csv-form,                   /* ton <form> dans la modale */
#csv-result { 
  min-width: 0;              /* clé 2 */
}

/* --- Conteneur de scroll horizontal --- */
.csv-scroll{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;          /* barre horizontale */
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}

/* --- “Force large” : la table peut dépasser pour déclencher le scroll --- */
.csv-scroll .csv-wide{
  display: inline-block;     /* se dimensionne sur son contenu */
  min-width: max-content;    /* largeur = somme des colonnes */
}

.csv-scroll .csv-wide .table{
  width: auto !important;    /* override table{width:100%} global */
  table-layout: auto;        /* pas de compression forcée */
}

/* éviter les wraps qui cassent la largeur et font sauter le scroll */
.csv-scroll .table th,
.csv-scroll .table td{
  white-space: nowrap;
}

#csv-modal > div {
  max-height: none;   /* supprime la limite */
  height: auto;       /* prend la hauteur du contenu */
}



#tbl-pharma td.col-name,
#tbl-pharma td.col-owner {
  max-width: 250px;      /* ajuste la largeur cible */
  white-space: normal;   /* autorise le retour à la ligne */
  word-break: break-word;/* casse les mots longs si besoin */
}

/* à la fin de style.css si tu veux un rendu propre */
.field{display:flex;flex-direction:column;gap:6px}
.field select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.field__label{font-weight:600}

/* Bouton primaire actif */
.btn.btn--primary {
  background: #2563eb;   /* bleu vif */
  color: #fff;
  cursor: pointer;
  opacity: 1;
  transition: background 0.2s, opacity 0.2s;
}
.btn.btn--primary:hover:not(:disabled) {
  background: #1e40af;   /* bleu un peu plus foncé au hover */
}

/* Bouton primaire désactivé */
.btn.btn--primary:disabled {
  background: #9ca3af;   /* gris neutre */
  color: #e5e7eb;        /* texte gris clair */
  cursor: not-allowed;
  opacity: 0.7;
}

.user-menu { position: relative; }
.user-menu__dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 180px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08); padding: 6px;
}
.user-menu__dropdown .menu-item {
  display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: #111827;
}
.user-menu__dropdown .menu-item:hover { background: #f3f4f6; }

/* Planning table */
.table--planning { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }

.table--planning thead th,
.table--planning tbody th,
.table--planning td {
  border: 1px solid var(--line);
}

.table--planning thead th {
  position: sticky;
  z-index: 5;               /* au-dessus du tbody */
  background: #fff;         /* masque le contenu dessous */
}



/* Ces 3 variables seront définies en JS aux hauteurs réelles en px */
.table--planning { --h-months: 0px; --h-days: 0px; --h-jn: 0px; }

/* Position des 3 rangées */
.table--planning thead tr.months th { top: 0; }
.table--planning thead tr.days   th { top: var(--h-months); }
.table--planning thead tr.jn     th { top: calc(var(--h-months) + var(--h-days)); }

/* On fige la ligne pour éviter les variations : padding / line-height maîtrisés */
.table--planning thead th { padding: 4px 6px; line-height: 1.2; }
.table--planning thead tr.months th { font-weight: 600; }


.table--planning .pharma-cell { padding: 6px 8px; }
.table--planning .ph-name { line-height: 1.1; }
.table--planning .ph-meta { color: var(--muted); }

.table--planning .cell { width: 28px; height: 28px; padding: 0; }
.table--planning .cell.duty { cursor: pointer; background: #fff; }
.table--planning .cell.duty.on { background: var(--degarde); }/*outline: 2px solid #10B98122; } /* vert clair */
.table--planning .cell.duty.on.is-weekend { background: var(--degardewe); }/*outline: 2px solid var(--degardewe); }*/
.table--planning .cell.duty.on.is-ferie { background: var(--degardefer); }/*outline: 2px solid var(--degardefer); }*/

.table--planning .is-weekend { background-image: linear-gradient(180deg, var(--degardewe) 0, var(--degardewe) 100%); }
.table--planning .is-ferie { background-image: linear-gradient(180deg, var(--degardefer) 0, var(--degardefer) 100%); }

.legend { display:inline-block; width:14px; height:14px; border:1px solid var(--line); vertical-align:middle; margin-right:4px; }
.legend--on  { background:var(--degarde); border-color:#10B98155; }
.legend--we  { background:var(--degardewe); }
.legend--hol { background:var(--degardefer); }


.th-tot { font-size:12px; color:#334155; }
.row-totals { text-align:right; font-variant-numeric: tabular-nums; }
.row-totals > span { display:inline-block; min-width: 28px; text-align:right; }
#pl-coltotals th, #pl-coltotals td { font-weight:600; background:#f8fafc; position: sticky; bottom: 0; z-index: 4; }

#sector-totals .line { display:flex; justify-content:space-between; padding:4px 0; }
#sector-totals .name { color:#334155; }
#sector-totals .val  { font-variant-numeric: tabular-nums; }

#pl-coltotals-foot tr th,
#pl-coltotals-foot tr td {
  position: sticky;
  bottom: 0;
  background: #f8fafc;
  border-top: 2px solid var(--line);
}
#pl-coltotals-foot tr + tr th,
#pl-coltotals-foot tr + tr td {
  bottom: auto; /* seules les dernières lignes restent "devant" selon ton goût */
}
#pl-coltotals-foot .sticky-left { left: 0; background:#f8fafc; }

/* ---- Variables rapides pour ajuster les tailles ---- */
:root{
  --cell-size: 32px;        /* largeur/hauteur d’une case planning */
  --pharma-col: 200px;      /* largeur colonne “Pharmacie” */
  --tot-col: 32px;          /* largeur des cellules de totaux de ligne */
  --thead-row-h: 32px;      /* hauteur de ligne du THEAD */
}

/* Conteneur de scroll (vertical + horizontal) */
.scroll-plate{
  overflow: auto;
  max-width: 100%;
  max-height: calc(100vh - 220px); /* ajuste si besoin */
  border: 1px solid var(--line);
  border-radius: 12px;
}




/* Colonne pharmacie collante (gauche) et totaux (droite) */
.table--planning .sticky-left  { position: sticky; left: 0; z-index: 6; background: #fff; min-width: 180px; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table--planning .sticky-right { position: sticky; background:#fff; z-index: 6; }
.table--planning tr > .sticky-right:nth-last-child(8) { right: calc(40px * 7); }
.table--planning tr > .sticky-right:nth-last-child(7) { right: calc(40px * 6); }
.table--planning tr > .sticky-right:nth-last-child(6) { right: calc(40px * 5); }
.table--planning tr > .sticky-right:nth-last-child(5) { right: calc(40px * 4); }
.table--planning tr > .sticky-right:nth-last-child(4) { right: calc(40px * 3); }
.table--planning tr > .sticky-right:nth-last-child(3) { right: calc(40px * 2); }
.table--planning tr > .sticky-right:nth-last-child(2) { right: 40px; }
.table--planning tr > .sticky-right:nth-last-child(1) { right: 0; }



/* Cases planning plus larges */
.table--planning .cell { width: var(--cell-size); height: var(--cell-size); padding: 0; cursor: pointer; }
.table--planning .cell.on { background: #DCFCE7; outline: 2px solid #10B98122; }


/* Pied de table (totaux par colonne / par secteur) collant en bas du plateau */
#pl-coltotals-foot tr th,
#pl-coltotals-foot tr td {
  position: sticky;
  bottom: 0;
  background: #f8fafc;
  border-top: 2px solid var(--line);
}
#pl-coltotals-foot .sticky-left { left: 0; background:#f0f4f8; }


:root{
  --cell-size: 28px;       /* largeur/hauteur d’une case planning */
  --pharma-col: 180px;     /* largeur colonne “Pharmacie” (nom + commune) */
  --tot-col: 40px;         /* largeur colonnes totaux de fin de ligne */
  --thead-row-h: 28px;     /* hauteur de ligne du THEAD */
}


/* Totaux de fin de ligne */
.table--planning .th-tot,
.table--planning .row-totals {
  min-width: var(--tot-col);
  max-width: var(--tot-col);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

/* Niveaux d'empilement (du plus bas au plus haut) :
   10 = tbody sticky bottom (tfoot)
   20 = thead (bandes mois/jour/JN)
   30 = sticky-left/right du tbody
   40 = sticky-left/right du THEAD (intersections)
*/

/* THEAD (bandes supérieures) */
.table--planning thead th{
  position: sticky;
  background: #fff;
  z-index: 20;               /* bande header */
}

/* Colonne gauche (toutes lignes) */
.table--planning .sticky-left {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 30;               /* au-dessus des cellules normales */
}

/* Colonne droite (totaux de ligne) */
.table--planning .sticky-right {
  position: sticky;
  background: #fff;
  z-index: 30;               /* au-dessus des cellules normales */
}

/* INTERSECTIONS : header + gauche/droite -> z-index au-dessus de tout */
.table--planning thead tr.months .sticky-left,
.table--planning thead tr.days   .sticky-left,
.table--planning thead tr.jn     .sticky-left,
.table--planning thead tr.months .sticky-right,
.table--planning thead tr.days   .sticky-right,
.table--planning thead tr.jn     .sticky-right,
.table--planning thead .sticky-left {
  z-index: 40;               /* plus haut que le reste */
}

/* Pied de tableau collant (totaux par colonne/secteur) */
#pl-coltotals-foot tr,
#pl-coltotals-foot tr td {
  position: sticky;
  bottom: 0;
  background: #f8fafc;
  z-index: 32;               /* sous les headers/left/right */
  border-top: 2px solid var(--line);
}

/* S'assurer que les stickies masquent le contenu derrière */
.table--planning thead th,
.table--planning .sticky-left,
.table--planning .sticky-right,
#pl-coltotals-foot tr th,
#pl-coltotals-foot tr td {
  background-clip: padding-box; /* évite des effets de bord avec les bordures */
}


/* panel plein large pour le planning uniquement */
.panel--full{ margin-left: 0; margin-right: 0; }

main .panel--full{ inline-size: 100%; }

/* Footer sticky de base (déjà en place) */
#pl-coltotals-foot tr th,
#pl-coltotals-foot tr td {
  position: sticky;
  bottom: 0;
  background: #f8fafc;
  z-index: 10;
  border-top: 2px solid var(--line);
}
#pl-coltotals-foot .sticky-left { left: 0; z-index: 12; background:#f0f4f8; }

/* La ligne "Total / colonne" (placée EN DERNIER) passe devant les autres */
#pl-coltotals-foot .row-coltotal-all td {
  z-index: 12; /* plus haut que 10 */
}
#pl-coltotals-foot .row-coltotal-all th{
  z-index: 32; /* plus haut que 10 */
}

/*.panel--full{width:100%;max-width:none;}*/
.wb-grid{display:grid;grid-template-columns:repeat(3,minmax(280px,1fr));gap:12px;}
@media (max-width:1200px){.wb-grid{grid-template-columns:repeat(2,minmax(280px,1fr));}}
@media (max-width:800px){.wb-grid{grid-template-columns:1fr;}}
.wb-card{border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;flex-direction:column;}
.wb-card__head{padding:10px 12px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.wb-card__title{margin:0;font-size:14px;}
.wb-status{font-size:12px;color:#334155;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:#fff;}
.wb-ok{color:#065f46;background:#ecfdf5;border-color:#a7f3d0;}
.wb-warn{color:#92400e;background:#fffbeb;border-color:#fde68a;}
.wb-err{color:#991b1b;background:#fee2e2;border-color:#fecaca;}
.wb-card__body{padding:12px;display:grid;gap:6px;}
.wb-metrics{margin:0;padding-left:16px;font-size:13px;color:#334155;}
.wb-card__foot{padding:10px 12px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;}
.cell-right{text-align:right;}

.help-panel {
  position: fixed; inset: 0 0 0 auto; width: min(480px, 90vw);
  background: #fff; box-shadow: -8px 0 24px rgba(0,0,0,.15);
  z-index: 1000; transform: translateX(100%); transition: transform .25s ease;
}
.help-panel[aria-hidden="false"] { transform: translateX(0); }
.help-panel[hidden] { display: none; }
.help-panel__inner { display: flex; flex-direction: column; height: 100%; }
.help-panel__header { display:flex; align-items:center; justify-content:space-between; padding: 1rem; border-bottom: 1px solid #eee; }
.help-content { overflow:auto; padding: 1rem; line-height: 1.5; }
.help-close { font-size: 1.25rem; background: none; border: 0; cursor: pointer; }
.btn-help { /* style ton bouton */ }

.expert-mode-fields {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #ddd;
}