:root{
  --bg:#0f1114;
  --panel:#16181b;
  --muted:#9aa3aa;
  --neon:#4ADE80;
  --accent: rgba(74,222,128,0.12);
  --glass: rgba(255,255,255,0.03);
  --card-border: rgba(74,222,128,0.18);
}

/* === LIGHT THEME === */
body[data-theme="light"]{
  --bg:#f6f8fa;
  --panel:#ffffff;
  --muted:#6b7280;
  --neon:#0b9d3f;
  --accent: rgba(11,157,63,0.06);
  --glass: rgba(0,0,0,0.03);
  --card-border: rgba(11,157,63,0.15);
  color:#0b1220;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,Arial;
  background:linear-gradient(180deg,var(--bg),#070809);
  color:#e6eef1;
}

/* === LAYOUT === */
.app{
  display:flex;
  height:100vh;
  overflow:hidden;
}

/* === SIDEBAR (PC) === */
.sidebar{
  width:240px;
  background:linear-gradient(180deg,var(--panel),#121316);
  padding:20px;
  border-right:1px solid rgba(255,255,255,0.02);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.brand .logo{
  width:48px;height:48px;border-radius:10px;
  background:linear-gradient(135deg,var(--neon),rgba(74,222,128,0.6));
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#021;
  box-shadow:0 6px 18px rgba(74,222,128,0.12);
}
.brand-title{font-weight:600;font-size:1.05rem}
.brand-sub{font-size:0.85rem;color:var(--muted)}

.sidebar-section h4{
  font-size:0.8rem;color:var(--neon);margin-bottom:8px;
}
.locations{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.location-item{
  padding:10px;border-radius:10px;cursor:pointer;display:flex;gap:8px;align-items:center;
  color:#d7e9db;background:var(--glass);border:1px solid transparent;
  transition:all .18s;
}
.location-item i{color:var(--neon);width:18px;text-align:center}
.location-item:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.45)}
.location-item.active{
  background:linear-gradient(90deg,rgba(74,222,128,0.06),transparent);
  border:1px solid var(--card-border);
}

.btn{
  padding:8px 10px;border-radius:8px;
  border:1px solid rgba(255,255,255,0.03);
  background:transparent;color:inherit;cursor:pointer;
}

.sidebar-foot{
  margin-top:auto;color:var(--muted);
  font-size:0.82rem;text-align:left;
}

/* === MAIN CONTENT (DASHBOARD) === */
.main{
  flex:1;display:flex;flex-direction:column;
  overflow:auto;padding:24px 28px;
}
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-bottom:18px;
}
.topbar .left{
    display:flex;
    flex-direction:column;
    gap:6px; /* Jarak antara Judul, Label PC, dan Tombol Mobile */
}

#pageTitle{margin:0;font-size:1.15rem;color:var(--neon)}

/* PC Location Label (Class: loc-pc-display) */
.loc-label{
  font-size:0.95rem;color:var(--muted);
  padding:6px 8px;border-radius:8px;
  border:1px solid rgba(255,255,255,0.02);
  display:inline-block; /* Default display PC */
}

/* === NEW LOCATION BUTTONS STYLES (Mobile - Class: loc-mobile-display) === */
.mobile-location-buttons {
    display: none; /* Default: Sembunyikan di PC, diaktifkan di media query HP */
    gap: 10px;
    justify-content: center; 
    width: 100%;
    margin-top: 10px; /* Jarak di bawah judul utama */
}
.loc-btn {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.loc-btn:hover {
    background: var(--accent);
    color: var(--neon);
}
.loc-btn.active {
    background: var(--accent);
    color: var(--neon);
    border-color: var(--neon);
    font-weight: 600;
}
/* =========================================== */

.controls{display:flex;gap:14px;margin-bottom:18px}
.control-card{
  background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
  padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.02);
  min-width:160px;
}

.ctrl-title{font-size:0.84rem;color:var(--muted);margin-bottom:6px}
.ctrl-value{font-weight:600;color:#fff}

.status.ok{color:var(--neon)}

.stations{
  display:flex;gap:18px;align-items:flex-start;
  justify-content:space-between;flex-wrap:wrap;
}

.station{
  background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
  border-radius:14px;padding:18px;border:1px solid var(--card-border);
  min-width:300px;flex:1;max-width:32%;
  box-shadow:0 8px 30px rgba(2,6,3,0.12);
  transition:.18s;
}
.station:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,0.45)}

.station-head{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;
}
.station-title{font-weight:600;color:var(--neon);font-size:1.05rem}
.station-sub{font-size:0.85rem;color:var(--muted)}

.metrics{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}

.metric{
  background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);
  padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);
}
.metric .label{font-size:0.82rem;color:var(--muted);margin-bottom:6px}
.metric .value{
  font-weight:700;font-size:1.05rem;color:#fff;
  display:flex;align-items:center;gap:8px;
}
.metric .unit{font-weight:500;color:var(--muted);font-size:0.9rem}

.section-title{
  margin-top:10px;color:var(--neon);font-weight:600;margin-bottom:8px;
}

.main-foot{
  margin-top:20px;color:var(--muted);font-size:0.85rem;
}

/* === DETAIL PAGE STYLES (Agar kompatibel dengan mobile) === */
.topbar-detail{
    display:flex;justify-content:space-between;align-items:center;
    gap:12px;margin-bottom:18px;
}
.topbar-detail .left{display:flex;flex-direction:column;gap:6px}
.topbar-detail .right{display:flex;gap:10px}


/* === RESPONSIVE CONTROL === */
@media (max-width:1100px){
  .station{max-width:48%}
}
@media (max-width:800px){
  .station{max-width:100%;flex-basis:100%}
  .stations{padding:6px}
}

.hidden{display:none !important;}
/* Hapus elemen mobile lama */
.mobile-only, .mobile-menu{ 
  display:none !important;
}


/* ====================================================== */
/* 1. ATURAN PC (min-width:901px) */
/* ====================================================== */
@media (min-width:901px){
  /* Pastikan elemen mobile tersembunyi di PC */
  .loc-mobile-display{
    display: none !important;
  }
  /* Pastikan elemen PC ditampilkan */
  .loc-pc-display{
    display: inline-block !important; /* Label Lokasi ditampilkan */
  }
}


/* ====================================================== */
/* 2. ATURAN MOBILE (max-width:900px) */
/* ====================================================== */
@media (max-width:760px){
  
  /* Sembunyikan Sidebar */
  .sidebar{display:none}

  /* Hilangkan Grafik di Detail Page */
  .hide-on-mobile {
      display: none !important;
  }

  /* PUSATKAN JUDUL INDEX PAGE DI HP */
  .topbar{
    display:block; 
    text-align:center;
  }
  .topbar .left{
    width:100%;
    align-items:center;
  }
  #pageTitle{
    text-align:center;
    width:100%;
  }
  .topbar .right{
    display:none; /* Sembunyikan 'Last Update' di HP */
  }

  /* KODE KRITIS: ATUR TAMPILAN LOKASI INDEX PAGE */
  .loc-pc-display{
    display:none !important; /* Sembunyikan Teks Lokasi PC di HP */
  }
  .loc-mobile-display{
    display: flex !important; /* Tampilkan tombol Lokasi HP, paksa flex untuk centering */
  }
  
  /* DETAIL PAGE RESPONSIVE */
  .topbar-detail {
    flex-direction: column;
    align-items: center;
  }
  .topbar-detail .left {
    align-items: center;
    text-align: center;
  }
  .topbar-detail .right {
    margin-top: 10px;
    justify-content: center;
  }
  .topbar-detail .loc-label {
    display: block !important;
    margin: 8px auto 0;
  }
}