/* .sc-breadcrumb-current, .sc-dialog-header-subtitle and .sc-form-required removed: they are design-system component classes (ScBreadcrumb, ScDialogHeader, ScFormField) and design-system.css both loads AFTER this file and sets every property these set, at equal-or-higher specificity -- so these copies could never win. Verified per property, not just per selector: a duplicate that sets something the design system does NOT set still wins for that property, which is why the other 12 sc- duplicates in this file are left in place. */ /* Staff module screen designs — ported verbatim from docs/apps/portal/staff/mockups/staff-module-screens.html (the "PRODUCT COMPONENTS (real class names)" block). WHY THIS FILE EXISTS. The design spec is not a mood board: it is written against real product class names, so the screens it shows are the markup the pages are meant to emit. Re-interpreting it with different classes is how the module ended up with three workspaces that worked and none that matched the design. RULES WHEN EDITING. - This is a GLOBAL stylesheet, deliberately. Label rules must never live in a page's scoped .razor.css: a scoped selector gains a [b-xxxxx] attribute that outranks a plain global class, so page-local label CSS silently wins over the shared rule. - Never write the sequence star-slash inside a comment. It closes the comment early, and Razor's scoped-CSS rewriter then emits every following selector unscoped, which kills this file and everything after it in the bundle. - Spacing tokens are 1 2 3 4 5 6 8 10 12 16 only. Tokens 7, 9 and 11 are not defined and a var() miss drops the whole declaration silently. Tokens (--sc-*) come from the design system; only components are defined here. */ /* ===== PRODUCT COMPONENTS (real class names) ===== ⚠️ 2026-08-07 — .sc-page, .td-hero(+children), .sc-card(+children), .sc-counter-grid/.sc-counter-tile and .rz-button below have been REMOVED from this list. This file is loaded app-wide (index.html, after design-system.css), and every one of those names is ALREADY a core, widely-used shared primitive (hero-header.css's .td-hero, detail-pages.css's .sc-card family, ScCounterTile's .sc-counter-grid) with DIFFERENT property values (different color tokens, .sc-card-header lost its background entirely). Because this file loads last, its versions won the cascade globally — corrupting every page's hero header and every .sc-card anywhere in the app (Institute Profile, Centres, Departments, Institution Overview and more), not just the staff module. Restored the established shared versions by deleting the duplicates here; keep new staff-only class names (pn-*, bx-*, bw-*, pc-*, etc.) that don't collide with an existing shared name. If the design spec truly needs a DIFFERENT look for these on staff pages specifically, scope it under a staff-only ancestor class — never redefine a shared primitive globally. */ .sc-breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--sc-text-sm);color:var(--sc-text-secondary);margin-bottom:var(--sc-space-4)} .sc-breadcrumb a{color:var(--sc-text-secondary);text-decoration:none} .sc-breadcrumb .sep{opacity:.5;color:var(--sc-text-disabled)} .ct-ico{width:36px;height:36px;border-radius:var(--sc-radius-lg);background:rgba(var(--sc-primary-rgb),.11);color:var(--sc-primary-500);display:grid;place-items:center;flex-shrink:0} .ct-ico .material-symbols-outlined{font-size:20px} .ct-body{min-width:0;flex:1} .ct-title{font-size:var(--sc-text-sm);font-weight:var(--sc-font-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ct-desc{font-size:var(--sc-text-xs);color:var(--sc-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ct-val{font-size:var(--sc-text-xl);font-weight:var(--sc-font-bold);letter-spacing:-.5px} .sc-card-title{margin:0;font-size:var(--sc-text-base);font-weight:var(--sc-font-semibold);flex:1} .sc-card-header-meta{font-size:var(--sc-text-xs);color:var(--sc-text-muted)} .sc-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--sc-text-xs);font-weight:var(--sc-font-semibold);padding:2px 9px;border-radius:var(--sc-radius-full);border:1px solid transparent;white-space:nowrap} .sc-badge-success{background:rgba(16,185,129,.13);color:var(--sc-success-500);border-color:rgba(16,185,129,.3)} .sc-badge-warning{background:rgba(245,158,11,.13);color:var(--sc-warning-500);border-color:rgba(245,158,11,.3)} .sc-badge-danger{background:rgba(239,68,68,.13);color:var(--sc-danger-500);border-color:rgba(239,68,68,.3)} .sc-badge-info{background:rgba(6,182,212,.13);color:var(--sc-info-500);border-color:rgba(6,182,212,.3)} .sc-badge-default{background:var(--sc-surface-variant);color:var(--sc-text-secondary);border-color:var(--sc-border)} /* .modern-filter-bar lives in modern-filter-bar.css -- one definition, not four. Its flex layout moved there, because most pages carrying this class have no scoped rule of their own. */ .sc-searchbox{flex:1 1 230px;position:relative;min-width:180px} .sc-searchbox input{width:100%;padding:8px 12px 8px 33px;border:1px solid var(--sc-border);border-radius:var(--sc-input-radius);background:var(--sc-surface);color:var(--sc-text-primary);font-size:var(--sc-text-sm);font-family:inherit} .sc-searchbox .material-symbols-outlined{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--sc-text-muted)} .rz-dropdown{padding:8px 11px;border:1px solid var(--sc-border);border-radius:var(--sc-input-radius);background:var(--sc-surface);color:var(--sc-text-secondary);font-size:var(--sc-text-sm);display:inline-flex;align-items:center;gap:6px;cursor:pointer} .rz-dropdown .material-symbols-outlined{font-size:17px;opacity:.6} .filter-actions{display:flex;gap:var(--sc-space-2);margin-left:auto;align-items:center} /* .view-toggle-group / .view-toggle-btn DELETED 2026-09-04 -- they were a SECOND global declaration of the same classes the design system owns (modern-filter-bar.css), and this copy was the joined one: one border round the pair with overflow:hidden, so the two buttons shared a single outline. Which of the two sheets won was link order, not intent, so the People pages got the joined control and every other experience got the design system's. One declaration now, in the design system. */ .sc-facet-bar{display:flex;gap:var(--sc-space-2);align-items:center;flex-wrap:wrap;margin-bottom:var(--sc-space-4);padding-bottom:var(--sc-space-4);border-bottom:1px solid var(--sc-border-light)} .sc-facet{background:var(--sc-surface);border:1px solid var(--sc-border);color:var(--sc-text-secondary);border-radius:var(--sc-radius-full);padding:5px 13px;font-size:var(--sc-text-sm);cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-family:inherit} .sc-facet .cnt{background:var(--sc-surface-variant);border-radius:var(--sc-radius-full);padding:0 7px;font-size:var(--sc-text-xs);font-weight:var(--sc-font-semibold)} .sc-facet.on{background:rgba(var(--sc-primary-rgb),.13);border-color:var(--sc-primary-500);color:var(--sc-primary-500)} .sc-facet.on .cnt{background:var(--sc-primary-500);color:#fff} .sc-facet[disabled]{opacity:.4;cursor:not-allowed} .sc-tab-bar{display:flex;gap:2px;border-bottom:1px solid var(--sc-border);margin-bottom:var(--sc-space-6);overflow-x:auto} .sc-tab-bar button{background:none;border:none;border-bottom:2px solid transparent;color:var(--sc-text-secondary);padding:11px 14px;font-size:var(--sc-text-sm);cursor:pointer;white-space:nowrap;font-family:inherit;font-weight:var(--sc-font-medium);display:inline-flex;align-items:center;gap:6px} .sc-tab-bar button .material-symbols-outlined{font-size:17px} .sc-tab-bar button.on{color:var(--sc-primary-500);border-bottom-color:var(--sc-primary-500)} .sc-tab-bar .pill{background:var(--sc-danger-500);color:#fff;border-radius:var(--sc-radius-full);font-size:10px;font-weight:700;padding:1px 6px} .sc-data-grid{width:100%;border-collapse:collapse;font-size:var(--sc-text-sm)} .sc-data-grid th{text-align:left;padding:10px var(--sc-space-4);background:var(--sc-surface-variant);border-bottom:1px solid var(--sc-border);font-size:var(--sc-text-xs);text-transform:uppercase;letter-spacing:.5px;color:var(--sc-text-secondary);font-weight:var(--sc-font-semibold);white-space:nowrap} .sc-data-grid td{padding:10px var(--sc-space-4);border-bottom:1px solid var(--sc-border-light);color:var(--sc-text-secondary)} .sc-data-grid tr:hover td{background:var(--sc-surface-variant)} .sc-data-grid td strong{color:var(--sc-text-primary);font-weight:var(--sc-font-medium)} .person{display:flex;align-items:center;gap:var(--sc-space-3)} .sc-avatar{width:32px;height:32px;border-radius:var(--sc-radius-full);display:grid;place-items:center;font-size:12px;font-weight:var(--sc-font-semibold);color:#fff;flex-shrink:0} .sc-avatar.sm{width:26px;height:26px;font-size:10px} .sc-avatar.lg{width:56px;height:56px;font-size:19px} .av1{background:var(--sc-stat-sky)}.av2{background:var(--sc-stat-purple)}.av3{background:var(--sc-stat-emerald)} .av4{background:var(--sc-stat-amber)}.av5{background:var(--sc-stat-rose)}.av6{background:var(--sc-stat-teal)}.av7{background:var(--sc-stat-indigo)} .modern-staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:var(--sc-space-4)} .modern-staff-card{background:var(--sc-card-bg);border:1px solid var(--sc-card-border);border-radius:var(--sc-radius-xl);padding:var(--sc-space-4);cursor:pointer} .sc-card-top{display:flex;gap:var(--sc-space-3);align-items:center;margin-bottom:var(--sc-space-3)} .sc-card-name{font-size:var(--sc-text-sm);font-weight:var(--sc-font-semibold);display:block} .sc-card-id{font-size:var(--sc-text-xs);color:var(--sc-text-muted)} .sc-card-meta{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:var(--sc-space-3)} .sc-tag{background:var(--sc-surface-variant);border:1px solid var(--sc-border-light);color:var(--sc-text-secondary);border-radius:var(--sc-radius-md);padding:1px 7px;font-size:var(--sc-text-xs)} .sc-card-foot{display:flex;justify-content:space-between;align-items:center;font-size:var(--sc-text-xs);color:var(--sc-text-muted);border-top:1px solid var(--sc-border-light);padding-top:var(--sc-space-3)} .sc-status-dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:5px;background:var(--sc-success-500)} .sc-empty-state{text-align:center;padding:var(--sc-space-12) var(--sc-space-6)} .sc-empty-state .material-symbols-outlined{font-size:42px;color:var(--sc-text-disabled);margin-bottom:var(--sc-space-3)} .sc-empty-state h3{margin:0 0 5px;font-size:var(--sc-text-lg)} .sc-empty-state p{margin:0 auto var(--sc-space-4);color:var(--sc-text-secondary);font-size:var(--sc-text-sm);max-width:44ch} .sc-skel{background:linear-gradient(90deg,var(--sc-surface-variant) 25%,var(--sc-surface-muted) 50%,var(--sc-surface-variant) 75%);background-size:200% 100%;animation:shim 1.4s infinite;border-radius:var(--sc-radius-md)} @keyframes shim{0%{background-position:200% 0}100%{background-position:-200% 0}} .sc-skel-list{background:var(--sc-card-bg);border:1px solid var(--sc-card-border);border-radius:var(--sc-radius-xl);padding:var(--sc-space-4)} .mk-skel-row{display:flex;gap:var(--sc-space-3);align-items:center;padding:var(--sc-space-3) 0;border-bottom:1px solid var(--sc-border-light)} .mk-skel-row:last-child{border-bottom:none} /* attention */ .sc-attention{background:var(--sc-card-bg);border:1px solid var(--sc-card-border);border-radius:var(--sc-radius-xl);overflow:hidden} .sc-attention-head{padding:var(--sc-space-4) var(--sc-space-5);border-bottom:1px solid var(--sc-border-light);display:flex;align-items:center;gap:var(--sc-space-3)} .sc-attention-head h3{margin:0;font-size:var(--sc-text-base);font-weight:var(--sc-font-semibold);flex:1} .sc-attention-row{display:flex;align-items:center;gap:var(--sc-space-3);padding:var(--sc-space-3) var(--sc-space-5);border-bottom:1px solid var(--sc-border-light);cursor:pointer} .sc-attention-row:last-child{border-bottom:none} .sc-attention-row:hover{background:var(--sc-surface-variant)} .sc-attention-ico{width:32px;height:32px;border-radius:var(--sc-radius-lg);display:grid;place-items:center;flex-shrink:0} .sc-attention-ico .material-symbols-outlined{font-size:18px} .sc-attention-ico.urgent{background:rgba(239,68,68,.13);color:var(--sc-danger-500)} .sc-attention-ico.soon{background:rgba(245,158,11,.13);color:var(--sc-warning-500)} .sc-attention-ico.info{background:rgba(6,182,212,.13);color:var(--sc-info-500)} .sc-attention-body{flex:1;min-width:0} .sc-attention-label{font-size:var(--sc-text-sm);font-weight:var(--sc-font-medium)} .sc-attention-sub{font-size:var(--sc-text-xs);color:var(--sc-text-muted)} .sc-attention-count{font-size:var(--sc-text-lg);font-weight:var(--sc-font-bold)} .chev{font-size:18px;color:var(--sc-text-disabled)} .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} .sev{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:1px 5px;border-radius:3px;margin-right:6px} .sev-urgent{background:rgba(239,68,68,.16);color:var(--sc-danger-500)} .sev-soon{background:rgba(245,158,11,.16);color:var(--sc-warning-500)} .sev-info{background:rgba(6,182,212,.16);color:var(--sc-info-500)} /* profile */ .pc-shell{display:grid;grid-template-columns:212px 1fr;gap:var(--sc-space-6)} /* .pc-rail deleted 2026-09-07. This GLOBAL rule painted a bordered white card behind the nav rail of both pages that render class="pc-rail" -- StaffProfileCard (which links this file) and GuardianProfileCard. Neither wanted it: StaffProfileCard's own scoped rule sets padding:0 under a comment saying it is "a bare column of nav items, not a tinted bordered panel", but it never declared background/border/border-radius, so those three kept arriving from here and the comment described an intention the page did not have. StudentProfileCard escaped the same collision by renaming its rail .spc-rail rather than deleting this, and recorded that the guardian page depended on it -- which is no longer true: profile-card.css now declares the rail, plainly. Deleting it makes both pages match the student profile they are modelled on. */ .pc-nav-group-head{font-size:var(--sc-text-xs);text-transform:uppercase;letter-spacing:.6px;color:var(--sc-text-muted);padding:var(--sc-space-3) var(--sc-space-3) var(--sc-space-2)} .pc-nav-item{display:flex;align-items:center;gap:var(--sc-space-3);width:100%;background:none;border:none;color:var(--sc-text-secondary);padding:7px var(--sc-space-3);border-radius:var(--sc-radius-lg);font-size:var(--sc-text-sm);cursor:pointer;font-family:inherit;text-align:left} .pc-nav-item .material-symbols-outlined{font-size:18px} .pc-nav-item .cnt{margin-left:auto;font-size:11px;background:var(--sc-surface-variant);border-radius:var(--sc-radius-full);padding:0 6px} .pc-nav-item:hover{background:var(--sc-surface-variant)} .pc-nav-item.active{background:rgba(var(--sc-primary-rgb),.12);color:var(--sc-primary-500);font-weight:var(--sc-font-medium)} .pc-nav-item.warn .cnt{background:rgba(245,158,11,.2);color:var(--sc-warning-500)} .pc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:var(--sc-space-4)} .pc-kv-row{display:flex;justify-content:space-between;gap:var(--sc-space-4);padding:6px 0;font-size:var(--sc-text-sm);border-bottom:1px solid var(--sc-border-light)} .pc-kv-row:last-child{border-bottom:none} .pc-kv-row span{color:var(--sc-text-muted)} .pc-kv-row strong{font-weight:var(--sc-font-medium);text-align:right} .pc-kv-row .miss{color:var(--sc-text-disabled);font-style:italic;font-weight:400} /* misc */ .g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sc-space-4)} .g2u{display:grid;grid-template-columns:2fr 1fr;gap:var(--sc-space-4)} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sc-space-4)} .col{display:flex;flex-direction:column;gap:var(--sc-space-4)} .row{display:flex;gap:var(--sc-space-4)} .mb4{margin-bottom:var(--sc-space-4)}.mb6{margin-bottom:var(--sc-space-6)} .bars{display:flex;flex-direction:column;gap:9px} .bar-row{display:flex;align-items:center;gap:var(--sc-space-3);font-size:var(--sc-text-sm)} .bar-row .lbl{width:110px;color:var(--sc-text-secondary);flex-shrink:0} .bar-track{flex:1;height:8px;background:var(--sc-surface-variant);border-radius:var(--sc-radius-full);overflow:hidden} .bar-fill{height:100%;background:var(--sc-primary-500);border-radius:var(--sc-radius-full)} .bar-row .val{width:46px;text-align:right;font-weight:var(--sc-font-semibold);font-size:var(--sc-text-xs)} .donut{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;margin:0 auto} .donut::after{content:'';width:68px;height:68px;border-radius:50%;background:var(--sc-card-bg)} .legend{display:flex;flex-direction:column;gap:5px;font-size:var(--sc-text-xs);color:var(--sc-text-secondary)} .legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:7px} .sc-form-label{display:block;font-size:var(--sc-text-sm);font-weight:var(--sc-font-medium);color:var(--sc-text-primary);margin-bottom:var(--sc-space-2)} .rz-textbox{width:100%;padding:8px 11px;border:1px solid var(--sc-border);border-radius:var(--sc-input-radius);background:var(--sc-surface);color:var(--sc-text-primary);font-size:var(--sc-text-sm);font-family:inherit} .fg2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sc-space-4);margin-bottom:var(--sc-space-4)} .chiplist{display:flex;gap:6px;flex-wrap:wrap} .chip-on{border-color:var(--sc-primary-500);color:var(--sc-primary-500)} .chip-add{border-style:dashed} .tl-slot{display:flex;align-items:center;gap:var(--sc-space-3);padding:8px var(--sc-space-3);border:1px solid var(--sc-border-light);border-radius:var(--sc-radius-lg);font-size:var(--sc-text-sm);margin-bottom:6px;background:var(--sc-surface)} .tl-slot .per{width:56px;font-size:var(--sc-text-xs);color:var(--sc-text-muted);flex-shrink:0} .tl-slot.covered{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.05)} .tl-slot.gap{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.05)} .tl-slot.free{border-color:rgba(107,114,128,.25);opacity:.6} /* checklist */ .chk{display:flex;align-items:center;gap:var(--sc-space-3);padding:9px var(--sc-space-4);border-bottom:1px solid var(--sc-border-light);font-size:var(--sc-text-sm)} .chk:last-child{border-bottom:none} .chk .box{width:19px;height:19px;border-radius:5px;border:1.5px solid var(--sc-border-strong);display:grid;place-items:center;flex-shrink:0} .chk.done .box{background:var(--sc-success-500);border-color:var(--sc-success-500);color:#fff} .chk.done .box .material-symbols-outlined{font-size:14px} .chk.done .t{color:var(--sc-text-muted);text-decoration:line-through} .chk .t{flex:1} .chk .meta{font-size:var(--sc-text-xs);color:var(--sc-text-muted)} /* A checklist row whose trailing slot is an ACTION, not meta text. The markup says class="rz-button sm" but no .rz-button.sm rule exists anywhere -- so without this the button renders at Radzen's full default size, standing ~11px taller than the 40px text rows either side of it and putting its trailing edge somewhere .meta's never is. Height is pinned to the text rows' content box (--sc-text-sm at normal line-height) so every row in the card is the same height and every trailing element shares one right edge. Scoped under .chk deliberately: this file loads app-wide and last, so a bare .rz-button rule here would win the cascade globally -- see the header note. */ .chk .rz-button{flex:0 0 auto;margin:0;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;font-size:var(--sc-text-xs);line-height:1;border-radius:var(--sc-radius-md)} .chk .rz-button .material-symbols-outlined{font-size:15px} .prog{height:6px;background:var(--sc-surface-variant);border-radius:var(--sc-radius-full);overflow:hidden;flex:1} .prog i{display:block;height:100%;background:var(--sc-primary-500)} /* calendar */ .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .cal .dow{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--sc-text-muted);text-align:center;padding-bottom:5px;font-weight:600} .cal .day{background:var(--sc-surface-variant);border:1px solid var(--sc-border-light);border-radius:var(--sc-radius-md);min-height:60px;padding:5px;font-size:11px} .cal .day .n{color:var(--sc-text-muted);font-size:10.5px;margin-bottom:3px} .cal .day.out{opacity:.35} .cal .day.today{border-color:var(--sc-primary-500)} .cal .ev{border-radius:3px;padding:1px 4px;font-size:9.5px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ev-a{background:rgba(6,182,212,.2);color:var(--sc-info-500)} .ev-s{background:rgba(245,158,11,.2);color:var(--sc-warning-500)} .ev-p{background:rgba(124,58,237,.2);color:var(--sc-stat-purple)} /* panel */ .panel-demo{position:relative;background:var(--sc-surface-variant);border-radius:var(--sc-radius-xl);overflow:hidden;display:grid;grid-template-columns:1fr 430px;min-height:400px;border:1px solid var(--sc-border)} .panel-scrim{background:rgba(0,0,0,.32);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--sc-text-disabled);font-size:var(--sc-text-sm);padding:var(--sc-space-6)} .sc-slide-panel-shell{background:var(--sc-surface);border-left:1px solid var(--sc-border);display:flex;flex-direction:column} .sc-dialog-header{padding:var(--sc-space-5);border-bottom:1px solid var(--sc-border-light);display:flex;gap:var(--sc-space-3);align-items:flex-start} .sc-dialog-header-icon{width:38px;height:38px;border-radius:var(--sc-radius-lg);display:grid;place-items:center;flex-shrink:0;background:rgba(var(--sc-primary-rgb),.12);color:var(--sc-primary-500)} .sc-dialog-header-icon.warn{background:rgba(245,158,11,.14);color:var(--sc-warning-500)} .sc-dialog-header-icon.danger{background:rgba(239,68,68,.14);color:var(--sc-danger-500)} .sc-dialog-header h3{margin:0;font-size:var(--sc-text-base);font-weight:var(--sc-font-semibold)} .sc-slide-panel-body{padding:var(--sc-space-6);flex:1;font-size:var(--sc-text-sm);overflow-y:auto} .dialog-actions{padding:var(--sc-space-4) var(--sc-space-6);border-top:1px solid var(--sc-border-light);display:flex;justify-content:flex-end;gap:var(--sc-space-3)} /* The wizard shell (.bx-* / .bw-*) USED TO LIVE HERE and has moved to the design system's wizard-rail.css. It styles roughly fifteen wizards across Academics, Administration, Communication, Operations and Facilities; a stylesheet owned by the People module is the wrong place to decide how all of them look, and editing it to fix one Communications page is what made that concrete. Add wizard-shell rules there, not here. */ .dz{border:1px dashed var(--sc-border-strong);border-radius:var(--sc-radius-lg);padding:var(--sc-space-6);text-align:center;color:var(--sc-text-muted);font-size:var(--sc-text-sm)} .dz .material-symbols-outlined{font-size:26px;display:block;margin-bottom:6px} @media(max-width:1100px){.app{grid-template-columns:1fr}.nav{display:none}} /* Facet-bar additions. The base .sc-facet rules above come from the design; these two express what the spec renders with inline styles, so the rule lives with the component rather than in markup. */ .sc-facet-divider { width: 1px; height: 22px; background: var(--sc-border); margin: 0 var(--sc-space-2); display: inline-block; } /* "Needs attention" is dashed because it is a derived state, not a category of person. */ .sc-facet-dashed { border-style: dashed; } .sc-facet-dashed .material-symbols-outlined { font-size: 16px; } /* Wizard step 3 document drop zone (design wz-3). */ .dz-sub { font-size: 11.5px; margin-top: 6px; } /* A chip acting as a toggle is a button in our markup; the design renders it as a tag, so the button chrome is removed rather than the tag being re-implemented as a span. */ button.sc-tag { cursor: pointer; font-family: inherit; } /* Staff side panels (design screens pn-*). Global rather than page-scoped because the panels are shared components used from several pages, and a scoped rule would not reach them. */ .pn-body { display: flex; flex-direction: column; } .pn-field { margin-bottom: var(--sc-space-4); } .pn-radio-list { display: flex; flex-direction: column; gap: 7px; } .pn-radio { display: flex; gap: 10px; align-items: center; cursor: pointer; border: 1px solid var(--sc-border); background: transparent; border-radius: var(--sc-radius-lg); padding: 9px 12px; font-size: 13.5px; } .pn-radio.on { border-color: var(--sc-primary-500); background: rgba(var(--sc-primary-rgb), .07); } .pn-consequences { border: 1px solid var(--sc-border-light); border-radius: var(--sc-radius-lg); overflow: hidden; margin-bottom: var(--sc-space-4); } .pn-box-arrow { border-color: var(--sc-primary-500); } .pn-box-arrow .material-symbols-outlined { font-size: 13px; color: var(--sc-primary-500); } .pn-ack { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13.5px; } .pn-ack input { margin-top: 3px; } .pn-slot-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pn-slot-sub { font-size: var(--sc-text-xs); color: var(--sc-text-muted); } .pn-slot-date { font-size: var(--sc-text-xs); color: var(--sc-text-muted); white-space: nowrap; } .pn-slot-picker { margin-top: calc(var(--sc-space-2) * -1); } .pn-candidates { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sc-space-2); } .pn-balance { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border: 1px solid var(--sc-border-light); border-radius: var(--sc-radius-lg); background: var(--sc-surface-variant); font-size: var(--sc-text-sm); margin-bottom: var(--sc-space-4); } /* Going below zero is shown, not blocked: some leave types legitimately go negative and the approver needs to see it rather than be stopped by the form. */ .pn-balance-over { color: var(--sc-danger-500); } .pn-current { border: 1px solid var(--sc-border-light); border-radius: var(--sc-radius-lg); padding: 11px 13px; margin-bottom: var(--sc-space-4); background: var(--sc-surface-variant); } .pn-current-label { font-size: var(--sc-text-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--sc-text-muted); font-weight: var(--sc-font-semibold); } .pn-current-value { display: flex; align-items: center; gap: var(--sc-space-3); margin-top: 5px; } .pn-inline-badge { margin-left: var(--sc-space-2); } .pn-warn { display: flex; gap: 11px; align-items: flex-start; border-left: 3px solid var(--sc-warning-500); background: rgba(245, 158, 11, .07); border-radius: var(--sc-radius-lg); padding: 12px 14px; font-size: 13.5px; margin-bottom: var(--sc-space-4); } .pn-warn .material-symbols-outlined { color: var(--sc-warning-500); } .pn-warn-info { border-left-color: var(--sc-info-500); background: rgba(6, 182, 212, .07); } .pn-warn-info .material-symbols-outlined { color: var(--sc-info-500); } .pn-role-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } /* Shown only once the verified box is ticked, so it needs its own top gap. */ .pn-verify-method { margin-top: var(--sc-space-3); } .pn-field-hint { margin-top: 5px; } /* Directory bulk-selection bar (design dir-bulk). Sits IN FLOW immediately above the table, matching the student directory's .bulk-action-bar (StudentList.razor.css) — the two directories are the same screen for two populations and a selection bar that behaves differently on each is a needless difference. It was a bottom-centred `position: fixed` pill until 2026-09-09. That was genuinely on screen (measured on the deployed portal: rect top 826 in a 900px viewport, no ancestor creating a containing block), but it sat at the far bottom edge, ~400px below the row being ticked and drawn over the list — far enough from the checkbox to read as "a selection has no actions". ⚠ NOT `position: sticky`: the shell makes sticky inert everywhere. `.sc-main-layout` and `.sc-body` set `overflow-x: hidden`, which computes `overflow-y` to `auto` and makes them scroll containers that never scroll, so a sticky descendant is pinned to a box that does not move. Measured: a sticky bar tracked the scroll 1:1 (top 364 → -36 → -836), and `.sc-header`'s own `position: sticky; top: 0` does not stick either. The primary border and the tinted ground are what carry it instead — in flow it has no shadow to lift it off the page, so the colour has to do that work. */ .dir-bulk-bar { display: flex; align-items: center; gap: var(--sc-space-4); flex-wrap: wrap; margin-bottom: var(--sc-space-4); padding: 10px 14px 10px 18px; background: var(--sc-primary-50, var(--sc-surface)); border: 1px solid var(--sc-primary-500); border-radius: 14px; animation: dirBulkAppear 0.2s ease; } @keyframes dirBulkAppear { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .dir-bulk-bar { animation: none; } } .dir-bulk-count { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 700; color: var(--sc-text-primary); } .dir-bulk-count .material-symbols-outlined, .dir-bulk-count .rzi { font-size: 1.15rem; color: var(--sc-primary-500); } .dir-bulk-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-left: var(--sc-space-4); border-left: 1px solid var(--sc-border); } /* Profile overview cards (design pr-over). Each card is a doorway into its rail section — cards are shortcuts, not just summaries. */ .pc-clickable { cursor: pointer; } .pc-clickable:hover { border-color: var(--sc-primary-500); } /* A card takes the warning treatment only when it genuinely needs attention. A permanent amber border would stop being read. */ .pc-card-warn { border-color: rgba(245, 158, 11, .4); } .pc-icon-warn { background: rgba(245, 158, 11, .14); color: var(--sc-warning-500); } .pc-text-warn { color: var(--sc-warning-500); } /* A card header carrying the warning tone (design pr-registration). The tint sits on the header rather than the whole card so the facts underneath stay on the normal reading surface. */ .pc-card-header-warn { background: rgba(245, 158, 11, .06); } .pc-text-bad { color: var(--sc-danger-500); } /* Buttons that belong to a card's body, under its facts. */ .pc-card-actions { display: flex; gap: var(--sc-space-2); flex-wrap: wrap; margin-top: var(--sc-space-4); } /* A note that closes a section rather than opening a form field. */ .pc-section-note { margin-top: var(--sc-space-4); } .pc-card-action { margin-top: var(--sc-space-3); } .pc-card-action-btn { width: 100%; justify-content: center; } .pc-leave-bars { margin-bottom: var(--sc-space-3); } /* ── Leave section (design pr-leave) ───────────────────────────────────────────────────── The balance card, the twelve-month pattern and the request register. */ /* A native select styled as the design's header dropdown. It sits in a card header, so it is sized down from the filter-bar dropdown rather than inheriting it. */ .pc-year-select { padding: 3px 8px; font-size: var(--sc-text-xs); font-family: inherit; } /* Carry-over on the left, the leave-year basis on the right — both are footnotes to the bars above, which is why they share the foot-note rule rather than becoming another card. */ .pc-balance-foot { display: flex; justify-content: space-between; gap: var(--sc-space-4); flex-wrap: wrap; margin-top: var(--sc-space-4); } .pc-balance-foot strong { color: var(--sc-text-primary); } /* Twelve columns, one per month, always all twelve — a chart that only draws the months with leave in them cannot show the shape of the year, which is the whole point of it. */ .pc-pattern { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; align-items: end; margin-bottom: var(--sc-space-3); } .pc-pattern-col { text-align: center; } .pc-pattern-bar { background: var(--sc-primary-500); border-radius: 2px; margin-bottom: 4px; } /* A month with nothing taken keeps a flat stub in the track colour: visibly a zero, not a missing bar. */ .pc-pattern-none { background: var(--sc-surface-variant); } .pc-pattern-peak { background: var(--sc-warning-500); } .pc-pattern-lbl { font-size: 9.5px; color: var(--sc-text-muted); } .pc-pattern-note { font-size: var(--sc-text-xs); color: var(--sc-text-muted); line-height: 1.6; } /* A leave type taken past its entitlement. Shown rather than clamped out of sight — some types legitimately go negative and the approver has to be able to see it. */ .bar-fill-over { background: var(--sc-danger-500); } /* A control that reads as a link inside running prose. A raw