/* ------------------------------------------------------------------------------
 *
 *  # Dashboard theme
 *
 *  Reskins the Limitless 4 admin template (assets/css/ltr/all.min.css) with the
 *  shapes of the public homepage (assets/index/css/style.css): card radius,
 *  borders, shadows, pill badges, rounded sidebar links. Colours stay
 *  Limitless' own palette, adjusted where needed to pass WCAG AA. Limitless is driven by CSS
 *  custom properties, so this file mostly swaps values; the few element rules
 *  below cover things Limitless hard-codes (badge shape, sidebar links, vendor
 *  widgets). Loaded after global.css from nav/header.php. No page markup is
 *  touched.
 *
 *  Every page sets data-color-theme="dark" on <html>; the Preferences panel
 *  removes the attribute for light mode. Tokens (--sp-*) are defined once per
 *  mode and every component rule carries two selectors, one per mode.
 *  Limitless' own dark overrides come in three forms, one of which is
 *  "[data-color-theme=dark] .card:not([data-color-theme])" at specificity
 *  (0,3,0); the dark prefix "html[data-color-theme=dark][data-color-theme]"
 *  (0,2,1 + the class) outranks it, and "html:not([data-color-theme])"
 *  outranks Limitless' plain light rules.
 *
 * ---------------------------------------------------------------------------- */

/* ----- Global tokens ------------------------------------------------------- */

/* Dark mode (data-color-theme="dark" on <html>, the default every page sets).
   Colours are Limitless' own dark palette (#202125 body, #2c2d33 cards,
   white text); only the primary fill is darkened so white text on it clears
   4.5:1. The homepage look is kept for shapes: radii, borders, shadows. */
html[data-color-theme=dark],
html[data-color-theme=dark] [data-color-theme] {
  --sp-bg: #202125;
  --sp-surface: #2c2d33;
  --sp-surface-raised: #3a3b41;
  --sp-field: #2c2d33;
  --sp-field-border: #4d4d51;
  --sp-field-muted: #26272c;
  --sp-placeholder: #9c9da2;
  --sp-sidebar: #141517;
  --sp-ink: #fff;
  --sp-text: #fff;
  --sp-muted: #bfbfc4; /* 7.5:1 on cards, 5.1:1 on bubbles */
  --sp-primary: #0a6bd3; /* Limitless #0c83ff is 3.7:1 with white; this fill is 5.2:1 */
  --sp-primary-dark: #0962bf;
  --sp-primary-rgb: 10, 107, 211;
  --sp-primary-soft: #6db5ff;
  --sp-primary-outline: rgba(109, 181, 255, 0.5);
  --sp-focus: #6db5ff;
  --sp-border: rgba(255, 255, 255, 0.125);
  --sp-border-strong: #4d4d51;
  --sp-border-soft: rgba(255, 255, 255, 0.08);
  --sp-divider: rgba(255, 255, 255, 0.125);
  --sp-hover: rgba(255, 255, 255, 0.06);
  --sp-hover-row: rgba(255, 255, 255, 0.04);
  --sp-stripe: rgba(255, 255, 255, 0.025);
  --sp-active-bg: rgba(12, 131, 255, 0.3);
  --sp-active-color: #fff;
  --sp-outline-bg: rgba(255, 255, 255, 0.04);
  --sp-outline-border: rgba(255, 255, 255, 0.28);
  --sp-outline-hover-bg: rgba(109, 181, 255, 0.12);
  --sp-outline-hover-border: #6db5ff;
  --sp-outline-hover-color: #fff;
  --sp-progress: rgba(255, 255, 255, 0.25);
  --sp-radius-card: 18px;
  --sp-radius-btn: 10px;
  --sp-shadow-card: 0 2px 4px rgba(0, 0, 0, 0.08), 0 32px 64px -30px rgba(0, 0, 0, 0.5);
  --sp-shadow-pop: 0 2px 4px rgba(0, 0, 0, 0.2), 0 20px 44px -18px rgba(0, 0, 0, 0.6);

  /* The Limitless neutral grey scale is kept as-is: the homepage's dark
     surfaces (#2C2D33 fields, #4d4d51 field borders) are the same neutrals. */

  /* Brand */
  --primary: var(--sp-primary);
  --primary-rgb: var(--sp-primary-rgb);
  --component-active-bg: var(--sp-primary);
  --component-active-bg-rgb: var(--sp-primary-rgb);
  --focus-ring-box-shadow: 0 0 0 0.125rem rgba(10, 107, 211, 0.4);

  /* Body */
  --body-bg: var(--sp-bg);
  --body-bg-rgb: 32, 33, 37;
  --body-color: var(--sp-text);
  --body-color-rgb: 255, 255, 255;
  --link-color: var(--sp-primary-soft);
  --link-rgb-color: 109, 181, 255;
  --link-hover-color: #a0cfff;

  /* Borders, radii, shadows */
  --border-color: var(--sp-border-strong);
  --border-color-translucent: var(--sp-border);
  --border-radius: var(--sp-radius-btn);
  --border-radius-sm: 8px;
  --border-radius-lg: 14px;
  --border-radius-xl: var(--sp-radius-card);
  --box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 14px 34px -18px rgba(0, 0, 0, 0.5);
  --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --box-shadow-lg: var(--sp-shadow-pop);
}

/* Light mode (the Preferences panel removes the attribute). Colours are
   Limitless' light palette (#f1f4f9 body, white cards, #1F2937 text). The
   sidebar, top bar and footer stay dark in both modes: their markup assumes a
   dark surface (white logo, text-white labels). */
html:not([data-color-theme]) {
  --sp-bg: #f1f4f9;
  --sp-surface: #ffffff;
  --sp-surface-raised: #ffffff;
  --sp-field: #ffffff;
  --sp-field-border: #D1D5DB;
  --sp-field-muted: #F3F4F6;
  --sp-placeholder: #6B7280;
  --sp-sidebar: #252b36;
  --sp-ink: #1F2937;
  --sp-text: #1F2937;
  --sp-muted: #4B5563; /* 7.6:1 on white */
  --sp-primary: #0a6bd3;
  --sp-primary-dark: #0962bf;
  --sp-primary-rgb: 10, 107, 211;
  --sp-primary-soft: #0a6bd3; /* links: Limitless #0c83ff is 3.7:1 on white */
  --sp-primary-outline: rgba(10, 107, 211, 0.45);
  --sp-focus: #0a6bd3;
  --sp-border: #E5E7EB;
  --sp-border-strong: #D1D5DB;
  --sp-border-soft: #F3F4F6;
  --sp-divider: #E5E7EB;
  --sp-hover: rgba(31, 41, 55, 0.04);
  --sp-hover-row: rgba(31, 41, 55, 0.035);
  --sp-stripe: rgba(31, 41, 55, 0.02);
  --sp-active-bg: #e7f1ff;
  --sp-active-color: #0a6bd3;
  --sp-outline-bg: #ffffff;
  --sp-outline-border: #D1D5DB;
  --sp-outline-hover-bg: #e7f1ff;
  --sp-outline-hover-border: rgba(10, 107, 211, 0.45);
  --sp-outline-hover-color: #0a6bd3;
  --sp-progress: rgba(255, 255, 255, 0.35);
  --sp-radius-card: 18px;
  --sp-radius-btn: 10px;
  --sp-shadow-card: 0 1px 2px rgba(31, 41, 55, 0.04), 0 14px 34px -18px rgba(31, 41, 55, 0.14);
  --sp-shadow-pop: 0 2px 4px rgba(31, 41, 55, 0.05), 0 20px 44px -18px rgba(31, 41, 55, 0.2);

  --primary: var(--sp-primary);
  --primary-rgb: var(--sp-primary-rgb);
  --component-active-bg: var(--sp-primary);
  --component-active-bg-rgb: var(--sp-primary-rgb);
  --focus-ring-box-shadow: 0 0 0 0.125rem rgba(10, 107, 211, 0.25);

  --body-bg: var(--sp-bg);
  --body-bg-rgb: 241, 244, 249;
  --body-color: var(--sp-text);
  --body-color-rgb: 31, 41, 55;
  --link-color: var(--sp-primary);
  --link-rgb-color: var(--sp-primary-rgb);
  --link-hover-color: var(--sp-primary-dark);

  --border-color: var(--sp-border-strong);
  --border-color-translucent: var(--sp-border);
  --border-radius: var(--sp-radius-btn);
  --border-radius-sm: 8px;
  --border-radius-lg: 14px;
  --border-radius-xl: var(--sp-radius-card);
  --box-shadow: var(--sp-shadow-card);
  --box-shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.06);
  --box-shadow-lg: var(--sp-shadow-pop);
}

/* Page background: homepage dark body with its blue radial glow */
html[data-color-theme=dark][data-color-theme] body {
  background-color: var(--sp-bg);
  background-image: none;
  color: var(--sp-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Light mode: homepage light body with its two softer glows */
html:not([data-color-theme]) body {
  background-color: var(--sp-bg);
  background-image: none;
  color: var(--sp-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-color-theme=dark][data-color-theme] .text-muted,
html:not([data-color-theme]) .text-muted {
  color: var(--sp-muted) !important;
}

/* Headings, labels and emphasised text are white on the homepage's dark cards;
   body copy stays --sp-text. */
html[data-color-theme=dark][data-color-theme] h1,
html:not([data-color-theme]) h1,
html[data-color-theme=dark][data-color-theme] h2,
html:not([data-color-theme]) h2,
html[data-color-theme=dark][data-color-theme] h3,
html:not([data-color-theme]) h3,
html[data-color-theme=dark][data-color-theme] h4,
html:not([data-color-theme]) h4,
html[data-color-theme=dark][data-color-theme] h5,
html:not([data-color-theme]) h5,
html[data-color-theme=dark][data-color-theme] h6,
html:not([data-color-theme]) h6,
html[data-color-theme=dark][data-color-theme] .form-label,
html:not([data-color-theme]) .form-label,
html[data-color-theme=dark][data-color-theme] label,
html:not([data-color-theme]) label,
html[data-color-theme=dark][data-color-theme] strong,
html:not([data-color-theme]) strong,
html[data-color-theme=dark][data-color-theme] b,
html:not([data-color-theme]) b,
html[data-color-theme=dark][data-color-theme] .fw-semibold,
html:not([data-color-theme]) .fw-semibold,
html[data-color-theme=dark][data-color-theme] .fw-bold,
html:not([data-color-theme]) .fw-bold,
html[data-color-theme=dark][data-color-theme] .table > tbody > tr > th,
html:not([data-color-theme]) .table > tbody > tr > th {
  color: var(--sp-ink);
}
html[data-color-theme=dark][data-color-theme] .form-label,
html:not([data-color-theme]) .form-label,
html[data-color-theme=dark][data-color-theme] label,
html:not([data-color-theme]) label {
  font-weight: 500;
}

html[data-color-theme=dark][data-color-theme] .page-title,
html:not([data-color-theme]) .page-title {
  color: var(--sp-ink);
  font-weight: 600;
}
html[data-color-theme=dark][data-color-theme] .page-title .fw-normal,
html:not([data-color-theme]) .page-title .fw-normal {
  color: var(--sp-text);
}

/* ----- Cards --------------------------------------------------------------- */

html[data-color-theme=dark][data-color-theme] .card,
html:not([data-color-theme]) .card {
  --card-bg: var(--sp-surface);
  --card-border-width: 1px;
  --card-border-color: var(--sp-border);
  --card-border-radius: var(--sp-radius-card);
  --card-inner-border-radius: calc(var(--sp-radius-card) - 1px);
  --card-box-shadow: var(--sp-shadow-card);
  --card-cap-bg: transparent;
  --card-cap-color: var(--sp-ink);
  --card-cap-padding-y: 1rem;
  --card-cap-padding-x: 1.25rem;
  /* Limitless sets .card { border: 0 }, so the border variable alone is inert */
  border: var(--card-border-width) solid var(--card-border-color);
}

/* .card-header mirrors .order-card__head on the homepage */
html[data-color-theme=dark][data-color-theme] .card-header,
html:not([data-color-theme]) .card-header {
  border-bottom-color: var(--sp-divider);
}
html[data-color-theme=dark][data-color-theme] .card-header h1,
html:not([data-color-theme]) .card-header h1,
html[data-color-theme=dark][data-color-theme] .card-header h2,
html:not([data-color-theme]) .card-header h2,
html[data-color-theme=dark][data-color-theme] .card-header h3,
html:not([data-color-theme]) .card-header h3,
html[data-color-theme=dark][data-color-theme] .card-header h4,
html:not([data-color-theme]) .card-header h4,
html[data-color-theme=dark][data-color-theme] .card-header h5,
html:not([data-color-theme]) .card-header h5,
html[data-color-theme=dark][data-color-theme] .card-header h6,
html:not([data-color-theme]) .card-header h6,
html[data-color-theme=dark][data-color-theme] .card-header .card-title,
html:not([data-color-theme]) .card-header .card-title {
  color: var(--sp-ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
/* Pages give the heading py-sm-2 my-sm-1 and the header py-sm-0; below the sm
   breakpoint neither applies and the heading's bottom margin makes the header
   tall, so drop it there. */
html[data-color-theme=dark][data-color-theme] .card-header > :is(h1, h2, h3, h4, h5, h6):last-child,
html:not([data-color-theme]) .card-header > :is(h1, h2, h3, h4, h5, h6):last-child {
  margin-bottom: 0;
}
html[data-color-theme=dark][data-color-theme] .card-footer,
html:not([data-color-theme]) .card-footer {
  border-top-color: var(--sp-divider);
}

/* Coloured stat tiles (.card.bg-teal / .bg-pink / .bg-indigo / .bg-primary ...)
   are saturated blocks in Limitless; on the homepage palette they become
   tinted cards: the colour stays as a wash and a border, text stays white. */
html[data-color-theme=dark][data-color-theme] .card[class*=" bg-"]:not(.bg-transparent):not(.bg-white):not(.bg-light):not(.bg-dark):not(.bg-black),
html:not([data-color-theme]) .card[class*=" bg-"]:not(.bg-transparent):not(.bg-white):not(.bg-light):not(.bg-dark):not(.bg-black),
html[data-color-theme=dark][data-color-theme] .card[class^="bg-"]:not(.bg-transparent):not(.bg-white):not(.bg-light):not(.bg-dark):not(.bg-black),
html:not([data-color-theme]) .card[class^="bg-"]:not(.bg-transparent):not(.bg-white):not(.bg-light):not(.bg-dark):not(.bg-black) {
  --bg-opacity: 0.16;
  border-color: var(--sp-border-soft);
  color: var(--sp-ink);
}

/* Third-party iframes (reward offerwall) are white boxes; at least round them */
html[data-color-theme=dark][data-color-theme] .card-body > iframe,
html:not([data-color-theme]) .card-body > iframe {
  border-radius: 12px;
}

/* Inline code: Limitless uses pink; the homepage accent blue fits better */
html[data-color-theme=dark][data-color-theme] code,
html:not([data-color-theme]) code {
  color: var(--sp-primary-soft);
}

/* ----- Buttons ------------------------------------------------------------- */

html[data-color-theme=dark][data-color-theme] .btn,
html:not([data-color-theme]) .btn {
  --btn-border-radius: var(--sp-radius-btn);
  --btn-font-weight: 500;
}
html[data-color-theme=dark][data-color-theme] .btn-primary,
html:not([data-color-theme]) .btn-primary {
  --btn-bg: var(--sp-primary);
  --btn-border-color: var(--sp-primary);
  --btn-hover-bg: var(--sp-primary-dark);
  --btn-hover-border-color: var(--sp-primary-dark);
  --btn-focus-shadow-rgb: var(--sp-primary-rgb);
  --btn-active-bg: #084f9b;
  --btn-active-border-color: #084f9b;
  --btn-disabled-bg: var(--sp-primary);
  --btn-disabled-border-color: var(--sp-primary);
}
html[data-color-theme=dark][data-color-theme] .btn-primary:hover,
html:not([data-color-theme]) .btn-primary:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 16px 30px -12px rgba(10, 107, 211, 0.6);
}
html[data-color-theme=dark][data-color-theme] .btn-outline-primary,
html:not([data-color-theme]) .btn-outline-primary {
  --btn-color: var(--sp-primary-soft);
  --btn-border-color: var(--sp-primary-outline);
  --btn-hover-bg: var(--sp-outline-hover-bg);
  --btn-hover-border-color: var(--sp-outline-hover-border);
  --btn-hover-color: var(--sp-outline-hover-color);
  --btn-active-bg: var(--sp-active-bg);
  --btn-active-color: var(--sp-outline-hover-color);
}
/* Neutral buttons: the homepage's outline button on dark. Limitless' teal
   .btn-secondary has no counterpart in the homepage palette, so it joins them. */
html[data-color-theme=dark][data-color-theme] .btn-light,
html:not([data-color-theme]) .btn-light,
html[data-color-theme=dark][data-color-theme] .btn-outline-light,
html:not([data-color-theme]) .btn-outline-light,
html[data-color-theme=dark][data-color-theme] .btn-secondary,
html:not([data-color-theme]) .btn-secondary {
  --btn-color: var(--sp-ink);
  --btn-bg: var(--sp-outline-bg);
  --btn-border-color: var(--sp-outline-border);
  --btn-hover-color: var(--sp-outline-hover-color);
  --btn-hover-bg: var(--sp-outline-hover-bg);
  --btn-hover-border-color: var(--sp-outline-hover-border);
  --btn-active-color: var(--sp-outline-hover-color);
  --btn-active-bg: var(--sp-outline-hover-bg);
  --btn-active-border-color: var(--sp-outline-hover-border);
  --btn-focus-shadow-rgb: var(--sp-primary-rgb);
}
html[data-color-theme=dark][data-color-theme] .btn-link,
html:not([data-color-theme]) .btn-link {
  --btn-color: var(--sp-primary-soft);
  --btn-hover-color: #a0cfff;
}

/* ----- Badges: pills, like the homepage chips --------------------------- */

html[data-color-theme=dark][data-color-theme] .badge,
html:not([data-color-theme]) .badge {
  --badge-border-radius: 999px;
  --badge-padding-x: 0.625rem;
  --badge-padding-y: 0.3125rem;
  --badge-font-weight: 600;
  letter-spacing: 0.01em;
}

/* ----- Sidebar ------------------------------------------------------------- */

/* The sidebar, top bar and footer stay dark in light mode, so text tokens used
   inside them (username, balance, strong text) must stay the dark values. */
html:not([data-color-theme]) .sidebar,
html:not([data-color-theme]) .navbar {
  --sp-ink: #fff;
  --sp-text: #fff;
  --sp-muted: #bfbfc4;
}
/* ...but menus that open from them are light surfaces again */
html:not([data-color-theme]) .sidebar .dropdown-menu,
html:not([data-color-theme]) .navbar .dropdown-menu {
  --sp-ink: #1F2937;
  --sp-text: #1F2937;
  --sp-muted: #4B5563;
}

html[data-color-theme=dark][data-color-theme] .sidebar,
html:not([data-color-theme]) .sidebar,
html[data-color-theme=dark][data-color-theme] .sidebar-dark,
html:not([data-color-theme]) .sidebar-dark {
  --sidebar-bg: var(--sp-sidebar);
  --sidebar-color: var(--sp-text);
  --sidebar-border-color: rgba(255, 255, 255, 0.125);
  --sidebar-border-width: 1px;
  --sidebar-box-shadow: 0.25rem 0 1.5rem rgba(0, 0, 0, 0.45);
}
html[data-color-theme=dark][data-color-theme] .sidebar-dark .nav-sidebar,
html:not([data-color-theme]) .sidebar-dark .nav-sidebar,
html[data-color-theme=dark][data-color-theme] .nav-sidebar,
html:not([data-color-theme]) .nav-sidebar {
  --nav-sidebar-divider-color: rgba(255, 255, 255, 0.125);
  --nav-link-color: rgba(255, 255, 255, 0.85);
  --nav-link-hover-color: #fff;
  --nav-link-hover-bg: rgba(255, 255, 255, 0.1);
  --nav-link-hover-active-bg: var(--sp-primary-dark);
  --nav-link-active-color: #fff;
  --nav-link-active-bg: var(--sp-primary);
  --nav-link-disabled-color: rgba(255, 255, 255, 0.4);
  --nav-link-padding-x: 0.875rem;
}
/* Rounded links inset from the sidebar edge; the active one gets a primary
   tint instead of Limitless' flat grey highlight. */
html[data-color-theme=dark][data-color-theme] .nav-sidebar .nav-link,
html:not([data-color-theme]) .nav-sidebar .nav-link {
  margin-left: 0.625rem;
  margin-right: 0.625rem;
  border-radius: var(--sp-radius-btn);
  transition: background-color 0.15s ease, color 0.15s ease;
}
html[data-color-theme=dark][data-color-theme] .nav-sidebar .nav-link.active,
html:not([data-color-theme]) .nav-sidebar .nav-link.active {
  box-shadow: 0 8px 18px -10px rgba(10, 107, 211, 0.8);
}
html[data-color-theme=dark][data-color-theme] .nav-sidebar .nav-link.active:hover,
html:not([data-color-theme]) .nav-sidebar .nav-link.active:hover,
html[data-color-theme=dark][data-color-theme] .nav-sidebar .nav-link.active:focus,
html:not([data-color-theme]) .nav-sidebar .nav-link.active:focus {
  background-color: var(--sp-primary-dark);
}
html[data-color-theme=dark][data-color-theme] .nav-sidebar .nav-link.active i,
html:not([data-color-theme]) .nav-sidebar .nav-link.active i {
  color: #fff;
}
html[data-color-theme=dark][data-color-theme] .nav-sidebar .nav-item-header,
html:not([data-color-theme]) .nav-sidebar .nav-item-header {
  margin-left: 0.625rem;
  margin-right: 0.625rem;
  color: #bfbfc4;
}
/* Collapsed (icon-only) sidebar: keep the original full-width hit area */
html[data-color-theme=dark][data-color-theme] .sidebar-main-resized:not(.sidebar-collapsed):not(.sidebar-main-unfold) .nav-sidebar .nav-link,
html:not([data-color-theme]) .sidebar-main-resized:not(.sidebar-collapsed):not(.sidebar-main-unfold) .nav-sidebar .nav-link,
html[data-color-theme=dark][data-color-theme] .sidebar-main-resized:not(.sidebar-collapsed):not(.sidebar-main-unfold) .nav-sidebar .nav-item-header,
html:not([data-color-theme]) .sidebar-main-resized:not(.sidebar-collapsed):not(.sidebar-main-unfold) .nav-sidebar .nav-item-header {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
html[data-color-theme=dark][data-color-theme] .sidebar .sidebar-section.bg-black,
html:not([data-color-theme]) .sidebar .sidebar-section.bg-black {
  --bg-opacity: 0;
  border-bottom-color: rgba(255, 255, 255, 0.125) !important;
}
html[data-color-theme=dark][data-color-theme] .sidebar-dark .btn-sidebar-expand,
html:not([data-color-theme]) .sidebar-dark .btn-sidebar-expand {
  --btn-bg: var(--sp-sidebar);
  --btn-hover-bg: #202125;
  --btn-active-bg: #26272c;
}

/* ----- Top navbar ---------------------------------------------------------- */

html[data-color-theme=dark][data-color-theme] .navbar,
html:not([data-color-theme]) .navbar,
html[data-color-theme=dark][data-color-theme] .navbar-dark,
html:not([data-color-theme]) .navbar-dark {
  --navbar-bg: var(--sp-sidebar);
  --navbar-color: rgba(255, 255, 255, 0.85);
  --navbar-hover-color: #fff;
  --navbar-hover-active-color: #fff;
  --navbar-active-color: #fff;
  --navbar-disabled-color: rgba(255, 255, 255, 0.35);
  --navbar-brand-color: #fff;
  --navbar-brand-hover-color: #fff;
  --navbar-hover-bg: rgba(255, 255, 255, 0.06);
  --navbar-hover-active-bg: rgba(255, 255, 255, 0.1);
  --navbar-active-bg: rgba(12, 131, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.125);
}

html[data-color-theme=dark][data-color-theme] .navbar-footer,
html:not([data-color-theme]) .navbar-footer {
  border-top-color: rgba(255, 255, 255, 0.125) !important;
}

/* ----- Forms --------------------------------------------------------------- */

html[data-color-theme=dark][data-color-theme] .form-control,
html:not([data-color-theme]) .form-control {
  --input-bg: var(--sp-field);
  --input-focus-bg: var(--sp-field);
  --input-color: var(--sp-ink);
  --input-border-color: var(--sp-field-border);
  --input-placeholder-color: var(--sp-placeholder);
  --input-focus-border-color: var(--sp-focus);
  --input-disabled-bg: var(--sp-field-muted);
  --input-disabled-border-color: var(--sp-field-border);
}
html[data-color-theme=dark][data-color-theme] .form-select,
html:not([data-color-theme]) .form-select {
  --form-select-bg: var(--sp-field);
  --form-select-color: var(--sp-ink);
  --form-select-border-color: var(--sp-field-border);
  --form-select-focus-border-color: var(--sp-focus);
}
html[data-color-theme=dark][data-color-theme] .input-group,
html:not([data-color-theme]) .input-group {
  --input-group-addon-bg: var(--sp-field-muted);
  --input-group-addon-border-color: var(--sp-field-border);
  --input-group-addon-color: var(--sp-text);
}
html[data-color-theme=dark][data-color-theme] .form-check-input,
html:not([data-color-theme]) .form-check-input {
  --form-check-input-bg: var(--sp-field);
  --form-check-input-border: 2px solid var(--sp-field-border);
  --form-check-input-checked-bg-color: var(--sp-primary);
}

/* ----- Dropdowns, modals, tables, lists, tabs, pagination, alerts ---------- */

html[data-color-theme=dark][data-color-theme] .dropdown-menu,
html:not([data-color-theme]) .dropdown-menu {
  --dropdown-bg: var(--sp-surface);
  --dropdown-border-color: var(--sp-border);
  --dropdown-border-radius: 12px;
  --dropdown-inner-border-radius: 11px;
  --dropdown-box-shadow: var(--sp-shadow-pop);
  --dropdown-divider-bg: var(--sp-border);
  --dropdown-link-hover-bg: var(--sp-hover);
  --dropdown-link-active-bg: var(--sp-active-bg);
  --dropdown-link-active-color: var(--sp-active-color);
  --dropdown-header-color: var(--sp-muted);
}

html[data-color-theme=dark][data-color-theme] .modal,
html:not([data-color-theme]) .modal {
  --modal-bg: var(--sp-surface);
  --modal-border-color: var(--sp-border);
  --modal-border-radius: var(--sp-radius-card);
  --modal-inner-border-radius: calc(var(--sp-radius-card) - 1px);
  --modal-box-shadow: var(--sp-shadow-pop);
  --modal-header-border-color: var(--sp-divider);
  --modal-footer-border-color: var(--sp-divider);
}

html[data-color-theme=dark][data-color-theme] .table,
html:not([data-color-theme]) .table {
  --table-border-color: var(--sp-border-soft);
  --table-striped-bg: var(--sp-stripe);
  --table-hover-bg: var(--sp-hover-row);
  --table-active-bg: var(--sp-active-bg);
  --table-group-separator-color: var(--sp-border-strong);
}
html[data-color-theme=dark][data-color-theme] .table > thead > tr > th,
html:not([data-color-theme]) .table > thead > tr > th {
  color: var(--sp-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}

html[data-color-theme=dark][data-color-theme] .list-group,
html:not([data-color-theme]) .list-group {
  --list-group-border-color: var(--sp-border);
  --list-group-border-radius: 12px;
  --list-group-action-hover-bg: var(--sp-hover);
  --list-group-action-active-bg: var(--sp-active-bg);
  --list-group-active-bg: var(--sp-primary);
  --list-group-active-border-color: var(--sp-primary);
}

html[data-color-theme=dark][data-color-theme] .nav-tabs,
html:not([data-color-theme]) .nav-tabs {
  --nav-tabs-border-color: var(--sp-border-strong);
}
html[data-color-theme=dark][data-color-theme] .nav-tabs:not(.nav-tabs-underline):not(.nav-tabs-overline):not(.nav-tabs-solid),
html:not([data-color-theme]) .nav-tabs:not(.nav-tabs-underline):not(.nav-tabs-overline):not(.nav-tabs-solid) {
  --nav-tabs-link-active-bg: var(--sp-surface);
  --nav-tabs-link-active-border-color: var(--sp-border-strong) var(--sp-border-strong) var(--sp-surface);
}

html[data-color-theme=dark][data-color-theme] .pagination,
html:not([data-color-theme]) .pagination {
  --pagination-bg: transparent;
  --pagination-disabled-bg: transparent;
  --pagination-border-color: var(--sp-border-strong);
  --pagination-border-radius: 8px;
  --pagination-hover-bg: var(--sp-hover);
  --pagination-hover-border-color: var(--sp-border-strong);
  --pagination-focus-bg: var(--sp-hover);
  --pagination-active-bg: var(--sp-primary);
  --pagination-active-border-color: var(--sp-primary);
  --pagination-active-color: #fff;
  --pagination-disabled-color: var(--sp-muted);
}

html[data-color-theme=dark][data-color-theme] .alert,
html:not([data-color-theme]) .alert {
  --alert-border-radius: 12px;
}

html[data-color-theme=dark][data-color-theme] .toast,
html:not([data-color-theme]) .toast {
  --toast-bg: var(--sp-surface);
  --toast-border-color: var(--sp-border);
}

html[data-color-theme=dark][data-color-theme] .page-header-light,
html:not([data-color-theme]) .page-header-light {
  --page-header-bg: var(--sp-surface);
}

/* ----- Vendor widgets ------------------------------------------------------ */

/* Select2: field matches .form-control, menu matches .dropdown-menu */
html[data-color-theme=dark][data-color-theme] .select2-container,
html:not([data-color-theme]) .select2-container {
  --s2-bg: var(--sp-field);
  --s2-color: var(--sp-ink);
  --s2-border-color: var(--sp-field-border);
  --s2-focus-border-color: var(--sp-focus);
  --s2-placeholder-color: var(--sp-placeholder);
  --s2-disabled-bg: var(--sp-field-muted);
  --s2-disabled-border-color: var(--sp-field-border);
  --s2-menu-bg: var(--sp-surface);
  --s2-menu-border-color: var(--sp-border);
  --s2-menu-border-radius: 12px;
  --s2-menu-box-shadow: var(--sp-shadow-pop);
  --s2-menu-link-hover-bg: var(--sp-hover);
  --s2-menu-link-hover-color: var(--sp-ink);
  --s2-menu-link-active-bg: var(--sp-active-bg);
  --s2-menu-link-active-color: var(--sp-active-color);
  --s2-menu-link-disabled-color: var(--sp-muted);
  --s2-search-bg: var(--sp-field);
  --s2-search-focus-bg: var(--sp-field);
  --s2-search-border-color: var(--sp-field-border);
  --s2-search-focus-border-color: var(--sp-focus);
  --s2-pills-bg: var(--sp-active-bg);
  --s2-pills-color: var(--sp-active-color);
  --s2-pills-hover-bg: var(--sp-primary);
  --s2-pills-border-radius: 999px;
}

/* DataTables: header/footer strips use the card border colour */
html[data-color-theme=dark][data-color-theme] .datatable-header,
html:not([data-color-theme]) .datatable-header,
html[data-color-theme=dark][data-color-theme] .datatable-footer,
html:not([data-color-theme]) .datatable-footer {
  border-color: var(--sp-divider);
}
html[data-color-theme=dark][data-color-theme] .dataTable thead .sorting:before,
html:not([data-color-theme]) .dataTable thead .sorting:before,
html[data-color-theme=dark][data-color-theme] .dataTable thead .sorting:after,
html:not([data-color-theme]) .dataTable thead .sorting:after,
html[data-color-theme=dark][data-color-theme] .dataTable thead .sorting_asc_disabled:before,
html:not([data-color-theme]) .dataTable thead .sorting_asc_disabled:before,
html[data-color-theme=dark][data-color-theme] .dataTable thead .sorting_desc_disabled:after,
html:not([data-color-theme]) .dataTable thead .sorting_desc_disabled:after {
  color: var(--sp-muted);
}
html[data-color-theme=dark][data-color-theme] .dataTable thead .sorting_asc:before,
html:not([data-color-theme]) .dataTable thead .sorting_asc:before,
html[data-color-theme=dark][data-color-theme] .dataTable thead .sorting_asc:after,
html:not([data-color-theme]) .dataTable thead .sorting_asc:after,
html[data-color-theme=dark][data-color-theme] .dataTable thead .sorting_desc:before,
html:not([data-color-theme]) .dataTable thead .sorting_desc:before,
html[data-color-theme=dark][data-color-theme] .dataTable thead .sorting_desc:after,
html:not([data-color-theme]) .dataTable thead .sorting_desc:after {
  color: var(--sp-primary-soft);
}
html[data-color-theme=dark][data-color-theme] .dataTables_processing,
html:not([data-color-theme]) .dataTables_processing {
  background-color: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  box-shadow: var(--sp-shadow-pop);
}

/* Noty toasts: card surface with a rounded corner; typed toasts keep their
   status colour from Limitless. */
html[data-color-theme=dark][data-color-theme] .noty_layout,
html:not([data-color-theme]) .noty_layout {
  --noty-bg: var(--sp-surface);
  --noty-border-color: var(--sp-border-strong);
  --noty-border-radius: 12px;
  --noty-shadow: var(--sp-shadow-pop);
  --noty-progress-bg: var(--sp-progress);
}
html[data-color-theme=dark][data-color-theme] .noty_theme__limitless.noty_type__info,
html:not([data-color-theme]) .noty_theme__limitless.noty_type__info {
  --noty-bg: var(--sp-primary);
}

/* ECharts tooltip (assets/app/charts/pages/main/lines.js reads these) */
html[data-color-theme=dark][data-color-theme] .chart,
html:not([data-color-theme]) .chart {
  --chart-tooltip-bg: var(--sp-surface-raised);
  --chart-tooltip-border: var(--sp-border-strong);
}

/* ----- Status colours: WCAG AA ------------------------------------------- */

/* Limitless' status colours were picked for coloured text on white and fail
   AA once white text sits on them (success #059669 3.8:1, danger #EF4444
   3.8:1, warning #f58646 2.5:1, info #049aad 3.4:1, teal #26A69A 3.0:1).
   Badges, solid buttons and typed toasts all put white on them, so every one
   is darkened to at least 4.5:1 against white. In dark mode the coloured
   *text* utilities keep Limitless' pale tints (all above 6:1 on cards); in
   light mode they pick these solids up through the shared --*-rgb tokens. */
html[data-color-theme=dark],
html[data-color-theme=dark] [data-color-theme],
html:not([data-color-theme]) {
  --sp-success: #047857;        /* 5.5:1 with white */
  --sp-success-rgb: 4, 120, 87;
  --sp-success-dark: #065f46;
  --sp-success-darker: #064e3b;
  --sp-danger: #dc2626;         /* 4.8:1 with white */
  --sp-danger-rgb: 220, 38, 38;
  --sp-danger-dark: #b91c1c;
  --sp-danger-darker: #991b1b;
  --sp-warning: #c2410c;        /* 5.2:1 with white */
  --sp-warning-rgb: 194, 65, 12;
  --sp-warning-dark: #9a3412;
  --sp-warning-darker: #7c2d12;
  --sp-info: #0e7490;           /* 5.4:1 with white */
  --sp-info-rgb: 14, 116, 144;
  --sp-info-dark: #155e75;
  --sp-info-darker: #164e63;
  --sp-teal: #0f766e;           /* 5.5:1 with white */
  --sp-teal-rgb: 15, 118, 110;
  --sp-teal-dark: #115e59;
  --sp-teal-darker: #134e4a;

  --success: var(--sp-success);
  --success-rgb: var(--sp-success-rgb);
  --danger: var(--sp-danger);
  --danger-rgb: var(--sp-danger-rgb);
  --warning: var(--sp-warning);
  --warning-rgb: var(--sp-warning-rgb);
  --info: var(--sp-info);
  --info-rgb: var(--sp-info-rgb);
  --teal: var(--sp-teal);
  --teal-rgb: var(--sp-teal-rgb);
}

/* Solid status buttons (Limitless hard-codes their hex values) */
html[data-color-theme=dark][data-color-theme] .btn-success,
html:not([data-color-theme]) .btn-success {
  --btn-bg: var(--sp-success);
  --btn-border-color: var(--sp-success);
  --btn-hover-bg: var(--sp-success-dark);
  --btn-hover-border-color: var(--sp-success-dark);
  --btn-active-bg: var(--sp-success-darker);
  --btn-active-border-color: var(--sp-success-darker);
  --btn-disabled-bg: var(--sp-success);
  --btn-disabled-border-color: var(--sp-success);
  --btn-focus-shadow-rgb: var(--sp-success-rgb);
}
html[data-color-theme=dark][data-color-theme] .btn-danger,
html:not([data-color-theme]) .btn-danger {
  --btn-bg: var(--sp-danger);
  --btn-border-color: var(--sp-danger);
  --btn-hover-bg: var(--sp-danger-dark);
  --btn-hover-border-color: var(--sp-danger-dark);
  --btn-active-bg: var(--sp-danger-darker);
  --btn-active-border-color: var(--sp-danger-darker);
  --btn-disabled-bg: var(--sp-danger);
  --btn-disabled-border-color: var(--sp-danger);
  --btn-focus-shadow-rgb: var(--sp-danger-rgb);
}
html[data-color-theme=dark][data-color-theme] .btn-warning,
html:not([data-color-theme]) .btn-warning {
  --btn-bg: var(--sp-warning);
  --btn-border-color: var(--sp-warning);
  --btn-hover-bg: var(--sp-warning-dark);
  --btn-hover-border-color: var(--sp-warning-dark);
  --btn-active-bg: var(--sp-warning-darker);
  --btn-active-border-color: var(--sp-warning-darker);
  --btn-disabled-bg: var(--sp-warning);
  --btn-disabled-border-color: var(--sp-warning);
  --btn-focus-shadow-rgb: var(--sp-warning-rgb);
}
html[data-color-theme=dark][data-color-theme] .btn-info,
html:not([data-color-theme]) .btn-info {
  --btn-bg: var(--sp-info);
  --btn-border-color: var(--sp-info);
  --btn-hover-bg: var(--sp-info-dark);
  --btn-hover-border-color: var(--sp-info-dark);
  --btn-active-bg: var(--sp-info-darker);
  --btn-active-border-color: var(--sp-info-darker);
  --btn-disabled-bg: var(--sp-info);
  --btn-disabled-border-color: var(--sp-info);
  --btn-focus-shadow-rgb: var(--sp-info-rgb);
}
html[data-color-theme=dark][data-color-theme] .btn-teal,
html:not([data-color-theme]) .btn-teal {
  --btn-bg: var(--sp-teal);
  --btn-border-color: var(--sp-teal);
  --btn-hover-bg: var(--sp-teal-dark);
  --btn-hover-border-color: var(--sp-teal-dark);
  --btn-active-bg: var(--sp-teal-darker);
  --btn-active-border-color: var(--sp-teal-darker);
  --btn-disabled-bg: var(--sp-teal);
  --btn-disabled-border-color: var(--sp-teal);
  --btn-focus-shadow-rgb: var(--sp-teal-rgb);
}

/* Outline status buttons: coloured text on the card. Light mode uses the
   darkened solids; dark mode uses Limitless' pale tints (6:1 or better). */
html:not([data-color-theme]) .btn-outline-success {
  --btn-color: var(--sp-success);
  --btn-border-color: var(--sp-success);
  --btn-hover-bg: var(--sp-success);
  --btn-hover-border-color: var(--sp-success);
  --btn-active-bg: var(--sp-success-dark);
  --btn-active-border-color: var(--sp-success-dark);
}
html:not([data-color-theme]) .btn-outline-danger {
  --btn-color: var(--sp-danger);
  --btn-border-color: var(--sp-danger);
  --btn-hover-bg: var(--sp-danger);
  --btn-hover-border-color: var(--sp-danger);
  --btn-active-bg: var(--sp-danger-dark);
  --btn-active-border-color: var(--sp-danger-dark);
}
html:not([data-color-theme]) .btn-outline-warning {
  --btn-color: var(--sp-warning);
  --btn-border-color: var(--sp-warning);
  --btn-hover-bg: var(--sp-warning);
  --btn-hover-border-color: var(--sp-warning);
  --btn-active-bg: var(--sp-warning-dark);
  --btn-active-border-color: var(--sp-warning-dark);
}
html:not([data-color-theme]) .btn-outline-info {
  --btn-color: var(--sp-info);
  --btn-border-color: var(--sp-info);
  --btn-hover-bg: var(--sp-info);
  --btn-hover-border-color: var(--sp-info);
  --btn-active-bg: var(--sp-info-dark);
  --btn-active-border-color: var(--sp-info-dark);
}
html:not([data-color-theme]) .btn-outline-teal {
  --btn-color: var(--sp-teal);
  --btn-border-color: var(--sp-teal);
  --btn-hover-bg: var(--sp-teal);
  --btn-hover-border-color: var(--sp-teal);
  --btn-active-bg: var(--sp-teal-dark);
  --btn-active-border-color: var(--sp-teal-dark);
}
html[data-color-theme=dark][data-color-theme] .btn-outline-success {
  --btn-color: #69c0a5;
  --btn-border-color: #69c0a5;
  --btn-hover-bg: var(--sp-success);
  --btn-hover-border-color: var(--sp-success);
  --btn-active-bg: var(--sp-success-dark);
  --btn-active-border-color: var(--sp-success-dark);
}
html[data-color-theme=dark][data-color-theme] .btn-outline-danger {
  --btn-color: #f58f8f;
  --btn-border-color: #f58f8f;
  --btn-hover-bg: var(--sp-danger);
  --btn-hover-border-color: var(--sp-danger);
  --btn-active-bg: var(--sp-danger-dark);
  --btn-active-border-color: var(--sp-danger-dark);
}
html[data-color-theme=dark][data-color-theme] .btn-outline-warning {
  --btn-color: #f9b690;
  --btn-border-color: #f9b690;
  --btn-hover-bg: var(--sp-warning);
  --btn-hover-border-color: var(--sp-warning);
  --btn-active-bg: var(--sp-warning-dark);
  --btn-active-border-color: var(--sp-warning-dark);
}
html[data-color-theme=dark][data-color-theme] .btn-outline-info {
  --btn-color: #68c2ce;
  --btn-border-color: #68c2ce;
  --btn-hover-bg: var(--sp-info);
  --btn-hover-border-color: var(--sp-info);
  --btn-active-bg: var(--sp-info-dark);
  --btn-active-border-color: var(--sp-info-dark);
}
html[data-color-theme=dark][data-color-theme] .btn-outline-teal {
  --btn-color: #7dcac2;
  --btn-border-color: #7dcac2;
  --btn-hover-bg: var(--sp-teal);
  --btn-hover-border-color: var(--sp-teal);
  --btn-active-bg: var(--sp-teal-dark);
  --btn-active-border-color: var(--sp-teal-dark);
}

/* ----- Chat bubbles (ticket conversations, moderator notes) --------------- */

/* Customer bubble: raised surface, body text; links keep the link colour
   (6.9:1 dark, 6.7:1 light). */
html[data-color-theme=dark][data-color-theme] .media-chat,
html:not([data-color-theme]) .media-chat {
  --chat-message-bg: var(--sp-chat-bubble);
  --chat-message-color: var(--sp-text);
}
html[data-color-theme=dark][data-color-theme] .media-chat {
  --sp-chat-bubble: var(--sp-surface-raised);
}
html:not([data-color-theme]) .media-chat {
  --sp-chat-bubble: #F3F4F6;
}
/* Staff bubble: primary blue with white text. Links inside were the pale
   link blue (3.8:1); they are white and underlined instead. */
html[data-color-theme=dark][data-color-theme] .media-chat-item-reverse,
html:not([data-color-theme]) .media-chat-item-reverse {
  --chat-message-bg: var(--sp-primary);
  --chat-message-color: #fff;
}
html[data-color-theme=dark][data-color-theme] .media-chat-item-reverse .media-chat-message a,
html:not([data-color-theme]) .media-chat-item-reverse .media-chat-message a,
html[data-color-theme=dark][data-color-theme] .media-chat-item-reverse .media-chat-message .btn-link,
html:not([data-color-theme]) .media-chat-item-reverse .media-chat-message .btn-link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
html[data-color-theme=dark][data-color-theme] .media-chat-item-reverse .media-chat-message a:hover,
html:not([data-color-theme]) .media-chat-item-reverse .media-chat-message a:hover,
html[data-color-theme=dark][data-color-theme] .media-chat-item-reverse .media-chat-message .btn-link:hover,
html:not([data-color-theme]) .media-chat-item-reverse .media-chat-message .btn-link:hover {
  color: #cfe6ff;
}
html[data-color-theme=dark][data-color-theme] .media-chat-item-reverse .media-chat-message .text-muted,
html:not([data-color-theme]) .media-chat-item-reverse .media-chat-message .text-muted {
  color: #fff !important;
}
/* Sender names are .fw-semibold, which the heading rule above paints in ink;
   on the blue bubble that is 2.4:1 in light mode, so they stay white here. */
html[data-color-theme=dark][data-color-theme] .media-chat-item-reverse .media-chat-message :is(.fw-semibold, .fw-bold, strong, b),
html:not([data-color-theme]) .media-chat-item-reverse .media-chat-message :is(.fw-semibold, .fw-bold, strong, b) {
  color: #fff;
}
/* Internal (staff-only) note: a success-tinted bubble with a border, in
   place of the old inline "background-color: green" (3.3:1). Comes after the
   staff-bubble rules so it also applies to notes written by staff. */
html[data-color-theme=dark][data-color-theme] .media-chat .media-chat-message--note,
html:not([data-color-theme]) .media-chat .media-chat-message--note {
  background-color: var(--sp-note-bg);
  border: 1px solid var(--sp-note-border);
  color: var(--sp-text);
}
html[data-color-theme=dark][data-color-theme] .media-chat .media-chat-message--note {
  --sp-note-bg: #1c443f;      /* body text 6.9:1, links 5.4:1 */
  --sp-note-border: rgba(16, 185, 129, 0.45);
}
html:not([data-color-theme]) .media-chat .media-chat-message--note {
  --sp-note-bg: #d9f4eb;      /* body text 6.5:1, links 6.5:1 */
  --sp-note-border: rgba(4, 120, 87, 0.4);
}
html[data-color-theme=dark][data-color-theme] .media-chat .media-chat-message--note a,
html:not([data-color-theme]) .media-chat .media-chat-message--note a,
html[data-color-theme=dark][data-color-theme] .media-chat .media-chat-message--note .btn-link,
html:not([data-color-theme]) .media-chat .media-chat-message--note .btn-link {
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}
html[data-color-theme=dark][data-color-theme] .media-chat .media-chat-message--note .text-muted,
html:not([data-color-theme]) .media-chat .media-chat-message--note .text-muted {
  color: var(--sp-text) !important;
}
/* The primary blue is 4.5:1 on the light note tint; use the darker shade */
html:not([data-color-theme]) .media-chat .media-chat-message--note a,
html:not([data-color-theme]) .media-chat .media-chat-message--note .btn-link {
  color: var(--sp-primary-dark);
}
html[data-color-theme=dark][data-color-theme] .media-chat .media-chat-message--note :is(.fw-semibold, .fw-bold, strong, b),
html:not([data-color-theme]) .media-chat .media-chat-message--note :is(.fw-semibold, .fw-bold, strong, b) {
  color: var(--sp-ink);
}

/* ----- Keyboard focus ------------------------------------------------------ */

/* Limitless signals focus with a 2px shadow at 40% alpha, which is barely
   visible on the dark surfaces. Keyboard focus gets a solid 2px ring in the
   focus blue with a gap so it reads on any background. Containers that are
   focused programmatically (offcanvas panels and modals, tabindex="-1") are
   left out, or the ring would draw around the whole panel. */
html[data-color-theme=dark][data-color-theme] :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible,
html:not([data-color-theme]) :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--sp-focus);
  outline-offset: 2px;
}
html[data-color-theme=dark][data-color-theme] :is(.form-control, .form-select):focus-visible,
html:not([data-color-theme]) :is(.form-control, .form-select):focus-visible {
  outline-offset: 0;
}