/* /assets/style.css */

/* Base theme */
:root { --bg:#0b0d12; --card:#121725; --text:#e9ecf1; --muted:#9aa3b2; --line:#222a3c; --accent:#7aa2ff; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); }
a { color: var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.container { max-width: 980px; margin: 0 auto; padding: 16px; }
.topbar { background:#0a0c12; border-bottom:1px solid var(--line); }
.topbar .container { display:flex; align-items:center; justify-content:space-between; }
.brand { font-weight: 700; letter-spacing: .2px; }
.who { color: var(--muted); font-size: 14px; }

.nav { display:flex; gap:12px; align-items:center; padding: 12px 0 16px; border-bottom:1px solid var(--line); margin-bottom: 16px; }
.nav .spacer { flex:1; }

.card { background: var(--card); border:1px solid var(--line); border-radius: 14px; padding: 14px; margin: 12px 0; }
.grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grid { grid-template-columns: 1fr; } }

.kpi .label { color: var(--muted); font-size: 12px; }
.kpi .value { font-size: 20px; font-weight: 700; margin-top: 6px; }

.alert { border-radius: 12px; padding: 10px 12px; margin: 10px 0; border:1px solid var(--line); }
.alert.ok { background: rgba(60,160,90,.15); }
.alert.err { background: rgba(220,70,70,.15); }
.alert.warn { background: rgba(240,180,60,.12); }

h1,h2 { margin: 10px 0; }
table { width:100%; border-collapse: collapse; }
th, td { padding: 10px; border-bottom: 1px solid var(--line); text-align:left; vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 13px; }

input, select, textarea, button {
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0c1020;
  color: var(--text);
}
textarea { min-height: 90px; }
.row { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .row { grid-template-columns: 1fr; } }

.actions { display:flex; gap:10px; align-items:center; }
.actions form { margin:0; }
button { cursor:pointer; background: #101a35; }
button.primary { background: #162a5a; border-color: #28448f; }
button.danger { background: #2b1220; border-color: #5a1d3a; }

.muted { color: var(--muted); }
.footer { border-top:1px solid var(--line); margin-top: 18px; }

/* Additions needed for new pages without changing existing look */
.badge{
  display:inline-block;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(255,255,255,.03);
}

.small{ font-size: 12px; }

/* Optional: keeps wide tables usable on mobile */
.table-wrap{ overflow-x:auto; }

/* IMPORTANT FIX: keep forms full-width, but NOT buttons in table action cells */
td .actions button,
td > form button{
  width: auto;
}