/* DressZone / POS modern light/dark theme layer */
.vox-modern-theme {
    --vox-accent: #2563eb;
    --vox-bg: #f3f6fa;
    --vox-surface: #ffffff;
    --vox-surface-2: #f8fafc;
    --vox-text: #172033;
    --vox-muted: #64748b;
    --vox-border: #dbe3ed;
    --vox-input: #ffffff;
    --vox-hover: #eef3f8;
    --vox-shadow: 0 8px 24px rgba(15, 23, 42, .07);
    background: var(--vox-bg) !important;
    color: var(--vox-text) !important;
    transition: background-color .2s ease, color .2s ease;
}

html:has(body.vox-modern-theme) { background: var(--vox-bg, #f3f6fa) !important; }
html:has(body.vox-theme-dark) { background: #0b1120 !important; }
.vox-modern-theme .thetop {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background: var(--vox-bg) !important;
}
.vox-modern-theme .thetop > main {
    height: 100vh !important;
    min-height: 0;
    overflow: hidden;
}
.vox-modern-theme #scrollable-container {
    min-height: 0;
    overscroll-behavior: contain;
}

.vox-theme-dark {
    --vox-bg: #0b1120;
    --vox-surface: #111a2d;
    --vox-surface-2: #172237;
    --vox-text: #edf2f8;
    --vox-muted: #a7b4c7;
    --vox-border: #2b3950;
    --vox-input: #0f192a;
    --vox-hover: #1d2a40;
    --vox-shadow: 0 10px 28px rgba(0, 0, 0, .28);
    color-scheme: dark;
}

.vox-modern-theme main,
.vox-modern-theme #scrollable-container,
.vox-modern-theme .content-wrapper,
.vox-modern-theme .content,
.vox-modern-theme .tw-bg-gray-100 { background-color: var(--vox-bg) !important; }
.vox-modern-theme .content-header h1,
.vox-modern-theme .content-header h2,
.vox-modern-theme .content-header .tw-text-black,
.vox-modern-theme h1, .vox-modern-theme h2, .vox-modern-theme h3,
.vox-modern-theme h4, .vox-modern-theme h5, .vox-modern-theme h6 { color: var(--vox-text) !important; }
.vox-modern-theme p, .vox-modern-theme label, .vox-modern-theme .help-block { color: var(--vox-muted); }
.vox-modern-theme a:not(.btn):not([class*="tw-dw-btn"]) { color: var(--vox-accent); }

.vox-modern-theme .side-bar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh !important;
    min-height: 100vh;
    background: var(--vox-surface) !important;
    border-color: var(--vox-border) !important;
}
.vox-modern-theme .side-bar > .tw-overflow-y-auto {
    background: var(--vox-surface) !important;
    scrollbar-color: color-mix(in srgb, var(--vox-accent) 55%, var(--vox-muted)) var(--vox-surface);
    scrollbar-width: thin;
}
.vox-modern-theme .side-bar > .tw-overflow-y-auto::-webkit-scrollbar { width: 8px; }
.vox-modern-theme .side-bar > .tw-overflow-y-auto::-webkit-scrollbar-track { background: var(--vox-surface); }
.vox-modern-theme .side-bar > .tw-overflow-y-auto::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--vox-accent) 55%, var(--vox-muted)); border: 2px solid var(--vox-surface); border-radius: 999px; }
.vox-modern-theme .sidebar-menu { background: transparent !important; }
.vox-modern-theme .sidebar-menu > li > a,
.vox-modern-theme .treeview-menu > li > a { color: var(--vox-text) !important; border-radius: 8px; margin: 2px 8px; }
.vox-modern-theme .sidebar-menu > li:hover > a,
.vox-modern-theme .sidebar-menu > li.active > a,
.vox-modern-theme .treeview-menu > li.active > a,
.vox-modern-theme .treeview-menu > li > a:hover { background: color-mix(in srgb, var(--vox-accent) 14%, var(--vox-surface)) !important; color: var(--vox-accent) !important; }
.vox-modern-theme .treeview-menu { background: var(--vox-surface-2) !important; }

.vox-modern-theme .box,
.vox-modern-theme .card,
.vox-modern-theme .info-box,
.vox-modern-theme .modal-content,
.vox-modern-theme .dropdown-menu,
.vox-modern-theme .panel,
.vox-modern-theme .well,
.vox-modern-theme .invoice { background: var(--vox-surface) !important; color: var(--vox-text); border-color: var(--vox-border) !important; box-shadow: var(--vox-shadow); }
.vox-modern-theme .info-box { border-radius: 10px; overflow: hidden; }
.vox-modern-theme .info-box-content { background: var(--vox-surface) !important; color: var(--vox-text) !important; }
.vox-modern-theme .info-box-text { color: var(--vox-muted) !important; }
.vox-modern-theme .info-box-number { color: var(--vox-text) !important; }
.vox-modern-theme .box-body,
.vox-modern-theme .pos-tab-container,
.vox-modern-theme .pos-tab,
.vox-modern-theme .pos-tab-content { background: var(--vox-surface) !important; color: var(--vox-text); }
.vox-modern-theme .box { border-radius: 12px; overflow: hidden; }
.vox-modern-theme .box-header,
.vox-modern-theme .box-footer,
.vox-modern-theme .modal-header,
.vox-modern-theme .modal-footer,
.vox-modern-theme .panel-heading { background: var(--vox-surface) !important; border-color: var(--vox-border) !important; color: var(--vox-text) !important; }

.vox-modern-theme .table { color: var(--vox-text); background: var(--vox-surface); }
.vox-modern-theme .table > thead > tr > th { background: var(--vox-surface-2) !important; color: var(--vox-text) !important; border-color: var(--vox-border) !important; font-weight: 700; }
.vox-modern-theme .table > tbody > tr > td,
.vox-modern-theme .table > tfoot > tr > td { color: var(--vox-text); border-color: var(--vox-border) !important; }
.vox-modern-theme .table > tfoot > tr > td,
.vox-modern-theme .table > tfoot > tr > th,
.vox-modern-theme table.dataTable tfoot td,
.vox-modern-theme table.dataTable tfoot th { background: var(--vox-surface-2) !important; color: var(--vox-text) !important; border-color: var(--vox-border) !important; }
.vox-modern-theme .table-striped > tbody > tr:nth-of-type(odd),
.vox-modern-theme .table-hover > tbody > tr:hover { background-color: var(--vox-hover) !important; }

.vox-modern-theme .form-control,
.vox-modern-theme input[type="text"], .vox-modern-theme input[type="email"],
.vox-modern-theme input[type="number"], .vox-modern-theme input[type="password"],
.vox-modern-theme input[type="date"], .vox-modern-theme input[type="time"],
.vox-modern-theme textarea, .vox-modern-theme select,
.vox-modern-theme .select2-selection,
.vox-modern-theme .input-group-addon { background: var(--vox-input) !important; color: var(--vox-text) !important; border-color: var(--vox-border) !important; }
.vox-modern-theme .form-control:focus,
.vox-modern-theme input:focus, .vox-modern-theme textarea:focus, .vox-modern-theme select:focus { border-color: var(--vox-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--vox-accent) 20%, transparent) !important; }
.vox-modern-theme .select2-dropdown,
.vox-modern-theme .select2-results__option { background: var(--vox-surface) !important; color: var(--vox-text) !important; border-color: var(--vox-border) !important; }
.vox-modern-theme .select2-results__option--highlighted { background: var(--vox-accent) !important; color: #fff !important; }

.vox-modern-theme .list-group-item { background: var(--vox-surface) !important; color: var(--vox-text) !important; border-color: var(--vox-border) !important; }
.vox-modern-theme .list-group-item:hover { background: var(--vox-hover) !important; }
.vox-modern-theme .list-group-item.active { background: var(--vox-accent) !important; color: #fff !important; border-color: var(--vox-accent) !important; }
.vox-modern-theme .dropdown-menu > li > a { color: var(--vox-text) !important; }
.vox-modern-theme .dropdown-menu > li > a:hover { background: var(--vox-hover) !important; }
.vox-modern-theme .nav-tabs { border-color: var(--vox-border); }
.vox-modern-theme .nav-tabs > li > a { color: var(--vox-muted); }
.vox-modern-theme .nav-tabs > li.active > a { background: var(--vox-surface) !important; color: var(--vox-accent) !important; border-color: var(--vox-border) !important; border-bottom-color: var(--vox-surface) !important; }

.vox-modern-theme .pagination > li > a { background: var(--vox-surface); color: var(--vox-text); border-color: var(--vox-border); }
.vox-modern-theme .pagination > .active > a { background: var(--vox-accent) !important; border-color: var(--vox-accent) !important; color: #fff !important; }
.vox-modern-theme .dataTables_info,
.vox-modern-theme .dataTables_length,
.vox-modern-theme .dataTables_filter { color: var(--vox-muted) !important; }
.vox-modern-theme .text-muted, .vox-modern-theme small { color: var(--vox-muted) !important; }
.vox-modern-theme hr { border-color: var(--vox-border); }

.vox-theme-dark .tw-bg-white,
.vox-theme-dark .tw-bg-gray-50,
.vox-theme-dark .tw-bg-gray-100 { background-color: var(--vox-surface) !important; }
.vox-theme-dark .tw-bg-gray-200 { background-color: var(--vox-surface-2) !important; }
.vox-theme-dark .tw-text-black,
.vox-theme-dark .tw-text-gray-900,
.vox-theme-dark .tw-text-gray-800,
.vox-theme-dark .tw-text-gray-700,
.vox-theme-dark .tw-text-gray-600 { color: var(--vox-text) !important; }
.vox-theme-dark .tw-text-gray-500,
.vox-theme-dark .tw-text-gray-400 { color: var(--vox-muted) !important; }
.vox-theme-dark .tw-border-gray-100,
.vox-theme-dark .tw-border-gray-200,
.vox-theme-dark .tw-border-gray-300 { border-color: var(--vox-border) !important; }

.vox-modern-theme .btn-primary,
.vox-modern-theme .tw-dw-btn-primary,
.vox-modern-theme .tw-dw-btn-accent { background: var(--vox-accent) !important; border-color: var(--vox-accent) !important; color: #fff !important; }
.vox-modern-theme .btn-default { background: var(--vox-surface-2) !important; color: var(--vox-text) !important; border-color: var(--vox-border) !important; }
.vox-modern-theme .alert-info { background: color-mix(in srgb, var(--vox-accent) 12%, var(--vox-surface)) !important; color: var(--vox-text) !important; border-color: var(--vox-accent) !important; }
.vox-modern-theme .vox-theme-toggle { min-width: 34px; min-height: 34px; }
.vox-modern-theme .vox-theme-toggle i { transition: transform .2s ease; }
.vox-modern-theme .vox-theme-toggle:hover i { transform: rotate(18deg) scale(1.08); }
.vox-modern-theme .vox-theme-toggle:disabled { opacity: .65; cursor: wait; }

/* Third-party widget compatibility */
.vox-theme-dark .highcharts-background,
.vox-theme-dark .highcharts-plot-background { fill: var(--vox-surface) !important; }
.vox-theme-dark .highcharts-title,
.vox-theme-dark .highcharts-subtitle,
.vox-theme-dark .highcharts-axis-title,
.vox-theme-dark .highcharts-axis-labels text,
.vox-theme-dark .highcharts-legend-item text,
.vox-theme-dark .highcharts-data-label text { fill: var(--vox-text) !important; color: var(--vox-text) !important; }
.vox-theme-dark .highcharts-grid-line,
.vox-theme-dark .highcharts-axis-line,
.vox-theme-dark .highcharts-tick { stroke: var(--vox-border) !important; }
.vox-theme-dark .highcharts-exporting-group path { fill: var(--vox-muted) !important; }
.vox-theme-dark .highcharts-menu { background: var(--vox-surface) !important; border-color: var(--vox-border) !important; box-shadow: var(--vox-shadow) !important; }
.vox-theme-dark .highcharts-menu-item { color: var(--vox-text) !important; }
.vox-theme-dark .highcharts-menu-item:hover { background: var(--vox-hover) !important; }
.vox-theme-dark .highcharts-tooltip-box { fill: var(--vox-surface-2) !important; stroke: var(--vox-border) !important; }
.vox-theme-dark .highcharts-tooltip text { fill: var(--vox-text) !important; }

.vox-modern-theme .daterangepicker,
.vox-modern-theme .datepicker,
.vox-modern-theme .datepicker-dropdown,
.vox-modern-theme .bootstrap-datetimepicker-widget,
.vox-modern-theme .fc-view-container,
.vox-modern-theme .fc-popover { background: var(--vox-surface) !important; color: var(--vox-text) !important; border-color: var(--vox-border) !important; }
.vox-modern-theme .daterangepicker .calendar-table,
.vox-modern-theme .daterangepicker td.off,
.vox-modern-theme .daterangepicker td.off.in-range,
.vox-modern-theme .datepicker table tr td,
.vox-modern-theme .datepicker table tr th,
.vox-modern-theme .fc-unthemed td,
.vox-modern-theme .fc-unthemed th { background: var(--vox-surface) !important; color: var(--vox-text) !important; border-color: var(--vox-border) !important; }
.vox-modern-theme .daterangepicker td.available:hover,
.vox-modern-theme .daterangepicker th.available:hover,
.vox-modern-theme .datepicker table tr td.day:hover,
.vox-modern-theme .fc-day:hover { background: var(--vox-hover) !important; }
.vox-modern-theme .daterangepicker td.active,
.vox-modern-theme .datepicker table tr td.active,
.vox-modern-theme .fc-event { background: var(--vox-accent) !important; border-color: var(--vox-accent) !important; color: #fff !important; }

.vox-modern-theme .notifications-menu > .dropdown-menu,
.vox-modern-theme #notifications_list,
.vox-modern-theme .notification-li,
.vox-modern-theme .toast,
.vox-modern-theme #toast-container > div,
.vox-modern-theme .swal-modal,
.vox-modern-theme .sweet-alert { background: var(--vox-surface) !important; color: var(--vox-text) !important; border-color: var(--vox-border) !important; }
.vox-modern-theme .notification-li.unread { background: color-mix(in srgb, var(--vox-accent) 12%, var(--vox-surface)) !important; }
.vox-modern-theme .notification-li a,
.vox-modern-theme .notif-info,
.vox-modern-theme .swal-title,
.vox-modern-theme .swal-text,
.vox-modern-theme .sweet-alert p { color: var(--vox-text) !important; }
.vox-modern-theme .notification-li .time { color: var(--vox-muted) !important; }

/* POS compatibility */
.vox-modern-theme .pos-form-actions,
.vox-modern-theme .pos_product_div,
.vox-modern-theme .pos_product_category,
.vox-modern-theme .product_list,
.vox-modern-theme .payment_row,
.vox-modern-theme #pos_table,
.vox-modern-theme #product_list_body,
.vox-modern-theme .pos-subtotal { background: var(--vox-surface) !important; color: var(--vox-text) !important; border-color: var(--vox-border) !important; }
.vox-modern-theme .product_box,
.vox-modern-theme .product_box .text_div { background: var(--vox-surface-2) !important; color: var(--vox-text) !important; border-color: var(--vox-border) !important; }
.vox-modern-theme .product_box:hover { border-color: var(--vox-accent) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--vox-accent) 18%, transparent); }
.vox-modern-theme .pos_product_category .category_code,
.vox-modern-theme .pos_product_category .category-name { color: var(--vox-text) !important; }

.vox-theme-dark .dt-button,
.vox-theme-dark button.dt-button,
.vox-theme-dark div.dt-button { background: var(--vox-surface-2) !important; color: var(--vox-text) !important; border-color: var(--vox-border) !important; }
.vox-theme-dark .dataTables_scrollBody,
.vox-theme-dark .dataTables_scrollHead,
.vox-theme-dark .dataTables_scrollHeadInner { background: var(--vox-surface) !important; border-color: var(--vox-border) !important; }
.vox-theme-dark .dataTables_scrollBody { scrollbar-color: var(--vox-muted) var(--vox-surface-2); }
.vox-theme-dark .dataTables_scrollBody::-webkit-scrollbar { height: 9px; width: 9px; }
.vox-theme-dark .dataTables_scrollBody::-webkit-scrollbar-track { background: var(--vox-surface-2); }
.vox-theme-dark .dataTables_scrollBody::-webkit-scrollbar-thumb { background: var(--vox-muted); border: 2px solid var(--vox-surface-2); border-radius: 999px; }
.vox-theme-dark .dataTables_processing { background: var(--vox-surface-2) !important; color: var(--vox-text) !important; border: 1px solid var(--vox-border) !important; box-shadow: var(--vox-shadow); }

/* Theme settings */
.vox-theme-settings { color: var(--vox-text); }
.vox-theme-heading { display: flex; align-items: center; gap: 14px; padding: 18px; margin-bottom: 24px; background: var(--vox-surface-2); border: 1px solid var(--vox-border); border-radius: 14px; }
.vox-theme-heading-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 13px; background: var(--vox-accent); color: #fff; font-size: 20px; }
.vox-theme-heading h3 { margin: 0 0 4px; font-size: 20px; }
.vox-theme-heading p { margin: 0; }
.vox-theme-settings > h4 { margin: 24px 0 12px; font-weight: 700; }
.vox-theme-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 280px)); gap: 16px; }
.vox-theme-mode-card, .vox-accent-choice { cursor: pointer; margin: 0; }
.vox-theme-mode-card input, .vox-accent-choice input { position: absolute; opacity: 0; pointer-events: none; }
.vox-mode-preview { display: flex; min-height: 130px; padding: 20px; flex-direction: column; justify-content: center; align-items: center; gap: 7px; border: 2px solid var(--vox-border); border-radius: 14px; transition: .18s ease; }
.vox-mode-preview i { font-size: 28px; }
.vox-mode-preview-light { background: #f8fafc; color: #172033; }
.vox-mode-preview-dark { background: #111a2d; color: #edf2f8; }
.vox-mode-preview small { color: inherit !important; opacity: .7; }
.vox-theme-mode-card input:checked + .vox-mode-preview { border-color: var(--vox-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vox-accent) 18%, transparent); transform: translateY(-2px); }
.vox-accent-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.vox-accent-choice { display: flex; align-items: center; gap: 8px; min-width: 105px; padding: 10px 12px; background: var(--vox-surface-2); border: 2px solid var(--vox-border); border-radius: 11px; color: var(--vox-text); }
.vox-accent-swatch { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--choice-color); color: transparent; }
.vox-accent-choice input:checked ~ .vox-accent-swatch { color: #fff; }
.vox-accent-choice:has(input:checked) { border-color: var(--choice-color); }
.vox-theme-note { display: flex; gap: 10px; align-items: center; margin-top: 26px; padding: 13px 15px; border-radius: 10px; background: color-mix(in srgb, var(--vox-accent) 10%, var(--vox-surface)); border: 1px solid color-mix(in srgb, var(--vox-accent) 35%, var(--vox-border)); color: var(--vox-text); }
.vox-theme-note i { color: var(--vox-accent); }

@media (max-width: 767px) {
    .vox-modern-theme .content { padding: 12px !important; }
    .vox-modern-theme .content-header { padding: 12px 14px 6px !important; }
    .vox-modern-theme .box { border-radius: 10px; }
    .vox-modern-theme .box-body { padding: 12px; }
    .vox-modern-theme .table-responsive,
    .vox-modern-theme .dataTables_wrapper { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .vox-modern-theme .dataTables_wrapper .dt-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; float: none !important; margin-bottom: 10px; }
    .vox-modern-theme .dataTables_filter,
    .vox-modern-theme .dataTables_length { float: none !important; text-align: center !important; margin: 8px 0; }
    .vox-modern-theme .modal-dialog { margin: 10px; width: auto; }
    .vox-modern-theme .info-box { min-height: 90px; margin-bottom: 12px; }
    .vox-modern-theme .info-box-icon { width: 82px; height: 90px; line-height: 90px; }
    .vox-modern-theme .info-box-content { min-height: 90px; margin-left: 82px; padding: 14px 12px; }
    .vox-theme-mode-grid { grid-template-columns: 1fr; }
    .vox-accent-choice { min-width: calc(50% - 6px); }
    .vox-modern-theme .pos-tab-menu, .vox-modern-theme .pos-tab { width: 100% !important; }
    .vox-modern-theme .pos-tab-menu { padding: 0 !important; margin-bottom: 14px; }
    .vox-modern-theme .pos-tab-menu .list-group { display: flex; gap: 6px; overflow-x: auto; padding: 3px 2px 8px; scrollbar-width: thin; }
    .vox-modern-theme .pos-tab-menu .list-group-item { flex: 0 0 auto; min-width: 132px; margin: 0; border-radius: 8px !important; white-space: nowrap; }
    .vox-modern-theme .pos-tab { padding: 0 !important; }
    .vox-modern-theme .vox-theme-heading { align-items: flex-start; padding: 14px; }
    .vox-modern-theme .vox-theme-heading-icon { width: 42px; height: 42px; flex-basis: 42px; }
}

@media print {
    .vox-modern-theme, .vox-modern-theme * { color: #000 !important; background: #fff !important; box-shadow: none !important; }
}