:root {
  --sidebar-w: 260px;
  --topbar-h: 64px;
  --bg: #f3f5f8;
  --surface: #ffffff;
  --text: #1c2434;
  --muted: #475467;
  --border: #d0d5dd;
  --accent: #0ea5b7;
  --accent-2: #155eef;
  --sidebar: #101828;
  --sidebar-text: #d0d5dd;
  --shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
  --input-bg: #ffffff;
  --bs-body-color: #1c2434;
  --bs-body-bg: #ffffff;
  --bs-emphasis-color: #101828;
  --bs-secondary-color: #475467;
  --bs-border-color: #d0d5dd;
  --bs-tertiary-bg: #f2f4f7;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0b1220;
  --surface: #111827;
  --text: #e5e7eb;
  --muted: #cbd5e1;
  --border: #334155;
  --sidebar: #070d18;
  --sidebar-text: #cbd5e1;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  --input-bg: #0f172a;
  --bs-body-color: #e5e7eb;
  --bs-body-bg: #111827;
  --bs-emphasis-color: #f8fafc;
  --bs-secondary-color: #cbd5e1;
  --bs-border-color: #334155;
  --bs-tertiary-bg: #1e293b;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "DM Sans", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar);
  color: var(--sidebar-text);
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, width .2s ease;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 18px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar-brand .logo-mark {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, #22d3ee, #155eef);
  display: grid; place-items: center; font-weight: 800;
}
.sidebar-nav { padding: 14px 10px; overflow: auto; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 10px;
  color: var(--sidebar-text); text-decoration: none;
  padding: 10px 12px; border-radius: 10px; margin-bottom: 4px;
}
.sidebar-nav a:hover, .sidebar-nav a.active {
  background: rgba(14, 165, 183, .16); color: #fff;
}
.main-wrap { margin-left: var(--sidebar-w); min-height: 100%; }
.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; position: sticky; top: 0; z-index: 1030;
}
.content { padding: 24px; }
.page-title { font-weight: 700; margin: 0; }
.card-soft {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow);
}
.stat-card {
  padding: 18px 18px 16px; height: 100%;
}
.stat-card .label { color: var(--muted); font-size: 13px; }
.stat-card .value { font-size: 28px; font-weight: 700; line-height: 1.2; }
.stat-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 20px;
}
.stat-total .stat-icon { background: #eef2ff; color: #3538cd; }
.stat-assigned .stat-icon { background: #ecfdf3; color: #067647; }
.stat-empty .stat-icon { background: #f2f4f7; color: #475467; }
.stat-illegal .stat-icon { background: #fef3f2; color: #b42318; }
.stat-reserved .stat-icon { background: #eff8ff; color: #175cd3; }
.stat-unchecked .stat-icon { background: #fffaeb; color: #b54708; }

[data-theme="dark"] .stat-total .stat-icon { background: #1e293b; color: #93c5fd; }
[data-theme="dark"] .stat-assigned .stat-icon { background: #052e16; color: #86efac; }
[data-theme="dark"] .stat-empty .stat-icon { background: #1f2937; color: #cbd5e1; }
[data-theme="dark"] .stat-illegal .stat-icon { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .stat-reserved .stat-icon { background: #0b2559; color: #93c5fd; }
[data-theme="dark"] .stat-unchecked .stat-icon { background: #422006; color: #fcd34d; }

.badge-status { font-weight: 600; }
.status-empty { background: #667085; color: #fff; }
.status-occupied { background: #7a5af8; color: #fff; }
.status-illegal { background: #d92d20; color: #fff; animation: pulse-red 1.6s infinite; }
.status-reserved { background: #1570ef; color: #fff; }
.status-unchecked { background: #f79009; color: #111; }
.status-excluded { background: #344054; color: #fff; }

.row-illegal { background: rgba(217, 45, 32, .12) !important; }
.row-illegal:hover { background: rgba(217, 45, 32, .18) !important; }
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,45,32,.45); }
  50% { box-shadow: 0 0 0 5px rgba(217,45,32,0); }
}

.alert-illegal {
  background: #b42318; color: #fff; border: 0; border-radius: 14px;
}
.port-badge { font-size: 11px; margin: 1px; background: #344054; }

.table-wrap { overflow: auto; }
.table thead th {
  white-space: nowrap; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.clickable-row { cursor: pointer; }
.progress-slim { height: 8px; border-radius: 99px; }
.app-loader {
  display: none; position: fixed; inset: 0; background: rgba(15,23,42,.35);
  z-index: 2000; place-items: center;
}
.app-loader.show { display: grid; }
.sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1035;
}

body.sidebar-collapsed .sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); }
body.sidebar-collapsed .main-wrap { margin-left: 0; }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .main-wrap { margin-left: 0; }
  body.sidebar-open .sidebar { transform: none; }
  body.sidebar-open .sidebar-backdrop { display: block; }
}

.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(1200px 600px at 10% -10%, #123, transparent), #0b1220;
  padding: 24px;
  position: relative;
}
.auth-wrap-hero {
  background-color: #061018;
  background-image:
    linear-gradient(180deg, rgba(6, 16, 24, .42) 0%, rgba(6, 16, 24, .62) 100%),
    url("../img/uzmansoft-login-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.auth-wrap-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 16, 24, .35), rgba(6, 16, 24, .15) 45%, rgba(6, 16, 24, .45));
  pointer-events: none;
}
.auth-card {
  width: min(460px, 100%);
  position: relative;
  z-index: 1;
}
.auth-wrap-hero .auth-card {
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.28);
  backdrop-filter: blur(14px);
  color: #e5e7eb;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.auth-wrap-hero .auth-card .form-label,
.auth-wrap-hero .auth-card .form-check-label,
.auth-wrap-hero .auth-card h1,
.auth-wrap-hero .auth-card .form-hint {
  color: #f1f5f9;
}
.auth-wrap-hero .auth-card .form-hint {
  color: #cbd5e1;
}
.auth-wrap-hero .auth-card .form-control {
  background: #0b1220;
  color: #f8fafc;
  border-color: #334155;
}
.form-hint {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.form-label {
  color: var(--text);
  font-weight: 600;
}
.modal-content {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.modal-header, .modal-footer {
  border-color: var(--border);
}
.modal-title, .modal-body {
  color: var(--text);
}
.btn-close {
  filter: none;
}
[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%);
}
.form-control, .form-select, .form-control:focus, .form-select:focus {
  background-color: var(--input-bg);
  color: var(--text);
  border-color: var(--border);
}
.form-control::placeholder {
  color: var(--muted);
  opacity: 0.85;
}
.nav-tabs {
  border-color: var(--border);
}
.nav-tabs .nav-link {
  color: var(--muted);
}
.nav-tabs .nav-link.active {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border) var(--border) var(--surface);
}
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--bs-tertiary-bg);
  color: var(--text);
}
.card-soft, .card-soft h1, .card-soft h2, .card-soft h3, .card-soft h4, .card-soft h5, .card-soft h6 {
  color: var(--text);
}
.text-muted, .small.text-muted, .form-hint + div {
  color: var(--muted) !important;
}
.history-item { border-left: 3px solid var(--accent); padding-left: 12px; margin-bottom: 12px; color: var(--text); }
.ip-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; }
.filter-bar .form-select, .filter-bar .form-control { min-width: 140px; }