/* ================================================================
   CoolSpeeds unified theme overlay — v2 (conservative)

   Philosophy: only theme the NEUTRALS (backgrounds, text, borders,
   headings, inputs, generic containers). Leave SEMANTIC colors alone:
     - .btn-success (green), .btn-danger (red), .btn-warning (yellow),
       .btn-info (cyan)
     - .label-success / -danger / -warning / -info
     - .alert-success / -danger / -warning / -info
     - .badge-success / -danger / -warning / -info
     - Status indicators (.text-success, .text-danger, etc.)
     - Ad-hoc .blue / .purple / .gray / .orange utility spans used for
       meaning in the legacy cabinet markup

   Dark theme: only inverts the base palette; semantic colors get slight
   saturation/brightness tuning so they stay readable on the dark bg.

   Loaded AFTER bootstrap/whmcs/style/modernstyle so our neutrals win.
   ================================================================ */

/* ---- Tokens ---- */

:root {
  --cs-blue-100: #c0ebff;
  --cs-blue-200: #93e8ff;
  --cs-blue-300: #5ddbff;
  --cs-blue-400: #26d1ff;
  --cs-blue-500: #02abff;
  --cs-blue-600: #008ad1;
  --cs-blue-700: #0c60b1;
  --cs-blue-800: #0a4b8b;
  --cs-blue-900: #0a1a2e;

  --cs-fire-400: #ffb800;
  --cs-fire-500: #ff8a00;
  --cs-fire-600: #ff6b00;

  --cs-r-sm: 6px;
  --cs-r-md: 10px;
  --cs-r-lg: 16px;
  --cs-r-full: 999px;

  --cs-tr: .2s cubic-bezier(.2,.8,.2,1);
  --cs-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Manrope, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Light theme (default) ---- */

html[data-theme="light"], html:not([data-theme]) {
  --cs-bg:          #ffffff;
  --cs-bg-alt:      #f4fafd;
  --cs-bg-elev:     #ffffff;
  --cs-bg-muted:    #eef6fb;

  --cs-text:        #0a2540;
  --cs-text-muted:  #546a80;
  --cs-text-soft:   #7a8ca0;

  --cs-border:      #dce8f2;
  --cs-border-strong: #bfd4e5;

  --cs-primary:     var(--cs-blue-500);
  --cs-primary-hover: var(--cs-blue-600);
  --cs-primary-ink: #ffffff;
  --cs-primary-soft: #e6f7ff;

  --cs-heading:     #0c60b1;

  --cs-shadow-sm: 0 2px 6px rgba(2, 86, 155, .08);
  --cs-shadow-md: 0 10px 30px rgba(2, 86, 155, .12);
}

/* ---- Dark theme ---- */

html[data-theme="dark"] {
  --cs-bg:          #081424;
  --cs-bg-alt:      #0c1c33;
  --cs-bg-elev:     #10263f;
  --cs-bg-muted:    #0c1e36;

  --cs-text:        #e6f1fb;
  --cs-text-muted:  #8aa3bd;
  --cs-text-soft:   #5f7896;

  --cs-border:      #1a3352;
  --cs-border-strong: #254a74;

  --cs-primary:     var(--cs-blue-400);
  --cs-primary-hover: var(--cs-blue-300);
  --cs-primary-ink: #031a2e;
  --cs-primary-soft: rgba(38, 209, 255, .14);

  --cs-heading:     #93e8ff;

  --cs-shadow-sm: 0 2px 6px rgba(0, 0, 0, .3);
  --cs-shadow-md: 0 10px 30px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] { color-scheme: dark; }

/* ================================================================
   BASE — neutrals only (bg / text / borders / fonts)
   ================================================================ */

html, body {
  color: var(--cs-text) !important;
  font-family: var(--cs-font-sans) !important;
  transition: background var(--cs-tr), color var(--cs-tr);
}

/* ---- Body backgrounds: tinted surface + triangle pattern (matches
        the hero-bg SVG used on coolspeeds.com home) ---- */

html[data-theme="light"], html[data-theme="light"] body,
html:not([data-theme]), html:not([data-theme]) body {
  /* Slightly deeper than the preview site's base #e6f7ff so the cabinet
     iframe visually separates from the surrounding preview page. */
  background-color: #d1ecf8 !important;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'><path d='M30 4 L56 48 L4 48 Z' fill='none' stroke='%2302abff' stroke-width='1' opacity='.22'/></svg>"),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(38, 209, 255, .35), transparent 70%);
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
}

html[data-theme="dark"], html[data-theme="dark"] body {
  background-color: #061120 !important;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'><path d='M30 4 L56 48 L4 48 Z' fill='none' stroke='%2326d1ff' stroke-width='1' opacity='.18'/></svg>"),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(2, 171, 255, .12), transparent 70%);
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
}

/* ================================================================
   Layout containment — every PAYMENTS entry point shares the same
   horizontal gutters so no content touches the iframe edges.

   Strategy: body gets horizontal padding + a centered max-width.
   All Bootstrap 2 negative-margin / fixed-width patterns that would
   normally escape the padded area are neutralized below so legacy
   markup (tables, rows, pagination, forms) stays inside the gutters.
   ================================================================ */

html { overflow-x: hidden; }

body {
  padding: 1.25rem 1.75rem 2rem !important;
  box-sizing: border-box !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: hidden;
}

/* Neutralize Bootstrap 2 fixed-width `.container` (1170px on wide
   viewports) — it overflows body's content-box when the viewport is
   between ~1200-1400px. Make it fluid instead. */
.container, .container-fluid {
  width: auto !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Neutralize Bootstrap 2 `.row` / `.row-fluid` negative margins
   (`margin-left: -20px`) that pull their content outside the parent's
   padded area. Pagination, forms and free content inside rows now stay
   flush-left with body padding. */
.row, .row-fluid {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.row > [class*="span"]:first-child,
.row-fluid > [class*="span"]:first-child {
  margin-left: 0 !important;
}

/* Tables stretch to 100% of their container (so they align with the
   body padding on both sides instead of having fixed widths). */
body .table,
body table.table-bordered,
body table.table-striped {
  width: 100% !important;
  max-width: 100% !important;
}

/* Navbar and major wrappers fill 100% of body content-box */
body > .navbar,
body > .wrapper,
body > .whmcscontainer,
body > #whmcsorderfrm {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

a:not(.btn):not(.label):not(.badge) {
  color: var(--cs-primary);
  transition: color var(--cs-tr);
}
a:not(.btn):not(.label):not(.badge):hover { color: var(--cs-primary-hover); text-decoration: none; }

h1, h2, h3, h4, h5, h6,
.page-header, .page-header h1, .page-header h2 {
  color: var(--cs-heading);
  font-family: var(--cs-font-sans);
}

hr, .divider { border-color: var(--cs-border); }

label { color: var(--cs-text); }

/* ---- Generic wrappers / layout containers — TRANSPARENT so the body
        triangle pattern shows through. Real surfaces (.panel, .well,
        tables, forms) keep their own solid backgrounds below. ---- */

.wrapper,
.whmcscontainer,
.whmcscontainer .footer,
#whmcsorderfrm,
#order-modern,
.minicartlist,
.minicartcol11,
.minicartcol22,
.checkoutbuttons,
.configtable,
.content, #content,
.main, #main,
.page-wrapper,
.content-wrapper,
.wrap {
  background-color: transparent !important;
  color: var(--cs-text) !important;
  border-color: var(--cs-border);
}

/* Bootstrap grid containers also transparent */
.container, .container-fluid,
.row, .row-fluid,
[class^="span"], [class*=" span"] {
  background-color: transparent !important;
}

/* ---- Panels / wells (neutral surface, no color hijacking) ---- */

.panel, .panel-default, .well {
  background-color: var(--cs-bg-elev) !important;
  border-color: var(--cs-border) !important;
  color: var(--cs-text);
  border-radius: var(--cs-r-md) !important;
  box-shadow: var(--cs-shadow-sm);
}
.panel-body { background: var(--cs-bg-elev) !important; color: var(--cs-text); }
.panel-heading, .panel-default > .panel-heading {
  background: var(--cs-bg-alt) !important;
  border-bottom: 1px solid var(--cs-border) !important;
  color: var(--cs-heading) !important;
  border-radius: var(--cs-r-md) var(--cs-r-md) 0 0 !important;
}
/* Semantic panels keep their color accent but use dark-theme-friendly bg */
.panel-success  { border-color: #3ab57a !important; }
.panel-success  > .panel-heading { background: rgba(58,181,122,.15) !important; color: #3ab57a !important; border-bottom-color: #3ab57a !important; }
.panel-danger   { border-color: #e74c3c !important; }
.panel-danger   > .panel-heading { background: rgba(231,76,60,.15)  !important; color: #e74c3c !important; border-bottom-color: #e74c3c !important; }
.panel-warning  { border-color: var(--cs-fire-500) !important; }
.panel-warning  > .panel-heading { background: rgba(255,138,0,.15)  !important; color: var(--cs-fire-500) !important; border-bottom-color: var(--cs-fire-500) !important; }
.panel-info     { border-color: var(--cs-primary) !important; }
.panel-info     > .panel-heading { background: var(--cs-primary-soft) !important; color: var(--cs-primary) !important; border-bottom-color: var(--cs-primary) !important; }

/* ---- Tables ---- */

/* ---- Tables: base (light theme / fallback) ---- */
.table, table {
  background: var(--cs-bg) !important;
  color: var(--cs-text);
  border-color: var(--cs-border) !important;
}
.table > thead > tr > th, table thead th {
  background: var(--cs-bg-alt) !important;
  color: var(--cs-heading) !important;
  border-color: var(--cs-border) !important;
}
.table > tbody > tr > td, table tbody td, table td {
  background-color: var(--cs-bg) !important;
  color: var(--cs-text) !important;
  border-color: var(--cs-border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--cs-bg-alt) !important;
}
.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > td {
  background-color: var(--cs-primary-soft) !important;
}

/* ---- Tables: DARK theme — elevated surface with depth + glow ---- */
html[data-theme="dark"] .table,
html[data-theme="dark"] table {
  background: #0d1f38 !important;
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: var(--cs-r-md) !important;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(38, 209, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  border: 1px solid #1a3352 !important;
}

html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] table thead th {
  background: linear-gradient(180deg, #163052 0%, #0e2340 100%) !important;
  background-image: linear-gradient(180deg, #163052 0%, #0e2340 100%) !important;
  color: var(--cs-blue-200) !important;
  border-color: #1f3a5c !important;
  border-bottom: 2px solid var(--cs-blue-700) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  font-weight: 700;
  letter-spacing: .02em;
  padding: .75rem 1rem !important;
}

html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] table tbody td,
html[data-theme="dark"] table td {
  background-color: #0d1f38 !important;
  color: var(--cs-text) !important;
  border-color: rgba(38, 209, 255, .08) !important;
  padding: .65rem 1rem !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: #112642 !important;
}

html[data-theme="dark"] .table-hover > tbody > tr:hover,
html[data-theme="dark"] .table-hover > tbody > tr:hover > td {
  background-color: rgba(38, 209, 255, .08) !important;
  box-shadow: inset 3px 0 0 var(--cs-blue-400);
}

html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > thead > tr > th,
html[data-theme="dark"] .table-bordered > tbody > tr > td {
  border-color: rgba(38, 209, 255, .1) !important;
}

/* ---- Forms ----
   Broad `input` selector with :not() exclusions for non-text input
   types. Many legacy forms in PAYMENTS use bare <input name="…"> with
   NO explicit type attribute. The previous `input[type="text"]` was an
   attribute selector — it looks at the literal attribute, not the
   computed default — so those bare inputs fell through with the native
   browser white background on dark theme. */

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="range"]):not([type="color"]),
select, textarea, .form-control {
  background: var(--cs-bg-elev) !important;
  background-color: var(--cs-bg-elev) !important;
  background-image: none !important;
  color: var(--cs-text) !important;
  border: 1px solid var(--cs-border-strong) !important;
  border-radius: var(--cs-r-md) !important;
  padding: .5rem .75rem;
  transition: border-color var(--cs-tr), box-shadow var(--cs-tr);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="range"]):not([type="color"]):focus,
select:focus, textarea:focus, .form-control:focus {
  outline: 0;
  border-color: var(--cs-primary) !important;
  box-shadow: 0 0 0 3px var(--cs-primary-soft) !important;
}

/* Placeholder colour — legacy hardcodes some via inline style */
input::placeholder, textarea::placeholder { color: var(--cs-text-soft) !important; opacity: 1; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: var(--cs-text-soft) !important; }
input::-moz-placeholder, textarea::-moz-placeholder { color: var(--cs-text-soft) !important; opacity: 1; }

/* ================================================================
   NAVBAR (Bootstrap 2) — drawHeader uses .navbar .nav-pills
   ================================================================ */

.navbar { margin-bottom: 1.25rem; }
.navbar-inner {
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-r-lg) !important;
  filter: none !important;
  min-height: 48px;
  padding: .35rem 1rem;
}
.navbar-fixed-top { position: static !important; }
.navbar .container { background: transparent !important; width: auto !important; }
.nav-collapse, .nav-collapse.collapse { background: transparent !important; }

/* LIGHT theme navbar — subtle gradient + soft shadow */
html[data-theme="light"] .navbar-inner,
html:not([data-theme]) .navbar-inner {
  background: linear-gradient(180deg, #ffffff 0%, #eef5fb 100%) !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #eef5fb 100%) !important;
  border-color: #dce8f2 !important;
  box-shadow: 0 2px 8px rgba(2, 86, 155, .08), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

/* DARK theme navbar — richer gradient with depth */
html[data-theme="dark"] .navbar-inner {
  background: linear-gradient(180deg, #122e4c 0%, #0a1f38 100%) !important;
  background-image: linear-gradient(180deg, #122e4c 0%, #0a1f38 100%) !important;
  border: 1px solid #1f3a5c !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 -1px 0 rgba(0, 0, 0, .4) !important;
}

/* Tab links — base (same font size as body so the whole UI feels unified) */
.navbar .nav > li > a,
.nav-pills > li > a {
  color: var(--cs-text-muted) !important;
  background: transparent !important;
  text-shadow: none !important;
  padding: .55rem 1.1rem !important;
  border-radius: var(--cs-r-md) !important;
  transition: all var(--cs-tr);
  font-weight: 600;
  font-size: var(--cs-fs-md) !important;
  line-height: 1.4 !important;
}
.navbar .nav > li > a:hover,
.nav-pills > li > a:hover {
  background: var(--cs-primary-soft) !important;
  color: var(--cs-primary) !important;
}

/* Active tab — LIGHT theme: soft primary with inset shadow */
html[data-theme="light"] .navbar .nav > li.active > a,
html[data-theme="light"] .nav-pills > li.active > a,
html[data-theme="light"] .nav-pills > li.active > a:hover,
html[data-theme="light"] .nav-pills > li.active > a:focus,
html:not([data-theme]) .nav-pills > li.active > a {
  background: linear-gradient(180deg, var(--cs-blue-500), var(--cs-blue-700)) !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 12px rgba(2, 171, 255, .35),
    inset 0 1px 0 rgba(255, 255, 255, .25) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

/* Active tab — DARK theme: cyan gradient with glow */
html[data-theme="dark"] .navbar .nav > li.active > a,
html[data-theme="dark"] .nav-pills > li.active > a,
html[data-theme="dark"] .nav-pills > li.active > a:hover,
html[data-theme="dark"] .nav-pills > li.active > a:focus {
  background: linear-gradient(180deg, #3fd5ff 0%, #00a4d6 100%) !important;
  color: #031a2e !important;
  box-shadow:
    0 4px 16px rgba(38, 209, 255, .4),
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 -1px 0 rgba(0, 0, 0, .2) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}

/* Dark hover state */
html[data-theme="dark"] .navbar .nav > li > a:hover,
html[data-theme="dark"] .nav-pills > li > a:hover {
  background: rgba(38, 209, 255, .1) !important;
  color: var(--cs-blue-300) !important;
}

/* ================================================================
   BUTTONS — only brand the PRIMARY; keep all semantic variants
   (success/danger/warning/info) with their meaningful colors.
   ================================================================ */

.btn, button, input[type="button"], input[type="submit"] {
  font-family: var(--cs-font-sans);
  border-radius: var(--cs-r-md) !important;
  transition: all var(--cs-tr);
}

/* Neutralize legacy .btn white gradient / text-shadow for all buttons that
   DON'T have a semantic variant. The :not() chain excludes every semantic
   button class so .btn-success (green), .btn-danger (red), .btn-warning
   (yellow), .btn-info (cyan), .btn-primary (our brand fire gradient),
   .btn-green, .btn-orange etc. keep their own colors. */
.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-inverse):not(.btn-link):not(.btn-green):not(.btn-orange) {
  background-color: var(--cs-bg-elev) !important;
  background-image: none !important;
  color: var(--cs-text) !important;
  text-shadow: none !important;
  border: 1px solid var(--cs-border-strong) !important;
  box-shadow: var(--cs-shadow-sm) !important;
  filter: none !important;
}
.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-inverse):not(.btn-link):not(.btn-green):not(.btn-orange):hover {
  background-color: var(--cs-primary-soft) !important;
  border-color: var(--cs-primary) !important;
  color: var(--cs-primary) !important;
}

/* Primary button = our brand fire gradient */
.btn-primary {
  background: linear-gradient(135deg, var(--cs-fire-400), var(--cs-fire-600)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(255, 107, 0, .25);
  font-weight: 600;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 107, 0, .35);
  color: #fff !important;
}

/* Default (non-semantic) button — neutral surface */
.btn-default, .btn.btn-default {
  background: var(--cs-bg-elev) !important;
  color: var(--cs-text) !important;
  border: 1px solid var(--cs-border-strong) !important;
}
.btn-default:hover {
  background: var(--cs-primary-soft) !important;
  border-color: var(--cs-primary) !important;
  color: var(--cs-primary) !important;
}

/*
  .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-green,
  .btn-orange — NOT overridden. They keep their semantic colors from
  bootstrap.css / whmcs.css. Only tune them slightly in dark theme
  below for readability.
*/

/* ================================================================
   DARK THEME — semantic color adaptation for the entire PAYMENTS UI.

   Principle: for every element that carries a meaning via color in the
   light theme (success/danger/warning/info, blue/purple/gray/orange
   utility spans, panels, labels, badges, progress bars, text utilities),
   we keep the SAME hue but adjust saturation/brightness so it stays
   legible on the dark background.
   ================================================================ */

/* ---- Semantic color palette (dark-tuned) ---- */
html[data-theme="dark"] {
  --cs-success:        #3ed089;
  --cs-success-bg:     rgba(58, 181, 122, .16);
  --cs-success-border: #3ab57a;

  --cs-danger:         #ff8275;
  --cs-danger-bg:      rgba(231, 76, 60, .16);
  --cs-danger-border:  #e74c3c;

  --cs-warning:        #ffce5d;
  --cs-warning-bg:     rgba(255, 184, 0, .14);
  --cs-warning-border: #ffb800;

  --cs-info:           #5cccff;
  --cs-info-bg:        rgba(38, 209, 255, .14);
  --cs-info-border:    #26d1ff;

  --cs-purple:         #c58dff;
  --cs-purple-bg:      rgba(168, 120, 255, .14);

  --cs-orange-accent:  #ffa94d;
}

/* ---- Buttons — semantic variants tuned for dark bg ---- */
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-green {
  background: linear-gradient(180deg, #34b97a, #268f5b) !important;
  background-color: #2ea368 !important;
  border-color: #238552 !important;
  color: #fff !important;
  text-shadow: none !important;
}
html[data-theme="dark"] .btn-danger {
  background: linear-gradient(180deg, #e85a4e, #c8382c) !important;
  background-color: #d54133 !important;
  border-color: #b6352a !important;
  color: #fff !important;
  text-shadow: none !important;
}
html[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .btn-orange {
  background: linear-gradient(180deg, #f5a02a, #d07a04) !important;
  background-color: #e59006 !important;
  border-color: #b67206 !important;
  color: #fff !important;
  text-shadow: none !important;
}
html[data-theme="dark"] .btn-info {
  background: linear-gradient(180deg, var(--cs-blue-500), var(--cs-blue-700)) !important;
  background-color: var(--cs-blue-600) !important;
  border-color: var(--cs-blue-700) !important;
  color: #fff !important;
  text-shadow: none !important;
}
html[data-theme="dark"] .btn-inverse {
  background-color: #2a3a52 !important;
  background-image: none !important;
  border-color: #3a4a65 !important;
  color: var(--cs-text) !important;
  text-shadow: none !important;
}

/* (Label/badge semantic variants are defined once in the BADGES & LABELS section above) */

/* ---- Panel headings semantic tuning (.panel-success heading etc.) ---- */
html[data-theme="dark"] .panel-success > .panel-heading { background: var(--cs-success-bg) !important; color: var(--cs-success) !important; border-bottom-color: var(--cs-success-border) !important; }
html[data-theme="dark"] .panel-danger  > .panel-heading { background: var(--cs-danger-bg)  !important; color: var(--cs-danger)  !important; border-bottom-color: var(--cs-danger-border)  !important; }
html[data-theme="dark"] .panel-warning > .panel-heading { background: var(--cs-warning-bg) !important; color: var(--cs-warning) !important; border-bottom-color: var(--cs-warning-border) !important; }
html[data-theme="dark"] .panel-info    > .panel-heading { background: var(--cs-info-bg)    !important; color: var(--cs-info)    !important; border-bottom-color: var(--cs-info-border)    !important; }

/* ---- Progress bar variants ---- */
html[data-theme="dark"] .progress { background: #132740 !important; border: 1px solid var(--cs-border) !important; }
html[data-theme="dark"] .progress .bar                  { background-color: var(--cs-primary) !important; background-image: none !important; }
html[data-theme="dark"] .progress-success .bar,
html[data-theme="dark"] .progress .bar-success          { background: var(--cs-success-border) !important; background-image: none !important; }
html[data-theme="dark"] .progress-danger .bar,
html[data-theme="dark"] .progress .bar-danger           { background: var(--cs-danger-border)  !important; background-image: none !important; }
html[data-theme="dark"] .progress-warning .bar,
html[data-theme="dark"] .progress .bar-warning          { background: var(--cs-warning-border) !important; background-image: none !important; }
html[data-theme="dark"] .progress-info .bar,
html[data-theme="dark"] .progress .bar-info             { background: var(--cs-info-border)    !important; background-image: none !important; }

/* ---- Text color utilities ---- */
html[data-theme="dark"] .text-success { color: var(--cs-success) !important; }
html[data-theme="dark"] .text-danger,
html[data-theme="dark"] .text-error   { color: var(--cs-danger)  !important; }
html[data-theme="dark"] .text-warning { color: var(--cs-warning) !important; }
html[data-theme="dark"] .text-info    { color: var(--cs-info)    !important; }
html[data-theme="dark"] .text-muted   { color: var(--cs-text-muted) !important; }

/* ---- Legacy PAYMENTS utility spans used in cabinet markup ---- */
html[data-theme="dark"] .blue,
html[data-theme="dark"] span.blue,
html[data-theme="dark"] .th-blue,
html[data-theme="dark"] .th-blue-nrad { color: var(--cs-info) !important; }

html[data-theme="dark"] .purple,
html[data-theme="dark"] span.purple   { color: var(--cs-purple) !important; }

html[data-theme="dark"] .green,
html[data-theme="dark"] span.green,
html[data-theme="dark"] .text-green   { color: var(--cs-success) !important; }

html[data-theme="dark"] .red,
html[data-theme="dark"] span.red,
html[data-theme="dark"] .text-red     { color: var(--cs-danger) !important; }

html[data-theme="dark"] .orange,
html[data-theme="dark"] span.orange   { color: var(--cs-orange-accent) !important; }

html[data-theme="dark"] .yellow,
html[data-theme="dark"] span.yellow   { color: var(--cs-warning) !important; }

html[data-theme="dark"] .gray,
html[data-theme="dark"] span.gray     { color: var(--cs-text-muted) !important; }

/* ---- "ok" / "bad" status indicators ---- */
html[data-theme="dark"] .ok    { color: var(--cs-success) !important; }
html[data-theme="dark"] .bad   { color: var(--cs-danger)  !important; }

/* ---- Status badges (e.g. .status-active / .status-pending) ---- */
html[data-theme="dark"] .status-active,
html[data-theme="dark"] .status-ok,
html[data-theme="dark"] .status-success  { background: var(--cs-success-bg) !important; color: var(--cs-success) !important; border-color: var(--cs-success-border) !important; }
html[data-theme="dark"] .status-pending,
html[data-theme="dark"] .status-warning  { background: var(--cs-warning-bg) !important; color: var(--cs-warning) !important; border-color: var(--cs-warning-border) !important; }
html[data-theme="dark"] .status-error,
html[data-theme="dark"] .status-failed,
html[data-theme="dark"] .status-danger   { background: var(--cs-danger-bg)  !important; color: var(--cs-danger)  !important; border-color: var(--cs-danger-border)  !important; }
html[data-theme="dark"] .status-info     { background: var(--cs-info-bg)    !important; color: var(--cs-info)    !important; border-color: var(--cs-info-border)    !important; }

/* ---- Tooltips / popovers ---- */
html[data-theme="dark"] .tooltip-inner,
html[data-theme="dark"] .popover {
  background: var(--cs-bg-elev) !important;
  color: var(--cs-text) !important;
  border: 1px solid var(--cs-border-strong) !important;
}

/* ================================================================
   ALERTS — preserve semantic colors with dark-theme tuning
   ================================================================ */

.alert {
  border-radius: var(--cs-r-md) !important;
  padding: .85rem 1.15rem !important;
  border-width: 1px !important;
}
/* Default (unstyled) alerts in dark theme: give neutral surface */
html[data-theme="dark"] .alert:not(.alert-success):not(.alert-danger):not(.alert-warning):not(.alert-info) {
  background: var(--cs-bg-elev) !important;
  color: var(--cs-text) !important;
  border-color: var(--cs-border) !important;
}
/* Keep semantic alerts — tune only for dark bg contrast */
html[data-theme="dark"] .alert-success { background: rgba(58,181,122,.15)  !important; color: #6ee0a2 !important; border-color: #3ab57a !important; }
html[data-theme="dark"] .alert-danger  { background: rgba(231,76,60,.15)   !important; color: #ff8275 !important; border-color: #e74c3c !important; }
html[data-theme="dark"] .alert-warning { background: rgba(255,184,0,.14)   !important; color: #ffce5d !important; border-color: var(--cs-fire-400) !important; }
html[data-theme="dark"] .alert-info    { background: var(--cs-primary-soft) !important; color: var(--cs-primary) !important; border-color: var(--cs-primary) !important; }

/* ================================================================
   BADGES & LABELS — keep semantic, don't hijack
   ================================================================ */

/* ================================================================
   BADGES & LABELS — both themes
   ================================================================ */

.badge, .label {
  display: inline-block;
  padding: .25em .65em !important;
  font-size: .78em;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--cs-r-full) !important;
  white-space: nowrap;
  vertical-align: middle;
  /* Light theme: don't touch color/background — Bootstrap originals
     (white text on colored bg) look good on a white page. */
}

/* DARK theme only: force dark text + kill Bootstrap's text-shadow so
   plain and legacy-compound badges (.label.active with its green bg,
   plain .badge with #999, etc.) become readable. Named variants below
   override this with their own pastel bg + matching dark text. */
html[data-theme="dark"] .badge,
html[data-theme="dark"] .label {
  color: #0a1a2e !important;
  text-shadow: none !important;
}

/* Plain .badge / .label (no suffix) and legacy compound classes like
   .label.active / .badge.featured / etc. — NOT overridden, so legacy
   hardcoded colors (e.g. .label.active { background:#46A546 }) win. */

/* Light theme semantic variants — NOT overridden. Original Bootstrap
   colors (.label-success green, .label-danger red, etc.) with white
   text from the Bootstrap base rule work well on a white page. */

/* ---- Semantic variants — DARK theme tuning
   Strategy: brighter/lighter background + dark text for readability.
   Dark text on bright bg reads much better on a dark surface than
   white text on mid-saturated bg. ---- */
html[data-theme="dark"] .badge-success,
html[data-theme="dark"] .label-success { background: #7ce0a6 !important; color: #0a2e1a !important; }

html[data-theme="dark"] .badge-danger,
html[data-theme="dark"] .label-danger,
html[data-theme="dark"] .badge-important,
html[data-theme="dark"] .label-important { background: #ff9b90 !important; color: #2e0a0a !important; }

html[data-theme="dark"] .badge-warning,
html[data-theme="dark"] .label-warning { background: #ffd57a !important; color: #2a1a00 !important; }

html[data-theme="dark"] .badge-info,
html[data-theme="dark"] .label-info { background: #7cdcff !important; color: #031a2e !important; }

html[data-theme="dark"] .badge-primary,
html[data-theme="dark"] .label-primary { background: var(--cs-primary) !important; color: var(--cs-primary-ink) !important; }

html[data-theme="dark"] .badge-inverse,
html[data-theme="dark"] .label-inverse { background: #c9d6e4 !important; color: #0a1a2e !important; }

html[data-theme="dark"] .badge-secondary,
html[data-theme="dark"] .label-secondary { background: #a8bacd !important; color: #0a1a2e !important; }

html[data-theme="dark"] .badge-light,
html[data-theme="dark"] .label-light { background: #e0ebf5 !important; color: #0a1a2e !important; }

html[data-theme="dark"] .badge-dark,
html[data-theme="dark"] .label-dark { background: #8da4ba !important; color: #031325 !important; }

/* Plain .badge / .label in dark theme are also NOT overridden — legacy
   compound classes (.label.active, .badge.ok, etc.) keep their colors. */

/* ================================================================
   jQuery UI — only the widget container gets themed
   ================================================================ */

.ui-widget-content {
  background: var(--cs-bg) !important;
  color: var(--cs-text) !important;
  border-color: var(--cs-border) !important;
}
.ui-widget-header {
  background: var(--cs-bg-alt) !important;
  color: var(--cs-heading) !important;
  border-color: var(--cs-border) !important;
}
.ui-state-default, .ui-widget-content .ui-state-default {
  background: var(--cs-bg-elev) !important;
  color: var(--cs-text) !important;
  border-color: var(--cs-border-strong) !important;
}
.ui-state-active, .ui-widget-content .ui-state-active {
  background: var(--cs-primary) !important;
  color: var(--cs-primary-ink) !important;
  border-color: var(--cs-primary) !important;
}

/* ================================================================
   Code blocks
   ================================================================ */

code, pre, kbd {
  background: var(--cs-bg-muted) !important;
  color: var(--cs-text) !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-r-sm) !important;
}

/* ================================================================
   Dark-mode surface fix for legacy inline styles
   Only explicit white bg/fill attrs — don't touch computed values.
   ================================================================ */

html[data-theme="dark"] body[style*="background:#fff"],
html[data-theme="dark"] body[style*="background-color:#fff"],
html[data-theme="dark"] body[style*="background:#ffffff"],
html[data-theme="dark"] body[style*="background-color:#ffffff"],
html[data-theme="dark"] div[style*="background:#fff"],
html[data-theme="dark"] div[style*="background-color:#fff"] {
  background-color: var(--cs-bg) !important;
  background-image: none !important;
}

/* Scrollbar tuning */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--cs-bg-alt); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--cs-border-strong); border-radius: 4px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--cs-primary); }

/* ================================================================
   TYPOGRAPHY RESET — single font family, uniform size scale
   Legacy PAYMENTS CSS pulls in Tahoma 11px, Ubuntu 30px, Arial,
   Verdana, etc. giving a "Frankenstein" feel. This block forces the
   whole cabinet onto ONE system font stack with a consistent scale.
   ================================================================ */

:root {
  --cs-fs-base:   15px;   /* body */
  --cs-fs-xs:     12px;   /* captions */
  --cs-fs-sm:     13px;   /* secondary / small labels */
  --cs-fs-md:     15px;   /* default body */
  --cs-fs-lg:     17px;   /* lead text */
  --cs-fs-h6:     15px;
  --cs-fs-h5:     16px;
  --cs-fs-h4:     18px;
  --cs-fs-h3:     20px;
  --cs-fs-h2:     24px;
  --cs-fs-h1:     30px;
  --cs-lh:        1.55;
}

/* Global font family force — beats every Tahoma/Ubuntu/Arial/Verdana
   declaration in legacy CSS. `*` selector so no element escapes. */
html, body, * {
  font-family: var(--cs-font-sans) !important;
}

/* Preserve monospace for code blocks */
code, kbd, pre, samp, tt,
code *, pre *, kbd *, samp * {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
}

/* Base body size + line-height */
html, body {
  font-size: var(--cs-fs-base) !important;
  line-height: var(--cs-lh) !important;
}

/* Size scale for common text elements */
body, p, div, span, td, th, li, dd, dt, label, input, select, textarea, button {
  font-size: var(--cs-fs-md);
}

/* Heading hierarchy — uniform across the whole cabinet */
h1, .h1 { font-size: var(--cs-fs-h1) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -.01em; margin: 0 0 .6em; }
h2, .h2 { font-size: var(--cs-fs-h2) !important; font-weight: 700 !important; line-height: 1.25 !important; margin: 0 0 .5em; }
h3, .h3 { font-size: var(--cs-fs-h3) !important; font-weight: 600 !important; line-height: 1.3 !important; margin: 0 0 .5em; }
h4, .h4 { font-size: var(--cs-fs-h4) !important; font-weight: 600 !important; line-height: 1.3 !important; margin: 0 0 .5em; }
h5, .h5 { font-size: var(--cs-fs-h5) !important; font-weight: 600 !important; line-height: 1.35 !important; margin: 0 0 .4em; }
h6, .h6 { font-size: var(--cs-fs-h6) !important; font-weight: 600 !important; line-height: 1.4 !important; margin: 0 0 .4em; }

/* Small text elements */
small, .small, .muted, .help-block { font-size: var(--cs-fs-sm) !important; }
.caption, .footnote { font-size: var(--cs-fs-xs) !important; }

/* Strong hotspot: whmcs.css has `font-family: Tahoma !important; font-size: 11px !important;`
   on generic .whmcscontainer children. Override at higher specificity. */
.whmcscontainer,
.whmcscontainer *,
#whmcsorderfrm,
#whmcsorderfrm *,
#order-modern,
#order-modern *,
.minicartlist,
.minicartlist *,
.configtable,
.configtable * {
  font-family: var(--cs-font-sans) !important;
  font-size: var(--cs-fs-md) !important;
}

/* Neutralize the obvious outliers */
#order-modern h1 { font-size: var(--cs-fs-h1) !important; }
#order-modern h2 { font-size: var(--cs-fs-h2) !important; }
#order-modern h3 { font-size: var(--cs-fs-h3) !important; }

.fieldarea, .fieldarea label {
  font-size: var(--cs-fs-md) !important;
  font-weight: 500;
  color: var(--cs-text);
}

/* Labels in forms — consistent */
label {
  font-size: var(--cs-fs-sm) !important;
  font-weight: 600;
  color: var(--cs-text);
}

/* Inputs/selects/textarea use base size */
input, select, textarea, .form-control {
  font-size: var(--cs-fs-md) !important;
  line-height: 1.4 !important;
}

/* ================================================================
   CART UI — flat admin-consistent layout (matches other tabs).
   No card shell, no fat padding, no dramatic hover — looks the same
   weight as the rest of the control panel.
   ================================================================ */

#whmcsorderfrm {
  max-width: 900px;
  margin: 0 auto;
}

#order-modern {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: .5rem 0 !important;
  border-radius: 0 !important;
}

#order-modern h3 {
  color: var(--cs-heading) !important;
  font-size: var(--cs-fs-h3) !important;
  margin: 0 0 1rem !important;
}

.configtable {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  background: var(--cs-bg-elev) !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-r-md) !important;
  overflow: hidden;
}

.configtable tr {
  transition: background var(--cs-tr);
}

/* Hover only on ITEM rows — the last two rows (Total / To pay) are
   info-only and must not flash when the mouse moves over them. */
.configtable tr:not(:nth-last-child(-n+2)):hover td {
  background-color: var(--cs-primary-soft) !important;
}

.configtable td {
  padding: .5rem .75rem !important;
  vertical-align: middle !important;
  border: none !important;
  border-bottom: 1px solid var(--cs-border) !important;
  background-color: var(--cs-bg-elev) !important;
  font-size: var(--cs-fs-md) !important;
  color: var(--cs-text) !important;
}
.configtable tr:last-child td { border-bottom: none !important; }

.configtable td.fieldarea {
  white-space: normal !important;
}
.configtable td.fieldarea label {
  font-size: var(--cs-fs-md) !important;
  font-weight: 500 !important;
  color: var(--cs-text) !important;
  margin: 0 !important;
}

/* Total / payable — same size as everything else, just subtle bg + slight weight,
   NO hover, NO size bump. */
.configtable tr:nth-last-child(-n+2) td {
  background: var(--cs-bg-alt) !important;
  font-weight: 600 !important;
  font-size: var(--cs-fs-md) !important;
  color: var(--cs-text) !important;
  border-top: 1px solid var(--cs-border) !important;
}
.configtable tr:last-child td {
  color: var(--cs-heading) !important;
}

/* Inline action buttons inside cart rows (+1 / delete) */
.configtable .btn,
.configtable input[type="button"].btn {
  margin-left: .35rem !important;
  padding: .3rem .7rem !important;
  font-size: var(--cs-fs-sm) !important;
  vertical-align: middle;
}

/* Checkout buttons — admin-style, same size/weight as tab buttons */
#order-modern .checkoutbuttons {
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  margin-top: 1rem !important;
  padding-top: 0 !important;
  border-top: none !important;
}

#order-modern .checkoutbuttons input.checkout {
  background-color: var(--cs-bg-elev) !important;
  background-image: none !important;
  color: var(--cs-text) !important;
  border: 1px solid var(--cs-border-strong) !important;
  border-radius: var(--cs-r-md) !important;
  padding: .5rem 1.1rem !important;
  font-size: var(--cs-fs-md) !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all var(--cs-tr);
  box-shadow: none !important;
  text-shadow: none !important;
}
#order-modern .checkoutbuttons input.checkout:hover {
  background-color: var(--cs-primary-soft) !important;
  border-color: var(--cs-primary) !important;
  color: var(--cs-primary) !important;
}
/* Primary checkout (pay) — brand fire gradient, same height as other buttons */
#order-modern .checkoutbuttons input.checkout:first-child {
  background: linear-gradient(135deg, var(--cs-fire-400), var(--cs-fire-600)) !important;
  border-color: transparent !important;
  color: #fff !important;
}
#order-modern .checkoutbuttons input.checkout:first-child:hover {
  background: linear-gradient(135deg, var(--cs-fire-500), var(--cs-fire-600)) !important;
  color: #fff !important;
}

/* Empty cart state */
#order-modern[style*="text-align:center"] {
  text-align: center !important;
  padding: 2rem 1rem !important;
}

/* Selector inside cart rows (account login dropdown) */
.configtable select {
  padding: .35rem .55rem !important;
  min-width: 140px;
  background: var(--cs-bg-elev) !important;
  border: 1px solid var(--cs-border-strong) !important;
  border-radius: var(--cs-r-sm) !important;
  font-size: var(--cs-fs-md) !important;
}

/* ================================================================
   PAYMENT METHOD PICKER (cart.php pay step) — compact, centered,
   dark text on brand orange buttons for readability.
   The payment page uses <table class="configtable" style="width:auto;
   display:inline-table">, so we scope overrides via the style attribute
   to avoid touching the cart-items table (which needs 100% width).
   ================================================================ */

.configtable[style*="inline-table"] {
  width: auto !important;
  margin: 0 auto !important;
  display: inline-table !important;
  border: none !important;
  background: transparent !important;
  overflow: visible;
}
.configtable[style*="inline-table"] td,
.configtable[style*="inline-table"] td.fieldarea {
  padding: .35rem .45rem !important;
  background: transparent !important;
  border: none !important;
}
.configtable[style*="inline-table"] tr:not(:nth-last-child(-n+2)):hover td,
.configtable[style*="inline-table"] tr:hover td {
  background: transparent !important;
}

/* Buttons on the payment method picker — compact admin-sized pills */
#order-modern .configtable span.btn-primary.btn-large,
#order-modern .configtable a.btn-primary.btn-large {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.05rem !important;
  font-size: var(--cs-fs-md) !important;
  white-space: nowrap;
  line-height: 1.3 !important;
  /* Dark text on the orange brand gradient — readable in both themes */
  color: #1a0f00 !important;
  text-shadow: none !important;
}
#order-modern .configtable span.btn-primary.btn-large:hover,
#order-modern .configtable a.btn-primary.btn-large:hover {
  color: #1a0f00 !important;
}
#order-modern .configtable .btn-primary.btn-large .payname,
#order-modern .configtable .btn-primary.btn-large label.payname {
  color: #1a0f00 !important;
  font-weight: 700 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--cs-fs-md) !important;
  text-shadow: none !important;
  cursor: pointer;
}
#order-modern .configtable .btn-primary.btn-large img {
  vertical-align: middle !important;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Center the payment picker page header */
#order-modern > h2 {
  text-align: center;
  color: var(--cs-heading) !important;
  margin-bottom: 1rem !important;
}

/* ================================================================
   Settings-page overrides (settings.php has a big inline <style>
   block with hardcoded greys/whites/blues that break on dark theme
   and look foreign on light theme).
   ================================================================ */

/* Left sidebar nav list (Биллинг / Диагностика / …) */
.settings-sidebar .nav-list {
  background: var(--cs-bg-elev) !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-r-md) !important;
  box-shadow: var(--cs-shadow-sm);
  padding: 4px !important;
}
.settings-sidebar .nav-list li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.settings-sidebar .nav-list li a {
  color: var(--cs-text-muted) !important;
  background: transparent !important;
  padding: .6rem 1rem !important;
  font-size: var(--cs-fs-md) !important;
  font-weight: 500;
  border-radius: var(--cs-r-sm) !important;
  margin: 2px !important;
  text-shadow: none !important;
  transition: all var(--cs-tr);
  display: block;
  text-decoration: none;
}
.settings-sidebar .nav-list li a:hover {
  background: var(--cs-primary-soft) !important;
  color: var(--cs-primary) !important;
  text-decoration: none;
}
.settings-sidebar .nav-list li.active a,
.settings-sidebar .nav-list li.active a:hover,
.settings-sidebar .nav-list li.active a:focus {
  background: var(--cs-primary) !important;
  color: var(--cs-primary-ink) !important;
  font-weight: 600;
  box-shadow: 0 2px 8px var(--cs-primary-soft);
}

/* Inline alert banners in settings */
.alert-msg {
  border-radius: var(--cs-r-md) !important;
  border: 1px solid var(--cs-border) !important;
  padding: .75rem 1rem !important;
}
.alert-msg-success {
  background-color: rgba(58, 181, 122, .14) !important;
  border-color: #3ab57a !important;
  color: var(--cs-text) !important;
}
html[data-theme="dark"] .alert-msg-success {
  color: #7ce0a6 !important;
}
.alert-msg-error {
  background-color: rgba(231, 76, 60, .14) !important;
  border-color: #e74c3c !important;
  color: var(--cs-text) !important;
}
html[data-theme="dark"] .alert-msg-error {
  color: #ff9b90 !important;
}

/* Backup table highlight */
.backup-table td { vertical-align: middle !important; }
.backup-today {
  background-color: rgba(58, 181, 122, .18) !important;
}
html[data-theme="dark"] .backup-today {
  background-color: rgba(58, 181, 122, .14) !important;
}
.backup-table td,
.backup-table th {
  background-color: var(--cs-bg-elev) !important;
  color: var(--cs-text) !important;
  border-color: var(--cs-border) !important;
}

/* News preview (markdown tables & blockquotes) */
.em-news-preview {
  color: var(--cs-text) !important;
}
.em-news-preview table {
  background: var(--cs-bg-elev) !important;
  font-size: var(--cs-fs-sm) !important;
}
.em-news-preview th {
  background: var(--cs-bg-alt) !important;
  color: var(--cs-heading) !important;
  border-color: var(--cs-border) !important;
}
.em-news-preview td {
  background: var(--cs-bg-elev) !important;
  color: var(--cs-text) !important;
  border-color: var(--cs-border) !important;
}
.em-news-preview tr:nth-child(even) td {
  background: var(--cs-bg-alt) !important;
}
.em-news-preview blockquote {
  background: var(--cs-primary-soft) !important;
  color: var(--cs-text) !important;
  border-left-color: var(--cs-primary) !important;
}

/* Settings section container (right of sidebar) */
.settings-content {
  color: var(--cs-text);
}

/* Any residual .bl-card class (not the settings sidebar but may exist
   in some billing/diagnostic views — keep it themed) */
.bl-card {
  background: var(--cs-bg-elev) !important;
  border: 1px solid var(--cs-border) !important;
  color: var(--cs-text) !important;
  border-radius: var(--cs-r-md) !important;
}
.bl-card.active, .bl-card.selected {
  background: var(--cs-primary) !important;
  color: var(--cs-primary-ink) !important;
  border-color: var(--cs-primary) !important;
}

/* ================================================================
   Legacy custom `.label.<color>` badges (defined in style.css:3208-3256)
   Used by settings.php `_badge()` helper for transaction types, service
   statuses, etc. Force readable colors in BOTH themes (dark text on
   the bright backgrounds, which were mostly white-text-on-mid hues).
   ================================================================ */

.label.green,  .label.label-green  { background-color: #46A546 !important; color: #0a1a0a !important; border: 1px solid transparent !important; }
.label.red,    .label.label-red    { background-color: #CC0000 !important; color: #ffffff !important; border: 1px solid transparent !important; }
.label.red2,   .label.label-red2   { background-color: #ff4f5b !important; color: #2a0000 !important; border: 1px solid transparent !important; }
.label.blue,   .label.label-blue   { background-color: #0000BB !important; color: #ffffff !important; border: 1px solid transparent !important; }
.label.blue2,  .label.label-blue2  { background-color: #3793f9 !important; color: #03152b !important; border: 1px solid transparent !important; }
.label.yellow, .label.label-yellow { background-color: #ffff00 !important; color: #2a2a00 !important; border: 1px solid transparent !important; }
.label.cyan,   .label.label-cyan   { background-color: #ADDCED !important; color: #03152b !important; border: 1px solid transparent !important; }
.label.white,  .label.label-white  { background-color: #ffffff !important; color: #0a1a2e !important; border: 1px solid var(--cs-border-strong) !important; }

/* Dark theme: brighten bg slightly + keep dark text for readability */
html[data-theme="dark"] .label.green  { background-color: #6cd68c !important; color: #03220a !important; }
html[data-theme="dark"] .label.red    { background-color: #ff6660 !important; color: #2a0000 !important; }
html[data-theme="dark"] .label.red2   { background-color: #ff8a95 !important; color: #2a0000 !important; }
html[data-theme="dark"] .label.blue   { background-color: #6a7dff !important; color: #03152b !important; }
html[data-theme="dark"] .label.blue2  { background-color: #7ab5ff !important; color: #03152b !important; }
html[data-theme="dark"] .label.yellow { background-color: #ffe866 !important; color: #2a2a00 !important; border-color: transparent !important; }
html[data-theme="dark"] .label.cyan   { background-color: #8cdbf3 !important; color: #03152b !important; }
html[data-theme="dark"] .label.white  { background-color: #c9d6e4 !important; color: #0a1a2e !important; }

/* ================================================================
   jQuery UI horizontal tabs (#bl-tabs, #mig-tabs, #ml-tabs, #em-tabs)
   The active tab needs readable text contrast in both themes.
   ================================================================ */

.ui-tabs-horizontal .ui-tabs-nav li,
.ui-tabs-horizontal .ui-tabs-nav li.ui-state-default,
.ui-tabs .ui-tabs-nav li,
.ui-tabs .ui-tabs-nav li.ui-state-default {
  background: var(--cs-bg-elev) !important;
  background-image: none !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-r-md) var(--cs-r-md) 0 0 !important;
  margin-right: 2px;
}
.ui-tabs-horizontal .ui-tabs-nav li a,
.ui-tabs .ui-tabs-nav li a {
  color: var(--cs-text-muted) !important;
  font-size: var(--cs-fs-md) !important;
  font-weight: 600;
  padding: .55rem 1rem !important;
  text-shadow: none !important;
  text-decoration: none;
}
.ui-tabs-horizontal .ui-tabs-nav li.ui-state-hover,
.ui-tabs .ui-tabs-nav li.ui-state-hover {
  background: var(--cs-primary-soft) !important;
  border-color: var(--cs-primary) !important;
}
.ui-tabs-horizontal .ui-tabs-nav li.ui-state-hover a,
.ui-tabs .ui-tabs-nav li.ui-state-hover a {
  color: var(--cs-primary) !important;
}

/* Active tab — cyan bg with DARK text (was light text → unreadable) */
.ui-tabs-horizontal .ui-tabs-nav li.ui-tabs-active,
.ui-tabs-horizontal .ui-tabs-nav li.ui-state-active,
.ui-tabs-horizontal .ui-tabs-nav li.ui-tabs-selected,
.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.ui-tabs .ui-tabs-nav li.ui-state-active {
  background: var(--cs-primary) !important;
  background-image: none !important;
  border-color: var(--cs-primary) !important;
  box-shadow: 0 2px 8px var(--cs-primary-soft);
}
.ui-tabs-horizontal .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs-horizontal .ui-tabs-nav li.ui-state-active a,
.ui-tabs-horizontal .ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-active a {
  color: var(--cs-primary-ink) !important;
  font-weight: 700 !important;
}

/* Tab panel content area */
.ui-tabs .ui-tabs-panel,
.ui-tabs-horizontal .ui-tabs-panel {
  background: transparent !important;
  color: var(--cs-text) !important;
  padding: 1rem 0 !important;
  border: none !important;
}

/* ================================================================
   #bl-tabs billing layout helpers (section titles, charts, scroll
   tables). Legacy CSS uses #2779aa blue and #e0e0e0 light borders
   and 11px fonts which clash with the new system.
   ================================================================ */

#bl-tabs .bl-section-title,
#ml-tabs .bl-section-title,
#em-tabs .bl-section-title,
#mig-tabs .bl-section-title {
  color: var(--cs-heading) !important;
  font-size: var(--cs-fs-md) !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--cs-border) !important;
  margin: 1rem 0 .5rem !important;
  padding-bottom: .35rem !important;
}

#bl-tabs .bl-meta,
#ml-tabs .bl-meta {
  color: var(--cs-text-soft) !important;
  font-size: var(--cs-fs-sm) !important;
}

/* The "Активные сервисы по тарифу" scroll container — was max-height
   480 + overflow-y auto, cramming content into a narrow column and
   forcing a horizontal scroll when the table width is `auto`. Make it
   behave: fit the column width, allow horizontal scroll only when
   truly needed, and use consistent padding/font. */
#bl-tabs .bl-scroll-table {
  max-height: 480px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-md);
  background: var(--cs-bg-elev);
}
#bl-tabs .bl-scroll-table table {
  font-size: var(--cs-fs-sm) !important;  /* 13px instead of 11 */
  width: 100% !important;                  /* fill the column, not "auto" */
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#bl-tabs .bl-scroll-table td,
#bl-tabs .bl-scroll-table th {
  padding: .45rem .75rem !important;       /* was 3px 8px */
  white-space: nowrap;
  font-size: var(--cs-fs-sm) !important;
}

/* Bl-scroll-table thead — force dark theme even though the parent
   container overrides cascade in some cases */
html[data-theme="dark"] #bl-tabs .bl-scroll-table thead th,
html[data-theme="dark"] #bl-tabs thead th,
html[data-theme="dark"] #ml-tabs thead th,
html[data-theme="dark"] #em-tabs thead th,
html[data-theme="dark"] #mig-tabs thead th {
  background: linear-gradient(180deg, #163052 0%, #0e2340 100%) !important;
  background-image: linear-gradient(180deg, #163052 0%, #0e2340 100%) !important;
  color: var(--cs-blue-200) !important;
  border-color: #1f3a5c !important;
  border-bottom: 2px solid var(--cs-blue-700) !important;
}
html[data-theme="light"] #bl-tabs .bl-scroll-table thead th,
html[data-theme="light"] #bl-tabs thead th {
  background: var(--cs-bg-alt) !important;
  color: var(--cs-heading) !important;
  border-color: var(--cs-border) !important;
}

/* Billing trend chart bars — retint from legacy #2779aa to our blue */
#bl-tabs .bl-chart-bar          { background: var(--cs-primary) !important; }
#bl-tabs .bl-chart-bar:hover    { background: var(--cs-primary-hover) !important; }
#bl-tabs .bl-chart-bars         { border-bottom-color: var(--cs-border) !important; }
#bl-tabs .bl-chart-month        { color: var(--cs-primary) !important; font-size: var(--cs-fs-sm) !important; }
#bl-tabs .bl-chart-val          { color: var(--cs-text) !important; font-size: var(--cs-fs-xs) !important; }
#bl-tabs .bl-chart-cnt          { color: var(--cs-text-soft) !important; font-size: var(--cs-fs-xs) !important; }

/* Card-style accent classes used by ml-tabs dashboards */
#ml-tabs .bl-card.accent > div:first-child { color: var(--cs-primary) !important; }
#ml-tabs .bl-card.muted  > div:first-child { color: var(--cs-text-soft) !important; }
#ml-tabs .bl-card.info   > div:first-child { color: var(--cs-primary) !important; }
#ml-tabs .bl-card.warn   > div:first-child { color: var(--cs-fire-500) !important; }
#ml-tabs .bl-card.danger > div:first-child { color: #e74c3c !important; }

html[data-theme="dark"] #ml-tabs .bl-card.warn   > div:first-child { color: #ffce5d !important; }
html[data-theme="dark"] #ml-tabs .bl-card.danger > div:first-child { color: #ff8275 !important; }
html[data-theme="dark"] #ml-tabs .bl-card.accent > div:first-child,
html[data-theme="dark"] #ml-tabs .bl-card.info   > div:first-child { color: var(--cs-blue-300) !important; }

/* ================================================================
   DARK-THEME CATCH-ALL — neutralizes the most common legacy inline
   style="background:#fff" / "color:#999" / "border:1px solid #ddd"
   patterns that sprinkle PAYMENTS. Without this every new card/strip
   that was designed for a white page looks broken on dark theme.
   ================================================================ */

/* Inline WHITE / LIGHT-GRAY backgrounds → elevated surface */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background:#fafafa"],
html[data-theme="dark"] [style*="background: #fafafa"],
html[data-theme="dark"] [style*="background:#f5f5f5"],
html[data-theme="dark"] [style*="background: #f5f5f5"],
html[data-theme="dark"] [style*="background:#f8f8f8"],
html[data-theme="dark"] [style*="background: #f8f8f8"],
html[data-theme="dark"] [style*="background:#f9f9f9"],
html[data-theme="dark"] [style*="background: #f9f9f9"],
html[data-theme="dark"] [style*="background:#f0f0f0"],
html[data-theme="dark"] [style*="background: #f0f0f0"],
html[data-theme="dark"] [style*="background:#f4f4f4"],
html[data-theme="dark"] [style*="background: #f4f4f4"],
html[data-theme="dark"] [style*="background:#eee"],
html[data-theme="dark"] [style*="background: #eee"],
html[data-theme="dark"] [style*="background:#ededed"],
html[data-theme="dark"] [style*="background: #ededed"] {
  background-color: var(--cs-bg-elev) !important;
  background-image: none !important;
}

/* Inline light-gray borders → themed border */
html[data-theme="dark"] [style*="border:1px solid #ddd"],
html[data-theme="dark"] [style*="border: 1px solid #ddd"],
html[data-theme="dark"] [style*="border:1px solid #ccc"],
html[data-theme="dark"] [style*="border: 1px solid #ccc"],
html[data-theme="dark"] [style*="border:1px solid #e0"],
html[data-theme="dark"] [style*="border: 1px solid #e0"],
html[data-theme="dark"] [style*="border:1px solid #e1"],
html[data-theme="dark"] [style*="border: 1px solid #e1"],
html[data-theme="dark"] [style*="border:1px solid #e3"],
html[data-theme="dark"] [style*="border: 1px solid #e3"],
html[data-theme="dark"] [style*="border:1px solid #e5"],
html[data-theme="dark"] [style*="border: 1px solid #e5"],
html[data-theme="dark"] [style*="border:1px solid #e6"],
html[data-theme="dark"] [style*="border: 1px solid #e6"],
html[data-theme="dark"] [style*="border:1px solid #e8"],
html[data-theme="dark"] [style*="border: 1px solid #e8"],
html[data-theme="dark"] [style*="border:1px solid #f"],
html[data-theme="dark"] [style*="border: 1px solid #f"] {
  border-color: var(--cs-border) !important;
}

/* Inline gray text colors (#333..#bbb) that become invisible on dark bg */
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#444"],
html[data-theme="dark"] [style*="color: #444"],
html[data-theme="dark"] [style*="color:#555"],
html[data-theme="dark"] [style*="color: #555"],
html[data-theme="dark"] [style*="color:#666"],
html[data-theme="dark"] [style*="color: #666"],
html[data-theme="dark"] [style*="color:#777"],
html[data-theme="dark"] [style*="color: #777"] {
  color: var(--cs-text) !important;
}
html[data-theme="dark"] [style*="color:#888"],
html[data-theme="dark"] [style*="color: #888"],
html[data-theme="dark"] [style*="color:#999"],
html[data-theme="dark"] [style*="color: #999"],
html[data-theme="dark"] [style*="color:#aaa"],
html[data-theme="dark"] [style*="color: #aaa"],
html[data-theme="dark"] [style*="color:#bbb"],
html[data-theme="dark"] [style*="color: #bbb"] {
  color: var(--cs-text-muted) !important;
}

/* ================================================================
   <pre> elements — legacy CSS gives them white/light backgrounds.
   Used for email bodies, logs, code previews, etc.
   ================================================================ */
html[data-theme="dark"] pre {
  background: var(--cs-bg-muted) !important;
  background-color: var(--cs-bg-muted) !important;
  color: var(--cs-text) !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-r-sm) !important;
  padding: .75rem 1rem !important;
}

/* ================================================================
   Mail inbox / message view
   ================================================================ */
#ml-message-view,
#ml-msg-headers,
#ml-msg-body,
#ml-inbox-list,
.ml-msg-body {
  background: transparent !important;
  color: var(--cs-text) !important;
}
#ml-msg-headers.table-bordered,
#ml-msg-headers table {
  border: 1px solid var(--cs-border) !important;
}
#ml-msg-headers td {
  background: var(--cs-bg-elev) !important;
  color: var(--cs-text) !important;
  border-color: var(--cs-border) !important;
  padding: .5rem .75rem !important;
  font-size: var(--cs-fs-md) !important;
}
#ml-msg-headers td b {
  color: var(--cs-heading) !important;
  font-weight: 600;
}
.ml-inbox-row,
#ml-inbox-list tr {
  background: var(--cs-bg-elev) !important;
  color: var(--cs-text) !important;
}
.ml-inbox-row:hover,
#ml-inbox-list tr:hover {
  background: var(--cs-primary-soft) !important;
}
.ml-inbox-new {
  font-weight: 600;
}
.ml-msg-body iframe {
  background: var(--cs-bg-elev) !important;
  border-radius: var(--cs-r-sm);
}

/* ================================================================
   DB Health dashboard (section=migration, "Состояние БД")
   Tables, tab headers and cards there hit legacy backgrounds that
   the main .table rules miss because they target different wrappers.
   ================================================================ */
html[data-theme="dark"] #mig-tabs thead th,
html[data-theme="dark"] #mig-tabs .table thead th,
html[data-theme="dark"] #mig-tabs table thead th,
html[data-theme="dark"] #dbh-tabs thead th,
html[data-theme="dark"] #dbh-tabs table thead th {
  background: linear-gradient(180deg, #163052 0%, #0e2340 100%) !important;
  background-image: linear-gradient(180deg, #163052 0%, #0e2340 100%) !important;
  color: var(--cs-blue-200) !important;
  border-color: #1f3a5c !important;
  border-bottom: 2px solid var(--cs-blue-700) !important;
}

/* Global failsafe: ANY thead th in dark theme — our brand navy gradient */
html[data-theme="dark"] thead th,
html[data-theme="dark"] thead tr th,
html[data-theme="dark"] table > thead > tr > th {
  background-color: #0e2340 !important;
  color: var(--cs-blue-200) !important;
  border-color: #1f3a5c !important;
}

/* Global failsafe: ANY card/box-like div with inline "padding" + "border"
   + "border-radius" that we can't catch via attribute selectors — via
   common class names seen across the codebase. */
.cd-diag-card,
.cd-card,
.diag-card,
.dash-card,
.info-card,
.stat-card,
.metric-card,
.summary-card,
.box-card,
.data-card {
  background: var(--cs-bg-elev) !important;
  border: 1px solid var(--cs-border) !important;
  color: var(--cs-text) !important;
  border-radius: var(--cs-r-md) !important;
}
.cd-diag-card *,
.diag-card *,
.dash-card *,
.stat-card *,
.metric-card *,
.summary-card * {
  color: inherit;
}