, modal bodies) to actually expose their own horizontal scrollbar when the content is wider than the viewport. Without this, `div.content { flex: 1 }` (global.css) inherits the default `min-width: auto`, which means it CANNOT shrink below its intrinsic content width. Wide tables push .content past the viewport, where it then gets silently clipped by `.site-container { overflow-x: clip }` above — content is hidden, no scrollbar appears. Setting `min-width: 0` lets the flex item shrink, so any inner `overflow-x: auto` actually triggers a scrollbar instead of pushing the layout. */ .main, .main > .content, .archive, .archive > .content, div.content { min-width: 0; } /* ── Select2 responsive override ── Select2 v4 computes its rendered width once at .select2() init from the container's width at that moment. It does NOT track container resize, and it does NOT re-read CSS afterwards. This produces two visible bugs on this portal: 1. On first load the widget sometimes initialises before layout has settled (fonts/css still applying), so the picker is rendered at the wrong width — and only "snaps into place" after a hard refresh once everything is cached. 2. On viewport narrowing, the rendered widget keeps its original px width and gets clipped by the parent. Forcing width:100% on the Select2 wrapper makes it follow the container at every reflow — no JS resize listener needed. The `!important` is required because Select2 writes inline `style="width: "` on the wrapper which would otherwise win. Scoped via `:where()` so the specificity stays at 0 and any intentionally-narrow Select2 instance can still opt out by setting an explicit `style` on the wrapper itself. */ .select2-container, .select2-container--default, .select2-container--bootstrap-5 { max-width: 100% !important; box-sizing: border-box; } :where(.form-row, .form-field, .form-group, .row, .col, [class^="col-"], [class*=" col-"]) > .select2-container, :where(.form-row, .form-field, .form-group, .row, .col, [class^="col-"], [class*=" col-"]) .select2-container { width: 100% !important; } /* The dropdown is teleported to on open — give it the same max-width guard so it can't push the viewport when the picker sits near the right edge on a narrow screen. */ .select2-container--open .select2-dropdown { max-width: calc(100vw - 16px); } /* ============================================================ Required / Optional badges — global reusable utility. Soft, low-aggression styling per design handoff (.design/README.md → "Required badge" / "Optional badge"). Use as: required optional Both opt out of Bootstrap's solid `.text-bg-danger` / `.text-bg-secondary` colour pairs in favour of soft tints. ============================================================ */ .badge-required, .badge-optional { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: 0.01em; white-space: nowrap; } .badge-required { background-color: #fee2e2; color: #991b1b; } .badge-optional { background-color: #eef1f5; color: #6b7689; } /* ============================================================ Global primary CTA button polish — soft lift + tinted shadow on hover/focus, matching the Documents-block Save button. Applied globally to .btn-primary (blue, color preserved) and .btn-success (green, retuned to #059669 design token). ============================================================ */ .btn-primary, .btn-success { border: 1px solid transparent !important; transition: background-color 160ms cubic-bezier(0.2,0.6,0.2,1), border-color 160ms cubic-bezier(0.2,0.6,0.2,1), color 160ms cubic-bezier(0.2,0.6,0.2,1), transform 160ms cubic-bezier(0.2,0.6,0.2,1), box-shadow 160ms cubic-bezier(0.2,0.6,0.2,1) !important; } /* Blue (.btn-primary) — colour stays Bootstrap default; we only add the tinted shadow and lift-on-hover affordance. */ .btn-primary { box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25), 0 4px 8px rgba(37, 99, 235, 0.12) !important; } .btn-primary:hover:not(:disabled):not(.disabled), .btn-primary:focus-visible:not(:disabled):not(.disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35), 0 2px 4px rgba(37, 99, 235, 0.18) !important; } /* Green (.btn-success) — full retune to design token #059669 with green-tinted shadow, hover deepens to #047857 + lift. */ .btn-success { background-color: #059669 !important; border-color: #059669 !important; color: #fff !important; box-shadow: 0 1px 2px rgba(5, 150, 105, 0.25), 0 4px 8px rgba(5, 150, 105, 0.12) !important; } .btn-success:hover:not(:disabled):not(.disabled), .btn-success:focus-visible:not(:disabled):not(.disabled) { background-color: #047857 !important; border-color: #047857 !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35), 0 2px 4px rgba(5, 150, 105, 0.18) !important; } /* Press / active — settle back to baseline. */ .btn-primary:active:not(:disabled):not(.disabled), .btn-success:active:not(:disabled):not(.disabled) { transform: translateY(0); } /* Disabled — neutral grey, no shadow, no transform. */ .btn-primary:disabled, .btn-primary.disabled, .btn-success:disabled, .btn-success.disabled { background-color: #cbd5e1 !important; border-color: #cbd5e1 !important; color: #fff !important; box-shadow: none !important; cursor: not-allowed; transform: none !important; } /* ============================================================ Drag-and-drop dropzone — global field appearance. Targets every roster-documents drop-area instance on the site by id-prefix (the markup convention is shared across the constructor's Step 3, the Roster Details Documents block, and any future DnD that uses the same id naming). Covers idle / hover / active-drag / error states only — no surrounding card/footer/chip styling, so it works on legacy markup too without requiring structural changes. ============================================================ */ [id^="drop_area_container_"] { border-color: #adb5bd !important; background: #fff; min-height: 60px; transition: border-color 160ms cubic-bezier(0.2,0.6,0.2,1), background-color 160ms cubic-bezier(0.2,0.6,0.2,1), color 160ms cubic-bezier(0.2,0.6,0.2,1); } [id^="drop_area_container_"]:hover { border-color: #2563eb !important; border-style: solid !important; background-color: #e8efff !important; color: #1e40af !important; } [id^="drop_area_container_"]:hover [id^="drop_area_label_"] { color: #1e40af !important; } /* Active-drag state — JS handlers attach `.bg-secondary` to the inner while a file is being dragged over the dropzone. */ [id^="drop_area_container_"]:has(.bg-secondary) { border-color: #2563eb !important; border-style: solid !important; background-color: #e8efff !important; } [id^="drop_area_container_"]:has(.bg-secondary) [id^="drop_area_label_"] { background-color: transparent !important; color: #1e40af !important; } /* Validation error (non-PDF / oversized drop). The .docs-dropzone-error class is added by validateDropBatch() on the modern template; legacy templates without that JS won't trigger this branch. */ [id^="drop_area_container_"].docs-dropzone-error { border-color: #dc2626 !important; border-style: solid !important; background-color: #fff5f5 !important; color: #991b1b !important; } [id^="drop_area_container_"].docs-dropzone-error [id^="drop_area_label_"] { color: #991b1b !important; } [id^="drop_area_container_"].docs-dropzone-error [id^="drop_area_label_"] .text-muted { color: #b91c1c !important; } [id^="drop_area_container_"].docs-dropzone-error .bi-cloud-arrow-up { color: #dc2626 !important; } [id^="drop_area_label_"] { color: #475467; font-weight: 500; } /* Legacy JS handler (handleDragEnterOver) attaches `.bg-secondary text-white fw-bold` to the inner on drag-over to highlight it. With the new container-level hover/drag styling those classes add a dark-grey overlay that fights the light-blue bg. Neutralize them — the container already paints itself. */ [id^="drop_area_label_"].bg-secondary { background-color: transparent !important; color: #1e40af !important; } [id^="drop_area_container_"]:hover [id^="drop_area_label_"], [id^="drop_area_container_"]:has(.bg-secondary) [id^="drop_area_label_"] { background-color: transparent !important; } /* ============================================================ Upload spinner (.progress-spinner) — global so every PDF-upload surface (Roster Documents block, constructor Step 3, profile Instructor Essentials / Certificates 2025) renders the same conic-gradient circle while the form is processing. ============================================================ */ .progress-spinner { width: 100px; height: 100px; background: conic-gradient(#fff, #91b9ff, #005dff); border-radius: 50%; display: flex; justify-content: center; align-items: center; } .progress-spinner::after { content: ''; background: white; width: 100%; height: 100%; transform: scale(0.6); border-radius: 50%; } .spinning { display: flex; animation: progress-spinner-rotate 2s linear infinite; } @keyframes progress-spinner-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Backward-compat alias — older templates use animation: rotate. */ @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ========================================================================== Pagination footer — shared across all listing pages. Layout: "Showing N of M items" left, "← Previous Next →" right (same row); numbered page links flow underneath, left-aligned. Buttons render with white background + gray border, gray on hover, dark gray for the active page. ========================================================================== */ .paging { position: relative; padding-top: 0.25rem; } .paging .paging-summary { position: absolute; top: 0.25rem; left: 0; margin: 0; color: #6c757d; font-size: 0.875rem; } .paging > p { text-align: right; margin: 0 0 0.5rem 0; } .paging .pagination .page-link { background-color: #fff !important; border: 1px solid #dee2e6 !important; color: #0d6efd !important; } .paging .pagination .page-link:hover, .paging .pagination .page-link:focus { background-color: #e9ecef !important; border-color: #dee2e6 !important; color: #0a58ca !important; } .paging .pagination strong.page-link, .paging .pagination .page-item.active .page-link { background-color: #495057 !important; border-color: #495057 !important; color: #fff !important; }