/* public/style.css */

:root {
  --bg: #0f1115;
  --panel: #151923;
  --text: #e6e8ef;
  --muted: #9aa3b2;
  --border: #262b36;
  --accent: #3b82f6;
  --ok: #22c55e;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: min(980px, 92vw); margin: 24px auto; }

.topbar { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:#0b0e13; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20;}
.topbar .brand a { color:#cdd6f4; font-weight:700; }
.topbar .menu { display:flex; gap:16px; }
.topbar .menu a { color:#cbd5e1; }

.card { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px; margin:16px 0; }
.sep { border:0; border-top:1px solid var(--border); margin:12px 0; }

h1,h2,h3 { margin: 8px 0 12px; }
.muted { color: var(--muted); }

.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align: middle; }

input[type="text"], input[type="number"], input[type="datetime-local"], select, textarea {
  width:100%; background:#282b34; color:var(--text); border:1px solid var(--border); border-radius:8px; padding:8px 10px;
}
textarea { min-height: 80px; resize: vertical; }

.btn { background:#1b2230; color:#dbe4ff; border:1px solid var(--border); padding:8px 12px; border-radius:8px; cursor:pointer; }
.btn:hover { background:#20283a; }
.btn.icon { padding:6px 10px; }

.pill { display:inline-block; background:#1f2635; border:1px solid var(--border); padding:3px 8px; border-radius:999px; font-size:12px; }
.pill.green { background:#11331c; border-color:#195a2c; color:#b9f6ca; }

.flash { padding:10px 12px; border-radius:8px; margin:10px 0; }
.flash.success { background:#102b18; border:1px solid #1f5f36; }
.flash.error { background:#2b1010; border:1px solid #5f1f1f; }

.stack { display:flex; flex-direction: column; gap:10px; }
.row { display:flex; }
.row.gap { gap:10px; }
.align { align-items:center; }

.inline-check { display:inline-flex; align-items:center; gap:8px; }
.nowrap { white-space: nowrap; }

.actions-right { display:flex; justify-content:flex-end; }

.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { border:1px solid var(--border); padding:6px 10px; border-radius:999px; }

hr { border-color: var(--border); }