/* ═══════════════════════════════════════════════════════════════════
   DEVVISTA THEME FOR REQUIEM DASHBOARD — v1 (Sep 2026)
   Design language ported from devvista.org (Flask main site):
   cream on near-black, burgundy accent (was orange #E83A1A),
   Montserrat everywhere, grain overlay, kicker lines, lift-hover buttons.
   Loads LAST (after argon-dashboard.css + requiem-polish.css) so it wins
   the cascade. No backend/Python changes required.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0. FONT + DESIGN TOKENS ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap');

:root {
  /* burgundy accent ramp (devvista orange swapped for burgundy) */
  --dv-accent:      #8A1538;
  --dv-accent-h:    #6E1030;
  --dv-accent-l1:   #A82047;
  --dv-accent-l2:   #C24768;
  --dv-accent-l3:   #E05C7E;
  --dv-accent-soft: rgba(138, 21, 56, 0.32);

  /* devvista neutrals (exact from main site base.css) */
  --dv-dark:    #0E100F;
  --dv-dark-2:  #141614;
  --dv-dark-3:  #1A1D1B;
  --dv-cream:   #F5E6D3;
  --dv-cream-2: #E8D4B8;
  --dv-white:   #FFFFFF;
  --dv-muted:   #8E918E;

  --dv-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  --dv-glow:   0 8px 32px rgba(138, 21, 56, 0.35);

  /* alias the polish/argon vars so everything routes through new palette */
  --rq-bg:             #0E100F;
  --rq-surface:        rgba(20, 22, 20, 0.92);
  --rq-surface-2:      rgba(26, 29, 27, 0.88);
  --rq-border:         rgba(232, 92, 126, 0.24);
  --rq-border-hot:     rgba(194, 71, 104, 0.45);
  --rq-cyan:           #C24768;
  --rq-green:          #E05C7E;
  --rq-blue:           #A82047;
  --rq-rose:           #E05C7E;
  --rq-text:           #F5E6D3;
  --rq-muted:          #8E918E;
  --rq-shadow:         0 18px 60px rgba(0, 0, 0, 0.45);
  --rq-glow:           0 0 28px rgba(138, 21, 56, 0.25);
  --cyber-neon:        #C24768;
  --cyber-neon-dim:    rgba(194, 71, 104, 0.15);
  --cyber-neon-glow:   rgba(138, 21, 56, 0.4);
  --cyber-cyan:        #E05C7E;
  --cyber-cyan-dim:    rgba(224, 92, 126, 0.12);
  --cyber-cyan-glow:   rgba(138, 21, 56, 0.35);
  --cyber-purple:      #A82047;
  --cyber-red:         #E05C7E;
  --cyber-dark:        #0E100F;
  --cyber-surface:     #141614;
  --cyber-surface-2:   #1A1D1B;
  --cyber-surface-3:   #262925;
  --cyber-border:      rgba(232, 92, 126, 0.2);
  --cyber-border-neon: rgba(138, 21, 56, 0.45);
  --cyber-text:        #F5E6D3;
  --cyber-text-muted:  #8E918E;
  --cyber-font-mono:   'Montserrat', sans-serif;
  --cyber-font-head:   'Montserrat', sans-serif;
  --cyber-font-body:   'Montserrat', sans-serif;
}

/* ── 1. GLOBAL WASH ───────────────────────────────────────────────── */
html, body {
  font-family: 'Montserrat', sans-serif !important;
  background: var(--dv-dark) !important;
  color: var(--dv-cream) !important;
  text-rendering: geometricPrecision;
}

/* grain overlay — exact data-URI from devvista.org */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.018;
  pointer-events: none;
  z-index: 9999;
}

/* near-black + burgundy radial heat + faint cream sweep (beats polish wash) */
body.bg-dark-theme,
body.fullscreen-page {
  background:
    radial-gradient(circle at 16% 0%, rgba(138, 21, 56, 0.16), transparent 34%),
    radial-gradient(circle at 90% 6%, rgba(224, 92, 126, 0.07), transparent 30%),
    linear-gradient(160deg, #0E100F 0%, #121015 50%, #0E100F 100%) !important;
  color: var(--dv-cream) !important;
}

/* kill cyberpunk scanline overlay */
body::after { content: none !important; }

/* ── 2. SCROLLBAR (matches main site: 2px burgundy) ───────────────── */
::-webkit-scrollbar { width: 2px; height: 2px; }
::-webkit-scrollbar-track { background: var(--dv-dark); }
::-webkit-scrollbar-thumb { background: var(--dv-accent); }
* { scrollbar-width: thin; scrollbar-color: var(--dv-accent) var(--dv-dark); }

/* ── 3. TYPOGRAPHY ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6, .card-title, .requiem-loader-title {
  font-family: 'Montserrat', sans-serif !important;
  color: var(--dv-white) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

p, li, td, th, label, span, small, .form-control, .form-select, .choices__item {
  font-family: 'Montserrat', sans-serif !important;
  color: var(--dv-cream) !important;
}

.text-muted, .text-secondary { color: var(--dv-muted) !important; }
code, pre, .font-monospace { font-family: 'JetBrains Mono', monospace !important; }

/* ── 4. SIDEBAR + TOP NAV ─────────────────────────────────────────── */
.app-static-sidebar {
  background: rgba(20, 22, 20, 0.94) !important;
  border: 1px solid rgba(232, 92, 126, 0.18) !important;
  box-shadow: var(--dv-shadow) !important;
  backdrop-filter: blur(14px) !important;
}

.app-static-sidebar .nav-link {
  color: rgba(245, 230, 211, 0.55) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600;
  font-size: 0.8rem;
  border: 1px solid transparent !important;
  transition: color 0.22s, background 0.22s, transform 0.22s !important;
}
.app-static-sidebar .nav-link i {
  color: var(--dv-accent-l2) !important;
  transition: transform 0.2s, color 0.2s !important;
}
.app-static-sidebar .nav-link:hover {
  background: var(--dv-accent-soft) !important;
  color: var(--dv-cream) !important;
  transform: translateX(4px) !important;
  border-color: rgba(232, 92, 126, 0.35) !important;
}
.app-static-sidebar .nav-link:hover i {
  color: var(--dv-accent-l3) !important;
  transform: scale(1.12);
}
.app-static-sidebar .nav-item.active .nav-link,
.app-static-sidebar .nav-link.active {
  background: linear-gradient(90deg, rgba(138, 21, 56, 0.35) 0%, rgba(138, 21, 56, 0.12) 100%) !important;
  color: var(--dv-white) !important;
  border-color: rgba(232, 92, 126, 0.4) !important;
  box-shadow: inset 3px 0 0 var(--dv-accent-l1), var(--dv-glow) !important;
}
.app-sidebar-col .nav-link::after { background: var(--dv-accent-l2) !important; }

.cyber-top-nav {
  background: rgba(14, 16, 15, 0.9) !important;
  border: 1px solid rgba(232, 92, 126, 0.16) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: var(--dv-shadow);
}
.cyber-top-nav .navbar-brand {
  color: var(--dv-white) !important;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.cyber-top-nav .navbar-brand span { color: var(--dv-accent-l2) !important; }

/* ── 5. CARDS ─────────────────────────────────────────────────────── */
.card, .card-chart {
  background: linear-gradient(180deg, rgba(20, 22, 20, 0.92), rgba(14, 16, 15, 0.92)) !important;
  border: 1px solid rgba(245, 230, 211, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
  color: var(--dv-cream) !important;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s !important;
}
.card:hover {
  border-color: rgba(232, 92, 126, 0.4) !important;
  box-shadow: 0 14px 40px rgba(138, 21, 56, 0.22) !important;
  transform: translateY(-3px) !important;
}
.card-header {
  background: rgba(26, 29, 27, 0.6) !important;
  border-bottom: 1px solid rgba(245, 230, 211, 0.08) !important;
  border-radius: 14px 14px 0 0 !important;
}

/* ── 6. BUTTONS ───────────────────────────────────────────────────── */
.btn-accent, .btn-primary, .btn-outline-primary, .cyber-swal-confirm {
  background: var(--dv-accent) !important;
  color: var(--dv-white) !important;
  border: none !important;
  font-weight: 800 !important;
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: 0.03em;
  transition: all 0.22s !important;
}
.btn-accent:hover, .btn-primary:hover, .btn-outline-primary:hover, .cyber-swal-confirm:hover {
  background: var(--dv-accent-h) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(138, 21, 56, 0.38) !important;
}

.btn-outline-secondary, .swal2-cancel {
  background: transparent !important;
  color: var(--dv-cream) !important;
  border: 1.6px solid rgba(245, 230, 211, 0.18) !important;
  transition: all 0.22s !important;
}
.btn-outline-secondary:hover, .swal2-cancel:hover {
  border-color: var(--dv-cream) !important;
  color: var(--dv-white) !important;
  background: rgba(245, 230, 211, 0.06) !important;
}

/* ── 7. FORMS ─────────────────────────────────────────────────────── */
.form-control, .form-select, input, textarea, select {
  background-color: rgba(14, 16, 15, 0.8) !important;
  border: 1px solid rgba(245, 230, 211, 0.12) !important;
  color: var(--dv-cream) !important;
  font-family: 'Montserrat', sans-serif !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.form-control:focus, textarea:focus, select:focus {
  border-color: var(--dv-accent-l1) !important;
  box-shadow: 0 0 0 3px var(--dv-accent-soft) !important;
  background-color: rgba(14, 16, 15, 0.95) !important;
}
.form-control::placeholder { color: var(--dv-muted) !important; opacity: 0.7; }

.input-group-text {
  color: var(--dv-cream-2) !important;
  background: rgba(26, 29, 27, 0.9) !important;
  border-color: rgba(245, 230, 211, 0.12) !important;
}

.form-check-input:checked {
  background-color: var(--dv-accent-l1) !important;
  border-color: var(--dv-accent-l1) !important;
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px var(--dv-accent-soft) !important;
}

/* ── 8. SWEETALERT ────────────────────────────────────────────────── */
.cyber-swal-popup {
  background: var(--dv-dark-2) !important;
  border: 1.5px solid var(--dv-accent-l1) !important;
  font-family: 'Montserrat', sans-serif !important;
}
.cyber-swal-title {
  color: var(--dv-cream) !important;
  font-family: 'Montserrat', sans-serif !important;
  text-transform: none !important;
}
.cyber-swal-confirm { background: var(--dv-accent) !important; }
.swal2-html-container { color: var(--dv-cream-2) !important; }
.swal2-popup { font-family: 'Montserrat', sans-serif !important; }

/* ── 9. LOADER — same structure, burgundy/cream ───────────────────── */
.requiem-loader {
  background:
    radial-gradient(circle at 50% 42%, rgba(138, 21, 56, 0.2), transparent 32%),
    linear-gradient(160deg, #0E100F 0%, #121015 55%, #0E100F 100%) !important;
}
.requiem-loader-panel {
  border-color: rgba(232, 92, 126, 0.3) !important;
  box-shadow: var(--dv-shadow), 0 0 34px rgba(138, 21, 56, 0.12) !important;
}
.requiem-loader-mark { border-color: var(--dv-accent-l2) !important; }
.requiem-loader-title { font-family: 'Montserrat', sans-serif !important; font-weight: 900 !important; }
.requiem-loader-subtitle { color: var(--dv-muted) !important; }
.requiem-loader-bar span {
  background: linear-gradient(90deg, var(--dv-accent) 0%, var(--dv-accent-l3) 60%, var(--dv-cream) 100%) !important;
}

/* ── 10. CHOICES / TOASTR / MISC ──────────────────────────────────── */
.choices__inner,
.choices__list--dropdown,
.choices__list--dropdown .choices__list,
.choices__list--dropdown .choices__item {
  background: #141614 !important;
  border-color: rgba(245, 230, 211, 0.12) !important;
}
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: var(--dv-accent-l1) !important;
  box-shadow: 0 0 0 3px var(--dv-accent-soft) !important;
}
.choices__list--multiple .choices__item {
  background: var(--dv-accent-soft) !important;
  border: 1px solid rgba(232, 92, 126, 0.4) !important;
}
.choices__list--multiple .choices__item.is-highlighted {
  background: rgba(194, 71, 104, 0.4) !important;
  border-color: var(--dv-accent-l2) !important;
}

.toast {
  background: var(--dv-dark-2) !important;
  color: var(--dv-cream) !important;
  border: 1px solid rgba(232, 92, 126, 0.25) !important;
}
.toast .progress-bar { background: var(--dv-accent) !important; }

.table { color: var(--dv-cream) !important; }
hr { border-color: rgba(245, 230, 211, 0.08); }
.badge.bg-primary { background: var(--dv-accent) !important; }

a[href]:not(.navbar-brand):hover { filter: brightness(1.15); }

/* ── 11. DEVVISTA SIGNATURE ANIMATIONS ────────────────────────────── */
@keyframes dvFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dvShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}
@keyframes dvHeroGlow {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.9; }
}
@keyframes dvKickerIn {
  to { opacity: 1; transform: none; }
}

/* staggered page-content entrance */
.app-view-container > * { animation: dvFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.app-view-container > *:nth-child(1) { animation-delay: 0.05s; }
.app-view-container > *:nth-child(2) { animation-delay: 0.13s; }
.app-view-container > *:nth-child(3) { animation-delay: 0.21s; }
.app-view-container > *:nth-child(4) { animation-delay: 0.29s; }
.app-view-container > *:nth-child(n+5) { animation-delay: 0.37s; }

/* ambient burgundy glow blob (JS injects; pure CSS animation) */
.dv-hero-glow {
  position: fixed;
  top: -160px;
  right: -120px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(138, 21, 56, 0.25) 0%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: dvHeroGlow 6s ease-in-out infinite;
}

/* shimmer accent words (JS adds .dv-shimmer to the page h1) */
.dv-shimmer {
  background: linear-gradient(100deg, var(--dv-accent) 0%, var(--dv-accent-l3) 40%, var(--dv-cream) 55%, var(--dv-accent-l3) 70%, var(--dv-accent) 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
  animation: dvShimmer 3s linear infinite;
}

/* devvista kicker eyebrow with leading dash (JS adds .dv-kicker to card titles) */
.dv-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dv-accent-l2);
  opacity: 0;
  transform: translateY(-12px);
  animation: dvKickerIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
.dv-kicker::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--dv-accent-l1) !important;
  flex-shrink: 0;
}

/* ── 12. RESPONSIVE + REDUCED MOTION ──────────────────────────────── */
@media (max-width: 768px) {
  .dv-hero-glow { width: 340px; height: 340px; }
  .app-static-sidebar .nav-link:hover { transform: none; }
  .app-view-container > * { animation-duration: 0.5s; }
}

@media (prefers-reduced-motion: reduce) {
  .dv-hero-glow,
  .dv-shimmer,
  .dv-kicker,
  .app-view-container > * { animation: none !important; }
  .app-view-container > *,
  .dv-kicker { opacity: 1 !important; transform: none !important; }
}