/* ══════════════════════════════════════════════════════════════
   KORVIX NETWORKS — Enterprise Dark Theme for WHMCS
   Design: #03060B bg, #2F80FF accent, 18px card radius
   ══════════════════════════════════════════════════════════════ */

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

:root {
  --kx-bg: #03060B;
  --kx-bg2: #07111B;
  --kx-card: #0A1522;
  --kx-border: rgba(120,170,255,0.12);
  --kx-border-hover: rgba(120,170,255,0.25);
  --kx-accent: #2F80FF;
  --kx-accent2: #63B3FF;
  --kx-success: #23D18B;
  --kx-danger: #ef4444;
  --kx-warning: #f59e0b;
  --kx-text: #F5F7FA;
  --kx-text2: #8A97A8;
  --kx-text3: #5a6577;
  --kx-radius-card: 18px;
  --kx-radius-btn: 12px;
  --kx-radius-input: 12px;
  --kx-radius-panel: 20px;
}

/* ── Base ── */
body.kvx-portal {
  background: var(--kx-bg) !important;
  color: var(--kx-text) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.kvx-portal h1, body.kvx-portal h2, body.kvx-portal h3,
body.kvx-portal h4, body.kvx-portal h5, body.kvx-portal h6 {
  color: var(--kx-text) !important;
  font-weight: 700;
}

body.kvx-portal p, body.kvx-portal label, body.kvx-portal span,
body.kvx-portal li, body.kvx-portal td, body.kvx-portal th {
  color: var(--kx-text2);
}

body.kvx-portal a { color: var(--kx-accent); text-decoration: none; }
body.kvx-portal a:hover { color: var(--kx-accent2); text-decoration: none; }

::selection { background: rgba(47,128,255,0.3); color: #fff; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--kx-bg); }
::-webkit-scrollbar-thumb { background: rgba(120,170,255,0.15); border-radius: 3px; }

/* ── Layout ── */
body.kvx-portal #main-body,
body.kvx-portal .main-content,
body.kvx-portal section#main-body {
  background: var(--kx-bg) !important;
}

body.kvx-portal .container,
body.kvx-portal .container-fluid {
  max-width: 1400px;
}

/* ── Cards ── */
body.kvx-portal .card,
body.kvx-portal .panel,
body.kvx-portal .well {
  background: var(--kx-card) !important;
  border: 1px solid var(--kx-border) !important;
  border-radius: var(--kx-radius-card) !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

body.kvx-portal .card:hover {
  border-color: var(--kx-border-hover) !important;
}

body.kvx-portal .card-header {
  background: rgba(120,170,255,0.04) !important;
  border-bottom: 1px solid var(--kx-border) !important;
  border-radius: var(--kx-radius-card) var(--kx-radius-card) 0 0 !important;
  color: var(--kx-text) !important;
}

body.kvx-portal .card-body { background: transparent !important; }

body.kvx-portal .card-footer {
  background: rgba(120,170,255,0.02) !important;
  border-top: 1px solid var(--kx-border) !important;
}

body.kvx-portal .card-title { color: var(--kx-text) !important; }

/* ── Buttons ── */
body.kvx-portal .btn {
  border-radius: var(--kx-radius-btn) !important;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

body.kvx-portal .btn-primary,
body.kvx-portal .btn-success {
  background: var(--kx-accent) !important;
  border-color: var(--kx-accent) !important;
  color: #fff !important;
}
body.kvx-portal .btn-primary:hover,
body.kvx-portal .btn-success:hover {
  background: #4090FF !important;
  border-color: #4090FF !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(47,128,255,0.3);
}

body.kvx-portal .btn-default,
body.kvx-portal .btn-secondary,
body.kvx-portal .btn-outline-primary {
  background: transparent !important;
  border-color: var(--kx-border) !important;
  color: var(--kx-text2) !important;
}
body.kvx-portal .btn-default:hover,
body.kvx-portal .btn-secondary:hover,
body.kvx-portal .btn-outline-primary:hover {
  border-color: var(--kx-border-hover) !important;
  background: rgba(47,128,255,0.05) !important;
  color: var(--kx-text) !important;
}

body.kvx-portal .btn-danger {
  background: var(--kx-danger) !important;
  border-color: var(--kx-danger) !important;
  color: #fff !important;
}

body.kvx-portal .btn-warning {
  background: var(--kx-warning) !important;
  border-color: var(--kx-warning) !important;
  color: #000 !important;
}

body.kvx-portal .btn-link {
  color: var(--kx-accent) !important;
  background: transparent !important;
}

/* ── Forms ── */
body.kvx-portal .form-control,
body.kvx-portal input[type="text"],
body.kvx-portal input[type="email"],
body.kvx-portal input[type="password"],
body.kvx-portal input[type="tel"],
body.kvx-portal input[type="number"],
body.kvx-portal input[type="url"],
body.kvx-portal input[type="search"],
body.kvx-portal input[type="date"],
body.kvx-portal select,
body.kvx-portal textarea {
  background: var(--kx-card) !important;
  border: 1px solid var(--kx-border) !important;
  border-radius: var(--kx-radius-input) !important;
  color: var(--kx-text) !important;
  padding: 12px 16px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

body.kvx-portal .form-control:focus,
body.kvx-portal input:focus,
body.kvx-portal select:focus,
body.kvx-portal textarea:focus {
  border-color: var(--kx-accent) !important;
  box-shadow: 0 0 0 3px rgba(47,128,255,0.1) !important;
  outline: none !important;
}

body.kvx-portal .form-control::placeholder {
  color: var(--kx-text3) !important;
}

body.kvx-portal .custom-select {
  background: var(--kx-card) !important;
  border: 1px solid var(--kx-border) !important;
  color: var(--kx-text) !important;
  border-radius: var(--kx-radius-input) !important;
}

body.kvx-portal .input-group-text {
  background: var(--kx-bg2) !important;
  border: 1px solid var(--kx-border) !important;
  color: var(--kx-text2) !important;
}

body.kvx-portal label {
  color: var(--kx-text2) !important;
  font-weight: 500;
  font-size: 13px;
}

/* ── Tables ── */
body.kvx-portal .table,
body.kvx-portal table {
  color: var(--kx-text2) !important;
  background: transparent !important;
}

body.kvx-portal .table thead th {
  background: var(--kx-bg2) !important;
  border-bottom: 1px solid var(--kx-border) !important;
  color: var(--kx-text2) !important;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

body.kvx-portal .table td,
body.kvx-portal .table th {
  border-color: var(--kx-border) !important;
  padding: 14px 16px !important;
}

body.kvx-portal .table-striped tbody tr:nth-of-type(odd) {
  background: rgba(120,170,255,0.02) !important;
}

body.kvx-portal .table tbody tr:hover {
  background: rgba(47,128,255,0.04) !important;
}

/* ── Alerts ── */
body.kvx-portal .alert {
  border-radius: var(--kx-radius-input) !important;
  border: 1px solid !important;
}

body.kvx-portal .alert-success {
  background: rgba(35,209,139,0.08) !important;
  border-color: rgba(35,209,139,0.2) !important;
  color: var(--kx-success) !important;
}

body.kvx-portal .alert-danger, body.kvx-portal .alert-error {
  background: rgba(239,68,68,0.08) !important;
  border-color: rgba(239,68,68,0.2) !important;
  color: var(--kx-danger) !important;
}

body.kvx-portal .alert-warning {
  background: rgba(245,158,11,0.08) !important;
  border-color: rgba(245,158,11,0.2) !important;
  color: var(--kx-warning) !important;
}

body.kvx-portal .alert-info {
  background: rgba(47,128,255,0.08) !important;
  border-color: rgba(47,128,255,0.2) !important;
  color: var(--kx-accent2) !important;
}

/* ── Modals ── */
body.kvx-portal .modal-content {
  background: var(--kx-card) !important;
  border: 1px solid var(--kx-border) !important;
  border-radius: var(--kx-radius-panel) !important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.5) !important;
}

body.kvx-portal .modal-header {
  border-bottom: 1px solid var(--kx-border) !important;
}

body.kvx-portal .modal-footer {
  border-top: 1px solid var(--kx-border) !important;
}

body.kvx-portal .modal-title { color: var(--kx-text) !important; }

body.kvx-portal .modal-backdrop { background: rgba(0,0,0,0.7) !important; }

body.kvx-portal .close { color: var(--kx-text2) !important; text-shadow: none !important; }

/* ── Sidebar ── */
body.kvx-portal .sidebar .list-group-item {
  background: transparent !important;
  border: none !important;
  color: var(--kx-text2) !important;
  padding: 10px 16px;
  border-radius: var(--kx-radius-btn) !important;
  transition: all 0.15s ease;
}

body.kvx-portal .sidebar .list-group-item:hover,
body.kvx-portal .sidebar .list-group-item.active {
  background: rgba(47,128,255,0.08) !important;
  color: var(--kx-text) !important;
}

body.kvx-portal .sidebar .list-group-item.active {
  border-left: 3px solid var(--kx-accent) !important;
}

/* ── Breadcrumbs ── */
body.kvx-portal .breadcrumb {
  background: transparent !important;
  padding: 8px 0 !important;
}

body.kvx-portal .breadcrumb-item a { color: var(--kx-text2) !important; }
body.kvx-portal .breadcrumb-item.active { color: var(--kx-text3) !important; }
body.kvx-portal .breadcrumb-item + .breadcrumb-item::before { color: var(--kx-text3) !important; }

/* ── Pagination ── */
body.kvx-portal .page-link {
  background: var(--kx-card) !important;
  border-color: var(--kx-border) !important;
  color: var(--kx-text2) !important;
  border-radius: var(--kx-radius-btn) !important;
}

body.kvx-portal .page-item.active .page-link {
  background: var(--kx-accent) !important;
  border-color: var(--kx-accent) !important;
  color: #fff !important;
}

body.kvx-portal .page-link:hover {
  background: rgba(47,128,255,0.08) !important;
  color: var(--kx-text) !important;
}

/* ── Badges ── */
body.kvx-portal .badge-success, body.kvx-portal .badge-active {
  background: rgba(35,209,139,0.12) !important;
  color: var(--kx-success) !important;
}

body.kvx-portal .badge-danger {
  background: rgba(239,68,68,0.12) !important;
  color: var(--kx-danger) !important;
}

body.kvx-portal .badge-warning {
  background: rgba(245,158,11,0.12) !important;
  color: var(--kx-warning) !important;
}

body.kvx-portal .badge-primary, body.kvx-portal .badge-info {
  background: rgba(47,128,255,0.12) !important;
  color: var(--kx-accent) !important;
}

body.kvx-portal .badge-secondary {
  background: rgba(138,151,168,0.12) !important;
  color: var(--kx-text2) !important;
}

/* ── Progress Bars ── */
body.kvx-portal .progress {
  background: var(--kx-bg2) !important;
  border-radius: 8px !important;
  height: 8px;
}

body.kvx-portal .progress-bar {
  background: var(--kx-accent) !important;
  border-radius: 8px !important;
}

/* ── Dropdown Menus ── */
body.kvx-portal .dropdown-menu {
  background: var(--kx-card) !important;
  border: 1px solid var(--kx-border) !important;
  border-radius: var(--kx-radius-input) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4) !important;
}

body.kvx-portal .dropdown-item {
  color: var(--kx-text2) !important;
  padding: 10px 16px;
  transition: all 0.15s ease;
}

body.kvx-portal .dropdown-item:hover {
  background: rgba(47,128,255,0.08) !important;
  color: var(--kx-text) !important;
}

body.kvx-portal .dropdown-divider {
  border-color: var(--kx-border) !important;
}

/* ── Nav Tabs ── */
body.kvx-portal .nav-tabs {
  border-bottom: 1px solid var(--kx-border) !important;
}

body.kvx-portal .nav-tabs .nav-link {
  color: var(--kx-text2) !important;
  border: none !important;
  padding: 12px 20px;
}

body.kvx-portal .nav-tabs .nav-link.active {
  background: transparent !important;
  color: var(--kx-text) !important;
  border-bottom: 2px solid var(--kx-accent) !important;
}

body.kvx-portal .nav-tabs .nav-link:hover {
  color: var(--kx-text) !important;
  border-color: transparent !important;
}

body.kvx-portal .tab-content {
  background: transparent !important;
}

/* ── WHMCS-specific: Page head ── */
body.kvx-portal .kvx-page-head {
  background: var(--kx-bg2) !important;
  border-bottom: 1px solid var(--kx-border) !important;
}

/* ── WHMCS-specific: Action icon buttons (homepage) ── */
body.kvx-portal .action-icon-btns a {
  background: var(--kx-card) !important;
  border: 1px solid var(--kx-border) !important;
  border-radius: var(--kx-radius-card) !important;
  color: var(--kx-text2) !important;
  transition: all 0.2s ease;
  padding: 24px 16px !important;
}

body.kvx-portal .action-icon-btns a:hover {
  border-color: var(--kx-border-hover) !important;
  transform: translateY(-2px);
  color: var(--kx-text) !important;
}

body.kvx-portal .action-icon-btns .ico-container i {
  color: var(--kx-accent) !important;
}

/* ── WHMCS-specific: Client area home tiles ── */
body.kvx-portal .client-home-panels .card {
  background: var(--kx-card) !important;
}

body.kvx-portal .client-home-panels .card .card-icon {
  color: var(--kx-accent) !important;
}

/* ── WHMCS-specific: Status labels ── */
body.kvx-portal .label-active, body.kvx-portal .status-active {
  background: rgba(35,209,139,0.12) !important;
  color: var(--kx-success) !important;
}

body.kvx-portal .label-pending, body.kvx-portal .status-pending {
  background: rgba(245,158,11,0.12) !important;
  color: var(--kx-warning) !important;
}

body.kvx-portal .label-cancelled, body.kvx-portal .status-cancelled,
body.kvx-portal .label-suspended, body.kvx-portal .status-suspended {
  background: rgba(239,68,68,0.12) !important;
  color: var(--kx-danger) !important;
}

/* ── WHMCS-specific: Topbar override ── */
body.kvx-portal .kvx-topbar {
  background: var(--kx-bg) !important;
  border-bottom: 1px solid var(--kx-border) !important;
}

/* ── WHMCS-specific: Header override ── */
body.kvx-portal header.header.kvx-site-header {
  background: var(--kx-bg) !important;
  border-bottom: 1px solid var(--kx-border) !important;
}

/* ── WHMCS-specific: Footer ── */
body.kvx-portal .kvx-footer {
  background: var(--kx-bg) !important;
  border-top: 1px solid var(--kx-border) !important;
  color: var(--kx-text2) !important;
}

body.kvx-portal .kvx-footer a { color: var(--kx-text2) !important; }
body.kvx-portal .kvx-footer a:hover { color: var(--kx-text) !important; }
body.kvx-portal .kvx-footer h4 {
  color: var(--kx-accent) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

body.kvx-portal .kvx-foot-bottom {
  background: transparent !important;
  border-top: 1px solid var(--kx-border) !important;
  color: var(--kx-text3) !important;
}

/* ── WHMCS-specific: Support tickets ── */
body.kvx-portal .ticket-reply {
  background: var(--kx-card) !important;
  border: 1px solid var(--kx-border) !important;
  border-radius: var(--kx-radius-card) !important;
  margin-bottom: 16px;
}

body.kvx-portal .ticket-reply-header {
  background: rgba(120,170,255,0.04) !important;
  border-bottom: 1px solid var(--kx-border) !important;
}

/* ── WHMCS-specific: Invoice ── */
body.kvx-portal .invoice-container {
  background: var(--kx-card) !important;
  border: 1px solid var(--kx-border) !important;
  border-radius: var(--kx-radius-card) !important;
}

/* ── WHMCS-specific: Cart / Order form ── */
body.kvx-portal .order-summary,
body.kvx-portal .order-form {
  background: var(--kx-card) !important;
  border: 1px solid var(--kx-border) !important;
  border-radius: var(--kx-radius-card) !important;
}

/* ── Custom checkbox/radio ── */
body.kvx-portal .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--kx-accent) !important;
  border-color: var(--kx-accent) !important;
}

/* ── Tooltip ── */
body.kvx-portal .tooltip-inner {
  background: var(--kx-card) !important;
  border: 1px solid var(--kx-border) !important;
  color: var(--kx-text) !important;
}

/* ── Animations ── */
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.status-pulse { animation: statusPulse 2s ease-in-out infinite; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.kvx-fade-in { animation: fadeIn 0.5s ease-out both; }

/* ── Misc overrides ── */
body.kvx-portal hr { border-color: var(--kx-border) !important; }
body.kvx-portal code { background: var(--kx-bg2); color: var(--kx-accent2); border-radius: 6px; padding: 2px 6px; }
body.kvx-portal pre { background: var(--kx-bg2) !important; border: 1px solid var(--kx-border); border-radius: var(--kx-radius-input); color: var(--kx-text); padding: 16px; }
body.kvx-portal blockquote { border-left: 3px solid var(--kx-accent); padding-left: 16px; color: var(--kx-text2); }

/* ── Google Places Autocomplete (dark) ── */
.pac-container {
  background: var(--kx-card) !important;
  border: 1px solid var(--kx-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
  font-family: 'Inter', sans-serif !important;
  overflow: hidden;
}
.pac-item { padding: 12px 16px !important; border-top: 1px solid rgba(120,170,255,0.06) !important; color: var(--kx-text2) !important; background: transparent !important; }
.pac-item:first-child { border-top: none !important; }
.pac-item:hover, .pac-item-selected { background: rgba(47,128,255,0.08) !important; }
.pac-item-query { color: var(--kx-text) !important; font-weight: 500 !important; }
.pac-matched { color: var(--kx-accent) !important; font-weight: 600 !important; }
.pac-icon { display: none !important; }
.pac-logo::after { display: none !important; }