/* Futuristic HUD Dark Mode Theme */
:root {
    --hud-bg: #0a0b1e;
    --hud-panel-bg: rgba(22, 27, 34, 0.7);
    --hud-accent: #00f2ff;
    --hud-accent-glow: rgba(0, 242, 255, 0.5);
    --hud-text: #e6edf3;
    --hud-border: rgba(0, 242, 255, 0.3);
    --hud-glass: blur(10px);
}

.dark-theme body,
.dark-theme html {
    background-color: var(--hud-bg) !important;
    color: var(--hud-text) !important;
    font-family: 'Inter', sans-serif !important;
}

/* Aggressive Text and Icon Color Resets for HUD Mode */
.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4,
.dark-theme h5,
.dark-theme h6,
.dark-theme p,
.dark-theme span,
.dark-theme li,
.dark-theme label,
.dark-theme th,
.dark-theme td,
.dark-theme strong,
.dark-theme b,
.dark-theme i,
.dark-theme th a,
.dark-theme td a,
.dark-theme a {
    color: var(--hud-text) !important;
}

.dark-theme i.fa,
.dark-theme i.fas,
.dark-theme i.far,
.dark-theme i.fal,
.dark-theme i.fab,
.dark-theme i.fa-solid,
.dark-theme i.fa-regular {
    color: var(--hud-text) !important;
}

/* Override Tailwind neutral text colors used heavily in Perfex */
.dark-theme .tw-text-neutral-900,
.dark-theme .tw-text-neutral-800,
.dark-theme .tw-text-neutral-700,
.dark-theme .tw-text-neutral-600,
.dark-theme .tw-text-neutral-500,
.dark-theme .text-dark {
    color: #e2e8f0 !important;
}

/* Force override hidden white backgrounds */
.dark-theme .bg-white,
.dark-theme .tw-bg-white,
.dark-theme .tw-bg-neutral-0,
.dark-theme .tw-bg-neutral-50 {
    background-color: transparent !important;
}

.dark-theme .bg-light,
.dark-theme .tw-bg-neutral-100,
.dark-theme .bg-info-lighter,
.dark-theme .bg-neutral-50,
.dark-theme .tw-bg-neutral-50 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-theme .bg-success-lighter {
    background-color: rgba(74, 222, 128, 0.05) !important;
}

.dark-theme .bg-danger-lighter {
    background-color: rgba(248, 113, 113, 0.05) !important;
}

/* Invoice, Project, and Document specific overrides */
.dark-theme .invoice-html-logo img,
.dark-theme .estimate-html-logo img,
.dark-theme .proposal-html-logo img,
.dark-theme .client-logo img {
    filter: brightness(0) invert(1);
}

.dark-theme .invoice-wrapper,
.dark-theme .project-wrapper,
.dark-theme .proposal-wrapper {
    background: var(--hud-panel-bg) !important;
    border: 1px solid var(--hud-border) !important;
}

.dark-theme .text-muted,
.dark-theme .help-block {
    color: #94a3b8 !important;
}

.dark-theme .text-success {
    color: #4ade80 !important;
}

.dark-theme .text-danger {
    color: #f87171 !important;
}

.dark-theme .text-warning {
    color: #facc15 !important;
}

.dark-theme .text-info {
    color: var(--hud-accent) !important;
}

.dark-theme .label,
.dark-theme .badge {
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.dark-theme #wrapper,
.dark-theme #content {
    background-color: var(--hud-bg) !important;
}

.dark-theme .panel,
.dark-theme .panel-default,
.dark-theme .panel_s {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.dark-theme .panel-body,
.dark-theme .panel-heading,
.dark-theme .panel-footer {
    background-color: var(--hud-panel-bg) !important;
    backdrop-filter: var(--hud-glass) !important;
    -webkit-backdrop-filter: var(--hud-glass) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    color: var(--hud-text) !important;
}

/* When panel is standalone (not inside a widget), give it a border */
.dark-theme .panel_s > .panel-body {
    border: 1px solid var(--hud-border) !important;
    box-shadow: 0 0 5px var(--hud-accent-glow) !important;
}

.dark-theme .panel-heading {
    margin-bottom: 15px !important;
    color: var(--hud-accent) !important;
    font-weight: 600 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* Ensure no override from parent panel-default */
.dark-theme .panel-default>.panel-heading {
    background-color: transparent !important;
    border-color: var(--hud-border) !important;
    color: var(--hud-accent) !important;
}

.dark-theme #side-menu,
.dark-theme #menu,
.dark-theme #header,
.dark-theme .navbar-default,
.dark-theme #setup-menu-wrapper {
    background-color: rgba(10, 11, 30, 0.9) !important;
    border-bottom: 1px solid var(--hud-border) !important;
    border-right: 1px solid var(--hud-border) !important;
}

.dark-theme #setup-menu-wrapper ul li a {
    color: var(--hud-text) !important;
}

.dark-theme #setup-menu-wrapper ul li a:hover,
.dark-theme #setup-menu-wrapper ul li.active a {
    background: rgba(0, 242, 255, 0.1) !important;
    color: var(--hud-accent) !important;
}

/* Explicit overrides for prominent text items */
.dark-theme #invoice-number,
.dark-theme .client-name,
.dark-theme .project-name {
    color: var(--hud-accent) !important;
    text-shadow: 0 0 5px var(--hud-accent-glow);
}

.dark-theme #side-menu li a,
.dark-theme .navbar-nav>li>a {
    color: var(--hud-text) !important;
    transition: all 0.3s ease;
}

.dark-theme #side-menu li a:hover,
.dark-theme #side-menu li.active a,
.dark-theme .navbar-nav>li>a:hover,
.dark-theme .navbar-nav>li.active>a {
    background: rgba(0, 242, 255, 0.1) !important;
    color: var(--hud-accent) !important;
    text-shadow: 0 0 10px var(--hud-accent);
}

.dark-theme .btn-primary {
    background: transparent !important;
    border: 1px solid var(--hud-accent) !important;
    color: var(--hud-accent) !important;
    box-shadow: 0 0 10px var(--hud-accent-glow);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
}

.dark-theme .btn-primary:hover {
    background-color: var(--hud-accent) !important;
    color: #000 !important;
    box-shadow: 0 0 20px var(--hud-accent);
}

.dark-theme .btn-default {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--hud-text) !important;
}

.dark-theme .btn-default:hover {
    border-color: var(--hud-accent) !important;
    color: var(--hud-accent) !important;
}

/* Dashboard Widgets HUD Transformation */
.dark-theme .widget,
.dark-theme .stats-wrapper,
.dark-theme .top_stats_wrapper,
.dark-theme .customer-top-submenu,
.dark-theme .screen-options-area {
    background: var(--hud-panel-bg) !important;
    border: 1px solid var(--hud-border) !important;
    box-shadow: 0 0 5px var(--hud-accent-glow);
    backdrop-filter: var(--hud-glass);
    border-radius: 12px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dark-theme .widget-dragger {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove inner panel borders when inside a widget (prevents double borders) */
.dark-theme .widget .panel_s,
.dark-theme .widget .panel,
.dark-theme .widget .panel-default {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.dark-theme .widget .panel-body,
.dark-theme .widget .panel-heading,
.dark-theme .widget .panel-footer {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
}

.dark-theme .screen-options-title {
    color: var(--hud-accent) !important;
}

.dark-theme .screen-options-btn {
    background: rgba(10, 11, 30, 0.8) !important;
    color: var(--hud-text) !important;
    border: 1px solid var(--hud-border) !important;
    border-top: none !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

.dark-theme .top_stats_wrapper .tw-text-neutral-500,
.dark-theme .top_stats_wrapper .tw-text-neutral-600,
.dark-theme .top_stats_wrapper .text-dark,
.dark-theme .finance-summary .text-muted,
.dark-theme .finance-summary .tw-text-neutral-400,
.dark-theme .finance-summary .tw-text-neutral-500,
.dark-theme .finance-summary .tw-text-neutral-700 {
    color: var(--hud-text) !important;
}

.dark-theme .finance-summary a.text-muted:hover,
.dark-theme .finance-summary a.text-danger,
.dark-theme .finance-summary a.text-warning,
.dark-theme .finance-summary a.text-success {
    /* Keep status colors but make them glowy if desired, or just readable */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

.dark-theme .submenu li a {
    color: var(--hud-text) !important;
}

.dark-theme .submenu li a:hover {
    color: var(--hud-accent) !important;
}

/* User Data Tabs */
.dark-theme .nav-tabs-horizontal>li>a {
    color: var(--hud-text) !important;
    background: transparent !important;
}

.dark-theme .nav-tabs-horizontal>li.active>a,
.dark-theme .nav-tabs-horizontal>li.active>a:hover,
.dark-theme .nav-tabs-horizontal>li.active>a:focus,
.dark-theme .nav-tabs-horizontal>li>a:hover {
    color: var(--hud-accent) !important;
    background-color: rgba(0, 242, 255, 0.1) !important;
    border-bottom: 2px solid var(--hud-accent) !important;
}

/* Table Overrides for HUD */
.dark-theme .table,
.dark-theme .table-responsive table {
    background-color: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.dark-theme .table thead th,
.dark-theme .table-responsive table thead th,
.dark-theme .dt-table thead th,
.dark-theme .dataTable thead th {
    background: rgba(0, 242, 255, 0.15) !important;
    color: var(--hud-accent) !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    border: none !important;
    border-bottom: 2px solid var(--hud-accent) !important;
    background-clip: padding-box !important;
    text-shadow: 0 0 5px var(--hud-accent-glow);
}

.dark-theme .table tbody td,
.dark-theme .table tbody th,
.dark-theme .table tfoot td,
.dark-theme .table tfoot th {
    background-color: transparent !important;
    border-color: rgba(0, 242, 255, 0.1) !important;
    color: var(--hud-text) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* Specific Table footer overrides (Summary, Gaji, etc) */
.dark-theme .table tfoot tr.info td,
.dark-theme .table tfoot tr.bg-light td,
.dark-theme .table tfoot tr td {
    background-color: rgba(10, 11, 30, 0.8) !important;
    border-top: 2px solid var(--hud-accent) !important;
}

/* Table striped override for dark mode */
.dark-theme .table-striped>tbody>tr:nth-of-type(odd),
.dark-theme .table-striped>tbody>tr:nth-of-type(odd)>td,
.dark-theme .table-striped>tbody>tr:nth-of-type(odd)>th {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.dark-theme .table-striped>tbody>tr:nth-of-type(even) {
    background-color: transparent !important;
}

/* Striped rows can sometimes have background in Bootstrap 4/5 differently */
.dark-theme .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Row states for dark mode */
.dark-theme .table>tbody>tr.info,
.dark-theme .table>tbody>tr.info>td,
.dark-theme .table>tfoot>tr.info,
.dark-theme .table>tfoot>tr.info>td,
.dark-theme .table>tbody>tr.info:hover,
.dark-theme .table>tbody>tr.info:hover>td {
    background-color: rgba(0, 242, 255, 0.15) !important;
    color: var(--hud-accent) !important;
}

.dark-theme .table>tbody>tr.success,
.dark-theme .table>tbody>tr.success>td,
.dark-theme .table>tbody>tr.success:hover,
.dark-theme .table>tbody>tr.success:hover>td {
    background-color: rgba(74, 222, 128, 0.15) !important;
    color: #4ade80 !important;
}

.dark-theme .table>tbody>tr.danger,
.dark-theme .table>tbody>tr.danger>td,
.dark-theme .table>tbody>tr.danger:hover,
.dark-theme .table>tbody>tr.danger:hover>td {
    background-color: rgba(248, 113, 113, 0.15) !important;
    color: #f87171 !important;
}

.dark-theme .table>tbody>tr.warning,
.dark-theme .table>tbody>tr.warning>td,
.dark-theme .table>tbody>tr.warning:hover,
.dark-theme .table>tbody>tr.warning:hover>td {
    background-color: rgba(250, 204, 21, 0.15) !important;
    color: #facc15 !important;
}

.dark-theme .table-hover>tbody>tr:hover,
.dark-theme .table-hover>tbody>tr:hover>td {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Dashboard specific row overrides */
.dark-theme .main-client-row,
.dark-theme tr.main-client-row,
.dark-theme .main-client-row td {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.dark-theme .bidang-row,
.dark-theme tr.bidang-row,
.dark-theme .bidang-row td {
    background-color: transparent !important;
}

/* Fix double borders on widgets and general tables */
.dark-theme .widget .table,
.dark-theme .panel_s .table {
    border: none !important;
}

.dark-theme .table-bordered {
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.dark-theme .table-bordered>tbody>tr>td,
.dark-theme .table-bordered>tbody>tr>th,
.dark-theme .table-bordered>tfoot>tr>td,
.dark-theme .table-bordered>tfoot>tr>th,
.dark-theme .table-bordered>thead>tr>td,
.dark-theme .table-bordered>thead>tr>th {
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Fix summary rows (like in Expenses) that use Tailwind light backgrounds */
.dark-theme tr.tw-bg-neutral-50,
.dark-theme td.tw-bg-neutral-50,
.dark-theme th.tw-bg-neutral-50,
.dark-theme .bg-info-lighter,
.dark-theme tr.info,
.dark-theme td.info {
    background-color: rgba(10, 11, 30, 0.8) !important;
    color: var(--hud-accent) !important;
}

.dark-theme .panel-header-bg {
    background: linear-gradient(90deg, #0a0b1e 0%, #161b22 100%) !important;
    border-bottom: 1px solid var(--hud-border) !important;
    color: var(--hud-accent) !important;
}

.dark-theme tr.tw-bg-neutral-50 td.text-info,
.dark-theme tr.tw-bg-neutral-50 td.bold {
    color: var(--hud-accent) !important;
}

/* Modals HUD Transformation */
.dark-theme .modal-content {
    background: var(--hud-panel-bg) !important;
    border: 1px solid var(--hud-border) !important;
    box-shadow: 0 0 15px var(--hud-accent-glow);
    backdrop-filter: blur(20px);
}

.dark-theme .modal-header {
    border-bottom: 1px solid var(--hud-border) !important;
    background: rgba(10, 11, 30, 0.5) !important;
}

.dark-theme .modal-footer {
    border-top: 1px solid var(--hud-border) !important;
    background: rgba(10, 11, 30, 0.5) !important;
}

.dark-theme .modal-title,
.dark-theme .close {
    color: var(--hud-text) !important;
    text-shadow: 0 0 5px var(--hud-accent-glow);
}

.dark-theme .close:hover {
    color: var(--hud-accent) !important;
}

/* Form Controls HUD Transformation */
.dark-theme .form-control,
.dark-theme input,
.dark-theme textarea,
.dark-theme select {
    background-color: rgba(10, 11, 30, 0.6) !important;
    border: 1px solid var(--hud-border) !important;
    color: var(--hud-text) !important;
}

.dark-theme .form-control:focus,
.dark-theme input:focus,
.dark-theme textarea:focus,
.dark-theme select:focus {
    box-shadow: 0 0 8px var(--hud-accent-glow) !important;
    border-color: var(--hud-accent) !important;
}

/* Bootstrap Select/Dropdown Overrides */
.dark-theme .bootstrap-select .dropdown-toggle {
    background-color: rgba(10, 11, 30, 0.6) !important;
    border: 1px solid var(--hud-border) !important;
    color: var(--hud-text) !important;
}

.dark-theme .bootstrap-select .dropdown-menu {
    background-color: var(--hud-panel-bg) !important;
    border: 1px solid var(--hud-border) !important;
}

.dark-theme .bootstrap-select .dropdown-menu li a {
    color: var(--hud-text) !important;
}

.dark-theme .bootstrap-select .dropdown-menu li a:hover,
.dark-theme .bootstrap-select .dropdown-menu li.selected a {
    background-color: rgba(0, 242, 255, 0.1) !important;
    color: var(--hud-accent) !important;
}

/* General Dropdown Menus in HUD Mode triggers setup setup triggers setup */
.dark-theme .dropdown-menu {
    background-color: #0d1117 !important; /* Standard dark panel item setup triggers setup triggers setup setup */
    backdrop-filter: var(--hud-glass) !important;
    border: 1px solid var(--hud-border) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7) !important;
    border-radius: 8px !important;
}

.dark-theme .dropdown-menu li a {
    color: var(--hud-text) !important;
    padding: 8px 16px !important;
}

.dark-theme .dropdown-menu li a:hover {
    background-color: rgba(0, 242, 255, 0.1) !important;
    color: var(--hud-accent) !important;
}

.dark-theme .dropdown-menu li a span,
.dark-theme .dropdown-menu li a span.text {
    color: var(--hud-text) !important;
}

.dark-theme .dropdown-menu li a:hover span,
.dark-theme .dropdown-menu li a:hover span.text {
    color: var(--hud-accent) !important;
}

/* Sidebar profile translucence fixes triggers setup triggers setup setup triggers setup */
.dark-theme .tw-bg-white\/20,
.dark-theme .tw-bg-white\/10 {
    background-color: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(0, 242, 255, 0.1) !important;
}

/* Nav Tabs */
.dark-theme .nav-tabs {
    border-bottom: 1px solid var(--hud-border) !important;
}

.dark-theme .nav-tabs>li>a {
    color: #94a3b8 !important;
}

.dark-theme .nav-tabs>li>a:hover {
    color: var(--hud-accent) !important;
    background: rgba(0, 242, 255, 0.05) !important;
    border-color: transparent !important;
}

.dark-theme .nav-tabs>li.active>a,
.dark-theme .nav-tabs>li.active>a:hover,
.dark-theme .nav-tabs>li.active>a:focus {
    color: var(--hud-text) !important;
    background-color: rgba(0, 242, 255, 0.1) !important;
    border: 1px solid var(--hud-border) !important;
    border-bottom-color: transparent !important;
}

.dark-theme .alert-info,
.dark-theme .alert-success,
.dark-theme .alert-danger,
.dark-theme .alert-warning {
    background: rgba(10, 11, 30, 0.8) !important;
    border: 1px solid var(--hud-border) !important;
    color: var(--hud-text) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.dark-theme .alert-info { border-color: var(--hud-accent) !important; color: var(--hud-accent) !important; }
.dark-theme .alert-success { border-color: #4ade80 !important; color: #4ade80 !important; }
.dark-theme .alert-danger { border-color: #f87171 !important; color: #f87171 !important; }
.dark-theme .alert-warning { border-color: #facc15 !important; color: #facc15 !important; }

.dark-theme footer {
    background: rgba(10, 11, 30, 0.9) !important;
    border-top: 1px solid var(--hud-border) !important;
    color: var(--hud-text) !important;
}

/* Scrollbar HUD Style */
.dark-theme ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark-theme ::-webkit-scrollbar-track {
    background: var(--hud-bg);
}

.dark-theme ::-webkit-scrollbar-thumb {
    background: var(--hud-border);
    border-radius: 4px;
}


/* Hide/Show toggle icons */
.sun-icon.hide,
.moon-icon.hide {
    display: none !important;
}

/* TinyMCE Dark Mode Fixes */
.dark-theme .tox-tinymce {
    border: 1px solid var(--hud-border) !important;
    background-color: rgba(10, 11, 30, 0.8) !important;
}

.dark-theme .tox .tox-edit-area__iframe {
    background-color: #fff !important;
    /* Keep white for better readability of content being edited */
}

/* If user prefers dark background in editor:
.dark-theme .tox .tox-edit-area__iframe {
    background-color: var(--hud-bg) !important;
}
*/

.dark-theme .tox .tox-toolbar,
.dark-theme .tox .tox-toolbar__primary,
.dark-theme .tox .tox-toolbar__overflow {
    background-color: rgba(10, 11, 30, 0.9) !important;
    border-bottom: 1px solid var(--hud-border) !important;
}

.dark-theme .tox .tox-statusbar {
    background-color: rgba(10, 11, 30, 0.9) !important;
    border-top: 1px solid var(--hud-border) !important;
    color: var(--hud-text) !important;
}

.dark-theme .tox .tox-btn--enabled,
.dark-theme .tox .tox-tbtn:hover {
    background-color: rgba(0, 242, 255, 0.1) !important;
}

.dark-theme .tox .tox-tbtn svg {
    fill: var(--hud-text) !important;
}

/* Fix for "Tabel Kotak Kirim" (Responsive tables or specific panel regions) */
.dark-theme .table-responsive {
    background: transparent !important;
    border: none !important;
}

.dark-theme .dataTables_wrapper .dataTables_length,
.dark-theme .dataTables_wrapper .dataTables_filter,
.dark-theme .dataTables_wrapper .dataTables_info,
.dark-theme .dataTables_wrapper .dataTables_processing,
.dark-theme .dataTables_wrapper .dataTables_paginate {
    color: var(--hud-text) !important;
}

.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: rgba(10, 11, 30, 0.6) !important;
    border: 1px solid var(--hud-border) !important;
    color: var(--hud-text) !important;
    border-radius: 4px !important;
    margin: 0 2px !important;
    transition: all 0.3s ease;
}

.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(0, 242, 255, 0.1) !important;
    border-color: var(--hud-accent) !important;
    color: var(--hud-accent) !important;
    box-shadow: 0 0 8px var(--hud-accent-glow) !important;
}

.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.active,
.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--hud-accent) !important;
    color: #000 !important;
    border-color: var(--hud-accent) !important;
    box-shadow: 0 0 10px var(--hud-accent) !important;
}

.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* DataTables Sorting Icons Fix for Dark Background */
.dark-theme table.dataTable thead .sorting:before,
.dark-theme table.dataTable thead .sorting_asc:before,
.dark-theme table.dataTable thead .sorting_desc:before,
.dark-theme table.dataTable thead .sorting_asc_disabled:before,
.dark-theme table.dataTable thead .sorting_desc_disabled:before,
.dark-theme table.dataTable thead .sorting:after,
.dark-theme table.dataTable thead .sorting_asc:after,
.dark-theme table.dataTable thead .sorting_desc:after,
.dark-theme table.dataTable thead .sorting_asc_disabled:after,
.dark-theme table.dataTable thead .sorting_desc_disabled:after {
    filter: invert(1) brightness(1.5);
    opacity: 0.5;
}

/* FixedHeader Cyan Line */
.dark-theme .DTFC_FixedHeader {
    background-color: var(--hud-bg) !important;
}

/* Bootstrap style pagination support */
.dark-theme .pagination>li>a,
.dark-theme .pagination>li>span {
    background-color: rgba(10, 11, 30, 0.6) !important;
    border-color: var(--hud-border) !important;
    color: var(--hud-text) !important;
}

.dark-theme .pagination>li>a:hover,
.dark-theme .pagination>li>span:hover {
    background-color: rgba(0, 242, 255, 0.1) !important;
    border-color: var(--hud-accent) !important;
    color: var(--hud-accent) !important;
}

.dark-theme .pagination>.active>a,
.dark-theme .pagination>.active>span {
    background-color: var(--hud-accent) !important;
    border-color: var(--hud-accent) !important;
    color: #000 !important;
}

/* =====================================================
   DASHBOARD SPECIFIC DARK MODE FIXES
   ===================================================== */

/* Fix HR dividers inside finance summary (white line) */
.dark-theme hr,
.dark-theme .finance-summary hr {
    border-color: var(--hud-border) !important;
    border-top-color: var(--hud-border) !important;
}

/* Fix invoices total inline section (white background leak) */
.dark-theme .invoices-total-inline,
.dark-theme #invoices_total {
    background-color: transparent !important;
    color: var(--hud-text) !important;
}

.dark-theme .invoices-total-inline .col-md-4,
.dark-theme .invoices-total-inline .invoice-total-column {
    background-color: rgba(10, 11, 30, 0.4) !important;
    border: 1px solid var(--hud-border) !important;
    border-radius: 8px !important;
    color: var(--hud-text) !important;
}

/* User Data widget tabs fix */
.dark-theme .user_data .nav-tabs,
.dark-theme .widget .nav-tabs {
    border-bottom: 1px solid var(--hud-border) !important;
    background: transparent !important;
}

.dark-theme .user_data .nav-tabs > li > a,
.dark-theme .widget .nav-tabs > li > a {
    background: transparent !important;
    color: #94a3b8 !important;
    border: none !important;
}

.dark-theme .user_data .nav-tabs > li.active > a,
.dark-theme .widget .nav-tabs > li.active > a,
.dark-theme .user_data .nav-tabs > li > a:hover,
.dark-theme .widget .nav-tabs > li > a:hover {
    color: var(--hud-accent) !important;
    background: rgba(0, 242, 255, 0.05) !important;
    border: none !important;
    border-bottom: 2px solid var(--hud-accent) !important;
}

/* Fix tab content area background */
.dark-theme .tab-content {
    background: transparent !important;
}

/* Fix Tailwind border classes leaking bright borders */
.dark-theme .tw-border,
.dark-theme .tw-border-solid,
.dark-theme [class*="tw-border-neutral"] {
    border-color: var(--hud-border) !important;
}

.dark-theme .tw-border-neutral-300,
.dark-theme .tw-border-neutral-200,
.dark-theme .tw-border-neutral-100 {
    border-color: rgba(0, 242, 255, 0.15) !important;
}

/* Fix Tailwind background classes that create bright panels */
.dark-theme .tw-bg-white\/20 {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

.dark-theme .tw-bg-neutral-100 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Fix progress bar track inside dark mode */
.dark-theme .progress {
    background-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

/* Fix white background on .well elements */
.dark-theme .well {
    background-color: rgba(10, 11, 30, 0.4) !important;
    border: 1px solid var(--hud-border) !important;
    color: var(--hud-text) !important;
    box-shadow: none !important;
}

/* Fix Perfex list-group items */
.dark-theme .list-group-item {
    background-color: transparent !important;
    border-color: var(--hud-border) !important;
    color: var(--hud-text) !important;
}

.dark-theme .list-group-item:hover {
    background-color: rgba(0, 242, 255, 0.05) !important;
}

/* Fix calendar widget year label and text */
.dark-theme .fc,
.dark-theme .fc-view,
.dark-theme .fc-view-container {
    background: transparent !important;
    color: var(--hud-text) !important;
}

/* Fix the search bar in header for dark mode */
.dark-theme #search_input {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: transparent !important;
    color: var(--hud-text) !important;
}

.dark-theme #search_input::placeholder {
    color: #94a3b8 !important;
}

/* =====================================================
   ADDITIONAL DARK THEME WORKSPACE FIXES (Freelancer Page)
   ===================================================== */

/* 1. Dark Mode overrides for horizontal scrollable full width tabs in panels */
.dark-theme .panel-full-width-tabs .nav,
.dark-theme .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal,
.dark-theme .panel-full-width-tabs .nav li a,
.dark-theme .panel-full-width-tabs.horizontal-scrollable-tabs .scroller {
    background-color: rgba(16, 20, 35, 0.95) !important;
    border-color: rgba(0, 242, 255, 0.15) !important;
    color: var(--hud-text) !important;
}

.dark-theme .panel-full-width-tabs .nav li.active a {
    background-color: rgba(0, 242, 255, 0.15) !important;
    color: var(--hud-accent) !important;
    border-bottom: 2px solid var(--hud-accent) !important;
}

.dark-theme .panel-full-width-tabs .nav li a:hover {
    background-color: rgba(0, 242, 255, 0.08) !important;
    color: var(--hud-accent) !important;
}

.dark-theme .horizontal-scrollable-tabs .scroller i {
    color: var(--hud-text) !important;
}

/* 2. Date picker Input Group Addon (Calendar button) */
.dark-theme .input-group-addon {
    background-color: rgba(16, 20, 35, 0.95) !important;
    border-color: var(--hud-border) !important;
    color: var(--hud-text) !important;
}

/* 3. TinyMCE 5 Dark Theme Specific UI Overrides */
.dark-theme .tox-tinymce {
    background-color: rgba(16, 20, 35, 0.95) !important;
    border: 1px solid var(--hud-border) !important;
}

.dark-theme .tox .tox-menubar,
.dark-theme .tox .tox-toolbar,
.dark-theme .tox .tox-toolbar__primary,
.dark-theme .tox .tox-toolbar__overflow,
.dark-theme .tox .tox-statusbar {
    background-color: rgba(16, 20, 35, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Menubar buttons & text */
.dark-theme .tox .tox-menubar button.tox-mbtn,
.dark-theme .tox .tox-menubar button.tox-mbtn span,
.dark-theme .tox .tox-mbtn {
    background-color: transparent !important;
    color: var(--hud-text) !important;
}

.dark-theme .tox .tox-mbtn:hover,
.dark-theme .tox .tox-mbtn--active,
.dark-theme .tox .tox-menubar button.tox-mbtn:hover,
.dark-theme .tox .tox-menubar button.tox-mbtn--active {
    background-color: rgba(0, 242, 255, 0.1) !important;
    color: var(--hud-accent) !important;
}

.dark-theme .tox .tox-menubar button.tox-mbtn:hover span,
.dark-theme .tox .tox-menubar button.tox-mbtn--active span {
    color: var(--hud-accent) !important;
}

/* Toolbar buttons & select fields */
.dark-theme .tox .tox-tbtn,
.dark-theme .tox .tox-tbtn--select {
    background-color: rgba(10, 11, 30, 0.4) !important;
    color: var(--hud-text) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.dark-theme .tox .tox-tbtn:hover,
.dark-theme .tox .tox-tbtn--select:hover {
    background-color: rgba(0, 242, 255, 0.1) !important;
    border-color: var(--hud-accent) !important;
    color: var(--hud-accent) !important;
}

.dark-theme .tox .tox-tbtn svg {
    fill: var(--hud-text) !important;
}

.dark-theme .tox .tox-tbtn:hover svg {
    fill: var(--hud-accent) !important;
}

/* Dropdown selections / listbox labels */
.dark-theme .tox .tox-tbtn__select-label {
    color: var(--hud-text) !important;
}

.dark-theme .tox .tox-tbtn:hover .tox-tbtn__select-label {
    color: var(--hud-accent) !important;
}

/* Popup menus / dropdown lists */
.dark-theme .tox .tox-menu,
.dark-theme .tox .tox-collection {
    background-color: #111424 !important;
    border: 1px solid var(--hud-border) !important;
}

.dark-theme .tox .tox-collection__item {
    color: var(--hud-text) !important;
}

.dark-theme .tox .tox-collection__item:hover,
.dark-theme .tox .tox-collection__item--active {
    background-color: rgba(0, 242, 255, 0.1) !important;
    color: var(--hud-accent) !important;
}

.dark-theme .tox .tox-collection__item svg {
    fill: var(--hud-text) !important;
}

.dark-theme .tox .tox-collection__item:hover svg,
.dark-theme .tox .tox-collection__item--active svg {
    fill: var(--hud-accent) !important;
}

.dark-theme .tox .tox-collection__item-label {
    color: var(--hud-text) !important;
}

.dark-theme .tox .tox-collection__item:hover .tox-collection__item-label,
.dark-theme .tox .tox-collection__item--active .tox-collection__item-label {
    color: var(--hud-accent) !important;
}

/* TinyMCE edit area canvas background - invert the white iframe in dark mode */
.dark-theme .tox-edit-area__iframe {
    filter: invert(0.9) hue-rotate(180deg) !important;
    background-color: #fff !important; /* Base white so inversion becomes dark navy */
}