/* ============================================================
   DebsHost WHMCS Theme — custom.css
   Exact design-token match with debshost.com
   ============================================================ */

/* ── Google Fonts: Inter ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ══════════════════════════════════════════════════════════
   1. DESIGN TOKENS  (light mode)
   ══════════════════════════════════════════════════════════ */
:root {
  --dh-bg:           #ffffff;
  --dh-bg-muted:     #f1f5f9;
  --dh-bg-elevated:  #f8fafc;
  --dh-bg-panel:     #ffffff;
  --dh-text:         #0f172a;
  --dh-text-muted:   #64748b;
  --dh-border:       #e2e8f0;
  --dh-primary:      #3066be;
  --dh-primary-hov:  #2553a4;
  --dh-shadow:       0 10px 30px rgba(15,23,42,0.07);
  --dh-radius:       0.75rem;
  --dh-radius-lg:    1rem;
  --dh-font:         'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --dh-nav-h:        72px;
}

/* ══════════════════════════════════════════════════════════
   2. RESET / BASE
   ══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.dh-body {
  font-family: var(--dh-font) !important;
  background: var(--dh-bg) !important;
  color: var(--dh-text) !important;
  margin: 0;
  padding: 0;
}

/* Wipe any Nexus chrome we don't want */
body > .navbar:not(.dh-header),
body > header:not(.dh-header),
.page-head,
.header-lined,
#secondary-nav,
.navbar-default,
.whmcs-page-title {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   3. UTILITY
   ══════════════════════════════════════════════════════════ */
.dh-shell {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Logo visibility — light logo only (dark mode disabled) */
img.dh-logo--dark  { display: none !important; }
img.dh-logo--light { display: block !important; }

/* ══════════════════════════════════════════════════════════
   4. BUTTONS
   ══════════════════════════════════════════════════════════ */
.dh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: none;
  border-radius: var(--dh-radius) !important;
  padding: 0.55rem 1rem;
  font-family: var(--dh-font) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.4;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.dh-btn--primary {
  background: var(--dh-primary) !important;
  color: #fff !important;
}
.dh-btn--primary:hover {
  background: var(--dh-primary-hov) !important;
  color: #fff !important;
}

.dh-btn--dark {
  background: #0f172a !important;
  color: #fff !important;
}
.dh-btn--dark:hover {
  background: #1e293b !important;
  color: #fff !important;
}

.dh-btn--outline {
  background: var(--dh-bg) !important;
  color: var(--dh-text) !important;
  border: 1px solid var(--dh-border) !important;
}
.dh-btn--outline:hover {
  border-color: var(--dh-primary) !important;
  color: var(--dh-primary) !important;
}

.dh-btn--full { width: 100%; padding: 0.7rem 1rem; font-size: 1rem !important; }

/* WHMCS .btn overrides */
.btn-primary, .btn-success { background: var(--dh-primary) !important; border-color: var(--dh-primary) !important; border-radius: var(--dh-radius) !important; font-family: var(--dh-font) !important; font-weight: 600 !important; }
.btn-primary:hover, .btn-success:hover { background: var(--dh-primary-hov) !important; border-color: var(--dh-primary-hov) !important; }
.btn-default { background: var(--dh-bg) !important; color: var(--dh-text) !important; border: 1px solid var(--dh-border) !important; border-radius: var(--dh-radius) !important; font-family: var(--dh-font) !important; }
.btn-default:hover { border-color: var(--dh-primary) !important; color: var(--dh-primary) !important; }

/* ══════════════════════════════════════════════════════════
   5. HEADER / NAVIGATION
   ══════════════════════════════════════════════════════════ */
.dh-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--dh-nav-h);
  background: color-mix(in srgb, var(--dh-bg) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dh-border);
}

.dh-header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--dh-nav-h);
}

/* Logo */
.dh-logo-link { flex-shrink: 0; line-height: 0; }
.dh-logo-img  { height: 60px; width: auto; display: block; }

/* Desktop nav */
.dh-nav {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}

/* Suppress ALL Bootstrap / Nexus navbar styles inside .dh-nav */
.dh-nav .navbar-nav,
.dh-nav ul.nav,
.dh-nav ul {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  flex-wrap: nowrap !important;
}

.dh-nav .navbar-nav > li,
.dh-nav ul > li,
.dh-nav li {
  float: none !important;
  position: relative;
}

/* Nav links */
.dh-nav .navbar-nav > li > a,
.dh-nav ul > li > a,
.dh-nav li > a,
.dh-nav__link {
  display: inline-flex !important;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.65rem !important;
  font-family: var(--dh-font) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--dh-text) !important;
  text-decoration: none !important;
  border-radius: 0.5rem;
  transition: color 0.2s, opacity 0.2s;
  background: none !important;
  white-space: nowrap;
}

.dh-nav .navbar-nav > li > a:hover,
.dh-nav ul > li > a:hover,
.dh-nav li > a:hover,
.dh-nav__link:hover {
  color: var(--dh-primary) !important;
  background: none !important;
}

/* Active nav state */
.dh-nav .navbar-nav > li.active > a,
.dh-nav li.active > a {
  color: var(--dh-primary) !important;
  background: none !important;
  font-weight: 600 !important;
}

/* Caret in WHMCS nav */
.dh-nav .caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: middle;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-bottom: 0;
}

/* WHMCS dropdown panels inside nav */
.dh-nav .dropdown-menu,
.dh-nav ul ul {
  display: none !important;
  flex-direction: column !important;
  position: absolute !important;
  /* Sit flush under the nav item — the ::before bridge covers the gap visually */
  top: 100% !important;
  left: 0 !important;
  min-width: 200px;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius-lg) !important;
  box-shadow: 0 8px 30px rgba(15,23,42,0.12), 0 2px 8px rgba(15,23,42,0.06) !important;
  /* 8px top padding acts as invisible hover bridge so cursor stays in range */
  padding: 8px 0.5rem 0.5rem !important;
  z-index: 1001;
  list-style: none;
  margin: 0;
}

/* Transparent bridge above each nav dropdown —
   extends hover area upward so mouse doesn't leave the li while travelling down */
.dh-nav li > .dropdown-menu::before,
.dh-nav li > ul::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
  background: transparent;
}

.dh-nav li:hover > .dropdown-menu,
.dh-nav li.open > .dropdown-menu,
.dh-nav li:hover > ul,
.dh-nav .open > .dropdown-menu {
  display: flex !important;
}

.dh-nav .dropdown-menu > li > a,
.dh-nav ul ul > li > a {
  display: block !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--dh-text) !important;
  white-space: nowrap;
  background: none !important;
  text-decoration: none !important;
}

.dh-nav .dropdown-menu > li > a:hover,
.dh-nav ul ul > li > a:hover {
  background: var(--dh-bg-muted) !important;
  color: var(--dh-primary) !important;
}

/* ── Right-side header actions ── */
.dh-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Cart button */
.dh-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--dh-radius);
  color: var(--dh-text);
  text-decoration: none;
  border: 1px solid var(--dh-border);
  background: var(--dh-bg);
  transition: border-color 0.2s, color 0.2s;
}
.dh-cart-btn:hover { border-color: var(--dh-primary); color: var(--dh-primary); }
.dh-cart-count {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 17px; height: 17px;
  background: var(--dh-primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

/* Icon button (bell) */
.dh-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--dh-border);
  border-radius: var(--dh-radius);
  background: var(--dh-bg);
  color: var(--dh-text);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.dh-icon-btn:hover { border-color: var(--dh-primary); color: var(--dh-primary); }

/* Account button */
.dh-account-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--dh-border);
  border-radius: var(--dh-radius);
  background: var(--dh-bg);
  color: var(--dh-text);
  font-family: var(--dh-font) !important;
  font-size: 0.875rem; font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s;
}
.dh-account-btn:hover { border-color: var(--dh-primary); }

.dh-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--dh-primary);
  color: #fff;
  font-size: 0.7rem; font-weight: 700;
  flex-shrink: 0;
}

.dh-account-name {
  max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--dh-text);
}

.dh-chevron { color: var(--dh-text-muted); flex-shrink: 0; }

/* Dropdown wrapper */
.dh-dropdown-wrap {
  position: relative;
}

/* Panel shared by bell + account — solid background (Nexus/Bootstrap can override otherwise) */
.dh-dropdown-panel,
.dh-dropdown-wrap .dropdown-menu.dh-dropdown-panel,
.dropdown-menu.dh-dropdown-panel {
  display: none;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 200px;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--dh-radius-lg) !important;
  box-shadow: 0 8px 30px rgba(15,23,42,0.12), 0 2px 8px rgba(15,23,42,0.06) !important;
  padding: 0.5rem !important;
  z-index: 1050;
  float: none !important;
}

/* Force opaque background — highest specificity so theme cannot override */
body.dh-body .dh-header .dh-dropdown-wrap .dropdown-menu.dh-dropdown-panel,
body .dh-header .dh-dropdown-panel,
body .dh-dropdown-wrap .dropdown-menu.dh-dropdown-panel,
body .dropdown-menu.dh-dropdown-panel {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Failsafe: white block behind content so dropdown is never transparent */
.dh-dropdown-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  border-radius: inherit;
  z-index: -1;
}

/* Show states — Bootstrap 4 adds .show to the menu, Bootstrap 3 adds .open to parent */
.dh-dropdown-wrap.open .dh-dropdown-panel,
.dh-dropdown-wrap .dh-dropdown-panel.show,
.dh-dropdown-wrap.show .dh-dropdown-panel {
  display: block !important;
}

.dh-dropdown-panel--account { min-width: 220px; }

/* ── Account dropdown panel ── */
.dh-dropdown-panel--account {
  padding: 0.35rem !important;
  min-width: 220px;
}

/* "Hello, Name!" header row produced by WHMCS secondary navbar */
.dh-dropdown-panel--account .navbar-nav > li:first-child > a,
.dh-dropdown-panel--account ul > li:first-child > a {
  font-weight: 700 !important;
  color: var(--dh-text) !important;
  font-size: 0.825rem !important;
  padding: 0.5rem 0.875rem 0.625rem !important;
  border-bottom: 1px solid var(--dh-border) !important;
  border-radius: 0.5rem 0.5rem 0 0 !important;
  margin-bottom: 0.25rem !important;
  background: var(--dh-bg-muted) !important;
  display: block !important;
  white-space: nowrap;
}
/* Remove the Bootstrap caret from the greeting link */
.dh-dropdown-panel--account ul > li:first-child > a .caret { display: none !important; }

/* Style WHMCS secondary navbar inside account dropdown */
.dh-dropdown-panel--account .navbar-nav,
.dh-dropdown-panel--account ul {
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 1px !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

.dh-dropdown-panel--account li > a,
.dh-dropdown-panel--account .dropdown-menu a {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem !important;
  border-radius: 0.5rem !important;
  font-family: var(--dh-font) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--dh-text) !important;
  text-decoration: none !important;
  background: none !important;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.dh-dropdown-panel--account li > a:hover {
  background: var(--dh-bg-muted) !important;
  color: var(--dh-primary) !important;
}

/* Logout link — visually separated */
.dh-dropdown-panel--account ul > li:last-child > a {
  margin-top: 0.35rem !important;
  padding-top: 0.6rem !important;
  border-top: 1px solid var(--dh-border) !important;
  border-radius: 0 0 0.5rem 0.5rem !important;
  color: #dc2626 !important;
}
.dh-dropdown-panel--account ul > li:last-child > a:hover {
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

.dh-dropdown-item {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--dh-text);
  text-decoration: none;
}
.dh-dropdown-item:hover { background: var(--dh-bg-muted); color: var(--dh-primary); }
.dh-dropdown-item--muted { color: var(--dh-text-muted); }

/* Admin return pill */
.dh-admin-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  background: #f59e0b;
  color: #fff !important;
  border-radius: var(--dh-radius);
  font-size: 0.8rem; font-weight: 700;
  text-decoration: none !important;
}

/* Mobile menu via <details> */
.dh-mobile-details { display: none; position: relative; }
.dh-mobile-summary { list-style: none; }
.dh-mobile-summary::-webkit-details-marker { display: none; }

.dh-mobile-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid var(--dh-border);
  border-radius: var(--dh-radius-lg);
  background: var(--dh-bg-panel);
  box-shadow: var(--dh-shadow);
  padding: 0.75rem;
  z-index: 1003;
}

.dh-surface {
  background: var(--dh-bg-panel);
  border: 1px solid var(--dh-border);
  box-shadow: var(--dh-shadow);
}

/* Mobile panel nav links */
.dh-mobile-panel .navbar-nav,
.dh-mobile-panel ul {
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
  margin: 0 !important; padding: 0 !important; gap: 2px !important;
  background: none !important; box-shadow: none !important; border: none !important;
}
.dh-mobile-panel li > a,
.dh-mobile-link {
  display: block !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.5rem;
  font-size: 0.9rem; font-weight: 500;
  color: var(--dh-text) !important;
  text-decoration: none !important;
  background: none !important;
}
.dh-mobile-panel li > a:hover,
.dh-mobile-link:hover { background: var(--dh-bg-muted) !important; color: var(--dh-primary) !important; }

.dh-mobile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--dh-border);
}
.dh-mobile-actions .dh-btn { justify-content: center; }

/* Responsive breakpoints */
@media (max-width: 991.98px) {
  .dh-nav,
  .dh-header-actions .dh-btn { display: none !important; }
  .dh-mobile-details { display: block; }
  .dh-header-actions { gap: 0.4rem; }
}

@media (min-width: 992px) {
  .dh-mobile-details { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   6. FOOTER
   ══════════════════════════════════════════════════════════ */
.dh-footer {
  border-top: 2px solid var(--dh-border);
  background: var(--dh-bg-elevated);
  padding: 3.5rem 0 0;
  margin-top: 4rem;
}

.dh-footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .dh-footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .dh-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.dh-footer-brand { display: flex; flex-direction: column; gap: 1rem; }

.dh-footer-logo-link { display: block; line-height: 0; }
.dh-footer-logo { height: 60px; width: auto; }
img.dh-footer-logo.dh-logo--light { display: block !important; }
img.dh-footer-logo.dh-logo--dark  { display: none !important; }

.dh-footer-tagline {
  font-size: 0.875rem;
  color: var(--dh-text-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 30ch;
}

.dh-footer-heading {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--dh-text) !important;
  margin: 0 0 1rem !important;
}

.dh-footer-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.dh-footer-list li { font-size: 0.875rem; color: var(--dh-text-muted); }
.dh-footer-list a { color: var(--dh-text-muted); text-decoration: none; transition: color 0.2s; }
.dh-footer-list a:hover { color: var(--dh-primary); }

.dh-footer-bottom {
  margin-top: 2.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--dh-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--dh-text-muted);
}

.dh-footer-locale { color: var(--dh-text-muted); text-decoration: none; }
.dh-footer-locale:hover { color: var(--dh-primary); }

/* ══════════════════════════════════════════════════════════
   7. AUTH PAGES  (login / register / password reset)
   ══════════════════════════════════════════════════════════ */
.dh-is-auth {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f4ff 0%, #f1f5f9 50%, #eef2ff 100%) !important;
}

.dh-auth-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
}

.dh-auth-box {
  width: 100%;
  max-width: 440px;
}

.dh-auth-box--wide { max-width: 680px; }

.dh-auth-logo {
  text-align: center;
  margin-bottom: 1.5rem;
}
.dh-auth-logo a { display: inline-block; line-height: 0; }
.dh-auth-logo .dh-logo-img { height: 56px; width: auto; }
.dh-auth-logo img.dh-logo--light { display: block !important; }
.dh-auth-logo img.dh-logo--dark  { display: none !important; }

.dh-auth-card {
  background: var(--dh-bg-panel);
  border: 1px solid var(--dh-border);
  border-radius: 1.25rem;
  padding: 2rem 2.25rem;
  box-shadow: 0 20px 60px rgba(15,23,42,0.1);
}

.dh-auth-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--dh-text) !important;
  margin: 0 0 0.25rem !important;
}

.dh-auth-sub {
  font-size: 0.9rem;
  color: var(--dh-text-muted);
  margin: 0 0 1.5rem;
}

/* Input fields */
.dh-field-group {
  position: relative;
  margin-bottom: 1rem;
}

.dh-field-icon {
  position: absolute;
  top: 50%; left: 0.875rem;
  transform: translateY(-50%);
  color: var(--dh-text-muted);
  pointer-events: none;
  display: flex; align-items: center;
}

.dh-field-input,
.dh-field-group input,
.dh-field-group .form-control {
  width: 100% !important;
  padding: 0.7rem 0.875rem 0.7rem 2.75rem !important;
  font-family: var(--dh-font) !important;
  font-size: 0.95rem !important;
  color: var(--dh-text) !important;
  background: var(--dh-bg) !important;
  border: 2px solid var(--dh-border) !important;
  border-radius: var(--dh-radius) !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dh-field-input:focus,
.dh-field-group input:focus {
  border-color: var(--dh-primary) !important;
  box-shadow: 0 0 0 3px rgba(48,102,190,0.15) !important;
}

.dh-auth-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 0.5rem;
}

.dh-remember {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.875rem; color: var(--dh-text-muted);
  cursor: pointer; user-select: none;
}
.dh-remember input[type=checkbox] { accent-color: var(--dh-primary); }

.dh-forgot-link {
  font-size: 0.875rem; font-weight: 600;
  color: var(--dh-primary);
  text-decoration: none;
}
.dh-forgot-link:hover { text-decoration: underline; color: var(--dh-primary-hov); }

.dh-captcha { margin-bottom: 1.25rem; }

.dh-auth-alt {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--dh-text-muted);
}
.dh-auth-alt a { color: var(--dh-primary); font-weight: 600; text-decoration: none; }
.dh-auth-alt a:hover { text-decoration: underline; }

/* Panels inside wide auth box (e.g. register page two-column) */
.dh-auth-box--wide .panel {
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius-lg) !important;
  background: var(--dh-bg-panel) !important;
  box-shadow: none !important;
}
.dh-auth-box--wide .panel-heading {
  background: var(--dh-bg-muted) !important;
  border-bottom: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius-lg) var(--dh-radius-lg) 0 0 !important;
  padding: 1rem 1.25rem !important;
  font-family: var(--dh-font) !important;
  font-weight: 700 !important; color: var(--dh-text) !important;
}
.dh-auth-box--wide .panel-body { padding: 1.5rem !important; }

/* ══════════════════════════════════════════════════════════
   8. MAIN CONTENT AREA
   ══════════════════════════════════════════════════════════ */
.dh-main-content {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

/* Override Nexus content background */
#main-body,
.content-container,
.page-header + .container {
  background: var(--dh-bg) !important;
}

/* ══════════════════════════════════════════════════════════
   9. PANELS / CARDS  (global WHMCS .panel)
   ══════════════════════════════════════════════════════════ */
.panel {
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius-lg) !important;
  background: var(--dh-bg-panel) !important;
  box-shadow: var(--dh-shadow) !important;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.panel-heading {
  background: var(--dh-bg-elevated) !important;
  border-bottom: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius-lg) var(--dh-radius-lg) 0 0 !important;
  padding: 0.875rem 1.25rem !important;
  color: var(--dh-text) !important;
  font-family: var(--dh-font) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}

.panel-heading h3,
.panel-heading .panel-title {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: var(--dh-text) !important;
  margin: 0 !important;
}

.panel-body { padding: 1.25rem !important; }

.panel-footer {
  background: var(--dh-bg-muted) !important;
  border-top: 1px solid var(--dh-border) !important;
  padding: 0.875rem 1.25rem !important;
}

/* ══════════════════════════════════════════════════════════
   10. DASHBOARD — stat tiles
   ══════════════════════════════════════════════════════════ */
.client-home-summary .panel,
.stats-container .panel,
[class*="dashboard-stats"] .panel {
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius-lg) !important;
  background: var(--dh-bg-panel) !important;
  box-shadow: var(--dh-shadow) !important;
  text-align: center;
  padding: 1.5rem 1rem !important;
  transition: transform 0.2s, box-shadow 0.2s;
}
.client-home-summary .panel:hover,
.stats-container .panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(15,23,42,0.1) !important;
}

/* Big number inside stat tile */
.client-home-summary .panel h2,
.stats-container .panel h2,
.stat-count {
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  color: var(--dh-primary) !important;
  margin: 0.25rem 0 !important;
  font-family: var(--dh-font) !important;
}

.client-home-summary .panel p,
.stats-container .panel p,
.stat-label {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dh-text-muted) !important;
  margin: 0 !important;
}

.client-home-summary .panel img,
.stats-container .panel img {
  width: 2.5rem; height: 2.5rem;
  filter: none;
  opacity: 0.6;
  margin-bottom: 0.5rem;
}

/* ══════════════════════════════════════════════════════════
   11. DASHBOARD — action shortcuts
   ══════════════════════════════════════════════════════════ */
.home-shortcuts,
.shortcut-icons {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem;
}

.shortcut-icon,
.home-shortcut {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem 0.75rem !important;
  background: var(--dh-bg-panel) !important;
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius-lg) !important;
  text-align: center !important;
  text-decoration: none !important;
  color: var(--dh-text) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  gap: 0.5rem;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.shortcut-icon:hover,
.home-shortcut:hover {
  border-color: var(--dh-primary) !important;
  box-shadow: 0 4px 16px rgba(48,102,190,0.12) !important;
  transform: translateY(-2px);
  color: var(--dh-primary) !important;
}

.shortcut-icon i,
.home-shortcut i {
  font-size: 1.5rem;
  color: var(--dh-primary);
}

/* ══════════════════════════════════════════════════════════
   12. SIDEBAR  (left client-home sidebar) — compact redesign
   ══════════════════════════════════════════════════════════ */

/* Base panel — card style with left accent */
.dh-sidebar .panel,
.sidebar .panel,
.sidebar-panel,
.panel-sidebar,
.col-md-3 .panel,
.client-home-info .panel,
.widget .panel,
.panel-group .panel {
  border: 1px solid var(--dh-border) !important;
  border-left: 3px solid var(--dh-primary) !important;
  border-radius: var(--dh-radius-lg) !important;
  background: var(--dh-bg-panel) !important;
  box-shadow: 0 2px 12px rgba(15,23,42,0.05) !important;
  margin-bottom: 0.875rem !important;
  overflow: hidden;
}

/* Panel heading bar — compact, muted */
.dh-sidebar .panel-heading,
.sidebar .panel-heading,
.col-md-3 .panel-heading,
.client-home-info .panel-heading,
.widget .panel-heading,
.panel-group .panel-heading {
  background: var(--dh-bg-muted) !important;
  border-bottom: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius-lg) var(--dh-radius-lg) 0 0 !important;
  padding: 0.5rem 0.75rem !important;
  min-height: auto !important;
}

/* Nuclear: every heading element in sidebar — force small label style */
.col-md-3 .panel-heading,
.col-md-3 .panel-heading h1,
.col-md-3 .panel-heading h2,
.col-md-3 .panel-heading h3,
.col-md-3 .panel-heading h4,
.col-md-3 .panel-heading h5,
.col-md-3 .panel-heading .panel-title,
.col-md-3 .panel-heading a,
.col-md-3 .panel-heading span,
.col-md-3 .panel-heading div,
.dh-sidebar .panel-heading,
.dh-sidebar .panel-heading h1,
.dh-sidebar .panel-heading h2,
.dh-sidebar .panel-heading h3,
.dh-sidebar .panel-heading h4,
.dh-sidebar .panel-heading h5,
.dh-sidebar .panel-heading .panel-title,
.dh-sidebar .panel-heading a,
.dh-sidebar .panel-heading span,
.dh-sidebar .panel-heading div,
.widget .panel-heading,
.widget .panel-heading h3,
.widget .panel-heading .panel-title,
.widget .panel-heading a,
.widget .panel-heading span,
.panel-group .panel-heading,
.panel-group .panel-heading h3,
.panel-group .panel-heading .panel-title,
.panel-group .panel-heading a,
.panel-group .panel-heading span {
  font-family: var(--dh-font) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: var(--dh-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  text-decoration: none !important;
}

/* Heading row layout — flex so icon + text + chevron align */
.col-md-3 .panel-heading h3,
.col-md-3 .panel-heading h4,
.col-md-3 .panel-heading .panel-title,
.dh-sidebar .panel-heading h3,
.dh-sidebar .panel-heading h4,
.dh-sidebar .panel-heading .panel-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  width: 100% !important;
}

.col-md-3 .panel-heading h3 > a,
.col-md-3 .panel-heading h4 > a,
.col-md-3 .panel-heading .panel-title > a,
.dh-sidebar .panel-heading h3 > a,
.dh-sidebar .panel-heading h4 > a,
.dh-sidebar .panel-heading .panel-title > a {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  flex: 1 !important;
  min-width: 0 !important;
  font-size: 0.7rem !important;
  color: var(--dh-text-muted) !important;
}
.col-md-3 .panel-heading h3 > a:hover,
.col-md-3 .panel-heading h4 > a:hover,
.dh-sidebar .panel-heading h3 > a:hover,
.dh-sidebar .panel-heading h4 > a:hover {
  color: var(--dh-text) !important;
}

/* Icons in sidebar heading — small and muted */
.col-md-3 .panel-heading .fa,
.col-md-3 .panel-heading .glyphicon,
.dh-sidebar .panel-heading .fa,
.dh-sidebar .panel-heading .glyphicon,
.widget .panel-heading .fa,
.panel-group .panel-heading .fa {
  font-size: 0.7rem !important;
  width: 1em !important;
  color: var(--dh-text-muted) !important;
  opacity: 0.85;
  flex-shrink: 0;
}

/* Chevron / pull-right in heading */
.col-md-3 .panel-heading .pull-right,
.dh-sidebar .panel-heading .pull-right {
  font-size: 0.6rem !important;
  color: var(--dh-text-muted) !important;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Panel body */
.dh-sidebar .panel-body,
.sidebar .panel-body,
.col-md-3 .panel-body,
.client-home-info .panel-body,
.widget .panel-body {
  padding: 0.875rem 1rem !important;
  background: var(--dh-bg-panel) !important;
}

/* Update button inside "Your Info" sidebar panel */
.col-md-3 .btn-primary,
.dh-sidebar .btn-primary {
  background: var(--dh-primary) !important;
  border-color: var(--dh-primary) !important;
  border-radius: var(--dh-radius) !important;
  font-size: 0.825rem !important;
  font-weight: 600 !important;
  padding: 0.45rem 0.875rem !important;
  width: 100%;
}

/* List group items inside sidebar */
.dh-sidebar .list-group,
.sidebar .list-group,
.col-md-3 .list-group {
  margin: 0 !important;
  border-radius: 0 !important;
}

.dh-sidebar .list-group-item,
.sidebar .list-group-item,
.col-md-3 .list-group-item {
  background: transparent !important;
  border-left: none !important;
  border-right: none !important;
  border-color: var(--dh-border) !important;
  color: var(--dh-text) !important;
  font-family: var(--dh-font) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.6rem 1rem !important;
  transition: background 0.15s, color 0.15s;
}
.dh-sidebar .list-group-item:hover,
.sidebar .list-group-item:hover,
.col-md-3 .list-group-item:hover {
  background: var(--dh-bg-muted) !important;
  color: var(--dh-primary) !important;
}
.dh-sidebar .list-group-item.active,
.sidebar .list-group-item.active,
.col-md-3 .list-group-item.active {
  background: var(--dh-primary) !important;
  border-color: var(--dh-primary) !important;
  color: #fff !important;
}

/* "New Contact…" add button in Contacts panel */
.col-md-3 .btn-default,
.dh-sidebar .btn-default {
  background: var(--dh-bg) !important;
  color: var(--dh-text) !important;
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius) !important;
  font-size: 0.825rem !important;
  font-weight: 600 !important;
  width: 100%;
  text-align: center;
  padding: 0.45rem 0.875rem !important;
  transition: border-color 0.2s, color 0.2s;
}
.col-md-3 .btn-default:hover,
.dh-sidebar .btn-default:hover {
  border-color: var(--dh-primary) !important;
  color: var(--dh-primary) !important;
}

/* Shortcuts widget grid */
.col-md-3 .shortcut-icons,
.col-md-3 .home-shortcuts {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.4rem !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   13. FORMS  (global)
   ══════════════════════════════════════════════════════════ */
.form-control {
  font-family: var(--dh-font) !important;
  font-size: 0.9rem !important;
  color: var(--dh-text) !important;
  background: var(--dh-bg) !important;
  border: 2px solid var(--dh-border) !important;
  border-radius: var(--dh-radius) !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s;
  padding: 0.55rem 0.875rem !important;
}
.form-control:focus {
  border-color: var(--dh-primary) !important;
  box-shadow: 0 0 0 3px rgba(48,102,190,0.15) !important;
  background: var(--dh-bg) !important;
}

.form-group label,
.control-label {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--dh-text) !important;
  margin-bottom: 0.35rem !important;
}

.input-group-addon {
  background: var(--dh-bg-muted) !important;
  border: 2px solid var(--dh-border) !important;
  border-radius: var(--dh-radius) !important;
  color: var(--dh-text-muted) !important;
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  padding-right: 2rem !important;
}

/* ══════════════════════════════════════════════════════════
   14. TABLES
   ══════════════════════════════════════════════════════════ */
.table {
  font-family: var(--dh-font) !important;
  font-size: 0.875rem !important;
  color: var(--dh-text) !important;
  background: transparent !important;
}

.table > thead > tr > th {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dh-text-muted) !important;
  border-bottom: 2px solid var(--dh-border) !important;
  padding: 0.875rem 1rem !important;
  background: var(--dh-bg-muted) !important;
}

.table > tbody > tr > td {
  padding: 0.875rem 1rem !important;
  border-bottom: 1px solid var(--dh-border) !important;
  vertical-align: middle !important;
  color: var(--dh-text) !important;
}

.table-striped > tbody > tr:nth-child(odd) > td { background: var(--dh-bg-muted) !important; }
.table > tbody > tr:hover > td { background: rgba(48,102,190,0.04) !important; }

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border-color: var(--dh-border) !important;
}

/* ══════════════════════════════════════════════════════════
   15. ALERTS & FLASH MESSAGES
   ══════════════════════════════════════════════════════════ */
.alert {
  border-radius: var(--dh-radius) !important;
  font-family: var(--dh-font) !important;
  font-size: 0.9rem !important;
  border-left-width: 4px;
}
.alert-success { background: #f0fdf4 !important; border-color: #16a34a !important; color: #15803d !important; }
.alert-danger,
.alert-error   { background: #fef2f2 !important; border-color: #dc2626 !important; color: #b91c1c !important; }
.alert-warning { background: #fffbeb !important; border-color: #f59e0b !important; color: #b45309 !important; }
.alert-info    { background: #eff6ff !important; border-color: var(--dh-primary) !important; color: var(--dh-primary) !important; }

/* ══════════════════════════════════════════════════════════
   16. BADGES / LABELS
   ══════════════════════════════════════════════════════════ */
.label, .badge {
  font-family: var(--dh-font) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  border-radius: 999px !important;
  padding: 0.25em 0.65em !important;
}

.label-success, .badge-success, .label-active, .badge-active {
  background: #16a34a !important; color: #fff !important;
}
.label-warning, .badge-warning, .label-suspended, .badge-suspended {
  background: #f59e0b !important; color: #fff !important;
}
.label-danger, .badge-danger, .label-terminated, .badge-terminated {
  background: #dc2626 !important; color: #fff !important;
}
.label-info, .badge-info {
  background: var(--dh-primary) !important; color: #fff !important;
}
.label-default, .badge-default {
  background: var(--dh-bg-muted) !important; color: var(--dh-text-muted) !important;
}

/* ══════════════════════════════════════════════════════════
   17. BREADCRUMBS
   ══════════════════════════════════════════════════════════ */
.breadcrumb {
  background: transparent !important;
  padding: 0.35rem 0 !important;
  margin-bottom: 1.25rem;
  font-size: 0.8rem;
  border-radius: 0 !important;
}
.breadcrumb > li + li::before { color: var(--dh-text-muted); }
.breadcrumb > li > a { color: var(--dh-primary); text-decoration: none; }
.breadcrumb > li.active { color: var(--dh-text-muted); }

/* ══════════════════════════════════════════════════════════
   18. TABS
   ══════════════════════════════════════════════════════════ */
.nav-tabs {
  border-bottom: 2px solid var(--dh-border) !important;
  margin-bottom: 1.5rem;
}
.nav-tabs > li > a {
  font-family: var(--dh-font) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--dh-text-muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px;
  padding: 0.65rem 1rem !important;
  border-radius: 0 !important;
  background: none !important;
  transition: color 0.2s;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  color: var(--dh-primary) !important;
  border-bottom-color: var(--dh-primary) !important;
  background: none !important;
}
.nav-tabs > li > a:hover { color: var(--dh-primary) !important; background: none !important; }

/* ══════════════════════════════════════════════════════════
   19. PAGINATION
   ══════════════════════════════════════════════════════════ */
.pagination > li > a,
.pagination > li > span {
  font-family: var(--dh-font) !important;
  font-size: 0.875rem !important;
  color: var(--dh-text) !important;
  background: var(--dh-bg) !important;
  border: 1px solid var(--dh-border) !important;
  transition: background 0.2s, color 0.2s;
}
.pagination > li > a:hover { background: var(--dh-bg-muted) !important; color: var(--dh-primary) !important; }
.pagination > .active > a,
.pagination > .active > span {
  background: var(--dh-primary) !important;
  border-color: var(--dh-primary) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════
   20. INVOICES
   ══════════════════════════════════════════════════════════ */
.invoice-header,
.invoice-box { background: var(--dh-bg-panel) !important; color: var(--dh-text) !important; }

/* ══════════════════════════════════════════════════════════
   21. MODAL
   ══════════════════════════════════════════════════════════ */
.modal-content {
  background: var(--dh-bg-panel) !important;
  border: 1px solid var(--dh-border) !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 25px 80px rgba(15,23,42,0.15) !important;
}
.modal-header {
  border-bottom: 1px solid var(--dh-border) !important;
  padding: 1.25rem 1.5rem !important;
}
.modal-header .modal-title {
  font-family: var(--dh-font) !important;
  font-weight: 700 !important;
  color: var(--dh-text) !important;
}
.modal-body { padding: 1.5rem !important; color: var(--dh-text) !important; }
.modal-footer { border-top: 1px solid var(--dh-border) !important; padding: 1rem 1.5rem !important; }
.modal-label { font-size: 0.8rem; font-weight: 600; color: var(--dh-text-muted); margin-bottom: 0.35rem; }
.dh-modal-label { font-size: 0.8rem; font-weight: 600; color: var(--dh-text); margin: 0.75rem 0 0.35rem; }

.list-group-item {
  background: var(--dh-bg-panel) !important;
  border-color: var(--dh-border) !important;
  color: var(--dh-text) !important;
  font-family: var(--dh-font) !important;
  font-size: 0.875rem !important;
}
.list-group-item.active {
  background: var(--dh-primary) !important;
  border-color: var(--dh-primary) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════
   22. DOMAIN SEARCH (WHMCS built-in)
   ══════════════════════════════════════════════════════════ */
.domain-checker-container,
.domain-search-container {
  background: var(--dh-bg-panel) !important;
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius-lg) !important;
  box-shadow: var(--dh-shadow) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem;
}

/* ══════════════════════════════════════════════════════════
   23. HEADINGS in client area
   ══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--dh-font) !important;
  color: var(--dh-text) !important;
  font-weight: 700;
}

/* Section-level heading bars */
.section-title,
.clientareahome h2,
.content-center h2 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--dh-text) !important;
}

p, span, li, td, th, label, input, select, textarea, a {
  font-family: var(--dh-font) !important;
}

a { color: var(--dh-primary); transition: color 0.2s; }
a:hover { color: var(--dh-primary-hov); }

/* ══════════════════════════════════════════════════════════
   24. ADMIN RETURN BANNER
   ══════════════════════════════════════════════════════════ */
.dh-admin-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #f59e0b;
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.85rem; font-weight: 700;
  z-index: 9999;
}
.dh-admin-banner a { color: #fff !important; text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   25. SHOPPING CART  (order form)
   ══════════════════════════════════════════════════════════ */
.order-step .btn-primary,
.shopping-cart .btn-primary {
  background: var(--dh-primary) !important;
  border-color: var(--dh-primary) !important;
  border-radius: var(--dh-radius) !important;
}

/* ══════════════════════════════════════════════════════════
   26. MISC UTILITIES
   ══════════════════════════════════════════════════════════ */
.text-muted { color: var(--dh-text-muted) !important; }

hr { border-top: 1px solid var(--dh-border) !important; }

.well {
  background: var(--dh-bg-muted) !important;
  border: 1px solid var(--dh-border) !important;
  border-radius: var(--dh-radius) !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════
   27. SERVICE / TICKET / INVOICE LIST PANELS
   ══════════════════════════════════════════════════════════ */
.service-list .service-row,
.table-list tr { transition: background 0.15s; }
.service-list .service-row:hover { background: var(--dh-bg-muted) !important; }

/* ══════════════════════════════════════════════════════════
   28. ANNOUNCEMENTS
   ══════════════════════════════════════════════════════════ */
.announcement-single .announcement-title,
.announcement h2 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--dh-text) !important;
}

/* ══════════════════════════════════════════════════════════
   29.  SCROLL-BAR  (subtle)
   ══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--dh-bg-muted); }
::-webkit-scrollbar-thumb { background: var(--dh-border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--dh-text-muted); }


/* ============================================================
   FIX 1: Make ALL dropdown menus opaque (WHMCS/Nexus override)
   ============================================================ */
   body.dh-body .dropdown-menu {
    background: var(--dh-bg-panel) !important;
    background-color: var(--dh-bg-panel) !important;
    background-image: none !important;
    border: 1px solid var(--dh-border) !important;
    border-radius: var(--dh-radius-lg) !important;
    box-shadow: 0 8px 30px rgba(15,23,42,0.12), 0 2px 8px rgba(15,23,42,0.06) !important;
    opacity: 1 !important;
  }
  
  /* Ensure the menu items don't “inherit” weird transparency */
  body.dh-body .dropdown-menu > li > a {
    background: transparent !important;
  }
  body.dh-body .dropdown-menu > li > a:hover {
    background: var(--dh-bg-muted) !important;
  }
  
  /* Some themes use .dropdown-menu-right */
  body.dh-body .dropdown-menu-right {
    right: 0 !important;
    left: auto !important;
  }

  /* Make account dropdown feel more DebsHost */
body.dh-body .dropdown-menu {
  background: var(--dh-bg-panel) !important;
  border: 1px solid var(--dh-border) !important;
  border-radius: 14px !important;
  padding: 10px !important;
}

body.dh-body .dropdown-menu > li > a {
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-weight: 600 !important;
  color: var(--dh-text) !important;
}

body.dh-body .dropdown-menu > li > a:hover {
  background: var(--dh-bg-muted) !important;
  color: var(--dh-primary) !important;
}

  
  /* ============================================================
   FIX 2: Sidebar heading sizing (covers col-sm-3 + all sidebars)
   ============================================================ */

/* Catch WHMCS sidebar panels no matter the grid class */
.clientareahome .col-sm-3 .panel-heading,
.clientareahome .col-md-3 .panel-heading,
#client-area .col-sm-3 .panel-heading,
#client-area .col-md-3 .panel-heading,
.sidebar .panel-heading,
.client-home-sidebar .panel-heading {
  padding: 0.55rem 0.8rem !important;
}

/* Title text */
.clientareahome .col-sm-3 .panel-heading,
.clientareahome .col-sm-3 .panel-heading * ,
#client-area .col-sm-3 .panel-heading,
#client-area .col-sm-3 .panel-heading * ,
.sidebar .panel-heading,
.sidebar .panel-heading * ,
.client-home-sidebar .panel-heading,
.client-home-sidebar .panel-heading * {
  font-size: 0.78rem !important;   /* <- tweak if you want smaller */
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.25 !important;
}

/* If the icon is making it look huge, clamp it too */
.clientareahome .col-sm-3 .panel-heading i,
.clientareahome .col-sm-3 .panel-heading .fa,
.clientareahome .col-sm-3 .panel-heading .glyphicon {
  font-size: 0.9rem !important;
}

/* Sidebar headings: smaller + consistent */
#client-area .panel-sidebar .panel-heading,
#client-area .sidebar .panel-heading,
#client-area .col-sm-3 .panel-heading,
#client-area .col-md-3 .panel-heading,
.clientareahome .panel-sidebar .panel-heading,
.clientareahome .sidebar .panel-heading {
  padding: 10px 12px !important;
}

#client-area .panel-sidebar .panel-heading *,
#client-area .sidebar .panel-heading *,
#client-area .col-sm-3 .panel-heading *,
#client-area .col-md-3 .panel-heading * {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

/* ============================================================
   FIX: Account dropdown gap + remove "Hello, Name!"
   ============================================================ */

/* 1) Remove the "Hello, Name!" item entirely */
.dh-dropdown-panel--account ul > li:first-child {
  display: none !important;
}

/* 2) Remove the fake top padding/bridge that creates visual gap */
.dh-dropdown-panel--account {
  padding-top: 0.5rem !important; /* keep it neat */
}

/* If you added top padding inside dropdown-menu globally, keep it compact here */
body.dh-body .dh-header .dh-dropdown-wrap .dropdown-menu.dh-dropdown-panel.dh-dropdown-panel--account {
  top: calc(100% + 6px) !important;   /* keep it tight under the button */
}

/* 3) Ensure the menu list starts flush */
.dh-dropdown-panel--account .navbar-nav,
.dh-dropdown-panel--account ul {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ============================================================
   WHMCS Nexus: Account dropdown - remove "Hello, Name!" + gap
   (secondaryNavbar renders as li.dropdown > a + ul.dropdown-menu)
   ============================================================ */

/* Target the "Hello, Name!" toggle link inside the account dropdown */
body.dh-body .dh-dropdown-panel--account li.dropdown > a,
body.dh-body .dh-dropdown-panel--account li.dropdown > a.dropdown-toggle {
  display: none !important;
}

/* Make the nested dropdown list become the real menu (always visible) */
body.dh-body .dh-dropdown-panel--account li.dropdown > ul.dropdown-menu {
  position: static !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Remove any leftover spacing the wrapper might create */
body.dh-body .dh-dropdown-panel--account li.dropdown {
  margin: 0 !important;
  padding: 0 !important;
}

/* Optional: tighten the panel itself a bit */
body.dh-body .dh-dropdown-panel--account {
  padding: 0.5rem !important;
}


/* ============================================================
   FIX: Remove top gap for account dropdown (attach to button)
   ============================================================ */

/* Make the wrapper the positioning anchor */
body.dh-body .dh-header .dh-dropdown-wrap {
  position: relative !important;
}

/* Pull the panel up so it sits tight under the button */
body.dh-body .dh-header .dh-dropdown-wrap .dh-dropdown-panel--account {
  top: 100% !important; /* was +6px; now overlaps slightly */
  margin-top: 0 !important;
}

/* Ensure no extra spacing inside the panel */
body.dh-body .dh-header .dh-dropdown-panel--account {
  padding-top: 0.5rem !important;
}


/* ============================================================
   FIX: Nexus/Bootstrap Popper transforms causing dropdown "gap"
   (Force account dropdown to sit right under the button)
   ============================================================ */

/* Make the parent the anchor */
body.dh-body .dh-header .dh-dropdown-wrap {
  position: relative !important;
}

/* Target ONLY your account dropdown panel */
body.dh-body .dh-header .dh-dropdown-wrap > .dropdown-menu.dh-dropdown-panel.dh-dropdown-panel--account {
  position: absolute !important;

  /* Kill Popper inline positioning */
  transform: none !important;
  inset: auto !important;      /* modern browsers */
  top: 100% !important;        /* attach to button */
  right: 0 !important;
  left: auto !important;

  /* control the spacing (set to 0 if you want it touching) */
  margin-top: 6px !important;
}

/* If WHMCS adds inline top/left, this helps override */
body.dh-body .dh-header .dh-dropdown-wrap > .dropdown-menu.dh-dropdown-panel.dh-dropdown-panel--account[style] {
  top: 100% !important;
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

/* (Optional) remove extra top padding inside the dropdown */
body.dh-body .dh-header .dh-dropdown-panel--account {
  padding-top: 0.5rem !important;
}

/* ============================================================
   FIX: Notification dropdown alignment (bell)
   ============================================================ */

/* Make each dropdown wrap the positioning anchor */
body.dh-body .dh-header .dh-dropdown-wrap{
  position: relative !important;
}

/* Force bell dropdown to align to the right edge of the bell button */
body.dh-body .dh-header .dh-dropdown-wrap .dh-dropdown-panel{
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;     /* prevents odd centering offsets */
  margin: 0 !important;
}

/* Optional: keep bell dropdown width sensible */
body.dh-body .dh-header .dh-dropdown-wrap .dh-dropdown-panel:not(.dh-dropdown-panel--account){
  min-width: 260px !important;
  max-width: 320px !important;
}

/* Ensure Bootstrap's dropdown-menu-right doesn't fight you */
body.dh-body .dh-header .dropdown-menu-right{
  right: 0 !important;
  left: auto !important;
}

/* ============================================================
   DebsHost Client Area — PRO spacing + premium panels (Nexus)
   Paste at END of custom.css
   ============================================================ */

/* 0) Global rhythm for clientarea pages */
body.dh-body .dh-main-content {
  padding-top: 2.75rem !important;
  padding-bottom: 4rem !important;
}

/* 1) Dashboard tiles row: add breathing room + proper gutters */
body.dh-body .tiles.mb-4 { margin-bottom: 1.75rem !important; }

body.dh-body .tiles .row.no-gutters {
  margin-left: -10px !important;
  margin-right: -10px !important;
}

body.dh-body .tiles .row.no-gutters > [class*="col-"] {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Tile card polish */
body.dh-body .tiles .tile {
  border: 1px solid var(--dh-border) !important;
  border-radius: 16px !important;
  background: var(--dh-bg-panel) !important;
  box-shadow: 0 10px 30px rgba(15,23,42,0.06) !important;
  padding: 18px 18px 14px !important;
  min-height: 92px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
body.dh-body .tiles .tile:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--dh-primary) 35%, var(--dh-border)) !important;
  box-shadow: 0 18px 45px rgba(15,23,42,0.10) !important;
}

/* Make the icon bubble look like your site */
body.dh-body .tiles .tile i {
  opacity: 1 !important;
  font-size: 18px !important;
}
body.dh-body .tiles .tile i::before { opacity: 1 !important; }

/* Tile number + label typography */
body.dh-body .tiles .tile .stat,
body.dh-body .tiles .tile .stat-count,
body.dh-body .tiles .tile h2 {
  font-size: 2.1rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
body.dh-body .tiles .tile .title,
body.dh-body .tiles .tile .stat-label {
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
}

/* 2) Card area: real spacing between panels */
body.dh-body .client-home-cards { margin-top: 1.25rem !important; }
body.dh-body .client-home-cards .row {
  margin-left: -12px !important;
  margin-right: -12px !important;
}
body.dh-body .client-home-cards .row > [class*="col-"] {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Make every dashboard card feel like your pricing cards */
body.dh-body .client-home-cards .card {
  border: 1px solid var(--dh-border) !important;
  border-radius: 18px !important;
  background: var(--dh-bg-panel) !important;
  box-shadow: 0 12px 38px rgba(15,23,42,0.06) !important;
  overflow: hidden !important;
  margin-bottom: 22px !important; /* key: vertical gap */
}

/* Premium header: softer, less boxy */
body.dh-body .client-home-cards .card-header {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--dh-bg-elevated) 75%, transparent),
    var(--dh-bg-panel)
  ) !important;
  border-bottom: 1px solid var(--dh-border) !important;
  padding: 16px 18px !important;
}

/* Title row alignment + spacing */
body.dh-body .client-home-cards .card-header .card-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 1.02rem !important;
  font-weight: 750 !important;
  margin: 0 !important;
}

/* Body padding: balanced */
body.dh-body .client-home-cards .card-body {
  padding: 18px !important;
}

/* Footer less “WHMCS table row”, more subtle */
body.dh-body .client-home-cards .card-footer {
  background: transparent !important;
  border-top: 1px solid var(--dh-border) !important;
  padding: 12px 18px !important;
  color: var(--dh-text-muted) !important;
  font-size: 0.85rem !important;
}

/* 3) Buttons inside dashboard cards — unify with your brand */
body.dh-body .client-home-cards .btn,
body.dh-body .client-home-cards .btn.btn-default,
body.dh-body .client-home-cards .btn.btn-xs {
  border-radius: 999px !important;
  font-weight: 650 !important;
  border: 1px solid var(--dh-border) !important;
  background: var(--dh-bg) !important;
  color: var(--dh-text) !important;
  padding: 0.45rem 0.8rem !important;
}
body.dh-body .client-home-cards .btn:hover {
  border-color: var(--dh-primary) !important;
  color: var(--dh-primary) !important;
}

/* 4) Domain search card input spacing */
body.dh-body .client-home-cards input[type="text"],
body.dh-body .client-home-cards .form-control {
  border-radius: 999px !important;
  padding: 0.7rem 0.95rem !important;
}

/* 5) Small-screen rhythm: keep gaps */
@media (max-width: 991.98px) {
  body.dh-body .tiles .row.no-gutters > [class*="col-"] {
    margin-bottom: 12px !important;
  }
  body.dh-body .client-home-cards .card { margin-bottom: 18px !important; }
}