/* ===================================================================
   STYLE RESMI PIMPINAN CABANG 'AISYIYAH (PCA) SALAM, KAB. MAGELANG
   Desain Modern, Berwibawa, Islami Berkemajuan, & Ultra Ringan
   =================================================================== */

:root {
  --aisyiyah-green: #0D6E3F;
  --aisyiyah-green-dark: #084E2C;
  --aisyiyah-green-deep: #05331C;
  --aisyiyah-green-light: #EBF7EE;
  --aisyiyah-green-border: #A3D9B5;
  --aisyiyah-gold: #F2B705;
  --aisyiyah-gold-dark: #D99B00;
  --aisyiyah-gold-light: #FEF9E7;
  --klinik-red: #E11D48;
  --klinik-blue: #0284C7;
  --bg-slate: #F8FAF9;
  --text-dark: #1E293B;
  --text-muted: #64748B;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-slate);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
}

/* Islamic Geometric Subtle Background Pattern */
.islamic-pattern {
  background-color: #084E2C;
  background-image: radial-gradient(#F2B705 0.75px, transparent 0.75px), radial-gradient(#0E7A46 0.75px, #084E2C 0.75px);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

.islamic-pattern-light {
  background-color: #F8FAF9;
  background-image: radial-gradient(#0D6E3F 0.5px, transparent 0.5px);
  background-size: 24px 24px;
}

/* Glassmorphism Efek Khusus Header & Banner */
.glass-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(13, 110, 63, 0.15);
}

.glass-card-dark {
  background: rgba(8, 78, 44, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(242, 183, 5, 0.25);
}

/* Aksentuasi Emas & Hijau */
.badge-gold {
  background: linear-gradient(135deg, #FEF9E7 0%, #FDE047 100%);
  color: #854D0E;
  border: 1px solid #FACC15;
}

.badge-green {
  background: #EBF7EE;
  color: #0D6E3F;
  border: 1px solid var(--aisyiyah-green-border);
}

.btn-aisyiyah {
  background: linear-gradient(135deg, #0D6E3F 0%, #084E2C 100%);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(13, 110, 63, 0.25);
  transition: all 0.2s ease;
}

.btn-aisyiyah:hover {
  background: linear-gradient(135deg, #0F824A 0%, #0A5E35 100%);
  box-shadow: 0 6px 18px rgba(13, 110, 63, 0.35);
  transform: translateY(-1px);
}

.btn-gold {
  background: linear-gradient(135deg, #F2B705 0%, #D99B00 100%);
  color: #1E293B;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(242, 183, 5, 0.3);
  transition: all 0.2s ease;
}

.btn-gold:hover {
  background: linear-gradient(135deg, #F5C328 0%, #E6A700 100%);
  transform: translateY(-1px);
}

/* Card Hover Animations */
.hover-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.hover-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(13, 110, 63, 0.12), 0 4px 8px -4px rgba(0, 0, 0, 0.04);
}

/* Tab Indikator Ranting */
.tab-ranting-btn.active {
  background-color: #0D6E3F;
  color: #FFFFFF;
  font-weight: 700;
  border-color: #0D6E3F;
  box-shadow: 0 4px 10px rgba(13, 110, 63, 0.2);
}

/* Kaligrafi Arab */
.font-arabic {
  font-family: 'Amiri', 'Traditional Arabic', serif;
}

/* Clean Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #0D6E3F;
}

/* Print Friendly Styles untuk SK dan Laporan */
@media print {
  .no-print, header, footer, .btn-action {
    display: none !important;
  }
  
  body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }
  
  .print-area {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }
}

/* Touch & Mobile Tap Optimization (Ibu-Ibu Pengurus Smartphone) */
button, a, input, select, textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* HD Screen (1366x768 & 1280x720 Laptop Lama) Optimization */
@media screen and (min-width: 1024px) and (max-width: 1440px) {
  .max-w-7xl {
    max-width: 96% !important;
  }
}

/* Smartphone Screen (< 640px) Optimization */
@media screen and (max-width: 640px) {
  body {
    font-size: 13px;
  }
}

/* Smooth Dropdown Animation */
@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeInSlide 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Hover effect dropdown for pointer devices */
@media (hover: hover) and (pointer: fine) {
  .nav-dropdown:hover .nav-dropdown-menu {
    display: block !important;
  }
}