/**
 * 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-color: #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; 
}

/* 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; 
}
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: #16a34a !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 */
html.dark main > div[style] { 
    background-color: transparent !important; 
}

/* 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: #064e3b !important; 
}

/* Layanan Cards */
html.dark .layanan-card-item { 
    background-color: #1e293b !important; 
    border-color: #065f46 !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: #064e3b !important; 
    border-color: #065f46 !important; 
}
html.dark .layanan-card-item a { 
    color: #4ade80 !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: #064e3b !important; 
    border-color: #16a34a !important; 
}
html.dark button[type="submit"] { 
    background: #16a34a !important; 
    color: white !important; 
}

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