/* Thème propre au panneau Sons of the Forest : sous-bois la nuit.
   Fond vert-noir, cartes sombres bordées de filets nets couleur mousse, vert lichen pour les accents,
   vert d'eau pour ce qui va bien, rouge sang pour les erreurs.
   Barlow Condensed pour le logo, les titres et les capitales, Barlow pour le texte courant.
   Textures en CSS uniquement (dégradés), aucune image. Sombre uniquement.
   Dérivé du thème du panneau 7 Days to Die : les noms de variables (--brass*, --rust, --orange) sont gardés pour le JS et panel.css.
   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: #0b0f0c;
  --bg-glass: rgba(11,15,12,.93);
  --color-bg: #0b0f0c;
  --color-surface: #141a15;     /* cartes */
  --raised: #1b221c;            /* champs, survols, dialogues */
  --surface-2: #252d26;
  --tint: rgba(225,255,230,.025);
  /* Texte (contraste mesuré sur les cartes #141a15) */
  --ink: #e6ebe2;               /* 14:1 */
  --color-text: #e6ebe2;
  --ink-2: #c6cfc2;             /* 10,7:1 */
  --muted: #9aa697;             /* 6,8:1 : jamais plus clair que ça pour du texte */
  /* Rouille et orange « danger » (les noms --brass* viennent de l'ancien thème, gardés pour le JS) */
  --orange: #a9c14a;            /* pleins : boutons, jauges, puces actives */
  --brass: #a9c14a;
  --brass-d: #c5d86d;           /* texte orange : 8:1 */
  --color-accent: #c5d86d;
  --rust: #4f6b3a;              /* filets couleur mousse */
  --brass-line: #3a4a22;
  --brass-soft: #232c14;
  --brass-softer: #1a2010;
  --color-accent-100: #232c14; --color-accent-800: #dfe8a8;
  --color-neutral-100: #252d26; --color-neutral-800: #c6cfc2;
  --warn-ink: #dfe8a8;          /* 11:1 */
  /* Filets */
  --color-divider: #2e382f;
  --line-strong: #435045;
  /* États */
  --ok: #4fa88a; --ok-d: #7fcdb0; --ok-soft: #12241e;          /* vert militaire délavé */
  --danger: #ec5f57; --danger-solid: #9e1b1f; --danger-soft: #2a1212; /* rouge sang */
  --knob: #5d6a5f;
  --on-accent: #10140a;         /* texte sur fond orange : 6,5:1 */
  /* Polices */
  --font-display: "Barlow Condensed", "Oswald", Impact, sans-serif;
  --font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-heading-weight: 500;
  --font-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Espaces, angles, ombres */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 18px; --space-6: 26px; --space-8: 36px;
  --radius-sm: 1px; --radius-md: 2px; --radius-lg: 3px;
  --shadow-sm: 0 1px 0 rgba(0,0,0,.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 14px 36px rgba(0,0,0,.65);
  /* Textures */
  --tex-plate: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%),
               repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px);
  --tex-hazard: linear-gradient(90deg, var(--rust), var(--brass-line));
}

/* — base — */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0; color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  /* Lueurs de mousse, très légères */
  background:
    radial-gradient(ellipse at 12% -10%, rgba(79,107,58,.13), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(79,168,138,.05), transparent 50%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.008) 0 1px, transparent 1px 3px),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.15; letter-spacing: .01em; margin: 0 0 var(--space-2); color: var(--ink);
}
h1 { font-size: 36px; } h2 { font-size: 26px; } h3 { font-size: 21px; } h4 { font-size: 18px; }
p { margin: 0 0 var(--space-3); }
a { color: var(--brass-d); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
::selection { background: rgba(169,193,74,.35); color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brass-d); outline-offset: 2px; }
button { font-family: inherit; }

/* — boutons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 500; font-size: 14px; line-height: 1.2;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: transparent; border: 1px solid transparent;
  padding: 9px 16px; border-radius: var(--radius-md); min-height: 38px;
  transition: background .15s, border-color .15s, color .15s;
}
.btn svg { display: block; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { color: var(--on-accent); background: var(--orange); border-color: var(--orange); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.btn-primary:hover:not(:disabled) { background: #b9d05a; border-color: #b9d05a; }
.btn-primary:active:not(:disabled) { background: #93aa3c; }
.btn-secondary { border-color: var(--line-strong); background: var(--tint); }
.btn-secondary:hover:not(:disabled) { border-color: var(--rust); background: rgba(79,107,58,.12); }
.btn-ghost { color: var(--brass-d); padding-inline: 8px; }
.btn-ghost:hover:not(:disabled) { background: rgba(169,193,74,.1); }
.btn-icon { width: 38px; height: 38px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — champs — */
.input {
  width: 100%; min-height: 38px; padding: 7px 10px; font: inherit; font-size: 14px;
  color: var(--ink); caret-color: var(--brass-d);
  background: #0e120f; border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}
.input::placeholder { color: var(--muted); opacity: 1; }
.input:hover { border-color: #5d6a5f; }
.input:focus-visible { border-color: var(--brass-d); outline: 1px solid var(--brass-d); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
select.input { appearance: auto; }
.radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-strong); border-radius: var(--radius-md); max-width: 100%; }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; font-size: 13.5px; cursor: pointer; color: var(--ink-2); }
.seg-opt + .seg-opt { border-left: 1px solid var(--line-strong); }
.seg-opt:has(input:checked) { color: var(--on-accent); background: var(--orange); }
.seg-opt:not(:has(input:checked)):hover { background: rgba(255,255,255,.05); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--brass-d); outline-offset: -2px; }

/* — tableaux — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-family: var(--font-heading); font-weight: 500; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding: var(--space-2); border-bottom: 1px solid var(--rust);
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: rgba(255,255,255,.03); }

/* — dialogues — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4);
  background: rgba(5,4,3,.78);
}
.dialog {
  width: min(460px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--tex-plate), var(--raised); border: 1px solid var(--line-strong);
  border-top: 3px solid var(--orange); box-shadow: var(--shadow-lg);
}
.dialog-title { font-family: var(--font-heading); font-weight: 500; font-size: 21px; letter-spacing: .03em; text-transform: uppercase; }
.dialog-body { font-size: 14px; 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; flex-wrap: wrap; padding: 14px 18px;
  border-radius: var(--radius-lg); background: var(--raised); color: var(--ink);
  border: 1px solid var(--orange); border-left-width: 4px; box-shadow: var(--shadow-lg);
  font-size: 14px; line-height: 1.5; max-width: calc(100% - 32px);
}
.idle-note {
  margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--brass-softer); border: 1px solid var(--brass-line); border-left: 3px solid var(--orange);
  color: var(--warn-ink); font-size: 13.5px; 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-heading); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass-d); padding-top: 18px; border-bottom: 1px solid var(--rust); background: transparent !important;
}
.act-warn td { background: var(--danger-soft); }
.act-cat { display: inline-block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; padding: 1px 7px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); color: var(--muted); margin-right: 4px; white-space: nowrap; }
.act-connexion { border-color: var(--brass-line); color: var(--brass-d); }
.act-accès { border-color: var(--orange); color: var(--brass-d); }
.act-serveur { border-color: var(--ok); color: var(--ok-d); }
.act-console, .act-fichiers { border-color: var(--danger); color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}