:root {
  --bg: #0b1220;
  --panel: #0f172a;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --brand: #60a5fa;
  --line: #1f2937;
  --bad: #ef4444;
}

/* Base */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg) !important; /* win over Bootstrap */
  color: var(--text) !important;
  font-family: Inter, system-ui, Segoe UI, Arial, sans-serif;
}
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

header {
  border-bottom: 1px solid var(--line);
  background: #030712;
}
header .logo {
  font-weight: 700;
}

nav a {
  color: var(--text);
  margin-right: 14px;
  text-decoration: none;
}
nav a.right {
  float: right;
}

main h2 {
  margin-top: 0;
}

/* Tables */
.table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px;
  overflow: hidden;
}
.table th,
.table td {
  padding: 10px;
  border-bottom: 1px solid var(--line) !important;
  text-align: left;
}
.table thead th {
  background: #0e1524 !important;
  color: var(--text) !important;
}
.table tr:nth-child(even) td {
  background: #0f1622 !important;
}
.table tr:nth-child(odd) td {
  background: var(--panel) !important;
}

/* Form controls */
input,
textarea,
select,
.form-control,
.form-select {
  width: 100%;
  padding: 10px;
  background: #0e1524 !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--muted) !important;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  background: #0e1524 !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 9px 12px;
  border-radius: 10px;
  background: #111827;
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  background: #1a2435;
  border-color: #2a3647;
  color: #fff;
}

/* Support both .btn.danger and Bootstrap's .btn-danger */
.btn.danger,
.btn-danger {
  border-color: #7f1d1d !important;
  background: #1f0e0e !important;
  color: #fecaca !important;
}
.btn.danger:hover,
.btn-danger:hover {
  background: #2a0f0f !important;
  border-color: #9a1f1f !important;
  color: #fff !important;
}

/* Notices */
.notice {
  padding: 10px;
  border: 1px solid var(--line);
  background: #0e1524;
  border-radius: 10px;
  margin: 10px 0;
  color: var(--text);
}
.notice.error {
  border-color: #7f1d1d;
  background: #1f0e0e;
  color: #fecaca;
}

/* Layout helpers */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card,
.panel,
.stat,
.box {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 16px;
  text-align: center;
}
.card .num {
  font-size: 28px;
  font-weight: 700;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Modal (Bootstrap) dark theme */
.modal-content {
  background: #1a2230 !important;
  color: var(--text) !important;
}
.modal-header,
.modal-footer {
  border-color: #2a3647 !important;
}
.modal-header.bg-danger {
  background: #99272d !important;
}
.btn-secondary {
  background: #38475d !important;
  border-color: #38475d !important;
  color: #fff !important;
}
.btn-secondary:hover {
  background: #465a77 !important;
  border-color: #465a77 !important;
}

/* Spacing helpers */
.sv-gap,
.sv-gap-1,
.sv-gap-2,
.sv-gap-3,
.sv-gap-4,
.sv-gap-5,
.sv-gap-6 {
  display: block;
  height: 15px;
}
.sv-gap::after,
.sv-gap::before,
.sv-gap-1::after,
.sv-gap-1::before,
.sv-gap-2::after,
.sv-gap-2::before,
.sv-gap-3::after,
.sv-gap-3::before,
.sv-gap-4::after,
.sv-gap-4::before,
.sv-gap-5::after,
.sv-gap-5::before,
.sv-gap-6::after,
.sv-gap-6::before {
  content: "";
  display: block;
  clear: both;
}
.sv-gap-1 {
  height: 20px;
}
.sv-gap-2 {
  height: 30px;
}
.sv-gap-3 {
  height: 50px;
}
.sv-gap-4 {
  height: 70px;
}
.sv-gap-5 {
  height: 90px;
}
.sv-gap-6 {
  height: 110px;
}

/* Force white text in all tables */
.table th,
.table td {
  color: #e5e7eb !important; /* your --text variable */
}

/* Optional: also fix hover/focus row states if Bootstrap is applying */
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  color: #ffffff !important;
  background-color: #1a2230 !important;
}