/* Dark page background, light UI theme */

:root {
  --bg:#0b0c10;            /* dark page background */
  --card:#ffffff;          /* light surfaces */
  --text:#0f172a;          /* slate-900 */
  --muted:#64748b;         /* slate-500 */
  --primary:#2563eb;       /* blue-600 */
  --danger:#dc2626;        /* red-600 */
  --border:#e5e7eb;        /* gray-200 */
  --border-strong:#cbd5e1; /* slate-300 */
  --table-head:#f3f4f6;    /* gray-100 */
  --table-row:#ffffff;     /* white */
  --table-hover:#f9fafb;   /* gray-50 */
  --input-bg:#ffffff;      /* inputs are light */
  --input-border:#d1d5db;  /* gray-300 */
}

* { box-sizing: border-box; }
html, body {
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
}

a { color: var(--primary); text-decoration: none; }
.container { max-width: 1200px; margin: 24px auto; padding: 0 16px; }

/* Keep topbar dark to blend with page background */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08);
  background:#0f1115; position:sticky; top:0; z-index:10;
}
.brand { font-weight:700; letter-spacing:.3px; color:#e5e7eb; }
.nav a { margin-left:16px; color:#cbd5e1; }

.card {
  background: var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  margin-bottom:16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.card h2, .card h1 { margin:0 0 12px 0; }

.table-wrap { overflow:auto; border:1px solid var(--border); border-radius:12px; background:var(--card); }
table.grid { width:100%; border-collapse: collapse; min-width:900px; background:var(--card); }
table.grid th, table.grid td {
  padding:10px 12px; border-bottom:1px solid var(--border);
  vertical-align: top; color:var(--text);
  background:var(--table-row);
}
table.grid thead th {
  position: sticky; top: 0; background:var(--table-head); text-align:left;
  border-bottom:1px solid var(--border-strong);
}
table.grid tbody tr:hover td { background: var(--table-hover); }
.num { text-align:right; }
.empty { color: var(--muted); text-align:center; }

.filters { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:12px; }
.search-form { display: flex; align-items: stretch; gap: 8px; width: 100%; }
.search-form input[name="q"] { flex: 1 1 auto; min-width: 0; }
.search-form button { flex: 0 0 120px; width: 120px; }

input, textarea, select, button {
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--input-border);
  background:var(--input-bg); color:var(--text);
}
input:focus, textarea:focus, select:focus, button:focus {
  outline: 2px solid rgba(37,99,235,.35);
  outline-offset: 1px;
}

label { display:block; font-size:12px; color:var(--muted); margin-bottom:8px; }
label input, label textarea, label select { margin-top:6px; }

button { cursor:pointer; }
button.primary {
  background: var(--primary); border-color: transparent; color:#ffffff; font-weight:600;
}
button.secondary {
  background:#f3f4f6; color:#111827; border-color:#e5e7eb;
}
button.danger, .link.danger {
  background:#fee2e2; color:var(--danger); border-color:#fecaca;
}
.link { background: transparent; border: none; text-decoration: underline; cursor: pointer; color: var(--primary); }
.primary {display:block;padding:6px 10px;border-radius:8px; text-align: center; background: #f0f0f0;}
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.form-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:8px; }
.backlink { display:inline-block; margin-bottom:12px; color:var(--primary); }

/* Row hover (no full-row click by default) */
.click-row { cursor: pointer; }
.click-row:hover { background: var(--table-hover); }

/* Alerts/messages (light theme) */
.messages { max-width: 1200px; margin: 12px auto 0; padding: 0 16px; }
.alert { border-radius: 10px; padding: 10px 12px; margin: 8px 0; border:1px solid var(--border); }
.alert.success { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.alert.warning { background:#fffbeb; border-color:#fde68a; color:#92400e; }
.alert.error   { background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }

/* Dialogs */
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog { border:none; border-radius:12px; padding:0; }
.modal-form { padding:16px; background:var(--card); color:var(--text); min-width:340px; border:1px solid var(--border); }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }

/* Auth page */
.card.auth { max-width:420px; margin: 48px auto; }
#login_form{display:flex; gap:10px; flex-direction:column;}