/* =========================================================================
   OPTICSERVERS — client area theme
   Matches opticservers.ro. Everything lives in this one file, so it can be
   carried over to a newer copy of Six by copying this file across.
   ========================================================================= */

/* ============================== TOKENS ============================== */
:root {
  --bg-page: #0a0a0a;
  --bg-surface: #111111;
  --bg-subtle: #171717;
  --bg-inset: #141414;
  --bg-hover: #262626;

  --border: #252525;
  --border-strong: rgba(255, 255, 255, .16);
  --input: rgba(255, 255, 255, .15);
  --ring: #a1a1a1;

  --fg: #fafafa;
  --fg-body: #b4b4b4;
  --fg-muted: #8c8c8c;
  --fg-faint: #6b6b6b;

  --primary: #e5e5e5;
  --primary-fg: #171717;
  --logo: #f97316;

  --ok: #5fbf7a;
  --ok-soft: rgba(95, 191, 122, .12);
  --ok-line: rgba(95, 191, 122, .28);
  --warn: #f0a670;
  --warn-soft: rgba(240, 166, 112, .12);
  --warn-line: rgba(240, 166, 112, .28);
  --bad: #e57367;
  --bad-soft: rgba(229, 115, 103, .12);
  --bad-line: rgba(229, 115, 103, .28);
  --info-soft: rgba(160, 160, 160, .1);

  --radius: 10px;
  --btn-h: 34px;
  --sans: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============================== BASE ============================== */
body {
  background: var(--bg-page) !important;
  color: var(--fg-body) !important;
  font-family: var(--sans) !important;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--sans) !important;
  color: var(--fg) !important;
  font-weight: 500;
  letter-spacing: -0.025em;
}
h1, .h1 { font-size: 30.4px; }
h2, .h2 { font-size: 24.8px; }
h3, .h3 { font-size: 20.8px; }
h4, .h4 { font-size: 16.96px; font-weight: 600; }

a { color: var(--fg); }
a:hover, a:focus { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
hr { border-top-color: var(--border) !important; }
code, kbd, pre, samp, .mono { font-family: var(--mono) !important; }
code { background: var(--bg-subtle) !important; color: var(--fg) !important; border: 1px solid var(--border); }
pre { background: var(--bg-inset) !important; border-color: var(--border) !important; color: var(--fg-body) !important; }
::selection { background: var(--primary); color: var(--primary-fg); }
.text-muted { color: var(--fg-muted) !important; }
.text-success { color: var(--ok) !important; }
.text-danger, .text-error { color: var(--bad) !important; }
.text-warning { color: var(--warn) !important; }
.text-info { color: var(--fg-muted) !important; }
small, .small { color: var(--fg-muted); }

/* ============================== HEADER ============================== */
#header {
  background: var(--bg-subtle) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: none !important;
}
#header .top-nav > li > a,
#header .top-nav a { color: var(--fg-muted) !important; }
#header .top-nav a:hover { color: var(--fg) !important; text-decoration: none; }
/* the logo is the square mark on its own, so give it a little more presence
   than a wide lockup would need */
#header .logo img { max-height: 44px; width: auto; display: block; }
#header .logo { display: inline-flex; align-items: center; }
#header .logo-text { color: var(--fg) !important; font-weight: 600; letter-spacing: -0.03em; }
#header .btn-logged-in-admin { background: var(--warn-soft) !important; border-color: var(--warn-line) !important; color: var(--warn) !important; }

/* ============================== MAIN NAV ============================== */
#main-menu { background: var(--bg-page) !important; }
#main-menu .navbar,
.navbar-main,
.navbar-default {
  background: var(--bg-page) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}
.navbar-default .navbar-nav > li > a {
  color: var(--fg-body) !important;
  font-size: 14px;
  font-weight: 500;
  border-radius: 7px;
  padding: 8px 12px;
  margin: 9px 2px;
  transition: background .15s ease, color .15s ease;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus { background: var(--bg-hover) !important; color: var(--fg) !important; }
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .open > a {
  background: var(--bg-subtle) !important;
  color: var(--fg) !important;
}
.navbar-default .navbar-toggle { border-color: var(--border) !important; border-radius: 8px; }
.navbar-default .navbar-toggle:hover { background: var(--bg-hover) !important; }
.navbar-default .navbar-toggle .icon-bar { background: var(--fg-body) !important; }
.navbar-default .navbar-collapse { border-color: var(--border) !important; }

/* ============================== HOME SHORTCUTS ============================== */
.home-shortcuts { background: transparent !important; padding: 18px 0 !important; }
.home-shortcuts .btn,
.home-shortcuts .btn-shortcut {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-body) !important;
  border-radius: var(--radius) !important;
}
.home-shortcuts .btn:hover { background: var(--bg-subtle) !important; color: var(--fg) !important; }

/* ============================== LAYOUT ============================== */
#main-body { background: var(--bg-page) !important; padding: 34px 0 60px; }
.container, .container-fluid { max-width: 1320px; }
.jumbotron { background: var(--bg-subtle) !important; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.4); }
.well { background: var(--bg-inset) !important; border-color: var(--border) !important; border-radius: var(--radius) !important; box-shadow: none !important; }

/* ============================== PANELS / CARDS ============================== */
.panel {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) * 1.4) !important;
  box-shadow: none !important;
}
.panel > .panel-heading,
.panel-default > .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--fg) !important;
  padding: 16px 20px;
  border-radius: calc(var(--radius) * 1.4) calc(var(--radius) * 1.4) 0 0 !important;
}
.panel-title { font-size: 16px !important; font-weight: 600 !important; color: var(--fg) !important; letter-spacing: -0.015em; }
.panel-body { padding: 20px; color: var(--fg-body); }
.panel-footer { background: var(--bg-subtle) !important; border-top-color: var(--border) !important; color: var(--fg-muted); }
.panel-primary, .panel-info, .panel-success, .panel-warning, .panel-danger { border-color: var(--border) !important; }
.panel-primary > .panel-heading,
.panel-info > .panel-heading,
.panel-success > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger > .panel-heading { background: var(--bg-subtle) !important; color: var(--fg) !important; }
.client-home-panels .panel { height: auto; }

/* ============================== BUTTONS ============================== */
.btn {
  height: auto;
  min-height: var(--btn-h);
  padding: 7px 13px;
  border-radius: var(--radius) !important;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn:focus-visible {
  outline: none !important;
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 3px rgba(161, 161, 161, .45) !important;
}
.btn-lg { min-height: 40px; padding: 10px 18px; font-size: 15px !important; }
.btn-sm, .btn-xs { min-height: 28px; padding: 4px 10px; font-size: 13px !important; }

.btn-primary, .btn-info {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-fg) !important;
}
.btn-primary:hover, .btn-info:hover,
.btn-primary:focus, .btn-info:focus,
.btn-primary:active, .btn-info:active { background: var(--primary) !important; color: var(--primary-fg) !important; opacity: .82; }

.btn-default, .btn-secondary {
  background: var(--bg-surface) !important;
  border-color: var(--input) !important;
  color: var(--fg) !important;
}
.btn-default:hover, .btn-secondary:hover,
.btn-default:focus, .btn-default:active { background: var(--bg-hover) !important; color: var(--fg) !important; }

.btn-success { background: var(--ok-soft) !important; border-color: var(--ok-line) !important; color: var(--ok) !important; }
.btn-success:hover { background: var(--ok-soft) !important; border-color: var(--ok) !important; color: var(--ok) !important; }
.btn-danger  { background: var(--bad-soft) !important; border-color: var(--bad-line) !important; color: var(--bad) !important; }
.btn-danger:hover { background: var(--bad-soft) !important; border-color: var(--bad) !important; color: var(--bad) !important; }
.btn-warning { background: var(--warn-soft) !important; border-color: var(--warn-line) !important; color: var(--warn) !important; }
.btn-warning:hover { background: var(--warn-soft) !important; border-color: var(--warn) !important; color: var(--warn) !important; }
.btn-link { color: var(--fg) !important; }
.btn.disabled, .btn[disabled] { opacity: .45 !important; }

/* ============================== FORMS ============================== */
.form-control, .input-group .form-control, select.form-control, textarea.form-control {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  color: var(--fg) !important;
  height: 38px;
  padding: 0 11px;
  font-size: 14px;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.form-control { height: auto; min-height: 120px; padding: 10px 11px; line-height: 1.6; }
select.form-control { padding-right: 28px; }
.form-control:focus {
  border-color: var(--fg-faint) !important;
  box-shadow: 0 0 0 3px rgba(250, 250, 250, .08) !important;
}
.form-control::placeholder { color: var(--fg-faint) !important; }
.form-control[disabled], .form-control[readonly] { background: var(--bg-inset) !important; color: var(--fg-muted) !important; }
.control-label, label { color: var(--fg-body) !important; font-weight: 500; font-size: 13.5px; }
.help-block { color: var(--fg-muted) !important; font-size: 12.5px; }
.input-group-addon { background: var(--bg-subtle) !important; border-color: var(--border-strong) !important; color: var(--fg-muted) !important; border-radius: 8px !important; }
.has-error .form-control { border-color: var(--bad-line) !important; }
.has-error .control-label, .has-error .help-block { color: var(--bad) !important; }
.has-success .form-control { border-color: var(--ok-line) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
.field-icon, .prepend-icon i { color: var(--fg-faint) !important; }

/* ============================== TABLES ============================== */
.table { color: var(--fg-body) !important; }
.table > thead > tr > th {
  border-bottom: 1px solid var(--border) !important;
  color: var(--fg-faint) !important;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 12px 14px;
}
.table > tbody > tr > td { border-top: 1px solid var(--border) !important; padding: 13px 14px; font-size: 14px; vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--bg-inset) !important; }
.table-hover > tbody > tr:hover { background: var(--bg-subtle) !important; }
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th { border-color: var(--border) !important; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input { background: var(--bg-surface) !important; border: 1px solid var(--border-strong) !important; color: var(--fg) !important; border-radius: 7px; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length { color: var(--fg-muted) !important; }

/* ============================== ALERTS / LABELS ============================== */
.alert {
  border-radius: var(--radius) !important;
  border-width: 1px !important;
  font-size: 14px;
  padding: 14px 16px;
}
.alert-success { background: var(--ok-soft) !important; border-color: var(--ok-line) !important; color: var(--ok) !important; }
.alert-danger, .alert-error { background: var(--bad-soft) !important; border-color: var(--bad-line) !important; color: var(--bad) !important; }
.alert-warning { background: var(--warn-soft) !important; border-color: var(--warn-line) !important; color: var(--warn) !important; }
.alert-info { background: var(--info-soft) !important; border-color: var(--border) !important; color: var(--fg-body) !important; }
.alert a { color: inherit; text-decoration: underline; }

.label, .badge {
  font-family: var(--mono);
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .05em;
  border-radius: 5px !important;
  padding: 4px 8px;
  border: 1px solid var(--border);
}
.label-success, .badge-success { background: var(--ok-soft) !important; border-color: var(--ok-line) !important; color: var(--ok) !important; }
.label-danger,  .badge-danger  { background: var(--bad-soft) !important; border-color: var(--bad-line) !important; color: var(--bad) !important; }
.label-warning, .badge-warning { background: var(--warn-soft) !important; border-color: var(--warn-line) !important; color: var(--warn) !important; }
.label-info, .label-default, .badge { background: var(--bg-subtle) !important; color: var(--fg-muted) !important; }
.label-primary { background: var(--bg-hover) !important; color: var(--fg) !important; }

/* ============================== NAV / TABS / LISTS ============================== */
.nav-tabs { border-bottom-color: var(--border) !important; }
.nav-tabs > li > a { color: var(--fg-muted) !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; font-size: 14px; font-weight: 500; }
.nav-tabs > li > a:hover { background: transparent !important; color: var(--fg) !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus { background: transparent !important; color: var(--fg) !important; border-bottom-color: var(--fg) !important; }
.nav-pills > li > a { color: var(--fg-body) !important; border-radius: 8px !important; font-size: 14px; }
.nav-pills > li > a:hover { background: var(--bg-hover) !important; color: var(--fg) !important; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover { background: var(--bg-subtle) !important; color: var(--fg) !important; }

.list-group { border-radius: calc(var(--radius) * 1.4); overflow: hidden; }
.list-group-item {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--fg-body) !important;
  font-size: 14px;
}
.list-group-item:hover { background: var(--bg-subtle) !important; }
.list-group-item.active, .list-group-item.active:hover { background: var(--bg-hover) !important; border-color: var(--border) !important; color: var(--fg) !important; }
.list-group-item-heading { color: var(--fg) !important; }

/* sidebars */
.sidebar .list-group-item, .panel-sidebar { font-size: 13.5px; }
.panel-sidebar .panel-heading { font-family: var(--mono); font-size: 10.5px !important; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-faint) !important; }

/* ============================== DROPDOWNS / MODALS / POPOVERS ============================== */
.dropdown-menu {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .7) !important;
  padding: 6px;
}
.dropdown-menu > li > a { color: var(--fg-body) !important; border-radius: 6px; padding: 8px 10px; font-size: 14px; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--bg-hover) !important; color: var(--fg) !important; }
.dropdown-menu .divider { background: var(--border) !important; }

.modal-content {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) * 1.6) !important;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7) !important;
}
.modal-header, .modal-footer { border-color: var(--border) !important; }
.modal-title { color: var(--fg) !important; }
.modal-backdrop.in { opacity: .6 !important; background: #000 !important; }
.close { color: var(--fg-muted) !important; opacity: 1 !important; text-shadow: none !important; }
.close:hover { color: var(--fg) !important; }
.popover, .tooltip-inner {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
  color: var(--fg-body) !important;
  border-radius: 8px !important;
}
.popover-title { background: var(--bg-subtle) !important; border-bottom-color: var(--border) !important; color: var(--fg) !important; }

/* ============================== MISC COMPONENTS ============================== */
.breadcrumb { background: transparent !important; padding: 0 0 18px !important; font-size: 13px; }
.breadcrumb > li + li:before { color: var(--fg-faint) !important; }
.breadcrumb a { color: var(--fg-muted) !important; }
.breadcrumb .active { color: var(--fg) !important; }

.pagination > li > a, .pagination > li > span {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--fg-body) !important;
}
.pagination > li > a:hover { background: var(--bg-hover) !important; color: var(--fg) !important; }
.pagination > .active > a, .pagination > .active > span { background: var(--bg-hover) !important; border-color: var(--border) !important; color: var(--fg) !important; }

.progress { background: var(--bg-inset) !important; border-radius: 999px !important; box-shadow: none !important; height: 8px; }
.progress-bar { background: var(--primary) !important; box-shadow: none !important; }
.progress-bar-success { background: var(--ok) !important; }
.progress-bar-warning { background: var(--warn) !important; }
.progress-bar-danger  { background: var(--bad) !important; }

.panel-group .panel-heading + .panel-collapse > .panel-body { border-top-color: var(--border) !important; }
.announcement-single { border-bottom: 1px solid var(--border); }
.client-alerts .alert { margin-bottom: 12px; }

/* status colour helpers used across Six */
.bg-color-green, .bg-color-blue, .bg-color-gold, .bg-color-red { border-radius: var(--radius) !important; }
.bg-color-green { background: var(--ok-soft) !important; color: var(--ok) !important; }
.bg-color-blue  { background: var(--info-soft) !important; color: var(--fg-body) !important; }
.bg-color-gold  { background: var(--warn-soft) !important; color: var(--warn) !important; }
.bg-color-red   { background: var(--bad-soft) !important; color: var(--bad) !important; }

/* ============================== FOOTER ============================== */
#footer {
  background: var(--bg-page) !important;
  border-top: 1px solid var(--border);
  color: var(--fg-muted) !important;
  padding: 28px 0;
  font-size: 13px;
}
#footer a { color: var(--fg-muted) !important; }
#footer a:hover { color: var(--fg) !important; }
.back-to-top {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-body) !important;
  border-radius: var(--radius) !important;
}
.back-to-top:hover { background: var(--bg-hover) !important; color: var(--fg) !important; }

/* ============================== LOGIN / REGISTER ============================== */
/* NOTE: #login is the id of the submit BUTTON, not a container — keep it out of here. */
.logincontainer, .login-box {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) * 1.6) !important;
  padding: 28px !important;
}
.header-lined { border-bottom: 1px solid var(--border); padding-bottom: 12px; }

/* scrollbars */
* { scrollbar-color: #333 var(--bg-page); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: #2e2e2e; border-radius: 999px; border: 3px solid var(--bg-page); }
::-webkit-scrollbar-thumb:hover { background: #3d3d3d; }

/* =========================================================================
   PASS 2 — overriding Six's own brand colours and fixing contrast issues
   Six hard-codes blues (#043d5f, #25a2c7, #0e5077, #337ab7) in selectors more
   specific than the generic ones above, so they need naming directly.
   ========================================================================= */

/* ---------- homepage banner (was solid #043d5f) ---------- */
section#home-banner {
  background-color: var(--bg-subtle) !important;
  border-bottom: 1px solid var(--border);
  color: var(--fg) !important;
  padding: 44px 0 48px !important;
}
section#home-banner h2 { color: var(--fg) !important; font-weight: 500; letter-spacing: -0.03em; }
section#home-banner .form-control {
  background: var(--bg-surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--fg) !important;
}
section#home-banner .btn,
section#home-banner .btn.search,
section#home-banner .btn.transfer {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-fg) !important;
}
section#home-banner .btn.transfer { background: var(--bg-surface) !important; border-color: var(--input) !important; color: var(--fg) !important; }
section#home-banner .btn:hover { opacity: .85; }

/* ---------- quick shortcuts strip (was solid #25a2c7 with blue dividers) ---------- */
.home-shortcuts {
  background: var(--bg-page) !important;
  border-bottom: 1px solid var(--border);
  color: var(--fg-body) !important;
}
.home-shortcuts li {
  border-right: 1px solid var(--border) !important;
  padding: 14px 6px !important;
  transition: background .15s ease;
}
.home-shortcuts li:first-child { border-left: 1px solid var(--border) !important; }
.home-shortcuts li:hover { background: var(--bg-subtle) !important; }
.home-shortcuts li a { color: var(--fg-body) !important; }
.home-shortcuts li:hover a { color: var(--fg) !important; }
.home-shortcuts li i { color: var(--fg-muted) !important; }
.home-shortcuts li:hover i { color: var(--fg) !important; }
.home-shortcuts li p { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--fg-muted) !important; }
.home-shortcuts .lead { color: var(--fg) !important; font-size: 18.4px; font-weight: 500; letter-spacing: -0.02em; }

/* ---------- top bar buttons (cart was #0e5077) ---------- */
ul.top-nav > li.primary-action { border-left: 1px solid var(--border) !important; }
ul.top-nav > li.primary-action > a.btn {
  background-color: var(--primary) !important;
  color: var(--primary-fg) !important;
  border-radius: var(--radius) !important;
  padding: 6px 14px !important;
  font-weight: 500;
}
ul.top-nav > li.primary-action > a.btn:hover { opacity: .85; }
ul.top-nav > li > a.btn {
  background: var(--bg-surface) !important;
  border: 1px solid var(--input) !important;
  color: var(--fg) !important;
  border-radius: var(--radius) !important;
}
ul.top-nav > li > a.btn:hover { background: var(--bg-hover) !important; }
/* "you are masquerading as this client" — informative, but calmer */
ul.top-nav > li > a.btn-logged-in-admin {
  background: var(--bg-surface) !important;
  border-color: var(--warn-line) !important;
  color: var(--warn) !important;
  font-size: 1em !important;
}

/* ---------- disabled buttons: a real muted state, not a faded one ----------
   WHMCS disables the login/submit button until the captcha resolves. A low
   opacity on the near-white primary made it unreadable on a dark page. */
.btn.disabled, .btn[disabled], fieldset[disabled] .btn,
.btn-primary.disabled, .btn-primary[disabled] {
  opacity: 1 !important;
  background: var(--bg-hover) !important;
  background-image: none !important;
  border-color: var(--border) !important;
  color: var(--fg-faint) !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* ---------- announcements ---------- */
.announcement-single { padding-bottom: 22px; margin-bottom: 22px !important; }
.announcement-single .title { font-size: 16.96px !important; font-weight: 600 !important; color: var(--fg) !important; letter-spacing: -0.015em; }
.announcement-single blockquote {
  border-left: 2px solid var(--border) !important;
  background: transparent !important;
  padding: 4px 0 4px 18px;
  margin-top: 14px !important;
  font-size: 14.5px;
  color: var(--fg-body) !important;
}
.announcement-single .article-items { color: var(--fg-muted) !important; font-size: 12.5px; }
/* the date chip */
.announcement-single .label,
.announcement-single .label-default {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-muted) !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 4px 9px;
}
/* WHMCS renders "read more" as label-warning — make it read as a link/button */
.announcement-single a.label-warning,
a.label.label-warning {
  background: var(--bg-surface) !important;
  border: 1px solid var(--input) !important;
  color: var(--fg) !important;
  font-family: var(--sans) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 7px !important;
  padding: 5px 11px;
  display: inline-block;
  text-decoration: none !important;
}
.announcement-single a.label-warning:hover,
a.label.label-warning:hover { background: var(--bg-hover) !important; }

/* ---------- dropdowns: kill the bright divider, calm the hover ---------- */
.dropdown-menu .divider,
.dropdown-menu > li.divider,
ul.top-nav .dropdown-menu .divider {
  background-color: var(--border) !important;
  background-image: none !important;
  height: 1px !important;
  margin: 6px 0 !important;
  border: 0 !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a {
  background-image: none !important;
  background-color: var(--bg-hover) !important;
  color: var(--fg) !important;
}
#languageChooserContent ul li a:hover { background: var(--bg-hover) !important; color: var(--fg) !important; }

/* ---------- sweep up remaining Six blues ---------- */
a.text-primary, .text-primary { color: var(--fg) !important; }
.bg-primary { background: var(--bg-subtle) !important; color: var(--fg) !important; }
.panel-primary { border-color: var(--border) !important; }
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background: var(--bg-hover) !important; border-color: var(--border) !important; }
blockquote { border-left-color: var(--border) !important; color: var(--fg-body) !important; }
.list-group-item.active .list-group-item-text { color: var(--fg-muted) !important; }
.form-control:focus { border-color: var(--fg-faint) !important; }

/* =========================================================================
   PASS 3 — remaining Six surfaces that still painted light on a dark page
   ========================================================================= */

/* ---------- support tickets ---------- */
.ticket-reply {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) * 1.4) !important;
  color: var(--fg-body) !important;
  margin-bottom: 16px;
}
.ticket-reply .user {
  background: var(--bg-subtle) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--fg) !important;
  border-radius: calc(var(--radius) * 1.4) calc(var(--radius) * 1.4) 0 0 !important;
}
.ticket-reply .attachments { background: var(--bg-inset) !important; border-top: 1px solid var(--border) !important; color: var(--fg-muted) !important; }
.ticket-reply.staff { border-color: var(--border-strong) !important; }

/* ---------- markdown editor (ticket replies, KB) ---------- */
.md-editor { border-color: var(--border) !important; border-radius: 8px; overflow: hidden; }
.md-editor > .md-header,
.md-editor .md-footer,
.md-editor > .btn-toolbar { background: var(--bg-subtle) !important; border-color: var(--border) !important; }
.md-editor > textarea,
.md-editor > textarea.markdown-editor,
.md-editor > textarea:focus {
  background: var(--bg-surface) !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
  font-family: var(--mono) !important;
}
.md-editor > .md-preview { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--fg-body) !important; }
.markdown-content pre { background: var(--bg-inset) !important; border-color: var(--border) !important; color: var(--fg-body) !important; }
.markdown-content table { background: transparent !important; }
.markdown-content table > thead > tr > th { background: var(--bg-subtle) !important; color: var(--fg) !important; border-color: var(--border) !important; }

/* ---------- table-list (used across most listing pages) ---------- */
table.table-list thead th,
.table-list > thead > tr > th {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--fg-faint) !important;
}
.table-list > tbody > tr > td { background: transparent !important; border-top-color: var(--border) !important; color: var(--fg-body) !important; }
.table-list > tbody > tr:hover > td { background: var(--bg-subtle) !important; }

/* ---------- dashboard tiles ---------- */
.tiles .tile {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) * 1.4) !important;
  color: var(--fg-body) !important;
  box-shadow: none !important;
}
.tiles .tile:hover { background: var(--bg-subtle) !important; }
.tiles .tile .stat { color: var(--fg) !important; }

/* ---------- invoices ---------- */
.invoice-summary {
  background: var(--bg-inset) !important;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) * 1.4) !important;
  color: var(--fg-body) !important;
}

/* ---------- upgrade / downgrade ---------- */
.upgrade .products .product {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) * 1.4) !important;
}
.upgrade .products .product .header { background: var(--bg-subtle) !important; border-bottom: 1px solid var(--border) !important; color: var(--fg) !important; }
.upgrade .products .product .current { background: var(--bg-hover) !important; color: var(--fg) !important; }
.upgrade .products .product .recommended { background: var(--ok-soft) !important; color: var(--ok) !important; }
.upgrade .products .product .btn { background: var(--primary) !important; color: var(--primary-fg) !important; border-color: var(--primary) !important; }

/* ---------- registration form ---------- */
#registration .field,
#registration .form-control {
  background: var(--bg-surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--fg) !important;
}
#registration .field[disabled], #registration .field[readonly],
#registration .form-control[disabled], #registration .form-control[readonly] {
  background: var(--bg-inset) !important;
  color: var(--fg-muted) !important;
}
#registration .sub-heading span { background: var(--bg-page) !important; color: var(--fg-muted) !important; }

/* ---------- domain pricing / TLD tables ---------- */
.domain-pricing .tld-pricing-header div:nth-child(odd) { background: var(--bg-subtle) !important; color: var(--fg) !important; }
.featured-tld .price,
.featured-tld .price[class] { background: var(--bg-subtle) !important; color: var(--fg) !important; border: 1px solid var(--border) !important; }
.store-order-container .store-domain-tabs li a { background: var(--bg-subtle) !important; color: var(--fg-muted) !important; border-color: var(--border) !important; }
.store-order-container .store-domain-tabs li.active a { background: var(--bg-surface) !important; color: var(--fg) !important; }

/* ---------- assorted surfaces ---------- */
.thumbnail, .img-thumbnail { background: var(--bg-surface) !important; border-color: var(--border) !important; }
.continue-container { background: var(--bg-subtle) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; }
.invite-box { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; border-radius: calc(var(--radius) * 1.4) !important; }
.marketing-email-optin { background: var(--bg-inset) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; color: var(--fg-body) !important; }
.compact-control-bar { background: var(--bg-subtle) !important; border-color: var(--border) !important; }
.home-kb-search .form-control { background: var(--bg-surface) !important; border-color: var(--border-strong) !important; color: var(--fg) !important; }
.email-verification .btn { background: var(--bg-surface) !important; border-color: var(--input) !important; color: var(--fg) !important; }
.promo-banner .btn { background: var(--primary) !important; color: var(--primary-fg) !important; border-color: var(--primary) !important; }
section#header .search .btn { background: var(--bg-surface) !important; border-color: var(--input) !important; color: var(--fg) !important; }
h3.kb-alsoread { background: var(--bg-subtle) !important; color: var(--fg) !important; border-color: var(--border) !important; }
.primary-bg-color { background: var(--bg-subtle) !important; color: var(--fg) !important; }
#fullpage-overlay { background: rgba(10, 10, 10, .88) !important; color: var(--fg) !important; }
#fullpage-overlay .loader-message, #fullpage-overlay h1 { color: var(--fg) !important; }
.bootstrap-switch .bootstrap-switch-label { background: var(--bg-hover) !important; color: var(--fg) !important; }

/* ---------- list-group interactive states ---------- */
a.list-group-item:hover, a.list-group-item:focus,
button.list-group-item:hover, button.list-group-item:focus {
  background: var(--bg-subtle) !important;
  color: var(--fg) !important;
}
.list-group-item.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus {
  background: var(--bg-inset) !important;
  color: var(--fg-faint) !important;
}
.panel-sidebar.view-filter-btns .list-group-item.active { background: var(--bg-hover) !important; color: var(--fg) !important; }
div.sidebar .list-group-item-selected .badge { background: var(--bg-hover) !important; color: var(--fg) !important; }

/* ---------- pager / carousel ---------- */
.pager li > a, .pager li > span { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--fg-body) !important; border-radius: var(--radius) !important; }
.pager li > a:hover, .pager li > a:focus { background: var(--bg-hover) !important; color: var(--fg) !important; }
.pager .disabled > a, .pager .disabled > span { background: var(--bg-inset) !important; color: var(--fg-faint) !important; }
.carousel-indicators li { background: var(--border) !important; border-color: var(--border) !important; }
.carousel-indicators .active { background: var(--fg) !important; }
.carousel-control { background: none !important; }

/* ---------- Bootstrap :active states revert to light — pin them ---------- */
.btn-primary.active, .btn-primary.focus, .btn-primary.active:hover, .btn-primary.active:focus,
.btn-info.active, .btn-info.focus, .btn-info.active:hover, .btn-info.active:focus {
  background: var(--primary) !important; color: var(--primary-fg) !important; border-color: var(--primary) !important;
}
.btn-success.active, .btn-success.focus, .btn-success.active:hover, .btn-success.active:focus { background: var(--ok-soft) !important; color: var(--ok) !important; border-color: var(--ok-line) !important; }
.btn-danger.active,  .btn-danger.focus,  .btn-danger.active:hover,  .btn-danger.active:focus  { background: var(--bad-soft) !important; color: var(--bad) !important; border-color: var(--bad-line) !important; }
.btn-warning.active, .btn-warning.focus, .btn-warning.active:hover, .btn-warning.active:focus { background: var(--warn-soft) !important; color: var(--warn) !important; border-color: var(--warn-line) !important; }
.btn-default.disabled:hover, .btn-default.disabled:focus { background: var(--bg-hover) !important; color: var(--fg-faint) !important; }

/* ---------- navbar-inverse (used on some pages) ---------- */
.navbar-inverse { background: var(--bg-page) !important; border-color: var(--border) !important; }
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .open > a { background: var(--bg-hover) !important; color: var(--fg) !important; }
.navbar-inverse .navbar-toggle .icon-bar { background: var(--fg-body) !important; }

/* =========================================================================
   PASS 4 — last stragglers
   ========================================================================= */
.twofa-module { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; color: var(--fg-body) !important; }
.twofa-module.active { background: var(--bg-hover) !important; border-color: var(--border-strong) !important; color: var(--fg) !important; }

a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { border-color: var(--border-strong) !important; }
a.bg-primary:hover, a.bg-primary:focus { background: var(--bg-hover) !important; color: var(--fg) !important; }
a.text-primary:hover, a.text-primary:focus { color: var(--fg) !important; }

/* contextual list-group items */
.list-group-item-success { background: var(--ok-soft) !important; color: var(--ok) !important; border-color: var(--ok-line) !important; }
.list-group-item-danger  { background: var(--bad-soft) !important; color: var(--bad) !important; border-color: var(--bad-line) !important; }
.list-group-item-warning { background: var(--warn-soft) !important; color: var(--warn) !important; border-color: var(--warn-line) !important; }
.list-group-item-info    { background: var(--info-soft) !important; color: var(--fg-body) !important; border-color: var(--border) !important; }
a.list-group-item-success.active, a.list-group-item-danger.active,
a.list-group-item-warning.active, a.list-group-item-info.active,
button.list-group-item-success.active, button.list-group-item-danger.active,
button.list-group-item-warning.active, button.list-group-item-info.active {
  background: var(--bg-hover) !important; color: var(--fg) !important; border-color: var(--border) !important;
}

/* responsive DataTables expand control */
table.dataTable.dtr-column > tbody > tr > td.control:before,
table.dataTable.dtr-column > tbody > tr > th.control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before {
  background: var(--bg-hover) !important;
  border-color: var(--border) !important;
  color: var(--fg) !important;
  box-shadow: none !important;
}
div.dtr-modal div.dtr-modal-close { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--fg) !important; }
div.dtr-modal div.dtr-modal-content { background: var(--bg-surface) !important; color: var(--fg-body) !important; }
div.dtr-modal div.dtr-modal-background { background: rgba(0, 0, 0, .7) !important; }

/* links: make sure Six's blue never wins */
a, a:link, a:visited { color: var(--fg); }
a:hover, a:focus { color: var(--fg); }
#main-body a:not(.btn):not(.label):not(.list-group-item):not(.close) { color: var(--fg); }
#main-body a:not(.btn):not(.label):not(.list-group-item):not(.close):hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* the welcome banner is often just a heading — don't leave a huge empty slab */
section#home-banner .container > h2:only-child { margin: 0; }
section#home-banner:not(.with-recaptcha) { padding: 36px 0 !important; }

/* disabled fieldsets */
fieldset[disabled] .form-control { background: var(--bg-inset) !important; color: var(--fg-faint) !important; border-color: var(--border) !important; }
fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus { background: var(--bg-hover) !important; color: var(--fg-faint) !important; border-color: var(--border) !important; }

/* =========================================================================
   PASS 5 — typography scale, dropdown insets, panel/list-group seams
   ========================================================================= */

/* ---------- headings were too timid next to the main site ---------- */
h1, .h1 { font-size: 33.6px; }
h2, .h2 { font-size: 27.2px; }
h3, .h3 { font-size: 21.6px; }
h4, .h4 { font-size: 17.92px; }
.lead { font-size: 19.2px !important; color: var(--fg-body) !important; }
.font-size-36 { font-size: 32px !important; }

section#home-banner h2 {
  font-size: clamp(27.2px, 3.2vw, 40px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em;
  margin: 0;
}
.home-shortcuts .lead {
  font-size: 20.8px !important;
  font-weight: 500;
  color: var(--fg) !important;
  letter-spacing: -0.02em;
  margin: 0;
}
.home-shortcuts li p { font-size: 11.5px !important; letter-spacing: .07em; }
.home-shortcuts li i { font-size: 20px !important; }

.announcement-single .title {
  font-size: 20.8px !important;
  line-height: 1.35;
  display: inline-block;
  vertical-align: middle;
}
.announcement-single .label { vertical-align: middle; font-size: 12.5px !important; }
.panel-title { font-size: 16.96px !important; }

/* ---------- dropdowns: inset the items and the divider ---------- */
.dropdown-menu {
  padding: 6px !important;
  min-width: 200px;
  margin-top: 6px !important;
}
.dropdown-menu > li > a {
  border-radius: 7px !important;
  padding: 9px 12px !important;
}
.dropdown-menu .divider,
.dropdown-menu > li.divider,
.dropdown-menu > .divider {
  background-color: var(--border) !important;
  background-image: none !important;
  border: 0 !important;
  height: 1px !important;
  margin: 6px 8px !important;
  overflow: hidden;
}
/* some WHMCS menu items separate with a border rather than a .divider element */
.dropdown-menu > li + li[class*="divider"],
.dropdown-menu > li > a { border-top: 0 !important; }

/* ---------- top bar: the cart/logout button was reading as a white slab ---------- */
ul.top-nav > li.primary-action > a.btn,
ul.top-nav > li > a.btn {
  background: var(--bg-surface) !important;
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--input) !important;
  color: var(--fg) !important;
  border-radius: var(--radius) !important;
  padding: 6px 14px !important;
  font-weight: 500;
}
ul.top-nav > li.primary-action > a.btn:hover,
ul.top-nav > li > a.btn:hover { background-color: var(--bg-hover) !important; color: var(--fg) !important; }
ul.top-nav > li > a.btn-logged-in-admin {
  background-color: var(--bg-surface) !important;
  border-color: var(--warn-line) !important;
  color: var(--warn) !important;
}

/* ---------- panels containing a list-group (cart sidebar, filters) ----------
   Six leaves the list inset inside the panel, so the active row floats with
   gaps at the edges. Make the list flush and let the highlight fill the row. */
.panel > .list-group,
.panel > .panel-collapse > .list-group { margin: 0 !important; border-radius: 0 !important; }
.panel > .list-group .list-group-item,
.panel > .panel-collapse > .list-group .list-group-item,
.sidebar .list-group-item,
.cart-sidebar .list-group-item {
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  margin: 0 !important;
  padding: 12px 18px !important;
}
.panel > .list-group .list-group-item:first-child,
.sidebar .list-group-item:first-child { border-top: 0 !important; }
.panel > .list-group .list-group-item:last-child,
.sidebar .list-group-item:last-child {
  border-bottom: 0 !important;
  border-radius: 0 0 calc(var(--radius) * 1.4) calc(var(--radius) * 1.4) !important;
}
.panel { overflow: hidden; }
.sidebar .list-group-item.active,
.cart-sidebar .list-group-item.active,
.panel > .list-group .list-group-item.active {
  background: var(--bg-hover) !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
  box-shadow: inset 2px 0 0 var(--fg) !important;
}
/* sidebar headings */
.sidebar .panel-heading, .cart-sidebar .panel-heading {
  font-family: var(--mono);
  font-size: 10.5px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint) !important;
  padding: 14px 18px !important;
}
.sidebar .panel-heading .panel-title, .cart-sidebar .panel-heading .panel-title {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint) !important;
}

/* =========================================================================
   PASS 6 — the last reported defects
   ========================================================================= */

/* the login submit button is an <input id="login">; make sure it reads as primary */
input#login, input#login.btn, #login.btn-primary {
  background: var(--primary) !important;
  background-image: none !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--radius) !important;
  color: var(--primary-fg) !important;
  padding: 8px 18px !important;
  min-height: var(--btn-h);
}
input#login:hover { opacity: .85; }
input#login[disabled], input#login.disabled, #login.btn.disabled {
  background: var(--bg-hover) !important;
  border-color: var(--border) !important;
  color: var(--fg-faint) !important;
  opacity: 1 !important;
}
/* give the button row breathing room inside its container */
.login-form div[align="center"], .logincontainer div[align="center"] { padding: 8px 0 4px; }
.logincontainer .row { margin-left: 0; margin-right: 0; }

/* footer border: Six uses section#footer, which outranked my #footer rule */
section#footer, #footer {
  border-top: 1px solid var(--border) !important;
  background-color: var(--bg-page) !important;
  color: var(--fg-muted) !important;
}

/* any 1px light line inside a dropdown, whether drawn as a background or a border */
.dropdown-menu li, .dropdown-menu li > a { border-color: var(--border) !important; }
.dropdown-menu .divider,
.dropdown-menu li.divider,
.dropdown-menu li[class~="divider"],
.dropdown-menu > .divider,
.dropdown-menu hr {
  background: var(--border) !important;
  background-color: var(--border) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-top: 0 !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 6px 8px !important;
  overflow: hidden;
}
.dropdown-header { color: var(--fg-faint) !important; font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; }

/* light 1px lines Six draws elsewhere */
.tiles .tile:nth-child(1), .tiles .tile:nth-child(2) { border-bottom-color: var(--border) !important; }
.tiles .tile { border-color: var(--border) !important; }
table.table-list thead th { border-bottom-color: var(--border) !important; }
hr { border-top: 1px solid var(--border) !important; border-bottom: 0 !important; }
.page-header { border-bottom-color: var(--border) !important; }
.modal-header, .modal-footer { border-color: var(--border) !important; }

/* =========================================================================
   PASS 7
   ========================================================================= */

/* back-to-top: the grey chip is the <i>, not the wrapper */
section#footer .back-to-top,
#footer .back-to-top { background: transparent !important; border: 0 !important; }
section#footer .back-to-top i,
#footer .back-to-top i,
.back-to-top i {
  background-color: var(--bg-surface) !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-muted) !important;
  border-radius: var(--radius) !important;
  opacity: 1 !important;
  padding: 9px 11px !important;
}
section#footer .back-to-top:hover i,
.back-to-top:hover i { background-color: var(--bg-hover) !important; color: var(--fg) !important; }

/* dropdown separators: neutralise every mechanism that could draw a light line */
.dropdown-menu > li {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.dropdown-menu > li.divider,
.dropdown-menu > li[class*="divider"],
.dropdown-menu > li[role="separator"],
.dropdown-menu .divider,
.dropdown-menu hr {
  background: var(--border) !important;
  background-color: var(--border) !important;
  background-image: none !important;
  border: 0 !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 6px 8px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
/* and if it is drawn on the anchors instead */
.dropdown-menu > li > a { border: 0 !important; box-shadow: none !important; }

/* page-title rule: Six draws it on the h1 inside .header-lined, not the wrapper */
div.header-lined h1, .header-lined h1, .header-lined h2 {
  border-bottom: 1px solid var(--border) !important;
  color: var(--fg) !important;
  font-weight: 500 !important;
  padding-bottom: 12px !important;
}
div.header-lined .breadcrumb > .active { color: var(--fg) !important; }
div.header-lined .breadcrumb li a { color: var(--fg-muted) !important; }

/* =========================================================================
   PASS 8 — DataTables chrome and status badges
   ========================================================================= */

/* top bar: Six paints it slate (#4f5360) with a white bottom border */
.dataTables_wrapper .dataTables_info,
div.dataTables_wrapper div.dataTables_info {
  background-color: var(--bg-subtle) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--fg-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 14px 18px !important;
  border-radius: calc(var(--radius) * 1.4) calc(var(--radius) * 1.4) 0 0 !important;
}
/* search box: white fill, white border and a bitmap icon */
.dataTables_wrapper .dataTables_filter label .form-control,
.dataTables_wrapper .dataTables_filter input {
  background-image: none !important;
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  color: var(--fg) !important;
  padding: 7px 12px !important;
  height: 36px !important;
}
.dataTables_wrapper .dataTables_filter label .form-control::placeholder { color: var(--fg-faint) !important; }
.dataTables_wrapper .dataTables_filter label { color: var(--fg-muted) !important; }

/* bottom bar: was #f6f6f6 */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .bottom,
.dataTables_wrapper .dataTables_paginate {
  background-color: var(--bg-subtle) !important;
  color: var(--fg-muted) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 calc(var(--radius) * 1.4) calc(var(--radius) * 1.4) !important;
}
.dataTables_wrapper .dataTables_length { font-size: 13px !important; padding: 12px 18px !important; }
.dataTables_wrapper .dataTables_length select {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--fg) !important;
  border-radius: 7px !important;
  height: 32px;
  padding: 0 8px;
}
/* pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate a {
  background: var(--bg-surface) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-body) !important;
  border-radius: 7px !important;
  margin: 0 2px;
  padding: 5px 11px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-strong) !important;
  color: var(--fg) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.active {
  background: var(--bg-hover) !important;
  border-color: var(--border-strong) !important;
  color: var(--fg) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--fg-faint) !important; background: var(--bg-inset) !important; }

/* header row: Six underlines each th with 4px of green */
.dataTables_wrapper table.table-list thead th,
.dataTables_wrapper table.table-list thead th:nth-child(even) {
  border-bottom: 1px solid var(--border) !important;
  background-color: transparent !important;
  color: var(--fg-faint) !important;
  font-weight: 500 !important;
}
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
  background-color: transparent !important;
  color: var(--fg) !important;
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { background-image: none !important; }
table.dataTable thead th { position: relative; }

/* ---------- status badges ---------- */
.status {
  display: inline-block !important;
  background-color: var(--bg-subtle) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--fg-muted) !important;
  font-family: var(--sans) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  padding: 3px 11px !important;
  min-width: 84px;
  text-align: center;
}
.status-active, .status-completed, .status-open, .status-paid {
  background-color: var(--ok-soft) !important; border-color: var(--ok-line) !important; color: var(--ok) !important;
}
.status-pending, .status-pending.transfer, .status-suspended, .status-customer-reply, .status-onhold {
  background-color: var(--warn-soft) !important; border-color: var(--warn-line) !important; color: var(--warn) !important;
}
.status-fraud, .status-overdue, .status-unpaid, .status-failed {
  background-color: var(--bad-soft) !important; border-color: var(--bad-line) !important; color: var(--bad) !important;
}
.status-cancelled, .status-terminated, .status-expired, .status-transferred,
.status-answered, .status-closed, .status-refunded {
  background-color: var(--bg-subtle) !important; border-color: var(--border) !important; color: var(--fg-muted) !important;
}
.status-custom { background-color: var(--bg-subtle) !important; border-color: var(--border) !important; color: var(--fg-body) !important; }

/* =========================================================================
   PASS 9 — the account menu item in the main navbar
   Six paints the <li> itself (.navbar-main li.account), so overriding the
   <a> alone left the blue showing behind it.
   ========================================================================= */
.navbar-main { font-family: var(--sans) !important; font-size: 14px !important; }
.navbar-main li.account,
.navbar-main li.account > a,
.navbar-main .navbar-nav > li.account { background-color: transparent !important; background: transparent !important; }
.navbar-main li.account > a { color: var(--fg-body) !important; }
.navbar-main li.account:hover > a,
.navbar-main li.account.open > a { background-color: var(--bg-hover) !important; color: var(--fg) !important; border-radius: 7px; }

.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:focus,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:focus,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > li > a:hover {
  background-color: var(--bg-hover) !important;
  color: var(--fg) !important;
}
.navbar-main .navbar-nav > li > a { color: var(--fg-body) !important; }

/* generic Bootstrap nav open-state (was #eee with a blue border) */
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
  background-color: var(--bg-hover) !important;
  border-color: var(--border) !important;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
  background-color: var(--bg-hover) !important; color: var(--fg) !important;
}
.list-group-item.active > .badge, .nav-pills > .active > a > .badge {
  background-color: var(--bg-page) !important; color: var(--fg) !important;
}

/* =========================================================================
   PASS 10 — spacing rhythm and DataTables header alignment
   ========================================================================= */

/* breathing room after page titles and breadcrumbs */
div.header-lined, .header-lined { margin-bottom: 28px !important; }
div.header-lined h1, .header-lined h1, .header-lined h2 { margin-bottom: 0 !important; }
.breadcrumb { margin-bottom: 24px !important; padding-bottom: 0 !important; }
#main-body .page-header { margin-bottom: 26px !important; }

/* panels must never butt up against each other or the next block */
.panel { margin-bottom: 22px !important; }
.sidebar .panel, .cart-sidebar .panel { margin-bottom: 18px !important; }
/* .panel-sidebar is the panel itself, not the column — never pad it. */
.sidebar { padding-right: 20px; }
@media (max-width: 991px) { .sidebar { padding-right: 0; margin-bottom: 20px; } }
.tab-content { padding-top: 20px; }
.alert { margin-bottom: 18px !important; }
.table { margin-bottom: 0 !important; }
.dataTables_wrapper { margin-bottom: 24px; }

/* the search box sat flush with the bottom of the info bar.
   Give the bar a fixed height and centre both halves inside it. */
.dataTables_wrapper { position: relative; }
.dataTables_wrapper .dataTables_info,
div.dataTables_wrapper div.dataTables_info {
  display: flex !important;
  align-items: center !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  margin: 0 !important;
}
.dataTables_wrapper .dataTables_filter {
  position: absolute !important;
  top: 0 !important;
  right: 14px !important;
  float: none !important;
  width: auto !important;
  height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.dataTables_wrapper .dataTables_filter label {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter label .form-control {
  width: 240px !important;
  margin: 0 !important;
  height: 36px !important;
}
@media (max-width: 640px) {
  .dataTables_wrapper .dataTables_filter { position: static !important; height: auto !important; padding: 0 18px 14px !important; }
  .dataTables_wrapper .dataTables_filter input { width: 100% !important; }
}
/* bottom bar: keep the two halves apart and centred */
.dataTables_wrapper .dataTables_length {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  min-height: 54px;
  margin: 0 !important;
}
.dataTables_wrapper .dataTables_paginate { padding: 10px 18px !important; margin: 0 !important; }

/* the two non-pseudo stragglers */
.table-responsive { border-color: var(--border) !important; }
.blockquote-reverse, blockquote.pull-right { border-right-color: var(--border) !important; border-left: 0 !important; }

/* =========================================================================
   PASS 11 — the last 36 real selectors from the coverage audit
   ========================================================================= */
.nav-tabs.nav-justified > li > a, .nav-tabs-justified > li > a { background: transparent !important; border-color: var(--border) !important; color: var(--fg-muted) !important; }
.popover.top > .arrow:after    { border-top-color: var(--bg-subtle) !important; }
.popover.right > .arrow:after  { border-right-color: var(--bg-subtle) !important; }
.popover.bottom > .arrow:after { border-bottom-color: var(--bg-subtle) !important; }
.popover.left > .arrow:after   { border-left-color: var(--bg-subtle) !important; }
.carousel-caption { background: rgba(10,10,10,.7) !important; color: var(--fg) !important; text-shadow: none !important; }

.panel.panel-accent-green { border-color: var(--ok-line) !important; }
.product-status-text { color: var(--fg-muted) !important; }
.product-status-cancelled, .product-status-terminated { background: var(--bg-subtle) !important; color: var(--fg-muted) !important; border-color: var(--border) !important; }
.affiliate-referral-link span { background: var(--bg-inset) !important; border-color: var(--border) !important; color: var(--fg-body) !important; }
.requestor-type-owner { background: var(--info-soft) !important; color: var(--fg-body) !important; border-color: var(--border) !important; }
.requestor-type-guest { background: var(--bg-subtle) !important; color: var(--fg-muted) !important; border-color: var(--border) !important; }
.ticketfeedbackstaffcont { background: var(--bg-inset) !important; border-color: var(--border) !important; color: var(--fg-body) !important; }

.popover-user-notifications { background: var(--bg-surface) !important; border-color: var(--border) !important; }
.popover-user-notifications ul li { background: transparent !important; border-color: var(--border) !important; color: var(--fg-body) !important; }
.popover-user-notifications ul li a:hover { background: var(--bg-hover) !important; color: var(--fg) !important; }
.popover-user-notifications ul li i.far.fa-check-circle,
.popover-user-notifications ul li i.fas.fa-check-circle { color: var(--ok) !important; }

.auth3d-area, .submit-3d { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--fg-body) !important; }
.invoice-summary-table td.total-row { background: var(--bg-subtle) !important; color: var(--fg) !important; border-color: var(--border) !important; }
.twofa-setup .activation-msg { background: var(--ok-soft) !important; color: var(--ok) !important; border-color: var(--ok-line) !important; }
.twofa-setup .backup-code { background: var(--bg-inset) !important; border-color: var(--border) !important; color: var(--fg) !important; font-family: var(--mono) !important; }
.email-verification.success { background: var(--ok-soft) !important; color: var(--ok) !important; border-color: var(--ok-line) !important; }

.store-promoted-product { background: var(--bg-inset) !important; border-color: var(--border) !important; color: var(--fg-body) !important; }
.promo-banner.ox { background: var(--bg-subtle) !important; color: var(--fg-body) !important; border-color: var(--border) !important; }
.promo-banner.ox a { color: var(--fg) !important; }
.select-account { background: var(--bg-surface) !important; border-color: var(--border) !important; }
.select-account a { background: var(--bg-inset) !important; border-color: var(--border) !important; color: var(--fg-body) !important; }
.select-account a:hover { background: var(--bg-hover) !important; color: var(--fg) !important; }
.tld-filters a.badge-success { background: var(--ok-soft) !important; color: var(--ok) !important; border-color: var(--ok-line) !important; }
.tld-sale-group { background: var(--bg-subtle) !important; color: var(--fg) !important; }
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after { color: var(--fg-faint) !important; }

/* =========================================================================
   PASS 12 — dashboard panels, stat tiles, sidebar spacing, status chips
   ========================================================================= */

/* ---------- dashboard panels: white heading + white list borders ---------- */
.client-home-panels .panel > .panel-heading {
  background-color: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 600 !important;
  padding: 16px 20px !important;
}
.client-home-panels .panel > .list-group {
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  max-height: 240px !important;
}
.client-home-panels .panel > .panel-body { max-height: 240px !important; }
.client-home-panels .panel > .list-group .list-group-item { padding: 12px 20px !important; }
.client-home-panels .panel > .panel-footer { border-top: 1px solid var(--border) !important; background: var(--bg-subtle) !important; }
.client-home-panels .panel small { color: var(--fg-muted) !important; }
.client-home-panels .panel > .panel-heading .panel-title .btn { color: var(--fg) !important; border: 1px solid var(--input) !important; }
.client-home-panels .panel > .panel-heading .panel-title .btn:hover { color: var(--fg) !important; background: var(--bg-hover) !important; }
/* scrollbars inside those scrolling lists */
.client-home-panels .panel > .list-group::-webkit-scrollbar,
.client-home-panels .panel > .panel-body::-webkit-scrollbar { width: 8px; }
.client-home-panels .panel > .list-group::-webkit-scrollbar-thumb,
.client-home-panels .panel > .panel-body::-webkit-scrollbar-thumb { background: #2e2e2e; border-radius: 999px; }

/* ---------- stat tiles ----------
   .tile is itself a Bootstrap column (col-sm-3), so it must keep the grid.
   The card is the <a> inside; the column's padding becomes the gutter. */
.tiles { display: block !important; margin: 0 0 24px 0 !important; }
.tiles .row { display: flex !important; flex-wrap: wrap; margin-left: -8px !important; margin-right: -8px !important; }
.tiles .tile {
  display: flex !important;
  float: none !important;
  position: static !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 8px !important;
  margin-bottom: 16px !important;
}
.tiles .tile:hover { background: transparent !important; }
.tiles .tile > a {
  position: relative;
  flex: 1;
  display: block;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) * 1.4) !important;
  padding: 20px 22px !important;
  text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease;
}
.tiles .tile > a:hover {
  background: var(--bg-subtle) !important;
  border-color: var(--border-strong) !important;
  text-decoration: none !important;
}
.tiles .tile .icon {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  color: var(--fg-faint) !important;
}
.tiles .tile .stat {
  margin-top: 0 !important;
  font-size: 32px !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em;
  color: var(--fg) !important;
}
.tiles .tile .title {
  margin-top: 8px !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg-muted) !important;
}
.tiles .tile .highlight { display: none !important; }

/* ---------- sidebar panels were butting together ----------
   Bootstrap zeroes the margin inside .panel-group; WHMCS sidebars use it. */
.panel-group { margin-bottom: 22px !important; }
.panel-group .panel,
.panel-sidebar,
.sidebar .panel,
.cart-sidebar .panel,
#sidebar .panel { margin-bottom: 18px !important; border-radius: calc(var(--radius) * 1.4) !important; }

/* panel footer: full-bleed inside the panel, no stray radius */
.panel > .panel-footer,
.panel-sidebar > .panel-footer {
  background: var(--bg-subtle) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  color: var(--fg-body) !important;
  padding: 14px 18px !important;
  margin: 0 !important;
}
.panel-sidebar > .panel-heading { background: transparent !important; border-bottom: 1px solid var(--border) !important; }

/* ---------- ticket / service status chips on the dashboard ---------- */
/* dashboard chips only — .label.status and span.label[class*="status"] were
   here too, which re-applied the neutral fill AFTER the colour modifiers and
   is why every status chip rendered grey. */
.client-home-panels .label-default,
.client-home-panels .label:not(.status) {
  background-color: var(--bg-subtle) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-muted) !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 6px !important;
  padding: 3px 10px !important;
  vertical-align: middle;
}
.client-home-panels .label-success, .label.status-active { background-color: var(--ok-soft) !important; border-color: var(--ok-line) !important; color: var(--ok) !important; }
.client-home-panels .label-danger  { background-color: var(--bad-soft) !important; border-color: var(--bad-line) !important; color: var(--bad) !important; }
.client-home-panels .label-warning { background-color: var(--warn-soft) !important; border-color: var(--warn-line) !important; color: var(--warn) !important; }

/* language chooser popover */
.language-popover .popover-content li a { background: transparent !important; color: var(--fg-body) !important; border-radius: 6px; }
.language-popover .popover-content li a:hover { background: var(--bg-hover) !important; color: var(--fg) !important; }

/* rows and separators must run the full width of their panel */
.panel-sidebar, .sidebar .panel, .cart-sidebar .panel { padding: 0 !important; }
.panel > .list-group, .panel > .panel-collapse > .list-group { margin: 0 !important; padding: 0 !important; }
.panel-sidebar .list-group-item,
.sidebar .list-group-item,
.cart-sidebar .list-group-item {
  width: 100% !important;
  margin: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}
.panel-sidebar > .panel-footer,
.sidebar .panel > .panel-footer { margin: 0 !important; width: 100% !important; }

/* =========================================================================
   PASS 13 — page header: title, breadcrumb, then the rule underneath.
   Six put the border on the h1 and pulled the breadcrumb up onto it
   (margin-top: -15px), so the crumbs sat on the line.
   ========================================================================= */
div.header-lined, .header-lined {
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 16px !important;
  margin-bottom: 30px !important;
}
div.header-lined h1, div.header-lined h2,
.header-lined h1, .header-lined h2 {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 12px !important;
}
div.header-lined .breadcrumb, .header-lined .breadcrumb {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 13px !important;
}
div.header-lined h1 small { color: var(--fg-muted) !important; }

/* =========================================================================
   PASS 14 — dark-on-dark text, and one bottom bar instead of two
   ========================================================================= */

/* ---------- text that Six sets to #333/#666 and would vanish on dark ---------- */
.has-success.checkbox label, .has-success.checkbox-inline label,
.has-success.radio label, .has-success.radio-inline label { color: var(--ok) !important; }
.btn.focus, .btn-default.focus, .btn-default.active,
.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover { color: var(--fg) !important; }
.status-accepted { background: var(--ok-soft) !important; color: var(--ok) !important; border-color: var(--ok-line) !important; }
.status-dead, .status-lost { background: var(--bg-subtle) !important; color: var(--fg-muted) !important; border-color: var(--border) !important; }
.ticket-number { color: var(--fg-muted) !important; }
.kb-rate-article { color: var(--fg-body) !important; }
div.credit-card .logo-visa, div.credit-card .logo-amex, div.credit-card .logo-discover { color: var(--fg) !important; }

/* ---------- table footer: a single bar, pagination sits inside it ---------- */
.dataTables_wrapper .dataTables_length {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  width: 100% !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  background-color: var(--bg-subtle) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 calc(var(--radius) * 1.4) calc(var(--radius) * 1.4) !important;
  float: none !important;
}
.dataTables_wrapper .dataTables_paginate {
  position: absolute !important;
  bottom: 0 !important;
  right: 14px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  min-height: 0 !important;
}
/* DataTables emits empty buttons for first/last/ellipsis — hide them */
.dataTables_wrapper .dataTables_paginate .paginate_button:empty,
.dataTables_wrapper .dataTables_paginate a:empty,
.dataTables_wrapper .dataTables_paginate span:empty { display: none !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 34px;
  text-align: center;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .dataTables_wrapper .dataTables_paginate { position: static !important; height: auto !important; padding: 0 18px 14px !important; justify-content: flex-end; }
  .dataTables_wrapper .dataTables_length { border-radius: 0 !important; }
}

/* last two dark-text stragglers */
.text-domain { color: var(--fg) !important; }
.status-transferred.away { background: var(--bg-subtle) !important; color: var(--fg-muted) !important; border-color: var(--border) !important; }

/* every panel keeps its bottom margin, whatever it is nested in */
.panel, .panel-sidebar, .sidebar .panel, .cart-sidebar .panel, #sidebar .panel,
.panel-group .panel { margin-bottom: 20px !important; }

/* =========================================================================
   PASS 15 — status colours across services, invoices, domains, tickets, quotes
   All render as <span class="label status status-{class}">, so they can be
   coloured centrally by meaning: green = good, amber = needs attention,
   red = problem, neutral = closed/ended.
   ========================================================================= */
.label.status, span.status {
  display: inline-block !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background-color: var(--bg-subtle) !important;
  color: var(--fg-muted) !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  padding: 3px 11px !important;
  min-width: 82px;
  text-align: center;
  white-space: nowrap;
}

/* NOTE: the base rule above is .label.status (specificity 0,2,0). A bare
   .status-paid is 0,1,0 and would LOSE to it even with !important, so every
   modifier below is qualified with .status to outrank the base. */

/* good / settled */
.status.status-active, .status.status-completed, .status.status-paid, .status.status-open,
.status.status-accepted, .status.status-delivered, .status.status-valid {
  background-color: var(--ok-soft) !important; border-color: var(--ok-line) !important; color: var(--ok) !important;
}
/* needs attention */
.status.status-pending, .status.status-pendingtransfer, .status.status-pendingregistration,
.status.status-suspended, .status.status-customer-reply, .status.status-onhold, .status.status-on-hold,
.status.status-in-progress, .status.status-inprogress, .status.status-payment-pending,
.status.status-unpaid, .status.status-graceperiod, .status.status-draft {
  background-color: var(--warn-soft) !important; border-color: var(--warn-line) !important; color: var(--warn) !important;
}
/* problem */
.status.status-overdue, .status.status-fraud, .status.status-collections,
.status.status-redemption, .status.status-failed {
  background-color: var(--bad-soft) !important; border-color: var(--bad-line) !important; color: var(--bad) !important;
}
/* ended / archived */
.status.status-cancelled, .status.status-terminated, .status.status-expired,
.status.status-transferred, .status.status-transferredaway, .status.status-closed,
.status.status-refunded, .status.status-answered, .status.status-dead, .status.status-lost {
  background-color: var(--bg-subtle) !important; border-color: var(--border) !important; color: var(--fg-muted) !important;
}
/* WHMCS writes custom ticket status colours inline — leave colour/border to it */
.status.status-custom { background-color: var(--bg-subtle) !important; border-width: 1px !important; border-style: solid !important; }

/* keep the chips tidy inside table cells */
.table > tbody > tr > td > .label.status,
.table-list > tbody > tr > td > .label.status { margin: 0; vertical-align: middle; }

/* ---------- pagination: drop the unlabelled buttons ----------
   DataTables' full_numbers renderer emits first/previous/next/last; WHMCS's
   locale leaves some without a label, which rendered as empty boxes. */
.dataTables_wrapper .dataTables_paginate .paginate_button.first,
.dataTables_wrapper .dataTables_paginate .paginate_button.last,
.dataTables_wrapper .dataTables_paginate .paginate_button:empty,
.dataTables_wrapper .dataTables_paginate a:empty,
.dataTables_wrapper .dataTables_paginate span:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  min-width: 0 !important;
}

/* =========================================================================
   PASS 16 — pagination: whitelist instead of blacklist
   Hiding :empty / .first / .last did not clear the stray boxes, so rather than
   keep guessing what they are, hide every child of .dataTables_paginate and
   re-show only the three shapes DataTables actually needs:
   <a.paginate_button.previous>, <span> (page numbers), <a.paginate_button.next>.
   ========================================================================= */
.dataTables_wrapper .dataTables_paginate > * { display: none !important; }
.dataTables_wrapper .dataTables_paginate > a.paginate_button.previous,
.dataTables_wrapper .dataTables_paginate > a.paginate_button.next,
.dataTables_wrapper .dataTables_paginate > span {
  display: inline-flex !important;
  align-items: center;
}
.dataTables_wrapper .dataTables_paginate > span > a.paginate_button,
.dataTables_wrapper .dataTables_paginate > span > span.paginate_button {
  display: inline-flex !important;
  align-items: center;
}
/* if a second pagination widget is emitted, only keep the first */
.dataTables_wrapper .dataTables_paginate ~ .dataTables_paginate { display: none !important; }
/* and nothing empty ever gets a box */
.dataTables_wrapper .dataTables_paginate .paginate_button:empty { display: none !important; }

/* SSL status icons: the files are 64x64 (@2x) but are pinned to 32x32 on screen.
   A 32px bitmap at 32 CSS px gets upscaled by HiDPI displays and looks soft; at
   exactly half its natural size it maps 1:1 to device pixels on retina and halves
   cleanly elsewhere. Any fractional size (e.g. 24px) reintroduces the blur. */
img[src*="/ssl/ssl-"] {
  width: 32px !important;
  height: 32px !important;
  vertical-align: middle;
  image-rendering: auto;
}

/* =========================================================================
   Input groups — join the halves back together.
   .form-control and .input-group-addon both carry a blanket 8px radius above,
   which rounds all four corners of each half and makes an addon look like a
   separate pill. Inside an .input-group the radius belongs on the outer edges
   only, and the shared border must not double up.
   ========================================================================= */
.input-group { border-collapse: separate; }

/* square everything inside, then round only the outer edges */
.input-group > .form-control,
.input-group > .input-group-addon,
.input-group > .input-group-btn > .btn,
.input-group .form-control,
.input-group .input-group-addon { border-radius: 0 !important; }

.input-group > .form-control:first-child,
.input-group > .input-group-addon:first-child,
.input-group > .input-group-btn:first-child > .btn {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}
.input-group > .form-control:last-child,
.input-group > .input-group-addon:last-child,
.input-group > .input-group-btn:last-child > .btn {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

/* one shared 1px line between the halves instead of two touching borders */
.input-group > .input-group-addon:last-child,
.input-group > .input-group-btn:last-child > .btn { border-left: 0 !important; }
.input-group > .input-group-addon:first-child { border-right: 0 !important; }

/* match the input's height and vertical rhythm */
.input-group-addon {
  height: 38px;
  padding: 0 12px !important;
  font-size: 14px;
  line-height: 36px;
  white-space: nowrap;
}
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon { height: 46px; font-size: 15px; line-height: 44px; }
.input-group-lg > .form-control:first-child,
.input-group-lg > .input-group-addon:first-child { border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; }
.input-group-lg > .form-control:last-child,
.input-group-lg > .input-group-addon:last-child { border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; }

/* the focus ring must not be clipped by the neighbouring cell */
.input-group .form-control:focus { position: relative; z-index: 3; }