/*
 * UI refresh — design tokens, light/dark themes and component polish for the admin area and the customers portal.
 * Active when <html data-ui="refresh">; theme from data-theme="light|dark|auto" (auto follows the OS).
 * Retheme by editing the tokens only: every rule below reads var(--ui-*).
 */

/* ---------- tokens: light (SocialOrbit App palette: violet + cyan, ink sidebar) ---------- */
html[data-ui="refresh"] {
  --ui-font: 'DM Sans', 'Inter', system-ui, sans-serif;
  --ui-bg: #F8F7FC;
  --ui-surface: #ffffff;
  --ui-surface-2: #FAF9FD;
  --ui-surface-3: #F3F1F9;
  --ui-text: #1E1B3A;
  --ui-text-2: #3B3758;
  --ui-muted: #6B6880;
  --ui-faint: #9C98B3;
  --ui-border: #E9E6F2;
  --ui-border-strong: #DCD7EA;
  --ui-accent: #7C3AED;
  --ui-accent-hover: #6D28D9;
  --ui-accent-soft: #F1EBFF;
  --ui-accent-text: #ffffff;
  --ui-btn-primary: #7C3AED;
  --ui-btn-primary-hover: #6D28D9;
  --ui-btn-primary-text: #ffffff;
  --ui-btn-fill: linear-gradient(130deg, #6D28D9 0%, #8B5CF6 100%);
  --ui-btn-fill-hover: linear-gradient(130deg, #5B21B6 0%, #7C3AED 100%);
  --ui-brand-grad: linear-gradient(130deg, #6D28D9 0%, #A855F7 100%);
  --ui-brand-star: #22D3EE;
  /* sidebar: dark ink in both themes */
  --ui-sidebar: #1E1B3A;
  --ui-side-text: #C9C5E0;
  --ui-side-muted: #8681A6;
  --ui-side-hover: rgba(255, 255, 255, .06);
  --ui-side-active: rgba(167, 139, 250, .16);
  --ui-side-active-text: #ffffff;
  --ui-side-marker: #22D3EE;
  --ui-ok: #15803d;
  --ui-ok-soft: #f0fdf4;
  --ui-warn: #a16207;
  --ui-warn-soft: #fefce8;
  --ui-danger: #b91c1c;
  --ui-danger-soft: #fef2f2;
  --ui-info: #0369a1;
  --ui-info-soft: #f0f9ff;
  --ui-shadow: 0 1px 2px rgba(30, 27, 58, .05);
  --ui-shadow-lg: 0 12px 32px -12px rgba(30, 27, 58, .28);
  --ui-focus: 0 0 0 3px rgba(124, 58, 237, .22);
  --ui-radius: 14px;
  --ui-radius-sm: 10px;
  --ui-input-text: #1E1B3A;
  /* Tailwind neutral scale (violet-tinted), remapped in dark mode */
  --ui-n-50: #FAF9FD; --ui-n-100: #F3F1F9; --ui-n-200: #E9E6F2; --ui-n-300: #DCD7EA; --ui-n-400: #9C98B3;
  --ui-n-500: #6B6880; --ui-n-600: #4F4B6B; --ui-n-700: #3B3758; --ui-n-800: #2A2648; --ui-n-900: #1E1B3A;
  color-scheme: light;
}

/* ---------- tokens: dark (the "auto" block below repeats these values for the OS setting) ---------- */
html[data-ui="refresh"][data-theme="dark"] {
  --ui-bg: #0F0C1D;
  --ui-surface: #17132B;
  --ui-surface-2: #1C1733;
  --ui-surface-3: #241E3E;
  --ui-text: #EDE9FE;
  --ui-text-2: #CFC8EA;
  --ui-muted: #A39BC0;
  --ui-faint: #6F6890;
  --ui-border: #2B2547;
  --ui-border-strong: #3A3360;
  --ui-accent: #A78BFA;
  --ui-accent-hover: #C4B5FD;
  --ui-accent-soft: rgba(167, 139, 250, .15);
  --ui-accent-text: #120E26;
  --ui-btn-primary: #8B5CF6;
  --ui-btn-primary-hover: #7C3AED;
  --ui-btn-primary-text: #ffffff;
  --ui-btn-fill: linear-gradient(130deg, #7C3AED 0%, #A855F7 100%);
  --ui-btn-fill-hover: linear-gradient(130deg, #6D28D9 0%, #9333EA 100%);
  --ui-sidebar: #120E26;
  --ui-side-active: rgba(167, 139, 250, .18);
  --ui-ok: #4ade80;
  --ui-ok-soft: rgba(74, 222, 128, .12);
  --ui-warn: #facc15;
  --ui-warn-soft: rgba(250, 204, 21, .12);
  --ui-danger: #f87171;
  --ui-danger-soft: rgba(248, 113, 113, .13);
  --ui-info: #38bdf8;
  --ui-info-soft: rgba(56, 189, 248, .12);
  --ui-shadow: none;
  --ui-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, .6);
  --ui-focus: 0 0 0 3px rgba(167, 139, 250, .35);
  --ui-input-text: #EDE9FE;
  --ui-n-50: #1C1733; --ui-n-100: #241E3E; --ui-n-200: #2B2547; --ui-n-300: #3A3360; --ui-n-400: #6F6890;
  --ui-n-500: #A39BC0; --ui-n-600: #B8B1D3; --ui-n-700: #CFC8EA; --ui-n-800: #E2DDF6; --ui-n-900: #EDE9FE;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-ui="refresh"][data-theme="auto"] {
    --ui-bg: #0F0C1D;
    --ui-surface: #17132B;
    --ui-surface-2: #1C1733;
    --ui-surface-3: #241E3E;
    --ui-text: #EDE9FE;
    --ui-text-2: #CFC8EA;
    --ui-muted: #A39BC0;
    --ui-faint: #6F6890;
    --ui-border: #2B2547;
    --ui-border-strong: #3A3360;
    --ui-accent: #A78BFA;
    --ui-accent-hover: #C4B5FD;
    --ui-accent-soft: rgba(167, 139, 250, .15);
    --ui-accent-text: #120E26;
    --ui-btn-primary: #8B5CF6;
    --ui-btn-primary-hover: #7C3AED;
    --ui-btn-primary-text: #ffffff;
    --ui-btn-fill: linear-gradient(130deg, #7C3AED 0%, #A855F7 100%);
    --ui-btn-fill-hover: linear-gradient(130deg, #6D28D9 0%, #9333EA 100%);
    --ui-sidebar: #120E26;
    --ui-side-active: rgba(167, 139, 250, .18);
    --ui-ok: #4ade80;
    --ui-ok-soft: rgba(74, 222, 128, .12);
    --ui-warn: #facc15;
    --ui-warn-soft: rgba(250, 204, 21, .12);
    --ui-danger: #f87171;
    --ui-danger-soft: rgba(248, 113, 113, .13);
    --ui-info: #38bdf8;
    --ui-info-soft: rgba(56, 189, 248, .12);
    --ui-shadow: none;
    --ui-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, .6);
    --ui-focus: 0 0 0 3px rgba(167, 139, 250, .35);
    --ui-input-text: #EDE9FE;
    --ui-n-50: #1C1733; --ui-n-100: #241E3E; --ui-n-200: #2B2547; --ui-n-300: #3A3360; --ui-n-400: #6F6890;
    --ui-n-500: #A39BC0; --ui-n-600: #B8B1D3; --ui-n-700: #CFC8EA; --ui-n-800: #E2DDF6; --ui-n-900: #EDE9FE;
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
/* Element rules use :where() (zero specificity) so Bootstrap/Tailwind utility classes such as .text-danger still win. */
:where(html[data-ui="refresh"]) body,
:where(html[data-ui="refresh"]) #wrapper { background: var(--ui-bg); color: var(--ui-text); }
html[data-ui="refresh"] body { font-family: var(--ui-font); }
html[data-ui="refresh"] :where(input, select, textarea, button, .btn, .tooltip, .popover) { font-family: inherit; }
:where(html[data-ui="refresh"]) :where(h1, h2, h3, h4, h5, h6) { color: var(--ui-text); }
:where(html[data-ui="refresh"]) a { color: var(--ui-accent); }
:where(html[data-ui="refresh"]) a:hover { color: var(--ui-accent-hover); }
html[data-ui="refresh"] .text-muted, html[data-ui="refresh"] .text-muted a { color: var(--ui-muted); }
:where(html[data-ui="refresh"]) hr { border-color: var(--ui-border); }
:where(html[data-ui="refresh"]) ::selection { background: var(--ui-accent-soft); }
:where(html[data-ui="refresh"]) :focus-visible { outline: none; box-shadow: var(--ui-focus); }
:where(html[data-ui="refresh"]) code { background: var(--ui-surface-3); color: var(--ui-text-2); border-radius: 4px; }
:where(html[data-ui="refresh"]) pre { background: var(--ui-surface-2); color: var(--ui-text-2); border-color: var(--ui-border); }

/* ---------- Tailwind neutral utilities follow the theme ---------- */
html[data-ui="refresh"] .tw-text-neutral-900 { color: var(--ui-n-900); }
html[data-ui="refresh"] .tw-text-neutral-800, html[data-ui="refresh"] .hover\:tw-text-neutral-800:hover { color: var(--ui-n-800); }
html[data-ui="refresh"] .tw-text-neutral-700, html[data-ui="refresh"] .hover\:tw-text-neutral-700:hover { color: var(--ui-n-700); }
html[data-ui="refresh"] .tw-text-neutral-600 { color: var(--ui-n-600); }
html[data-ui="refresh"] .tw-text-neutral-500 { color: var(--ui-n-500); }
html[data-ui="refresh"] .tw-text-neutral-400 { color: var(--ui-n-400); }
html[data-ui="refresh"] .tw-bg-white { background-color: var(--ui-surface); }
html[data-ui="refresh"] .tw-bg-neutral-50 { background-color: var(--ui-n-50); }
html[data-ui="refresh"] .tw-bg-neutral-100, html[data-ui="refresh"] .hover\:tw-bg-neutral-200:hover { background-color: var(--ui-n-100); }
/* Tailwind "!important" variants (same values in light mode) */
html[data-ui="refresh"] .\!tw-bg-white { background-color: var(--ui-surface) !important; }
html[data-ui="refresh"] .\!tw-bg-neutral-50 { background-color: var(--ui-n-50) !important; }
html[data-ui="refresh"] .\!tw-bg-neutral-100 { background-color: var(--ui-n-100) !important; }
html[data-ui="refresh"] .\!tw-bg-neutral-200 { background-color: var(--ui-n-200) !important; }
html[data-ui="refresh"] .\!tw-border-white { border-color: var(--ui-surface) !important; }
html[data-ui="refresh"] .\!tw-placeholder-neutral-500::placeholder { color: var(--ui-n-500) !important; }
html[data-ui="refresh"] .tw-border-neutral-200, html[data-ui="refresh"] .tw-border-neutral-300,
html[data-ui="refresh"] .tw-border-neutral-300\/80, html[data-ui="refresh"] .tw-divide-neutral-300 > * + * { border-color: var(--ui-border); }

/* ---------- header & sidebar (admin) ---------- */
html[data-ui="refresh"] #header { background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); box-shadow: none; }
html[data-ui="refresh"] #header .navbar-nav > li > a,
html[data-ui="refresh"] #header .hide-menu { color: var(--ui-text-2); }
html[data-ui="refresh"] #header #top_search input { background: var(--ui-surface-3); color: var(--ui-text); border-color: transparent; }
/* Selectors mirror style.css (.sidebar ul.nav ...) so these win without !important. .sidebar covers the main menu and the Setup panel. */
html[data-ui="refresh"] #menu, html[data-ui="refresh"] #setup-menu-wrapper, html[data-ui="refresh"] .sidebar { background: var(--ui-sidebar); border-color: transparent; }
html[data-ui="refresh"] .sidebar ul.nav > li > a { color: var(--ui-side-text); border-radius: var(--ui-radius-sm); }
html[data-ui="refresh"] .sidebar ul.nav > li > a .menu-icon, html[data-ui="refresh"] .sidebar ul.nav > li > a > i { color: var(--ui-side-muted); }
html[data-ui="refresh"] .sidebar ul.nav > li > a:hover, html[data-ui="refresh"] .sidebar ul.nav > li > a:focus,
html[data-ui="refresh"] .sidebar ul.nav > li > a:hover .menu-icon, html[data-ui="refresh"] .sidebar ul.nav > li > a:focus .menu-icon { background-color: var(--ui-side-hover); color: var(--ui-side-active-text); }
html[data-ui="refresh"] .sidebar ul.nav > li > a:hover .menu-icon, html[data-ui="refresh"] .sidebar ul.nav > li > a:focus .menu-icon { background-color: transparent; }
html[data-ui="refresh"] .sidebar ul.nav li.active > a, html[data-ui="refresh"] .sidebar ul.nav li.active > a .menu-icon { color: var(--ui-side-active-text); }
html[data-ui="refresh"] .sidebar ul.nav > li.active > a {
  background: var(--ui-side-active); border-color: transparent;
  box-shadow: inset 3px 0 0 var(--ui-side-marker);
}
html[data-ui="refresh"] .sidebar ul.nav li .nav-second-level li a { color: var(--ui-side-muted); }
html[data-ui="refresh"] .sidebar ul.nav li .nav-second-level li.active a,
html[data-ui="refresh"] .sidebar ul.nav > li .nav-second-level > li:not(.active) > a:hover,
html[data-ui="refresh"] .sidebar ul.nav > li .nav-second-level > li:not(.active) > a:focus,
html[data-ui="refresh"] .sidebar ul.nav li .nav-second-level a:hover .menu-icon,
html[data-ui="refresh"] .sidebar ul.nav li .nav-second-level a:focus .menu-icon { color: var(--ui-side-active-text); }
html[data-ui="refresh"] .sidebar ul.nav li .nav-second-level li.active a { box-shadow: inset 2px 0 0 var(--ui-side-marker) !important; }
html[data-ui="refresh"] #setup-menu > li:first-child { color: var(--ui-side-active-text); border-bottom-color: rgba(255, 255, 255, .08); }
html[data-ui="refresh"] #menu .sidebar-user-profile, html[data-ui="refresh"] #menu li.sidebar-user-profile a,
html[data-ui="refresh"] #menu .sidebar-user-profile :where(span, p, div, a) { color: var(--ui-side-active-text); }
html[data-ui="refresh"] #menu .sidebar-user-profile :where(.tw-text-neutral-500, .tw-text-neutral-400, small) { color: var(--ui-side-muted); }
html[data-ui="refresh"] #menu .sidebar-user-profile > a, html[data-ui="refresh"] #menu .sidebar-user-profile .dropdown-toggle { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .10); box-shadow: none; }
html[data-ui="refresh"] #menu .sidebar-user-profile > a:hover, html[data-ui="refresh"] #menu .sidebar-user-profile .dropdown-toggle:hover { background: var(--ui-side-hover); }
/* The profile menu opens on a light/dark surface, not the ink sidebar: it needs the page text colours back. */
html[data-ui="refresh"] #menu .sidebar-user-profile .dropdown-menu {
  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); padding: 4px; margin-top: 6px;
}
html[data-ui="refresh"] #menu .sidebar-user-profile .dropdown-menu a {
  color: var(--ui-text); background: transparent; border-radius: 6px; padding: 8px 10px; white-space: normal;
}
html[data-ui="refresh"] #menu .sidebar-user-profile .dropdown-menu a:hover,
html[data-ui="refresh"] #menu .sidebar-user-profile .dropdown-menu a:focus { background: var(--ui-surface-2); color: var(--ui-text); }
html[data-ui="refresh"] #menu .sidebar-user-profile .dropdown-menu .active > a { color: var(--ui-accent); font-weight: 600; background: transparent; }
/* Language list: shown inline under a small label (no fly-out from a sidebar, no grey band or arrow), scrolls if long. */
html[data-ui="refresh"] #menu .sidebar-user-profile .dropdown-submenu { float: none !important; }
html[data-ui="refresh"] #menu .sidebar-user-profile .dropdown-submenu > a {
  color: var(--ui-muted); background: transparent; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; pointer-events: none; padding-bottom: 2px;
}
html[data-ui="refresh"] #menu .sidebar-user-profile .dropdown-submenu > a::after { display: none; }
html[data-ui="refresh"] #menu .sidebar-user-profile .dropdown-submenu > .dropdown-menu {
  display: block; position: static; float: none; left: auto; margin: 0; padding: 0 0 4px; border: 0; box-shadow: none; max-height: 180px; overflow-y: auto;
}
html[data-ui="refresh"] #menu .sidebar-user-profile .dropdown-submenu > .dropdown-menu a { padding-left: 18px; }
html[data-ui="refresh"] #menu .badge, html[data-ui="refresh"] #menu .menu-badge { background: var(--ui-accent); color: #fff; }
html[data-ui="refresh"] #menu .app-brand-credit, html[data-ui="refresh"] #menu .app-brand-credit a { color: var(--ui-side-muted); }
html[data-ui="refresh"] #menu .app-brand-credit a:hover { color: var(--ui-side-active-text); }

/* ---------- North Star mark (star on the brand gradient) ---------- */
.ns-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(130deg, #6D28D9 0%, #A855F7 100%); vertical-align: middle; flex: none; }
.ns-mark svg { width: 13px; height: 13px; fill: #22D3EE; }
.ns-mark-lg { width: 44px; height: 44px; border-radius: 13px; }
.ns-mark-lg svg { width: 26px; height: 26px; }
.app-brand-credit { display: flex; align-items: center; gap: 8px; }
p.app-brand-credit { justify-content: center; }

/* ---------- surfaces ---------- */
html[data-ui="refresh"] .panel_s,
html[data-ui="refresh"] .top_stats_wrapper,
html[data-ui="refresh"] .panel-default > .panel-heading + .panel-collapse,
html[data-ui="refresh"] .panel {
  background: var(--ui-surface); border-color: var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); color: var(--ui-text);
}
html[data-ui="refresh"] .panel_s .panel-body, html[data-ui="refresh"] .panel-body { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); }
html[data-ui="refresh"] .panel-heading, html[data-ui="refresh"] .panel-footer { background: var(--ui-surface-2) !important; border-color: var(--ui-border) !important; color: var(--ui-text); }
html[data-ui="refresh"] .well { background: var(--ui-surface-2); border-color: var(--ui-border); box-shadow: none; }
html[data-ui="refresh"] .modal-content { background: var(--ui-surface); border-color: var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-lg); color: var(--ui-text); }
html[data-ui="refresh"] .modal-header, html[data-ui="refresh"] .modal-footer { background: var(--ui-surface); border-color: var(--ui-border); }
html[data-ui="refresh"] .modal-header .close, html[data-ui="refresh"] .close { color: var(--ui-text); text-shadow: none; }
html[data-ui="refresh"] .modal-backdrop.in { opacity: .55; }
html[data-ui="refresh"] .dropdown-menu { background: var(--ui-surface); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-lg); border-radius: var(--ui-radius-sm); }
html[data-ui="refresh"] .dropdown-menu > li > a { color: var(--ui-text-2); }
html[data-ui="refresh"] .dropdown-menu > li > a:hover, html[data-ui="refresh"] .dropdown-menu > li > a:focus { background: var(--ui-surface-3); color: var(--ui-text); }
html[data-ui="refresh"] .dropdown-menu .divider { background: var(--ui-border); }
html[data-ui="refresh"] .popover { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text); }
html[data-ui="refresh"] .popover-title { background: var(--ui-surface-2); border-color: var(--ui-border); }
html[data-ui="refresh"] .list-group-item { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text); }

/* ---------- forms ---------- */
html[data-ui="refresh"] .form-control,
html[data-ui="refresh"] .bootstrap-select > .dropdown-toggle,
html[data-ui="refresh"] .input-group-addon,
html[data-ui="refresh"] .dataTables_filter input,
html[data-ui="refresh"] .dataTables_length select,
:where(html[data-ui="refresh"]) :where(select, textarea) {
  background-color: var(--ui-surface); color: var(--ui-input-text); border-color: var(--ui-border-strong);
}
html[data-ui="refresh"] .form-control::placeholder { color: var(--ui-faint); }
html[data-ui="refresh"] .form-control:focus,
html[data-ui="refresh"] .bootstrap-select > .dropdown-toggle:focus,
html[data-ui="refresh"] .bootstrap-select.open > .dropdown-toggle { border-color: var(--ui-accent); box-shadow: var(--ui-focus); outline: none !important; }
html[data-ui="refresh"] .form-control[disabled], html[data-ui="refresh"] .form-control[readonly],
html[data-ui="refresh"] fieldset[disabled] .form-control { background-color: var(--ui-surface-3); color: var(--ui-muted); }
html[data-ui="refresh"] .control-label, :where(html[data-ui="refresh"]) label { color: var(--ui-text-2); }
html[data-ui="refresh"] .checkbox label::before, html[data-ui="refresh"] .radio label::before { background: var(--ui-surface); border-color: var(--ui-border-strong); }
html[data-ui="refresh"] .has-error .form-control { border-color: var(--ui-danger); }
html[data-ui="refresh"] .help-block { color: var(--ui-muted); }

/* ---------- buttons ---------- */
html[data-ui="refresh"] .btn { border-radius: var(--ui-radius-sm); transition: background-color .12s, border-color .12s, box-shadow .12s; }
html[data-ui="refresh"] .btn:focus-visible { box-shadow: var(--ui-focus); }
html[data-ui="refresh"] .btn-default { background: var(--ui-surface); color: var(--ui-text-2); border-color: var(--ui-border-strong); }
html[data-ui="refresh"] .btn-default:hover, html[data-ui="refresh"] .btn-default:focus,
html[data-ui="refresh"] .btn-default.active, html[data-ui="refresh"] .open > .btn-default.dropdown-toggle { background: var(--ui-surface-3); color: var(--ui-text); border-color: var(--ui-border-strong); }
html[data-ui="refresh"] .btn-primary { background: var(--ui-btn-fill); border-color: transparent; color: var(--ui-btn-primary-text); }
html[data-ui="refresh"] .btn-primary:hover, html[data-ui="refresh"] .btn-primary:focus,
html[data-ui="refresh"] .btn-primary:active, html[data-ui="refresh"] .btn-primary.active { background: var(--ui-btn-fill-hover); border-color: transparent; color: var(--ui-btn-primary-text); }
html[data-ui="refresh"] .btn-link { color: var(--ui-accent); }

/* ---------- tables ---------- */
html[data-ui="refresh"] .table { color: var(--ui-text); }
html[data-ui="refresh"] .table > thead > tr > th { color: var(--ui-muted); border-color: var(--ui-border); font-weight: 600; }
html[data-ui="refresh"] .table > tbody > tr > td, html[data-ui="refresh"] .table > tfoot > tr > td,
html[data-ui="refresh"] .table > tbody > tr > th { border-color: var(--ui-border); }
html[data-ui="refresh"] .table-hover > tbody > tr:hover, html[data-ui="refresh"] .table > tbody > tr:hover > td { background: var(--ui-surface-2); }
html[data-ui="refresh"] .table-striped > tbody > tr:nth-of-type(odd) { background: var(--ui-surface-2); }
html[data-ui="refresh"] table.dataTable tbody tr { background: transparent; }
html[data-ui="refresh"] .dataTables_wrapper .dataTables_info, html[data-ui="refresh"] .dataTables_wrapper .dataTables_length label { color: var(--ui-muted); }
html[data-ui="refresh"] .pagination > li > a, html[data-ui="refresh"] .pagination > li > span { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text-2); }
html[data-ui="refresh"] .pagination > .active > a, html[data-ui="refresh"] .pagination > .active > a:hover { background: var(--ui-btn-primary); border-color: var(--ui-btn-primary); color: var(--ui-btn-primary-text); }
html[data-ui="refresh"] .pagination > .disabled > a { background: var(--ui-surface-2); color: var(--ui-faint); }

/* ---------- navigation, feedback ---------- */
html[data-ui="refresh"] .nav-tabs { border-color: var(--ui-border); }
html[data-ui="refresh"] .nav-tabs > li > a { color: var(--ui-muted); }
html[data-ui="refresh"] .nav-tabs > li > a:hover { background: transparent; color: var(--ui-text); border-color: transparent; }
html[data-ui="refresh"] .nav-tabs > li.active > a, html[data-ui="refresh"] .nav-tabs > li.active > a:hover,
html[data-ui="refresh"] .nav-tabs > li.active > a:focus { background: transparent; color: var(--ui-text); border-color: transparent transparent var(--ui-accent); }
html[data-ui="refresh"] .alert { border-radius: var(--ui-radius-sm); border-width: 1px; }
html[data-ui="refresh"] .alert-success { background: var(--ui-ok-soft); color: var(--ui-ok); border-color: transparent; }
html[data-ui="refresh"] .alert-danger { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: transparent; }
html[data-ui="refresh"] .alert-warning { background: var(--ui-warn-soft); color: var(--ui-warn); border-color: transparent; }
html[data-ui="refresh"] .alert-info { background: var(--ui-info-soft); color: var(--ui-info); border-color: transparent; }
html[data-ui="refresh"] .progress { background: var(--ui-surface-3); }
html[data-ui="refresh"] .tooltip-inner { background: var(--ui-n-900); color: var(--ui-surface); }
html[data-ui="refresh"] .label-default { background: var(--ui-surface-3); color: var(--ui-text-2); }
html[data-ui="refresh"] .badge { background: var(--ui-surface-3); color: var(--ui-text-2); }

/* ---------- components with their own hard-coded colours ---------- */
html[data-ui="refresh"] #search_input { background: var(--ui-surface-3); color: var(--ui-text); border-color: transparent; }
html[data-ui="refresh"] #search_input::placeholder { color: var(--ui-faint); }
html[data-ui="refresh"] .nav-tabs-horizontal, html[data-ui="refresh"] .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal, html[data-ui="refresh"] .horizontal-scrollable-tabs .scroller { background: var(--ui-surface-3); border-color: var(--ui-border); color: var(--ui-text-2); }
html[data-ui="refresh"] .nav-tabs-horizontal > li > a { color: var(--ui-text-2); background: transparent; }
html[data-ui="refresh"] .nav-tabs-horizontal > li.active > a { background: var(--ui-surface); color: var(--ui-text); }
html[data-ui="refresh"] .btn-default.buttons-collection, html[data-ui="refresh"] .btn-default-dt-options,
html[data-ui="refresh"] .dt-buttons .btn-default { background: var(--ui-surface) !important; color: var(--ui-text-2) !important; border-color: var(--ui-border-strong) !important; }
html[data-ui="refresh"] .screen-options-btn { background: var(--ui-surface); color: var(--ui-text-2); border-color: var(--ui-border); }
html[data-ui="refresh"] .fc {
  --fc-page-bg-color: var(--ui-surface); --fc-neutral-bg-color: var(--ui-surface-2); --fc-border-color: var(--ui-border);
  --fc-today-bg-color: var(--ui-accent-soft); --fc-neutral-text-color: var(--ui-muted);
}
html[data-ui="refresh"] .fc .fc-daygrid-day, html[data-ui="refresh"] .fc .fc-col-header-cell { background: var(--ui-surface); }
html[data-ui="refresh"] .fc .fc-daygrid-day.fc-day-today { background: var(--ui-accent-soft); }
html[data-ui="refresh"] .fc .fc-col-header-cell-cushion, html[data-ui="refresh"] .fc .fc-daygrid-day-number { color: var(--ui-text-2); }

/* ---------- brand colour on stock "primary" utilities and hard-coded blues ---------- */
html[data-ui="refresh"] .tw-text-primary-600, html[data-ui="refresh"] .hover\:tw-text-primary-600:hover { color: var(--ui-accent); }
html[data-ui="refresh"] .tw-bg-primary-600, html[data-ui="refresh"] .tw-bg-primary-700 { background-color: var(--ui-btn-primary); }
html[data-ui="refresh"] .tw-border-primary-600 { border-color: var(--ui-accent); }
html[data-ui="refresh"] .notification-wrapper .unread-notification, html[data-ui="refresh"] .notification-wrapper .unread-notification:hover { color: var(--ui-accent); }
html[data-ui="refresh"] .jquery-comments .highlight-background { background: var(--ui-accent) !important; }
html[data-ui="refresh"] .task-info-col { border-color: var(--ui-accent); }
html[data-ui="refresh"] .navbar-default .navbar-nav > li.customers-nav-item-login > a { background: var(--ui-btn-fill) !important; border-radius: var(--ui-radius-sm) !important; }
html[data-ui="refresh"] .navbar-default .navbar-nav > li.customers-nav-item-login > a:hover,
html[data-ui="refresh"] .navbar-default .navbar-nav > li.customers-nav-item-login > a:active { background: var(--ui-btn-fill-hover) !important; border-radius: var(--ui-radius-sm) !important; }

/* ---------- theme toggle (admin top bar) ---------- */
.ui-theme-toggle { display: inline-flex; align-items: center; gap: .35rem; }
.ui-theme-toggle .ui-theme-label { font-size: .8rem; }
html[data-theme="light"] .ui-theme-toggle .fa-sun,
html[data-theme="dark"] .ui-theme-toggle .fa-moon,
html[data-theme="auto"] .ui-theme-toggle .fa-circle-half-stroke { display: inline-block; }
.ui-theme-toggle .fa-sun, .ui-theme-toggle .fa-moon, .ui-theme-toggle .fa-circle-half-stroke { display: none; }

/* ---------- dark: imagery and third-party widgets ---------- */
html[data-ui="refresh"][data-theme="dark"] img.company-logo,
html[data-ui="refresh"][data-theme="dark"] .logo img { background: #fff; border-radius: 4px; padding: 2px; }
html[data-ui="refresh"][data-theme="dark"] .tox .tox-edit-area__iframe { background: #fff; }
@media (prefers-color-scheme: dark) {
  html[data-ui="refresh"][data-theme="auto"] img.company-logo,
  html[data-ui="refresh"][data-theme="auto"] .logo img { background: #fff; border-radius: 4px; padding: 2px; }
}

/* ---------- sign-in pages ---------- */
html[data-ui="refresh"] body.login_admin, html[data-ui="refresh"] body.authentication,
html[data-ui="refresh"] body.customers_login, html[data-ui="refresh"] body.customers_login #wrapper {
  background:
    radial-gradient(640px 380px at 85% -10%, rgba(168, 85, 247, .18), transparent 65%),
    radial-gradient(520px 340px at 0% 105%, rgba(34, 211, 238, .14), transparent 60%),
    var(--ui-bg);
  min-height: 100vh;
}
html[data-ui="refresh"] .authentication-form-wrapper > .tw-bg-white,
html[data-ui="refresh"] .authentication-form-wrapper .tw-bg-white { background: var(--ui-surface); border-color: var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-lg); }
html[data-ui="refresh"] .authentication-form-wrapper h1 { color: var(--ui-text); }
html[data-ui="refresh"] .authentication-form-wrapper p { color: var(--ui-muted); }
html[data-ui="refresh"] body.login_admin .app-brand-credit { color: var(--ui-muted); }

/* ---------- customers portal ---------- */
html[data-ui="refresh"] .customers .navbar-default, html[data-ui="refresh"] body.customers .navbar { background: var(--ui-surface); border-color: var(--ui-border); }
html[data-ui="refresh"] body.customers .navbar-default .navbar-nav > li > a { color: var(--ui-text-2); }
html[data-ui="refresh"] body.customers .navbar-default .navbar-nav > .active > a { background: var(--ui-accent-soft); color: var(--ui-accent); border-radius: var(--ui-radius-sm); }
html[data-ui="refresh"] body.customers .navbar-default .navbar-nav > li > a:hover { color: var(--ui-accent); }
html[data-ui="refresh"] .navbar-brand.logo-text, html[data-ui="refresh"] .logo-text { color: var(--ui-text); }
html[data-ui="refresh"] body.customers footer, html[data-ui="refresh"] body.customers .footer { background: var(--ui-surface); color: var(--ui-muted); border-color: var(--ui-border); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-ui="refresh"] *, html[data-ui="refresh"] *::before, html[data-ui="refresh"] *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- getting started (dashboard checklist) ---------- */
.ns-onboarding .progress { height: 6px; border-radius: 999px; box-shadow: none; }
.ns-onboarding .progress-bar { background: var(--ui-btn-fill); }
.ns-onboarding-step { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-text); height: 100%; }
.ns-onboarding-step:hover, .ns-onboarding-step:focus { border-color: var(--ui-accent); text-decoration: none; color: var(--ui-text); }
.ns-onboarding-step i { margin-top: 3px; color: var(--ui-faint); }
.ns-onboarding-step.is-done i { color: var(--ui-ok); }
.ns-onboarding-step.is-done strong { color: var(--ui-muted); text-decoration: line-through; }
.ns-onboarding-step strong { display: block; font-weight: 600; }
.ns-onboarding-step small { display: block; color: var(--ui-muted); line-height: 1.35; margin-top: 2px; }

/* ---------- first-run empty states ---------- */
.ns-empty-state .ns-empty-icon { width: 64px; height: 64px; line-height: 64px; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent); }

/* ---------- phones: data tables as cards, larger tap targets ---------- */
@media (max-width: 640px) {
  html[data-ui="refresh"] table.dataTable { width: 100% !important; min-width: 0 !important; border: 0; }
  html[data-ui="refresh"] table.dataTable thead { display: none; }
  html[data-ui="refresh"] table.dataTable tbody tr {
    display: block; margin: 0 0 10px; padding: 8px 12px; background: var(--ui-surface);
    border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-sm);
  }
  html[data-ui="refresh"] table.dataTable tbody td {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 5px 0 !important;
    border: 0 !important; text-align: right; white-space: normal; width: auto !important; max-width: none !important;
  }
  html[data-ui="refresh"] table.dataTable tbody td::before {
    content: attr(data-label); flex: none; max-width: 45%; text-align: left; color: var(--ui-muted); font-weight: 500;
  }
  html[data-ui="refresh"] table.dataTable tbody td:not([data-label])::before,
  html[data-ui="refresh"] table.dataTable tbody td[data-label=""]::before { content: none; }
  html[data-ui="refresh"] table.dataTable tbody td.dataTables_empty { display: block; text-align: center !important; }
  html[data-ui="refresh"] table.dataTable tbody td.dataTables_empty::before { content: none; } /* no column label on "No entries found" */
  html[data-ui="refresh"] table.dataTable tbody td:empty { display: none; }
  html[data-ui="refresh"] .dataTables_wrapper .table-responsive { overflow: visible; border: 0; }
  html[data-ui="refresh"] .table-responsive > table.dataTable > tbody > tr > td { white-space: normal; }
}
@media (max-width: 768px) {
  /* Taller tap targets: the label stays centred (a plain min-height left it at the top). */
  html[data-ui="refresh"] .btn:not(.btn-xs) { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; vertical-align: middle; }
  html[data-ui="refresh"] .btn.display-block:not(.btn-xs), html[data-ui="refresh"] .btn.btn-block:not(.btn-xs) { display: flex !important; }
  html[data-ui="refresh"] .btn.tw-truncate { display: block; line-height: 26px; text-align: center; }
  html[data-ui="refresh"] .sidebar ul.nav > li > a { padding-top: 11px; padding-bottom: 11px; }
  html[data-ui="refresh"] .nav-tabs > li > a { padding-top: 11px; padding-bottom: 11px; }
  html[data-ui="refresh"] #header .navbar-nav > li > a { min-width: 40px; min-height: 40px; }
}

/* ---------- sidebar icons: one outline set (Lucide, ISC licence: assets/images/icons/LICENSE-lucide.txt) ---------- */
html[data-ui="refresh"] .ns-icon { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; background-color: currentColor;
  -webkit-mask: var(--ns-i) center / contain no-repeat; mask: var(--ns-i) center / contain no-repeat; font-size: 0; }
html[data-ui="refresh"] .sidebar ul.nav > li > a .ns-icon.menu-icon { width: 18px; height: 18px; margin-right: 10px; }
.ns-icon-dashboard { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><rect width='7' height='9' x='3' y='3' rx='1' /><rect width='7' height='5' x='14' y='3' rx='1' /><rect width='7' height='9' x='14' y='12' rx='1' /><rect width='7' height='5' x='3' y='16' rx='1' /></svg>"); }
.ns-icon-customers { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' /><circle cx='9' cy='7' r='4' /><path d='M22 21v-2a4 4 0 0 0-3-3.87' /><path d='M16 3.13a4 4 0 0 1 0 7.75' /></svg>"); }
.ns-icon-sales { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><path d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z' /><path d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8' /><path d='M12 17.5v-11' /></svg>"); }
.ns-icon-subscriptions { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><path d='m17 2 4 4-4 4' /><path d='M3 11v-1a4 4 0 0 1 4-4h14' /><path d='m7 22-4-4 4-4' /><path d='M21 13v1a4 4 0 0 1-4 4H3' /></svg>"); }
.ns-icon-deals { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><path d='m11 17 2 2a1 1 0 1 0 3-3' /><path d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4' /><path d='m21 3 1 11h-2' /><path d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3' /><path d='M3 4h8' /></svg>"); }
.ns-icon-expenses { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><path d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1' /><path d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4' /></svg>"); }
.ns-icon-contracts { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><path d='m18 5-2.414-2.414A2 2 0 0 0 14.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2' /><path d='M21.378 12.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z' /><path d='M8 18h1' /></svg>"); }
.ns-icon-projects { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><path d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z' /><path d='M8 10v4' /><path d='M12 10v2' /><path d='M16 10v6' /></svg>"); }
.ns-icon-tasks { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><path d='m3 17 2 2 4-4' /><path d='m3 7 2 2 4-4' /><path d='M13 6h8' /><path d='M13 12h8' /><path d='M13 18h8' /></svg>"); }
.ns-icon-automations { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><path d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z' /></svg>"); }
.ns-icon-support { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><circle cx='12' cy='12' r='10' /><path d='m4.93 4.93 4.24 4.24' /><path d='m14.83 9.17 4.24-4.24' /><path d='m14.83 14.83 4.24 4.24' /><path d='m9.17 14.83-4.24 4.24' /><circle cx='12' cy='12' r='4' /></svg>"); }
.ns-icon-leads { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' /><circle cx='9' cy='7' r='4' /><line x1='19' x2='19' y1='8' y2='14' /><line x1='22' x2='16' y1='11' y2='11' /></svg>"); }
.ns-icon-estimate-request { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><rect width='8' height='4' x='8' y='2' rx='1' ry='1' /><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2' /><path d='M12 11h4' /><path d='M12 16h4' /><path d='M8 11h.01' /><path d='M8 16h.01' /></svg>"); }
.ns-icon-knowledge-base { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><path d='M12 7v14' /><path d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z' /></svg>"); }
.ns-icon-utilities { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z' /></svg>"); }
.ns-icon-reports { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><path d='M3 3v16a2 2 0 0 0 2 2h16' /><path d='m19 9-5 5-4-4-3 3' /></svg>"); }
.ns-icon-tenant-billing { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><rect width='20' height='14' x='2' y='5' rx='2' /><line x1='2' x2='22' y1='10' y2='10' /></svg>"); }
.ns-icon-setup { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><path d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z' /><circle cx='12' cy='12' r='3' /></svg>"); }
.ns-icon-goals { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><circle cx='12' cy='12' r='10' /><circle cx='12' cy='12' r='6' /><circle cx='12' cy='12' r='2' /></svg>"); }
.ns-icon-surveys { --ns-i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' ><path d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z' /><line x1='4' x2='4' y1='22' y2='15' /></svg>"); }

/* ---------- fixes: outline icons on hover, settings icons in dark mode, data-table headers, onboarding bar ---------- */
/* .ns-icon is drawn with background-color through a mask, so hover rules that clear the background must not reach it. */
html[data-ui="refresh"] .sidebar ul.nav li a .ns-icon.menu-icon,
html[data-ui="refresh"] .sidebar ul.nav li a:hover .ns-icon.menu-icon,
html[data-ui="refresh"] .sidebar ul.nav li a:focus .ns-icon.menu-icon,
html[data-ui="refresh"] .sidebar ul.nav li.active > a .ns-icon.menu-icon { background-color: currentColor; }
/* Tailwind group-hover colours (settings menu icons) follow the theme like the plain utilities above. */
html[data-ui="refresh"] .tw-group:hover .group-hover\:tw-text-neutral-800 { color: var(--ui-n-800); }
html[data-ui="refresh"] .tw-group:hover .group-hover\:tw-text-neutral-600 { color: var(--ui-n-600); }
html[data-ui="refresh"] .tw-group:hover .group-hover\:tw-text-primary-600 { color: var(--ui-accent); }
/* Data-table headers: theme surface instead of Tailwind's fixed light grey (unreadable in dark mode). */
html[data-ui="refresh"] table.dataTable thead > tr > th,
html[data-ui="refresh"] table.dataTable thead > tr > td { background-color: var(--ui-surface-2); color: var(--ui-muted); border-color: var(--ui-border); }
html[data-ui="refresh"] table.dataTable thead > tr > th:is(.sorting_asc, .sorting_desc) { color: var(--ui-text); }
/* Getting-started bar: a thin rounded track; app.js writes a percentage into .progress-bar, which must not show. */
.ns-onboarding .progress-bar { font-size: 0; line-height: 0; border-radius: 999px; box-shadow: none; }
/* Data-table rows and the loading placeholder follow the theme (Tailwind build fixes them to light-mode greys). */
html[data-ui="refresh"] .table > tbody > tr > td, html[data-ui="refresh"] .table > tfoot > tr > td { color: var(--ui-n-600); }
html[data-ui="refresh"] .dataTables_wrapper table tbody a:not(.text-muted, .text-primary, .text-danger, .text-warning, .text-success, .text-info, .btn) { color: var(--ui-n-700); }
html[data-ui="refresh"] .dataTables_wrapper table tbody a:not(.text-muted, .text-primary, .text-danger, .text-warning, .text-success, .text-info, .btn):is(:hover, :focus, :active) { color: var(--ui-n-900); }
html[data-ui="refresh"] .text-dark { color: var(--ui-n-800); }
html[data-ui="refresh"] .table-loading { background-image: none; }
html[data-ui="refresh"] .dt-loader:not(:required), html[data-ui="refresh"] .dt-loader:not(:required)::before, html[data-ui="refresh"] .dt-loader:not(:required)::after { background: var(--ui-border); }
/* Tab icons: Tailwind fixes them to light-mode greys (the active one vanished on dark). */
html[data-ui="refresh"] .nav-tabs > li a i.menu-icon { color: var(--ui-n-600); }
html[data-ui="refresh"] .nav-tabs > li.active > a i.menu-icon, html[data-ui="refresh"] .nav-tabs > li > a:is(:hover, :focus) i.menu-icon { color: var(--ui-n-900); }

/* Tailwind hover/focus/active neutral colours follow the theme (generated from the classes the views use). */
html[data-ui="refresh"] .active\:tw-text-neutral-700:active { color: var(--ui-n-700); }
html[data-ui="refresh"] .active\:tw-text-neutral-800:active { color: var(--ui-n-800); }
html[data-ui="refresh"] .active\:tw-text-neutral-900:active { color: var(--ui-n-900); }
html[data-ui="refresh"] .focus\:tw-text-neutral-600:focus { color: var(--ui-n-600); }
html[data-ui="refresh"] .focus\:tw-text-neutral-700:focus { color: var(--ui-n-700); }
html[data-ui="refresh"] .focus\:tw-text-neutral-800:focus { color: var(--ui-n-800); }
html[data-ui="refresh"] .tw-group:hover .group-hover\:tw-text-neutral-600 { color: var(--ui-n-600); }
html[data-ui="refresh"] .tw-group:hover .group-hover\:tw-text-neutral-800 { color: var(--ui-n-800); }
html[data-ui="refresh"] .hover\:tw-bg-neutral-100:hover { background-color: var(--ui-n-100); }
html[data-ui="refresh"] .hover\:tw-bg-neutral-200:hover { background-color: var(--ui-n-200); }
html[data-ui="refresh"] .hover\:tw-bg-neutral-300:hover { background-color: var(--ui-n-300); }
html[data-ui="refresh"] .hover\:tw-bg-neutral-50:hover { background-color: var(--ui-n-50); }
html[data-ui="refresh"] .hover\:tw-text-neutral-200:hover { color: var(--ui-n-200); }
html[data-ui="refresh"] .hover\:tw-text-neutral-500:hover { color: var(--ui-n-500); }
html[data-ui="refresh"] .hover\:tw-text-neutral-600:hover { color: var(--ui-n-600); }
html[data-ui="refresh"] .hover\:tw-text-neutral-700:hover { color: var(--ui-n-700); }
html[data-ui="refresh"] .hover\:tw-text-neutral-800:hover { color: var(--ui-n-800); }
html[data-ui="refresh"] .hover\:tw-text-neutral-900:hover { color: var(--ui-n-900); }

/* ---------- audit fixes (dark/light contrast) ---------- */
/* Calendar: Tailwind sets these with !important. */
html[data-ui="refresh"] .fc .fc-col-header-cell-cushion { color: var(--ui-n-700) !important; }
html[data-ui="refresh"] .fc .fc-daygrid-day-number { color: var(--ui-n-600) !important; }
/* Fixed light-mode greys in style.css */
html[data-ui="refresh"] .activity-feed .feed-item .text, html[data-ui="refresh"] .activity-feed .feed-item p { color: var(--ui-n-600); }
html[data-ui="refresh"] .customer-profile-group-heading { color: var(--ui-text); }
/* Amber text needs a darker shade on white (2.9:1 -> 5:1); dark mode keeps the bright one. */
html[data-ui="refresh"] .text-warning { color: var(--ui-warn); }
/* Invoice / estimate / proposal item tables and the sticky save bar */
html[data-ui="refresh"] .table.items thead { background: var(--ui-surface-2); }
html[data-ui="refresh"] .table.items thead th { background: transparent; color: var(--ui-muted); }
html[data-ui="refresh"] .table.items .main { background: var(--ui-surface-2); }
html[data-ui="refresh"] .btn-bottom-toolbar { background: var(--ui-surface); border-color: var(--ui-border); }
html[data-ui="refresh"] .bootstrap-select.disabled, html[data-ui="refresh"] .bootstrap-select.disabled > .btn { background-color: var(--ui-surface-3); }
html[data-ui="refresh"] ul.tagit input[type="text"], html[data-ui="refresh"] .ui-widget-content { color: var(--ui-text); }
html[data-ui="refresh"] ul.tagit { background: var(--ui-surface); border-color: var(--ui-border-strong); }
/* Client portal knowledge-base search band */
html[data-ui="refresh"] .kb-search-jumbotron { background: var(--ui-surface-2); color: var(--ui-text); }
/* Alert close button follows the alert's text colour */
html[data-ui="refresh"] .alert .close { color: inherit; opacity: .6; text-shadow: none; }
html[data-ui="refresh"] .alert .close:hover { opacity: .9; }
/* Media manager (elFinder) surfaces follow the theme */
html[data-ui="refresh"] .elfinder, html[data-ui="refresh"] .elfinder .elfinder-workzone,
html[data-ui="refresh"] .elfinder .elfinder-cwd-wrapper { background: var(--ui-surface); color: var(--ui-text); }
html[data-ui="refresh"] .elfinder .elfinder-cwd-filename { color: var(--ui-text); }
html[data-ui="refresh"] .elfinder .elfinder-navbar, html[data-ui="refresh"] .elfinder .elfinder-navbar-dir { background: transparent; color: var(--ui-text); }
html[data-ui="refresh"] .elfinder .elfinder-navbar .ui-state-active, html[data-ui="refresh"] .elfinder .elfinder-navbar .ui-state-hover { background: var(--ui-accent-soft); color: var(--ui-text); border-color: transparent; }
html[data-ui="refresh"] .progress-finance-status { color: var(--ui-muted); }
/* Native file pickers: the browser's grey button ignores the theme. */
html[data-ui="refresh"] input[type="file"]::file-selector-button {
  background: var(--ui-surface-3); color: var(--ui-text); border: 1px solid var(--ui-border-strong); border-radius: 6px;
  padding: 4px 10px; margin-right: 10px; cursor: pointer; font: inherit;
}
html[data-ui="refresh"] input[type="file"]::file-selector-button:hover { background: var(--ui-surface-2); }

/* ---------- header stays on one row (QA C1): the right-hand icons used to wrap under the header and cover the
   page's "New ..." buttons; the search results stretched the search box to the same height. ---------- */
@media (min-width: 992px) {
  html[data-ui="refresh"] #header nav > .tw-flex { flex-wrap: nowrap; align-items: flex-start; }
  html[data-ui="refresh"] #header ul.navbar-right { display: flex; flex-wrap: nowrap; flex-shrink: 0; white-space: nowrap; }
  html[data-ui="refresh"] #header ul.navbar-right > li { float: none; }
  html[data-ui="refresh"] #header nav > .tw-flex > .tw-flex { min-width: 0; flex: 1 1 auto; }
  html[data-ui="refresh"] #header #top_search { min-width: 0; flex: 0 1 362px; }
  html[data-ui="refresh"] #header #search_input { min-width: 0; width: 100% !important; }
  html[data-ui="refresh"] #header #search_results { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; }
}
html[data-ui="refresh"] .tenant-billing-notice .tbn-short { display: none; }
@media (max-width: 1440px) {
  html[data-ui="refresh"] .tenant-billing-notice .tbn-long { display: none; }
  html[data-ui="refresh"] .tenant-billing-notice .tbn-short { display: inline; }
}
@media (max-width: 991px) {
  html[data-ui="refresh"] .tenant-billing-notice { display: none; }
}

/* Required fields: the red asterisk for every field marked required, unless its label already has one (QA M2). */
html[data-ui="refresh"] .form-group:has(input[required], select[required], textarea[required]) > label.control-label:not(:has(.req))::before {
  content: "* "; color: var(--ui-danger); font-weight: 600;
}

/* ---------- QA report 2026-10-22: small layout fixes ---------- */
/* L4: summary cards above lists wrap their label instead of cutting it ("Inactive Custor"). */
html[data-ui="refresh"] .tw-grid > [class*="tw-border-neutral-300/80"] > .tw-truncate { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
/* L8: the search picker's "Currently Selected" heading with nothing under it. */
html[data-ui="refresh"] .bootstrap-select .dropdown-menu li.dropdown-header:last-child,
html[data-ui="refresh"] .bootstrap-select .dropdown-menu li.dropdown-header:has(+ li.divider) { display: none; }
/* L12: an empty progress bar shows no coloured sliver. */
html[data-ui="refresh"] .progress-bar[aria-valuenow="0"], html[data-ui="refresh"] .progress-bar[data-percent="0"],
html[data-ui="refresh"] .progress-bar[style*="width: 0%"], html[data-ui="refresh"] .progress-bar[style*="width:0%"] { min-width: 0 !important; padding: 0; }
/* M8: room between a long customer name (left column) and the tab heading (Contacts, Notes...). */
@media (min-width: 768px) {
  html[data-ui="refresh"] .customer-profile-group-heading { padding-left: 12px; }
}
/* L6: a list squeezed beside an open record (split view): its controls stack instead of shrinking to "Searc". */
@media (min-width: 992px) {
  html[data-ui="refresh"] body.small-table #small-table .dataTables_wrapper > .row > [class*="col-md-"] { width: 100%; float: none; }
  html[data-ui="refresh"] body.small-table #small-table .dataTables_filter { text-align: left; margin-top: 6px; }
  html[data-ui="refresh"] body.small-table #small-table .dataTables_filter label,
  html[data-ui="refresh"] body.small-table #small-table .dataTables_filter .input-group { width: 100%; }
  html[data-ui="refresh"] body.small-table #small-table .dataTables_filter input { width: 100% !important; }
  html[data-ui="refresh"] body.small-table #small-table .dataTables_paging { text-align: left; white-space: nowrap; }
}