/* ===== view_as_user_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html. Anvil's server strips a
   <style> block out of an HTML template, so the form's rules live here.

   SCOPE. The form root is <div id="vu-shell" class="vu-shell">, so the root
   rule stays a bare .vu-shell and every other rule is
   :where(.vu-shell)-scoped. :where() adds no specificity, so it cannot change
   which rule wins.

   No second class is needed anywhere. Every name in this sheet carries the
   vu- prefix and has no competitor in the dependency chrome CSS, in the app
   theme or in any sibling training asset, so the only ties this sheet has are
   with itself, decided by file order.

   The root takes position: relative, and no min-height, height or overflow:
   this form's root is a modal child rather than a screen in the layout
   scroller.

   Nothing in this sheet hides a block the designer canvas needs to show, so
   there is no live-class gate. */

.vu-shell {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    color: #1e293b;
    padding: 18px 24px 28px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

/* Section selector — "Show as Required / Show as Optional" */
:where(.vu-shell) .vu-selector {
    display: flex; align-items: center; gap: 10px;
    background: #ffffff; padding: 10px 14px;
    border: 1px solid #e2e8f0; border-radius: 10px;
}

:where(.vu-shell) .vu-selector-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: .12em;
}

:where(.vu-shell) .vu-toggle-group { display: inline-flex; gap: 0; border-radius: 8px; overflow: hidden; border: 1px solid #cbd5e1; }

:where(.vu-shell) .vu-toggle-btn {
    padding: 6px 14px; cursor: pointer; user-select: none;
    font-size: 0.85rem; font-weight: 600; color: #475569;
    background: #ffffff; border: 0;
}

:where(.vu-shell) .vu-toggle-btn.active { background: #1d4ed8; color: #ffffff; }

:where(.vu-shell) .vu-toggle-btn:not(.active):hover { background: #f1f5f9; }

:where(.vu-shell) .vu-selector-aside {
    font-size: 0.78rem; color: #94a3b8; margin-left: auto;
}

:where(.vu-shell) .vu-badge-toggles { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

:where(.vu-shell) .vu-badge-toggle {
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
    font-size: 0.75rem; color: #475569; padding: 4px 8px; border-radius: 6px;
    border: 1px solid #e2e8f0; background: #ffffff;
    font-family: inherit; line-height: normal;
}

:where(.vu-shell) .vu-badge-toggle:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

:where(.vu-shell) .vu-badge-toggle.active.overdue { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

:where(.vu-shell) .vu-badge-toggle.active.expiring { background: #fef3c7; color: #92400e; border-color: #fde68a; }

:where(.vu-shell) .vu-badge-toggle.active.new-badge { background: #dcfce7; color: #166534; border-color: #bbf7d0; }

/* Welcome card */
:where(.vu-shell) .vu-welcome {
    background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
    color: #ffffff; padding: 18px 22px; border-radius: 12px;
    display: flex; flex-direction: column; gap: 6px;
}

:where(.vu-shell) .vu-welcome-greeting { font-size: 1.3rem; font-weight: 700; }

:where(.vu-shell) .vu-welcome-sub { opacity: 0.85; font-size: 0.9rem; }

/* Hero stats strip */
:where(.vu-shell) .vu-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

:where(.vu-shell) .vu-stat {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 12px 14px;
}

:where(.vu-shell) .vu-stat-label {
    font-size: 0.7rem; color: #64748b; text-transform: uppercase;
    letter-spacing: .08em; font-weight: 600;
}

:where(.vu-shell) .vu-stat-value { font-size: 1.5rem; font-weight: 800; color: #0f172a; margin-top: 4px; }

:where(.vu-shell) .vu-stat-value small { font-size: 0.78rem; color: #94a3b8; font-weight: 500; margin-left: 3px; }

/* Leaderboard shortcuts row */
:where(.vu-shell) .vu-shortcuts { display: flex; gap: 10px; flex-wrap: wrap; }

:where(.vu-shell) .vu-shortcut {
    padding: 8px 14px; border-radius: 999px;
    background: #ffffff; border: 1px solid #e2e8f0;
    font-size: 0.85rem; color: #475569; font-weight: 600;
}

/* Sections */
:where(.vu-shell) .vu-section {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 16px 18px;
}

:where(.vu-shell) .vu-section-h {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
}

:where(.vu-shell) .vu-section-title {
    font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 0;
}

:where(.vu-shell) .vu-section-count {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem; color: #94a3b8; text-transform: uppercase;
    letter-spacing: .08em;
}

:where(.vu-shell) .vu-empty {
    padding: 18px; text-align: center; color: #94a3b8;
    font-style: italic; font-size: 0.88rem;
    background: #f8fafc; border-radius: 8px;
}

/* Test card — single populated card across all sections */
:where(.vu-shell) .vu-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 16px; border: 1px solid #e2e8f0; border-radius: 10px;
    background: #ffffff;
}

:where(.vu-shell) .vu-card-row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

:where(.vu-shell) .vu-card-icon {
    width: 36px; height: 36px; border-radius: 8px; flex: 0 0 36px;
    background: #eff6ff; color: #1d4ed8;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.1rem;
}

:where(.vu-shell) .vu-card-title { font-weight: 700; color: #0f172a; flex: 1 1 auto; }

:where(.vu-shell) .vu-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }

:where(.vu-shell) .vu-pill {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem; padding: 2px 8px; border-radius: 999px;
    font-weight: 700; letter-spacing: .04em;
}

:where(.vu-shell) .vu-pill.required { background: #fee2e2; color: #991b1b; }

:where(.vu-shell) .vu-pill.optional { background: #e0f2fe; color: #075985; }

:where(.vu-shell) .vu-pill.overdue { background: #fee2e2; color: #991b1b; }

:where(.vu-shell) .vu-pill.expiring { background: #fef3c7; color: #92400e; }

:where(.vu-shell) .vu-pill.new-badge { background: #dcfce7; color: #166534; }

:where(.vu-shell) .vu-card-meta {
    font-size: 0.82rem; color: #64748b;
    display: flex; gap: 12px; flex-wrap: wrap;
}

:where(.vu-shell) .vu-card-actions { display: flex; gap: 8px; }

:where(.vu-shell) .vu-card-btn {
    padding: 7px 14px; border: 1px solid #1d4ed8; border-radius: 8px;
    background: #1d4ed8; color: #ffffff; font-weight: 700; font-size: 0.88rem;
    cursor: not-allowed; opacity: 0.7;
}

:where(.vu-shell) .vu-card-btn:hover { background: #1d4ed8; }