/* ====================================================================
   Virtual Host — WHMCS Custom Theme (v2: light content + dark chrome)
   Layout: dark top bar with marketing nav, dark footer matching the
   marketing site, light content area in between.
   Source brand tokens: virtualhost.ae src/styles/tokens.css
   ==================================================================== */

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

:root {
  /* === Dark chrome tokens (header + footer) === */
  --vh-bg-dark:        #141A24;
  --vh-surface-dark:   #1B2331;
  --vh-surface-dark-2: #22293A;
  --vh-hero-dark:      #0B1018;
  --vh-line-dark:      rgba(148,163,184,0.18);
  --vh-ink:            #F1F5F9;
  --vh-ink-2:          #CBD5E1;
  --vh-dim:            #94A3B8;

  /* === Brand accents === */
  --vh-teal:        #2DD4BF;       /* primary accent */
  --vh-teal-deep:   #0F766E;       /* dark teal for primary buttons on light bg */
  --vh-teal-soft:   rgba(45,212,191,0.14);
  --vh-teal-text:   #5EEAD4;       /* readable teal on dark */
  --vh-indigo:      #4F46E5;       /* indigo-600 for accents on light */
  --vh-indigo-bg:   #3730A3;

  /* === Light content tokens === */
  --vh-page-bg:      #F8FAFC;        /* page wash (slate-50) */
  --vh-card:         #FFFFFF;        /* card surface */
  --vh-card-alt:     #F1F5F9;        /* alt card / table stripe (slate-100) */
  --vh-line:         #E2E8F0;        /* slate-200 */
  --vh-line-strong:  #CBD5E1;        /* slate-300 */
  --vh-text:         #0F172A;        /* slate-900 */
  --vh-text-2:       #334155;        /* slate-700 */
  --vh-text-muted:   #64748B;        /* slate-500 */

  /* === Bootstrap-variable overrides === */
  --primary:   var(--vh-teal-deep);
  --info:      var(--vh-indigo);
  --light:     var(--vh-card-alt);
  --dark:      var(--vh-hero-dark);
  --secondary: var(--vh-text-muted);
  --body-bg:   var(--vh-page-bg);
  --body-color:var(--vh-text);

  --font-family-sans-serif: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-monospace:  "Geist Mono", "JetBrains Mono", SFMono-Regular, Menlo, monospace;
}

html { font-size: 14px; }

body,
body.primary-bg-color {
  background: var(--vh-page-bg) !important;
  color: var(--vh-text);
  font-family: "Geist", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--vh-teal-deep); }
a:hover { color: #115E59; text-decoration: none; }

::selection { background: var(--vh-teal-soft); color: var(--vh-text); }

/* ============ TOP DARK BAR (custom marketing nav from header.tpl) === */

.vh-topbar {
  background: var(--vh-bg-dark);
  color: var(--vh-ink);
  border-bottom: 1px solid var(--vh-line-dark);
}
.vh-topbar .vh-topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1280px; margin: 0 auto; padding: 18px 32px;
}
.vh-topbar-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--vh-ink);
}
.vh-topbar-brand img { height: 30px; display: block; }
.vh-topbar-nav {
  display: flex; align-items: center; gap: 28px;
  font-size: 14px; font-weight: 500;
}
.vh-topbar-nav a {
  color: var(--vh-dim);
  text-decoration: none; transition: color 0.15s;
  white-space: nowrap;
}
.vh-topbar-nav a:hover, .vh-topbar-nav a.active { color: var(--vh-ink); }
.vh-topbar-cta {
  background: var(--vh-teal);
  color: var(--vh-hero-dark) !important;
  padding: 8px 16px; border-radius: 999px;
  font-weight: 600; font-size: 13px;
}
.vh-topbar-cta:hover { filter: brightness(1.06); color: var(--vh-hero-dark) !important; }

/* ============ WHMCS native HEADER (login/account row) =========== */

#header { background: var(--vh-bg-dark); }

#header .topbar {
  background: var(--vh-hero-dark);
  border-bottom: 1px solid var(--vh-line-dark);
  color: var(--vh-ink-2);
  padding: 8px 0;
  font-size: 13px;
}
#header .topbar .container { max-width: 1280px; }
#header .topbar .btn { color: var(--vh-ink-2); padding: 4px 10px; font-size: 13px; }
#header .topbar .btn:hover { color: var(--vh-ink); background: rgba(255,255,255,0.04); }
#header .topbar .input-group-text {
  background: transparent; border: none; color: var(--vh-dim); font-size: 12px;
}
#header .topbar .btn-active-client {
  background: var(--vh-surface-dark) !important;
  border: 1px solid var(--vh-line-dark) !important;
  color: var(--vh-ink) !important;
  font-weight: 500;
}
#header .topbar .btn-active-client:hover { background: var(--vh-surface-dark-2) !important; }

/* ============ WHMCS NATIVE NAVBAR (portal sections) ============= */
/* Becomes the lighter sub-nav row below the dark chrome */

#header .navbar,
#header .navbar.navbar-light {
  background: var(--vh-card) !important;
  border: none !important;
  border-bottom: 1px solid var(--vh-line) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
#header .navbar .container { max-width: 1280px; padding: 8px 32px; }
.navbar-light .navbar-nav .nav-link {
  color: var(--vh-text-2) !important;
  font-size: 14px; font-weight: 500;
  padding: 12px 16px !important;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
  color: var(--vh-teal-deep) !important;
}
.navbar-light .navbar-brand {
  color: var(--vh-text);
  font-weight: 700;
  display: none; /* hidden — main brand is in vh-topbar */
}
#header .navbar-toggler { border-color: var(--vh-line) !important; }

/* ============ BREADCRUMB BAR ==================================== */

.breadcrumb {
  background: transparent !important;
  border-bottom: 1px solid var(--vh-line);
  border-radius: 0;
  padding: 14px 0;
  margin: 0 32px;
  max-width: 1280px;
  font-size: 13px;
  font-family: var(--font-family-monospace);
  letter-spacing: 0.4px;
}
.breadcrumb-item, .breadcrumb-item a { color: var(--vh-text-muted); }
.breadcrumb-item.active { color: var(--vh-teal-deep); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--vh-text-muted); content: "›"; }

/* ============ MAIN CONTENT WRAPPER ============================== */

.body-content,
.body-wrapper,
section#main-body,
.main-content,
.client-area-content,
.section-2 { background: var(--vh-page-bg); color: var(--vh-text); }

#main-body { padding-top: 24px; padding-bottom: 64px; }
#main-body .container, .body-content .container { max-width: 1280px; }

/* ============ HEADINGS ========================================== */

h1, h2, h3, h4, h5 { color: var(--vh-text); letter-spacing: -0.4px; }
h1 { font-weight: 600; }
.page-header { border-bottom: 1px solid var(--vh-line); margin-bottom: 24px; padding-bottom: 12px; }
.page-header h1 { font-size: 28px; }

.text-muted, .help-block { color: var(--vh-text-muted) !important; }

hr { border-color: var(--vh-line); }

/* ============ CARDS / PANELS ==================================== */

.panel,
.card,
.bg-white,
.well,
.panel-default,
.panel-body,
.modal-content {
  background: var(--vh-card) !important;
  border: 1px solid var(--vh-line) !important;
  border-radius: 12px !important;
  color: var(--vh-text);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.panel-heading,
.card-header {
  background: var(--vh-card-alt) !important;
  border-bottom: 1px solid var(--vh-line) !important;
  color: var(--vh-text);
  font-weight: 600;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.panel-heading i, .card-header i { color: var(--vh-teal-deep); }
.panel-footer,
.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--vh-line) !important;
}

/* Panel variants (info/warning/danger) — keep accent on left */
.panel-info { border-top: 3px solid var(--vh-indigo) !important; }
.panel-warning { border-top: 3px solid #F59E0B !important; }
.panel-danger { border-top: 3px solid #EF4444 !important; }
.panel-success { border-top: 3px solid #10B981 !important; }

/* ============ SIDEBAR =========================================== */

.sidebar { color: var(--vh-text); }
.sidebar .panel,
.sidebar .list-group {
  background: var(--vh-card) !important;
  border: 1px solid var(--vh-line) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.sidebar .panel-heading {
  background: var(--vh-card-alt) !important;
  font-size: 14px; font-weight: 600;
}
.sidebar .list-group-item {
  background: transparent !important;
  border-color: var(--vh-line) !important;
  color: var(--vh-text-2);
  padding: 12px 16px;
  font-size: 14px;
}
.sidebar .list-group-item:hover { background: var(--vh-card-alt) !important; color: var(--vh-text) !important; }
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover {
  background: var(--vh-teal-soft) !important;
  color: var(--vh-teal-deep) !important;
  border-left: 3px solid var(--vh-teal) !important;
  padding-left: 13px;
}
.sidebar .list-group-item .fas,
.sidebar .list-group-item .fa,
.sidebar .list-group-item .far,
.sidebar .list-group-item i { color: var(--vh-teal-deep); margin-right: 8px; }

/* ============ BUTTONS =========================================== */

.btn { font-weight: 500; border-radius: 8px; }

.btn-primary {
  background: var(--vh-teal-deep) !important;
  border-color: var(--vh-teal-deep) !important;
  color: #FFFFFF !important;
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: #115E59 !important;
  border-color: #115E59 !important;
}

.btn-secondary,
.btn-default {
  background: var(--vh-card) !important;
  border: 1px solid var(--vh-line-strong) !important;
  color: var(--vh-text) !important;
}
.btn-secondary:hover, .btn-default:hover {
  background: var(--vh-card-alt) !important;
  border-color: var(--vh-line-strong) !important;
}

.btn-info { background: var(--vh-indigo) !important; border-color: var(--vh-indigo) !important; color: #FFFFFF !important; }
.btn-info:hover { background: #4338CA !important; border-color: #4338CA !important; }
.btn-success { background: #059669 !important; border-color: #059669 !important; color: #FFFFFF !important; }
.btn-warning { background: #D97706 !important; border-color: #D97706 !important; color: #FFFFFF !important; }
.btn-danger  { background: #DC2626 !important; border-color: #DC2626 !important; color: #FFFFFF !important; }

.btn-link { color: var(--vh-teal-deep) !important; }
.btn-link:hover { color: #115E59 !important; text-decoration: underline; }

.btn-outline-primary {
  background: transparent !important;
  border-color: var(--vh-teal-deep) !important;
  color: var(--vh-teal-deep) !important;
}
.btn-outline-primary:hover {
  background: var(--vh-teal-deep) !important;
  color: #FFFFFF !important;
}

/* ============ FORMS ============================================= */

.form-control,
.input-group-text,
.custom-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  background: var(--vh-card) !important;
  border: 1px solid var(--vh-line-strong) !important;
  color: var(--vh-text) !important;
  border-radius: 8px;
}
.form-control:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--vh-teal-deep) !important;
  box-shadow: 0 0 0 3px rgba(45,212,191,0.18) !important;
  outline: none !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder {
  color: var(--vh-text-muted);
  opacity: 1;
}
label, .col-form-label { color: var(--vh-text-2); font-weight: 500; }

/* ============ TABLES ============================================ */

.table {
  background: var(--vh-card);
  color: var(--vh-text);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--vh-line);
}
.table thead th {
  background: var(--vh-card-alt);
  border-color: var(--vh-line);
  color: var(--vh-text-2);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.table td, .table th { border-color: var(--vh-line) !important; vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background: var(--vh-card-alt); }
.table-hover tbody tr:hover { background: var(--vh-card-alt) !important; color: var(--vh-text); }

/* ============ ALERTS / BADGES =================================== */

.alert {
  background: var(--vh-card);
  border: 1px solid var(--vh-line);
  border-radius: 10px;
  color: var(--vh-text);
}
.alert-info,
.alert-primary {
  border-left: 4px solid var(--vh-teal-deep);
  background: var(--vh-teal-soft);
  color: #115E59;
}
.alert-success {
  border-left: 4px solid #059669;
  background: rgba(16,185,129,0.10);
  color: #065F46;
}
.alert-warning {
  border-left: 4px solid #D97706;
  background: rgba(245,158,11,0.10);
  color: #92400E;
}
.alert-danger {
  border-left: 4px solid #DC2626;
  background: rgba(239,68,68,0.10);
  color: #991B1B;
}

.badge { font-weight: 500; padding: 4px 8px; border-radius: 6px; }
.badge-primary, .label-primary { background: var(--vh-teal-soft) !important; color: var(--vh-teal-deep) !important; }
.badge-info, .label-info { background: rgba(79,70,229,0.12) !important; color: var(--vh-indigo) !important; }
.badge-success { background: rgba(5,150,105,0.12) !important; color: #047857 !important; }
.badge-warning { background: rgba(217,119,6,0.12) !important; color: #92400E !important; }
.badge-danger { background: rgba(220,38,38,0.12) !important; color: #991B1B !important; }

/* "Active" service-status badge — matches the green pill style */
.label-active, .status-Active, .badge.label-success {
  background: rgba(5,150,105,0.15) !important;
  color: #047857 !important;
  font-weight: 600;
}

/* ============ DASHBOARD STATS ROW =============================== */

.client-home-panels .panel { transition: transform 0.15s, box-shadow 0.15s; }
.client-home-panels .panel:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15,23,42,0.06);
}

.feature-highlight {
  background: var(--vh-card);
  border: 1px solid var(--vh-line);
  border-radius: 12px;
  color: var(--vh-text);
}
.feature-highlight i { color: var(--vh-teal-deep); }

/* ============ HOME / HERO BLOCK ================================= */

.home-banner,
.client-home-jumbotron,
.jumbotron {
  background: linear-gradient(135deg, var(--vh-card) 0%, var(--vh-card-alt) 100%) !important;
  border: 1px solid var(--vh-line);
  border-radius: 16px;
  color: var(--vh-text);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.client-home-jumbotron h1 { color: var(--vh-text); }
.client-home-jumbotron .lead { color: var(--vh-text-2); }

.stat-number, .statistic-number { color: var(--vh-teal-deep); font-weight: 600; }

/* ============ INVOICES ========================================== */

.invoice-status-paid    { color: #059669; }
.invoice-status-unpaid  { color: #D97706; }
.invoice-status-overdue { color: #DC2626; }

/* ============ FOOTER ============================================ */

#footer, .footer {
  background: var(--vh-bg-dark) !important;
  border-top: 1px solid var(--vh-line-dark);
  color: var(--vh-dim);
  padding: 60px 0 32px;
  margin-top: 64px;
}
#footer .container, .footer .container { max-width: 1280px; }
#footer a, .footer a { color: var(--vh-dim); text-decoration: none; }
#footer a:hover, .footer a:hover { color: var(--vh-ink); }
#footer .copyright, .footer .copyright {
  color: var(--vh-dim); font-size: 13px;
  border-top: 1px solid var(--vh-line-dark);
  padding-top: 24px; margin-top: 40px;
}

/* Custom branded footer (rendered from footer.tpl override) */
.vh-footer {
  background: var(--vh-bg-dark);
  color: var(--vh-ink);
  padding: 64px 0 32px;
}
.vh-footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.vh-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: flex-start;
}
.vh-footer-brand-block { max-width: 320px; }
.vh-footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.vh-footer-brand img { height: 26px; }
.vh-footer-tagline { color: var(--vh-dim); font-size: 14px; line-height: 1.6; margin: 0; }
.vh-footer-address {
  margin-top: 20px; font-size: 13px; color: var(--vh-dim); line-height: 1.7;
}
.vh-footer-address .phone { color: var(--vh-ink-2); }
.vh-footer-col-h { font-size: 13px; font-weight: 600; color: var(--vh-ink); margin-bottom: 14px; }
.vh-footer-link { display: block; margin-bottom: 10px; color: var(--vh-dim); font-size: 14px; text-decoration: none; }
.vh-footer-link:hover { color: var(--vh-ink); }
.vh-footer-bottom {
  max-width: 1280px; margin: 48px auto 0; padding: 24px 32px 0;
  border-top: 1px solid var(--vh-line-dark);
  display: flex; justify-content: space-between; color: var(--vh-dim); font-size: 13px;
}

/* ============ MODALS ============================================ */

.modal-header { border-bottom: 1px solid var(--vh-line) !important; }
.modal-footer { border-top: 1px solid var(--vh-line) !important; }
.modal-content { box-shadow: 0 25px 50px rgba(15,23,42,0.18) !important; }

/* ============ DROPDOWNS ========================================= */

.dropdown-menu {
  background: var(--vh-card) !important;
  border: 1px solid var(--vh-line) !important;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15,23,42,0.10);
}
.dropdown-item { color: var(--vh-text-2); }
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--vh-card-alt) !important;
  color: var(--vh-text) !important;
}
.dropdown-divider { border-color: var(--vh-line); }

/* ============ TABS / NAVS ======================================= */

.nav-tabs { border-bottom-color: var(--vh-line); }
.nav-tabs .nav-link { color: var(--vh-text-muted); border: 1px solid transparent; }
.nav-tabs .nav-link:hover { color: var(--vh-text); border-color: transparent; }
.nav-tabs .nav-link.active {
  background: var(--vh-card) !important;
  border-color: var(--vh-line) var(--vh-line) var(--vh-card) !important;
  color: var(--vh-teal-deep) !important;
  font-weight: 600;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--vh-teal-deep) !important;
  color: #FFFFFF !important;
}

/* ============ PAGINATION ======================================== */

.page-link {
  background: var(--vh-card) !important;
  border-color: var(--vh-line) !important;
  color: var(--vh-text-2);
}
.page-link:hover { background: var(--vh-card-alt) !important; color: var(--vh-text); }
.page-item.active .page-link {
  background: var(--vh-teal-deep) !important;
  border-color: var(--vh-teal-deep) !important;
  color: #FFFFFF !important;
}

/* ============ ORDER FORM (cart) ================================= */

#order-standard_cart,
#order-standard_cart .header-lined { background: var(--vh-page-bg); color: var(--vh-text); }
#order-standard_cart .product {
  background: var(--vh-card) !important;
  border: 1px solid var(--vh-line) !important;
  border-radius: 14px !important;
  color: var(--vh-text);
}
#order-standard_cart .product .price { color: var(--vh-teal-deep); }
#order-standard_cart .product.featured {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--vh-card-alt) 100%) !important;
  border: 2px solid var(--vh-teal) !important;
  box-shadow: 0 12px 32px rgba(45,212,191,0.18);
}

/* ============ MISC ============================================== */

code, pre, .mono {
  font-family: var(--font-family-monospace);
  background: var(--vh-card-alt);
  color: var(--vh-text);
  border: 1px solid var(--vh-line);
  border-radius: 4px;
  font-size: 13px;
}

#fullpage-overlay, .overlay { background: rgba(15,23,42,0.6) !important; }

.knowledgebase-categories .panel,
.announcements .panel { background: var(--vh-card) !important; }

.bg-light { background: var(--vh-card-alt) !important; color: var(--vh-text); }
.bg-white { background: var(--vh-card) !important; color: var(--vh-text); }

/* Hide WHMCS-default knowledgebase search icon background that breaks on dark */
#header .topbar form input { background: rgba(255,255,255,0.04) !important; color: var(--vh-ink); border-color: var(--vh-line-dark) !important; }

/* === Hide specific WHMCS chrome elements === */

/* Knowledgebase search form in main navbar (both desktop XL and mobile-collapsed variants) */
form[action*='knowledgebase-search'] { display: none !important; }
.input-group.search { display: none !important; }

/* Recent News panel on /clientarea.php dashboard */
[menuItemName="Recent News"],
[menuItemName="recent-news"],
[menuItemName="recentNews"] { display: none !important; }

/* Hide WHMCS row-1 navbar (redundant logo + mobile toggle — top bar above already has logo) */
#header > .navbar.navbar-light:not(.main-navbar-wrapper) { display: none !important; }

/* Cart button now in row 2 — restyle the badge */
.vh-cart-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px !important; }
.vh-cart-btn .badge {
  background: var(--vh-teal-deep) !important;
  color: #FFFFFF !important;
  font-weight: 600;
}