/* 2026-09-24 UI/UX performance pass. This is the final layout layer: it keeps the established controls but gives every viewport a deliberate information density and avoids tablet table pans. */ :root { --pass-page-gutter: 16px; --pass-space: 10px; --pass-tight: 8px; --pass-control: 42px; --pass-card: 12px; } #announcerOperationalApp.wrap { width: min(calc(100% - (var(--pass-page-gutter) * 2)), 1540px) !important; padding-bottom: 18px !important; } #announcerOperationalApp :is(.topbar, .topbar-actions, .topbar-context, .reference-task-heading, .roster-date-controls, .roster-toolbar, .roster-mobile-entry) { min-width: 0; } #announcerOperationalApp :is(select, input, button) { max-width: 100%; } /* Desktop: context is one compact row, actions stay with the task. */ @media (min-width: 1101px) { #announcerOperationalApp .topbar { min-height: 60px !important; padding: 0 16px !important; gap: 16px !important; grid-template-columns: minmax(200px, .62fr) minmax(0, 2.38fr) !important; } #announcerOperationalApp .brand-lockup { padding-right: 16px !important; } #announcerOperationalApp .topbar-context :is(#locationSelect, #viewSelect, .identity-pill) { height: 40px !important; min-height: 40px !important; } #announcerOperationalApp .topbar-context #locationSelect { width: min(260px, 30vw) !important; } #announcerOperationalApp .topbar-context #viewSelect { width: 126px !important; } #announcerOperationalApp .topbar-context .identity-pill { width: 142px !important; padding-inline: 12px !important; } #announcerOperationalApp .reference-task-heading { margin-top: 12px !important; padding: 12px 18px !important; gap: 16px !important; } #announcerOperationalApp .reference-task-copy h1 { font-size: 24px !important; } #announcerOperationalApp .reference-task-copy p { margin-top: 2px !important; font-size: 14px !important; } #announcerOperationalApp .reference-primary-actions { gap: 8px !important; } #announcerOperationalApp .reference-primary-actions :is(#uploadHtmlBtn, #speakerPanelBtn) { min-width: 132px !important; height: 42px !important; min-height: 42px !important; padding-inline: 14px !important; } #announcerOperationalApp .reference-primary-actions .topbar-more summary { width: 42px !important; min-width: 42px !important; height: 42px !important; } #announcerOperationalApp #panelRoster .time-block-card { padding: 12px 18px 0 !important; } #announcerOperationalApp #panelRoster .roster-date-controls { grid-template-columns: 178px minmax(260px, .9fr) minmax(280px, 1.1fr) !important; max-width: none !important; gap: 12px !important; } #announcerOperationalApp .reference-session-summary { margin: 0 !important; padding: 0 0 12px 16px !important; border-top: 0 !important; border-left: 1px solid var(--ref-line) !important; align-self: stretch !important; } #announcerOperationalApp #panelRoster .roster-card { padding: 12px 18px 0 !important; } #announcerOperationalApp #panelRoster .roster-toolbar { grid-template-columns: auto minmax(260px, 1fr) auto !important; gap: 8px 14px !important; } #announcerOperationalApp #panelRoster #tagLegend { padding-top: 7px !important; } #announcerOperationalApp #panelRoster .roster-table-wrap { margin: 8px -18px 0 !important; } #announcerOperationalApp #panelRoster .roster-table td { padding-block: 6px !important; } } /* Tablet: cards are the primary roster surface. This keeps every action reachable without relying on a horizontal table rail. */ @media (min-width: 600px) and (max-width: 1100px) { #announcerOperationalApp.wrap { width: min(calc(100% - 24px), 1100px) !important; } #announcerOperationalApp .topbar { min-height: 0 !important; padding: 10px 14px !important; gap: 8px !important; } #announcerOperationalApp .brand-lockup { display:none !important; } #announcerOperationalApp .topbar-actions { width:100% !important; } #announcerOperationalApp .topbar-context { grid-template-columns:minmax(0, 1fr) 120px minmax(132px, .72fr) !important; gap:0 !important; } #announcerOperationalApp .topbar-context :is(#locationSelect, #viewSelect, .identity-pill) { width:auto !important; height:42px !important; min-height:42px !important; } #announcerOperationalApp .reference-task-heading { margin-top:8px !important; padding:10px 14px !important; border-radius:12px 12px 0 0 !important; } #announcerOperationalApp .reference-task-copy h1 { font-size:21px !important; } #announcerOperationalApp .reference-task-copy p { display:none !important; } #announcerOperationalApp .reference-primary-actions { gap:8px !important; } #announcerOperationalApp .reference-primary-actions :is(#uploadHtmlBtn, #speakerPanelBtn) { min-width:112px !important; height:42px !important; min-height:42px !important; padding-inline:10px !important; } #announcerOperationalApp #panelRoster .time-block-card { padding:10px 14px 0 !important; } #announcerOperationalApp #panelRoster .roster-date-controls { grid-template-columns:160px minmax(0, 1fr) !important; gap:10px !important; } #announcerOperationalApp .reference-session-summary { margin-top:8px !important; padding:8px 0 10px !important; } #announcerOperationalApp #panelRoster .roster-card { padding:10px 14px 0 !important; } #announcerOperationalApp #panelRoster .roster-toolbar { padding:0 !important; grid-template-columns:minmax(0,1fr) 140px !important; gap:8px 10px !important; } #announcerOperationalApp #panelRoster #tagLegend { max-width:100% !important; overflow-x:auto !important; white-space:nowrap !important; scrollbar-width:thin; } #announcerOperationalApp #panelRoster #rosterMobileList { margin:6px -14px 0 !important; padding-inline:14px !important; } #announcerOperationalApp #panelRoster .roster-mobile-entry { grid-template-columns:100px minmax(0,1fr) 44px !important; gap:4px 10px !important; padding:11px 0 !important; } #announcerOperationalApp #panelRoster .roster-mobile-actions .attWrap { gap:8px !important; } #announcerOperationalApp #panelRoster .roster-mobile-actions .attBtn { width:44px !important; min-width:44px !important; height:44px !important; min-height:44px !important; } } /* Phone: one command at a time, clear cards, and no control wrapping. */ @media (max-width: 599px) { :root { --pass-page-gutter: 0px; } #announcerOperationalApp.wrap { width:100% !important; padding-bottom:76px !important; } #announcerOperationalApp .topbar { min-height:58px !important; padding:0 14px !important; } #announcerOperationalApp .brand-title { font-size:18px !important; } #announcerOperationalApp .reference-task-heading { padding:10px 14px 12px !important; gap:10px !important; } #announcerOperationalApp .reference-primary-actions #uploadHtmlBtn { height:46px !important; min-height:46px !important; } #announcerOperationalApp #panelRoster .time-block-card { padding:0 14px 10px !important; } #announcerOperationalApp .reference-session-summary { margin-top:10px !important; padding:10px !important; } #announcerOperationalApp #panelRoster .roster-card { padding:12px 0 0 !important; } #announcerOperationalApp #panelRoster .roster-toolbar { padding:0 14px !important; gap:9px !important; } #announcerOperationalApp #panelRoster .roster-actions select { min-width:116px !important; max-width:116px !important; } #announcerOperationalApp #panelRoster #rosterMobileList { padding:6px 14px 0 !important; } #announcerOperationalApp #panelRoster .roster-mobile-entry { grid-template-columns:100px minmax(0,1fr) 44px !important; gap:4px 9px !important; padding:12px 0 !important; } #announcerOperationalApp #panelRoster .roster-mobile-actions .attWrap { gap:8px !important; } #announcerOperationalApp #panelRoster .roster-mobile-actions .attBtn { width:44px !important; min-width:44px !important; height:44px !important; min-height:44px !important; } } /* Full-name disclosure is deliberately a plain button, so it works with touch, keyboard, and screen readers instead of relying on a hover-only title. */ #announcerOperationalApp .roster-mobile-name { display:block; width:100%; margin:0; padding:0; border:0; background:transparent; color:var(--ref-navy); font:inherit; font-weight:800; text-align:left; cursor:pointer; } #announcerOperationalApp .roster-mobile-name:not([aria-expanded="true"]) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #announcerOperationalApp .roster-mobile-name[aria-expanded="true"] { white-space:normal; overflow-wrap:anywhere; } #announcerOperationalApp .roster-mobile-name:focus-visible { outline:2px solid var(--ref-blue); outline-offset:3px; border-radius:3px; } body.dark-mode #announcerOperationalApp .roster-mobile-name { color:var(--ref-ink); } /* The desktop table is retained only where it is a scan-efficient surface. */ @media (min-width:1101px) { #announcerOperationalApp #panelRoster #rosterMobileList { display:none !important; } } /* Adaptive density refinement (2026-09-24). The command bar, session picker and roster toolbar share one compact rhythm; all operational actions remain in their existing DOM locations. */ @media (min-width: 1101px) { #announcerOperationalApp.wrap { width:min(calc(100% - 28px), 1580px) !important; } #announcerOperationalApp .topbar { grid-template-columns:240px minmax(0,1fr) !important; min-height:58px !important; padding:8px 14px !important; gap:14px !important; } #announcerOperationalApp .brand-lockup { min-height:42px !important; padding-right:14px !important; } #announcerOperationalApp .brand-lockup img { width:38px !important; height:38px !important; flex-basis:38px !important; } #announcerOperationalApp .brand-title { font-size:18px !important; } #announcerOperationalApp .brand-powered { display:none !important; } #announcerOperationalApp .topbar-actions { display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas:'context utility' !important; align-items:center !important; gap:10px !important; } #announcerOperationalApp .topbar-context { display:grid !important; grid-template-columns:minmax(190px,280px) 118px minmax(128px,168px) !important; justify-content:end !important; gap:6px !important; } #announcerOperationalApp .topbar-context :is(#locationSelect,#viewSelect,.identity-pill) { height:40px !important; min-height:40px !important; } #announcerOperationalApp .topbar-context #locationSelect { width:auto !important; } #announcerOperationalApp .topbar-context #viewSelect { width:auto !important; } #announcerOperationalApp .topbar-context .identity-pill { width:auto !important; } #announcerOperationalApp .topbar-status { display:none !important; } #announcerOperationalApp .reference-primary-actions { display:flex !important; align-items:center !important; gap:6px !important; } #announcerOperationalApp .reference-primary-actions :is(#uploadHtmlBtn,#speakerPanelBtn) { min-width:112px !important; height:40px !important; min-height:40px !important; padding-inline:11px !important; } #announcerOperationalApp .reference-primary-actions .topbar-more summary { width:40px !important; min-width:40px !important; height:40px !important; } #announcerOperationalApp #panelRoster .time-block-card { padding:8px 14px 0 !important; } #announcerOperationalApp #panelRoster .roster-date-controls { grid-template-columns:168px minmax(230px,.85fr) minmax(330px,1.15fr) !important; gap:10px !important; } #announcerOperationalApp .reference-session-summary { padding:1px 0 9px 13px !important; } #announcerOperationalApp #panelRoster .roster-card { padding:8px 14px 0 !important; } #announcerOperationalApp #panelRoster .roster-toolbar { grid-template-columns:auto minmax(240px,1fr) auto !important; gap:6px 12px !important; } #announcerOperationalApp #panelRoster #tagLegend { min-height:25px !important; padding-top:3px !important; } } /* Tablet gets a short two-line command area. The roster stays card-based and page-scrollable, which avoids the low-resolution horizontal rail. */ @media (min-width:600px) and (max-width:1100px) { #announcerOperationalApp .topbar { display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas:'context utility' !important; align-items:center !important; min-height:54px !important; padding:8px 12px !important; gap:8px !important; } #announcerOperationalApp .topbar-actions { display:contents !important; } #announcerOperationalApp .topbar-context { display:grid !important; grid-area:context !important; grid-template-columns:minmax(0,1fr) 112px minmax(126px,.62fr) !important; gap:6px !important; } #announcerOperationalApp .topbar-context :is(#locationSelect,#viewSelect,.identity-pill) { height:42px !important; min-height:42px !important; } #announcerOperationalApp .topbar-status { display:none !important; } #announcerOperationalApp .reference-primary-actions { grid-area:utility !important; display:flex !important; gap:6px !important; } #announcerOperationalApp .reference-primary-actions :is(#uploadHtmlBtn,#speakerPanelBtn) { min-width:102px !important; height:42px !important; min-height:42px !important; padding-inline:9px !important; } #announcerOperationalApp .reference-primary-actions .topbar-more summary { width:42px !important; min-width:42px !important; height:42px !important; } #announcerOperationalApp #panelRoster .time-block-card { padding:8px 12px 0 !important; } #announcerOperationalApp #panelRoster .roster-date-controls { grid-template-columns:154px minmax(0,1fr) !important; gap:8px !important; } #announcerOperationalApp .reference-session-summary { margin-top:6px !important; padding:6px 0 8px !important; } #announcerOperationalApp #panelRoster .roster-card { padding:8px 12px 0 !important; } #announcerOperationalApp #panelRoster .roster-toolbar { gap:6px 8px !important; } #announcerOperationalApp #panelRoster #tagLegend { padding-top:3px !important; } } @media (min-width:600px) and (max-width:799px) { #announcerOperationalApp .topbar-context { grid-template-columns:minmax(0,1fr) 96px 112px !important; } #announcerOperationalApp .topbar-context .identity-pill { display:block !important; padding-inline:8px !important; } #announcerOperationalApp .reference-primary-actions #uploadHtmlBtn { min-width:96px !important; } #announcerOperationalApp .reference-primary-actions #speakerPanelBtn { min-width:42px !important; width:42px !important; padding:0 !important; } #announcerOperationalApp .reference-primary-actions #speakerPanelBtn .utility-label { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; } #announcerOperationalApp #panelRoster .roster-toolbar { grid-template-columns:minmax(0,1fr) 132px !important; } } /* Phone cards emphasize the decisions staff make first. Metadata has its own readable row; it never competes with attendance, zone or guardian actions. */ @media (max-width:599px) { #announcerOperationalApp #panelRoster .time-block-card { margin-bottom:8px !important; } #announcerOperationalApp #panelRoster .roster-toolbar { padding-inline:12px !important; gap:7px !important; } #announcerOperationalApp #panelRoster #tagLegend { margin-inline:-2px !important; padding-bottom:2px !important; } #announcerOperationalApp #panelRoster #rosterMobileList { padding-inline:12px !important; } #announcerOperationalApp #panelRoster .roster-mobile-entry { grid-template-columns:100px minmax(0,1fr) 44px !important; gap:5px 8px !important; padding-block:11px !important; } #announcerOperationalApp #panelRoster .roster-mobile-details { line-height:1.45 !important; } #announcerOperationalApp #panelRoster .roster-mobile-zone { margin-top:5px !important; } #announcerOperationalApp #panelRoster .roster-mobile-actions .guardian-callout { width:44px !important; min-width:44px !important; height:44px !important; min-height:44px !important; } } /* Operational console visual system (2026-09-24): one compact command bar, one session strip, and a quiet roster surface. Accent color is reserved for active decisions; row status is communicated by a single left edge. */ :root { --console-page:#f6f8fb; --console-surface:#fff; --console-line:#d8e2ee; --console-muted:#f1f5f9; --console-ink:#102f57; --console-teal:#087e8b; --console-teal-soft:#eefaf9; --console-present:#16834f; --console-absent:#c93340; --console-clear:#456b98; --console-violet:#5b3ea7; --console-violet-soft:#f5f3ff; --console-amber:#86520a; --console-amber-soft:#fff8e8; } body.light-mode { background:var(--console-page) !important; } body.dark-mode { background:#0d1725 !important; } #announcerOperationalApp.wrap { position:relative !important; } #announcerOperationalApp .topbar { background:var(--console-surface) !important; border-color:var(--console-line) !important; box-shadow:0 1px 0 rgb(27 62 108 / .12) !important; } #announcerOperationalApp .reference-task-heading { background:transparent !important; border-top:0 !important; box-shadow:none !important; } #announcerOperationalApp #panelRoster .time-block-card { border-color:var(--console-line) !important; background:var(--console-surface) !important; box-shadow:inset 4px 0 0 var(--console-teal) !important; } #announcerOperationalApp .reference-session-summary { background:var(--console-teal-soft) !important; border-color:#bde8e4 !important; } #announcerOperationalApp .reference-session-summary strong { color:#075a78 !important; } #announcerOperationalApp .reference-session-summary .good, #announcerOperationalApp .reference-session-summary [data-tone="success"] { color:var(--console-present) !important; } #announcerOperationalApp #panelRoster .roster-card { background:var(--console-surface) !important; border-color:var(--console-line) !important; box-shadow:none !important; } #announcerOperationalApp #panelRoster .roster-toolbar { border-bottom:1px solid var(--console-line) !important; background:var(--console-surface) !important; } #announcerOperationalApp #panelRoster .roster-heading h2 { color:var(--console-ink) !important; } #announcerOperationalApp #panelRoster .roster-table thead th { background:var(--console-muted) !important; color:#315781 !important; border-bottom-color:var(--console-line) !important; } /* The colored edge survives interaction without tinting a whole scanning row. */ #announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry].row-here td, #announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry].row-absent td, #announcerOperationalApp #panelRoster .roster-mobile-entry.row-here, #announcerOperationalApp #panelRoster .roster-mobile-entry.row-absent { background:var(--console-surface) !important; } #announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry].row-here td:first-child, #announcerOperationalApp #panelRoster .roster-mobile-entry.row-here { box-shadow:inset 4px 0 0 var(--console-present) !important; } #announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry].row-absent td:first-child, #announcerOperationalApp #panelRoster .roster-mobile-entry.row-absent { box-shadow:inset 4px 0 0 var(--console-absent) !important; } #announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry].row-here:hover td, #announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry].row-absent:hover td { background:#fbfcfe !important; } #announcerOperationalApp #panelRoster .attWrap .attBtn.here[data-attendance-mark] { color:#147a46 !important; border-color:#7ed4a4 !important; background:#f5fdf8 !important; } #announcerOperationalApp #panelRoster .attWrap .attBtn.absent[data-attendance-mark] { color:#bd2734 !important; border-color:#f2aeb4 !important; background:#fff7f7 !important; } #announcerOperationalApp #panelRoster .attWrap .attBtn.clear[data-attendance-mark] { color:#355b89 !important; border-color:#b7cce7 !important; background:var(--console-muted) !important; } #announcerOperationalApp #panelRoster .attWrap .attBtn.active.here[data-attendance-mark] { background:var(--console-present) !important; border-color:var(--console-present) !important; color:#fff !important; } #announcerOperationalApp #panelRoster .attWrap .attBtn.active.absent[data-attendance-mark] { background:var(--console-absent) !important; border-color:var(--console-absent) !important; color:#fff !important; } #announcerOperationalApp #panelRoster .attWrap .attBtn.active.clear[data-attendance-mark] { background:var(--console-clear) !important; border-color:var(--console-clear) !important; color:#fff !important; } #announcerOperationalApp #panelRoster .zone.zone-action { color:var(--console-violet) !important; border-color:#d8ccff !important; background:var(--console-violet-soft) !important; } #announcerOperationalApp #panelRoster .guardian-callout { color:var(--console-amber) !important; border:1px solid #f6d48e !important; background:var(--console-amber-soft) !important; } #announcerOperationalApp #panelRoster .guardian-callout:hover { background:#fff0c9 !important; border-color:#e6bd61 !important; } #announcerOperationalApp #panelRoster :is(.attBtn,.zone.zone-action,.guardian-callout):focus-visible { outline:3px solid rgb(37 99 235 / .36) !important; outline-offset:2px !important; } @media (min-width:1101px) { #announcerOperationalApp #panelRoster .roster-table .attBtn { width:44px !important; min-width:44px !important; height:44px !important; min-height:44px !important; } #announcerOperationalApp #panelRoster .roster-table .guardian-callout { min-height:44px !important; } } body.dark-mode #announcerOperationalApp .topbar { background:#13243a !important; border-color:#2d4966 !important; box-shadow:0 1px 0 rgb(203 229 255 / .14) !important; } body.dark-mode #announcerOperationalApp .reference-task-heading { background:transparent !important; } body.dark-mode #announcerOperationalApp #panelRoster .time-block-card { background:#14283a !important; border-color:#2d6b70 !important; box-shadow:inset 4px 0 0 #36c8b9 !important; } body.dark-mode #announcerOperationalApp .reference-session-summary { background:#123d3a !important; border-color:#286b66 !important; } body.dark-mode #announcerOperationalApp .reference-session-summary strong { color:#83eee4 !important; } body.dark-mode #announcerOperationalApp #panelRoster .roster-card, body.dark-mode #announcerOperationalApp #panelRoster .roster-toolbar { background:#152b43 !important; border-color:#2b5277 !important; box-shadow:none !important; } body.dark-mode #announcerOperationalApp #panelRoster .roster-heading h2 { color:#cfe4ff !important; } body.dark-mode #announcerOperationalApp #panelRoster .roster-table thead th { background:#1b3858 !important; color:#d4e7ff !important; border-bottom-color:#3f668e !important; } body.dark-mode #announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry].row-here td, body.dark-mode #announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry].row-absent td, body.dark-mode #announcerOperationalApp #panelRoster .roster-mobile-entry.row-here, body.dark-mode #announcerOperationalApp #panelRoster .roster-mobile-entry.row-absent { background:#152b43 !important; } body.dark-mode #announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry].row-here td:first-child, body.dark-mode #announcerOperationalApp #panelRoster .roster-mobile-entry.row-here { box-shadow:inset 4px 0 0 #4ed58c !important; } body.dark-mode #announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry].row-absent td:first-child, body.dark-mode #announcerOperationalApp #panelRoster .roster-mobile-entry.row-absent { box-shadow:inset 4px 0 0 #ff8090 !important; } body.dark-mode #announcerOperationalApp #panelRoster .attWrap .attBtn.here[data-attendance-mark] { color:#9de6bd !important; border-color:#3d9870 !important; background:#153d31 !important; } body.dark-mode #announcerOperationalApp #panelRoster .attWrap .attBtn.absent[data-attendance-mark] { color:#ffbdc3 !important; border-color:#ae5360 !important; background:#472b35 !important; } body.dark-mode #announcerOperationalApp #panelRoster .attWrap .attBtn.clear[data-attendance-mark] { color:#d8e7fb !important; border-color:#6685aa !important; background:#1b3858 !important; } body.dark-mode #announcerOperationalApp #panelRoster .zone.zone-action { color:#e2d8ff !important; border-color:#7862b6 !important; background:#30264e !important; } body.dark-mode #announcerOperationalApp #panelRoster .guardian-callout { color:#ffe0a0 !important; border-color:#8b6728 !important; background:#3f3219 !important; } body.dark-mode #announcerOperationalApp #panelRoster .guardian-callout:hover { background:#57431c !important; border-color:#c49b41 !important; } /* Local date navigation keeps prior and future rosters one tap away without widening the operations surface or creating a horizontal scroll rail. */ #announcerOperationalApp #panelRoster .roster-date-field { grid-area:date !important; min-width:0 !important; } #announcerOperationalApp #panelRoster .roster-date-field > label { display:block !important; margin:0 0 5px !important; color:var(--ref-ink) !important; font-size:14px !important; font-weight:800 !important; letter-spacing:0 !important; text-transform:none !important; } #announcerOperationalApp #panelRoster .roster-date-command { display:grid !important; grid-template-columns:minmax(0, 1fr) auto !important; gap:6px !important; align-items:center !important; } #announcerOperationalApp #panelRoster .roster-date-command #rosterDate { grid-area:auto !important; width:100% !important; min-width:0 !important; height:42px !important; margin:0 !important; } #announcerOperationalApp #panelRoster .roster-date-nav { display:flex !important; gap:4px !important; min-width:0 !important; } #announcerOperationalApp #panelRoster .roster-date-nav-btn { display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; min-height:42px !important; padding:0 8px !important; white-space:nowrap !important; font-size:13px !important; font-weight:800 !important; } #announcerOperationalApp #panelRoster .roster-date-nav-btn > [aria-hidden="true"] { font-size:22px !important; font-weight:500 !important; line-height:1 !important; } #announcerOperationalApp #panelRoster .roster-date-today { color:var(--ref-blue) !important; border-color:#aac6ff !important; background:#f3f7ff !important; } #announcerOperationalApp #panelRoster .roster-date-controls > label[for="rosterDate"], #announcerOperationalApp #panelRoster #setDateBtn { display:none !important; } #announcerOperationalApp #panelRoster .roster-date-controls { grid-template-areas:'date-label session-label' 'date session' !important; grid-template-columns:minmax(310px, .9fr) minmax(0, 1fr) !important; } #announcerOperationalApp #panelRoster .roster-date-field { grid-area:date !important; } @media (min-width:600px) and (max-width:1100px) { #announcerOperationalApp #panelRoster .roster-date-controls { grid-template-areas:'date-label session-label' 'date session' !important; grid-template-columns:minmax(280px, .9fr) minmax(0, 1fr) !important; } #announcerOperationalApp #panelRoster .roster-date-nav-btn { min-height:44px !important; } } @media (max-width:599px) { #announcerOperationalApp #panelRoster .roster-date-controls { display:grid !important; grid-template-areas:'date' 'session' !important; grid-template-columns:minmax(0, 1fr) !important; gap:10px !important; } #announcerOperationalApp #panelRoster .roster-date-command { grid-template-columns:minmax(0, 1fr) !important; } #announcerOperationalApp #panelRoster .roster-date-nav { display:grid !important; grid-template-columns:1fr 1.08fr 1fr !important; width:100% !important; } #announcerOperationalApp #panelRoster .roster-date-nav-btn { width:100% !important; min-height:44px !important; padding-inline:6px !important; } } body.dark-mode #announcerOperationalApp #panelRoster .roster-date-today { color:#c7d9ff !important; border-color:#4d78bc !important; background:#1c355c !important; } /* Cross-workspace operations pass (2026-09-25). All workspaces use the same compact operational vocabulary. This terminal layer deliberately changes presentation only: hidden, disabled, and role states remain owned by the existing markup and runtime. */ :root { --workspace-surface: #ffffff; --workspace-quiet: #f5f8fc; --workspace-line: #d7e3f0; --workspace-navy: #102f57; --workspace-muted: #617a9c; --workspace-teal: #087e8b; --workspace-teal-soft: #eefaf9; --workspace-blue: #2563eb; --workspace-violet: #6840ae; --workspace-violet-soft: #f5f1ff; --workspace-amber: #885207; --workspace-amber-soft: #fff8e9; } #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelVirtualDesk, #panelLifeguard, #panelGuardTasks, #panelAdmin):not(.hidden) { display: grid; gap: 12px; min-width: 0; } #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin) > .card, #announcerOperationalApp #panelAnnouncements .grid > .card, #announcerOperationalApp #panelVirtualDesk .card { border-color: var(--workspace-line) !important; background: var(--workspace-surface) !important; box-shadow: 0 1px 0 rgb(27 62 108 / .10) !important; } #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin) h2, #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin) h3 { color: var(--workspace-navy) !important; letter-spacing: -.015em; } #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin) .tiny { color: var(--workspace-muted) !important; } #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin) :is(input, select, textarea) { border-color: var(--workspace-line) !important; background: #fff !important; color: var(--workspace-navy) !important; box-shadow: none !important; } #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin) :is(button, input, select, textarea):focus-visible { outline: 3px solid rgb(37 99 235 / .30) !important; outline-offset: 2px !important; } /* Announcements: the delivery state is always the first thing an operator sees. */ #announcerOperationalApp #panelAnnouncements .page-heading { display: flex !important; align-items: center !important; min-height: 66px; margin: 0 !important; padding: 12px 16px !important; border-left: 4px solid var(--workspace-violet) !important; } #announcerOperationalApp #panelAnnouncements .page-heading h2 { margin: 0 !important; } #announcerOperationalApp #panelAnnouncements .announcement-delivery-status { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 14px; border: 1px solid #c5e7e4; border-left: 4px solid var(--workspace-teal); border-radius: 10px; background: var(--workspace-teal-soft); color: #075a78; font-weight: 750; } #announcerOperationalApp #panelAnnouncements .announcement-delivery-icon { color: var(--workspace-violet); } #announcerOperationalApp #panelAnnouncements .announcement-delivery-status button { margin-left: auto; min-height: 38px !important; } #announcerOperationalApp #panelAnnouncements > .grid { display: grid !important; grid-template-columns: minmax(0, 1.45fr) minmax(250px, .8fr) !important; gap: 12px !important; align-items: start; } #announcerOperationalApp #panelAnnouncements > .grid > .card { padding: 14px !important; } #announcerOperationalApp #panelAnnouncements textarea { display: block; width: 100%; min-height: 116px; resize: vertical; } #announcerOperationalApp #panelAnnouncements :is(.row, .grid > .card > .row) { gap: 8px !important; flex-wrap: wrap !important; } #announcerOperationalApp #panelAnnouncements #speakBtn { min-height: 42px !important; } #announcerOperationalApp #panelAnnouncements #lastText, #announcerOperationalApp #panelAnnouncements #announcementHistory { padding: 8px 10px; border-left: 3px solid #d8ccff; background: var(--workspace-violet-soft) !important; border-radius: 6px; } #announcerOperationalApp #panelAnnouncements :is(#presetFrontDeck, #presetCodeGreen, #presetCodeBrown) { flex: 1 1 140px; min-height: 42px !important; border-color: #d9ccff !important; background: var(--workspace-violet-soft) !important; color: var(--workspace-violet) !important; } /* Chemistry: make rounds and pool cards one coherent progression surface. */ #announcerOperationalApp #panelChemReadings > .card:first-child { padding: 12px 16px !important; border-left: 4px solid var(--workspace-teal) !important; } #announcerOperationalApp #panelChemReadings .page-heading { margin: 0 0 10px !important; } #announcerOperationalApp #panelChemReadings .chem-toolbar { display: flex !important; align-items: end !important; gap: 8px !important; flex-wrap: wrap !important; padding-top: 10px; border-top: 1px solid var(--workspace-line); } #announcerOperationalApp #panelChemReadings .chem-toolbar .field { margin: 0 !important; min-width: 146px; } #announcerOperationalApp #panelChemReadings .chem-toolbar .pill { background: var(--workspace-teal-soft) !important; border-color: #bde8e4 !important; color: #075a78 !important; } #announcerOperationalApp #panelChemReadings .chem-grid { gap: 12px !important; } #announcerOperationalApp #panelChemReadings .chem-round-banner { border-color: #bde8e4 !important; border-left: 4px solid var(--workspace-teal) !important; background: var(--workspace-teal-soft) !important; box-shadow: none !important; } #announcerOperationalApp #panelChemReadings .chem-slot { border-width: 1px !important; border-radius: 10px !important; box-shadow: 0 1px 0 rgb(27 62 108 / .08) !important; } #announcerOperationalApp #panelChemReadings .chem-slot-head { gap: 10px !important; } #announcerOperationalApp #panelChemReadings .chem-timestamp { background: var(--workspace-quiet) !important; border-color: var(--workspace-line) !important; } #announcerOperationalApp #panelChemReadings .chem-history { border-color: #c7ddec !important; border-left: 4px solid var(--workspace-blue) !important; background: #f8fbff !important; } #announcerOperationalApp #panelChemReadings .chem-history-date { border-color: var(--workspace-line) !important; background: #fff !important; } #announcerOperationalApp #panelChemReadings .chem-history-date summary { color: var(--workspace-navy) !important; } #announcerOperationalApp #panelChemReadings > .card:last-child { padding: 12px 16px !important; border-left: 4px solid var(--workspace-amber) !important; background: var(--workspace-amber-soft) !important; } /* Guard work: assignments form a compact command sheet; shifts retain their intentional state colors without competing with the task text. */ #announcerOperationalApp #panelLifeguard > .card, #announcerOperationalApp #panelGuardTasks > .card { padding: 14px 16px !important; border-left: 4px solid var(--workspace-blue) !important; } #announcerOperationalApp #panelGuardTasks .guard-page-head { min-height: 46px; margin-bottom: 10px !important; padding-bottom: 10px; border-bottom: 1px solid var(--workspace-line); } #announcerOperationalApp #panelGuardTasks .guard-meta { border-color: #c7ddec !important; background: #f8fbff !important; color: #315781 !important; } #announcerOperationalApp #panelGuardTasks .guard-admin-strip { background: var(--workspace-violet-soft) !important; border-color: #d8ccff !important; } #announcerOperationalApp #panelGuardTasks .guard-setup-row { display: grid !important; grid-template-columns: repeat(5, minmax(140px, 1fr)) !important; gap: 9px !important; align-items: end !important; padding: 12px !important; border-color: var(--workspace-line) !important; background: var(--workspace-quiet) !important; } #announcerOperationalApp #panelGuardTasks .guard-setup-row .spacer { display: none !important; } #announcerOperationalApp #panelGuardTasks .guard-setup-row > button { min-height: 40px !important; } #announcerOperationalApp #panelGuardTasks .guard-hint-text { margin: 10px 0 !important; } #announcerOperationalApp #panelGuardTasks .guard-manager-note { border-color: var(--workspace-teal) !important; color: #315781 !important; } #announcerOperationalApp #panelGuardTasks .guard-grid { gap: 12px !important; } #announcerOperationalApp #panelGuardTasks .guard-section { box-shadow: 0 1px 0 rgb(27 62 108 / .08) !important; } #announcerOperationalApp #panelGuardTasks .guard-section h4 { padding: 10px 12px !important; } #announcerOperationalApp #panelGuardTasks .guard-task { border-color: var(--workspace-line) !important; box-shadow: none !important; } #announcerOperationalApp #panelGuardTasks .guard-task.delegated:not(.done) { border-left: 3px solid var(--workspace-blue) !important; } #announcerOperationalApp #panelGuardTasks .guard-task.done { border-left: 3px solid var(--console-present) !important; } /* The desk uses its own category color without losing the shared surface and compact rhythm. Its section content stays runtime-owned. */ #announcerOperationalApp #panelVirtualDesk .manager-shell { gap: 12px !important; min-width: 0; } #announcerOperationalApp #panelVirtualDesk .manager-sidebar { border-color: var(--workspace-line) !important; box-shadow: 0 1px 0 rgb(27 62 108 / .10) !important; } #announcerOperationalApp #panelVirtualDesk .manager-content { min-width: 0; } #announcerOperationalApp #panelVirtualDesk .manager-section .card { padding: 14px !important; } #announcerOperationalApp #panelVirtualDesk .alert-strip { border-left: 4px solid var(--workspace-amber) !important; } #announcerOperationalApp #panelVirtualDesk .stat-grid { gap: 10px !important; } #announcerOperationalApp #panelVirtualDesk .stat-card, #announcerOperationalApp #panelVirtualDesk .source-health-cell { border-color: var(--workspace-line) !important; background: var(--workspace-quiet) !important; box-shadow: none !important; } #announcerOperationalApp #panelVirtualDesk .manager-subnav { gap: 6px !important; } /* Admin diagnostics are intentionally sober: metrics, tables and status need sharper scan paths, not an additional application visual language. */ #announcerOperationalApp #panelAdmin .admin-superuser-card { border-left: 4px solid var(--workspace-violet) !important; background: var(--workspace-violet-soft) !important; } #announcerOperationalApp #panelAdmin .admin-superuser-card .row { gap: 10px !important; flex-wrap: wrap !important; } #announcerOperationalApp #panelAdmin .admin-list-item, #announcerOperationalApp #panelAdmin .source-health-cell { border-color: var(--workspace-line) !important; background: var(--workspace-quiet) !important; } #announcerOperationalApp #panelAdmin .admin-table-wrap, #announcerOperationalApp #panelAdmin .source-health-list { border-color: var(--workspace-line) !important; background: #fff !important; } #announcerOperationalApp #panelAdmin .admin-table th { background: var(--workspace-quiet) !important; color: #315781 !important; } #announcerOperationalApp #panelAdmin .admin-table :is(th, td) { border-color: var(--workspace-line) !important; } /* Coarse pointers need full targets everywhere, including non-roster panels. This does not alter disabled semantics or reveal content. */ @media (pointer: coarse), (max-width: 1100px) { #announcerOperationalApp #panelRoster .roster-actions :is(button, select), #announcerOperationalApp #panelRoster #bulkAttendanceActions button { min-height: 44px !important; } #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelVirtualDesk, #panelLifeguard, #panelGuardTasks, #panelAdmin) :is(button, select, input[type="date"], input[type="month"], input[type="number"], input[type="text"]) { min-height: 44px !important; } } @media (min-width: 1101px) { #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin):not(.hidden) { gap: 10px; } #announcerOperationalApp #panelAnnouncements > .grid { grid-template-columns: minmax(0, 1.5fr) minmax(280px, .75fr) !important; } #announcerOperationalApp #panelChemReadings .chem-toolbar > .spacer { display: block !important; } #announcerOperationalApp #panelGuardTasks .guard-setup-row > button { font-size: 13px !important; padding-inline: 9px !important; } } @media (min-width: 600px) and (max-width: 1100px) { #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelVirtualDesk, #panelLifeguard, #panelGuardTasks, #panelAdmin):not(.hidden) { gap: 10px; } #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin) > .card { border-radius: 12px !important; } #announcerOperationalApp #panelAnnouncements > .grid { grid-template-columns: minmax(0, 1fr) minmax(250px, .82fr) !important; } #announcerOperationalApp #panelGuardTasks .guard-setup-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #announcerOperationalApp #panelGuardTasks .guard-setup-row > button { min-width: 0 !important; } #announcerOperationalApp #panelVirtualDesk .manager-shell { grid-template-columns: 176px minmax(0, 1fr) !important; } } @media (max-width: 599px) { #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelVirtualDesk, #panelLifeguard, #panelGuardTasks, #panelAdmin):not(.hidden) { gap: 8px; } #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin) > .card, #announcerOperationalApp #panelAnnouncements .grid > .card { padding: 12px !important; border-radius: 0 !important; } #announcerOperationalApp #panelAnnouncements .page-heading { min-height: 0; align-items: flex-start !important; gap: 10px !important; } #announcerOperationalApp #panelAnnouncements .page-heading .secondary { flex: 0 0 auto; min-height: 44px !important; } #announcerOperationalApp #panelAnnouncements .announcement-delivery-status { align-items: flex-start; flex-wrap: wrap; min-height: 0; } #announcerOperationalApp #panelAnnouncements .announcement-delivery-status button { width: 100%; margin-left: 0; } #announcerOperationalApp #panelAnnouncements > .grid { grid-template-columns: minmax(0, 1fr) !important; } #announcerOperationalApp #panelAnnouncements textarea { min-height: 128px; } #announcerOperationalApp #panelChemReadings > .card:first-child { padding: 12px !important; } #announcerOperationalApp #panelChemReadings .chem-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end !important; } #announcerOperationalApp #panelChemReadings .chem-toolbar .field { min-width: 0; } #announcerOperationalApp #panelChemReadings .chem-toolbar :is(button, .pill) { width: 100%; } #announcerOperationalApp #panelChemReadings .chem-round-banner { display: grid !important; gap: 10px !important; } #announcerOperationalApp #panelChemReadings .chem-slot-head { align-items: flex-start !important; } #announcerOperationalApp #panelChemReadings .chem-slot-head .pill { max-width: 100%; } #announcerOperationalApp #panelGuardTasks > .card { padding: 12px !important; } #announcerOperationalApp #panelGuardTasks .guard-page-head { align-items: flex-start !important; } #announcerOperationalApp #panelGuardTasks .guard-page-head .spacer { display: none !important; } #announcerOperationalApp #panelGuardTasks .guard-meta { width: 100%; } #announcerOperationalApp #panelGuardTasks .guard-setup-row { grid-template-columns: minmax(0, 1fr) !important; padding: 10px !important; } #announcerOperationalApp #panelGuardTasks .guard-setup-row > button { width: 100%; } #announcerOperationalApp #panelGuardTasks .guard-grid { grid-template-columns: minmax(0, 1fr) !important; } #announcerOperationalApp #panelVirtualDesk .manager-shell { display: block !important; } #announcerOperationalApp #panelVirtualDesk .manager-sidebar { margin-bottom: 8px; } #announcerOperationalApp #panelVirtualDesk .manager-section .card { padding: 12px !important; } #announcerOperationalApp #panelVirtualDesk .stat-grid, #announcerOperationalApp #panelVirtualDesk .source-health-grid, #announcerOperationalApp #panelAdmin .grid3 { grid-template-columns: minmax(0, 1fr) !important; } #announcerOperationalApp #panelAdmin .admin-table-wrap { overflow-x: auto; } } body.dark-mode #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin) > .card, body.dark-mode #announcerOperationalApp #panelAnnouncements .grid > .card, body.dark-mode #announcerOperationalApp #panelVirtualDesk .card { background: #152b43 !important; border-color: #2b5277 !important; box-shadow: 0 1px 0 rgb(203 229 255 / .12) !important; } body.dark-mode #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin) h2, body.dark-mode #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin) h3 { color: #d6e8ff !important; } body.dark-mode #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin) .tiny { color: #abc2dc !important; } body.dark-mode #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin) :is(input, select, textarea) { background: #12263b !important; border-color: #3b6489 !important; color: #e7f1ff !important; } body.dark-mode #announcerOperationalApp #panelAnnouncements .announcement-delivery-status, body.dark-mode #announcerOperationalApp #panelChemReadings .chem-round-banner { background: #123d3a !important; border-color: #286b66 !important; color: #9dece5 !important; } body.dark-mode #announcerOperationalApp #panelAnnouncements #lastText, body.dark-mode #announcerOperationalApp #panelAnnouncements #announcementHistory, body.dark-mode #announcerOperationalApp #panelAnnouncements :is(#presetFrontDeck, #presetCodeGreen, #presetCodeBrown), body.dark-mode #announcerOperationalApp #panelAdmin .admin-superuser-card { background: #30264e !important; border-color: #7862b6 !important; color: #e6dcff !important; } body.dark-mode #announcerOperationalApp #panelChemReadings .chem-history, body.dark-mode #announcerOperationalApp #panelGuardTasks .guard-setup-row, body.dark-mode #announcerOperationalApp #panelVirtualDesk .stat-card, body.dark-mode #announcerOperationalApp #panelVirtualDesk .source-health-cell, body.dark-mode #announcerOperationalApp #panelAdmin :is(.admin-list-item, .source-health-cell) { background: #132b43 !important; border-color: #365d82 !important; } body.dark-mode #announcerOperationalApp #panelChemReadings > .card:last-child { background: #3f3219 !important; border-color: #8b6728 !important; } /* Roster focus refinement (2026-09-25). The working roster is the decision surface. Date navigation becomes a small context rail, warnings stay legible without claiming a full card, and one blue action family replaces decorative zone/callout color competition. */ #announcerOperationalApp #panelRoster .time-block-card { box-shadow: none !important; border-left-width: 3px !important; } #announcerOperationalApp #panelRoster .session-command-title { display: none !important; } #announcerOperationalApp #panelRoster .time-block-toolbar { align-items: end !important; gap: 10px !important; } #announcerOperationalApp #panelRoster .roster-date-controls { align-items: end !important; padding-bottom: 8px !important; border-bottom: 1px solid var(--console-line) !important; } #announcerOperationalApp #panelRoster .desktop-session-label, #announcerOperationalApp #panelRoster .roster-date-field > label { margin-bottom: 5px !important; color: #486581 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } #announcerOperationalApp #panelRoster .reference-session-summary { align-self: end !important; min-height: 58px !important; padding: 8px 12px !important; border: 1px solid #c5e7e4 !important; border-left: 3px solid var(--console-teal) !important; border-radius: 8px !important; background: #f5fcfb !important; } #announcerOperationalApp #panelRoster .reference-session-summary strong { margin-top: 1px !important; font-size: 18px !important; line-height: 1.2 !important; } #announcerOperationalApp #panelRoster .reference-session-summary small { margin-top: 2px !important; font-size: 13px !important; } #announcerOperationalApp #panelRoster .reference-session-status { align-self: center !important; border: 0 !important; background: #e8f8ef !important; color: #137842 !important; font-weight: 800 !important; } #announcerOperationalApp #deckDateWarning { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 8px !important; min-height: 42px !important; margin-top: 6px !important; padding: 8px 12px !important; border-left: 3px solid var(--console-amber) !important; border-radius: 8px !important; background: #fffaf0 !important; } #announcerOperationalApp #deckDateWarning.hidden { display: none !important; } #announcerOperationalApp #deckDateWarning > div:first-child { font-size: 13px !important; white-space: nowrap !important; } #announcerOperationalApp #deckDateWarning > .tiny { color: #72571f !important; font-size: 13px !important; } #announcerOperationalApp #panelRoster .roster-card { border-top-width: 2px !important; border-top-color: #d5e1ee !important; } #announcerOperationalApp #panelRoster .roster-toolbar { min-height: 62px !important; padding-bottom: 8px !important; } #announcerOperationalApp #panelRoster .roster-heading { display: flex !important; align-items: baseline !important; gap: 8px !important; white-space: nowrap !important; } #announcerOperationalApp #panelRoster .roster-heading h2 { font-size: 24px !important; letter-spacing: -.03em !important; } #announcerOperationalApp #panelRoster #rosterMeta { font-size: 13px !important; font-weight: 700 !important; } #announcerOperationalApp #panelRoster .searchInput { height: 40px !important; border-color: #bfd1e4 !important; background: #fbfdff !important; } #announcerOperationalApp #panelRoster .roster-actions :is(button, select), #announcerOperationalApp #panelRoster #bulkAttendanceActions button { min-height: 40px !important; } #announcerOperationalApp #panelRoster .roster-sort-label { color: #486581 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } #announcerOperationalApp #panelRoster #tagLegend { gap: 6px !important; color: #5b738f !important; } #announcerOperationalApp #panelRoster .legendItem { padding: 2px 5px !important; border-radius: 999px !important; } #announcerOperationalApp #panelRoster .flagBadge { border-color: #cdd9e6 !important; background: #f6f9fc !important; } #announcerOperationalApp #panelRoster .roster-table thead th { height: 42px !important; background: #edf3f8 !important; font-size: 12px !important; letter-spacing: .055em !important; } #announcerOperationalApp #panelRoster .roster-table tbody tr:nth-child(even) td { background: #fbfdff !important; } #announcerOperationalApp #panelRoster .roster-table tbody tr:hover td { background: #f5f9ff !important; } #announcerOperationalApp #panelRoster .roster-table td { border-bottom-color: #e3ebf3 !important; } #announcerOperationalApp #panelRoster .zone.zone-action, #announcerOperationalApp #panelRoster .guardian-callout { color: #185db8 !important; border-color: #bdd4f2 !important; background: #f2f7ff !important; } #announcerOperationalApp #panelRoster .guardian-callout:hover, #announcerOperationalApp #panelRoster .zone.zone-action:hover { border-color: #77a7e7 !important; background: #e7f0ff !important; } @media (min-width: 1280px) { #announcerOperationalApp #panelRoster .time-block-card { padding: 8px 14px 8px !important; } #announcerOperationalApp #panelRoster .time-block-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr) !important; } #announcerOperationalApp #panelRoster .roster-date-controls { grid-template-columns: 392px minmax(220px, 1fr) !important; } #announcerOperationalApp #panelRoster .time-block-toolbar > .spacer, #announcerOperationalApp #panelRoster .time-block-selection, #announcerOperationalApp #panelRoster .blocks { display: none !important; } #announcerOperationalApp #panelRoster .roster-toolbar { grid-template-columns: auto minmax(260px, 1fr) auto !important; } #announcerOperationalApp #panelRoster #tagLegend { grid-column: 1 / -1 !important; order: 5 !important; } #announcerOperationalApp #panelRoster #bulkAttendanceActions { grid-column: 3 !important; justify-self: end !important; } } @media (min-width: 600px) and (max-width: 1100px) { #announcerOperationalApp #panelRoster .time-block-card { padding: 10px 12px !important; } #announcerOperationalApp #panelRoster .reference-session-summary { margin-top: 0 !important; min-height: 64px !important; } #announcerOperationalApp #deckDateWarning { margin: 6px 12px 0 !important; } } @media (max-width: 599px) { #announcerOperationalApp #panelRoster .time-block-card { padding: 10px 12px !important; } #announcerOperationalApp #panelRoster .reference-session-summary { min-height: 0 !important; margin-top: 8px !important; } #announcerOperationalApp #deckDateWarning { margin: 6px 12px 0 !important; } #announcerOperationalApp #deckDateWarning { grid-template-columns: 1fr !important; gap: 2px !important; } #announcerOperationalApp #panelRoster .roster-heading h2 { font-size: 22px !important; } #announcerOperationalApp #panelRoster .legendItem { padding-inline: 3px !important; } } body.dark-mode #announcerOperationalApp #panelRoster .searchInput { background: #12263b !important; border-color: #3b6489 !important; color: #e7f1ff !important; } body.dark-mode #announcerOperationalApp #panelRoster .reference-session-summary { background: #123d3a !important; border-color: #286b66 !important; } body.dark-mode #announcerOperationalApp #panelRoster .reference-session-status { background: #154b31 !important; color: #9de6bd !important; } body.dark-mode #announcerOperationalApp #deckDateWarning { background: #3f3219 !important; border-color: #8b6728 !important; } body.dark-mode #announcerOperationalApp #deckDateWarning > .tiny { color: #ffe0a0 !important; } body.dark-mode #announcerOperationalApp #panelRoster .roster-table tbody tr:nth-child(even) td { background: #172f49 !important; } body.dark-mode #announcerOperationalApp #panelRoster .roster-table tbody tr:hover td { background: #1b3858 !important; } body.dark-mode #announcerOperationalApp #panelRoster .zone.zone-action, body.dark-mode #announcerOperationalApp #panelRoster .guardian-callout { color: #c8dcff !important; border-color: #4e78b7 !important; background: #19385d !important; } /* Keep compact text actions usable on touch hardware even when their labels are short. */ @media (pointer: coarse), (max-width: 1100px) { #announcerOperationalApp #panelRoster .roster-actions :is(button, select), #announcerOperationalApp #panelRoster #bulkAttendanceActions button { min-height: 44px !important; } #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelVirtualDesk, #panelLifeguard, #panelGuardTasks, #panelAdmin) :is(button, select, input[type="date"], input[type="month"], input[type="number"], input[type="text"]) { min-width: 44px !important; min-height: 44px !important; } #announcerOperationalApp #panelAnnouncements :is(#presetFrontDeck, #presetCodeGreen, #presetCodeBrown) { min-height: 44px !important; } } /* Final roster action containment: exactly one compact More glyph and no guardian action may escape its cell. */ #announcerOperationalApp .reference-primary-actions .topbar-more > summary::before { content: "" !important; } #announcerOperationalApp .reference-primary-actions .topbar-more > summary::after { content: "\22EF" !important; display: block !important; color: var(--ref-navy, #112c63) !important; font-size: 24px !important; font-weight: 800 !important; letter-spacing: 0 !important; line-height: 1 !important; } #announcerOperationalApp .reference-primary-actions .topbar-more > summary::-webkit-details-marker { display: none !important; } #announcerOperationalApp #panelRoster .roster-table :is(th, td):last-child { width: 148px !important; min-width: 148px !important; } #announcerOperationalApp #panelRoster .roster-table .guardian-callout { position: relative !important; display: inline-flex !important; box-sizing: border-box !important; align-items: center !important; justify-content: center !important; width: 132px !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; vertical-align: middle !important; } #announcerOperationalApp #panelRoster .roster-table .guardian-callout-label { position: static !important; display: block !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } @media (max-width: 599px) { #announcerOperationalApp #panelRoster .roster-table :is(th, td):last-child { width: 56px !important; min-width: 56px !important; } #announcerOperationalApp #panelRoster .roster-table .guardian-callout { width: 40px !important; min-width: 40px !important; max-width: 40px !important; padding-inline: 0 !important; } #announcerOperationalApp #panelRoster .roster-table .guardian-callout-label { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; } }