/* CallAttique Tech Vault — Glassmorphism theme (dark + light) */

:root {
  color-scheme: dark;
  --accent: #8b5cf6;
  --accent-2: #6366f1;

  /* DARK (default) */
  --bg: #0a0a12;
  --fg: #ffffff;
  --panel: rgba(255,255,255,0.04);
  --panel-hover: rgba(255,255,255,0.07);
  --panel-soft: rgba(255,255,255,0.03);
  --line: rgba(255,255,255,0.08);
  --line-soft: rgba(255,255,255,0.06);
  --shadow: 0 8px 40px rgba(0,0,0,0.35);
  --field: rgba(255,255,255,0.05);
  --code-bg: rgba(0,0,0,0.4);
  --code-fg: #a5f3fc;
  --orb-opacity: .35;
  --select-bg: #15151f;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f2f7;
  --fg: #1d1d1f;
  --panel: rgba(255,255,255,0.72);
  --panel-hover: rgba(255,255,255,0.92);
  --panel-soft: rgba(255,255,255,0.55);
  --line: rgba(0,0,0,0.08);
  --line-soft: rgba(0,0,0,0.05);
  --shadow: 0 8px 32px rgba(0,0,0,0.08);
  --field: rgba(0,0,0,0.035);
  --code-bg: rgba(0,0,0,0.045);
  --code-fg: #0e7490;
  --orb-opacity: .16;
  --select-bg: #ffffff;
}

* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  background: var(--bg) !important;
  color: var(--fg);
  transition: background .3s ease, color .3s ease;
}

/* ---- Theme-aware overrides for utility classes used in views ---- */
.text-white { color: var(--fg) !important; }
html[data-theme="light"] .text-white\/70 { color: rgba(29,29,31,.78) !important; }
html[data-theme="light"] .text-white\/60 { color: rgba(29,29,31,.70) !important; }
html[data-theme="light"] .text-white\/50 { color: rgba(29,29,31,.62) !important; }
html[data-theme="light"] .text-white\/45 { color: rgba(29,29,31,.58) !important; }
html[data-theme="light"] .text-white\/40 { color: rgba(29,29,31,.54) !important; }
html[data-theme="light"] .text-white\/35 { color: rgba(29,29,31,.50) !important; }
html[data-theme="light"] .text-white\/30 { color: rgba(29,29,31,.45) !important; }
html[data-theme="light"] .text-white\/25 { color: rgba(29,29,31,.40) !important; }
html[data-theme="light"] .text-white\/20 { color: rgba(29,29,31,.32) !important; }
html[data-theme="light"] .text-white\/15 { color: rgba(29,29,31,.22) !important; }

html[data-theme="light"] .bg-white\/5,
html[data-theme="light"] .bg-white\/\[0\.07\] { background-color: rgba(0,0,0,.04) !important; }
html[data-theme="light"] .bg-white\/10 { background-color: rgba(0,0,0,.07) !important; }
html[data-theme="light"] .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,.04) !important; }
html[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,.07) !important; }
html[data-theme="light"] .border-white\/10 { border-color: rgba(0,0,0,.10) !important; }
html[data-theme="light"] .border-white\/5 { border-color: rgba(0,0,0,.06) !important; }
html[data-theme="light"] .divide-white\/5 > * + * { border-color: rgba(0,0,0,.07) !important; }
html[data-theme="light"] .placeholder-white\/25::placeholder { color: rgba(29,29,31,.40) !important; }

/* ---- Glass panels ---- */
.glass {
  background: var(--panel);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.glass-soft {
  background: var(--panel-soft);
  border: 1px solid var(--line-soft);
  border-radius: 1rem;
}
.glass-hover { transition: all .25s ease; }
.glass-hover:hover { background: var(--panel-hover); transform: translateY(-2px); border-color: var(--line); }

/* ---- Background orbs ---- */
.orb { position: fixed; border-radius: 50%; filter: blur(120px); opacity: var(--orb-opacity); pointer-events: none; z-index: 0; }
.orb-1 { width: 480px; height: 480px; background: #6d28d9; top: -140px; left: -100px; animation: float 14s ease-in-out infinite; }
.orb-2 { width: 420px; height: 420px; background: #1d4ed8; bottom: -120px; right: -80px; animation: float 18s ease-in-out infinite reverse; }
.orb-3 { width: 300px; height: 300px; background: #db2777; top: 40%; left: 55%; opacity: calc(var(--orb-opacity) * .5); animation: float 22s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translate(0,0) } 50% { transform: translate(40px,-30px) } }

.animate-rise { animation: rise .5s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.98) } to { opacity: 1; transform: none } }
.stagger > * { animation: rise .45s cubic-bezier(.2,.9,.3,1.2) both; }
.stagger > *:nth-child(1){animation-delay:.02s}.stagger > *:nth-child(2){animation-delay:.06s}
.stagger > *:nth-child(3){animation-delay:.1s}.stagger > *:nth-child(4){animation-delay:.14s}
.stagger > *:nth-child(5){animation-delay:.18s}.stagger > *:nth-child(6){animation-delay:.22s}

/* ---- Sidebar ---- */
.sidebar-link { display:flex; align-items:center; gap:.75rem; padding:.55rem .9rem; border-radius:.75rem; color:var(--fg); opacity:.55; font-size:.875rem; transition:all .18s; }
.sidebar-link:hover { opacity:1; background:var(--panel-hover); }
.sidebar-link.active { opacity:1; background:linear-gradient(90deg, rgba(139,92,246,.25), rgba(139,92,246,.08)); border:1px solid rgba(139,92,246,.3); }
html[data-theme="light"] .sidebar-link.active { background:linear-gradient(90deg, rgba(139,92,246,.16), rgba(139,92,246,.05)); }
.sidebar-link i { width:1.1rem; text-align:center; }

.neon-icon { width:3.2rem; height:3.2rem; border-radius:1rem; display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:#fff; }

.badge { font-size:.65rem; padding:.15rem .55rem; border-radius:999px; font-weight:600; }
.badge-High, .badge-Urgent { background:rgba(239,68,68,.15); color:#dc2626; }
.badge-Medium { background:rgba(234,179,8,.18); color:#a16207; }
.badge-Low { background:rgba(34,197,94,.15); color:#15803d; }
html[data-theme="dark"] .badge-High, html[data-theme="dark"] .badge-Urgent { color:#f87171; }
html[data-theme="dark"] .badge-Medium { color:#facc15; }
html[data-theme="dark"] .badge-Low { color:#4ade80; }

.modal-bg { background: rgba(5,5,12,.7); backdrop-filter: blur(6px); }
html[data-theme="light"] .modal-bg { background: rgba(120,120,140,.35); }

/* ---- Form fields ---- */
input, select, textarea { color: var(--fg); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { color-scheme: dark; }
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { color-scheme: light; }
select option { background: var(--select-bg); color: var(--fg); }

code.snippet {
  display:block; background:var(--code-bg); border:1px solid var(--line);
  border-radius:.6rem; padding:.7rem .9rem; font-size:.8rem; color:var(--code-fg);
  white-space:pre-wrap; word-break:break-all;
}
textarea.mono, input.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }

/* ---- Markdown rendering ---- */
.md-body { font-size:.875rem; line-height:1.65; color:var(--fg); }
.md-body h1,.md-body h2,.md-body h3 { font-weight:600; margin:1em 0 .4em; }
.md-body h1 { font-size:1.25rem } .md-body h2 { font-size:1.1rem } .md-body h3 { font-size:1rem }
.md-body p { margin:.5em 0 }
.md-body ul,.md-body ol { margin:.5em 0 .5em 1.3em; }
.md-body ul { list-style:disc } .md-body ol { list-style:decimal }
.md-body li { margin:.2em 0 }
.md-body code { background:var(--code-bg); color:var(--code-fg); padding:.1em .4em; border-radius:.3rem; font-size:.85em; }
.md-body pre { background:var(--code-bg); border:1px solid var(--line); border-radius:.6rem; padding:.8rem; overflow-x:auto; margin:.6em 0; }
.md-body pre code { background:none; padding:0; }
.md-body a { color:var(--accent); text-decoration:underline; }
.md-body blockquote { border-left:3px solid var(--accent); padding-left:.9em; opacity:.75; margin:.6em 0; }
.md-body table { width:100%; border-collapse:collapse; margin:.6em 0; }
.md-body th,.md-body td { border:1px solid var(--line); padding:.4em .6em; text-align:left; }
.md-body hr { border-color:var(--line); margin:1em 0; }
.md-clamp { max-height:8rem; overflow:hidden; position:relative; }

/* ---- Theme toggle ---- */
.theme-btn { width:2.25rem; height:2.25rem; border-radius:.7rem; display:flex; align-items:center; justify-content:center;
  background:var(--field); border:1px solid var(--line); color:var(--fg); opacity:.6; transition:all .2s; }
.theme-btn:hover { opacity:1; background:var(--panel-hover); }

@media (prefers-reduced-motion: reduce) {
  *, .orb, .animate-rise, .stagger > * { animation: none !important; transition: none !important; }
}