/**
 * Dark mode component / shell overrides (ERP)
 * POS lockscreen is handled separately in pos-forms.css / pos-premium.css
 */

/* —— Shell —— */
[data-theme="dark"] body:not(.lockscreen),
[data-theme="dark"] body:not(.lockscreen).tw-text-gray-900,
[data-theme="dark"] body:not(.lockscreen).tw-bg-gray-100 {
    background-color: var(--background) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] body:not(.lockscreen) .tw-bg-white,
[data-theme="dark"] body:not(.lockscreen) .tw-bg-gray-50,
[data-theme="dark"] body:not(.lockscreen) .tw-bg-gray-100,
[data-theme="dark"] body:not(.lockscreen) .tw-bg-slate-50,
[data-theme="dark"] body:not(.lockscreen) .tw-bg-slate-100,
[data-theme="dark"] body:not(.lockscreen) main.tw-bg-gray-100,
[data-theme="dark"] body:not(.lockscreen) #scrollable-container {
    background-color: var(--background) !important;
    color: var(--text-primary);
}

/* Bootstrap / AdminLTE white surfaces → token surfaces */
[data-theme="dark"] body:not(.lockscreen) .bg-white,
[data-theme="dark"] body:not(.lockscreen) .well,
[data-theme="dark"] body:not(.lockscreen) .panel,
[data-theme="dark"] body:not(.lockscreen) .panel-body,
[data-theme="dark"] body:not(.lockscreen) .panel-heading,
[data-theme="dark"] body:not(.lockscreen) .panel-footer,
[data-theme="dark"] body:not(.lockscreen) .thumbnail,
[data-theme="dark"] body:not(.lockscreen) .list-group-item,
[data-theme="dark"] body:not(.lockscreen) .callout,
[data-theme="dark"] body:not(.lockscreen) .info-box,
[data-theme="dark"] body:not(.lockscreen) .info-box-content,
[data-theme="dark"] body:not(.lockscreen) .small-box,
[data-theme="dark"] body:not(.lockscreen) .content-wrapper,
[data-theme="dark"] body:not(.lockscreen) .wrapper {
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] body:not(.lockscreen) aside.side-bar {
    border-inline-end-color: var(--sidebar-glass-border, var(--border));
}

[data-theme="dark"] body:not(.lockscreen) #side-bar a,
[data-theme="dark"] body:not(.lockscreen) aside.side-bar a {
    color: var(--text-secondary);
}

/* —— Cards / boxes / modals —— */
[data-theme="dark"] body:not(.lockscreen) .box,
[data-theme="dark"] body:not(.lockscreen) .box-body,
[data-theme="dark"] body:not(.lockscreen) .box-header,
[data-theme="dark"] body:not(.lockscreen) .modal-content,
[data-theme="dark"] body:not(.lockscreen) .modal-header,
[data-theme="dark"] body:not(.lockscreen) .modal-body,
[data-theme="dark"] body:not(.lockscreen) .modal-footer,
[data-theme="dark"] body:not(.lockscreen) .dataTables_wrapper,
[data-theme="dark"] body:not(.lockscreen) .nav-tabs-custom,
[data-theme="dark"] body:not(.lockscreen) .nav-tabs-custom > .tab-content,
[data-theme="dark"] body:not(.lockscreen) .tab-content,
[data-theme="dark"] body:not(.lockscreen) .card,
[data-theme="dark"] body:not(.lockscreen) .card-body,
[data-theme="dark"] body:not(.lockscreen) .card-header {
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] body:not(.lockscreen) .box-footer,
[data-theme="dark"] body:not(.lockscreen) .nav-tabs-custom > .nav-tabs,
[data-theme="dark"] body:not(.lockscreen) .nav-tabs {
    background-color: var(--surface-secondary) !important;
    border-color: var(--border) !important;
}

/* —— Tables —— */
[data-theme="dark"] body:not(.lockscreen) .table > thead > tr > th,
[data-theme="dark"] body:not(.lockscreen) table.dataTable thead th,
[data-theme="dark"] body:not(.lockscreen) .table > thead > tr > td {
    background: var(--surface-secondary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] body:not(.lockscreen) .table > tbody > tr > td,
[data-theme="dark"] body:not(.lockscreen) .table > tbody > tr > th,
[data-theme="dark"] body:not(.lockscreen) .table > tfoot > tr > td,
[data-theme="dark"] body:not(.lockscreen) table.dataTable tbody td,
[data-theme="dark"] body:not(.lockscreen) .table-striped > tbody > tr:nth-of-type(odd),
[data-theme="dark"] body:not(.lockscreen) .table-striped > tbody > tr:nth-of-type(odd) > td,
[data-theme="dark"] body:not(.lockscreen) .table-hover > tbody > tr:hover > td {
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] body:not(.lockscreen) .table-striped > tbody > tr:nth-of-type(even),
[data-theme="dark"] body:not(.lockscreen) .table-striped > tbody > tr:nth-of-type(even) > td {
    background-color: var(--surface-secondary) !important;
    color: var(--text-primary) !important;
}

/* —— Forms / inputs / Select2 —— */
[data-theme="dark"] body:not(.lockscreen) .form-control,
[data-theme="dark"] body:not(.lockscreen) input.form-control,
[data-theme="dark"] body:not(.lockscreen) textarea.form-control,
[data-theme="dark"] body:not(.lockscreen) select.form-control,
[data-theme="dark"] body:not(.lockscreen) input[type="text"],
[data-theme="dark"] body:not(.lockscreen) input[type="number"],
[data-theme="dark"] body:not(.lockscreen) input[type="email"],
[data-theme="dark"] body:not(.lockscreen) input[type="password"],
[data-theme="dark"] body:not(.lockscreen) input[type="search"],
[data-theme="dark"] body:not(.lockscreen) input[type="tel"],
[data-theme="dark"] body:not(.lockscreen) input[type="url"],
[data-theme="dark"] body:not(.lockscreen) input[type="date"],
[data-theme="dark"] body:not(.lockscreen) input[type="datetime-local"],
[data-theme="dark"] body:not(.lockscreen) input[type="time"],
[data-theme="dark"] body:not(.lockscreen) textarea,
[data-theme="dark"] body:not(.lockscreen) select,
[data-theme="dark"] body:not(.lockscreen) .select2-container--default .select2-selection--single,
[data-theme="dark"] body:not(.lockscreen) .select2-container--default .select2-selection--multiple,
[data-theme="dark"] body:not(.lockscreen) .select2-dropdown,
[data-theme="dark"] body:not(.lockscreen) .select2-container--default .select2-search--dropdown .select2-search__field,
[data-theme="dark"] body:not(.lockscreen) .select2-container--default .select2-search--inline .select2-search__field {
    background-color: var(--input-bg, var(--surface-secondary)) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] body:not(.lockscreen) .form-control::placeholder,
[data-theme="dark"] body:not(.lockscreen) input::placeholder,
[data-theme="dark"] body:not(.lockscreen) textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
}

[data-theme="dark"] body:not(.lockscreen) .form-control:hover:not(:disabled):not([readonly]),
[data-theme="dark"] body:not(.lockscreen) .select2-container--default .select2-selection--single:hover {
    background-color: var(--input-bg-hover, var(--surface-secondary)) !important;
}

[data-theme="dark"] body:not(.lockscreen) .form-control:focus,
[data-theme="dark"] body:not(.lockscreen) .select2-container--default.select2-container--focus .select2-selection--single,
[data-theme="dark"] body:not(.lockscreen) .select2-container--default.select2-container--open .select2-selection--single {
    background-color: var(--surface-secondary) !important;
    border-color: var(--primary, #3b82f6) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] body:not(.lockscreen) .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] body:not(.lockscreen) .select2-container--default .select2-selection--multiple .select2-selection__rendered,
[data-theme="dark"] body:not(.lockscreen) .select2-container--default .select2-results__option,
[data-theme="dark"] body:not(.lockscreen) .select2-results__option {
    color: var(--text-primary) !important;
}

[data-theme="dark"] body:not(.lockscreen) .select2-container--default .select2-selection--single .select2-selection__placeholder,
[data-theme="dark"] body:not(.lockscreen) .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--text-muted) !important;
}

[data-theme="dark"] body:not(.lockscreen) .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-theme="dark"] body:not(.lockscreen) .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: color-mix(in srgb, var(--primary, #3b82f6) 28%, var(--surface-secondary)) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] body:not(.lockscreen) .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-muted) transparent transparent transparent !important;
}

[data-theme="dark"] body:not(.lockscreen) .input-group-addon,
[data-theme="dark"] body:not(.lockscreen) .input-group-text,
[data-theme="dark"] body:not(.lockscreen) .input-group-btn .btn {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] body:not(.lockscreen) label,
[data-theme="dark"] body:not(.lockscreen) .control-label,
[data-theme="dark"] body:not(.lockscreen) .form-group > label {
    color: var(--label-color, var(--text-muted)) !important;
}

[data-theme="dark"] body:not(.lockscreen) .checkbox label,
[data-theme="dark"] body:not(.lockscreen) .radio label {
    color: var(--text-secondary) !important;
}

/* —— Pickers / uploads —— */
[data-theme="dark"] body:not(.lockscreen) .datepicker,
[data-theme="dark"] body:not(.lockscreen) .datepicker table tr td,
[data-theme="dark"] body:not(.lockscreen) .datepicker table tr th,
[data-theme="dark"] body:not(.lockscreen) .bootstrap-datetimepicker-widget,
[data-theme="dark"] body:not(.lockscreen) .dropzone,
[data-theme="dark"] body:not(.lockscreen) .file-input .file-preview,
[data-theme="dark"] body:not(.lockscreen) .file-caption-main,
[data-theme="dark"] body:not(.lockscreen) .kv-fileinput-caption {
    background: var(--surface-elevated) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] body:not(.lockscreen) .dropzone:hover,
[data-theme="dark"] body:not(.lockscreen) .dropzone.dz-drag-hover {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface)) !important;
}

/* —— Dropdowns / menus —— */
[data-theme="dark"] body:not(.lockscreen) .dropdown-menu,
[data-theme="dark"] body:not(.lockscreen) .tw-dw-dropdown-content,
[data-theme="dark"] .ds-header details ul {
    background-color: var(--surface-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] body:not(.lockscreen) .dropdown-menu > li > a,
[data-theme="dark"] body:not(.lockscreen) .dropdown-item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] body:not(.lockscreen) .dropdown-menu > li > a:hover,
[data-theme="dark"] body:not(.lockscreen) .dropdown-item:hover {
    background-color: var(--surface-secondary) !important;
    color: var(--text-primary) !important;
}

/* —— Typography utilities that stay “light-theme dark ink” —— */
[data-theme="dark"] body:not(.lockscreen) .tw-text-gray-900,
[data-theme="dark"] body:not(.lockscreen) .tw-text-gray-800,
[data-theme="dark"] body:not(.lockscreen) .tw-text-slate-900,
[data-theme="dark"] body:not(.lockscreen) .tw-text-slate-800,
[data-theme="dark"] body:not(.lockscreen) .tw-text-black,
[data-theme="dark"] body:not(.lockscreen) .text-black,
[data-theme="dark"] body:not(.lockscreen) .text-dark {
    color: var(--text-primary) !important;
}

[data-theme="dark"] body:not(.lockscreen) .tw-text-gray-700,
[data-theme="dark"] body:not(.lockscreen) .tw-text-gray-600,
[data-theme="dark"] body:not(.lockscreen) .tw-text-slate-700,
[data-theme="dark"] body:not(.lockscreen) .tw-text-slate-600 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] body:not(.lockscreen) .tw-text-gray-500,
[data-theme="dark"] body:not(.lockscreen) .tw-text-gray-400,
[data-theme="dark"] body:not(.lockscreen) .tw-text-slate-500,
[data-theme="dark"] body:not(.lockscreen) .content-header h1,
[data-theme="dark"] body:not(.lockscreen) .box-title,
[data-theme="dark"] body:not(.lockscreen) h1,
[data-theme="dark"] body:not(.lockscreen) h2,
[data-theme="dark"] body:not(.lockscreen) h3,
[data-theme="dark"] body:not(.lockscreen) h4,
[data-theme="dark"] body:not(.lockscreen) h5,
[data-theme="dark"] body:not(.lockscreen) h6,
[data-theme="dark"] body:not(.lockscreen) p,
[data-theme="dark"] body:not(.lockscreen) .page-header {
    color: var(--text-primary);
}

[data-theme="dark"] body:not(.lockscreen) .text-muted,
[data-theme="dark"] body:not(.lockscreen) .help-block,
[data-theme="dark"] body:not(.lockscreen) small,
[data-theme="dark"] body:not(.lockscreen) .small {
    color: var(--text-muted) !important;
}

/* —— Buttons —— */
[data-theme="dark"] body:not(.lockscreen) .btn-default,
[data-theme="dark"] body:not(.lockscreen) .btn-secondary,
[data-theme="dark"] body:not(.lockscreen) .tw-dw-btn-outline,
[data-theme="dark"] body:not(.lockscreen) .btn.bg-white,
[data-theme="dark"] body:not(.lockscreen) .tw-dw-btn.tw-bg-white {
    background: var(--surface-secondary) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] body:not(.lockscreen) .nav-tabs-custom > .nav-tabs > li.active > a,
[data-theme="dark"] body:not(.lockscreen) .nav-tabs > li.active > a {
    background: var(--surface) !important;
    color: var(--primary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] body:not(.lockscreen) .nav-tabs > li > a {
    color: var(--text-secondary) !important;
}

/* —— Pagination / DataTables chrome —— */
[data-theme="dark"] body:not(.lockscreen) .pagination > li > a,
[data-theme="dark"] body:not(.lockscreen) .pagination > li > span,
[data-theme="dark"] body:not(.lockscreen) .dataTables_filter input,
[data-theme="dark"] body:not(.lockscreen) .dataTables_length select,
[data-theme="dark"] body:not(.lockscreen) .dataTables_info,
[data-theme="dark"] body:not(.lockscreen) div.dataTables_wrapper div.dataTables_paginate {
    background-color: var(--surface-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] body:not(.lockscreen) .pagination > .active > a,
[data-theme="dark"] body:not(.lockscreen) .pagination > .active > span {
    background-color: var(--primary, #3b82f6) !important;
    border-color: var(--primary, #3b82f6) !important;
    color: #fff !important;
}

/* —— ERP form helpers —— */
[data-theme="dark"] body:not(.lockscreen) .erp-txn-form,
[data-theme="dark"] body:not(.lockscreen) .erp-form-sticky-footer,
[data-theme="dark"] body:not(.lockscreen) .erp-contact-type-toggle {
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] body:not(.lockscreen) [class*="tw-border-gray"],
[data-theme="dark"] body:not(.lockscreen) [class*="tw-border-slate"] {
    border-color: var(--border) !important;
}

[data-theme="dark"] .ds-header .theme-btn-bg {
    background-color: var(--surface-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ds-badge--warning {
    color: #fbbf24;
}

/* Toast / swal remain readable */
[data-theme="dark"] #toast-container > div {
    opacity: 0.95;
}

/* SweetAlert / view_modal shells */
[data-theme="dark"] body:not(.lockscreen) .swal2-popup,
[data-theme="dark"] body:not(.lockscreen) .view_modal .modal-content {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] body:not(.lockscreen) .swal2-title,
[data-theme="dark"] body:not(.lockscreen) .swal2-html-container,
[data-theme="dark"] body:not(.lockscreen) .swal2-content {
    color: var(--text-primary) !important;
}