:root {
  --municipal-navy: #0b1f3a;
  --municipal-blue: #185adb;
  --municipal-cyan: #1fa6c9;
  --municipal-red: #e83b4d;
  --municipal-green: #20a779;
  --municipal-amber: #f2a93b;
  --surface-soft: #f4f7fb;
  --line-soft: #e4eaf2;
  --text-main: #18263a;
  --text-soft: #6f7f92;
}

body { color: var(--text-main); background: var(--surface-soft); transition: color .2s ease, background-color .2s ease; }
button, input, select, textarea { font: inherit; }
.d-none { display: none !important; }

.loading-screen { position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center; justify-items: center; gap: 1.25rem; background: #f7f9fc; }
.brand-shield { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: #fff; font-size: 31px; background: linear-gradient(145deg, #1d68e5, #0c3e9d); box-shadow: 0 15px 35px rgba(24, 90, 219, .26); }

.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(480px, 1.2fr) minmax(420px, .8fr); background: #fff; }
.auth-visual { position: relative; overflow: hidden; padding: 7vw; display: flex; align-items: center; color: #fff; background: radial-gradient(circle at 18% 16%, rgba(47, 128, 237, .48), transparent 29%), radial-gradient(circle at 92% 78%, rgba(31, 166, 201, .28), transparent 34%), linear-gradient(145deg, #07182e, #0c2d56); }
.auth-visual::before, .auth-visual::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; }
.auth-visual::before { width: 620px; height: 620px; right: -270px; top: -160px; }
.auth-visual::after { width: 380px; height: 380px; left: -170px; bottom: -160px; }
.auth-visual-content { position: relative; z-index: 1; max-width: 690px; }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .8rem; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; background: rgba(255,255,255,.08); font-weight: 700; letter-spacing: .03em; }
.auth-visual h1 { margin: 2rem 0 1rem; max-width: 650px; font-size: clamp(2.8rem, 5vw, 5.4rem); line-height: .98; letter-spacing: -.055em; color: #fff; }
.auth-visual > div > p { max-width: 580px; font-size: 1.22rem; color: #bbcae0; }
.auth-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3.3rem; }
.auth-benefits > div { padding: 1.1rem; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.09); }
.auth-benefits i { display: block; margin-bottom: .7rem; color: #59d2ee; font-size: 1.75rem; }
.auth-benefits strong, .auth-benefits small { display: block; }
.auth-benefits small { color: #aebed4; margin-top: .25rem; }
.auth-form-panel { position: relative; display: grid; place-items: center; padding: 3rem; }
.auth-card { width: 100%; max-width: 430px; }
.brand-lockup { display: flex; align-items: center; gap: 1rem; }
.brand-lockup span, .brand-lockup strong { display: block; }
.brand-lockup span { color: var(--text-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; }
.brand-lockup strong { font-size: 1.15rem; }
.auth-card h2 { font-size: 2.1rem; letter-spacing: -.035em; }
.input-icon { position: relative; }
.input-icon i { position: absolute; z-index: 2; left: 14px; top: 50%; transform: translateY(-50%); color: #8493a7; font-size: 1.2rem; }
.input-icon .form-control { height: 52px; padding-left: 44px; border-radius: 12px; }
.auth-help { margin: 1rem 0 0; text-align: center; color: var(--text-soft); font-size: .84rem; }
.theme-switch { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .55rem .8rem; color: var(--text-main); border: 1px solid var(--line-soft); border-radius: 99px; background: rgba(255,255,255,.82); box-shadow: 0 6px 18px rgba(31,49,75,.06); transition: transform .18s ease, border-color .18s ease, background-color .18s ease; }
.theme-switch:hover { transform: translateY(-1px); border-color: #a8c3e9; }
.theme-switch i { color: var(--municipal-blue); font-size: 1.15rem; }
.theme-switch span { font-size: .78rem; font-weight: 800; }
.auth-theme-switch { position: absolute; z-index: 3; top: 24px; right: 24px; }
.theme-icon-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.theme-icon-button:hover { transform: translateY(-1px); color: var(--municipal-blue); border-color: var(--line-soft); background: var(--surface-soft); }

.main-menu { background: linear-gradient(180deg, #07182e, #0a2748); }
.municipal-logo { height: 76px; padding: 0 18px; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.municipal-logo a { width: 100%; display: flex; align-items: center; gap: .75rem; color: #fff; }
.logo-mark { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #2f80ed, #1555b6); font-size: 23px; }
.logo-copy { min-width: 0; }
.logo-copy strong, .logo-copy small { display: block; white-space: nowrap; }
.logo-copy strong { font-size: .96rem; color: #fff; }
.logo-copy small { font-size: .7rem; color: #8facd0; }
.menu-scroll { height: calc(100vh - 155px); overflow-y: auto; }
.app-menu .menu-title { color: #6786aa; letter-spacing: .1em; }
.app-menu .menu-link { margin: 3px 10px; border-radius: 10px; color: #adc0d7; }
.app-menu .menu-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.app-menu .menu-link.active { color: #fff; background: linear-gradient(90deg, rgba(47,128,237,.3), rgba(47,128,237,.09)); box-shadow: inset 3px 0 #4e9bff; }
.sidebar-status { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: .7rem; padding: .8rem; color: #c7d6e8; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.045); border-radius: 12px; }
.sidebar-status strong, .sidebar-status small { display: block; }
.sidebar-status small { color: #7895b7; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #2bd398; box-shadow: 0 0 0 5px rgba(43,211,152,.12); }

.navbar-custom { border-bottom: 1px solid var(--line-soft); background: #fff; box-shadow: 0 4px 18px rgba(24,38,58,.035); }
.topbar-context span, .topbar-context strong { display: block; line-height: 1.2; }
.topbar-context span { color: var(--text-soft); font-size: .72rem; }
.topbar-context strong { font-size: .95rem; }
.topbar-action { position: relative; border: 0; background: transparent; font-size: 1.5rem; }
.noti-dot { position: absolute; width: 9px; height: 9px; top: 12px; right: 9px; border-radius: 50%; background: var(--municipal-red); border: 2px solid #fff; }
.live-clock { align-items: center; gap: .35rem; padding: .4rem .8rem; color: var(--text-soft); border: 1px solid var(--line-soft); border-radius: 99px; }
.nav-user { display: flex; align-items: center; gap: .65rem; border: 0; background: transparent; text-align: left; }
.nav-user strong, .nav-user small { display: block; line-height: 1.2; }
.nav-user small { color: var(--text-soft); font-size: .7rem; }
.avatar-circle { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 800; background: linear-gradient(145deg, #2f80ed, #0d479c); }
.dropdown-header strong, .dropdown-header small { display: block; }
.dropdown-header small { color: var(--text-soft); }
.content-area { min-height: calc(100vh - 136px); padding: 1.5rem; }
.footer { border-top: 1px solid var(--line-soft); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.page-head .eyebrow-text { margin-bottom: .3rem; color: var(--municipal-blue); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.page-head h1 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.3rem); letter-spacing: -.04em; }
.page-head p { margin: .35rem 0 0; color: var(--text-soft); }
.page-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.btn { border-radius: 9px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.metric-card { position: relative; overflow: hidden; min-height: 142px; padding: 1.25rem; border: 1px solid var(--line-soft); border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(31,49,75,.045); }
.metric-card::after { content: ""; position: absolute; width: 95px; height: 95px; right: -28px; top: -28px; border-radius: 50%; background: var(--metric-tint, #eef4ff); }
.metric-icon { position: relative; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--metric-color, var(--municipal-blue)); background: var(--metric-tint, #eef4ff); font-size: 1.45rem; }
.metric-value { display: block; margin-top: 1rem; font-size: 2rem; line-height: 1; font-weight: 800; letter-spacing: -.045em; }
.metric-label { display: block; margin-top: .35rem; color: var(--text-soft); }
.metric-card.danger { --metric-color: #df3c4d; --metric-tint: #fff0f2; }
.metric-card.success { --metric-color: #149d70; --metric-tint: #eaf9f4; }
.metric-card.warning { --metric-color: #d78a16; --metric-tint: #fff6e7; }

.panel { height: 100%; border: 1px solid var(--line-soft); border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(31,49,75,.04); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line-soft); }
.panel-header h2, .panel-header h3 { margin: 0; font-size: 1.03rem; }
.panel-body { padding: 1.2rem; }
.section-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr); gap: 1rem; margin-bottom: 1rem; }
.chart-box { min-height: 285px; }

.alert-list { display: grid; gap: .7rem; }
.alert-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .8rem; padding: .85rem; border: 1px solid var(--line-soft); border-radius: 12px; cursor: pointer; transition: .18s ease; }
.alert-row:hover { transform: translateY(-1px); border-color: #aac8f2; box-shadow: 0 7px 18px rgba(31,73,125,.08); }
.alert-symbol { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--municipal-red); font-size: 1.25rem; }
.alert-row strong, .alert-row small { display: block; }
.alert-row small { margin-top: .2rem; color: var(--text-soft); }
.alert-time { text-align: right; color: var(--text-soft); font-size: .78rem; }
.status-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .55rem; border-radius: 99px; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.status-new { color: #b62435; background: #ffecef; }
.status-acknowledged { color: #a36709; background: #fff4de; }
.status-dispatched { color: #1457ad; background: #eaf2ff; }
.status-responding { color: #5d3eb3; background: #f1ecff; }
.status-resolved { color: #087353; background: #e7f8f1; }
.status-false_alarm { color: #65758a; background: #edf1f5; }

.filter-bar { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-bottom: 1rem; padding: .85rem; border: 1px solid var(--line-soft); border-radius: 14px; background: #fff; }
.filter-bar .search-field { min-width: 260px; flex: 1; }
.alert-board { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .85rem; }
.alert-card { position: relative; padding: 1rem; border: 1px solid var(--line-soft); border-radius: 15px; background: #fff; cursor: pointer; transition: .18s ease; }
.alert-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26,54,91,.09); }
.alert-card-top { display: flex; justify-content: space-between; gap: .5rem; }
.alert-card-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: var(--municipal-red); font-size: 1.4rem; }
.alert-card h3 { margin: .85rem 0 .25rem; font-size: 1.05rem; }
.alert-meta { display: grid; gap: .35rem; margin-top: .85rem; color: var(--text-soft); font-size: .8rem; }
.alert-meta span { display: flex; align-items: center; gap: .4rem; }

.detail-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(340px,.75fr); gap: 1rem; }
.video-stage { min-height: 410px; position: relative; overflow: hidden; display: grid; place-items: center; color: #fff; border-radius: 16px; background: radial-gradient(circle at center, #183756, #071522 70%); }
.video-stage video { width: 100%; height: 100%; max-height: 540px; object-fit: cover; }
.video-placeholder { max-width: 430px; padding: 2rem; text-align: center; }
.video-placeholder i { font-size: 4rem; color: #599ce9; }
.video-placeholder h3 { color: #fff; }
.video-placeholder p { color: #a5bad1; }
.live-pill { position: absolute; top: 14px; left: 14px; z-index: 2; padding: .38rem .7rem; border-radius: 99px; color: #fff; background: rgba(220,47,65,.9); font-weight: 800; font-size: .72rem; }
.alert-contact { display: flex; gap: .8rem; align-items: center; padding: .9rem; border-radius: 12px; background: #f4f7fb; }
.alert-contact i { font-size: 1.7rem; color: var(--municipal-blue); }
.alert-contact strong, .alert-contact small { display: block; }
.timeline { position: relative; display: grid; gap: 1rem; padding-left: 1.2rem; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--line-soft); }
.timeline-item { position: relative; }
.timeline-item::before { content: ""; position: absolute; left: -1.2rem; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--municipal-blue); box-shadow: 0 0 0 4px #eaf2ff; }
.timeline-item strong, .timeline-item small { display: block; }
.timeline-item small { color: var(--text-soft); }

.map-shell { position: relative; min-height: 640px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 16px; background: #dce8f4; }
.map-canvas { position: absolute; inset: 0; z-index: 1; }
.map-panel { position: absolute; z-index: 500; top: 14px; left: 14px; width: min(340px, calc(100% - 28px)); max-height: calc(100% - 28px); overflow: auto; padding: 1rem; border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 12px 34px rgba(16,46,79,.18); backdrop-filter: blur(10px); }
.sector-list { display: grid; gap: .55rem; }
.sector-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; padding: .7rem; border: 1px solid var(--line-soft); border-radius: 11px; background: #fff; cursor: pointer; }
.sector-color { width: 13px; height: 36px; border-radius: 5px; }
.sector-item strong, .sector-item small { display: block; }
.sector-item small { color: var(--text-soft); }
.map-hint { padding: .75rem; border-radius: 10px; color: #355778; background: #edf5ff; font-size: .8rem; }
.leaflet-container { font-family: inherit; }

.operator-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .85rem; }
.operator-card { padding: 1rem; border: 1px solid var(--line-soft); border-radius: 15px; background: #fff; }
.operator-head { display: flex; align-items: center; gap: .7rem; }
.operator-head .avatar-circle { flex: 0 0 44px; width: 44px; height: 44px; }
.operator-head strong, .operator-head small { display: block; }
.operator-head small { color: var(--text-soft); }
.operator-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .9rem; }
.operator-stats span { padding: .65rem; border-radius: 10px; background: #f4f7fb; font-size: .78rem; }

.responsive-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.responsive-table th { padding: .75rem; color: #748399; font-size: .72rem; text-transform: uppercase; letter-spacing: .055em; background: #f6f8fb; border-bottom: 1px solid var(--line-soft); }
.responsive-table td { padding: .82rem .75rem; vertical-align: middle; border-bottom: 1px solid var(--line-soft); }
.responsive-table tbody tr:hover { background: #fafcff; }
.user-cell { display: flex; align-items: center; gap: .65rem; }
.user-cell strong, .user-cell small { display: block; }
.user-cell small { color: var(--text-soft); }
.empty-state { padding: 3rem 1.5rem; text-align: center; color: var(--text-soft); }
.empty-state i { display: block; margin-bottom: .8rem; font-size: 3rem; color: #a5b8cd; }

.attendance-hero { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: 1rem; margin-bottom: 1rem; }
.attendance-action { padding: 1.4rem; color: #fff; border-radius: 16px; background: linear-gradient(135deg, #0c3158, #155ca8); }
.attendance-action h2 { color: #fff; }
.attendance-action p { color: #c1d5e9; }
.location-status { display: flex; align-items: center; gap: .7rem; margin: 1rem 0; padding: .75rem; border-radius: 11px; background: rgba(255,255,255,.1); }
.pulse-dot { width: 11px; height: 11px; border-radius: 50%; background: #37dfa6; box-shadow: 0 0 0 6px rgba(55,223,166,.12); }

.audit-feed { display: grid; gap: .65rem; }
.audit-entry { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .75rem; align-items: start; padding: .8rem; border: 1px solid var(--line-soft); border-radius: 12px; }
.audit-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--municipal-blue); background: #edf4ff; }
.audit-entry strong, .audit-entry small { display: block; }
.audit-entry small { color: var(--text-soft); }

.modal-content { border: 0; border-radius: 16px; box-shadow: 0 25px 75px rgba(7,24,46,.24); }
.modal-header, .modal-footer { padding: 1.15rem 1.3rem; }
.modal-body { padding: 1.3rem; }
.form-section { margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--line-soft); border-radius: 12px; }
.form-section-title { margin-bottom: .8rem; font-weight: 800; }
.check-list { display: grid; gap: .5rem; max-height: 260px; overflow: auto; }
.check-row { display: flex; align-items: center; gap: .65rem; padding: .65rem; border: 1px solid var(--line-soft); border-radius: 10px; }

[data-bs-theme="dark"] {
  --municipal-blue: #62a0ff;
  --municipal-cyan: #45c1df;
  --municipal-red: #ff6070;
  --municipal-green: #42d2a3;
  --municipal-amber: #ffc267;
  --surface-soft: #08111f;
  --line-soft: #26364a;
  --text-main: #e8eef7;
  --text-soft: #9aabc1;
  --bs-body-color: #e8eef7;
  --bs-body-bg: #08111f;
  --bs-secondary-bg: #111e30;
  --bs-tertiary-bg: #17263a;
  --bs-border-color: #2a3b51;
  --bs-heading-color: #f4f7fb;
}

[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .page-content,
[data-bs-theme="dark"] .content-area { background: var(--surface-soft); }
[data-bs-theme="dark"] .loading-screen { background: #08111f; }
[data-bs-theme="dark"] .auth-page { background: #08111f; }
[data-bs-theme="dark"] .auth-form-panel { background: radial-gradient(circle at 90% 10%, rgba(24,90,219,.14), transparent 32%), #0b1626; }
[data-bs-theme="dark"] .auth-card { padding: 1.5rem; border: 1px solid rgba(124,153,190,.16); border-radius: 22px; background: rgba(17,30,48,.72); box-shadow: 0 24px 70px rgba(0,0,0,.22); backdrop-filter: blur(16px); }
[data-bs-theme="dark"] .theme-switch { color: #e8eef7; border-color: #31445c; background: rgba(17,30,48,.88); box-shadow: 0 8px 25px rgba(0,0,0,.2); }
[data-bs-theme="dark"] .theme-switch:hover { border-color: #5d8ecf; background: #17263a; }
[data-bs-theme="dark"] .navbar-custom { border-color: var(--line-soft); background: #0e1a2b; box-shadow: 0 4px 24px rgba(0,0,0,.18); }
[data-bs-theme="dark"] .footer { color: var(--text-soft); background: #0e1a2b; }
[data-bs-theme="dark"] .topbar-action,
[data-bs-theme="dark"] .nav-user,
[data-bs-theme="dark"] .button-toggle-menu { color: #dbe5f2; }
[data-bs-theme="dark"] .noti-dot { border-color: #0e1a2b; }
[data-bs-theme="dark"] .panel,
[data-bs-theme="dark"] .metric-card,
[data-bs-theme="dark"] .filter-bar,
[data-bs-theme="dark"] .alert-card,
[data-bs-theme="dark"] .operator-card,
[data-bs-theme="dark"] .sector-item,
[data-bs-theme="dark"] .audit-entry { border-color: var(--line-soft); background: #111e30; box-shadow: 0 10px 30px rgba(0,0,0,.14); }
[data-bs-theme="dark"] .metric-card::after { opacity: .18; }
[data-bs-theme="dark"] .metric-icon { background: color-mix(in srgb, var(--metric-color, var(--municipal-blue)) 18%, #111e30); }
[data-bs-theme="dark"] .alert-row:hover,
[data-bs-theme="dark"] .alert-card:hover,
[data-bs-theme="dark"] .responsive-table tbody tr:hover { background: #17263a; }
[data-bs-theme="dark"] .alert-contact,
[data-bs-theme="dark"] .operator-stats span { background: #17263a; }
[data-bs-theme="dark"] .timeline-item::before { box-shadow: 0 0 0 4px #1b3556; }
[data-bs-theme="dark"] .map-shell { background: #111c28; }
[data-bs-theme="dark"] .map-panel { color: var(--text-main); border: 1px solid #30445c; background: rgba(14,26,43,.94); box-shadow: 0 18px 42px rgba(0,0,0,.38); }
[data-bs-theme="dark"] .map-hint { color: #b9d6fb; background: #172d49; }
[data-bs-theme="dark"] .leaflet-tile-pane { filter: grayscale(.12) brightness(.6) contrast(1.22) saturate(.85); }
[data-bs-theme="dark"] .leaflet-control-zoom a,
[data-bs-theme="dark"] .leaflet-control-layers,
[data-bs-theme="dark"] .leaflet-popup-content-wrapper,
[data-bs-theme="dark"] .leaflet-popup-tip { color: #e8eef7; border-color: #34465d; background: #142238; }
[data-bs-theme="dark"] .leaflet-control-attribution { color: #9fb0c6; background: rgba(8,17,31,.82); }
[data-bs-theme="dark"] .leaflet-control-attribution a { color: #78adff; }
[data-bs-theme="dark"] .responsive-table th { color: #9fb0c6; background: #17263a; }
[data-bs-theme="dark"] .responsive-table td { color: #dce5f0; }
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .toast { color: var(--text-main); border: 1px solid var(--line-soft); background: #111e30; }
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer,
[data-bs-theme="dark"] .dropdown-divider { border-color: var(--line-soft); }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text { color: #e8eef7; border-color: #31445c; background-color: #0b1727; }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus { border-color: #5f99eb; background-color: #0d1a2b; box-shadow: 0 0 0 .18rem rgba(98,160,255,.16); }
[data-bs-theme="dark"] .form-control::placeholder { color: #77899f; }
[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .bg-light { color: #e7edf6 !important; border-color: #304259; background-color: #1a2a3e !important; }
[data-bs-theme="dark"] .btn-light:hover { border-color: #45617f; background-color: #22364f !important; }
[data-bs-theme="dark"] .text-dark { color: #e8eef7 !important; }
[data-bs-theme="dark"] .status-new { color: #ffadb5; background: #48202a; }
[data-bs-theme="dark"] .status-acknowledged { color: #ffd18a; background: #46341d; }
[data-bs-theme="dark"] .status-dispatched { color: #a8ccff; background: #1b3658; }
[data-bs-theme="dark"] .status-responding { color: #cfbaff; background: #332750; }
[data-bs-theme="dark"] .status-resolved { color: #85e8c4; background: #173e34; }
[data-bs-theme="dark"] .status-false_alarm { color: #bdc9d8; background: #293647; }
[data-bs-theme="dark"] .audit-icon { color: #8ab9ff; background: #193354; }
[data-bs-theme="dark"] .empty-state i { color: #61758e; }

@media (prefers-reduced-motion: reduce) {
  body, .theme-switch, .theme-icon-button { transition: none; }
}

@media (max-width: 1199px) {
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .alert-board, .operator-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .section-grid, .detail-layout { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-form-panel { min-height: 100vh; }
  .main-menu { transform: translateX(-100%); transition: transform .22s ease; z-index: 1100; }
  body.menu-open .main-menu { transform: translateX(0); }
  body.menu-open::after { content: ""; position: fixed; inset: 0; z-index: 1050; background: rgba(4,16,30,.46); }
  .page-content { margin-left: 0 !important; }
  .map-shell { min-height: 560px; }
}

@media (max-width: 700px) {
  .content-area { padding: 1rem; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .page-actions, .page-actions .btn { width: 100%; }
  .metric-grid, .alert-board, .operator-grid, .attendance-hero { grid-template-columns: 1fr; }
  .metric-card { min-height: 125px; }
  .filter-bar > * { width: 100%; }
  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
  .responsive-table thead { display: none; }
  .responsive-table tr { padding: .8rem; border-bottom: 1px solid var(--line-soft); }
  .responsive-table td { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border: 0; }
  .responsive-table td::before { content: attr(data-label); color: var(--text-soft); font-size: .72rem; text-transform: uppercase; }
  .map-panel { top: 8px; left: 8px; width: calc(100% - 16px); max-height: 46%; }
  .video-stage { min-height: 300px; }
}