/* ================================================================
   ROMAL — Design Tokens & Styles
   Version: 2.0.0 (clean rebuild)
   ================================================================ */

/* ===== RESET & BASE ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-weight:400;
  background:var(--bg-primary);
  color:var(--text-primary);
  overflow:hidden;
  height:100vh;
  width:100vw;
  line-height:1.5;
}
a{color:var(--accent-brass);text-decoration:none;transition:color .15s}
a:hover{color:var(--accent-brass-hover)}
button{
  font-family:inherit;cursor:pointer;border:none;background:none;
  color:inherit;font-size:inherit;line-height:inherit;
}
input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
::selection{background:rgba(199,162,76,0.3);color:var(--text-primary)}

/* ===== DESIGN TOKENS (single source of truth) ===== */
:root{
  /* Dark theme (default) */
  --bg-primary:#07090E;
  --bg-panel:#0D1017;
  --bg-panel-elevated:#151922;
  --border-subtle:rgba(255,255,255,0.08);
  --border-medium:rgba(255,255,255,0.14);
  --text-primary:#F5F6F8;
  --text-secondary:#9AA3B2;
  --text-muted:#5C6470;
  --accent-brass:#C7A24C;
  --accent-brass-hover:#D9B563;
  --shadow-elevated:0 4px 24px rgba(0,0,0,0.4);

  /* Spacing (4px grid) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;
  --sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px;

  /* Border radius */
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:20px;

  /* Category colors — DO NOT CHANGE */
  --cat-begal:#FF4444;
  --cat-tawuran:#FF8800;
  --cat-jambret:#FFCC00;
  --cat-penodongan:#AA44FF;
  --cat-penganiayaan:#CC0000;
  --cat-sajam:#8B4513;
  --cat-curanmor:#00AAFF;
  --cat-maling:#0044CC;
}

[data-theme="light"]{
  --bg-primary:#F7F7F5;
  --bg-panel:#FFFFFF;
  --bg-panel-elevated:#FFFFFF;
  --border-subtle:rgba(0,0,0,0.08);
  --border-medium:rgba(0,0,0,0.14);
  --text-primary:#14161C;
  --text-secondary:#525862;
  --text-muted:#8A8F99;
  --accent-brass:#9C7A2E;
  --accent-brass-hover:#B5922E;
  --shadow-elevated:0 4px 24px rgba(0,0,0,0.12);
}

/* ===== TYPOGRAPHY ===== */
.logo-wordmark{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:24px;
  letter-spacing:2px;
  color:var(--accent-brass);
  user-select:none;
}
h1,h2,h3,h4,h5,h6,.heading{
  font-family:'Inter',sans-serif;
  font-weight:700;
  color:var(--text-primary);
}
.mono,.bento-value,.card-time,.sb-counter,.inc-counter,.card-accuracy{
  font-family:'Fira Code',monospace;
}

/* ===== ANIMATIONS ===== */
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.15);opacity:.7}
}
@keyframes shimmer{
  0%{background-position:-400px 0}
  100%{background-position:400px 0}
}
@keyframes fadeInScale{
  from{opacity:0;transform:scale(0.8)}
  to{opacity:1;transform:scale(1)}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes toastIn{
  from{opacity:0;transform:translateY(16px) scale(0.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes toastOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(-16px) scale(0.95)}
}
@keyframes spin{
  to{transform:rotate(360deg)}
}
@keyframes glow{
  0%,100%{box-shadow:0 0 4px rgba(199,162,76,0.3)}
  50%{box-shadow:0 0 12px rgba(199,162,76,0.6)}
}

.live-dot{
  width:8px;height:8px;border-radius:50%;
  background:#22c55e;
  animation:pulse 2s ease-in-out infinite;
  display:inline-block;
  flex-shrink:0;
}
.skeleton{
  background:linear-gradient(90deg,var(--bg-panel-elevated) 25%,rgba(255,255,255,0.06) 50%,var(--bg-panel-elevated) 75%);
  background-size:400px 100%;
  animation:shimmer 1.5s ease-in-out infinite;
  border-radius:var(--radius-sm);
  min-height:80px;
  width:100%;
}
.spinner{
  width:20px;height:20px;
  border:2px solid var(--border-subtle);
  border-top-color:var(--accent-brass);
  border-radius:50%;
  animation:spin .6s linear infinite;
}

/* ================================================================
   APP SHELL
   ================================================================ */
#app{
  display:flex;
  flex-direction:column;
  height:100vh;
  width:100vw;
  overflow:hidden;
}

/* ===== HEADER ===== */
#hdr{
  height:64px;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border-subtle);
  display:flex;
  align-items:center;
  padding:0 16px;
  gap:16px;
  z-index:100;
  position:relative;
  flex-shrink:0;
  overflow:hidden;
}
#hdr::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 60% 120% at 8% 50%,rgba(199,162,76,0.10),transparent 70%);
  pointer-events:none;
}
.hbrand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  position:relative;
  z-index:1;
}
.hbrand svg{
  width:28px;height:28px;
  color:var(--accent-brass);
}
.hst{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
  position:relative;
  z-index:1;
}
.live-pill{
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(34,197,94,0.12);
  border:1px solid rgba(34,197,94,0.25);
  border-radius:20px;
  padding:4px 12px;
  font-size:12px;
  font-weight:600;
  color:#22c55e;
  white-space:nowrap;
  animation:glow 3s ease-in-out infinite;
}
.inc-counter{
  font-family:'Fira Code',monospace;
  font-size:12px;
  color:var(--text-muted);
  white-space:nowrap;
}
.hctrl{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
  position:relative;
  z-index:1;
}
.hctrl button{
  width:36px;height:36px;
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-secondary);
  transition:all .15s ease;
}
.hctrl button:hover{
  background:var(--border-subtle);
  color:var(--text-primary);
}
.hctrl button.on{
  color:var(--accent-brass);
  background:rgba(199,162,76,0.12);
}
.hctrl button svg{width:18px;height:18px}
.btn-lapor{
  padding:6px 14px;
  border-radius:var(--radius-sm);
  background:var(--accent-brass);
  color:#000;
  font-size:12px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  transition:all .15s ease;
}
.btn-lapor:hover{
  background:var(--accent-brass-hover);
  transform:translateY(-1px);
}
.btn-lapor svg{width:14px;height:14px}

/* ================================================================
   MAIN LAYOUT
   ================================================================ */
#main{
  flex:1;
  display:flex;
  overflow:hidden;
  position:relative;
}
#mapw{
  flex:1;
  position:relative;
  overflow:hidden;
}
#map{
  position:absolute;
  inset:0;
}

/* ===== MAP OVERLAY ELEMENTS ===== */
.mlayer{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  pointer-events:none;
  z-index:10;
  padding:16px;
}
.mlayer>*{pointer-events:auto}

/* Bento Grid */
#bento-bar{
  position:absolute;
  top:16px;left:16px;z-index:10;
  pointer-events:auto;
}
.btn-bento-toggle{
  display:none;
  background:var(--bg-panel-elevated);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:4px 8px;
  cursor:pointer;
  color:var(--text-secondary);
  margin-bottom:4px;
}
.btn-bento-toggle svg{
  transition:transform .2s ease;
}
.bento{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  max-width:340px;
}
.bento-icon{
  display:flex;
  align-items:center;
  color:var(--accent-brass);
  margin-bottom:4px;
}
.bento-bar.collapsed .bento{
  display:none;
}
.bento-box{
  background:var(--bg-panel-elevated);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:12px 16px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .15s ease,box-shadow .15s ease;
}
.bento-box:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
}
.bento-box.large{grid-column:span 2}
.bento-label{
  font-size:11px;
  font-weight:500;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:4px;
}
.bento-value{
  font-family:'Fira Code',monospace;
  font-size:28px;
  font-weight:600;
  color:var(--accent-brass);
  line-height:1.2;
}
.bento-sub{
  font-size:11px;
  color:var(--text-secondary);
  margin-top:2px;
}
.bento-box:not(.large) .bento-value{
  font-size:20px;
}


/* Time Filter Strip */
.tstrip{
  display:flex;
  gap:4px;
  margin-top:12px;
  max-width:340px;
}
.tstrip button{
  padding:6px 14px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  background:var(--bg-panel-elevated);
  border:1px solid var(--border-subtle);
  color:var(--text-secondary);
  transition:all .15s ease;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.tstrip button:hover{
  color:var(--text-primary);
  border-color:var(--border-medium);
}
.tstrip button.on{
  background:var(--accent-brass);
  color:#000;
  border-color:var(--accent-brass);
}

/* Locate Button */
.btn-locate{
  position:absolute;
  bottom:24px;
  left:16px;
  width:40px;height:40px;
  border-radius:var(--radius-md);
  background:var(--bg-panel-elevated);
  border:1px solid var(--border-subtle);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-secondary);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:all .15s ease;
  box-shadow:0 2px 12px rgba(0,0,0,0.2);
}
.btn-locate:hover{
  color:var(--accent-brass);
  border-color:var(--accent-brass);
  transform:scale(1.05);
}
.btn-locate svg{width:18px;height:18px}

/* Legend — Desktop only (glass surface) */
.legend{
  position:absolute;
  bottom:24px;
  right:420px;
  background:rgba(13,16,23,0.75);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:12px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow:0 4px 24px rgba(0,0,0,0.3);
  transition:right .25s ease;
}
[data-theme="light"] .legend{
  background:rgba(255,255,255,0.8);
  box-shadow:0 4px 24px rgba(0,0,0,0.08);
}
.legend-title{
  font-size:11px;
  font-weight:600;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:2px;
}
.legend-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--text-secondary);
}
.legend-dot{
  width:10px;height:10px;
  border-radius:50%;
  flex-shrink:0;
  box-shadow:0 0 4px rgba(0,0,0,0.3);
}

/* ================================================================
   SIDEBAR
   ================================================================ */
#sb{
  width:400px;
  background:var(--bg-panel);
  border-left:1px solid var(--border-subtle);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  position:relative;
  z-index:20;
  overflow:hidden;
  transition:transform .25s ease;
}
.drag-handle{
  display:none;
  height:24px;
  align-items:center;
  justify-content:center;
  padding:8px 0;
  cursor:grab;
  flex-shrink:0;
}
.drag-handle::after{
  content:'';
  width:32px;height:4px;
  border-radius:2px;
  background:var(--border-medium);
}
.sbhdr{
  padding:16px;
  border-bottom:1px solid var(--border-subtle);
  flex-shrink:0;
}
.sbhdr-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
  gap:8px;
}
.sbhdr-left{
  display:flex;
  align-items:center;
  gap:8px;
}
.sbhdr-left h2{
  font-size:16px;
  font-weight:700;
}
.sbhdr-right{
  display:flex;
  align-items:center;
  gap:8px;
}
.sb-counter{
  font-family:'Fira Code',monospace;
  font-size:12px;
  color:var(--text-muted);
  background:var(--bg-panel-elevated);
  padding:2px 8px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-subtle);
  min-width:28px;
  text-align:center;
}
.btn-accuracy{
  font-size:12px;
  padding:4px 10px;
  border-radius:var(--radius-sm);
  background:var(--bg-panel-elevated);
  border:1px solid var(--border-subtle);
  color:var(--text-secondary);
  transition:all .15s ease;
  white-space:nowrap;
}
.btn-accuracy:hover{
  border-color:var(--border-medium);
  color:var(--text-primary);
}
.btn-accuracy.on{
  background:rgba(199,162,76,0.15);
  border-color:var(--accent-brass);
  color:var(--accent-brass);
}
.btn-collapse{
  width:32px;height:32px;
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  transition:all .15s ease;
}
.btn-collapse:hover{
  background:var(--border-subtle);
  color:var(--text-primary);
}
.btn-collapse svg{width:16px;height:16px}

/* Filter Strip */
.fstrip{
  display:flex;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:2px;
  -ms-overflow-style:none;
}
.fstrip::-webkit-scrollbar{display:none}
.fpill{
  padding:4px 12px;
  border-radius:20px;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  background:var(--bg-panel-elevated);
  border:1px solid var(--border-subtle);
  color:var(--text-secondary);
  transition:all .15s ease;
  flex-shrink:0;
}
.fpill:hover{
  border-color:var(--border-medium);
  color:var(--text-primary);
}
.fpill.on{
  background:var(--accent-brass);
  color:#000;
  border-color:var(--accent-brass);
}
.fpill .fpill-dot{
  width:7px;height:7px;
  border-radius:50%;
  display:inline-block;
  margin-right:4px;
  vertical-align:middle;
}

/* ===== SIDEBAR BODY ===== */
.sbbody{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  scroll-behavior:smooth;
}

/* Date Group */
.date-group-label{
  font-size:11px;
  font-weight:600;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:8px 4px 4px;
  position:sticky;
  top:0;
  background:var(--bg-panel);
  z-index:2;
}

/* ===== CARDS ===== */
.card{
  background:var(--bg-panel-elevated);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:12px 14px;
  position:relative;
  cursor:pointer;
  transition:transform .15s ease-out,box-shadow .15s ease-out,border-color .15s ease;
  border-left:3px solid transparent;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-elevated);
  border-color:var(--border-medium);
}
.card[data-cat="BEGAL"]{border-left-color:var(--cat-begal)}
.card[data-cat="TAWURAN"]{border-left-color:var(--cat-tawuran)}
.card[data-cat="JAMBRET"]{border-left-color:var(--cat-jambret)}
.card[data-cat="PENODONGAN"]{border-left-color:var(--cat-penodongan)}
.card[data-cat="PENGANIAYAAN"]{border-left-color:var(--cat-penganiayaan)}
.card[data-cat="SAJAM"]{border-left-color:var(--cat-sajam)}
.card[data-cat="CURANMOR"]{border-left-color:var(--cat-curanmor)}
.card[data-cat="MALING"]{border-left-color:var(--cat-maling)}
.card-new{animation:fadeInScale .3s ease-out}
.card-src{
  font-size:11px;
  color:var(--text-muted);
  margin-bottom:4px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.card-title{
  font-size:14px;
  font-weight:600;
  color:var(--text-primary);
  margin-bottom:4px;
  line-height:1.4;
}
.card-desc{
  font-size:12px;
  color:var(--text-secondary);
  line-height:1.5;
  margin-bottom:8px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px;
}

/* Badges */
.badge{
  display:inline-block;
  padding:1px 6px;
  border-radius:3px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.badge-alert{background:rgba(255,68,68,0.15);color:#FF4444}
.badge-conflict{background:rgba(255,136,0,0.15);color:#FF8800}
.badge-property{background:rgba(0,170,255,0.15);color:#00AAFF}
.badge-verified{background:rgba(34,197,94,0.15);color:#22c55e}

.card-time{
  font-family:'Fira Code',monospace;
  font-size:11px;
  color:var(--text-muted);
}
.card-accuracy{
  font-family:'Fira Code',monospace;
  font-size:11px;
  color:var(--text-secondary);
}
.card-accuracy .acc-icon{color:var(--accent-brass)}
.card-link{
  font-size:12px;
  font-weight:500;
  color:var(--accent-brass);
  transition:color .15s;
}
.card-link:hover{color:var(--accent-brass-hover)}

/* Sidebar nav */
.sb-nav{
  display:flex;
  gap:16px;
  padding:12px 16px;
  justify-content:center;
  font-size:12px;
  color:var(--text-muted);
  border-top:1px solid var(--border-subtle);
}
.sb-nav a:hover{color:var(--accent-brass)}

/* ================================================================
   MODALS
   ================================================================ */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{
  background:var(--bg-panel);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  padding:32px;
  max-width:420px;
  width:90%;
  box-shadow:0 8px 48px rgba(0,0,0,0.4);
}
.modal h2{
  font-size:20px;
  margin-bottom:12px;
  color:var(--accent-brass);
}
.modal p{
  font-size:13px;
  color:var(--text-secondary);
  line-height:1.7;
  margin-bottom:8px;
}
.modal-close{
  position:absolute;
  top:16px;right:16px;
  width:32px;height:32px;
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  transition:all .15s ease;
}
.modal-close:hover{background:var(--border-subtle);color:var(--text-primary)}
.modal-close svg{width:18px;height:18px}
.modal-link{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-subtle);
  font-size:13px;
  color:var(--text-secondary);
  transition:all .15s ease;
}
.modal-link:hover{
  border-color:var(--accent-brass);
  color:var(--accent-brass);
}

/* ================================================================
   COMMAND BAR
   ================================================================ */
.cmd-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:1000;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:15vh;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
.cmd-overlay.open{opacity:1;pointer-events:auto}
.cmd-box{
  background:var(--bg-panel);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  width:90%;
  max-width:520px;
  box-shadow:0 8px 48px rgba(0,0,0,0.4);
  overflow:hidden;
}
.cmd-input{
  width:100%;
  padding:16px 20px;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:15px;
  outline:none;
}
.cmd-input::placeholder{color:var(--text-muted)}
.cmd-results{
  max-height:300px;
  overflow-y:auto;
  padding:8px;
}
.cmd-item{
  padding:10px 12px;
  border-radius:var(--radius-sm);
  font-size:13px;
  cursor:pointer;
  color:var(--text-secondary);
  transition:all .1s ease;
}
.cmd-item:hover,.cmd-item.active{
  background:var(--bg-panel-elevated);
  color:var(--text-primary);
}
.cmd-hint{
  padding:8px 16px;
  font-size:11px;
  color:var(--text-muted);
  border-top:1px solid var(--border-subtle);
  text-align:center;
}

/* ================================================================
   TOAST
   ================================================================ */
.toast-container{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:2000;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  pointer-events:none;
}
.toast{
  background:var(--bg-panel-elevated);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:10px 20px;
  font-size:13px;
  font-weight:500;
  color:var(--text-primary);
  box-shadow:var(--shadow-elevated);
  animation:toastIn .3s ease-out;
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:360px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.toast.out{animation:toastOut .3s ease-in forwards}
.toast-icon{font-size:16px;flex-shrink:0}

/* ================================================================
   ERROR OVERLAY
   ================================================================ */
#error-overlay{
  position:fixed;
  inset:0;
  background:var(--bg-primary);
  z-index:5000;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:16px;
  text-align:center;
  padding:32px;
}
#error-overlay.hidden{display:none}
#error-overlay h1{font-size:24px;color:var(--accent-brass)}
#error-overlay p{font-size:14px;color:var(--text-secondary);max-width:400px;line-height:1.6}
#error-overlay button{
  padding:10px 24px;
  border-radius:var(--radius-md);
  background:var(--accent-brass);
  color:#000;
  font-weight:600;
  font-size:14px;
  transition:background .15s ease;
}
#error-overlay button:hover{background:var(--accent-brass-hover)}

/* ================================================================
   MAPLIBRE OVERRIDES
   ================================================================ */
.maplibregl-popup-content{
  background:var(--bg-panel-elevated)!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:var(--radius-md)!important;
  padding:12px 14px!important;
  box-shadow:var(--shadow-elevated)!important;
  color:var(--text-primary)!important;
  font-family:'Inter',sans-serif!important;
  font-size:13px!important;
  max-width:280px!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
.maplibregl-popup-tip{border-top-color:var(--bg-panel-elevated)!important}
.maplibregl-popup-close-button{
  color:var(--text-muted)!important;
  font-size:16px!important;
  padding:4px 8px!important;
  line-height:1!important;
}
.maplibregl-popup-close-button:hover{color:var(--text-primary)!important}
.popup-cat{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:4px;
}
.popup-title{font-size:14px;font-weight:600;margin-bottom:4px}
.popup-desc{font-size:12px;color:var(--text-secondary);margin:4px 0;line-height:1.5}
.popup-meta{font-size:11px;color:var(--text-muted)}
.maplibregl-ctrl-attrib{display:none!important}
.maplibregl-ctrl-group{
  background:var(--bg-panel-elevated)!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:var(--radius-md)!important;
  box-shadow:0 2px 12px rgba(0,0,0,0.2)!important;
  backdrop-filter:blur(16px)!important;
}
.maplibregl-ctrl-group button{
  border-color:var(--border-subtle)!important;
}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--border-subtle)!important}
.maplibregl-ctrl button .maplibregl-ctrl-icon{
  filter:invert(1);
}

/* ===== EMPTY STATE ===== */
.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:48px 24px;
  text-align:center;
  color:var(--text-muted);
}
.empty-state svg{width:48px;height:48px;margin-bottom:12px;opacity:0.4}
.empty-state p{font-size:13px;line-height:1.6}

/* ===== SEARCH INPUT ===== */
.ssearch{
  padding:0 16px 12px;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid var(--border-subtle);
  flex-shrink:0;
}
.ssearch svg{color:var(--text-muted);flex-shrink:0}
.ssearch input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:var(--text-primary);
  font-size:13px;
  padding:8px 0;
}
.ssearch input::placeholder{color:var(--text-muted)}

/* ===== SIDEBAR FOOTER ===== */
.sbfoot{
  padding:10px 16px;
  border-top:1px solid var(--border-subtle);
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  flex-shrink:0;
}
.sbfoot-link{
  font-size:11px;
  color:var(--text-muted);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:4px;
  transition:color .15s;
}
.sbfoot-link:hover{color:var(--accent-brass)}

/* ===== ICON BUTTONS ===== */
.btn-icon{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  background:transparent;
  border:1px solid var(--border-subtle);
  color:var(--text-secondary);
  cursor:pointer;
  transition:all .15s ease;
  padding:0;
}
.btn-icon:hover{border-color:var(--accent-brass);color:var(--accent-brass)}
.btn-icon.active{border-color:var(--accent-brass);color:var(--accent-brass);background:rgba(199,162,76,0.1)}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Tablet: 768px - 1024px */
@media(max-width:1024px){
  #sb{
    position:absolute;
    right:0;top:0;bottom:0;
    width:360px;
    z-index:50;
    transform:translateX(100%);
    transition:transform .25s ease;
    box-shadow:-8px 0 32px rgba(0,0,0,0.3);
  }
  #sb.open{transform:translateX(0)}
  #sb.collapsed{transform:translateX(100%)}
  .legend{right:16px!important}
  .btn-collapse svg{transform:rotate(180deg)}
}

/* Mobile: <=767px */
@media(max-width:767px){
  #hdr{height:52px;padding:0 12px;gap:10px}
  .logo-wordmark{font-size:18px;letter-spacing:1px}
  .hst .live-pill span:last-child{display:none}
  .btn-lapor{padding:5px 10px;font-size:11px}
  .btn-lapor span:last-child{display:none}

  #sb{
    position:fixed;
    left:0;right:0;bottom:0;
    top:auto;
    width:100%!important;
    height:auto;
    max-height:85vh;
    border-left:none;
    border-top:1px solid var(--border-subtle);
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    transform:translateY(calc(100% - 120px));
    transition:transform .3s cubic-bezier(0.4,0,0.2,1);
    z-index:50;
    box-shadow:0 -4px 24px rgba(0,0,0,0.3);
  }
  #sb.peek{transform:translateY(calc(100% - 120px))}
  #sb.open{transform:translateY(0)}
  .drag-handle{display:flex}

  .bento{max-width:100%}
  .mlayer{padding:12px}
  .tstrip{max-width:100%;overflow-x:auto}
  .btn-locate{bottom:140px;left:12px}

  /* Hide desktop legend on mobile — use filter chips instead */
  .legend{display:none!important}

  /* Show bento collapse toggle on mobile */

  /* Mobile: bento starts collapsed to give more map space */
  .btn-bento-toggle{display:block}
  .bento-bar.collapsed .bento{display:none}

  .cmd-overlay{padding-top:10vh}
}

/* Desktop: >=1280px */
@media(min-width:1280px){
  #sb{width:400px}
}