/* ============================================================
   Shared Design Tokens + Dark Base — loaded by every page
   ============================================================ */

:root {
  /* Background & Surface */
  --bg:            #070B12;
  --surface-1:     #111827;
  --surface-2:     #162033;
  --surface-3:     #0F172A;
  --surface-4:     #16213A;
  --surface-hover: #1E3A5F;

  /* Border */
  --border:        #334155;
  --border-strong: #475569;
  --border-alert:  #F87171;

  /* Text */
  --text-main:      #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted:     #94A3B8;
  --text-dim:       #64748B;
  --text-inverse:   #FFFFFF;

  /* Status */
  --ok: #22C55E;  --ok-dark: #166534;  --ok-mid: #15803D;  --ok-soft: #4ADE80;
  --danger: #EF4444; --danger-dark: #991B1B; --danger-mid: #DC2626; --danger-soft: #FCA5A5;
  --warn: #F97316;   --warn-dark: #9A3412;  --warn-mid: #EA580C;  --warn-soft: #FDBA74;
  --info: #3B82F6;   --info-dark: #1E3A8A;  --info-mid: #2563EB;  --info-soft: #93C5FD;
  --disabled: #9CA3AF; --disabled-dark: #374151; --disabled-mid: #4B5563;

  /* Table */
  --table-bg:      #0F172A;
  --table-row-alt: #16213A;
  --table-head:    #1E293B;
  --table-hover:   #1E3A5F;

  /* Aliases used by machines.php and admin/settings.php inline styles */
  --card-bg: var(--surface-2);
  --muted:   var(--text-muted);
}

/* Base Reset */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text-main);
  font-family: 'Segoe UI', sans-serif;
}

.text-muted  { color: var(--text-muted) !important; }
.brand       { color: #67E8F9; font-weight: 800; letter-spacing: 2px; }
[x-cloak]    { display: none !important; }

/* Form controls — dark theme */
.form-control,
.form-select {
  background: var(--surface-3);
  color: var(--text-main);
  border-color: var(--border-strong);
}
.form-control:focus,
.form-select:focus {
  background: var(--surface-3);
  color: var(--text-main);
  border-color: var(--info-soft);
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.18);
}
.form-control::placeholder { color: var(--text-dim); }
.form-label { color: var(--text-secondary); font-weight: 700; }

/* Modal — dark theme */
.modal-content {
  background: var(--surface-1) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}
.modal-header,
.modal-footer { border-color: var(--border) !important; }

/* Bootstrap badge overrides */
.badge.bg-danger    { background: var(--danger-mid) !important; color: #fff !important; }
.badge.bg-warning   { background: #F59E0B !important; color: #111827 !important; }
.badge.bg-secondary { background: #64748B !important; color: #fff !important; }
.badge.badge-teal   { background: #0D9488 !important; color: #fff !important; }

/* ── Navbar ── */
.navbar {
  background: var(--surface-1) !important;
  border-bottom: 1px solid var(--border);
}

/* ── Tables ── */
.table {
  --bs-table-bg:       var(--table-bg);
  --bs-table-color:    var(--text-main);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: var(--table-hover);
  --bs-table-hover-color: #FFFFFF;
  color: var(--text-main);
}
.table thead th {
  background:   var(--table-head);
  color:        var(--text-main);
  border-color: var(--border-strong);
  font-size:    .8rem;
  font-weight:  850;
}
.table tbody td {
  color:        var(--text-main);
  border-color: var(--border);
  vertical-align: middle;
}
.table tbody tr:nth-child(even) td { background: var(--table-row-alt); }

/* ── Form extras ── */
.form-check-label { color: var(--text-secondary); }

/* ── Cards ── */
.card {
  background:   var(--card-bg);
  border-color: var(--border);
}

/* ── Nav tabs (dark) ── */
.nav-tabs { border-color: var(--border); }
.nav-tabs .nav-link { color: var(--text-secondary); border-color: transparent; }
.nav-tabs .nav-link.active {
  background: var(--surface-1);
  color: var(--text-main);
  border-color: var(--border) var(--border) var(--surface-1);
}
.tab-content {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: var(--surface-1);
  padding: 16px;
}

/* ── Bootstrap Alert overrides (dark backgrounds) ── */
.alert-success {
  background: #052e16;
  border-color: #166534;
  color: #4ade80;
}
.alert-danger {
  background: #3b0a0a;
  border-color: #991b1b;
  color: #fca5a5;
}
.alert-warning {
  background: #2d1a00;
  border-color: #92400e;
  color: #fbbf24;
}
.alert-info {
  background: #0c1a3d;
  border-color: #1e3a8a;
  color: #93c5fd;
}