/* =============================================
   VivaHeberg — Theme Override for ClientXCMS
   Dark Tech | Blue/Cyan Palette
   ============================================= */

:root {
  --viva-bg:       #070d1a;
  --viva-bg-2:     #0d1a33;
  --viva-card:     #0f1f3d;
  --viva-card-h:   #13274d;
  --viva-blue:     #1a6fff;
  --viva-blue-l:   #4d95ff;
  --viva-cyan:     #00b4ff;
  --viva-border:   rgba(26,111,255,0.18);
  --viva-border-h: rgba(26,111,255,0.45);
  --viva-glow:     rgba(26,111,255,0.30);
  --viva-text:     #e8eaf6;
  --viva-muted:    #8ca0c4;
  --viva-radius:   12px;
  --viva-trans:    0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ── Canvas background ───────────────────────── */
#viva-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── Base body/html ──────────────────────────── */
html, body {
  background: var(--viva-bg) !important;
  color: var(--viva-text) !important;
}

/* All content above canvas */
body > *:not(#viva-bg),
#viva-bg ~ * {
  position: relative;
  z-index: 1;
}

/* ── Header ──────────────────────────────────── */
header,
.dark\:bg-gray-800,
header.bg-white {
  background: rgba(7,13,26,0.82) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--viva-border) !important;
}

/* ── Sub-nav ─────────────────────────────────── */
nav.bg-white,
nav.dark\:bg-gray-700 {
  background: rgba(13,26,51,0.80) !important;
  backdrop-filter: blur(10px) !important;
  border-color: var(--viva-border) !important;
}
nav a { color: var(--viva-muted) !important; transition: color var(--viva-trans); }
nav a:hover,
nav a.text-indigo-600 { color: var(--viva-cyan) !important; }

/* ── Main content area ───────────────────────── */
#content,
.dark\:bg-gray-900,
.bg-gray-50,
.min-h-screen {
  background: transparent !important;
}

/* ── Cards ───────────────────────────────────── */
.card, .card-sm,
.bg-white,
.dark\:bg-gray-800 {
  background: rgba(15,31,61,0.78) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--viva-border) !important;
  border-radius: var(--viva-radius) !important;
  color: var(--viva-text) !important;
  transition: border-color var(--viva-trans), box-shadow var(--viva-trans);
}
.card:hover, .card-sm:hover {
  border-color: var(--viva-border-h) !important;
  box-shadow: 0 0 20px var(--viva-glow) !important;
}

/* ── Tables ──────────────────────────────────── */
table { color: var(--viva-text) !important; }
thead th,
.dark\:bg-gray-700 th {
  background: rgba(26,111,255,0.10) !important;
  color: var(--viva-cyan) !important;
  border-color: var(--viva-border) !important;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
tbody tr {
  border-color: rgba(26,111,255,0.08) !important;
  transition: background var(--viva-trans);
}
tbody tr:hover { background: rgba(26,111,255,0.06) !important; }
td { color: var(--viva-text) !important; border-color: rgba(26,111,255,0.08) !important; }

/* ── Inputs ──────────────────────────────────── */
input, select, textarea,
.input-text,
.dark\:bg-gray-700 input {
  background: rgba(7,13,26,0.7) !important;
  border: 1px solid var(--viva-border) !important;
  color: var(--viva-text) !important;
  border-radius: 8px !important;
  transition: border-color var(--viva-trans), box-shadow var(--viva-trans);
}
input:focus, select:focus, textarea:focus,
.input-text:focus {
  border-color: var(--viva-blue) !important;
  box-shadow: 0 0 0 3px rgba(26,111,255,0.18) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--viva-muted) !important; }

/* ── Buttons ─────────────────────────────────── */
.btn-primary,
button[type="submit"],
a.bg-indigo-600,
.bg-indigo-600 {
  background: linear-gradient(135deg, var(--viva-blue), #0044cc) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 600 !important;
  transition: opacity var(--viva-trans), box-shadow var(--viva-trans);
}
.btn-primary:hover,
button[type="submit"]:hover,
a.bg-indigo-600:hover,
.bg-indigo-600:hover {
  opacity: .88 !important;
  box-shadow: 0 4px 20px var(--viva-glow) !important;
}

/* ── Badges / pills ──────────────────────────── */
.text-indigo-600, .text-indigo-500, .text-indigo-400 { color: var(--viva-blue-l) !important; }
.bg-indigo-100 { background: rgba(26,111,255,0.12) !important; }
.border-indigo-600 { border-color: var(--viva-blue) !important; }
.text-cyan-600, .text-cyan-500 { color: var(--viva-cyan) !important; }

/* ── Text colors ─────────────────────────────── */
.text-gray-800, .text-gray-700, .text-gray-900,
.dark\:text-white, .dark\:text-gray-200 { color: var(--viva-text) !important; }
.text-gray-500, .text-gray-600,
.dark\:text-gray-400 { color: var(--viva-muted) !important; }

/* ── Dividers / borders ──────────────────────── */
.border, .border-b, .border-t, .border-gray-200,
.dark\:border-gray-700 { border-color: var(--viva-border) !important; }
hr { border-color: var(--viva-border) !important; }

/* ── Sidebar / off-canvas ────────────────────── */
.dark\:bg-gray-800 { background: rgba(10,18,38,0.92) !important; }

/* ── Dropdown menus ──────────────────────────── */
[class*="dropdown"] > div,
.hs-dropdown-menu {
  background: rgba(13,26,51,0.96) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid var(--viva-border) !important;
  border-radius: var(--viva-radius) !important;
}

/* ── Alert / flash ───────────────────────────── */
.alert-success, .bg-green-100 { background: rgba(0,200,100,0.10) !important; border-color: rgba(0,200,100,0.25) !important; color: #6effc8 !important; }
.alert-danger,  .bg-red-100   { background: rgba(255,50,50,0.10)  !important; border-color: rgba(255,80,80,0.25)  !important; color: #ff9a9a !important; }
.alert-warning, .bg-yellow-100{ background: rgba(255,180,0,0.10)  !important; border-color: rgba(255,180,0,0.25)  !important; color: #ffd97a !important; }
.alert-info,    .bg-blue-100  { background: rgba(26,111,255,0.10) !important; border-color: var(--viva-border)    !important; color: var(--viva-blue-l) !important; }

/* ── Auth layout ─────────────────────────────── */
body.auth-page { background: var(--viva-bg) !important; }
body.auth-page main > div {
  background: rgba(15,31,61,0.82) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--viva-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 48px rgba(0,0,0,0.55), 0 0 60px var(--viva-glow) !important;
}

/* ── Scrollbar ───────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(26,111,255,0.35); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--viva-blue); }

/* ── Custom glow utility ─────────────────────── */
.viva-glow-text {
  background: linear-gradient(135deg, #fff 10%, var(--viva-cyan) 55%, var(--viva-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}