/* ================================================================
   SECTION 1: CORE STYLES & VARIABLES (Global)
   Mengatur warna utama maroon, tipografi, dan elemen dasar.
   ================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  /* Palet Maroon Utama */
  --maroon-50: #fff1f2;
  --maroon-100: #ffe4e6;
  --maroon-200: #fecdd3;
  --maroon-300: #fda4af;
  --maroon-400: #fb7185;
  --maroon-500: #f43f5e;
  --maroon-600: #e11d48;
  --maroon-700: #be123c;
  --maroon-800: #9f1239;
  --maroon-900: #881337;
  --maroon-950: #4c0519;

  /* Warna Netral & Aksesori */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-400: #94a3b8;
  --gray-700: #334155;
  --gray-900: #0f172a;
}

body,
html {
  height: 100%;
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  background-color: var(--gray-50);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

/* Custom Selection Color */
::selection {
  background-color: var(--maroon-800);
  color: white;
}

/* Custom Scrollbar Global */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--gray-100);
}
::-webkit-scrollbar-thumb {
  background: var(--maroon-200);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--maroon-400);
}

/* ================================================================
      SECTION 2: GLOBAL ANIMATIONS
      Efek transisi dan gerakan untuk elemen interaktif.
      ================================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.3s ease-out forwards;
}

/* Global Transition Helper */
button,
a,
i,
input {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================================
      SECTION 3: LAMAN LOGIN & FORM
      Optimasi tampilan input dan tombol gradasi.
      ================================================================ */
input:focus {
  box-shadow: 0 10px 30px -10px rgba(136, 19, 55, 0.15);
}

.loading-spinner {
  display: none;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  border-top: 3px solid white;
  width: 20px;
  height: 20px;
  animation: spin 0.8s linear infinite;
}

/* ================================================================
      SECTION 4: LAMAN DASHBOARD (Navigasi & Grid)
      Mengatur tata letak kartu bts dan menu utama.
      ================================================================ */
nav.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Tower Card Hover Effect */
.tower-card {
  position: relative !important; /* Wajib: Mengunci posisi dot hijau aktif */
  z-index: 1;
}

.tower-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 30px 60px -15px rgba(136, 19, 55, 0.15);
  border-color: var(--maroon-200);
}

/* ================================================================
      SECTION 5: MODAL DEVICE & PERANGKAT TERHUBUNG
      Mengatur grid 18 data dummy dan pagination di dalam pop-up.
      ================================================================ */
#modalContent::-webkit-scrollbar {
  display: none;
}
#modalContent {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Device Card Styles */
#deviceListGrid .p-6 {
  align-content: start;
}

/* Pagination Buttons Helper */
button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

/* ================================================================
      SECTION 6: MAPS & PROFIL (Kustomisasi Khusus)
      Penyesuaian untuk leaflet dan kartu profil split.
      ================================================================ */
#map {
  border-radius: inherit;
  background: #e5e7eb;
}

/* ================================================================
      SECTION 7: DASHBOARD USER (Kustomisasi Khusus)
      Penyesuaian untuk form input operator dan modal output.
      ================================================================ */
/* Glass Card Effect */
.glass-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(229, 231, 235, 0.5);
}

/* Trademark Float Animation */
.trademark-float {
  animation: floating 4s ease-in-out infinite;
}

@keyframes floating {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* Custom Select Styling */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23881337'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 1.2em;
}

/* Fade In Up Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.4s ease-out forwards;
}

/* Modal Styles */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Channel Cards */
.channel-card {
  transition: all 0.5s ease;
}

.channel-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  border-color: var(--maroon-200);
}

/* Progress Bar */
.progress-bar {
  transition: width 0.3s ease;
}

/* Button Hover Effects */
.submit-button {
  transition: all 0.3s ease;
}

.submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(136, 19, 55, 0.3);
}

/* Loading Spinner */
.loading-spinner {
  animation: spin 1s linear infinite;
}

/* Custom Leaflet Popup */
.leaflet-popup-content-wrapper {
  border-radius: 16px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

/* Profil Card Split Adjustment */
.profile-card-shadow {
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.05);
}

/* ================================================================
      SECTION 7: RESPONSIVE OPTIMIZATION (Mobile Fixes)
      Memastikan tidak ada elemen yang bertumpuk di layar HP.
      ================================================================ */
@media (max-width: 768px) {
  /* Header & Branding */
  header {
    padding-top: 1rem !important;
  }
  header span.font-black {
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
  }
  header span.text-maroon-500 {
    font-size: 8px !important;
    letter-spacing: 0.2em !important;
  }

  /* Navigasi Mobile (Berdampingan) */
  nav.nav-main {
    width: fit-content !important;
    padding: 4px !important;
  }
  nav.nav-main button {
    padding: 8px 15px !important;
    font-size: 11px !important;
  }

  /* Banner & Layout Content */
  .welcome-banner {
    padding: 1.25rem !important;
    border-radius: 20px !important;
  }

  /* User Dropdown Position */
  #userDropdown {
    right: 0;
    width: 220px;
    border-radius: 20px;
  }

  /* Profil Page Mobile (Vertical Stack) */
  .bg-white.rounded-\[40px\] {
    border-radius: 2rem;
  }
  .md\:w-\[40\%\] {
    padding: 3rem 1.5rem !important;
  }
  .md\:w-\[60\%\] {
    padding: 2rem 1.5rem !important;
  }

  /* Map Height */
  .content-card.map {
    height: 500px !important;
  }

  /* Device Grid Mobile */
  #deviceListGrid {
    grid-template-columns: 1fr !important;
  }
}