/* GENERATED from twohost/css/custom.css by whmcs/theme/build-rtl.mjs — do not edit by hand */
/* =====================================================================
   2-Host — WHMCS child theme (parent: twenty-one)
   Disciplined, product-grade redesign: near-monochrome with lime as a
   precise accent, monospace numerals (the "engineered" feel, matching the
   marketing site's spec font), borders over glows, tight spacing. The shell
   is rebuilt in header/footer/clientareahome/login/etc.
   ===================================================================== */

/* Fonts are self-hosted (fonts/, latin + latin-ext, OFL licensed) so no visitor
   IP address goes to Google before cookie consent. Arabic falls back to system fonts. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/geist-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/geist-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/geist-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/geist-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('../fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --th-bg: #f7f7f4;
  --th-surface: #ffffff;
  --th-ink: #111210;
  --th-ink-soft: #44453f;
  --th-muted: #6b6c65;           /* 5.0:1 on --th-bg, 5.3:1 on white (was #8a8b84 = 3.3:1) */
  --th-line: #e7e7e1;
  --th-line-strong: #d6d6cf;
  --th-accent: #c6f24e;          /* lime — used sparingly */
  --th-accent-fg: #0a0f02;
  --th-accent-ink: #4f6b07;
  --th-accent-hover: #bcec3c;
  --th-success: #15803d;  --th-success-bg: #dcf5d8;
  --th-warning: #b45309;  --th-warning-bg: #fbedc8;
  --th-danger: #b3261e;   --th-danger-bg: #f7dedb;
  --th-info: #1e4e8c;     --th-info-bg: #e4edf8;
  /* alert borders + body text: darker than the pill colors so long copy
     stays >= 4.5:1 on the tinted backgrounds */
  --th-success-line: #b4e0ad; --th-success-text: #14532d;
  --th-warning-line: #efd490; --th-warning-text: #7c3a06;
  --th-danger-line: #ecbcb6;  --th-danger-text: #8f1d17;
  --th-info-line: #bcd0ea;    --th-info-text: #1a4278;
  --th-hover: #f3f3ef;           /* control/nav hover surface */
  --th-row-hover: #fafaf8;       /* table row hover */
  --th-muted-bg: #ecece7;        /* muted pills/badges */
  --th-ink-contrast: #ffffff;    /* text on ink-filled surfaces */
  --th-glass: rgba(247,247,244,.8);  /* topbar blur backdrop */
  --th-focus-ring: rgba(17,18,16,.06);
  --th-radius: 14px;
  --th-radius-sm: 9px;
  --th-shadow: 0 1px 0 rgba(17,18,16,.03), 0 10px 26px -16px rgba(17,18,16,.10);
  --th-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --th-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --th-display: 'Space Grotesk', var(--th-font);
  --th-rail-w: 256px;
}

* { box-sizing: border-box; }
body.th-body, body.primary-bg-color {
  background: var(--th-bg) !important; color: var(--th-ink);
  font-family: var(--th-font); -webkit-font-smoothing: antialiased; line-height: 1.5;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { color: var(--th-ink); letter-spacing: -0.01em; }
a { color: var(--th-accent-ink); text-decoration: none; }
a:hover { color: var(--th-ink); }
.text-muted { color: var(--th-muted) !important; }
::selection { background: var(--th-accent); color: var(--th-accent-fg); }

/* ===================== APP SHELL ===================== */
.th-shell { display: flex; min-height: 100vh; }

.th-rail {
  flex: 0 0 var(--th-rail-w); width: var(--th-rail-w);
  background: var(--th-surface); border-left: 1px solid var(--th-line);
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; padding: 18px 12px; z-index: 1040;
}
.th-rail-brand { display: block; padding: 6px 12px 22px; }
.th-rail-brand-text { font-family: var(--th-display); font-weight: 700; font-size: 1.2rem; color: var(--th-ink); }
.th-rail-nav { flex: 1 1 auto; overflow-y: auto; }
.th-rail-nav .navbar-nav, .th-rail-foot .navbar-nav { flex-direction: column; width: 100%; list-style: none; padding: 0; margin: 0; }
.th-rail .navbar-nav > li > a {
  display: flex; align-items: center; gap: 11px; padding: 8px 11px; margin: 1px 0;
  border-radius: var(--th-radius-sm); color: var(--th-ink-soft); font-size: 14px; font-weight: 500;
  white-space: nowrap; text-decoration: none;
}
.th-rail .navbar-nav > li > a:hover { background: var(--th-hover); color: var(--th-ink); }
.th-rail .navbar-nav > li.active > a, .th-rail .navbar-nav > li.current > a {
  background: var(--th-ink); color: var(--th-ink-contrast); font-weight: 600;
}
.th-rail .navbar-nav > li > a i { width: 16px; text-align: center; font-size: 13px; color: var(--th-muted); }
.th-rail .navbar-nav > li.active > a i, .th-rail .navbar-nav > li.current > a i { color: var(--th-ink-contrast); }
.th-rail .dropdown-menu { position: static !important; float: none; transform: none !important; border: 0; box-shadow: none; background: transparent; padding: 0 1.5rem 0 0; margin: 0; }
.th-rail .dropdown-menu .dropdown-item { padding: 6px 8px; border-radius: 7px; color: var(--th-muted); font-size: 13px; white-space: normal; }
.th-rail .dropdown-menu .dropdown-item:hover { background: var(--th-hover); color: var(--th-ink); }
.th-rail .collapsable-dropdown { display: none !important; }
.th-rail-foot { border-top: 1px solid var(--th-line); padding-top: 8px; margin-top: 8px; }

.th-workspace { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.th-topbar {
  display: flex; align-items: center; gap: 16px; padding: 13px 28px;
  border-bottom: 1px solid var(--th-line); background: var(--th-glass);
  backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 1030;
}
.th-topbar-title {
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.th-topbar-actions { margin-right: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
/* icon buttons: 40px tap targets (WCAG 2.5.8), hover chip instead of bare glyph */
.th-topbar-icon, .th-cart {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; border-radius: 10px;
  color: var(--th-ink-soft); font-size: 15px;
}
.th-topbar-icon:hover, .th-cart:hover { color: var(--th-ink); background: var(--th-hover); }
.th-cart, .th-topbar-icon { position: relative; }
button.th-topbar-icon { border: 0; background: transparent; padding: 0; cursor: pointer; }
.th-notif-badge {
  position: absolute; top: 4px; left: 3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--th-accent); color: var(--th-accent-fg);
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; pointer-events: none;
}
.th-topbar-account { display: flex; align-items: center; gap: 2px; }
/* admin masquerade flag + return link */
.th-admin-bar { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 6px; }
.th-admin-flag, .th-return-admin {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 11px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.th-admin-flag { color: var(--th-warning-text); background: var(--th-warning-bg); border: 1px solid var(--th-warning-line); }
.th-return-admin { color: var(--th-ink-soft); border: 1px solid var(--th-line-strong); }
.th-return-admin:hover { color: var(--th-ink); border-color: var(--th-ink); }
/* topbar breadcrumb (nav.th-topbar-title.th-breadcrumb > ol.breadcrumb) */
.th-breadcrumb .breadcrumb { display: flex; flex-wrap: nowrap; align-items: center; min-width: 0; margin: 0; padding: 0; background: transparent; border-radius: 0; font-size: 13.5px; }
.th-breadcrumb .breadcrumb-item { white-space: nowrap; color: var(--th-muted); font-weight: 500; }
.th-breadcrumb .breadcrumb-item a { color: var(--th-muted); }
.th-breadcrumb .breadcrumb-item a:hover { color: var(--th-ink); }
.th-breadcrumb .breadcrumb-item.active { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--th-ink); font-weight: 600; }
.th-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--th-line-strong); }
@media (max-width: 575.98px) { .th-breadcrumb .breadcrumb-item:not(.active) { display: none; } }
.th-cart-badge { background: var(--th-accent); color: var(--th-accent-fg); border-radius: 999px; font-size: 10px; font-weight: 700; padding: 0 5px; margin-right: 2px; vertical-align: top; }
.th-rail-toggle {
  display: none; align-items: center; justify-content: center; min-width: 40px; min-height: 40px;
  margin-right: -8px; border-radius: 10px; background: transparent; border: 0; font-size: 18px; color: var(--th-ink);
}
.th-topbar-user { display: flex; align-items: center; gap: 9px; color: var(--th-ink); padding: 4px 4px 4px 8px; border-radius: 999px; }
.th-topbar-user:hover { background: var(--th-hover); color: var(--th-ink); }
.th-topbar-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--th-ink); color: var(--th-ink-contrast); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.th-topbar-name { font-weight: 600; font-size: 13px; }

.th-main { flex: 1 1 auto; padding: 30px 40px 60px; }
.th-container { max-width: 1180px; padding-right: 0; padding-left: 0; }

.th-rail-backdrop { display: none; }
@media (max-width: 991.98px) {
  .th-rail { position: fixed; top: 0; right: 0; transform: translateX(100%); transition: transform .22s ease; box-shadow: var(--th-shadow); }
  body.th-rail-open .th-rail { transform: translateX(0); }
  body.th-rail-open .th-rail-backdrop { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(17,18,16,.4); }
  .th-rail-toggle { display: inline-flex; }
  .th-main { padding: 18px; }
  .th-topbar { padding: 8px 14px; gap: 8px; }
  .th-footer { padding: 12px 18px; }
  .th-topbar-name { display: none; }
}
/* short viewports (landscape phones, small laptops): drop the skyline so the
   nav + footer links stay reachable; the rail itself scrolls as a fallback */
@media (max-height: 700px) { .th-rail-scene { display: none; } }

/* ===================== COMPONENTS ===================== */
/* No overflow:hidden on .card/.panel — it clipped dropdowns, popovers and
   select menus inside cards. Bootstrap already rounds first/last children.
   Only the sidebar list (hover chips touch the corners) keeps clipping. */
.card, .panel, .card-sidebar {
  background: var(--th-surface); border: 1px solid var(--th-line);
  border-radius: var(--th-radius); box-shadow: var(--th-shadow);
}
.card:hover, .panel:hover { border-color: var(--th-line-strong); }
.card-header, .panel-heading { background: transparent; border-bottom: 1px solid var(--th-line); padding: 16px 20px; font-weight: 600; font-size: 14px; }
.card-body { padding: 20px; }
.card-title { font-size: 15px; font-weight: 600; }

.card-sidebar { overflow: hidden; }
.card-sidebar .card-header { font-size: 13px; }
.card-sidebar .list-group { padding: 4px 0; }
.card-sidebar .list-group-item { border: 0 !important; border-radius: 8px !important; margin: 1px 8px !important; padding: 8px 11px; color: var(--th-ink-soft); font-size: 14px; }
.card-sidebar .list-group-item:hover { background: var(--th-hover); color: var(--th-ink); }
.card-sidebar .list-group-item.active { background: var(--th-ink); color: var(--th-ink-contrast); font-weight: 600; }

[class*="card-accent-"] { background: var(--th-surface) !important; border: 1px solid var(--th-line) !important; border-radius: var(--th-radius) !important; color: var(--th-ink) !important; box-shadow: var(--th-shadow); transition: border-color .15s; }
[class*="card-accent-"]:hover { border-color: var(--th-ink) !important; }
[class*="card-accent-"] i { color: var(--th-ink) !important; }

.table { color: var(--th-ink); }
.table thead th { border-bottom: 1px solid var(--th-line); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--th-muted); font-weight: 600; padding: 12px 14px; }
.table td, .table th { border-top: 1px solid var(--th-line); padding: 13px 14px; font-size: 14px; }
.table-hover tbody tr:hover { background: var(--th-row-hover); }

.btn { border-radius: var(--th-radius-sm); font-weight: 600; padding: 8px 15px; font-size: 14px; border: 1px solid transparent; }
.btn-primary, .btn-success, .btn-order-now { background: var(--th-accent) !important; border-color: var(--th-accent) !important; color: var(--th-accent-fg) !important; }
.btn-primary:hover, .btn-success:hover, .btn-order-now:hover, .show > .btn-primary.dropdown-toggle { background: var(--th-accent-hover) !important; border-color: var(--th-accent-hover) !important; color: var(--th-accent-fg) !important; }
.btn-primary:focus { box-shadow: 0 0 0 3px rgba(198,242,78,.4) !important; }
.btn-outline-primary { color: var(--th-ink) !important; border-color: var(--th-line-strong) !important; background: var(--th-surface) !important; }
.btn-outline-primary:hover { background: var(--th-hover) !important; border-color: var(--th-ink) !important; color: var(--th-ink) !important; }
.btn-secondary, .btn-default { background: var(--th-surface); border-color: var(--th-line); color: var(--th-ink); }
.btn-secondary:hover, .btn-default:hover { background: var(--th-hover); border-color: var(--th-line-strong); color: var(--th-ink); }
.btn-info, .btn-warning { background: var(--th-ink) !important; border-color: var(--th-ink) !important; color: var(--th-ink-contrast) !important; }
.btn-group .btn-default { background: var(--th-surface); border: 1px solid var(--th-line); color: var(--th-ink); font-weight: 500; }
.btn-group .btn-default:hover { background: var(--th-hover); border-color: var(--th-line-strong); }
.btn-group .btn-default.active, .setBulkAction.active { background: var(--th-ink) !important; border-color: var(--th-ink) !important; color: var(--th-ink-contrast) !important; }

.text-primary { color: var(--th-accent-ink) !important; }
.btn-link { color: var(--th-accent-ink); }
.btn-link:hover { color: var(--th-ink); }
.bg-primary { background: var(--th-ink) !important; color: var(--th-ink-contrast) !important; }
.badge-primary { background: var(--th-ink); color: var(--th-ink-contrast); }
.badge, .label, .status, .invoice-status { border-radius: 999px; font-weight: 600; font-size: 11px; letter-spacing: .03em; padding: 4px 10px; text-transform: uppercase; }
.badge-success, .label-success { background: var(--th-success-bg) !important; color: var(--th-success) !important; }
.badge-danger, .label-danger { background: var(--th-danger-bg) !important; color: var(--th-danger) !important; }
.badge-warning, .label-warning, .badge-info, .label-info { background: var(--th-warning-bg) !important; color: var(--th-warning) !important; }
.list-group-item.active { background: var(--th-ink); border-color: var(--th-ink); color: var(--th-ink-contrast); }
.page-item.active .page-link { background: var(--th-ink); border-color: var(--th-ink); color: var(--th-ink-contrast); }
.page-link { color: var(--th-ink-soft); }
.nav-pills .nav-link.active { background: var(--th-ink); color: var(--th-ink-contrast); }
.progress-bar { background: var(--th-accent); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--th-ink) !important; border-color: var(--th-ink) !important; }

.form-control, .custom-select { border-radius: var(--th-radius-sm); border-color: var(--th-line); padding: 9px 12px; height: auto; font-size: 14px; color: var(--th-ink); }
.form-control:focus, .custom-select:focus { border-color: var(--th-ink) !important; box-shadow: 0 0 0 3px var(--th-focus-ring) !important; }
.form-control.is-invalid, .has-error .form-control, .was-validated .form-control:invalid { border-color: var(--th-danger) !important; }
.form-control.is-invalid:focus, .has-error .form-control:focus { box-shadow: 0 0 0 3px var(--th-danger-bg) !important; }
/* Field + button on one line only where the design needs it (auth/password
   rows with show/generate buttons). Stock groups keep Bootstrap's wrapping. */
.th-auth-form .input-group, .th-auth-narrow .input-group, .th-register .input-group, .th-inv-credit-controls .input-group { flex-wrap: nowrap; }
.input-group > .form-control { min-width: 0; }
/* Native radios/checkboxes in the brand color (iCheck skins are below). */
input[type="radio"], input[type="checkbox"] { accent-color: var(--th-accent-ink); }

/* Alerts — neutral base (secondary/light/dark), tinted per type. */
.alert { border-radius: var(--th-radius-sm); border: 1px solid var(--th-line); background: var(--th-surface); color: var(--th-ink); }
.alert-success { background: var(--th-success-bg); border-color: var(--th-success-line); color: var(--th-success-text); }
.alert-warning { background: var(--th-warning-bg); border-color: var(--th-warning-line); color: var(--th-warning-text); }
.alert-danger  { background: var(--th-danger-bg);  border-color: var(--th-danger-line);  color: var(--th-danger-text); }
.alert-info    { background: var(--th-info-bg);    border-color: var(--th-info-line);    color: var(--th-info-text); }
.alert a:not(.btn), .alert .alert-link { color: inherit; font-weight: 600; text-decoration: underline; }
.alert hr { border-top-color: currentColor; opacity: .2; }

/* iCheck skins (stock: blue/green sprite) → drawn brand controls. The
   html prefix outranks the cart's all.css, which loads after this file. */
html .iradio_square-blue, html .icheckbox_square-blue, html .icheckbox_square-green {
  position: relative; width: 18px; height: 18px; background: var(--th-surface) none;
  border: 1.5px solid var(--th-line-strong); border-radius: 5px; vertical-align: -3px;
  transition: border-color .12s, background-color .12s;
}
html .iradio_square-blue { border-radius: 50%; }
html .iradio_square-blue.hover, html .icheckbox_square-blue.hover, html .icheckbox_square-green.hover { border-color: var(--th-ink-soft); }
html .iradio_square-blue.checked, html .icheckbox_square-blue.checked, html .icheckbox_square-green.checked { background-color: var(--th-ink); border-color: var(--th-ink); }
html .iradio_square-blue.checked::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--th-accent); pointer-events: none;
}
/* a checkmark is not mirrored in RTL */
html .icheckbox_square-blue.checked::after, html .icheckbox_square-green.checked::after {
  content: ''; position: absolute; left: 4.5px; top: 1px; width: 5px; height: 9px; pointer-events: none;
  border: solid var(--th-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
html .iradio_square-blue.disabled, html .icheckbox_square-blue.disabled, html .icheckbox_square-green.disabled { opacity: .45; }

/* ===================== DASHBOARD ===================== */
.th-dash { display: flex; flex-direction: column; gap: 22px; }
.th-eyebrow { font-family: var(--th-mono); text-transform: uppercase; letter-spacing: .09em; font-size: 11px; color: var(--th-muted); font-weight: 500; }
.th-dash-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--th-line); }
.th-dash-title { font-family: var(--th-display); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; margin: 8px 0 5px; }
.th-dash-sub { color: var(--th-ink-soft); margin: 0; font-size: 15px; }
.th-dash-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.th-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.th-stat { display: flex; flex-direction: column; gap: 5px; padding: 18px 20px; background: var(--th-surface); border: 1px solid var(--th-line); border-radius: var(--th-radius); color: var(--th-ink); transition: border-color .15s, transform .15s; }
.th-stat:hover { border-color: var(--th-ink); transform: translateY(-1px); color: var(--th-ink); }
.th-stat-icon { display: none; }   /* keep it clean — no badge */
.th-stat-label { font-size: 11.5px; color: var(--th-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.th-stat-value { font-family: var(--th-mono); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.th-stat-meta { font-family: var(--th-mono); font-size: 12px; color: var(--th-muted); }

.th-infra { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 12px 18px; background: var(--th-surface); border: 1px solid var(--th-line); border-radius: var(--th-radius-sm); font-size: 12.5px; color: var(--th-ink-soft); font-family: var(--th-mono); }
.th-infra-item { display: inline-flex; align-items: center; gap: 7px; }
.th-infra-item i { color: var(--th-muted); }
.th-infra-sep { width: 1px; height: 13px; background: var(--th-line); }
.th-infra-link { margin-right: auto; color: var(--th-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

.th-dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.th-panel { background: var(--th-surface); border: 1px solid var(--th-line); border-radius: var(--th-radius); overflow: hidden; }
.th-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--th-line); }
.th-panel-head h2 { font-size: 14px; font-weight: 600; margin: 0; }
.th-panel-head a { font-size: 13px; color: var(--th-ink-soft); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.th-panel-head a i { transition: transform .15s; }
.th-panel-head a:hover { color: var(--th-ink); }
.th-panel-head a:hover i { transform: translateX(-2px); }
.th-dash-list { list-style: none; margin: 0; padding: 0; }
.th-dash-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--th-line); }
.th-dash-list li:last-child { border-bottom: 0; }
.th-dash-list-title { display: block; font-weight: 600; font-size: 14px; color: inherit; text-decoration: none; }
a.th-dash-list-title:hover { color: var(--th-accent-ink); text-decoration: none; }
.th-dash-list-meta { display: block; font-family: var(--th-mono); font-size: 12px; color: var(--th-muted); margin-top: 2px; }
.th-pill { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.th-pill-active { background: var(--th-success-bg); color: var(--th-success); }
.th-pill-pending { background: var(--th-warning-bg); color: var(--th-warning); }
.th-pill-suspended, .th-pill-terminated, .th-pill-cancelled, .th-pill-fraud { background: var(--th-danger-bg); color: var(--th-danger); }
.th-balance { padding: 24px 20px; text-align: center; }
.th-balance-label { display: block; color: var(--th-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.th-balance-value { display: block; font-family: var(--th-mono); font-size: 32px; font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 14px; }
.th-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 20px; color: var(--th-muted); }
.th-empty p { margin: 0; font-size: 14px; }
.th-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--th-hover); color: var(--th-muted); font-size: 17px; }

@media (max-width: 991.98px) { .th-stat-grid { grid-template-columns: repeat(2,1fr); } .th-dash-cols { grid-template-columns: 1fr; } .th-dash-title { font-size: 24px; } }

/* ===================== IDENTITY (subtle) ===================== */
.th-rail-scene { margin-top: auto; padding-top: 14px; }
.th-rail-status { display: flex; align-items: center; gap: 8px; font-family: var(--th-mono); font-size: 11px; color: var(--th-muted); padding: 0 11px 6px; }
.th-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--th-success); flex: 0 0 7px; animation: thPulse 2.6s ease-in-out infinite; }
@keyframes thPulse { 0% { box-shadow: 0 0 0 0 rgba(21,128,61,.45); } 70% { box-shadow: 0 0 0 6px rgba(21,128,61,0); } 100% { box-shadow: 0 0 0 0 rgba(21,128,61,0); } }
.th-rail-skyline { display: block; width: 100%; height: auto; }
.th-sky-buildings rect, .th-sky-buildings path { fill: var(--th-ink); opacity: .07; }
.th-sky-globe { fill: none; stroke: var(--th-muted); stroke-width: 1.3; opacity: .5; stroke-linecap: round; }
.th-sky-accent { fill: var(--th-accent-ink); }
.th-sky-windows rect { fill: var(--th-accent); }
.th-sky-water { stroke: var(--th-line); stroke-width: 1; }
.th-rail-place { display: flex; align-items: center; gap: 6px; font-family: var(--th-mono); font-size: 10.5px; color: var(--th-muted); padding: 2px 11px 4px; }
.th-rail-place i { color: var(--th-muted); font-size: 10px; }
@media (prefers-reduced-motion: reduce) { .th-status-dot { animation: none; } }

/* ===================== FOOTER ===================== */
.th-footer { border-top: 1px solid var(--th-line); padding: 18px 40px; }
.th-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.th-copyright { color: var(--th-muted); font-size: 13px; margin: 0; }
.th-footer-links { display: inline-flex; flex-wrap: wrap; align-items: center; }
.th-footer-links a, .th-locale-btn { display: inline-flex; align-items: center; min-height: 40px; color: var(--th-ink-soft); font-size: 13px; padding: 0 9px; background: transparent; border: 0; }
.th-footer-links a:hover, .th-locale-btn:hover { color: var(--th-ink); }
/* Google attribution that replaces the hidden reCAPTCHA badge (footer.tpl) */
.th-recaptcha-note { margin: 6px 0 0; font-size: 11.5px; color: var(--th-muted); }
.th-recaptcha-note a { color: var(--th-ink-soft); text-decoration: underline; }

/* ===================== AUTH (login / register / reset) ===================== */
.th-auth { display: flex; align-items: center; justify-content: center; min-height: 74vh; padding: 1rem; }
.th-auth-card { display: grid; grid-template-columns: 1.05fr 1fr; width: 100%; max-width: 920px; background: var(--th-surface); border: 1px solid var(--th-line); border-radius: 18px; overflow: hidden; box-shadow: var(--th-shadow); }
/* Brand panel is always dark (fixed colors, not --th-ink, which flips to
   near-white in dark mode). Re-pinning --th-ink-contrast keeps the children
   below white in both themes. */
.th-auth-brand { --th-ink-contrast: #ffffff; position: relative; overflow: hidden; background: #111210; color: #ffffff; padding: 44px 40px; display: flex; align-items: center; }
html[data-theme='dark'] .th-auth-brand { border-left: 1px solid var(--th-line); }
.th-auth-brand::before { content: ''; position: absolute; bottom: -25%; left: -18%; width: 70%; height: 70%; background: radial-gradient(circle, rgba(198,242,78,.28), transparent 68%); }
.th-auth-brand-inner { position: relative; z-index: 1; }
.th-auth-logo { font-family: var(--th-display); font-weight: 700; font-size: 22px; color: var(--th-accent); letter-spacing: -0.02em; }
.th-auth-tagline { font-family: var(--th-display); font-weight: 700; font-size: 28px; line-height: 1.08; letter-spacing: -0.03em; margin: 20px 0; color: var(--th-ink-contrast); }
.th-auth-points { list-style: none; padding: 0; margin: 0; }
.th-auth-points li { display: flex; align-items: center; gap: 9px; margin: 11px 0; color: var(--th-ink-contrast); opacity: .8; font-size: 14px; }
.th-auth-points i { color: var(--th-accent); }
.th-auth-form { padding: 44px 40px; display: flex; flex-direction: column; justify-content: flex-start; }
.th-auth-title { font-family: var(--th-display); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; margin: 0; }
.th-auth-sub { color: var(--th-muted); margin: 5px 0 26px; font-size: 14px; }
.th-auth-form .form-group { margin-bottom: 16px; }
.th-auth-form label { font-weight: 500; font-size: 13px; }
.th-auth-form .input-group-text { background: var(--th-bg); border-color: var(--th-line); color: var(--th-muted); }
.th-auth-submit { margin-top: 8px; height: 46px; font-size: 15px; }
.th-auth-remember { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--th-muted); font-size: 13px; }
.th-auth-divider { display: flex; align-items: center; gap: 13px; margin: 18px 0; color: var(--th-muted); font-size: 12px; }
.th-auth-divider::before, .th-auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--th-line); }
.th-auth-linked .btn, .th-auth-linked a.btn { width: 100%; justify-content: center; }
.th-auth-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--th-line); font-size: 13px; color: var(--th-muted); }
.th-auth-foot a { color: var(--th-ink); font-weight: 600; margin-right: 4px; }
@media (max-width: 767.98px) { .th-auth-card { grid-template-columns: 1fr; max-width: 440px; } .th-auth-brand { display: none; } .th-auth-form { padding: 32px 26px; } }

/* register — branded hero over cards */
.th-register { max-width: 820px; margin: 0 auto; }
.th-register-hero { text-align: center; margin-bottom: 30px; }
.th-register-title { font-family: var(--th-display); font-size: 28px; font-weight: 700; letter-spacing: -0.03em; margin: 7px 0 5px; }
.th-register-sub { color: var(--th-muted); margin: 0; font-size: 15px; }
.th-register .card { margin-bottom: 16px; }
.th-register .card-title { font-size: 15px; margin-bottom: 18px; }
.th-register .btn-primary { min-width: 220px; }
.th-register .prepend-icon { position: relative; }
.th-register .prepend-icon .field-icon { position: absolute; right: 0; top: 0; bottom: 0; width: 2.7rem; margin: 0; display: flex; align-items: center; justify-content: center; color: var(--th-muted); pointer-events: none; z-index: 3; }
.th-register .prepend-icon .field { padding-right: 2.7rem; }

/* password reset — narrow card */
.th-auth-narrow { width: 100%; max-width: 440px; background: var(--th-surface); border: 1px solid var(--th-line); border-radius: 18px; box-shadow: var(--th-shadow); padding: 36px 32px; }
.th-auth-narrow-brand { margin-bottom: 16px; }
.th-auth-narrow-brand .th-auth-logo { color: var(--th-ink); }
.th-auth-narrow h3, .th-auth-narrow .h3, .th-auth-narrow h6 { font-family: var(--th-display); font-weight: 700; letter-spacing: -0.02em; }
.th-auth-narrow-lead, .th-auth-narrow-msg { color: var(--th-muted); }
.th-auth-narrow .btn-block { margin-top: 10px; }
.th-auth-narrow-foot { margin-top: 22px; text-align: center; font-size: 13px; }
.th-auth-narrow-foot a { color: var(--th-muted); }
.th-auth-narrow-foot a:hover { color: var(--th-ink); }

/* ===================== LIST PAGES ===================== */
.dataTables_wrapper, .table-container { background: var(--th-surface); border: 1px solid var(--th-line); border-radius: var(--th-radius); box-shadow: var(--th-shadow); padding: 14px 18px; }
/* DataTables renders its wrapper inside .table-container — frame only the
   outer one (no card inside a card). */
.table-container .dataTables_wrapper { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.dataTables_wrapper::after { content: ''; display: table; clear: both; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid var(--th-line); border-radius: var(--th-radius-sm); }
/* "Show [10] entries": keep label + select on one line, room for the caret */
.dataTables_wrapper .dataTables_length { padding-top: 8px; }
.dataTables_wrapper .dataTables_length label { display: inline-flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; font-size: 13px; color: var(--th-ink-soft); }
.dataTables_wrapper .dataTables_length select { width: auto !important; min-width: 74px; height: auto; padding: 6px 10px 6px 28px; font-size: 13px; }
.dataTables_wrapper .dataTables_info { font-size: 13px; color: var(--th-muted); }
@media (max-width: 767.98px) {
  .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_length { float: none !important; text-align: center; }
  div.dataTables_wrapper div.dataTables_paginate { white-space: normal; margin-top: 10px; }
  div.dataTables_wrapper div.dataTables_paginate ul.pagination { flex-wrap: wrap; justify-content: center !important; white-space: normal; gap: 4px 0; }
  .dataTables_wrapper .dataTables_length label { justify-content: center; }
}
/* Domain pricing (/domain/pricing): the stock .overflow-auto scrolls the
   whole container, so the pager/length controls scroll off-screen with the
   table. Scroll only the table block (DataTables dom: <"listtable"fit>pl). */
.domain-pricing .table-container.overflow-auto { overflow: visible !important; }
.domain-pricing .dataTables_wrapper .listtable { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.domain-pricing #tableDomainPricing td, .domain-pricing #tableDomainPricing th { white-space: nowrap; }
@media (max-width: 767.98px) { .domain-pricing .table-container { padding: 10px 12px; } }

/* order form icons + price
   Inline Streamline/FA-svg icons pasted into product & promo descriptions
   render oversized. Was `#main-body svg` (capped every SVG on every page,
   incl. charts and module UIs) — now limited to admin-authored copy. */
#main-body :is(.product-desc, .product-info, .products .product, .mc-promo, .mc-promo-manage, .mc-promo-login, .addon-promo-container) svg { max-width: 34px !important; max-height: 34px !important; height: auto !important; }
#order-standard_cart i[class*="fa-"], #order-standard_cart .list-group-item i { font-size: 1.05rem !important; width: auto !important; height: auto !important; }
.product-pricing .price, .price, .font-size-36 { font-family: var(--th-mono); font-weight: 600; color: var(--th-ink) !important; }

/* hide WHMCS "Powered by"
   TODO(licensing): WHMCS's licence only permits removing the "Powered by
   WHMCompleteSolution" line with the paid Branding Removal add-on. Confirm
   the add-on is active on this licence, or drop this rule (and the matching
   one in twohost_cart/css/custom.css). Behavior intentionally unchanged. */
p:has(a[href*="whmcs.com"]), p:has(a[href*="whmcompletesolution"]) { display: none !important; }
/* reCAPTCHA v3/invisible badge overlapped the footer links on every page.
   Hiding it is allowed only with Google's attribution text shown near the
   form/footer — footer.tpl carries that text. */
.grecaptcha-badge { visibility: hidden !important; }

/* ===================== INVOICE (viewinvoice.tpl) =====================
   Standalone document page. The money moment — same discipline as the rest:
   white document on the warm bg, 1px borders, mono for every figure. */
.th-inv-page { background: var(--th-bg); color: var(--th-ink); font-family: var(--th-font); -webkit-font-smoothing: antialiased; line-height: 1.5; }
.th-inv-wrap { max-width: 860px; margin: 0 auto; padding: 44px 20px 60px; }
.th-inv-doc {
  background: var(--th-surface); border: 1px solid var(--th-line);
  border-radius: var(--th-radius); box-shadow: var(--th-shadow);
  padding: 44px 48px;
}
.th-inv-mono { font-family: var(--th-mono); }
.th-inv-eyebrow { font-family: var(--th-mono); text-transform: uppercase; letter-spacing: .09em; font-size: 11px; color: var(--th-muted); font-weight: 500; margin-bottom: 6px; }

/* header */
.th-inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--th-line); margin-bottom: 28px; }
.th-inv-logo { max-height: 30px; width: auto; display: block; margin-bottom: 22px; }
.th-inv-company { font-family: var(--th-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 18px; }
.th-inv-title { font-family: var(--th-display); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin: 0; }
.th-inv-state { text-align: left; flex-shrink: 0; }
.th-inv-pill { display: inline-block; border-radius: 999px; font-weight: 600; font-size: 11px; letter-spacing: .04em; padding: 5px 13px; text-transform: uppercase; }
.th-inv-pill--success { background: var(--th-success-bg); color: var(--th-success); }
.th-inv-pill--warning { background: var(--th-warning-bg); color: var(--th-warning); }
.th-inv-pill--danger { background: var(--th-danger-bg); color: var(--th-danger); }
.th-inv-pill--muted { background: var(--th-muted-bg); color: var(--th-ink-soft); }

/* meta table (faktura-style: labels left, values right) */
.th-inv-metatable { margin-top: 14px; margin-right: auto; border-collapse: collapse; }
.th-inv-metatable td { padding: 4px 26px 4px 0; font-size: 13px; text-align: left; vertical-align: middle; }
.th-inv-metatable td:first-child { color: var(--th-muted); font-size: 11px; font-family: var(--th-mono); text-transform: uppercase; letter-spacing: .07em; padding-right: 0; }
.th-inv-metatable td:last-child { color: var(--th-ink); }

/* invoiced-to */
.th-inv-parties { margin-bottom: 30px; }
.th-inv-address { font-style: normal; font-size: 13.5px; color: var(--th-ink-soft); line-height: 1.65; margin: 0; }
.th-inv-gateway { display: inline-block; }
.th-inv-gateway .custom-select { font-size: 13px; padding: 4px 9px 4px 26px; width: auto; height: auto; }

/* payment box — Bankgiro + balance + due date + pay online */
.th-inv-paybox {
  display: flex; align-items: center; gap: 34px; flex-wrap: wrap;
  border: 1px solid var(--th-line-strong); border-radius: var(--th-radius-sm);
  padding: 18px 22px; margin: 26px 0 4px; background: var(--th-bg);
}
.th-inv-paybox-value { font-size: 19px; font-weight: 600; color: var(--th-ink); letter-spacing: -0.01em; margin-top: 2px; }
.th-inv-paybox-action { margin-right: auto; }
.th-inv-paybox-action .btn, .th-inv-paybox-action input[type="submit"], .th-inv-paybox-action button {
  background: var(--th-accent) !important; border: 1px solid var(--th-accent) !important; color: var(--th-accent-fg) !important;
  border-radius: var(--th-radius-sm); font-weight: 600; padding: 10px 20px; font-size: 14px;
}
.th-inv-paybox-action .btn:hover, .th-inv-paybox-action button:hover { background: var(--th-accent-hover) !important; border-color: var(--th-accent-hover) !important; }

/* footer strip — company details in columns (Swedish faktura convention) */
.th-inv-foot {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 20px;
  border-top: 1px solid var(--th-line-strong); margin-top: 34px; padding-top: 20px;
}
.th-inv-foot-text { font-size: 12px; color: var(--th-ink-soft); line-height: 1.6; }
.th-inv-foot-text.th-inv-mono, .th-inv-foot-text .th-inv-mono { font-size: 12px; }

/* credit + notes */
.th-inv-credit, .th-inv-notes { border: 1px solid var(--th-line); border-radius: var(--th-radius-sm); padding: 16px 18px; margin-bottom: 24px; background: var(--th-bg); }
.th-inv-credit-desc { font-size: 13.5px; color: var(--th-ink-soft); margin: 4px 0 10px; }
.th-inv-credit-controls { display: flex; gap: 8px; max-width: 340px; }
.th-inv-notes p { font-size: 13.5px; color: var(--th-ink-soft); margin: 4px 0 0; }

/* tables */
.th-inv-table { width: 100%; border-collapse: collapse; }
.th-inv-table th { font-family: var(--th-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--th-muted); font-weight: 500; text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--th-line-strong); }
.th-inv-table td { font-size: 14px; padding: 13px 12px; border-bottom: 1px solid var(--th-line); vertical-align: top; }
.th-inv-table .th-inv-amount { text-align: left; white-space: nowrap; }
.th-inv-table tfoot td { border-bottom: 0; padding: 9px 12px; }
.th-inv-table tfoot tr:first-child td { padding-top: 16px; }
.th-inv-total-label { text-align: left; font-size: 13px; color: var(--th-muted); font-weight: 500; }
.th-inv-grand td { border-top: 1px solid var(--th-line-strong); padding-top: 14px !important; }
.th-inv-grand .th-inv-total-label { color: var(--th-ink); font-weight: 600; font-size: 14px; }
.th-inv-grand .th-inv-amount { font-size: 18px; font-weight: 600; color: var(--th-ink); }
.th-inv-taxnote { font-size: 12px; color: var(--th-muted); margin: 10px 0 0; }
.th-inv-none { color: var(--th-muted); text-align: center; }

.th-inv-trans { margin-top: 34px; }
.th-inv-table--small td { font-size: 13px; padding: 10px 12px; color: var(--th-ink-soft); }
.th-inv-table--small .th-inv-grand .th-inv-amount { font-size: 15px; }

/* actions + back link */
.th-inv-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 30px; }
.th-inv-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
.th-inv-back { text-align: center; margin-top: 22px; font-size: 13.5px; }
.th-inv-back a { color: var(--th-muted); display: inline-flex; align-items: center; gap: 7px; }
.th-inv-back a:hover { color: var(--th-ink); }

/* result notices rendered via panel.tpl inside the doc */
.th-inv-doc .card, .th-inv-wrap .card { box-shadow: none; margin-bottom: 24px; }

@media (max-width: 640px) {
  .th-inv-doc { padding: 26px 20px; }
  .th-inv-head { flex-direction: column; }
  .th-inv-state { text-align: right; }
  .th-inv-metatable { margin-right: 0; }
  .th-inv-metatable td { text-align: right; padding-right: 0; }
  .th-inv-metatable td:last-child { padding-right: 18px; }
  .th-inv-paybox { flex-direction: column; align-items: flex-start; gap: 16px; }
  .th-inv-paybox-action { margin-right: 0; }
  .th-inv-foot { grid-template-columns: 1fr 1fr; }
  .th-inv-title { font-size: 24px; }
}

/* print-only fallback (e.g. gateway name where the dropdown is hidden) */
.th-inv-print-only { display: none; }

@media print {
  /* Bootstrap 4's print sheet forces @page A3 + body min-width 992px, which
     shrinks A4 output to ~70%. Undo it — custom.css loads after all.min.css.
     size:auto = use the paper chosen in the print dialog (A4, Letter, ...). */
  @page { size: auto; margin: 14mm; }
  html, body, .th-inv-page { background: #fff !important; min-width: 0 !important; width: auto !important; }
  .th-inv-wrap { padding: 0; max-width: none; }
  /* framed document: hairline border + brand letterhead rule (lime → ink) */
  .th-inv-doc { border: 1px solid #c9c9c2; box-shadow: none; padding: 9mm; border-radius: 0; }
  .th-inv-doc::before {
    content: ''; display: block; height: 4px; margin: -9mm -9mm 9mm;
    background: linear-gradient(-90deg, var(--th-accent) 0 42mm, var(--th-ink) 42mm);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* Hide interactive chrome explicitly — don't rely on Bootstrap's .d-print-none */
  .d-print-none, .th-inv-actions, .th-inv-back, .th-inv-paybox-action, .th-inv-gateway { display: none !important; }
  .th-inv-print-only { display: inline; }
  /* Keep the status pill + paybox legible on paper */
  .th-inv-pill, .th-inv-paybox { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .th-inv-paybox { border: 1px solid #999; }
  /* Sane page breaks */
  .th-inv-table tr, .th-inv-paybox, .th-inv-foot, .th-inv-head { page-break-inside: avoid; }
  .th-inv-trans { page-break-inside: avoid; }
}

/* ---------------------------------------------------------------------------
   Product details (clientareaproductdetails) — de-bootstrap the stock bits.
   The page is structurally fine; these overrides bring the status banner,
   danger actions and sidebar iconography onto the 2-Host palette.
--------------------------------------------------------------------------- */
.product-status { border-radius: 10px; }
.product-status .product-status-text { font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-size: 12.5px; }
.product-status-active { background: var(--th-success-bg) !important; }
.product-status-active .product-status-text { color: var(--th-success) !important; }
.product-status-pending { background: var(--th-warning-bg) !important; }
.product-status-pending .product-status-text { color: var(--th-warning) !important; }
.product-status-suspended, .product-status-terminated, .product-status-cancelled, .product-status-fraud { background: var(--th-danger-bg) !important; }
.product-status-suspended .product-status-text, .product-status-terminated .product-status-text, .product-status-cancelled .product-status-text, .product-status-fraud .product-status-text { color: var(--th-danger) !important; }

/* Destructive actions: quiet outline until hovered — never a red slab. */
.btn-danger, a.btn-danger {
  background: transparent !important;
  border: 1px solid var(--th-danger) !important;
  color: var(--th-danger) !important;
}
.btn-danger:hover, a.btn-danger:hover {
  background: var(--th-danger) !important;
  color: #fff !important;
}

/* Stock twenty-one paints sidebar/menu icons indigo — pull them to ink.
   :not(.th-btn) keeps the product command-bar buttons (which carry
   .list-group-item for stock JS) on their own icon colors; active items sit
   on an ink fill, so their icons take the contrast color, not lime-ink. */
.list-group-item:not(.th-btn) i.fas, .list-group-item:not(.th-btn) i.fab, .list-group-item:not(.th-btn) i.far, .list-group-item:not(.th-btn) i.fal,
.card-header i.fas, .card-header i.far { color: var(--th-ink-soft) !important; }
.list-group-item:not(.th-btn):not(.active):hover i { color: var(--th-accent-ink) !important; }
.list-group-item.active:not(.th-btn) i { color: var(--th-ink-contrast) !important; }

/* ---------------------------------------------------------------------------
   Sidebar groups (includes/sidebar.tpl override) — always expanded.
   Groups are flat labeled sections; every available action is visible at a
   glance instead of hiding behind collapse chevrons.
--------------------------------------------------------------------------- */
.th-side-group { margin-bottom: 22px; }
.th-side-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--th-muted); padding: 0 12px 7px;
  display: flex; align-items: center; gap: 8px;
}
.th-side-badge { background: var(--th-ink); color: var(--th-ink-contrast); border-radius: 999px; font-size: 10px; padding: 1px 7px; }
.th-side-list { background: var(--th-surface); border: 1px solid var(--th-line); border-radius: var(--th-radius); box-shadow: var(--th-shadow); padding: 5px; overflow: hidden; }
.th-side-list .list-group-item {
  border: 0 !important; border-radius: 8px !important; margin: 1px 0 !important;
  padding: 8px 10px; color: var(--th-ink-soft); font-size: 13.5px; font-weight: 500;
  background: transparent;
}
.th-side-list .list-group-item:hover { background: var(--th-hover); color: var(--th-ink); }
.th-side-list .list-group-item.active { background: var(--th-ink); color: var(--th-ink-contrast); font-weight: 600; }
.th-side-list .list-group-item.active .sidebar-menu-item-icon { color: var(--th-ink-contrast) !important; }
.th-side-list .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 10px; }
.th-side-list .sidebar-menu-item-icon-wrapper { width: 18px; text-align: center; flex: 0 0 18px; }
.th-side-list .sidebar-menu-item-icon { font-size: 12.5px; color: var(--th-muted); }
.th-side-list .list-group-item:hover .sidebar-menu-item-icon { color: var(--th-accent-ink); }
.th-side-list .sidebar-menu-item-label { flex: 1 1 auto; }
.th-side-list .sidebar-menu-item-badge .badge { background: var(--th-accent); color: var(--th-accent-fg); border-radius: 999px; font-size: 10px; }
.th-side-body, .th-side-foot { background: var(--th-surface); border: 1px solid var(--th-line); border-radius: var(--th-radius); padding: 14px 16px; margin-bottom: 8px; font-size: 13.5px; }

/* ---------------------------------------------------------------------------
   Service Console (clientareaproductdetails override) — one frame, four
   zones divided by hairlines. Replaces the stock card pile.
--------------------------------------------------------------------------- */
.th-svc {
  background: var(--th-surface); border: 1px solid var(--th-line);
  border-radius: var(--th-radius); box-shadow: var(--th-shadow); overflow: hidden;
  margin-bottom: 22px;
}

/* zone 1 · header band */
.th-svc-head {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end;
  padding: 26px 28px 22px; border-bottom: 1px solid var(--th-line);
}
.th-svc-id { flex: 1 1 320px; min-width: 0; }
.th-svc-eyebrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--th-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--th-muted);
}
.th-svc-name {
  font-family: var(--th-display); font-size: 28px; font-weight: 650;
  letter-spacing: -0.02em; margin: 8px 0 2px; color: var(--th-ink);
}
.th-svc-domain { font-family: var(--th-mono); font-size: 13px; color: var(--th-accent-ink); }
.th-svc-domain:hover { color: var(--th-ink); }
.th-svc-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.th-btn {
  font-size: 13.5px; font-weight: 600; border-radius: 10px; padding: 9px 16px;
  border: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; line-height: 1.2; cursor: pointer;
}
.th-btn i { font-size: 12px; }
.th-btn-ink { background: var(--th-ink); color: var(--th-ink-contrast) !important; }
.th-btn-ink:hover { background: var(--th-ink-soft); color: var(--th-ink-contrast); }
.th-btn-quiet { background: transparent; border-color: var(--th-line-strong); color: var(--th-ink-soft) !important; }
.th-btn-quiet:hover { border-color: var(--th-ink); color: var(--th-ink) !important; }
.th-btn-danger { background: transparent; border-color: var(--th-danger); color: var(--th-danger) !important; }
.th-btn-danger:hover { background: var(--th-danger); color: #fff !important; }
.th-btn.disabled { opacity: .5; pointer-events: none; }

/* zone 2 · spec strip */
.th-svc-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-bottom: 1px solid var(--th-line);
}
.th-spec { padding: 15px 28px; border-inline-end: 1px solid var(--th-line); min-width: 0; }
.th-spec:last-child { border-inline-end: 0; }
.th-spec-label {
  display: block; font-family: var(--th-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--th-muted); margin-bottom: 3px;
  overflow-wrap: break-word;
}
.th-spec-value { font-family: var(--th-mono); font-size: 13.5px; font-weight: 600; }

.th-svc-suspend {
  padding: 13px 28px; border-bottom: 1px solid var(--th-line);
  background: var(--th-danger-bg); color: var(--th-danger); font-size: 13.5px;
}

/* zone 3 · usage meters */
.th-svc-usage { padding: 22px 28px; border-bottom: 1px solid var(--th-line); }
.th-svc-zonehead { font-size: 13px; font-weight: 700; margin-bottom: 15px; color: var(--th-ink); }
.th-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 36px; }
.th-meter-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 12px; }
.th-meter-name { font-size: 13px; font-weight: 600; color: var(--th-ink-soft); }
.th-meter-val { font-family: var(--th-mono); font-size: 12px; color: var(--th-muted); }
.th-meter-bar { height: 6px; border-radius: 999px; background: var(--th-line); overflow: hidden; }
.th-meter-fill { height: 100%; border-radius: 999px; background: var(--th-accent-ink); min-width: 2px; max-width: 100%; }
.th-svc-updated { margin-top: 14px; font-family: var(--th-mono); font-size: 11px; color: var(--th-muted); }

/* zone 4 · info/module tabs */
.th-svc-tabnav {
  display: flex; gap: 4px; padding: 12px 20px 0; border-bottom: 1px solid var(--th-line);
  flex-wrap: wrap;
}
.th-svc-tabnav .nav-link {
  border: 0 !important; border-radius: 8px 8px 0 0; padding: 9px 14px; font-size: 13px;
  font-weight: 600; color: var(--th-muted); background: transparent;
}
.th-svc-tabnav .nav-link:hover { color: var(--th-ink); }
.th-svc-tabnav .nav-link.active {
  color: var(--th-ink); box-shadow: inset 0 -2px 0 var(--th-accent-ink);
  background: transparent !important;
}
.th-svc-tabbody { padding: 22px 28px; }
.th-svc-zone { padding: 24px 28px; }

/* key/value rows */
.th-kv { max-width: 720px; }
.th-kv-row {
  display: flex; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--th-line);
  font-size: 13.5px; align-items: baseline;
}
.th-kv-row:last-child { border-bottom: 0; }
.th-kv-key { flex: 0 0 220px; color: var(--th-muted); font-weight: 600; }
.th-kv-val { flex: 1 1 auto; font-family: var(--th-mono); font-size: 13px; word-break: break-word; }
.th-kv-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* module output area — modules bring their own markup; give it room */
.th-module-area { margin-top: 20px; text-align: start; }

/* generic row list (addons, downloads) */
.th-rowlist { list-style: none; margin: 0; padding: 0; }
.th-rowlist li {
  display: flex; align-items: center; gap: 16px; padding: 13px 0;
  border-bottom: 1px solid var(--th-line);
}
.th-rowlist li:last-child { border-bottom: 0; }
.th-row-main { flex: 1 1 auto; min-width: 0; }
.th-row-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.th-row-meta { display: block; font-family: var(--th-mono); font-size: 11.5px; color: var(--th-muted); margin-top: 3px; }
.th-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.th-row-actions .btn { font-size: 12.5px; padding: 6px 12px; }

@media (max-width: 767.98px) {
  .th-svc-head, .th-svc-usage, .th-svc-tabbody, .th-svc-zone { padding-right: 18px; padding-left: 18px; }
  .th-spec { padding: 13px 18px; }
  .th-kv-key { flex-basis: 130px; }
}

/* ---------------------------------------------------------------------------
   cPanel-module overview restyle (tplOverviewTabOutput markup, scoped to
   #tabOverview). The module injects its own panels — bring them onto the
   brand without touching module files (survives WHMCS updates).
--------------------------------------------------------------------------- */
#tabOverview .panel.card {
  border: 1px solid var(--th-line) !important; border-radius: var(--th-radius) !important;
  box-shadow: var(--th-shadow); background: var(--th-surface); overflow: hidden;
}
#tabOverview .panel.card .card-header, #tabOverview .panel.card .panel-heading {
  background: transparent !important; border-bottom: 1px solid var(--th-line);
  padding: 14px 20px;
}
#tabOverview .panel.card .card-title, #tabOverview .panel.card .panel-title {
  font-size: 13px; font-weight: 700; color: var(--th-ink);
}
#tabOverview .panel.card h3:not(.card-title):not(.panel-title),
#tabOverview .panel.card h4 { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }

/* module buttons → quiet outlines (Visit Website, Manage, Upgrade, …) */
#tabOverview .btn-default {
  background: transparent !important; border: 1px solid var(--th-line-strong) !important;
  color: var(--th-ink-soft) !important; border-radius: 10px; font-weight: 600;
}
#tabOverview .btn-default:hover { border-color: var(--th-ink) !important; color: var(--th-ink) !important; }

/* usage dials: hide the legacy knob canvases, keep the readings as mono */
#tabOverview canvas { display: none !important; }
#tabOverview input.dial, #tabOverview input.usage-dial, #tabOverview .dial-usage { display: none !important; }
#tabOverview .panel.card .text-center p {
  font-family: var(--th-mono); font-size: 13px; color: var(--th-ink-soft);
}

/* quick shortcuts → bordered tiles, ink icons, lime-ink hover */
#tabOverview a.d-block {
  color: var(--th-ink-soft); font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--th-line); border-radius: var(--th-radius-sm);
  padding: 14px 8px; text-align: center; transition: border-color .15s, color .15s;
}
#tabOverview a.d-block:hover { border-color: var(--th-ink); color: var(--th-ink); text-decoration: none; }
#tabOverview a.d-block i { color: var(--th-muted); display: block; font-size: 17px; margin-bottom: 8px; }
#tabOverview a.d-block:hover i { color: var(--th-accent-ink); }

/* ---------------------------------------------------------------------------
   Product-details command bar — replaces the page sidebar. Pane switcher as
   a segmented pill control, module actions as quiet buttons.
--------------------------------------------------------------------------- */
.th-cmdbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.th-cmdbar-tabs {
  display: inline-flex; gap: 4px; background: var(--th-surface);
  border: 1px solid var(--th-line); border-radius: 999px; padding: 4px;
  box-shadow: var(--th-shadow);
}
.th-cmdtab {
  padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--th-ink-soft); text-decoration: none; white-space: nowrap;
}
.th-cmdtab:hover { color: var(--th-ink); }
.th-cmdtab.active { background: var(--th-ink); color: var(--th-ink-contrast) !important; }
.th-cmdtab-badge { background: var(--th-accent); color: var(--th-accent-fg); border-radius: 999px; font-size: 10px; padding: 1px 6px; margin-inline-start: 5px; }
.th-cmdbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* phones: the pill row scrolls inside itself instead of widening the page */
@media (max-width: 767.98px) {
  .th-cmdbar-tabs {
    display: flex; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--th-line-strong) transparent;
  }
  .th-cmdbar-tabs::-webkit-scrollbar { height: 3px; }
  .th-cmdbar-tabs::-webkit-scrollbar-thumb { background: var(--th-line-strong); border-radius: 3px; }
  .th-cmdtab { flex: 0 0 auto; }
}
/* neutralize bootstrap's list-group-item box model on these buttons — the
   class is kept only so stock custom-action JS bindings still match */
.th-cmdbar-actions .th-btn.list-group-item {
  width: auto; background: var(--th-surface); border: 1px solid var(--th-line-strong) !important;
  border-radius: 10px !important; padding: 8px 14px; font-size: 12.5px;
  color: var(--th-ink-soft) !important; margin: 0 !important; display: inline-flex;
}
.th-cmdbar-actions .th-btn.list-group-item:hover { border-color: var(--th-ink) !important; color: var(--th-ink) !important; }
.th-cmdbar-actions .th-btn i { font-size: 12px; color: var(--th-muted); }
.th-cmdbar-actions .th-btn:hover i { color: var(--th-accent-ink); }

.th-hook-output { margin-top: 18px; }
.th-hook-output .panel, .th-hook-output .card { box-shadow: none; }
/* MarketConnect login cards duplicate the addon rows (the rows carry the
   same SSO + Upgrade buttons via managementActions) — hide the card, and
   collapse the wrapper when login cards were all it held. */
#tabAddons .mc-promo-login { display: none; }
#tabAddons .th-hook-output:has(#mc-promo-widgets):not(:has(#mc-promo-widgets > :not(.mc-promo-login))) { display: none; }


/* ---------------------------------------------------------------------------
   Services list (clientareaproducts) — console-framed table.
--------------------------------------------------------------------------- */
.th-tablewrap { padding: 6px 10px 10px; }
.th-tablewrap table.table-list { margin: 0; border: 0; }
.th-tablewrap table.table-list thead th {
  font-family: var(--th-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--th-muted);
  border-top: 0; border-bottom: 1px solid var(--th-line); padding: 14px 16px 10px;
}
.th-tablewrap table.table-list tbody td {
  padding: 15px 16px; border-top: 0; border-bottom: 1px solid var(--th-line);
  vertical-align: middle;
}
.th-tablewrap table.table-list tbody tr:last-child td { border-bottom: 0; }
.th-tablewrap table.table-list tbody tr { cursor: pointer; transition: background .12s; }
.th-tablewrap table.table-list tbody tr:hover { background: var(--th-row-hover); }
.th-svcrow-name { display: block; font-weight: 650; font-size: 14.5px; letter-spacing: -0.01em; color: var(--th-ink); }
.th-svcrow-domain { display: block; font-family: var(--th-mono); font-size: 12px; color: var(--th-accent-ink); margin-top: 2px; }
.th-svcrow-domain:hover { color: var(--th-ink); }
.th-svcrow-price { font-family: var(--th-mono); font-size: 13px; font-weight: 600; }
.th-svcrow-cycle { font-family: var(--th-mono); font-size: 11px; color: var(--th-muted); display: block; margin-top: 1px; }
.th-svcrow-due { font-family: var(--th-mono); font-size: 12.5px; color: var(--th-ink-soft); }
.th-tablewrap .label.status {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
}
/* WHMCS emits status classes both ways depending on page/version
   (statusClass "pending-transfer" vs legacy "pendingtransfer") — cover both. */
.th-tablewrap .status-active, .th-tablewrap .status-completed { background: var(--th-success-bg) !important; color: var(--th-success) !important; }
.th-tablewrap .status-pending { background: var(--th-warning-bg) !important; color: var(--th-warning) !important; }
.th-tablewrap .status-suspended, .th-tablewrap .status-terminated, .th-tablewrap .status-fraud, .th-tablewrap .status-expired { background: var(--th-danger-bg) !important; color: var(--th-danger) !important; }
/* (status-cancelled is muted — see the invoices block) */

/* Invoices list — extends the console table treatment. */
.th-invrow-num { font-family: var(--th-mono); font-size: 13.5px; font-weight: 650; color: var(--th-ink); }
.th-cmdbar-note { font-size: 13px; color: var(--th-ink-soft); display: flex; align-items: center; gap: 10px; }
.th-cmdbar-note .btn { padding: 6px 12px; font-size: 12.5px; border-radius: 9px; }
.th-tablewrap .status-paid { background: var(--th-success-bg) !important; color: var(--th-success) !important; }
.th-tablewrap .status-unpaid { background: var(--th-warning-bg) !important; color: var(--th-warning) !important; }
.th-tablewrap .status-overdue, .th-tablewrap .status-collections { background: var(--th-danger-bg) !important; color: var(--th-danger) !important; }
.th-tablewrap .status-cancelled, .th-tablewrap .status-refunded, .th-tablewrap .status-draft,
.th-tablewrap .status-paymentpending, .th-tablewrap .status-payment-pending { background: var(--th-muted-bg) !important; color: var(--th-muted) !important; }

/* Domains list — extends the console table treatment. */
.th-domrow-name { display: block; font-family: var(--th-mono); font-size: 13.5px; font-weight: 650; color: var(--th-ink); }
.th-domrow-name:hover { color: var(--th-accent-ink); }
.th-domrow-renew { display: block; font-size: 11.5px; color: var(--th-muted); margin-top: 3px; }
.th-tablewrap .status-pendingtransfer, .th-tablewrap .status-pending-transfer,
.th-tablewrap .status-pendingregistration, .th-tablewrap .status-pending-registration { background: var(--th-warning-bg) !important; color: var(--th-warning) !important; }
.th-tablewrap .status-redemption, .th-tablewrap .status-transferredaway, .th-tablewrap .status-transferred-away, .th-tablewrap .status-grace { background: var(--th-muted-bg) !important; color: var(--th-muted) !important; }

/* Email history + tickets list — console table extensions. */
.th-mailrow-subject { font-weight: 600; font-size: 13.5px; color: var(--th-ink); }
.th-ticketrow { text-decoration: none; }
.th-ticketrow-num { font-family: var(--th-mono); font-size: 12px; color: var(--th-muted); margin-inline-end: 8px; }
.th-ticketrow-subject { font-weight: 600; font-size: 13.5px; color: var(--th-ink); }
.th-ticketrow-subject.th-unread { font-weight: 750; }
.th-ticketrow:hover .th-ticketrow-subject { color: var(--th-accent-ink); }
.th-tablewrap .status-open, .th-tablewrap .status-customerreply, .th-tablewrap .status-customer-reply { background: var(--th-success-bg) !important; color: var(--th-success) !important; }
.th-tablewrap .status-answered, .th-tablewrap .status-inprogress, .th-tablewrap .status-in-progress,
.th-tablewrap .status-onhold, .th-tablewrap .status-on-hold { background: var(--th-warning-bg) !important; color: var(--th-warning) !important; }
.th-tablewrap .status-closed { background: var(--th-muted-bg) !important; color: var(--th-muted) !important; }
/* admin-colored ticket statuses (inline background-color) */
.th-tablewrap .status-custom { color: #fff !important; }
html[data-theme='dark'] .th-tablewrap .status-custom { box-shadow: 0 0 0 1px var(--th-line-strong); }

/* =====================================================================
   DARK MODE — mirrors the marketing site's dark tokens
   (src/styles/tokens.css). data-theme is stamped on <html> before paint
   by the cookie script in header.tpl; the `theme` cookie
   (domain=.2-host.com) is shared with 2-host.com, so both sites always
   agree. Light stays the default.
   ===================================================================== */
html[data-theme='dark'] {
  color-scheme: dark;
  --th-bg: #0a0a0b;
  --th-surface: #131316;
  --th-ink: #f5f5f7;
  --th-ink-soft: #a1a1aa;
  --th-muted: #8b8b93;
  --th-line: #27272a;
  --th-line-strong: #3f3f46;
  --th-accent-ink: #c6f24e;      /* lime reads cleanly on dark — ink == fill */
  --th-accent-hover: #d6f878;
  --th-success: #10b981;  --th-success-bg: rgba(16,185,129,.15);
  --th-warning: #f59e0b;  --th-warning-bg: rgba(245,158,11,.15);
  --th-danger: #ef4444;   --th-danger-bg: rgba(239,68,68,.15);
  --th-info: #60a5fa;     --th-info-bg: rgba(96,165,250,.13);
  --th-success-line: rgba(16,185,129,.35);  --th-success-text: #6ee7b7;
  --th-warning-line: rgba(245,158,11,.35);  --th-warning-text: #fcd34d;
  --th-danger-line: rgba(239,68,68,.38);    --th-danger-text: #fca5a5;
  --th-info-line: rgba(96,165,250,.35);     --th-info-text: #93c5fd;
  --th-shadow: 0 1px 0 rgba(0,0,0,.25), 0 10px 26px -16px rgba(0,0,0,.6);
  --th-hover: #1c1c20;
  --th-row-hover: #17171a;
  --th-muted-bg: #232327;
  --th-ink-contrast: #0a0a0b;
  --th-glass: rgba(10,10,11,.8);
  --th-focus-ring: rgba(245,245,247,.09);
}

/* Bootstrap/stock surfaces whose light defaults never needed overriding. */
/* background-color, not the shorthand: .custom-select draws its caret with
   a background-image, and validation icons use one too. */
html[data-theme='dark'] .form-control,
html[data-theme='dark'] .custom-select,
html[data-theme='dark'] .input-group-text {
  background-color: var(--th-surface); border-color: var(--th-line-strong); color: var(--th-ink);
}
html[data-theme='dark'] .form-control::placeholder { color: var(--th-muted); }
html[data-theme='dark'] .dropdown-menu { background: var(--th-surface); border: 1px solid var(--th-line-strong); box-shadow: var(--th-shadow); }
html[data-theme='dark'] .dropdown-menu .dropdown-item { color: var(--th-ink-soft); }
html[data-theme='dark'] .dropdown-menu .dropdown-item:hover,
html[data-theme='dark'] .dropdown-menu .dropdown-item:focus { background: var(--th-hover); color: var(--th-ink); }
html[data-theme='dark'] .dropdown-divider { border-color: var(--th-line); }
/* ...but rail submenus are inline lists, not floating menus */
html[data-theme='dark'] .th-rail .dropdown-menu { background: transparent; border: 0; box-shadow: none; }
html[data-theme='dark'] .modal-content { background: var(--th-surface); color: var(--th-ink); border: 1px solid var(--th-line-strong); }
html[data-theme='dark'] .modal-header, html[data-theme='dark'] .modal-footer { border-color: var(--th-line); }
html[data-theme='dark'] .close { color: var(--th-ink); text-shadow: none; }
html[data-theme='dark'] .page-item .page-link,
html[data-theme='dark'] .page-item.disabled .page-link { background-color: var(--th-surface); border-color: var(--th-line); }
html[data-theme='dark'] .page-item.active .page-link { background-color: var(--th-ink); border-color: var(--th-ink); }
html[data-theme='dark'] .breadcrumb { background: transparent; }
html[data-theme='dark'] .bg-white { background-color: var(--th-surface) !important; }
/* Registrar TLD logos are dark artwork — give them a paper chip in dark. */
html[data-theme='dark'] .home-domain-search img { background: #fff; border-radius: 5px; padding: 2px 5px; }

/* Stock CSS paints every table cell white (and DataTables adds its own
   sorted-column tints on top) — neutralize all of it; the row hover lives
   on the tr so it still shows through. */
html[data-theme='dark'] .table td, html[data-theme='dark'] .table th,
html[data-theme='dark'] table.dataTable td,
html[data-theme='dark'] table.dataTable th { background-color: transparent !important; }
/* Stock inputs that outrank the generic dark .form-control rule. Targeted
   selectors instead of a blanket `input.form-control {…!important}`, which
   used to wipe the invalid/disabled/readonly states. */
html[data-theme='dark'] .dataTables_wrapper .dataTables_filter label .form-control,
html[data-theme='dark'] .dataTables_wrapper input {
  background: var(--th-surface); border-color: var(--th-line-strong); color: var(--th-ink);
}
html[data-theme='dark'] #registration .field,
html[data-theme='dark'] #registration .form-control {
  background-color: var(--th-surface); border-color: var(--th-line-strong); color: var(--th-ink);
}
html[data-theme='dark'] .form-control:disabled, html[data-theme='dark'] .form-control[readonly],
html[data-theme='dark'] .custom-select:disabled, html[data-theme='dark'] .field:disabled,
html[data-theme='dark'] .field[readonly] {
  background-color: var(--th-hover) !important; color: var(--th-muted) !important; border-color: var(--th-line) !important;
}

/* The invoice is a printable paper document — it stays light in dark mode
   (the page chrome around it goes dark). Re-pinning the tokens here means
   every element inside the document inherits the light palette. */
html[data-theme='dark'] .th-inv-doc {
  color-scheme: light;
  --th-bg: #f7f7f4; --th-surface: #ffffff;
  --th-ink: #111210; --th-ink-soft: #44453f; --th-muted: #6b6c65;
  --th-line: #e7e7e1; --th-line-strong: #d6d6cf;
  --th-muted-bg: #ecece7; --th-accent-ink: #4f6b07; --th-ink-contrast: #ffffff;
  --th-success: #15803d; --th-success-bg: #dcf5d8;
  --th-warning: #b45309; --th-warning-bg: #fbedc8;
  --th-danger: #b3261e;  --th-danger-bg: #f7dedb;
  background: var(--th-surface);
}

/* Announcements — stock twenty-one paints excerpt <article>s #f5f5f5. */
html[data-theme='dark'] #main-body article { background-color: var(--th-hover); }

/* Order form (twohost_cart): this file loads BEFORE the cart's all.min.css
   and custom.css (those are linked from the page body), so the cart's own
   dark pass lives at the end of twohost_cart/css/custom.css. */

/* ---- Dark: stock twenty-one surfaces that hardcode white ---- */
/* Markdown editor (tickets/replies): stock forces #fff !important on the
   textarea, so typed text (ink = near-white) was invisible. */
html[data-theme='dark'] .md-editor { border-color: var(--th-line-strong); }
html[data-theme='dark'] .md-editor > textarea.markdown-editor,
html[data-theme='dark'] .md-editor > .md-preview {
  background-color: var(--th-surface) !important; color: var(--th-ink);
  border-top-color: var(--th-line) !important; border-bottom-color: var(--th-line) !important;
}
html[data-theme='dark'] .md-editor > .btn-toolbar { background-color: var(--th-hover) !important; }
html[data-theme='dark'] .md-editor > .btn-toolbar .btn { background-color: transparent; border-color: var(--th-line-strong); color: var(--th-ink-soft); }
html[data-theme='dark'] .md-editor > .btn-toolbar .btn:hover,
html[data-theme='dark'] .md-editor > .btn-toolbar .btn.active { background-color: var(--th-surface); color: var(--th-ink); }
html[data-theme='dark'] .md-preview table, html[data-theme='dark'] .markdown-content table { background-color: transparent; border-color: var(--th-line); }
html[data-theme='dark'] .md-preview table th, html[data-theme='dark'] .markdown-content table th { background-color: var(--th-hover); border-color: var(--th-line); }
html[data-theme='dark'] .md-preview table td, html[data-theme='dark'] .markdown-content table td { border-color: var(--th-line); }

/* list groups (stock #fff); hover/active of the themed lists still win */
html[data-theme='dark'] .list-group-item { background-color: var(--th-surface); border-color: var(--th-line); color: var(--th-ink); }
html[data-theme='dark'] .list-group-item-action:not(.active):hover,
html[data-theme='dark'] .list-group-item-action:not(.active):focus { background-color: var(--th-hover); color: var(--th-ink); }
html[data-theme='dark'] .list-group-item.active { background-color: var(--th-ink); border-color: var(--th-ink); color: var(--th-ink-contrast); }
html[data-theme='dark'] .list-group-item.disabled { color: var(--th-muted); }

/* tabs */
html[data-theme='dark'] .nav-tabs { border-bottom-color: var(--th-line); }
html[data-theme='dark'] .nav-tabs .nav-link:hover, html[data-theme='dark'] .nav-tabs .nav-link:focus { border-color: var(--th-line) var(--th-line) transparent; }
html[data-theme='dark'] .nav-tabs .nav-link.active,
html[data-theme='dark'] .nav-tabs .nav-item.show .nav-link { color: var(--th-ink); background-color: var(--th-surface); border-color: var(--th-line) var(--th-line) var(--th-surface); }
html[data-theme='dark'] .responsive-tabs-sm .nav-item a:hover { background-color: var(--th-hover); }
@media (max-width: 767.98px) {
  html[data-theme='dark'] .responsive-tabs-sm,
  html[data-theme='dark'] .responsive-tabs-sm-connector .channel { background: var(--th-surface); border-color: var(--th-line); }
  html[data-theme='dark'] .responsive-tabs-sm .nav-item { border-bottom-color: var(--th-line) !important; }
  html[data-theme='dark'] .responsive-tabs-sm .nav-item a.active { background-color: var(--th-hover) !important; color: var(--th-ink); }
  html[data-theme='dark'] .responsive-tabs-sm-connector .bottom-border { border-bottom-color: var(--th-line); }
}

/* popovers */
html[data-theme='dark'] .popover { background-color: var(--th-surface); border-color: var(--th-line-strong); }
html[data-theme='dark'] .popover-header { background-color: var(--th-hover); border-bottom-color: var(--th-line); color: var(--th-ink); }
html[data-theme='dark'] .popover-body { color: var(--th-ink); }
html[data-theme='dark'] .bs-popover-top > .arrow::before, html[data-theme='dark'] .bs-popover-auto[x-placement^="top"] > .arrow::before { border-top-color: var(--th-line-strong); }
html[data-theme='dark'] .bs-popover-top > .arrow::after, html[data-theme='dark'] .bs-popover-auto[x-placement^="top"] > .arrow::after { border-top-color: var(--th-surface); }
html[data-theme='dark'] .bs-popover-bottom > .arrow::before, html[data-theme='dark'] .bs-popover-auto[x-placement^="bottom"] > .arrow::before { border-bottom-color: var(--th-line-strong); }
html[data-theme='dark'] .bs-popover-bottom > .arrow::after, html[data-theme='dark'] .bs-popover-auto[x-placement^="bottom"] > .arrow::after { border-bottom-color: var(--th-surface); }
html[data-theme='dark'] .bs-popover-right > .arrow::before, html[data-theme='dark'] .bs-popover-auto[x-placement^="right"] > .arrow::before { border-left-color: var(--th-line-strong); }
html[data-theme='dark'] .bs-popover-right > .arrow::after, html[data-theme='dark'] .bs-popover-auto[x-placement^="right"] > .arrow::after { border-left-color: var(--th-surface); }
html[data-theme='dark'] .bs-popover-left > .arrow::before, html[data-theme='dark'] .bs-popover-auto[x-placement^="left"] > .arrow::before { border-right-color: var(--th-line-strong); }
html[data-theme='dark'] .bs-popover-left > .arrow::after, html[data-theme='dark'] .bs-popover-auto[x-placement^="left"] > .arrow::after { border-right-color: var(--th-surface); }

/* file inputs */
html[data-theme='dark'] .custom-file-label { background-color: var(--th-surface); border-color: var(--th-line-strong); color: var(--th-ink); }
html[data-theme='dark'] .custom-file-label::after { background-color: var(--th-hover); color: var(--th-ink); border-right-color: var(--th-line-strong); }

/* ---- Stock surfaces moved onto tokens (correct in both themes) ---- */
.verification-banner { background-color: var(--th-surface); border-bottom: 1px solid var(--th-line); color: var(--th-ink); }
.home-domain-search .input-group-wrapper { background-color: var(--th-surface); border-color: var(--th-line-strong); border-radius: var(--th-radius-sm); }
/* ticket thread: "Posted by" bars, separators, attachments */
.view-ticket .posted-by { background-color: var(--th-hover); color: var(--th-muted); border-bottom: 1px solid var(--th-line); }
.view-ticket .posted-by .posted-by-name { color: var(--th-ink); }
.view-ticket .card-body { border-bottom-color: var(--th-line); }
.view-ticket .attachments { border-top-color: var(--th-line); }
.view-ticket .attachment-list li span { border-color: var(--th-line); }
.view-ticket .attachment-list li figure { background-color: var(--th-hover); color: var(--th-muted); }
/* registration form (stock: #DDD rule, blue #058 heading on #fff) */
#registration label { color: var(--th-ink-soft); }
#registration .sub-heading { border-top-color: var(--th-line); }
#registration .sub-heading span { color: var(--th-ink); background-color: var(--th-surface); }

/* ---------------------------------------------------------------------------
   Projects — grouping of services/domains (projects.php + list chips/pills).
   Everything rides the tokens, so light/dark come for free.
--------------------------------------------------------------------------- */
.th-proj-create { display: flex; gap: 10px; flex: 1; max-width: 520px; }
.th-proj-create-input { flex: 1; }
.th-btn-lime { background: var(--th-accent) !important; border: 1px solid var(--th-accent) !important; color: var(--th-accent-fg) !important; font-weight: 600; border-radius: 10px; padding: 8px 14px; font-size: 12.5px; white-space: nowrap; }
.th-btn-lime:hover { background: var(--th-accent-hover) !important; border-color: var(--th-accent-hover) !important; }

/* overflow stays visible: the rename popover (.th-proj-rename-form) is
   absolutely positioned and was clipped by .th-svc's overflow:hidden. */
.th-proj-console, .th-svc.th-proj-console { background: var(--th-surface); border: 1px solid var(--th-line); border-radius: var(--th-radius); box-shadow: var(--th-shadow); overflow: visible; }
.th-svc:has(.th-proj-rename[open]) { overflow: visible; }
.th-proj-list { list-style: none; margin: 0; padding: 0; }
.th-proj-list > li { display: flex; align-items: center; gap: 15px; padding: 15px 22px; }
.th-proj-list > li + li { border-top: 1px solid var(--th-line); }
.th-proj-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; display: inline-block; }
.th-proj-swatch-empty { background: transparent; border: 1px dashed var(--th-line-strong); }
.th-proj-main { flex: 1; min-width: 0; }
.th-proj-name { display: block; font-family: var(--th-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.th-proj-meta { font-family: var(--th-mono); font-size: 12px; color: var(--th-muted); }
.th-proj-unassigned .th-proj-name { font-family: var(--th-font); font-weight: 500; color: var(--th-muted); font-size: 14.5px; }
.th-proj-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.th-proj-actions form { margin: 0; }
.th-proj-rename { position: relative; }
.th-proj-rename summary { list-style: none; cursor: pointer; display: inline-flex; }
.th-proj-rename summary::-webkit-details-marker { display: none; }
.th-proj-rename[open] .th-proj-rename-form {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 30;
  display: flex; gap: 8px; padding: 10px; background: var(--th-surface);
  border: 1px solid var(--th-line-strong); border-radius: var(--th-radius-sm); box-shadow: var(--th-shadow);
}
.th-proj-rename-form .form-control { width: 210px; }
.th-proj-empty { padding: 34px 26px; text-align: center; }
.th-proj-empty-title { font-family: var(--th-display); font-weight: 600; font-size: 16px; margin: 0 0 6px; }
.th-proj-empty-body { color: var(--th-muted); font-size: 13.5px; max-width: 52ch; margin: 0 auto; }

/* chips on the services/domains lists */
.th-proj-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--th-mono); font-size: 11px; color: var(--th-ink-soft); background: var(--th-muted-bg); border-radius: 999px; padding: 2px 9px; margin-top: 3px; white-space: nowrap; }
.th-proj-chip .th-proj-swatch { width: 8px; height: 8px; flex-basis: 8px; }

/* project selector in the console spec strip / domain details */
.th-proj-assign { margin: 0; }
.th-proj-assign select { font-family: var(--th-mono); font-size: 12.5px; color: var(--th-ink); background: var(--th-surface); border: 1px solid var(--th-line-strong); border-radius: 8px; padding: 4px 8px; max-width: 180px; }

/* ---------------------------------------------------------------------------
   Domain pricing (/domain/pricing) — de-stock the spotlight cards, category
   chips, and the TLD table. Token-driven, so both themes are covered.
--------------------------------------------------------------------------- */
.featured-tld {
  background: var(--th-surface); border: 1px solid var(--th-line);
  border-radius: var(--th-radius); box-shadow: var(--th-shadow); overflow: hidden;
  transition: border-color .15s;
}
.featured-tld:hover { border-color: var(--th-line-strong); }
/* Registrar artwork is designed for paper — keep a white backing in both themes. */
.featured-tld img { background: #fff; }
/* The per-TLD colored slabs (blue/yellow/red) become quiet ink bars w/ mono price. */
.featured-tld .price {
  background: var(--th-ink) !important; color: var(--th-ink-contrast) !important;
  font-family: var(--th-mono); font-size: 13px; letter-spacing: .02em;
}
/* Category chips: Bootstrap gray badges → quiet brand pills. */
a.badge.badge-secondary {
  background: var(--th-surface); color: var(--th-ink-soft);
  border: 1px solid var(--th-line-strong); border-radius: 999px;
  font-weight: 550; font-size: 11px; padding: 5px 11px;
  text-transform: uppercase; letter-spacing: .04em;
}
a.badge.badge-secondary:hover { border-color: var(--th-ink); color: var(--th-ink); }
/* This page's DataTable has no .table class — align its header with the
   console tables (and fix the hardcoded #333 that vanishes in dark). */
table.dataTable thead th {
  color: var(--th-muted) !important; font-family: var(--th-mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}

/* Rail brand wordmark (inline SVG in header.tpl) — ink in both themes. */
.th-rail-brand svg { height: 26px; width: auto; color: var(--th-ink); display: block; }

/* Topbar theme toggle — moon in light (switch to dark), sun in dark. */
.th-theme-toggle { border: 0; background: transparent; padding: 0; cursor: pointer; }
html[data-theme='dark'] .th-theme-toggle .th-tt-moon { display: none; }
html:not([data-theme='dark']) .th-theme-toggle .th-tt-sun { display: none; }


/* =====================================================================
   BATCH 2 COMPONENTS: styles for markup added by the template fixes
   (shell, dashboard and services, account pages). Kept at the end so it
   wins over the generic rules above.
   ===================================================================== */
/* === Shell (batch 2): breadcrumb, topbar buttons, notifications, rail, cmdbar === */
.th-breadcrumb { min-width: 0; overflow: hidden; }
.th-breadcrumb .breadcrumb { margin: 0; padding: 0; background: transparent; flex-wrap: nowrap; font-size: 13px; white-space: nowrap; }
.th-breadcrumb .breadcrumb-item { color: var(--th-muted); }
.th-breadcrumb .breadcrumb-item a { color: var(--th-ink-soft); }
.th-breadcrumb .breadcrumb-item.active { color: var(--th-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) { .th-breadcrumb .breadcrumb-item:not(.active) { display: none; } .th-breadcrumb .breadcrumb-item + .breadcrumb-item::before { display: none; } }

button.th-topbar-icon { background: transparent; border: 0; padding: 4px; line-height: 1; cursor: pointer; }
.th-notif-btn { position: relative; }
.th-notif-badge { position: absolute; top: -4px; left: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--th-accent); color: var(--th-accent-fg); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }

.popover-user-notifications { max-width: 340px; background: var(--th-surface); border: 1px solid var(--th-line); border-radius: var(--th-radius); box-shadow: var(--th-shadow); }
.popover-user-notifications .popover-body { padding: 6px; }
.popover-user-notifications .arrow::after { border-bottom-color: var(--th-surface); }
.popover-user-notifications .arrow::before { border-bottom-color: var(--th-line); }
.popover-user-notifications .client-alerts { list-style: none; margin: 0; padding: 0; }
.popover-user-notifications .client-alerts li a { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 8px; color: var(--th-ink); font-size: 13px; text-decoration: none; }
.popover-user-notifications .client-alerts li a:hover { background: var(--th-hover); }
.popover-user-notifications .client-alerts li a i { margin-top: 2px; color: var(--th-muted); }
.popover-user-notifications .client-alerts li.none { padding: 10px; color: var(--th-muted); font-size: 13px; }

.th-cart-badge.d-none { display: none !important; }
.th-topbar-account { display: flex; align-items: center; gap: 4px; }
.th-topbar-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.th-admin-bar { display: flex; align-items: center; gap: 8px; }
.th-admin-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--th-warning-bg); color: var(--th-warning-text); }
.th-return-admin { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--th-ink-soft); }
.th-return-admin:hover { color: var(--th-ink); }

.th-rail-backdrop { border: 0; padding: 0; margin: 0; -webkit-appearance: none; appearance: none; cursor: default; }
@media (max-width: 991.98px) {
  .th-rail { visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
  body.th-rail-open .th-rail { visibility: visible; transition: transform .22s ease; }
}
.th-rail .navbar-nav a[aria-current="page"] { font-weight: 600; }
.th-rail .dropdown-menu .dropdown-item[aria-current="page"] { color: var(--th-ink); background: var(--th-hover); }
.th-rail .dropdown-divider { list-style: none; }

a.th-rail-status { text-decoration: none; }
a.th-rail-status:hover { color: var(--th-ink); }
.th-status-down .th-status-dot { background: var(--th-danger); animation: none; }
.th-status-maint .th-status-dot { background: var(--th-warning); animation: none; }
.th-status-down { color: var(--th-danger); }

h3.th-side-label { margin: 0; line-height: inherit; font-family: inherit; }
.th-side-icon { font-size: 11px; color: var(--th-muted); }
.th-badge-end { float: left; }

.th-secondary-panels { margin-top: 28px; }
.th-secondary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.th-secondary-grid .th-side-group { margin-bottom: 0; }

.th-cmdbar-tabs .th-cmdtab.list-group-item { width: auto; display: inline-flex; align-items: center; border: 0 !important; margin: 0 !important; background: transparent; padding: 7px 16px; border-radius: 999px !important; color: var(--th-ink-soft); }
.th-cmdbar-tabs .th-cmdtab.list-group-item.active { background: var(--th-ink); color: var(--th-ink-contrast) !important; z-index: auto; }
.th-cmdbar-tabs .th-cmdtab.list-group-item:hover { background: transparent; color: var(--th-ink); }
.th-cmdbar-tabs .th-cmdtab.list-group-item.active:hover { background: var(--th-ink); color: var(--th-ink-contrast); }
.th-cmdtab .sidebar-menu-item-icon { margin-left: 6px; font-size: 12px; }
.th-cmdbar .th-cmdtab-badge.badge { font-weight: 700; line-height: 1.4; }
.th-cmdbar-static { cursor: default; }
.th-cmdbar .list-group-item.disabled { opacity: .5; pointer-events: none; }
.th-cmdbar-foot .btn { padding: 6px 12px; font-size: 12.5px; border-radius: 9px; }

.grecaptcha-badge { visibility: hidden !important; }
.th-recaptcha-note { margin: 8px 0 0; font-size: 11.5px; color: var(--th-muted); }
.th-recaptcha-note a { color: var(--th-ink-soft); text-decoration: underline; }
/* === Dashboard & services (batch 2): home panels, alerts with actions === */
.th-alert-action{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.th-infra{justify-content:flex-end}
.th-dash-addon{margin-top:16px;margin-bottom:16px}
.th-home-panels{display:grid;gap:16px;margin-top:16px}
.th-home-panels-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.th-home-panels-col{display:grid;gap:16px;align-content:start}
@media (max-width:991px){.th-home-panels-cols{grid-template-columns:1fr}}
.th-home-panel-body,.th-home-panel-foot{padding:12px 16px}
.th-home-panel-foot:empty{display:none}
.th-home-panel .list-group-item{background:transparent;color:inherit;border-right:0;border-left:0;border-color:var(--th-line);padding:10px 16px}
.th-home-panel .list-group-item:hover{background:var(--th-hover)}
.th-hook-output{margin-top:16px}
[dir="rtl"] .th-panel-head .fa-arrow-right,[dir="rtl"] .th-infra-link .fa-arrow-right{transform:scaleX(-1)}
/* === Account pages (batch 2): login, domain details, tickets, invoice === */
.th-auth-remember.form-check { padding-right: 0; }
.th-auth-remember .form-check-input { position: static; margin: 0; }
.th-auth-remember .form-check-label { margin: 0; }

.th-dl { margin: 0 0 16px; }
.th-dl-row { display: grid; grid-template-columns: minmax(140px, 38%) 1fr; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--th-line); }
.th-dl-row:last-child { border-bottom: 0; }
.th-dl dt { font-size: 13px; font-weight: 500; color: var(--th-muted); margin: 0; }
.th-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .th-dl-row { grid-template-columns: 1fr; } }

.th-actionlist-title { margin-top: 24px; }
.th-actionlist { list-style: none; padding: 0; margin: 0; border: 1px solid var(--th-line); border-radius: 12px; overflow: hidden; }
.th-actionlist li + li { border-top: 1px solid var(--th-line); }
.th-actionlist-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; text-decoration: none; }
.th-actionlist-item:hover, .th-actionlist-item:focus-visible { background: var(--th-hover); text-decoration: none; }
.th-actionlist-item > span { flex: 1; }
.th-actionlist-chev { color: var(--th-muted); }
/* direction-dependent icons: rtlcss leaves transforms alone, so flip explicitly */
[dir="rtl"] .th-actionlist-chev, [dir="rtl"] .th-inv-back .fa-arrow-left, [dir="rtl"] .th-auth-narrow .fa-arrow-left { transform: scaleX(-1); }

.th-pill-on-light { color: #000 !important; }
.th-pill-on-dark  { color: #fff !important; }

.th-inv-paybox { flex-wrap: wrap; }

/* Markdown editor status bar ("lines / words / saved") and the cPanel usage
   "Last updated" line follow the theme */
html[data-theme='dark'] .md-editor .md-footer, html[data-theme='dark'] .markdown-editor-status { background: var(--th-surface) !important; color: var(--th-muted); border-color: var(--th-line) !important; }
.text-info.limit-near { color: var(--th-muted) !important; }

/* =====================================================================
   BATCH 3 POLISH
   ===================================================================== */
/* MarketConnect promo/login widgets (360 Monitoring, Sitejet, ...) shown in
   product details and home panels: stock paints them white with a grey
   Bootstrap border, which stood out in dark mode. */
.mc-promo-login, .mc-promo-manage { background: var(--th-surface); border: 1px solid var(--th-line); border-radius: var(--th-radius); box-shadow: var(--th-shadow); overflow: hidden; }
.mc-promo-login .content, .mc-promo-manage .content { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; background: transparent; border: 0; box-shadow: none; margin: 0; }
.mc-promo-login .content.panel, .mc-promo-manage .content.panel { padding: 18px 20px; }
.mc-promo-login .logo img, .mc-promo-manage .logo img, .panel-mc-sso img { background: #fff; border-radius: 12px; padding: 6px; max-width: 96px; height: auto; }
.mc-promo-login .panel-heading, .mc-promo-manage .panel-heading { background: transparent; border: 0; padding: 0; }
.mc-promo-login .panel-title, .mc-promo-manage .panel-title { color: var(--th-ink); font-size: 17px; font-weight: 600; }
.mc-promo-login .panel-body, .mc-promo-manage .panel-body { padding: 0; background: transparent; }

/* Contact form: stock right-aligns labels next to inputs; on phones the
   label sits above the field, so align it to the start. */
@media (max-width: 575.98px) {
  .col-form-label.text-right { text-align: right !important; }
}

/* Newsletter opt-in switch (bootstrap-switch) in the brand colour */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { background: var(--th-accent); color: var(--th-accent-fg); }
.bootstrap-switch { border-color: var(--th-line-strong); background: var(--th-surface); }
.bootstrap-switch .bootstrap-switch-label { background: var(--th-surface); }
.bootstrap-switch .bootstrap-switch-handle-off { background: var(--th-hover); color: var(--th-ink-soft); }

/* No downloads published (hooks/th_menu_cleanup.php adds the body class):
   hide the portal-home Downloads tile with its grid column. */
.th-no-downloads [class*="col"]:has(> a.card-accent-asbestos) { display: none !important; }

/* === Cookie consent (hooks/th_consent.php) === */
.th-consent { position: fixed; inset-inline: 16px; inset-block-end: 16px; z-index: 1080; display: flex; justify-content: flex-end; pointer-events: none; }
.th-consent[hidden] { display: none; }
.th-consent-card { pointer-events: auto; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--th-surface); color: var(--th-ink); border: 1px solid var(--th-line-strong); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .18); padding: 20px; }
.th-consent-title { font-family: var(--th-display); font-size: 17px; font-weight: 700; margin: 0 0 8px; outline: none; }
.th-consent-text { font-size: 13.5px; line-height: 1.55; color: var(--th-ink-soft); margin: 0 0 14px; }
.th-consent-text a { text-decoration: underline; }
.th-consent-prefs { display: grid; gap: 12px; margin: 0 0 16px; padding-top: 12px; border-top: 1px solid var(--th-line); }
.th-consent-prefs[hidden] { display: none; }
.th-consent-cat { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 400; cursor: pointer; }
.th-consent-cat input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--th-ink); }
.th-consent-cat input:disabled { cursor: not-allowed; }
.th-consent-cat strong { display: block; font-size: 14px; color: var(--th-ink); }
.th-consent-cat small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--th-muted); }
.th-consent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.th-consent-actions .btn { flex: 1 1 auto; }
.th-consent-actions .btn[hidden] { display: none; }