/* ==========================================================================
   VuaHost - Light/Dark Toggle Theme for WHMCS Twenty-One
   ========================================================================== */

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

:root {
  --vh-bg: #0f172a;
  --vh-bg-soft: #1e293b;
  --vh-bg-card: #1e293b;
  --vh-border: #334155;
  --vh-text: #e2e8f0;
  --vh-text-dim: #94a3b8;
  --vh-amber: #f59e0b;
  --vh-amber-dark: #b45309;
  --vh-teal: #2dd4bf;
  --vh-teal-dark: #0f766e;
  --vh-danger: #f87171;
  --vh-success: #34d399;
  --vh-warning: #fbbf24;
}

body { font-family: 'Space Grotesk', sans-serif; }
.price, .total, .invoice-value, table td.text-right,
.amount, .due, code, pre, .mono { font-family: 'JetBrains Mono', monospace !important; }

body.vh-dark { background-color: var(--vh-bg) !important; color: var(--vh-text) !important; }
body.vh-dark h1, body.vh-dark h2, body.vh-dark h3, body.vh-dark h4, body.vh-dark h5, body.vh-dark h6,
body.vh-dark .navbar-brand, body.vh-dark .card-title, body.vh-dark .panel-title { color: var(--vh-text) !important; }
body.vh-dark a { color: var(--vh-teal); }
body.vh-dark a:hover { color: var(--vh-amber); }

body.vh-dark .header, body.vh-dark .navbar.navbar-light, body.vh-dark .main-navbar-wrapper, body.vh-dark .topbar {
  background-color: var(--vh-bg-soft) !important;
  border-bottom: 1px solid var(--vh-border);
}
body.vh-dark .navbar-nav .nav-link, body.vh-dark .navbar-nav .nav-link i { color: var(--vh-text) !important; }
body.vh-dark .navbar-nav .nav-link:hover { color: var(--vh-amber) !important;}

body.vh-dark .main-navbar-wrapper #nav > li > a,
body.vh-dark .main-navbar-wrapper .navbar-nav > li > a,
body.vh-dark .main-navbar-wrapper .nav-link,
body.vh-dark .main-navbar-wrapper .dropdown-toggle {
  color: var(--vh-text) !important;
  opacity: 1 !important;
}
body.vh-dark .main-navbar-wrapper #nav > li > a:hover,
body.vh-dark .main-navbar-wrapper .navbar-nav > li > a:hover,
body.vh-dark .main-navbar-wrapper .nav-link:hover { color: var(--vh-amber) !important; text-decoration: none !important;}
body.vh-dark .main-navbar-wrapper .dropdown-menu {
  background-color: var(--vh-bg-soft) !important;
  border: 1px solid var(--vh-border) !important;
}
body.vh-dark .main-navbar-wrapper .dropdown-menu a,
body.vh-dark .main-navbar-wrapper .dropdown-item { color: var(--vh-text) !important; }
body.vh-dark .main-navbar-wrapper .dropdown-menu a:hover,
body.vh-dark .main-navbar-wrapper .dropdown-item:hover {
  background-color: rgba(245, 158, 11, 0.1) !important;
  color: var(--vh-amber) !important;
}
body.vh-dark .table td {
    background: #1e293b !important;
}

.navbar-brand {
  display: inline-flex !important;
  align-items: center;
  background-color: #ffffff;
  padding: 6px 14px;
  border-radius: 8px;
  transition: background-color 0.25s ease;
}
.navbar-brand .logo-img {
    max-width: 130px !important;
    max-height: 60px !important;
    height: auto;
    width: auto;
    display: block;
    object-fit: contain;
}
body.vh-dark .navbar-brand { background-color: #ffffff; border: 1px solid var(--vh-border); }

body.vh-dark .cart-btn .badge-info { background-color: var(--vh-amber) !important; color: #0f172a !important; }

body.vh-dark .sidebar { background-color: var(--vh-bg-soft) !important; border: 1px solid var(--vh-border); border-radius: 8px; }
body.vh-dark .sidebar a, body.vh-dark .sidebar .list-group-item {
  background-color: transparent !important; color: var(--vh-text) !important; border-color: var(--vh-border) !important;
}
body.vh-dark .sidebar a:hover, body.vh-dark .sidebar .list-group-item:hover {
  color: var(--vh-amber) !important; background-color: rgba(245, 158, 11, 0.08) !important;
}
body.vh-dark .sidebar .active > a, body.vh-dark .sidebar .list-group-item.active {
  background-color: rgba(45, 212, 191, 0.12) !important; color: var(--vh-teal) !important; border-left: 3px solid var(--vh-teal);
}

body.vh-dark .card, body.vh-dark .panel, body.vh-dark .list-group-item, body.vh-dark .well {
  background-color: var(--vh-bg-card) !important; border: 1px solid var(--vh-border) !important; color: var(--vh-text) !important;
}
body.vh-dark .card-header, body.vh-dark .panel-heading {
  background-color: rgba(255,255,255,0.03) !important; border-bottom: 1px solid var(--vh-border) !important; color: var(--vh-text) !important;
}

body.vh-dark .btn-primary { background-color: var(--vh-teal) !important; border-color: var(--vh-teal) !important; color: #0f172a !important; }
body.vh-dark .btn-primary:hover { background-color: var(--vh-teal-dark) !important; border-color: var(--vh-teal-dark) !important; }
body.vh-dark .btn-secondary, body.vh-dark .btn-default {
  background-color: var(--vh-bg-soft) !important; border-color: var(--vh-border) !important; color: var(--vh-text) !important;
}
body.vh-dark .btn-warning, body.vh-dark .btn-active-client {
  background-color: var(--vh-amber) !important; border-color: var(--vh-amber) !important; color: #0f172a !important;
}

body.vh-dark .table { color: var(--vh-text) !important; }
body.vh-dark .table th { background-color: var(--vh-bg-soft) !important; color: var(--vh-amber) !important; border-color: var(--vh-border) !important; }
body.vh-dark .table td { border-color: var(--vh-border) !important; }
body.vh-dark .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.02) !important; }
body.vh-dark .table-hover tbody tr:hover { background-color: rgba(45, 212, 191, 0.06) !important; }

body.vh-dark .form-control, body.vh-dark .input-group-text, body.vh-dark select.form-control {
  background-color: var(--vh-bg-soft) !important; border-color: var(--vh-border) !important; color: var(--vh-text) !important;
}
body.vh-dark .form-control:focus { border-color: var(--vh-teal) !important; box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.2) !important; }
body.vh-dark .form-control::placeholder { color: var(--vh-text-dim) !important; }

body.vh-dark .label-success, body.vh-dark .badge-success { background-color: var(--vh-success) !important; color: #0f172a !important; }
body.vh-dark .label-danger, body.vh-dark .badge-danger { background-color: var(--vh-danger) !important; color: #0f172a !important; }
body.vh-dark .label-warning, body.vh-dark .badge-warning { background-color: var(--vh-warning) !important; color: #0f172a !important; }
body.vh-dark .label-info, body.vh-dark .badge-info { background-color: var(--vh-teal) !important; color: #0f172a !important; }

body.vh-dark .master-breadcrumb { background-color: var(--vh-bg-soft) !important; border-bottom: 1px solid var(--vh-border); }
body.vh-dark .breadcrumb { background-color: transparent !important; }
body.vh-dark .breadcrumb a { color: var(--vh-text-dim) !important; }
body.vh-dark .breadcrumb .active { color: var(--vh-amber) !important; }

body.vh-dark .modal-content, body.vh-dark .popover {
  background-color: var(--vh-bg-card) !important; color: var(--vh-text) !important; border: 1px solid var(--vh-border) !important;
}
body.vh-dark .modal-header, body.vh-dark .modal-footer { border-color: var(--vh-border) !important; }

body.vh-dark .footer, body.vh-dark footer {
  background-color: var(--vh-bg-soft) !important; color: var(--vh-text-dim) !important; border-top: 1px solid var(--vh-border);
}

body.vh-dark::-webkit-scrollbar-track { background: var(--vh-bg); }
body.vh-dark::-webkit-scrollbar-thumb { background: var(--vh-border); }
body.vh-dark::-webkit-scrollbar-thumb:hover { background: var(--vh-teal-dark); }

#vh-theme-toggle {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  width: 88px; height: 48px; padding: 0; border-radius: 999px; border: none;
  background-color: #e2e8f0; cursor: pointer;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.08), 0 6px 16px rgba(0,0,0,0.15);
  transition: background-color 0.25s ease; outline: none; -webkit-tap-highlight-color: transparent;
}
#vh-theme-toggle:focus, #vh-theme-toggle:focus-visible, #vh-theme-toggle:active {
  outline: none; box-shadow: inset 0 2px 6px rgba(0,0,0,0.08), 0 6px 16px rgba(0,0,0,0.15);
}
#vh-theme-toggle .vh-track-icon { position: absolute; top: 50%; transform: translateY(-50%); font-size: 16px; line-height: 1; opacity: 0.35; }
#vh-theme-toggle .vh-track-icon i { display: block; }
#vh-theme-toggle .vh-icon-sun-track { left: 16px; color: #f59e0b; }
#vh-theme-toggle .vh-icon-moon-track { right: 16px; color: #64748b; }
#vh-theme-toggle .vh-knob {
  position: absolute; top: -4px; left: -4px; width: 56px; height: 56px; border-radius: 50%;
  background-color: #ffffff; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #f59e0b; box-shadow: 0 6px 14px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.1);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, color 0.3s ease;
}
#vh-theme-toggle .vh-knob i { pointer-events: none; }

body.vh-dark #vh-theme-toggle { background-color: #475569; }
body.vh-dark #vh-theme-toggle .vh-knob { left: 36px; background-color: #ffffff; color: #2563eb; }
body.vh-dark #vh-theme-toggle .vh-icon-sun-track { opacity: 0.5; }
body.vh-dark #vh-theme-toggle .vh-icon-moon-track { opacity: 0.9; }