/* Thème propre au panneau Holdfast, d'après la maquette « Holdfast Dashboard » de l'utilisateur :
   fond noir, cartes sombres bordées d'un filet fin, or et laiton pour les titres et les accents,
   Cinzel pour le logo et les capitales, EB Garamond pour tout le reste.
   Sombre uniquement (pas de variante claire ni de bascule).
   Indépendant du thème commun de /home/debian/shared-theme (classical.css, theme.css), que gardent mc-panel et capys-bot.
   Règles : texte à 4,5:1 au moins sur son fond, 11 px minimum, focus toujours visible, cibles de 44 px sur téléphone. */

:root {
  color-scheme: dark;
  /* Fonds */
  --bg: #08090b;
  --bg-glass: rgba(8,9,11,.92);
  --color-bg: #08090b;
  --color-surface: #111317;     /* cartes */
  --raised: #15171c;            /* champs, survols */
  --surface-2: #1b1d22;
  --tint: rgba(255,255,255,.02);
  /* Texte (contraste mesuré sur les cartes #111317) */
  --heading: #f1e7d0;           /* 15:1 */
  --ink: #e8e1d3;               /* 14:1 */
  --color-text: #e8e1d3;
  --ink-2: #d6cdbd;             /* 12:1 */
  --muted: #a69f92;             /* 7:1 */
  --faint: #8f887c;             /* 5,3:1 : jamais plus clair que ça pour du texte */
  /* Or et laiton */
  --gold: #d9b36c;              /* 9,4:1 : titres, accents, liens */
  --gold-light: #f1d79e;
  --brass: #b88d4a;             /* filets, jauges */
  --brass-d: #d9b36c;           /* texte doré */
  --brass-soft: #2a241a;
  --brass-softer: #17150f;
  --brass-line: #2b261d;        /* filet des cartes */
  --brass-edge: #5c4b2e;        /* filet doré plus marqué */
  --color-divider: #22201b;
  /* États */
  --ok: #3ecf6e; --ok-d: #5fd98a; --ok-soft: rgba(16,40,24,.85);
  --danger: #e5675f; --garance: #e5675f; --danger-solid: #c62f2a; --danger-soft: #2a1513;
  --info: #7fb0f5; --violet: #b3a9f5; --orange: #f0b84a;
  --warn-ink: #f0d08e;
  --knob: #5c574e;
  /* Anciens noms encore utilisés par panel.css */
  --navy: #d9b36c; --navy-d: #f0d08e; --navy-soft: #2a241a; --on-navy: #f1e7d0;
  --color-accent: #d9b36c;
  --focus: #f1d79e;
  /* Barre latérale */
  --side-bg: #0e0f12;
  --side-ink: #e8e1d3;
  --side-muted: #c9bfae;
  --side-brass: #d9b36c;
  --side-line: #2b261d;
  --side-hover: rgba(217,179,108,.06);
  --side-active: linear-gradient(90deg, rgba(217,179,108,.22), rgba(217,179,108,.04));
  /* Médailles */
  --silver: #c7ccd3; --silver-ink: #262a30;
  --bronze: #cf946a; --bronze-ink: #3b200d;
  --gold-medal: #d8ad48; --gold-ink: #3a2a04;

  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-heading: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-heading-weight: 500;
  --font-body: "EB Garamond", Georgia, "Times New Roman", serif;
  --space-1: 4px; --space-2: 8px; --space-3: 14px; --space-4: 18px; --space-6: 28px; --space-8: 36px;
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px;
  --tap: 44px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 4px 14px rgba(0,0,0,.55);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.7);
}

/* ——— Base ——— */
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--ink); }
body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 500; color: var(--heading); line-height: 1.15; margin: 0 0 var(--space-2); }
h1 { font-size: 38px; } h2 { font-size: 28px; } h3 { font-size: 23px; } h4 { font-size: 19px; }
p { margin: 0 0 var(--space-3); }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold-light); }
img { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
::selection { background: rgba(217,179,108,.3); color: var(--heading); }
.text-muted { color: var(--muted); }
.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }
.display { font-family: var(--font-display); letter-spacing: .04em; }

/* ——— Boutons ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px;
  cursor: pointer; text-decoration: none; font-family: var(--font-body); font-weight: 500; font-size: 15.5px; line-height: 1.2;
  color: var(--ink); background: transparent; border: 1px solid transparent;
  padding: 8px 16px; border-radius: 3px; transition: background .2s, border-color .2s, color .2s, filter .2s;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* Principal : contour or sur fond brun, comme « Redémarrer » et « Changer la carte » de la maquette */
.btn-primary { background: rgba(80,60,30,.75); color: var(--heading); border-color: #c49a55; }
.btn-primary:hover { background: rgba(110,82,40,.85); border-color: var(--gold-light); }
.btn-secondary { background: var(--color-surface); border-color: #3a352b; color: var(--ink); }
.btn-secondary:hover { border-color: var(--brass-edge); background: var(--raised); }
.btn-ghost { color: var(--gold); }
.btn-ghost:hover { background: rgba(217,179,108,.08); }
/* Danger : contour rouge ; plein pour « Arrêter le serveur » (.btn-stop) */
.btn-danger { color: var(--danger); border-color: #6b2b27; background: var(--color-surface); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-stop, .btn-danger.btn-stop { background: var(--danger-solid); border-color: #e0443c; color: #fff; }
.btn-stop:hover, .btn-danger.btn-stop:hover { background: var(--danger-solid); filter: brightness(1.12); }
.btn-icon { width: 38px; height: 38px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* ——— Champs ——— */
.field > label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--muted); }
.input {
  width: 100%; min-height: 40px; padding: 7px 12px; font: inherit; font-size: 16px; color: var(--ink); caret-color: var(--gold);
  background: #0c0d10; border: 1px solid #2f2b23; border-radius: 3px;
}
.input::placeholder { color: var(--faint); }
.input:hover { border-color: #4a412f; }
.input:focus-visible { border-color: var(--gold); outline: 2px solid rgba(217,179,108,.3); outline-offset: 0; }
.input[readonly] { background: var(--surface-2); }
textarea.input { min-height: 90px; resize: vertical; }
select.input { cursor: pointer; }
select.input option { background: #111317; color: var(--ink); }
input[type=checkbox] { accent-color: var(--gold); }
.seg { display: inline-flex; overflow: hidden; border: 1px solid #2f2b23; border-radius: 3px; background: #0c0d10; }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 15px; cursor: pointer; min-height: 40px; color: var(--ink-2); }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg-opt + .seg-opt { border-left: 1px solid #2f2b23; }
.seg-opt:has(input:checked) { background: rgba(80,60,30,.75); color: var(--heading); box-shadow: inset 0 0 0 1px #c49a55; }
.seg-opt:not(:has(input:checked)):hover { background: var(--raised); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -3px; }

/* ——— Tableaux ——— */
.table { width: 100%; border-collapse: collapse; font-size: 15.5px; font-variant-numeric: lining-nums tabular-nums; }
.table th { text-align: left; font-size: 14px; font-weight: 500; color: var(--muted); padding: 9px 10px; border-bottom: 1px solid var(--color-divider); }
.table td { padding: 9px 10px; border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: rgba(217,179,108,.05); }

/* ——— Dialogues ——— */
.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: rgba(0,0,0,.7); }
.dialog {
  width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3);
  padding: 22px 24px; border-radius: 6px; background: linear-gradient(#131418, #0d0e11); box-shadow: var(--shadow-lg); border: 1px solid var(--brass-edge);
}
.dialog-title { font-family: var(--font-heading); font-weight: 500; font-size: 25px; color: var(--heading); line-height: 1.15; }
.dialog-body { font-size: 16px; color: var(--ink-2); }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

/* ——— Déconnexion pour inactivité (idle.js) ——— */
.idle-warning { position: fixed; left: 50%; top: 20px; transform: translateX(-50%); z-index: 300; display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 6px; background: #131418; color: var(--ink); border: 1px solid var(--brass-edge); box-shadow: var(--shadow-lg); font-size: 16px; line-height: 1.5; max-width: calc(100% - 32px); }
.idle-note { margin: 0 0 16px; padding: 10px 14px; border-radius: 4px; background: var(--brass-softer); border: 1px solid var(--brass-edge); color: var(--warn-ink); font-size: 15px; line-height: 1.5; }

/* ——— Journal d'activité ——— */
.act-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.act-filters > div { flex: 1; min-width: 160px; }
.act-filters .input { max-width: none; }
.act-table td { vertical-align: top; }
.act-day td { font-family: var(--font-display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); padding-top: 18px; border-bottom: 1px solid var(--brass-edge); background: transparent !important; }
.act-warn td { background: var(--danger-soft); }
.act-cat { display: inline-block; font-size: 13px; padding: 0 8px; border-radius: 999px; border: 1px solid #3a352b; color: var(--muted); margin-right: 4px; white-space: nowrap; }
.act-connexion { border-color: var(--brass-edge); color: var(--gold); }
.act-accès { border-color: var(--brass); color: var(--gold); }
.act-serveur { border-color: #2f6b45; color: var(--ok-d); }
.act-console, .act-fichiers { border-color: #6b2b27; color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}