/* SiteForge — interface (dashboard).
   Design repris de Metaforge (metaforge/index.html) : mêmes variables, mêmes
   composants, thème nuit par défaut + thème jour via html[data-theme="day"].
   Drop-in : mêmes classes que app.js, aucun changement JS nécessaire. */

/* ===== Thème NUIT (défaut) ===== */
:root {
  --accent: #ff8a3d; --accent2: #ffb347; --violet: #8b7bff; --cyan: #3ad0e0;
  --green: #3ddc97; --amber: #ffcc4d; --red: #ff6b8a;
  --accent-fg: #1a0f00;
  --bg: #0b1020; --panel: #141c38; --panel2: #1b254a; --line: #26315c;
  --text: #e7ecff; --muted: #8ea0d0; --faint: #5b6aa0;
  --input-bg: #0f1630; --code-bg: #0d1430; --code-fg: #c8bdff;
  --row-hover: rgba(27, 37, 74, .55); --shadow: 0 10px 40px rgba(0, 0, 0, .45);
  --side-bg: #0f1630; --focus: rgba(255, 138, 61, .28);
  --accent-soft: rgba(255, 138, 61, .16); --accent-soft-fg: #ffb98a;
  --ok-bg: rgba(61, 220, 151, .15); --ok-fg: #5fe3ad;
  --warn-bg: rgba(255, 204, 77, .14); --warn-fg: #ffcf5a;
  --info-bg: rgba(139, 123, 255, .16); --info-fg: #b3a6ff;
  --err-bg: rgba(255, 107, 138, .15); --err-fg: #ff8098;
  --glow: radial-gradient(1200px 700px at 82% -12%, #1a2350 0, transparent 60%),
          radial-gradient(900px 600px at -12% 8%, #241640 0, transparent 55%);

  /* alias : app.js insère var(--sf-primary) / var(--sf-border) en style inline */
  --sf-primary: var(--accent);
  --sf-border: var(--line);
}

/* ===== Thème JOUR ===== */
html[data-theme="day"] {
  /* L'orange clair de la nuit devient jaune criard sur fond blanc : on descend
     de deux crans et on passe le texte des CTA en blanc (contraste 5,1:1). */
  --accent: #ad4c0b; --accent2: #be5713; --accent-fg: #ffffff;
  --bg: #eef1f8; --panel: #ffffff; --panel2: #f4f6fc; --line: #e4e9f5;
  --text: #1a2138; --muted: #7b86a8; --faint: #9aa3b5;
  --input-bg: #fbfcfe; --code-bg: #0f1630; --code-fg: #c8bdff;
  --row-hover: #f7f9fe; --shadow: 0 8px 26px rgba(20, 35, 80, .08);
  --side-bg: #ffffff; --focus: #ffe4cf;
  --accent-soft: #ffe9d8; --accent-soft-fg: #c25a12;
  --ok-bg: #d9f5e8; --ok-fg: #067a52;
  --warn-bg: #fdf1d7; --warn-fg: #92600a;
  --info-bg: #e5e9f5; --info-fg: #33415e;
  --err-bg: #fde3e3; --err-fg: #a11616;
  --glow: radial-gradient(1100px 650px at 85% -12%, #e6e9ff 0, transparent 58%),
          radial-gradient(850px 550px at -10% 6%, #fff0e6 0, transparent 55%);
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--glow), var(--bg); color: var(--text); min-height: 100vh;
  font-size: 14px; line-height: 1.6;
}
h1, h2, h3, h4 { margin: 0 0 6px; letter-spacing: -.3px; color: var(--text); }
h1 { font-size: 21px; font-weight: 800; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 14.5px; font-weight: 700; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- boutons ---------- */
/* Base = bouton neutre Metaforge (.btn). Le dégradé orange est réservé
   aux boutons sans classe, qui sont les actions principales dans app.js. */
button, .btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  padding: 9px 15px; border-radius: 10px; cursor: pointer;
  font-size: 13.5px; font-family: inherit; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s, filter .15s;
}
button:hover, .btn:hover { border-color: var(--faint); background: var(--panel2); color: var(--text); text-decoration: none; }

button:not([class]), button.primary, .btn.primary, button[type="submit"] {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border: 1px solid transparent; color: var(--accent-fg); font-weight: 700;
}
button:not([class]):hover, button.primary:hover, .btn.primary:hover, button[type="submit"]:hover {
  filter: brightness(1.06); background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-color: transparent; color: var(--accent-fg);
}

button.secondary, .btn.secondary { background: var(--panel); color: var(--muted); }
button.secondary:hover, .btn.secondary:hover { border-color: var(--accent); color: var(--text); }
button.ghost { background: none; border-color: transparent; color: var(--faint); padding: 8px 11px; }
button.ghost:hover { background: var(--panel2); color: var(--text); border-color: transparent; }
button.danger { background: var(--err-bg); border-color: transparent; color: var(--err-fg); }
button.danger:hover { background: var(--err-bg); border-color: var(--err-fg); color: var(--err-fg); }
button.sm, .btn.sm { padding: 6px 11px; font-size: 12px; }
button:disabled { opacity: .5; cursor: default; filter: none; }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- formulaires ---------- */
input, select, textarea {
  width: 100%; background: var(--input-bg); border: 1px solid var(--line); color: var(--text);
  padding: 10px 12px; border-radius: 9px; font-size: 13.5px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
textarea { min-height: 70px; resize: vertical; }
label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
label > span {
  display: block; margin: 0 0 6px; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}

/* ---------- structure ---------- */
.topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 26px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg); z-index: 20;
}
.topbar .logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: var(--text); text-decoration: none;
}
.topbar .logo::before {
  content: ""; width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: conic-gradient(from 210deg, #ff8a3d, #ffb347, #8b7bff, #3ad0e0, #ff8a3d);
  box-shadow: 0 6px 18px rgba(255, 138, 61, .35);
}
.topbar .logo:hover { color: var(--text); text-decoration: none; }
.topbar .spacer { flex: 1; }
.container { padding: 24px 26px 70px; max-width: 1200px; margin: 0 auto; }
.container > h1 { margin-bottom: 18px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.grid .card { transition: border-color .15s, transform .15s; }
.grid .card:hover { border-color: var(--accent); transform: translateY(-2px); }
.grid .card h3 { margin-bottom: 3px; }
.grid .card .row { margin-top: 16px; }

/* ---------- onglets (segments Metaforge) ---------- */
.tabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin: 20px 0 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 4px;
  width: fit-content; position: sticky; top: 67px; z-index: 10;
}
.tabs button {
  border: 1px solid transparent; background: none; color: var(--muted);
  padding: 7px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
}
.tabs button:hover { background: none; color: var(--text); border-color: transparent; }
.tabs button.active { background: var(--panel2); color: var(--text); border-color: transparent; }

/* ---------- tableaux ---------- */
table.sf { width: 100%; border-collapse: collapse; font-size: 13px; }
table.sf th {
  text-align: left; color: var(--faint); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .5px; padding: 9px 10px; border-bottom: 1px solid var(--line);
}
table.sf td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.sf tr:last-child td { border-bottom: 0; }
table.sf tbody tr:hover td { background: var(--row-hover); }
table.sf td .row { gap: 8px; }

/* ---------- badges (tags Metaforge) ---------- */
.badge {
  display: inline-block; font-size: 11.5px; padding: 3px 9px; border-radius: 7px;
  font-weight: 600; white-space: nowrap; background: var(--info-bg); color: var(--info-fg);
}
.badge.active, .badge.done, .badge.paid { background: var(--ok-bg); color: var(--ok-fg); }
.badge.pending, .badge.queued, .badge.verifying, .badge.running { background: var(--warn-bg); color: var(--warn-fg); }
.badge.error, .badge.failed, .badge.suspended { background: var(--err-bg); color: var(--err-fg); }

.muted { color: var(--muted); font-size: 13px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 40;
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  padding: 13px 17px; border-radius: 11px; box-shadow: var(--shadow);
  font-size: 13.5px; font-weight: 600; display: flex; gap: 10px; align-items: center;
  animation: toast-in .3s ease;
}
.toast::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.toast.error { color: var(--err-fg); }
.toast.error::before { background: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ---------- auth & modales ---------- */
.auth-wrap { max-width: 420px; margin: 12vh auto; padding: 24px; }
.auth-wrap h1 { font-size: 21px; margin-bottom: 3px; }
.modal-bg {
  position: fixed; inset: 0; background: rgba(5, 8, 18, .66); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 30; padding: 20px;
}
.modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  width: min(620px, 100%); max-height: 88vh; overflow: auto; padding: 24px; animation: fade .25s ease;
}
.modal h2 { margin: 0 0 12px; font-size: 17px; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
code, code.rec {
  background: var(--code-bg); border: 1px solid var(--line); color: var(--code-fg);
  font-family: 'Consolas', 'Monaco', monospace; font-size: 12.5px;
  padding: 2px 7px; border-radius: 6px; word-break: break-all;
}
code.rec { user-select: all; }

/* ---------- galerie de modèles (styles injectés par app.js, surchargés ici) ---------- */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 14px; }
.tpl-card {
  background: var(--panel) !important; border: 1px solid var(--line) !important;
  border-radius: 12px !important; overflow: hidden; cursor: pointer; transition: .15s;
}
.tpl-card:hover { border-color: var(--accent) !important; transform: translateY(-2px); }
.tpl-card.sel { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--focus) !important; }
.tpl-preview { height: 112px !important; }
.tpl-cat {
  background: rgba(5, 8, 18, .55) !important; color: #fff !important;
  font-size: 11px !important; font-weight: 600; padding: 3px 9px !important; border-radius: 20px !important;
}
.tpl-name { padding: 9px 11px !important; font-size: 13.5px !important; font-weight: 600; color: var(--text); }

/* ---------- bascule jour / nuit (injectée par index.html, hors app.js) ---------- */
#sfThemeToggle {
  position: fixed; left: 22px; bottom: 22px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  padding: 8px 14px; border-radius: 99px; box-shadow: var(--shadow);
}
#sfThemeToggle:hover { border-color: var(--accent); background: var(--panel2); color: var(--text); filter: none; }
#sfThemeToggle .ti { font-size: 15px; line-height: 1; }

@media (max-width: 700px) {
  .topbar { padding: 14px 16px; }
  .container { padding: 18px 16px 60px; }
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }