:root {
  /* Light mode defaults */
  --bg-color: #EFEEEA;
  --card-bg-color: #FFFFFF;
  --text-color: #273F4F;
  --accent-color: #FE7743;
  --card-border: rgba(0, 0, 0, 0.1);
  --shadow-color: rgba(0, 0, 0, 0.1);
}

/* Style untuk Logo ATEROLAS */
#logo-aterolas {
  height: 40px;
  /* Atur tinggi sesuai yang kamu inginkan */
  width: auto;
  /* Lebar akan menyesuaikan secara proporsional */
  margin: 0;
  display: block;
  /* Agar margin auto bekerja jika navbar-center flex */
}

/* Dark / Neon Tech Mode */
body.dark-mode {
  --bg-color: #0a0a0f;
  --card-bg-color: #13131a;
  --text-color: #e0e0e3;
  --accent-color: #00e0ff;
  --card-border: rgba(0, 224, 255, 0.12);
  --shadow-color: rgba(0, 224, 255, 0.06);
}

body.dark-mode .card {
  box-shadow: 0 0 15px rgba(0, 224, 255, 0.15);
}

body.dark-mode .sensor-item.active {
  box-shadow: 0 0 12px rgba(0, 224, 255, 0.3);
}

/* Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  overflow: hidden;
}

/* NAVBAR */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  background: var(--card-bg-color);
  border-bottom: 1px solid var(--card-border);
  box-shadow: 0 2px 10px var(--shadow-color);
  z-index: 10;
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.navbar-center {
  margin-left: 230px;
  flex: 1;
  text-align: center;
  align-items: center;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  justify-content: flex-end;
}

.navbar-left img {
  height: 35px;
  width: auto;
}

/* .navbar-center h1 { font-family: 'Contrail One', cursive; color: var(--accent-color); font-size: 1.9rem; margin: 0; } */

/* Info items */
.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

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

/* Status light */
#status-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

.status-connected {
  background: #28a745;
}

.status-disconnected {
  background: #dc3545;
}

.status-connecting {
  background: #ffc107;
}

.status-connected,
.status-disconnected,
.status-connecting {
  box-shadow: 0 0 8px currentColor;
}

/* Toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.slider {
  background-color: var(--accent-color);
}

input:checked+.slider:before {
  transform: translateX(26px);
}

/* Buttons */
.btn {
  border: 2px solid var(--accent-color);
  background: transparent;
  color: var(--accent-color);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  font-weight: 600;
}

.btn:hover {
  background: var(--accent-color);
  color: var(--card-bg-color);
  box-shadow: 0 0 10px var(--accent-color);
}

.btn.small {
  padding: 6px 8px;
  font-size: .85rem;
  border-radius: 6px;
}

.btn.primary {
  border-width: 0;
  background: var(--accent-color);
  color: var(--card-bg-color);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.btn.primary:hover {
  opacity: .9;
  transform: translateY(-1px);
}

/* Layout grid */
.main-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  padding: 20px;
  overflow: hidden;
}

/* Card */
.card {
  background: var(--card-bg-color);
  border-radius: 14px;
  border: 1px solid var(--card-border);
  box-shadow: 0 6px 24px var(--shadow-color);
  padding: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent-color);
}

.card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.card-general-inner {
  display: flex;
  gap: 16px;
}

.model-3d-container {
  flex-basis: 48%;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  /* min-height: 180px; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.model-3d-container img {
  max-height: 275px;
  width: auto;
  object-fit: contain;
}

.ship-info {
  flex-basis: 52%;
  overflow: auto;
  padding: 6px;
}

/* Fullscreen */
.expand-btn {
  background: none;
  border: none;
  color: var(--accent-color);
  font-size: 1.2rem;
  cursor: pointer;
}

/* Update di style.css */
.fullscreen-mode {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  
  /* PERBAIKAN: Naikkan dari 999 menjadi 9999 */
  /* Agar menutupi elemen peta/kompas yang z-indexnya 1000 */
  z-index: 9999 !important; 
  
  background: var(--card-bg-color);
  border-radius: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.fullscreen-mode #gmaps-container,
.fullscreen-mode #arena-container {
  /* Hapus rasio 3:2 dan buat keduanya 1:1 (sama besar) */
  flex: 1;

  /* Pastikan min-height di-reset agar flexbox bekerja sempurna */
  min-height: 0;
}

/* Sensor grid */
.sensor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* <-- Ini kuncinya: 4 kolom */
  gap: 12px;
}

.sensor-item {
  background: var(--bg-color);
  padding: 5px;
  border-radius: 8px;
  text-align: center;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#coordinate-value {
  font-size: 13px;
  padding-top: 0px;
}

.sensor-item .label {
  font-size: .8rem;
  opacity: .75;
  font-weight: 700;
}

.sensor-item .value {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--accent-color);
}

.sensor-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.sensor-item.active {
  border-color: var(--accent-color);
  background: var(--card-bg-color);
}

/* Chart container */
.chart-container {
  flex-grow: 1;
  position: relative;
  /* min-height: 120px;  */
}

/* ===================== COMPUTER VISION CARD (REVISED V2) ===================== */

/* --- HEADER MODE BADGE (BARU) --- */
.header-mode-badge {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background-color: #FE7743; /* Background Oranye Transparan */
  border: 1px solid #FE7743;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

body.dark-mode .header-mode-badge {
  background-color: #00e0ff; /* Background Biru Transparan */
  border-color: #00e0ff;
  color: #000;
}

/* --- COMPUTER VISION CARD --- */

.card-cv-content {
  display: flex;
  gap: 16px;
  height: auto; /* Biarkan tinggi menyesuaikan konten */
  min-height: 380px; /* Minimal tinggi agar tidak terlalu gepeng */
  padding: 5px;
  align-items: flex-start; /* Elemen mulai dari atas */
}

/* --- HUD INFO BADGES --- */
/* --- HUD INFO BADGES (HEADER STYLE) --- */
.hud-badge {
    background: black; /* Latar tipis */
    border: 1px solid #666;
    border-radius: 4px;
    padding: 2px 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
    white-space: nowrap; /* Mencegah teks turun baris */
}

/* Dark Mode Adjustment */
body.dark-mode .hud-badge {
    background: rgba(0, 0, 0, 0.4);
}

/* KIRI: Video Container 16:9 */
.cv-left {
  flex: 2; /* 66% Lebar */
  display: flex;
  flex-direction: column;
}

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9; /* KUNCI: Rasio Tetap */
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--card-border, #333);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* KANAN: Galeri & Counter */
.cv-right {
  flex: 1; /* 33% Lebar */
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Pastikan isi kanan tidak ditarik (stretch) berlebihan */
  justify-content: flex-start; 
}

/* Container Galeri */
.gallery-section {
  /* Hapus flex: 1 agar tingginya fit content saja */
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--card-border, #ddd);
}

.gallery-header {
  font-size: 11px;
  font-weight: 800;
  color: #555;
  margin-bottom: 8px; /* Beri jarak sedikit ke foto */
  padding-bottom: 4px; /* Beri jarak antara teks dan garis */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* Default border style */
  border-bottom: 2px solid #ddd; 
  display: block; /* Pastikan garis memanjang penuh */
}

/* --- WARNA SPESIFIK TEMA (Garis Bawah & Warna Teks) --- */

/* Tema Hijau (Box Hijau) */
.green-theme .gallery-header {
  border-bottom-color: #28a745; /* Garis Hijau */
  color: #155724; /* Teks hijau tua agar serasi (opsional) */
}

/* Tema Biru (Bawah Air) */
.blue-theme .gallery-header {
  border-bottom-color: #007bff; /* Garis Biru */
  color: #004085; /* Teks biru tua agar serasi (opsional) */
}

/* Grid Foto (2 Kolom) */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
}

/* Thumbnail Foto (FIXED 16:9) */
.gallery-grid div, .gallery-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9; /* KUNCI: Membuat foto pipih (landscape) seperti video asli */
  background-color: #eee;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.2s;
}
.gallery-grid div:hover { transform: scale(1.03); border-color: #FE7743; }

/* Placeholder Styling */
.gallery-placeholder {
  background-color: #e0e0e0;
  border: 2px dashed #ccc;
}

/* Counter (Horizontal) */
.cv-counters {
  background-color: #1e1e1e;
  border-radius: 6px;
  padding: 8px 5px;
  color: #fff;
  border: 1px solid #333;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  height: 50px; /* Tinggi fix kecil */
  margin-top: auto; /* Opsional: Dorong ke bawah jika ada sisa ruang */
}

/* Item Counter (Track, Red, Green) */
.counter-item {
  display: flex;
  flex-direction: column; /* Label di atas, Angka di bawah */
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 60px; /* Lebar minimum per item */
}

.counter-label {
  opacity: 0.7;
  font-weight: 600;
  font-size: 10px; /* Ukuran label diperkecil sedikit */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.counter-value {
  font-weight: 700;
  font-family: 'Consolas', monospace;
  font-size: 18px; /* Angka diperbesar agar jelas */
  line-height: 1;
}

/* Garis Pemisah Vertikal */
.counter-separator {
  width: 1px;
  height: 30px; /* Tinggi garis */
  background-color: #444;
}

/* Warna Angka (Tetap sama) */
.track-val { color: #FE7743; text-shadow: 0 0 5px rgba(254, 119, 67, 0.3); }
.red-val { color: #ff5555; }
.green-val { color: #00e600; }

/* --- TAMBAHAN KHUSUS PLACEHOLDER (Agar tidak kosong melompong) --- */

/* Style untuk kotak kosong (sebelum ada foto) */
.gallery-placeholder {
  flex: 1;
  background-color: #e0e0e0; /* Warna abu-abu placeholder */
  border-radius: 4px;
  border: 2px dashed #ccc; /* Garis putus-putus menandakan kosong */
  position: relative;
}

/* Opsional: Tambahkan ikon kamera kecil di tengah placeholder */
.gallery-placeholder::after {
  content: '📷';
  /*Ikonkamera*/position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  opacity: 0.3;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

/* --- FIX TAMPILAN VIDEO RUSAK --- */

/* Sembunyikan ikon 'broken image' bawaan browser jika src kosong */
#video-feed {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background-color: #000; /* Pastikan background hitam */
  color: transparent; /* Sembunyikan teks alt */
}

/* Trik untuk menyembunyikan icon broken image di Chrome/Firefox */
#video-feed:-moz-loading {
  visibility: hidden;
}
#video-feed::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000;
}

/* --- STYLE THUMBNAIL (Agar Hover bekerja) --- */
/* .gallery-thumb {
    position: relative; 
    overflow: hidden; 
} */ 

/* --- TOMBOL HAPUS GAMBAR (FIXED) --- */
.delete-icon {
    /* 1. Posisi Absolut di Pojok Kiri Atas */
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 20; /* Pastikan paling atas */

    /* 2. Ukuran Fix & Bulat Sempurna */
    /* Gunakan min-width/max-width untuk memaksa ukuran */
    width: 24px;
    height: 24px;
    min-width: 24px;
    max-width: 24px;
    border-radius: 50%; /* Lingkaran */

    /* 3. Tampilan Visual */
    background-color: #ff3b30; /* Merah Apple (Lebih modern) */
    color: white;
    font-weight: 900;
    font-size: 14px;
    font-family: sans-serif;
    line-height: 1; /* Reset line height */
    
    /* 4. Center X Symbol */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 5. Interaksi */
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    
    /* 6. Animasi Hover (Sembunyi dulu) */
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Muncul saat hover gambar */
.gallery-thumb:hover .delete-icon {
    opacity: 1;
    transform: scale(1);
}

/* Efek saat tombol X di-hover */
.delete-icon:hover {
    background-color: #d32f2f; /* Merah tua */
    transform: scale(1.15);
}


/* Trajectory maps */

.trajectory-controls {
  text-align: center;
  margin-bottom: 12px;
}

.trajectory-maps {
  display: flex;
  gap: 12px;
  flex-grow: 1;
  min-height: 0;
}

.map-container {
  border-radius: 10px;
  /* min-height: 220px; */
  overflow: hidden;
  position: relative;
  /* HAPUS 'display: flex' untuk memperbaiki bug 'tenggelam' */
}

#gmaps-container {
  flex: 3;
  /* Ambil 3 bagian (lebih besar) */
  /* min-height: 300px; */
  border: 1px solid var(--card-border);
  /* Tambah border agar rapi */
}


#arena-container {
  flex: 2;
  /* Ambil 2 bagian (lebih kecil) */
  /* min-height: 300px; */
  background-color: #FFFFFF;
  /* Background putih sesuai permintaan */
  border: 1px solid var(--card-border);
  /* Tambah border agar rapi */
  display: flex;
  /* Kita tetap pakai flex di sini agar canvas pas */
  align-items: center;
  justify-content: center;
}

#arena-container canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- COMPASS INDICATOR (UTARA KE KIRI) --- */
/* --- COMPASS INDICATOR (REVISI: UTARA KE ATAS) --- */
.compass-indicator {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.9;
    z-index: 500; /* Z-index tinggi agar muncul di atas Leaflet */
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    border: 1px solid #ccc;
}

.arrow-north {
    width: 0; 
    height: 0; 
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    
    /* REVISI: Panah menunjuk ke ATAS (Border Bottom berwarna) */
    border-bottom: 20px solid #ff3333; /* Merah untuk Utara */
    
    margin-bottom: 2px;
}

.compass-n {
    font-weight: 800;
    font-size: 10px;
    color: #333;
    line-height: 1;
}

/* Dark Mode */
body.dark-mode .compass-indicator {
    background: rgba(40, 40, 40, 0.8);
    border-color: #555;
}
body.dark-mode .compass-n {
    color: #fff;
}

/* ======================================================= */
/* FULLSCREEN FIX KHUSUS TRAJECTORY                        */
/* ======================================================= */

/* 1. Target Card Body saat mode fullscreen */
.card.fullscreen-mode[data-card="traj"] .card-body {
  /* Kalkulasi: 100% tinggi layar dikurangi tinggi Header (~80px).
     !important WAJIB ada untuk menimpa inline style "height: 400px" di HTML.
  */
  height: calc(100vh - 80px) !important;
  
  /* Hilangkan gap berlebih jika ada */
  margin-bottom: 0;
  padding-bottom: 10px; 
}

/* 2. Target Container Peta & Arena */
.card.fullscreen-mode[data-card="traj"] #gmaps-container,
.card.fullscreen-mode[data-card="traj"] #arena-container {
  /* Paksa tinggi mengikuti parent (card-body yang sudah membesar) */
  height: 100% !important;
  
  /* Pastikan lebar terbagi rata */
  flex: 1; 
  
  /* Reset min-height agar tidak tertahan */
  min-height: 0 !important;
}

/* 3. Pastikan Canvas di dalam Arena juga ikut membesar */
.card.fullscreen-mode[data-card="traj"] #arena-canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 1100;
}

.modal-content {
  background: var(--card-bg-color);
  padding: 18px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 320px;
}

.modal.show {
  display: flex;
}

/* Utility */
.float {
  position: absolute;
  right: 12px;
  top: 12px;
}

/* Active Button State */
.mission-controls button.active,
.trajectory-controls .btn.active,
.btn.active {
  background: var(--accent-color);
  color: var(--card-bg-color);
  box-shadow: 0 0 12px var(--accent-color);
  transform: translateY(-2px);
  transition: all 0.2s;
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
}

/* Per-card admin buttons */
.card-header .card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.hidden {
  display: none !important;
}

#admin-login-btn {
  color: #e0e0e3;
  background: white;
}

/* --- STYLE ADMIN BUTTON (DARK MODE) --- */
body.dark-mode #admin-login-btn {
  background-color: #1e1e1e; /* Latar belakang gelap */
  color: #1e1e1e; /* Mengikuti warna aksen (Cyan di dark mode) */
  border: 1px solid #1e1e1e; /* Border menyala */
  box-shadow: 0 0 10px #1e1e1e; /* Efek Glow neon */
}

/* Efek Hover di Dark Mode */
body.dark-mode #admin-login-btn:hover {
  background-color: var(--accent-color);
  color: #000; /* Teks hitam agar kontras saat background nyala */
  box-shadow: 0 0 20px var(--accent-color);
}


/* ======================================================= */
/* RESPONSIVE - TABLET & SMALL LAPTOP (max-width: 1200px)  */
/* ======================================================= */
@media (max-width: 1200px) {

  /* 1. Ubah Grid Utama Dashboard jadi 1 Kolom */
  .main-content {
    grid-template-columns: 1fr; /* 1 Kolom penuh */
    grid-template-rows: auto;
    overflow-y: auto; /* Scrollable */
    height: calc(100vh - 70px); /* Kurangi tinggi navbar */
    padding-bottom: 40px; /* Ruang scroll bawah */
  }

  /* 2. Card Info Kapal: Stack Vertikal */
  .card-general-inner {
    flex-direction: column;
  }
  .model-3d-container {
    max-width: 100%; /* Lebar penuh */
    min-height: 200px;
    margin-bottom: 15px;
  }

  /* 3. Card CV: Stack Vertikal (Video Atas, Galeri Bawah) */
  .card-cv-content {
    flex-direction: column;
    height: auto !important; /* Biarkan tinggi otomatis */
    min-height: 0;
  }

  .cv-left {
    flex: none; /* Reset flex */
    width: 100%;
  }
  
  .video-container {
    width: 100%;
    /* Pertahankan aspek rasio atau buat sedikit lebih tinggi di tablet */
    aspect-ratio: 16 / 9; 
  }

  .cv-right {
    flex: none;
    width: 100%;
    margin-top: 10px;
    
    /* Ubah Galeri menjadi grid horizontal di bawah video */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Hijau Kiri, Biru Kanan */
    gap: 10px;
  }
  
  /* Counter di HP/Tablet: Tetap di bawah galeri */
  .cv-counters {
    grid-column: 1 / -1; /* Span sepanjang lebar grid */
    margin-top: 5px;
  }

  /* 4. Card Trajectory: Stack Vertikal (Peta Atas, Arena Bawah) */
  .card-body[style*="display: flex"] { /* Target card-body trajectory */
    flex-direction: column !important;
    height: auto !important;
  }

  #gmaps-container, #arena-container {
    width: 100%;
    min-height: 300px; /* Beri tinggi minimum agar peta terlihat */
    flex: none !important;
  }
}


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

  /* Izinkan body scroll */
  body {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
  }

  .main-content {
    padding: 10px;
    gap: 15px;
    height: auto;
    overflow: visible;
  }

  /* --- Navbar Sederhana --- */
  .navbar-left, .navbar-right {
    display: none; /* Sembunyikan detail navbar di HP */
  }
  .navbar-center {
    margin: 0;
    width: 100%;
    text-align: center;
  }
  #logo-aterolas {
    height: 30px; /* Logo lebih kecil */
    margin: 0 auto;
  }

  /* --- Card Header --- */
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .card-actions {
    width: 100%;
    justify-content: space-between;
  }
  .header-mode-badge {
    font-size: 10px; /* Label mode lebih kecil */
    padding: 2px 6px;
  }

  /* --- Sensor Grid --- */
  .sensor-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 Kolom di HP */
    gap: 8px;
  }
  .sensor-item .value {
    font-size: 0.9rem;
  }

  /* --- CV Card Mobile --- */
  .cv-right {
    /* Di HP, Galeri Hijau & Biru di-stack vertikal juga agar thumbnail besar */
    grid-template-columns: 1fr; 
  }
  
  .gallery-grid div {
    /* Thumbnail foto di HP jangan terlalu gepeng 16:9, buat agak kotak */
    aspect-ratio: 4/3; 
  }

  .counter-item {
    min-width: auto; /* Biarkan counter mengecil */
  }
  .counter-value {
    font-size: 14px;
  }

  #admin-login-btn {
    /* Pastikan tombol muncul */
    display: flex !important;
    
    /* Ubah posisi menjadi Melayang (Fixed) di pojok kanan bawah */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000; /* Paling atas */
    
    /* Bentuk Lingkaran yang enak dipencet jempol */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    
    /* Center Tanda Seru (!) */
    align-items: center;
    justify-content: center;
    padding: 0;
    
    /* Bayangan agar terlihat mengambang */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    
    /* Ukuran Teks */
    font-size: 1.5rem;
    font-weight: 800;
  }

  /* Jika Navbar Right disembunyikan sebelumnya, kita pastikan tombol ini keluar */
  .navbar-right {
     /* Jika parent-nya hidden, kita harus pastikan logic HTML-nya benar. 
        Asumsi tombol ini anak langsung navbar-right. 
        Agar aman, kita force navbar-right tampil tapi kontennya kita atur. */
     display: flex !important;
     flex: 0 !important; /* Jangan makan tempat */
     width: 0; /* Hiden visual parent */
     overflow: visible; /* Biarkan anak (floating btn) terlihat */
  }
}