/* Tailwind bg-<hue>-<shade> shims for drug/class colors.
   Full palette (100–900) for every hue the React drug catalog uses. Values
   match Tailwind v3 defaults. Shades 100–300 use dark text, 400+ light text,
   with the usual "bright" exceptions for yellow/amber/lime/green. */

.bg-black { background-color: #000; color: #fff; }

.bg-slate-100 { background-color: #f1f5f9; color: #111; }
.bg-slate-200 { background-color: #e2e8f0; color: #111; }
.bg-slate-300 { background-color: #cbd5e1; color: #111; }
.bg-slate-400 { background-color: #94a3b8; color: #fff; }
.bg-slate-500 { background-color: #64748b; color: #fff; }
.bg-slate-600 { background-color: #475569; color: #fff; }
.bg-slate-700 { background-color: #334155; color: #fff; }
.bg-slate-800 { background-color: #1e293b; color: #fff; }
.bg-slate-900 { background-color: #0f172a; color: #fff; }

.bg-gray-100 { background-color: #f3f4f6; color: #111; }
.bg-gray-200 { background-color: #e5e7eb; color: #111; }
.bg-gray-300 { background-color: #d1d5db; color: #111; }
.bg-gray-400 { background-color: #9ca3af; color: #fff; }
.bg-gray-500 { background-color: #6b7280; color: #fff; }
.bg-gray-600 { background-color: #4b5563; color: #fff; }
.bg-gray-700 { background-color: #374151; color: #fff; }
.bg-gray-800 { background-color: #1f2937; color: #fff; }
.bg-gray-900 { background-color: #111827; color: #fff; }

.bg-red-100 { background-color: #fee2e2; color: #111; }
.bg-red-200 { background-color: #fecaca; color: #111; }
.bg-red-300 { background-color: #fca5a5; color: #111; }
.bg-red-400 { background-color: #f87171; color: #fff; }
.bg-red-500 { background-color: #ef4444; color: #fff; }
.bg-red-600 { background-color: #dc2626; color: #fff; }
.bg-red-700 { background-color: #b91c1c; color: #fff; }
.bg-red-800 { background-color: #991b1b; color: #fff; }
.bg-red-900 { background-color: #7f1d1d; color: #fff; }

.bg-orange-100 { background-color: #ffedd5; color: #111; }
.bg-orange-200 { background-color: #fed7aa; color: #111; }
.bg-orange-300 { background-color: #fdba74; color: #111; }
.bg-orange-400 { background-color: #fb923c; color: #111; }
.bg-orange-500 { background-color: #f97316; color: #fff; }
.bg-orange-600 { background-color: #ea580c; color: #fff; }
.bg-orange-700 { background-color: #c2410c; color: #fff; }
.bg-orange-800 { background-color: #9a3412; color: #fff; }
.bg-orange-900 { background-color: #7c2d12; color: #fff; }

.bg-amber-100 { background-color: #fef3c7; color: #111; }
.bg-amber-200 { background-color: #fde68a; color: #111; }
.bg-amber-300 { background-color: #fcd34d; color: #111; }
.bg-amber-400 { background-color: #fbbf24; color: #111; }
.bg-amber-500 { background-color: #f59e0b; color: #111; }
.bg-amber-600 { background-color: #d97706; color: #fff; }
.bg-amber-700 { background-color: #b45309; color: #fff; }
.bg-amber-800 { background-color: #92400e; color: #fff; }
.bg-amber-900 { background-color: #78350f; color: #fff; }

.bg-yellow-100 { background-color: #fef9c3; color: #111; }
.bg-yellow-200 { background-color: #fef08a; color: #111; }
.bg-yellow-300 { background-color: #fde047; color: #111; }
.bg-yellow-400 { background-color: #facc15; color: #111; }
.bg-yellow-500 { background-color: #eab308; color: #111; }
.bg-yellow-600 { background-color: #ca8a04; color: #fff; }
.bg-yellow-700 { background-color: #a16207; color: #fff; }
.bg-yellow-800 { background-color: #854d0e; color: #fff; }
.bg-yellow-900 { background-color: #713f12; color: #fff; }

.bg-lime-100 { background-color: #ecfccb; color: #111; }
.bg-lime-200 { background-color: #d9f99d; color: #111; }
.bg-lime-300 { background-color: #bef264; color: #111; }
.bg-lime-400 { background-color: #a3e635; color: #111; }
.bg-lime-500 { background-color: #84cc16; color: #111; }
.bg-lime-600 { background-color: #65a30d; color: #fff; }
.bg-lime-700 { background-color: #4d7c0f; color: #fff; }
.bg-lime-800 { background-color: #3f6212; color: #fff; }
.bg-lime-900 { background-color: #365314; color: #fff; }

.bg-green-100 { background-color: #dcfce7; color: #111; }
.bg-green-200 { background-color: #bbf7d0; color: #111; }
.bg-green-300 { background-color: #86efac; color: #111; }
.bg-green-400 { background-color: #4ade80; color: #111; }
.bg-green-500 { background-color: #22c55e; color: #fff; }
.bg-green-600 { background-color: #16a34a; color: #fff; }
.bg-green-700 { background-color: #15803d; color: #fff; }
.bg-green-800 { background-color: #166534; color: #fff; }
.bg-green-900 { background-color: #14532d; color: #fff; }

.bg-emerald-100 { background-color: #d1fae5; color: #111; }
.bg-emerald-200 { background-color: #a7f3d0; color: #111; }
.bg-emerald-300 { background-color: #6ee7b7; color: #111; }
.bg-emerald-400 { background-color: #34d399; color: #111; }
.bg-emerald-500 { background-color: #10b981; color: #fff; }
.bg-emerald-600 { background-color: #059669; color: #fff; }
.bg-emerald-700 { background-color: #047857; color: #fff; }
.bg-emerald-800 { background-color: #065f46; color: #fff; }
.bg-emerald-900 { background-color: #064e3b; color: #fff; }

.bg-teal-100 { background-color: #ccfbf1; color: #111; }
.bg-teal-200 { background-color: #99f6e4; color: #111; }
.bg-teal-300 { background-color: #5eead4; color: #111; }
.bg-teal-400 { background-color: #2dd4bf; color: #111; }
.bg-teal-500 { background-color: #14b8a6; color: #fff; }
.bg-teal-600 { background-color: #0d9488; color: #fff; }
.bg-teal-700 { background-color: #0f766e; color: #fff; }
.bg-teal-800 { background-color: #115e59; color: #fff; }
.bg-teal-900 { background-color: #134e4a; color: #fff; }

.bg-cyan-100 { background-color: #cffafe; color: #111; }
.bg-cyan-200 { background-color: #a5f3fc; color: #111; }
.bg-cyan-300 { background-color: #67e8f9; color: #111; }
.bg-cyan-400 { background-color: #22d3ee; color: #111; }
.bg-cyan-500 { background-color: #06b6d4; color: #fff; }
.bg-cyan-600 { background-color: #0891b2; color: #fff; }
.bg-cyan-700 { background-color: #0e7490; color: #fff; }
.bg-cyan-800 { background-color: #155e75; color: #fff; }
.bg-cyan-900 { background-color: #164e63; color: #fff; }

.bg-sky-100 { background-color: #e0f2fe; color: #111; }
.bg-sky-200 { background-color: #bae6fd; color: #111; }
.bg-sky-300 { background-color: #7dd3fc; color: #111; }
.bg-sky-400 { background-color: #38bdf8; color: #111; }
.bg-sky-500 { background-color: #0ea5e9; color: #fff; }
.bg-sky-600 { background-color: #0284c7; color: #fff; }
.bg-sky-700 { background-color: #0369a1; color: #fff; }
.bg-sky-800 { background-color: #075985; color: #fff; }
.bg-sky-900 { background-color: #0c4a6e; color: #fff; }

.bg-blue-100 { background-color: #dbeafe; color: #111; }
.bg-blue-200 { background-color: #bfdbfe; color: #111; }
.bg-blue-300 { background-color: #93c5fd; color: #111; }
.bg-blue-400 { background-color: #60a5fa; color: #fff; }
.bg-blue-500 { background-color: #3b82f6; color: #fff; }
.bg-blue-600 { background-color: #2563eb; color: #fff; }
.bg-blue-700 { background-color: #1d4ed8; color: #fff; }
.bg-blue-800 { background-color: #1e40af; color: #fff; }
.bg-blue-900 { background-color: #1e3a8a; color: #fff; }

.bg-indigo-100 { background-color: #e0e7ff; color: #111; }
.bg-indigo-200 { background-color: #c7d2fe; color: #111; }
.bg-indigo-300 { background-color: #a5b4fc; color: #111; }
.bg-indigo-400 { background-color: #818cf8; color: #fff; }
.bg-indigo-500 { background-color: #6366f1; color: #fff; }
.bg-indigo-600 { background-color: #4f46e5; color: #fff; }
.bg-indigo-700 { background-color: #4338ca; color: #fff; }
.bg-indigo-800 { background-color: #3730a3; color: #fff; }
.bg-indigo-900 { background-color: #312e81; color: #fff; }

.bg-purple-100 { background-color: #f3e8ff; color: #111; }
.bg-purple-200 { background-color: #e9d5ff; color: #111; }
.bg-purple-300 { background-color: #d8b4fe; color: #111; }
.bg-purple-400 { background-color: #c084fc; color: #fff; }
.bg-purple-500 { background-color: #a855f7; color: #fff; }
.bg-purple-600 { background-color: #9333ea; color: #fff; }
.bg-purple-700 { background-color: #7e22ce; color: #fff; }
.bg-purple-800 { background-color: #6b21a8; color: #fff; }
.bg-purple-900 { background-color: #581c87; color: #fff; }

.bg-pink-100 { background-color: #fce7f3; color: #111; }
.bg-pink-200 { background-color: #fbcfe8; color: #111; }
.bg-pink-300 { background-color: #f9a8d4; color: #111; }
.bg-pink-400 { background-color: #f472b6; color: #fff; }
.bg-pink-500 { background-color: #ec4899; color: #fff; }
.bg-pink-600 { background-color: #db2777; color: #fff; }
.bg-pink-700 { background-color: #be185d; color: #fff; }
.bg-pink-800 { background-color: #9d174d; color: #fff; }
.bg-pink-900 { background-color: #831843; color: #fff; }

.bg-rose-100 { background-color: #ffe4e6; color: #111; }
.bg-rose-200 { background-color: #fecdd3; color: #111; }
.bg-rose-300 { background-color: #fda4af; color: #111; }
.bg-rose-400 { background-color: #fb7185; color: #fff; }
.bg-rose-500 { background-color: #f43f5e; color: #fff; }
.bg-rose-600 { background-color: #e11d48; color: #fff; }
.bg-rose-700 { background-color: #be123c; color: #fff; }
.bg-rose-800 { background-color: #9f1239; color: #fff; }
.bg-rose-900 { background-color: #881337; color: #fff; }

/* Swatches for drug/class color badges (used by drugs.js and classes.js tables). */
.color-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    vertical-align: middle;
    border: 1px solid rgba(0,0,0,.1);
}
.color-option {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    margin: 2px;
    cursor: pointer;
    border: 2px solid transparent;
    vertical-align: middle;
}
.color-option:hover { border-color: rgba(0,0,0,.25); }
.color-option.selected { border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13,110,253,.25); }
.drug-swatch { border-radius: 3px; }

/* ─── Scenario cards (Dashboard §3) ─────────────────────────────────── */
.sf-scenario-grid {
    display: grid;
    /* Max 4 per row on wide screens, gracefully step down to 3 / 2 / 1. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sf-space-4);
}
@media (max-width: 1400px) { .sf-scenario-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px)  { .sf-scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .sf-scenario-grid { grid-template-columns: 1fr; } }

.sf-scenario-card {
    display: flex;
    flex-direction: column;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow-sm);
    padding: var(--sf-space-2) var(--sf-space-3);
    transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.sf-scenario-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--sf-shadow-md);
    border-color: var(--sf-accent);
}
.sf-scenario-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-1);
    margin-bottom: var(--sf-space-1);
}
.sf-scenario-card__title {
    font-size: var(--sf-fs-16);
    font-weight: var(--sf-fw-semibold);
    margin: 0;
    color: var(--sf-text);
    line-height: 1.25;
}
.sf-scenario-card__desc {
    font-size: var(--sf-fs-13);
    color: var(--sf-text-muted);
    margin: 0 0 var(--sf-space-1);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sf-scenario-card__meta {
    font-size: var(--sf-fs-12);
    color: var(--sf-text-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-2);
    margin-bottom: var(--sf-space-1);
}
.sf-scenario-card__meta > span { display: inline-flex; align-items: center; gap: .25rem; }
.sf-scenario-card__footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-space-2);
}
.sf-scenario-card__actions { display: flex; gap: .25rem; }
.sf-scenario-card__runs {
    font-size: var(--sf-fs-12);
    color: var(--sf-text-muted);
    white-space: nowrap;
}
.sf-badge-pill {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: var(--sf-fs-12);
    font-weight: var(--sf-fw-medium);
    border-radius: 999px;
    border: 1px solid var(--sf-border);
    background: var(--sf-bg-subtle, #f8fafc);
    color: var(--sf-text-muted);
}
.sf-badge-pill--accent { background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.2); color: #1d4ed8; }
.sf-badge-pill--simzone { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.2); color: #6d28d9; }

/* ─── Sign-out confirm modal ─────────────────────────────────────── */
.sf-signout-card {
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-xl);
    box-shadow: var(--sf-shadow-lg);
}
.sf-signout-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(37,99,235,.10);
    color: #2563eb;
    font-size: 1.5rem;
}
[data-bs-theme="dark"] .sf-signout-icon {
    background: rgba(96,165,250,.15);
    color: #93c5fd;
}

/* ─── User dropdown (top-right avatar chip) ──────────────────────── */
.sf-user-chip { cursor: pointer; }
.sf-user-dropdown {
    min-width: 18rem;
    max-width: 22rem;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow-lg);
    padding: 0;
    overflow: hidden;
}
.sf-user-dropdown__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1rem .875rem;
    background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(124,58,237,.06));
    border-bottom: 1px solid var(--sf-border);
}
[data-bs-theme="dark"] .sf-user-dropdown__header {
    background: linear-gradient(135deg, rgba(96,165,250,.08), rgba(167,139,250,.08));
}
.sf-avatar--lg {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--sf-fs-14);
    flex-shrink: 0;
}
.sf-user-dropdown__meta {
    min-width: 0;
    flex: 1;
}
.sf-user-dropdown__name {
    font-weight: var(--sf-fw-semibold);
    font-size: var(--sf-fs-14);
    color: var(--sf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sf-user-dropdown__email {
    font-size: var(--sf-fs-12);
    color: var(--sf-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: .125rem;
}
.sf-user-dropdown__role {
    display: inline-block;
    margin-top: .375rem;
    padding: .125rem .5rem;
    font-size: 11px;
    font-weight: var(--sf-fw-medium);
    line-height: 1.3;
    border-radius: 999px;
    background: rgba(37,99,235,.1);
    color: #1d4ed8;
    text-transform: uppercase;
    letter-spacing: .04em;
}
[data-bs-theme="dark"] .sf-user-dropdown__role {
    background: rgba(96,165,250,.15);
    color: #93c5fd;
}
.sf-user-dropdown__signout {
    display: flex !important;
    align-items: center;
    gap: .625rem;
    padding: .625rem 1rem;
    font-size: var(--sf-fs-14);
    color: #b91c1c;
    transition: background-color .12s ease;
}
.sf-user-dropdown__signout:hover,
.sf-user-dropdown__signout:focus {
    background: rgba(220,38,38,.08);
    color: #991b1b;
}
.sf-user-dropdown__signout i {
    font-size: 1rem;
}
[data-bs-theme="dark"] .sf-user-dropdown__signout {
    color: #fca5a5;
}
[data-bs-theme="dark"] .sf-user-dropdown__signout:hover,
[data-bs-theme="dark"] .sf-user-dropdown__signout:focus {
    background: rgba(248,113,113,.12);
    color: #fecaca;
}

/* ─── Scenario card — new elements: org header, access lines, students ─── */
.sf-scenario-card__org {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--sf-space-1);
    min-width: 0;
}
.sf-scenario-card__org-logo {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    background: var(--sf-bg-subtle, #f8fafc);
    border: 1px solid var(--sf-border);
    overflow: hidden;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.sf-scenario-card__org-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sf-scenario-card__org-logo--fallback {
    font-size: 0.75rem;
    font-weight: var(--sf-fw-semibold);
    color: var(--sf-text-muted);
    background: linear-gradient(135deg, rgba(37,99,235,.15), rgba(124,58,237,.15));
}
.sf-scenario-card__org-name {
    font-size: var(--sf-fs-12);
    font-weight: var(--sf-fw-medium);
    color: var(--sf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Access-line badges (CVC(4L), PEG, etc.) */
.sf-scenario-card__lines {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0 0 var(--sf-space-1);
}
.sf-badge-pill--line {
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.20);
    font-variant-numeric: tabular-nums;
    font-weight: var(--sf-fw-semibold);
    letter-spacing: 0.01em;
}
[data-bs-theme="dark"] .sf-badge-pill--line {
    background: rgba(52, 211, 153, 0.14);
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, 0.28);
}

/* Participant pills */
.sf-scenario-card__students {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0 0 var(--sf-space-1);
}
.sf-badge-pill--student {
    background: rgba(139, 92, 246, 0.08);
    color: #6d28d9;
    border-color: rgba(139, 92, 246, 0.20);
}
[data-bs-theme="dark"] .sf-badge-pill--student {
    background: rgba(167, 139, 250, 0.15);
    color: #c4b5fd;
    border-color: rgba(167, 139, 250, 0.30);
}

/* ─── Scenario grid infinite-scroll sentinel ──────────────────────── */
.sf-scenario-sentinel {
    grid-column: 1 / -1;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sf-space-4) 0;
    color: var(--sf-text-muted);
    font-size: var(--sf-fs-13);
}
.sf-scenario-sentinel__spinner {
    display: inline-flex;
    align-items: center;
}

/* ─── Super-admin-gated UI ────────────────────────────────────────────
   Elements marked [data-requires-super-admin] are hidden by default.
   app-shell.js sets body[data-is-super-admin="true"] after confirming
   the signed-in user is super-admin, which then reveals them. CSS-first
   so there is no flash-of-visible-content during auth-guard hydration. */
[data-requires-super-admin] { display: none !important; }
body[data-is-super-admin="true"] [data-requires-super-admin] { display: revert !important; }