/**
 * Unified Custom Styles & Overrides
 * Balai Diklat Keagamaan Denpasar
 */

/* ==========================================================================
   1. Dark Mode Style Overrides (From app.blade.php Layout)
   ========================================================================== */

/* Dark Mode Toggle Icons visibility */
html.dark .icon-moon { display: none !important; }
html:not(.dark) .icon-sun { display: none !important; }

/* Dark Mode Global Overrides (Utility Classes) */
html.dark body { 
    background: #0f172a !important; 
    color: #f8fafc !important; 
}
html.dark .bg-white { 
    background-color: #1e293b !important; 
    border-color: #334155 !important; 
}
html.dark .bg-gray-50 { 
    background-color: #0f172a !important; 
}
html.dark .bg-gray-100 { 
    background-color: #334155 !important; 
}
html.dark .bg-gray-800 { 
    background-color: #020617 !important; 
}
html.dark .text-gray-800, 
html.dark .text-gray-900 { 
    color: #f8fafc !important; 
}
html.dark .text-gray-700 { 
    color: #e2e8f0 !important; 
}
html.dark .text-gray-600, 
html.dark .text-gray-500 { 
    color: #94a3b8 !important; 
}
html.dark .border-gray-100,
html.dark .border-gray-200 {
    border-color: #334155 !important;
}

/* ------------------------------------------------------------------
   Safety-net warna teks di dark mode: cegah teks gelap (navy/slate/
   hitam) menempel pada latar gelap sehingga samar / tidak terlihat.
   ------------------------------------------------------------------ */
/* Teks navy khas brand → biru terang yang jelas di latar gelap */
html.dark .text-\[\#143377\],
html.dark .text-\[\#0e45a1\],
html.dark .text-\[\#0f2860\],
html.dark .text-\[\#1a5276\],
html.dark .text-\[\#0a2b66\],
html.dark .text-\[\#124191\] {
    color: #7ea9e6 !important;
}
/* Teks slate & hitam gelap → terang */
html.dark .text-slate-900,
html.dark .text-slate-800 { color: #f1f5f9 !important; }
html.dark .text-slate-700 { color: #e2e8f0 !important; }
html.dark .text-slate-600,
html.dark .text-slate-500 { color: #cbd5e1 !important; }
html.dark .text-black { color: #f1f5f9 !important; }

/* ------------------------------------------------------------------
   Latar PASTEL / terang (Tailwind *-50 & arbitrer) → digelapkan di dark
   mode, supaya badge & kotak (katalog/OPAC dll.) tidak tampil terang-di-
   atas-terang alias samar. Teksnya sudah ditangani aturan di atas.
   ------------------------------------------------------------------ */
html.dark .bg-\[\#e8edf5\] { background-color: #1e3a6b !important; }
html.dark .border-\[\#c5d0e6\] { border-color: #33518c !important; }
html.dark .bg-\[\#f8fafc\] { background-color: #111a2e !important; }
html.dark .bg-blue-50 { background-color: #17233f !important; }
html.dark .bg-sky-50 { background-color: #122740 !important; }
html.dark .bg-indigo-50 { background-color: #1e1b4b !important; }
html.dark .bg-green-50,
html.dark .bg-emerald-50 { background-color: #14311f !important; }
html.dark .bg-amber-50,
html.dark .bg-yellow-50 { background-color: #3a2c10 !important; }
html.dark .bg-red-50,
html.dark .bg-rose-50,
html.dark .bg-\[\#fef2f2\] { background-color: #3a1c1c !important; }
html.dark .border-\[\#fee2e2\] { border-color: #7f2020 !important; }
html.dark .text-\[\#dc2626\] { color: #f87171 !important; }
/* Teks *-700 gelap pada badge pastel agar tetap terbaca di latar gelap */
html.dark .text-green-700 { color: #86efac !important; }
html.dark .text-red-700,
html.dark .text-red-500 { color: #f87171 !important; }
html.dark .text-amber-700 { color: #fcd34d !important; }

/* Refined Dark Mode Shadows */
html.dark .shadow-sm { 
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) !important; 
}
html.dark .shadow-md { 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) !important; 
}
html.dark .shadow-lg { 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.07) !important; 
}
html.dark .shadow-xl { 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08) !important; 
}
html.dark .shadow-2xl { 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1) !important; 
}
html.dark .shadow-inner { 
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.5) !important; 
}

/* Colored Shadow Fixes for Dark Mode */
html.dark .shadow-green-100, 
html.dark .shadow-green-200, 
html.dark .shadow-green-500/20 { 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(22, 163, 74, 0.2) !important; 
}

/* Fix for light inline shadows in dark mode */
html.dark [style*="rgba(0,0,0,0.04)"],
html.dark [style*="rgba(0,0,0,0.05)"],
html.dark [style*="rgba(0,0,0,0.1)"] {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6) !important;
}

html.dark nav.bg-white {
    background-color: rgba(30, 41, 59, 0.95) !important;
}

/* Tombol "Daftar" di header: pastikan tetap pil putih + teks navy (kontras
   tinggi di atas header biru) — tidak samar di dark mode.
   Selektor sengaja menyertakan a[href*="perpus"] agar spesifisitasnya (0,3,2)
   mengalahkan aturan katalog `html.dark a[href*="perpus"]` (0,2,2) di bawah,
   yang tanpa ini keliru menggelapkan tombol karena href-nya memuat "perpus". */
html.dark a[href*="perpus"].hdr-daftar {
    background-color: #ffffff !important;
    color: #143377 !important;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3) !important;
}
html.dark a[href*="perpus"].hdr-daftar i {
    color: #143377 !important;
}
html.dark .hover\:bg-gray-100:hover { 
    background-color: #334155 !important; 
}
html.dark .hover\:bg-gray-50:hover { 
    background-color: #1e293b !important; 
}

/* Dark Mode Robust Overrides for Inline-Styles */
html.dark main h1,
html.dark main h2,
html.dark main h3,
html.dark main h4,
html.dark main h5,
html.dark main h6 {
    color: #f8fafc !important;
    border-color: #387edc !important;
}
html.dark main p { 
    color: #cbd5e1 !important; 
}
html.dark main span:not(.text-green-600):not(.text-green-500):not(.text-green-400) { 
    color: #cbd5e1 !important; 
}

/* General input and form overrides */
html.dark input, 
html.dark textarea { 
    background-color: #0f172a !important; 
    color: #f8fafc !important; 
    border-color: #334155 !important; 
}
html.dark form > div { 
    background-color: #1e293b !important; 
    border-color: #334155 !important; 
}

/* Welcome Page Specific Fixes */
/* NOTE: previously forced every inline-styled direct child of <main> to a
   transparent background — this fought with the newer, precisely-targeted
   .kategori-zone / .koleksi-buku-section / .berita-section dark overrides
   further down this file (which lost due to lower selector specificity),
   so it's removed. Sections that still need a transparent bg in dark mode
   (e.g. ones with no background of their own) don't need this rule since
   transparent is the default anyway. */

/* Book Category Cards */
html.dark a[href*="perpus"], 
html.dark a[href*="perpus"] * { 
    border-color: #334155 !important; 
}
html.dark a[href*="perpus"] { 
    background-color: #1e293b !important; 
    box-shadow: none !important; 
}
html.dark a[href*="perpus"] span { 
    color: #f8fafc !important; 
}
html.dark a[href*="perpus"] > div { 
    background-color: #13294f !important; 
}

/* Layanan Cards */
html.dark .layanan-card-item { 
    background-color: #1e293b !important; 
    border-color: #1e3a6b !important; 
}
html.dark .layanan-card-item p:first-of-type { 
    color: #f8fafc !important; 
}
html.dark .layanan-card-item p:last-of-type { 
    color: #cbd5e1 !important; 
}
html.dark .layanan-card-item > div { 
    background-color: #13294f !important; 
    border-color: #1e3a6b !important; 
}
html.dark .layanan-card-item a { 
    color: #60a5fa !important; 
}

/* Buttons Fixes */
html.dark button[onclick*="layanan"] { 
    background-color: #1e293b !important; 
    border-color: #334155 !important; 
    color: #f8fafc !important; 
}
html.dark button[onclick*="layanan"]:hover { 
    background-color: #13294f !important; 
    border-color: #387edc !important;
}
html.dark button[type="submit"] {
    background: #0e45a1 !important;
    color: white !important; 
}

/* Hero search bar beranda ("Jelajahi Koleksi Kami") — pill & input yang
   kohesif di dark mode (global `html.dark input` memaksa input near-black,
   sehingga terlihat terpisah dari pill; di sini input dibuat transparan). */
html.dark #hero-search-form > div {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}
html.dark #hero-search-form input[type="text"] {
    background-color: transparent !important;
    color: #e2e8f0 !important;
}
html.dark #hero-search-form input[type="text"]::placeholder {
    color: #64748b !important;
}
html.dark #hero-search-form .search-divider {
    background-color: #334155 !important;
}
html.dark #hero-search-form #dropdown-trigger,
html.dark #hero-search-form #dropdown-trigger span {
    color: #cbd5e1 !important;
}

/* Berita Section Fixes */
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: #334155 !important;
}

/* Kartu "Berita Terbaru": batalkan latar HIJAU yang keliru terwarisi dari
   aturan katalog a[href*="perpus"] (judul berita yang memuat kata "perpus"),
   kembalikan ke kartu gelap netral (dari dark:bg-gray-800 milik kartunya).
   Selektor 3-kelas ini menang atas a[href*="perpus"] > div (2 kelas). */
html.dark .berita-section .berita-side-card,
html.dark .berita-section .berita-side-card > div {
    background-color: transparent !important;
    border-color: #334155 !important;
}
html.dark .berita-section .berita-side-card {
    background-color: #1e293b !important;
}
/* Garis bawah judul "Berita Terbaru" → biru website (bukan hijau global). */
html.dark .berita-section h2 {
    border-color: #387edc !important;
}


/* ==========================================================================
   2. Scrollbar Styles
   ========================================================================== */

/* Custom scrollbar for mega menu (app.blade.php Layout) */
.mega-menu-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.mega-menu-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}
.mega-menu-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}
.mega-menu-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Sidebar Custom scrollbar (berita/show.blade.php) */
.sidebar-scroll::-webkit-scrollbar {
    width: 4px;
}
.sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 4px;
}
html.dark .sidebar-scroll::-webkit-scrollbar-thumb {
    background: #334155;
}
.sidebar-scroll:hover::-webkit-scrollbar-thumb {
    background: #d1d5db;
}
html.dark .sidebar-scroll:hover::-webkit-scrollbar-thumb {
    background: #475569;
}


/* ==========================================================================
   3. Custom Pagination Styling (dokumen/index.blade.php)
   ========================================================================== */

.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}
.page-item .page-link {
    border-radius: 0.75rem !important;
    border: 1px solid #f3f4f6 !important;
    color: #4b5563 !important;
    font-weight: 600;
    padding: 0.5rem 1rem;
}
.page-item.active .page-link {
    background-color: #059669 !important;
    border-color: #059669 !important;
    color: white !important;
}


/* ==========================================================================
   4. Layanan Card Slider Grid (welcome.blade.php)
   ========================================================================== */

/* Desktop: 4 card */
.layanan-card-item {
    flex: 0 0 calc(25% - 15px);
}

/* Tablet landscape: 3 card */
@media (max-width: 1024px) {
    .layanan-card-item {
        flex: 0 0 calc(33.333% - 14px);
    }
}

/* Tablet portrait: 2 card */
@media (max-width: 768px) {
    .layanan-card-item {
        flex: 0 0 calc(50% - 10px);
    }
}

/* Mobile: 1 card */
@media (max-width: 480px) {
    .layanan-card-item {
        flex: 0 0 calc(100%);
    }
}


/* ==========================================================================
   5. Rich Text / Prose overrides (halaman/show.blade.php)
   ========================================================================== */

.prose img {
    display: inline-block;
    margin: 0;
    max-width: 100%;
    height: auto;
}
.prose p {
    margin-top: 1em;
    margin-bottom: 1em;
}

/* ==========================================================================
   Google Translate Widget — hide default UI, keep only our custom trigger
   ========================================================================== */
body { top: 0px !important; position: static !important; }
.goog-te-banner-frame,
.goog-te-gadget-icon,
#google_translate_element { display: none !important; }
.goog-te-gadget { height: 0; overflow: hidden; font-size: 0; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; border: none !important; }
iframe.skiptranslate { display: none !important; }

/* ==========================================================================
   Homepage sections styled with inline `style=""` gradients/colors that
   Tailwind's `dark:` variant can't reach — overridden directly here.
   ========================================================================== */
html.dark .kategori-zone {
    background: linear-gradient(160deg, #1e293b 0%, #111827 55%) !important;
}

html.dark .koleksi-buku-section {
    background: linear-gradient(135deg, #111827 0%, #0f172a 45%, #111827 100%) !important;
}
html.dark .koleksi-buku-title { color: #f1f5f9 !important; }
html.dark .koleksi-buku-subtitle { color: #94a3b8 !important; }
html.dark .koleksi-buku-link { color: #60a5fa !important; }
html.dark .koleksi-buku-cover { background: #1e293b !important; }

html.dark .berita-section {
    background: linear-gradient(135deg, #111827 0%, #0f172a 45%, #111827 100%) !important;
}