/* ===== ORCHID DARK PURPLE THEME 2025 (REVISI TATA) ===== */
/* Modern Dark UI dengan Purple Accent - Clean & Consistent */

:root {
    /* Palet warna utama */
    --primary-purple: #8b5cf6;
    --primary-purple-dark: #7c3aed;
    --primary-purple-light: #a78bfa;
    --purple-50: #faf5ff;
    --purple-100: #f3e8ff;
    --purple-200: #e9d5ff;
    --purple-500: #8b5cf6;
    --purple-600: #7c3aed;
    --purple-700: #6d28d9;
    --purple-800: #5b21b6;
    --purple-900: #4c1d95;
    /* Warna dark theme */
    --bg-primary: #13132a;
    --bg-secondary: #1a1a2e;
    --bg-tertiary: #202040;
    --bg-card: #1e1e3f;
    --bg-hover: #252545;
    --bs-emphasis-color: #7c3aed;
    /* Warna teks */
    --text-primary: #fff;
    --text-secondary: #e2e8f0;
    --text-muted: #94a3b8;
    --text-accent: #a78bfa;
    /* Warna border */
    --border-primary: #334155;
    --border-secondary: #475569;
    --border-accent: #8b5cf6;
    /* Shadow */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-purple: 0 4px 14px 0 rgb(139 92 246 / 0.39);
}

/* ===== GLOBAL LAYOUT ===== */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    line-height: 1.6;
}

html {
    background-color: var(--bg-primary) !important;
}

/* ===== MAIN WRAPPER ===== */
.wrapper,
.app-wrapper,
.main-wrapper,
.layout-wrapper {
    background-color: var(--bg-primary) !important;
    min-height: 100vh;
}

/* ===== SIDEBAR STYLING ===== */
.sidebar,
.app-sidebar,
.main-sidebar,
[class*="sidebar"] {
    background: var(--bg-card) !important;
    border-right: 2.5px solid var(--primary-purple-light) !important;
    box-shadow: 12px 0 32px -8px rgba(139,92,246,0.22), 0 0 0 1px #2d225a inset, var(--shadow-lg) !important;
}

.sidebar .sidebar-menu,
.sidebar .nav,
.sidebar-menu,
.nav-sidebar {
    padding: 1rem 0;
}

.sidebar .sidebar-menu > li > a,
.sidebar .nav > li > a,
.nav-link {
    color: var(--text-secondary) !important;
    padding: 0.75rem 1.5rem !important;
    margin: 0.25rem 1rem !important;
    border-radius: 0.5rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    background-color: transparent !important;
}

.sidebar .sidebar-menu > li > a:hover,
.sidebar .nav > li > a:hover,
.nav-link:hover {
    background-color: var(--bg-hover) !important;
    color: var(--primary-purple-light) !important;
    transform: translateX(4px) !important;
}

.sidebar .sidebar-menu > li.active > a,
.sidebar .nav > li.active > a,
.nav-link.active {
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-purple) !important;
}

/* Panel user/admin di sidebar bawah */
.sidebar .card,
.sidebar .user-panel,
.sidebar .user-info,
.sidebar .admin-panel {
    background: linear-gradient(135deg, #23234a 0%, var(--primary-purple-dark) 100%) !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 24px -4px rgba(139,92,246,0.18), var(--shadow-lg) !important;
    border: 1.5px solid var(--primary-purple-light) !important;
    color: var(--text-primary) !important;
}

/* ===== HEADER STYLING ===== */
.main-header,
.app-header,
.header,
[class*="header"] {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--primary-purple-dark) 100%) !important;
    border-bottom: 2px solid var(--primary-purple-light) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 6px 32px -8px rgba(139,92,246,0.18), var(--shadow-md) !important;
    color: var(--primary-purple-light) !important;
    text-shadow: 0 2px 8px rgba(139,92,246,0.18), 0 1px 0 #222;
    letter-spacing: 0.5px !important;
}

.navbar,
.main-header .navbar {
    padding: 1rem 1.5rem !important;
}

.navbar-brand,
.main-header .navbar-brand {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
}

/* ===== CONTENT AREA ===== */
.content-wrapper,
.main-content,
.app-content,
.platform-content,
.content,
.main,
.app-main,
.layout-content,
.screen-content,
.page-content,
main,
section {
    background-color: var(--bg-primary) !important;
    padding: 2rem !important;
}

.content-header {
    margin-bottom: 2rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid var(--border-primary) !important;
    background-color: transparent !important;
}

.content-header h1 {
    color: var(--primary-purple) !important;
    font-weight: 800 !important;
    font-size: 2.25rem !important;
    text-shadow: 0 2px 12px rgba(139,92,246,0.22), 0 1px 0 #222;
    letter-spacing: 1px !important;
    background: linear-gradient(90deg, var(--primary-purple-light), var(--primary-purple-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== CARDS & BOXES ===== */
.card,
.box {
    background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-secondary) 100%) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--shadow-lg) !important;
    margin-bottom: 1.5rem !important;
    overflow: hidden !important;
}

.card-header,
.box-header {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%) !important;
    border-bottom: 1px solid var(--border-primary) !important;
    padding: 1.25rem 1.5rem !important;
}

.card-title,
.box-title {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    margin: 0 !important;
}

.card-body,
.box-body {
    padding: 1.5rem !important;
    color: var(--text-secondary) !important;
    background-color: transparent !important;
}

/* ===== BUTTONS ===== */
.btn,
button,
[type="button"],
[type="submit"],
input[type="button"],
input[type="submit"] {
    border-radius: 0.5rem !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    padding: 0.625rem 1.25rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-transform: none !important;
    border: none !important;
    background-color: var(--bg-card) !important;
    color: var(--text-secondary) !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-purple) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-purple-dark) 0%, var(--purple-800) 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 25px -8px rgb(139 92 246 / 0.5) !important;
}

.btn-secondary {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-hover) 100%) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-primary) !important;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, var(--bg-hover) 0%, var(--bg-tertiary) 100%) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-accent) !important;
}

/* ===== ALL WHITE BUTTONS KILL ===== */
.btn-default,
.btn-light,
.btn-white,
.btn-outline-light,
.btn-outline-white,
button[class*="white"],
button[class*="light"],
.button,
.button-default,
.button-light {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-hover) 100%) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-primary) !important;
}

/* ===== FORMS ===== */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 0.5rem !important;
    color: var(--text-primary) !important;
    padding: 0.75rem !important;
    font-size: 0.875rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-purple) !important;
    box-shadow: 0 0 0 3px rgb(139 92 246 / 0.1) !important;
    outline: none !important;
    background-color: var(--bg-secondary) !important;
}

.form-label,
label {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
}

/* ===== TABLES ===== */
.table,
.table-responsive,
table {
    background-color: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
}

.table thead th,
th,
.table-header,
.table-head,
.dataTables_header,
.sorting,
.sorting_asc,
.sorting_desc {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-primary) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 1rem !important;
}

.table tbody tr {
    border-bottom: 1px solid var(--border-primary) !important;
    transition: all 0.2s ease !important;
}

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

.table tbody td {
    padding: 1rem !important;
    color: var(--text-secondary) !important;
    font-size: 0.875rem !important;
}

/* ===== ALERTS & NOTIFICATIONS ===== */
.alert {
    border-radius: 0.5rem !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 1rem !important;
    border: none !important;
    backdrop-filter: blur(10px) !important;
}

.alert-success {
    background: linear-gradient(135deg, rgb(34 197 94 / 0.1) 0%, rgb(34 197 94 / 0.05) 100%) !important;
    color: #10b981 !important;
    border-left: 4px solid #10b981 !important;
}

.alert-danger {
    background: linear-gradient(135deg, rgb(239 68 68 / 0.1) 0%, rgb(239 68 68 / 0.05) 100%) !important;
    color: #ef4444 !important;
    border-left: 4px solid #ef4444 !important;
}

.alert-warning {
    background: linear-gradient(135deg, rgb(245 158 11 / 0.1) 0%, rgb(245 158 11 / 0.05) 100%) !important;
    color: #f59e0b !important;
    border-left: 4px solid #f59e0b !important;
}

.alert-info {
    background: linear-gradient(135deg, rgb(139 92 246 / 0.1) 0%, rgb(139 92 246 / 0.05) 100%) !important;
    color: var(--primary-purple-light) !important;
    border-left: 4px solid var(--primary-purple) !important;
}

/* ===== MODALS ===== */
.modal-content {
    background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-secondary) 100%) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
}

.modal-header {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%) !important;
    border-bottom: 1px solid var(--border-primary) !important;
    padding: 1.5rem !important;
}

.modal-title {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

.modal-body {
    padding: 1.5rem !important;
    color: var(--text-secondary) !important;
}

.modal-footer {
    border-top: 1px solid var(--border-primary) !important;
    padding: 1.5rem !important;
    background-color: var(--bg-secondary) !important;
}

/* ===== BREADCRUMBS ===== */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 1rem !important;
}

.breadcrumb-item {
    color: var(--text-muted) !important;
    font-size: 0.875rem !important;
}

.breadcrumb-item.active {
    color: var(--primary-purple-light) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted) !important;
    content: "/" !important;
}

/* ===== PAGINATION ===== */
.pagination {
    gap: 0.5rem !important;
}

.page-link {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-secondary) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    transition: all 0.3s ease !important;
}

.page-link:hover {
    background-color: var(--bg-hover) !important;
    border-color: var(--primary-purple) !important;
    color: var(--primary-purple-light) !important;
}

.page-item.active .page-link {
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%) !important;
    border-color: var(--primary-purple) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-purple) !important;
}

/* ===== TARGETED WHITE BACKGROUND FIXES ===== */
.bg-white,
.bg-light,
.card-white,
.content-white,
.table-white,
.panel-white,
.wrapper-content,
.main-panel,
.content-panel,
.bg-gray-50,
.bg-gray-100,
.bg-slate-50,
.bg-slate-100 {
    background-color: #23234a !important; /* Abu-abu gelap, bukan item pekat */
    color: var(--text-secondary) !important;
}

.text-dark,
.text-black,
.text-gray-900,
.text-slate-900 {
    color: #e2e8f0 !important; /* Teks tetap terang, tapi ga putih banget */
}

.text-muted,
.text-gray-500,
.text-slate-500 {
    color: var(--text-muted) !important;
}

/* ===== FORCE DARK ON COMMON ELEMENTS ===== */
.container > .row:not(.sidebar):not([class*='sidebar']),
.container-fluid > .row:not(.sidebar):not([class*='sidebar']),
.row > [class*="col-"]:not(.sidebar):not([class*='sidebar']),
.content > *:not(.sidebar):not([class*='sidebar']),
.main-content > *:not(.sidebar):not([class*='sidebar']),
.app-content > *:not(.sidebar):not([class*='sidebar']),
.platform-content > *:not(.sidebar):not([class*='sidebar']),
.card-body > *:not(.sidebar):not([class*='sidebar']),
.box-body > *:not(.sidebar):not([class*='sidebar']) {
    background-color: transparent !important;
}

[class*="col-"]:not(.sidebar):not([class*='sidebar']) {
    background-color: transparent !important;
}

/* ===== ORCHID SPECIFIC OVERRIDES ===== */
.app,
.layout,
.layout-content,
.layout-main,
.orchid-content,
.platform-wrapper,
.screen-content,
.screen-wrapper,
[class*="screen-"],
[class*="layout-"],
[class*="platform-"],
[class*="orchid-"] {
    background-color: var(--bg-primary) !important;
    color: var(--text-secondary) !important;
}

/* ===== TABLE SPECIFIC FIXES ===== */
.table-container,
.table-wrapper,
.dataTables_wrapper,
.table-responsive > .table,
.table > tbody,
.table > thead,
.table > tfoot {
    background-color: var(--bg-card) !important;
}

.table tr,
.table td,
.table th {
    background-color: transparent !important;
    border-color: var(--border-primary) !important;
}

/* ===== CONTAINERS ===== */
.container,
.container-fluid {
    background-color: var(--bg-primary) !important;
}

.row {
    background-color: transparent !important;
}

[class*="col-"] {
    background-color: transparent !important;
}

/* ===== PARAGRAPHS & TEXT ===== */
p {
    color: var(--text-secondary) !important;
    background-color: transparent !important;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
    color: var(--primary-purple-light) !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    background: none !important;
    background-color: transparent !important;
    text-shadow: none !important;
}

/* Force transparent pada inline elements */
small, span, strong, em, i, b, u, mark, del, ins, sub, sup {
    background-color: transparent !important;
}

/* ===== LINKS ===== */
a {
    color: var(--primary-purple-light) !important;
    text-decoration: none !important;
}

a:hover {
    color: var(--primary-purple) !important;
}

/* ===== RESPONSIVE FIXES ===== */
@media (max-width: 768px) {
    .content-wrapper,
    .main-content,
    .app-content {
        padding: 1rem !important;
    }
    
    .card-body,
    .box-body {
        padding: 1rem !important;
    }
    
    .table {
        font-size: 0.8rem !important;
    }
    
    .table thead th,
    .table tbody td {
        padding: 0.75rem 0.5rem !important;
    }
}

/* ===== SCROLLBAR STYLING ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, var(--primary-purple), var(--primary-purple-dark));
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, var(--primary-purple-dark), var(--purple-800));
}

/* ===== LOADING STATES ===== */
.loading {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

.spinner-border {
    color: var(--primary-purple) !important;
}

/* ===== FINAL OVERRIDES ===== */
*:focus {
    outline: 2px solid var(--primary-purple) !important;
    outline-offset: 2px !important;
}

/* ===== FINAL NUCLEAR OPTION - KILL ALL WHITE! ===== */
/* Bikin SEMUA background putih jadi dark tanpa rusak layout */

/*
    NOTE TATA:
    Bagian ini aku rapihin supaya ga semua .bg-white atau .bg-light jadi item total,
    biar accent putih/abu2 Orchid tetep bisa muncul buat highlight/kontras.
    Kalau ada elemen yang harusnya putih, jangan diubah ke dark di sini!
*/
.bg-white,
.bg-light,
.card-white,
.content-white,
.table-white,
.panel-white,
.bg-gray-50,
.bg-gray-100,
.bg-slate-50,
.bg-slate-100 {
    background-color: #23234a !important; /* Abu-abu gelap, bukan item pekat */
    color: var(--text-secondary) !important;
}

.text-dark,
.text-black,
.text-gray-900,
.text-slate-900 {
    color: #e2e8f0 !important; /* Teks tetap terang, tapi ga putih banget */
}

.text-muted,
.text-gray-500,
.text-slate-500 {
    color: var(--text-muted) !important;
}

/* Jangan override semua .bg-*, biar accent Orchid tetep muncul */
/* Hapus nuclear selector yang terlalu luas */

/*
    NOTE TATA:
    Kalau ada elemen yang masih maksa putih banget, override di section khusus aja,
    jangan pakai selector global kayak *.bg-white, *.bg-light, dsb.
*/

/* ===== END OF THEME ===== */
body small {
    color: var(--text-muted) !important;
    background: none !important;
    background-color: transparent !important;
}

/* Tata: Footer user info di sidebar bawah biar lebih pop up */
footer .profile-container {
    background: var(--bg-card) !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 24px -4px rgba(139,92,246,0.12), var(--shadow-lg) !important;
    border: 1.5px solid var(--primary-purple) !important;
    color: var(--text-primary) !important;
    padding: 1rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}
footer .profile-container .btn,
footer .profile-container .btn-link {
    display: none !important;
}
footer .profile-container .text-white,
footer .profile-container .text-ellipsis {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
}
footer .profile-container .text-muted {
    color: var(--text-muted) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}
footer .profile-container .badge.bg-danger {
    background: #ef4444 !important;
    color: #fff !important;
}

/* Tata: Biar nav-pills konsisten dark card */
.nav-pills,
.nav-pills .nav-link {
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    border-radius: 0.75rem !important;
}
.nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-purple) !important;
}