/**
 * Custom CSS Enhancements untuk Website Profil Sekolah & Konsol Sinkronisasi
 */

/* Smooth scroll & typography */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #0f172a;
}
::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Glassmorphism helpers */
.glass-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-dark {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Pulse animation enhancements */
@keyframes softPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.03);
    }
}

.animate-soft-pulse {
    animation: softPulse 3s infinite ease-in-out;
}

/* Custom styles for stepper modal */
#stepperContainer .border-emerald-300 {
    border-color: #6ee7b7 !important;
}

#stepperContainer .bg-emerald-50\/30 {
    background-color: rgba(236, 253, 245, 0.4) !important;
}

/* Desktop Admin Precision Styles */
input:focus, textarea:focus, select:focus {
    transition: all 0.2s ease-in-out;
}

table tr {
    transition: background-color 0.15s ease-in-out;
}

/* ======================================================== */
/* HIGH-CONTRAST PAGE TITLE & HERO BANNER STYLING           */
/* Menjamin teks judul selalu tajam, kontras tinggi & jelas */
/* ======================================================== */
.page-header-banner {
    background-color: #090d16 !important;
    background-image: radial-gradient(at 10% 20%, rgba(30, 58, 138, 0.45) 0px, transparent 50%),
                      radial-gradient(at 90% 80%, rgba(16, 185, 129, 0.25) 0px, transparent 50%),
                      linear-gradient(180deg, #020617 0%, #0f172a 100%) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(51, 65, 85, 0.6) !important;
    position: relative;
}

.page-header-title {
    color: #ffffff !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65), 0 0 1px rgba(255, 255, 255, 0.2) !important;
    letter-spacing: -0.025em !important;
}

.page-header-badge {
    background-color: rgba(6, 78, 59, 0.85) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(52, 211, 153, 0.5) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
}

.page-header-desc {
    color: #e2e8f0 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* Sub-heading in white sections */
.section-title {
    color: #0f172a !important;
    font-weight: 800 !important;
}