/* PsiQ — base styles. Plain CSS, no Tailwind/build step, matching the
   no-Composer/no-build-tool approach used across your other projects. */

:root {
  /* Matches --v3-indigo-600 in landing-v3.css exactly, so the brand
     accent reads as one identity whether you're on a dark landing page
     or a light content/dashboard page — only the theme's background
     and surface colors are meant to differ, never the brand hue. */
  --indigo: #4f46e5;
  --indigo-dark: #4338ca;
  --purple: #a855f7;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-500: #64748b;
  --slate-700: #334155;
  --slate-900: #0f172a;
  --green: #15803d;
  --red: #b91c1c;
  --amber: #b45309;
}

* { box-sizing: border-box; }

/* No global reset existed for plain <a> tags — every removal of the
   underline was scoped to a specific class (.site-nav-desktop a,
   .footer-grid a, .cmdk-result, etc.), so any link without one of
   those classes (an inline "Browse tests" link in an empty state, the
   audit-log "Clear" filter link, etc.) fell back to the bare browser
   underline. One reset here instead of patching each occurrence. */
a { color: var(--indigo); text-decoration: none; }
a:hover { color: var(--indigo-dark); }

/* Form controls don't inherit the page font by default in any
   browser — without this every button/select/input across the whole
   dashboard silently falls back to the OS UI font instead of the
   app's font stack. */
button, input, select, textarea { font-family: inherit; }

html { overflow-x: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--slate-50);
  color: var(--slate-900);
  margin: 0;
  overflow-x: hidden;
  max-width: 100vw;
}
/* A faint fixed radial tint instead of flat gray — subtle enough to
   never compete with content, but enough to stop the dashboard reading
   as a bare, textureless gray canvas. */
.app-shell {
  background: radial-gradient(circle at 15% 0%, rgba(79, 70, 229, 0.05) 0%, transparent 45%), var(--slate-50);
}

/* Grid/flex children default to min-width:auto, which lets their
   content's natural minimum size (an unbreakable word, a fixed-size
   icon) force the grid track wider than its container — the classic
   cause of horizontal page overflow on narrow screens even when the
   grid itself is correctly responsive. This resets that default
   globally for the specific components prone to it (dashboard KPI
   cards and quick-action buttons), rather than trying to guess the
   exact pixel width where each one would start overflowing. */
.quick-action, .stat-card-v2, .kpi-card {
  min-width: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 600;
  color: var(--indigo);
  text-decoration: none;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--indigo);
  color: white;
  font-size: 14px;
}
.logo-img {
  display: inline-block;
  vertical-align: middle;
  width: auto; /* the real logo is a wide wordmark composition (338x141px), not a square icon — forcing equal width/height would crop or squish it, which is exactly the distortion bug this replaced */
}

.auth-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 32px;
  margin-top: 24px;
}

h1 { font-size: 18px; margin: 0 0 4px; }
p.subtitle { color: var(--slate-500); font-size: 14px; margin: 0 0 24px; }

label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
  background: white;
}

button, .btn {
  display: inline-block;
  background: var(--indigo);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
button:hover, .btn:hover { background: var(--indigo-dark); }
.btn-secondary { background: white; color: var(--slate-700); border: 1px solid var(--slate-200); }
.btn-secondary:hover { background: var(--slate-100); }
button:disabled { opacity: 0.6; cursor: not-allowed; }

.alert { padding: 10px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; }
.alert-error { background: #fef2f2; color: var(--red); }
.alert-success { background: #f0fdf4; color: var(--green); }

.muted-link { text-align: center; font-size: 14px; color: var(--slate-500); margin-top: 24px; }
.muted-link a { color: var(--indigo); text-decoration: none; font-weight: 500; }

/* App shell (dashboard) */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px;
  background: white;
  border-right: 1px solid var(--slate-200);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
}
.sidebar nav { flex: 1; margin-top: 32px; }
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--slate-700);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}
.nav-icon { flex-shrink: 0; opacity: 0.75; }
.sidebar nav a.nav-active .nav-icon, .mobile-panel a.nav-active .nav-icon { opacity: 1; }
.sidebar nav a:hover { background: var(--slate-100); color: var(--role-accent, var(--indigo)); }
.sidebar nav a.nav-active, .mobile-panel a.nav-active {
  background: var(--role-accent-bg, var(--indigo-50));
  color: var(--role-accent, var(--indigo));
  font-weight: 700;
  position: relative;
}
.sidebar nav a.nav-active::before {
  content: ''; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; background: var(--role-accent, var(--indigo)); border-radius: 0 3px 3px 0;
}
.sidebar-footer { border-top: 1px solid var(--slate-200); padding-top: 16px; font-size: 13px; }
.sidebar-footer .name { font-weight: 500; color: var(--slate-900); }
.sidebar-footer .email { color: var(--slate-500); }
.main { flex: 1; padding: 32px; }

.card { background: white; border: 1px solid var(--slate-200); border-radius: 12px; padding: 24px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--slate-100); color: var(--slate-700); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; color: var(--slate-500); padding: 12px; background: var(--slate-50); border-bottom: 1px solid var(--slate-200); letter-spacing: 0.03em; }
td { padding: 12px; border-bottom: 1px solid var(--slate-100); }

/* ============================================================
   Phase 20 — Premium public-site additions + responsive layer
   ============================================================ */

:root {
  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --slate-300: #cbd5e1;
  --slate-600: #475569;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --radius: 12px;
}

/* ---- Public site header/nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--slate-200);
}
.site-header-inner {
  max-width: 1120px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.site-nav-desktop { display: flex; gap: 28px; align-items: center; }
.site-nav-desktop a { color: var(--slate-700); text-decoration: none; font-size: 14px; font-weight: 500; }
.site-nav-desktop a:hover { color: var(--indigo); }

.hamburger-btn {
  display: none; background: none; border: none; cursor: pointer;
  width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 8px;
}
.hamburger-btn:hover { background: var(--slate-100); }
.hamburger-btn span { display: block; width: 20px; height: 2px; background: var(--slate-900); position: relative; }
.hamburger-btn span::before, .hamburger-btn span::after {
  content: ''; position: absolute; width: 20px; height: 2px; background: var(--slate-900); left: 0;
}
.hamburger-btn span::before { top: -6px; }
.hamburger-btn span::after { top: 6px; }

/* Slide-out mobile panel — used by BOTH the public site nav and the
   dashboard sidebar on small screens. Off-canvas, toggled by adding
   .panel-open to <body>, pure CSS transition + minimal vanilla JS. */
.mobile-panel-overlay {
  display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.4); z-index: 48;
}
.mobile-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: 280px; max-width: 82vw;
  background: white; z-index: 49; box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform 0.25s ease; overflow-y: auto;
  padding: 20px;
}
body.panel-open .mobile-panel { transform: translateX(0); }
body.panel-open .mobile-panel-overlay { display: block; }
.mobile-panel a, .mobile-panel form button {
  display: block; width: 100%; text-align: left; padding: 12px 8px; font-size: 15px;
  color: var(--slate-700); text-decoration: none; border-bottom: 1px solid var(--slate-100);
  background: none; border-left: none; border-right: none; border-top: none; cursor: pointer;
}
.mobile-panel a .nav-icon { margin-right: 10px; vertical-align: -4px; }
.mobile-panel-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--slate-500); }

/* ---- Hero / marketing sections ----
   Negative margins break these out of <main>'s own 24px/32px padding
   for a full-bleed background, without changing that padding globally
   and regressing every other page that relies on it. */
.hero {
  margin: -32px -24px 0; padding: 72px 24px 56px; text-align: center;
  background: linear-gradient(180deg, var(--indigo-50) 0%, var(--slate-50) 100%);
}
.hero h1 { font-size: 40px; line-height: 1.15; margin: 20px 0 16px; letter-spacing: -0.02em; }
.hero p.lead { font-size: 18px; color: var(--slate-600); max-width: 560px; margin: 0 auto 28px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.section { padding: 64px 24px; max-width: 1120px; margin: 0 auto; }
.section-title { font-size: 28px; text-align: center; margin-bottom: 12px; letter-spacing: -0.01em; }
.section-subtitle { text-align: center; color: var(--slate-500); max-width: 560px; margin: 0 auto 40px; font-size: 15px; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card {
  background: white; border: 1px solid var(--slate-200); border-radius: var(--radius);
  padding: 28px 24px; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s, transform 0.15s;
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feature-icon {
  width: 44px; height: 44px; border-radius: 10px; background: var(--indigo-100); color: var(--indigo);
  display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px;
}
.feature-card h3 { font-size: 16px; margin: 0 0 8px; }
.feature-card p { font-size: 14px; color: var(--slate-500); line-height: 1.5; margin: 0; }

.steps-row { display: flex; gap: 24px; counter-reset: step; }
.step-card { flex: 1; text-align: center; }
.step-number {
  width: 36px; height: 36px; border-radius: 50%; background: var(--indigo); color: white;
  display: flex; align-items: center; justify-content: center; font-weight: 600; margin: 0 auto 12px;
}

.cta-band {
  background: var(--slate-900); color: white; text-align: center; padding: 56px 24px; border-radius: var(--radius);
  margin: 0 24px 64px;
}
.cta-band h2 { font-size: 26px; margin: 0 0 12px; }
.cta-band p { color: var(--slate-300); margin: 0 0 24px; }

/* ---- Premium button variants ---- */
.btn-lg { padding: 13px 28px; font-size: 15px; border-radius: 10px; }
.btn-white { background: white; color: var(--slate-900); }
.btn-white:hover { background: var(--slate-100); }

/* ---- Public footer ---- */
.site-footer { background: var(--slate-900); color: var(--slate-300); margin-top: 40px; }
.footer-grid {
  max-width: 1120px; margin: 0 auto; padding: 48px 24px 24px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px;
}
.footer-grid h4 { color: white; font-size: 14px; margin: 0 0 14px; }
.footer-grid a { display: block; color: var(--slate-300); text-decoration: none; font-size: 13px; margin-bottom: 8px; }
.footer-grid a:hover { color: white; }
.footer-bottom {
  border-top: 1px solid #334155; padding: 16px 24px; text-align: center; font-size: 12px; color: var(--slate-500);
}

/* ---- Contact / policy pages ---- */
.policy-content h2 { font-size: 18px; margin: 28px 0 10px; }
.policy-content p, .policy-content li { font-size: 14px; color: var(--slate-700); line-height: 1.7; }
.policy-content { max-width: 720px; margin: 0 auto; }

/* Policy table-of-contents — a CSS grid that self-collapses to one
   column on narrow screens via auto-fit/minmax, rather than a fixed
   `columns:2` which doesn't respond to viewport width at all. */
.policy-toc {
  background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 10px;
  padding: 16px 20px; margin: 24px 0;
}
.policy-toc ol {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2px 20px; margin: 8px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.9;
}
.policy-toc a { color: var(--indigo); }

/* ============================================================
   Responsive breakpoints
   ============================================================ */

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-row { flex-wrap: wrap; }
  .step-card { flex: 1 1 45%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .site-nav-desktop { display: none; }
  .hamburger-btn { display: flex; }
  .hero h1 { font-size: 30px; }
  .hero p.lead { font-size: 16px; }
  .section { padding: 44px 20px; }
  .section-title { font-size: 22px; }
  .feature-grid { grid-template-columns: 1fr; }
  .step-card { flex: 1 1 100%; }
  .footer-grid { grid-template-columns: 1fr; padding: 32px 20px 16px; }
  .cta-band { margin: 0 16px 40px; padding: 40px 20px; }

  /* App shell: fixed sidebar becomes an off-canvas panel on mobile.
     app-shell is `display:flex` (row) by default for the desktop
     sidebar+main layout — without this override, .topbar and .main
     sit as side-by-side flex siblings on mobile instead of stacking,
     which was the actual root cause of the header rendering mid-page
     and content overflowing sideways in real screenshots. */
  .app-shell { flex-direction: column; }
  .app-shell .sidebar { display: none; }
  .app-shell .main { padding: 16px; padding-top: 8px; }

  /* Shared .topbar takes over the mobile header role that a separate
     .mobile-topbar element used to have — one implementation instead
     of two that could drift apart. */
  .topbar {
    margin: -16px -16px 16px; padding: 14px 16px; background: white;
    border-bottom: 1px solid var(--slate-200); flex-wrap: nowrap;
  }
  .topbar-mobile-brand { display: flex !important; font-size: 15px; }
  .topbar-search { flex: 0 0 auto; max-width: none; padding: 0 8px; }
  .topbar-search-label, .topbar-search kbd { display: none; }
}

@media (min-width: 721px) {
  /* Guards against a resize-past-breakpoint edge case: if the mobile
     panel was opened, then the window widened past mobile width
     without closing it first, force it hidden rather than leaving an
     off-canvas panel awkwardly overlaid on a desktop layout. Applies
     to both the public site's panel and the dashboard's. */
  .mobile-panel-overlay, .hamburger-btn-dashboard, .topbar-mobile-brand { display: none !important; }
  body.panel-open .mobile-panel { transform: translateX(100%) !important; }
}

/* ============================================================
   Phase 21 — Premium visual upgrade: motion, depth, real polish
   ============================================================ */

/* ---- Scroll-reveal animation (vanilla JS + IntersectionObserver,
   no library) — elements fade/slide up into view once, not on every
   scroll pass (which gets annoying fast on a real site) ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1.visible { transition-delay: 0.08s; }
.reveal-delay-2.visible { transition-delay: 0.16s; }
.reveal-delay-3.visible { transition-delay: 0.24s; }

/* ---- Animated gradient mesh hero background ---- */
.hero { position: relative; overflow: hidden; }
.hero-mesh {
  position: absolute; inset: 0; z-index: 0; opacity: 0.6;
  background:
    radial-gradient(circle at 15% 20%, rgba(99, 102, 241, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(129, 140, 248, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(67, 56, 202, 0.10) 0%, transparent 50%);
  animation: meshDrift 18s ease-in-out infinite alternate;
}
@keyframes meshDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-2%, 2%) scale(1.05); }
}
.hero > * { position: relative; z-index: 1; }

.hero-mark {
  animation: floatMark 5s ease-in-out infinite;
}
@keyframes floatMark {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---- Icon system: inline SVG, consistent stroke style ---- */
.icon { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 26px; height: 26px; }

/* ---- Refined feature cards ---- */
.feature-card {
  position: relative;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.feature-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--indigo-100); }
.feature-icon {
  transition: transform 0.25s ease, background 0.25s ease;
}
.feature-card:hover .feature-icon { transform: scale(1.08) rotate(-4deg); background: var(--indigo); color: white; }

/* ---- Button micro-interactions ---- */
button, .btn, .btn-secondary, .btn-white {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
button:active, .btn:active { transform: scale(0.97); }
.btn:hover { box-shadow: 0 6px 16px rgba(67, 56, 202, 0.28); transform: translateY(-1px); }
.btn-lg:hover { transform: translateY(-2px); }

/* ---- Sticky nav shadow-on-scroll ---- */
.site-header { transition: box-shadow 0.2s ease, background 0.2s ease; }
.site-header.scrolled { box-shadow: 0 2px 12px rgba(15,23,42,0.06); }

/* ---- Stats band (real numbers only, pulled from the database) ---- */
.stats-band { background: var(--slate-900); padding: 48px 24px; }
.stats-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-value { font-size: 34px; font-weight: 700; color: white; letter-spacing: -0.02em; }
.stat-label { font-size: 13px; color: var(--slate-300); margin-top: 4px; }

/* ---- Trust / security band ---- */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trust-item { display: flex; gap: 12px; align-items: flex-start; }
.trust-item .icon { color: var(--indigo); flex-shrink: 0; margin-top: 2px; }
.trust-item h4 { font-size: 14px; margin: 0 0 4px; }
.trust-item p { font-size: 13px; color: var(--slate-500); margin: 0; line-height: 1.5; }

/* ---- FAQ accordion (native details/summary, styled) ---- */
.faq-item { border-bottom: 1px solid var(--slate-200); padding: 18px 0; }
.faq-item summary {
  cursor: pointer; font-weight: 600; font-size: 15px; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 20px; font-weight: 400; color: var(--indigo); transition: transform 0.2s ease; margin-left: 12px;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { font-size: 14px; color: var(--slate-500); margin: 12px 0 0; line-height: 1.6; }

/* ---- Product preview mockup (pure CSS, no fabricated screenshot) ---- */
.product-mockup {
  background: white; border: 1px solid var(--slate-200); border-radius: 16px;
  box-shadow: var(--shadow-lg); overflow: hidden; max-width: 640px; margin: 0 auto;
}
.product-mockup-bar { display: flex; gap: 6px; padding: 12px 16px; background: var(--slate-50); border-bottom: 1px solid var(--slate-200); }
.product-mockup-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--slate-300); }
.product-mockup-body { padding: 24px; }
.mockup-score-ring {
  width: 90px; height: 90px; border-radius: 50%;
  background: conic-gradient(var(--indigo) 0deg 302deg, var(--slate-100) 302deg 360deg);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.mockup-score-ring-inner {
  width: 68px; height: 68px; border-radius: 50%; background: white;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; color: var(--slate-900);
}
.mockup-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mockup-bar-track { flex: 1; height: 8px; background: var(--slate-100); border-radius: 999px; overflow: hidden; }
.mockup-bar-fill { height: 100%; background: var(--indigo); border-radius: 999px; }

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .stat-value { font-size: 26px; }
}

/* Respect reduced-motion preference — a real accessibility practice, not decorative */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-mesh, .hero-mark { animation: none; }
}

/* ============================================================
   Phase 22 — Role-differentiated dashboard panels
   ============================================================ */

/* Each role gets its own accent color, applied consistently across
   that role's dashboard header, quick-action icons, and stat
   highlights — so at a glance it's visually obvious which panel
   you're in, not just readable from the text. */
.role-super_admin { --role-accent: #4338ca; --role-accent-bg: #eef2ff; }
.role-institute_admin { --role-accent: #0369a1; --role-accent-bg: #f0f9ff; }
.role-psychologist { --role-accent: #0f766e; --role-accent-bg: #f0fdfa; }
.role-researcher { --role-accent: #be185d; --role-accent-bg: #fdf2f8; }
.role-student { --role-accent: #b45309; --role-accent-bg: #fffbeb; }
.role-end_user { --role-accent: #7c3aed; --role-accent-bg: #f5f3ff; }

.role-banner {
  display: flex; align-items: center; gap: 16px;
  background: var(--role-accent-bg); border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 24px;
}
.role-banner-icon {
  width: 48px; height: 48px; border-radius: 12px; background: var(--role-accent);
  color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.role-banner h1 { margin: 0 0 2px; font-size: 19px; }
.role-banner p { margin: 0; font-size: 13px; color: var(--slate-500); }

.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
.quick-action {
  display: flex; align-items: center; gap: 10px; background: white; border: 1px solid var(--slate-200);
  border-radius: 10px; padding: 14px 16px; text-decoration: none; color: var(--slate-900);
  font-size: 13px; font-weight: 600; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.quick-action:hover { border-color: var(--role-accent); box-shadow: var(--shadow-sm); }
.quick-action .icon { color: var(--role-accent); flex-shrink: 0; }

.stat-card-v2 {
  background: white; border: 1px solid var(--slate-200); border-radius: 12px; padding: 18px 20px;
  border-left: 3px solid var(--role-accent);
}
.stat-card-v2 .stat-card-label { font-size: 12px; color: var(--slate-500); margin: 0; }
.stat-card-v2 .stat-card-value { font-size: 26px; font-weight: 700; margin: 4px 0 0; color: var(--slate-900); }

.dash-section-title { font-size: 14px; font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.dash-section-title .icon { color: var(--role-accent); width: 18px; height: 18px; }

/* Account/developer settings items (Security, Privacy, API Tokens,
   CSS Editor, Settings, Audit Logs) now live inside the "Account"
   collapsible section in the main nav (see nav_link() usage in
   header.php) — no longer a separate visual style, since they're
   part of the same collapsible-section pattern as every other group. */

/* ============================================================
   Phase 26 — Design system tokens + world-class UI direction
   ============================================================ */

/* ---- Design tokens ---- */
:root {
  /* Spacing scale */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  /* Radius scale */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px;
  /* Type scale */
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px;
  --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --text-4xl: 40px;
  /* Button heights */
  --btn-h-sm: 40px; --btn-h-md: 44px; --btn-h-lg: 48px;
  /* Secondary brand color */
  --teal: #0d9488;
  --teal-bg: #f0fdfa;
}

body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* ---- Avatars: initials-based, deterministically colored — never a
   fabricated photo of a person who doesn't exist ---- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 600; color: white; flex-shrink: 0;
  background: var(--avatar-color, var(--indigo));
  box-shadow: 0 0 0 2px white, 0 0 0 3px var(--slate-200);
}
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-md { width: 40px; height: 40px; font-size: 14px; }
.avatar-lg { width: 64px; height: 64px; font-size: 22px; }

/* ---- Status pills: small dot + label, replacing the flatter .badge
   for anywhere status specifically is being communicated ---- */
.status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 500; }
.status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--slate-500); }
.status-pill.status-published::before, .status-pill.status-active::before, .status-pill.status-completed::before, .status-pill.status-confirmed::before { background: var(--green); }
.status-pill.status-draft::before, .status-pill.status-pending::before, .status-pill.status-scheduled::before { background: var(--amber); }
.status-pill.status-failed::before, .status-pill.status-cancelled::before, .status-pill.status-no_show::before { background: var(--red); }
.status-pill.status-archived::before, .status-pill.status-closed::before { background: var(--slate-300); }

/* ---- Empty states ---- */
.empty-state { text-align: center; padding: var(--space-12) var(--space-4); }
.empty-state-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--indigo-50); color: var(--indigo);
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4);
}
.empty-state h3 { font-size: var(--text-base); margin: 0 0 var(--space-2); }
.empty-state p { font-size: var(--text-sm); color: var(--slate-500); max-width: 360px; margin: 0 auto var(--space-4); }

/* ---- Collapsible desktop sidebar ---- */
.sidebar { width: 260px; transition: width 0.2s ease; }
.app-shell.sidebar-collapsed .sidebar { width: 72px; }

/* Brand row: the real logo.png is a wide wordmark (~2.4:1), not a
   square mark — at 32px tall that's ~77px wide, which alone already
   overflows the entire 72px collapsed sidebar width and spills out
   into the topbar (the exact stray box reported). The old hide-rule
   here targeted a `.brand span:not(.brand-mark)` that logo_img_html()
   never actually renders (it outputs a single <img>, no spans), so it
   silently did nothing. Fixed with a real second, square icon-only
   logo swapped in for the collapsed state instead. */
.sidebar-brand-row { display: flex; align-items: center; justify-content: space-between; }
.brand-icon-only { display: none; }
.app-shell.sidebar-collapsed .sidebar-brand-row {
  flex-direction: column; gap: 12px; align-items: center;
}
.app-shell.sidebar-collapsed .brand-full { display: none; }
.app-shell.sidebar-collapsed .brand-icon-only { display: inline-flex; }

.app-shell.sidebar-collapsed .sidebar nav a span.label,
.app-shell.sidebar-collapsed .sidebar .name, .app-shell.sidebar-collapsed .sidebar .email,
.app-shell.sidebar-collapsed .sidebar-section-label {
  display: none;
}
/* Real icon-only collapse instead of ellipsis-truncated text — the
   span.label hide-rule above only ever worked once nav_link() actually
   started rendering that span (see NAV_ICONS in functions.php); before
   that, every item silently fell back to text-overflow:ellipsis, and
   several items (My Profile / My Results / My Orders, etc.) all
   truncated to the same indistinguishable "M...". */
.app-shell.sidebar-collapsed .sidebar nav a {
  justify-content: center;
  padding: 10px 4px;
}
.app-shell.sidebar-collapsed .sidebar nav a .nav-icon {
  width: 20px; height: 20px;
}
.app-shell.sidebar-collapsed .sidebar nav a.nav-active::before {
  left: -4px;
}
.sidebar-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--role-accent, var(--indigo)); background: var(--role-accent-bg, var(--indigo-50));
  padding: 6px 12px; margin: var(--space-4) 0 var(--space-2); border-radius: 6px; display: block;
}
.sidebar-section-label:first-child { margin-top: 0; }
.sidebar-section-toggle {
  cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  user-select: none;
}
.sidebar-section-toggle:hover { color: var(--role-accent, var(--indigo)); }
.sidebar-section-chevron {
  font-size: 10px; transition: transform 0.15s ease; display: inline-block;
}
.sidebar-section-chevron.collapsed { transform: rotate(-90deg); }
.sidebar-toggle {
  /* padding:0 overrides the base button rule's 11px 18px — that alone
     (36px total) is wider than this button's own 28px width, which
     was squeezing the icon down to a computed 0px width (confirmed via
     direct devtools inspection — a genuinely invisible, not just
     hard-to-see, icon). */
  padding: 0; flex-shrink: 0;
  background: none; border: 1px solid var(--slate-200); border-radius: var(--radius-sm);
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--slate-500); margin-bottom: var(--space-4);
}
.sidebar-toggle svg { flex-shrink: 0; }
.sidebar-toggle:hover { background: var(--slate-100); }

/* ---- Top bar ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--space-6);
}
/* A frosted full-bleed panel instead of a plain inline row — same
   visual family as the public site's floating header, translated to
   this light theme. NOT sticky: body has overflow-x:hidden, which per
   spec forces overflow-y to compute as auto, making body itself an
   unintended scroll container that position:sticky then anchors to
   instead of the real viewport — confirmed via computed-style
   inspection (sticky was applied but the element still scrolled away
   entirely). Fixing that properly means touching the global overflow
   setup other layouts already depend on, which isn't worth the risk
   for a cosmetic change — so this stays non-sticky. Desktop-only
   (min-width:721px) so it never touches the mobile .topbar override
   elsewhere in this file (max-width:720px), which already sets its
   own margin/padding for the narrower breakout. */
@media (min-width: 721px) {
  .topbar {
    margin: -32px -32px var(--space-6);
    padding: 18px 32px;
    background: rgba(248, 250, 252, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--slate-200);
  }
}
.topbar-search {
  flex: 1; max-width: 420px; display: flex; align-items: center; gap: var(--space-2);
  background: white; border: 1px solid var(--slate-200); border-radius: var(--radius-sm);
  padding: 0 var(--space-3); height: var(--btn-h-sm); color: var(--slate-500); font-size: var(--text-sm);
  cursor: pointer;
}
.topbar-search kbd {
  margin-left: auto; font-size: 11px; background: var(--slate-100); border-radius: 4px;
  padding: 2px 6px; color: var(--slate-500);
}

/* ---- Command palette ---- */
.cmdk-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 90; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.cmdk-overlay.open { display: flex; }
.cmdk-panel { width: 100%; max-width: 560px; background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.cmdk-input-wrap { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); border-bottom: 1px solid var(--slate-100); }
.cmdk-input-wrap svg { color: var(--slate-400); flex-shrink: 0; }
.cmdk-input { flex: 1; border: none; padding: var(--space-4) 0; font-size: var(--text-base); outline: none; margin: 0; border-radius: 0; }
.cmdk-input:focus { box-shadow: none !important; border-color: transparent !important; } /* the modal panel itself is the visual focus container — without !important this loses to the global input-focus-ring rule on specificity (that rule's two :not() selectors outweigh a plain class selector), so it would otherwise silently do nothing */
.cmdk-esc-hint {
  font-size: 11px; color: var(--slate-500); background: var(--slate-100); border: 1px solid var(--slate-200);
  border-radius: 5px; padding: 3px 7px; flex-shrink: 0;
}
.cmdk-results { max-height: 360px; overflow-y: auto; padding: var(--space-2); }
.cmdk-footer {
  display: flex; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--slate-100);
  background: var(--slate-50); font-size: 11.5px; color: var(--slate-500);
}
.cmdk-footer kbd {
  display: inline-block; background: white; border: 1px solid var(--slate-200); border-radius: 4px;
  padding: 1px 5px; font-size: 10.5px; margin-right: 3px; color: var(--slate-700);
}
.cmdk-result { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); text-decoration: none; color: var(--slate-900); font-size: var(--text-sm); }
.cmdk-result:hover, .cmdk-result.active { background: var(--slate-100); }
.cmdk-result-type { font-size: 11px; color: var(--slate-500); margin-left: auto; text-transform: uppercase; }
.cmdk-empty { padding: var(--space-6); text-align: center; color: var(--slate-500); font-size: var(--text-sm); }

/* ---- KPI cards (dashboard) ---- */
.kpi-card { background: white; border: 1px solid var(--slate-200); border-radius: var(--radius-md); padding: var(--space-5); }
.kpi-card-label { font-size: var(--text-sm); color: var(--slate-500); margin: 0 0 var(--space-2); }
.kpi-card-value { font-size: var(--text-3xl); font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.kpi-card-trend { font-size: var(--text-xs); color: var(--green); margin-top: var(--space-1); }

@media (max-width: 720px) {
  .sidebar-toggle { display: none; }

  /* ---- Tables: horizontally scrollable instead of breaking the
     layout or forcing the whole page to scroll sideways. Applies to
     every table in the app automatically (33 files use <table>) —
     this is the "fix once at the foundation" pattern rather than
     wrapping each one individually. ---- */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card table { min-width: 480px; }

  /* ---- Inline two/three-column form grids collapse to one column.
     Targets the inline style attribute directly via a substring
     match + !important — necessary because ~20 files across this
     build use hardcoded inline `grid-template-columns:...` for
     side-by-side form fields, which a normal external stylesheet
     rule can't override at all (inline styles win on specificity
     unless !important is used). This is the one deliberate exception
     to "always prefer classes over inline styles" in this codebase,
     because retrofitting 28 individual occurrences across 20 files
     to use a shared class isn't a good use of time versus one rule
     that reaches all of them at once. ---- */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- Comfortable touch targets — buttons/inputs get a bit taller
     on mobile, matching the ~44px minimum most mobile design
     guidelines recommend, rather than the more compact desktop sizing
     everywhere else. ---- */
  button, .btn, .btn-secondary {
    padding: 12px 18px;
  }
  input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
    padding: 12px 14px;
    font-size: 16px; /* prevents iOS Safari's automatic zoom-on-focus for inputs under 16px */
  }

  /* ---- Notification dropdown: fixed 320px width overflows a narrow
     phone screen — cap it to the viewport instead. ---- */
  .topbar details > div { width: min(320px, calc(100vw - 32px)) !important; right: -8px !important; }
}

/* ============================================================
   Phase 34 — Industry-level foundation polish
   Applied at the base-element level so every existing page picks
   this up automatically, without needing per-page changes.
   ============================================================ */

/* ---- Real focus states — replaces the bare browser outline with a
   deliberate, branded focus ring, matching what Linear/Stripe/Vercel
   actually do rather than leaving default browser behavior. ---- */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--role-accent, var(--indigo));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--role-accent, var(--indigo)) 15%, transparent);
}
/* Fallback for browsers without color-mix() support (older Safari) —
   a fixed-opacity indigo ring instead of a dynamically-mixed one. */
@supports not (box-shadow: 0 0 0 3px color-mix(in srgb, red 15%, transparent)) {
  input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.15);
  }
}
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--role-accent, var(--indigo));
  outline-offset: 2px;
}

/* ---- Button polish: subtle press feedback + disabled clarity ---- */
button, .btn, .btn-secondary {
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
button:disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border: 2px solid rgba(255,255,255,0.4); border-top-color: white;
  border-radius: 50%; animation: btn-spin 0.6s linear infinite;
}
.btn-secondary.btn-loading::after { border-color: rgba(51,65,85,0.3); border-top-color: var(--slate-700); }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---- Card & table hover polish ---- */
.card { transition: box-shadow 0.15s ease; }
table tr { transition: background 0.1s ease; }
table tbody tr:hover { background: var(--slate-50); }
table tbody tr[onclick]:hover { background: var(--indigo-50); cursor: pointer; }

/* ---- Toast notifications — replaces page-reload flash messages with
   an immediate, dismissable, non-blocking notification. The existing
   flash()-based alerts still work everywhere unchanged (nothing was
   removed) — toasts are an ADDITIONAL layer that JS uses when a page
   opts in via data-toast, not a replacement requiring every page to
   be rewritten. ---- */
.toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px; max-width: 360px;
}
.toast {
  background: var(--slate-900); color: white; padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 13px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px;
  animation: toast-in 0.25s ease;
}
.toast.toast-success { background: var(--green); }
.toast.toast-error { background: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.toast-close { margin-left: auto; cursor: pointer; opacity: 0.7; background: none; border: none; color: inherit; font-size: 16px; padding: 0; }
.toast-close:hover { opacity: 1; }

/* ============================================================
   Dashboard visual polish + mobile refinement
   Applied at the foundation level (button/card/sidebar/table/mobile
   panel component classes) so it reaches all ~140 dashboard pages
   across every role automatically, the same "fix once" strategy
   already used for the earlier mobile/focus-state/depth passes —
   the dashboard stays on this light theme deliberately (only the
   public marketing site went dark), just with the same level of
   visual care now applied to it.
   ============================================================ */

/* ---- Buttons: brand gradient instead of a flat fill, matching the
   identity already used everywhere on the public site, plus real
   typographic weight so the label holds up against the gradient. ---- */
button, .btn {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--purple) 100%);
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
  border: none;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
button:hover, .btn:hover {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--purple) 100%);
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
  transform: translateY(-1px);
}
/* Secondary: a real filled surface (not bare white-on-white against
   cards) with its own hover lift, instead of only a color swap. */
.btn-secondary {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  color: var(--slate-700);
  box-shadow: none;
  font-weight: 600;
}
.btn-secondary:hover {
  background: white;
  border-color: var(--role-accent, var(--indigo));
  color: var(--role-accent, var(--indigo));
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.btn-white, .btn-white:hover { background: white; box-shadow: none; }
button:disabled, .btn:disabled { transform: none !important; box-shadow: none !important; }

/* ---- Cards: real elevation instead of a near-invisible 1px shadow,
   plus a lift on the ones that are actually clickable ---- */
.card {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  border-radius: 14px;
}
a.card:hover, .card[onclick]:hover {
  box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.12);
  transform: translateY(-2px);
  border-color: var(--role-accent, var(--indigo-100));
}
.kpi-card, .stat-card-v2 {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.kpi-card:hover, .stat-card-v2:hover { box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.1); }

/* ---- Sidebar: a hairline shadow to separate it from the content
   pane instead of a flat border, and a smoother active-item pill ---- */
.sidebar { box-shadow: 1px 0 0 rgba(15, 23, 42, 0.04), 4px 0 16px -8px rgba(15, 23, 42, 0.06); }
.sidebar nav a { transition: background 0.15s ease, color 0.15s ease; }
.sidebar nav a.nav-active { border-radius: 10px; }

/* ---- Role banner: subtle gradient wash instead of a flat tint ---- */
.role-banner {
  background: linear-gradient(135deg, var(--role-accent-bg, var(--indigo-50)) 0%, white 130%);
  border: 1px solid var(--role-accent-bg, var(--indigo-100));
}
.role-banner-icon { box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--role-accent, var(--indigo)) 45%, transparent); }

/* ---- Tables: a clearer header ---- */
th { background: var(--slate-50); font-weight: 700; }

/* ---- Quick actions: same lift treatment as cards ---- */
.quick-action { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.quick-action:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -4px rgba(15, 23, 42, 0.1); }

/* ---- Mobile panel (dashboard variant — shares the class with the
   public site's panel, but this content/theme is dashboard-specific
   and stays light). Same structural polish: clearer section labels,
   better breathing room, a proper header row. ---- */
.mobile-panel { padding: 0; display: flex; flex-direction: column; overflow-y: hidden; }
.mobile-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--slate-100); flex-shrink: 0;
}
/* .mobile-panel a normally gets width:100% for the full-width nav rows
   — without this override that also stretches the logo link across
   the whole header row, squashing the close button (same bug fixed
   on the public site's panel when its logo was added). */
.mobile-panel-header .brand { width: auto; padding: 0; margin: 0; }
.mobile-panel-close { position: static; }
.mobile-panel-scroll { flex: 1; overflow-y: auto; padding: 16px 20px 24px; }
.mobile-panel .sidebar-section-label { margin-top: 20px; }
.mobile-panel .sidebar-section-label:first-child { margin-top: 0; }

@media (max-width: 720px) {
  .card { border-radius: 12px; }
  .quick-actions { gap: 10px; }
}

/* ---- Date inputs — the shared text/email/password/select rule below
   never included input[type=date], so date pickers across every filter
   form (audit logs, analytics, etc.) were rendering with the bare
   unstyled browser default instead of matching every other field. ---- */
input[type=date] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  font-size: 14px;
  background: white;
  font-family: inherit;
  color: var(--slate-900);
}
input[type=date]:focus {
  outline: none;
  border-color: var(--role-accent, var(--indigo));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--role-accent, var(--indigo)) 15%, transparent);
}

/* ---- Select: a custom arrow instead of each browser's own default
   glyph, so it actually matches the rest of the form styling ---- */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}

/* ---- Filter pills — the status-filter row repeated identically
   (institutes, individual users, psychologists, researchers, sessions)
   as raw inline styles; one real class instead, with a hover state
   the inline version never had. ---- */
.filter-pill {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  background: white;
  border: 1px solid var(--slate-200);
  color: var(--slate-700);
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.filter-pill:hover { border-color: var(--role-accent, var(--indigo)); color: var(--role-accent, var(--indigo)); }
.filter-pill.active {
  background: linear-gradient(135deg, var(--role-accent, var(--indigo)) 0%, var(--purple) 100%);
  border-color: transparent;
  color: white;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}
.filter-pill.active:hover { color: white; transform: translateY(-1px); }

/* ---- Tabs (underline style — e.g. Item Bank's My Assessments/All
   Items) — same idea, a real class instead of a fully inline pattern
   with no hover feedback. ---- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--slate-200); margin-bottom: 20px; flex-wrap: wrap; }
.tab-link {
  padding: 10px 16px;
  font-size: 14px;
  text-decoration: none;
  color: var(--slate-500);
  border-bottom: 2px solid transparent;
  font-weight: 500;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tab-link:hover { color: var(--role-accent, var(--indigo)); }
.tab-link.active { color: var(--role-accent, var(--indigo)); border-bottom-color: var(--role-accent, var(--indigo)); font-weight: 600; }

/* ---- Pagination ---- */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.page-link {
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 13px;
  text-decoration: none;
  color: var(--slate-700);
  border: 1px solid var(--slate-200);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.page-link:hover { border-color: var(--role-accent, var(--indigo)); }
.page-link.active {
  background: linear-gradient(135deg, var(--role-accent, var(--indigo)) 0%, var(--purple) 100%);
  border-color: transparent;
  color: white;
}

/* ---- Status pills: a tinted background chip instead of a bare dot,
   consistent with the rest of the site's badge treatment ---- */
.status-pill {
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: var(--slate-100);
}
.status-pill.status-published, .status-pill.status-active, .status-pill.status-completed, .status-pill.status-confirmed, .status-pill.status-success {
  background: #dcfce7; color: var(--green);
}
.status-pill.status-draft, .status-pill.status-pending, .status-pill.status-scheduled {
  background: #fef3c7; color: var(--amber);
}
.status-pill.status-failed, .status-pill.status-cancelled, .status-pill.status-no_show, .status-pill.status-failure {
  background: #fee2e2; color: var(--red);
}
.status-pill.status-archived, .status-pill.status-closed { background: var(--slate-100); color: var(--slate-500); }