/* Dark Mode Styles */

/* General Dark Mode */
html[data-theme="dark"],
html.dark {
    color-scheme: dark;
}

html[data-theme="dark"] body,
html.dark body {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%) !important;
    color: #e0e0e0 !important;
}

/* Main Content Areas */
html[data-theme="dark"] .min-h-screen,
html.dark .min-h-screen {
    background: #0d0d0d !important;
}

html[data-theme="dark"] .bg-gray-100,
html.dark .bg-gray-100 {
    background: #1a1a1a !important;
}

html[data-theme="dark"] .bg-white,
html.dark .bg-white {
    background: #1e1e1e !important;
    color: #e0e0e0;
}

html[data-theme="dark"] .bg-gray-50,
html.dark .bg-gray-50 {
    background: #2a2a2a !important;
}

html[data-theme="dark"] .bg-gray-200,
html.dark .bg-gray-200 {
    background: #333 !important;
}

html[data-theme="dark"] .text-gray-900,
html.dark .text-gray-900 {
    color: #e0e0e0 !important;
}

html[data-theme="dark"] .text-gray-800,
html.dark .text-gray-800 {
    color: #d0d0d0 !important;
}

html[data-theme="dark"] .text-gray-700,
html.dark .text-gray-700 {
    color: #c0c0c0 !important;
}

html[data-theme="dark"] .text-gray-600,
html.dark .text-gray-600 {
    color: #a0a0a0 !important;
}

html[data-theme="dark"] .text-gray-500,
html.dark .text-gray-500 {
    color: #808080 !important;
}

html[data-theme="dark"] .border-gray-200,
html.dark .border-gray-200 {
    border-color: #444 !important;
}

html[data-theme="dark"] .border-gray-300,
html.dark .border-gray-300 {
    border-color: #555 !important;
}

html[data-theme="dark"] .shadow,
html.dark .shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .shadow-lg,
html.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.7) !important;
}

/* Cards and Containers */
html[data-theme="dark"] .card,
html[data-theme="dark"] [class*="card"] {
    background: #1e1e1e !important;
    color: #e0e0e0;
    border-color: #444 !important;
}

/* Tables */
html[data-theme="dark"] table {
    color: #e0e0e0;
}

html[data-theme="dark"] thead {
    background: #2a2a2a !important;
    color: #e0e0e0;
}

html[data-theme="dark"] tbody tr {
    border-color: #444 !important;
}

html[data-theme="dark"] tbody tr:hover {
    background: #2a2a2a !important;
}

/* Forms */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #888 !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    border-color: #0D6630 !important;
    background: #333 !important;
    box-shadow: 0 0 0 3px rgba(13, 102, 48, 0.2) !important;
}

/* Buttons */
html[data-theme="dark"] .btn-primary {
    background: #0D6630 !important;
    color: white !important;
}

html[data-theme="dark"] .btn-secondary {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

html[data-theme="dark"] .btn-secondary:hover {
    background: #333 !important;
}

/* Tautan — jangan timpa warna tombol / badge (pakai warna kelas Tailwind) */
html[data-theme="dark"] .content-section p a:not([class*="rounded"]):not([class*="border-"]),
html[data-theme="dark"] footer a:not([class*="bg-"]),
html[data-theme="dark"] main .prose a {
    color: #5eead4 !important;
}

html[data-theme="dark"] .content-section p a:not([class*="rounded"]):hover,
html[data-theme="dark"] footer a:not([class*="bg-"]):hover {
    color: #99f6e4 !important;
}

/* Modals and Dropdowns */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .dropdown {
    background: #1e1e1e !important;
    color: #e0e0e0;
}

html[data-theme="dark"] .modal-header {
    background: #2a2a2a !important;
    border-color: #444 !important;
}

html[data-theme="dark"] .modal-footer {
    background: #2a2a2a !important;
    border-color: #444 !important;
}

/* Alerts and Messages */
html[data-theme="dark"] .alert {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

html[data-theme="dark"] .alert-success {
    background: #1f3a1f !important;
    color: #6dd4c4 !important;
    border-color: #0D6630 !important;
}

html[data-theme="dark"] .alert-danger {
    background: #3a1f1f !important;
    color: #ff6b6b !important;
    border-color: #c33 !important;
}

html[data-theme="dark"] .alert-warning {
    background: #3a3a1f !important;
    color: #ffd700 !important;
    border-color: #ff9800 !important;
}

html[data-theme="dark"] .alert-info {
    background: #1f2a3a !important;
    color: #4db8a8 !important;
    border-color: #0D6630 !important;
}

/* Login User Page */
html[data-theme="dark"] body {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
}

html[data-theme="dark"] .login-container {
    background: #1e1e1e;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

html[data-theme="dark"] .login-left {
    background: linear-gradient(135deg, #0a3d1f 0%, #051f10 100%);
}

html[data-theme="dark"] .login-right h2 {
    color: #e0e0e0;
}

html[data-theme="dark"] .form-group label {
    color: #e0e0e0;
}

html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

html[data-theme="dark"] .form-group input:focus,
html[data-theme="dark"] .form-group textarea:focus {
    background: #333;
    border-color: #0D6630;
    box-shadow: 0 0 0 3px rgba(13, 102, 48, 0.2);
}

html[data-theme="dark"] .form-group input::placeholder,
html[data-theme="dark"] .form-group textarea::placeholder {
    color: #888;
}

html[data-theme="dark"] .remember-forgot {
    color: #e0e0e0;
}

html[data-theme="dark"] .remember-forgot a {
    color: #4db8a8;
}

html[data-theme="dark"] .remember-forgot a:hover {
    color: #6dd4c4;
}

html[data-theme="dark"] .error-message {
    background: #3a1f1f;
    color: #ff6b6b;
    border-left-color: #ff6b6b;
}

html[data-theme="dark"] .back-link a {
    color: #4db8a8;
}

html[data-theme="dark"] .back-link a:hover {
    color: #6dd4c4;
}

/* Register User Page */
html[data-theme="dark"] .register-container {
    background: #1e1e1e;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

html[data-theme="dark"] .register-left {
    background: linear-gradient(135deg, #0a3d1f 0%, #051f10 100%);
}

html[data-theme="dark"] .register-right {
    background: #1e1e1e;
}

html[data-theme="dark"] .register-right h2 {
    color: #4db8a8;
}

html[data-theme="dark"] .file-input-label {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

html[data-theme="dark"] .file-input-label:hover {
    background: #333;
    border-color: #0D6630;
}

html[data-theme="dark"] .file-input-button {
    background: #2a2a2a;
    border-color: #444;
    color: #4db8a8;
}

html[data-theme="dark"] .file-input-button:hover {
    background: #333;
    border-color: #0D6630;
}

html[data-theme="dark"] .file-note {
    color: #ff6b6b;
}

html[data-theme="dark"] .success-message {
    background: #1f3a1f;
    color: #6dd4c4;
    border-left-color: #6dd4c4;
}

/* Scrollbar Dark Mode */
html[data-theme="dark"] .login-right::-webkit-scrollbar-track,
html[data-theme="dark"] .register-right::-webkit-scrollbar-track {
    background: #2a2a2a;
}

html[data-theme="dark"] .login-right::-webkit-scrollbar-thumb,
html[data-theme="dark"] .register-right::-webkit-scrollbar-thumb {
    background: #0D6630;
}

html[data-theme="dark"] .login-right::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .register-right::-webkit-scrollbar-thumb:hover {
    background: #0a4d23;
}

/* Dark Mode Toggle Button */
.darkmode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    font-size: 13px;
    font-weight: 500;
    user-select: none;
}

.darkmode-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.darkmode-toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    transition: transform 0.3s ease;
}

.darkmode-toggle:hover svg {
    transform: rotate(20deg);
}

.darkmode-toggle .label {
    display: none;
}

@media (min-width: 768px) {
    .darkmode-toggle .label {
        display: inline;
    }
}

/* Mobile Dark Mode Toggle */
.darkmode-toggle-mobile {
    background: transparent !important;
    border: none !important;
    color: #1f2937 !important;
}

.darkmode-toggle-mobile:hover {
    background: #d1fae5 !important;
}

.darkmode-toggle-mobile svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
}

/* Navbar Dark Mode Toggle */
.darkmode-toggle-navbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.darkmode-toggle-navbar:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.05);
}

.darkmode-toggle-navbar:active {
    transform: scale(0.95);
}

.darkmode-toggle-navbar svg {
    width: 20px;
    height: 20px;
    stroke: white;
    fill: none;
    transition: transform 0.3s ease;
}

.darkmode-toggle-navbar:hover svg {
    transform: rotate(20deg);
}

/* Dark mode for navbar toggle */
html[data-theme="dark"] .darkmode-toggle-navbar {
    background: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .darkmode-toggle-navbar:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="dark"] .darkmode-toggle-navbar svg {
    stroke: #e0e0e0 !important;
}

/* Icon colors */
#moon-icon {
    stroke: #0D6630 !important;
    transition: all 0.3s ease;
}

#sun-icon {
    stroke: #0D6630 !important;
    transition: all 0.3s ease;
}

html[data-theme="dark"] #moon-icon {
    stroke: #e0e0e0 !important;
}

html[data-theme="dark"] #sun-icon {
    stroke: #e0e0e0 !important;
}

/* Filament Admin Panel Dark Mode */
html[data-theme="dark"] .fi-body {
    background: #0d0d0d !important;
    color: #e0e0e0;
}

html[data-theme="dark"] .fi-sidebar {
    background: #1e1e1e !important;
    border-color: #444 !important;
}

html[data-theme="dark"] .fi-header {
    background: #1e1e1e !important;
    border-color: #444 !important;
}

html[data-theme="dark"] .fi-section {
    background: #1e1e1e !important;
    color: #e0e0e0;
}

html[data-theme="dark"] .fi-input {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

html[data-theme="dark"] .fi-button {
    background: #0D6630 !important;
    color: white !important;
}

/*
 * Navbar utama (#navbar): jangan paksa background di sini — kelas Tailwind +
 * scroll script (transparent di atas halaman vs hijau saat scroll) sama untuk
 * light/dark; aturan nav global sebelumnya membatalkan bg-transparent dan
 * membuat banner tertutup “lapisan” gelap di dark mode.
 */

/* Footer — mode terang tetap seperti desain; mode gelap: gradien gelap + aksen emerald */
html[data-theme="dark"] footer.site-footer {
    background-color: #080d0b !important;
    color: #e8ece9;
    border-top-color: rgba(45, 62, 54, 0.9) !important;
}

html[data-theme="dark"] footer.site-footer .footer-bg-layer {
    background: linear-gradient(
        155deg,
        #060a08 0%,
        #0c1812 38%,
        #0f2420 72%,
        #12322a 100%
    ) !important;
}

/* Ornamen blur: ganti putih halus jadi semburat emerald yang cocok di dark */
html[data-theme="dark"] footer.site-footer .footer-bg-layer .opacity-5 .bg-white {
    background-color: rgb(16 185 129 / 0.12) !important;
}

/* Tombol & kartu ringan di footer */
html[data-theme="dark"] footer.site-footer [class*="hover:bg-white/5"]:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] footer.site-footer a[class*="border-emerald"] {
    border-color: rgba(52, 211, 153, 0.35) !important;
}

html[data-theme="dark"] footer.site-footer a[class*="bg-emerald-500/10"] {
    background-color: rgba(16, 185, 129, 0.12) !important;
}

/* Footer lain (tanpa .site-footer) tetap netral */
html[data-theme="dark"] footer:not(.site-footer) {
    background: #1e1e1e !important;
    color: #e0e0e0;
    border-color: #444 !important;
}

/* Pagination Dark Mode */
html[data-theme="dark"] .pagination {
    background: #2a2a2a !important;
}

html[data-theme="dark"] .pagination a,
html[data-theme="dark"] .pagination span {
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

html[data-theme="dark"] .pagination a:hover {
    background: #333 !important;
}

html[data-theme="dark"] .pagination .active {
    background: #0D6630 !important;
}

/* Breadcrumb Dark Mode */
html[data-theme="dark"] .breadcrumb {
    background: #2a2a2a !important;
}

html[data-theme="dark"] .breadcrumb-item {
    color: #e0e0e0 !important;
}

html[data-theme="dark"] .breadcrumb-item.active {
    color: #4db8a8 !important;
}

/* Badge Dark Mode */
html[data-theme="dark"] .badge {
    background: #0D6630 !important;
    color: white !important;
}

/* Tooltip Dark Mode */
html[data-theme="dark"] .tooltip-inner {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
}

/* ------- Transisi tema (selektif — bukan selektor * ) ------- */
body,
nav,
footer,
.content-section,
.featured-news-section,
.theme-transition-surface,
.hero-section .hero-overlay,
.slider-box,
.sidebar-card {
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: 0.35s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-transition-text,
.featured-news-heading,
.home-section-heading,
.lapak-title,
.lapak-subtitle {
    transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#lapak-desa.home-lapak-section,
#anggaran.home-anggaran-section {
    transition-property: background, background-color, color, border-color;
    transition-duration: 0.35s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Beranda: blok berita atas */
html[data-theme="dark"] .featured-news-section {
    background: linear-gradient(to bottom right, #141c18, #0f1612) !important;
}

html[data-theme="dark"] .featured-news-heading,
html[data-theme="dark"] .home-section-heading {
    color: #6ee7b7 !important;
}

html[data-theme="dark"] .featured-news-accent,
html[data-theme="dark"] .home-section-accent {
    background-color: #059669 !important;
}

/* Grid berita besar */
html[data-theme="dark"] #berita.home-berita-section {
    background: linear-gradient(180deg, #121a14 0%, #0e1410 100%) !important;
}

/* Lapak Desa — latar cerah Tailwind tidak mengikut dark tanpa ini */
html[data-theme="dark"] #lapak-desa.home-lapak-section {
    background: linear-gradient(180deg, #131b16 0%, #0f1411 100%) !important;
}

html[data-theme="dark"] #lapak-desa .lapak-title {
    color: #6ee7b7 !important;
}

html[data-theme="dark"] #lapak-desa .lapak-subtitle {
    color: #a1a9a4 !important;
}

/* Anggaran Desa — gradien terang section + overlay muat tema */
html[data-theme="dark"] #anggaran.home-anggaran-section {
    background: linear-gradient(to bottom right, #121917, #0d110f) !important;
}

html[data-theme="dark"] #anggaran-loading {
    background: rgba(15, 22, 18, 0.88) !important;
}

html[data-theme="dark"] #anggaran-loading .text-gray-700 {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] #anggaran .bg-gray-200 {
    background-color: #2d3832 !important;
}

html[data-theme="dark"] #anggaran .home-anggaran-empty {
    border-color: #3f4a41 !important;
    background-color: #1a211c !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] #anggaran .bg-green-50,
html[data-theme="dark"] #anggaran .bg-orange-50 {
    background: rgba(30, 42, 35, 0.92) !important;
}

html[data-theme="dark"] #anggaran .border-green-200 {
    border-color: #33473a !important;
}

html[data-theme="dark"] #anggaran .border-orange-200 {
    border-color: #453a30 !important;
}

/* Foto berita utama tidak “lenyap” di dark */
html[data-theme="dark"] .featured-latest-img {
    opacity: 1 !important;
}

/* Tombol & judul berita — kontras tegas (tidak dipengaruhi html .bg-white { color }) */
html[data-theme="dark"] .featured-news-section .featured-main-cta {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border-color: rgba(167, 243, 208, 0.5) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"] .featured-news-section .featured-main-cta:hover {
    filter: brightness(1.1);
    color: #ffffff !important;
}

html[data-theme="dark"] .featured-news-section .featured-sidebar-cta {
    background-color: #059669 !important;
    color: #ffffff !important;
    border-color: #047857 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .featured-news-section .featured-sidebar-cta:hover {
    background-color: #10b981 !important;
    color: #ffffff !important;
    border-color: #34d399 !important;
}

html[data-theme="dark"] #berita-grid .berita-card-cta {
    background-color: #152620 !important;
    color: #ecfdf5 !important;
    border-color: #2d8659 !important;
}

html[data-theme="dark"] #berita-grid .berita-card-cta:hover {
    background-color: #0d6630 !important;
    color: #ffffff !important;
    border-color: #6ee7b7 !important;
}

html[data-theme="dark"] #berita-grid .berita-card__title-link {
    color: #ecfdf5 !important;
}

html[data-theme="dark"] #berita-grid .berita-card__title-link:hover {
    color: #6ee7b7 !important;
}

html[data-theme="dark"] .berita-pagination .berita-page-link:not(.berita-page-link--muted):not(.berita-page-link--current) {
    background-color: #1a2822 !important;
    color: #a7f3d0 !important;
    border-color: #2d4a40 !important;
}

html[data-theme="dark"] .berita-pagination .berita-page-link:not(.berita-page-link--muted):not(.berita-page-link--current):hover {
    background-color: #0d6630 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
}

html[data-theme="dark"] .berita-pagination .berita-page-link--current {
    background-color: #059669 !important;
    color: #ffffff !important;
    border-color: #34d399 !important;
}

html[data-theme="dark"] .berita-pagination .berita-page-link--muted {
    background-color: #252f2b !important;
    color: #64748b !important;
    border-color: #3f4440 !important;
}

/* Titik carousel sidebar “Berita Terbaru” */
html[data-theme="dark"] .featured-news-section button.carousel-indicator {
    background-color: #475569 !important;
}

html[data-theme="dark"] .featured-news-section button.carousel-indicator.bg-emerald-600 {
    background-color: #10b981 !important;
}

/* Sidebar kategori modal di beranda */
html[data-theme="dark"] #kategori-sidebar {
    background: #1a211c !important;
    border-color: #2d3f33 !important;
}

/* ========= Halaman Profil Desa (/profile_desa) ========= */
html[data-theme="dark"] .profile-heading-green {
    color: #6ee7b7 !important;
}

html[data-theme="dark"] .profile-heading-accent {
    background-color: #059669 !important;
}

html[data-theme="dark"] .profile-lead-muted {
    color: #b8c9c0 !important;
}

html[data-theme="dark"] .profile-section-sejarah,
html[data-theme="dark"] .profile-section-kepala {
    background: linear-gradient(165deg, #121a15 0%, #0f1412 55%, #0c100e 100%) !important;
}

html[data-theme="dark"] .profile-section-peta {
    background: linear-gradient(165deg, #121917 0%, #0e1311 55%, #0b0f0d 100%) !important;
}

html[data-theme="dark"] .profile-sejarah-card {
    background: linear-gradient(148deg, #1a251f 0%, #161c17 55%, #121814 100%) !important;
    border-color: #2f4f3e !important;
}

html[data-theme="dark"] .profile-sejarah-card--budaya {
    background: linear-gradient(148deg, #1a2229 0%, #161b20 55%, #12161a 100%) !important;
    border-color: #2d4150 !important;
}

html[data-theme="dark"] .profile-sejarah-card .text-gray-700 {
    color: #d4e3da !important;
}

html[data-theme="dark"] .profile-stat-card {
    background: #18211c !important;
    border-color: #2f4238 !important;
}

html[data-theme="dark"] .profile-stat-value-wrap.profile-stat-value--accent {
    color: #6ee7b7 !important;
}

html[data-theme="dark"] #peta-geografis .profile-panel {
    background: #1a211e !important;
    border-color: #33483c !important;
}

html[data-theme="dark"] #peta-geografis .map-container {
    border-color: #3f8f63 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] #peta-geografis .profile-accent-value {
    color: #86efac !important;
}

html[data-theme="dark"] #topografi-iklim .bg-emerald-100 {
    background: rgba(16, 185, 129, 0.16) !important;
}

html[data-theme="dark"] #topografi-iklim .bg-orange-50 {
    background: rgba(251, 146, 60, 0.12) !important;
}

html[data-theme="dark"] #topografi-iklim .bg-blue-50 {
    background: rgba(96, 165, 250, 0.12) !important;
}

html[data-theme="dark"] #topografi-iklim .text-orange-700 {
    color: #fdba74 !important;
}

html[data-theme="dark"] #topografi-iklim .text-blue-700 {
    color: #93c5fd !important;
}

html[data-theme="dark"] #topografi-iklim .font-semibold.text-emerald-700 {
    color: #86efac !important;
}

html[data-theme="dark"] .profile-hero-caption {
    background: #17231c !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}

html[data-theme="dark"] .profile-hero-caption .text-gray-800 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .profile-hero-caption .text-emerald-700 {
    color: #6ee7b7 !important;
}

html[data-theme="dark"] table.kepala-desa-table thead {
    background: transparent !important;
}

html[data-theme="dark"] table.kepala-desa-table thead th {
    background-color: #0d6630 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] table.kepala-desa-table tbody td {
    color: #e9f0ec !important;
    border-bottom-color: #2d3933 !important;
}

html[data-theme="dark"] table.kepala-desa-table tbody tr:nth-child(odd) {
    background-color: #1b221e !important;
}

html[data-theme="dark"] table.kepala-desa-table tbody tr:nth-child(even) {
    background-color: #222b26 !important;
}

html[data-theme="dark"] table.kepala-desa-table tbody tr:hover {
    background-color: #2f3d34 !important;
}

html[data-theme="dark"] table.profile-demografi-table thead {
    background: transparent !important;
}

html[data-theme="dark"] table.profile-demografi-table {
    background: #1a211e !important;
}

html[data-theme="dark"] table.profile-demografi-table thead tr {
    background: linear-gradient(135deg, #0d6630 0%, #065f46 100%) !important;
}

html[data-theme="dark"] table.profile-demografi-table thead th {
    background: transparent !important;
    color: #ffffff !important;
}

html[data-theme="dark"] table.profile-demografi-table td {
    border-bottom-color: #2f3d34 !important;
    color: #e4eae7 !important;
}

html[data-theme="dark"] table.profile-demografi-table .label-col {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] table.profile-demografi-table .separator {
    color: #71808c !important;
}

html[data-theme="dark"] table.profile-demografi-table .value-col {
    color: #86efac !important;
}

html[data-theme="dark"] table.profile-demografi-table .section-header {
    background-color: #242e2a !important;
    color: #a7f3d0 !important;
}

html[data-theme="dark"] table.profile-demografi-table tbody tr:hover {
    background-color: rgba(16, 185, 129, 0.06) !important;
}

html[data-theme="dark"] #visi-misi {
    background: linear-gradient(
        165deg,
        #0a1f14 0%,
        #08170f 38%,
        #040a06 100%
    ) !important;
    box-shadow: inset 0 1px 0 rgba(110, 231, 183, 0.12);
}

html[data-theme="dark"] #visi-misi .profile-visi-underline {
    background-color: rgba(167, 243, 208, 0.65) !important;
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.35);
}

html[data-theme="dark"] #visi-misi .profile-visi-text {
    color: rgb(248 250 252 / 0.98) !important;
}

html[data-theme="dark"] #visi-misi .profile-visi-card {
    background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.13) 0%,
        rgba(16, 185, 129, 0.08) 55%,
        rgba(0, 0, 0, 0.22) 100%
    ) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color: rgba(110, 231, 183, 0.42) !important;
    box-shadow:
        0 14px 42px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 1px 0 rgba(255, 255, 255, 0.16) inset !important;
    color: #f8fafc;
}

html[data-theme="dark"] #visi-misi .profile-visi-card:hover {
    background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.17) 0%,
        rgba(52, 211, 153, 0.12) 50%,
        rgba(0, 0, 0, 0.18) 100%
    ) !important;
    border-color: rgba(167, 243, 208, 0.58) !important;
    box-shadow:
        0 18px 52px rgba(0, 0, 0, 0.52),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 0 28px rgba(52, 211, 153, 0.14) !important;
}

html[data-theme="dark"] table.profile-demografi-table .section-header:hover {
    background-color: #242e2a !important;
}

/* Banner halaman (Berita / Lapak / Galeri / Lembaga) — shared partial */
html[data-theme="dark"] .page-hero-gradient {
    background: linear-gradient(152deg, #050e0a 0%, #10261a 40%, #08130e 100%) !important;
}

html[data-theme="dark"] .site-page-hero .page-hero-eyebrow {
    color: rgba(167, 243, 208, 0.9) !important;
}

html[data-theme="dark"] .site-page-hero .page-hero-subtitle {
    color: rgba(226, 232, 229, 0.92) !important;
}

html[data-theme="dark"] .lembaga-page {
    background: linear-gradient(180deg, #0d1310 0%, #0a0e0c 45%, #070908 100%) !important;
}

html[data-theme="dark"] .lembaga-desa-card .lembaga-card-foot {
    background: linear-gradient(to bottom, #1a221e, #151b18) !important;
    border-color: rgba(52, 71, 61, 0.9) !important;
}

html[data-theme="dark"] .lembaga-desa-card .lembaga-ketua-label {
    color: #94a3a8 !important;
}

html[data-theme="dark"] .lembaga-desa-card .lembaga-ketua-name {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .lembaga-desa-card .lembaga-kontak-chip {
    background: #1e2622 !important;
    border-color: #33483c !important;
    color: #cbd5e1 !important;
}

/* Cek status surat / pengaduan + formulir pengaduan (layanan publik) */
body:has(.site-service-page:not(.site-service-page--with-hero)) {
    padding-top: 5rem;
}

html[data-theme="dark"] main.site-service-page,
html[data-theme="dark"] .site-service-page.site-service-page--with-hero {
    background: linear-gradient(180deg, #0d1310 0%, #0a1210 48%, #070a09 100%) !important;
}

html[data-theme="dark"] .site-service-intro {
    background: rgba(23, 35, 30, 0.88) !important;
    border-color: rgba(52, 211, 153, 0.26) !important;
}

html[data-theme="dark"] .site-service-page table thead {
    background: #1a231e !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .site-service-page table tbody > tr {
    border-color: rgba(71, 85, 78, 0.55) !important;
}

html[data-theme="dark"] .site-service-page .border-emerald-600\/90 {
    border-color: rgba(34, 197, 94, 0.45) !important;
}

html[data-theme="dark"] .site-service-page tbody tr:hover {
    background: rgba(22, 42, 34, 0.75) !important;
}

html[data-theme="dark"] .site-service-page input,
html[data-theme="dark"] .site-service-page textarea,
html[data-theme="dark"] .site-service-page select {
    background: #151c18 !important;
    color: #e8ece9 !important;
    border-color: rgba(71, 85, 78, 0.95) !important;
}

html[data-theme="dark"] .site-service-page input::placeholder,
html[data-theme="dark"] .site-service-page textarea::placeholder {
    color: #8a9a92 !important;
}

html[data-theme="dark"] .site-service-page input:focus,
html[data-theme="dark"] .site-service-page textarea:focus,
html[data-theme="dark"] .site-service-page select:focus {
    background: #1a2420 !important;
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22) !important;
}

html[data-theme="dark"] .site-service-page .text-emerald-900,
html[data-theme="dark"] .site-service-page .text-emerald-950 {
    color: #a7f3d0 !important;
}

html[data-theme="dark"] .site-service-page .text-emerald-800 {
    color: rgba(167, 243, 208, 0.92) !important;
}

html[data-theme="dark"] .site-service-page .hover\:text-emerald-800:hover {
    color: rgba(167, 243, 208, 0.92) !important;
}

html[data-theme="dark"] .site-service-page .border-emerald-100,
html[data-theme="dark"] .site-service-page .border-emerald-200,
html[data-theme="dark"] .site-service-page .border-emerald-300 {
    border-color: rgba(52, 211, 153, 0.28) !important;
}

html[data-theme="dark"] .site-service-page .bg-emerald-50,
html[data-theme="dark"] .site-service-page .bg-emerald-50\/80,
html[data-theme="dark"] .site-service-page .bg-emerald-100 {
    background: rgba(15, 35, 28, 0.72) !important;
}

html[data-theme="dark"] .site-service-page .hover\:bg-emerald-50:hover,
html[data-theme="dark"] .site-service-page .hover\:bg-emerald-100:hover {
    background: rgba(22, 42, 34, 0.88) !important;
}

html[data-theme="dark"] .site-service-page button.cek-status-open-detail:hover {
    background-color: rgba(22, 42, 34, 0.92) !important;
}

html[data-theme="dark"] .site-service-page button.cek-status-open-detail:active {
    background-color: rgba(28, 52, 40, 0.95) !important;
}

html[data-theme="dark"] #cek-status-modal .border-emerald-100 {
    border-color: rgba(52, 211, 153, 0.28) !important;
}

html[data-theme="dark"] #cek-status-modal .bg-emerald-50\/70 {
    background: rgba(15, 38, 30, 0.78) !important;
}

html[data-theme="dark"] #cek-status-modal .bg-emerald-50\/80 {
    background: rgba(15, 35, 28, 0.76) !important;
}

html[data-theme="dark"] #cek-status-modal .bg-gray-50\/80 {
    background: rgba(24, 30, 28, 0.85) !important;
}

/* Modal cek status — kontras tegas di light & dark (tidak bergantung Tailwind dark: saja) */
#cek-status-modal .cek-status-modal-shell,
#cek-status-surat-modal .cek-status-modal-shell {
    background: #ffffff !important;
    color: #111827 !important;
}

html[data-theme="dark"] #cek-status-modal .cek-status-modal-shell,
html.dark #cek-status-modal .cek-status-modal-shell,
html[data-theme="dark"] #cek-status-surat-modal .cek-status-modal-shell,
html.dark #cek-status-surat-modal .cek-status-modal-shell {
    background: #1a211e !important;
    color: #f1f5f9 !important;
}

#cek-status-modal .cek-status-modal-shell .cek-status-modal-header,
#cek-status-surat-modal .cek-status-modal-shell .cek-status-modal-header {
    background: #ffffff !important;
    border-color: #d1fae5 !important;
}

html[data-theme="dark"] #cek-status-modal .cek-status-modal-shell .cek-status-modal-header,
html.dark #cek-status-modal .cek-status-modal-shell .cek-status-modal-header,
html[data-theme="dark"] #cek-status-surat-modal .cek-status-modal-shell .cek-status-modal-header,
html.dark #cek-status-surat-modal .cek-status-modal-shell .cek-status-modal-header {
    background: #1f2a24 !important;
    border-color: rgba(52, 211, 153, 0.28) !important;
}

#cek-status-modal .cek-status-modal-shell .cek-status-modal-title,
#cek-status-surat-modal .cek-status-modal-shell .cek-status-modal-title {
    color: #064e3b !important;
}

html[data-theme="dark"] #cek-status-modal .cek-status-modal-shell .cek-status-modal-title,
html.dark #cek-status-modal .cek-status-modal-shell .cek-status-modal-title,
html[data-theme="dark"] #cek-status-surat-modal .cek-status-modal-shell .cek-status-modal-title,
html.dark #cek-status-surat-modal .cek-status-modal-shell .cek-status-modal-title {
    color: #a7f3d0 !important;
}

#cek-status-modal .cek-status-modal-shell .cek-status-modal-subtitle,
#cek-status-surat-modal .cek-status-modal-shell .cek-status-modal-subtitle {
    color: #4b5563 !important;
}

html[data-theme="dark"] #cek-status-modal .cek-status-modal-shell .cek-status-modal-subtitle,
html.dark #cek-status-modal .cek-status-modal-shell .cek-status-modal-subtitle,
html[data-theme="dark"] #cek-status-surat-modal .cek-status-modal-shell .cek-status-modal-subtitle,
html.dark #cek-status-surat-modal .cek-status-modal-shell .cek-status-modal-subtitle {
    color: #cbd5e1 !important;
}

#cek-status-modal .cek-status-modal-shell .cek-status-modal-body,
#cek-status-surat-modal .cek-status-modal-shell .cek-status-modal-body {
    background: #f9fafb !important;
    color: #111827 !important;
}

html[data-theme="dark"] #cek-status-modal .cek-status-modal-shell .cek-status-modal-body,
html.dark #cek-status-modal .cek-status-modal-shell .cek-status-modal-body,
html[data-theme="dark"] #cek-status-surat-modal .cek-status-modal-shell .cek-status-modal-body,
html.dark #cek-status-surat-modal .cek-status-modal-shell .cek-status-modal-body {
    background: #141a17 !important;
    color: #f1f5f9 !important;
}

#cek-status-modal .cek-status-modal-shell .cek-status-modal-identity {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #111827 !important;
}

#cek-status-modal .cek-status-modal-shell .cek-status-modal-identity-label {
    color: #065f46 !important;
}

#cek-status-modal .cek-status-modal-shell .cek-status-modal-identity-muted {
    color: #6b7280 !important;
}

#cek-status-modal .cek-status-modal-shell .cek-status-modal-identity-value {
    color: #111827 !important;
}

html[data-theme="dark"] #cek-status-modal .cek-status-modal-shell .cek-status-modal-identity,
html.dark #cek-status-modal .cek-status-modal-shell .cek-status-modal-identity {
    background: rgba(6, 78, 59, 0.35) !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] #cek-status-modal .cek-status-modal-shell .cek-status-modal-identity-label,
html.dark #cek-status-modal .cek-status-modal-shell .cek-status-modal-identity-label {
    color: #6ee7b7 !important;
}

html[data-theme="dark"] #cek-status-modal .cek-status-modal-shell .cek-status-modal-identity-muted,
html.dark #cek-status-modal .cek-status-modal-shell .cek-status-modal-identity-muted {
    color: #9ca3af !important;
}

html[data-theme="dark"] #cek-status-modal .cek-status-modal-shell .cek-status-modal-identity-value,
html.dark #cek-status-modal .cek-status-modal-shell .cek-status-modal-identity-value {
    color: #f3f4f6 !important;
}

#cek-status-modal .cek-status-modal-shell .cek-status-modal-close-btn,
#cek-status-surat-modal .cek-status-modal-shell .cek-status-modal-close-btn {
    color: #4b5563 !important;
    background: transparent !important;
}

#cek-status-modal .cek-status-modal-shell .cek-status-modal-close-btn:hover,
#cek-status-surat-modal .cek-status-modal-shell .cek-status-modal-close-btn:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

html[data-theme="dark"] #cek-status-modal .cek-status-modal-shell .cek-status-modal-close-btn,
html.dark #cek-status-modal .cek-status-modal-shell .cek-status-modal-close-btn,
html[data-theme="dark"] #cek-status-surat-modal .cek-status-modal-shell .cek-status-modal-close-btn,
html.dark #cek-status-surat-modal .cek-status-modal-shell .cek-status-modal-close-btn {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] #cek-status-modal .cek-status-modal-shell .cek-status-modal-close-btn:hover,
html.dark #cek-status-modal .cek-status-modal-shell .cek-status-modal-close-btn:hover,
html[data-theme="dark"] #cek-status-surat-modal .cek-status-modal-shell .cek-status-modal-close-btn:hover,
html.dark #cek-status-surat-modal .cek-status-modal-shell .cek-status-modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f9fafb !important;
}

/* Isolasi isi modal dari override global .bg-white / .text-gray-* */
#cek-status-modal .cek-status-modal-shell .cek-status-detail-panel,
#cek-status-surat-modal .cek-status-modal-shell .cek-status-detail-panel {
    background: transparent !important;
}

.cek-status-detail-panel .cek-status-instruksi {
    border-radius: 1rem;
    padding: 1rem 1.25rem;
}

.cek-status-detail-panel .cek-status-instruksi--penting {
    background: #e0f2fe !important;
    border: 1px solid #7dd3fc !important;
    color: #0c4a6e !important;
}

.cek-status-detail-panel .cek-status-instruksi--penting .cek-status-instruksi-judul {
    color: #0c4a6e !important;
}

.cek-status-detail-panel .cek-status-instruksi--penting .cek-status-instruksi-isi {
    color: #0f172a !important;
}

.cek-status-detail-panel .cek-status-instruksi--info {
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #064e3b !important;
}

.cek-status-detail-panel .cek-status-instruksi--info .cek-status-instruksi-judul {
    color: #065f46 !important;
}

.cek-status-detail-panel .cek-status-instruksi--info .cek-status-instruksi-isi {
    color: #14532d !important;
}

html[data-theme="dark"] .cek-status-detail-panel .cek-status-instruksi--penting,
html.dark .cek-status-detail-panel .cek-status-instruksi--penting {
    background: rgba(12, 74, 110, 0.42) !important;
    border-color: rgba(56, 189, 248, 0.45) !important;
    color: #e0f2fe !important;
}

html[data-theme="dark"] .cek-status-detail-panel .cek-status-instruksi--penting .cek-status-instruksi-judul,
html.dark .cek-status-detail-panel .cek-status-instruksi--penting .cek-status-instruksi-judul {
    color: #bae6fd !important;
}

html[data-theme="dark"] .cek-status-detail-panel .cek-status-instruksi--penting .cek-status-instruksi-isi,
html.dark .cek-status-detail-panel .cek-status-instruksi--penting .cek-status-instruksi-isi {
    color: #f0f9ff !important;
}

html[data-theme="dark"] .cek-status-detail-panel .cek-status-instruksi--info,
html.dark .cek-status-detail-panel .cek-status-instruksi--info {
    background: rgba(6, 78, 59, 0.38) !important;
    border-color: rgba(52, 211, 153, 0.38) !important;
    color: #d1fae5 !important;
}

html[data-theme="dark"] .cek-status-detail-panel .cek-status-instruksi--info .cek-status-instruksi-judul,
html.dark .cek-status-detail-panel .cek-status-instruksi--info .cek-status-instruksi-judul {
    color: #6ee7b7 !important;
}

html[data-theme="dark"] .cek-status-detail-panel .cek-status-instruksi--info .cek-status-instruksi-isi,
html.dark .cek-status-detail-panel .cek-status-instruksi--info .cek-status-instruksi-isi {
    color: #ecfdf5 !important;
}

.cek-status-detail-panel .cek-status-step-judul {
    color: #111827 !important;
}

.cek-status-detail-panel .cek-status-step-deskripsi {
    color: #374151 !important;
}

.cek-status-detail-panel .cek-status-section-label {
    color: #6b7280 !important;
}

html[data-theme="dark"] .cek-status-detail-panel .cek-status-step-judul,
html.dark .cek-status-detail-panel .cek-status-step-judul {
    color: #f9fafb !important;
}

html[data-theme="dark"] .cek-status-detail-panel .cek-status-step-deskripsi,
html.dark .cek-status-detail-panel .cek-status-step-deskripsi {
    color: #d1d5db !important;
}

html[data-theme="dark"] .cek-status-detail-panel .cek-status-section-label,
html.dark .cek-status-detail-panel .cek-status-section-label {
    color: #9ca3af !important;
}

.cek-status-detail-panel .cek-status-summary-card {
    background: #f9fafb !important;
    border: 1px solid #d1fae5 !important;
    color: #111827 !important;
}

.cek-status-detail-panel .cek-status-summary-card dt {
    color: #6b7280 !important;
}

.cek-status-detail-panel .cek-status-summary-card dd {
    color: #111827 !important;
}

html[data-theme="dark"] .cek-status-detail-panel .cek-status-summary-card,
html.dark .cek-status-detail-panel .cek-status-summary-card {
    background: rgba(24, 30, 28, 0.92) !important;
    border-color: rgba(52, 211, 153, 0.28) !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .cek-status-detail-panel .cek-status-summary-card dt,
html.dark .cek-status-detail-panel .cek-status-summary-card dt {
    color: #9ca3af !important;
}

html[data-theme="dark"] .cek-status-detail-panel .cek-status-summary-card dd,
html.dark .cek-status-detail-panel .cek-status-summary-card dd {
    color: #f3f4f6 !important;
}

.cek-status-detail-panel .cek-status-ticket-card {
    background: rgba(236, 253, 245, 0.9) !important;
    border: 1px solid #a7f3d0 !important;
}

.cek-status-detail-panel .cek-status-ticket-card .cek-status-ticket-label {
    color: #065f46 !important;
}

.cek-status-detail-panel .cek-status-ticket-card .cek-status-ticket-value {
    color: #022c22 !important;
}

html[data-theme="dark"] .cek-status-detail-panel .cek-status-ticket-card,
html.dark .cek-status-detail-panel .cek-status-ticket-card {
    background: rgba(6, 78, 59, 0.35) !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
}

html[data-theme="dark"] .cek-status-detail-panel .cek-status-ticket-card .cek-status-ticket-label,
html.dark .cek-status-detail-panel .cek-status-ticket-card .cek-status-ticket-label {
    color: #6ee7b7 !important;
}

html[data-theme="dark"] .cek-status-detail-panel .cek-status-ticket-card .cek-status-ticket-value,
html.dark .cek-status-detail-panel .cek-status-ticket-card .cek-status-ticket-value {
    color: #ecfdf5 !important;
}

.cek-status-detail-panel .cek-status-tanggapan-icon {
    background: #e0f2fe !important;
    color: #0369a1 !important;
}

html[data-theme="dark"] .cek-status-detail-panel .cek-status-tanggapan-icon,
html.dark .cek-status-detail-panel .cek-status-tanggapan-icon {
    background: rgba(14, 116, 144, 0.35) !important;
    color: #7dd3fc !important;
}

.cek-status-detail-panel .cek-status-tanggapan-inner {
    background: #ffffff !important;
    border: 1px solid #bae6fd !important;
    color: #111827 !important;
}

html[data-theme="dark"] .cek-status-detail-panel .cek-status-tanggapan-inner,
html.dark .cek-status-detail-panel .cek-status-tanggapan-inner {
    background: rgba(15, 26, 20, 0.95) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
    color: #f1f5f9 !important;
}

/* Form pengaduan (hero + isi) */
html[data-theme="dark"] .pengaduan-info-box {
    background: rgba(15, 28, 38, 0.92) !important;
    border-color: rgba(56, 189, 248, 0.38) !important;
}

html[data-theme="dark"] .pengaduan-info-box h2.text-blue-800,
html[data-theme="dark"] .pengaduan-info-box .text-blue-700,
html[data-theme="dark"] .pengaduan-info-box strong {
    color: #bae6fd !important;
}

html[data-theme="dark"] .site-service-page--with-hero #image-preview-area {
    background: rgba(15, 32, 26, 0.9) !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}

html[data-theme="dark"] .site-service-page--with-hero input[type='file'] {
    color: #a0a0a0 !important;
}

html[data-theme="dark"] .site-service-page--with-hero input[type='file']::file-selector-button {
    background: #1a2620 !important;
    color: #86efac !important;
    border: 1px solid rgba(52, 211, 153, 0.35) !important;
}

/* Beranda: widget info (jadwal sholat, lokasi, jam kerja) — light defaults */
.home-info-widgets-section {
    background-color: #fffdf7;
}

.home-info-widgets-section,
.home-info-card {
    transition-property: background-color, background, color, border-color, box-shadow;
    transition-duration: 0.35s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="dark"] .home-info-widgets-section,
html.dark .home-info-widgets-section {
    background: linear-gradient(180deg, #0f1411 0%, #121a16 100%) !important;
}

html[data-theme="dark"] .home-sekilas-banner,
html.dark .home-sekilas-banner {
    background: linear-gradient(to right, #1a2620, #141c18) !important;
    border-left-color: #10b981 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .home-sekilas-banner strong,
html[data-theme="dark"] .home-sekilas-banner .text-emerald-700,
html.dark .home-sekilas-banner strong,
html.dark .home-sekilas-banner .text-emerald-700 {
    color: #6ee7b7 !important;
}

html[data-theme="dark"] .home-sekilas-banner .text-emerald-600,
html[data-theme="dark"] .home-sekilas-banner .running-text-item,
html.dark .home-sekilas-banner .text-emerald-600,
html.dark .home-sekilas-banner .running-text-item {
    color: #d1fae5 !important;
}

html[data-theme="dark"] .home-info-card,
html.dark .home-info-card {
    background-color: #0f3d24 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .home-info-card:hover,
html.dark .home-info-card:hover {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="dark"] .home-info-card-header,
html.dark .home-info-card-header {
    background-color: #082818 !important;
}

html[data-theme="dark"] .home-info-card .border-emerald-500,
html.dark .home-info-card .border-emerald-500 {
    border-color: rgba(16, 185, 129, 0.35) !important;
}

html[data-theme="dark"] .home-info-card .bg-emerald-700,
html.dark .home-info-card .bg-emerald-700 {
    background-color: #082818 !important;
}

html[data-theme="dark"] .home-info-card .bg-emerald-500,
html.dark .home-info-card .bg-emerald-500 {
    background-color: #047857 !important;
}

html[data-theme="dark"] .home-info-card a.bg-emerald-500:hover,
html.dark .home-info-card a.bg-emerald-500:hover {
    background-color: #065f46 !important;
}

html[data-theme="dark"] .home-info-widgets .bg-gray-100,
html.dark .home-info-widgets .bg-gray-100 {
    background: #1f2937 !important;
}

html[data-theme="dark"] .home-info-card #prayer-clock circle,
html.dark .home-info-card #prayer-clock circle {
    fill: #142820 !important;
    stroke: #34d399 !important;
}

html[data-theme="dark"] .home-info-card #prayer-clock line,
html.dark .home-info-card #prayer-clock line {
    stroke: #34d399 !important;
}

html[data-theme="dark"] .home-info-card #prayer-clock #second-hand,
html.dark .home-info-card #prayer-clock #second-hand {
    stroke: #6ee7b7 !important;
}

html[data-theme="dark"] .home-info-card #prayer-clock text,
html.dark .home-info-card #prayer-clock text {
    fill: #6ee7b7 !important;
}

html[data-theme="dark"] .home-info-card #digital-time,
html.dark .home-info-card #digital-time {
    background-color: #1a3d2a !important;
    color: #6ee7b7 !important;
}

/* Navbar mobile drawer — light defaults */
#mobile-menu.mobile-nav-panel {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(229, 231, 235, 0.85);
}

#mobile-menu .mobile-nav-link {
    color: #1f2937;
}

#mobile-menu .mobile-nav-section-label {
    color: #6b7280;
}

#mobile-menu .mobile-nav-divider {
    border-color: #e5e7eb;
}

#mobile-menu .mobile-nav-user-name {
    color: #1f2937;
}

#mobile-menu .mobile-nav-outline-btn {
    background: #ffffff;
    border-color: #0d6630;
    color: #065f46;
}

#mobile-menu .mobile-nav-outline-btn:hover {
    background: #f0fdf4;
}

#mobile-menu.mobile-nav-panel,
#mobile-menu .mobile-nav-link,
#mobile-menu .mobile-nav-outline-btn {
    transition-property: background-color, background, color, border-color, box-shadow;
    transition-duration: 0.35s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navbar mobile drawer — dark mode */
html[data-theme="dark"] #mobile-menu.mobile-nav-panel,
html.dark #mobile-menu.mobile-nav-panel {
    background: rgba(15, 22, 18, 0.98) !important;
    border-top-color: #2d3832 !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="dark"] #mobile-menu .mobile-nav-link,
html.dark #mobile-menu .mobile-nav-link {
    color: #e5e7eb !important;
}

html[data-theme="dark"] #mobile-menu .mobile-nav-section-label,
html.dark #mobile-menu .mobile-nav-section-label {
    color: #9ca3af !important;
}

html[data-theme="dark"] #mobile-menu .mobile-nav-divider,
html.dark #mobile-menu .mobile-nav-divider {
    border-color: #374151 !important;
}

html[data-theme="dark"] #mobile-menu .mobile-nav-user-name,
html.dark #mobile-menu .mobile-nav-user-name {
    color: #f3f4f6 !important;
}

html[data-theme="dark"] #mobile-menu .mobile-nav-outline-btn,
html.dark #mobile-menu .mobile-nav-outline-btn {
    background: #1a2620 !important;
    border-color: rgba(52, 211, 153, 0.45) !important;
    color: #6ee7b7 !important;
}

html[data-theme="dark"] #mobile-menu .mobile-nav-outline-btn:hover,
html.dark #mobile-menu .mobile-nav-outline-btn:hover {
    background: #0f3d24 !important;
    color: #ffffff !important;
}

/* CTA Layanan Mandiri — navbar desktop & mobile */
html[data-theme="dark"] .nav-cta-layanan:not(.mobile-nav-cta),
html.dark .nav-cta-layanan:not(.mobile-nav-cta) {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #064e3b !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

html[data-theme="dark"] .nav-cta-layanan:not(.mobile-nav-cta):hover,
html.dark .nav-cta-layanan:not(.mobile-nav-cta):hover {
    background: #ffffff !important;
    color: #022c22 !important;
}

html[data-theme="dark"] .nav-cta-layanan-menu,
html.dark .nav-cta-layanan-menu {
    background: #1a211e !important;
    border-color: rgba(52, 211, 153, 0.28) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .nav-cta-layanan-menu-heading,
html.dark .nav-cta-layanan-menu-heading {
    color: #9ca3af !important;
}

html[data-theme="dark"] .nav-cta-layanan-menu-item,
html.dark .nav-cta-layanan-menu-item {
    color: #e5e7eb !important;
}

html[data-theme="dark"] .nav-cta-layanan-menu-item:hover,
html.dark .nav-cta-layanan-menu-item:hover {
    background: rgba(6, 78, 59, 0.45) !important;
    color: #a7f3d0 !important;
}

html[data-theme="dark"] #mobile-menu .nav-cta-layanan.mobile-nav-cta,
html.dark #mobile-menu .nav-cta-layanan.mobile-nav-cta {
    background: #15803d !important;
    color: #ffffff !important;
    border-color: rgba(110, 231, 183, 0.35) !important;
}

html[data-theme="dark"] #mobile-menu .nav-cta-layanan.mobile-nav-cta:hover,
html.dark #mobile-menu .nav-cta-layanan.mobile-nav-cta:hover {
    background: #166534 !important;
}

/* Sambutan — badge nama di bawah foto kepala desa (light & dark) */
.sambutan-section .sambutan-image-wrapper {
    overflow: visible !important;
    padding-bottom: 1.25rem !important;
}

.sambutan-section .md\:w-1\/3 {
    overflow: visible !important;
}

.sambutan-section span.sambutan-photo-badge,
span.sambutan-photo-badge {
    position: absolute !important;
    left: 50% !important;
    bottom: -0.75rem !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: 10.5rem !important;
    max-width: min(24rem, calc(100vw - 1.25rem)) !important;
    padding: 0.5rem 1.65rem !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    border-radius: 9999px !important;
    border: 2px solid #ffffff !important;
    background: linear-gradient(to right, #059669, #0d9488) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: clamp(0.75rem, 2.4vw, 0.875rem) !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.08) !important;
}

@media (min-width: 640px) {
    .sambutan-section span.sambutan-photo-badge,
span.sambutan-photo-badge {
        min-width: 11.5rem !important;
        padding: 0.55rem 1.85rem !important;
    }
}

html[data-theme="dark"] .sambutan-photo-badge,
html.dark .sambutan-section span.sambutan-photo-badge,
span.sambutan-photo-badge {
    background: linear-gradient(to right, #059669, #0d9488) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] #mobile-menu .mobile-nav-link:hover,
html[data-theme="dark"] #mobile-menu #darkmode-toggle-mobile:hover,
html.dark #mobile-menu .mobile-nav-link:hover,
html.dark #mobile-menu #darkmode-toggle-mobile:hover {
    background: #0d6630 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] #mobile-menu #darkmode-toggle-mobile svg,
html.dark #mobile-menu #darkmode-toggle-mobile svg {
    stroke: currentColor;
}

html[data-theme="dark"] #mobile-menu::-webkit-scrollbar-track,
html.dark #mobile-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] #mobile-menu::-webkit-scrollbar-thumb,
html.dark #mobile-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
}

html[data-theme="dark"] #mobile-menu::-webkit-scrollbar-thumb:hover,
html.dark #mobile-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
}

/* Prevent flash of transition on initial paint */
html.no-transition *,
html.no-transition {
    transition: none !important;
}