/* ================================================================
   TALMID 360 — IMMERSIVE DESIGN SYSTEM v1.0
   Pure CSS visual upgrade — NO functional changes
   ================================================================ */

/* ── GLOBAL AMBIENT FOUNDATION ── */
body {
  background: radial-gradient(ellipse at center, #102444 0%, #060e1c 100%) !important;
  min-height: 100vh;
}

/* Ambient corner lights */
body::before {
  content: '';
  position: fixed;
  top: -200px; left: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(123,160,91,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  bottom: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(212,175,55,0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── SIDEBAR — Glass Space Station Panel ── */
.app-sidebar {
  background: linear-gradient(180deg, rgba(16,36,68,0.97) 0%, rgba(6,14,28,0.99) 100%) !important;
  border-left: 1px solid rgba(123,160,91,0.2) !important;
  box-shadow: 4px 0 32px rgba(0,0,0,0.5), inset -1px 0 0 rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.sidebar-brand {
  background: linear-gradient(135deg, rgba(16,36,68,0.8), rgba(27,58,107,0.6)) !important;
  border-bottom: 1px solid rgba(212,175,55,0.2) !important;
}
.nav-item {
  position: relative;
  border-radius: 10px !important;
  margin: 2px 8px !important;
  transition: all 0.25s ease !important;
}
.nav-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(123,160,91,0.15), transparent);
  opacity: 0;
  transition: opacity 0.25s;
}
.nav-item:hover::before,
.nav-item.active::before { opacity: 1; }
.nav-item.active {
  background: linear-gradient(90deg, rgba(123,160,91,0.25), rgba(27,58,107,0.3)) !important;
  box-shadow: 0 0 20px rgba(123,160,91,0.2), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  border-right: 3px solid var(--sage) !important;
}

/* ── HEADER — HUD Bar ── */
.app-header {
  background: rgba(10,20,40,0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(123,160,91,0.2) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.04) !important;
}
#page-title { color: rgba(255,255,255,0.92) !important; text-shadow: 0 0 20px rgba(123,160,91,0.4); }
.header-date { color: rgba(255,255,255,0.4) !important; }
.icon-btn { color: rgba(255,255,255,0.7) !important; }
.icon-btn:hover { background: rgba(255,255,255,0.08) !important; color: white !important; }

/* ── MAIN CONTENT — Deep Space Canvas ── */
.main-content {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* ── VIEW TRANSITION — Zoom-in fly effect ── */
.view { display: none; flex-direction: column; padding: 24px; flex: 1; gap: 20px; }
.view.active { display: flex; animation: viewZoomIn 0.4s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes viewZoomIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── GLASS CARD — Universal Glassmorphism ── */
.dash-card, .stat-card, .event-card, .kpi-card,
.lib-doc-card, .report-card, .sim-card,
.student-card, .radar-card, .nachat-card,
.glass-card {
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.87) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.dash-card:hover, .stat-card:hover, .event-card:hover,
.lib-doc-card:hover, .student-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(123,160,91,0.3), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* ── VIEW TITLES ── */
.view-title, h1, h2.section-title {
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 0 30px rgba(123,160,91,0.3);
}
.view-subtitle { color: rgba(255,255,255,0.5) !important; }

/* ─────────────────────────────────────────────
   1. DASHBOARD — Mission Control
   ───────────────────────────────────────────── */
#view-dashboard {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(42,82,152,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(123,160,91,0.08) 0%, transparent 50%);
  position: relative;
}
/* Animated data nebula */
#view-dashboard::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(42,82,152,0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(212,175,55,0.05) 0%, transparent 40%);
  animation: nebulaPulse 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes nebulaPulse {
  from { opacity: 0.6; transform: scale(1); }
  to   { opacity: 1; transform: scale(1.04); }
}
#view-dashboard > * { position: relative; z-index: 1; }

/* Dashboard KPI cards with sage neon glow */
#view-dashboard .kpi-card,
#view-dashboard .stat-card {
  border-top: 2px solid rgba(123,160,91,0.4) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(123,160,91,0.1), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
#view-dashboard .kpi-card:hover {
  box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 24px rgba(123,160,91,0.2) !important;
}
/* Floating event cards */
#view-dashboard .event-card {
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* ─────────────────────────────────────────────
   2. STUDENT CENTER — The Cockpit
   ───────────────────────────────────────────── */
#view-student-center {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(42,82,152,0.2) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(16,36,68,0.5) 0%, transparent 60%);
  perspective: 1200px;
}
/* HUD grid lines */
#view-student-center::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(42,82,152,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,82,152,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}
#view-student-center > * { position: relative; z-index: 1; }

/* Student list cards */
.sc-student-card, .sc-card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.sc-student-card:hover, .sc-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(42,82,152,0.4) !important;
}

/* ─────────────────────────────────────────────
   3. CLASSROOM PANORAMA — Social Mesh
   ───────────────────────────────────────────── */
#view-classroom {
  background:
    linear-gradient(180deg, rgba(16,36,68,0.3) 0%, rgba(6,14,28,0.1) 100%);
  position: relative;
}
/* 3D Grid floor effect */
#view-classroom::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 300px;
  background-image:
    linear-gradient(rgba(42,82,152,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,82,152,0.12) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(600px) rotateX(60deg);
  transform-origin: bottom center;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
}
#view-classroom > * { position: relative; z-index: 1; }

/* Desk tiles on the map */
.desk-tile, .classroom-seat {
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.desk-tile:hover, .classroom-seat:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 20px rgba(212,175,55,0.2) !important;
}

/* ─────────────────────────────────────────────
   4. AI ADVISOR — Neural Forest
   ───────────────────────────────────────────── */
#view-ai-advisor {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(111,66,193,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(212,175,55,0.07) 0%, transparent 50%);
}
/* Synapse network */
#view-ai-advisor::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 1px at 10% 20%, rgba(111,66,193,0.4) 0%, transparent 1px),
    radial-gradient(circle 1px at 30% 50%, rgba(212,175,55,0.3) 0%, transparent 1px),
    radial-gradient(circle 1px at 60% 15%, rgba(111,66,193,0.3) 0%, transparent 1px),
    radial-gradient(circle 1px at 80% 40%, rgba(212,175,55,0.4) 0%, transparent 1px),
    radial-gradient(circle 1px at 50% 80%, rgba(111,66,193,0.3) 0%, transparent 1px),
    radial-gradient(circle 1px at 20% 70%, rgba(212,175,55,0.3) 0%, transparent 1px),
    radial-gradient(circle 1px at 90% 60%, rgba(111,66,193,0.4) 0%, transparent 1px);
  background-size: 100% 100%;
  animation: synapseGlow 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes synapseGlow {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}
#view-ai-advisor > * { position: relative; z-index: 1; }

/* AI chat container */
.ai-chat-wrap, .chat-container, #ai-chat-messages {
  background: rgba(111,66,193,0.05) !important;
  border: 1px solid rgba(111,66,193,0.2) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
.ai-message, .msg-ai {
  background: rgba(111,66,193,0.12) !important;
  border: 1px solid rgba(111,66,193,0.2) !important;
  color: rgba(255,255,255,0.87) !important;
  box-shadow: 0 0 20px rgba(111,66,193,0.1) !important;
}
.user-message, .msg-user {
  background: rgba(42,82,152,0.2) !important;
  border: 1px solid rgba(42,82,152,0.3) !important;
  color: rgba(255,255,255,0.87) !important;
}

/* AI input glow */
.ai-input-row input, .ai-input-row textarea,
#main-chat-input {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(111,66,193,0.3) !important;
  color: white !important;
  caret-color: var(--sage);
}
.ai-input-row input:focus, #main-chat-input:focus {
  border-color: rgba(111,66,193,0.6) !important;
  box-shadow: 0 0 0 3px rgba(111,66,193,0.15), 0 0 20px rgba(111,66,193,0.1) !important;
  outline: none !important;
}

/* ─────────────────────────────────────────────
   5. LIBRARY — Holographic Archive
   ───────────────────────────────────────────── */
#view-library {
  position: relative;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0,200,200,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(245,244,240,0.04) 0%, transparent 50%);
}
/* Floating document shadows */
#view-library::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 30%, rgba(0,200,200,0.05) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 70%, rgba(212,175,55,0.04) 0%, transparent 40%);
  animation: archivePulse 6s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes archivePulse {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}
#view-library > * { position: relative; z-index: 1; }

/* Library doc cards — glass cubes */
.lib-doc-card {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(0,200,200,0.15) !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.3),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 20px rgba(0,200,200,0.05) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  animation: floatDoc 6s ease-in-out infinite;
}
.lib-doc-card:nth-child(2n) { animation-delay: -2s; }
.lib-doc-card:nth-child(3n) { animation-delay: -4s; }
@keyframes floatDoc {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}
.lib-doc-card:hover {
  animation: none !important;
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 30px rgba(0,200,200,0.15) !important;
}

/* ─────────────────────────────────────────────
   6. SIMULATION — Virtual Stage
   ───────────────────────────────────────────── */
#view-simulation {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(27,58,107,0.2) 0%, transparent 70%);
  position: relative;
}
/* Spotlight effect */
#view-simulation::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 400px;
  background: conic-gradient(from 270deg at 50% 0%, transparent 60deg, rgba(212,175,55,0.08) 90deg, transparent 120deg);
  pointer-events: none;
  z-index: 0;
  animation: spotlight 8s linear infinite;
}
@keyframes spotlight {
  from { opacity: 0.6; }
  50%  { opacity: 1; }
  to   { opacity: 0.6; }
}
#view-simulation > * { position: relative; z-index: 1; }

/* Neon stage frame */
.sim-canvas, #sim-canvas {
  border: 1px solid rgba(212,175,55,0.3) !important;
  box-shadow: 0 0 40px rgba(212,175,55,0.1), inset 0 0 60px rgba(0,0,0,0.4) !important;
}

/* ─────────────────────────────────────────────
   7. ASSESSMENTS — Stellar Cards View
   ───────────────────────────────────────────── */
#view-assessments {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(27,58,107,0.25) 0%, transparent 60%);
}

/* ─────────────────────────────────────────────
   8. ATTENDANCE — Monitoring Grid
   ───────────────────────────────────────────── */
#view-attendance {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(123,160,91,0.08) 0%, transparent 50%);
}
.att-card, .attendance-row {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(8px) !important;
}

/* ─────────────────────────────────────────────
   9. REPORTS — Data Observatory
   ───────────────────────────────────────────── */
#view-reports {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(42,82,152,0.12) 0%, transparent 50%);
}
.report-card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  backdrop-filter: blur(12px) !important;
}

/* ─────────────────────────────────────────────
   10. NACHAT — Awards Stage
   ───────────────────────────────────────────── */
#view-nachat {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(212,175,55,0.1) 0%, transparent 60%);
}
.nachat-card {
  border: 1px solid rgba(212,175,55,0.2) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 20px rgba(212,175,55,0.08) !important;
}

/* ─────────────────────────────────────────────
   UNIVERSAL — Forms, Inputs, Buttons
   ───────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], textarea, select {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.87) !important;
  border-radius: 10px !important;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.35) !important; }
input:focus, textarea:focus, select:focus {
  border-color: rgba(123,160,91,0.5) !important;
  box-shadow: 0 0 0 3px rgba(123,160,91,0.12) !important;
  outline: none !important;
  background: rgba(255,255,255,0.09) !important;
}
select option { background: #102444; color: white; }

/* Primary buttons — sage glow */
.btn-primary, button.primary, .action-btn {
  background: linear-gradient(135deg, var(--sage), var(--sage-dark)) !important;
  box-shadow: 0 4px 16px rgba(123,160,91,0.3), 0 1px 0 rgba(255,255,255,0.2) inset !important;
  border: none !important;
  color: white !important;
  transition: all 0.25s ease !important;
}
.btn-primary:hover, button.primary:hover, .action-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(123,160,91,0.4) !important;
}

/* Modals — deep glass */
.modal-overlay { background: rgba(0,0,0,0.7) !important; backdrop-filter: blur(8px) !important; }
.modal-box, .modal-content {
  background: linear-gradient(135deg, rgba(16,36,68,0.95), rgba(6,14,28,0.97)) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(123,160,91,0.1) !important;
  color: rgba(255,255,255,0.87) !important;
  backdrop-filter: blur(20px) !important;
}
.modal-box h2, .modal-content h2,
.modal-box h3, .modal-content h3 {
  color: white !important;
}
.modal-box label, .modal-content label { color: rgba(255,255,255,0.7) !important; }

/* Tables */
table { color: rgba(255,255,255,0.82) !important; }
th {
  background: rgba(42,82,152,0.3) !important;
  color: rgba(255,255,255,0.9) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
td { border-color: rgba(255,255,255,0.06) !important; }
tr:hover td { background: rgba(255,255,255,0.04) !important; }

/* Badges & tags */
.badge, .tag {
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
::-webkit-scrollbar-thumb { background: rgba(123,160,91,0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(123,160,91,0.6); }

/* ── NACHAT / STAR RATING in glass context ── */
.assess-card-single .assess-card-story-title { color: var(--navy) !important; }

/* Tooltip glass */
.tooltip, [data-tooltip]::after {
  background: rgba(16,36,68,0.95) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(12px) !important;
  color: rgba(255,255,255,0.87) !important;
}

/* ── Print override — keep print clean ── */
@media print {
  body { background: white !important; }
  body::before, body::after { display: none !important; }
  .main-content { background: white !important; }
  .view { color: #000 !important; }
}