/* ================================================================
   MODERN BLUE THEME - Mangrove Carbon WebGIS
   Color Palette: Professional Blue & Cyan
   Palet Warna: Biru Profesional & Cyan Modern
   ================================================================ */

:root {
  /* Primary Blue Colors */
  --primary-blue: #0066ff;
  --primary-blue-dark: #003d99;
  --primary-blue-light: #e6f2ff;
  
  /* Accent Colors */
  --accent-cyan: #00b4d8;
  --accent-cyan-light: #ccf0ff;
  
  /* Text Colors */
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-light: #ffffff;
  --text-muted: #99999a;
  
  /* Background Colors */
  --bg-light: #f8fbff;
  --bg-lighter: #f0f9ff;
  
  /* Border Colors */
  --border-light: rgba(0, 102, 255, 0.1);
  --border-medium: rgba(0, 102, 255, 0.2);
  --border-dark: rgba(0, 102, 255, 0.3);
}

/* ================================================================
   TYPOGRAPHY & SPACING IMPROVEMENTS
   ================================================================ */

body {
  line-height: 1.6;
  letter-spacing: 0.3px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; line-height: 1.2; }
h2 { font-size: 2rem; line-height: 1.3; }
h3 { font-size: 1.5rem; line-height: 1.4; }
h4 { font-size: 1.2rem; line-height: 1.5; }

/* ================================================================
   BUTTON & INTERACTION IMPROVEMENTS
   ================================================================ */

button, .btn, [role="button"] {
  border-radius: 12px;
  border: none;
  font-weight: 600;
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.15);
}

button:hover, .btn:hover, [role="button"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 102, 255, 0.25);
}

button:active, .btn:active, [role="button"]:active {
  transform: translateY(0);
}

/* Primary Button */
.btn-primary, button.btn-primary {
  background: linear-gradient(135deg, #0066ff 0%, #00b4d8 100%);
  color: white;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0052cc 0%, #0099b6 100%);
}

/* Secondary Button */
.btn-secondary, button.btn-secondary {
  background: linear-gradient(135deg, #e6f2ff 0%, #ccf0ff 100%);
  color: var(--primary-blue);
  border: 1px solid var(--border-medium);
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #d4e8ff 0%, #b3ebff 100%);
}

/* ================================================================
   CARD & PANEL IMPROVEMENTS
   ================================================================ */

.card, .panel {
  border-radius: 16px;
  border: 1px solid var(--border-light);
  background: white;
  box-shadow: 0 4px 16px rgba(0, 102, 255, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
}

.card:hover, .panel:hover {
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.12);
  transform: translateY(-2px);
  border-color: var(--border-medium);
}

.card-header, .panel-header {
  padding: 24px;
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.05) 0%, rgba(0, 180, 216, 0.05) 100%);
  border-bottom: 1px solid var(--border-light);
  border-radius: 16px 16px 0 0;
}

.card-body, .panel-body {
  padding: 24px;
}

.card-footer, .panel-footer {
  padding: 16px 24px;
  background: var(--bg-lighter);
  border-top: 1px solid var(--border-light);
}

/* ================================================================
   FORM ELEMENTS
   ================================================================ */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
  border-radius: 10px;
  border: 2px solid var(--border-medium);
  padding: 12px 16px;
  font-family: inherit;
  font-size: 1rem;
  transition: all 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
  background-color: var(--bg-light);
}

select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230066ff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* ================================================================
   DROPDOWN & MENU IMPROVEMENTS
   ================================================================ */

.dropdown-menu, [role="menu"] {
  border-radius: 12px;
  border: 1px solid var(--border-medium);
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.15);
  background: white;
  overflow: hidden;
}

.dropdown-item, [role="menuitem"] {
  padding: 12px 16px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
  transition: all 0.2s ease;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background: var(--bg-light);
  color: var(--primary-blue);
  padding-left: 20px;
}

/* ================================================================
   BADGE & LABEL IMPROVEMENTS
   ================================================================ */

.badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.badge-blue {
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(0, 180, 216, 0.1));
  color: var(--primary-blue);
  border: 1px solid var(--border-medium);
}

.badge-success {
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.badge-warning {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

/* ================================================================
   ALERT MESSAGES
   ================================================================ */

.alert {
  padding: 16px 20px;
  border-radius: 12px;
  border-left: 4px solid;
  background: var(--bg-light);
  margin-bottom: 16px;
}

.alert-info {
  border-left-color: var(--primary-blue);
  color: var(--primary-blue);
}

.alert-success {
  border-left-color: #4caf50;
  color: #2e7d32;
  background: rgba(76, 175, 80, 0.05);
}

.alert-warning {
  border-left-color: #ffc107;
  color: #f57f17;
  background: rgba(255, 193, 7, 0.05);
}

.alert-danger {
  border-left-color: #f44336;
  color: #c62828;
  background: rgba(244, 67, 54, 0.05);
}

/* ================================================================
   LOADING & PROGRESS
   ================================================================ */

.progress-bar {
  background: linear-gradient(90deg, #0066ff, #00b4d8);
  border-radius: 10px;
  height: 8px;
  overflow: hidden;
}

.spinner {
  border: 3px solid var(--border-light);
  border-top-color: var(--primary-blue);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

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

/* ===== MOBILE BODY FIXES ===== */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
    width: 100vw;
    max-width: 100%;
  }
  
  main {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
  
  * {
    max-width: 100%;
  }
}

/* ================================================================
   RESPONSIVE IMPROVEMENTS
   ================================================================ */

@media (max-width: 768px) {
  button, .btn {
    padding: 10px 16px;
    font-size: 0.95rem;
  }
  
  .card, .panel {
    border-radius: 12px;
  }
  
  .card-header, .panel-header {
    padding: 16px;
  }
  
  .card-body, .panel-body {
    padding: 16px;
  }
  
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.2rem; }
}

@media (max-width: 480px) {
  button, .btn {
    padding: 8px 12px;
    font-size: 0.9rem;
  }
  
  .card, .panel {
    border-radius: 8px;
  }
  
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  h3 { font-size: 1rem; }
}

/* ================================================================
   UTILITY CLASSES
   ================================================================ */

.text-primary { color: var(--primary-blue); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-light { color: var(--text-light); }

.bg-primary { background: var(--primary-blue); color: white; }
.bg-light { background: var(--bg-light); }
.bg-lighter { background: var(--bg-lighter); }

.rounded { border-radius: 12px; }
.rounded-lg { border-radius: 16px; }
.rounded-full { border-radius: 50%; }

.shadow-sm { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.shadow-md { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); }
.shadow-lg { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }

.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }

.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ================================================================
   ANIMATION & TRANSITIONS
   ================================================================ */

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide-in-up {
  animation: slideInUp 0.4s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scale-in {
  animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}