/* dashboard.css -- GCO-177 canonical rebuild additions. The dev-only "View as" switcher, the lane placeholders, and small attendance helpers. Reuses base.css tokens + the existing dashboard component classes. Dev affordance styling is harmless in prod (the switcher is never mounted). */ /* ── dev "View as" switcher (floating, collapsible; mounted to ) ── */ .dev-viewas--floating { position: fixed; right: 1rem; bottom: 1rem; z-index: 1000; width: 230px; display: flex; flex-direction: column; border-radius: 0.6rem; overflow: hidden; background: var(--color-accent-light, #FCC940); color: var(--color-accent-dark, #C7910A); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22); } .dev-viewas__toggle { width: 100%; text-align: left; padding: 0.5rem 0.7rem; border: 0; background: var(--color-accent, #F6B507); color: var(--color-accent-dark, #C7910A); font: inherit; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; } .dev-viewas__toggle::after { content: " ▾"; float: right; } .dev-viewas.is-collapsed .dev-viewas__toggle::after { content: " ▸"; } .dev-viewas__body { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem; } .dev-viewas.is-collapsed .dev-viewas__body { display: none; } .dev-viewas__select { width: 100%; padding: 0.35rem 0.45rem; border-radius: 0.35rem; border: 1px solid var(--color-accent-dark, #C7910A); background: var(--color-surface, #fff); color: var(--color-text, #0f2747); font: inherit; font-size: 0.8rem; } @media (max-width: 640px) { .dev-viewas--floating { width: 200px; right: 0.5rem; bottom: 0.5rem; } } /* ── lane placeholders (foundation ships these; feature lanes replace them) ── */ .lane-placeholder { text-align: center; } .lane-placeholder__title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--color-primary-dark, #2A75C4); } .lane-placeholder__text { margin: 0 auto; max-width: 48ch; color: var(--color-text-muted, #5b6b82); } /* ── attendance status buttons (reference tab) ── */ .att-row { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-xs); border-bottom: 1px solid var(--color-overlay-black-faint, rgba(0, 0, 0, 0.06)); border-radius: var(--radius-sm); transition: background var(--transition-fast); } .att-row:hover { background: var(--color-primary-alpha-04, rgba(62, 147, 235, 0.04)); } .att-row__name { flex: 1; min-width: 0; } .att-row__role { font-size: var(--font-size-xs); color: var(--color-text-muted, #5b6b82); text-transform: capitalize; } .att-row__dirty { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-accent, #F6B507); } .att-btns { display: inline-flex; gap: var(--spacing-xs); } .att-btn { width: 2rem; height: 2rem; border-radius: var(--radius-sm); border: 1px solid var(--color-overlay-black-light, rgba(0, 0, 0, 0.1)); background: var(--color-surface, #fff); color: var(--color-text, #0f2747); font-weight: var(--font-weight-bold); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .att-btn:hover { background: var(--color-primary-alpha-06); border-color: var(--color-primary-alpha-30); } .att-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .att-btn:active { transform: scale(0.92); } .att-btn[aria-pressed="true"][data-status="P"] { background: var(--color-success); color: #fff; border-color: var(--color-success); } .att-btn[aria-pressed="true"][data-status="A"] { background: var(--color-error); color: #fff; border-color: var(--color-error); } .att-btn[aria-pressed="true"][data-status="L"] { background: var(--color-accent-dark); color: #fff; border-color: var(--color-accent-dark); } .att-btn[aria-pressed="true"][data-status="E"] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .att-summary { display: flex; flex-wrap: wrap; gap: var(--spacing-md); margin-bottom: var(--spacing-md); font-size: var(--font-size-sm); color: var(--color-text-muted, #5b6b82); } .att-staff-divider { margin: var(--spacing-md) 0 var(--spacing-xs); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted, #5b6b82); } @media (prefers-reduced-motion: reduce) { .att-row, .att-btn { transition: none; } .att-btn:active { transform: none; } } /* ===== GCO-228: card-grid toolbar + grid/list view toggle (Offerings + Curriculum) ===== */ .cards-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } /* the count's own bottom margin is carried by the toolbar row instead */ .cards-toolbar .offerings-count { margin: 0; } .view-toggle { display: inline-flex; border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1)); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface, #fff); } .view-toggle__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--spacing-sm); border: none; background: transparent; color: var(--color-text-muted, #5b6b82); font-size: var(--font-size-sm); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .view-toggle__btn + .view-toggle__btn { border-left: 1px solid var(--color-border, rgba(0, 0, 0, 0.1)); } .view-toggle__btn:hover { color: var(--color-primary, #3E93EB); background: var(--color-primary-alpha-06); } .view-toggle__btn:focus-visible { /* inset outline: the group's border-radius clips an outer one */ outline: 2px solid var(--color-focus); outline-offset: -2px; } .view-toggle__btn:active { background: var(--color-primary-alpha-12); } .view-toggle__btn.is-active { background: var(--color-primary, #3E93EB); color: var(--color-surface, #fff); } /* list view: the card grid is swapped for a real data table (built in JS). The container just stops being a grid so the table can lay out its own columns. */ .offering-cards.offering-cards--list, .curriculum-cards.curriculum-cards--list { display: block; } /* ── data table (shared by the Offerings + Curriculum list views) ───────────── One aligned column per field, a header row, hairline row dividers, row-tint hover. Wrapped in a scroll container so narrow screens scroll horizontally instead of breaking the column alignment. */ .data-table-wrap { /* scroll long lists inside the wrap so the header can stick; short tables (under the cap) just grow to content and never scroll. Horizontal scroll on narrow screens keeps the columns aligned instead of breaking them. */ max-height: 70vh; overflow: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .data-table__head { /* sticky within .data-table-wrap: the header pins while rows scroll under it. Needs a solid background so rows do not show through, and a bottom border that reads as the divider (border-collapse drops sticky cell borders). */ position: sticky; top: 0; z-index: 1; padding: var(--spacing-sm) var(--spacing-md); text-align: left; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted, #5b6b82); white-space: nowrap; background: var(--color-surface, #fff); box-shadow: inset 0 -1px 0 var(--color-border-strong, rgba(0, 0, 0, 0.15)); } .data-table__head--num { text-align: right; } /* header sort control: the whole label is a button; a caret shows the active column + direction */ .data-table__sort { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 0; border: none; background: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; } .data-table__head--num .data-table__sort { flex-direction: row-reverse; /* keep the caret next to the right-aligned label */ } .data-table__sort:hover, .data-table__sort.is-active { color: var(--color-primary, #3E93EB); } .data-table__sort:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-xs); } .data-table__caret { font-size: 0.7em; } .data-table__row { cursor: pointer; transition: background var(--transition-fast); } .data-table__row:hover { background: var(--color-primary-alpha-04); } .data-table__row:active { background: var(--color-primary-alpha-06); } .data-table__cell { padding: var(--spacing-sm) var(--spacing-md); text-align: left; vertical-align: middle; white-space: nowrap; color: var(--color-text, #0f2747); border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1)); } .data-table__row:last-child .data-table__cell { border-bottom: none; } .data-table__cell--name { font-weight: var(--font-weight-semibold); } .data-table__cell--num { text-align: right; font-variant-numeric: tabular-nums; } /* the name cell's drill-in trigger reads as bold text, not a button chrome */ .data-table__trigger { padding: 0; border: none; background: none; font: inherit; font-weight: var(--font-weight-semibold); color: var(--color-text, #0f2747); text-align: left; cursor: pointer; } .data-table__trigger:hover { color: var(--color-primary, #3E93EB); text-decoration: underline; } .data-table__trigger:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-xs); } /* enrolled-vs-capacity signal: text + a fill dot (colour reinforces the number, which already states the count, so colour is never the sole signal). */ .cap { display: inline-flex; align-items: center; gap: var(--spacing-xs); justify-content: flex-end; } .cap__dot { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full, 50%); flex: 0 0 auto; } .cap__dot--ok { background: var(--color-success, #16a34a); } .cap__dot--near { background: var(--color-warning, #F6B507); } .cap__dot--full { background: var(--color-error, #dc2626); } @media (prefers-reduced-motion: reduce) { .view-toggle__btn, .data-table__row { transition: none; } } /* ===== GCO-177 Lane: offerings ===== */ /* ── Offerings tab (Lane 1 — the spine) ───────────────────────────────────── */ /* list pane stacks its blocks (filter bar / count+cards) with even rhythm */ #offerings-list-pane { display: flex; flex-direction: column; gap: var(--spacing-lg); } .offerings-count { display: flex; align-items: baseline; gap: var(--spacing-xs); /* top spacing comes from the #offerings-list-pane flex gap; keep this tight */ margin: 0 0 var(--spacing-md); font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--color-text); } .offerings-count__num { color: var(--color-primary); } .offerings-count__label { font-weight: var(--font-weight-medium); color: var(--color-text-muted, #5b6b82); } .offering-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--spacing-md); } .offering-card { display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-md); text-align: left; border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1)); /* brand left accent (decorative; status is carried by the badge text) */ border-left: 3px solid var(--color-primary, #3E93EB); border-radius: var(--radius-md); background: var(--color-surface, #fff); color: var(--color-text, #0f2747); cursor: pointer; transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .offering-card:hover { border-color: var(--color-primary, #3E93EB); border-left-color: var(--color-primary-dark, #2A75C4); box-shadow: var(--shadow-md); transform: translateY(-2px); } .offering-card:focus-visible { border-color: var(--color-primary, #3E93EB); outline: 2px solid var(--color-focus); outline-offset: 2px; } .offering-card:active { transform: translateY(0) scale(0.99); } .offering-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-sm); } .offering-card__title { font-weight: var(--font-weight-bold); line-height: 1.25; } .offering-card__course { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted, #5b6b82); } .offering-card__tags, .offering-detail__meta { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); } .offering-card__meta { display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-md); margin-top: var(--spacing-xs); font-size: var(--font-size-xs); color: var(--color-text-muted, #5b6b82); } /* ── drill-in ── */ #offerings-back { margin-bottom: var(--spacing-md); } /* subview stacks its blocks (filter bar / KPI grid / table) with even rhythm */ #offerings-subview { display: flex; flex-direction: column; gap: var(--spacing-lg); } .offering-detail__meta { margin-bottom: var(--spacing-md); } .offerings-subtabs { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin-bottom: var(--spacing-md); border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1)); padding-bottom: var(--spacing-sm); } .offerings-subtabs .is-active { background: var(--color-primary, #3E93EB); color: var(--color-surface, #fff); border-color: var(--color-primary, #3E93EB); } .offerings-subhead { margin: var(--spacing-md) 0 var(--spacing-xs); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-primary-dark, #2A75C4); } .offering-role { text-transform: capitalize; } .offerings-suberror { margin: var(--spacing-sm) 0; color: var(--color-error, #dc2626); } @media (prefers-reduced-motion: reduce) { .offering-card { transition: none; } .offering-card:hover, .offering-card:active { transform: none; } } /* ===== GCO-177 Lane 2: Curriculum (authoring) ===== */ /* list pane stacks its blocks (stats / filter bar / count+cards) with even rhythm */ #curriculum-list-pane { display: flex; flex-direction: column; gap: var(--spacing-lg); } .curriculum-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--spacing-md); } .curriculum-card { display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-md); text-align: left; border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1)); /* brand left accent (decorative; status is carried by the badge text) */ border-left: 3px solid var(--color-primary, #3E93EB); border-radius: var(--radius-md); background: var(--color-surface, #fff); color: var(--color-text, #0f2747); cursor: pointer; transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .curriculum-card:hover { border-color: var(--color-primary, #3E93EB); border-left-color: var(--color-primary-dark, #2A75C4); box-shadow: var(--shadow-md); transform: translateY(-2px); } .curriculum-card:focus-visible { border-color: var(--color-primary, #3E93EB); outline: 2px solid var(--color-focus); outline-offset: 2px; } .curriculum-card:active { transform: translateY(0) scale(0.99); } .curriculum-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-sm); } .curriculum-card__title { font-weight: var(--font-weight-bold); line-height: 1.25; } .curriculum-card__desc { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted, #5b6b82); } .curriculum-card__tags, .curriculum-detail__meta { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); } .curriculum-card__meta { display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-md); margin-top: var(--spacing-xs); font-size: var(--font-size-xs); color: var(--color-text-muted, #5b6b82); } /* ── drill-in: module / item tree ── */ #curriculum-back { margin-bottom: var(--spacing-md); } .curriculum-detail__meta { margin-bottom: var(--spacing-md); } .curriculum-detail__desc { flex-basis: 100%; margin: var(--spacing-xs) 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted, #5b6b82); } /* the tree stacks its modules with even rhythm (no trailing margins) */ .curriculum-tree { display: flex; flex-direction: column; gap: var(--spacing-md); } .curriculum-module { border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1)); border-radius: var(--radius-md); padding: var(--spacing-md); } .curriculum-module__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .curriculum-module__title { font-weight: var(--font-weight-bold); color: var(--color-primary-dark, #2A75C4); } .curriculum-module__count { font-size: var(--font-size-xs); color: var(--color-text-muted, #5b6b82); } .curriculum-module__empty { margin: var(--spacing-xs) 0; font-size: var(--font-size-sm); color: var(--color-text-muted, #5b6b82); } .curriculum-item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); } .curriculum-item { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-sm); padding: var(--spacing-xs) 0; border-top: 1px solid var(--color-overlay-black-faint, rgba(0, 0, 0, 0.06)); } .curriculum-item:first-child { border-top: none; } .curriculum-item__icon { width: 1.1rem; /* icon glyph column (deliberate one-off) */ text-align: center; color: var(--color-primary, #3E93EB); } .curriculum-item__title { font-weight: var(--font-weight-semibold); margin-right: auto; } .curriculum-suberror { margin: var(--spacing-sm) 0; color: var(--color-error, #dc2626); } @media (prefers-reduced-motion: reduce) { .curriculum-card { transition: none; } .curriculum-card:hover, .curriculum-card:active { transform: none; } } /* ── Curriculum authoring (Lane 2 writes: admin/coordinator only) ──────────── */ .curriculum-module__actions, .curriculum-item__actions { display: inline-flex; gap: var(--spacing-xs); margin-left: var(--spacing-sm); } .curriculum-form { display: flex; flex-direction: column; gap: var(--spacing-md); margin-top: var(--spacing-sm); } .curriculum-form__group { display: flex; flex-direction: column; gap: var(--spacing-xs); } .curriculum-form__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text, #0f2747); } .curriculum-form__check { display: inline-flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-sm); } /* ===== GCO-177 Lane: registrations ===== */ /* ── registrations review board (Lane 4) ── */ .report-filter-bar__group--grow { flex: 1 1 12rem; min-width: 8rem; } .dash-btn--sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; } .reg-wl { color: var(--color-text-muted, #5b6b82); font-weight: var(--font-weight-bold); } .reg-pill { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.03em; border: 1px solid var(--color-overlay-black-light, rgba(0, 0, 0, 0.12)); color: var(--color-text, #0f2747); background: var(--color-surface, #fff); } .reg-pill--registered { background: #e0f2fe; border-color: var(--color-primary); } .reg-pill--pre { background: #f1f5f9; } .reg-pill--accepted { background: #dcfce7; border-color: var(--color-success); } .reg-pill--waitlisted { background: #fef3c7; border-color: var(--color-accent-dark); } .reg-pill--declined { background: #fee2e2; border-color: var(--color-error); } /* registrations table: shared .data-table__table component + clickable rows */ .reg-table .data-table__row { cursor: pointer; } .reg-table .data-table__row td { vertical-align: middle; } .reg-name { font-weight: var(--font-weight-semibold); } .reg-table td.reg-row__action { text-align: right; white-space: nowrap; } /* quieter, outline row action so the table is not a column of solid buttons */ .reg-table .reg-row__action .dash-btn { background: transparent; color: var(--color-primary); border: 1px solid var(--color-border); } .reg-table .reg-row__action .dash-btn:hover { background: var(--color-primary-alpha-06); border-color: var(--color-primary); } /* Full-offerings KPI: alert tint when any are full + clickable-to-list affordance */ .stat-card--alert { border-color: var(--color-accent-dark); box-shadow: 0 0 0 1px var(--color-accent-dark) inset; } .stat-card--alert .stat-card__icon { background: var(--color-accent-alpha-12); color: var(--color-accent-dark); } #reg-stat-full-btn { cursor: default; } #reg-stat-full-btn.reg-stat-full--clickable { cursor: pointer; } #reg-stat-full-btn.reg-stat-full--clickable:hover { box-shadow: var(--shadow-card-lift); } #reg-stat-full-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } /* "offerings at capacity" inline panel (toggled from the Full-offerings card) */ .reg-full-list { padding: var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); } .reg-full-list__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); } .reg-full-list__item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spacing-sm); padding: var(--spacing-xs) 0; border-bottom: 1px solid var(--color-border); } .reg-full-list__item:last-child { border-bottom: 0; } .reg-full-list__name { font-weight: var(--font-weight-semibold); } .reg-full-list__meta { color: var(--color-text-muted, #5b6b82); font-size: var(--font-size-sm); } /* status-mix bar: thin stacked breakdown + legend, shown for all programs */ .reg-mix { display: flex; flex-direction: column; gap: var(--spacing-sm); } .reg-mix__track { display: flex; height: 10px; border-radius: var(--radius-full); overflow: hidden; background: var(--color-surface-subtle); } .reg-mix__seg { height: 100%; min-width: 2px; } .reg-mix__legend { display: flex; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-md); font-size: var(--font-size-sm); color: var(--color-text-muted, #5b6b82); } .reg-mix__key { display: inline-flex; align-items: center; gap: var(--spacing-xs); } .reg-mix__dot { width: 10px; height: 10px; border-radius: var(--radius-full); } /* one status palette shared by the mix segments/dots + the table row accents */ .reg-mix__seg--pre, .reg-mix__dot--pre { background: var(--color-text-muted, #5b6b82); } .reg-mix__seg--registered, .reg-mix__dot--registered { background: var(--color-primary); } .reg-mix__seg--accepted, .reg-mix__dot--accepted { background: var(--color-success); } .reg-mix__seg--waitlisted, .reg-mix__dot--waitlisted { background: var(--color-accent-dark); } .reg-mix__seg--declined, .reg-mix__dot--declined { background: var(--color-error); } /* per-offering capacity progress bars: ALL programs (unlike the camp-only charts) */ /* capacity: island cards in an auto-fit grid, each holding that island's compact per-offering bars. The island count is fixed (3) while offerings grow, so the grid bounds the block's height instead of adding a full-width row per offering. */ .reg-capgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-lg); align-items: start; } .reg-capgroup { display: flex; flex-direction: column; gap: var(--spacing-sm); min-width: 0; } .reg-capgroup__title { margin: 0; padding-bottom: var(--spacing-xs); border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted, #5b6b82); } .reg-capbar { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .reg-capbar__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-xs); } .reg-capbar__title { min-width: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); /* long offering titles wrap to at most 2 lines instead of stretching the card */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Visible on "All programs" only (see showProgram in dashboard-registrations.js), where a camp and an afterschool offering can otherwise share an identical trimmed title. Muted so it reads as context, not the headline. */ .reg-capbar__program { font-weight: var(--font-weight-normal); color: var(--color-text-muted, #5b6b82); } .reg-capbar__pct { flex: none; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } .reg-capbar__track { height: 8px; border-radius: var(--radius-full); overflow: hidden; background: var(--color-surface-subtle); } .reg-capbar__fill { display: block; height: 100%; min-width: 2px; transition: width 0.3s ease; } .reg-capbar__fill--ok { background: var(--color-success); } /* NOT --color-accent-dark (#C7910A): against the track (#f4f7fb) that is only 2.61:1, below the 3:1 WCAG 1.4.11 non-text minimum for a graphical indicator. Same hue, darkened to 3.07:1. Local override -- the shared token is unchanged for every other use (e.g. the WL text, which has its own separate override). */ .reg-capbar__fill--warn { background: #B78509; } .reg-capbar__fill--full { background: var(--color-error); } /* NOT --color-border: that's a semi-transparent rgba(31,41,55,0.10) meant to sit on --color-surface (white), not on this track's --color-surface-subtle -- the two nearly-identical light grays composited to 1.21:1, so a "no capacity set" bar was functionally invisible next to its own track. Opaque neutral gray, 3.03:1 against the track. */ .reg-capbar__fill--nocap { background: #8E8E96; } .reg-capbar__meta { display: flex; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-xs, 0.78rem); color: var(--color-text-muted, #5b6b82); } /* NOT --color-accent-dark (#C7910A): as 12px text on white that is 2.8:1, and WCAG AA needs 4.5:1 for small text. Same hue, darkened to 4.62:1. The bar FILL keeps the lighter accent -- graphics only need 3:1. */ .reg-capbar__wl { color: #976E08; font-weight: var(--font-weight-semibold); } /* table: sticky header, checkbox column, status-colored row accent, offering cell */ #reg-table .data-table__wrapper { max-height: 70vh; overflow: auto; } .reg-table thead th { position: sticky; top: 0; z-index: 1; background: var(--color-surface-subtle); } .reg-col--check { width: 1%; white-space: nowrap; text-align: center; } .reg-table .reg-select, .reg-table #reg-select-all { cursor: pointer; } .reg-cell--offering { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* status-colored left accent on the row (border on the first cell renders reliably with border-collapse, unlike a box-shadow on the ) */ .reg-table tbody td:first-child { border-left: 3px solid transparent; } .reg-row--pre td:first-child { border-left-color: var(--color-text-muted, #5b6b82); } .reg-row--registered td:first-child { border-left-color: var(--color-primary); } .reg-row--accepted td:first-child { border-left-color: var(--color-success); } .reg-row--waitlisted td:first-child { border-left-color: var(--color-accent-dark); } .reg-row--declined td:first-child { border-left-color: var(--color-error); } /* bulk review bar (appears when rows are selected) */ .reg-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm) var(--spacing-md); margin-bottom: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-primary-alpha-06); } .reg-bulk-bar__count { font-weight: var(--font-weight-semibold); } .reg-bulk-bar__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); } .reg-bulk-reason { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); flex: 1 1 100%; } .reg-bulk-reason .dash-select { flex: 1 1 12rem; } /* review drawer (right slide-over; premium, converged with .people-drawer) */ .reg-drawer { position: fixed; inset: 0; z-index: 60; } .reg-drawer[hidden] { display: none; } .reg-drawer__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); } .reg-drawer__panel { position: absolute; top: 0; right: 0; width: min(30rem, 100%); height: 100%; overflow-y: auto; overflow-x: hidden; background: var(--color-surface, #fff); box-shadow: var(--shadow-lg); padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl); animation: reg-drawer-in var(--transition-fast); } @keyframes reg-drawer-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } } /* header: initials avatar + identity (name over status badges) + close */ .reg-drawer__header { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--color-border); } .reg-drawer__avatar { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--color-primary-alpha-12); color: var(--color-primary-dark); font-size: var(--font-size-md); font-weight: var(--font-weight-bold); letter-spacing: 0.02em; } .reg-drawer__identity { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--spacing-xs); } .reg-drawer__title { margin: 0; font-size: var(--font-size-md); overflow-wrap: anywhere; } .reg-drawer__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); } .reg-drawer__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-text-muted, #5b6b82); cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); } .reg-drawer__close:hover { background: var(--color-surface-subtle); color: var(--color-text); } .reg-drawer__close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } /* sections: even rhythm, hairline dividers between them */ .reg-panel { padding: var(--spacing-md) 0; border-top: 1px solid var(--color-border); } .reg-drawer__body > .reg-panel:first-child { border-top: 0; padding-top: 0; } .reg-panel__title { margin: 0 0 var(--spacing-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted, #5b6b82); } .reg-panel__empty, .reg-panel__note, .reg-panel__keys { margin: var(--spacing-xs) 0; font-size: var(--font-size-sm); color: var(--color-text-muted, #5b6b82); } /* health/medical deferred note + possible-match: subtle bordered cards */ .reg-panel--deferred, .reg-panel--match { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); padding: var(--spacing-md); } .reg-panel--deferred .reg-panel__title, .reg-panel--match .reg-panel__title { margin-top: 0; } .reg-panel--match .reg-match__opt { display: flex; gap: var(--spacing-sm); align-items: flex-start; padding: var(--spacing-xs) 0; font-size: var(--font-size-sm); } /* danger zone: self-contained red card (defined here so it wins the cascade over dashboard-registration.css and keeps even padding, no clip) */ .reg-panel--danger { margin-top: var(--spacing-md); border: 1px solid var(--color-danger); border-radius: var(--radius-md); background: var(--color-danger-soft); padding: var(--spacing-md); } .reg-panel--danger .reg-panel__title { margin-top: 0; color: var(--color-danger); } /* label/value rows */ .reg-field { display: flex; justify-content: space-between; gap: var(--spacing-md); padding: var(--spacing-xs) 0; font-size: var(--font-size-sm); } .reg-field__label { flex-shrink: 0; color: var(--color-text-muted, #5b6b82); } .reg-field__value { min-width: 0; font-weight: var(--font-weight-semibold); text-align: right; overflow-wrap: anywhere; } .reg-field__sub { font-weight: var(--font-weight-normal); color: var(--color-text-muted, #5b6b82); } /* contacts render as clean cards */ .reg-contacts { display: flex; flex-direction: column; gap: var(--spacing-sm); } .reg-contact { display: flex; flex-direction: column; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); } .reg-contact__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-xs) var(--spacing-sm); } .reg-contact__name { font-weight: var(--font-weight-semibold); } .reg-contact__meta { font-size: var(--font-size-xs); color: var(--color-text-muted, #5b6b82); text-transform: capitalize; } .reg-contact__email { display: inline-flex; align-items: center; gap: var(--spacing-xs); font-size: var(--font-size-sm); color: var(--color-primary-dark); text-decoration: none; overflow-wrap: anywhere; } .reg-contact__email i { color: var(--color-text-muted, #5b6b82); } .reg-contact__email:hover { text-decoration: underline; } .reg-contact__email:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); } /* action footer: divider + evenly filled tabs */ .reg-actions { margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border); } .reg-actions__tabs { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); flex-wrap: wrap; } .reg-actions__tabs .dash-btn { flex: 1 1 auto; } .reg-actions__form { display: flex; flex-direction: column; gap: var(--spacing-sm); } /* ===== GCO-177 Lane: people ===== */ /* ── People tab (Lane 5: users + roles) ── */ /* Whole row is an Edit trigger for mouse (keyboard uses the name button). */ .people-table tbody tr { cursor: pointer; } .people-table th button.people-sort { border: 0; background: none; font: inherit; font-weight: var(--font-weight-bold); color: var(--color-text, #0f2747); cursor: pointer; padding: 0; } .people-table th button.people-sort:hover { color: var(--color-primary); } .people-table th button.people-sort:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .people-sort__caret { font-size: 0.7rem; color: var(--color-text-muted, #5b6b82); } /* Roles/actions are s: they MUST stay table-cells (display:flex on a td breaks it out of table layout -- row borders/heights drift and flex-stretch inflates the chips). Chip spacing comes from margins instead of flex gap. */ .people-table th, .people-table td { vertical-align: middle; } .people-chip { display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.4rem; border-radius: 0.6rem; font-size: 0.68rem; font-weight: var(--font-weight-bold); text-transform: capitalize; white-space: nowrap; } .people-roles .people-chip { margin: 0.1rem 0.3rem 0.1rem 0; } .people-chip--global { background: var(--color-primary, #3E93EB); color: var(--color-text-inverse); } .people-chip--offering { background: var(--color-surface, #fff); color: var(--color-text-muted, #5b6b82); border: 1px solid var(--color-overlay-black-light, rgba(0, 0, 0, 0.18)); } .people-chip--staff { background: var(--color-accent-light, #FCC940); color: var(--color-accent-dark, #C7910A); } .people-chip--synthetic { background: var(--color-surface-subtle, #f1f4f9); color: var(--color-text-muted, #5b6b82); text-transform: lowercase; } /* honest "cannot sign in yet" marker: small + muted, quieter than the status badge */ .people-chip--nologin { background: var(--color-surface-subtle, #f1f4f9); color: var(--color-text-muted, #5b6b82); text-transform: none; } .people-status--active { background: var(--color-success); color: var(--color-text-inverse); } .people-status--suspended { background: var(--color-error); color: var(--color-text-inverse); } .people-status--pending { background: var(--color-accent-dark); color: var(--color-text-inverse); } .people-status--inactive { background: #64748b; color: var(--color-text-inverse); } .people-status--deleted { background: var(--color-text); color: var(--color-text-inverse); } .people-actions { white-space: nowrap; } .people-actions .dash-btn--icon + .dash-btn--icon { margin-left: var(--spacing-xs); } /* Quiet row-action icons (People-scoped): the shared filled button chrome is too heavy repeated on every row. Muted glyphs; color arrives on hover. */ .people-actions .dash-btn--icon { background: transparent; border-color: transparent; box-shadow: none; color: var(--color-text-muted, #5b6b82); } .people-actions .dash-btn--icon:hover { background: var(--color-primary-alpha-06); color: var(--color-primary); } .people-actions .dash-btn--icon.dash-btn--danger:hover { background: transparent; color: var(--color-error); } /* ── person detail drawer (right slide-over; mirrors .reg-drawer, tokenized) ── */ .people-drawer { position: fixed; inset: 0; z-index: 60; } .people-drawer[hidden] { display: none; } /* no overlay token at this depth in base.css; literal matches .reg-drawer__scrim */ .people-drawer__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); } .people-drawer__panel { position: absolute; top: 0; right: 0; width: min(30rem, 100%); height: 100%; overflow-y: auto; background: var(--color-surface, #fff); box-shadow: var(--shadow-lg); padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xl); animation: people-drawer-in var(--transition-fast); } @keyframes people-drawer-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } } .people-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .people-drawer__title { margin: 0; font-size: var(--font-size-md); } .people-drawer__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); margin-bottom: var(--spacing-sm); } .people-drawer__section { padding: 0.75rem 0; border-top: 1px solid var(--color-overlay-black-faint, rgba(0, 0, 0, 0.08)); } .people-drawer__section-title { margin: 0 0 0.4rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted, #5b6b82); } .people-drawer__field { display: flex; justify-content: space-between; gap: var(--spacing-md); padding: 0.2rem 0; font-size: 0.88rem; } .people-drawer__field-label { color: var(--color-text-muted, #5b6b82); } .people-drawer__field-value { font-weight: var(--font-weight-semibold); text-align: right; overflow-wrap: anywhere; } .people-drawer__row { display: flex; flex-direction: column; padding: 0.35rem 0; border-bottom: 1px solid var(--color-overlay-black-faint, rgba(0, 0, 0, 0.06)); } .people-drawer__row:last-child { border-bottom: 0; } .people-drawer__row-name { font-weight: var(--font-weight-semibold); } .people-drawer__row-meta { font-size: 0.78rem; color: var(--color-text-muted, #5b6b82); } .people-drawer__empty { margin: 0.25rem 0; font-size: 0.82rem; color: var(--color-text-muted, #5b6b82); } .people-drawer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); padding-top: var(--spacing-md); } /* saved-views control: select + save/delete icons in one row */ .people-views { display: flex; align-items: center; gap: var(--spacing-xs); } /* pager under the table: summary text left, Prev/Next right */ .people-pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-sm); margin-top: var(--spacing-md); } .people-pager__summary { margin-right: auto; font-size: var(--font-size-sm); color: var(--color-text-muted, #5b6b82); } /* create / edit modal */ .people-modal { max-width: 30rem; } .people-form { display: flex; flex-direction: column; gap: 0.7rem; margin: var(--spacing-sm) 0 var(--spacing-md); } .people-field { display: flex; flex-direction: column; gap: var(--spacing-xs); } .people-field__label { font-size: 0.78rem; font-weight: var(--font-weight-bold); color: var(--color-text-muted, #5b6b82); } .people-field__input { width: 100%; } .people-rolegrid { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .people-rolechip { padding: 0.25rem 0.6rem; border-radius: 0.6rem; border: 1px solid var(--color-overlay-black-light, rgba(0, 0, 0, 0.18)); background: var(--color-surface, #fff); color: var(--color-text, #0f2747); font: inherit; font-size: 0.78rem; font-weight: var(--font-weight-bold); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .people-rolechip:hover { border-color: var(--color-primary); color: var(--color-primary); } .people-rolechip:active { background: var(--color-primary-alpha-06); } .people-rolechip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .people-rolechip[aria-pressed="true"] { background: var(--color-primary, #3E93EB); color: var(--color-text-inverse); border-color: var(--color-primary, #3E93EB); } /* Keep the pressed chip's label legible on its primary fill while hovering. */ .people-rolechip[aria-pressed="true"]:hover { color: var(--color-text-inverse); } .people-form__error { margin: 0; color: var(--color-error); font-size: 0.82rem; } /* ── Families (Lane 6: guardians) ─────────────────────────────────────────── */ .families-link { color: var(--color-primary, #3E93EB); text-decoration: none; } .families-link:hover, .families-link:focus { text-decoration: underline; } .families-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } /* Real table-cell alignment across the whole row (the shared .data-table td default is vertical-align: top; mirror the People fix so name/email/phone and the wrapping student chips all center-align in tall rows). */ .families-table th, .families-table td { vertical-align: middle; } .families-table tbody tr { cursor: pointer; } .families-recipient-count { font-size: 0.8rem; color: var(--color-text-muted, #5b6b82); align-self: center; } .families-chip { display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.4rem; border-radius: 0.6rem; font-size: 0.68rem; font-weight: var(--font-weight-bold); white-space: nowrap; text-transform: capitalize; } /* Chip grid inside the Students cell: flush-left first chip + a right gap, plus a small vertical margin so wrapped chip rows breathe (mirrors .people-roles .people-chip; the base margin-left above is for chips that trail inline text, e.g. the siblings chip after the guardian name). */ .families-students .families-chip { margin: 0.1rem 0.3rem 0.1rem 0; } .families-chip--siblings { background: var(--color-accent-light, #FCC940); color: var(--color-accent-dark, #C7910A); } .families-chip--student { background: var(--color-surface, #fff); color: var(--color-text-muted, #5b6b82); border: 1px solid var(--color-overlay-black-light, rgba(0, 0, 0, 0.18)); } .families-chip--student-emergency { background: var(--color-surface-subtle, #f1f4f9); color: var(--color-text-muted, #5b6b82); border: 1px dashed var(--color-overlay-black-light, rgba(0, 0, 0, 0.18)); } .families-chip--relationship { background: var(--color-surface-subtle, #f1f4f9); color: var(--color-text-muted, #5b6b82); } .families-chip--primary { background: var(--color-primary, #3E93EB); color: var(--color-text-inverse); text-transform: lowercase; } .families-chip--emergency { background: var(--color-surface, #fff); color: var(--color-text-muted, #5b6b82); border: 1px solid var(--color-overlay-black-light, rgba(0, 0, 0, 0.18)); text-transform: lowercase; } /* ── per-guardian detail dialog (premium layout) ── */ .families-drawer { max-width: 32rem; } /* header: initials avatar + identity (name over a contact row) */ .families-drawer__header { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--color-border); } .families-drawer__avatar { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--color-primary-alpha-12); color: var(--color-primary-dark); font-size: var(--font-size-md); font-weight: var(--font-weight-bold); letter-spacing: 0.02em; } .families-drawer__identity { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); } /* the shared .dialog__title carries a bottom margin; the header flex column owns the spacing here, so zero it. */ .families-drawer__title { margin-bottom: 0; } .families-drawer__contact { display: flex; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-md); margin: 0; color: var(--color-text-muted, #5b6b82); font-size: var(--font-size-sm); } .families-drawer__contact-item { display: inline-flex; align-items: center; gap: var(--spacing-xs); overflow-wrap: anywhere; } .families-drawer__contact-item i { color: var(--color-text-muted, #5b6b82); } .families-drawer__subhead { margin: 0 0 var(--spacing-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted, #5b6b82); } .families-drawer__students { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); } /* each linked student reads as a clean card: identity left, actions right */ .families-drawer__student { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); } .families-drawer__student-main { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); } .families-drawer__student-name { font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; } .families-drawer__student-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); } .families-drawer__student-tags .families-chip { margin: 0; } /* ── Families authoring (Lane 6 writes: admin only) ───────────────────────── */ .families-drawer__student-actions { display: inline-flex; flex-shrink: 0; gap: var(--spacing-xs); } /* footer divider so the guardian-level actions read as distinct from the list */ .families-drawer .dialog__actions { margin-top: var(--spacing-lg); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border); } .families-form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: var(--spacing-sm); } .families-form__group { display: flex; flex-direction: column; gap: var(--spacing-xs); } .families-form__label { font-size: 0.82rem; font-weight: var(--font-weight-semibold); color: var(--color-text, #0f2747); } .families-form__check { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; } /* ===== GCO-177 Lane 8: reports & analytics ===== */ /* ── sub-view switcher (Reports | Performance | Statistics) ── */ .analytics-subtabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem; border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1)); padding-bottom: 0.6rem; } .analytics-subtabs .is-active { background: var(--color-primary, #3E93EB); color: #fff; border-color: var(--color-primary, #3E93EB); } /* ── chart cards (Chart.js canvases live in fixed-height wrappers) ── */ .analytics-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.85rem; margin: 0.85rem 0; } .analytics-chart-card { padding: 0.85rem 0.95rem; border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1)); border-radius: 0.6rem; background: var(--color-surface, #fff); } .analytics-chart-card__title { margin: 0 0 0.6rem; font-size: 0.85rem; font-weight: 700; color: var(--color-primary-dark, #2A75C4); } /* Chart.js needs a sized parent (responsive + maintainAspectRatio:false). */ .analytics-chart-card__canvas { position: relative; height: 240px; } /* ── tables + status pills ── */ .analytics-table-block { margin-top: 1rem; } .analytics-table-block__title { margin: 0 0 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--color-primary-dark, #2A75C4); } .analytics-status { display: inline-block; padding: 0.1rem 0.5rem; border-radius: var(--radius-pill, 999px); font-size: 0.75rem; font-weight: 600; } .analytics-status--good { background: var(--color-success-bg, #dcfce7); color: var(--color-success-text, #166534); } .analytics-status--warning { background: var(--color-warning-bg, #fef9c3); color: var(--color-warning-text, #854d0e); } .analytics-status--poor { background: var(--color-error-bg, #fee2e2); color: var(--color-error-text, #991b1b); } /* ── SCORM "not applicable" panel ── */ .analytics-na-panel { margin-top: 1rem; padding: 0.85rem 0.95rem; border: 1px dashed var(--color-border, rgba(0, 0, 0, 0.18)); border-radius: 0.6rem; background: var(--color-surface-subtle, #f7f9fc); } .analytics-na-panel__title { margin: 0 0 0.35rem; font-weight: 700; color: var(--color-text, #0f2747); } .analytics-na-panel__text { margin: 0; font-size: 0.85rem; color: var(--color-text-muted, #5b6b82); } .report-filter-bar__note { margin: 0; flex: 1 1 16rem; font-size: 0.82rem; color: var(--color-text-muted, #5b6b82); } /* ── GCO-177 LANE 9: Catalog & Settings (admin-only) ─────────────────────── */ .catalog-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; } .catalog-tab { padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--color-border, rgba(0, 0, 0, 0.14)); background: var(--color-surface, #fff); color: var(--color-text, #0f2747); font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; } .catalog-tab.is-active { background: var(--color-primary, #3E93EB); border-color: var(--color-primary, #3E93EB); color: #fff; } .catalog-hint { margin: 0 0 0.85rem; color: var(--color-text-muted, #5b6b82); font-size: 0.84rem; } .catalog-actions { text-align: right; white-space: nowrap; } .catalog-badge { text-transform: capitalize; } .catalog-badge--course, .catalog-badge--active, .catalog-badge--current { background: rgba(22, 163, 74, 0.14); color: #15803d; } .catalog-badge--event, .catalog-badge--draft { background: rgba(62, 147, 235, 0.16); color: #1d4ed8; } .catalog-badge--inactive, .catalog-badge--retired { background: rgba(100, 116, 139, 0.18); color: #475569; } .catalog-field { display: flex; flex-direction: column; gap: 0.25rem; } .catalog-field__label { font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted, #5b6b82); } .catalog-field__input, .catalog-field__textarea { width: 100%; } .catalog-field__textarea { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.82rem; } .catalog-field__checkbox { align-self: flex-start; width: 1.1rem; height: 1.1rem; } .catalog-field__input.is-readonly, .is-readonly { background: var(--color-surface-muted, #f1f5f9); color: var(--color-text-muted, #5b6b82); } .catalog-form { display: flex; flex-direction: column; gap: 0.7rem; margin: 0.5rem 0 1rem; } .catalog-form__error { margin: 0; color: #dc2626; font-size: 0.82rem; } /* ── GCO-177 Lane A: self-service "My Account" ───────────────────────────── The sidebar-footer user menu is now a button (opens the My Account panel for every role) + the panel's read-only identity / per-offering roles / name form / disabled password affordance. Reuses the .dialog + .dash-btn primitives. */ /* Sidebar footer user button: reset native button chrome, keep the row layout. */ .dashboard__user--button { width: 100%; padding: 0.35rem 0.45rem; border: 0; border-radius: var(--radius-md, 8px); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .dashboard__user--button:hover { background: rgba(255, 255, 255, 0.08); } .dashboard__user--button:focus-visible { outline: 2px solid var(--color-text-inverse, #fff); outline-offset: 2px; } .dashboard__user-cog { margin-left: auto; flex-shrink: 0; color: var(--color-sidebar-text-dim, #9fb0c8); font-size: var(--font-size-sm, 0.875rem); } /* Panel layout (sits inside .dialog__panel). */ .account-panel { max-width: 520px; width: 100%; } .account-section { margin-top: 1.1rem; } .account-section:first-of-type { margin-top: 0.5rem; } .account-section__heading { margin: 0 0 0.5rem; font-size: 0.78rem; font-weight: var(--font-weight-semibold, 600); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted, #5b6b82); } /* Read-only identity definition list. */ .account-detail { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: 0.35rem 0.9rem; margin: 0; } .account-detail__term { margin: 0; font-size: 0.85rem; color: var(--color-text-muted, #5b6b82); } .account-detail__desc { margin: 0; font-size: 0.9rem; color: var(--color-text, #1f2937); word-break: break-word; } .account-detail__desc--muted { color: var(--color-text-muted, #5b6b82); } /* Per-offering roles list. */ .account-roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .account-roles__item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0.6rem; border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius-md, 8px); background: var(--color-surface-muted, #f8fafc); } .account-roles__title { font-size: 0.88rem; color: var(--color-text, #1f2937); } .account-roles__badge { flex-shrink: 0; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e2e8f0); font-size: 0.74rem; font-weight: var(--font-weight-semibold, 600); color: var(--color-text-muted, #5b6b82); } /* Editable name form. */ .account-form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.4rem; } .account-form__group { display: flex; flex-direction: column; gap: 0.3rem; } .account-form__label { font-size: 0.82rem; font-weight: var(--font-weight-medium, 500); color: var(--color-text, #1f2937); } .account-form__input:disabled { background: var(--color-surface-muted, #f1f5f9); color: var(--color-text-muted, #5b6b82); cursor: not-allowed; } .account-form__error { margin: 0; color: #dc2626; font-size: 0.82rem; } .account-form__note { margin: 0; font-size: 0.8rem; color: var(--color-text-muted, #5b6b82); } .account-form__note--muted { font-style: italic; } /* ── Email tab (GCO-177 Lane 7) ───────────────────────────────────────────── Two-column layout: the template library (left) + the composer/preview/send (right). Collapses to a single column on narrow viewports. BEM kebab-case; reuses the section-card + dash-table + report-filter-bar primitives. */ .email-layout { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: var(--spacing-md, 16px); align-items: start; } @media (max-width: 880px) { .email-layout { grid-template-columns: 1fr; } } .email-compose { display: flex; flex-direction: column; gap: var(--spacing-md, 16px); } .report-filter-bar--inline { margin: 0 0 0.75rem; } .email-template-list { display: flex; flex-direction: column; gap: var(--spacing-sm, 8px); } .email-template-item { display: flex; flex-direction: column; gap: var(--spacing-xs, 4px); width: 100%; padding: 0.65rem 0.75rem; text-align: left; border: 1px solid var(--color-overlay-black-light, rgba(0, 0, 0, 0.1)); border-radius: 0.5rem; background: var(--color-surface, #fff); cursor: pointer; transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease), transform var(--transition-fast, 150ms ease); } .email-template-item:hover { border-color: var(--color-primary, #3E93EB); box-shadow: var(--shadow-card-lift, 0 10px 15px -3px rgba(0, 0, 0, 0.1)); transform: translateY(-1px); } .email-template-item:active { transform: translateY(0); } .email-template-item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .email-template-item { transition: none; } .email-template-item:hover, .email-template-item:active { transform: none; } } .email-template-item.is-selected { border-color: var(--color-primary, #3E93EB); box-shadow: 0 0 0 2px rgba(62, 147, 235, 0.18); } .email-template-item__top { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm, 8px); } .email-template-item__name { font-weight: var(--font-weight-bold, 700); color: var(--color-text, #0f2747); } .email-template-item__meta { font-size: 0.78rem; color: var(--color-text-muted, #5b6b82); } .email-template-item__subject { font-size: 0.82rem; color: var(--color-text-muted, #5b6b82); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .email-empty { margin: 0.5rem 0; color: var(--color-text-muted, #5b6b82); font-size: 0.88rem; } /* Compose mode toggle: send a saved template vs compose a one-off email. */ .email-mode { display: flex; gap: 0.4rem; margin: 0 0 var(--spacing-md, 16px); } .email-mode__btn { flex: 1 1 0; padding: var(--spacing-sm, 8px) 0.75rem; border: 1px solid var(--color-overlay-black-light, rgba(0, 0, 0, 0.1)); border-radius: 0.5rem; background: var(--color-surface, #fff); color: var(--color-text-muted, #5b6b82); font-size: 0.88rem; font-weight: var(--font-weight-semibold, 600); cursor: pointer; transition: border-color var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease), transform var(--transition-fast, 150ms ease); } .email-mode__btn:not(.is-active):hover { border-color: var(--color-primary, #3E93EB); color: var(--color-text, #0f2747); } .email-mode__btn:active { transform: translateY(1px); } .email-mode__btn.is-active { border-color: transparent; background: var(--gradient-primary, linear-gradient(135deg, #3E93EB, #48D0D4)); color: #fff; } .email-mode__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .email-mode__btn { transition: none; } .email-mode__btn:active { transform: none; } } /* Sign-off row: checkbox + optional closing line. */ .email-check__label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: var(--color-text, #0f2747); } .email-field { display: flex; flex-direction: column; gap: 0.3rem; margin: 0 0 var(--spacing-md, 16px); } .email-subject { width: 100%; } .email-blocks { border: 1px solid var(--color-overlay-black-light, rgba(0, 0, 0, 0.1)); border-radius: 0.5rem; padding: 0.75rem; margin: 0 0 var(--spacing-md, 16px); } .email-blocks__legend { padding: 0 0.4rem; font-size: 0.82rem; font-weight: var(--font-weight-bold, 700); color: var(--color-text-muted, #5b6b82); } .email-block-palette { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0; list-style: none; } .email-block-palette__row { display: flex; align-items: center; gap: var(--spacing-sm, 8px); font-size: 0.88rem; color: var(--color-text, #0f2747); } .email-block-palette__label { text-transform: capitalize; } .email-block-dot { flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-primary, #3E93EB); } /* Block-type icon chip in the saved-template block list. */ .email-block-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: var(--radius-sm, 6px); background: rgba(62, 147, 235, 0.1); color: var(--color-primary, #3E93EB); font-size: 0.72rem; } .email-preview { width: 100%; height: 420px; border: 1px solid var(--color-overlay-black-light, rgba(0, 0, 0, 0.1)); border-radius: 0.5rem; background: var(--color-surface-muted, #f4f6f9); } /* Compose workbench: editor + live preview. Stacked by default (the familiar layout); the temporary A/B toggle adds .is-side for a sticky side-by-side. */ .email-workbench { display: block; } .email-workbench.is-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; } .email-workbench.is-side .email-preview-wrap { position: sticky; top: 1rem; margin: 0; } @media (max-width: 900px) { .email-workbench.is-side { grid-template-columns: 1fr; } .email-workbench.is-side .email-preview-wrap { position: static; } } /* Side-by-side gives the composer full width: collapse the template library. */ .email-layout.is-compose-solo { grid-template-columns: 1fr; } .email-layout.is-compose-solo .email-library { display: none; } .email-preview-wrap { margin: 0 0 var(--spacing-md, 16px); } /* Inbox-style frame around the preview (From + live subject, then the email). */ .email-preview-frame { border: 1px solid var(--color-border, rgba(31, 41, 55, 0.1)); border-radius: var(--radius-md, 12px); overflow: hidden; background: var(--color-surface, #fff); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08)); } .email-preview-frame__bar { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0.85rem; background: var(--color-surface-subtle, #f4f7fb); border-bottom: 1px solid var(--color-border, rgba(31, 41, 55, 0.1)); } .email-preview-frame__from { font-size: 0.78rem; font-weight: var(--font-weight-bold, 700); color: var(--color-text, #1f2937); } .email-preview-frame__from i { color: var(--color-primary, #3E93EB); } .email-preview-frame__subject { font-size: 0.82rem; color: var(--color-text-light, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .email-preview-frame .email-preview { display: block; border: 0; border-radius: 0; } /* Preset cards (replace the old dropdown). */ .email-presets { display: flex; flex-wrap: wrap; gap: var(--spacing-sm, 8px); } .email-preset { display: flex; align-items: flex-start; gap: 0.55rem; flex: 1 1 12rem; min-width: 10.5rem; padding: 0.6rem 0.7rem; text-align: left; border: 1px solid var(--color-border, rgba(31, 41, 55, 0.1)); border-radius: var(--radius-md, 12px); background: var(--color-surface, #fff); cursor: pointer; transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease), transform var(--transition-fast, 150ms ease); } .email-preset:hover { border-color: var(--color-primary, #3E93EB); box-shadow: var(--shadow-card-lift, 0 10px 15px -3px rgba(0, 0, 0, 0.1)); transform: translateY(-1px); } .email-preset:active { transform: translateY(0); } .email-preset.is-active { border-color: var(--color-primary, #3E93EB); box-shadow: 0 0 0 2px rgba(62, 147, 235, 0.18); } .email-preset:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .email-preset__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-sm, 6px); background: rgba(62, 147, 235, 0.1); color: var(--color-primary, #3E93EB); font-size: 0.9rem; } .email-preset__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .email-preset__name { font-weight: var(--font-weight-bold, 700); font-size: 0.88rem; color: var(--color-text, #1f2937); } .email-preset__blurb { font-size: 0.76rem; color: var(--color-text-light, #6b7280); } /* Field groups (Message / Button / Sign-off) for a clear hierarchy. */ .email-group { border: 1px solid var(--color-border, rgba(31, 41, 55, 0.1)); border-radius: var(--radius-md, 12px); padding: 0.85rem 0.9rem 0.35rem; margin: 0 0 var(--spacing-md, 16px); } .email-group__legend { padding: 0 0.4rem; font-size: 0.78rem; font-weight: var(--font-weight-bold, 700); text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-light, #6b7280); } .email-opt { display: inline-block; margin-left: 0.3rem; padding: 0.02rem 0.4rem; border-radius: var(--radius-pill, 999px); background: var(--color-surface-subtle, #f4f7fb); font-size: 0.66rem; font-weight: var(--font-weight-semibold, 600); text-transform: none; letter-spacing: 0; color: var(--color-text-light, #6b7280); } /* Recipient summary: count chip + a review expander. */ .email-recipients__summary { flex-direction: row; align-items: center; gap: var(--spacing-sm, 8px); flex-wrap: wrap; } .email-recipient-count.is-loading::before { content: ""; width: 0.7rem; height: 0.7rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: email-spin 0.7s linear infinite; } @keyframes email-spin { to { transform: rotate(360deg); } } .email-linkbtn { padding: 0; border: 0; background: none; color: var(--color-primary, #3E93EB); font-size: 0.8rem; font-weight: var(--font-weight-semibold, 600); text-decoration: underline; cursor: pointer; } .email-linkbtn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .email-recipient-list { margin: 0.5rem 0 0; max-height: 12rem; overflow-y: auto; border: 1px solid var(--color-border, rgba(31, 41, 55, 0.1)); border-radius: var(--radius-sm, 6px); } .email-recipient-list__row { display: flex; justify-content: space-between; gap: var(--spacing-md, 16px); padding: 0.35rem 0.65rem; font-size: 0.82rem; border-bottom: 1px solid var(--color-surface-subtle, #f4f7fb); } .email-recipient-list__row:last-child { border-bottom: 0; } .email-recipient-list__name { font-weight: var(--font-weight-semibold, 600); color: var(--color-text, #1f2937); } .email-recipient-list__email { color: var(--color-text-light, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Info banner (dev-mode notice -- clear, not a muted footnote). */ .email-banner { display: flex; align-items: center; gap: var(--spacing-sm, 8px); margin: 0.75rem 0 0; padding: 0.55rem 0.75rem; border-radius: var(--radius-sm, 6px); font-size: 0.82rem; } .email-banner--info { background: rgba(62, 147, 235, 0.08); border: 1px solid rgba(62, 147, 235, 0.2); color: var(--color-text, #1f2937); } .email-banner--info i { color: var(--color-primary, #3E93EB); } /* Live-send caution (prod): emails really go out. */ .email-banner--warn { background: rgba(246, 181, 7, 0.12); border: 1px solid rgba(246, 181, 7, 0.4); color: var(--color-text, #1f2937); font-weight: var(--font-weight-semibold, 600); } .email-banner--warn i { color: var(--color-accent, #F6B507); } @media (prefers-reduced-motion: reduce) { .email-preset { transition: none; } .email-preset:hover, .email-preset:active { transform: none; } .email-recipient-count.is-loading::before { animation: none; } } .email-recipients { align-items: end; margin: 0; } .email-recipient-count { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.7rem; border-radius: var(--radius-pill, 999px); background: rgba(62, 147, 235, 0.12); color: var(--color-text, #1f2937); font-size: 0.82rem; font-weight: var(--font-weight-bold, 700); } .email-send-note { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--color-text-muted, #5b6b82); } .email-badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: var(--font-weight-bold, 700); text-transform: capitalize; } .email-badge--active, .email-badge--sent, .email-badge--delivered { background: rgba(16, 185, 129, 0.12); color: #047857; } .email-badge--draft { background: var(--color-surface-muted, #f1f5f9); color: var(--color-text-muted, #5b6b82); } /* In-flight recipient during an async blast (live progress in the result table). */ .email-badge--queued, .email-badge--sending { background: rgba(246, 181, 7, 0.14); color: #92600a; } .email-badge--archived { background: rgba(100, 116, 139, 0.12); color: #475569; } .email-badge--failed, .email-badge--bounced, .email-badge--complained { background: rgba(220, 38, 38, 0.12); color: #b91c1c; } .email-result { width: 100%; } /* ── Email authoring (Wave-4 W4-2): template + block CRUD, recipient organizer ─ */ .email-author-actions, .email-adhoc-actions { display: inline-flex; gap: 0.4rem; } .email-block-tools { margin-left: auto; display: inline-flex; gap: 0.2rem; } .email-block-tool { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--color-border, rgba(31, 41, 55, 0.1)); background: var(--color-surface, #fff); color: var(--color-text-light, #6b7280); border-radius: var(--radius-sm, 6px); font-size: 0.78rem; line-height: 1; cursor: pointer; } .email-block-tool:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; } .email-block-tool:hover:not(:disabled) { background: var(--color-surface-muted, #f1f5f9); color: var(--color-text, #0f2747); } .email-block-tool:disabled { opacity: 0.4; cursor: not-allowed; } .email-organizer { border: 1px solid var(--color-overlay-black-light, rgba(0, 0, 0, 0.1)); border-radius: 0.5rem; padding: 0.75rem; margin: 0 0 var(--spacing-md, 16px); } .email-organizer__row { margin: 0 0 0.5rem; flex-wrap: wrap; gap: 0.75rem; } .email-recipient-sample { display: block; margin-top: 0.2rem; font-size: 0.78rem; color: var(--color-text-muted, #5b6b82); } .email-form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.5rem; } .email-form__group { display: flex; flex-direction: column; gap: var(--spacing-xs, 4px); } .email-form__label { font-size: 0.82rem; font-weight: var(--font-weight-semibold, 600); color: var(--color-text, #0f2747); } .email-form__textarea { resize: vertical; min-height: 5rem; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.8rem; } .email-form__hint { font-size: 0.74rem; color: var(--color-text-muted, #5b6b82); } /* ── W4-3 UX polish: People scope cards, copy cells, Online badge ──────────── */ /* The scope-filter stat cards (Active Today / Online Now / New This Week / Enrolled Students / Staff / Suspended / Pending / Total) double as one-click quick filters. Visual base + transition come from .stat-card--filter in dashboard-panels.css; this only adds the pressed-state affordance. */ .stat-card--filter[aria-pressed="true"] { border-color: var(--color-primary, #3E93EB); box-shadow: 0 0 0 1px var(--color-primary, #3E93EB) inset; } .people-online-badge { /* base.css has no soft-success surface/text token; use the literal soft green. */ margin-left: 0.375rem; background: #dcfce7; color: #166534; } /* Copy-to-clipboard affordance on username / email cells. The icon button is always rendered but fades in on row hover / keyboard focus to stay quiet. */ .people-copy { display: inline-flex; align-items: center; gap: 0.35rem; } .people-copy__text { overflow-wrap: anywhere; } .people-copy__btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm, 6px); background: transparent; color: var(--color-text-muted, #5b6b82); cursor: pointer; opacity: 0; transition: opacity var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .people-table tr:hover .people-copy__btn, .people-copy__btn:focus-visible { opacity: 1; } /* inside the drawer there is no row hover -- copy buttons stay visible */ .people-drawer .people-copy__btn { opacity: 1; } .people-copy__btn:hover { color: var(--color-primary, #3E93EB); } .people-copy__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; color: var(--color-primary, #3E93EB); } @media (prefers-reduced-motion: reduce) { .stat-card--filter { transition: none; } .people-copy__btn { transition: none; } .people-rolechip { transition: none; } .people-drawer__panel { animation: none; } .reg-drawer__panel { animation: none; } .reg-capbar__fill { transition: none; } }