/*
 * IETA Workspace — Spatial Glass Theme Override
 * Completely reskins the ieta-workspace-experience React SPA.
 * Version: 2.0.0
 */

/* ── IMPORT FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════
   THEME TOKENS
═══════════════════════════════════════════════ */

/* Default: Eclipse (Indigo / Violet) */
:root,
[data-ieta-theme="eclipse"] {
  --sg-bg:          #02040a;
  --sg-bg2:         #05080f;
  --sg-nav:         #030611;
  --sg-glass:       rgba(255,255,255,.04);
  --sg-glass-h:     rgba(255,255,255,.07);
  --sg-border:      rgba(255,255,255,.08);
  --sg-border-glow: rgba(99,102,241,.40);
  --sg-topbar:      rgba(2,4,10,.85);
  --sg-pri:         #818cf8;
  --sg-pri2:        #6366f1;
  --sg-sec:         #c084fc;
  --sg-grn:         #34d399;
  --sg-red:         #f87171;
  --sg-amb:         #fbbf24;
  --sg-ink:         #ffffff;
  --sg-muted:       rgba(255,255,255,.48);
  --sg-muted2:      rgba(255,255,255,.26);
  --sg-o1:          #6366f1;
  --sg-o2:          #9333ea;
  --sg-o3:          #0891b2;
  --sg-blur:        blur(24px) saturate(160%);
  --sg-panel-sh:    0 20px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
}

/* Midnight (Teal / Cyan) */
[data-ieta-theme="midnight"] {
  --sg-bg:          #01111d;
  --sg-bg2:         #021620;
  --sg-nav:         #010d17;
  --sg-glass:       rgba(255,255,255,.04);
  --sg-glass-h:     rgba(255,255,255,.08);
  --sg-border:      rgba(18,201,238,.12);
  --sg-border-glow: rgba(18,201,238,.45);
  --sg-topbar:      rgba(1,17,29,.88);
  --sg-pri:         #12c9ee;
  --sg-pri2:        #0891a8;
  --sg-sec:         #43daf5;
  --sg-o1:          #0891a8;
  --sg-o2:          #0c4a6e;
  --sg-o3:          #065f46;
}

/* Aurora (Emerald / Rose) */
[data-ieta-theme="aurora"] {
  --sg-bg:          #030a0f;
  --sg-bg2:         #040c14;
  --sg-nav:         #020709;
  --sg-glass:       rgba(255,255,255,.04);
  --sg-glass-h:     rgba(255,255,255,.07);
  --sg-border:      rgba(255,255,255,.08);
  --sg-border-glow: rgba(16,185,129,.45);
  --sg-topbar:      rgba(3,10,15,.88);
  --sg-pri:         #34d399;
  --sg-pri2:        #10b981;
  --sg-sec:         #f472b6;
  --sg-o1:          #059669;
  --sg-o2:          #be185d;
  --sg-o3:          #0284c7;
}

/* ═══════════════════════════════════════════════
   GLOBAL BASE RESET
═══════════════════════════════════════════════ */

html, body {
  background: var(--sg-bg) !important;
  color: var(--sg-ink) !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
}

/* Override the SPA's root color variables */
:root {
  --nav:    var(--sg-nav) !important;
  --ink:    var(--sg-ink) !important;
  --muted:  var(--sg-muted) !important;
  --line:   var(--sg-border) !important;
  --paper:  var(--sg-glass) !important;
  --soft:   var(--sg-bg2) !important;
}

/* Ambient animated orbs */
body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: sg-drift 28s ease-in-out infinite alternate;
}
body::before {
  width: 55vw; height: 55vw;
  top: -15%; left: -10%;
  background: radial-gradient(circle, var(--sg-o1, #6366f1), transparent 70%);
  opacity: .45;
  filter: blur(90px);
}
body::after {
  width: 60vw; height: 60vw;
  bottom: -20%; right: -10%;
  background: radial-gradient(circle, var(--sg-o2, #9333ea), transparent 70%);
  opacity: .3;
  filter: blur(100px);
  animation-delay: -10s;
  animation-duration: 32s;
}
@keyframes sg-drift {
  to { transform: translate(8%, 12%) scale(1.1); }
}

/* All primary content sits above orbs */
.workspace-shell,
.workspace-area,
.topbar,
.side-rail {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════
   TOP BAR
═══════════════════════════════════════════════ */
.topbar {
  background: var(--sg-topbar) !important;
  backdrop-filter: var(--sg-blur) !important;
  -webkit-backdrop-filter: var(--sg-blur) !important;
  border-bottom: 1px solid var(--sg-border) !important;
  padding: 0 24px !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
}

.topbar .brand {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  letter-spacing: -.05em !important;
  background: linear-gradient(135deg, var(--sg-pri), var(--sg-sec)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.topbar .icon-button {
  background: var(--sg-glass) !important;
  border: 1px solid var(--sg-border) !important;
  border-radius: 50% !important;
  color: var(--sg-muted) !important;
  transition: .2s !important;
}
.topbar .icon-button:hover {
  background: var(--sg-glass-h) !important;
  color: var(--sg-ink) !important;
}

.topbar .avatar {
  background: linear-gradient(135deg, var(--sg-pri2), var(--sg-sec)) !important;
  font-weight: 800 !important;
  border: 2px solid rgba(129,140,248,.35) !important;
}

/* ═══════════════════════════════════════════════
   SIDEBAR / SIDE RAIL
═══════════════════════════════════════════════ */
.side-rail {
  background: rgba(2,4,10,.6) !important;
  backdrop-filter: var(--sg-blur) !important;
  -webkit-backdrop-filter: var(--sg-blur) !important;
  border-right: 1px solid var(--sg-border) !important;
  color: var(--sg-muted) !important;
}

.side-rail button,
.rail-bottom > button {
  color: var(--sg-muted2) !important;
  border-left: 3px solid transparent !important;
  border-radius: 10px !important;
  margin: 2px 6px !important;
  transition: all .18s !important;
}
.side-rail button:hover,
.rail-bottom > button:hover {
  background: var(--sg-glass-h) !important;
  color: var(--sg-ink) !important;
  border-left-color: transparent !important;
}
.side-rail button.active,
.rail-bottom > button.active {
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(192,132,252,.1)) !important;
  color: var(--sg-pri) !important;
  border-left-color: var(--sg-pri) !important;
}

/* ═══════════════════════════════════════════════
   MAIN SHELL & WORKSPACE
═══════════════════════════════════════════════ */
.workspace-shell {
  background: var(--sg-bg) !important;
}

.workspace-area {
  background: transparent !important;
}

/* ═══════════════════════════════════════════════
   MODULE GRID (the main 3-column panel)
═══════════════════════════════════════════════ */
.module-grid {
  background: var(--sg-glass) !important;
  backdrop-filter: var(--sg-blur) !important;
  -webkit-backdrop-filter: var(--sg-blur) !important;
  border: 1px solid var(--sg-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--sg-panel-sh) !important;
}

.module-nav {
  background: transparent !important;
  border-right: 1px solid var(--sg-border) !important;
}

.module-label {
  color: var(--sg-muted2) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
}

/* Nav items in module sidebar */
.module-nav a,
.module-nav button {
  border-radius: var(--sg-r, 10px) !important;
  color: var(--sg-muted) !important;
  font-weight: 600 !important;
  transition: all .18s !important;
}
.module-nav a:hover,
.module-nav button:hover {
  background: var(--sg-glass-h) !important;
  color: var(--sg-ink) !important;
}
.module-nav a.active,
.module-nav button.active,
.module-nav [aria-current],
.module-nav .current {
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(192,132,252,.1)) !important;
  color: var(--sg-pri) !important;
}

/* ═══════════════════════════════════════════════
   CARDS, PANELS, SURFACES
═══════════════════════════════════════════════ */
.record-card,
.metric,
.activity-table,
.schedule,
.aura-brief,
.security-dashboard,
.guard-panel {
  background: var(--sg-glass) !important;
  backdrop-filter: var(--sg-blur) !important;
  -webkit-backdrop-filter: var(--sg-blur) !important;
  border: 1px solid var(--sg-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--sg-panel-sh) !important;
  color: var(--sg-ink) !important;
}

/* White paper overrides */
.record-card { padding: 20px !important; }

/* ═══════════════════════════════════════════════
   DASH GRID (overview layout)
═══════════════════════════════════════════════ */
.dash-grid {
  gap: 20px !important;
}

/* ═══════════════════════════════════════════════
   METRICS ROW (Active Now / Idle / Tasks Done)
═══════════════════════════════════════════════ */
.metrics-row {
  gap: 14px !important;
}

.metrics-row .metric {
  background: var(--sg-glass) !important;
  border: 1px solid var(--sg-border) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  padding: 18px !important;
  transition: .2s !important;
}
.metrics-row .metric:hover {
  background: var(--sg-glass-h) !important;
  border-color: rgba(255,255,255,.14) !important;
  transform: translateY(-2px) !important;
}

/* ═══════════════════════════════════════════════
   PAGE HEADER (Welcome, Akhil Chand)
═══════════════════════════════════════════════ */
.page-header {
  padding: 6px 0 20px !important;
}
.page-header .eyebrow {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--sg-muted2) !important;
  margin-bottom: 4px !important;
}
.page-header h1,
.page-header h2 {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  background: linear-gradient(135deg, #fff 60%, var(--sg-pri)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ═══════════════════════════════════════════════
   ACTIVITY TABLE / FEED
═══════════════════════════════════════════════ */
.activity-table {
  background: var(--sg-glass) !important;
  border: 1px solid var(--sg-border) !important;
}
.activity-row {
  border-top: 1px solid var(--sg-border) !important;
  color: var(--sg-ink) !important;
}
.activity-row:hover {
  background: var(--sg-glass-h) !important;
}

/* ═══════════════════════════════════════════════
   KANBAN / TASKS
═══════════════════════════════════════════════ */
.kanban-grid {
  gap: 16px !important;
}

.kanban > div,
.kanban-grid > div {
  background: var(--sg-glass) !important;
  border: 1px solid var(--sg-border) !important;
  border-radius: 16px !important;
}

.task-check {
  border: 2px solid var(--sg-border-glow) !important;
  border-radius: 6px !important;
  background: var(--sg-glass) !important;
  transition: .18s !important;
}
.task-check:hover {
  border-color: var(--sg-pri) !important;
  background: rgba(99,102,241,.12) !important;
}
.task-check.checked,
.task-check.done {
  background: var(--sg-pri2) !important;
  border-color: var(--sg-pri2) !important;
}

/* ═══════════════════════════════════════════════
   SECURITY DASHBOARD
═══════════════════════════════════════════════ */
.security-dashboard .score-hero {
  background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(192,132,252,.1)) !important;
  border: 1px solid var(--sg-border-glow) !important;
  border-radius: 18px !important;
  box-shadow: 0 0 30px rgba(99,102,241,.1) !important;
}

.security-grid {
  gap: 16px !important;
}

.org-score {
  border-top: 1px solid var(--sg-border) !important;
}

/* ═══════════════════════════════════════════════
   AURA SECTION
═══════════════════════════════════════════════ */
.aura-brief {
  border: 1px solid var(--sg-border-glow) !important;
  box-shadow: 0 0 30px rgba(99,102,241,.08), var(--sg-panel-sh) !important;
}

.brief-heading {
  color: var(--sg-ink) !important;
}

.brief-metrics {
  border-top: 1px solid var(--sg-border) !important;
  margin-top: 16px !important;
  padding-top: 14px !important;
}

.aura-prompts > button {
  background: var(--sg-glass-h) !important;
  border: 1px solid var(--sg-border) !important;
  border-radius: 12px !important;
  color: var(--sg-muted) !important;
  font-size: 12px !important;
  padding: 12px !important;
  transition: .2s !important;
  text-align: left !important;
}
.aura-prompts > button:hover {
  border-color: var(--sg-border-glow) !important;
  color: var(--sg-ink) !important;
  background: rgba(99,102,241,.12) !important;
}

/* ═══════════════════════════════════════════════
   MAIL INTERFACE
═══════════════════════════════════════════════ */
.mail-row {
  border-bottom: 1px solid var(--sg-border) !important;
  color: var(--sg-ink) !important;
  transition: .15s !important;
}
.mail-row:hover {
  background: var(--sg-glass-h) !important;
}
.mail-row.active,
.mail-row.selected {
  background: rgba(99,102,241,.1) !important;
}

.detail-preview {
  border-left: 1px solid var(--sg-border) !important;
}

.list-surface {
  background: transparent !important;
}

/* ═══════════════════════════════════════════════
   BUTTONS & INTERACTIVE ELEMENTS
═══════════════════════════════════════════════ */
button.primary,
.primary:not(.side-rail *):not(.module-nav *) {
  background: linear-gradient(135deg, var(--sg-pri2), var(--sg-sec)) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(99,102,241,.35) !important;
  transition: .2s !important;
}
button.primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(99,102,241,.45) !important;
}

button.ghost,
button.secondary {
  background: var(--sg-glass) !important;
  border: 1px solid var(--sg-border) !important;
  color: var(--sg-muted) !important;
  border-radius: 12px !important;
  transition: .2s !important;
}
button.ghost:hover,
button.secondary:hover {
  background: var(--sg-glass-h) !important;
  color: var(--sg-ink) !important;
}

/* Search input */
.global-search {
  background: var(--sg-glass) !important;
  border: 1px solid var(--sg-border) !important;
  border-radius: 99px !important;
  color: var(--sg-ink) !important;
  transition: .2s !important;
}
.global-search:focus-within {
  border-color: var(--sg-border-glow) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
}

/* Status dots */
.live-dot {
  background: var(--sg-grn) !important;
  box-shadow: 0 0 8px var(--sg-grn) !important;
}

/* ═══════════════════════════════════════════════
   GUARD ALERTS & SECURITY
═══════════════════════════════════════════════ */
.guard-alert {
  background: rgba(248,113,113,.08) !important;
  border: 1px solid rgba(248,113,113,.25) !important;
  border-radius: 14px !important;
  color: var(--sg-ink) !important;
}

.guard-panel {
  background: var(--sg-glass) !important;
}

/* ═══════════════════════════════════════════════
   MODALS & OVERLAYS
═══════════════════════════════════════════════ */
.modal {
  background: var(--sg-glass) !important;
  backdrop-filter: var(--sg-blur) !important;
  -webkit-backdrop-filter: var(--sg-blur) !important;
  border: 1px solid var(--sg-border) !important;
  border-radius: 24px !important;
  box-shadow: 0 40px 80px rgba(0,0,0,.6) !important;
  color: var(--sg-ink) !important;
}
.modal-backdrop {
  background: rgba(2,4,10,.7) !important;
  backdrop-filter: blur(8px) !important;
}

/* ═══════════════════════════════════════════════
   TOAST NOTIFICATIONS
═══════════════════════════════════════════════ */
.toast {
  background: var(--sg-glass) !important;
  backdrop-filter: var(--sg-blur) !important;
  border: 1px solid var(--sg-border) !important;
  border-radius: 14px !important;
  color: var(--sg-ink) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.4) !important;
}

/* ═══════════════════════════════════════════════
   AVATAR
═══════════════════════════════════════════════ */
.avatar,
.mini-avatar {
  background: linear-gradient(135deg, var(--sg-pri2), var(--sg-sec)) !important;
  font-weight: 800 !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════
   TYPOGRAPHY OVERRIDES
═══════════════════════════════════════════════ */
h1, h2, h3, h4 {
  font-family: 'Outfit', sans-serif !important;
  color: var(--sg-ink) !important;
}

.eyebrow {
  color: var(--sg-muted2) !important;
  letter-spacing: .14em !important;
}

/* ═══════════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════════ */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }

/* ═══════════════════════════════════════════════
   SELECTION
═══════════════════════════════════════════════ */
::selection {
  background: rgba(99,102,241,.3);
}