/* admin/assets/css/style.css - Versi Awal yang Anda Berikan */
:root {
    --primary-color: #007bff;
    --primary-color-rgb: 0, 123, 255; /* RGB for rgba() */
    --primary-color-darker: #0056b3;
    --secondary-color: #6c757d;
    --success-color: #198754;
    --danger-color: #dc3545;
    --danger-color-rgb: 220, 53, 69; /* RGB for rgba() */
    --warning-color: #ffc107;
    --info-color: #0dcaf0;

    --body-bg-light: #f8f9fa;
    --body-color-light: #212529;
    --card-bg-light: #fff;
    --card-border-color-light: rgba(0, 0, 0, 0.125);
    --text-muted-light: #6c757d;
    --breadcrumb-bg-light: #e9ecef;
    --table-border-light: #dee2e6;
    --form-control-bg-light: #fff;


    --body-bg-dark: #212529;
    --body-color-dark: #f8f9fa;
    --card-bg-dark: #343a40;
    --card-border-color-dark: rgba(255, 255, 255, 0.1);
    --text-muted-dark: #adb5bd;
    --breadcrumb-bg-dark: #394047;
    --table-border-dark: #454d55;
    --form-control-bg-dark: #2b3035; /* Slightly different from card for forms */


    --sb-sidenav-width: 225px;
    --sb-topnav-height: 56px;

    /* Light Theme Defaults (can be overridden by .dark-theme) */
    --current-body-bg: var(--body-bg-light);
    --current-body-color: var(--body-color-light);
    --current-card-bg: var(--card-bg-light);
    --current-card-border-color: var(--card-border-color-light);
    --current-text-muted: var(--text-muted-light);
    --current-breadcrumb-bg: var(--breadcrumb-bg-light);
    --current-table-border: var(--table-border-light);
    --current-form-control-bg: var(--form-control-bg-light);
    --current-link-color: var(--primary-color);
    --current-link-hover-color: var(--primary-color-darker);
    --current-sidebar-bg: #212529; /* Default dark sidebar */
    --current-sidebar-color: rgba(255, 255, 255, 0.5);
    --current-sidebar-hover-color: rgba(255, 255, 255, 0.75);
    --current-sidebar-active-color: #fff;
    --current-sidebar-active-icon-color: #fff;
    --current-sidebar-heading-color: rgba(255, 255, 255, 0.25);
    --current-sidebar-footer-bg: rgba(0, 0, 0, 0.2);
    --current-sidebar-footer-color: rgba(255, 255, 255, 0.5);
    --current-topnav-bg: #343a40; /* Default dark topnav */
    --current-topnav-color: rgba(255, 255, 255, 0.75);
}

/* Dark Theme */
body.dark-theme { /* Anda menggunakan body.dark-theme, saya akan ganti ke html.dark-theme di versi peningkatan untuk prioritas */
    --current-body-bg: var(--body-bg-dark);
    --current-body-color: var(--body-color-dark);
    --current-card-bg: var(--card-bg-dark);
    --current-card-border-color: var(--card-border-color-dark);
    --current-text-muted: var(--text-muted-dark);
    --current-breadcrumb-bg: var(--breadcrumb-bg-dark);
    --current-table-border: var(--table-border-dark);
    --current-form-control-bg: var(--form-control-bg-dark);
    --current-link-color: var(--info-color);
    --current-link-hover-color: #6cf1ff;

    /* Example: Light sidebar in dark mode (currently commented out) */
    /* --current-sidebar-bg: #f8f9fa;
    --current-sidebar-color: #343a40;
    --current-sidebar-hover-color: #000;
    --current-sidebar-active-color: var(--primary-color);
    --current-sidebar-active-icon-color: var(--primary-color);
    --current-sidebar-heading-color: #6c757d;
    --current-sidebar-footer-bg: #e9ecef;
    --current-sidebar-footer-color: #6c757d; */

    /* Example: Light topnav in dark mode (currently commented out) */
    /* --current-topnav-bg: #f8f9fa;
    --current-topnav-color: #343a40; */
}


body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: var(--current-body-bg);
    color: var(--current-body-color);
    font-size: 0.9rem;
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
}

a {
  color: var(--current-link-color);
  text-decoration: none;
}
a:hover {
  color: var(--current-link-hover-color);
  text-decoration: underline;
}

.sb-topnav {
    padding-left: 0;
    height: var(--sb-topnav-height);
    z-index: 1039;
    background-color: var(--current-topnav-bg) !important; /* Override Bootstrap */
    color: var(--current-topnav-color) !important;
}
.sb-topnav .navbar-brand {
    width: var(--sb-sidenav-width);
    padding-left: 1rem;
    padding-right: 1rem;
    margin: 0;
    font-weight: 700;
    color: var(--current-topnav-color) !important; /* Ensure brand uses themed color */
}
.sb-topnav .nav-link {
    color: var(--current-topnav-color) !important;
}
.sb-topnav .nav-link:hover {
    color: #fff !important; /* Brighter hover for topnav links */
}


.sb-nav-fixed #layoutSidenav #layoutSidenav_nav {
    width: var(--sb-sidenav-width);
    height: calc(100vh - var(--sb-topnav-height)); /* Adjust height */
    z-index: 1038;
    position: fixed;
    top: var(--sb-topnav-height);
    left: 0;
    transition: transform 0.2s ease-in-out;
    background-color: var(--current-sidebar-bg);
    color: var(--current-sidebar-color);
}

.sb-nav-fixed #layoutSidenav #layoutSidenav_content {
    position: relative;
    top: var(--sb-topnav-height); /* Match topnav height */
    padding-left: var(--sb-sidenav-width);
    transition: padding 0.2s ease-in-out;
    min-height: calc(100vh - var(--sb-topnav-height)); /* Ensure content area takes full height */
    display: flex;
    flex-direction: column;
}
/* Content within layoutSidenav_content, which holds main and footer */
#layoutSidenav_content > main {
    flex-grow: 1; /* Allow main content to grow */
    padding: 1.5rem; /* Standard padding */
    background-color: var(--current-body-bg); /* Ensure main area gets body background */
}


body.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
    transform: translateX(calc(var(--sb-sidenav-width) * -1));
}

body.sb-sidenav-toggled #layoutSidenav #layoutSidenav_content {
    padding-left: 0;
}

/* Sidebar Styling */
.sb-sidenav-menu .nav-link {
    color: var(--current-sidebar-color);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    display: flex; /* For icon alignment */
    align-items: center;
}
.sb-sidenav-menu .nav-link .sb-nav-link-icon {
    color: var(--current-sidebar-color); /* Ensure icon color matches link color */
    margin-right: 0.5rem;
    width: 1.25em; /* Fixed width for icon alignment */
    text-align: center;
}
.sb-sidenav-menu .nav-link:hover {
    color: var(--current-sidebar-hover-color);
}
.sb-sidenav-menu .nav-link:hover .sb-nav-link-icon {
    color: var(--current-sidebar-hover-color);
}
.sb-sidenav-menu .nav-link.active {
    color: var(--current-sidebar-active-color);
    background-color: var(--primary-color); /* Highlight active link */
}
.sb-sidenav-menu .nav-link.active .sb-nav-link-icon {
    color: var(--current-sidebar-active-icon-color);
}
.sb-sidenav-menu .sb-sidenav-menu-heading {
    color: var(--current-sidebar-heading-color);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    padding: 1rem 1rem 0.5rem;
}
.sb-sidenav-footer {
    background-color: var(--current-sidebar-footer-bg);
    color: var(--current-sidebar-footer-color);
    padding: 0.75rem;
    font-size: 0.875rem;
}

/* Breadcrumb */
.breadcrumb {
    background-color: var(--current-breadcrumb-bg);
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.35rem;
    color: var(--current-body-color); /* Ensure breadcrumb text color follows theme */
}
.breadcrumb a {
    color: var(--current-link-color);
}
.breadcrumb a:hover {
    color: var(--current-link-hover-color);
}
.breadcrumb-item.active {
    color: var(--current-text-muted); /* Active breadcrumb item (current page) */
}


/* Card */
.card {
    margin-bottom: 1.5rem;
    background-color: var(--current-card-bg);
    border: 1px solid var(--current-card-border-color);
    border-radius: 0.35rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
    color: var(--current-body-color); /* Card text color */
}
body.dark-theme .card { /* Akan saya ubah ke html.dark-theme */
    box-shadow: 0 0.125rem 0.25rem rgba(255,255,255,0.05);
}
.card-header {
    background-color: var(--current-card-bg); /* Make header consistent with card or slightly different */
    border-bottom: 1px solid var(--current-card-border-color);
    color: var(--current-body-color);
    font-weight: 600;
    padding: 0.75rem 1.25rem;
}
.card-body {
    padding: 1.25rem;
    color: var(--current-body-color); /* Ensure card body text uses theme color */
}
.card-footer {
    background-color: var(--current-card-bg);
    border-top: 1px solid var(--current-card-border-color);
    padding: 0.75rem 1.25rem;
}

/* Table */
.table {
    color: var(--current-body-color); /* Table text color */
    border-color: var(--current-table-border); /* Menggunakan variabel yang sudah ada */
}
.table-bordered, .table-bordered td, .table-bordered th { /* Tambahkan !important jika perlu override Bootstrap */
    border-color: var(--current-table-border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0,0,0,0.03); /* Subtle striping for light mode */
    color: var(--current-body-color); /* Ensure text on striped rows is correct */
}
body.dark-theme .table-striped > tbody > tr:nth-of-type(odd) > * { /* Ubah ke html.dark-theme */
    background-color: rgba(255,255,255,0.03); /* Subtle striping for dark mode */
    color: var(--current-body-color);
}


/* Buttons */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary:hover {
    background-color: var(--primary-color-darker);
    border-color: var(--primary-color-darker);
}
.btn-secondary { background-color: var(--secondary-color); border-color: var(--secondary-color); }
.btn-secondary:hover { background-color: #545b62; border-color: #4e555b; }
.btn-success { background-color: var(--success-color); border-color: var(--success-color); }
.btn-success:hover { background-color: #157347; border-color: #146c43; }
.btn-danger { background-color: var(--danger-color); border-color: var(--danger-color); }
.btn-danger:hover { background-color: #bb2d3b; border-color: #b02a37; }
.btn-warning { background-color: var(--warning-color); border-color: var(--warning-color); color: #000; }
.btn-warning:hover { background-color: #ffba00; border-color: #ffb000; color: #000; }
.btn-info { background-color: var(--info-color); border-color: var(--info-color); }
.btn-info:hover { background-color: #31d2f2; border-color: #25cff2; }


/* Forms */
.form-control, .form-select {
    background-color: var(--current-form-control-bg);
    color: var(--current-body-color);
    border-color: var(--current-table-border); /* Menggunakan variabel yang sudah ada */
}
.form-control:focus, .form-select:focus {
    background-color: var(--current-form-control-bg);
    color: var(--current-body-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}
.form-label {
    color: var(--current-body-color);
    font-weight: 500;
}
.form-text {
    color: var(--current-text-muted);
}
.invalid-feedback {
    color: var(--danger-color);
}
.is-invalid { /* Bootstrap akan menangani ini, tapi pastikan warnanya sesuai */
    border-color: var(--danger-color) !important;
}
.is-invalid:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--danger-color-rgb), 0.25);
}


/* Alerts specific for dark theme (Bootstrap 5.3 handles light theme alerts well) */
.alert {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
body.dark-theme .alert-primary { background-color: #004085; color: #cce5ff; border-color: #003064; }
body.dark-theme .alert-secondary { background-color: #383d41; color: #e2e3e5; border-color: #272b2f; }
body.dark-theme .alert-success { background-color: #14482e; color: #a3cfbb; border-color: #1a593a; }
body.dark-theme .alert-danger { background-color: #58151c; color: #f1b0b7; border-color: #6b1a23; }
body.dark-theme .alert-warning { background-color: #664d03; color: #ffda6a; border-color: #806009; }
body.dark-theme .alert-info { background-color: #055160; color: #9eeaf9; border-color: #066070; }
body.dark-theme .alert-light { background-color: #495057; color: #f8f9fa; border-color: #383d41; } /* Ini mungkin perlu penyesuaian kontras */
body.dark-theme .alert-dark { background-color: #121212; color: #adb5bd; border-color: #0e0e0e; }


/* Responsive adjustments */
@media (max-width: 991.98px) {
    .sb-nav-fixed #layoutSidenav #layoutSidenav_content {
        padding-left: 0;
    }
    .sb-nav-fixed #layoutSidenav #layoutSidenav_nav {
        transform: translateX(calc(var(--sb-sidenav-width) * -1));
    }
    body.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
        transform: translateX(0);
    }
}

/* Login Page Specific Styles */
.login-container {
    max-width: 450px;
    margin: 3rem auto;
    padding: 2rem;
    background-color: var(--current-card-bg);
    border: 1px solid var(--current-card-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}
body.dark-theme .login-container { /* Ubah ke html.dark-theme */
    box-shadow: 0 0.5rem 1rem rgba(255,255,255,0.05);
}
.login-container h2 {
    text-align: center;
    color: var(--current-body-color);
    margin-bottom: 1.5rem;
    font-weight: 600;
}
.login-container .form-group { /* Jika menggunakan form-group class */
    margin-bottom: 1.25rem;
}
.login-container .btn-login { /* Specific class for login button for more control */
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 600;
    padding: 0.75rem;
}
.login-container .btn-login:hover {
    background-color: var(--primary-color-darker);
    border-color: var(--primary-color-darker);
}

/* Footer */
#layoutSidenav_content footer.py-4 { /* Selector lebih spesifik jika hanya untuk admin footer */
    background-color: var(--current-body-bg);
    color: var(--current-text-muted);
    border-top: 1px solid var(--current-card-border-color);
    flex-shrink: 0;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
#layoutSidenav_content footer.py-4 a {
    color: var(--current-link-color);
}
#layoutSidenav_content footer.py-4 a:hover {
    color: var(--current-link-hover-color);
}

/* Dashboard Card Statistics Styles (SB Admin lama) */
.card.border-left-primary { border-left: 0.25rem solid var(--primary-color) !important; }
.card.border-left-success { border-left: 0.25rem solid var(--success-color) !important; }
.card.border-left-info { border-left: 0.25rem solid var(--info-color) !important; }
.card.border-left-warning { border-left: 0.25rem solid var(--warning-color) !important; }
/* Untuk Bootstrap 5, lebih baik gunakan:
.card.border-start.border-primary.border-4 { ... }
Tapi jika HTML Anda masih pakai border-left-*, biarkan ini.
*/

.text-xs { font-size: .7rem; }

/* These specific gray colors are from SB Admin. Use with care or map to theme variables. */
.text-gray-300 { color: #dddfeb !important; }
.text-gray-800 { color: #5a5c69 !important; }

body.dark-theme .text-gray-800 { color: var(--current-body-color) !important; } /* Ubah ke html.dark-theme */
body.dark-theme .text-gray-300 { color: #858796 !important; } /* Ubah ke html.dark-theme */

/* Quick Action Button Hover Styles */
.btn-outline-primary:hover i, .btn-outline-primary:hover { color: white; }
.btn-outline-info:hover i, .btn-outline-info:hover { color: white; }
.btn-outline-success:hover i, .btn-outline-success:hover { color: white; }
.btn-outline-warning:hover i, .btn-outline-warning:hover { color: black; }
.btn-outline-secondary:hover i, .btn-outline-secondary:hover { color: white; }
.btn-outline-dark:hover i, .btn-outline-dark:hover { color: white; }