/* ══════════════════════════════════════════════════════════════
   CCTV Rumah — Professional Dark Design System
   Gaya: Modern CCTV Monitoring (Hikvision / Verkada / Dahua)
   File ini di-load TERAKHIR untuk override desain default.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Profesional Palette ── */
  --pbg: #0b0e14;
  --pbg-deep: #080b10;
  --ppanel: #11151d;
  --ppanel-2: #151a24;
  --ppanel-3: #1a202b;
  --pborder: #232b38;
  --pborder-soft: #1a202a;
  --paccent: #22d3ee;
  --paccent-dim: #0ea5b7;
  --psuccess: #22c55e;
  --pwarning: #f59e0b;
  --pdanger: #ef4444;
  --ptext: #e6ecf4;
  --ptext-2: #9aa6b8;
  --ptext-3: #5c6778;
  --pradius: 8px;
  --pradius-sm: 6px;
  --pradius-lg: 12px;
}

.ptext-3 { color: #5c6778; }

/* ── Base surface ── */
body {
  background: var(--pbg) !important;
  color: var(--ptext) !important;
}
body::before {
  background:
    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(34, 211, 238, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 10%, rgba(99, 102, 241, 0.05) 0%, transparent 55%) !important;
  animation: none !important;
}

/* ── Headless section transitions keep subtle ── */
.section.active {
  animation: sectionFadeIn 0.3s ease;
}

/* ══════════ SIDEBAR ══════════ */
#sidebar {
  background: var(--pbg-deep) !important;
  border-right: 1px solid var(--pborder) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#sidebar::after {
  background: linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.18), transparent) !important;
}
#sidebar-logo {
  max-height: 34px !important;
}
#sidebar .nav-btn {
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ptext-2);
  padding: 0.6rem 0.85rem;
  gap: 0.7rem;
  letter-spacing: 0.01em;
}
#sidebar .nav-btn i {
  width: 1.05rem;
  font-size: 0.85rem;
  color: #6b7a8f;
}
#sidebar .nav-btn:hover {
  background: var(--ppanel-2) !important;
  color: #e6ecf4 !important;
  transform: none !important;
}
#sidebar .nav-btn:hover i {
  color: var(--paccent);
}
#sidebar .nav-btn.active {
  background: rgba(34, 211, 238, 0.1) !important;
  color: #67e8f9 !important;
  box-shadow: inset 3px 0 0 var(--paccent), inset 0 0 0 1px rgba(34, 211, 238, 0.15) !important;
}
#sidebar .nav-btn.active i {
  color: var(--paccent);
}
#sidebar .nav-btn.active::before {
  display: none;
}
#sidebar-subtitle {
  color: #3f8aa0 !important;
  letter-spacing: 0.18em !important;
  font-size: 0.62rem !important;
}
#sidebar-title {
  font-size: 0.95rem !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#sidebar .border-b,
#sidebar .border-t {
  border-color: var(--pborder) !important;
}
#sidebar-footer {
  color: #4d5868 !important;
  font-size: 0.66rem !important;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
}
#sidebar .text-slate-500 {
  color: #5c6778 !important;
}
#sidebar .rounded-lg {
  border-radius: 6px;
}

/* ══════════ HEADER / TOPBAR ══════════ */
#app-main > header {
  background: var(--ppanel) !important;
  border: 1px solid var(--pborder) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: none !important;
}
#app-main > header::after {
  display: none;
}
#header-subtitle {
  color: var(--paccent) !important;
  letter-spacing: 0.28em !important;
  font-size: 0.66rem !important;
  font-weight: 600;
}
#header-title {
  font-size: 1.4rem !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}
#header-title ~ p {
  color: var(--ptext-2) !important;
  font-size: 0.8rem;
}
#role-badge {
  border-radius: 6px !important;
  border-width: 1px !important;
  padding: 0.45rem 0.85rem !important;
  font-size: 0.75rem !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
#role-badge i {
  font-size: 0.5rem;
}
#install-app-btn,
header .rounded-full {
  border-radius: 6px !important;
  padding: 0.45rem 0.85rem !important;
  font-size: 0.75rem !important;
  font-weight: 600;
}
header button[onclick="logout()"] {
  border-radius: 6px !important;
  background: var(--ppanel-3) !important;
  border-color: var(--pborder) !important;
}

/* ══════════ GLASS CARDS → PROFESSIONAL PANELS ══════════ */
.glass-card,
.live-side-card,
.dashboard-card {
  background: var(--ppanel) !important;
  border: 1px solid var(--pborder) !important;
  border-radius: 10px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}
.glass-card::before,
.live-side-card::before {
  display: none !important;
}
.glass-card:hover,
.live-side-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(34, 211, 238, 0.25) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

/* ══════════ STATUS CHIPS ══════════ */
.stat-chip {
  background: var(--ppanel-2) !important;
  border: 1px solid var(--pborder) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 0.9rem 1rem !important;
}
.stat-chip::before {
  width: 2px;
  border-radius: 0;
}

/* ══════════ SYSTEM STATUS CARDS (Live) ══════════ */
.live-side-card {
  padding: 0.9rem 1rem !important;
}
.live-side-card > .flex.h-11.w-11 {
  border-radius: 6px !important;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 0.95rem;
  background: rgba(34, 211, 238, 0.08) !important;
  box-shadow: none !important;
}
.live-side-card .text-xs {
  color: var(--ptext-3) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.62rem !important;
  font-weight: 600;
}
.live-side-card .text-sm.font-semibold {
  font-size: 0.95rem !important;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.01em;
  color: #5eead4 !important;
}
.status-dot {
  width: 7px;
  height: 7px;
  box-shadow: 0 0 6px currentColor;
}
.status-dot-active {
  background: var(--psuccess);
  color: rgba(34, 197, 94, 0.5);
}
.status-dot-offline {
  background: var(--pdanger);
  color: rgba(239, 68, 68, 0.5);
}

/* ══════════ SECTION HEADINGS ══════════ */
.section h2,
.section h3 {
  letter-spacing: 0.01em;
}
.section .text-2xl {
  font-size: 1.25rem !important;
  font-weight: 600;
}
.section > .space-y-6 h3.text-sm,
.section h3.text-sm.font-semibold.uppercase {
  color: var(--paccent) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.16em !important;
  font-weight: 600;
}

/* ══════════ MONITOR LIVE ══════════ */
.live-hero-pane {
  background: #0a0d13 !important;
  border: 1px solid var(--pborder) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.live-hero-media {
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(34, 211, 238, 0.02) !important;
  min-height: 380px !important;
}
.live-hero-badge {
  border-radius: 4px !important;
  border: 1px solid rgba(34, 211, 238, 0.3) !important;
  background: rgba(8, 47, 73, 0.7) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.14em !important;
  padding: 0.35rem 0.6rem !important;
}
.live-hero-stat {
  border-radius: 4px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  font-size: 0.66rem !important;
  font-family: 'JetBrains Mono', monospace;
}
.ptz-mini-btn,
.live-audio-btn {
  border-radius: 5px !important;
  font-size: 0.66rem !important;
  font-weight: 600;
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: var(--pborder) !important;
}
.ptz-mini-btn:hover,
.live-audio-btn:hover {
  background: rgba(34, 211, 238, 0.12) !important;
  border-color: rgba(34, 211, 238, 0.4) !important;
}
.ptz-mini-btn-locked {
  background: rgba(251, 191, 36, 0.15) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
  color: #fde68a !important;
}
#live-status-badge {
  border-radius: 4px !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.05em;
}

/* ── Monitor grid tiles ── */
.live-monitor-tile {
  background: var(--ppanel) !important;
  border: 1px solid var(--pborder) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: none !important;
}
.live-monitor-tile:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(34, 211, 238, 0.35) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}
.live-monitor-tile .glass-overlay {
  border-radius: 4px !important;
  background: rgba(8, 11, 16, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: none !important;
  padding: 0.3rem 0.55rem !important;
}
.live-monitor-tile .glass-overlay .text-xs {
  font-size: 0.66rem !important;
}
.live-monitor-tile .glass-overlay.text-\[10px\] {
  font-size: 0.6rem !important;
  color: rgba(103, 232, 249, 0.85) !important;
}

/* ══════════ FORM CONTROLS ══════════ */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="email"],
select,
textarea {
  background: var(--pbg-deep) !important;
  border: 1px solid var(--pborder) !important;
  border-radius: 6px !important;
  color: var(--ptext) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.3) !important;
  border-color: rgba(34, 211, 238, 0.5) !important;
}
input[type="range"] {
  accent-color: var(--paccent);
}
input[type="checkbox"] {
  accent-color: var(--paccent);
}
label.text-sm.text-slate-300 {
  color: #b6c2d4 !important;
  font-size: 0.78rem !important;
  font-weight: 500;
}

/* ══════════ BUTTONS ══════════ */
.section button {
  border-radius: 6px !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.section button.rounded-full {
  border-radius: 9999px !important;
}
button.rounded-xl,
button.rounded-2xl,
button.rounded-3xl {
  border-radius: 6px !important;
}

/* ══════════ GALLERY CARDS ══════════ */
#gallery-container > div,
#timelapse-container > div,
#camera-list > div {
  background: var(--ppanel) !important;
  border: 1px solid var(--pborder) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}
#gallery-container .overflow-hidden,
#timelapse-container .overflow-hidden,
#camera-list .overflow-hidden {
  border-radius: 6px !important;
}
#gallery-container button,
#timelapse-container button,
#camera-list button {
  border-radius: 5px !important;
  font-size: 0.68rem !important;
}

/* ══════════ SETTINGS PANELS ══════════ */
#settings .rounded-3xl {
  background: var(--ppanel) !important;
  border-color: var(--pborder) !important;
  border-radius: 10px !important;
}
#settings .rounded-3xl h3 {
  font-size: 0.95rem !important;
}
#settings .rounded-2xl,
#settings .rounded-\[24px\] {
  border-radius: 8px !important;
}
#settings .border-slate-800 {
  border-color: var(--pborder) !important;
}
#settings .bg-slate-900\/80,
#settings .bg-slate-950\/80,
#settings .bg-slate-900\/90 {
  background: var(--ppanel-2) !important;
}

/* ══════════ LOGIN ══════════ */
#login-page {
  background: rgba(4, 6, 10, 0.85) !important;
  backdrop-filter: blur(8px);
}
#login-page .rounded-\[32px\] {
  border-radius: 14px !important;
  border-color: var(--pborder) !important;
}
#login-page .bg-gradient-to-br {
  background: linear-gradient(160deg, #0c1622, #0a0d13 60%) !important;
}
#login-page input {
  background: var(--pbg-deep) !important;
  border-radius: 6px !important;
}
#login-page button[type="submit"] {
  border-radius: 6px !important;
}

/* ══════════ TOAST & MODAL ══════════ */
#toast {
  border-radius: 6px !important;
  background: var(--ppanel) !important;
  border: 1px solid rgba(34, 211, 238, 0.25) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}
#video-player-modal .rounded-2xl {
  border-radius: 12px !important;
}

/* ══════════ SCROLLBAR PRO ══════════ */
* {
  scrollbar-width: thin;
  scrollbar-color: #2c3644 var(--pbg-deep);
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: var(--pbg-deep);
}
*::-webkit-scrollbar-thumb {
  background: #2c3644;
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #3a4657;
}

/* ══════════ MISC POLISH ══════════ */
::selection {
  background: rgba(34, 211, 238, 0.25);
  color: #f8fafc;
}
.text-slate-400 {
  color: var(--ptext-2) !important;
}
.text-slate-500 {
  color: var(--ptext-3) !important;
}
.text-slate-200 {
  color: #d4dde8 !important;
}
.text-slate-300 {
  color: #b6c2d4 !important;
}
.border-slate-700 {
  border-color: var(--pborder) !important;
}
.border-slate-800 {
  border-color: var(--pborder-soft) !important;
}
.bg-slate-800 {
  background: var(--ppanel-3) !important;
}
.bg-slate-900 {
  background: var(--ppanel) !important;
}
.bg-slate-900\/40,
.bg-slate-900\/50,
.bg-slate-900\/60,
.bg-slate-900\/70,
.bg-slate-900\/80,
.bg-slate-900\/90 {
  background: var(--ppanel) !important;
}
.bg-slate-950 {
  background: var(--pbg-deep) !important;
}
.bg-slate-950\/40,
.bg-slate-950\/50,
.bg-slate-950\/60,
.bg-slate-950\/70,
.bg-slate-950\/80,
.bg-slate-950\/90 {
  background: var(--pbg-deep) !important;
}

/* ── Footer ── */
#app-main > footer {
  border-color: var(--pborder) !important;
}

/* Responsive polish */
@media (max-width: 767px) {
  .live-hero-media {
    min-height: 0 !important;
  }
}

/* ── Header clock ── */
#header-clock {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ── Sidebar stream status ── */
#sidebar-stream-text {
  font-family: 'JetBrains Mono', monospace;
}
#sidebar .border-t .rounded-lg {
  border-color: var(--pborder) !important;
  background: var(--ppanel) !important;
}