/* =============================================================================
   VitaSecure / secure-ehr — Application stylesheet
   Presentation layer (Directives §3). Consumes the Aura EHR design system.

   This pairs with:
     - assets/js/tailwind.config.js  (Tailwind utility tokens — same as design.md)
     - docs/design-system/tokens.css (CSS custom properties — canonical tokens)

   The component classes below are lifted from the Stitch screens (glassmorphism
   language) so the generated markup renders faithfully without a build step.
   Reference design tokens via var(--*) or Tailwind utilities; never hard-code.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

/* ---- Design tokens (subset) -------------------------------------------------
   The frontend is served standalone from frontend/, so it cannot import the
   canonical docs/design-system/tokens.css (it lives above the server root).
   design.md remains the single source of truth; the full token set is projected
   into assets/js/tailwind.config.js (Tailwind utilities the pages use). Only the
   handful of tokens the plain-CSS component classes below need are mirrored here.
   ------------------------------------------------------------------------- */
:root {
  --color-background: #15121b;
  --color-on-background: #e8dfee;
  --color-primary: #d2bbff;
  --brand-primary: #7c3aed;
  --brand-secondary: #a78bfa;
}

/* ---- Base --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-background);
  color: var(--color-on-background);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.material-symbols-outlined.is-filled { font-variation-settings: 'FILL' 1; }

/* =============================================================================
   Glassmorphism surfaces (Stitch language)
   ========================================================================== */
.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 24px;
}
.glass-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.glass-nav {
  background: rgba(21, 18, 27, 0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Auth card surface (Stitch "Secure Sign In") — glass + soft drop shadow */
.glass-surface {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Modal / drawer surface — design.md "Level 2": higher opacity, 20px blur,
   wide primary-tinted glow shadow. */
.glass-modal {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: 0 24px 64px -12px rgba(124, 58, 237, 0.25), 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Dialog overlay (dim + blur the canvas behind a modal/drawer). */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(16, 13, 22, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.overlay.is-open { opacity: 1; }
.overlay[hidden] { display: none; }

/* Right-side drawer panel that slides in (record detail / version history). */
.drawer-panel {
  margin-left: auto;
  height: 100%;
  width: min(560px, 100%);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.overlay.is-open .drawer-panel { transform: translateX(0); }

/* Centred modal card that scales in (create/edit forms). */
.modal-card {
  margin: auto;
  width: min(640px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.96);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.overlay.is-open .modal-card { transform: scale(1); }

/* Form fields — design.md: transparent fill, white/10 border, primary focus glow,
   labels above in label-md. 12px (rounded-xl) radius. */
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ccc3d8;
  margin-bottom: 6px;
}
.field-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  color: #e8dfee;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field-input::placeholder { color: rgba(149, 141, 161, 0.6); }
.field-input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}
textarea.field-input { resize: vertical; min-height: 88px; }

/* Sidebar active link — purple tint + bright right rail (Stitch) */
.sidebar-active {
  background: rgba(124, 58, 237, 0.15);
  border-right: 4px solid #d2bbff;
  color: var(--color-primary) !important;
}

/* =============================================================================
   Buttons & gradient
   ========================================================================== */
.primary-gradient { background: linear-gradient(135deg, #7c3aed 0%, #d2bbff 100%); }

.gradient-button {
  background: linear-gradient(135deg, #7c3aed 0%, #d2bbff 100%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gradient-button:hover { box-shadow: 0 0 24px rgba(124, 58, 237, 0.4); }
.gradient-button:active { transform: scale(0.95); }

/* Auth submit button (Stitch "Login with Node") — lift on hover, press on active */
.btn-gradient {
  background: linear-gradient(135deg, #7c3aed 0%, #d2bbff 100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-gradient:hover { box-shadow: 0 0 20px rgba(124, 58, 237, 0.4); transform: translateY(-1px); }
.btn-gradient:active { transform: scale(0.98); }

/* =============================================================================
   Integrity status badges (FR-INT-4/5) — emerald VERIFIED / rose TAMPERED
   ========================================================================== */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid;
}
.status-badge--verified {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.30);
  color: #34d399;
}
.status-badge--tampered {
  background: rgba(244, 63, 94, 0.10);
  border-color: rgba(244, 63, 94, 0.35);
  color: #fb7185;
}
.status-badge--pending {
  background: rgba(255, 183, 132, 0.10);
  border-color: rgba(255, 183, 132, 0.30);
  color: #ffb784;
}

/* =============================================================================
   Animations: shimmer (loading/buttons), floating orbs (auth backdrop)
   ========================================================================== */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  transform: rotate(45deg);
  animation: shimmer-anim 6s infinite linear;
}
@keyframes shimmer-anim {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

.floating-orb { filter: blur(80px); opacity: 0.4; z-index: 0; }

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

/* Skeleton loading shimmer for async content */
.skel {
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: skel-anim 1.4s infinite;
  border-radius: 8px;
}
@keyframes skel-anim {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Custom scrollbar to match the dark canvas */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

/* Toast / inline message (auth + actions) */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 60;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.toast.is-visible { transform: translateX(-50%) translateY(0); }
.toast--error { background: rgba(147,0,10,0.9); color: #ffdad6; border: 1px solid rgba(255,180,171,0.4); }
.toast--ok { background: rgba(16,185,129,0.18); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.4); }

/* =============================================================================
   Landing page (index.html) — marketing surfaces built on the same tokens.
   ========================================================================== */

/* Secondary / ghost button (design.md: primary-colour border, glass fill on
   hover). Pairs with .btn-gradient (the primary CTA). */
.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(210, 187, 255, 0.35);
  color: #e8dfee;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-secondary:hover {
  background: rgba(124, 58, 237, 0.12);
  border-color: #d2bbff;
  transform: translateY(-1px);
}
.btn-secondary:active { transform: scale(0.98); }

/* Radial primary glow behind the hero. */
.hero-gradient {
  background: radial-gradient(60% 60% at 70% 30%, rgba(124, 58, 237, 0.18) 0%, rgba(21, 18, 27, 0) 70%);
}

/* Wide primary glow used on hover for marketing CTAs / framed media. */
.glow-purple { box-shadow: 0 0 40px rgba(124, 58, 237, 0.28); }

/* Gentle vertical float for hero badges / accents. */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-slow { animation: float 9s ease-in-out infinite; }

/* Landing nav links — quiet by default, primary on hover/active. */
.nav-link {
  position: relative;
  color: #ccc3d8;
  transition: color 0.2s ease;
}
.nav-link:hover { color: #e8dfee; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: linear-gradient(135deg, #7c3aed 0%, #d2bbff 100%);
  transition: width 0.25s ease;
}
.nav-link:hover::after { width: 100%; }

/* Numbered pipeline connector (write-pipeline stepper). */
.pipeline-line {
  background: linear-gradient(90deg, rgba(124,58,237,0.5), rgba(210,187,255,0.15));
}

/* Scroll reveal — elements lift in as they enter the viewport (landing.js adds
   .is-visible via IntersectionObserver). Respects reduced-motion below. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .animate-float, .animate-float-slow, .shimmer::after { animation: none; }
}

/* On small screens, glass surfaces reduce blur + raise opacity for performance
   and legibility (design.md "Responsive" guidance). */
@media (max-width: 640px) {
  .glass-card { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}