/* Ultimate POS full dark theme */
:root {
  color-scheme: dark;
  --dark-bg: #080d17;
  --dark-surface: #0f172a;
  --dark-surface-2: #172033;
  --dark-surface-3: #202b40;
  --dark-border: #2c3950;
  --dark-text: #e5e7eb;
  --dark-muted: #9ca3af;
  --dark-accent: #38bdf8;
  --dark-danger: #fb7185;
  --dark-success: #34d399;
}

html, body,
.wrapper, .content-wrapper, .right-side,
main, #scrollable-container, .login-page, .register-page {
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

body, input, button, select, textarea { color: var(--dark-text); }
h1, h2, h3, h4, h5, h6, label, legend, strong, b,
.content-header > h1, .box-title, .modal-title { color: #f8fafc !important; }
.tw-dw-label-text, .tw-dw-form-control label, .checkbox label,
.radio label, .control-label { color: #dbeafe !important; }
p, small, .help-block, .text-muted, .description-text { color: var(--dark-muted) !important; }
a { color: #7dd3fc; }
a:hover, a:focus { color: #bae6fd; }
hr { border-color: var(--dark-border); }

/* Application shell */
.main-header .navbar, .main-header .logo, .theme-header-bg, .theme-logo-bg {
  background: #0b1220 !important;
  background-image: none !important;
  border-color: var(--dark-border) !important;
}
.main-header .navbar .nav > li > a,
.main-header .sidebar-toggle, .main-header .logo { color: var(--dark-text) !important; }
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus,
.main-header .sidebar-toggle:hover { background: var(--dark-surface-2) !important; }
.main-sidebar, #side-bar, #side-bar > div { background: #0b1220 !important; }
#side-bar { border-right: 1px solid var(--dark-border) !important; }
#side-bar a { color: #cbd5e1 !important; }
#side-bar a:hover, #side-bar .theme-sidebar-active {
  background: var(--dark-surface-2) !important;
  color: #fff !important;
}
.main-footer { background: #0b1220 !important; border-color: var(--dark-border) !important; color: var(--dark-muted) !important; }

/* Panels, cards, wells and information blocks */
.box, .card, .panel, .well, .jumbotron, .thumbnail,
.info-box, .small-box, .callout, .login-box-body, .register-box-body,
.nav-tabs-custom, .invoice, .popover, .list-group-item,
.tw-bg-white, .bg-white, [class*="tw-bg-gray-50"], [class*="tw-bg-gray-100"] {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
.box-header, .box-footer, .panel-heading, .panel-footer, .card-header, .card-footer,
.modal-header, .modal-footer, .popover-title {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
.box-body, .panel-body, .card-body, .info-box-content { background: var(--dark-surface) !important; }
.box { border-top-color: #475569 !important; box-shadow: 0 12px 30px rgba(0,0,0,.25) !important; }
.btn-default, .btn-default:hover, .btn-default:focus, .tw-dw-btn,
.pos-sidebar-root, .pos-drawer-panel, .pos_product_div,
.product_box, .payment_row, .right-col, .eq-height-row {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* Forms and rich inputs */
.form-control, input, textarea, select,
.input-group-addon, .input-group-text,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
.select2-dropdown, .select2-search__field,
.bootstrap-tagsinput, .note-editor, .note-editable {
  background-color: #0b1220 !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
.form-control:focus, input:focus, textarea:focus, select:focus,
.select2-container--focus .select2-selection {
  border-color: var(--dark-accent) !important;
  box-shadow: 0 0 0 2px rgba(56,189,248,.18) !important;
}
input::placeholder, textarea::placeholder, .select2-selection__placeholder { color: #64748b !important; }
input[disabled], select[disabled], textarea[disabled], .form-control[disabled], .form-control[readonly] {
  background: #111827 !important; color: #6b7280 !important;
}
.select2-container--default .select2-results__option { background: var(--dark-surface); color: var(--dark-text); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: #075985 !important; color: #fff !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--dark-surface-3); border-color: #475569; color: #fff; }

/* Tables and data grids */
.table, table, .dataTable { color: var(--dark-text) !important; background: transparent !important; }
.table > thead > tr > th, .table > tbody > tr > th,
.table > tfoot > tr > th, .table > thead > tr > td,
.table > tbody > tr > td, .table > tfoot > tr > td,
table th, table td {
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}
.table > thead > tr > th, table thead th { background: var(--dark-surface-2) !important; }
.table-striped > tbody > tr:nth-of-type(odd), .table-hover > tbody > tr:hover,
table.dataTable tbody tr:hover { background: #162238 !important; }
.table-striped > tbody > tr:nth-of-type(even), table.dataTable tbody tr { background: var(--dark-surface) !important; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_paginate { color: var(--dark-muted) !important; }

/* Menus, dialogs, tabs, pagination */
.modal-content, .dropdown-menu, .datepicker, .daterangepicker,
.ui-autocomplete, .typeahead, .tox .tox-dialog, .tox .tox-menu,
.swal2-popup, .sweet-alert, .tooltip-inner, .context-menu-list {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.55) !important;
}
.modal-backdrop.in { opacity: .78 !important; }
.dropdown-menu > li > a, .dropdown-menu > li > label { color: var(--dark-text) !important; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--dark-surface-3) !important; color: #fff !important; }
.dropdown-menu .divider { background: var(--dark-border) !important; }
.nav-tabs { border-color: var(--dark-border) !important; }
.nav-tabs > li > a { color: var(--dark-muted) !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus, .nav-pills > li.active > a {
  background: var(--dark-surface-2) !important; color: #fff !important; border-color: var(--dark-border) !important;
}
.pagination > li > a, .pagination > li > span {
  background: var(--dark-surface) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important;
}
.pagination > .active > a, .pagination > .active > span { background: #0369a1 !important; border-color: #0284c7 !important; }
.close { color: #fff !important; text-shadow: none !important; opacity: .8; }

/* Calendars, POS widgets and miscellaneous plugins */
.daterangepicker .calendar-table, .daterangepicker td.off,
.daterangepicker td.off.in-range, .daterangepicker td.off.start-date,
.daterangepicker td.off.end-date { background: var(--dark-surface) !important; color: var(--dark-muted) !important; border-color: var(--dark-border) !important; }
.daterangepicker td.in-range { background: #164e63 !important; color: #fff !important; }
.daterangepicker td.active, .daterangepicker td.active:hover { background: #0284c7 !important; color: #fff !important; }
.datepicker table tr td.day:hover, .datepicker table tr td.focused { background: var(--dark-surface-3) !important; }
.fc-unthemed td, .fc-unthemed th, .fc-unthemed .fc-divider,
.fc-unthemed .fc-row, .fc-unthemed .fc-content, .fc-unthemed .fc-popover { border-color: var(--dark-border) !important; }
.fc-unthemed .fc-today { background: #172554 !important; }
.product_box, .pos_product_div, .pos-form-actions, .payment_row,
#product_list_body, #pos_table, .pos-express-btn { border-color: var(--dark-border) !important; }

/* Alerts retain semantic color while remaining dark */
.alert-success { background: #052e2b !important; border-color: #047857 !important; color: #a7f3d0 !important; }
.alert-info { background: #082f49 !important; border-color: #0369a1 !important; color: #bae6fd !important; }
.alert-warning { background: #3b2506 !important; border-color: #b45309 !important; color: #fde68a !important; }
.alert-danger { background: #3f1019 !important; border-color: #be123c !important; color: #fecdd3 !important; }
.text-danger { color: var(--dark-danger) !important; }
.text-success { color: var(--dark-success) !important; }
.text-info { color: #7dd3fc !important; }

/* Tailwind utilities emitted by server templates */
[class*="tw-text-gray-900"], [class*="tw-text-gray-800"], [class*="tw-text-gray-700"] { color: var(--dark-text) !important; }
[class*="tw-text-gray-600"], [class*="tw-text-gray-500"], [class*="tw-text-gray-400"] { color: var(--dark-muted) !important; }
[class*="tw-text-black"], [class*="tw-text-slate-900"],
[class*="tw-text-slate-800"], [class*="tw-text-slate-700"] { color: var(--dark-text) !important; }
[class*="tw-border-gray-"] { border-color: var(--dark-border) !important; }
[class*="tw-shadow"] { --tw-shadow-color: rgba(0,0,0,.45) !important; }
[class*="tw-bg-slate-50"], [class*="tw-bg-slate-100"],
[class*="tw-bg-gray-200"], [class*="tw-bg-gray-300"],
[class*="tw-dw-bg-base-100"], [class*="tw-dw-bg-base-200"],
[style*="background: white"], [style*="background-color: white"],
[style*="background:#fff"], [style*="background-color:#fff"] {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}

/* POS has many utility-colored controls that otherwise remain bright. */
.lockscreen .tw-bg-white, .lockscreen [class*="tw-bg-white"],
.lockscreen .bg-white, .lockscreen .btn-default,
.pos-sidebar-root [class*="tw-bg-white"],
.pos-drawer-panel [class*="tw-bg-white"],
#pos_table tbody, #pos_table tr, #pos_table td,
#product_list_body, #product_list_body > div {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.upos-dark .wizard > .content,
html.upos-dark .wizard > .steps a,
html.upos-dark .wizard > .actions a {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}
html.upos-dark .show_hide_icon svg,
html.upos-dark svg[stroke="#000000"] { stroke: var(--dark-text) !important; }

#upos-theme-toggle:focus-visible {
  outline: 3px solid var(--dark-accent) !important;
  outline-offset: 3px;
}

/* Highcharts renders its own white SVG canvas by default. */
html.upos-dark .highcharts-container,
html.upos-dark .highcharts-root,
html.upos-dark .highcharts-background,
html.upos-dark .highcharts-plot-background {
  background: var(--dark-surface) !important;
  fill: var(--dark-surface) !important;
}
html.upos-dark .highcharts-grid-line,
html.upos-dark .highcharts-axis-line,
html.upos-dark .highcharts-tick { stroke: #334155 !important; }
html.upos-dark .highcharts-axis-labels text,
html.upos-dark .highcharts-axis-title,
html.upos-dark .highcharts-legend-item text,
html.upos-dark .highcharts-title,
html.upos-dark .highcharts-subtitle { color: #cbd5e1 !important; fill: #cbd5e1 !important; }
html.upos-dark .highcharts-contextbutton rect { fill: var(--dark-surface-2) !important; }
html.upos-dark .highcharts-menu { background: var(--dark-surface-2) !important; border-color: var(--dark-border) !important; }
html.upos-dark .highcharts-menu-item { color: var(--dark-text) !important; }

/* Settings tabs and DataTables create independent light canvases. */
html.upos-dark .tab-content,
html.upos-dark .tab-pane,
html.upos-dark .settings-tab-content,
html.upos-dark .dataTables_wrapper,
html.upos-dark .dataTables_scroll,
html.upos-dark .dataTables_scrollHead,
html.upos-dark .dataTables_scrollHeadInner,
html.upos-dark .dataTables_scrollBody,
html.upos-dark .table-responsive {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* Legacy Business Settings uses pos-tab-* instead of Bootstrap tab classes. */
html.upos-dark div.pos-tab-container,
html.upos-dark div.pos-tab,
html.upos-dark div.pos-tab-content,
html.upos-dark #bussiness_edit_form .row,
html.upos-dark #bussiness_edit_form .form-group {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
html.upos-dark div.pos-tab-content label,
html.upos-dark #bussiness_edit_form label {
  color: var(--dark-text) !important;
}
html.upos-dark div.pos-tab-menu .list-group-item:not(.active) {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
html.upos-dark div.pos-tab-menu .list-group-item:not(.active):hover {
  background: var(--dark-surface-2) !important;
}
html.upos-dark #bussiness_edit_form .select2-selection,
html.upos-dark #bussiness_edit_form .input-group-addon,
html.upos-dark #bussiness_edit_form .form-control {
  background-color: #0b1220 !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
html.upos-dark .dataTables_wrapper > .row,
html.upos-dark .dataTables_wrapper > div:not(.dataTables_processing) {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}

html.upos-dark table.dataTable tfoot,
html.upos-dark table.dataTable tfoot tr,
html.upos-dark table.dataTable tfoot tr.footer-total,
html.upos-dark table.dataTable tfoot tr.footer-total > th,
html.upos-dark table.dataTable tfoot tr.footer-total > td,
html.upos-dark .dataTables_scrollFoot,
html.upos-dark .dataTables_scrollFootInner,
html.upos-dark .dataTables_scrollFootInner table,
html.upos-dark .DTFC_LeftFootWrapper table,
html.upos-dark .DTFC_RightFootWrapper table,
html.upos-dark .DTFC_LeftFootWrapper td,
html.upos-dark .DTFC_RightFootWrapper td {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
html.upos-dark table.dataTable tfoot .display_currency,
html.upos-dark table.dataTable tfoot .footer_total,
html.upos-dark table.dataTable tfoot strong,
html.upos-dark table.dataTable tfoot b {
  color: #f8fafc !important;
}

/* TinyMCE v4/v5 chrome; iframe content is handled by theme-toggle.js. */
html.upos-dark .mce-container,
html.upos-dark .mce-container-body,
html.upos-dark .mce-panel,
html.upos-dark .mce-toolbar-grp,
html.upos-dark .mce-edit-area,
html.upos-dark .mce-statusbar,
html.upos-dark .tox,
html.upos-dark .tox .tox-editor-container,
html.upos-dark .tox .tox-editor-header,
html.upos-dark .tox .tox-toolbar,
html.upos-dark .tox .tox-toolbar__primary,
html.upos-dark .tox .tox-statusbar {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
html.upos-dark .mce-btn,
html.upos-dark .mce-btn button,
html.upos-dark .tox .tox-tbtn { background: var(--dark-surface-2) !important; color: var(--dark-text) !important; }
html.upos-dark .mce-ico,
html.upos-dark .mce-txt,
html.upos-dark .tox .tox-tbtn svg { color: var(--dark-text) !important; fill: var(--dark-text) !important; }

/* POS footer/actions and header are deliberately separate from the POS cards. */
html.upos-dark .pos-form-actions,
html.upos-dark .pos-form-actions > div,
html.upos-dark .pos-form-actions .tw-bg-white,
html.upos-dark .pos-form-actions [class*="tw-bg-white"],
html.upos-dark .pos-form-actions .bg-white,
html.upos-dark .pos-footer,
html.upos-dark .pos-header {
  background: #0b1220 !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* POS totals partial contains page-level light styles loaded after the theme. */
html.upos-dark body.lockscreen .pos_form_totals {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}
html.upos-dark body.lockscreen .pos_form_totals .pos_totals_left {
  background: var(--dark-border) !important;
}
html.upos-dark body.lockscreen .pos_form_totals .pos_totals_cell {
  background: #0f172a !important;
  color: var(--dark-text) !important;
}
html.upos-dark body.lockscreen .pos_form_totals .pos_totals_label {
  color: #94a3b8 !important;
}
html.upos-dark body.lockscreen .pos_form_totals .pos_totals_value {
  color: #f8fafc !important;
}
html.upos-dark body.lockscreen .pos_form_totals .pos_totals_value--danger {
  color: #fb7185 !important;
}
html.upos-dark body.lockscreen .pos_form_totals .pos_totals_value--loyalty {
  color: #c4b5fd !important;
}
html.upos-dark body.lockscreen .pos_form_totals .pos_totals_right {
  background: #052e2b !important;
  border-color: #065f46 !important;
}
html.upos-dark body.lockscreen .pos_form_totals .pos_totals_right_label {
  color: #a7f3d0 !important;
}
html.upos-dark body.lockscreen .pos_form_totals .pos_totals_right_value {
  color: #34d399 !important;
}

/* Category and brand drawer cards. */
html.upos-dark body.lockscreen .pos-drawer-panel,
html.upos-dark body.lockscreen .pos-drawer-body,
html.upos-dark body.lockscreen .pos-card-grid,
html.upos-dark body.lockscreen .pos-card-grid > [class*="col-"] {
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}
html.upos-dark body.lockscreen .pos-drawer-panel .pos-card {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
  box-shadow: none !important;
}
html.upos-dark body.lockscreen .pos-drawer-panel .pos-card-name {
  color: #f1f5f9 !important;
}
html.upos-dark body.lockscreen .pos-drawer-panel .pos-card:hover {
  background: var(--dark-surface-3) !important;
  border-color: #64748b !important;
}
html.upos-dark body.lockscreen .pos-drawer-panel .pos-card.is-active.cat {
  background: #1e1b4b !important;
  border-color: #818cf8 !important;
}
html.upos-dark body.lockscreen .pos-drawer-panel .pos-card.is-active.brand {
  background: #2e1065 !important;
  border-color: #c084fc !important;
}
html.upos-dark body.lockscreen .pos-drawer-panel h3,
html.upos-dark body.lockscreen .pos-drawer-panel [class*="tw-text-slate-900"] {
  color: #f8fafc !important;
}
html.upos-dark body.lockscreen .pos-drawer-panel [class*="tw-text-slate-500"] {
  color: #94a3b8 !important;
}
html.upos-dark body.lockscreen .pos-drawer-panel button[class*="tw-bg-slate-100"] {
  background: var(--dark-surface-2) !important;
  color: #cbd5e1 !important;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #080d17; }
::-webkit-scrollbar-thumb { background: #334155; border: 2px solid #080d17; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }
::selection { background: #075985; color: #fff; }

@media print {
  html, body, .invoice, .print_section, .print_section * {
    background: #fff !important; color: #000 !important; box-shadow: none !important;
  }
  .print_section table th, .print_section table td { border-color: #999 !important; }
}
