/*
 * L'administration : une console de travail, au dessin du superadmin de PharmAssistant
 * (/opt/pharmassistant/frontend/src/components/superadmin/ui.tsx et Rail.tsx) et aux couleurs d'apprendre à séduire.
 *
 * Page blanche, rail rose aux angles ronds posé à côté, familles d'espaces en cartes blanches, entrées en pilules,
 * l'entrée active au rouge du site. Cartes blanches à filet de 1,5 px, sans ombre ; repères en tuiles teintées
 * (rose et citron en alternance), chiffre en DM Serif Display ; tableaux denses, en-têtes en petites capitales.
 * Le rouge du site (--accent) marque l'espace, la sélection et l'action principale ; le rouge d'alerte, l'ambre
 * et le vert gardent leur sens. Le mode sombre suit le système, ou le choix fait par le bouton (allure.js).
 *
 * Les anciens noms de couleurs (--prune, --corail, --lilas, --safran) restent définis pour les règles qui s'en servent.
 */
@font-face { font-family: "DM Sans"; src: url("/dm-sans.woff2") format("woff2"); font-weight: 400 800; font-display: swap }
@font-face { font-family: "DM Serif Display"; src: url("/dm-serif.woff2") format("woff2"); font-weight: 400; font-display: swap }

:root {
	color-scheme: light;
	--encre: #23201C; --texte: #4F4741; --sourd: #6E655D;
	--fond: #fff; --carte: #fff;
	--filet: #F0D9D2; --filet-fin: #F5E6E1; --commande: #DCCBC4;
	--rail: #FBE9E4; --tuile: #FBE9E4; --citron: #FFF3C2; --doux: #FDF3F0; --survol: #FDF1EE;
	--accent: #8E1B2E; --accent-fort: #6E1222; --accent-fond: #F9E0E3; --sur-accent: #fff;
	--alerte: #A4221B; --alerte-fond: #FDECEC; --alerte-filet: #EDC2BE;
	--bon: #17693F; --bon-fond: #DDF1D6;
	--ambre: #8A6116; --ambre-fond: #FDF3DC;
	--gris-fond: #F2EDEA;
	--serie: #8E1B2E; --serie-2: #E3A4AE;
	--voile: rgba(35, 32, 28, .45);
	--prune: var(--accent); --corail: var(--accent); --lilas: var(--tuile); --safran: var(--citron);
	--titre: "DM Serif Display", Georgia, serif;
	font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5; color: var(--texte);
}
/* Le sombre : celui du système, sauf choix contraire ; puis le choix explicite. Mêmes valeurs dans les deux blocs. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--encre: #F7F1EC; --texte: #D6CCC5; --sourd: #A59A92;
		--fond: #161211; --carte: #1F1A18;
		--filet: rgba(255, 255, 255, .12); --filet-fin: rgba(255, 255, 255, .07); --commande: rgba(255, 255, 255, .2);
		--rail: #261D1B; --tuile: #33262A; --citron: #2E2A18; --doux: rgba(255, 255, 255, .05); --survol: rgba(255, 255, 255, .04);
		--accent: #F29DAA; --accent-fort: #F8BFC8; --accent-fond: rgba(179, 38, 58, .26); --sur-accent: #2A0C12;
		--alerte: #F4A5A0; --alerte-fond: rgba(240, 143, 143, .14); --alerte-filet: rgba(240, 143, 143, .35);
		--bon: #8FD37F; --bon-fond: rgba(143, 211, 127, .15);
		--ambre: #E9C77E; --ambre-fond: rgba(227, 188, 107, .15);
		--gris-fond: rgba(255, 255, 255, .09);
		--serie: #F29DAA; --serie-2: #8E3B48;
		--voile: rgba(0, 0, 0, .6);
	}
}
:root[data-theme="dark"] {
	color-scheme: dark;
	--encre: #F7F1EC; --texte: #D6CCC5; --sourd: #A59A92;
	--fond: #161211; --carte: #1F1A18;
	--filet: rgba(255, 255, 255, .12); --filet-fin: rgba(255, 255, 255, .07); --commande: rgba(255, 255, 255, .2);
	--rail: #261D1B; --tuile: #33262A; --citron: #2E2A18; --doux: rgba(255, 255, 255, .05); --survol: rgba(255, 255, 255, .04);
	--accent: #F29DAA; --accent-fort: #F8BFC8; --accent-fond: rgba(179, 38, 58, .26); --sur-accent: #2A0C12;
	--alerte: #F4A5A0; --alerte-fond: rgba(240, 143, 143, .14); --alerte-filet: rgba(240, 143, 143, .35);
	--bon: #8FD37F; --bon-fond: rgba(143, 211, 127, .15);
	--ambre: #E9C77E; --ambre-fond: rgba(227, 188, 107, .15);
	--gris-fond: rgba(255, 255, 255, .09);
	--serie: #F29DAA; --serie-2: #8E3B48;
	--voile: rgba(0, 0, 0, .6);
}
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--fond) }
[hidden] { display: none !important }
h1, h2 { font-family: var(--titre); font-weight: 400; letter-spacing: -.01em; color: var(--encre); margin: 0 }
h1 { font-size: 32px; line-height: 1.08 } h2 { font-size: 20px; line-height: 1.2 } p { margin: 0 }
a { color: var(--accent) } a:hover { color: var(--accent-fort) }
svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
button, input, select, textarea { font: inherit; color: inherit }

/* Boutons en pilule, filet de 1,5 px sur toutes les variantes (un bouton qui change de variante ne change pas de largeur). */
button { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 15px; border-radius: 999px;
	border: 1.5px solid var(--commande); background: var(--carte); color: var(--encre); font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: background .15s, border-color .15s, color .15s }
button:hover { background: var(--doux); border-color: var(--accent); color: var(--accent) }
button:disabled { opacity: .5; cursor: not-allowed }
button.principal { background: var(--accent); border-color: var(--accent); color: var(--sur-accent) }
button.principal:hover { background: var(--accent-fort); border-color: var(--accent-fort); color: var(--sur-accent) }
button.danger { color: var(--alerte); border-color: var(--alerte-filet) }
button.danger:hover { background: var(--alerte-fond); border-color: var(--alerte); color: var(--alerte) }
button.icone { width: 38px; min-height: 38px; padding: 0; border-color: transparent; background: none; color: var(--texte) }
button.icone:hover { background: var(--doux); color: var(--accent) }
/* Le bouton de thème montre la lune en clair, le soleil en sombre. */
.icone-soleil { display: none }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icone-soleil { display: block } :root:not([data-theme="light"]) .icone-lune { display: none } }
:root[data-theme="dark"] .icone-soleil { display: block } :root[data-theme="dark"] .icone-lune { display: none }

/* Champs : angle de 12 px, filet de commande, anneau à l'accent au focus. */
input, select, textarea { min-height: 38px; border: 1px solid var(--commande); border-radius: 12px; padding: 6px 12px; background: var(--carte); color: var(--encre); font-size: 14px; font-weight: 600; max-width: 100% }
input::placeholder { color: var(--sourd); font-weight: 400 }
input[type="checkbox"] { min-height: 0; width: 18px; height: 18px; accent-color: var(--accent) }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-fond) }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
label { color: var(--texte); font-size: 13px; font-weight: 700 }

/* La porte. */
.porte { max-width: 380px; margin: 12vh auto; margin-inline: max(16px, calc(50% - 190px)); background: var(--carte); border: 1.5px solid var(--filet); border-radius: 24px; padding: 30px 28px; display: flex; flex-direction: column; gap: 14px }
.porte__marque { width: 44px; height: 44px; border-radius: 13px; background: var(--rail); display: grid; place-items: center }
.porte__marque svg { width: 26px; height: 26px; fill: var(--accent); stroke: none }
.porte h1 { font-size: 30px }
.porte > p { color: var(--sourd) }
.porte label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 800 }
.porte button { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); min-height: 42px; font-size: 14px }
.porte button:hover { background: var(--accent-fort); color: var(--sur-accent) }
.erreur { color: var(--alerte); font-weight: 700 }

/* La coque : rail rose aux angles ronds, posé à 12 px des bords, et la page blanche. */
.coque { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; background: var(--fond) }
.rail { background: var(--rail); margin: 12px 0 12px 12px; border-radius: 28px; display: flex; flex-direction: column; position: sticky; top: 12px; height: calc(100vh - 24px); overflow: hidden; z-index: 50 }
.rail__marque { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 5px; padding: 16px 16px 12px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--encre); line-height: 1.1 }
.rail__marque span { grid-row: span 2; width: 38px; height: 38px; border-radius: 11px; background: var(--carte); display: grid; place-items: center }
.rail__marque span svg { width: 22px; height: 22px; fill: var(--accent); stroke: none }
.rail__marque small { justify-self: start; display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; background: var(--accent-fond); color: var(--accent); font-size: 11.5px; font-weight: 800; letter-spacing: 0 }
[data-rail] { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 8px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin }
.rail__famille { background: var(--carte); border-radius: 20px; padding: 6px; display: flex; flex-direction: column }
.rail__groupe { padding: 2px 10px 0; font-size: 12.5px; line-height: 20px; font-weight: 800; color: var(--accent) }
.rail a { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: 999px; text-decoration: none; color: var(--texte); font-size: 14px; font-weight: 700 }
.rail a:hover { background: var(--rail); color: var(--encre) }
.rail a[aria-current] { background: var(--accent-fond); color: var(--accent); font-weight: 800 }
/* Compteur d'un espace (à traiter, erreurs) : h("span", { class: "rail__badge" }, n) dans le lien ; --alerte en rouge plein. */
.rail__badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--rail); color: var(--texte); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums }
.rail__badge--alerte { background: #A4221B; color: #fff }
.rail__pied { margin: 0 12px 12px; background: var(--carte); border-radius: 20px; padding: 6px 8px 6px 14px; display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; color: var(--encre) }
.rail__pied span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rail__pied button:not(.icone) { min-height: 32px; padding: 0 12px; font-size: 13px; border-color: transparent; background: none; color: var(--accent) }
.rail__pied button:not(.icone):hover { background: var(--rail) }
.rail__pied button.icone { width: 34px; min-height: 34px }
.haut, .voile { display: none }
.page { width: 100%; max-width: 1400px; margin: 0 auto; padding: 24px clamp(16px, 3vw, 32px) 64px; display: flex; flex-direction: column; gap: 24px; min-width: 0 }

/* Téléphone et tablette : barre du haut (menu, nom de l'espace, thème), rail en tiroir sur un voile. */
@media (max-width: 820px) {
	.coque { display: block }
	.haut { display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 40; height: 56px; padding: 0 8px; padding-top: env(safe-area-inset-top); box-sizing: content-box; background: var(--carte); border-bottom: 1.5px solid var(--filet) }
	.haut__titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; color: var(--encre) }
	.haut button.icone { color: var(--encre) }
	.rail { position: fixed; inset: 0 auto 0 0; margin: 0; width: min(86vw, 320px); height: 100%; border-radius: 0 28px 28px 0; transform: translateX(-105%); visibility: hidden; transition: transform .22s ease, visibility 0s .22s; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 30px 80px -20px rgba(35, 32, 28, .5) }
	.menu-ouvert .rail { transform: none; visibility: visible; transition: transform .22s ease }
	.rail a { min-height: 46px; font-size: 15px }
	.voile { display: block; position: fixed; inset: 0; z-index: 45; background: var(--voile) }
	.voile[hidden] { display: none }
	.page { padding: 18px 16px 48px; gap: 18px }
	h1 { font-size: 28px }
}
@media (prefers-reduced-motion: reduce) { .rail, .menu-ouvert .rail { transition: none } }

/* Les états : chargement (aria-busy posé par montrer()), vide, erreur. */
.page[aria-busy="true"]::before { content: ""; position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat; background-size: 40% 100%; animation: charge 1.1s linear infinite }
.page[aria-busy="true"] > * { opacity: .55; transition: opacity .2s .15s }
.page[aria-busy="true"]:empty::after { content: "Chargement…"; display: block; padding: 96px 0; text-align: center; color: var(--sourd); font-size: 14px; font-weight: 700 }
@keyframes charge { from { background-position: -40% 0 } to { background-position: 140% 0 } }
@media (prefers-reduced-motion: reduce) { .page[aria-busy="true"]::before { animation: none; background: var(--accent); opacity: .5 } }
.vide { padding: 32px 16px; text-align: center; color: var(--sourd); font-size: 14px; font-weight: 700; border-radius: 16px; background: var(--doux) }

/* En-tête de page : surtitre (le groupe du rail, posé par allure.js), titre, phrase, outils à droite. */
.tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px }
.tete > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 6px }
.tete > div:first-child::before { content: var(--groupe, ""); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--sourd) }
.tete p { color: var(--sourd); font-size: 14px; line-height: 1.55; max-width: 90ch }
.outils { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.outils label { display: inline-flex; align-items: center; gap: 6px }

/* Cartes blanches à filet de 1,5 px ; un tableau y va bord à bord. */
.carte { background: var(--carte); border: 1.5px solid var(--filet); border-radius: 20px; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.carte > .tableau { margin: 0 -20px -8px }
.carte > .tableau:first-child { margin-top: -6px }

/* Repères : tuiles teintées sans filet, rose et citron en alternance, libellé au-dessus du chiffre. */
.reperes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 14px }
.repere { border-radius: 20px; padding: 16px; background: var(--tuile); display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; min-width: 0 }
.repere:nth-child(even) { background: var(--citron) }
.repere strong { display: block; font-family: var(--titre); font-weight: 400; font-size: 28px; line-height: 1; color: var(--encre); font-variant-numeric: tabular-nums; overflow-wrap: anywhere }
.repere span { font-size: 13px; font-weight: 700; color: var(--texte); line-height: 1.35 }
.repere--rouge strong { color: var(--alerte) } .repere--vert strong { color: var(--bon) }

/* Bandeaux : fond teinté, pastille d'icône à gauche ; ambre par défaut (à traiter, rappel), rouge pour une erreur. */
.bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; border-radius: 16px; padding: 12px 16px; background: var(--ambre-fond); color: var(--encre); font-size: 14px; font-weight: 600; line-height: 1.5 }
.bandeau::before { content: "!"; flex: 0 0 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ambre); color: var(--carte); font-size: 12px; font-weight: 800 }
.bandeau > span:first-of-type { flex: 1; min-width: 200px }
.bandeau--rouge { background: var(--alerte-fond) }
.bandeau--rouge::before { background: var(--alerte) }
.bandeau--vert { background: var(--bon-fond) } .bandeau--vert::before { content: "✓"; background: var(--bon) }
.note { color: var(--sourd); font-size: 13px; line-height: 1.55 }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px }

/*
 * Tableaux denses : en-têtes en petites capitales, collants en haut du cadre ; un tableau long (plus de quinze
 * lignes) défile dans son cadre pour que l'en-tête reste visible. Sur écran étroit, le cadre défile à
 * l'horizontale (jamais la page) et une ombre au bord dit de quel côté il reste des colonnes.
 */
.tableau { overflow: auto; scrollbar-width: thin; overscroll-behavior-x: contain;
	background:
		linear-gradient(to right, var(--carte) 40%, transparent) left center / 28px 100% no-repeat local,
		linear-gradient(to left, var(--carte) 40%, transparent) right center / 28px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(35, 32, 28, .16), transparent) left center / 12px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(35, 32, 28, .16), transparent) right center / 12px 100% no-repeat scroll }
.tableau:has(tbody > tr:nth-child(16)) { max-height: min(72vh, 840px) }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--filet-fin); vertical-align: middle; color: var(--texte) }
thead th { position: sticky; top: 0; z-index: 1; background: var(--carte); padding: 10px 12px; border-bottom: 1.5px solid var(--filet); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--sourd); white-space: nowrap }
.carte > .tableau th:first-child, .carte > .tableau td:first-child { padding-left: 20px }
.carte > .tableau th:last-child, .carte > .tableau td:last-child { padding-right: 20px }
tbody tr:hover td { background: var(--survol) }
tbody tr:last-child td { border-bottom: 0 }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
tr.total td { font-weight: 800; color: var(--encre); border-top: 1.5px solid var(--encre); border-bottom: 0 }
td small { display: block; margin-top: 2px; color: var(--sourd); font-size: 12px }
td > span:first-child:not(.pastille) { color: var(--encre); font-weight: 600 }
td button { min-height: 30px; padding: 0 12px; font-size: 13px }
/* Un nom de modèle ou une référence ne se coupe pas au milieu tant que la colonne peut s'élargir (le cadre défile). */
td code { overflow-wrap: break-word }
@media (max-width: 820px) { .tableau table:has(thead th:nth-child(4)) { min-width: 640px } .tableau table:has(thead th:nth-child(6)) { min-width: 820px } }

/* Pastilles d'état en pilule : gris, vert (en cours, réussi), ambre (en attente), rouge (fin, erreur). */
.pastille { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--gris-fond); color: var(--texte) }
.pastille--active { background: var(--bon-fond); color: var(--bon) } .pastille--attente { background: var(--ambre-fond); color: var(--ambre) }
.pastille--terminee, .pastille--suspendue, .pastille--erreur { background: var(--alerte-fond); color: var(--alerte) }
.actions { display: flex; flex-wrap: wrap; gap: 6px }
.actions button { min-height: 30px; padding: 0 12px; font-size: 13px }

/* Onglets : pilules sur une piste rose, l'onglet lu en blanc cerclé de l'accent. */
.onglets { display: flex; width: fit-content; max-width: 100%; gap: 4px; padding: 4px; overflow-x: auto; scrollbar-width: none; border-radius: 22px; background: var(--rail) }
.onglets button { flex-shrink: 0; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--sourd); font-size: 14px; font-weight: 800 }
.onglets button:hover { background: none; color: var(--encre) }
.onglets button[aria-selected="true"] { background: var(--carte); color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--accent) }

/* Un histogramme : une colonne par jour sur une grille au quart, la valeur au survol (title) et dans le tableau voisin. */
.histo { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 160px; border-bottom: 1.5px solid var(--filet); background: linear-gradient(var(--filet-fin) 1px, transparent 1px) 0 0 / 100% 25% }
.histo span { flex: 1; min-width: 2px; max-width: 28px; background: var(--serie); border-radius: 3px 3px 0 0; height: var(--h, 0%) }
.histo span:hover { opacity: .7 }
.histo__axe { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--sourd) }
.barres { display: flex; flex-direction: column; gap: 10px }
.barre { display: grid; grid-template-columns: 90px minmax(0, 1fr) 120px; align-items: center; gap: 12px; font-size: 13.5px }
.barre > div:has(i) { height: 10px; border-radius: 999px; background: var(--doux) }
.barre i { display: block; height: 10px; border-radius: 999px; background: var(--serie); width: var(--l, 0%) }
.barre--couts i { background: var(--serie-2) }
.barre--canal { grid-template-columns: 170px minmax(0, 1fr) 120px }
.barre b { text-align: right; font-variant-numeric: tabular-nums; color: var(--encre); font-weight: 700 }
@media (max-width: 560px) {
	.barre, .barre--canal { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px }
	.barre > div { grid-column: 1 / -1; grid-row: 2 }
}
code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12.5px; overflow-wrap: anywhere }
.fiche { border-color: var(--accent) }
.jauge { height: 10px; border-radius: 999px; background: var(--tuile); position: relative; overflow: hidden; min-width: 120px }
.jauge i { position: absolute; inset: 0 auto 0 0; width: var(--l, 0%); background: var(--serie); border-radius: 999px }
.jauge--rouge i { background: var(--alerte) }
.jauge b { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--encre); left: var(--m, 100%) }