/*
 * exhost WHMCS Client Area — custom.css
 * Loaded automatically by Twenty-One child theme system.
 * Overrides Bootstrap 4 + Twenty-One defaults with the exhost design system.
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ── Design tokens (mirror of WordPress theme.css) ── */
:root {
  --eh-bg:      #0a1628;
  --eh-bg2:     #0f1e38;
  --eh-bg3:     #142448;
  --eh-bg4:     #1a2d58;
  --eh-line:    rgba(255,255,255,0.08);
  --eh-line2:   rgba(255,255,255,0.13);
  --eh-text:    #f1f5f9;
  --eh-muted:   #94a3b8;
  --eh-faint:   #475569;
  --eh-cyan:    #06b6d4;
  --eh-indigo:  #6366f1;
  --eh-green:   #10b981;
  --eh-amber:   #f59e0b;
  --eh-red:     #ef4444;
  --eh-r:       10px;
}

/* ── Global ── */
body,
html {
  background-color: var(--eh-bg) !important;
  color: var(--eh-text) !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}

/* Google Font load */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

/* ── Hide the default Twenty-One navbar — we inject our own via header.tpl ── */
nav.navbar,
.navbar-default,
.twenty-one-header { display: none !important; }

/* ── Page background fill ── */
body > .container,
body > .container-fluid,
#main-body,
.main-body,
.content-area,
.client-area-content {
  background-color: transparent !important;
  color: var(--eh-text) !important;
}

/* ── Cards / Panels (Bootstrap 4) ── */
.card {
  background: var(--eh-bg2) !important;
  border: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-r) !important;
  color: var(--eh-text) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25) !important;
}
.card-header {
  background: var(--eh-bg3) !important;
  border-bottom: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-r) var(--eh-r) 0 0 !important;
  color: var(--eh-text) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}
.card-footer {
  background: var(--eh-bg2) !important;
  border-top: 1px solid var(--eh-line) !important;
  border-radius: 0 0 var(--eh-r) var(--eh-r) !important;
}

/* ── Tables ── */
.table {
  color: var(--eh-text) !important;
  border-color: var(--eh-line) !important;
}
.table thead th {
  background: var(--eh-bg3) !important;
  color: var(--eh-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  border-bottom: 1px solid var(--eh-line2) !important;
  padding: 0.75rem 1rem !important;
}
.table tbody td {
  border-top: 1px solid var(--eh-line) !important;
  padding: 0.85rem 1rem !important;
  vertical-align: middle !important;
}
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.025) !important; }
.table-hover tbody tr:hover             { background: rgba(6,182,212,0.05) !important; }
.table-bordered { border-color: var(--eh-line) !important; }

/* ── Forms ── */
.form-control,
select.form-control,
textarea.form-control {
  background: var(--eh-bg3) !important;
  border: 1px solid var(--eh-line2) !important;
  border-radius: 8px !important;
  color: var(--eh-text) !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.form-control:focus {
  background: var(--eh-bg4) !important;
  border-color: var(--eh-cyan) !important;
  box-shadow: 0 0 0 3px rgba(6,182,212,0.18) !important;
  outline: none !important;
  color: var(--eh-text) !important;
}
.form-control::placeholder { color: var(--eh-faint) !important; }
label,
.col-form-label,
.control-label { color: var(--eh-muted) !important; font-weight: 600 !important; font-size: 0.85rem !important; }
.input-group-text {
  background: var(--eh-bg3) !important;
  border-color: var(--eh-line2) !important;
  color: var(--eh-muted) !important;
}

/* ── Buttons ── */
.btn-primary {
  background: linear-gradient(135deg, var(--eh-cyan) 0%, var(--eh-indigo) 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 700 !important;
  transition: opacity 0.2s, transform 0.15s !important;
}
.btn-primary:hover, .btn-primary:focus {
  opacity: 0.88 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(6,182,212,0.3) !important;
}
.btn-success {
  background: var(--eh-green) !important;
  border-color: var(--eh-green) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}
.btn-default,
.btn-secondary,
.btn-outline-secondary {
  background: var(--eh-bg3) !important;
  border: 1px solid var(--eh-line2) !important;
  border-radius: 8px !important;
  color: var(--eh-text) !important;
  font-weight: 600 !important;
}
.btn-default:hover,
.btn-secondary:hover { background: var(--eh-bg4) !important; border-color: var(--eh-line3) !important; }
.btn-danger, .btn-outline-danger {
  background: rgba(239,68,68,0.12) !important;
  border-color: rgba(239,68,68,0.35) !important;
  color: var(--eh-red) !important;
  border-radius: 8px !important;
}
.btn-danger:hover { background: rgba(239,68,68,0.22) !important; }
.btn-warning {
  background: var(--eh-amber) !important;
  border-color: var(--eh-amber) !important;
  color: #0a1628 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}
.btn-info {
  background: rgba(6,182,212,0.12) !important;
  border-color: rgba(6,182,212,0.35) !important;
  color: var(--eh-cyan) !important;
  border-radius: 8px !important;
}

/* ── Alerts ── */
.alert {
  border-radius: var(--eh-r) !important;
  border: none !important;
  border-left: 3px solid !important;
  font-weight: 500 !important;
}
.alert-success { background: rgba(16,185,129,0.1) !important; border-left-color: var(--eh-green) !important; color: #6ee7b7 !important; }
.alert-danger   { background: rgba(239,68,68,0.1) !important; border-left-color: var(--eh-red) !important; color: #fca5a5 !important; }
.alert-warning  { background: rgba(245,158,11,0.1) !important; border-left-color: var(--eh-amber) !important; color: #fcd34d !important; }
.alert-info     { background: rgba(6,182,212,0.1) !important; border-left-color: var(--eh-cyan) !important; color: #67e8f9 !important; }

/* ── Badges ── */
.badge-success { background: rgba(16,185,129,0.2) !important; color: var(--eh-green) !important; border-radius: 99px !important; }
.badge-danger  { background: rgba(239,68,68,0.2) !important;  color: var(--eh-red) !important;   border-radius: 99px !important; }
.badge-warning { background: rgba(245,158,11,0.2) !important; color: var(--eh-amber) !important; border-radius: 99px !important; }
.badge-info    { background: rgba(6,182,212,0.2) !important;  color: var(--eh-cyan) !important;  border-radius: 99px !important; }
.badge-primary { background: rgba(99,102,241,0.2) !important; color: var(--eh-indigo) !important; border-radius: 99px !important; }

/* ── Links ── */
a { color: var(--eh-cyan) !important; }
a:hover { color: #22d3ee !important; }

/* ── Breadcrumbs ── */
.breadcrumb {
  background: var(--eh-bg3) !important;
  border-radius: 8px !important;
  padding: 0.6rem 1rem !important;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--eh-faint) !important; }
.breadcrumb-item a { color: var(--eh-cyan) !important; }
.breadcrumb-item.active { color: var(--eh-muted) !important; }

/* ── Pagination ── */
.page-link {
  background: var(--eh-bg2) !important;
  border-color: var(--eh-line) !important;
  color: var(--eh-muted) !important;
}
.page-link:hover { background: var(--eh-bg3) !important; color: var(--eh-text) !important; }
.page-item.active .page-link {
  background: var(--eh-cyan) !important;
  border-color: var(--eh-cyan) !important;
  color: var(--eh-bg) !important;
}

/* ── Nav pills / tabs (client area sub-navigation) ── */
.nav-tabs { border-bottom-color: var(--eh-line) !important; }
.nav-tabs .nav-link {
  color: var(--eh-muted) !important;
  border-color: transparent !important;
  border-radius: 8px 8px 0 0 !important;
  font-weight: 600 !important;
}
.nav-tabs .nav-link:hover { color: var(--eh-text) !important; background: var(--eh-bg3) !important; }
.nav-tabs .nav-link.active {
  background: var(--eh-bg2) !important;
  border-color: var(--eh-line) var(--eh-line) transparent !important;
  color: var(--eh-cyan) !important;
}
.nav-pills .nav-link { color: var(--eh-muted) !important; border-radius: 8px !important; font-weight: 600 !important; }
.nav-pills .nav-link:hover { background: var(--eh-bg3) !important; color: var(--eh-text) !important; }
.nav-pills .nav-link.active { background: var(--eh-bg3) !important; color: var(--eh-cyan) !important; }

/* ── Dropdowns ── */
.dropdown-menu {
  background: var(--eh-bg3) !important;
  border: 1px solid var(--eh-line2) !important;
  border-radius: var(--eh-r) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
.dropdown-item { color: var(--eh-muted) !important; font-size: 0.875rem !important; }
.dropdown-item:hover { background: var(--eh-bg4) !important; color: var(--eh-text) !important; }
.dropdown-divider { border-color: var(--eh-line) !important; }

/* ── Modals ── */
.modal-content {
  background: var(--eh-bg2) !important;
  border: 1px solid var(--eh-line2) !important;
  border-radius: 14px !important;
  color: var(--eh-text) !important;
}
.modal-header {
  background: var(--eh-bg3) !important;
  border-bottom: 1px solid var(--eh-line) !important;
  border-radius: 14px 14px 0 0 !important;
}
.modal-footer {
  background: var(--eh-bg2) !important;
  border-top: 1px solid var(--eh-line) !important;
}
.modal-title { color: var(--eh-text) !important; font-weight: 800 !important; }
.close { color: var(--eh-muted) !important; opacity: 1 !important; }
.close:hover { color: var(--eh-text) !important; }
.modal-backdrop { background: rgba(0,0,0,0.75) !important; }

/* ── List groups ── */
.list-group-item {
  background: var(--eh-bg2) !important;
  border-color: var(--eh-line) !important;
  color: var(--eh-text) !important;
}
.list-group-item:hover { background: var(--eh-bg3) !important; }
.list-group-item.active {
  background: var(--eh-bg3) !important;
  border-color: var(--eh-cyan) !important;
  color: var(--eh-cyan) !important;
}

/* ── Progress bars ── */
.progress { background: var(--eh-bg3) !important; border-radius: 99px !important; }
.progress-bar { background: linear-gradient(90deg, var(--eh-cyan), var(--eh-indigo)) !important; }

/* ── Client area specific ── */

/* Dashboard account summary */
.account-balance-amount,
.account-credit { color: var(--eh-green) !important; font-weight: 800 !important; }
.account-balance-label { color: var(--eh-muted) !important; }

/* Service status dots */
.text-success, .status-active   { color: var(--eh-green) !important; }
.text-danger,  .status-suspended { color: var(--eh-red) !important; }
.text-warning, .status-pending   { color: var(--eh-amber) !important; }
.text-info,    .status-pending   { color: var(--eh-cyan) !important; }

/* Invoice list */
.invoice-paid    { color: var(--eh-green) !important; }
.invoice-unpaid  { color: var(--eh-red) !important; }
.invoice-overdue { color: var(--eh-amber) !important; }

/* Order flow product boxes */
.product-pricing-box {
  background: var(--eh-bg2) !important;
  border: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-r) !important;
  transition: border-color 0.2s !important;
}
.product-pricing-box:hover,
.product-pricing-box.selected {
  border-color: var(--eh-cyan) !important;
  background: rgba(6,182,212,0.06) !important;
}
.product-pricing-price { color: var(--eh-cyan) !important; font-weight: 900 !important; font-size: 1.5rem !important; }

/* Support ticket reply bubbles */
.ticket-reply-staff {
  background: rgba(6,182,212,0.07) !important;
  border-left: 3px solid var(--eh-cyan) !important;
  border-radius: 0 var(--eh-r) var(--eh-r) 0 !important;
}
.ticket-reply-client {
  background: var(--eh-bg2) !important;
  border-left: 3px solid var(--eh-line2) !important;
  border-radius: 0 var(--eh-r) var(--eh-r) 0 !important;
}

/* Sidebar menu */
.sidebar-menu .nav-link {
  color: var(--eh-muted) !important;
  border-radius: 8px !important;
  padding: 0.5rem 0.9rem !important;
  margin-bottom: 2px !important;
}
.sidebar-menu .nav-link:hover { background: var(--eh-bg3) !important; color: var(--eh-text) !important; }
.sidebar-menu .nav-link.active { background: var(--eh-bg3) !important; color: var(--eh-cyan) !important; font-weight: 700 !important; }
.sidebar-menu .nav-link i { color: var(--eh-cyan) !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--eh-bg); }
::-webkit-scrollbar-thumb { background: var(--eh-bg4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--eh-cyan); }

/* ════════════════════════════════════════════════════════════
   exhost nav layout — Bootstrap resets ep-nav flex structure
   ════════════════════════════════════════════════════════════ */

/* Force the nav into a proper horizontal flex bar */
nav#ep-nav,
nav.ep-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 74px !important;
  padding: 0 2rem !important;
  gap: 2rem !important;
  background: rgba(10,22,40,0.97) !important;
  backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  z-index: 9999 !important;
  box-sizing: border-box !important;
}

/* Wordmark */
nav#ep-nav .ep-nav-brand,
nav.ep-nav .ep-nav-brand {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}
.eh-wordmark {
  font-size: 1.8rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.06em !important;
  background: linear-gradient(90deg, #06b6d4, #818cf8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1 !important;
}

/* Nav menu — horizontal, no bullets */
nav#ep-nav ul.ep-nav-menu,
nav.ep-nav ul.ep-nav-menu {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0.25rem !important;
  flex: 1 !important;
}
nav#ep-nav ul.ep-nav-menu li,
nav.ep-nav ul.ep-nav-menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
nav#ep-nav ul.ep-nav-menu li a,
nav.ep-nav ul.ep-nav-menu li a {
  display: block !important;
  padding: 0.4rem 0.9rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.15s, background 0.15s !important;
}
nav#ep-nav ul.ep-nav-menu li a:hover,
nav.ep-nav ul.ep-nav-menu li a:hover {
  color: #f1f5f9 !important;
  background: rgba(255,255,255,0.07) !important;
}

/* Nav end — uptime badge + auth buttons */
nav#ep-nav .ep-nav-end,
nav.ep-nav .ep-nav-end {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Uptime badge */
.eh-uptime-badge {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 999px !important;
  padding: 0.3rem 0.75rem 0.3rem 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
  cursor: default !important;
  text-decoration: none !important;
}
.eh-uptime-dot {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
.eh-uptime-dot--pulse::after {
  content: '' !important;
  position: absolute !important; inset: -3px !important;
  border-radius: 50% !important;
  background: rgba(16,185,129,0.35) !important;
  animation: eh-pulse 2s ease-in-out infinite !important;
}
.eh-uptime-dot--alert { background: #ef4444 !important; }
.eh-uptime-label { color: #10b981 !important; font-weight: 700 !important; }
.eh-uptime-dot--alert + .eh-uptime-label { color: #ef4444 !important; }

@keyframes eh-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%       { transform: scale(1.6); opacity: 0; }
}

/* Nav login link */
.ep-nav-login {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.ep-nav-login:hover { color: #f1f5f9 !important; }

/* Nav CTA button */
nav#ep-nav .ep-btn,
nav.ep-nav .ep-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.45rem 1rem !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  background: linear-gradient(135deg, #06b6d4, #6366f1) !important;
  color: #fff !important;
  border: none !important;
}
nav#ep-nav .ep-btn:hover,
nav.ep-nav .ep-btn:hover { opacity: 0.88 !important; color: #fff !important; }

/* Hamburger — hidden on desktop */
.ep-hamburger { display: none !important; }

/* Mobile: collapse nav menu */
@media (max-width: 900px) {
  nav#ep-nav ul.ep-nav-menu,
  nav.ep-nav ul.ep-nav-menu { display: none !important; }
  nav#ep-nav ul.ep-nav-menu.ep-nav-menu--open,
  nav.ep-nav ul.ep-nav-menu.ep-nav-menu--open {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 74px !important; left: 0 !important; right: 0 !important;
    background: rgba(10,22,40,0.98) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    padding: 1rem !important;
    gap: 0.25rem !important;
  }
  .ep-hamburger {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px !important;
    margin-left: 0.5rem !important;
  }
  .ep-hamburger span {
    display: block !important;
    width: 22px !important; height: 2px !important;
    background: #f1f5f9 !important;
    border-radius: 2px !important;
  }
  .eh-uptime-badge { display: none !important; }
}

/* ════════════════════════════════════════════════════════════
   "How can we help today" shortcut tiles
   Twenty-One renders these as .card elements with white bg
   ════════════════════════════════════════════════════════════ */

/* The shortcut grid wrapper */
.home-shortcuts,
.shortcuts-container,
[class*="shortcut"] .card,
.card-shortcut,
.shortcut-item {
  background: var(--eh-bg2) !important;
  border: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-r) !important;
  color: var(--eh-text) !important;
}

/* Target the specific Twenty-One homepage tile cards */
.twenty-one-shortcuts .card,
.home-actions .card,
.client-home .card {
  background: var(--eh-bg2) !important;
  border: 1px solid var(--eh-line) !important;
  color: var(--eh-text) !important;
}

/* The coloured top border strips on the tiles (Bootstrap border-top utilities) */
.border-top-announcements,
.border-top-network,
.border-top-downloads { border-top-width: 3px !important; }

/* Icon colour inside tiles */
.home-shortcuts .card svg,
.home-shortcuts .card i,
.home-shortcuts .card .fa,
.card-shortcut svg,
.card-shortcut i {
  color: var(--eh-cyan) !important;
  fill: var(--eh-cyan) !important;
  opacity: 0.8 !important;
}

/* Tile text */
.home-shortcuts .card .card-title,
.home-shortcuts .card h5,
.home-shortcuts .card p,
.card-shortcut .card-title,
.card-shortcut p {
  color: var(--eh-muted) !important;
}
.home-shortcuts .card .card-title,
.card-shortcut .card-title {
  font-weight: 700 !important;
  color: var(--eh-text) !important;
}

/* Hover lift */
.home-shortcuts .card:hover,
.card-shortcut:hover {
  border-color: rgba(6,182,212,0.3) !important;
  background: var(--eh-bg3) !important;
  transform: translateY(-2px) !important;
  transition: all 0.2s !important;
}

/* ════════════════════════════════════════════════════════════
   "Your account" / product tiles on the homepage
   and "Browse our Products/Services" cards
   ════════════════════════════════════════════════════════════ */

/* Product/service grid cards */
.product-list .card,
.products-container .card,
.service-box,
[class*="product"] .card {
  background: var(--eh-bg2) !important;
  border: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-r) !important;
  color: var(--eh-text) !important;
  transition: border-color 0.2s, transform 0.2s !important;
}
.product-list .card:hover,
.products-container .card:hover {
  border-color: rgba(6,182,212,0.35) !important;
  transform: translateY(-2px) !important;
}

/* "Browse Products" / action buttons inside tiles */
.product-list .card .btn-outline-secondary,
.products-container .card .btn-outline-secondary,
.service-box .btn {
  background: transparent !important;
  border: 1px solid rgba(6,182,212,0.4) !important;
  color: var(--eh-cyan) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  width: 100% !important;
}
.product-list .card .btn-outline-secondary:hover,
.products-container .card .btn-outline-secondary:hover {
  background: rgba(6,182,212,0.1) !important;
}

/* Product card title and description */
.product-list .card h5,
.product-list .card .card-title,
.products-container h5 {
  color: var(--eh-text) !important;
  font-weight: 700 !important;
}
.product-list .card p,
.product-list .card .card-text,
.products-container .card-text {
  color: var(--eh-muted) !important;
  font-size: 0.875rem !important;
}

/* "Browse our Products/Services" section heading */
.products-section h2,
.products-container > h2,
.client-home h2,
.client-home h3 {
  color: var(--eh-text) !important;
  font-weight: 800 !important;
}

/* ════════════════════════════════════════════════════════════
   General page text — catch any remaining white-on-white
   ════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 { color: var(--eh-text) !important; }
p, span, div, li, td, th { color: inherit; }

/* Muted / secondary text */
.text-muted, .text-secondary { color: var(--eh-muted) !important; }
.text-white { color: var(--eh-text) !important; }

/* Any remaining white background panels */
.bg-white, .bg-light {
  background: var(--eh-bg2) !important;
  color: var(--eh-text) !important;
}
.border-light { border-color: var(--eh-line) !important; }