/** * ╔══════════════════════════════════════════════════════════════╗ * ║ YETI REPORT KIT — CSS Foundation ║ * ║ Version: 1.6.2 ║ * ║ Zero dependencies. Drop-in for Yii2 layouts. ║ * ║ v1.6.2 — distinct staff A++ text-size component scale ║ * ║ v1.6.1 — §33 native .yr-check checkbox primitive ║ * ║ v1.6.0 — shared report controls and lifecycle contract ║ * ║ v1.5.0 — §31 charts (YR.charts), §32 .yr-col-sticky ║ * ║ ║ * ║ v1.4.2 — Promoted page-level extensions to the kit ║ * ║ • §8 .yr-badge[data-tone="success|info|warn|danger| ║ * ║ muted"] — semantic tone variants ║ * ║ • §13 .yr-btn-ghost / -success / -warn / -sm / -lg ║ * ║ and universal :disabled state ║ * ║ Promoted from page CSS so all reports inherit the same ║ * ║ vocabulary. No breaking changes. ║ * ║ ║ * ║ v1.4.1 — Mix-up chip miss variant ║ * ║ • .yr-mixup-chip.is-miss — light amber tint for chips ║ * ║ where the student missed (typed nothing). Pairs with ║ * ║ v1.4.1 JS YR.mixupChipHTML which detects empty `t`. ║ * ║ • .yr-mixup-miss-label — italic, muted "missed" text ║ * ║ in the to-position of miss chips ║ * ║ ║ * ║ v1.4.0 — Three new components for cross-report consistency║ * ║ • §28 .yr-dd-* — generic styled dropdown ║ * ║ (YR.initDropdown — replaces native ) ═══════════════════════════════════════════════════════════════ */ .yr-class-selector { position: relative; min-width: 260px; } .yr-class-selector label { display: block; font-size: 11px; font-weight: 600; color: var(--yr-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .yr-class-trigger { display: flex; align-items: center; justify-content: space-between; font-family: var(--yr-font); font-size: 13px; font-weight: 500; color: var(--yr-text-primary); background: white; border: 1px solid var(--yr-card-border); border-radius: var(--yr-radius-sm); padding: 9px 14px; cursor: pointer; box-shadow: var(--yr-shadow-sm); transition: border-color 0.15s, box-shadow 0.15s; } .yr-class-trigger:hover { border-color: var(--yr-blue); } .yr-class-trigger.open { border-color: var(--yr-blue); box-shadow: 0 0 0 3px rgba(19,158,221,0.12); border-radius: var(--yr-radius-sm) var(--yr-radius-sm) 0 0; } .yr-class-trigger-chevron { width: 10px; height: 10px; transition: transform 0.2s ease; color: var(--yr-text-muted); flex-shrink: 0; } .yr-class-trigger.open .yr-class-trigger-chevron { transform: rotate(180deg); } .yr-class-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid var(--yr-blue); border-top: 0; border-radius: 0 0 var(--yr-radius-sm) var(--yr-radius-sm); box-shadow: 0 6px 16px rgba(0,0,0,0.1); z-index: 60; max-height: 320px; overflow-y: auto; overflow-x: hidden; /* Thin scrollbar that doesn't clip border-radius */ scrollbar-width: thin; scrollbar-color: #c5cdd6 transparent; } .yr-class-menu::-webkit-scrollbar { width: 5px; } .yr-class-menu::-webkit-scrollbar-track { background: transparent; margin-bottom: 8px; } .yr-class-menu::-webkit-scrollbar-thumb { background: #c5cdd6; border-radius: 3px; } .yr-class-menu::-webkit-scrollbar-thumb:hover { background: #a8b5c2; } .yr-class-menu.open { display: block; } .yr-class-menu-item { padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--yr-text-primary); cursor: pointer; transition: all 0.1s; border-bottom: 1px solid #f0f4f8; } .yr-class-menu-item:last-child { border-bottom: 0; } .yr-class-menu-item:hover { background: var(--yr-blue-light); color: var(--yr-blue); } .yr-class-menu-item.active { background: var(--yr-blue); color: white; font-weight: 600; } /* ═══════════════════════════════════════════════════════════════ §22 — ACCESSIBILITY Self-contained. Any page using the YR kit gets all of this. ═══════════════════════════════════════════════════════════════ */ /* ── Touch: eliminate 300ms delay ── */ .yr-sidebar-nav a, .yr-sf-user, .yr-sf-help, .yr-sidebar-toggle, .yr-cat-tile, .yr-report-card, .yr-qlaunch, .yr-ql-remove, .yr-scope-btn, .yr-back-btn, .yr-class-trigger, .yr-class-menu-item, .yr-hamburger, .yr-rc-pin, .yr-search-clear, .yr-user-menu a, .yr-a11y-close, .yr-toggle-track, .yr-error-retry, .yr-btn, .yr-chev, .yr-link, .yr-class-drop, .yr-trail-back, .yr-trail-link { touch-action: manipulation; } /* ── Focus indicators (progressive enhancement) ── */ .yr-scope :focus { outline: 2px solid var(--yr-focus-ring); outline-offset: 2px; border-radius: 4px; } .yr-scope :focus:not(:focus-visible) { outline: none; } .yr-scope :focus-visible { outline: 2px solid var(--yr-focus-ring); outline-offset: 2px; border-radius: 4px; } .yr-sidebar-nav a:focus-visible { outline-color: #fff; outline-offset: -2px; border-radius: 0 24px 24px 0; } .yr-sf-help:focus-visible { outline-color: #fff; outline-offset: -2px; } .yr-sf-user:focus-visible { outline-color: #fff; outline-offset: -2px; } .yr-user-menu a:focus-visible { outline-offset: -2px; border-radius: 0; } .yr-report-card:focus-visible { outline-offset: -1px; border-radius: var(--yr-radius); } .yr-cat-tile:focus-visible { outline-offset: -1px; border-radius: var(--yr-radius); } .yr-scope-btn:focus-visible { outline-offset: -2px; border-radius: 0; } .yr-rc-pin:focus-visible { outline-offset: 0; border-radius: 7px; } .yr-sidebar-toggle:focus-visible { outline-offset: 0; border-radius: 50%; } .yr-hamburger:focus-visible { outline-offset: -1px; } .yr-chev:focus-visible { border-radius: 50%; } /* ── Skip link ── */ .yr-skip-link { position: absolute; top: -100%; left: 16px; z-index: 9999; background: var(--yr-blue); color: #fff; padding: 10px 20px; border-radius: 0 0 var(--yr-radius-sm) var(--yr-radius-sm); font-size: 14px; font-weight: 600; font-family: var(--yr-font); text-decoration: none; box-shadow: var(--yr-shadow-lg); transition: top 0.2s; } .yr-skip-link:focus { top: 0; } /* ── Visually hidden (screen reader only) ── */ .yr-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── SVG overflow helper ── */ .yr-svg-overflow { overflow: visible; } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Forced colors (Windows High Contrast) ── */ @media (forced-colors: active) { .yr-card, .yr-cat-tile, .yr-report-card, .yr-qlaunch, .yr-scope-toggle, .yr-search input, .yr-a11y-modal, .yr-class-trigger { border: 2px solid ButtonText; } .yr-sidebar { border-right: 2px solid ButtonText; } .yr-sidebar-nav a.active { border: 2px solid Highlight; } .yr-toggle-track { border: 2px solid ButtonText; } .yr-toggle input:checked + .yr-toggle-track { background: Highlight; } *:focus-visible { outline: 2px solid Highlight; } } /* ── Increased contrast preference ── */ @media (prefers-contrast: more) { :root { --yr-card-border: #8995a1; --yr-shadow-sm: 0 1px 3px rgba(0,0,0,0.15); --yr-shadow-md: 0 4px 14px rgba(0,0,0,0.2); } .yr-card, .yr-cat-tile, .yr-report-card { border-width: 2px; } } /* ═══════════════════════════════════════════════════════════════ §23 — ACCESSIBILITY MODAL & TOGGLE SWITCH Drop-in component. Requires matching HTML and JS. ═══════════════════════════════════════════════════════════════ */ /* Overlay */ .yr-a11y-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 300; align-items: center; justify-content: center; } .yr-a11y-overlay.open { display: flex; } /* Modal panel */ .yr-a11y-modal { background: var(--yr-card-bg); border-radius: var(--yr-radius-lg); box-shadow: var(--yr-shadow-lg); width: 420px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); overflow-y: auto; } .yr-a11y-header { padding: 20px 24px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--yr-card-border); } .yr-a11y-header h2 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 10px; color: var(--yr-text-primary); } .yr-a11y-header h2 svg { width: 20px; height: 20px; color: var(--yr-blue); } .yr-a11y-close { width: 32px; height: 32px; border-radius: 8px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--yr-text-muted); transition: all 0.15s; } .yr-a11y-close:hover { background: var(--yr-table-stripe); color: var(--yr-text-primary); } .yr-a11y-close svg { width: 18px; height: 18px; } .yr-a11y-body { padding: 20px 24px 24px; } .yr-a11y-desc { font-size: 13px; color: var(--yr-text-secondary); margin-bottom: 20px; line-height: 1.5; } .yr-a11y-option { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--yr-card-border); } .yr-a11y-option:last-child { border-bottom: none; } .yr-a11y-opt-info { flex: 1; margin-right: 16px; } .yr-a11y-opt-label { font-size: 14px; font-weight: 600; color: var(--yr-text-primary); margin-bottom: 2px; } .yr-a11y-opt-desc { font-size: 12px; color: var(--yr-text-muted); line-height: 1.4; } /* Toggle switch */ .yr-toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; } .yr-toggle input { opacity: 0; width: 0; height: 0; position: absolute; } .yr-toggle-track { position: absolute; inset: 0; background: #cdd5de; border: 1px solid #7e8d9c; border-radius: 12px; cursor: pointer; transition: background 0.2s; } .yr-toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: transform 0.2s; } .yr-toggle input:checked + .yr-toggle-track { background: var(--yr-blue); border-color: var(--yr-blue); } .yr-toggle input:checked + .yr-toggle-track::after { transform: translateX(20px); } .yr-toggle input:focus-visible + .yr-toggle-track { outline: 2px solid var(--yr-focus-ring); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════ §24 — ACCESSIBILITY STATE CLASSES Applied to via JS toggle. Covers all YR kit elements. ═══════════════════════════════════════════════════════════════ */ /* ── Larger Text ── */ body.yr-large-text { font-size: 18px; } body.yr-large-text .yr-topbar-left h1 { font-size: 19px; } body.yr-large-text .yr-topbar-left .yr-sub { font-size: 13px; } body.yr-large-text .yr-report-trail { font-size: 15px; } body.yr-large-text .yr-trail-sep { font-size: 14px; } body.yr-large-text .yr-greeting { font-size: 17px; } body.yr-large-text .yr-sidebar-nav a { font-size: 15px; } body.yr-large-text .yr-sf-help { font-size: 15px; } body.yr-large-text .yr-sf-name { font-size: 15px; } body.yr-large-text .yr-sf-role { font-size: 13px; } body.yr-large-text .yr-user-menu a { font-size: 15px; } body.yr-large-text .yr-um-name { font-size: 15px; } body.yr-large-text .yr-um-school { font-size: 13px; } body.yr-large-text .yr-hero-title { font-size: 20px; } body.yr-large-text .yr-hero-sub { font-size: 14px; } body.yr-large-text .yr-tab { font-size: 14px; } body.yr-large-text .yr-stat-value { font-size: 22px; } body.yr-large-text .yr-stat-label { font-size: 13px; } body.yr-large-text .yr-table thead th { font-size: 12px; } body.yr-large-text .yr-table tbody td { font-size: 14px; } body.yr-large-text .yr-class-trigger { font-size: 15px; } body.yr-large-text .yr-class-menu-item { font-size: 15px; } body.yr-large-text .yr-a11y-opt-label { font-size: 16px; } body.yr-large-text .yr-a11y-opt-desc { font-size: 14px; } body.yr-large-text .yr-a11y-desc { font-size: 15px; } body.yr-large-text .yr-a11y-header h2 { font-size: 18px; } body.yr-large-text .yr-toast { font-size: 14px; } /* Extra-large is a separate state so A++ is visibly larger than A+. */ body.yr-large-text.yr-extra-large-text { font-size: 21px; } body.yr-large-text.yr-extra-large-text .yr-topbar-left h1 { font-size: 22px; } body.yr-large-text.yr-extra-large-text .yr-topbar-left .yr-sub { font-size: 15px; } body.yr-large-text.yr-extra-large-text .yr-report-trail { font-size: 17px; } body.yr-large-text.yr-extra-large-text .yr-trail-sep { font-size: 16px; } body.yr-large-text.yr-extra-large-text .yr-greeting { font-size: 19px; } body.yr-large-text.yr-extra-large-text .yr-sidebar-nav a { font-size: 17px; } body.yr-large-text.yr-extra-large-text .yr-sf-help { font-size: 17px; } body.yr-large-text.yr-extra-large-text .yr-sf-name { font-size: 17px; } body.yr-large-text.yr-extra-large-text .yr-sf-role { font-size: 15px; } body.yr-large-text.yr-extra-large-text .yr-user-menu a { font-size: 17px; } body.yr-large-text.yr-extra-large-text .yr-um-name { font-size: 17px; } body.yr-large-text.yr-extra-large-text .yr-um-school { font-size: 15px; } body.yr-large-text.yr-extra-large-text .yr-hero-title { font-size: 23px; } body.yr-large-text.yr-extra-large-text .yr-hero-sub { font-size: 16px; } body.yr-large-text.yr-extra-large-text .yr-tab { font-size: 16px; } body.yr-large-text.yr-extra-large-text .yr-stat-value { font-size: 26px; } body.yr-large-text.yr-extra-large-text .yr-stat-label { font-size: 15px; } body.yr-large-text.yr-extra-large-text .yr-table thead th { font-size: 14px; } body.yr-large-text.yr-extra-large-text .yr-table tbody td { font-size: 16px; } body.yr-large-text.yr-extra-large-text .yr-class-trigger { font-size: 17px; } body.yr-large-text.yr-extra-large-text .yr-class-menu-item { font-size: 17px; } body.yr-large-text.yr-extra-large-text .yr-toast { font-size: 16px; } /* ── High Contrast ── */ body.yr-high-contrast { --yr-text-primary: #000; --yr-text-secondary: #222; --yr-text-muted: #444; --yr-card-border: #333; --yr-body-bg: #fff; --yr-card-bg: #fff; --yr-table-head-bg: #f0f0f0; --yr-table-stripe: #f5f5f5; --yr-shadow-sm: none; --yr-shadow-md: none; --yr-shadow-lg: none; } /* Sidebar */ body.yr-high-contrast .yr-sidebar { background: #000; } body.yr-high-contrast .yr-sidebar-nav a { color: #fff; } body.yr-high-contrast .yr-sidebar-nav a:hover { background: rgba(255,255,255,0.15); } body.yr-high-contrast .yr-sidebar-nav a.active { background: #fff; color: #000; box-shadow: none; } body.yr-high-contrast .yr-nav-sep { background: rgba(255,255,255,0.3); } body.yr-high-contrast .yr-sf-help { color: #fff; } body.yr-high-contrast .yr-sf-name { color: #fff; } body.yr-high-contrast .yr-sf-role { color: #ccc; } body.yr-high-contrast .yr-sf-chevron { color: #fff; } /* Cards, tiles, tables */ body.yr-high-contrast .yr-report-card, body.yr-high-contrast .yr-cat-tile, body.yr-high-contrast .yr-card, body.yr-high-contrast .yr-stat-card { border: 2px solid #333; box-shadow: none; } body.yr-high-contrast .yr-report-card:hover, body.yr-high-contrast .yr-cat-tile:hover, body.yr-high-contrast .yr-card:hover { border-color: #000; } body.yr-high-contrast .yr-table thead th { border-bottom: 2px solid #000; } body.yr-high-contrast .yr-table tbody td { border-bottom: 1px solid #999; } /* Hero */ body.yr-high-contrast .yr-hero { background: #000; color: #fff; } body.yr-high-contrast .yr-hero-title { color: #fff; } body.yr-high-contrast .yr-hero-sub { color: #ddd; } /* Topbar */ body.yr-high-contrast .yr-topbar { border-bottom: 2px solid #000; } body.yr-high-contrast .yr-topbar::after { display: none; } body.yr-high-contrast .yr-topbar-left h1 { color: #000; } body.yr-high-contrast .yr-topbar-icon { background: #000; } body.yr-high-contrast .yr-trail-back, body.yr-high-contrast .yr-trail-link { color: #000; text-decoration: underline; } body.yr-high-contrast .yr-trail-sep { color: #000; } body.yr-high-contrast .yr-trail-current { color: #000; } /* Mix-up miss chip — keep amber readable in HC mode (v1.4.1) */ body.yr-high-contrast .yr-mixup-chip.is-miss { background: #fff; border: 2px solid #000; } body.yr-high-contrast .yr-mixup-miss-label { color: #000 !important; } /* Class dropdown */ body.yr-high-contrast .yr-class-trigger { border: 2px solid #333; box-shadow: none; } body.yr-high-contrast .yr-class-trigger.open { border-color: #000; } body.yr-high-contrast .yr-class-menu { border: 2px solid #000; } body.yr-high-contrast .yr-class-menu-item:hover { background: #eee; color: #000; } body.yr-high-contrast .yr-class-menu-item.active { background: #000; color: #fff; } /* Tabs */ body.yr-high-contrast .yr-tab.active { border-bottom-color: #000; color: #000; } /* User menu */ body.yr-high-contrast .yr-user-menu { border: 2px solid #333; } body.yr-high-contrast .yr-user-menu a:hover { background: #eee; color: #000; } body.yr-high-contrast .yr-user-menu a:hover svg { color: #000; } body.yr-high-contrast .yr-user-menu-header { border-bottom: 2px solid #333; } body.yr-high-contrast .yr-um-sep { background: #333; } body.yr-high-contrast .yr-user-menu a.yr-um-logout { color: #8b0000; } /* Toggle switch */ body.yr-high-contrast .yr-toggle-track { background: #999; border-color: #333; } body.yr-high-contrast .yr-toggle input:checked + .yr-toggle-track { background: #000; border-color: #000; } /* Focus ring */ body.yr-high-contrast *:focus-visible { outline-color: #000; outline-width: 3px; } body.yr-high-contrast .yr-sidebar-nav a:focus-visible { outline-color: #fff; } /* Toast */ body.yr-high-contrast .yr-toast { background: #000; color: #fff; border: 2px solid #fff; } /* A11y modal */ body.yr-high-contrast .yr-a11y-modal { border: 2px solid #333; } body.yr-high-contrast .yr-a11y-option { border-bottom-color: #333; } /* Loading/error */ body.yr-high-contrast .yr-loading-spinner { border-color: #333; border-top-color: #000; } body.yr-high-contrast .yr-error-retry { background: #000; } /* ── Increased Spacing ── */ body.yr-extra-spacing { line-height: 2; letter-spacing: 0.02em; } /* Content */ body.yr-extra-spacing .yr-report-card { padding: 20px 22px; gap: 16px; } body.yr-extra-spacing .yr-cat-tile { padding: 24px 22px; } body.yr-extra-spacing .yr-report-grid { gap: 16px; } body.yr-extra-spacing .yr-cat-grid { gap: 20px; } body.yr-extra-spacing .yr-card { padding: 24px; } body.yr-extra-spacing .yr-stat-card { padding: 20px; } /* Tables */ body.yr-extra-spacing .yr-table thead th { padding: 12px 16px; } body.yr-extra-spacing .yr-table tbody td { padding: 12px 16px; } /* Sidebar */ body.yr-extra-spacing .yr-sidebar-nav a { padding: 14px 20px; } body.yr-extra-spacing .yr-nav-sep { margin: 10px 20px; } body.yr-extra-spacing .yr-sf-help { padding: 14px 20px; } body.yr-extra-spacing .yr-sf-user { padding: 16px 20px; } /* User menu */ body.yr-extra-spacing .yr-user-menu a { padding: 14px 18px; } body.yr-extra-spacing .yr-user-menu-header { padding: 16px 18px; } /* Hero, tabs */ body.yr-extra-spacing .yr-hero { padding: 32px 40px 24px; } body.yr-extra-spacing .yr-topbar { padding: 18px 36px; } body.yr-extra-spacing .yr-tab { padding: 14px 20px; } /* A11y modal */ body.yr-extra-spacing .yr-a11y-option { padding: 18px 0; } body.yr-extra-spacing .yr-a11y-body { padding: 24px 28px 28px; } /* ── Reduced Motion (via class — no DOM iteration) ── */ body.yr-reduced-motion *, body.yr-reduced-motion *::before, body.yr-reduced-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* ── Loading & Error States ── */ .yr-loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; gap: 16px; } .yr-loading-spinner { width: 36px; height: 36px; border: 3px solid var(--yr-card-border); border-top-color: var(--yr-blue); border-radius: 50%; animation: yr-spin 0.7s linear infinite; } @keyframes yr-spin { to { transform: rotate(360deg); } } .yr-loading-state p { font-size: 13px; color: var(--yr-text-muted); font-weight: 500; } .yr-error-state { display: none; text-align: center; padding: 60px 20px; } .yr-error-state.show { display: block; } .yr-error-state svg { width: 48px; height: 48px; color: var(--yr-danger); margin-bottom: 12px; opacity: 0.6; } .yr-error-state h3 { font-size: 15px; font-weight: 700; color: var(--yr-text-primary); margin-bottom: 4px; } .yr-error-state p { font-size: 13px; color: var(--yr-text-muted); margin-bottom: 16px; } .yr-error-retry { font-family: var(--yr-font); font-size: 13px; font-weight: 600; color: #fff; background: var(--yr-blue); border: none; border-radius: var(--yr-radius-sm); padding: 10px 20px; cursor: pointer; transition: background 0.15s; } .yr-error-retry:hover { background: var(--yr-blue-dark); } /* ═══════════════════════════════════════════════════════════════ §25 — MOBILE COMPLIANCE (v1.3.0) iPad/iPhone fixes: input zoom prevention, safe-area insets, touch target minimums. All scoped to mobile breakpoints so desktop sizing is unchanged. ═══════════════════════════════════════════════════════════════ */ /* ── Prevent iOS auto-zoom on input focus ── */ /* iOS Safari zooms in when tapping any input under 16px. */ @media (max-width: 640px) { input, select, textarea, .yr-class-trigger, .yr-search input, .yr-a11y-modal input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"] { font-size: 16px !important; } } /* ── Safe-area-inset-bottom on mobile toolbars ── */ /* iPhone home indicator overlaps bottom UI without this. */ @media (max-width: 768px) { .yr-toolbar { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); } .yr-card-header { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px) * 0.5); } .yr-toast { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } .yr-sidebar-footer { padding-bottom: env(safe-area-inset-bottom, 0px); } .yr-a11y-modal { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } } /* ── Touch target minimums (WCAG 2.5.8) ── */ /* All interactive elements ≥ 44x44px on mobile. */ @media (max-width: 768px) { .yr-btn, .yr-hamburger, .yr-sidebar-nav a, .yr-sf-help, .yr-sf-user, .yr-sidebar-toggle, .yr-class-trigger, .yr-class-menu-item, .yr-dropdown a, .yr-user-menu a, .yr-a11y-close, .yr-toggle, .yr-trail-back, .yr-trail-link, .yr-tabs a, .yr-table tbody tr.yr-data-row, .yr-error-retry, .yr-link { min-height: 44px; } .yr-btn, .yr-hamburger, .yr-a11y-close, .yr-sidebar-toggle { min-width: 44px; } /* Padding adjustment so content stays centered in 44px targets */ .yr-btn { padding: 11px 16px; } .yr-class-trigger { padding: 11px 14px; } .yr-dropdown a, .yr-user-menu a { padding: 12px 16px; } .yr-class-menu-item { padding: 12px 14px; } } /* ═══════════════════════════════════════════════════════════════ §26 — STICKY TABLE HEADER (JS-based floater) YR.initStickyHeader() clones the into this fixed container when the real header scrolls out of view. ═══════════════════════════════════════════════════════════════ */ .yr-sticky-floater { position: fixed; top: 0; z-index: 50; pointer-events: auto; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 0 var(--yr-card-border); border-radius: 0; } .yr-sticky-floater table { border-collapse: collapse; table-layout: fixed; width: 100%; } .yr-sticky-floater thead th { background: var(--yr-table-head-bg) !important; } /* Hide when printing */ @media print { .yr-sticky-floater { display: none !important; } } /* ═══════════════════════════════════════════════════════════════ §27 — TABLE PAGINATION (YR.initPagination) Footer that sits below a sortable table. Composes with sort, filter, and the sticky thead. ═══════════════════════════════════════════════════════════════ */ .yr-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--yr-card-border); background: var(--yr-card-bg); border-radius: 0 0 var(--yr-radius-md, 12px) var(--yr-radius-md, 12px); font-size: 13px; color: var(--yr-text-secondary); } .yr-pager-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .yr-pager-info { font-weight: 500; } .yr-pager-info strong { color: var(--yr-text-primary); font-weight: 700; } .yr-pager-nav { display: flex; align-items: center; gap: 4px; } .yr-pg-btn { min-width: 32px; height: 32px; padding: 0 10px; background: #fff; border: 1px solid var(--yr-card-border); border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--yr-text-primary); cursor: pointer; font-family: inherit; transition: border-color 0.15s, color 0.15s, background 0.15s; display: inline-flex; align-items: center; justify-content: center; } .yr-pg-btn:hover:not(:disabled) { border-color: var(--yr-blue); color: var(--yr-blue); } .yr-pg-btn:focus-visible { outline: 2px solid var(--yr-blue); outline-offset: 1px; } .yr-pg-btn:disabled { opacity: 0.4; cursor: not-allowed; } .yr-pg-btn.active { background: var(--yr-blue); border-color: var(--yr-blue); color: #fff; } .yr-pg-btn.active:hover { color: #fff; } .yr-pg-arrow { font-size: 18px; line-height: 1; font-weight: 600; } .yr-pg-ellipsis { padding: 0 4px; color: var(--yr-text-muted); font-weight: 600; user-select: none; } /* Page size selector */ .yr-pg-size { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--yr-text-muted); } .yr-pg-size span { font-weight: 500; } .yr-pg-size-select { padding: 4px 22px 4px 8px; border: 1px solid var(--yr-card-border); border-radius: 4px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--yr-text-primary); background: #fff; cursor: pointer; } .yr-pg-size-select:focus { outline: none; border-color: var(--yr-blue); box-shadow: 0 0 0 2px rgba(18, 160, 221, 0.15); } /* Mobile: stack info above nav */ @media (max-width: 640px) { .yr-pager { flex-direction: column; align-items: stretch; } .yr-pager-left { justify-content: space-between; } .yr-pager-nav { justify-content: center; flex-wrap: wrap; } } /* Hide when printing — a printed report shows all rows */ @media print { .yr-pager { display: none; } } /* ═══════════════════════════════════════════════════════════════ §28 — DROPDOWN (YR.initDropdown) v1.4.0 — Generic styled dropdown component. Replaces native