:root { color-scheme: light; }
html.dark { color-scheme: dark; }
/* Variables couleurs scrollbar (mêmes que Feuille/Gestion) */
:root{
--sb-track: #f3f4f6; /* clair */
--sb-thumb: #cbd5e1;
--sb-thumb-hover: #94a3b8;
}
/* Si ton mode sombre met la class "dark" sur (ou sur ) */
html.dark, body.dark, .dark{
--sb-track: #0b1220; /* sombre (bleu marin) */
--sb-thumb: var(--fm-dark-border, #334155);
--sb-thumb-hover: #475569;
}
/* Rester aligné avec le reste de l'app */
html, body { height: 100%; }
html { overflow-y: auto; scrollbar-gutter: stable; }
body {
margin: 0;
font-family: Arial, sans-serif;
overflow: hidden; /* le scroll doit se faire dans les zones dédiées (liste + fiche) */
}
/* En iframe (Fusion), on verrouille le scroll global pour éviter que la page scrolle au lieu de la liste */
.fm-embedded,
.fm-embedded body{
height: 100%;
overflow: hidden;
}
/* MODE SOMBRE GLOBAL (même rendu que Feuille/Gestion) */
.dark body {
background-color: var(--fm-dark-page, #020617) !important; /* slate-950 (même que Fusion) */
color: #e5e7eb;
}
/* Harmonise les cartes/blocs (classe bg-white) en sombre */
.dark .bg-white {
background-color: var(--fm-dark-surface, #0f172a) !important; /* slate-900 */
}
/* Harmonise quelques textes/bordures tailwind (comme les autres modules) */
.dark .text-slate-700,
.dark .text-slate-800,
.dark .text-slate-900 {
color: #e5e7eb !important;
}
.dark .border-slate-200,
.dark .border-slate-300 {
border-color: var(--fm-dark-border, #1f2937) !important; /* slate-800 */
}
/* Quand la section est affichée dans Fusion (iframe), on masque notre topbar interne
(le shell tente aussi de le faire, mais ici c'est garanti). */
.fm-embedded body > header,
.fm-embedded body > div > header {
display: none !important;
}
/* IMPORTANT: ne pas rendre le fond transparent en iframe.
On laisse le fond... (défini par .dark body) */
.list-item { transition: background 120ms ease; }
/* Inset ring (ne se fait pas couper par le container scroll) */
.list-item.active { box-shadow: inset 0 0 0 2px rgba(14,165,233,0.45); }
.muted { color: rgba(100,116,139,1); }
.dark .muted { color: rgba(148,163,184,1); }
/* iOS scroll dans iframe + garder un gutter stable (barre visible) */
.scroll-area {
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
}
/* Scrollbars - même style que le reste de l'app */
*{
scrollbar-width: thin;
scrollbar-color: var(--sb-thumb) var(--sb-track);
}
*::-webkit-scrollbar{
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track{
background: var(--sb-track);
}
*::-webkit-scrollbar-thumb{
background: var(--sb-thumb);
border-radius: 999px;
border: 2px solid var(--sb-track);
}
*::-webkit-scrollbar-thumb:hover{
background: var(--sb-thumb-hover);
}
/* Détails en grille */
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; }
@media (max-width: 640px) { .kv { grid-template-columns: 120px 1fr; } }