/* FREECOM 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 {
  display: none !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;
}

html.upos-dark #bs-example-navbar-collapse-1 .navbar-nav > .active > a,
html.upos-dark #bs-example-navbar-collapse-1 .navbar-nav > .active > a:hover,
html.upos-dark #bs-example-navbar-collapse-1 .navbar-nav > .active > a:focus {
  border-bottom: 2px solid var(--dark-accent) !important;
  background: var(--dark-surface-2) !important;
  color: #fff !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; }

/* Subscription status in the main system header. */
body:not(.lockscreen) .thetop {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background: #07111f;
}
body:not(.lockscreen) .thetop > .side-bar {
  height: 100vh !important;
  min-height: 100vh;
  align-self: stretch;
  border-right: 1px solid #223651 !important;
  background: linear-gradient(180deg, #0a1424 0%, #081321 100%) !important;
}
body:not(.lockscreen) .thetop > main {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.freecom-admin-context {
  min-width: 220px;
  min-height: 42px;
  margin: 0 auto;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #dceaff;
  border: 1px solid #284b72;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(14, 43, 78, .9), rgba(9, 27, 51, .92));
  box-shadow: 0 8px 22px rgba(0, 7, 22, .18);
}
.freecom-admin-context > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  color: #59c5ff;
  border-radius: 8px;
  background: rgba(33, 137, 247, .15);
}
.freecom-admin-context > div { min-width: 0; display: flex; flex-direction: column; }
.freecom-admin-context small { color: #6f8cac; font-size: 8px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.freecom-admin-context b { color: #f1f7ff; font-size: 12px; line-height: 1.3; white-space: nowrap; }
.freecom-main-header {
  height: auto !important;
  min-height: 60px;
  overflow: visible;
}
.freecom-main-header-inner { padding-top: 8px !important; padding-bottom: 8px !important; }
.freecom-main-header-row { min-height: 43px; }
.header-subscription-status {
  min-width: 310px;
  max-width: 440px;
  min-height: 43px;
  margin: 0 auto;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 32px minmax(90px, 1fr) auto 16px;
  align-items: center;
  gap: 9px;
  color: #dceaff !important;
  border: 1px solid #285987;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(14, 50, 91, .93), rgba(10, 28, 54, .93));
  box-shadow: 0 8px 22px rgba(0, 7, 22, .2);
  text-decoration: none !important;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.header-subscription-status:hover { transform: translateY(-1px); color: #fff !important; border-color: #43a8ff; }
.header-subscription-icon { width: 32px; height: 32px; display: grid; place-items: center; color: #55dfbd; border-radius: 9px; background: rgba(42, 184, 148, .14); }
.header-subscription-copy { min-width: 0; display: flex; flex-direction: column; }
.header-subscription-copy small { color: #6885a8; font-size: 7px; font-weight: 850; letter-spacing: .14em; }
.header-subscription-copy b { overflow: hidden; color: #f1f7ff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.header-subscription-days { padding-left: 12px; display: flex; align-items: baseline; gap: 5px; border-left: 1px solid rgba(123, 160, 208, .18); white-space: nowrap; }
.header-subscription-days strong { color: #70e2c5; font-size: 17px; line-height: 1; }
.header-subscription-days small { color: #8299b7; font-size: 8px; }
.header-subscription-arrow { color: #52769f; font-size: 8px; }
.header-subscription-status.is-warning { border-color: #9b6a23; background: linear-gradient(135deg, rgba(91, 57, 13, .82), rgba(39, 29, 19, .92)); }
.header-subscription-status.is-warning .header-subscription-icon { color: #ffd071; background: rgba(211, 140, 35, .16); }
.header-subscription-status.is-warning .header-subscription-days strong { color: #ffc45d; }
.header-subscription-status.is-critical { border-color: #bd4353; background: linear-gradient(135deg, rgba(99, 24, 38, .9), rgba(46, 20, 29, .94)); box-shadow: 0 8px 24px rgba(118, 24, 43, .19); }
.header-subscription-status.is-critical .header-subscription-icon { color: #ff9aaa; background: rgba(215, 57, 83, .17); }
.header-subscription-status.is-critical .header-subscription-days strong { color: #ff8394; }

/* Once-per-login expiry reminder. */
.subscription-expiry-overlay { position: fixed; inset: 0; z-index: 2147482000; padding: 18px; display: none; align-items: center; justify-content: center; background: rgba(2, 8, 19, .76); backdrop-filter: blur(7px); }
.subscription-expiry-overlay.is-visible { display: flex; animation: subscriptionOverlayIn .22s ease both; }
.subscription-expiry-modal { position: relative; width: min(520px, 100%); padding: 28px; overflow: hidden; color: #eaf3ff; border: 1px solid #b34557; border-radius: 22px; background: radial-gradient(circle at 100% 0, rgba(222, 62, 87, .15), transparent 45%), linear-gradient(150deg, #17233a, #0b1527 65%); box-shadow: 0 35px 100px rgba(0, 0, 0, .58); animation: subscriptionModalIn .28s ease both; }
.subscription-expiry-modal::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #ff516d, #ff9a65); }
.subscription-expiry-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; display: grid; place-items: center; color: #9db0c9; border: 1px solid #354963; border-radius: 10px; background: #111d30; }
.subscription-expiry-visual { display: flex; align-items: center; gap: 11px; }
.subscription-expiry-visual > span { width: 45px; height: 45px; display: grid; place-items: center; color: #ff8c9d; border: 1px solid rgba(255, 104, 128, .35); border-radius: 13px; background: rgba(197, 48, 72, .13); font-size: 17px; }
.subscription-expiry-visual small { color: #ff8799; font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.subscription-expiry-count { margin-top: 24px; display: flex; align-items: baseline; gap: 9px; }
.subscription-expiry-count strong { color: #fff; font-size: 58px; line-height: .9; letter-spacing: -.06em; }
.subscription-expiry-count span { color: #ff9baa; font-size: 12px; font-weight: 750; }
.subscription-expiry-modal h2 { margin: 17px 0 8px; color: #fff; font-size: 25px; line-height: 1.22; font-weight: 850; letter-spacing: -.025em; }
.subscription-expiry-modal > p { margin: 0; color: #9cb0cc; font-size: 12px; line-height: 1.6; }
.subscription-expiry-modal > p b { color: #dce9fa; }
.subscription-expiry-current { margin-top: 20px; padding: 14px 15px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; border: 1px solid #2c405b; border-radius: 13px; background: rgba(7, 17, 34, .56); }
.subscription-expiry-current span { min-width: 0; display: flex; flex-direction: column; }
.subscription-expiry-current small { color: #69819f; font-size: 8px; font-weight: 800; letter-spacing: .11em; }
.subscription-expiry-current b { margin-top: 4px; overflow: hidden; color: #e6f0fd; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.subscription-expiry-rule { margin-top: 12px; padding: 12px 13px; display: flex; align-items: flex-start; gap: 10px; color: #8fa5c3; border: 1px solid rgba(71, 143, 218, .23); border-radius: 11px; background: rgba(21, 64, 111, .12); font-size: 10px; line-height: 1.5; }
.subscription-expiry-rule > i { margin-top: 2px; color: #53bfff; }
.subscription-expiry-rule b { display: block; color: #dbe8f8; }
.subscription-expiry-actions { margin-top: 20px; display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.subscription-expiry-actions button, .subscription-expiry-actions a { min-height: 42px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 11px; font-size: 11px; font-weight: 800; }
.subscription-expiry-actions button { margin-right: auto; color: #91a5c1; border: 1px solid #354963; background: transparent; }
.subscription-expiry-actions a { color: #fff !important; border: 1px solid #258dff; background: linear-gradient(135deg, #176cdd, #198eff); text-decoration: none !important; box-shadow: 0 12px 25px rgba(22, 109, 224, .23); }
@keyframes subscriptionOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes subscriptionModalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 1023px) {
  .freecom-main-header-row { gap: 12px !important; }
  .header-subscription-status { min-width: 210px; max-width: 280px; }
  .header-subscription-days small { display: none; }
}
@media (max-width: 767px) {
  .freecom-main-header-inner { padding: 7px 12px !important; }
  .freecom-main-header-row { align-items: center !important; gap: 8px !important; }
  .header-subscription-status { min-width: 0; width: auto; margin: 0; grid-template-columns: 30px minmax(70px, 1fr) auto; }
  .header-subscription-days, .header-subscription-arrow { display: none; }
  .header-subscription-copy small { display: none; }
  .freecom-admin-context { min-width: 0; width: 42px; padding: 5px; }
  .freecom-admin-context > div { display: none; }
  .subscription-expiry-modal { padding: 24px 19px 19px; border-radius: 18px; }
  .subscription-expiry-count strong { font-size: 49px; }
  .subscription-expiry-modal h2 { font-size: 21px; }
  .subscription-expiry-current { grid-template-columns: 1fr; gap: 10px; }
  .subscription-expiry-actions { align-items: stretch; flex-direction: column-reverse; }
  .subscription-expiry-actions button, .subscription-expiry-actions a { width: 100%; }
}
@media (min-width: 768px) and (max-width: 1399px) {
  .header-subscription-status { min-width: 210px; max-width: 260px; grid-template-columns: 30px minmax(84px, 1fr) auto; padding: 6px 8px; gap: 7px; }
  .header-subscription-days, .header-subscription-arrow { display: none; }
}

/* Branded inactive-subscription notification; regular Toastr alerts stay unchanged. */
#toast-container > .toast-error.freecom-subscription-notice,
#toast-container > .toast-error:has(.freecom-subscription-toast) {
  width: 370px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #eaf3ff !important;
  border: 1px solid #2f72c8 !important;
  border-radius: 17px !important;
  background-color: #0d1b31 !important;
  background-image: none !important;
  box-shadow: 0 22px 55px rgba(0, 6, 22, .48), inset 0 1px 0 rgba(255,255,255,.04) !important;
  opacity: 1 !important;
}
#toast-container > .toast-error.freecom-subscription-notice::before,
#toast-container > .toast-error:has(.freecom-subscription-toast)::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(#29c9ff, #1677ff);
}
#toast-container > .toast-error.freecom-subscription-notice:hover,
#toast-container > .toast-error:has(.freecom-subscription-toast):hover {
  box-shadow: 0 25px 64px rgba(0, 6, 22, .56), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
#toast-container > .toast-error.freecom-subscription-notice .toast-message,
#toast-container > .toast-error:has(.freecom-subscription-toast) .toast-message { width: 100%; }
.freecom-subscription-toast {
  position: relative;
  padding: 21px 21px 19px 24px;
  background: radial-gradient(circle at 100% 0, rgba(25, 126, 255, .17), transparent 45%);
}
.freecom-subscription-toast::before {
  content: '\f3ed';
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  display: grid;
  place-items: center;
  color: #77d9ff;
  border: 1px solid rgba(80, 190, 255, .34);
  border-radius: 11px;
  background: rgba(25, 119, 239, .14);
  font-family: 'Font Awesome 5 Free';
  font-size: 16px;
  font-weight: 900;
}
.freecom-subscription-toast-label {
  position: absolute;
  top: 28px;
  left: 74px;
  color: #51caff;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
}
.freecom-subscription-toast strong {
  display: block;
  margin: 0 0 7px;
  color: #f6f9ff;
  font-size: 17px;
  line-height: 1.3;
}
.freecom-subscription-toast p {
  margin: 0;
  color: #91a7c5;
  font-size: 12px;
  line-height: 1.55;
}
.freecom-subscription-toast-action {
  min-height: 42px;
  margin-top: 16px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff !important;
  border: 1px solid rgba(58, 164, 255, .42);
  border-radius: 10px;
  background: linear-gradient(135deg, #126fe4, #198cff);
  box-shadow: 0 10px 22px rgba(18, 111, 228, .22);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none !important;
}
.freecom-subscription-toast-action:hover { color: #fff !important; filter: brightness(1.07); }
.freecom-subscription-toast-action i { font-size: 10px; }

@media (max-width: 480px) {
  #toast-container > .toast-error.freecom-subscription-notice,
  #toast-container > .toast-error:has(.freecom-subscription-toast) {
    width: calc(100vw - 24px) !important;
    margin: 0 12px 8px !important;
  }
  .freecom-subscription-toast { padding: 18px 18px 17px 21px; }
  .freecom-subscription-toast strong { font-size: 15px; }
}

@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; }
}