/* ==========================================================================
   VPNXHUB shared app theme
   ========================================================================== */

body.auth-page,
body.client-dashboard-page,
body.admin-page,
body.cart-page {
  color: var(--text);
  background:
    radial-gradient(circle at 78% 12%, rgba(6, 182, 212, 0.17), transparent 30%),
    radial-gradient(circle at 18% 12%, rgba(37, 99, 235, 0.15), transparent 28%),
    linear-gradient(135deg, #020617 0%, #050b1a 45%, #071326 100%);
}

body.auth-page::before,
body.client-dashboard-page::before,
body.admin-page::before,
body.cart-page::before {
  background:
    linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px),
    radial-gradient(ellipse at 72% 20%, rgba(6, 182, 212, 0.2), transparent 40%),
    radial-gradient(ellipse at 50% 52%, rgba(37, 99, 235, 0.11), transparent 48%);
  background-size: 56px 56px, 56px 56px, auto, auto;
}

.auth-header .nav-shell,
.client-dashboard-page .nav-shell,
.admin-page .nav-shell,
.cart-page .nav-shell {
  background: rgba(2, 6, 23, 0.78);
  border-color: rgba(148, 163, 184, 0.14);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.32), 0 0 42px rgba(37, 99, 235, 0.08);
}

.auth-intro,
.auth-card,
.client-card,
.dashboard-intro,
.dashboard-card,
.confirm-modal,
.renew-contact-modal,
.slip-viewer {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(2, 6, 23, 0.56)),
    radial-gradient(circle at 90% 10%, rgba(6, 182, 212, 0.14), transparent 34%);
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow:
    0 1px 0 rgba(248, 250, 252, 0.05) inset,
    0 28px 78px rgba(0, 0, 0, 0.36),
    0 0 64px rgba(37, 99, 235, 0.08);
}

.auth-highlight,
.client-checklist li,
.dashboard-menu,
.kpi-card,
.service-item,
.summary-chip,
.ticket-list li,
.message-bubble,
.cart-item,
.payment-method-card,
.payment-detail-rows li,
.manual-fallback-details,
.settings-fieldset,
.ops-metric-card,
.linode-key-item,
.linode-assign-vps-item,
.linode-instance-card,
.linode-config-panel,
.linode-create-section,
.linode-instance-config,
.linode-output,
.linode-instance-output,
.admin-client-item {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.68), rgba(2, 6, 23, 0.48));
  border-color: rgba(148, 163, 184, 0.14);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.auth-highlight:hover,
.client-checklist li:hover,
.kpi-card:hover,
.service-item:hover,
.summary-chip:hover,
.ticket-list li:hover,
.cart-item:hover,
.payment-method-card:hover:not(:disabled),
.linode-key-item:hover,
.linode-assign-vps-item:hover,
.linode-instance-card:hover,
.admin-client-item:hover {
  border-color: rgba(6, 182, 212, 0.28);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.24), 0 0 28px rgba(6, 182, 212, 0.08);
}

.auth-tab,
.dashboard-menu-item,
.table-action,
.payment-method-card,
.checkout-cta,
.topups-toolbar select,
.dashboard-form input,
.dashboard-form select,
.dashboard-form textarea,
.message-form input,
.auth-form input,
.slip-form input[type="text"],
.slip-form textarea,
.slip-form input[type="file"],
.settings-fieldset input[type="text"],
.settings-fieldset input[type="password"],
.settings-fieldset input[type="email"],
.settings-fieldset input[type="number"],
.admin-client-search,
.linode-manager-toolbar select,
.linode-config-row select,
.linode-config-row input,
.linode-instance-config-row select,
.linode-instance-config-row input {
  background: rgba(2, 6, 23, 0.54);
  border-color: rgba(148, 163, 184, 0.18);
  color: var(--text);
}

.auth-tab:hover,
.dashboard-menu-item:hover,
.dashboard-menu-item:focus-visible,
.table-action:hover,
.table-action:focus-visible,
.payment-method-card:hover:not(:disabled),
.auth-form input:focus-visible,
.dashboard-form input:focus-visible,
.dashboard-form select:focus-visible,
.dashboard-form textarea:focus-visible,
.message-form input:focus-visible,
.settings-fieldset input:focus-visible,
.admin-client-search:focus-visible,
.linode-manager-toolbar select:focus-visible,
.linode-config-row select:focus-visible,
.linode-config-row input:focus-visible,
.linode-instance-config-row select:focus-visible,
.linode-instance-config-row input:focus-visible {
  border-color: rgba(6, 182, 212, 0.44);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.12), 0 0 24px rgba(37, 99, 235, 0.12);
}

.auth-tab.active,
.dashboard-menu-item.is-active,
.payment-method-card.active,
.ticket-item.active,
.admin-client-item.selected,
#adminServiceList .service-item.selected {
  color: #f8fafc;
  border-color: rgba(6, 182, 212, 0.42);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(6, 182, 212, 0.14)),
    rgba(2, 6, 23, 0.56);
  box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.08) inset, 0 0 28px rgba(6, 182, 212, 0.1);
}

.auth-panel h2,
.dashboard-card h2,
.dashboard-intro h1,
.client-card h1,
.subsection-title,
.cart-item-main h3 {
  color: #f8fafc;
}

.auth-form label,
.dashboard-form label,
.slip-form label,
.settings-fieldset label,
.linode-manager-toolbar label,
.linode-config-row label,
.linode-instance-config-row label,
.invoice-table th,
.orders-table th,
.data-table th,
.cart-section-title {
  color: #dbeafe;
}

.kpi-card strong,
.summary-total strong,
.cart-item-price,
.summary-chip strong,
.ops-metric-card strong,
.metric-value {
  color: #67e8f9;
  text-shadow: 0 0 18px rgba(6, 182, 212, 0.2);
}

.message-bubble.outgoing,
.status-paid,
.status-pill.info,
.auto-poll-banner {
  background: rgba(37, 99, 235, 0.14);
  border-color: rgba(6, 182, 212, 0.24);
}

.checkout-cta,
.btn.btn-primary {
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  border-color: rgba(125, 211, 252, 0.45);
  box-shadow: 0 18px 34px rgba(37, 99, 235, 0.22);
}

.checkout-cta:hover:not(:disabled),
.btn.btn-primary:hover,
.btn.btn-primary:focus-visible {
  box-shadow: 0 0 28px rgba(6, 182, 212, 0.18), 0 20px 42px rgba(37, 99, 235, 0.34);
}

.menu-badge,
.cart-link-badge {
  background: linear-gradient(135deg, #ef4444, #f97316);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.24);
}

.table-wrap,
.ops-table-grid {
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(2, 6, 23, 0.24);
}

.invoice-table th,
.invoice-table td,
.orders-table th,
.orders-table td,
.data-table th,
.data-table td {
  border-bottom-color: rgba(148, 163, 184, 0.12);
}

.confirm-modal-backdrop,
.renew-contact-backdrop,
#slipViewerBackdrop {
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.auto-poll-spinner {
  border-color: rgba(148, 163, 184, 0.18);
  border-top-color: #06b6d4;
}

select option {
  color: #f8fafc;
  background: #020617;
}

.client-dashboard-page .dashboard-menu-wrap {
  margin-top: 22px;
}

.client-dashboard-page .dashboard-menu {
  position: relative;
  isolation: isolate;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.82)),
    radial-gradient(circle at 12% 18%, rgba(56, 189, 248, 0.16), transparent 36%);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(148, 163, 184, 0.08) inset;
}

.client-dashboard-page .dashboard-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.08), rgba(37, 99, 235, 0.06), rgba(6, 182, 212, 0.08));
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
}

.client-dashboard-page .dashboard-menu-item {
  position: relative;
  overflow: hidden;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.8), rgba(2, 6, 23, 0.68));
  color: #d9e8fb;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: border-color 220ms ease, background-color 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.client-dashboard-page .dashboard-menu-item::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.18), rgba(37, 99, 235, 0.32), rgba(56, 189, 248, 0.18));
  transform: scaleX(0.2);
  transform-origin: center;
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}

.client-dashboard-page .dashboard-menu-item:hover,
.client-dashboard-page .dashboard-menu-item:focus-visible {
  border-color: rgba(103, 232, 249, 0.48);
  color: #f8fafc;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.88), rgba(8, 47, 73, 0.74));
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.34), 0 0 0 2px rgba(6, 182, 212, 0.1);
  transform: translateY(-1px);
}

.client-dashboard-page .dashboard-menu-item:hover::after,
.client-dashboard-page .dashboard-menu-item:focus-visible::after {
  opacity: 0.9;
  transform: scaleX(1);
}

.client-dashboard-page .dashboard-menu-item.is-active {
  border-color: rgba(103, 232, 249, 0.66);
  color: #f8fafc;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.34), rgba(6, 182, 212, 0.24)),
    linear-gradient(180deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.72));
  box-shadow:
    0 12px 24px rgba(2, 6, 23, 0.35),
    0 0 0 1px rgba(125, 211, 252, 0.26) inset,
    0 0 20px rgba(6, 182, 212, 0.18);
}

.client-dashboard-page .dashboard-menu-item.is-active::after {
  opacity: 1;
  transform: scaleX(1);
  background: linear-gradient(90deg, rgba(125, 211, 252, 0.24), rgba(56, 189, 248, 0.95), rgba(125, 211, 252, 0.24));
}

@media (max-width: 760px) {
  .client-dashboard-page .dashboard-menu {
    gap: 10px;
    padding: 12px;
  }

  .client-dashboard-page .dashboard-menu-item {
    width: 100%;
  }
}