/* ==========================================================================
   Modern theme — inspired by TailAdmin CRM (https://demo.tailadmin.com/crm)
   Activated by body.theme-tailadmin (user menu switch, sites on 3.7.3+).
   Dark variant activated by body.theme-tailadmin.theme-dark.
   Every rule is scoped under body.theme-tailadmin so this file is inert
   for users/sites that have not enabled the theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
body.theme-tailadmin {
  /* brand */
  --tt-brand-50: #ecf3ff;
  --tt-brand-100: #dde9ff;
  --tt-brand-200: #c2d6ff;
  --tt-brand-400: #7592ff;
  --tt-brand-500: #465fff;
  --tt-brand-600: #3641f5;
  --tt-brand-700: #2a31d8;

  /* grays */
  --tt-gray-25: #fcfcfd;
  --tt-gray-50: #f9fafb;
  --tt-gray-100: #f2f4f7;
  --tt-gray-200: #e4e7ec;
  --tt-gray-300: #d0d5dd;
  --tt-gray-400: #98a2b3;
  --tt-gray-500: #667085;
  --tt-gray-600: #475467;
  --tt-gray-700: #344054;
  --tt-gray-800: #1d2939;
  --tt-gray-900: #101828;

  /* semantic */
  --tt-success-50: #ecfdf3;
  --tt-success-500: #12b76a;
  --tt-success-600: #039855;
  --tt-warning-50: #fffaeb;
  --tt-warning-500: #f79009;
  --tt-warning-600: #dc6803;
  --tt-error-50: #fef3f2;
  --tt-error-500: #f04438;
  --tt-error-600: #d92d20;
  --tt-info-50: #f0f9ff;
  --tt-info-500: #0ba5ec;
  --tt-info-600: #0086c9;

  /* surfaces */
  --tt-bg: var(--tt-gray-50);
  --tt-bg-subtle: var(--tt-gray-100);
  --tt-card: #ffffff;
  --tt-card-hover: var(--tt-gray-50);
  --tt-border: var(--tt-gray-200);
  --tt-border-strong: var(--tt-gray-300);

  /* text */
  --tt-heading: var(--tt-gray-900);
  --tt-text: var(--tt-gray-600);
  --tt-text-muted: var(--tt-gray-400);

  /* nav */
  --tt-nav-bg: #ffffff;
  --tt-nav-text: var(--tt-gray-700);
  --tt-nav-icon: var(--tt-gray-500);
  --tt-nav-hover-bg: var(--tt-gray-100);
  --tt-nav-active-bg: var(--tt-brand-50);
  --tt-nav-active-text: var(--tt-brand-500);

  /* effects */
  --tt-radius-card: 1rem;
  --tt-radius-input: 0.5rem;
  --tt-radius-menu: 0.75rem;
  --tt-shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.1), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
  --tt-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --tt-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --tt-focus-ring: 0 0 0 3px rgba(70, 95, 255, 0.15);
}

body.theme-tailadmin.theme-dark {
  --tt-bg: #101828;
  --tt-bg-subtle: rgba(255, 255, 255, 0.04);
  --tt-card: #18202f;
  --tt-card-hover: rgba(255, 255, 255, 0.04);
  --tt-border: #1d2939;
  --tt-border-strong: #344054;

  --tt-heading: #f9fafb;
  --tt-text: #98a2b3;
  --tt-text-muted: #667085;

  --tt-nav-bg: #101828;
  --tt-nav-text: #98a2b3;
  --tt-nav-icon: #667085;
  --tt-nav-hover-bg: rgba(255, 255, 255, 0.05);
  --tt-nav-active-bg: rgba(70, 95, 255, 0.14);
  --tt-nav-active-text: #7592ff;

  --tt-brand-50: rgba(70, 95, 255, 0.14);
  --tt-success-50: rgba(18, 183, 106, 0.14);
  --tt-warning-50: rgba(247, 144, 9, 0.14);
  --tt-error-50: rgba(240, 68, 56, 0.14);
  --tt-info-50: rgba(11, 165, 236, 0.14);

  --tt-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --tt-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.5);
  --tt-shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body.theme-tailadmin,
body.theme-tailadmin .page-wrapper,
body.theme-tailadmin .page-inner,
body.theme-tailadmin .page-content {
  background: var(--tt-bg);
  color: var(--tt-text);
}

body.theme-tailadmin,
body.theme-tailadmin .btn,
body.theme-tailadmin .form-control,
body.theme-tailadmin .dropdown-menu,
body.theme-tailadmin .popover,
body.theme-tailadmin .tooltip {
  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.theme-tailadmin h1, body.theme-tailadmin h2, body.theme-tailadmin h3,
body.theme-tailadmin h4, body.theme-tailadmin h5, body.theme-tailadmin h6 {
  color: var(--tt-heading);
  font-weight: 600;
}

body.theme-tailadmin a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link) {
  color: var(--tt-brand-500);
}
body.theme-tailadmin a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):hover {
  color: var(--tt-brand-600);
}
/* dark mode: brand-500 is too dark against the dark surfaces — lift links a shade */
body.theme-tailadmin.theme-dark a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link) {
  color: var(--tt-brand-400);
}
body.theme-tailadmin.theme-dark a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):hover {
  color: var(--tt-brand-200);
}

body.theme-tailadmin .text-muted { color: var(--tt-text-muted) !important; }
body.theme-tailadmin.theme-dark .text-dark { color: var(--tt-heading) !important; }
body.theme-tailadmin.theme-dark .bg-white { background-color: var(--tt-card) !important; }
body.theme-tailadmin .bg-faded { background-color: var(--tt-bg-subtle) !important; }
body.theme-tailadmin .border-faded { border-color: var(--tt-border) !important; }

/* scrollbars */
body.theme-tailadmin ::-webkit-scrollbar { width: 8px; height: 8px; }
body.theme-tailadmin ::-webkit-scrollbar-track { background: transparent; }
body.theme-tailadmin ::-webkit-scrollbar-thumb {
  background: var(--tt-border-strong);
  border-radius: 4px;
}
body.theme-tailadmin ::-webkit-scrollbar-thumb:hover { background: var(--tt-gray-400); }

/* --------------------------------------------------------------------------
   3. Logo strip
   -------------------------------------------------------------------------- */
body.theme-tailadmin .page-logo,
body.theme-tailadmin .page-sidebar,
body.theme-tailadmin .nav-footer,
body.theme-tailadmin .bg-brand-gradient {
  background-image: none;
  background-color: var(--tt-nav-bg);
}
/* some sites hard-brand the sidebar (e.g. aside.page-sidebar.ng-scope { background !important })
   — outrank those while the modern theme is on */
body.theme-tailadmin aside.page-sidebar,
body.theme-tailadmin .page-sidebar .page-logo,
body.theme-tailadmin .page-sidebar .nav-footer {
  background-color: var(--tt-nav-bg) !important;
  background-image: none !important;
}

body.theme-tailadmin .page-logo {
  border-bottom: 1px solid var(--tt-border);
}
body.theme-tailadmin .page-logo-text {
  color: var(--tt-heading);
  font-weight: 600;
}
/* the main logo is swapped to login_logo.svg via ng-src in sidebar.html when the
   light modern theme is active; only the small square mark (minified nav) has no
   light variant, so darken that one */
body.theme-tailadmin:not(.theme-dark) .page-logo img#smallLogo {
  filter: brightness(0) opacity(0.85);
}
/* login_logo.svg (used in light mode) is sized for the login page — cap it */
body.theme-tailadmin:not(.theme-dark) .page-logo img#largeLogo {
  max-height: 2.5rem;
  max-width: 11rem;
  width: auto;
  height: auto;
  object-fit: contain;
}
body.theme-tailadmin .page-logo .fal,
body.theme-tailadmin .page-logo .ni {
  color: var(--tt-text-muted);
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
body.theme-tailadmin .page-header {
  background-color: var(--tt-card);
  box-shadow: none;
  border-bottom: 1px solid var(--tt-border);
}

body.theme-tailadmin .page-header .header-icon:not(.btn),
body.theme-tailadmin .page-header .header-btn {
  color: var(--tt-gray-500);
  border-radius: var(--tt-radius-input);
}
body.theme-tailadmin.theme-dark .page-header .header-icon:not(.btn),
body.theme-tailadmin.theme-dark .page-header .header-btn {
  color: var(--tt-text);
}
body.theme-tailadmin .page-header .header-icon:not(.btn) > [class*='fa-']:first-child,
body.theme-tailadmin .page-header .header-icon:not(.btn) > .ni:first-child {
  color: inherit;
}
body.theme-tailadmin .page-header [data-class="mobile-nav-on"] {
  color: var(--tt-gray-500);
}

/* header search */
body.theme-tailadmin .page-header .typeahead__query input,
body.theme-tailadmin .page-header #searchBox {
  background-color: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-input);
  color: var(--tt-heading);
}
body.theme-tailadmin .page-header .typeahead__query input::placeholder,
body.theme-tailadmin .page-header #searchBox::placeholder {
  color: var(--tt-text-muted);
}
body.theme-tailadmin .page-header .typeahead__query input:focus,
body.theme-tailadmin .page-header #searchBox:focus {
  border-color: var(--tt-brand-500);
  box-shadow: var(--tt-focus-ring);
  background-color: var(--tt-card);
}

body.theme-tailadmin .page-header .badge.badge-icon {
  background-color: var(--tt-brand-500);
  box-shadow: 0 0 0 2px var(--tt-card);
}

/* --------------------------------------------------------------------------
   5. Sidebar navigation
   -------------------------------------------------------------------------- */
body.theme-tailadmin .page-sidebar {
  border-right: 1px solid var(--tt-border);
}

/* direct-child selectors only, so embedded widgets (treecontrol) keep their own layout.
   colors carry !important — some sites hard-brand nav link colors for their dark sidebar
   (e.g. .nav-menu li a:hover { color: white !important }) */
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li > a {
  color: var(--tt-nav-text) !important;
  border-radius: var(--tt-radius-input);
  margin: 0.125rem 0.75rem;
  padding: 0.625rem 0.75rem;
  font-weight: 500;
}
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li > a > [class*='fa-'],
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li > a > .ni {
  color: var(--tt-nav-icon) !important;
}
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li > a:hover {
  color: var(--tt-heading) !important;
  background-color: var(--tt-nav-hover-bg);
}
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li > a:hover > [class*='fa-'],
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li > a:hover > .ni {
  color: var(--tt-nav-text) !important;
}

/* active / open states */
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li.active > a,
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li.open > a {
  background-color: var(--tt-nav-active-bg);
  color: var(--tt-nav-active-text) !important;
  box-shadow: none;
}
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li.active > a > [class*='fa-'],
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li.active > a > .ni,
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li.open > a > [class*='fa-'],
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li.open > a > .ni {
  color: var(--tt-nav-active-text) !important;
}
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li.active > a:hover {
  background-color: var(--tt-nav-active-bg);
  color: var(--tt-nav-active-text) !important;
}

/* sub-menus: flat, no dark overlay; the hover pill starts to the right of the
   guide line (mod-nav-link draws it at 1.5625rem) so it never covers it */
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu li > ul {
  background-color: transparent;
}
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li > ul > li > a,
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li > ul > li > ul > li > a {
  color: var(--tt-nav-text) !important;
  border-radius: var(--tt-radius-input);
  margin: 0.125rem 0.75rem 0.125rem 2.25rem;
  padding: 0.5rem 0.75rem;
  font-weight: 400;
}
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li > ul > li > ul > li > a {
  margin-left: 3rem;
}
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li > ul > li > a > [class*='fa-'],
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li > ul > li > a > .ni,
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li > ul > li > ul > li > a > [class*='fa-'],
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li > ul > li > ul > li > a > .ni {
  margin-left: 0;
  margin-right: 0.5rem;
  color: var(--tt-nav-icon) !important;
}
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li > ul > li > a:hover,
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li > ul > li > ul > li > a:hover {
  color: var(--tt-heading) !important;
  background-color: var(--tt-nav-hover-bg);
}
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li > ul > li.active > a,
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li > ul > li.open > a,
body.theme-tailadmin .page-sidebar .primary-nav .nav-menu > li > ul > li > ul > li.active > a {
  background-color: transparent;
  color: var(--tt-nav-active-text) !important;
  font-weight: 500;
}

/* embedded tree control (PSA Categories): default colors are for the dark
   sidebar — remap them so they stay readable on the light one (!important
   to beat per-site dark-sidebar hover branding) */
body.theme-tailadmin .page-sidebar .nav-menu li[treecontrol],
body.theme-tailadmin .page-sidebar .nav-menu li[treecontrol] div.psaCats,
body.theme-tailadmin .page-sidebar .nav-menu li[treecontrol] a.tree-label,
body.theme-tailadmin .page-sidebar .nav-menu li[treecontrol] i.tree-branch-head {
  color: var(--tt-nav-text) !important;
}
body.theme-tailadmin .page-sidebar .nav-menu li[treecontrol] div:hover,
body.theme-tailadmin .page-sidebar .nav-menu li[treecontrol] div:hover a.tree-label,
body.theme-tailadmin .page-sidebar .nav-menu li[treecontrol] a.tree-label:hover {
  color: var(--tt-heading) !important;
}
/* align the tree's top level with the other sub-menu pills (text starts at 3rem) */
body.theme-tailadmin .page-sidebar .nav-menu li[treecontrol] > ul > .tree-item {
  margin-left: 3rem;
}

/* minified sidebar: flyout menus are dark blue (#072966) in SmartAdmin — restyle
   as light dropdown cards, including the pointer arrow, the hovered icon pill and
   the floating title strip */
@media (min-width: 992px) {
  body.theme-tailadmin.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > a + ul {
    background-color: var(--tt-card);
    border: 1px solid var(--tt-border);
    box-shadow: var(--tt-shadow-lg);
    border-radius: 4px var(--tt-radius-menu) var(--tt-radius-menu) var(--tt-radius-menu);
  }
  body.theme-tailadmin.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > a + ul:before {
    color: var(--tt-card);
  }
  /* flyout links: drop the pill margins used by the expanded sidebar */
  body.theme-tailadmin.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > ul > li > a,
  body.theme-tailadmin.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > ul > li > ul > li > a {
    margin: 0.125rem 0.5rem;
  }
  body.theme-tailadmin.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav:hover .nav-menu > li:hover > a {
    background: var(--tt-nav-hover-bg);
  }
  body.theme-tailadmin.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > a > .nav-link-text {
    color: var(--tt-heading);
  }
  body.theme-tailadmin.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav:hover .nav-menu > li:hover > a > .nav-link-text:last-child {
    background: var(--tt-card);
    border: 1px solid var(--tt-border);
    box-shadow: var(--tt-shadow-lg);
    border-radius: var(--tt-radius-menu);
    color: var(--tt-heading);
  }
}

body.theme-tailadmin .nav-title {
  color: var(--tt-text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* menu filter box */
body.theme-tailadmin .nav-filter input {
  background-color: var(--tt-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-input);
  color: var(--tt-heading);
}
body.theme-tailadmin .nav-filter input::placeholder { color: var(--tt-text-muted); }
body.theme-tailadmin .nav-filter input:focus {
  border-color: var(--tt-brand-500);
  box-shadow: var(--tt-focus-ring);
}

body.theme-tailadmin .nav-footer [class*='fa-'],
body.theme-tailadmin .nav-footer .ni {
  color: var(--tt-nav-icon);
}

/* --------------------------------------------------------------------------
   6. Content chrome
   -------------------------------------------------------------------------- */
body.theme-tailadmin .subheader-title {
  color: var(--tt-heading);
  font-weight: 600;
  text-shadow: none;
}
body.theme-tailadmin .subheader-title small {
  color: var(--tt-text-muted);
}
body.theme-tailadmin .breadcrumb {
  background: transparent;
}
body.theme-tailadmin .breadcrumb-item,
body.theme-tailadmin .breadcrumb-item a {
  color: var(--tt-text-muted);
}
body.theme-tailadmin .breadcrumb-item.active { color: var(--tt-heading); }

body.theme-tailadmin .page-footer {
  background-color: var(--tt-card);
  color: var(--tt-text-muted);
  border-top: 1px solid var(--tt-border);
}

/* --------------------------------------------------------------------------
   7. Panels / cards
   -------------------------------------------------------------------------- */
body.theme-tailadmin .panel {
  background-color: var(--tt-card);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-card);
  box-shadow: var(--tt-shadow-sm);
}
body.theme-tailadmin .panel-hdr {
  background-color: transparent;
  border-bottom: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-card) var(--tt-radius-card) 0 0;
}
body.theme-tailadmin .panel-hdr h2 {
  color: var(--tt-heading);
  font-weight: 600;
}
body.theme-tailadmin .panel-container {
  background-color: transparent;
  border-radius: 0 0 var(--tt-radius-card) var(--tt-radius-card);
}
body.theme-tailadmin .panel-content {
  color: var(--tt-text);
}
body.theme-tailadmin .panel-tag {
  background-color: var(--tt-brand-50);
  color: var(--tt-text);
  border-radius: var(--tt-radius-input);
}
body.theme-tailadmin .panel-toolbar .btn-panel { opacity: 0.65; }
body.theme-tailadmin .panel-toolbar .btn-panel:hover { opacity: 1; }

body.theme-tailadmin .card {
  background-color: var(--tt-card);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-card);
}
/* bootstrap's .rounded utility (0.25rem !important) must not shrink card corners */
body.theme-tailadmin .card.rounded {
  border-radius: var(--tt-radius-card) !important;
}
/* covers both bare imgs and the <div class="card-img-top"><img class="card-img-top"> wrapper */
body.theme-tailadmin .card .card-img-top,
body.theme-tailadmin .panel .card-img-top {
  border-top-left-radius: calc(var(--tt-radius-card) - 1px);
  border-top-right-radius: calc(var(--tt-radius-card) - 1px);
}

/* list-groups inside a card/panel: plain separators between items,
   no border or rounding around the group itself */
body.theme-tailadmin .card .list-group,
body.theme-tailadmin .panel .list-group {
  border-radius: 0;
}
body.theme-tailadmin .card .list-group > .list-group-item,
body.theme-tailadmin .panel .list-group > .list-group-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
body.theme-tailadmin .card .list-group > .list-group-item:first-child,
body.theme-tailadmin .panel .list-group > .list-group-item:first-child {
  border-top: 0;
}
body.theme-tailadmin .card .list-group > .list-group-item:last-child,
body.theme-tailadmin .panel .list-group > .list-group-item:last-child {
  border-bottom: 0;
}
body.theme-tailadmin .card-header,
body.theme-tailadmin .card-footer {
  background-color: transparent;
  border-color: var(--tt-border);
}

/* .panel.simple is an invisible container in the stock theme — keep it that way */
body.theme-tailadmin .panel.simple {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.theme-tailadmin .frame-wrap { background-color: transparent; }

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
body.theme-tailadmin .btn {
  border-radius: var(--tt-radius-input);
  font-weight: 500;
  box-shadow: none;
}
body.theme-tailadmin .btn:focus {
  box-shadow: var(--tt-focus-ring);
}

body.theme-tailadmin .btn-primary {
  background-color: var(--tt-brand-500);
  border-color: var(--tt-brand-500);
  color: #fff;
}
body.theme-tailadmin .btn-primary:hover,
body.theme-tailadmin .btn-primary:not(:disabled):not(.disabled):active,
body.theme-tailadmin .btn-primary:not(:disabled):not(.disabled).active,
body.theme-tailadmin .show > .btn-primary.dropdown-toggle {
  background-color: var(--tt-brand-600);
  border-color: var(--tt-brand-600);
  color: #fff;
}

body.theme-tailadmin .btn-secondary,
body.theme-tailadmin .btn-default,
body.theme-tailadmin .btn-light {
  background-color: var(--tt-card);
  background-image: none; /* SmartAdmin paints these with a grey gradient */
  border-color: var(--tt-border-strong);
  color: var(--tt-gray-700);
}
body.theme-tailadmin.theme-dark .btn-secondary,
body.theme-tailadmin.theme-dark .btn-default,
body.theme-tailadmin.theme-dark .btn-light {
  color: var(--tt-text);
}
body.theme-tailadmin .btn-secondary:hover,
body.theme-tailadmin .btn-default:hover,
body.theme-tailadmin .btn-light:hover,
body.theme-tailadmin .btn-secondary:not(:disabled):not(.disabled):active,
body.theme-tailadmin .btn-default:not(:disabled):not(.disabled):active,
body.theme-tailadmin .btn-light:not(:disabled):not(.disabled):active,
body.theme-tailadmin .show > .btn-secondary.dropdown-toggle,
body.theme-tailadmin .show > .btn-default.dropdown-toggle,
body.theme-tailadmin .show > .btn-light.dropdown-toggle {
  background-color: var(--tt-card-hover);
  background-image: none;
  border-color: var(--tt-border-strong);
  color: var(--tt-heading);
}

body.theme-tailadmin .btn-success {
  background-color: var(--tt-success-500);
  border-color: var(--tt-success-500);
}
body.theme-tailadmin .btn-success:hover {
  background-color: var(--tt-success-600);
  border-color: var(--tt-success-600);
}
body.theme-tailadmin .btn-danger {
  background-color: var(--tt-error-500);
  border-color: var(--tt-error-500);
}
body.theme-tailadmin .btn-danger:hover {
  background-color: var(--tt-error-600);
  border-color: var(--tt-error-600);
}
body.theme-tailadmin .btn-warning {
  background-color: var(--tt-warning-500);
  border-color: var(--tt-warning-500);
  color: #fff;
}
body.theme-tailadmin .btn-warning:hover {
  background-color: var(--tt-warning-600);
  border-color: var(--tt-warning-600);
  color: #fff;
}
body.theme-tailadmin .btn-info {
  background-color: var(--tt-info-500);
  border-color: var(--tt-info-500);
}
body.theme-tailadmin .btn-info:hover {
  background-color: var(--tt-info-600);
  border-color: var(--tt-info-600);
}

body.theme-tailadmin .btn-outline-primary {
  color: var(--tt-brand-500);
  border-color: var(--tt-brand-500);
  background-color: transparent;
}
body.theme-tailadmin .btn-outline-primary:hover,
body.theme-tailadmin .btn-outline-primary:not(:disabled):not(.disabled):active,
body.theme-tailadmin .btn-outline-primary:not(:disabled):not(.disabled).active {
  background-color: var(--tt-brand-500);
  border-color: var(--tt-brand-500);
  color: #fff;
}
body.theme-tailadmin .btn-outline-secondary,
body.theme-tailadmin .btn-outline-default {
  color: var(--tt-gray-700);
  border-color: var(--tt-border-strong);
}
body.theme-tailadmin.theme-dark .btn-outline-secondary,
body.theme-tailadmin.theme-dark .btn-outline-default {
  color: var(--tt-text);
}
body.theme-tailadmin .btn-outline-secondary:hover,
body.theme-tailadmin .btn-outline-default:hover,
body.theme-tailadmin .btn-outline-secondary:not(:disabled):not(.disabled):active,
body.theme-tailadmin .btn-outline-default:not(:disabled):not(.disabled):active,
body.theme-tailadmin .btn-outline-secondary:not(:disabled):not(.disabled).active,
body.theme-tailadmin .btn-outline-default:not(:disabled):not(.disabled).active,
body.theme-tailadmin .show > .btn-outline-secondary.dropdown-toggle,
body.theme-tailadmin .show > .btn-outline-default.dropdown-toggle {
  background-color: var(--tt-nav-hover-bg);
  border-color: var(--tt-border-strong);
  color: var(--tt-heading);
}
body.theme-tailadmin .btn-outline-danger { color: var(--tt-error-500); border-color: var(--tt-error-500); }
body.theme-tailadmin .btn-outline-danger:hover { background-color: var(--tt-error-500); color: #fff; }
body.theme-tailadmin .btn-outline-success { color: var(--tt-success-500); border-color: var(--tt-success-500); }
body.theme-tailadmin .btn-outline-success:hover { background-color: var(--tt-success-500); color: #fff; }

body.theme-tailadmin .btn-link { color: var(--tt-brand-500); }

/* bare .btn (no colour variant, e.g. "btn btn-sm" collapse toggles) inherits
   bootstrap's dark text — lift it in dark mode */
body.theme-tailadmin.theme-dark .btn:not(.btn-primary):not(.btn-secondary):not(.btn-default):not(.btn-light):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-dark):not(.btn-link):not([class*='btn-outline']) {
  color: var(--tt-text);
}
/* variant-less .btn-icon: SmartAdmin pins color #030304 with a 15-part :not()
   selector that outranks the rule above — !important needed. The same variant
   exclusions keep coloured icon buttons untouched. */
body.theme-tailadmin.theme-dark .btn-icon:not([class*='-primary']):not([class*='-secondary']):not([class*='-default']):not([class*='-success']):not([class*='-info']):not([class*='-warning']):not([class*='-danger']):not([class*='-dark']):not([class*='-light']):not(.nav-item) {
  color: var(--tt-text) !important;
}

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */
body.theme-tailadmin .form-control,
body.theme-tailadmin .custom-select,
body.theme-tailadmin select.form-control,
body.theme-tailadmin textarea.form-control {
  background-color: var(--tt-card);
  border: 1px solid var(--tt-border-strong);
  border-radius: var(--tt-radius-input);
  color: var(--tt-heading);
}
body.theme-tailadmin .form-control::placeholder { color: var(--tt-text-muted); }
body.theme-tailadmin .form-control:focus,
body.theme-tailadmin .custom-select:focus {
  border-color: var(--tt-brand-500);
  box-shadow: var(--tt-focus-ring);
  background-color: var(--tt-card);
  color: var(--tt-heading);
}
body.theme-tailadmin .form-control:disabled,
body.theme-tailadmin .form-control[readonly] {
  background-color: var(--tt-bg-subtle);
  color: var(--tt-text-muted);
}
/* dark mode: the strong border reads too bright — soften inputs and icon boxes
   (focus still switches to the brand border) */
body.theme-tailadmin.theme-dark .form-control,
body.theme-tailadmin.theme-dark .custom-select,
body.theme-tailadmin.theme-dark select.form-control,
body.theme-tailadmin.theme-dark textarea.form-control,
body.theme-tailadmin.theme-dark .input-group-text {
  border-color: var(--tt-border);
}
body.theme-tailadmin label,
body.theme-tailadmin .form-label,
body.theme-tailadmin legend {
  color: var(--tt-gray-700);
}
body.theme-tailadmin.theme-dark label,
body.theme-tailadmin.theme-dark .form-label,
body.theme-tailadmin.theme-dark legend {
  color: var(--tt-text);
}

body.theme-tailadmin .input-group-text {
  background-color: var(--tt-bg-subtle);
  border: 1px solid var(--tt-border-strong);
  border-radius: var(--tt-radius-input);
  color: var(--tt-text);
}

/* a field following a prepend icon box reads as one control: no divider border
   (settings.css intends this, but the theme's form-control border was winning)
   and breathing room for the text */
body.theme-tailadmin .input-group > .input-group-prepend + .form-control {
  border-left: 0;
  padding-left: 0.375rem;
}

/* corner-radius utilities must keep beating the theme's input radius,
   so grouped inputs (icon + field) stay flush */
body.theme-tailadmin .border-top-left-radius-0 { border-top-left-radius: 0 !important; }
body.theme-tailadmin .border-top-right-radius-0 { border-top-right-radius: 0 !important; }
body.theme-tailadmin .border-bottom-left-radius-0 { border-bottom-left-radius: 0 !important; }
body.theme-tailadmin .border-bottom-right-radius-0 { border-bottom-right-radius: 0 !important; }

/* datatable search: stretch icon box and input to the same height */
body.theme-tailadmin .dt-search label > div {
  display: inline-flex;
  align-items: stretch;
}
body.theme-tailadmin .dt-search .input-group-text {
  background-color: var(--tt-card);
  height: auto;
}

/* deliberately borderless inputs stay invisible… */
body.theme-tailadmin .form-control.border-0:not(textarea) {
  border: 0;
  background-color: transparent;
}
/* …but comment boxes (mentio textareas) become proper inputs */
body.theme-tailadmin textarea.form-control.border-0 {
  background-color: var(--tt-card);
  border: 1px solid var(--tt-border-strong) !important;
  border-radius: var(--tt-radius-input);
  padding: 0.5rem 0.75rem !important;
}

/* checkboxes / radios / switches */
body.theme-tailadmin .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--tt-brand-500);
  border-color: var(--tt-brand-500);
}
body.theme-tailadmin .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: var(--tt-focus-ring);
}
body.theme-tailadmin .custom-control-label::before {
  background-color: var(--tt-card);
  border-color: var(--tt-border-strong);
}
body.theme-tailadmin.theme-dark .custom-control-input:checked ~ .custom-control-label {
  color: #fff;
}

/* select2 */
body.theme-tailadmin .select2-container--default .select2-selection--single,
body.theme-tailadmin .select2-container--default .select2-selection--multiple {
  background-color: var(--tt-card);
  border: 1px solid var(--tt-border-strong);
  border-radius: var(--tt-radius-input);
  color: var(--tt-heading);
}
body.theme-tailadmin .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--tt-heading);
}
body.theme-tailadmin .select2-dropdown {
  background-color: var(--tt-card);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-menu);
  box-shadow: var(--tt-shadow-lg);
  color: var(--tt-text);
}
body.theme-tailadmin .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--tt-brand-500);
  color: #fff;
}
body.theme-tailadmin .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--tt-card);
  border: 1px solid var(--tt-border-strong);
  border-radius: var(--tt-radius-input);
  color: var(--tt-heading);
}
body.theme-tailadmin .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--tt-brand-50);
  border: 1px solid transparent;
  border-radius: 0.375rem;
  color: var(--tt-brand-500);
}

/* --------------------------------------------------------------------------
   10. Dropdown menus
   -------------------------------------------------------------------------- */
body.theme-tailadmin .dropdown-menu {
  background-color: var(--tt-card);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-menu);
  box-shadow: var(--tt-shadow-lg);
  color: var(--tt-text);
}
body.theme-tailadmin .dropdown-item {
  color: var(--tt-gray-700);
}
body.theme-tailadmin.theme-dark .dropdown-item {
  color: var(--tt-text);
}
body.theme-tailadmin .dropdown-item:hover,
body.theme-tailadmin .dropdown-item:focus {
  background-color: var(--tt-nav-hover-bg);
  color: var(--tt-heading);
}
body.theme-tailadmin .dropdown-item.active,
body.theme-tailadmin .dropdown-item:active {
  background-color: var(--tt-nav-active-bg);
  color: var(--tt-nav-active-text);
}
body.theme-tailadmin .dropdown-divider { border-color: var(--tt-border); }

/* multilevel flyouts: SmartAdmin's :hover trigger rule paints #f8f9fa with a
   5-class selector — restyle trigger and nested menu with theme surfaces */
body.theme-tailadmin .dropdown-menu .dropdown-multilevel:hover > .dropdown-item:not(.disabled) {
  background: var(--tt-nav-hover-bg);
  color: var(--tt-heading);
}
body.theme-tailadmin .dropdown-menu .dropdown-multilevel > .dropdown-menu {
  background-color: var(--tt-card);
}
body.theme-tailadmin .dropdown-header { color: var(--tt-text-muted); }

/* gradient headers inside dropdowns (user card, notifications) */
body.theme-tailadmin .bg-trans-gradient {
  background: linear-gradient(135deg, var(--tt-brand-500), var(--tt-brand-700)) !important;
}
/* .color-white must stay white (the theme heading colors were out-specifying it) */
body.theme-tailadmin .color-white,
body.theme-tailadmin .bg-trans-gradient h1, body.theme-tailadmin .bg-trans-gradient h2,
body.theme-tailadmin .bg-trans-gradient h3, body.theme-tailadmin .bg-trans-gradient h4,
body.theme-tailadmin .bg-trans-gradient h5, body.theme-tailadmin .bg-trans-gradient h6 {
  color: #fff;
}

/* --------------------------------------------------------------------------
   11. Tables
   -------------------------------------------------------------------------- */
body.theme-tailadmin .table {
  color: var(--tt-text);
  border-color: var(--tt-border);
}
body.theme-tailadmin .table thead th {
  background-color: var(--tt-bg-subtle);
  color: var(--tt-gray-500);
  border-top: 0;
  border-bottom: 1px solid var(--tt-border);
  font-weight: 500;
}
body.theme-tailadmin.theme-dark .table thead th { color: var(--tt-text); }
body.theme-tailadmin .table td,
body.theme-tailadmin .table th {
  border-color: var(--tt-border);
}
body.theme-tailadmin .table-hover tbody tr:hover {
  background-color: var(--tt-card-hover);
  color: var(--tt-heading);
}
body.theme-tailadmin .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--tt-bg-subtle);
}
body.theme-tailadmin .table-bordered,
body.theme-tailadmin .table-bordered td,
body.theme-tailadmin .table-bordered th {
  border-color: var(--tt-border);
}

/* DataTables chrome */
body.theme-tailadmin .dataTables_wrapper .dataTables_length select,
body.theme-tailadmin .dataTables_wrapper .dataTables_filter input {
  background-color: var(--tt-card);
  border: 1px solid var(--tt-border-strong);
  border-radius: var(--tt-radius-input);
  color: var(--tt-heading);
}
body.theme-tailadmin .dataTables_wrapper .dataTables_info,
body.theme-tailadmin .dataTables_wrapper .dataTables_length,
body.theme-tailadmin .dataTables_wrapper .dataTables_filter {
  color: var(--tt-text);
}
body.theme-tailadmin .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--tt-radius-input);
  color: var(--tt-text) !important;
}
body.theme-tailadmin .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.theme-tailadmin .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--tt-brand-500);
  border-color: var(--tt-brand-500);
  color: #fff !important;
}
body.theme-tailadmin .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--tt-nav-hover-bg);
  border-color: var(--tt-border);
  color: var(--tt-heading) !important;
}

/* --------------------------------------------------------------------------
   12. Tabs & pills
   -------------------------------------------------------------------------- */
body.theme-tailadmin .nav-tabs {
  border-bottom: 1px solid var(--tt-border);
}
body.theme-tailadmin .nav-tabs .nav-link {
  color: var(--tt-gray-500);
  border: 0;
  border-bottom: 2px solid transparent;
  font-weight: 500;
  background: transparent;
}
body.theme-tailadmin .nav-tabs .nav-link:hover {
  color: var(--tt-heading);
  border-color: transparent transparent var(--tt-border-strong);
}
body.theme-tailadmin .nav-tabs .nav-link.active {
  color: var(--tt-brand-500);
  background: transparent;
  border-color: transparent transparent var(--tt-brand-500);
}
/* SmartAdmin's ".nav-tabs .nav-item .nav-link.active:not(:hover) { color: #333 }"
   out-specifies the rule above — reclaim it */
body.theme-tailadmin .nav-tabs .nav-item .nav-link.active:not(:hover) {
  color: var(--tt-brand-500);
}
body.theme-tailadmin.theme-dark .nav-tabs .nav-item .nav-link.active:not(:hover) {
  color: #fff;
}
body.theme-tailadmin .nav-pills .nav-link {
  color: var(--tt-gray-700);
  border-radius: var(--tt-radius-input);
}
body.theme-tailadmin.theme-dark .nav-pills .nav-link { color: var(--tt-text); }
body.theme-tailadmin .nav-pills .nav-link.active {
  background-color: var(--tt-brand-500);
  color: #fff;
}

/* --------------------------------------------------------------------------
   13. Badges & alerts
   -------------------------------------------------------------------------- */
body.theme-tailadmin .badge {
  font-weight: 500;
  border-radius: 9999px;
  padding: 0.25em 0.7em;
}
/* keep SmartAdmin's grow-to-fit pill behaviour (min/max-width + side padding)
   so multi-digit counts like the member count don't get squashed */
body.theme-tailadmin .badge.badge-icon {
  padding: 0 3px;
  border-radius: 1.25rem;
  max-width: none;
}
body.theme-tailadmin .badge-primary:not(.badge-icon) { background-color: var(--tt-brand-50); color: var(--tt-brand-500); }
body.theme-tailadmin .badge-secondary:not(.badge-icon) { background-color: var(--tt-bg-subtle); color: var(--tt-gray-700); }
body.theme-tailadmin.theme-dark .badge-secondary:not(.badge-icon) { color: var(--tt-text); }
body.theme-tailadmin .badge-success:not(.badge-icon) { background-color: var(--tt-success-50); color: var(--tt-success-600); }
body.theme-tailadmin .badge-danger:not(.badge-icon) { background-color: var(--tt-error-50); color: var(--tt-error-600); }
body.theme-tailadmin .badge-warning:not(.badge-icon) { background-color: var(--tt-warning-50); color: var(--tt-warning-600); }
body.theme-tailadmin .badge-info:not(.badge-icon) { background-color: var(--tt-info-50); color: var(--tt-info-600); }
body.theme-tailadmin.theme-dark .badge-success:not(.badge-icon) { color: var(--tt-success-500); }
body.theme-tailadmin.theme-dark .badge-danger:not(.badge-icon) { color: var(--tt-error-500); }
body.theme-tailadmin.theme-dark .badge-warning:not(.badge-icon) { color: var(--tt-warning-500); }
body.theme-tailadmin.theme-dark .badge-info:not(.badge-icon) { color: var(--tt-info-500); }

body.theme-tailadmin .alert {
  border-radius: var(--tt-radius-menu);
  border: 1px solid;
}
body.theme-tailadmin .alert-primary { background-color: var(--tt-brand-50); border-color: var(--tt-brand-200); color: var(--tt-brand-600); }
body.theme-tailadmin .alert-success { background-color: var(--tt-success-50); border-color: var(--tt-success-500); color: var(--tt-success-600); }
body.theme-tailadmin .alert-danger { background-color: var(--tt-error-50); border-color: var(--tt-error-500); color: var(--tt-error-600); }
body.theme-tailadmin .alert-warning { background-color: var(--tt-warning-50); border-color: var(--tt-warning-500); color: var(--tt-warning-600); }
body.theme-tailadmin .alert-info { background-color: var(--tt-info-50); border-color: var(--tt-info-500); color: var(--tt-info-600); }

/* alerts painted with solid bg-* utilities (e.g. query status boxes) keep white text */
body.theme-tailadmin .alert[class*="bg-primary"],
body.theme-tailadmin .alert[class*="bg-success"],
body.theme-tailadmin .alert[class*="bg-danger"],
body.theme-tailadmin .alert[class*="bg-warning"],
body.theme-tailadmin .alert[class*="bg-info"],
body.theme-tailadmin .alert[class*="bg-dark"] {
  color: #fff;
  border-color: transparent;
}
body.theme-tailadmin .alert[class*="bg-primary"] :is(h1, h2, h3, h4, h5, h6, p),
body.theme-tailadmin .alert[class*="bg-success"] :is(h1, h2, h3, h4, h5, h6, p),
body.theme-tailadmin .alert[class*="bg-danger"] :is(h1, h2, h3, h4, h5, h6, p),
body.theme-tailadmin .alert[class*="bg-warning"] :is(h1, h2, h3, h4, h5, h6, p),
body.theme-tailadmin .alert[class*="bg-info"] :is(h1, h2, h3, h4, h5, h6, p),
body.theme-tailadmin .alert[class*="bg-dark"] :is(h1, h2, h3, h4, h5, h6, p) {
  color: #fff;
}

/* --------------------------------------------------------------------------
   14. Modals & popovers
   -------------------------------------------------------------------------- */
body.theme-tailadmin .modal-content {
  background-color: var(--tt-card);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-card);
  box-shadow: var(--tt-shadow-lg);
  color: var(--tt-text);
}
body.theme-tailadmin .modal-header,
body.theme-tailadmin .modal-footer {
  border-color: var(--tt-border);
}
body.theme-tailadmin .modal-title { color: var(--tt-heading); }
body.theme-tailadmin.theme-dark .close { color: var(--tt-heading); text-shadow: none; }

body.theme-tailadmin .popover {
  background-color: var(--tt-card);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-menu);
  box-shadow: var(--tt-shadow-md);
}
body.theme-tailadmin .popover-body { color: var(--tt-text); }
body.theme-tailadmin .popover-header {
  background-color: var(--tt-bg-subtle);
  border-color: var(--tt-border);
  color: var(--tt-heading);
}

/* --------------------------------------------------------------------------
   15. Pagination
   -------------------------------------------------------------------------- */
body.theme-tailadmin .page-link {
  background-color: var(--tt-card);
  border: 1px solid var(--tt-border);
  color: var(--tt-gray-700);
}
body.theme-tailadmin.theme-dark .page-link { color: var(--tt-text); }
body.theme-tailadmin .page-link:hover {
  background-color: var(--tt-nav-hover-bg);
  border-color: var(--tt-border);
  color: var(--tt-heading);
}
body.theme-tailadmin .page-item.active .page-link {
  background-color: var(--tt-brand-500);
  border-color: var(--tt-brand-500);
  color: #fff;
}
body.theme-tailadmin .page-item.disabled .page-link {
  background-color: var(--tt-bg-subtle);
  color: var(--tt-text-muted);
  border-color: var(--tt-border);
}

/* --------------------------------------------------------------------------
   16. Misc dark-mode cleanups
   -------------------------------------------------------------------------- */
body.theme-tailadmin.theme-dark .page-content,
body.theme-tailadmin.theme-dark .panel-content,
body.theme-tailadmin.theme-dark p {
  color: var(--tt-text);
}
body.theme-tailadmin.theme-dark hr { border-color: var(--tt-border); }
body.theme-tailadmin.theme-dark .list-group-item {
  background-color: var(--tt-card);
  border-color: var(--tt-border);
  color: var(--tt-text);
}
body.theme-tailadmin .list-group-item {
  border-color: var(--tt-border);
}
body.theme-tailadmin.theme-dark .custom-scroll::-webkit-scrollbar-thumb {
  background: var(--tt-border-strong);
}

/* page-specific light separator borders */
body.theme-tailadmin.theme-dark #pim_side_menu h4 {
  border-top-color: var(--tt-border);
}
body.theme-tailadmin.theme-dark .form-floating:not(:last-of-type) {
  border-bottom-color: var(--tt-border-strong);
}

/* bootstrap's .text-black-50 utility — mirror to white in dark mode */
body.theme-tailadmin.theme-dark .text-black-50 {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* modern dashboard pages (support, feed, rebate/turnover calendars, supplier
   dashboard, healthcheck) share a :root token palette in their page CSS
   (--bg-page, --text-primary, ...). Custom properties set on body shadow the
   :root ones for everything inside the page, so remap the whole palette here. */
body.theme-tailadmin.theme-dark {
  --bg-page: #101828;
  --bg-card: #18202f;
  --bg-inset: #111927;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-selected: #1d2939;
  --border: #1d2939;
  --border-strong: #344054;
  --text-primary: #f9fafb;
  --text-secondary: #d0d5dd;
  --text-muted: #98a2b3;
  --text-dim: #667085;
  --text-faint: #475467;
  --green: #22c55e;
  --green-light: rgba(34, 197, 94, 0.16);
  --purple: #a78bfa;
  --purple-light: rgba(139, 92, 246, 0.18);
  --blue: #60a5fa;
  --blue-light: rgba(59, 130, 246, 0.18);
  --red: #f87171;
  --red-light: rgba(239, 68, 68, 0.18);
  --orange: #fb923c;
  --orange-light: rgba(249, 115, 22, 0.18);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* rebates page (psa/rebates.css pins light colours, some !important) */
body.theme-tailadmin.theme-dark .card-header .card-title {
  color: var(--tt-heading);
}
body.theme-tailadmin.theme-dark .totalstable td.lbl { color: var(--tt-text); }
body.theme-tailadmin.theme-dark .totalstable td.val { color: var(--tt-heading); }
body.theme-tailadmin.theme-dark .totalstable.boxed { background-color: var(--tt-bg-subtle); }
body.theme-tailadmin.theme-dark .card-header.grandbar {
  background-color: #1c2537 !important;
  border-top-color: var(--tt-border-strong);
}
body.theme-tailadmin.theme-dark .alert.detailsbox {
  background-color: var(--tt-card);
  color: var(--tt-text);
}

/* block-ui loading overlay + message panel */
body.theme-tailadmin.theme-dark .block-ui-overlay {
  background-color: #101828;
}
body.theme-tailadmin.theme-dark .block-ui-message {
  background-color: var(--tt-card);
  color: var(--tt-heading);
  border-color: var(--tt-border-strong);
}

/* btn-group buttons: SmartAdmin adds rgba(0,0,0,0.1) left/right borders with a
   5-class selector — invisible on dark surfaces */
body.theme-tailadmin.theme-dark .btn-group .btn:not([class*='btn-outline-']):not(.btn-icon):not(.btn-light) {
  border-left-color: var(--tt-border-strong);
  border-right-color: var(--tt-border-strong);
}

/* fullcalendar event chips sit on coloured backgrounds — white text in both
   modes (!important because the theme's a:not(...) link rule out-specifies
   any sane selector here) */
body.theme-tailadmin a.fc-event,
body.theme-tailadmin a.fc-event:hover,
body.theme-tailadmin a.fc-event .fc-title {
  color: #fff !important;
}

/* fullcalendar header row: light grey gradient */
body.theme-tailadmin.theme-dark .fc-head-container thead tr {
  background-image: none;
  background-color: var(--tt-bg-subtle);
}
/* fullcalendar other-month cells: near-white striped fill — keep the stripe
   pattern but build it from white-alpha over a darker-than-card base */
body.theme-tailadmin.theme-dark .fc-other-month {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.025) 50%, rgba(255, 255, 255, 0.025) 75%, transparent 75%, transparent);
  background-color: #141c2b;
  background-size: 1rem 1rem;
}

/* datatable search input: ebiz.css forces a near-white #E5E5E5 border !important */
body.theme-tailadmin.theme-dark div.dt-container .dt-search input {
  border: 1px solid var(--tt-border) !important;
}

/* right-hand contacts rail (msgr-list): bg-faded goes near-transparent in dark —
   it's position-fixed over the page, so give it a solid surface */
body.theme-tailadmin.theme-dark .msgr-list {
  background-color: var(--tt-card) !important;
  border-color: var(--tt-border) !important;
}

/* blog list: page CSS pins dark text/red links via #blogList ID rules */
body.theme-tailadmin.theme-dark #blogList,
body.theme-tailadmin.theme-dark #blogList td {
  color: var(--tt-text);
}
body.theme-tailadmin.theme-dark #blogList .danger a {
  color: #f97066;
}

/* progress bar track is a pale grey by default */
body.theme-tailadmin.theme-dark .progress {
  background-color: var(--tt-bg-subtle);
}

/* accordions: SmartAdmin headers are #f7f9fa with dark text — remap for dark */
body.theme-tailadmin.theme-dark .accordion .card .card-header {
  background-color: var(--tt-bg-subtle);
}
body.theme-tailadmin.theme-dark .accordion .card .card-header .card-title {
  color: var(--tt-brand-400);
}
body.theme-tailadmin.theme-dark .accordion .card .card-header .card-title.collapsed {
  color: var(--tt-text);
}

/* pale *-50 tint utilities (row highlights like #blogList tr.bg-danger-50) are
   near-white — remap to dark tints. !important outranks the page-level rules
   that set them (ID selectors, rebates' .accordion .bg-*-50). SOLID colours
   (18% mixes over the #18202f card), not rgba — nested tinted elements
   (e.g. .totalstable.bg-info-50 inside a .bg-info-50 header) must not stack darker. */
body.theme-tailadmin.theme-dark .bg-danger-50 { background-color: #3f2631 !important; }
body.theme-tailadmin.theme-dark .bg-warning-50 { background-color: #403428 !important; }
body.theme-tailadmin.theme-dark .bg-success-50 { background-color: #173b3a !important; }
body.theme-tailadmin.theme-dark .bg-info-50 { background-color: #163851 !important; }
body.theme-tailadmin.theme-dark .bg-primary-50 { background-color: #202b54 !important; }

/* floating deal-compare basket (psa.html / pim/detail.html inline styles) */
body.theme-tailadmin .compare-basket {
  background: var(--tt-card);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-card);
  box-shadow: var(--tt-shadow-lg);
}
body.theme-tailadmin .compare-basket .cb-icon {
  background: var(--tt-brand-50);
  color: var(--tt-brand-500);
}
body.theme-tailadmin.theme-dark .compare-basket .cb-icon { color: var(--tt-brand-400); }
body.theme-tailadmin .compare-basket .cb-meta strong { color: var(--tt-heading); }
body.theme-tailadmin .compare-basket .cb-meta small { color: var(--tt-text-muted); }
body.theme-tailadmin .compare-basket .cb-btn { color: var(--tt-brand-500); }
body.theme-tailadmin.theme-dark .compare-basket .cb-btn { color: var(--tt-brand-400); }
body.theme-tailadmin .compare-basket .cb-btn:hover { background: var(--tt-nav-hover-bg); }
body.theme-tailadmin .compare-basket .cb-btn.cb-primary {
  background: var(--tt-brand-500);
  color: #fff;
}
body.theme-tailadmin .compare-basket .cb-btn.cb-primary:hover { background: var(--tt-brand-600); }
body.theme-tailadmin .compare-basket .cb-btn.cb-muted { color: var(--tt-text-muted); }
body.theme-tailadmin .compare-basket .cb-btn[disabled] {
  background: var(--tt-bg-subtle);
  color: var(--tt-text-muted);
}

/* deal comparison modal (psa/compare.html inline styles are light-mode) */
body.theme-tailadmin.theme-dark .cmp-toc {
  background: var(--tt-bg-subtle);
  border-color: var(--tt-border);
}
body.theme-tailadmin.theme-dark .cmp-toc-label { color: var(--tt-text-muted); }
body.theme-tailadmin.theme-dark .cmp-toc-chip {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.45);
  color: #fbbf24;
}
body.theme-tailadmin.theme-dark .cmp-toc-chip:hover {
  background: rgba(245, 158, 11, 0.22);
  color: #fcd34d;
}
body.theme-tailadmin.theme-dark .cmp-toc-chip-prev {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.45);
  color: #34d399;
}
body.theme-tailadmin.theme-dark .cmp-toc-chip-prev:hover {
  background: rgba(16, 185, 129, 0.28);
  color: #6ee7b7;
}
body.theme-tailadmin.theme-dark .cmp-deal-sub { color: var(--tt-text-muted); }
body.theme-tailadmin.theme-dark .cmp-table > thead th { box-shadow: 0 1px 0 var(--tt-border); }

/* app list (quick settings dropdown) */
body.theme-tailadmin .app-list-item {
  color: var(--tt-gray-700);
  border-radius: var(--tt-radius-menu);
}
body.theme-tailadmin.theme-dark .app-list-item { color: var(--tt-text); }
body.theme-tailadmin .app-list-item:hover {
  background-color: var(--tt-nav-hover-bg);
  border-color: transparent;
}