:root {
  --accent: #f5c542;
  --accent-soft: rgba(245,197,66,.14);
}

body[data-theme="dark"] {
  --bg: #050607;
  --bg2: #0d0f12;
  --bg3: #14171c;
  --border: #242932;
  --text: #f1f5f9;
  --muted: #aab4c3;
  --sidebar: #07080a;
  --sidebar-text: #b8c0cc;
  --sidebar-active: #ffffff;
  --input-bg: #101319;
}

body[data-theme="graphite"] {
  --bg: #101114;
  --bg2: #17191e;
  --bg3: #20232a;
  --border: #343944;
  --text: #f2f4f8;
  --muted: #b8c0cc;
  --sidebar: #111318;
  --sidebar-text: #c2c8d2;
  --sidebar-active: #ffffff;
  --input-bg: #1c2028;
}

body[data-theme="light"] {
  --bg: #f0f2f5;
  --bg2: #ffffff;
  --bg3: #f8f9fa;
  --border: #dde3eb;
  --text: #17202c;
  --muted: #667085;
  --sidebar: #1e2130;
  --sidebar-text: #c3c9d4;
  --sidebar-active: #ffffff;
  --input-bg: #ffffff;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { background: var(--bg); color: var(--text); font-size: .875rem; margin: 0; }
a { text-decoration: none; color: inherit; }
code { color: var(--accent); }

#sidebar {
  width: 210px;
  min-width: 210px;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-brand { background: linear-gradient(180deg, rgba(255,255,255,.03), transparent); }
.sidebar-user { background: rgba(255,255,255,.02); }

.nav-lbl {
  padding: .35rem .85rem .12rem;
  font-size: .6rem;
  color: #737b89;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
}
.nav-link {
  color: var(--sidebar-text);
  font-size: .82rem;
  padding: .38rem .85rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  border-left: 2px solid transparent;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.055); }
.nav-link.active {
  color: var(--sidebar-active) !important;
  background: rgba(245,197,66,.10);
  border-left-color: var(--accent);
}

.app-header {
  height: 48px;
  background: rgba(0,0,0,.36);
  backdrop-filter: blur(14px);
}
body[data-theme="light"] .app-header { background: rgba(255,255,255,.86); }

.card {
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  box-shadow: 0 1px 8px rgba(0,0,0,.18);
}
.card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.24); }
.card-hover:hover { transform: translateY(-2px); transition: transform .15s, box-shadow .15s; }
.card-header, .card-footer { background: transparent; border-color: var(--border) !important; }

.table { color: var(--text); }
.table > :not(caption) > * > * { background: transparent; color: inherit; border-color: var(--border); }
.table-hover tbody tr:hover > * { background: rgba(255,255,255,.035); }
body[data-theme="light"] .table-hover tbody tr:hover > * { background: rgba(0,0,0,.025); }

.form-select, .form-control {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
  font-size: .82rem;
}
.form-select:focus, .form-control:focus {
  background: var(--input-bg);
  border-color: rgba(245,197,66,.65);
  color: var(--text);
  box-shadow: 0 0 0 .15rem rgba(245,197,66,.14);
}
.form-control::placeholder { color: var(--muted); opacity: .7; }

.progress { background: rgba(255,255,255,.10); border-radius: 6px; }
.progress-bar { border-radius: 6px; }
.badge { font-weight: 650; }

.text-muted { color: var(--muted) !important; }
.text-light { color: var(--text) !important; }
.text-white { color: var(--text) !important; }
.border-dark, .border-secondary { border-color: var(--border) !important; }
.bg-black { background: var(--bg) !important; }
.bg-dark { background: var(--bg3) !important; }
.bg-secondary { background: #5c6675 !important; }

#sidebar .fw-bold { color: var(--accent) !important; }
#sidebar .text-muted { color: var(--muted) !important; }

pre {
  font-size: .78rem;
  background: var(--bg3);
  padding: .75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text);
}
.font-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.cell-ok { color: #22c55e; }
.cell-warn { color: #f59e0b; }
.cell-crit { color: #ef4444; }

.login-wrap {
  min-height: calc(100vh - 3rem);
  display: grid;
  place-items: center;
}
.login-card { width: min(420px, 92vw); border-color: rgba(245,197,66,.24) !important; }

.permissions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
}
.perm-chip {
  border: 1px solid var(--border);
  background: var(--bg3);
  border-radius: 9px;
  padding: .42rem .55rem;
  display: flex;
  gap: .45rem;
  align-items: center;
  color: var(--muted);
  font-size: .72rem;
  cursor: pointer;
}
.perm-chip.on { border-color: rgba(34,197,94,.35); color: var(--text); background: rgba(34,197,94,.08); }
.perm-chip input { accent-color: var(--accent); }
.user-card .card-header { background: rgba(255,255,255,.025); }

.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1040;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
}
.offcanvas { background: var(--sidebar); color: var(--text); }

/* inline-dark blocks from templates stay readable on all themes */
[style*="background:#1a1a1a"], [style*="background:#111"], [style*="background:#0a0a0a"] {
  background: var(--bg3) !important;
}

@media (max-width: 768px) {
  #sidebar { display: none !important; }
  .mobile-menu-btn { display: grid; place-items: center; }
  .main-panel main { padding: 4.25rem .9rem 1rem !important; }
  .app-header { display: none !important; }
  .card { border-radius: 14px; }
  .permissions-grid { grid-template-columns: 1fr; }
  .table { font-size: .76rem; }
}

/* Velthar Core v1.4.11 profile polish */
.brand-link { color: inherit; }
.brand-logo {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 11px;
  border: 1px solid rgba(245,197,66,.28);
  box-shadow: 0 0 18px rgba(245,197,66,.12);
  flex: 0 0 auto;
}
.brand-title { font-size: .9rem; line-height: 1.1; }
.brand-subtitle { font-size: .65rem; line-height: 1.1; }
.profile-link {
  border-radius: 10px;
  padding: .35rem .25rem;
  transition: background .15s, color .15s;
}
.profile-link:hover, .profile-top-link:hover { color: var(--accent) !important; }
.profile-link:hover { background: rgba(245,197,66,.08); }
.login-logo {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: 28px;
  border: 1px solid rgba(245,197,66,.28);
  box-shadow: 0 0 42px rgba(245,197,66,.18);
}
.profile-logo {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 32px;
  border: 1px solid rgba(245,197,66,.25);
  box-shadow: 0 0 48px rgba(245,197,66,.13);
}
.profile-hero {
  background:
    radial-gradient(circle at 50% 0%, rgba(245,197,66,.11), transparent 42%),
    var(--bg2);
}
.mini-stat {
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg3);
}
.mini-stat span {
  display:block;
  color: var(--muted);
  font-size: .68rem;
  margin-bottom: .15rem;
}
.mini-stat strong { color: var(--text); font-size: .82rem; }
.settings-table input { min-width: 140px; }
body[data-theme="dark"] .text-muted,
body[data-theme="graphite"] .text-muted { color: var(--muted) !important; }
body[data-theme="dark"] .nav-lbl,
body[data-theme="graphite"] .nav-lbl { color: #8993a3; }
@media (max-width: 768px) {
  .login-logo { width: 92px; height: 92px; border-radius: 24px; }
  .profile-logo { width: 112px; height: 112px; border-radius: 28px; }
}

/* Velthar Core brand polish v1.4.10 */
.brand-logo { background:#020202; }
.brand-hero-card {
  position: relative;
  overflow: hidden;
  min-height: 138px;
  border: 1px solid rgba(245,197,66,.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 70%, rgba(245,197,66,.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.05)),
    var(--bg2);
  display: grid;
  place-items: center;
  box-shadow: 0 20px 48px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.02);
}
.brand-hero-wordmark {
  width: min(760px, 86%);
  max-height: 110px;
  object-fit: contain;
  opacity: .96;
  filter: drop-shadow(0 0 24px rgba(245,197,66,.18));
}
.brand-hero-glow {
  position:absolute; inset:auto 25% 10px 25%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(245,197,66,.8), transparent);
  box-shadow: 0 0 24px rgba(245,197,66,.55);
}
.login-card { animation: veltharLoginIn .55s ease-out both; }
.login-logo { animation: veltharLogoPulse 2.4s ease-in-out infinite; background:#030303; }
@keyframes veltharLoginIn { from { opacity:0; transform: translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes veltharLogoPulse { 0%,100% { filter: drop-shadow(0 0 6px rgba(245,197,66,.20)); } 50% { filter: drop-shadow(0 0 20px rgba(245,197,66,.45)); } }
@media (prefers-reduced-motion: reduce) { .login-card, .login-logo { animation:none !important; } }
.velthar-tabbar { display:flex; gap:.55rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.velthar-tabbar .btn { border-color:rgba(245,197,66,.25); background:rgba(255,255,255,.025); color:var(--muted); }
.velthar-tabbar .btn.active, .velthar-tabbar .btn:hover { background:rgba(245,197,66,.13); color:var(--accent); border-color:rgba(245,197,66,.55); }

/* ── Mobile nav offcanvas fixes (v1.4.11) ───────────────────────────────── */
#mobileNav {
  z-index: 1055;
}
#mobileNav .nav-link {
  pointer-events: auto !important;
  color: var(--sidebar-text);
  padding: .5rem 1rem;
  border-radius: 8px;
  display: block;
}
#mobileNav .nav-link:hover,
#mobileNav .nav-link.active {
  background: rgba(245,197,66,.1);
  color: var(--accent) !important;
}
#mobileNav .offcanvas-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Ensure backdrop doesn't block nav content */
.offcanvas-backdrop {
  z-index: 1050;
}
@media (max-width: 768px) {
  .mobile-menu-btn {
    pointer-events: auto !important;
    touch-action: manipulation;
  }
}

/* ── Right panel drawer fixes (v1.4.12) ─────────────────────────────────────── */
#rightPanel {
  z-index: 1060 !important;
}
#rightPanel .offcanvas-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto !important;
}
#rightPanel form,
#rightPanel button,
#rightPanel input,
#rightPanel select,
#rightPanel a {
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
}
/* Backdrop must be below both panels */
.offcanvas-backdrop {
  z-index: 1050 !important;
}
/* mobileNav above backdrop */
#mobileNav {
  z-index: 1055 !important;
}