:root {
      --red:       #DC2626;
      --red-dark:  #991B1B;
      --amber:     #D97706;
      --green:     #16A34A;
      --blue:      #0284C7;
      --gray:      #6B7280;
      --bg:        #0A0F1E;
      --bg2:       #111827;
      --bg3:       #1A2235;
      --border:    #1E2D47;
      --text:      #F1F5F9;
      --text2:     #94A3B8;
      --text3:     #475569;
      --font:      'Inter', sans-serif;
      --nav-h:     64px;
      --topbar-h:  56px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      display: flex;
      flex-direction: column;
      position: relative;
    }

    /* ── TOPBAR ── */
    .topbar {
      height: var(--topbar-h);
      background: var(--bg2);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      flex-shrink: 0;
      position: relative;
      z-index: 10;
    }
    .topbar-brand { display: flex; align-items: center; gap: 10px; }
    .topbar-brand-icon {
      width: 32px; height: 32px; border-radius: 8px;
      background: var(--red);
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
    }
    .topbar-brand-name { font-size: 15px; font-weight: 700; }
    .topbar-brand-dinas { font-size: 11px; color: var(--text2); }
    .topbar-actions { display: flex; align-items: center; gap: 12px; }
    .notif-btn {
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--bg3);
      border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; cursor: pointer; position: relative;
    }
    .notif-dot {
      position: absolute; top: 6px; right: 6px;
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--red);
      border: 2px solid var(--bg2);
    }

    /* ── CONTENT AREA ── */
    .content {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      background: var(--bg);
    }
    .content::-webkit-scrollbar { display: none; }

    /* ── SCREENS ── */
    .screen { display: none; padding: 16px; padding-bottom: calc(var(--nav-h) + 16px); }
    .screen.active { display: block; }

    /* ── LOGIN SCREEN (overlays everything) ── */
    .login-screen {
      position: fixed; inset: 0;
      background: var(--bg);
      z-index: 100;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 32px 24px;
    }
    .login-screen.hidden { display: none; }
    .login-logo {
      width: 72px; height: 72px; border-radius: 20px;
      background: var(--red);
      display: flex; align-items: center; justify-content: center;
      font-size: 36px; margin-bottom: 16px;
      box-shadow: 0 0 40px rgba(220,38,38,0.4);
    }
    .login-title { font-size: 22px; font-weight: 800; margin-bottom: 4px; text-align: center; }
    .login-sub   { font-size: 13px; color: var(--text2); margin-bottom: 32px; text-align: center; }
    .login-form  { width: 100%; display: flex; flex-direction: column; gap: 14px; }
    .inp {
      width: 100%; padding: 14px 16px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 12px;
      color: var(--text); font-size: 15px; font-family: var(--font);
      outline: none; transition: border-color .2s;
    }
    .inp:focus { border-color: var(--red); }
    .inp::placeholder { color: var(--text3); }
    .btn-login {
      width: 100%; padding: 15px;
      background: var(--red); color: white;
      border: none; border-radius: 12px;
      font-size: 16px; font-weight: 700; cursor: pointer;
      transition: background .2s;
    }
    .btn-login:hover { background: var(--red-dark); }
    .login-hint { font-size: 12px; color: var(--text3); text-align: center; margin-top: 4px; }

    /* ── CARDS ── */
    .card {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 16px;
      margin-bottom: 12px;
    }
    .card-title {
      font-size: 13px; font-weight: 700;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 12px;
    }

    /* ── DUTY TOGGLE ── */
    .duty-card {
      background: linear-gradient(135deg, #0F1C2E, #1A2235);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 20px;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .duty-info {}
    .duty-status-label { font-size: 12px; color: var(--text2); margin-bottom: 4px; }
    .duty-name { font-size: 17px; font-weight: 700; }
    .duty-meta { font-size: 12px; color: var(--text2); margin-top: 3px; }

    .duty-toggle-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .duty-toggle {
      width: 64px; height: 34px; border-radius: 17px;
      background: var(--bg2);
      border: 2px solid var(--border);
      position: relative; cursor: pointer;
      transition: background .25s, border-color .25s;
    }
    .duty-toggle.on { background: var(--green); border-color: var(--green); }
    .duty-toggle::after {
      content: '';
      position: absolute;
      top: 3px; left: 3px;
      width: 24px; height: 24px; border-radius: 50%;
      background: white;
      transition: transform .25s;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }
    .duty-toggle.on::after { transform: translateX(30px); }
    .duty-toggle-label { font-size: 11px; color: var(--text2); }

    /* ── INCIDENT CARD ── */
    .incident-card {
      background: rgba(220,38,38,0.08);
      border: 1px solid rgba(220,38,38,0.25);
      border-radius: 16px;
      padding: 16px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: background .15s;
    }
    .incident-card:hover { background: rgba(220,38,38,0.12); }
    .incident-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
    .incident-id { font-size: 11px; font-family: monospace; color: var(--red); font-weight: 700; }
    .incident-badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 8px; border-radius: 100px;
      font-size: 10px; font-weight: 600;
    }
    .badge-enroute { background: rgba(217,119,6,.2); color: #FCD34D; }
    .badge-onscene { background: rgba(234,88,12,.2); color: #FB923C; }
    .badge-avl     { background: rgba(22,163,74,.2);  color: #4ADE80; }
    .incident-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
    .incident-addr  { font-size: 13px; color: var(--text2); margin-bottom: 10px; }
    .incident-meta  { display: flex; gap: 16px; font-size: 12px; color: var(--text2); }
    .incident-meta span { display: flex; align-items: center; gap: 4px; }

    /* ── BIG ACTION BUTTON ── */
    .action-btn {
      width: 100%; padding: 18px;
      border-radius: 16px;
      font-size: 16px; font-weight: 700;
      border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      gap: 8px;
      transition: all .2s;
      margin-bottom: 12px;
    }
    .action-btn-red    { background: var(--red); color: white; }
    .action-btn-red:hover { background: var(--red-dark); }
    .action-btn-green  { background: var(--green); color: white; }
    .action-btn-green:hover { background: #15803D; }
    .action-btn-outline {
      background: transparent; color: var(--text);
      border: 1px solid var(--border);
    }
    .action-btn-outline:hover { border-color: rgba(255,255,255,.3); }

    /* ── STAT ROW ── */
    .stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
    .stat-box {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px;
    }
    .stat-box-val { font-size: 24px; font-weight: 800; }
    .stat-box-lbl { font-size: 11px; color: var(--text2); margin-top: 2px; }

    /* ── MINI MAP ── */
    .mini-map {
      width: 100%; height: 180px;
      background: #0D1526;
      border-radius: 12px;
      border: 1px solid var(--border);
      position: relative; overflow: hidden;
      margin-bottom: 12px;
    }
    .mini-map::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 32px 32px;
    }
    .mini-map-pin {
      position: absolute;
      display: flex; flex-direction: column; align-items: center; gap: 2px;
    }
    .map-pin-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; }
    .map-pin-lbl { font-size: 9px; color: white; background: rgba(0,0,0,.6); padding: 1px 4px; border-radius: 3px; white-space: nowrap; }
    .incident-pin {
      position: absolute;
    }
    .incident-pin-dot {
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--red); box-shadow: 0 0 10px var(--red);
    }
    .incident-pin-ring {
      position: absolute; top: -7px; left: -7px;
      width: 28px; height: 28px; border-radius: 50%;
      border: 2px solid rgba(220,38,38,.5);
      animation: pring 1.8s ease-out infinite;
    }
    @keyframes pring { 0%{transform:scale(.8);opacity:.7} 100%{transform:scale(2.2);opacity:0} }
    .map-label { position: absolute; bottom: 8px; right: 8px; font-size: 10px; color: var(--text3); z-index: 1; }

    /* ── INCIDENT LIST ── */
    .incident-list-item {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: border-color .15s;
      display: flex; align-items: center; gap: 12px;
    }
    .incident-list-item:hover { border-color: rgba(220,38,38,.3); }
    .inc-type-icon {
      width: 40px; height: 40px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; flex-shrink: 0;
    }
    .inc-info { flex: 1; min-width: 0; }
    .inc-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .inc-sub   { font-size: 12px; color: var(--text2); margin-top: 2px; }
    .inc-time  { font-size: 11px; color: var(--text3); flex-shrink: 0; }

    /* ── MAP SCREEN ── */
    .map-full {
      width: 100%;
      height: calc(100vh - var(--topbar-h) - var(--nav-h));
      background: #0D1526;
      position: relative; overflow: hidden;
    }
    .map-full::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 40px 40px;
    }
    .map-overlay-top {
      position: absolute; top: 12px; left: 12px; right: 12px;
      display: flex; gap: 8px; z-index: 5;
    }
    .map-search {
      flex: 1; padding: 10px 14px;
      background: rgba(26,34,53,.9);
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--text); font-size: 13px;
      outline: none;
    }
    .map-btn {
      width: 40px; height: 40px; border-radius: 10px;
      background: rgba(26,34,53,.9);
      border: 1px solid var(--border);
      color: var(--text); font-size: 16px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
    }
    .map-unit-dot {
      position: absolute;
      width: 14px; height: 14px; border-radius: 50%;
      border: 2px solid #0A0F1E;
      cursor: pointer;
    }
    .map-inc-dot {
      position: absolute;
      width: 16px; height: 16px; border-radius: 50%;
      background: var(--red);
      box-shadow: 0 0 12px var(--red);
      cursor: pointer;
    }
    .map-inc-ring {
      position: absolute;
      border-radius: 50%;
      border: 2px solid rgba(220,38,38,.4);
      animation: pring 2s ease-out infinite;
    }
    .map-legend {
      position: absolute; bottom: 12px; left: 12px;
      background: rgba(10,15,30,.85);
      border: 1px solid var(--border);
      border-radius: 10px; padding: 10px 12px;
      z-index: 5;
    }
    .legend-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text2); margin-bottom: 4px; }
    .legend-row:last-child { margin-bottom: 0; }
    .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

    /* ── PROFIL SCREEN ── */
    .profile-header {
      display: flex; align-items: center; gap: 14px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 16px; padding: 16px;
      margin-bottom: 12px;
    }
    .avatar {
      width: 56px; height: 56px; border-radius: 50%;
      background: var(--red);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; font-weight: 700; flex-shrink: 0;
    }
    .profile-name { font-size: 17px; font-weight: 700; }
    .profile-role { font-size: 12px; color: var(--text2); margin-top: 3px; }
    .profile-dinas{ font-size: 12px; color: var(--text3); margin-top: 2px; }

    .menu-item {
      display: flex; align-items: center; gap: 14px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 14px; padding: 15px 16px;
      margin-bottom: 8px; cursor: pointer;
      transition: border-color .15s;
    }
    .menu-item:hover { border-color: rgba(255,255,255,.2); }
    .menu-icon { font-size: 20px; width: 24px; text-align: center; }
    .menu-text { flex: 1; }
    .menu-title { font-size: 14px; font-weight: 600; }
    .menu-sub   { font-size: 12px; color: var(--text2); margin-top: 2px; }
    .menu-arrow { color: var(--text3); font-size: 14px; }

    .menu-item.danger { border-color: rgba(220,38,38,.2); }
    .menu-item.danger .menu-title { color: #FCA5A5; }

    /* ── GPS STATUS BAR ── */
    .gps-bar {
      background: rgba(22,163,74,.1);
      border: 1px solid rgba(22,163,74,.2);
      border-radius: 10px; padding: 10px 14px;
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 12px;
    }
    .gps-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--green);
      animation: blink 1.5s infinite;
      flex-shrink: 0;
    }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
    .gps-text  { flex: 1; font-size: 12px; color: #4ADE80; }
    .gps-coord { font-size: 11px; color: var(--text3); font-family: monospace; }

    /* ── OFFLINE BANNER ── */
    .offline-banner {
      background: rgba(217,119,6,.15);
      border: 1px solid rgba(217,119,6,.3);
      border-radius: 12px; padding: 12px 14px;
      display: flex; align-items: flex-start; gap: 10px;
      margin-bottom: 12px;
    }
    .offline-banner-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
    .offline-banner-title { font-size: 13px; font-weight: 700; color: #FCD34D; }
    .offline-banner-text  { font-size: 12px; color: var(--text2); margin-top: 2px; line-height: 1.5; }

    /* ── DISPATCH ALERT OVERLAY ── */
    .dispatch-overlay {
      position: fixed; inset: 0;
      background: rgba(10,15,30,.95);
      z-index: 200;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 32px 24px;
    }
    .dispatch-overlay.hidden { display: none; }
    .dispatch-pulse {
      font-size: 56px;
      animation: pulse-dispatch 1s ease-in-out infinite;
      margin-bottom: 16px;
    }
    @keyframes pulse-dispatch {
      0%,100% { transform: scale(1); }
      50%      { transform: scale(1.15); }
    }
    .dispatch-title { font-size: 20px; font-weight: 800; color: #FCA5A5; margin-bottom: 6px; text-align: center; }
    .dispatch-sub   { font-size: 14px; color: var(--text2); margin-bottom: 20px; text-align: center; }
    .dispatch-card  {
      width: 100%;
      background: var(--bg3);
      border: 1px solid rgba(220,38,38,.3);
      border-radius: 16px; padding: 18px;
      margin-bottom: 20px;
    }
    .dispatch-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; }
    .dispatch-row .lbl { color: var(--text2); }
    .dispatch-row .val { font-weight: 600; }
    .dispatch-divider { height: 1px; background: var(--border); margin: 8px 0; }
    .dispatch-priority {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(220,38,38,.2);
      color: #FCA5A5;
      border: 1px solid rgba(220,38,38,.3);
      padding: 4px 12px; border-radius: 100px;
      font-size: 12px; font-weight: 700;
      margin-bottom: 16px;
    }
    .dispatch-actions { width: 100%; display: flex; gap: 10px; }
    .btn-accept {
      flex: 1; padding: 16px; border-radius: 12px;
      background: var(--green); color: white;
      font-size: 15px; font-weight: 700; border: none; cursor: pointer;
    }
    .btn-decline {
      flex: 1; padding: 16px; border-radius: 12px;
      background: transparent; color: var(--text2);
      font-size: 15px; font-weight: 600;
      border: 1px solid var(--border); cursor: pointer;
    }

    /* ── BOTTOM NAV ── */
    .bottom-nav {
      height: var(--nav-h);
      background: var(--bg2);
      border-top: 1px solid var(--border);
      display: flex;
      flex-shrink: 0;
      position: relative;
      z-index: 10;
    }
    a.nav-tab {
      text-decoration: none;
      color: inherit;
      -webkit-tap-highlight-color: transparent;
    }
    .nav-tab {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 4px; cursor: pointer;
      position: relative;
      transition: color .15s;
    }
    .nav-tab.active::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--red);
      border-radius: 0 0 2px 2px;
    }
    .nav-tab .tab-icon { font-size: 22px; }
    .nav-tab .tab-label { font-size: 10px; font-weight: 500; color: var(--text3); }
    .nav-tab.active .tab-label { color: var(--red); }

    /* Scrollbar hide */
    .content::-webkit-scrollbar { width: 0; }

    /* Section label */
    .section-label {
      font-size: 11px; font-weight: 700; color: var(--text3);
      text-transform: uppercase; letter-spacing: .08em;
      margin-bottom: 10px; margin-top: 4px;
    }

    /* Separator */
    .sep { height: 1px; background: var(--border); margin: 12px 0; }

    /* ── UTILITIES ── */
    .mt-4  { margin-top: 4px; }
    .mt-8  { margin-top: 8px; }
    .mb-8  { margin-bottom: 8px; }
    .p-0   { padding: 0; }
    .hidden { display: none; }
    .link-card { text-decoration: none; color: inherit; display: block; }
    .text-danger { color: #EF4444; }
    .text-green  { color: #4ADE80; }
    .text-amber  { color: var(--amber); }
    .spacer-8  { height: 8px; }
    .spacer-16 { height: 16px; }
    .app-version { text-align: center; font-size: 11px; color: var(--text3); }

    /* ── DUTY BADGE ── */
    .duty-badge {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 12px; font-weight: 600;
      padding: 3px 10px; border-radius: 100px;
      background: rgba(22,163,74,.2); color: #4ADE80;
    }

    /* ── INCIDENT TYPE ICON BG ── */
    .inc-icon-amber { background: rgba(217,119,6,.15); }
    .inc-icon-green { background: rgba(22,163,74,.15); }

    /* ── INCIDENT CARD VARIANT ── */
    .incident-card-amber {
      background: rgba(217,119,6,.07);
      border-color: rgba(217,119,6,.25);
    }

    /* ── LOGIN THEME BUTTON ── */
    .login-theme-btn {
      position: absolute; top: 16px; right: 16px;
      background: none; border: 1px solid var(--border);
      border-radius: 8px; padding: 5px 8px;
      cursor: pointer; font-size: 14px; color: var(--text);
    }

    /* ── MAP DOT STATUS COLORS ── */
    .map-dot-avl { background: #16A34A; }
    .map-dot-enr { background: #D97706; }
    .map-dot-ons { background: #EA580C; }
    .map-dot-oos { background: #6B7280; }

    /* ── MAP LEGEND DOT COLORS ── */
    .legend-dot-avl { background: #16A34A; }
    .legend-dot-enr { background: #D97706; }
    .legend-dot-ons { background: #EA580C; }
    .legend-dot-inc { background: #DC2626; }

  [data-theme="light"] {
    --bg:     #F1F5F9;
    --bg2:    #FFFFFF;
    --bg3:    #FFFFFF;
    --border: #CBD5E1;
    --text:   #0F172A;
    --text2:  #475569;
    --text3:  #94A3B8;
  }
  [data-theme="light"] .login-screen { background: var(--bg); }
  [data-theme="light"] .duty-card { background: linear-gradient(135deg, #EEF2F7, #F1F5F9); }
  [data-theme="light"] .gps-bar { background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.15); }
  [data-theme="light"] .offline-banner { background: rgba(217,119,6,0.08); }
  [data-theme="light"] .mini-map, [data-theme="light"] .map-full { background: #C8D5E5; }
  [data-theme="light"] .mini-map::before, [data-theme="light"] .map-full::before {
    background-image: linear-gradient(rgba(0,0,0,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.07) 1px, transparent 1px);
  }
  [data-theme="light"] .dispatch-overlay { background: rgba(241,245,249,0.97); }
  [data-theme="light"] .bottom-nav { box-shadow: 0 -1px 4px rgba(0,0,0,0.08); }
  [data-theme="light"] .inp { background: #F8FAFC; border-color: #CBD5E1; color: #0F172A; }
  [data-theme="light"] .inp::placeholder { color: #94A3B8; }
  [data-theme-toggle] { background:none; border:none; padding:5px 8px; cursor:pointer; font-size:14px; color:var(--text); }