/* ════════════════════════════════════════════════
   AquaMonitor Pro — style.css
   Water Quality Monitoring Dashboard
   © 2025 AquaMonitor
════════════════════════════════════════════════ */

/* ── CSS VARIABLES (WATER THEME UPGRADE) ── */
:root {
  --bg: #031827;
  --bg2: rgba(4, 24, 42, 0.78);
  --bg3: rgba(0, 240, 255, 0.08);

  --sidebar: linear-gradient(
    180deg,
    #103a58,
    #0b2f49,
    #08263d
);
  --border: rgba(0, 240, 255, 0.18);

  --accent: #00f0ff;
  --accent2: #00c2ff;
  --accent3: #0077ff;

  --green: #00ffcc;
  --yellow: #ffe066;
  --red: #ff6b81;
  --orange: #ff9f43;
  --purple: #a29bfe;

  --text: #e6fbff;
  --text2: #9ccfe0;
  --text3: #6fa8bd;

  --card: rgba(255,255,255,0.07);
  --card-border: rgba(0,240,255,0.20);

  --glow: 0 0 25px rgba(0, 240, 255, 0.25),
          0 0 50px rgba(0, 180, 255, 0.15);

  --sidebar-w: 260px;
}

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

html,
body {
  height: 100%;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  overflow: hidden;

  /* 🌊 Gradient utama (lebih soft) */
  background: linear-gradient(
    135deg,
    #031f33 0%,
    #053a5f 40%,
    #065a7a 70%,
    #022c47 100%
  );

  /* efek glow lembut */
  position: relative;
}

body::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0,240,255,0.15), transparent 70%);
  top: -150px;
  left: -150px;
  z-index: 0;
  filter: blur(80px);
}

body::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0,180,255,0.12), transparent 70%);
  bottom: -150px;
  right: -150px;
  z-index: 0;
  filter: blur(80px);
}

/* ══════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════ */
#sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform 0.3s ease;
   backdrop-filter: blur(16px);
}

/* Logo area */
.sidebar-logo{
    padding:24px 20px 18px;

    background:
        linear-gradient(
            180deg,
            rgba(18,62,92,.98) 0%,
            rgba(13,47,73,.98) 45%,
            rgba(8,38,61,.98) 100%
        );

    border-bottom:1px solid rgba(0,240,255,.22);

    box-shadow:
        inset 0 -1px 0 rgba(255,255,255,.05),
        inset 0 0 60px rgba(0,240,255,.08),
        0 12px 30px rgba(0,0,0,.35);

    position:relative;
    overflow:hidden;
}

.sidebar-logo::before{
    content:"";
    position:absolute;

    width:220px;
    height:220px;

    top:-90px;
    left:50%;
    transform:translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(0,240,255,.18) 0%,
            rgba(150,80,255,.12) 35%,
            transparent 72%
        );

    filter:blur(22px);

    pointer-events:none;
}

/* Container tetap */
.logo-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/* Kotak logo */
.logo-badge {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* HAPUS batasan aneh sebelumnya */
.logo-badge .badge-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* DEFAULT ukuran gambar */
.logo-badge .badge-icon img {
  width: 50%;
  height: 50%;
  object-fit: contain;
}

/* 🔥 CUSTOM PER LOGO */
.logo-badge.campus img {
  width: 100%;   /* kampus lebih besar */
  height: 100%;
}

.logo-badge.riset img{

    width:170%;
    height:170%;

    object-fit:contain;

    filter:
        brightness(1.35)
        contrast(1.45)
        saturate(1.5)

        drop-shadow(0 0 8px rgba(255,0,255,.45))
        drop-shadow(0 0 18px rgba(0,240,255,.28));
}
.logo-badge{

    width:60px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.05),
            rgba(0,240,255,.02)
        );

    border:1px solid rgba(0,240,255,.14);

    backdrop-filter:blur(10px);

    transition:.3s;
}

.logo-badge.kemdikbud img {
  width: 95%;
  height: 95%;
  object-fit: contain;

  filter:
    brightness(1.15)
    contrast(1.15)
    saturate(1.2)
    drop-shadow(0 0 8px rgba(255,255,255,.25))
    drop-shadow(0 0 14px rgba(0,240,255,.20));
}

.sidebar-title {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  text-align: center;
  letter-spacing: 1px;
}

.sidebar-sub {
  font-size: 10px;
  color: var(--text3);
  text-align: center;
}

/* Navigation */
.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.nav-section {
  font-size: 9px;
  color: var(--text3);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 10px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  font-size: 13.5px;
  color: var(--text2);
  font-weight: 500;
  border: 1px solid transparent;
}

.nav-item:hover {
  background: var(--bg3);
  color: var(--text);
  border-color: var(--border);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(0,229,255,0.12), rgba(0,180,216,0.06));
  color: var(--accent);
  border-color: rgba(0,229,255,0.25);
  box-shadow: 0 0 12px rgba(0,229,255,0.08);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}

.nav-icon {
  font-size: 16px;
  width: 22px;
  text-align: center;
}

.sensor-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: auto;
  animation: pulse 2s infinite;
}

/* Footer */
.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border);
}

.lang-switch {
  display: flex;
  gap: 6px;
}

.lang-btn {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'DM Sans', sans-serif;
}

.lang-btn.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

.sidebar-version {
  font-size: 9px;
  color: var(--text3);
  text-align: center;
  margin-top: 10px;
}

/* ══════════════════════════════════════════════
   MAIN LAYOUT
══════════════════════════════════════════════ */
#main {
  margin-left: var(--sidebar-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Topbar */
#topbar {
  padding: 0 28px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.topbar-left-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.topbar-title {
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 1px;
}

.topbar-sub {
  font-size: 11px;
  color: var(--text3);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

#realtime-clock {
  font-family: 'Space Mono', monospace;
  font-size: 22px;
  color: var(--accent);
  letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(0,229,255,0.4);
}

#realtime-date {
  font-size: 11px;
  color: var(--text3);
  text-align: right;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 9px 18px;      /* lebih besar */
  border-radius: 26px;

  background: rgba(0,245,160,0.10);
  border: 1px solid rgba(0,245,160,0.28);

  font-size: 13px;         /* sebelumnya 11px */
  font-weight: 700;
  color: var(--green);

  box-shadow:
      0 0 14px rgba(0,245,160,.12),
      inset 0 1px 0 rgba(255,255,255,.06);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(0,245,160,.8);
  animation: pulse 1.5s infinite;
}

/* Content area */
#content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}

#content::-webkit-scrollbar       { width: 6px; }
#content::-webkit-scrollbar-track { background: transparent; }
#content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Mobile menu toggle */
#menu-toggle {
  display: none;
}

/* ══════════════════════════════════════════════
   SECTION VIEWS
══════════════════════════════════════════════ */
.view {
  display: none;
  animation: fadeIn 0.3s ease;
}

.view.active {
  display: block;
}

/* ══════════════════════════════════════════════
   SECTION TITLE
══════════════════════════════════════════════ */
.section-title {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 1px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ══════════════════════════════════════════════
   SENSOR CARDS (Beranda)
══════════════════════════════════════════════ */
.sensor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.sensor-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;

  backdrop-filter: blur(10px);
box-shadow: 
  0 8px 30px rgba(0,0,0,0.4),
  0 0 20px rgba(0,240,255,0.08);
}

/* Colored top stripe per sensor */
.sensor-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
}

.sensor-card.ph::before          { background: linear-gradient(90deg, #ff6b6b, #ffd93d); }
.sensor-card.tds::before         { background: linear-gradient(90deg, #00e5ff, #0077b6); }
.sensor-card.suhu::before        { background: linear-gradient(90deg, #ff9f1c, #ff4d6d); }
.sensor-card.turbidity::before   { background: linear-gradient(90deg, #b388ff, #7c4dff); }
.sensor-card.conductivity::before{ background: linear-gradient(90deg, #00f5a0, #00b09b); }

.sensor-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), var(--glow);
  border-color: var(--accent);
}

.sc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.sc-icon  { font-size: 26px; }

.sc-status {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
}

.sc-status.normal  { background: rgba(0,245,160,0.15); color: var(--green);  }
.sc-status.warning { background: rgba(255,214,10,0.15); color: var(--yellow); }
.sc-status.danger  { background: rgba(255,77,109,0.15); color: var(--red);   }

.sc-label {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}

.sc-value {
  font-family: 'Space Mono', monospace;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.sc-unit {
  font-size: 13px;
  color: var(--text3);
  margin-left: 3px;
}

.sc-range {
  font-size: 10px;
  color: var(--text3);
  margin-top: 8px;
}

.sc-bar {
  height: 4px;
  background: var(--bg);
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden;
}

.sc-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 1s ease;
}

.ph .sc-bar-fill          { background: linear-gradient(90deg, #ff6b6b, #ffd93d); }
.tds .sc-bar-fill         { background: linear-gradient(90deg, #00e5ff, #0077b6); }
.suhu .sc-bar-fill        { background: linear-gradient(90deg, #ff9f1c, #ff4d6d); }
.turbidity .sc-bar-fill   { background: linear-gradient(90deg, #b388ff, #7c4dff); }
.conductivity .sc-bar-fill{ background: linear-gradient(90deg, #00f5a0, #00b09b); }

/* ══════════════════════════════════════════════
   SENSOR DESCRIPTION CARDS
══════════════════════════════════════════════ */
.sensor-desc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.desc-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  overflow: hidden;

backdrop-filter: blur(10px);
box-shadow: 
  0 8px 30px rgba(0,0,0,0.4),
  0 0 20px rgba(0,240,255,0.08);
}

.desc-card::after {
  position: absolute;
  right: 22px;
  bottom: 18px;
  font-size: 72px;
  opacity: 0.12;
  filter: drop-shadow(0 0 14px rgba(0,240,255,0.4));
  pointer-events: none;
}

.desc-card.ph::after {
  content: '⚗️';
}

.desc-card.tds::after {
  content: '💧';
}

.desc-card.suhu::after {
  content: '🌡️';
}

.desc-card.turbidity::after {
  content: '🌊';
}

.desc-card.conductivity::after {
  content: '⚡';
}

.desc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.desc-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.ph .desc-icon-box          { background: rgba(255,107,107,0.15); }
.tds .desc-icon-box         { background: rgba(0,229,255,0.15);   }
.suhu .desc-icon-box        { background: rgba(255,159,28,0.15);  }
.turbidity .desc-icon-box   { background: rgba(179,136,255,0.15); }
.conductivity .desc-icon-box{ background: rgba(0,245,160,0.15);   }

.desc-name     { font-weight: 700; font-size: 15px; }
.desc-fullname { font-size: 11px; color: var(--text3); }

.desc-text {
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.7;
}

.desc-ranges {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.range-tag {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
}

.range-tag.good {
  background: rgba(0,245,160,0.12);
  color: var(--green);
  border: 1px solid rgba(0,245,160,0.2);
}

.range-tag.warn {
  background: rgba(255,214,10,0.12);
  color: var(--yellow);
  border: 1px solid rgba(255,214,10,0.2);
}

.range-tag.bad {
  background: rgba(255,77,109,0.12);
  color: var(--red);
  border: 1px solid rgba(255,77,109,0.2);
}

/* ══════════════════════════════════════════════
   MINI CHARTS (Beranda Trend Section)
══════════════════════════════════════════════ */
.mini-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.chart-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
  backdrop-filter: blur(10px);
box-shadow: 
  0 8px 30px rgba(0,0,0,0.4),
  0 0 20px rgba(0,240,255,0.08);
}

.chart-card.full-width {
  grid-column: span 2;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.chart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.chart-value {
  font-family: 'Space Mono', monospace;
  font-size: 18px;
}

.chart-wrap {
  height: 180px;
  position: relative;
}

/* ══════════════════════════════════════════════
   DETAIL VIEW
══════════════════════════════════════════════ */
.detail-hero {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.detail-current {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.detail-sensor-label {
  font-size: 11px;
  color: var(--text3);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.detail-big {
  font-family: 'Space Mono', monospace;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
}

.detail-big .detail-unit {
  font-size: 22px;
  color: var(--text3);
}

.detail-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.meta-label { color: var(--text3); }

.meta-value {
  font-weight: 600;
  font-family: 'Space Mono', monospace;
}

.detail-chart-wrap {
  height: 220px;
  position: relative;
}

/* ══════════════════════════════════════════════
   DATA TABLE
══════════════════════════════════════════════ */
.data-table-wrap {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}

.data-table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.data-table-wrap thead {
  display: table;
  width: 100%;
  table-layout: fixed;

  position: sticky;
  top: 0;
  z-index: 10;

  background: var(--bg);
}

.data-table-wrap tbody {
  display: block;
  max-height: 540px; /* sekitar 15 baris */
  overflow-y: auto;
}

.data-table-wrap tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.data-table-header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.data-table-title {
  font-size: 13px;
  font-weight: 600;
}

.btn-download {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0,229,255,0.15), rgba(0,180,216,0.08));
  border: 1px solid rgba(0,229,255,0.3);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'DM Sans', sans-serif;
}

.btn-download:hover {
  background: linear-gradient(135deg, rgba(0,229,255,0.25), rgba(0,180,216,0.15));
  box-shadow: 0 0 16px rgba(0,229,255,0.2);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

thead th {
  padding: 10px 20px;
  text-align: left;
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--bg);
  font-weight: 600;
}

tbody tr {
  border-top: 1px solid var(--border);
  transition: background 0.15s;
}

tbody tr:hover {
  background: rgba(255,255,255,0.02);
}

tbody td {
  padding: 10px 20px;
  color: var(--text2);
}

/* ══════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════ */
@keyframes pulse {
  0%,100% { opacity: 1;   }
  50%      { opacity: 0.3; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none;            }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }

  #sidebar {
    transform: translateX(-260px);
    width: 260px;
  }

  #sidebar.open {
    transform: translateX(0);
  }

  #main {
    margin-left: 0;
  }

  #menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg3);
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 18px;
    color: var(--text);
  }

  .sensor-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sensor-desc-grid {
    grid-template-columns: 1fr;
  }

  .mini-charts-grid {
    grid-template-columns: 1fr;
  }

  .chart-card.full-width {
    grid-column: span 1;
  }

  .detail-hero {
    grid-template-columns: 1fr;
  }

  .detail-big {
    font-size: 40px;
  }

  #topbar {
    padding: 0 16px;
  }

  #content {
    padding: 16px;
  }

  #realtime-clock {
    font-size: 16px;
  }
}

.chart-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.chart-toggle button {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: 0.3s;
}

.chart-toggle button:hover {
  background: var(--accent);
  color: #000;
}

#map{

    margin-top:10px;

    border-radius:24px;

    overflow:hidden;

    border:1px solid rgba(0,240,255,.18);

    box-shadow:
        0 0 25px rgba(0,240,255,.18),
        0 18px 40px rgba(0,0,0,.35);

}

/* =====================================================
   MODERN WATER NOTIFICATION
===================================================== */

.water-popup{

    position:fixed;
    top:28px;
    left:50%;

    transform:translate(-50%,-35px) scale(.92);

    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 18px;

    border-radius:50px;

    width:fit-content;
    min-width:unset;
    max-width:260px;

    color:#eafcff;
    font-size:14px;
    font-weight:700;
    letter-spacing:.3px;

    background:
        linear-gradient(
            135deg,
            rgba(8,36,60,.92),
            rgba(10,58,90,.82)
        );

    border:1px solid rgba(0,240,255,.22);

    backdrop-filter:blur(22px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 18px 40px rgba(0,0,0,.45),
        0 0 30px rgba(0,240,255,.12);

    opacity:0;

    transition:
        opacity .45s,
        transform .45s;

    overflow:hidden;

    z-index:99999;
}

/* glow */
.water-popup::before{

    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at top,
            rgba(0,240,255,.18),
            transparent 60%
        );

    pointer-events:none;
}

/* garis atas */

.water-popup::after{

    content:"";

    position:absolute;
    left:0;
    top:0;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            #00f0ff,
            #4facfe,
            #00f0ff
        );
}

.water-popup.show{

    opacity:1;

    transform:translate(-50%,0) scale(1);

}

/* icon */

.water-popup i{

    width:30px;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    font-size:15px;

    flex-shrink:0;
}

/* ========= GOOD ========= */

.water-popup.good{

    border-color:rgba(0,245,160,.30);

}

.water-popup.good::after{

    background:
    linear-gradient(
        90deg,
        #00f5a0,
        #00ffd5
    );

}

.water-popup.good i{

    background:rgba(0,245,160,.15);

    color:#00f5a0;

    box-shadow:
        0 0 18px rgba(0,245,160,.25);

}

/* ========= WARNING ========= */

.water-popup.warn{

    border-color:rgba(255,224,102,.30);

}

.water-popup.warn::after{

    background:
    linear-gradient(
        90deg,
        #ffe066,
        #ffb347
    );

}

.water-popup.warn i{

    background:rgba(255,224,102,.15);

    color:#ffe066;

    box-shadow:
        0 0 18px rgba(255,224,102,.25);

}

/* ========= ERROR ========= */

.water-popup.bad{

    border-color:rgba(255,107,129,.35);

}

.water-popup.bad::after{

    background:
    linear-gradient(
        90deg,
        #ff4d6d,
        #ff6b81
    );

}

.water-popup.bad i{

    background:rgba(255,107,129,.15);

    color:#ff6b81;

    box-shadow:
        0 0 18px rgba(255,107,129,.30);

}

/* animasi */

@keyframes popupFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-2px);

    }

}

.water-popup.show{

    animation:popupFloat 2.8s ease-in-out infinite;

}

.chart-toggle {
  display: flex;
  gap: 8px;
  margin-right: 10px;
}

.mode-btn {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  cursor: pointer;
  transition: 0.3s;
  font-weight: 600;
}

.mode-btn:hover {
  background: var(--accent);
  color: #000;
  box-shadow: 0 0 10px rgba(0,240,255,0.3);
}

.mode-btn.active {
  background: var(--accent);
  color: #000;
}

/* ══════════════════════════════════════════════
   MODERN UI UPGRADE
══════════════════════════════════════════════ */

:root {
  --radius-xl: 22px;
  --radius-md: 14px;
  --glass: rgba(9, 35, 60, 0.68);
  --glass2: rgba(255,255,255,0.06);
  --shadow-soft: 0 18px 45px rgba(0,0,0,0.35);
}

/* background lebih hidup */
body {
  background:
    radial-gradient(circle at top left, rgba(0,240,255,0.20), transparent 35%),
    radial-gradient(circle at bottom right, rgba(0,119,255,0.18), transparent 35%),
    linear-gradient(135deg, #031827 0%, #043654 45%, #021b2e 100%);
}

/* topbar modern */
#topbar {
  background: rgba(4, 24, 42, 0.72);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(0,240,255,0.16);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

/* sidebar glass */
#sidebar{
    background:
        linear-gradient(
            180deg,
            #0b2740 0%,
            #123e5c 40%,
            #0a2840 100%
        );

    backdrop-filter: blur(20px);

    border-right:1px solid rgba(0,240,255,.18);
}

/* semua card jadi modern */
.sensor-card,
.desc-card,
.chart-card,
.detail-hero,
.data-table-wrap {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.075),
    rgba(255,255,255,0.025)
  );
  border: 1px solid rgba(0,240,255,0.18);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

/* efek hover card */
.sensor-card:hover,
.desc-card:hover,
.chart-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(0,240,255,0.55);
  box-shadow:
    0 22px 55px rgba(0,0,0,0.45),
    0 0 28px rgba(0,240,255,0.18);
}

/* nilai sensor lebih tegas */
.sc-value,
.detail-big,
#realtime-clock {
  text-shadow: 0 0 18px rgba(0,240,255,0.28);
}

/* nav lebih modern */
.nav-item {
  border-radius: 14px;
  margin-bottom: 4px;
}

.nav-item:hover {
  background: rgba(0,240,255,0.08);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(0,240,255,0.18), rgba(0,119,255,0.10));
  box-shadow: inset 0 0 0 1px rgba(0,240,255,0.18);
}

/* tombol lebih premium */
.btn-download,
.mode-btn,
.lang-btn {
  border-radius: 999px;
  transition: 0.25s ease;
}

.btn-download:hover,
.mode-btn:hover,
.lang-btn:hover {
  transform: translateY(-2px);
}

/* tabel lebih rapi */
.data-table-wrap {
  overflow: hidden;
}

.data-table-wrap thead {
  background: rgba(2, 28, 48, 0.95);
}

tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.025);
}

tbody tr:hover {
  background: rgba(0,240,255,0.08);
}

/* chart area lebih bersih */
.chart-wrap,
.detail-chart-wrap {
  background: rgba(0,0,0,0.10);
  border-radius: 18px;
  padding: 10px;
}

/* badge status */
.sc-status,
.range-tag,
.status-badge {
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

/* animasi masuk lebih halus */
.view.active {
  animation: modernFade 0.45s ease;
}

@keyframes modernFade {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chart-wrap canvas,
.detail-chart-wrap canvas {
  filter: drop-shadow(0 0 12px rgba(0,240,255,0.16));
}

.sidebar-reset-wrap {
  margin-top: 18px;
  padding: 0 14px 18px;
}

.sidebar-reset-btn {
  width: 100%;
  border: none;
  outline: none;
  cursor: pointer;

  padding: 13px 16px;
  border-radius: 14px;

  background: linear-gradient(
    135deg,
    #ff4d6d,
    #ff6b81
  );

  color: white;
  font-weight: 700;
  font-size: 13px;

  transition: 0.25s ease;

  box-shadow:
    0 10px 24px rgba(255,77,109,0.22);
}

.sidebar-reset-btn:hover {
  transform: translateY(-2px);

  box-shadow:
    0 14px 30px rgba(255,77,109,0.35);
}


.table-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.date-filter-box {
  padding: 14px 20px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 240, 255, 0.06);
}

.date-filter-box label {
  font-size: 11px;
  color: var(--text2);
}

.date-filter-box input {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
}

/* WARNA TEKS RINGKASAN SENSOR BERANDA */
.sensor-card.ph .sc-value,
.sensor-card.ph .sc-label {
  color: #ffd93d;
}

.sensor-card.tds .sc-value,
.sensor-card.tds .sc-label {
  color: #00e5ff;
}

.sensor-card.suhu .sc-value,
.sensor-card.suhu .sc-label {
  color: #ff9f1c;
}

.sensor-card.turbidity .sc-value,
.sensor-card.turbidity .sc-label {
  color: #b388ff;
}

.sensor-card.conductivity .sc-value,
.sensor-card.conductivity .sc-label {
  color: #00f5a0;
}

/* Perbesar tulisan */
.sensor-card .sc-label{
    font-size: 13px;      /* sebelumnya 11px */
    font-weight: 700;
    letter-spacing: 1px;
}

.sensor-card .sc-value{
    font-size: 38px;      /* sebelumnya 32px */
    font-weight: 800;
    text-shadow: 0 0 18px currentColor;
}

.sensor-card .sc-unit{
    font-size: 16px;      /* sebelumnya 13px */
    font-weight: 700;
    color: #d9faff;
}

.sensor-card .sc-range{
    font-size: 12px;      /* sebelumnya 10px */
    font-weight: 600;
    color: #d9faff;
}

/* ===========================================
   PERJELAS NAMA SENSOR PADA HALAMAN DETAIL
   =========================================== */

/* Tulisan "SENSOR : PH" */
.detail-sensor-label{
    font-size: 16px;
    font-weight: 700;
    color: #dffcff;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-shadow:
        0 0 8px rgba(0,240,255,.35),
        0 0 16px rgba(0,240,255,.15);
}

.error-card{
    min-width:300px;
    padding:24px 36px;
    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            rgba(0,240,255,.12),
            rgba(0,119,255,.10),
            rgba(162,155,254,.12)
        );

    border:1px solid rgba(0,240,255,.28);

    backdrop-filter:blur(20px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 0 24px rgba(0,240,255,.13),
        0 18px 45px rgba(0,0,0,.38);

    text-align:center;
    position:relative;
    overflow:hidden;
}

.error-card::before{
    content:"";
    position:absolute;
    inset:-1px;

    background:
        radial-gradient(
            circle at top,
            rgba(0,240,255,.22),
            transparent 55%
        );

    opacity:.65;
    pointer-events:none;
}

.error-title {
    position:relative;
    z-index:1;

    font-size:12px;
    font-weight:800;
    color:#8defff;
    letter-spacing:2.5px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.error-value{

    position:relative;
    z-index:1;

    font-family:'Space Mono', monospace;
    font-size:50px;
    font-weight:900;

    background:linear-gradient(
        90deg,
        #ffffff 0%,
        #8df5ff 22%,
        #00f0ff 48%,
        #5ec8ff 72%,
        #ffffff 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    color:transparent;

    text-shadow:
        0 0 10px rgba(0,240,255,.25),
        0 0 20px rgba(0,240,255,.18),
        0 0 35px rgba(0,119,255,.12);

    letter-spacing:1px;
}

.error-value span{

    font-size:18px;
    font-weight:700;

    background:linear-gradient(
        180deg,
        #dffcff,
        #73f1ff
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    color:transparent;

    text-shadow:
        0 0 8px rgba(0,240,255,.30);
}

.error-sub {
    position:relative;
    z-index:1;

    font-size:12px;
    font-weight:600;
    color:#9ccfe0;
    margin-top:8px;
    letter-spacing:.5px;
}

/* ==========================================
   AQUAMONITOR MAP MARKER
========================================== */

.monitor-marker{
    background:transparent;
    border:none;
}

.monitor-pin{

    width:50px;
    height:50px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(
        135deg,
        #00f0ff,
        #0077ff
    );

    color:#fff;
    font-size:26px;

    border:3px solid rgba(255,255,255,.95);

    box-shadow:
    0 0 18px rgba(0,240,255,.95),
    0 0 40px rgba(0,240,255,.55),
    0 0 60px rgba(0,119,255,.30);

    animation:monitorPulse 2s infinite;

    position:relative;
}

.monitor-pin:hover{

    transform:scale(1.15);

    transition:.3s ease;

    cursor:pointer;

}

.monitor-pin::after{

    content:"";

    position:absolute;

    width:18px;
    height:18px;

    background:#00f0ff;

    bottom:-9px;
    left:50%;

    transform:
        translateX(-50%)
        rotate(45deg);

    z-index:-1;
}

@keyframes monitorPulse{

0%{
transform:scale(1);
box-shadow:0 0 12px rgba(0,240,255,.6);
}

50%{
transform:scale(1.22);
box-shadow:0 0 30px rgba(0,240,255,.95);
}

100%{
transform:scale(1);
box-shadow:0 0 12px rgba(0,240,255,.6);
}

}

/* popup */

/* popup */

.leaflet-popup-content-wrapper{
    background:linear-gradient(
        145deg,
        #08233a 0%,
        #0b3a5c 45%,
        #064f73 100%
    ) !important;

    border:1px solid rgba(0,240,255,.35) !important;
    border-radius:24px !important;
    color:#bff7ff !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.45),
        0 0 28px rgba(0,240,255,.22) !important;

    overflow:hidden !important;
}

.leaflet-popup-tip{
    background:#0b3a5c !important;
}

.leaflet-popup-content{
    color:#bff7ff !important;
    margin:18px !important;
    text-align:center;
    font-size:14px;
    line-height:1.8;
}

/* warna teks popup */
.leaflet-popup-content b{
    color:#00e5ff !important;
}

.leaflet-popup-content small{
    color:#7fd8e8 !important;
}

.leaflet-popup-content div,
.leaflet-popup-content span{
    color:#bff7ff !important;
}

/* tombol X */
.leaflet-popup-close-button{
    color:#00e5ff !important;
}

.leaflet-popup-close-button:hover{
    color:#ff6b81 !important;
}

.leaflet-popup{

    animation:popupFade .35s ease;

}

@keyframes popupFade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
   RESPONSIVE MOBILE FIX
========================================== */
@media (max-width:768px){

  html, body{
    overflow-x:hidden;
  }

  #main{
    margin-left:0 !important;
    width:100%;
  }

  #content{
    padding:14px;
    width:100%;
    overflow-x:hidden;
  }

  #topbar{
    padding:10px 14px;
    gap:10px;
  }

  .topbar-right{
    gap:8px;
  }

  #realtime-clock{
    font-size:15px;
  }

  #realtime-date,
  .status-badge{
    display:none;
  }

  .sensor-grid,
  .sensor-desc-grid,
  .mini-charts-grid{
    grid-template-columns:1fr !important;
  }

  .detail-hero{
    display:block !important;
    padding:16px;
  }

  .detail-current{
    width:100%;
  }

  .detail-big{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:16px !important;
    width:100% !important;
    font-size:36px !important;
  }

  .detail-big > div{
    width:100%;
    text-align:center;
  }

  .error-card{
    min-width:0 !important;
    width:100% !important;
    padding:18px 14px !important;
  }

  .error-value{
    font-size:34px !important;
  }

  .detail-meta{
    margin-top:18px;
    width:100%;
  }

  .chart-header{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .chart-card{
    padding:14px;
    overflow-x:auto;
  }

  .detail-chart-wrap{
    min-width:620px;
    height:300px;
  }

  .data-table-header{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .table-actions{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .table-actions .btn-download{
    flex:1;
    justify-content:center;
  }

  .data-table-wrap{
    overflow-x:auto !important;
  }

  .data-table-wrap table{
    min-width:850px;
  }

  .date-filter-box{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }

  .date-filter-box input{
    width:100%;
  }
}

@media (max-width:480px){

  .section-title{
    font-size:14px;
  }

  .topbar-title{
    font-size:14px;
  }

  .topbar-sub{
    display:none;
  }

  .detail-chart-wrap{
    min-width:560px;
    height:280px;
  }

  .btn-download{
    width:100%;
  }

  .chart-toggle{
    width:100%;
  }

  .chart-toggle button{
    flex:1;
    font-size:12px;
    padding:8px;
  }
}

.map-route-btn {
  width: 100%;
  margin-top: 10px;
  padding: 11px 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #00e5ff, #0077ff);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 229, 255, 0.35);
  transition: 0.25s ease;
}

.map-route-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 229, 255, 0.5);
}

.map-route-btn:active {
  transform: scale(0.97);
}

@media (max-width:768px){

  body{
    overflow-x:hidden !important;
  }

  #sidebar{
    transform:translateX(-100%) !important;
    width:260px !important;
    z-index:9999 !important;
  }

  #sidebar.open{
    transform:translateX(0) !important;
  }

  #main{
    margin-left:0 !important;
    width:100vw !important;
  }

  #content{
    padding:12px !important;
  }

  .sensor-grid,
  .sensor-desc-grid,
  .mini-charts-grid{
    grid-template-columns:1fr !important;
  }

  .desc-card,
  .sensor-card,
  .chart-card{
    width:100% !important;
  }

  #topbar{
    height:auto !important;
    min-height:60px;
  }
}