/* =====================================================================
   Vision Glass template — a visionOS / modern-Apple look. Everything is
   scoped to :root[data-template="vision"], so it only applies when a user
   picks "Vision Glass" in settings. Translucent frosted panels floating
   over a soft luminous background, deep rounding, gentle depth, vibrancy.
   Theme-aware (light + dark) and token-driven.
   ===================================================================== */

:root[data-template="vision"] {
  --radius: 24px; --radius-sm: 16px;
  --glass:        color-mix(in srgb, var(--bg-elev) 58%, transparent);
  --glass-strong: color-mix(in srgb, var(--bg-elev) 80%, transparent);
  --glass-brd:    color-mix(in srgb, #ffffff 60%, transparent);
  --glass-hi:     inset 0 1px 0 color-mix(in srgb, #ffffff 55%, transparent);
  --glass-shadow: 0 14px 44px color-mix(in srgb, var(--ink) 13%, transparent);
  --blur: saturate(1.7) blur(20px);
}
:root[data-template="vision"][data-theme="dark"] {
  --glass:        color-mix(in srgb, var(--bg-elev) 52%, transparent);
  --glass-strong: color-mix(in srgb, var(--bg-elev) 74%, transparent);
  --glass-brd:    color-mix(in srgb, #ffffff 12%, transparent);
  --glass-hi:     inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent);
  --glass-shadow: 0 18px 52px rgba(0,0,0,.55);
}

/* ---- Ambient luminous background (the "environment" behind the glass) ---- */
:root[data-template="vision"] body {
  background:
    radial-gradient(58% 48% at 12% 6%,  color-mix(in srgb, var(--brand) 30%, transparent), transparent 62%),
    radial-gradient(52% 42% at 92% 2%,  rgba(191,90,242,.24), transparent 60%),
    radial-gradient(60% 55% at 88% 96%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    radial-gradient(52% 46% at 4% 98%,  rgba(48,209,158,.20), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
:root[data-template="vision"][data-theme="dark"] body {
  background:
    radial-gradient(58% 48% at 12% 6%,  color-mix(in srgb, var(--brand) 24%, transparent), transparent 62%),
    radial-gradient(52% 42% at 92% 2%,  rgba(157,139,255,.20), transparent 60%),
    radial-gradient(60% 55% at 88% 96%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%),
    radial-gradient(52% 46% at 4% 98%,  rgba(62,207,154,.16), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ---- Frosted chrome: top bar, crumb bar, sidebar ---- */
:root[data-template="vision"] .navbar,
:root[data-template="vision"] .topbar {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-brd);
}
:root[data-template="vision"] .sidebar {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-inline-end: 1px solid var(--glass-brd);
}

/* ---- Glass panels: cards, rows, stats, quiz blocks, menus, toolbars ---- */
:root[data-template="vision"] .card,
:root[data-template="vision"] .tcard,
:root[data-template="vision"] .comp,
:root[data-template="vision"] .mini-row,
:root[data-template="vision"] .stat,
:root[data-template="vision"] .kpi,
:root[data-template="vision"] .toc,
:root[data-template="vision"] .q-block,
:root[data-template="vision"] .quiz-result,
:root[data-template="vision"] .user-panel,
:root[data-template="vision"] .admin-tabs,
:root[data-template="vision"] .role-card {
  background: var(--glass) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-brd) !important;
  box-shadow: var(--glass-shadow), var(--glass-hi) !important;
  border-radius: var(--radius);
}

/* ---- Callouts: tinted glass, keeping their meaning colour on the bar ---- */
:root[data-template="vision"] .callout {
  background: color-mix(in srgb, var(--glass) 88%, var(--brand) 12%);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--glass-hi);
}

/* ---- The "continue / onboarding" hero: vibrant translucent glass ---- */
:root[data-template="vision"] .continue-card {
  border-radius: 26px;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--brand) 34%, transparent), var(--glass-hi);
}

/* ---- Small glass elements: inputs, chips, key tiles, quiz options ---- */
:root[data-template="vision"] .field input,
:root[data-template="vision"] .field select,
:root[data-template="vision"] .field textarea,
:root[data-template="vision"] .q-option,
:root[data-template="vision"] .chip {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-brd);
}
:root[data-template="vision"] .q-option:hover:not(:disabled) {
  background: color-mix(in srgb, var(--brand) 12%, var(--glass));
}
:root[data-template="vision"] .q-option.selected {
  background: color-mix(in srgb, var(--brand) 16%, var(--glass));
  border-color: color-mix(in srgb, var(--brand) 55%, var(--glass-brd));
}

/* ---- Admin segmented tracks + the icon tiles: subtle glass ---- */
:root[data-template="vision"] .atg-links {
  background: color-mix(in srgb, var(--bg-elev) 30%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--glass-hi);
}
:root[data-template="vision"] .tcard .tc-icon,
:root[data-template="vision"] .mini-row .mr-ico {
  background: color-mix(in srgb, var(--brand) 16%, var(--glass));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: var(--glass-hi);
}

/* ---- Buttons: pill; primary stays vibrant, ghost turns to glass ---- */
:root[data-template="vision"] .btn-ghost {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-brd);
}
:root[data-template="vision"] .btn-primary {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--brand) 40%, transparent), var(--glass-hi);
}

/* ---- Sidebar active item: a soft glass highlight ---- */
:root[data-template="vision"] .nav-item.active {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
}

/* ---- A gentle lift instead of a hard move on hover ---- */
:root[data-template="vision"] a.tcard:hover,
:root[data-template="vision"] a.comp:hover,
:root[data-template="vision"] a.mini-row:hover {
  box-shadow: 0 22px 60px color-mix(in srgb, var(--ink) 18%, transparent), var(--glass-hi) !important;
}

/* ---- Graceful fallback where backdrop-filter is unsupported: fall back to
   a more opaque surface so panels never look see-through/unreadable. ---- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root[data-template="vision"] .card,
  :root[data-template="vision"] .tcard,
  :root[data-template="vision"] .comp,
  :root[data-template="vision"] .mini-row,
  :root[data-template="vision"] .stat,
  :root[data-template="vision"] .kpi,
  :root[data-template="vision"] .toc,
  :root[data-template="vision"] .q-block,
  :root[data-template="vision"] .user-panel,
  :root[data-template="vision"] .admin-tabs,
  :root[data-template="vision"] .navbar,
  :root[data-template="vision"] .sidebar,
  :root[data-template="vision"] .topbar {
    background: color-mix(in srgb, var(--bg-elev) 94%, transparent) !important;
  }
}