/* ============================================
   DARK MODERN THEME — TRIPOS PREMIUM
   Scoped under html.dark-mode for toggle support
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
    --dm-bg-deep: #0B1120;
    --dm-bg-surface: #131B2E;
    --dm-bg-elevated: #1A2332;
    --dm-bg-input: #131B2E;
    --dm-border: rgba(255, 255, 255, 0.06);
    --dm-border-focus: rgba(139, 92, 246, 0.5);
    --dm-text-primary: #F1F5F9;
    --dm-text-secondary: #94A3B8;
    --dm-text-muted: #64748B;
    --dm-accent: #8B5CF6;
    --dm-accent-hover: #7C3AED;
    --dm-accent-glow: rgba(139, 92, 246, 0.15);
    --dm-success: #10B981;
    --dm-danger: #EF4444;
    --dm-amber: #F59E0B;
    --dm-info: #3B82F6;
    --dm-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 4px 10px -2px rgba(0, 0, 0, 0.4);
    --dm-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   GLASS CARD COMPONENT
   ============================================ */
html.dark-mode .dm-glass-card {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(19, 27, 46, 0.8);
    border: 1px solid rgba(139, 92, 246, 0.1);
    border-radius: 16px;
    box-shadow: var(--dm-shadow);
}

/* ============================================
   GLOBAL BODY & LAYOUT
   ============================================ */
html.dark-mode,
html.dark-mode body {
    background: var(--dm-bg-deep) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .content-wrapper,
html.dark-mode .content,
html.dark-mode main,
html.dark-mode #scrollable-container,
html.dark-mode .wrapper,
html.dark-mode .thetop {
    background: var(--dm-bg-deep) !important;
    color: var(--dm-text-primary) !important;
}

/* Scrollbar */
html.dark-mode ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

html.dark-mode ::-webkit-scrollbar-track {
    background: var(--dm-bg-deep);
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--dm-accent);
}

/* ============================================
   HEADER / NAVBAR — OVERRIDE ALL SKINS
   ============================================ */
html.dark-mode .main-header,
html.dark-mode .main-header .navbar,
html.dark-mode .main-header .logo,
html.dark-mode .skin-blue .main-header .navbar,
html.dark-mode .skin-blue .main-header .logo,
html.dark-mode .skin-blue-light .main-header .navbar,
html.dark-mode .skin-blue-light .main-header .logo,
html.dark-mode .skin-black .main-header .navbar,
html.dark-mode .skin-black .main-header .logo,
html.dark-mode .skin-green .main-header .navbar,
html.dark-mode .skin-red .main-header .navbar,
html.dark-mode .skin-yellow .main-header .navbar,
html.dark-mode .skin-purple .main-header .navbar,
html.dark-mode [class*="skin-"] .main-header .navbar,
html.dark-mode [class*="skin-"] .main-header .logo {
    background: #080D1A !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.12) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Header links & icons */
html.dark-mode .main-header .navbar .nav>li>a,
html.dark-mode .main-header .navbar a,
html.dark-mode [class*="skin-"] .main-header .navbar .nav>li>a {
    color: #94A3B8 !important;
}

html.dark-mode .main-header .navbar .nav>li>a:hover,
html.dark-mode .main-header .navbar a:hover {
    background: rgba(139, 92, 246, 0.1) !important;
    color: #F1F5F9 !important;
}

/* Header sidebar toggle */
html.dark-mode .main-header .sidebar-toggle,
html.dark-mode [class*="skin-"] .main-header .sidebar-toggle {
    color: #94A3B8 !important;
}

html.dark-mode .main-header .sidebar-toggle:hover {
    background: rgba(139, 92, 246, 0.1) !important;
    color: var(--dm-accent) !important;
}

/* Header buttons */
html.dark-mode .main-header .navbar button,
html.dark-mode .main-header .navbar .btn {
    border-color: rgba(139, 92, 246, 0.15) !important;
    color: #94A3B8 !important;
}

html.dark-mode .main-header .navbar button:hover {
    background: rgba(139, 92, 246, 0.1) !important;
    color: #F1F5F9 !important;
}

/* Logo area */
html.dark-mode [class*="skin-"] .main-header .logo .side-bar-heading,
html.dark-mode .side-bar>a[class*="tw-bg-"] {
    background: #080D1A !important;
}

/* ============================================
   SIDEBAR — NUCLEAR DARK OVERRIDE
   ============================================ */
html.dark-mode .side-bar,
html.dark-mode aside.side-bar {
    background: #080D1A !important;
    border-right: 1px solid rgba(139, 92, 246, 0.08) !important;
}

/* Kill ALL white/light backgrounds inside sidebar */
html.dark-mode .side-bar *[class*="tw-bg-white"],
html.dark-mode .side-bar *[class*="tw-bg-gray"],
html.dark-mode .side-bar *[class*="tw-bg-primary-50"],
html.dark-mode .side-bar *[class*="tw-bg-blue"],
html.dark-mode .side-bar ul,
html.dark-mode .side-bar li,
html.dark-mode .side-bar div {
    background: transparent !important;
    background-color: transparent !important;
}

/* Sidebar links — default */
html.dark-mode .side-bar a,
html.dark-mode .side-bar ul li a,
html.dark-mode .side-bar a[class*="tw-text-gray"],
html.dark-mode .side-bar a[class*="tw-text-black"] {
    color: #7C8DB5 !important;
    border-left: 3px solid transparent !important;
    transition: all 0.2s ease;
    background: transparent !important;
}

/* Sidebar links — hover */
html.dark-mode .side-bar a:hover,
html.dark-mode .side-bar ul li a:hover,
html.dark-mode .side-bar a:focus {
    background: rgba(139, 92, 246, 0.08) !important;
    color: #E2E8F0 !important;
    border-left-color: #8B5CF6 !important;
}

/* Sidebar links — active/current */
html.dark-mode .side-bar li.active>a,
html.dark-mode .side-bar a[class*="tw-bg-primary"],
html.dark-mode .side-bar .active>a {
    background: rgba(139, 92, 246, 0.12) !important;
    color: #F1F5F9 !important;
    border-left: 3px solid #8B5CF6 !important;
}

/* Sidebar sub-menus */
html.dark-mode .side-bar ul li ul,
html.dark-mode .side-bar ul ul,
html.dark-mode .treeview-menu,
html.dark-mode [class*="skin-"] .sidebar-menu>li>.treeview-menu {
    background: rgba(0, 0, 0, 0.25) !important;
}

html.dark-mode .side-bar ul li ul li a {
    color: #64748B !important;
    border-left: none !important;
    padding-left: 40px !important;
}

html.dark-mode .side-bar ul li ul li a:hover,
html.dark-mode .side-bar ul li ul li.active>a {
    color: #E2E8F0 !important;
    background: rgba(139, 92, 246, 0.06) !important;
}

/* AdminLTE sidebar overrides */
html.dark-mode .sidebar-menu>li>a {
    color: #7C8DB5 !important;
    background: transparent !important;
}

html.dark-mode .sidebar-menu>li.active>a,
html.dark-mode .sidebar-menu>li>a:hover {
    background: rgba(139, 92, 246, 0.08) !important;
    color: #E2E8F0 !important;
}

html.dark-mode .treeview-menu>li>a {
    color: #64748B !important;
    background: transparent !important;
}

html.dark-mode .treeview-menu>li>a:hover,
html.dark-mode .treeview-menu>li.active>a {
    color: #E2E8F0 !important;
    background: rgba(139, 92, 246, 0.06) !important;
}

html.dark-mode .sidebar-toggle {
    color: #94A3B8 !important;
}

html.dark-mode .user-panel {
    border-bottom: 1px solid var(--dm-border) !important;
}

/* Sidebar logo area */
html.dark-mode .side-bar>a {
    background: #080D1A !important;
}

/* Sidebar scrollbar */
html.dark-mode .side-bar::-webkit-scrollbar {
    width: 3px !important;
}

html.dark-mode .side-bar::-webkit-scrollbar-thumb {
    background: #334155 !important;
    border-radius: 4px !important;
}

html.dark-mode .side-bar::-webkit-scrollbar-track {
    background: transparent !important;
}

html.dark-mode .side-bar svg {
    color: inherit !important;
}

/* ============================================
   BOX / CARD COMPONENTS
   ============================================ */
html.dark-mode .box,
html.dark-mode .box-body,
html.dark-mode .box-header,
html.dark-mode .box-footer,
html.dark-mode .info-box,
html.dark-mode .small-box {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .box {
    border-radius: 12px !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: var(--dm-shadow) !important;
}

html.dark-mode .box-header {
    border-bottom-color: rgba(139, 92, 246, 0.08) !important;
}

html.dark-mode .box-header .box-title {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .box-footer {
    border-top-color: rgba(139, 92, 246, 0.08) !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
html.dark-mode .form-control,
html.dark-mode .form-control[disabled],
html.dark-mode .form-control[readonly],
html.dark-mode .input-sm,
html.dark-mode fieldset[disabled] .form-control {
    background: #0F1629 !important;
    color: var(--dm-text-primary) !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
    border-radius: 8px !important;
    transition: var(--dm-transition);
}

html.dark-mode .form-control:focus {
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 3px var(--dm-accent-glow) !important;
    background: var(--dm-bg-elevated) !important;
}

html.dark-mode .form-control::placeholder {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .input-group .input-group-addon {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-secondary) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode label {
    color: var(--dm-text-secondary) !important;
}

/* ============================================
   SELECT2 DARK
   ============================================ */
html.dark-mode .select2-container--default .select2-selection--single,
html.dark-mode .select2-container--default .select2-selection--multiple {
    background: #0F1629 !important;
    color: var(--dm-text-primary) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
    border-radius: 8px !important;
}

html.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered,
html.dark-mode .select2-selection__rendered {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .select2-container--default .select2-results>.select2-results__options {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--dm-bg-surface) !important;
}

html.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--dm-accent) !important;
    color: #fff !important;
}

html.dark-mode .select2-search__field {
    background: #0F1629 !important;
    color: var(--dm-text-primary) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode .select2-dropdown {
    background: var(--dm-bg-elevated) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

html.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--dm-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
}

/* ============================================
   DATATABLES — PREMIUM DARK
   ============================================ */
html.dark-mode table.dataTable,
html.dark-mode .table,
html.dark-mode .table-bordered,
html.dark-mode .table-striped {
    color: var(--dm-text-primary) !important;
    border-color: rgba(139, 92, 246, 0.08) !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Fix for DataTables header alignment */
html.dark-mode .dataTables_scrollHeadInner,
html.dark-mode .dataTables_scrollHeadInner table.dataTable {
    width: 100% !important;
}

html.dark-mode .dataTables_scrollBody table.dataTable {
    width: 100% !important;
}

/* ===== TABLE HEADER — DISTINCT ACCENT ===== */
html.dark-mode table thead tr,
html.dark-mode .table>thead>tr,
html.dark-mode .table-bordered>thead>tr,
html.dark-mode .dataTable>thead>tr {
    background: #0D1526 !important;
}

html.dark-mode table thead tr th,
html.dark-mode .table>thead>tr>th,
html.dark-mode .table-bordered>thead>tr>th,
html.dark-mode .dataTable thead th,
html.dark-mode table.dataTable thead th {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.05) 100%) !important;
    color: #C4B5FD !important;
    border-bottom: 2px solid rgba(139, 92, 246, 0.25) !important;
    border-right: 1px solid rgba(139, 92, 246, 0.06) !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 10px 12px !important;
    white-space: nowrap;
}

html.dark-mode table thead tr th:last-child {
    border-right: none !important;
}

/* ===== TABLE BODY ROWS ===== */
html.dark-mode .table>tbody>tr,
html.dark-mode table.dataTable>tbody>tr {
    background: transparent !important;
}

html.dark-mode .table>tbody>tr>td,
html.dark-mode .table-bordered>tbody>tr>td,
html.dark-mode table.dataTable tbody td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.025) !important;
    color: #CBD5E1 !important;
    padding: 9px 12px !important;
    background: transparent !important;
}

html.dark-mode table.dataTable tbody td:last-child,
html.dark-mode .table>tbody>tr>td:last-child {
    border-right: none !important;
}

/* Alternating rows — subtle */
html.dark-mode .table-striped>tbody>tr:nth-of-type(odd),
html.dark-mode table.dataTable>tbody>tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.012) !important;
}

html.dark-mode .table-striped>tbody>tr:nth-of-type(even),
html.dark-mode table.dataTable>tbody>tr:nth-child(even) {
    background: rgba(11, 17, 32, 0.4) !important;
}

/* ===== ROW HOVER — PREMIUM GLOW ===== */
html.dark-mode .table>tbody>tr:hover,
html.dark-mode .table>tbody>tr:hover>td,
html.dark-mode table.dataTable tbody tr:hover,
html.dark-mode table.dataTable tbody tr:hover td,
html.dark-mode .table-striped>tbody>tr:hover,
html.dark-mode .table-striped>tbody>tr:hover>td {
    background: rgba(139, 92, 246, 0.08) !important;
    color: #F1F5F9 !important;
}

/* ===== ROW SELECTED/ACTIVE ===== */
html.dark-mode table.dataTable tbody>tr.selected,
html.dark-mode table.dataTable tbody>tr.selected td,
html.dark-mode .table>tbody>tr.active>td,
html.dark-mode .table>tbody>tr>td.active {
    background: rgba(139, 92, 246, 0.15) !important;
    color: #F1F5F9 !important;
}

/* ===== TABLE BORDERS — STRONGER ===== */
html.dark-mode .table-bordered {
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode .table-bordered>thead>tr>th {
    border-bottom: 2px solid rgba(139, 92, 246, 0.2) !important;
}

html.dark-mode .table-bordered>tbody>tr>td {
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Footer rows */
html.dark-mode .table>tfoot>tr>td,
html.dark-mode .table>tfoot>tr>th {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.03) 100%) !important;
    color: #C4B5FD !important;
    border-top: 2px solid rgba(139, 92, 246, 0.2) !important;
    font-weight: 600 !important;
}

/* DataTable controls */
html.dark-mode div.dataTables_processing {
    background: rgba(11, 17, 32, 0.95) !important;
    color: var(--dm-accent) !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    border-radius: 8px !important;
}

html.dark-mode .dataTables_wrapper .dataTables_length,
html.dark-mode .dataTables_wrapper .dataTables_filter,
html.dark-mode .dataTables_wrapper .dataTables_info {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_length select,
html.dark-mode .dataTables_wrapper .dataTables_filter input {
    background: #0F1629 !important;
    color: var(--dm-text-primary) !important;
    border: 1px solid rgba(139, 92, 246, 0.12) !important;
    border-radius: 6px !important;
}

html.dark-mode .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15) !important;
}

html.dark-mode .dataTables_empty {
    background: transparent !important;
    color: var(--dm-text-muted) !important;
}

/* ============================================
   PAGINATION
   ============================================ */
html.dark-mode .pagination>li>a,
html.dark-mode .pagination>li>span {
    background: var(--dm-bg-surface) !important;
    color: var(--dm-text-secondary) !important;
    border-color: rgba(139, 92, 246, 0.08) !important;
    transition: var(--dm-transition);
}

html.dark-mode .pagination>li>a:hover {
    background: var(--dm-accent) !important;
    color: #fff !important;
    border-color: var(--dm-accent) !important;
}

html.dark-mode .pagination>.active>a,
html.dark-mode .pagination>.active>a:hover {
    background: var(--dm-accent) !important;
    color: #fff !important;
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 12px var(--dm-accent-glow);
}

html.dark-mode .pagination>.disabled>a {
    background: var(--dm-bg-deep) !important;
    color: var(--dm-text-muted) !important;
}

html.dark-mode .paginate_button.next,
html.dark-mode .paginate_button.previous {
    background: var(--dm-bg-surface) !important;
    color: var(--dm-text-secondary) !important;
    border-color: rgba(139, 92, 246, 0.08) !important;
}

/* ============================================
   BUTTONS
   ============================================ */
html.dark-mode .btn-default {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode .btn-default:hover {
    background: var(--dm-accent) !important;
    color: #fff !important;
}

html.dark-mode .btn-primary {
    background: var(--dm-accent) !important;
    border-color: var(--dm-accent) !important;
    color: #fff !important;
}

html.dark-mode .btn-primary:hover {
    background: var(--dm-accent-hover) !important;
}

html.dark-mode .btn-info {
    background: var(--dm-info) !important;
    border-color: var(--dm-info) !important;
    color: #fff !important;
}

html.dark-mode .btn-success {
    background: var(--dm-success) !important;
    border-color: var(--dm-success) !important;
    color: #fff !important;
}

html.dark-mode .btn-danger {
    background: var(--dm-danger) !important;
    border-color: var(--dm-danger) !important;
    color: #fff !important;
}

html.dark-mode .btn-warning {
    background: var(--dm-amber) !important;
    border-color: var(--dm-amber) !important;
    color: #fff !important;
}

/* Export buttons */
html.dark-mode .buttons-csv {
    background: var(--dm-accent) !important;
    color: #fff !important;
    border-radius: 8px !important;
    border: none !important;
}

html.dark-mode .buttons-excel {
    background: var(--dm-success) !important;
    color: #fff !important;
    border-radius: 8px !important;
    border: none !important;
}

html.dark-mode .buttons-pdf {
    background: var(--dm-danger) !important;
    color: #fff !important;
    border-radius: 8px !important;
    border: none !important;
}

html.dark-mode .buttons-print {
    background: var(--dm-amber) !important;
    color: #fff !important;
    border-radius: 8px !important;
    border: none !important;
}

html.dark-mode .buttons-collection {
    background: var(--dm-info) !important;
    color: #fff !important;
    border-radius: 8px !important;
    border: none !important;
}

/* ============================================
   DROPDOWN MENUS
   ============================================ */
html.dark-mode .dropdown-menu {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .dropdown-menu>li>a {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .dropdown-menu>li>a:hover,
html.dark-mode .dropdown-menu>li>a:focus {
    background: rgba(139, 92, 246, 0.1) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .dropdown-menu .divider {
    background-color: var(--dm-border) !important;
}

/* Header dropdown specific */
html.dark-mode details ul[role="menu"] {
    background: var(--dm-bg-elevated) !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode details ul[role="menu"] a {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode details ul[role="menu"] a:hover {
    background: rgba(139, 92, 246, 0.1) !important;
    color: var(--dm-text-primary) !important;
}

/* ============================================
   MODALS
   ============================================ */
html.dark-mode .modal-content {
    background: var(--dm-bg-elevated) !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .modal-header {
    background: #0D1526 !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.1) !important;
    border-radius: 16px 16px 0 0 !important;
}

html.dark-mode .modal-header .modal-title,
html.dark-mode .modal-header .close {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .modal-body {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .modal-footer {
    background: #0D1526 !important;
    border-top: 1px solid rgba(139, 92, 246, 0.1) !important;
    border-radius: 0 0 16px 16px !important;
}

/* ============================================
   TABS
   ============================================ */
html.dark-mode .nav-tabs-custom {
    background: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
    border-radius: 12px !important;
}

html.dark-mode .nav-tabs-custom>.nav-tabs {
    background: var(--dm-bg-surface) !important;
    border-bottom-color: rgba(139, 92, 246, 0.08) !important;
}

html.dark-mode .nav-tabs-custom>.nav-tabs>li>a {
    color: var(--dm-text-secondary) !important;
    background: transparent !important;
}

html.dark-mode .nav-tabs-custom>.nav-tabs>li.active>a,
html.dark-mode .nav-tabs-custom>.nav-tabs>li>a:hover {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-accent) !important;
    border-bottom-color: var(--dm-accent) !important;
}

html.dark-mode .tab-content {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
}

/* ============================================
   ALERTS & WELLS
   ============================================ */
html.dark-mode .alert {
    border-radius: 10px !important;
}

html.dark-mode .alert-warning {
    background: rgba(245, 158, 11, 0.12) !important;
    color: var(--dm-amber) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}

html.dark-mode .alert-info {
    background: rgba(59, 130, 246, 0.12) !important;
    color: var(--dm-info) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

html.dark-mode .alert-success {
    background: rgba(16, 185, 129, 0.12) !important;
    color: var(--dm-success) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}

html.dark-mode .alert-danger {
    background: rgba(239, 68, 68, 0.12) !important;
    color: var(--dm-danger) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

html.dark-mode .well {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
    border-radius: 12px !important;
}

/* ============================================
   LIST GROUP
   ============================================ */
html.dark-mode .list-group-item {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .list-group-item:hover {
    background: var(--dm-bg-surface) !important;
}

/* ============================================
   DATEPICKER & DATERANGEPICKER
   ============================================ */
html.dark-mode .datepicker {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
    border-radius: 12px !important;
}

html.dark-mode .datepicker table tr td,
html.dark-mode .datepicker table tr th {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .datepicker table tr td.today {
    background: var(--dm-amber) !important;
    color: #fff !important;
}

html.dark-mode .datepicker table tr td.active {
    background: var(--dm-accent) !important;
    color: #fff !important;
}

html.dark-mode .datepicker table tr td.day:hover {
    background: rgba(139, 92, 246, 0.15) !important;
}

html.dark-mode .daterangepicker {
    background: var(--dm-bg-elevated) !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
    border-radius: 12px !important;
}

html.dark-mode .daterangepicker td.in-range {
    background: rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode .daterangepicker td.active {
    background: var(--dm-accent) !important;
    color: #fff !important;
}

html.dark-mode .daterangepicker .calendar-table {
    background: var(--dm-bg-elevated) !important;
}

html.dark-mode .daterangepicker .calendar-table th,
html.dark-mode .daterangepicker .calendar-table td {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .daterangepicker select.monthselect,
html.dark-mode .daterangepicker select.yearselect {
    background: #0F1629 !important;
    color: var(--dm-text-primary) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode .daterangepicker select.monthselect option,
html.dark-mode .daterangepicker select.yearselect option {
    background: #0F1629 !important;
    color: var(--dm-text-primary) !important;
}

/* ============================================
   NOTIFICATION DROPDOWN
   ============================================ */
html.dark-mode .navbar-nav>.notifications-menu>.dropdown-menu>li .menu {
    background: var(--dm-bg-elevated) !important;
}

html.dark-mode .navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a {
    color: var(--dm-text-secondary) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a:hover {
    background: rgba(139, 92, 246, 0.08) !important;
    color: var(--dm-text-primary) !important;
}

/* ============================================
   HEADINGS & TYPOGRAPHY
   ============================================ */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .text-muted {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode a {
    color: var(--dm-accent);
}

html.dark-mode a:hover {
    color: var(--dm-accent-hover);
}

html.dark-mode legend {
    color: var(--dm-text-primary) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode p {
    color: var(--dm-text-primary);
}

/* ============================================
   HIGHCHARTS DARK
   ============================================ */
html.dark-mode .highcharts-background {
    fill: #0D1526 !important;
}

html.dark-mode .highcharts-plot-background {
    fill: #0D1526 !important;
}

html.dark-mode .highcharts-grid-line {
    stroke: rgba(139, 92, 246, 0.06) !important;
}

html.dark-mode .highcharts-axis-line {
    stroke: rgba(139, 92, 246, 0.08) !important;
}

html.dark-mode .highcharts-tick {
    stroke: rgba(139, 92, 246, 0.08) !important;
}

html.dark-mode .highcharts-axis-labels text,
html.dark-mode .highcharts-yaxis-labels text,
html.dark-mode .highcharts-xaxis-labels text {
    fill: #94A3B8 !important;
}

html.dark-mode .highcharts-axis-title {
    fill: #94A3B8 !important;
}

html.dark-mode .highcharts-legend-item text {
    fill: #F1F5F9 !important;
}

html.dark-mode .highcharts-tooltip-box {
    fill: rgba(13, 21, 38, 0.95) !important;
    stroke: rgba(139, 92, 246, 0.2) !important;
}

html.dark-mode .highcharts-tooltip text {
    fill: #F1F5F9 !important;
}

html.dark-mode .highcharts-title {
    fill: #F1F5F9 !important;
}

html.dark-mode .highcharts-subtitle {
    fill: #94A3B8 !important;
}

html.dark-mode .highcharts-credits {
    fill: #334155 !important;
}

html.dark-mode .highcharts-data-label text {
    fill: #F1F5F9 !important;
}

html.dark-mode .highcharts-container {
    background: #0D1526 !important;
    border-radius: 8px !important;
}

/* ============================================
   WIZARD
   ============================================ */
html.dark-mode .wizard>.content {
    background: var(--dm-bg-elevated) !important;
}

html.dark-mode .wizard>.steps .current a {
    background: var(--dm-accent) !important;
}

/* ============================================
   TOASTR DARK
   ============================================ */
html.dark-mode .toast-success {
    background-color: rgba(16, 185, 129, 0.9) !important;
}

html.dark-mode .toast-error {
    background-color: rgba(239, 68, 68, 0.9) !important;
}

html.dark-mode .toast-warning {
    background-color: rgba(245, 158, 11, 0.9) !important;
}

html.dark-mode .toast-info {
    background-color: rgba(59, 130, 246, 0.9) !important;
}

/* ============================================
   SWAL (SweetAlert) DARK
   ============================================ */
html.dark-mode .swal-modal {
    background-color: var(--dm-bg-elevated) !important;
    border-radius: 16px !important;
}

html.dark-mode .swal-title {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .swal-text {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .swal-button {
    background-color: var(--dm-accent) !important;
    border-radius: 8px !important;
}

html.dark-mode .swal-button:hover {
    background-color: var(--dm-accent-hover) !important;
}

html.dark-mode .swal-button--cancel {
    background-color: var(--dm-bg-surface) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .swal-footer {
    background: var(--dm-bg-surface) !important;
}

html.dark-mode .swal-icon--success:after,
html.dark-mode .swal-icon--success:before {
    background: var(--dm-bg-elevated) !important;
}

html.dark-mode .swal-icon--success__hide-corners {
    background-color: var(--dm-bg-elevated) !important;
}

/* ============================================
   RIGHT-COL (Auth Layout) + Auth inputs
   ============================================ */
html.dark-mode .right-col {
    background: var(--dm-bg-deep) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .right-col label {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .right-col a {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .left-col {
    background: linear-gradient(135deg, var(--dm-bg-deep), var(--dm-bg-surface)) !important;
}

html.dark-mode .right-col input[type="text"],
html.dark-mode .right-col input[type="password"],
html.dark-mode .right-col input[type="search"],
html.dark-mode .right-col input[type="email"],
html.dark-mode .right-col input[type="number"],
html.dark-mode .right-col select,
html.dark-mode .right-col textarea {
    background: #0F1629 !important;
    color: #F1F5F9 !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
    border-radius: 8px !important;
}

html.dark-mode .right-col input:focus,
html.dark-mode .right-col select:focus {
    border-color: #8B5CF6 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important;
}

html.dark-mode .right-col input::placeholder {
    color: #64748B !important;
}

html.dark-mode .right-col select option {
    background: #0F1629 !important;
    color: #F1F5F9 !important;
}

html.dark-mode .right-col button[type="submit"],
html.dark-mode .right-col .ladda-button {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3) !important;
}

/* ============================================
   POS ELEMENTS
   ============================================ */
html.dark-mode .pos-tab-container,
html.dark-mode .pos-tab-content {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .pos-form-actions {
    background-color: var(--dm-bg-surface) !important;
}

/* ============================================
   MISC / PANELS / BREADCRUMBS
   ============================================ */
html.dark-mode .bg-light-gray {
    background-color: var(--dm-bg-surface) !important;
}

html.dark-mode .bg-danger {
    background-color: var(--dm-danger) !important;
    color: #fff !important;
}

html.dark-mode .bg-gray {
    background: var(--dm-bg-surface) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode table.table-transparent,
html.dark-mode table.table-transparent th {
    background-color: transparent !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .blue-heading {
    background-color: var(--dm-bg-surface) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .img-thumbnail {
    background-color: var(--dm-bg-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .div-overlay {
    background: rgba(11, 17, 32, 0.8) !important;
}

html.dark-mode .popover {
    background: var(--dm-bg-elevated) !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode .popover-content {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .popover-title {
    background: var(--dm-bg-surface) !important;
    color: var(--dm-text-primary) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .tooltip-inner {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .panel,
html.dark-mode .panel-body,
html.dark-mode .panel-heading,
html.dark-mode .panel-footer {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .panel-default>.panel-heading {
    background: var(--dm-bg-surface) !important;
}

html.dark-mode .breadcrumb {
    background: var(--dm-bg-surface) !important;
}

html.dark-mode .breadcrumb>li>a {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .breadcrumb>.active {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .progress {
    background: var(--dm-bg-deep) !important;
    border-radius: 8px !important;
}

/* FOOTER */
html.dark-mode .main-footer {
    background: #080D1A !important;
    border-top: 1px solid rgba(139, 92, 246, 0.08) !important;
    color: #64748B !important;
}

/* Scroll-to-top & user dropdown */
html.dark-mode .scroll {
    background: var(--dm-accent) !important;
    border-radius: 10px !important;
}

html.dark-mode .user-header,
html.dark-mode .user-footer {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

/* TinyMCE Global Dark Theme Override — [DIUBAH] */
html.dark-mode .tox-tinymce {
    background: var(--dm-bg-surface) !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: var(--dm-shadow) !important;
}

html.dark-mode .tox-menubar,
html.dark-mode .tox-sidebar-wrap,
html.dark-mode .tox-statusbar,
html.dark-mode .tox-toolbar-overlord,
html.dark-mode .tox-toolbar,
html.dark-mode .tox-toolbar__primary,
html.dark-mode .tox-toolbar__overflow {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Menubar buttons (e.g. File, Edit, View) — [BARU] */
html.dark-mode .tox .tox-mbtn {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .tox .tox-mbtn:hover,
html.dark-mode .tox .tox-mbtn--active {
    background: rgba(139, 92, 246, 0.12) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .tox .tox-mbtn__select-label {
    color: inherit !important;
}

/* Toolbar buttons & icons — [BARU] */
html.dark-mode .tox .tox-tbtn {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .tox .tox-tbtn svg {
    fill: var(--dm-text-secondary) !important;
}

html.dark-mode .tox .tox-tbtn:hover {
    background: rgba(139, 92, 246, 0.1) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .tox .tox-tbtn:hover svg {
    fill: var(--dm-text-primary) !important;
}

/* Active/enabled state of toolbar buttons — [BARU] */
html.dark-mode .tox .tox-tbtn--enabled,
html.dark-mode .tox .tox-tbtn--enabled:hover {
    background: rgba(139, 92, 246, 0.2) !important;
    color: var(--dm-accent) !important;
}

html.dark-mode .tox .tox-tbtn--enabled svg,
html.dark-mode .tox .tox-tbtn--enabled:hover svg {
    fill: var(--dm-accent) !important;
}

/* Select dropdowns in toolbar (e.g. paragraph styles) — [BARU] */
html.dark-mode .tox .tox-tbtn--bespoke {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .tox .tox-tbtn--bespoke svg {
    fill: var(--dm-text-primary) !important;
}

/* Popup menus, dropdown lists — [BARU] */
html.dark-mode .tox .tox-menu,
html.dark-mode .tox .tox-collection,
html.dark-mode .tox .tox-collection--list {
    background: var(--dm-bg-surface) !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    box-shadow: var(--dm-shadow) !important;
}

html.dark-mode .tox .tox-collection__item {
    background: transparent !important;
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .tox .tox-collection__item-label {
    color: inherit !important;
}

html.dark-mode .tox .tox-collection__item-icon svg {
    fill: var(--dm-text-secondary) !important;
}

html.dark-mode .tox .tox-collection__item--active,
html.dark-mode .tox .tox-collection__item--enabled {
    background: rgba(139, 92, 246, 0.15) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .tox .tox-collection__item--active svg,
html.dark-mode .tox .tox-collection__item--enabled svg {
    fill: var(--dm-text-primary) !important;
}

/* Color picker panel — [BARU] */
html.dark-mode .tox .tox-color-picker-container {
    background: var(--dm-bg-surface) !important;
    color: var(--dm-text-primary) !important;
}

/* Dialogs / Modals in TinyMCE — [BARU] */
html.dark-mode .tox .tox-dialog,
html.dark-mode .tox .tox-dialog__header,
html.dark-mode .tox .tox-dialog__footer,
html.dark-mode .tox .tox-dialog__body {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .tox .tox-dialog-title {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .tox .tox-button {
    background: var(--dm-accent) !important;
    border-color: var(--dm-accent) !important;
    color: white !important;
}

html.dark-mode .tox .tox-button:hover {
    background: var(--dm-accent-hover) !important;
}

html.dark-mode .tox .tox-button--secondary {
    background: var(--dm-bg-surface) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--dm-text-secondary) !important;
}

/* Status bar items — [BARU] */
html.dark-mode .tox-statusbar__path-item,
html.dark-mode .tox-statusbar__wordcount,
html.dark-mode .tox-statusbar a {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .tox-edit-area {
    background: var(--dm-bg-deep) !important;
}

/* Editor Iframe Area placeholder / default — [BARU] */
html.dark-mode .tox-edit-area iframe {
    background: transparent !important;
}

/* ============================================
   TAILWIND CLASS OVERRIDES FOR DASHBOARD
   ============================================ */
html.dark-mode [class*="tw-bg-white"] {
    background-color: var(--dm-bg-surface) !important;
}

html.dark-mode [class*="tw-bg-gray-100"] {
    background-color: var(--dm-bg-deep) !important;
}

html.dark-mode [class*="tw-bg-gray-50"] {
    background-color: var(--dm-bg-surface) !important;
}

html.dark-mode [class*="tw-text-gray-900"] {
    color: #F1F5F9 !important;
}

html.dark-mode [class*="tw-text-gray-800"] {
    color: #E2E8F0 !important;
}

html.dark-mode [class*="tw-text-gray-700"] {
    color: #CBD5E1 !important;
}

html.dark-mode [class*="tw-text-gray-600"] {
    color: #94A3B8 !important;
}

html.dark-mode [class*="tw-text-gray-500"] {
    color: #94A3B8 !important;
}

html.dark-mode [class*="tw-border-gray-200"] {
    border-color: rgba(139, 92, 246, 0.08) !important;
}

html.dark-mode [class*="tw-border-gray-300"] {
    border-color: rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode [class*="tw-ring-gray-200"] {
    --tw-ring-color: rgba(139, 92, 246, 0.08) !important;
}

html.dark-mode [class*="tw-border-dashed"] {
    border-style: solid !important;
    border-color: rgba(139, 92, 246, 0.06) !important;
}

/* Dashboard gradient override */
html.dark-mode [class*="tw-from-primary-800"],
html.dark-mode [class*="tw-bg-gradient-to-r"][class*="tw-from-"] {
    background: var(--dm-bg-deep) !important;
}

/* ============================================
   LOGIN PAGE DARK STYLES
   ============================================ */
html.dark-mode .dm-login-card {
    background: rgba(13, 21, 38, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(139, 92, 246, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

html.dark-mode .login-input {
    background: rgba(15, 22, 41, 0.8) !important;
    border-color: rgba(139, 92, 246, 0.1);
    color: #F1F5F9;
}

html.dark-mode .login-input:focus {
    border-color: #8B5CF6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
    background: rgba(26, 35, 50, 0.9) !important;
}

html.dark-mode .login-input::placeholder {
    color: #64748B;
}

html.dark-mode .login-input-icon {
    color: #64748B;
}

html.dark-mode .dm-login-btn {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

html.dark-mode .dm-login-btn:hover {
    background: linear-gradient(135deg, #7C3AED, #5B21B6);
    box-shadow: 0 6px 25px rgba(139, 92, 246, 0.4);
}

/* ============================================
   TOGGLE BUTTON STYLES
   ============================================ */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    color: white;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

.theme-toggle-btn svg {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
}

html.dark-mode .theme-icon-sun {
    display: block;
}

html.dark-mode .theme-icon-moon {
    display: none;
}

html:not(.dark-mode) .theme-icon-sun {
    display: none;
}

html:not(.dark-mode) .theme-icon-moon {
    display: block;
    color: #374151;
}

html:not(.dark-mode) .theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* ============================================
   CONTENT HEADER & PAGE TITLE
   ============================================ */
html.dark-mode .content-header {
    background: transparent !important;
}

html.dark-mode .content-header h1,
html.dark-mode .content-header .breadcrumb {
    color: var(--dm-text-primary) !important;
}

/* ============================================
   MOBILE SIDEBAR
   ============================================ */
@media (max-width: 1023px) {
    html.dark-mode .side-bar {
        background: #080D1A !important;
        border-right: 1px solid rgba(139, 92, 246, 0.08) !important;
    }
}

/* ============================================
   PRINT OVERRIDE
   ============================================ */
@media print {

    body,
    .content-wrapper,
    .content,
    .box,
    .box-body,
    .box-header,
    table,
    .table>thead>tr>th,
    .table>tbody>tr>td {
        background: #fff !important;
        color: #000 !important;
        border-color: #ddd !important;
    }
}


/* ============================================
   DASHBOARD /HOME — DARK MODERN OVERRIDES V2
   ============================================ */

/* === App Layout Body & Scrollable Container === */
html.dark-mode body {
    background: #0B1120 !important;
}

html.dark-mode .tw-bg-gray-100 {
    background: #0B1120 !important;
}

html.dark-mode #scrollable-container {
    background: #0B1120 !important;
}

html.dark-mode main.tw-bg-gray-100 {
    background: #0B1120 !important;
}

/* === Header Dropdown Menus (Quick Add, User Dropdown) === */
html.dark-mode .tw-dw-dropdown ul[role="menu"],
html.dark-mode details ul[role="menu"] {
    background: rgba(19, 27, 46, 0.95) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(139, 92, 246, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .tw-dw-dropdown ul[role="menu"] a,
html.dark-mode details ul[role="menu"] a {
    color: #94A3B8 !important;
}

html.dark-mode .tw-dw-dropdown ul[role="menu"] a:hover,
html.dark-mode details ul[role="menu"] a:hover {
    color: #F1F5F9 !important;
    background: rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode details ul[role="menu"] p {
    color: #94A3B8 !important;
}

html.dark-mode details ul[role="menu"] .tw-text-gray-900 {
    color: #F1F5F9 !important;
}

html.dark-mode .tw-ring-gray-200 {
    --tw-ring-color: rgba(255, 255, 255, 0.08) !important;
}

/* === Dashboard Hero Gradient Area === */
html.dark-mode .tw-bg-gradient-to-r[class*="tw-from-primary"],
html.dark-mode .tw-bg-gradient-to-r[class*="tw-from-blue"] {
    background: linear-gradient(to right, #0B1120, #131B2E) !important;
}

html.dark-mode [class*="tw-from-primary-800"][class*="tw-to-primary-900"],
html.dark-mode [class*="tw-from-blue-800"][class*="tw-to-blue-900"] {
    background: linear-gradient(to right, #0B1120, #131B2E) !important;
}

/* === Dashboard Stat Cards (Top 8) === */
html.dark-mode .tw-bg-white.tw-shadow-sm.tw-rounded-xl {
    background: rgba(30, 41, 59, 0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(139, 92, 246, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

html.dark-mode .tw-bg-white.tw-shadow-sm.tw-rounded-xl:hover {
    border-color: rgba(139, 92, 246, 0.2) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 20px rgba(139, 92, 246, 0.06) !important;
}

html.dark-mode .tw-bg-white.tw-shadow-sm.tw-rounded-xl .tw-text-gray-500 {
    color: #94A3B8 !important;
}

html.dark-mode .tw-bg-white.tw-shadow-sm.tw-rounded-xl .tw-text-gray-900 {
    color: #F1F5F9 !important;
}

/* Stat card icon backgrounds → translucent dark variants */
html.dark-mode .tw-bg-sky-100 {
    background: rgba(14, 165, 233, 0.15) !important;
}

html.dark-mode .tw-bg-green-100 {
    background: rgba(34, 197, 94, 0.15) !important;
}

html.dark-mode .tw-bg-yellow-100 {
    background: rgba(234, 179, 8, 0.15) !important;
}

html.dark-mode .tw-bg-red-100 {
    background: rgba(239, 68, 68, 0.15) !important;
}

/* === Date Filter Button === */
html.dark-mode #dashboard_date_filter {
    background: rgba(30, 41, 59, 0.8) !important;
    color: #F1F5F9 !important;
    border: 1px solid rgba(139, 92, 246, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

html.dark-mode #dashboard_date_filter:hover {
    background: rgba(139, 92, 246, 0.12) !important;
    border-color: rgba(139, 92, 246, 0.25) !important;
}

/* === Dashboard Location Select === */
html.dark-mode #dashboard_location,
html.dark-mode .select2-container--default .select2-selection--single {
    background: rgba(15, 22, 41, 0.8) !important;
    color: #F1F5F9 !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

html.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #F1F5F9 !important;
}

html.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #64748B !important;
}

html.dark-mode .select2-dropdown {
    background: rgba(19, 27, 46, 0.98) !important;
    border-color: rgba(139, 92, 246, 0.15) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .select2-results__option {
    color: #CBD5E1 !important;
}

html.dark-mode .select2-results__option--highlighted {
    background: rgba(139, 92, 246, 0.15) !important;
    color: #F1F5F9 !important;
}

html.dark-mode .select2-search__field {
    background: rgba(15, 22, 41, 0.8) !important;
    color: #F1F5F9 !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

/* === Chart/Graph Container (tw-bg-gray-50) === */
html.dark-mode .tw-bg-gray-50 {
    background: transparent !important;
}

html.dark-mode .tw-border-gray-200.tw-border-dashed {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* === Table Section Cards (already dark bg #1E293B) === */
html.dark-mode .tw-bg-\[\#1E293B\] h3 {
    color: #F1F5F9 !important;
}

/* === DataTables inside Dashboard === */
html.dark-mode table.table {
    color: #CBD5E1 !important;
}

html.dark-mode table.table thead tr th {
    background: rgba(139, 92, 246, 0.08) !important;
    color: #C4B5FD !important;
    border-color: rgba(139, 92, 246, 0.15) !important;
    font-weight: 600;
}

html.dark-mode table.table tbody tr {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
}

html.dark-mode table.table tbody tr:hover {
    background: rgba(139, 92, 246, 0.05) !important;
}

html.dark-mode table.table tbody tr td {
    border-color: rgba(255, 255, 255, 0.04) !important;
    color: #CBD5E1 !important;
}

html.dark-mode table.table-striped>tbody>tr:nth-of-type(odd) {
    background: rgba(15, 23, 42, 0.4) !important;
}

html.dark-mode table.table tfoot tr {
    background: rgba(139, 92, 246, 0.06) !important;
}

html.dark-mode table.table tfoot tr td {
    color: #E2E8F0 !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

/* === DataTables Pagination & Info === */
html.dark-mode .dataTables_wrapper .dataTables_info {
    color: #64748B !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #94A3B8 !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: rgba(139, 92, 246, 0.2) !important;
    color: #C4B5FD !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(139, 92, 246, 0.1) !important;
    color: #F1F5F9 !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_length select,
html.dark-mode .dataTables_wrapper .dataTables_filter input {
    background: rgba(15, 22, 41, 0.8) !important;
    color: #F1F5F9 !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
    border-radius: 8px;
}

/* === Footer === */
html.dark-mode .tw-text-gray-500 {
    color: #4B5563 !important;
}

/* === Sidebar Header (Business Name Area) === */
html.dark-mode .side-bar a[class*="tw-bg-primary"],
html.dark-mode .side-bar a[class*="tw-bg-blue"] {
    background: linear-gradient(135deg, #131B2E, #1E293B) !important;
}

/* === Popover & Tooltip Dark === */
html.dark-mode .popover {
    background: rgba(19, 27, 46, 0.95) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

html.dark-mode .popover-content {
    color: #CBD5E1 !important;
}

html.dark-mode .popover .arrow::after {
    border-bottom-color: rgba(19, 27, 46, 0.95) !important;
}

html.dark-mode .tooltip-inner {
    background: rgba(19, 27, 46, 0.95) !important;
    color: #F1F5F9 !important;
}

/* === Form Controls Global === */
html.dark-mode .form-control {
    background: rgba(15, 22, 41, 0.8) !important;
    color: #F1F5F9 !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode .form-control:focus {
    border-color: #8B5CF6 !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15) !important;
}

/* === Info Circle Popover on Dashboard === */
html.dark-mode .hover-q {
    color: #8B5CF6 !important;
}

/* === Dashboard transitional bg fix === */
html.dark-mode .tw-bg-\[\#0F172A\] {
    background: #0B1120 !important;
}

/* === Calendar Widget === */
html.dark-mode .fc {
    color: #CBD5E1 !important;
}

html.dark-mode .fc-toolbar h2 {
    color: #F1F5F9 !important;
}

html.dark-mode .fc .fc-button {
    background: rgba(139, 92, 246, 0.15) !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
    color: #C4B5FD !important;
}

html.dark-mode .fc .fc-button:hover {
    background: rgba(139, 92, 246, 0.25) !important;
}

html.dark-mode .fc .fc-button-active {
    background: rgba(139, 92, 246, 0.3) !important;
}

html.dark-mode .fc td,
html.dark-mode .fc th {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .fc-today {
    background: rgba(139, 92, 246, 0.08) !important;
}

/* === Modal Dark Styling === */
html.dark-mode .modal-content {
    background: #131B2E !important;
    border: 1px solid rgba(139, 92, 246, 0.12) !important;
    color: #F1F5F9 !important;
}

html.dark-mode .modal-header {
    border-bottom-color: rgba(139, 92, 246, 0.1) !important;
    color: #F1F5F9 !important;
}

html.dark-mode .modal-header .close {
    color: #94A3B8 !important;
}

html.dark-mode .modal-footer {
    border-top-color: rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode .modal-title {
    color: #F1F5F9 !important;
}

/* === Notification Dropdown === */
html.dark-mode .notifications-list {
    background: rgba(19, 27, 46, 0.98) !important;
    border: 1px solid rgba(139, 92, 246, 0.12) !important;
}

html.dark-mode .notifications-list .notification-item {
    border-bottom-color: rgba(255, 255, 255, 0.04) !important;
    color: #CBD5E1 !important;
}

html.dark-mode .notifications-list .notification-item:hover {
    background: rgba(139, 92, 246, 0.06) !important;
}

/* === Box widget override (legacy AdminLTE) === */
html.dark-mode .box {
    background: rgba(30, 41, 59, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .box-header {
    color: #F1F5F9 !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .box-body {
    color: #CBD5E1 !important;
}

/* === [BARU] GLASSMORPHISM & NEON PREMIUM THEME (Maha Patih V2) === */

/* Glassmorphism Card Style */
.glass-card-premium {
    background: rgba(19, 27, 46, 0.65) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative;
    overflow: hidden;
}

/* Glassmorphism Card Style Light Fallback */
html:not(.dark-mode) .glass-card-premium {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07) !important;
}

/* Card Hover Animation & Tilt Effect */
.glass-card-premium:hover {
    transform: translateY(-6px) scale(1.02) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.25) !important;
}

/* Neon Glow Underlays */
.glow-violet::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #8B5CF6, transparent);
    box-shadow: 0 0 15px #8B5CF6;
    border-radius: 2px;
    opacity: 0.8;
    transition: all 0.4s ease;
}

.glow-cyan::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #06B6D4, transparent);
    box-shadow: 0 0 15px #06B6D4;
    border-radius: 2px;
    opacity: 0.8;
    transition: all 0.4s ease;
}

.glow-emerald::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #10B981, transparent);
    box-shadow: 0 0 15px #10B981;
    border-radius: 2px;
    opacity: 0.8;
    transition: all 0.4s ease;
}

.glow-rose::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #F43F5E, transparent);
    box-shadow: 0 0 15px #F43F5E;
    border-radius: 2px;
    opacity: 0.8;
    transition: all 0.4s ease;
}

/* Hover Accentuation */
.glass-card-premium:hover.glow-violet::after { box-shadow: 0 0 25px #8B5CF6; opacity: 1; }
.glass-card-premium:hover.glow-cyan::after { box-shadow: 0 0 25px #06B6D4; opacity: 1; }
.glass-card-premium:hover.glow-emerald::after { box-shadow: 0 0 25px #10B981; opacity: 1; }
.glass-card-premium:hover.glow-rose::after { box-shadow: 0 0 25px #F43F5E; opacity: 1; }

/* Font Contrast Enhancements (Maha Patih V2 - Highly Readable Colors) */
.glass-text-title {
    color: #94A3B8 !important; /* Muted Secondary */
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

html:not(.dark-mode) .glass-text-title {
    color: #475569 !important; /* High contrast dark gray for light mode */
}

.glass-text-value {
    color: #FFFFFF !important; /* Pure white */
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    font-family: 'Inter', sans-serif !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

html:not(.dark-mode) .glass-text-value {
    color: #0F172A !important; /* Pure Slate 900 for light mode */
    text-shadow: none;
}

/* Table Card Wrapper */
.glass-table-wrapper {
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

html:not(.dark-mode) .glass-table-wrapper {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

/* Interactive Pill Selection */
.glass-pill {
    background: rgba(139, 92, 246, 0.1) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    border-radius: 9999px !important;
    color: #C4B5FD !important;
    padding: 6px 16px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

html:not(.dark-mode) .glass-pill {
    background: rgba(139, 92, 246, 0.05) !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    color: #6D28D9 !important;
}

.glass-pill:hover {
    background: rgba(139, 92, 246, 0.25) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.3) !important;
}

/* Premium Skeleton Shimmer Loading */
.skeleton-shimmer {
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 200% 100%;
    animation: shimmer-animation 1.5s infinite linear;
    border-radius: 8px;
}

html:not(.dark-mode) .skeleton-shimmer {
    background: linear-gradient(90deg, rgba(0,0,0,0.03) 25%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.03) 75%);
    background-size: 200% 100%;
}

@keyframes shimmer-animation {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Global Premium Loader Overlay */
.cyber-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #070B14;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}

.cyber-loader-circle {
    width: 80px;
    height: 80px;
    border: 3px solid transparent;
    border-top-color: #8B5CF6;
    border-bottom-color: #06B6D4;
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
    position: relative;
}

.cyber-loader-circle::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 3px solid transparent;
    border-top-color: #10B981;
    border-radius: 50%;
    animation: spin-reverse 1s linear infinite;
}

.cyber-loader-text {
    margin-top: 24px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    animation: pulse 2s infinite ease-in-out;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin-reverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* === [BARU] GLASSMORPHISM HEADER & NAV BAR CONTRAST (Maha Patih V2) === */

/* Glassmorphism Header Premium (HANYA Aktif di Mode Gelap) */
html.dark-mode .glass-header-premium {
    position: relative !important;
    z-index: 1030 !important; /* Menjamin di atas rendering stack layout */
    pointer-events: auto !important; /* Menjamin input mouse 100% terdaftar */
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2) !important;
}

/* Memastikan tombol, link, dan teks di header sangat kontras di Mode Gelap */
html.dark-mode .glass-header-premium a,
html.dark-mode .glass-header-premium button,
html.dark-mode .glass-header-premium summary {
    color: #F8FAFC !important; /* Slate super terang */
    pointer-events: auto !important;
    transition: all 0.25s ease !important;
}

html.dark-mode .glass-header-premium svg {
    stroke: #F8FAFC !important;
}

/* Hover effects di Mode Gelap */
html.dark-mode .glass-header-premium a:hover,
html.dark-mode .glass-header-premium button:hover,
html.dark-mode .glass-header-premium summary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

html.dark-mode .glass-header-premium a:hover svg,
html.dark-mode .glass-header-premium button:hover svg {
    stroke: #FFFFFF !important;
}

/* Glassmorphism Dropdowns inside Header (Mode Gelap) */
html.dark-mode .glass-header-premium ul {
    z-index: 1050 !important; /* Berada di atas navbar header */
    background: rgba(19, 27, 46, 0.98) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Teks di dalam dropdown (Mode Gelap) */
html.dark-mode .glass-header-premium ul a,
html.dark-mode .glass-header-premium ul button {
    color: #94A3B8 !important;
    background: transparent !important;
    pointer-events: auto !important;
}

html.dark-mode .glass-header-premium ul a svg,
html.dark-mode .glass-header-premium ul button svg {
    stroke: #94A3B8 !important;
}

/* Hover dropdown links (Mode Gelap) */
html.dark-mode .glass-header-premium ul a:hover,
html.dark-mode .glass-header-premium ul button:hover {
    background: rgba(139, 92, 246, 0.15) !important;
    color: #FFFFFF !important;
}

html.dark-mode .glass-header-premium ul a:hover svg,
html.dark-mode .glass-header-premium ul button:hover svg {
    stroke: #FFFFFF !important;
}

/* ========================================================
   [BARU] GLASSMORPHIC PREMIUM EXTENSION (Maha Patih V2)
   ======================================================== */

/* === 1. Frosted Sidebar Premium === */
html.dark-mode .side-bar {
    background: rgba(8, 13, 26, 0.85) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html:not(.dark-mode) .side-bar {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* === 2. Neon Active State on Sidebar Menu === */
html.dark-mode .side-bar a.tw-bg-gray-200,
html.dark-mode .side-bar div.tw-bg-gray-200 > a {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(6, 182, 212, 0.15)) !important;
    color: #FFFFFF !important;
    border-left: 3px solid #8B5CF6 !important;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.1), inset 0 0 10px rgba(139, 92, 246, 0.05) !important;
    border-radius: 0 8px 8px 0 !important;
}

html.dark-mode .side-bar a.tw-bg-gray-200 svg,
html.dark-mode .side-bar div.tw-bg-gray-200 > a svg {
    color: #8B5CF6 !important;
    filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.5)) !important;
}

/* === 3. Bottom Profile Card === */
.sidebar-profile-card {
    background: rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark-mode .sidebar-profile-card {
    background: rgba(8, 13, 26, 0.5) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.avatar-glow {
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

html.dark-mode .avatar-glow {
    border: 1.5px solid rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.3), 0 0 24px rgba(6, 182, 212, 0.15) !important;
}

.status-dot-glow {
    box-shadow: 0 0 6px #4ade80;
}

.status-text-glow {
    box-shadow: 0 0 8px #22c55e, 0 0 15px #22c55e;
    animation: status-pulse 2s infinite alternate;
}

@keyframes status-pulse {
    0% { opacity: 0.6; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.1); }
}

/* Collapsed profile card state */
.sidebar-collapse .sidebar-profile-card {
    padding: 12px 6px !important;
}

.sidebar-collapse .sidebar-profile-card .profile-info {
    display: none !important;
}

.sidebar-collapse .sidebar-profile-card .profile-card-inner {
    justify-content: center !important;
}

/* === 4. Aurora Background Orbs === */
.aurora-orbs-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

html.dark-mode .aurora-orbs-container {
    display: block;
}

.aurora-orb {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.06;
    mix-blend-mode: screen;
    pointer-events: none;
    animation: aurora-rotate 25s infinite alternate ease-in-out;
    will-change: transform;
}

.aurora-orb-purple {
    background: radial-gradient(circle, #8B5CF6 0%, rgba(139, 92, 246, 0) 70%);
    top: -10%;
    right: 10%;
}

.aurora-orb-cyan {
    background: radial-gradient(circle, #06B6D4 0%, rgba(6, 182, 212, 0) 70%);
    bottom: -10%;
    left: 10%;
    animation-delay: -10s;
}

@keyframes aurora-rotate {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    50% { transform: translate(60px, 40px) scale(1.1) rotate(180deg); }
    100% { transform: translate(-40px, -60px) scale(0.95) rotate(360deg); }
}

/* === 5. Magnetic Border Glow === */
.glass-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: radial-gradient(
        320px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
        var(--magnetic-glow-color, rgba(139, 92, 246, 0.45)),
        transparent 80%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}

html.dark-mode .glass-card-premium.glow-violet { --magnetic-glow-color: rgba(139, 92, 246, 0.6); }
html.dark-mode .glass-card-premium.glow-cyan { --magnetic-glow-color: rgba(6, 182, 212, 0.6); }
html.dark-mode .glass-card-premium.glow-rose { --magnetic-glow-color: rgba(244, 63, 94, 0.6); }
html.dark-mode .glass-card-premium.glow-emerald { --magnetic-glow-color: rgba(16, 185, 129, 0.6); }

html:not(.dark-mode) .glass-card-premium.glow-violet { --magnetic-glow-color: rgba(139, 92, 246, 0.25); }
html:not(.dark-mode) .glass-card-premium.glow-cyan { --magnetic-glow-color: rgba(6, 182, 212, 0.25); }
html:not(.dark-mode) .glass-card-premium.glow-rose { --magnetic-glow-color: rgba(244, 63, 94, 0.25); }
html:not(.dark-mode) .glass-card-premium.glow-emerald { --magnetic-glow-color: rgba(16, 185, 129, 0.25); }

.glass-card-premium:hover::before {
    opacity: 1;
}

/* === 6. Adaptive Greeting Widget Styling === */
.greeting-widget-premium {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

html.dark-mode .greeting-widget-premium {
    background: rgba(19, 27, 46, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
}

.greeting-icon-wrapper {
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.1);
}

html.dark-mode .greeting-icon-wrapper {
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.15) !important;
}

.clock-time-glow {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}

html.dark-mode .clock-time-glow {
    box-shadow: inset 0 0 10px rgba(6, 182, 212, 0.1) !important;
    text-shadow: 0 0 8px rgba(6, 182, 212, 0.5) !important;
}

/* === 7. Contrast & Readability Fixes for Light/Dark Mode === */
html:not(.dark-mode) .side-bar a,
html:not(.dark-mode) .side-bar div {
    color: #334155 !important; /* High contrast Slate 700 */
}

html:not(.dark-mode) .side-bar a:hover {
    color: #0F172A !important; /* Pure slate */
    background: rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark-mode) .sidebar-profile-card p.tw-text-gray-900 {
    color: #0F172A !important;
}

html:not(.dark-mode) .sidebar-profile-card p.tw-text-gray-500 {
    color: #475569 !important;
}

html:not(.dark-mode) .greeting-widget-premium h2 {
    color: #0F172A !important;
}

html:not(.dark-mode) .greeting-widget-premium p {
    color: #475569 !important;
}

html:not(.dark-mode) .clock-time-glow {
    color: #0891B2 !important; /* Darker Cyan for legibility */
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

/* === 8. Glass Chart Container Premium === */
.glass-chart-container-premium {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    min-height: 360px;
    transition: all 0.3s ease;
}

html.dark-mode .glass-chart-container-premium {
    background: rgba(15, 23, 42, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.02), 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
}

/* === 9. Premium Sidebar Icon & Link Overhaul === */
.side-bar svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 1.8 !important;
    color: #64748B !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html.dark-mode .side-bar svg {
    color: #94A3B8 !important;
}

/* Hover style for sidebar links */
.side-bar a:hover svg {
    color: #8B5CF6 !important;
    transform: scale(1.15) rotate(5deg) !important;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.6)) !important;
}

html:not(.dark-mode) .side-bar a:hover svg {
    color: #6D28D9 !important;
    filter: drop-shadow(0 0 6px rgba(109, 40, 217, 0.3)) !important;
}

/* Active sidebar link icon style */
.side-bar a.tw-bg-gray-200 svg,
.side-bar div.tw-bg-gray-200 > a svg {
    color: #8B5CF6 !important;
    transform: scale(1.1) !important;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.7)) !important;
}

html:not(.dark-mode) .side-bar a.tw-bg-gray-200 svg,
html:not(.dark-mode) .side-bar div.tw-bg-gray-200 > a svg {
    color: #6D28D9 !important;
    filter: drop-shadow(0 0 6px rgba(109, 40, 217, 0.4)) !important;
}

/* Uniform elegant padding and margin for sidebar anchors */
.side-bar a {
    gap: 14px !important;
    padding: 11px 16px !important;
    border-radius: 12px !important;
    margin: 4px 10px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Sidebar heading branding style */
.side-bar-heading {
    letter-spacing: 0.05em;
    font-weight: 700 !important;
    transition: color 0.3s ease !important;
}

html.dark-mode .side-bar-heading {
    color: #FFFFFF !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.15) !important;
}

html:not(.dark-mode) .side-bar-heading {
    color: #0F172A !important; /* High contrast Slate pekat untuk Mode Terang */
    text-shadow: none !important;
}

/* === 10. Dashboard Workspace & Sync Overhaul === */
.dashboard-header-premium-wrap {
    background: transparent !important;
}

/* Cosmic space resets for uniform background */
html.dark-mode body,
html.dark-mode main,
html.dark-mode .thetop,
html.dark-mode #scrollable-container,
html.dark-mode .content-wrapper {
    background: #0B0F19 !important; /* Premium deep dark slate */
}

html:not(.dark-mode) body,
html:not(.dark-mode) main,
html:not(.dark-mode) .thetop,
html:not(.dark-mode) #scrollable-container,
html:not(.dark-mode) .content-wrapper {
    background: #F8FAFC !important; /* Premium clean white slate */
}

/* Glass Header Premium Overhaul */
.glass-header-premium {
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03) !important;
}

html:not(.dark-mode) .glass-header-premium {
    background: rgba(255, 255, 255, 0.75) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Sleek glass header components */
.glass-header-premium button,
.glass-header-premium summary,
.glass-header-premium a:not(.tw-dw-btn) {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #E2E8F0 !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.glass-header-premium button:hover,
.glass-header-premium summary:hover,
.glass-header-premium a:not(.tw-dw-btn):hover {
    background: rgba(139, 92, 246, 0.15) !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.25) !important;
}

html:not(.dark-mode) .glass-header-premium button,
html:not(.dark-mode) .glass-header-premium summary,
html:not(.dark-mode) .glass-header-premium a:not(.tw-dw-btn) {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    color: #334155 !important;
}

html:not(.dark-mode) .glass-header-premium button:hover,
html:not(.dark-mode) .glass-header-premium summary:hover,
html:not(.dark-mode) .glass-header-premium a:not(.tw-dw-btn):hover {
    background: rgba(109, 40, 217, 0.06) !important;
    border-color: rgba(109, 40, 217, 0.2) !important;
    color: #1E293B !important;
}

/* Remove default active styling on logo and navbar headers */
.navbar-static-top {
    background: transparent !important;
}

/* === 11. Floating Glass Sidebar & Workspace Overhaul === */
body, html {
    height: 100vh !important;
    overflow: hidden !important;
}

.thetop {
    height: 100vh !important;
    overflow: hidden !important;
    background: #0B0F19 !important; /* Base color for background blending */
}

html:not(.dark-mode) .thetop {
    background: #F8FAFC !important;
}

/* Floating Glass Sidebar Panel */
.side-bar {
    position: relative !important;
    height: calc(100vh - 32px) !important;
    margin: 16px 0 16px 16px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(24px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
    transition: width 0.1s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 50 !important;
    width: var(--sidebar-custom-width, 260px) !important;
}

html:not(.dark-mode) .side-bar {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.03) !important;
}

/* Drag Handle for Resizing Sidebar */
.sidebar-resize-handle {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 6px !important;
    height: 100% !important;
    cursor: col-resize !important;
    z-index: 1000 !important;
    background: transparent !important;
    transition: background 0.3s ease !important;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle.active {
    background: rgba(139, 92, 246, 0.4) !important; /* Elegant violet vertical glow when dragged */
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.6) !important;
}

/* Glass Sidebar Header Logo Area */
.side-bar > a.tw-flex {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-right: none !important;
    height: 60px !important;
}

html:not(.dark-mode) .side-bar > a.tw-flex {
    background: rgba(0, 0, 0, 0.02) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* Floating Workspace integration (Right side) */
main {
    margin: 16px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    height: calc(100vh - 32px) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html.dark-mode main {
    background: rgba(15, 23, 42, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html:not(.dark-mode) main {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* Scrollable container adjustments within the floating main */
#scrollable-container {
    height: calc(100vh - 92px) !important; /* Offset header height */
    border-radius: 0 0 24px 24px !important;
}

/* Fixed gap for responsive views */
@media (max-width: 1024px) {
    main {
        margin: 12px !important;
        height: calc(100vh - 24px) !important;
        border-radius: 16px !important;
    }
    #scrollable-container {
        border-radius: 0 0 16px 16px !important;
    }
}

/* === 12. Cybernetic Neon Header Overhaul === */
.glass-header-premium {
    position: relative !important;
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark-mode) .glass-header-premium {
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid rgba(109, 40, 217, 0.08) !important;
}

/* Dynamic Moving Neon Border at bottom of header */
.glass-header-premium::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(90deg, #8B5CF6, #06B6D4, #F43F5E, #8B5CF6) !important;
    background-size: 300% 100% !important;
    animation: headerGlowBorder 6s linear infinite !important;
    z-index: 100 !important;
}

@keyframes headerGlowBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Header Action Buttons & Links Overhaul - ONLY target action container to prevent breaking toggle buttons */
.glass-header-premium .tw-flex-wrap button,
.glass-header-premium .tw-flex-wrap summary,
.glass-header-premium .tw-flex-wrap a:not(.tw-dw-btn) {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #F1F5F9 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.glass-header-premium .tw-flex-wrap button:hover,
.glass-header-premium .tw-flex-wrap summary:hover,
.glass-header-premium .tw-flex-wrap a:not(.tw-dw-btn):hover {
    background: rgba(139, 92, 246, 0.12) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.25) !important;
}

html:not(.dark-mode) .glass-header-premium .tw-flex-wrap button,
html:not(.dark-mode) .glass-header-premium .tw-flex-wrap summary,
html:not(.dark-mode) .glass-header-premium .tw-flex-wrap a:not(.tw-dw-btn) {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(109, 40, 217, 0.12) !important;
    color: #1E293B !important;
}

html:not(.dark-mode) .glass-header-premium .tw-flex-wrap button:hover,
html:not(.dark-mode) .glass-header-premium .tw-flex-wrap summary:hover,
html:not(.dark-mode) .glass-header-premium .tw-flex-wrap a:not(.tw-dw-btn):hover {
    background: rgba(109, 40, 217, 0.05) !important;
    border-color: rgba(109, 40, 217, 0.35) !important;
    color: #0F172A !important;
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.12) !important;
}

/* Exquisite glowing SVG/Icon elements inside header */
.glass-header-premium svg {
    color: #8B5CF6 !important; /* Default beautiful violet icons */
    filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.4)) !important;
    transition: all 0.3s ease !important;
}

html:not(.dark-mode) .glass-header-premium svg {
    color: #6D28D9 !important;
    filter: none !important;
}

.glass-header-premium button:hover svg,
.glass-header-premium a:hover svg {
    color: #06B6D4 !important; /* Cyber cyan glow on hover */
    filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.7)) !important;
}

/* Specific styling for collapse and mobile toggles on the left to maintain original square size */
.glass-header-premium .side-bar-collapse,
.glass-header-premium .small-view-button {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #F1F5F9 !important;
    padding: 6px !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html:not(.dark-mode) .glass-header-premium .side-bar-collapse,
html:not(.dark-mode) .glass-header-premium .small-view-button {
    background: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    color: #334155 !important;
}

/* === 13. Card Value & Title Truncate Prevention === */
.glass-text-value {
    font-size: 19px !important; /* Premium readable font size */
    font-weight: 700 !important;
    white-space: normal !important; /* Allow normal wrapping if extremely long */
    overflow: visible !important;   /* Never hide content */
    text-overflow: clip !important; /* Disable ellipsis truncation */
    word-break: break-all !important; /* Wrap long numbers naturally */
    line-height: 1.3 !important;
    display: block !important;
}

.glass-text-title {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
    color: #64748B !important; /* Clean soft slate gray */
    white-space: normal !important; /* Allow wrapping */
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
}

html.dark-mode .glass-text-title {
    color: #94A3B8 !important; /* Bright soft slate gray in dark mode */
}

/* Adjust font size on smaller desktop screens to maintain single line elegance where possible */
@media (min-width: 1200px) and (max-width: 1440px) {
    .glass-text-value {
        font-size: 16px !important; /* Slightly smaller to fit large figures perfectly */
    }
}

/* --- TAMBAHAN FITUR BARU: POS Total Payable color fixes in dark mode --- */
/* [BARU] */
html.dark-mode .pos-total .tw-text-black,
html.dark-mode .tw-pos-total .tw-text-black {
    color: #F1F5F9 !important;
}

/* [BARU] */
html.dark-mode .pos-total .tw-text-green-900,
html.dark-mode .tw-pos-total .tw-text-green-900,
html.dark-mode #total_payable.tw-text-green-900 {
    color: #10B981 !important; /* Premium success green */
}