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

/* ==========================================================================
   VuaHost - Vibrant Redesign v2 (light mode, phong cach nang dong nhieu mau)
   ========================================================================== */

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

:root {
  --vh2-orange: #FF6B35;
  --vh2-orange-dark: #E8541F;
  --vh2-purple: #7C3AED;
  --vh2-purple-dark: #5B21B6;
  --vh2-pink: #F72585;
  --vh2-teal: #06D6A0;
  --vh2-blue: #4361EE;
  --vh2-ink: #1A1B25;
  --vh2-bg-page: #F7F7FB;
  --vh2-border: #ECECF5;
  --vh2-radius: 16px;
  --vh2-gradient-brand: linear-gradient(135deg, var(--vh2-orange) 0%, var(--vh2-pink) 60%, var(--vh2-purple) 100%);
  --vh2-gradient-soft: linear-gradient(135deg, #FFF3EC 0%, #FDEAF4 50%, #F3ECFE 100%);
}

body:not(.vh-dark) {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--vh2-bg-page) !important;
  color: var(--vh2-ink);
}
body:not(.vh-dark) h1, body:not(.vh-dark) h2, body:not(.vh-dark) h3,
body:not(.vh-dark) h4, body:not(.vh-dark) h5, body:not(.vh-dark) h6,
body:not(.vh-dark) .card-title, body:not(.vh-dark) .panel-title {
  font-weight: 700 !important;
  color: var(--vh2-ink) !important;
}

body:not(.vh-dark) .topbar {
  background: var(--vh2-ink) !important;
  border-bottom: none !important;
}
body:not(.vh-dark) .topbar .btn,
body:not(.vh-dark) .topbar a { color: #E2E2F0 !important; }
body:not(.vh-dark) .topbar .btn:hover,
body:not(.vh-dark) .topbar a:hover { color: #fff !important; }

body:not(.vh-dark) .navbar.navbar-light {
  background: var(--vh2-gradient-brand) !important;
  padding: 14px 0;
}
body:not(.vh-dark) .navbar-brand {
  background-color: #ffffff;
  padding: 8px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
body:not(.vh-dark) .navbar.navbar-light .search .btn-default,
body:not(.vh-dark) .navbar.navbar-light .search .form-control {
  background-color: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: #fff !important;
}
body:not(.vh-dark) .navbar.navbar-light .search .form-control::placeholder { color: rgba(255,255,255,0.75) !important; }
body:not(.vh-dark) .navbar.navbar-light .cart-btn { color: #fff !important; }
body:not(.vh-dark) .navbar.navbar-light .cart-btn .badge-info {
  background-color: var(--vh2-teal) !important;
  color: #06301F !important;
  font-weight: 700;
}

body:not(.vh-dark) .main-navbar-wrapper { background-color: var(--vh2-ink) !important; }
body:not(.vh-dark) .main-navbar-wrapper #nav > li > a,
body:not(.vh-dark) .main-navbar-wrapper .navbar-nav > li > a,
body:not(.vh-dark) .main-navbar-wrapper .nav-link {
  color: #E2E2F0 !important;
  font-weight: 600;
}
body:not(.vh-dark) .main-navbar-wrapper #nav > li > a:hover,
body:not(.vh-dark) .main-navbar-wrapper .nav-link:hover { color: var(--vh2-orange) !important; }

body:not(.vh-dark) .card,
body:not(.vh-dark) .panel,
body:not(.vh-dark) .well {
  border: 1px solid var(--vh2-border) !important;
  border-radius: var(--vh2-radius) !important;
  box-shadow: 0 2px 10px rgba(26,27,37,0.04);
}
body:not(.vh-dark) .card-header,
body:not(.vh-dark) .panel-heading {
  border-radius: var(--vh2-radius) var(--vh2-radius) 0 0 !important;
  background: var(--vh2-gradient-soft) !important;
  border-bottom: 1px solid var(--vh2-border) !important;
  font-weight: 700;
}

body:not(.vh-dark) .login-form .card {
  border: none !important;
  box-shadow: 0 12px 40px rgba(124,58,237,0.12);
}
body:not(.vh-dark) .login-form .card-body { padding: 3rem !important; }
body:not(.vh-dark) .login-form .card h6.h3 {
  background: var(--vh2-gradient-brand) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-size: 1.8rem;
  font-weight: 800;
}

body:not(.vh-dark) .btn-primary {
  background: var(--vh2-gradient-brand) !important;
  border: none !important;
  font-weight: 700;
  border-radius: 10px !important;
  padding: 10px 22px;
  box-shadow: 0 6px 16px rgba(255,107,53,0.3);
  transition: transform .15s ease, box-shadow .15s ease;
}
body:not(.vh-dark) .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(247,37,133,0.35);
}
body:not(.vh-dark) .btn-default,
body:not(.vh-dark) .btn-secondary {
  border-radius: 10px !important;
  border: 1px solid var(--vh2-border) !important;
}

body:not(.vh-dark) .sidebar { border-radius: var(--vh2-radius); border: 1px solid var(--vh2-border); }
body:not(.vh-dark) .sidebar .list-group-item.active,
body:not(.vh-dark) .sidebar .active > a {
  background: var(--vh2-gradient-soft) !important;
  color: var(--vh2-purple-dark) !important;
  border-left: 3px solid var(--vh2-orange) !important;
  font-weight: 700;
}

body:not(.vh-dark) .badge-info { background-color: var(--vh2-blue) !important; }
body:not(.vh-dark) .badge-success { background-color: var(--vh2-teal) !important; color: #06301F !important; }
body:not(.vh-dark) .badge-warning { background-color: #FFC145 !important; color: #4A2E00 !important; }

body:not(.vh-dark) .footer {
  background-color: var(--vh2-ink) !important;
  color: #C9C9DA;
}
body:not(.vh-dark) .footer .nav-link,
body:not(.vh-dark) .footer a { color: #C9C9DA !important; }
body:not(.vh-dark) .footer .nav-link:hover,
body:not(.vh-dark) .footer a:hover { color: var(--vh2-orange) !important; }