/* ============================================================================
 * Hassan Brothers design foundation: the REMAP layer.
 * ----------------------------------------------------------------------------
 * Loads after bootstrap, styleBD, modern-theme.css and mobile.css, and after
 * hb-tokens.css / hb-components.css. It re-skins the legacy markup (Bootstrap 3
 * + AdminLTE classes) so every page follows the design tokens in light and
 * dark without per-page edits. Only var(--token) values are used here; the one
 * place a hex would live is tokens.json.
 *
 * The legacy sheets lean on !important, so most rules here do too. Delete this
 * file (and hb-tokens / hb-components) to get the previous look back.
 * ==========================================================================*/

/* ---------------------------------------------------------------- 0. legacy variables
   modern-theme.css and mobile.css read these; point them at the tokens so
   everything that still uses them follows the theme (including dark). */
:root {
  --primary-color: var(--brand-fill);
  --primary-dark: var(--brand-fill-hover);
  --primary-light: var(--brand-100);
  --primary-lighter: var(--brand-50);
  --accent-color: var(--brand-600);
  --secondary-color: var(--surface);
  --text-color: var(--ink);
  --text-light: var(--ink-muted);
  --bg-color: var(--surface-page);
  --bg-gradient: var(--surface-page);
  --glass-bg: var(--surface);
  --glass-bg-light: var(--surface);
  --glass-border: var(--line);
  --shadow-lg: var(--shadow-md);
  --shadow-green: var(--shadow-sm);
  --radius-lg: var(--radius-md);
  --radius-xl: var(--radius-md);
  --transition: all .12s ease;
}

/* ---------------------------------------------------------------- 1. base */
html, body { overflow-x: clip; }
html { background: var(--surface-page); }
body,
body.hold-transition {
  background: var(--surface-page) !important;
  background-attachment: scroll !important;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  color: var(--ink);
}
a { color: var(--brand-600); }
a:hover, a:focus { color: var(--brand-fill-hover); }
.text-muted, small, .small, .help-block { color: var(--ink-muted); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }
.bg-success { background-color: var(--success-tint); }
.bg-danger { background-color: var(--danger-tint); }
.bg-warning { background-color: var(--warning-tint); }
.bg-info { background-color: var(--info-tint); }
hr { border-color: var(--line); }
::selection { background: var(--brand-100); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
::placeholder, .form-control::placeholder { color: var(--ink-muted); opacity: 1; }
code, pre, kbd { font-family: var(--font-mono); }
code { background: var(--surface-sunken); color: var(--ink); border-radius: var(--radius-sm); }
pre { background: var(--surface-sunken); color: var(--ink); border-color: var(--line); }
::-webkit-scrollbar-track { background: var(--surface-sunken); }
::-webkit-scrollbar-thumb { background: var(--line-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }
.well { background: var(--surface-sunken); border-color: var(--line); box-shadow: none; }
.jumbotron { background: var(--surface-sunken); }
.close { color: var(--ink); text-shadow: none; opacity: .6; }
.close:hover, .close:focus { color: var(--ink); opacity: 1; }

/* ---------------------------------------------------------------- 2. page frame */
.content-wrapper,
.right-side {
  background: var(--surface-page) !important;
  background-color: var(--surface-page) !important;
}
.content { padding: 0 var(--space-4) var(--space-5) !important; }
.main-footer {
  background: var(--surface);
  color: var(--ink-muted);
  border-top: 1px solid var(--line);
  backdrop-filter: none;
}
.main-footer a { color: var(--brand-600); }
/* Never cover the page while it loads: the old theme preloader is hidden and the
   slim top progress bar (#mPageLoader, styled in admin_header.php) is the only cue. */
.se-pre-con { display: none !important; }
body .m-page-loader { color: var(--brand-600); }

/* PageHeader: crumbs on top, one title, no icon, no repeated subtitle */
.content-header {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
  margin: 0 !important;
  padding: var(--space-4) var(--space-4) var(--space-3) !important;
}
.content-header .header-icon { display: none; }
.content-header .header-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.content-header .header-title h1 {
  font: 700 22px/28px var(--font-display);
  color: var(--ink);
  margin: 0;
  order: 1;
  text-wrap: balance;
}
.content-header .header-title small { display: none; }
.header-title .breadcrumb,
.content-header .breadcrumb {
  order: 0;
  position: static !important;
  float: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font: 400 13px/18px var(--font-body);
  font-weight: 400;
  color: var(--ink-muted);
}
.header-title .breadcrumb > li > a,
.breadcrumb > li > a { color: var(--brand-600); }
.breadcrumb > .active { color: var(--ink-muted); font-weight: 600; }
.breadcrumb > li + li::before,
.header-title .breadcrumb li:before { color: var(--ink-muted); }
@media screen and (max-width: 767px) {
  .content-header { padding: var(--space-3) var(--space-3) var(--space-2) !important; }
  .content { padding: 0 var(--space-3) var(--space-4) !important; }
  .content-header .header-title h1 { font-size: 20px; line-height: 26px; }
}

/* ---------------------------------------------------------------- 3. header, navbar, sidebar */
.main-header { box-shadow: none; }
.main-header .navbar,
.main-header .navbar.navbar-static-top {
  background: var(--surface) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none;
}
.main-header .logo,
.main-header .logo:hover {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-header .logo .logo-lg,
.main-header .logo .logo-mini { line-height: 1.2; }
.main-header .logo .hb-logo-img { display: block; height: 36px; width: auto; max-width: 100%; margin: 0 auto; }
.main-header .logo .hb-logo-text { font-size: 14px; color: var(--ink); }
.sidebar-mini.sidebar-collapse .main-header .logo .logo-mini { margin: 0; font-size: 14px; }
.main-header .sidebar-toggle {
  color: var(--ink);
  border-right: 1px solid var(--line);
}
.main-header .sidebar-toggle:hover,
.main-header .sidebar-toggle:focus { background: var(--surface-sunken) !important; color: var(--ink) !important; }
.navbar-nav > li > a > i {
  background: var(--surface-sunken);
  border-color: var(--line);
  color: var(--ink);
}
.main-header .m-mobile-brand, .m-mobile-brand { color: var(--ink); font-family: var(--font-display); }
.m-quick-trigger {
  border-color: var(--line-strong) !important;
  background: var(--surface) !important;
  color: var(--brand-600) !important;
}
.m-reload-trigger {
  border-color: var(--line-strong) !important;
  background: var(--surface) !important;
  color: var(--ink-muted) !important;
}
.main-header .m-user-toggle { color: var(--ink) !important; }
.main-header .m-user-toggle:hover,
.main-header .dropdown-user.open > .m-user-toggle { background: var(--brand-50) !important; }
.m-user-avatar { background: var(--brand-fill); color: var(--ink-inverse); }
.m-user-role, .m-user-caret { color: var(--ink-muted); }
.m-navstrip { background: var(--surface-raised); border-color: var(--line); }

.main-sidebar {
  background: var(--surface) !important;
  box-shadow: none;
  border-right: 1px solid var(--line);
  font-family: var(--font-body);
}
.user-panel {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.user-panel .image img { border-color: var(--brand-500); box-shadow: none; }
.user-panel .info p { color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 600; }
.user-panel .info a { color: var(--ink-muted); }
.sidebar-menu > li > a {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  border-left: 3px solid transparent;
}
.sidebar-menu > li > a > i { color: var(--brand-600); }
.sidebar-menu > li > a:hover,
.sidebar-menu > li:hover > a {
  background: var(--brand-50) !important;
  color: var(--brand-600) !important;
  border-left-color: var(--brand-500);
}
.sidebar-menu > li.active > a,
.sidebar-menu > li.active > a:hover {
  background: var(--brand-50) !important;
  color: var(--brand-600) !important;
  border-left-color: var(--brand-fill) !important;
  font-weight: 700;
}
.sidebar-menu > li.active > a::before { background: var(--brand-fill); }
.sidebar-menu li.header { color: var(--ink-muted); border-bottom-color: var(--line); }
.sidebar-menu .treeview-menu,
.sidebar-menu .treeview-menu > li > a { background-color: var(--surface-sunken); }
.sidebar-menu .treeview-menu { background: var(--surface-sunken); }
.sidebar-menu .treeview-menu > li > a { color: var(--ink-muted); background: transparent; }
.sidebar-menu .treeview-menu > li > a:hover,
.sidebar-menu .treeview-menu > li.active > a,
.treeview-menu > li > a:focus,
.treeview-menu > li.active > a { color: var(--brand-600) !important; }
.sidebar-menu .treeview-menu::before { background: var(--line); }
.sidebar-menu .label,
.sidebar-menu .treeview-menu .label-success {
  background: var(--brand-fill) !important;
  color: var(--ink-inverse);
  border-radius: var(--radius-pill) !important;
}
.has-new-features > a::after,
.treeview-menu .new-feature > a::after {
  background: var(--brand-500);
  box-shadow: none;
}

/* ---------------------------------------------------------------- 4. dropdown menus, popovers */
.dropdown-menu,
.main-header .navbar-nav > li.dropdown-user > .dropdown-menu,
.main-header .m-more-menu,
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  backdrop-filter: none;
}
.dropdown-menu > li > a { color: var(--ink) !important; }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.main-header .m-more-menu > li > a.btn:hover {
  background: var(--brand-50) !important;
  color: var(--brand-600) !important;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus { background: var(--brand-100) !important; color: var(--brand-600) !important; }
.dropdown-menu .divider { background: var(--line); }
.dropdown-menu > .dropdown-header { color: var(--ink-muted); font: 600 12px/16px var(--font-body); padding: 6px 20px; }
.main-header .m-more-menu > li > a.btn { color: var(--ink) !important; }
.main-header .m-more-menu > li > a.btn i { color: var(--brand-600); }
.popover { background: var(--surface-raised); border-color: var(--line); color: var(--ink); }
.popover-title { background: var(--surface-sunken); border-color: var(--line); color: var(--ink); }
.tooltip-inner { background: var(--ink); color: var(--surface); }

/* Theme switch (user menu) */
.hb-theme-switch .hb-check { display: inline-block; width: 18px; margin-right: 6px; color: var(--brand-600); visibility: hidden; }
.hb-theme-switch a[aria-checked="true"] .hb-check { visibility: visible; }
.hb-theme-switch a[aria-checked="true"] { font-weight: 700; }
.navbar-nav > .dropdown-user > .dropdown-menu > li.hb-theme-switch > a > i { font-size: 14px; margin-right: 0; }

/* ---------------------------------------------------------------- 5. buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: auto;
  min-height: var(--control-h);
  padding: 6px 16px !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  font: 600 15px/1.2 var(--font-body);
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .12s, border-color .12s, color .12s;
  overflow: visible;
  vertical-align: middle;
}
.btn::before { display: none !important; }
.btn i, .btn .fa, .btn [class^="ti-"], .btn [class^="pe-7s-"] { font-size: 16px; line-height: 1; }
.btn:hover, .btn:focus, .btn:active { transform: none !important; box-shadow: none !important; }
.btn:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.btn[disabled], .btn.disabled, fieldset[disabled] .btn { opacity: .5; cursor: not-allowed; }
.btn-sm, .btn-xs, .btn-group-sm > .btn, .btn-group-xs > .btn {
  min-height: 32px;
  padding: 4px 12px !important;
  font-size: 14px;
}
.btn-xs, .btn-group-xs > .btn { padding: 2px 10px !important; }
.btn-lg, .btn-large, .btn-group-lg > .btn {
  min-height: var(--control-h-lg);
  padding: 8px 24px !important;
  font-size: 16px;
}
.btn-block { display: flex; width: 100%; }
.navbar .btn { margin: 8px 4px; padding: 6px 14px !important; font-size: 14px; }

/* primary: Save, Submit, anything green or blue */
.btn:is(.btn-success, .btn-primary):not(.btn-outline),
.btn:is(.btn-success, .btn-primary):not(.btn-outline):visited {
  background: var(--brand-fill) !important;
  border-color: var(--brand-fill) !important;
  color: var(--ink-inverse) !important;
}
.btn:is(.btn-success, .btn-primary):not(.btn-outline):hover,
.btn:is(.btn-success, .btn-primary):not(.btn-outline):focus,
.btn:is(.btn-success, .btn-primary):not(.btn-outline):active,
.btn:is(.btn-success, .btn-primary):not(.btn-outline).active,
.open > .dropdown-toggle.btn:is(.btn-success, .btn-primary):not(.btn-outline) {
  background: var(--brand-fill-hover) !important;
  border-color: var(--brand-fill-hover) !important;
  color: var(--ink-inverse) !important;
}

/* secondary outline: navigation, print, every other coloured button */
.btn:is(.btn-info, .btn-warning, .btn-default, .btn-purple, .btn-inverse, .btn-secondary, .btn-outline, .btn-custom, .btn-whatsapp):not(.btn-link),
.btn.btn-outline,
.dt-button.btn,
.dataTables_wrapper .dt-buttons .dt-button {
  background: var(--surface) !important;
  border-color: var(--line-strong) !important;
  color: var(--brand-600) !important;
}
.btn:is(.btn-info, .btn-warning, .btn-default, .btn-purple, .btn-inverse, .btn-secondary, .btn-outline, .btn-custom, .btn-whatsapp):not(.btn-link):hover,
.btn:is(.btn-info, .btn-warning, .btn-default, .btn-purple, .btn-inverse, .btn-secondary, .btn-outline, .btn-custom, .btn-whatsapp):not(.btn-link):focus,
.btn:is(.btn-info, .btn-warning, .btn-default, .btn-purple, .btn-inverse, .btn-secondary, .btn-outline, .btn-custom, .btn-whatsapp):not(.btn-link):active,
.btn:is(.btn-info, .btn-warning, .btn-default, .btn-purple, .btn-inverse, .btn-secondary, .btn-outline, .btn-custom, .btn-whatsapp):not(.btn-link).active,
.btn.btn-outline:hover,
.btn.btn-outline:focus,
.dt-button.btn:hover,
.dataTables_wrapper .dt-buttons .dt-button:hover {
  background: var(--brand-100) !important;
  border-color: var(--line-strong) !important;
  color: var(--brand-600) !important;
}
.btn.btn-success.btn-outline:hover,
.btn.btn-primary.btn-outline:hover { background: var(--brand-100) !important; color: var(--brand-600) !important; }

/* danger: outline everywhere, solid only on a modal's confirm */
.btn.btn-danger,
.btn.btn-danger-custom {
  background: var(--surface) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}
.btn.btn-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger:active { background: var(--danger-tint) !important; color: var(--danger) !important; }
.modal .btn.btn-danger,
.modal-footer .btn.btn-danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: var(--ink-inverse) !important;
}
.modal .btn.btn-danger:hover,
.modal .btn.btn-danger:focus { background: var(--danger) !important; filter: brightness(.92); color: var(--ink-inverse) !important; }

.btn.btn-link {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--brand-600) !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.btn.btn-link:hover { text-decoration: underline; }

/* grouped buttons and DataTables export group */
.btn-group > .btn, .btn-group-vertical > .btn { border-radius: 0 !important; }
.btn-group > .btn:first-child { border-top-left-radius: var(--radius-sm) !important; border-bottom-left-radius: var(--radius-sm) !important; }
.btn-group > .btn:last-child { border-top-right-radius: var(--radius-sm) !important; border-bottom-right-radius: var(--radius-sm) !important; }
.btn-group > .btn + .btn { margin-left: -1px; }
.dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper .dt-buttons .btn {
  min-height: 32px;
  padding: 4px 12px !important;
  font-size: 14px;
  margin: 0 !important;
}

/* the quick-action buttons in the top bar */
.navbar .btn.btn-success.btn-outline { color: var(--brand-600) !important; }

/* ---------------------------------------------------------------- 6. form controls */
.form-control,
select.form-control,
input.form-control {
  height: var(--control-h) !important;
  padding: 0 12px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
  font: 400 15px/1.3 var(--font-body);
  font-variant-numeric: tabular-nums;
  box-shadow: none !important;
}
textarea.form-control { height: auto !important; min-height: 80px; padding: 8px 12px !important; }
.form-control:focus {
  background: var(--surface) !important;
  border-color: var(--brand-600) !important;
  color: var(--ink) !important;
  outline: 2px solid var(--brand-600);
  outline-offset: 0;
  box-shadow: none !important;
}
.form-control[readonly],
.form-control[disabled],
fieldset[disabled] .form-control {
  background: var(--surface-sunken) !important;
  border-color: var(--line) !important;
  color: var(--ink-muted) !important;
  opacity: 1;
}
input.error, select.error, textarea.error, .form-control.error, .has-error .form-control {
  border-color: var(--danger) !important;
}
label.error, .has-error .help-block, .has-error .control-label, .text-danger.error { color: var(--danger); font: 400 12px/16px var(--font-body); }
.control-label, label { color: var(--ink); font-weight: 600; }
.col-form-label, .form-group > label { font-size: 13px; line-height: 18px; }
select, option { background-color: var(--surface); color: var(--ink); }
input[type="date"], input[type="time"], input[type="number"], input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"] { color-scheme: inherit; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-fill); }
input:focus, textarea:focus, select:focus { color: var(--ink) !important; }
.input-group-addon {
  background: var(--surface-sunken);
  border: 1px solid var(--line-strong);
  color: var(--ink-muted);
  border-radius: var(--radius-sm);
}
.input-group .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group-addon:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-addon:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-btn > .btn { height: var(--control-h); }
.checkbox label::before { background-color: var(--surface); border-color: var(--line-strong); }
.checkbox label::after { color: var(--ink); }
.checkbox-toggle label, .toggle-option { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-muted); }
.toggle-option:hover { background: var(--brand-50); border-color: var(--brand-600); }
.toggle-switch input[type="radio"]:checked + .toggle-option,
.toggle-switch input[type="checkbox"]:checked + .toggle-option,
.checkbox-toggle input[type="checkbox"]:checked + label {
  background: var(--brand-50);
  border-color: var(--brand-600);
  color: var(--brand-600);
  box-shadow: none;
}
.checkbox-toggle label::before { border-color: var(--line-strong); }
.checkbox-toggle input[type="checkbox"]:checked + label::before { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--ink-inverse); }

/* Select2 (single, multiple, dropdown) at control height */
html body .select2-container { width: 100% !important; }
html body .select2-container--default .select2-selection--single,
html body .select2-container--default .select2-selection--multiple {
  background: var(--surface);
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  min-height: var(--control-h);
  color: var(--ink);
}
html body .select2-container--default .select2-selection--single {
  height: var(--control-h) !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
}
html body .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink);
  line-height: 1.3 !important;
  padding: 0 32px 0 12px;
  width: 100%;
  font-size: 15px;
}
html body .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ink-muted); }
html body .select2-container--default .select2-selection--single .select2-selection__arrow { height: var(--control-h) !important; top: 0; right: 4px; }
html body .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--ink-muted); }
html body .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-bottom-color: var(--ink-muted); }
html body .select2-container--default .select2-selection--single .select2-selection__clear { color: var(--ink-muted); margin-right: 8px; }
html body .select2-container--default .select2-selection--multiple { padding: 2px 6px; }
html body .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--brand-50);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-sm);
}
html body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--ink-muted); }
html body .select2-container--default.select2-container--focus .select2-selection--single,
html body .select2-container--default.select2-container--focus .select2-selection--multiple,
html body .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--brand-600) !important;
  outline: 2px solid var(--brand-600);
  outline-offset: 0;
}
html body .select2-container--default.select2-container--disabled .select2-selection--single { background: var(--surface-sunken); }
html body .select2-dropdown {
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  color: var(--ink);
}
html body .select2-container--default .select2-search--dropdown .select2-search__field,
html body .select2-search__field {
  background: var(--surface) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm);
  color: var(--ink) !important;
}
html body .select2-container--default .select2-results__option { color: var(--ink) !important; background: transparent; }
html body .select2-container--default .select2-results__option--highlighted[aria-selected],
html body .select2-container--default .select2-results__option--highlighted {
  background: var(--brand-50) !important;
  color: var(--brand-600) !important;
}
html body .select2-container--default .select2-results__option[aria-selected=true] {
  background: var(--brand-100) !important;
  color: var(--ink) !important;
}

/* jQuery UI (datepicker, autocomplete) */
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: var(--font-body); }
.ui-widget-content, .ui-datepicker, .ui-autocomplete, .ui-menu {
  background: var(--surface-raised) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.ui-widget-header { background: var(--surface-sunken) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
.ui-datepicker .ui-datepicker-header { border-radius: var(--radius-sm); }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus,
.ui-menu .ui-state-active, .ui-menu-item:hover, .ui-menu-item .ui-state-focus {
  background: var(--brand-50) !important;
  border-color: var(--brand-600) !important;
  color: var(--brand-600) !important;
}
.ui-state-active, .ui-widget-content .ui-state-active {
  background: var(--brand-fill) !important;
  border-color: var(--brand-fill) !important;
  color: var(--ink-inverse) !important;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight { background: var(--warning-tint) !important; border-color: var(--warning) !important; color: var(--ink) !important; }
.ui-datepicker-today a, .ui-datepicker-today .ui-state-default { border-color: var(--brand-600) !important; }
.ui-icon { filter: none; }
/* Autocomplete menu sizes to its results: no tall empty panel under a single hit. The live-region div
   jQuery UI adds for screen readers must never paint (it was picking up the widget border). */
.ui-autocomplete { height: auto !important; min-height: 0 !important; max-height: 320px; overflow-y: auto; overflow-x: hidden; padding: 4px; }
.ui-autocomplete .ui-menu-item { height: auto !important; min-height: 0 !important; margin: 0; }
.ui-helper-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; background: none !important; box-shadow: none !important; }
html[data-theme="dark"] .ui-icon { filter: invert(1) brightness(1.2); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .ui-icon { filter: invert(1) brightness(1.2); } }

/* ---------------------------------------------------------------- 7. cards (panels, boxes) */
.panel, .panel-default, .panel-bd, .box, .card,
.panel-success, .panel-info, .panel-warning, .panel-danger, .panel-primary, .panel-inverse {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none !important;
  margin-bottom: var(--space-5) !important;
  color: var(--ink);
}
.panel-heading,
.panel-bd > .panel-heading,
.panel-default > .panel-heading,
.panel-success > .panel-heading,
.panel-info > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger > .panel-heading,
.panel-primary > .panel-heading,
.panel-inverse > .panel-heading,
.box-header, .card-header {
  display: block;
  background: transparent !important;
  color: var(--ink) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  padding: var(--space-4) var(--space-5) !important;
}
.panel-bd .panel-heading::before { display: none; }
.panel-heading h1, .panel-heading h2, .panel-heading h3, .panel-heading h4, .panel-heading h5, .panel-heading h6,
.panel-heading .panel-title, .panel-heading .panel-title h4,
.panel-heading .panel-title h3, .panel-heading .panel-title h5,
.box-title, .card-title {
  font: 700 16px/22px var(--font-display) !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
  margin: 0;
  text-transform: none;
}
.panel-heading .panel-title i, .panel-heading h4 i { color: var(--brand-600) !important; }
.panel-heading .view-header .header-title h3 { font: 700 18px/24px var(--font-display); }
.panel-body, .box-body, .card-body, .card-block { padding: var(--space-5) !important; color: var(--ink); }
.panel-footer, .box-footer, .card-footer {
  background: var(--surface-sunken) !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  padding: var(--space-3) var(--space-5);
}
.panel > .table, .panel > .table-responsive > .table { margin-bottom: 0; }
@media screen and (max-width: 575px) {
  .panel-body, .box-body, .card-body { padding: var(--space-4) !important; }
  .panel-heading, .box-header, .card-header { padding: var(--space-3) var(--space-4) !important; }
}

/* Dashboard tiles from modern-theme.css */
.statistic-box { background: transparent !important; }
.statistic-box h2, .dashboard-stat-card .value { color: var(--ink); font-family: var(--font-display); }
.statistic-box .count-number { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }
.statistic-box .small, .dashboard-stat-card .label { color: var(--ink-muted); text-transform: none; letter-spacing: 0; font-size: 13px; }
.statistic-box .small a { color: var(--ink); }
.statistic-box::before { display: none; }
.statistic-box:hover, .dashboard-stat-card:hover, .stat-card-modern:hover { transform: none; box-shadow: var(--shadow-sm) !important; }
.dashboard-stat-card { background: var(--surface); border: 1px solid var(--line); }
.dashboard-stat-card .icon { background: var(--brand-50); }
.dashboard-stat-card .icon i { color: var(--brand-600); }
.sparkline1 { background: var(--brand-50); animation: none; opacity: 1; }
.stat-card-modern { border: 1px solid var(--line) !important; }
.stat-card-modern .apexcharts-tooltip {
  background: var(--surface-raised) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ---------------------------------------------------------------- 8. tables */
.table-responsive {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
  overflow-x: auto;
}
.table {
  background: var(--surface) !important;
  color: var(--ink);
  font: 400 14px/20px var(--font-body);
  font-variant-numeric: tabular-nums;
}
.table > thead > tr > th,
.table thead th,
table.dataTable thead th,
table.dataTable thead td {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-sunken) !important;
  color: var(--ink-muted) !important;
  font: 600 13px/18px var(--font-body) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 10px var(--space-3) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  white-space: nowrap;
}
.table > tbody > tr > td,
.table > tfoot > tr > td,
.table tbody td {
  min-height: var(--row-h);
  height: var(--row-h);
  padding: 6px var(--space-3) !important;
  vertical-align: middle;
  color: var(--ink);
  border-top: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-color: var(--line) !important;
}
.table > tbody > tr > th { color: var(--ink); border-color: var(--line) !important; }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td, .table-bordered > tbody > tr > th { border-color: var(--line) !important; }
.table > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > td { background: var(--brand-50) !important; }
.table tbody tr:hover { background: transparent !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--surface-sunken); }
.table-striped > tbody > tr:nth-of-type(odd) > td { background: transparent; }
.table > tfoot > tr > td, .table tfoot th { font-weight: 700; background: var(--surface-sunken); }
.table > tbody > tr.success > td, .table > tbody > tr > td.success { background: var(--success-tint) !important; }
.table > tbody > tr.danger > td, .table > tbody > tr > td.danger { background: var(--danger-tint) !important; }
.table > tbody > tr.warning > td, .table > tbody > tr > td.warning { background: var(--warning-tint) !important; }
.table > tbody > tr.info > td, .table > tbody > tr > td.info { background: var(--info-tint) !important; }
.table .btn, .table .btn-sm { min-height: 32px; }
table.dataTable { border-collapse: collapse !important; }
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { color: var(--ink-muted); }

/* DataTables wrapper: length, filter, info, paginate, buttons */
.dataTables_wrapper { color: var(--ink); }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: var(--ink-muted); font-size: 13px; }
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label { font-weight: 600; color: var(--ink-muted); }
div.dataTables_wrapper div.dataTables_length select { width: 80px; padding: 0 8px !important; }
div.dataTables_wrapper div.dataTables_filter input { width: 220px; max-width: 100%; margin-left: 8px; }
div.dataTables_wrapper div.dataTables_processing {
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.dataTables_wrapper .dt-buttons { margin-bottom: var(--space-2); }
.dataTables_wrapper .dt-buttons .dt-button:not(:first-child),
.dataTables_wrapper .dt-buttons .btn:not(:first-child) { margin-left: -1px !important; }

/* Pagination */
.pagination > li > a,
.pagination > li > span {
  background: var(--surface);
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink);
  margin: 0 2px;
  min-width: 32px;
  min-height: 32px;
  padding: 5px 10px;
  text-align: center;
}
.pagination > li > a:hover,
.pagination > li > a:focus { background: var(--brand-50); color: var(--brand-600); border-color: var(--line-strong) !important; }
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span {
  background: var(--brand-fill) !important;
  border-color: var(--brand-fill) !important;
  color: var(--ink-inverse) !important;
}
.pagination > .disabled > a,
.pagination > .disabled > span { background: var(--surface-sunken); color: var(--ink-muted); opacity: .7; }
.pager li > a { background: var(--surface); border-color: var(--line); color: var(--ink); }

/* Cards on phones (mobile.css .table.mobile-cards) */
.table.mobile-cards > tbody > tr { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.table.mobile-cards > tbody > tr:hover > td { background: transparent !important; }
.table.mobile-cards > tbody > tr > td { height: auto; }
.table.mobile-cards > tbody > tr > td::before { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink-muted); }
.table.mobile-cards td.m-due-pos { color: var(--danger); }
.table.mobile-cards.m-ledger > tbody > tr[style*="f0f8ff"] { background: var(--brand-50); }
.table.mobile-cards.m-invoice-list > tbody > tr > td.m-credit-bill strong { background: var(--info-tint); color: var(--info); text-transform: none; letter-spacing: 0; font-size: 12px; }
@media screen and (max-width: 767px) {
  .table-responsive { border-radius: var(--radius-md); }
  .table-responsive.m-has-cards { border: 0; background: transparent; }
}

/* ---------------------------------------------------------------- 9. badges, labels, alerts */
.label, .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font: 600 12px/1 var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  border: 0;
  white-space: nowrap;
  background: var(--surface-sunken);
  color: var(--ink-muted);
}
.label-success, .badge-success, .label-primary, .label-success-outline, .treeview-menu .label-success {
  background: var(--success-tint) !important;
  color: var(--success) !important;
}
.label-danger, .badge-danger { background: var(--danger-tint) !important; color: var(--danger) !important; }
.label-warning, .badge-warning { background: var(--warning-tint) !important; color: var(--warning) !important; }
.label-info, .badge-info { background: var(--info-tint) !important; color: var(--info) !important; }
.label-default, .badge-default { background: var(--surface-sunken) !important; color: var(--ink-muted) !important; }
.label-success-outline { border: 1px solid var(--success); }
.sidebar-menu .label-success { background: var(--brand-fill) !important; color: var(--ink-inverse) !important; }

.alert {
  display: block;
  padding: var(--space-3) var(--space-4) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px;
  line-height: 20px;
  backdrop-filter: none;
  color: var(--ink);
}
.alert a { color: var(--brand-600); font-weight: 600; }
.alert .close { color: var(--ink); }
.alert-success { background: var(--success-tint) !important; border-color: var(--success) !important; color: var(--ink) !important; }
.alert-danger { background: var(--danger-tint) !important; border-color: var(--danger) !important; color: var(--ink) !important; }
.alert-warning { background: var(--warning-tint) !important; border-color: var(--warning) !important; color: var(--ink) !important; }
.alert-info { background: var(--info-tint) !important; border-color: var(--info) !important; color: var(--ink) !important; }
.alert-success strong, .alert-success .fa { color: var(--success); }
.alert-danger strong, .alert-danger .fa { color: var(--danger); }
.alert-warning strong, .alert-warning .fa { color: var(--warning); }
.alert-info strong, .alert-info .fa { color: var(--info); }

/* ---------------------------------------------------------------- 10. modals */
.modal-content {
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  backdrop-filter: none;
}
.modal-header {
  background: transparent;
  border-bottom: 1px solid var(--line);
  padding: var(--space-4) var(--space-5);
}
.modal-title { font: 700 18px/24px var(--font-display); text-align: left; color: var(--ink); }
.modal-body { padding: var(--space-5); color: var(--ink); }
.modal-footer {
  background: transparent;
  border-top: 1px solid var(--line);
  padding: var(--space-3) var(--space-5);
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.modal-footer .btn + .btn { margin-left: 0; }
.modal-backdrop.in { opacity: .5; }
.modal-success .modal-header, .modal-primary .modal-header, .modal-warning .modal-header, .modal-danger .modal-header { background: transparent; }
.modal-success .modal-header .modal-title, .modal-primary .modal-header .modal-title,
.modal-warning .modal-header .modal-title, .modal-danger .modal-header .modal-title { color: var(--ink); }
.md-modal .md-content { background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-md); }
.md-overlay { background: var(--ink); }
.sweet-alert, .swal2-popup { background: var(--surface-raised); color: var(--ink); }

/* ---------------------------------------------------------------- 11. tabs, lists, misc bootstrap */
.nav-tabs { border-bottom: 1px solid var(--line); }
.nav-tabs > li > a { color: var(--ink-muted); border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-color: transparent; font-weight: 600; }
.nav-tabs > li > a:hover { background: var(--brand-50); border-color: var(--line); color: var(--brand-600); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus { background: var(--surface); color: var(--brand-600); border-color: var(--line); border-bottom-color: transparent; }
.nav-pills > li > a { color: var(--ink-muted); border-radius: var(--radius-pill); font-weight: 600; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover { background: var(--brand-fill); color: var(--ink-inverse); }
.tab-content { color: var(--ink); }
.list-group-item { background: var(--surface); border-color: var(--line); color: var(--ink); }
a.list-group-item:hover { background: var(--brand-50); color: var(--brand-600); }
.list-group-item.active, .list-group-item.active:hover { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--ink-inverse); }
.progress { background: var(--surface-sunken); box-shadow: none; }
.progress-bar { background: var(--brand-fill); }
.breadcrumb { background: transparent; }
.page-header { border-color: var(--line); }
.thumbnail { background: var(--surface); border-color: var(--line); }
.img-thumbnail { background: var(--surface); border-color: var(--line); }
.nav > li > a:hover, .nav > li > a:focus { background: var(--surface-sunken); }

/* ---------------------------------------------------------------- 12. mobile.css leftovers with hard-coded light colours */
@media screen and (max-width: 767px) {
  .navbar.navbar-static-top .btn-success {
    background: var(--surface) !important;
    border-color: var(--line-strong) !important;
    color: var(--brand-600) !important;
  }
  .content.m-entry-page .m-entry-toggle {
    background: var(--brand-50) !important;
    border: 1px solid var(--line-strong) !important;
    color: var(--brand-600) !important;
  }
  .content.m-entry-page .m-primary-actions .btn,
  .content.m-entry-page .m-filter-toggle {
    background: var(--surface) !important;
    border: 1px solid var(--line-strong) !important;
    color: var(--brand-600) !important;
  }
  .content.m-entry-page .m-primary-actions .btn i,
  .content.m-entry-page .m-filter-toggle i { color: var(--brand-600); }
  .m-entry-row .col-form-label { color: var(--ink); }
}
.m-sticky-summary { background: var(--surface-raised) !important; border-top-color: var(--line) !important; box-shadow: var(--shadow-md) !important; }

/* Misc modern-theme / header inline helpers */
.m-primary-actions { margin-bottom: var(--space-3); }
.m-primary-actions .btn { margin: 0 var(--space-1) var(--space-1) 0; }
.m-b-5 { margin-bottom: var(--space-2); }

/* Print: the hb-tokens print block restores light values; keep chrome off paper */
@media print {
  html, body, .content-wrapper { background: var(--surface) !important; color: var(--ink) !important; }
  .panel, .box, .card { box-shadow: none !important; }
}

/* ---------------------------------------------------------------- 13. login and standalone pages */
.container-center { max-width: 440px; margin: 8vh auto 0; padding: var(--space-4); }
.hb-auth-brand { text-align: center; padding-top: 8vh; padding-left: var(--space-4); padding-right: var(--space-4); }
.hb-auth-logo { display: inline-block; height: 64px; width: auto; max-width: 100%; }
.hb-auth-brand + .container-center { margin-top: var(--space-4); }
.container-center .panel { margin-bottom: 0 !important; }
.container-center .panel-heading { padding: var(--space-4) var(--space-5) !important; }
.container-center .view-header { margin: 0; }
.container-center .view-header .header-icon { display: none; }
.container-center .view-header .header-title { margin-left: 0; }
.container-center .view-header .header-title h3 { font: 700 20px/26px var(--font-display); color: var(--ink); margin: 0 0 2px; }
.container-center .view-header .header-title small { display: block; color: var(--ink-muted); font-weight: 400; font-size: 13px; padding-left: 0; }
.container-center .help-block { color: var(--ink-muted); margin-bottom: 0; }
.container-center .form-group { margin-bottom: var(--space-4); }
.container-center .btn-success { min-height: var(--control-h); }
body.hb-standalone { background: var(--surface-page) !important; }

/* Page-protection pages are full standalone HTML with their own inline colours */
body.hb-standalone .protection-card {
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--ink);
}
body.hb-standalone .protection-card::before { background: var(--brand-fill) !important; }
body.hb-standalone .shield-icon { color: var(--brand-600) !important; animation: none !important; }
body.hb-standalone .protection-title { color: var(--ink) !important; font-family: var(--font-display); }
body.hb-standalone .protection-subtitle { color: var(--ink-muted) !important; }
body.hb-standalone .protection-card input[type="password"],
body.hb-standalone .protection-card input[type="text"] {
  background: var(--surface) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
}
body.hb-standalone .protection-card .btn,
body.hb-standalone .protection-card button[type="submit"] {
  background: var(--brand-fill) !important;
  border-color: var(--brand-fill) !important;
  color: var(--ink-inverse) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}

/* Page-protection gate: stack the logo over the card, restyle the remaining inline pieces */
body.hb-standalone .hb-gate-logo { margin: 0 0 var(--space-4); }
body.hb-standalone:has(.protection-card) { flex-direction: column; font-family: var(--font-body) !important; color: var(--ink) !important; }
body.hb-standalone .page-info { background: var(--surface-sunken) !important; border-left-color: var(--brand-fill) !important; }
body.hb-standalone .page-info strong { color: var(--ink) !important; }
body.hb-standalone .page-info code { background: var(--surface) !important; color: var(--ink) !important; font-family: var(--font-mono) !important; }
body.hb-standalone .form-group label { color: var(--ink) !important; }
body.hb-standalone .form-control { padding: 0 45px 0 12px !important; }
body.hb-standalone .btn-toggle { color: var(--ink-muted) !important; }
body.hb-standalone .btn-toggle:hover { color: var(--brand-600) !important; }
body.hb-standalone .btn-primary { width: 100%; background: var(--brand-fill) !important; border-color: var(--brand-fill) !important; color: var(--ink-inverse) !important; }
body.hb-standalone .btn-secondary { background: var(--surface) !important; border: 1px solid var(--line-strong) !important; color: var(--brand-600) !important; margin-top: var(--space-4); }
body.hb-standalone .alert-danger { background: var(--danger-tint) !important; color: var(--ink) !important; border: 1px solid var(--danger) !important; }
body.hb-standalone .help-text, body.hb-standalone .debug-info { color: var(--ink-muted) !important; }
body.hb-standalone .debug-info { background: var(--surface-sunken) !important; }
/* the gate shipped emoji fallbacks for icons; use the Font Awesome glyphs instead */
body.hb-standalone .fa-shield::before { content: "\f132"; }
body.hb-standalone .fa-lock::before { content: "\f023"; }
body.hb-standalone .fa-eye::before { content: "\f06e"; }
body.hb-standalone .fa-eye-slash::before { content: "\f070"; }
body.hb-standalone .fa-unlock::before { content: "\f09c"; }
body.hb-standalone .fa-home::before { content: "\f015"; }
body.hb-standalone .fa-info-circle::before { content: "\f05a"; }
body.hb-standalone .fa-exclamation-triangle::before { content: "\f071"; }
body.hb-standalone .fa-spinner::before { content: "\f110"; }

/* cmxform.css paints every focused input tomato red (input:focus { background: tomato }),
   which reads as an error. Focus keeps the field's own surface; readonly stays sunken. */
input:focus, textarea:focus, select:focus { background-color: var(--surface) !important; color: var(--ink); }
input[readonly]:focus, textarea[readonly]:focus { background-color: var(--surface-sunken) !important; }

/* One-click Switch user in the top bar (beside the name menu). */
.main-header .navbar-custom-menu > .navbar-nav { display: flex; align-items: center; flex-wrap: nowrap; }
.main-header .navbar-custom-menu > .navbar-nav > li { float: none; }
.main-header .m-switch-li { display: flex; align-items: center; }
.main-header .m-switch-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin: 0 8px 0 0; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: 600 14px/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.main-header .m-switch-btn:hover { background: var(--brand-50); border-color: var(--brand-fill); }
.main-header .m-switch-btn:focus-visible { outline: 2px solid var(--brand-fill); outline-offset: 2px; }
.main-header .m-switch-btn .fa { color: var(--brand-fill); }
@media screen and (max-width: 991px) { .main-header .m-switch-btn { padding: 0 10px; margin-right: 4px; } .main-header .m-switch-label { display: none; } }

/* ===================================================== Sidebar (2026-11 redesign)
   Grouped menu (Sales, Stock, Money, Reports, Setup), quiet rows, one clear highlight for where you are.
   The name and photo panel is gone: the top bar already shows who is signed in. */
.main-sidebar .user-panel { display: none !important; }
.main-sidebar .sidebar { padding: 8px 0 24px; }
.main-sidebar .sidebar-menu { padding: 0; }
.main-sidebar .sidebar-menu > li { margin: 1px 10px; border-radius: 10px; overflow: visible; }
.main-sidebar .sidebar-menu > li.header.hb-nav-group {
  margin: 16px 10px 4px; padding: 0 12px; background: transparent !important; border: 0;
  color: var(--ink-muted); font: 700 11px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden;
}
.main-sidebar .sidebar-menu > li > a {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px !important; margin: 0;
  border: 0 !important; border-radius: 10px; color: var(--ink); background: transparent !important;
  font: 600 14px/20px var(--font-body);
}
.main-sidebar .sidebar-menu > li > a > i:first-child {
  flex: 0 0 20px; width: 20px; margin: 0; text-align: center; font-size: 16px; color: var(--ink-muted);
}
.main-sidebar .sidebar-menu > li > a > span:not(.pull-right-container) { flex: 1 1 auto; }
.main-sidebar .sidebar-menu > li > a .pull-right-container { position: static; margin-left: auto; display: flex; align-items: center; }
.main-sidebar .sidebar-menu > li > a .fa-angle-left { color: var(--ink-muted); font-size: 14px; transition: transform .15s ease; }
.main-sidebar .sidebar-menu > li.menu-open > a .fa-angle-left,
.main-sidebar .sidebar-menu > li.active > a .fa-angle-left { transform: rotate(-90deg); }
.main-sidebar .sidebar-menu > li > a:hover,
.main-sidebar .sidebar-menu > li:hover > a { background: var(--surface-sunken) !important; color: var(--ink) !important; }
.main-sidebar .sidebar-menu > li > a:hover > i:first-child { color: var(--brand-600); }
.main-sidebar .sidebar-menu > li.active > a,
.main-sidebar .sidebar-menu > li.active > a:hover {
  background: var(--brand-50) !important; color: var(--brand-600) !important; font-weight: 700;
}
.main-sidebar .sidebar-menu > li.active > a > i:first-child { color: var(--brand-fill); }
.main-sidebar .sidebar-menu > li.active > a::before { display: none; }
.main-sidebar .sidebar-menu > li > a:focus-visible { outline: 2px solid var(--brand-fill); outline-offset: -2px; }

/* Sub-menus: a thin guide line, smaller quiet links, the open page in brand colour with a dot. */
.main-sidebar .sidebar-menu .treeview-menu {
  margin: 2px 0 6px 21px !important; padding: 2px 0 2px 10px !important; background: transparent !important;
  border-left: 1px solid var(--line); border-radius: 0;
}
.main-sidebar .sidebar-menu .treeview-menu .treeview-menu { margin-left: 8px !important; }
.main-sidebar .sidebar-menu .treeview-menu > li > a {
  display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 10px !important; border-radius: 8px;
  color: var(--ink-muted) !important; background: transparent !important; font: 500 13.5px/18px var(--font-body);
}
.main-sidebar .sidebar-menu .treeview-menu > li > a > i { width: auto; font-size: 13px; color: inherit; }
.main-sidebar .sidebar-menu .treeview-menu > li > a:hover { background: var(--surface-sunken) !important; color: var(--ink) !important; }
.main-sidebar .sidebar-menu .treeview-menu > li > a.is-current,
.main-sidebar .sidebar-menu .treeview-menu > li > a.is-current:hover { color: var(--brand-600) !important; font-weight: 700; background: var(--brand-50) !important; }
.main-sidebar .sidebar-menu .treeview-menu > li > a.is-current::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-fill); flex: 0 0 6px; margin-left: -2px;
}
/* The old tick lines before sub-menu links. */
.main-sidebar .sidebar-menu .treeview-menu > li::before,
.main-sidebar .sidebar-menu .treeview-menu::before { display: none !important; content: none !important; }
/* Collapsed sidebar (desktop mini mode): headings would only take space. */
.sidebar-collapse .main-sidebar .sidebar-menu > li.header.hb-nav-group { display: none; }

/* ===================================================== Page headers (2026-11)
   The sidebar marks where you are, so the "Home / Invoice / ..." trail is not shown; the title sits on one row with the
   page tabs and buttons. Old-style pages lose the icon, the repeated small title and the trail too. */
.hb-crumbs { display: none !important; }
.hb .hb-page-head { align-items: center; gap: var(--space-2) var(--space-3); }
.hb .hb-page-head .hb-page-title { margin: 0; }
.hb .hb-page-actions { align-items: center; }
.content-header .breadcrumb, .content-header .header-icon, .content-header .header-title small { display: none !important; }
.content-header { padding-top: 12px !important; padding-bottom: 4px !important; min-height: 0 !important; }
.content-header .header-title { margin-left: 0 !important; padding-left: 0 !important; }
.content-header .header-title h1 { margin: 0 !important; font: 700 22px/30px var(--font-display) !important; }

/* Date filters: date boxes sized to a date, not to the whole row. */
.hb-rp-filter .hb-field input[type="date"], .hb-filter .hb-field input[type="date"] { max-width: 170px; }
.hb-rp-filter--compact .hb-field { flex: 0 0 auto !important; }
input[type="date"] { cursor: pointer; }

/* Bill page: one action bar above the bill and slips. */
.hb-bill-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.hb-bill-actions__group { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.hb-bill-actions__spacer { flex: 1 1 auto; }
.hb-bill-actions__wa .fa { color: #25D366; }
@media print { .hb-bill-actions { display: none !important; } }

/* Top bar quick actions: no "More" menu; when they do not fit, icons only (the name shows on hover). */
@media (min-width: 768px) {
  .main-header .m-navstrip.is-compact > .btn .m-qa-label { display: none; }
  .main-header .m-navstrip.is-compact > .btn { padding-left: 10px; padding-right: 10px; }
}
.main-header #mMore { display: none !important; }

/* ===================================================== Table paging and search (2026-11)
   One clean box per page button (the list item and its link both drew a border), and a search box wide enough
   for its hint. Applies to every DataTables list. */
.dataTables_wrapper .dataTables_paginate .pagination { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.dataTables_wrapper .dataTables_paginate li.paginate_button,
.dataTables_wrapper .dataTables_paginate li.paginate_button:hover { border: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; }
.dataTables_wrapper .dataTables_paginate li.paginate_button > a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px !important; margin: 0 !important;
  border: 1px solid var(--line-strong) !important; border-radius: 8px !important; background: var(--surface) !important; color: var(--ink) !important;
  font: 600 14px/1 var(--font-body); box-shadow: none !important; float: none;
}
.dataTables_wrapper .dataTables_paginate li.paginate_button > a:hover { background: var(--surface-sunken) !important; }
.dataTables_wrapper .dataTables_paginate li.paginate_button.active > a { background: var(--brand-fill) !important; border-color: var(--brand-fill) !important; color: var(--ink-inverse) !important; }
.dataTables_wrapper .dataTables_paginate li.paginate_button.disabled > a { color: var(--ink-muted) !important; opacity: .55; cursor: default; }
.dataTables_wrapper .dataTables_paginate li.paginate_button.ellipsis > a { border-color: transparent !important; background: transparent !important; min-width: 20px; padding: 0 4px !important; }
.dataTables_wrapper .dataTables_filter label { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 14px/20px var(--font-body); color: var(--ink-muted); }
.dataTables_wrapper .dataTables_filter input { width: 340px !important; max-width: 100%; margin: 0 !important; }
@media screen and (max-width: 600px) { .dataTables_wrapper .dataTables_filter label { display: flex; width: 100%; } .dataTables_wrapper .dataTables_filter input { width: 100% !important; flex: 1 1 auto; } }

/* Buttons that are links: the global "a:hover { colour }" rule outranked the button's own text colour, so a filled
   button's text turned the same green as the button on hover. Each button keeps its own text colour on hover/focus. */
a.hb-btn--primary:hover, a.hb-btn--primary:focus, a.hb-btn--primary:visited,
a.hb-btn--danger-solid:hover, a.hb-btn--danger-solid:focus, a.hb-btn--danger-solid:visited { color: var(--ink-inverse); text-decoration: none; }
a.hb-btn--secondary:hover, a.hb-btn--secondary:focus, a.hb-btn--secondary:visited { color: var(--brand-600); text-decoration: none; }
a.hb-btn--ghost:hover, a.hb-btn--ghost:focus { color: var(--ink); text-decoration: none; }
a.hb-btn--ghost:visited { color: var(--ink-muted); }
a.hb-btn--danger:hover, a.hb-btn--danger:focus, a.hb-btn--danger:visited { color: var(--danger); text-decoration: none; }
a.btn.btn-success:not(.btn-outline):hover, a.btn.btn-success:not(.btn-outline):focus,
a.btn.btn-primary:not(.btn-outline):hover, a.btn.btn-primary:not(.btn-outline):focus,
a.btn.btn-danger:hover, a.btn.btn-danger:focus, a.btn.btn-info:hover, a.btn.btn-info:focus { color: #fff; }

/* Dropdowns (Select2): no "×" clear button on single choices (pick another option instead), and the same height and
   arrow position as the other boxes. */
html body .select2-container--default .select2-selection--single .select2-selection__clear { display: none !important; }
html body .select2-container--default .select2-selection--single { height: var(--control-h, 40px) !important; display: flex; align-items: center; }
html body .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: normal !important; padding-left: 12px !important; padding-right: 32px !important; flex: 1 1 auto; }
html body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; top: 0 !important; right: 8px !important; display: flex; align-items: center; }

/* ===================================================== Tables: one spacing system for every list (2026-11)
   Card padding, the controls row above a table (Show / Copy-CSV-Print / Search), the table, and the info + page buttons
   below it all use the same gaps; cells share one padding. Covers the older panel pages and the newer hb-table pages. */
.content .panel { margin-bottom: 16px; }
.content .panel > .panel-heading { padding: 14px 20px; }
.content .panel > .panel-body { padding: 16px 20px; }
.content .table-responsive { margin: 0 !important; border: 0 !important; }
.dataTables_wrapper { width: 100%; }
.dataTables_wrapper > .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px !important; }
.dataTables_wrapper > .row:last-child { margin: 12px 0 0 !important; }
.dataTables_wrapper > .row > [class*="col-"] { float: none; width: auto; padding: 0 !important; flex: 0 1 auto; min-height: 0; }
.dataTables_wrapper > .row > [class*="col-"]:last-child { margin-left: auto; text-align: right; }
.dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_info { margin: 0; padding: 0 !important; font: 400 14px/20px var(--font-body); color: var(--ink-muted); }
.dataTables_wrapper .dataTables_length select { margin: 0 6px; height: 36px; }
.dataTables_wrapper .dt-buttons { display: inline-flex; margin: 0; float: none; }
.dataTables_wrapper .dataTables_paginate { margin: 0 !important; padding: 0 !important; }
.dataTables_wrapper > table, .dataTables_wrapper table.dataTable, .content .table-responsive > table { width: 100% !important; margin: 0 !important; }
/* A table sitting straight in the wrapper (no row above it) still gets a gap below the controls. */
.dataTables_wrapper > .dataTables_paginate, .dataTables_wrapper > .dataTables_info { margin-top: 12px !important; }
.dataTables_wrapper > .dataTables_info { float: left; }
.dataTables_wrapper > .dataTables_paginate { float: right; }
.dataTables_wrapper::after { content: ''; display: table; clear: both; }
.content .table > thead > tr > th { padding: 10px 12px; vertical-align: middle; white-space: nowrap; }
.content .table > tbody > tr > td, .content .table > tfoot > tr > td, .content .table > tfoot > tr > th { padding: 9px 12px; vertical-align: middle; }
.hb .hb-table-wrap { margin: 0; }
.hb .hb-table-foot { padding: 12px 16px; }
/* Wide hb-table lists (Manage invoices and similar) fit their card: names and status badges may wrap, and the cells
   are a little tighter, instead of the table running past the card with a sideways scrollbar. */
.hb .hb-table th, .hb .hb-table td { padding-left: 10px; padding-right: 10px; }
.hb .hb-table td[data-label="Customer"], .hb .hb-table td[data-label="Status"], .hb .hb-table td[data-label="Description"] { white-space: normal; }
.hb .hb-table td[data-label="Status"] .hb-badge { margin: 2px 2px 2px 0; }
.hb .hb-table td[data-label="Customer"] { min-width: 140px; }
/* Manage invoices: the Day column repeats the date; on laptop screens it is hidden so the row fits with its buttons. */
@media screen and (max-width: 1599px) { #invoiceTableAjax > thead > tr > th:nth-child(5), #invoiceTableAjax > tbody > tr > td:nth-child(5) { display: none; } }

/* Anything marked hidden stays hidden, whatever its own style says (alerts and boxes with display:flex/grid used to
   show as empty bars, e.g. the breakage warning on an empty New invoice). */
[hidden] { display: none !important; }

/* ===================================================== Print (2026-11)
   Print buttons on ledgers, lists and reports print the page itself: only the content, black on white, with a small
   header (shop, page, printed when and by whom), the summary tiles in one row, and a clean bordered table whose
   header repeats on every sheet. The app's sidebar, top bar, filters, buttons and paging are left out. Bills and slips
   (printed with printDiv) use their own plain tables and are not touched. */
.hb-print-header { display: none; }
@page hb-list { margin: 10mm; }
@media print {
  body { page: hb-list; }  /* on body, not .content-wrapper: the print header sits outside it and got a sheet of its own */
  html, body { background: #fff !important; color: #000 !important; }
  .main-header, .main-sidebar, .main-footer, .m-navstrip, .se-pre-con, .hb-no-print, .hidden-print, .no-print,
  .hb-page-actions, .hb-seg, .hb-filter, .hb-rp-filter, .hb-toolbar, .hb-recent-find, .hb-bill-actions,
  .dataTables_filter, .dataTables_length, .dataTables_paginate, .dataTables_info, .dt-buttons,
  .content .btn, .content .hb-btn, .content .alert, .content .hb-alert, .content-header .breadcrumb,
  th.hb-actions, td.hb-actions, .hb-keypad-overlay, .hb-quick-overlay, #back-to-top, .back-to-top, .scrollup,
  .hb-table-foot .hb-pager, .pagination { display: none !important; }
  body, .wrapper, .content-wrapper, .content, .hb, .hb-parties, .hb-rp { margin: 0 !important; padding: 0 !important; min-height: 0 !important; width: auto !important; background: #fff !important; }
  .content-wrapper { margin-left: 0 !important; }
  * { box-shadow: none !important; text-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a, a:visited { color: #000 !important; text-decoration: none !important; }
  a[href]::after, abbr[title]::after { content: none !important; }  /* Bootstrap printed every link's address */

  .hb-print-header { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1.5px solid #000; padding: 0 0 4px; margin: 0 0 10px; font: 10pt/1.35 Arial, sans-serif; color: #000; }
  .hb-print-header strong { font-size: 13pt; }
  .hb-printhead { display: none !important; }  /* one header for every page: the print header above */
  .hb-staging-bar, .hb-staging-badge { display: none !important; }
  .hb-page-head { margin: 0 0 6px !important; display: block !important; }
  .hb-page-title, .content-header h1 { font: 700 16pt/1.25 Arial, sans-serif !important; color: #000 !important; margin: 0 !important; }
  .hb-page-sub { font-size: 9.5pt !important; color: #333 !important; }

  .hb-stats { display: flex !important; flex-wrap: wrap; gap: 6px !important; margin: 0 0 8px !important; }
  .hb-stat { flex: 1 1 0; min-width: 120px; padding: 5px 8px !important; border: 1px solid #999 !important; border-radius: 4px !important; background: #fff !important; break-inside: avoid; }
  .hb-stat * { color: #000 !important; }
  .hb-stat__value { font-size: 12.5pt !important; line-height: 1.3 !important; white-space: nowrap; }
  .hb-stat__label, .hb-stat__delta { font-size: 8.5pt !important; color: #333 !important; }

  .panel, .hb-card, .table-responsive, .hb-table-wrap, .hb-cards-table, .dataTables_wrapper, .panel-body, .hb-card__body {
    overflow: visible !important; border: 0 !important; background: #fff !important; padding: 0 !important; margin: 0 0 8px !important; max-height: none !important; }
  .panel-heading, .hb-card__head { padding: 0 0 4px !important; border: 0 !important; background: #fff !important; }
  html body table.table, html body table.hb-table, html body table.dataTable { display: table !important; width: 100% !important; min-width: 0 !important; table-layout: auto !important; border-collapse: collapse !important; font: 9pt/1.3 Arial, sans-serif !important; margin: 0 !important; }
  html body table.table thead, html body table.hb-table thead, html body table.dataTable thead { display: table-header-group !important; }
  html body table.table tbody, html body table.hb-table tbody, html body table.dataTable tbody { display: table-row-group !important; }
  html body table.table tfoot, html body table.hb-table tfoot, html body table.dataTable tfoot { display: table-row-group !important; }
  html body table.table tr, html body table.hb-table tr, html body table.dataTable tr { display: table-row !important; break-inside: avoid; }
  html body table.table th, html body table.table td, html body table.hb-table th, html body table.hb-table td, html body table.dataTable th, html body table.dataTable td {
    display: table-cell !important; position: static !important; height: auto !important; white-space: normal !important;
    min-width: 0 !important; max-width: none !important; overflow-wrap: break-word;  /* screen minimum widths pushed the last columns off the sheet */
    border: 1px solid #9a9a9a !important; padding: 3px 5px !important; color: #000 !important; background: #fff !important; vertical-align: top !important; }
  html body table.table thead th, html body table.hb-table thead th, html body table.dataTable thead th { background: #ececec !important; font-weight: 700 !important; }
  html body table.table tfoot td, html body table.hb-table tfoot td, html body table.dataTable tfoot td, html body table.table tfoot th { font-weight: 700 !important; background: #f4f4f4 !important; }
  html body table.hb-table td::before, html body table.dataTable td::before { content: none !important; display: none !important; }  /* phone card labels */
  th.m-hide, td.m-hide { display: table-cell !important; }
  html body table.dataTable thead .sorting::after, html body table.dataTable thead .sorting_asc::after, html body table.dataTable thead .sorting_desc::after,
  html body table.dataTable thead .sorting::before, html body table.dataTable thead .sorting_asc::before, html body table.dataTable thead .sorting_desc::before { display: none !important; }
  .hb-badge { border: 0 !important; border-radius: 0 !important; background: none !important; color: #000 !important; padding: 0 !important; font: inherit !important; }  /* status prints as plain text */
  .hb-badge::before { content: none !important; display: none !important; }
  .hb-table-foot { padding: 2px 0 !important; font-size: 8.5pt !important; color: #333 !important; }
  html body table th.hb-actions, html body table td.hb-actions { display: none !important; }
  /* Sort buttons in headings: Chrome leaves buttons out of the heading repeated on later sheets, so print the text
     copy the print script puts in data-hb-th instead. */
  html body table thead th[data-hb-th] > button { display: none !important; }
  html body table thead th[data-hb-th]::before { content: attr(data-hb-th); }
  html body table.table td *, html body table.hb-table td *, html body table.dataTable td * { font-size: inherit !important; line-height: inherit !important; min-width: 0 !important; }
  html body table.table td, html body table.hb-table td, html body table.dataTable td, html body table.table th, html body table.hb-table th, html body table.dataTable th { text-align: left !important; font-weight: 400; }
  html body table th.hb-num, html body table td.hb-num, html body table td.hb-money, html body table th.text-right, html body table td.text-right { text-align: right !important; white-space: nowrap !important; }
  table td.hb-key { font-weight: 700 !important; }
  html body table.table td, html body table.hb-table td, html body table.dataTable td, html body table.table th, html body table.hb-table th, html body table.dataTable th { font-size: 9pt !important; line-height: 1.3 !important; }
}

/* Bill page: the account summary's Entries box sits beside its button. */
.hb-bill-actions .hb-acct-n { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: 600 14px/1 var(--font-body); color: var(--ink-muted); }
.hb-bill-actions .hb-acct-n .hb-input { width: 72px; height: 36px; padding: 0 8px; text-align: center; }
/* Lists: the first and last column keep 16px from the card edge (the same as the search row and page buttons). */
.hb .hb-table > thead > tr > th:first-child, .hb .hb-table > tbody > tr > td:first-child, .hb .hb-table > tfoot > tr > td:first-child { padding-left: 16px; }
.hb .hb-table > thead > tr > th:last-child, .hb .hb-table > tbody > tr > td:last-child, .hb .hb-table > tfoot > tr > td:last-child { padding-right: 16px; }