/* 
 * Custom Theme Nuansa Hijau Pengadilan Agama / Mahkamah Syar'iyah Takengon
 * Pelayanan Terpadu Satu Pintu (PTSP) Online
 */

:root {
    --ms-green-darkest: #022c22;
    --ms-green-dark: #064e3b;
    --ms-green-primary: #047857;
    --ms-green-medium: #059669;
    --ms-green-light: #10b981;
    --ms-green-subtle: #ecfdf5;
    --ms-green-border: #a7f3d0;
    --ms-gold: #ca8a04;
    --ms-gold-light: #fef08a;
    --ms-gold-dark: #a16207;
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    color: #1f2937;
    background-color: #f8fafc;
}

/* Header & Navbar Gradients */
.bg-ms-gradient {
    background: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #047857 100%);
}

.bg-ms-card-gradient {
    background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 100%);
}

.bg-ms-gold-gradient {
    background: linear-gradient(135deg, #fef08a 0%, #eab308 50%, #ca8a04 100%);
}

/* Decorative Gold Bar */
.gold-accent-line {
    height: 4px;
    background: linear-gradient(90deg, #ca8a04 0%, #fef08a 50%, #ca8a04 100%);
}

/* Card Hover Effects */
.card-hover-effect {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover-effect:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px -6px rgba(4, 120, 87, 0.15), 0 8px 12px -4px rgba(4, 120, 87, 0.08);
    border-color: #059669;
}

/* Vertical tabs layanan perkara */
.perkara-tab.is-active {
    color: #064e3b;
    background: #ecfdf5;
    box-shadow: inset 3px 0 0 #047857;
}

@media (max-width: 1023px) {
    .perkara-tab.is-active {
        box-shadow: inset 0 -3px 0 #047857;
    }
}

/* Islamic Geometric Pattern Motif for Banners */
.bg-islamic-pattern {
    background-color: #064e3b;
    background-image: radial-gradient(#10b981 0.75px, transparent 0.75px), radial-gradient(#10b981 0.75px, #064e3b 0.75px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}

/* Floating Buttons Stack (Kanan Bawah Melayang) */
#floatingRightStack {
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 990;
}

/* ==========================================================================
   FLOATING SIDE TABS (KANAN LAYAR) - AKSEBILITAS, KE ATAS, ASISTEN AI
   ========================================================================== */
.side-tab-btn {
    display: flex;
    align-items: center;
    background-color: #032117;
    color: #ffffff;
    padding: 10px 10px 10px 12px;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
    box-shadow: -4px 6px 18px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-right: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
    outline: none;
}

.side-tab-btn:hover {
    background-color: #053b2a;
    border-color: rgba(52, 211, 153, 0.6);
    transform: translateX(-4px);
    box-shadow: -6px 8px 24px rgba(0, 0, 0, 0.45);
}

.side-tab-chevron {
    color: #34d399;
    font-size: 11px;
    margin-right: 8px;
    transition: transform 0.2s ease;
}

.side-tab-btn:hover .side-tab-chevron {
    transform: translateX(-2px);
    color: #6ee7b7;
}

.side-tab-icon-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.2);
    border: 1.5px solid rgba(245, 158, 11, 0.85);
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.side-tab-btn:hover .side-tab-icon-circle {
    transform: scale(1.08);
    background: rgba(245, 158, 11, 0.35);
}

/* ==========================================================================
   MODE FITUR AKSEBILITAS WEBSITE (PERSISTEN VIA LOCALSTORAGE)
   ========================================================================== */
/* Ukuran Font */
body.accessibility-font-sm {
    font-size: 88% !important;
}
body.accessibility-font-lg {
    font-size: 112% !important;
}
body.accessibility-font-xl {
    font-size: 125% !important;
}

/* Mode Kontras Tinggi */
body.accessibility-high-contrast {
    background-color: #000000 !important;
    color: #ffffff !important;
}
body.accessibility-high-contrast *:not(i):not(svg):not(path) {
    background-color: #0b0f19 !important;
    color: #ffff00 !important;
    border-color: #facc15 !important;
    box-shadow: none !important;
}
body.accessibility-high-contrast a {
    color: #38bdf8 !important;
    text-decoration: underline !important;
}
body.accessibility-high-contrast button {
    border: 2px solid #facc15 !important;
    color: #ffff00 !important;
    background-color: #000000 !important;
}

/* Mode Grayscale / Monokrom */
body.accessibility-grayscale {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
}

/* Mode Garis Bawahi Semua Tautan */
body.accessibility-underline-links a {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 1.5px !important;
}

/* Font Ramah Disleksia / Keterbacaan Tinggi */
body.accessibility-dyslexic {
    font-family: Arial, "Helvetica Neue", sans-serif !important;
    letter-spacing: 0.04em !important;
    word-spacing: 0.08em !important;
    line-height: 1.8 !important;
}

/* Chatbot Asisten AI PTSP */
.chat-scroll-area::-webkit-scrollbar {
    width: 5px;
}
.chat-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.4);
    border-radius: 4px;
}
.chat-scroll-area::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7);
}

/* Badge Peradilan Agama */
.badge-pa {
    background-color: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

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

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

::-webkit-scrollbar-thumb {
    background: #059669;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #047857;
}

/* Utility Classes MS Takengon Theme */
.bg-ms-800 { background-color: #064e3b !important; }
.bg-ms-700 { background-color: #047857 !important; }
.bg-ms-900 { background-color: #022c22 !important; }
.text-ms-800 { color: #064e3b !important; }
.text-ms-700 { color: #047857 !important; }
.text-ms-900 { color: #022c22 !important; }
.hover\:bg-ms-700:hover { background-color: #047857 !important; }
.hover\:bg-ms-800:hover { background-color: #064e3b !important; }

/* Dropdown Navigation Stability */
@media (min-width: 1024px) {
    .dropdown-biaya-container:hover .dropdown-biaya-menu {
        display: block !important;
    }
    .dropdown-biaya-container:hover #chevronDropdownBiaya {
        transform: rotate(180deg);
    }
}

/* Global Print Styles */
@media print {
    .no-print,
    .floating-wa-btn,
    .top-bar-info,
    .gold-accent-line,
    header,
    footer,
    nav {
        display: none !important;
    }
}


/* ==========================================================================
   NAVBAR SCROLLED - NUANSA HIJAU PENGADILAN (MAHKAMAH SYAR'IYAH TAKENGON)
   ========================================================================== */
header#mainNavbar {
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

header#mainNavbar.navbar-scrolled-green,
header#mainNavbar.navbar-scrolled-orange {
    background: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #047857 100%) !important;
    border-bottom: 2px solid #ca8a04 !important;
    box-shadow: 0 10px 25px -5px rgba(2, 44, 34, 0.45), 0 8px 10px -6px rgba(2, 44, 34, 0.25) !important;
}

/* Identitas Satker saat Scrolled Hijau Pengadilan */
header#mainNavbar.navbar-scrolled-green .brand-title,
header#mainNavbar.navbar-scrolled-orange .brand-title {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

header#mainNavbar.navbar-scrolled-green .brand-subtitle,
header#mainNavbar.navbar-scrolled-orange .brand-subtitle {
    color: #a7f3d0 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

header#mainNavbar.navbar-scrolled-green .brand-badge,
header#mainNavbar.navbar-scrolled-orange .brand-badge {
    background-color: #fef08a !important;
    color: #713f12 !important;
    border-color: #fde047 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

/* Navigasi Desktop Link Biasa saat Scrolled Hijau Pengadilan */
header#mainNavbar.navbar-scrolled-green .nav-item-link,
header#mainNavbar.navbar-scrolled-orange .nav-item-link {
    color: #ffffff !important;
}

header#mainNavbar.navbar-scrolled-green .nav-item-link:hover,
header#mainNavbar.navbar-scrolled-orange .nav-item-link:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

header#mainNavbar.navbar-scrolled-green .nav-item-link i,
header#mainNavbar.navbar-scrolled-orange .nav-item-link i {
    color: #fef08a !important;
}

/* Navigasi Desktop Link Aktif saat Scrolled Hijau Pengadilan */
header#mainNavbar.navbar-scrolled-green .nav-item-active,
header#mainNavbar.navbar-scrolled-orange .nav-item-active {
    background-color: #ffffff !important;
    color: #064e3b !important;
    border-color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
    font-weight: 800 !important;
}

header#mainNavbar.navbar-scrolled-green .nav-item-active i,
header#mainNavbar.navbar-scrolled-orange .nav-item-active i {
    color: #047857 !important;
}

/* Mobile Menu Button saat Scrolled Hijau Pengadilan */
header#mainNavbar.navbar-scrolled-green #mobileMenuBtn,
header#mainNavbar.navbar-scrolled-orange #mobileMenuBtn {
    color: #ffffff !important;
}

header#mainNavbar.navbar-scrolled-green #mobileMenuBtn:hover,
header#mainNavbar.navbar-scrolled-orange #mobileMenuBtn:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
}