:root {
  --pbx-bg: #f4f7fb;
  --pbx-surface: #ffffff;
  --pbx-surface-soft: #f8fafc;
  --pbx-ink: #0f172a;
  --pbx-muted: #64748b;
  --pbx-border: #e2e8f0;
  --pbx-primary: #4f46e5;
  --pbx-primary-2: #7c3aed;
  --pbx-sidebar: #0b1220;
  --pbx-sidebar-2: #111a2e;
  --pbx-success: #16a34a;
  --pbx-danger: #dc2626;
  --pbx-warning: #f59e0b;
  --pbx-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.06);
}

html { background: var(--pbx-bg); }
body {
  color: var(--pbx-ink) !important;
  background: var(--pbx-bg) !important;
  letter-spacing: -.01em;
}

/* Navigation shell */
.sidebar {
  width: 252px !important;
  padding: 24px 16px !important;
  background: linear-gradient(180deg,var(--pbx-sidebar),var(--pbx-sidebar-2)) !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 12px 0 40px rgba(15,23,42,.08);
  z-index: 100 !important;
}
.logo { margin: 0 8px 32px !important; gap: 12px !important; }
.logo-icon {
  width: 44px !important; height: 44px !important; border-radius: 13px !important;
  background: linear-gradient(135deg,#6366f1,#8b5cf6) !important;
  box-shadow: 0 10px 24px rgba(99,102,241,.32);
}
.logo-text h2 { font-size: 21px !important; letter-spacing: -.03em; }
.logo-text small { color: #8290a8 !important; }
.menu-item {
  min-height: 46px; padding: 11px 13px !important; margin-bottom: 5px !important;
  border-radius: 11px !important; color: #aebbd0 !important; font-weight: 500;
}
.menu-item i { width: 20px; text-align: center; color: #7f8da5; }
.menu-item:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; transform: none !important; }
.menu-item:hover i { color: #a5b4fc; }
.active-menu {
  color: #fff !important;
  background: linear-gradient(135deg,rgba(79,70,229,.95),rgba(124,58,237,.9)) !important;
  box-shadow: 0 8px 20px rgba(79,70,229,.22) !important;
}
.active-menu i { color: #fff !important; }
.reports-submenu { margin: 2px 0 8px 14px !important; padding-left: 18px; border-left: 1px solid rgba(148,163,184,.18); }
.sub-menu-item { color: #8e9cb1 !important; border-radius: 8px !important; }
.sub-menu-item:hover { color: #fff !important; background: rgba(255,255,255,.05) !important; }

/* Page chrome */
.main-content { margin-left: 252px !important; padding: 114px 32px 40px !important; min-height: 100vh; }
.topbar {
  left: 252px !important; right: 0 !important; top: 0 !important;
  min-height: 86px !important; margin: 0 !important; padding: 18px 32px !important;
  background: rgba(255,255,255,.88) !important; border-bottom: 1px solid var(--pbx-border) !important;
  backdrop-filter: blur(14px); box-shadow: none !important;
}
.page-title h1 { font-size: 25px !important; font-weight: 750 !important; letter-spacing: -.035em; color: var(--pbx-ink) !important; }
.page-title p { color: var(--pbx-muted) !important; margin-top: 3px !important; }
.clock { color: var(--pbx-muted) !important; font-size: 13px !important; }
.logout-btn {
  background: #fff !important; color: #dc2626 !important; border: 1px solid #fecaca !important;
  border-radius: 10px !important; box-shadow: none !important; font-weight: 650 !important;
}
.logout-btn:hover { background: #fff1f2 !important; border-color: #fda4af !important; transform: none !important; }

/* Surfaces */
.glass-card,.cardx,.v2-panel,.v2-small-card,.v2-kpi-card {
  background: var(--pbx-surface) !important; border: 1px solid var(--pbx-border) !important;
  border-radius: 16px !important; box-shadow: var(--pbx-shadow) !important;
  backdrop-filter: none !important;
}
.glass-card,.cardx { padding: 24px !important; }
.section-title,.v2-panel-head h3 { color: var(--pbx-ink) !important; font-weight: 700 !important; letter-spacing: -.02em; }

/* Dashboard */
.dashboard-v2 { max-width: 1600px; }
.v2-top-grid { gap: 16px !important; }
.v2-kpi-card { min-height: 122px !important; padding: 20px !important; overflow: hidden; }
.v2-kpi-card::after { opacity: .5; filter: saturate(.7); }
.v2-icon { border-radius: 12px !important; box-shadow: none !important; }
.v2-kpi-card h3 { font-size: 26px !important; letter-spacing: -.04em; }
.v2-kpi-card p,.v2-kpi-card span { color: var(--pbx-muted) !important; }
.v2-kpi-grid { gap: 16px !important; }
.v2-small-card { min-height: 174px !important; }
.v2-small-card h2 { font-weight: 750 !important; letter-spacing: -.04em; }
.v2-row { gap: 16px !important; }
.v2-panel { overflow: hidden; }
.v2-panel-head { border-bottom: 1px solid var(--pbx-border); padding-bottom: 14px !important; }
.perf-grid { gap: 10px !important; }
.performance { background: var(--pbx-surface-soft) !important; border: 1px solid var(--pbx-border) !important; border-radius: 12px !important; }
.quick { background: var(--pbx-surface-soft) !important; border: 1px solid var(--pbx-border) !important; border-radius: 11px !important; }
.quick:hover { border-color: #c7d2fe !important; background: #eef2ff !important; transform: translateY(-1px) !important; }

/* Data tables */
.table-responsive { border: 1px solid var(--pbx-border); border-radius: 13px; overflow: auto; }
.table { margin-bottom: 0 !important; color: var(--pbx-ink) !important; }
.table thead th {
  background: var(--pbx-surface-soft) !important; color: #475569 !important;
  border-bottom: 1px solid var(--pbx-border) !important; padding: 13px 15px !important;
  font-size: 11px !important; text-transform: uppercase; letter-spacing: .055em;
}
.table tbody td { padding: 14px 15px !important; border-color: #edf1f6 !important; vertical-align: middle; }
.table tbody tr:hover td { background: #fafbff !important; }
.status-badge,.online-badge,.offline-badge,.live-badge,.badge-role { border-radius: 999px !important; font-weight: 650 !important; }

/* Controls */
input,select,textarea,.form-control {
  min-height: 44px; border-radius: 10px !important; border: 1px solid #d7dee8 !important;
  background: #fff !important; color: var(--pbx-ink) !important; box-shadow: none !important;
}
input:focus,select:focus,textarea:focus,.form-control:focus {
  border-color: #818cf8 !important; box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}
.ext-search-box,.filter-box { background: var(--pbx-surface-soft) !important; border: 1px solid var(--pbx-border) !important; border-radius: 13px !important; }
button,.btn,.action-btn,.edit-btn,.delete-btn,.end-btn,.red-btn { border-radius: 9px !important; box-shadow: none !important; font-weight: 650 !important; }
.custom-modal { border-radius: 18px !important; border: 1px solid rgba(255,255,255,.65) !important; box-shadow: 0 24px 80px rgba(15,23,42,.22) !important; }
.modal-overlay { backdrop-filter: blur(6px); background: rgba(15,23,42,.48) !important; }
.pagination-box { gap: 8px !important; }
.page-btn { border-radius: 9px !important; border-color: var(--pbx-border) !important; }

/* Login */
body:has(.login-card) {
  background: radial-gradient(circle at 15% 10%,rgba(79,70,229,.28),transparent 35%),
              radial-gradient(circle at 90% 90%,rgba(14,165,233,.16),transparent 36%),#080e1d !important;
}
.login-card {
  width: min(430px,calc(100vw - 32px)) !important; padding: 42px !important;
  background: rgba(17,26,46,.82) !important; border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 22px !important; box-shadow: 0 30px 90px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(20px) !important;
}
.login-card .logo { width: 60px !important; height: 60px !important; margin: 0 auto 20px !important; border-radius: 17px !important; }
.login-card .title { color: #fff !important; font-size: 27px !important; letter-spacing: -.03em; }
.login-card .form-control { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.1) !important; color: #fff !important; }
.login-card .form-control::placeholder { color: #94a3b8 !important; }
.login-btn { min-height: 48px; border: 0 !important; background: linear-gradient(135deg,#6366f1,#7c3aed) !important; border-radius: 11px !important; }
.login-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

@media (max-width: 980px) {
  .sidebar { width: 82px !important; padding: 22px 12px !important; }
  .logo { margin-left: 7px !important; }
  .logo-text,.menu-item span,.menu-item:not(a) > *:not(i),.report-arrow,.reports-submenu { display: none !important; }
  .menu-item { justify-content: center; padding: 12px !important; }
  .menu-item i { font-size: 17px; }
  .main-content { margin-left: 82px !important; padding-left: 22px !important; padding-right: 22px !important; }
  .topbar { left: 82px !important; padding-left: 22px !important; padding-right: 22px !important; }
}
@media (max-width: 640px) {
  .sidebar { width: 66px !important; padding: 18px 8px !important; }
  .logo-icon { width: 40px !important; height: 40px !important; }
  .main-content { margin-left: 66px !important; padding: 94px 14px 28px !important; }
  .topbar { left: 66px !important; padding: 14px !important; min-height: 72px !important; }
  .clock { display: none !important; }
  .page-title h1 { font-size: 21px !important; }
  .glass-card,.cardx { padding: 16px !important; }
  .login-card { padding: 30px 24px !important; }
}