/* =========================
   THEME VARIABLES
   ========================= */
:root{
  /* default/anggrek */
  --c-bg1: #f1a7f1;
  --c-bg2: #a4508b;
  --c-text: #ffffff;

  --c-header-bg: #4a2c6a;
  --c-tab-bg: #6a428c;
  --c-tab-hover: #7a539d;
  --c-tab-underline: #e91e63;
  --c-loading: #ff4081;

  --c-stats-bg: #6a428c;
  --c-panel-bg: #5a336a;
  --c-thead-bg: #6a428c;
  --c-border: #7a539d;

  --c-footer-bg: #6a428c;

  --c-btn-grad-start: #e91e63;
  --c-btn-grad-end: #6a428c;
  --c-btn-active-start: #ff4081;
  --c-btn-active-end: #8e24aa;

  --c-mapcontrol-bg: rgba(106,66,140,0.8);
  --c-mapcontrol-bg-hover: rgba(106,66,140,1);

  --c-search-bg: rgba(106,66,140,0.8);
  --c-search-input-bg: #6a428c;
  --c-search-btn-bg: #e91e63;
  --c-search-btn-hover: #d81b60;

  --c-modal-bg: #5a336a;
  --c-modal-input-bg: #6a428c;

  --c-overlayBox: rgba(106,66,140,0.5);
}

/* ocean */
body.theme-ocean{
  --c-bg1:#0f2027; --c-bg2:#203a43; --c-text:#ffffff;
  --c-header-bg:#0b3d5e; --c-tab-bg:#125e8a; --c-tab-hover:#1976a2; --c-tab-underline:#00bcd4;
  --c-loading:#00bcd4;
  --c-stats-bg:#125e8a; --c-panel-bg:#0c2f47; --c-thead-bg:#125e8a; --c-border:#186a8a;
  --c-footer-bg:#0b3d5e;
  --c-btn-grad-start:#00bcd4; --c-btn-grad-end:#125e8a; --c-btn-active-start:#26c6da; --c-btn-active-end:#1e88e5;
  --c-mapcontrol-bg:rgba(18,94,138,0.8); --c-mapcontrol-bg-hover:rgba(18,94,138,1);
  --c-search-bg:rgba(18,94,138,0.8); --c-search-input-bg:#0c2f47; --c-search-btn-bg:#00bcd4; --c-search-btn-hover:#26c6da;
  --c-modal-bg:#0c2f47; --c-modal-input-bg:#125e8a;
  --c-overlayBox:rgba(18,94,138,0.5);
}

/* forest */
body.theme-forest{
  --c-bg1:#0d3b2e; --c-bg2:#1e6f5c; --c-text:#ffffff;
  --c-header-bg:#0c3b2d; --c-tab-bg:#1f6b57; --c-tab-hover:#278a72; --c-tab-underline:#8bc34a;
  --c-loading:#8bc34a;
  --c-stats-bg:#1f6b57; --c-panel-bg:#13483a; --c-thead-bg:#1f6b57; --c-border:#2c8d76;
  --c-footer-bg:#0c3b2d;
  --c-btn-grad-start:#8bc34a; --c-btn-grad-end:#1f6b57; --c-btn-active-start:#a5d66b; --c-btn-active-end:#2e7d32;
  --c-mapcontrol-bg:rgba(31,107,87,0.8); --c-mapcontrol-bg-hover:rgba(31,107,87,1);
  --c-search-bg:rgba(31,107,87,0.8); --c-search-input-bg:#13483a; --c-search-btn-bg:#8bc34a; --c-search-btn-hover:#a5d66b;
  --c-modal-bg:#13483a; --c-modal-input-bg:#1f6b57;
  --c-overlayBox:rgba(31,107,87,0.5);
}

/* carbon */
body.theme-carbon{
  --c-bg1:#0f0f0f; --c-bg2:#2b2b2b; --c-text:#ffffff;
  --c-header-bg:#1f1f1f; --c-tab-bg:#2a2a2a; --c-tab-hover:#3a3a3a; --c-tab-underline:#ff9800;
  --c-loading:#ff9800;
  --c-stats-bg:#2a2a2a; --c-panel-bg:#1c1c1c; --c-thead-bg:#2a2a2a; --c-border:#3d3d3d;
  --c-footer-bg:#1f1f1f;
  --c-btn-grad-start:#ff9800; --c-btn-grad-end:#2a2a2a; --c-btn-active-start:#ffb74d; --c-btn-active-end:#455a64;
  --c-mapcontrol-bg:rgba(58,58,58,0.8); --c-mapcontrol-bg-hover:rgba(58,58,58,1);
  --c-search-bg:rgba(58,58,58,0.8); --c-search-input-bg:#2a2a2a; --c-search-btn-bg:#ff9800; --c-search-btn-hover:#ffb74d;
  --c-modal-bg:#1c1c1c; --c-modal-input-bg:#2a2a2a;
  --c-overlayBox:rgba(58,58,58,0.5);
}

/* =========================
   RESET & BASE
   ========================= */
*{ margin:0; padding:0; box-sizing:border-box; }

body{
  font-family:'Roboto',sans-serif;
  background: linear-gradient(135deg, var(--c-bg1), var(--c-bg2));
  color: var(--c-text);
  line-height:1.6;
  overflow:hidden;
  height:100vh;
  display:flex;
  flex-direction:column;
}

/* =========================
   HEADER & TABS
   ========================= */
header{
  background: var(--c-header-bg);
  color:#fff;
  padding:0 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 2px 10px rgba(0,0,0,0.3);
  position:fixed; width:100%; top:0; height:25px; z-index:1000;
}
.header-left{ display:flex; align-items:center; gap:6px; }
header h1{ font-size:0.8rem; font-weight:500; margin:0; }

.header-left .tab{
  color:#fff; text-align:center; font-size:0.7rem;
  cursor:pointer; padding:3px 8px; background: var(--c-tab-bg);
  border-radius:4px; display:flex; align-items:center; gap:4px;
  transition: background .3s ease, transform .2s ease;
}
.header-left .tab:hover{ background: var(--c-tab-hover); transform: translateY(-1px); }
.header-left .tab.active{ background: var(--c-tab-hover); border-bottom:2px solid var(--c-tab-underline); }
.header-left .tab i{ font-size:0.8rem; }

#loading-icon{ font-size:0.7rem; margin-left:4px; color: var(--c-loading); }
#loading-icon.loading{ display:inline-block !important; animation: spin 1s linear infinite; }
@keyframes spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* =========================
   MAIN LAYOUT
   ========================= */
main{ flex:1; padding-top:25px; padding-bottom:30px; overflow:hidden; }
#map{ width:100%; height:100%; display:block; position:relative; }
#content{ width:100%; height:100%; overflow-y:auto; }
.table-container{ padding:15px; }

/* Stats & Panels */
.earthquake-stats{ background: var(--c-stats-bg); padding:10px; border-radius:8px; margin-bottom:15px; }
.earthquake-stats h3{ font-size:1rem; margin-bottom:8px; color:#e0e0e0; }
.earthquake-stats p{ font-size:0.9rem; margin:5px 0; }
.earthquake-stats span{ font-weight:500; color: var(--c-loading); }

/* Tables */
table{ width:100%; border-collapse:collapse; background: var(--c-panel-bg); border-radius:8px; overflow-y:auto; }
table thead{ background: var(--c-thead-bg); }
table th, table td{ padding:8px; font-size:0.9rem; text-align:left; border-bottom:1px solid var(--c-border); }
table tr:hover{ background: var(--c-thead-bg); cursor:pointer; }

/* Footer */
footer{
  position:fixed; bottom:0; width:100%;
  background: var(--c-footer-bg);
  padding:5px 0; box-shadow:0 -2px 10px rgba(0,0,0,0.3);
  height:30px; z-index:1000; display:flex; justify-content:center; align-items:center;
}
.footer-text{ color:#fff; font-size:0.8rem; font-weight:400; }
.footer-text a{ color:#fff; text-decoration:underline; opacity:.95; }
.footer-text a:hover{ opacity:1; }
.footer-text .sep{ margin:0 6px; opacity:.8; }

/* Quake tabs buttons */
.quake-tab{
  background: linear-gradient(135deg, var(--c-btn-grad-start), var(--c-btn-grad-end));
  color:#fff; border:none; padding:6px 12px; border-radius:20px; font-size:.8rem; font-weight:500;
  cursor:pointer; display:flex; align-items:center; gap:5px;
  box-shadow:0 2px 10px rgba(0,0,0,0.2);
  transition: transform .2s ease, box-shadow .2s ease;
  flex:1; min-width:0;
}
.quake-tab:hover{ transform:translateY(-2px); box-shadow:0 4px 15px rgba(0,0,0,0.3); }
.quake-tab.active{
  background: linear-gradient(135deg, var(--c-btn-active-start), var(--c-btn-active-end));
  box-shadow:0 4px 15px rgba(233,30,99,0.35);
}
.quake-tab i{ font-size:.8rem; }
.button-container{ display:flex; flex-wrap:wrap; justify-content:space-around; gap:5px; margin-bottom:15px; }

/* Modal */
.modal{ display:none; position:fixed; z-index:1200; left:0; top:0; width:100%; height:100%;
  background: rgba(0,0,0,0.7); justify-content:center; align-items:center; }
.modal-content{
  background: var(--c-modal-bg); color:#e0e0e0; padding:20px; border-radius:8px; width:90%; max-width:400px;
  box-shadow:0 8px 20px rgba(0,0,0,0.2);
}
.modal-content h2{ margin-bottom:15px; font-weight:600; }
.modal-content select, .modal-content input{
  background: var(--c-modal-input-bg); color:#fff; border:1px solid var(--c-border);
  padding:8px; border-radius:8px; width:100%; margin-bottom:10px;
}
.close{ color:#e0e0e0; float:right; font-size:24px; cursor:pointer; }
.close:hover{ color:#fff; }

/* Floating toggles */
.history-toggle-container{
  position:fixed; left:10px; bottom:60px; background: var(--c-overlayBox);
  padding:5px 10px; border-radius:5px; z-index:1000; display:flex; align-items:center; color:#fff;
  flex-direction:column; gap:5px;
}
.history-toggle-container.hidden{ display:none; }
.history-toggle-container label{ margin-right:5px; font-size:0.9rem; }
.history-toggle-container input[type="checkbox"]{ width:20px; height:20px; cursor:pointer; }

/* Map controls & Search */
.map-style-control{
  position:fixed; top:35px; left:10px; background: var(--c-mapcontrol-bg);
  padding:8px; border-radius:5px; z-index:1000; cursor:pointer; transition:background .3s ease;
}
.map-style-control:hover{ background: var(--c-mapcontrol-bg-hover); }
.map-style-control i{ font-size:20px; color:#fff; }

.search-container{
  position:fixed; top:35px; right:10px; background: var(--c-search-bg);
  padding:5px; border-radius:5px; z-index:1000; display:flex; gap:5px;
}
.search-container input{
  padding:5px; border:none; border-radius:5px; background: var(--c-search-input-bg); color:#fff; font-size:.9rem;
}
.search-container button{
  background: var(--c-search-btn-bg); color:#fff; border:none; padding:5px 10px; border-radius:5px; cursor:pointer; transition:background .3s ease;
}
.search-container button:hover{ background: var(--c-search-btn-hover); }
.search-container form{ display:flex; gap:5px; margin:0; }
.search-container button{ display:inline-flex; align-items:center; gap:4px; }

/* Section headers */
#history-quakes h3, #prediction-quakes h3, #verified-quakes h3, #pending-quakes h3{
  font-size:1rem; margin-bottom:10px; color:#e0e0e0;
}

/* Section inputs & buttons */
#history-quakes input, #prediction-quakes input, #verified-quakes input, #pending-quakes input{
  background: var(--c-modal-input-bg); color:#fff; border:1px solid var(--c-border); padding:6px; border-radius:5px; font-size:.9rem;
}
#history-quakes button, #prediction-quakes button, #verified-quakes button, #pending-quakes button{
  background: var(--c-search-btn-bg); color:#fff; border:none; padding:6px 12px; border-radius:5px; cursor:pointer; font-size:.9rem; transition:background .3s ease;
}
#history-quakes button:hover, #prediction-quakes button:hover, #verified-quakes button:hover, #pending-quakes button:hover{
  background: var(--c-search-btn-hover);
}

/* Markers (warna tetap untuk konsistensi informasi) */
.quake-marker{ position:relative; border-radius:50%; transform:translate(-50%,-50%); }
.quake-marker.recent{ background:red; }
.quake-marker.historical{ background:orange; }
.quake-marker.prediction{ background:purple; }
.quake-marker.verified{ background:green; }
.quake-marker.blue{ background:blue; border:1px solid #fff; }

/* Labels */
.quake-label{
  background: rgba(255,255,255,0.8); color:#333; padding:4px 8px; border-radius:4px;
  font-size:8px; width:120px; max-width:150px; position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  pointer-events:none; box-shadow:0 2px 4px rgba(0,0,0,0.1); line-height:1.4;
}
.label-item{ display:block; white-space:normal; overflow:hidden; text-overflow:ellipsis; }
.quake-label:hover{ background: rgba(255,255,255,0.95); }
.quake-marker-container{ position:relative; }

/* Mapbox helpers */
.mapbox-quake-marker{ border-radius:50%; border:1px solid #fff; cursor:pointer; }
.mapbox-quake-label{
  position:absolute; background:rgba(255,255,255,0.8); color:#333; padding:2px 5px; border-radius:3px; font-size:8px; white-space:nowrap; pointer-events:none; z-index:1001; top:-25px;
}

/* DYFI FAB */
#dyfiFab{ position:fixed; right:10px; bottom:70px; z-index:1200; }
.dyfi-fab{ background:#ff4081; color:#fff; border:none; border-radius:50%; width:42px; height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.25); }
.dyfi-fab:hover{ filter:brightness(1.05); }
.dyfi-fab i{ font-size:18px; }
.dyfi-btn{ background: var(--c-tab-bg); color:#fff; border:none; padding:6px 10px; border-radius:6px; cursor:pointer; }
.dyfi-btn:hover{ background: var(--c-tab-hover); }

/* AI disclaimer banner */
.banner-disclaimer{
  display:flex; align-items:center; gap:10px; background:#fff3cd; color:#2b1a3a; border:1px solid rgba(0,0,0,0.08); padding:8px 12px; border-radius:8px; margin:8px 0 10px 0;
}
.banner-disclaimer .bd-left-icon{ display:flex; align-items:center; }
.banner-disclaimer .bd-left-icon i{ font-size:14px; }
.banner-disclaimer .bd-content{ font-size:.9rem; line-height:1.4; }
.banner-disclaimer .bd-close{ margin-left:auto; background:transparent; border:none; font-size:18px; line-height:1; cursor:pointer; color:#2b1a3a; opacity:.7; }
.banner-disclaimer .bd-close:hover{ opacity:1; }

/* Legal pages */
.legal-container{
  max-width:820px; margin:60px auto 80px; background: var(--c-panel-bg); color:#e0e0e0; padding:18px 20px; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,0.2);
}
.legal-container h1{ font-size:1.3rem; margin-bottom:10px; }
.legal-container h2{ font-size:1.05rem; margin:14px 0 6px; color:#ffe3f0; }
.legal-container p, .legal-container li{ font-size:.94rem; line-height:1.6; }
.legal-container ul{ padding-left:18px; }

/* THEME PICKER (Setting) */
.theme-grid{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 4px; }
.theme-swatch{
  width:120px; height:68px; border-radius:10px; border:2px solid #fff; cursor:pointer;
  background: linear-gradient(135deg, var(--sw1), var(--sw2));
  display:flex; align-items:flex-end; justify-content:flex-start; padding:8px; color:#fff; opacity:.92;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.theme-swatch:hover{ transform:translateY(-2px); opacity:1; box-shadow:0 4px 14px rgba(0,0,0,0.25); }
.theme-swatch.active{ box-shadow:0 0 0 3px var(--c-tab-underline); }
.theme-swatch span{ font-size:.8rem; text-shadow:0 1px 2px rgba(0,0,0,0.6); }

/* =========================
   WEATHER MODULE
   ========================= */
.weather-controls{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--c-panel-bg); border-radius:10px; padding:8px 10px; margin-bottom:10px;
}
.wc-left{ display:flex; gap:6px; flex-wrap:wrap; }
.wc-btn{
  background: linear-gradient(135deg, var(--c-btn-grad-start), var(--c-btn-grad-end));
  color:#fff; border:none; padding:6px 10px; border-radius:8px; cursor:pointer; font-size:.85rem;
}
.wc-btn:hover{ filter:brightness(1.05); }

.wc-right{ display:flex; align-items:center; gap:8px; }
.wc-label{ font-size:.9rem; }

/* toggle switch */
.switch{ position:relative; display:inline-block; width:42px; height:22px; }
.switch input{ display:none; }
.slider{ position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#999; transition:.2s; border-radius:22px; }
.slider:before{ position:absolute; content:""; height:18px; width:18px; left:2px; bottom:2px; background:white; transition:.2s; border-radius:50%; }
input:checked + .slider{ background:#29b6f6; }
input:checked + .slider:before{ transform:translateX(20px); }

.weather-grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap:10px;
}
.weather-card{
  grid-column: span 12;
  background: var(--c-panel-bg); border-radius:10px; padding:10px; color:#e0e0e0;
}
@media(min-width: 720px){
  #weather-now-card{ grid-column: span 4; }
  #weather-hourly-card{ grid-column: span 8; }
  #weather-marine-card{ grid-column: span 12; }
}
.w-header{ font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.w-now{ display:flex; gap:12px; align-items:flex-start; }
.w-now-big{ font-size:2.6rem; font-weight:800; line-height:1; }
.w-now-big .unit{ font-size:1.2rem; margin-left:4px; opacity:.85; }
.w-now-meta{ display:grid; gap:4px; font-size:.95rem; }

.w-sub{ font-size:.85rem; opacity:.9; margin-top:6px; }

.w-strip{ display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; }
.w-chip{
  min-width:64px; background:rgba(255,255,255,0.06); border:1px solid var(--c-border);
  border-radius:8px; padding:6px; text-align:center; font-size:.8rem;
}
.w-chip .t{ font-weight:700; }
.w-chip .p{ font-size:.75rem; opacity:.9; }
.w-chip .w{ font-size:.75rem; opacity:.9; }

.w-note{ opacity:.85; font-size:.8rem; display:block; margin-top:6px; }
.w-dir{ display:inline-block; padding:0 6px; background:rgba(255,255,255,0.1); border-radius:6px; margin-left:4px; }

.w-marine{ display:grid; gap:4px; font-size:.95rem; }

.radar-controls{
  display:flex; align-items:center; gap:8px; margin-top:10px;
  background: var(--c-panel-bg); padding:8px 10px; border-radius:10px;
}
#radar-slider{ width:220px; }

/* Responsive */
@media screen and (max-width:767px){
  .header-left{ gap:4px; }
  header h1{ font-size:0.7rem; }
  .header-left .tab{ font-size:0.6rem; padding:2px 6px; }
  .header-left .tab i{ font-size:0.7rem; }
  #loading-icon{ font-size:0.6rem; margin-left:3px; }
  .footer-text{ font-size:0.8rem; }
  table th, table td{ font-size:0.8rem; padding:6px; }
  .search-container input{ width:100px; font-size:0.8rem; }
  .quake-tab{ padding:5px 10px; font-size:0.7rem; }
  .quake-tab i{ font-size:0.7rem; }
  .quake-label{ width:100px; max-width:120px; font-size:7px; }
  .earthquake-stats h3{ font-size:0.9rem; }
  .earthquake-stats p{ font-size:0.8rem; }
  .modal-content{ max-width:320px; }
  .weather-grid{ grid-template-columns: 1fr; }
}

@media screen and (max-width:400px){
  header h1{ font-size:0.6rem; }
  .header-left .tab{ font-size:0.5rem; padding:2px 4px; }
  #loading-icon{ font-size:0.5rem; margin-left:2px; }
  .quake-tab{ font-size:0.6rem; padding:4px 8px; }
  table th, table td{ font-size:0.7rem; padding:4px; }
  .earthquake-stats h3{ font-size:0.8rem; }
  .earthquake-stats p{ font-size:0.7rem; }
  .search-container input{ width:80px; font-size:0.7rem; }
  .modal-content{ max-width:280px; padding:15px; }
  .modal-content h2{ font-size:1rem; }
  .history-toggle-container label{ font-size:0.8rem; }
}