/* =====================================================================
 *  TEMA "RUANG ADMIN" untuk semua halaman setelah login
 *  (referensi: https://themewagon.github.io/ruang-admin/)
 *
 *  File ini hanya MENIMPA tampilan (warna, font, bayangan, sudut).
 *  Struktur HTML, fitur & JavaScript tiap halaman tidak diubah.
 *  Dimuat lewat app/Views/partials/theme.php, setelah CSS halaman.
 *
 *  Dark mode: class "dark" pada <html> (diatur oleh ruang.js).
 * ===================================================================== */

:root {
    --ra-primary: #6777ef;
    --ra-primary-dark: #5566e6;
    --ra-primary-soft: #eef0fd;
    --ra-body: #f8f9fc;
    --ra-card: #ffffff;
    --ra-text: #5a5c69;
    --ra-heading: #3a3b45;
    --ra-muted: #858796;
    --ra-border: #e3e6f0;
    --ra-thead: #eaecf4;
    --ra-hover: #f8f9fc;
    --ra-sidebar: #ffffff;
    --ra-sidebar-text: #6e707e;
    --ra-sidebar-heading: #b7b9cc;
    --ra-input: #ffffff;
    --ra-shadow: 0 .125rem .25rem 0 rgba(58, 59, 69, .2);
    --ra-shadow-lg: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15);
}

html.dark {
    --ra-primary: #7b89f5;
    --ra-primary-dark: #6777ef;
    --ra-primary-soft: rgba(103, 119, 239, .16);
    --ra-body: #1a1c28;
    --ra-card: #242737;
    --ra-text: #c3c6d8;
    --ra-heading: #e6e8f2;
    --ra-muted: #8d91ab;
    --ra-border: #343850;
    --ra-thead: #2c3044;
    --ra-hover: #2a2e42;
    --ra-sidebar: #1f2130;
    --ra-sidebar-text: #aeb2c8;
    --ra-sidebar-heading: #6c7090;
    --ra-input: #1d2030;
    --ra-shadow: 0 .125rem .35rem 0 rgba(0, 0, 0, .35);
    --ra-shadow-lg: 0 .15rem 1.75rem 0 rgba(0, 0, 0, .45);
    color-scheme: dark;
}

/* ---------- Dasar ---------- */
body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: var(--ra-body) !important;
    color: var(--ra-text) !important;
    font-size: .95rem;
}

.font-sans {
    font-family: 'Nunito', sans-serif !important;
}

a {
    transition: color .15s ease, background-color .15s ease;
}

::-webkit-scrollbar-thumb {
    background: #c5c8d6 !important;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #3b3f57 !important;
}

/* Jalur scrollbar halaman: 74px teratas (setinggi topbar) diberi warna topbar,
   agar pojok kanan topbar tidak kosong saat halaman di-scroll */
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, #5f70ee 0, #5f70ee 74px, var(--ra-body) 74px) !important;
}

html.dark::-webkit-scrollbar-track,
html.dark body::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, #4553c4 0, #4553c4 74px, var(--ra-body) 74px) !important;
}

/* ---------- Sidebar (putih, brand biru) ---------- */
#sidebar.pc-sidebar {
    background: var(--ra-sidebar) !important;
    color: var(--ra-sidebar-text) !important;
    box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .1);
    border-right: 1px solid var(--ra-border);
}

/* area brand = kotak biru setinggi topbar */
#sidebar.pc-sidebar > div:first-child {
    background: var(--ra-primary);
    background-image: linear-gradient(180deg, #6777ef 10%, #5566e6 100%);
}

html.dark #sidebar.pc-sidebar > div:first-child {
    background-image: linear-gradient(180deg, #4d5bd1 10%, #3f4bb8 100%);
}

#sidebar.pc-sidebar > div:first-child a,
#sidebar.pc-sidebar > div:first-child .brand-text {
    color: #fff !important;
    font-weight: 800;
    letter-spacing: .02em;
}

/* judul website tidak diberi efek hover/sentuh (blok putih) */
#sidebar.pc-sidebar > div:first-child a,
#sidebar.pc-sidebar > div:first-child a:hover,
#sidebar.pc-sidebar > div:first-child a:focus,
#sidebar.pc-sidebar > div:first-child a:active {
    background: transparent !important;
    color: #fff !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* judul kelompok menu */
#sidebar.pc-sidebar li[class*="uppercase"] {
    color: var(--ra-sidebar-heading) !important;
    font-weight: 800 !important;
    letter-spacing: .13em !important;
    font-size: 10.5px !important;
    padding-top: 1.1rem !important;
    padding-bottom: .4rem !important;
    border-top: 1px solid var(--ra-border);
    margin-top: .35rem;
}

#sidebar.pc-sidebar ul > li[class*="uppercase"]:first-child {
    border-top: 0;
    margin-top: 0;
}

/* link menu */
#sidebar.pc-sidebar a {
    color: var(--ra-sidebar-text) !important;
}

#sidebar.pc-sidebar .pc-link {
    font-weight: 600;
    margin: 1px 10px;
    padding-left: 14px !important;
    padding-right: 14px !important;
    border-radius: .35rem;
}

#sidebar.pc-sidebar .pc-link .pc-micon,
#sidebar.pc-sidebar .pc-link .arrow {
    color: #b7b9cc;
}

#sidebar.pc-sidebar a:hover,
#sidebar.pc-sidebar .pc-link:hover {
    color: var(--ra-primary) !important;
    background: var(--ra-primary-soft);
}

#sidebar.pc-sidebar .pc-link:hover .pc-micon {
    color: var(--ra-primary);
}

#sidebar.pc-sidebar .pc-link.active {
    color: var(--ra-primary) !important;
    background: var(--ra-primary-soft);
    font-weight: 800;
}

#sidebar.pc-sidebar .pc-link.active .pc-micon {
    color: var(--ra-primary) !important;
}

/* submenu = kotak putih bersudut seperti collapse RuangAdmin
   (tertutup: max-height 0 dari CSS halaman, jadi kotaknya baru tampil saat .open) */
#sidebar.pc-sidebar .submenu {
    background: transparent !important;
    border-radius: .35rem;
    margin: 0 14px;
    transition: all .3s ease;
}

#sidebar.pc-sidebar .submenu.open {
    background: var(--ra-card) !important;
    border: 1px solid var(--ra-border);
    margin: 4px 14px 8px;
    padding: 6px 0;
    box-shadow: var(--ra-shadow);
}

#sidebar.pc-sidebar .submenu a {
    padding-left: 18px !important;
    margin: 0 6px;
    border-radius: .3rem;
    color: var(--ra-heading) !important;
    font-size: 13px;
}

#sidebar.pc-sidebar .submenu a:hover {
    background: var(--ra-hover) !important;
    color: var(--ra-primary) !important;
}

/* ---------- Topbar (biru) ---------- */
.pc-header {
    background: var(--ra-primary) !important;
    background-image: linear-gradient(90deg, #6777ef 0%, #5f70ee 100%) !important;
    box-shadow: var(--ra-shadow-lg) !important;
    color: #fff;
}

html.dark .pc-header {
    background-image: linear-gradient(90deg, #4d5bd1 0%, #4553c4 100%) !important;
}

.pc-header .head-link {
    color: #fff !important;
}

.pc-header .head-link:hover {
    background: rgba(255, 255, 255, .15) !important;
}

/* dropdown user di topbar tetap putih dengan teks gelap */
.pc-header .dropdown-menu {
    color: var(--ra-heading);
    background: var(--ra-card) !important;
    border-color: var(--ra-border) !important;
    box-shadow: var(--ra-shadow-lg) !important;
}

/* ---------- Konten ---------- */
.pc-container {
    background: var(--ra-body);
}

/* judul halaman (mis. "History Report") */
.pc-container h5.font-medium.text-lg,
.pc-container h4.font-semibold,
.pc-container h5.font-semibold.text-lg {
    color: var(--ra-heading) !important;
    font-size: 1.55rem !important;
    font-weight: 400 !important;
}

.card {
    background: var(--ra-card) !important;
    border: 1px solid var(--ra-border) !important;
    border-radius: .35rem !important;
    box-shadow: var(--ra-shadow) !important;
    color: var(--ra-text) !important;
}

/* ---------- Warna utama (biru RuangAdmin) ---------- */
.bg-primary-500,
.bg-blue-600,
.bg-blue-500 {
    background-color: var(--ra-primary) !important;
}

.hover\:bg-primary-600:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-blue-600:hover {
    background-color: var(--ra-primary-dark) !important;
}

.text-primary-500,
.text-primary-600,
.text-blue-500,
.text-blue-600,
.hover\:text-primary-500:hover {
    color: var(--ra-primary) !important;
}

.border-primary-500,
.border-blue-500 {
    border-color: var(--ra-primary) !important;
}

.bg-blue-100,
.bg-primary-50,
.hover\:bg-primary-50:hover {
    background-color: var(--ra-primary-soft) !important;
}

.text-blue-700 {
    color: var(--ra-primary-dark) !important;
}

.focus\:ring-blue-500:focus,
.focus\:ring-primary-100:focus {
    --tw-ring-color: rgba(103, 119, 239, .35) !important;
}

/* tombol di dalam konten sedikit lebih tegas seperti Bootstrap */
.pc-container button[class*="bg-blue-6"],
.pc-container a[class*="bg-blue-6"] {
    box-shadow: 0 .125rem .25rem 0 rgba(103, 119, 239, .35);
}

/* ---------- Form ---------- */
.pc-container input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.pc-container select,
.pc-container textarea,
[id$="Modal"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
[id$="Modal"] select,
[id$="Modal"] textarea {
    background-color: var(--ra-input);
    border-color: #d1d3e2;
    color: var(--ra-heading);
}

html.dark .pc-container input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.dark .pc-container select,
html.dark .pc-container textarea,
html.dark [id$="Modal"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.dark [id$="Modal"] select,
html.dark [id$="Modal"] textarea {
    border-color: var(--ra-border) !important;
}

.pc-container input:focus,
.pc-container select:focus,
.pc-container textarea:focus,
[id$="Modal"] input:focus,
[id$="Modal"] select:focus,
[id$="Modal"] textarea:focus {
    outline: none;
    border-color: #a7b0f6 !important;
    box-shadow: 0 0 0 .2rem rgba(103, 119, 239, .25);
}

/* ---------- DataTables ---------- */
table.dataTable thead th,
table.dataTable thead td {
    background: var(--ra-thead) !important;
    color: var(--ra-text) !important;
    font-weight: 800 !important;
    border-bottom: 1px solid var(--ra-border) !important;
}

table.dataTable tbody td {
    color: var(--ra-text) !important;
    border-bottom-color: var(--ra-border) !important;
}

table.dataTable tbody tr {
    background: transparent !important;
}

table.dataTable tbody tr:hover {
    background: var(--ra-hover) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--ra-primary) !important;
    border-color: var(--ra-primary) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--ra-muted) !important;
}

/* ---------- Pop up (modal Tailwind) ---------- */
[id$="Modal"] > div {
    border-radius: .5rem !important;
}

/* =====================================================================
 *  DARK MODE — menimpa kelas terang yang tidak punya varian dark:
 * ===================================================================== */
html.dark .bg-white {
    background-color: var(--ra-card) !important;
}

html.dark .bg-gray-50,
html.dark .bg-gray-100,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover {
    background-color: var(--ra-hover) !important;
}

html.dark .bg-gray-200 {
    background-color: #33374d !important;
}

html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700,
html.dark .text-slate-800,
html.dark .text-slate-700,
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 {
    color: var(--ra-heading) !important;
}

html.dark .text-gray-600,
html.dark .text-gray-500 {
    color: var(--ra-muted) !important;
}

html.dark .border,
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark hr {
    border-color: var(--ra-border) !important;
}

html.dark .bg-red-50 { background-color: rgba(239, 68, 68, .12) !important; }
html.dark .bg-green-50 { background-color: rgba(34, 197, 94, .12) !important; }
html.dark .bg-yellow-50, html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, .12) !important; }
html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, .12) !important; }

html.dark .badge-paid { background: rgba(26, 174, 111, .18) !important; }
html.dark .badge-pending { background: rgba(216, 154, 22, .18) !important; }
html.dark .badge-due { background: rgba(255, 0, 0, .16) !important; color: #ff7b7b !important; }
html.dark .badge-service { background: rgba(25, 118, 210, .2) !important; color: #6fb1ff !important; }

/* ikon kartu rekap (History Report) */
html.dark .grup-icon { background: var(--ra-primary-soft) !important; }
html.dark .rekap-red { background: rgba(239, 68, 68, .16) !important; }
html.dark .rekap-amber { background: rgba(245, 158, 11, .16) !important; }
html.dark .rekap-blue { background: rgba(59, 130, 246, .16) !important; }
html.dark .rekap-green { background: rgba(34, 197, 94, .16) !important; }

/* DataTables kontrol */
html.dark .dataTables_wrapper .dataTables_length select,
html.dark .dataTables_wrapper .dataTables_filter input,
html.dark .custom-search input,
html.dark div.dt-buttons .dt-button,
html.dark div.dt-button-collection {
    background: var(--ra-input) !important;
    color: var(--ra-text) !important;
    border-color: var(--ra-border) !important;
}

html.dark div.dt-button-collection button.dt-button {
    color: var(--ra-text) !important;
}

html.dark .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current) {
    background: transparent !important;
    border-color: transparent !important;
}

/* SweetAlert2 */
html.dark .swal2-popup {
    background: var(--ra-card) !important;
    color: var(--ra-text) !important;
}

html.dark .swal2-title,
html.dark .swal2-html-container {
    color: var(--ra-heading) !important;
}

/* input tanggal/jam: ikon kalender terlihat di mode gelap */
html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator,
html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(.8);
}

/* ---------- Kartu statistik Beranda (gaya RuangAdmin) ---------- */
.stat-card {
    border-left: .25rem solid var(--ra-primary) !important;
}

.stat-card-green {
    border-left-color: #66bb6a !important;
}

.stat-label {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ra-primary);
    margin-bottom: .35rem;
}

.stat-card-green .stat-label {
    color: #4caf50;
}

.stat-value {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--ra-heading);
    line-height: 1.1;
}

.stat-note {
    font-size: .8rem;
    color: var(--ra-muted);
    margin-top: .35rem;
}

.stat-icon {
    font-size: 2.6rem;
    color: #dddfeb;
}

html.dark .stat-icon {
    color: #3b3f57;
}

/* ---------- Kartu form Register & Reset Password ---------- */
.auth-card {
    padding: 2.25rem !important;
    box-shadow: var(--ra-shadow-lg) !important;
}

.auth-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--ra-primary-soft);
    color: var(--ra-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.auth-card label {
    font-size: .875rem;
    font-weight: 700 !important;
    color: var(--ra-heading);
}

.auth-card input {
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
    border-radius: .5rem !important;
}

.auth-card button[type="submit"] {
    font-weight: 700;
    box-shadow: 0 .25rem .75rem rgba(103, 119, 239, .35);
}

/* ---------- Tombol dark mode ---------- */
.ra-theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: .35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
}

.ra-theme-toggle:hover {
    background: rgba(255, 255, 255, .15);
}

/* versi melayang (halaman tanpa topbar, mis. login) */
.ra-theme-toggle.floating {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 2000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ra-primary);
    box-shadow: var(--ra-shadow-lg);
}

.ra-theme-toggle.floating:hover {
    background: var(--ra-primary-dark);
}