/* =====================================================================
   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.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Space+Grotesk:wght@600;700&display=swap');

:root {
  --th-bg: #f7f7f4;
  --th-surface: #ffffff;
  --th-ink: #111210;
  --th-ink-soft: #44453f;
  --th-muted: #8a8b84;
  --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-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-right: 1px solid var(--th-line);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; padding: 18px 12px; z-index: 1040;
}
.th-rail-brand { display: block; padding: 6px 12px 22px; }
.th-rail-brand img { max-height: 28px; width: auto; }
.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, .th-rail .navbar-nav .nav-link {
  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 0 0 1.5rem; 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; }
.th-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.th-topbar-icon { color: var(--th-ink-soft); font-size: 15px; }
.th-topbar-icon:hover { color: var(--th-ink); }
.th-cart { position: relative; color: var(--th-ink-soft); font-size: 15px; }
.th-cart:hover { color: var(--th-ink); }
.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-left: 2px; vertical-align: top; }
.th-rail-toggle { display: none; 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 8px 4px 4px; 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-left: 0; padding-right: 0; }

.th-rail-backdrop { display: none; }
@media (max-width: 991.98px) {
  .th-rail { position: fixed; top: 0; left: 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-name { display: none; }
}

/* ===================== COMPONENTS ===================== */
.card, .panel, .card-sidebar {
  background: var(--th-surface); border: 1px solid var(--th-line);
  border-radius: var(--th-radius); box-shadow: var(--th-shadow); overflow: hidden;
}
.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; }
.input-group { flex-wrap: nowrap; }
.input-group > .form-control { min-width: 0; }
.alert { border-radius: var(--th-radius-sm); border: 1px solid var(--th-line); background: var(--th-surface); color: var(--th-ink); }

/* ===================== 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-left: 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 a, .th-locale-btn { 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); }

/* ===================== 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); }
.th-auth-brand { position: relative; overflow: hidden; background: var(--th-ink); color: var(--th-ink-contrast); padding: 44px 40px; display: flex; align-items: center; }
.th-auth-brand::before { content: ''; position: absolute; bottom: -25%; right: -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 { flex-wrap: nowrap; }
.th-auth-form .input-group > .form-control { min-width: 0; }
.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-left: 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; left: 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-left: 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_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid var(--th-line); border-radius: var(--th-radius-sm); }

/* order form icons + price */
#main-body 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" + pin reCAPTCHA */
p:has(a[href*="whmcs.com"]), p:has(a[href*="whmcompletesolution"]) { display: none !important; }
.grecaptcha-badge { position: fixed !important; bottom: 16px !important; right: 16px !important; z-index: 60; }

/* ===================== 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: right; 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-left: auto; border-collapse: collapse; }
.th-inv-metatable td { padding: 4px 0 4px 26px; font-size: 13px; text-align: right; 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-left: 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 26px 4px 9px; 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-left: 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: left; 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: right; 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: right; 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: left; }
  .th-inv-metatable { margin-left: 0; }
  .th-inv-metatable td { text-align: left; padding-left: 0; }
  .th-inv-metatable td:last-child { padding-left: 18px; }
  .th-inv-paybox { flex-direction: column; align-items: flex-start; gap: 16px; }
  .th-inv-paybox-action { margin-left: 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. */
.list-group-item i.fas, .list-group-item i.fab, .list-group-item i.far,
.card-header i.fas, .card-header i.far { color: var(--th-ink-soft) !important; }
.list-group-item.active i.fas, .list-group-item:hover i.fas { color: var(--th-accent-ink) !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-left: 18px; padding-right: 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; }
/* 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;
}
.th-tablewrap .status-active { 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-cancelled, .th-tablewrap .status-fraud, .th-tablewrap .status-expired { background: var(--th-danger-bg) !important; color: var(--th-danger) !important; }

/* 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 { 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-pendingregistration { background: var(--th-warning-bg) !important; color: var(--th-warning) !important; }
.th-tablewrap .status-redemption, .th-tablewrap .status-transferredaway, .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 { background: var(--th-success-bg) !important; color: var(--th-success) !important; }
.th-tablewrap .status-answered, .th-tablewrap .status-inprogress, .th-tablewrap .status-onhold { 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; }
.th-tablewrap .status-custom { color: #fff !important; }

/* =====================================================================
   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-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. */
html[data-theme='dark'] .form-control,
html[data-theme='dark'] .custom-select,
html[data-theme='dark'] .input-group-text {
  background: 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); }
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'] .dataTables_filter input { background-image: none; }
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. The filter input also outranks the
   .form-control rule above. */
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; }
html[data-theme='dark'] input.form-control,
html[data-theme='dark'] select.form-control,
html[data-theme='dark'] .dataTables_wrapper input {
  background-color: var(--th-surface) !important; border-color: var(--th-line-strong) !important; color: var(--th-ink) !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: #8a8b84;
  --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) — its own stylesheets hardcode light panels;
   this file loads after them on cart pages, so the dark pass lives here. */
html[data-theme='dark'] #order-standard_cart .option,
html[data-theme='dark'] #order-standard_cart .product-info,
html[data-theme='dark'] #order-standard_cart .summary-container,
html[data-theme='dark'] #order-standard_cart .account,
html[data-theme='dark'] #order-standard_cart .addon-promo-container.bg-white,
html[data-theme='dark'] #order-standard_cart .view-cart-items .item,
html[data-theme='dark'] #order-standard_cart .view-cart-tableheader {
  background: var(--th-surface) !important; color: var(--th-ink);
}
html[data-theme='dark'] #order-standard_cart .sub-heading span,
html[data-theme='dark'] #order-standard_cart span.primary-bg-color {
  background: var(--th-muted-bg) !important; color: var(--th-ink) !important;
}
html[data-theme='dark'] #order-standard_cart .field.form-control,
html[data-theme='dark'] #order-standard_cart textarea.form-control {
  background: var(--th-surface) !important; color: var(--th-ink) !important; border-color: var(--th-line-strong) !important;
}

/* ---------------------------------------------------------------------------
   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; }

.th-proj-console { background: var(--th-surface); border: 1px solid var(--th-line); border-radius: var(--th-radius); box-shadow: var(--th-shadow); overflow: hidden; }
.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;
}
html[data-theme='dark'] input.form-control { background-image: none !important; }

/* 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; }