/* 2026-09-26 cross-workspace operations system. Terminal presentation layer for the non-roster workspaces. It builds a compact task hierarchy without changing runtime data, permissions, or interaction semantics. Colour identifies a workspace; it never replaces a warning, selected, disabled, or delivery state. */ :root { --ops-system-line: #d7e2ef; --ops-system-ink: #102f57; --ops-system-muted: #627a99; --ops-system-paper: #ffffff; --ops-system-quiet: #f6f9fd; --ops-system-blue: #1864dc; --ops-system-teal: #087e8b; --ops-system-amber: #a15c00; --ops-system-violet: #6242a2; --ops-system-slate: #365777; } #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin):not(.hidden), #announcerOperationalApp #panelVirtualDesk:not(.hidden) { --workspace-accent: var(--ops-system-blue); --workspace-accent-soft: #edf4ff; display: grid; gap: 10px; min-width: 0; isolation: isolate; } #announcerOperationalApp #panelAnnouncements { --workspace-accent: var(--ops-system-violet); --workspace-accent-soft: #f5f1ff; } #announcerOperationalApp #panelChemReadings { --workspace-accent: var(--ops-system-teal); --workspace-accent-soft: #ecfbfa; } #announcerOperationalApp :is(#panelLifeguard, #panelGuardTasks) { --workspace-accent: var(--ops-system-amber); --workspace-accent-soft: #fff7e8; } #announcerOperationalApp #panelVirtualDesk { --workspace-accent: var(--ops-system-violet); --workspace-accent-soft: #f5f1ff; } #announcerOperationalApp #panelAdmin { --workspace-accent: var(--ops-system-slate); --workspace-accent-soft: #eef4f9; } /* Shared surfaces give every workspace the same compact operating rhythm. */ #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin) > .card, #announcerOperationalApp #panelAnnouncements .grid > .card, #announcerOperationalApp #panelVirtualDesk .card { min-width: 0; border: 1px solid var(--ops-system-line) !important; border-radius: 12px !important; background: var(--ops-system-paper) !important; box-shadow: 0 1px 0 rgb(16 47 87 / .08) !important; } #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin) :is(h2, h3, h4), #announcerOperationalApp #panelVirtualDesk :is(h2, h3, h4) { color: var(--ops-system-ink) !important; letter-spacing: -.018em; } #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin) .tiny, #announcerOperationalApp #panelVirtualDesk .tiny { color: var(--ops-system-muted) !important; } #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin, #panelVirtualDesk) :is(input, select, textarea) { border-color: var(--ops-system-line) !important; background: #fff !important; color: var(--ops-system-ink) !important; box-shadow: none !important; } #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin, #panelVirtualDesk) :is(button, input, select, textarea):focus-visible { outline: 3px solid rgb(24 100 220 / .30) !important; outline-offset: 2px !important; } #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin, #panelVirtualDesk) :is(button, input, select, textarea):disabled { opacity: .52; cursor: not-allowed; } /* Announcements: delivery certainty first, compose second, reference history last. */ #announcerOperationalApp #panelAnnouncements .page-heading { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center !important; gap: 12px; min-height: 60px; margin: 0 !important; padding: 11px 15px !important; border-left: 5px solid var(--workspace-accent) !important; } #announcerOperationalApp #panelAnnouncements .page-heading h2 { margin: 0 !important; } #announcerOperationalApp #panelAnnouncements .announcement-delivery-status { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 46px; padding: 9px 13px; border: 1px solid #c9ddec; border-left: 5px solid var(--workspace-accent); border-radius: 10px; background: var(--workspace-accent-soft); color: var(--ops-system-ink); font-weight: 750; } #announcerOperationalApp #panelAnnouncements .announcement-delivery-status .secondary { min-height: 38px !important; } #announcerOperationalApp #panelAnnouncements > .grid { display: grid !important; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .72fr) !important; gap: 10px !important; align-items: start; } #announcerOperationalApp #panelAnnouncements > .grid > .card { padding: 13px !important; } #announcerOperationalApp #panelAnnouncements > .grid > .card:first-child { border-top: 3px solid var(--workspace-accent) !important; } #announcerOperationalApp #panelAnnouncements textarea { display: block; width: 100%; min-height: 124px; resize: vertical; } #announcerOperationalApp #panelAnnouncements :is(.row, .grid > .card > .row) { gap: 8px !important; flex-wrap: wrap !important; } #announcerOperationalApp #panelAnnouncements #speakBtn { min-height: 44px !important; padding-inline: 16px !important; } #announcerOperationalApp #panelAnnouncements #lastText, #announcerOperationalApp #panelAnnouncements #announcementHistory { padding: 9px 10px; border: 1px solid #dfd5f7; border-left: 3px solid var(--workspace-accent); border-radius: 8px; background: #faf8ff !important; } #announcerOperationalApp #panelAnnouncements :is(#presetFrontDeck, #presetCodeGreen, #presetCodeBrown) { width: 100%; min-height: 42px !important; margin: 0 0 7px !important; border-color: #dcd0fb !important; background: var(--workspace-accent-soft) !important; color: #4f3188 !important; font-weight: 750; text-align: left; } /* Chemistry: the round is a progress header, pools are a predictable compact grid. */ #announcerOperationalApp #panelChemReadings > .card:first-child { padding: 12px 15px !important; border-top: 3px solid var(--workspace-accent) !important; } #announcerOperationalApp #panelChemReadings .page-heading { margin: 0 0 9px !important; } #announcerOperationalApp #panelChemReadings .chem-toolbar { display: grid !important; grid-template-columns: repeat(2, minmax(148px, .8fr)) auto auto auto minmax(0, 1fr) auto; align-items: end !important; gap: 8px !important; padding-top: 10px; border-top: 1px solid var(--ops-system-line); } #announcerOperationalApp #panelChemReadings .chem-toolbar .field { min-width: 0; margin: 0 !important; } #announcerOperationalApp #panelChemReadings .chem-toolbar .pill { background: var(--workspace-accent-soft) !important; border-color: #bce5e2 !important; color: #075a78 !important; } #announcerOperationalApp #panelChemReadings .chem-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px !important; } #announcerOperationalApp #panelChemReadings .chem-round-banner, #announcerOperationalApp #panelChemReadings .chem-history { grid-column: 1 / -1; } #announcerOperationalApp #panelChemReadings .chem-round-banner { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; border: 1px solid #bce5e2 !important; border-left: 5px solid var(--workspace-accent) !important; border-radius: 10px !important; background: var(--workspace-accent-soft) !important; box-shadow: none !important; } #announcerOperationalApp #panelChemReadings .chem-progress-strip { grid-column: 1 / -1; gap: 7px !important; } #announcerOperationalApp #panelChemReadings .chem-round-step { border-radius: 8px !important; } #announcerOperationalApp #panelChemReadings .chem-slot { min-width: 0; padding: 11px !important; border: 1px solid var(--ops-system-line) !important; border-top: 3px solid var(--workspace-accent) !important; border-radius: 10px !important; background: #fff !important; box-shadow: 0 1px 0 rgb(16 47 87 / .07) !important; } #announcerOperationalApp #panelChemReadings .chem-slot-head { gap: 8px !important; padding-bottom: 8px; border-bottom: 1px solid var(--ops-system-line); } #announcerOperationalApp #panelChemReadings .chem-timestamp { background: var(--ops-system-quiet) !important; border-color: var(--ops-system-line) !important; } #announcerOperationalApp #panelChemReadings .chem-fields { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; } #announcerOperationalApp #panelChemReadings .chem-fields input { min-width: 0; } #announcerOperationalApp #panelChemReadings .chem-slot .primary { width: 100%; min-height: 42px !important; } #announcerOperationalApp #panelChemReadings .chem-history { border: 1px solid #c8d8e9 !important; border-left: 5px solid var(--ops-system-blue) !important; border-radius: 10px !important; background: #f8fbff !important; } #announcerOperationalApp #panelChemReadings > .card:last-child { padding: 11px 15px !important; border-left: 5px solid var(--ops-system-amber) !important; background: #fffbf2 !important; } /* Guard tasks: setup reads like a command sheet, then shift columns guide work. */ #announcerOperationalApp #panelLifeguard > .card, #announcerOperationalApp #panelGuardTasks > .card { padding: 13px 15px !important; border-top: 3px solid var(--workspace-accent) !important; } #announcerOperationalApp #panelGuardTasks .guard-page-head { min-height: 44px; margin-bottom: 10px !important; padding-bottom: 10px; border-bottom: 1px solid var(--ops-system-line); } #announcerOperationalApp #panelGuardTasks .guard-meta { border-color: #f1d69e !important; background: var(--workspace-accent-soft) !important; color: #754300 !important; } #announcerOperationalApp #panelGuardTasks .guard-admin-strip { border-color: #d9cdf4 !important; background: #f6f2ff !important; } #announcerOperationalApp #panelGuardTasks .guard-setup-row { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 8px !important; align-items: end !important; padding: 10px !important; border: 1px solid var(--ops-system-line) !important; border-radius: 10px; background: var(--ops-system-quiet) !important; } #announcerOperationalApp #panelGuardTasks .guard-setup-row .spacer { display: none !important; } #announcerOperationalApp #panelGuardTasks .guard-setup-row > button { min-width: 0 !important; min-height: 42px !important; padding-inline: 8px !important; font-size: 13px !important; } #announcerOperationalApp #panelGuardTasks .guard-hint-text { margin: 9px 0 !important; } #announcerOperationalApp #panelGuardTasks .guard-manager-note { margin-bottom: 10px !important; padding-left: 10px; border-left: 4px solid var(--workspace-accent); color: #754300 !important; } #announcerOperationalApp #panelGuardTasks .guard-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; } #announcerOperationalApp #panelGuardTasks .guard-section { min-width: 0; border: 1px solid var(--ops-system-line) !important; border-radius: 10px !important; background: #fff !important; box-shadow: 0 1px 0 rgb(16 47 87 / .07) !important; } #announcerOperationalApp #panelGuardTasks .guard-section h4 { margin: 0 !important; padding: 9px 11px !important; border-bottom: 1px solid var(--ops-system-line); background: var(--workspace-accent-soft); } #announcerOperationalApp #panelGuardTasks .guard-task { border-color: var(--ops-system-line) !important; box-shadow: none !important; } #announcerOperationalApp #panelGuardTasks .guard-task.delegated:not(.done) { border-left: 3px solid var(--ops-system-blue) !important; } #announcerOperationalApp #panelGuardTasks .guard-task.done { border-left: 3px solid var(--console-present) !important; } #announcerOperationalApp #panelGuardTasks .guard-rotation-plan-section { border-top: 3px solid #b8893c !important; } /* Manager: a dense desk console that keeps category navigation distinct from work. */ #announcerOperationalApp #panelVirtualDesk .manager-shell { display: grid !important; grid-template-columns: 196px minmax(0, 1fr); gap: 10px !important; min-width: 0; } #announcerOperationalApp #panelVirtualDesk .manager-sidebar { display: flex !important; flex-direction: column; gap: 4px; padding: 10px !important; border: 1px solid var(--ops-system-line) !important; border-radius: 12px !important; background: var(--ops-system-paper) !important; box-shadow: 0 1px 0 rgb(16 47 87 / .08) !important; } #announcerOperationalApp #panelVirtualDesk .manager-sidebar h3 { margin: 3px 5px 5px !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: .08em; color: var(--ops-system-muted) !important; } #announcerOperationalApp #panelVirtualDesk .sidebar-item { min-height: 40px !important; border-radius: 8px !important; } #announcerOperationalApp #panelVirtualDesk .sidebar-item.active { background: var(--workspace-accent-soft) !important; color: var(--workspace-accent) !important; } #announcerOperationalApp #panelVirtualDesk .manager-content { min-width: 0; display: grid; gap: 10px; } #announcerOperationalApp #panelVirtualDesk .manager-section .card { padding: 12px !important; } #announcerOperationalApp #panelVirtualDesk .alert-strip { min-height: 42px; border-left: 5px solid var(--ops-system-amber) !important; border-radius: 9px !important; } #announcerOperationalApp #panelVirtualDesk .stat-grid { gap: 8px !important; } #announcerOperationalApp #panelVirtualDesk :is(.stat-card, .source-health-cell) { border-color: var(--ops-system-line) !important; background: var(--ops-system-quiet) !important; box-shadow: none !important; } #announcerOperationalApp #panelVirtualDesk .manager-subnav { gap: 6px !important; padding-bottom: 8px; border-bottom: 1px solid var(--ops-system-line); } /* Admin: deliberately sober diagnostic hierarchy with no competing decoration. */ #announcerOperationalApp #panelAdmin .admin-superuser-card { padding: 14px !important; border-top: 4px solid var(--workspace-accent) !important; background: var(--workspace-accent-soft) !important; } #announcerOperationalApp #panelAdmin .admin-superuser-card .row { gap: 10px !important; flex-wrap: wrap !important; } #announcerOperationalApp #panelAdmin .admin-superuser-card h2 { margin: 0 !important; } #announcerOperationalApp #panelAdmin > .card:not(.admin-superuser-card) { padding: 12px 14px !important; } #announcerOperationalApp #panelAdmin .grid3 { gap: 8px !important; } #announcerOperationalApp #panelAdmin .admin-list-item, #announcerOperationalApp #panelAdmin .source-health-cell { border-color: var(--ops-system-line) !important; background: var(--ops-system-quiet) !important; } #announcerOperationalApp #panelAdmin .admin-table-wrap, #announcerOperationalApp #panelAdmin .source-health-list { border-color: var(--ops-system-line) !important; background: #fff !important; } #announcerOperationalApp #panelAdmin .admin-table th { background: var(--ops-system-quiet) !important; color: #315781 !important; } #announcerOperationalApp #panelAdmin .admin-table :is(th, td) { border-color: var(--ops-system-line) !important; } /* Tablet: keep full access without horizontal rails. */ @media (min-width: 600px) and (max-width: 1100px) { #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin):not(.hidden), #announcerOperationalApp #panelVirtualDesk:not(.hidden) { gap: 8px; } #announcerOperationalApp #panelAnnouncements > .grid { grid-template-columns: minmax(0, 1.15fr) minmax(230px, .85fr) !important; } #announcerOperationalApp #panelChemReadings .chem-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #announcerOperationalApp #panelChemReadings .chem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #announcerOperationalApp #panelChemReadings .chem-round-banner, #announcerOperationalApp #panelChemReadings .chem-history { grid-column: 1 / -1; } #announcerOperationalApp #panelGuardTasks .guard-setup-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #announcerOperationalApp #panelGuardTasks .guard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #announcerOperationalApp #panelVirtualDesk .manager-shell { grid-template-columns: 170px minmax(0, 1fr); } } /* Phone: each operational decision owns a full, readable row. */ @media (max-width: 599px) { #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin):not(.hidden), #announcerOperationalApp #panelVirtualDesk:not(.hidden) { gap: 8px; } #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin) > .card, #announcerOperationalApp #panelAnnouncements .grid > .card { padding: 11px !important; border-radius: 0 !important; } #announcerOperationalApp #panelAnnouncements .page-heading { grid-template-columns: minmax(0, 1fr); align-items: start !important; } #announcerOperationalApp #panelAnnouncements .page-heading .secondary { width: 100%; min-height: 44px !important; } #announcerOperationalApp #panelAnnouncements .announcement-delivery-status { grid-template-columns: auto minmax(0, 1fr); align-items: start; } #announcerOperationalApp #panelAnnouncements .announcement-delivery-status .secondary { grid-column: 1 / -1; width: 100%; min-height: 44px !important; } #announcerOperationalApp #panelAnnouncements > .grid { grid-template-columns: minmax(0, 1fr) !important; } #announcerOperationalApp #panelAnnouncements textarea { min-height: 132px; } #announcerOperationalApp #panelChemReadings > .card:first-child { padding: 11px !important; } #announcerOperationalApp #panelChemReadings .chem-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } #announcerOperationalApp #panelChemReadings .chem-toolbar > :is(button, .pill) { width: 100%; } #announcerOperationalApp #panelChemReadings .chem-toolbar .spacer { display: none !important; } #announcerOperationalApp #panelChemReadings .chem-grid { grid-template-columns: minmax(0, 1fr); } #announcerOperationalApp #panelChemReadings .chem-round-banner, #announcerOperationalApp #panelChemReadings .chem-history { grid-column: auto; } #announcerOperationalApp #panelChemReadings .chem-round-banner { grid-template-columns: minmax(0, 1fr); } #announcerOperationalApp #panelChemReadings .chem-fields { grid-template-columns: minmax(0, 1fr) !important; } #announcerOperationalApp #panelGuardTasks > .card { padding: 11px !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: 9px !important; } #announcerOperationalApp #panelGuardTasks .guard-setup-row > button { width: 100%; min-height: 44px !important; } #announcerOperationalApp #panelGuardTasks .guard-grid { grid-template-columns: minmax(0, 1fr) !important; } #announcerOperationalApp #panelVirtualDesk .manager-shell { display: block !important; } #announcerOperationalApp #panelVirtualDesk .manager-sidebar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 8px; } #announcerOperationalApp #panelVirtualDesk .manager-sidebar h3 { grid-column: 1 / -1; } #announcerOperationalApp #panelVirtualDesk .sidebar-item { min-width: 0; font-size: 13px !important; } #announcerOperationalApp #panelVirtualDesk .manager-section .card { padding: 11px !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; -webkit-overflow-scrolling: touch; } } /* Coarse pointers retain comfortable, reachable actions in every workspace. */ @media (pointer: coarse), (max-width: 1100px) { #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin, #panelVirtualDesk) :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(.announcement-delivery-status .secondary, #presetFrontDeck, #presetCodeGreen, #presetCodeBrown) { min-height: 44px !important; } #announcerOperationalApp #panelChemReadings .chem-slot .primary { min-height: 44px !important; } } body.dark-mode #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin) > .card, body.dark-mode #announcerOperationalApp #panelAnnouncements .grid > .card, body.dark-mode #announcerOperationalApp #panelVirtualDesk .card, body.dark-mode #announcerOperationalApp #panelVirtualDesk .manager-sidebar { background: #142b43 !important; border-color: #315775 !important; } body.dark-mode #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin, #panelVirtualDesk) :is(h2, h3, h4) { color: #deebfb !important; } body.dark-mode #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin, #panelVirtualDesk) .tiny { color: #a9c2de !important; } body.dark-mode #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelLifeguard, #panelGuardTasks, #panelAdmin, #panelVirtualDesk) :is(input, select, textarea) { background: #10253a !important; border-color: #396287 !important; color: #e7f1ff !important; } body.dark-mode #announcerOperationalApp #panelAnnouncements .announcement-delivery-status { background: #31284a; border-color: #7460a9; color: #e9dfff; } body.dark-mode #announcerOperationalApp #panelAnnouncements :is(#lastText, #announcementHistory), body.dark-mode #announcerOperationalApp #panelAnnouncements :is(#presetFrontDeck, #presetCodeGreen, #presetCodeBrown), body.dark-mode #announcerOperationalApp #panelAdmin .admin-superuser-card { background: #2f2745 !important; border-color: #7561a8 !important; color: #e8dfff !important; } body.dark-mode #announcerOperationalApp #panelChemReadings .chem-round-banner { background: #123e3b !important; border-color: #2a716a !important; } body.dark-mode #announcerOperationalApp #panelChemReadings .chem-slot, body.dark-mode #announcerOperationalApp #panelGuardTasks .guard-section, body.dark-mode #announcerOperationalApp #panelAdmin .admin-table-wrap, body.dark-mode #announcerOperationalApp #panelAdmin .source-health-list { background: #142b43 !important; border-color: #315775 !important; } body.dark-mode #announcerOperationalApp :is(#panelChemReadings .chem-timestamp, #panelGuardTasks .guard-setup-row, #panelVirtualDesk .stat-card, #panelVirtualDesk .source-health-cell, #panelAdmin .admin-list-item, #panelAdmin .source-health-cell) { background: #10253a !important; border-color: #315775 !important; } /* Full product UI turn: one calm command surface across the roster, deck, and office. Workspace color supplies orientation only; every actionable state retains text, shape, or icon feedback. This terminal block intentionally preserves existing controls. */ #announcerOperationalApp { --full-ui-accent: #1769e0; --full-ui-accent-soft: #eaf2ff; --full-ui-accent-line: #b9d2fa; --full-ui-panel: #ffffff; --full-ui-quiet: #f5f8fc; --full-ui-line: #d7e2ef; --full-ui-ink: #112f58; --full-ui-muted: #60799a; --full-ui-success: #087a45; --full-ui-warning: #9a5a00; --full-ui-danger: #b3263a; } #announcerOperationalApp[data-workspace="announcements"] { --full-ui-accent:#6840a7; --full-ui-accent-soft:#f4f0ff; --full-ui-accent-line:#d8c9fa; } #announcerOperationalApp[data-workspace="chem"] { --full-ui-accent:#087f88; --full-ui-accent-soft:#e9fbf9; --full-ui-accent-line:#afe5df; } #announcerOperationalApp[data-workspace="lifeguard"] { --full-ui-accent:#a46000; --full-ui-accent-soft:#fff7e9; --full-ui-accent-line:#f0d198; } #announcerOperationalApp[data-workspace="virtualDesk"] { --full-ui-accent:#58449d; --full-ui-accent-soft:#f3f1ff; --full-ui-accent-line:#d4ccf3; } #announcerOperationalApp[data-workspace="admin"] { --full-ui-accent:#365777; --full-ui-accent-soft:#edf4f9; --full-ui-accent-line:#c7d9e8; } /* Command bar: stable, dense, and visibly oriented to the current job. */ #announcerOperationalApp .topbar { position: relative; min-width: 0; padding: 11px 14px !important; border: 1px solid var(--full-ui-line) !important; border-top: 4px solid var(--full-ui-accent) !important; border-radius: 14px !important; background: var(--full-ui-panel) !important; box-shadow: 0 8px 20px rgb(21 52 91 / .07) !important; } #announcerOperationalApp .topbar::after { content: ""; position: absolute; inset: auto 14px 0; height: 2px; background: var(--full-ui-accent-soft); } #announcerOperationalApp .brand-lockup { min-width: 188px; padding-right: 14px !important; border-right: 1px solid var(--full-ui-line); } #announcerOperationalApp .brand-lockup img { box-shadow: none !important; } #announcerOperationalApp .brand-title { color: var(--full-ui-ink) !important; letter-spacing: -.035em; } #announcerOperationalApp .brand-powered { color: var(--full-ui-muted) !important; font-size: 12px !important; } #announcerOperationalApp .topbar-actions { min-width: 0; gap: 8px !important; } #announcerOperationalApp .topbar-context { min-width: 0; gap: 6px !important; align-items: stretch !important; } #announcerOperationalApp .topbar-context :is(#locationSelect, #viewSelect, .identity-pill) { min-height: 44px !important; border-color: var(--full-ui-line) !important; background: var(--full-ui-quiet) !important; color: var(--full-ui-ink) !important; box-shadow: none !important; } #announcerOperationalApp .topbar-context #locationSelect { flex: 1 1 260px !important; } #announcerOperationalApp .topbar-context #viewSelect { flex: 0 1 172px !important; border-bottom: 3px solid var(--full-ui-accent) !important; font-weight: 800 !important; } #announcerOperationalApp .topbar-context .identity-pill { flex: 0 1 210px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #announcerOperationalApp .topbar-status { align-items: center !important; min-height: 28px; color: var(--full-ui-muted); } #announcerOperationalApp .topbar-status .next-pill { border-color: var(--full-ui-accent-line) !important; background: var(--full-ui-accent-soft) !important; color: var(--full-ui-ink) !important; } #announcerOperationalApp .topbar-utility.reference-primary-actions { gap: 7px !important; } #announcerOperationalApp .reference-primary-actions :is(#uploadHtmlBtn, #speakerPanelBtn) { min-height: 44px !important; border-radius: 9px !important; } #announcerOperationalApp .reference-primary-actions #uploadHtmlBtn { border-color: var(--full-ui-accent) !important; background: var(--full-ui-accent) !important; } #announcerOperationalApp .reference-primary-actions #speakerPanelBtn { border-color: var(--full-ui-accent-line) !important; background: var(--full-ui-accent-soft) !important; color: var(--full-ui-ink) !important; } #announcerOperationalApp .topbar-more summary { display: grid; min-width: 44px; min-height: 44px; place-items: center; border: 1px solid var(--full-ui-line); border-radius: 9px; background: var(--full-ui-quiet); color: var(--full-ui-ink); font-size: 0; } #announcerOperationalApp .topbar-more summary::after { content: "•••"; font-size: 17px; letter-spacing: 1px; } #announcerOperationalApp .topbar-more[open] summary { border-color: var(--full-ui-accent); color: var(--full-ui-accent); } #announcerOperationalApp .topbar-more-menu { z-index: 20; padding: 7px !important; border: 1px solid var(--full-ui-line) !important; border-radius: 10px !important; background: var(--full-ui-panel) !important; box-shadow: 0 14px 28px rgb(21 52 91 / .16) !important; } #announcerOperationalApp .topbar-more-menu button { min-height: 40px !important; border-radius: 7px !important; } #announcerOperationalApp :is(button, select, input, textarea):focus-visible { outline: 3px solid rgb(23 105 224 / .32) !important; outline-offset: 2px !important; } /* Common state rails: compact feedback that still reads when color is unavailable. */ #announcerOperationalApp :is(#readOnlyBanner, #locationAlertBanner, #deckDateWarning, .roster-empty-workspace) { margin-block: 8px !important; border-radius: 10px !important; box-shadow: none !important; } #announcerOperationalApp #readOnlyBanner { border-left: 5px solid var(--full-ui-success) !important; } #announcerOperationalApp #locationAlertBanner, #announcerOperationalApp #deckDateWarning { border-left: 5px solid var(--full-ui-warning) !important; } #announcerOperationalApp .roster-empty-workspace { border: 1px dashed var(--full-ui-accent-line) !important; border-left: 5px solid var(--full-ui-accent) !important; background: var(--full-ui-accent-soft) !important; } /* Roster: date and session form one compact session rail; attendance is the work surface. */ #announcerOperationalApp #panelRoster .time-block-card { padding: 10px 14px !important; border-top: 3px solid var(--full-ui-accent) !important; background: var(--full-ui-panel) !important; } #announcerOperationalApp #panelRoster .time-block-toolbar { gap: 10px !important; align-items: end !important; } #announcerOperationalApp #panelRoster .session-command-title { display: none !important; } #announcerOperationalApp #panelRoster .roster-date-controls { display: grid !important; grid-template-columns: minmax(164px, .72fr) minmax(240px, 1.35fr) auto; align-items: end !important; gap: 9px !important; flex: 1 1 620px; } #announcerOperationalApp #panelRoster .roster-date-field { display: grid !important; gap: 4px; min-width: 0; } #announcerOperationalApp #panelRoster .roster-date-field label, #announcerOperationalApp #panelRoster .desktop-session-label { margin: 0 !important; color: var(--full-ui-muted) !important; font-size: 11px !important; font-weight: 850 !important; letter-spacing: .08em; text-transform: uppercase; } #announcerOperationalApp #panelRoster .roster-date-command { display: flex !important; gap: 6px; min-width: 0; } #announcerOperationalApp #panelRoster :is(.dateInput, .desktop-session-select) { min-height: 44px !important; border-color: var(--full-ui-accent-line) !important; background: var(--full-ui-accent-soft) !important; } #announcerOperationalApp #panelRoster .desktop-session-label { align-self: start; } #announcerOperationalApp #panelRoster .desktop-session-select { min-width: 0; width: 100% !important; } #announcerOperationalApp #panelRoster #setDateBtn { align-self: end; min-height: 44px !important; } #announcerOperationalApp #panelRoster .time-block-selection { margin-left: auto; } #announcerOperationalApp #panelRoster .reference-session-summary { margin: 8px 0 0 !important; padding: 8px 12px !important; border: 1px solid var(--full-ui-accent-line) !important; border-left: 5px solid var(--full-ui-accent) !important; border-radius: 9px !important; background: var(--full-ui-accent-soft) !important; } #announcerOperationalApp #panelRoster .reference-session-summary strong { color: var(--full-ui-ink) !important; } #announcerOperationalApp #panelRoster .reference-session-status { border-color: var(--full-ui-accent-line) !important; background: #fff !important; color: var(--full-ui-accent) !important; } #announcerOperationalApp #panelRoster .roster-card { border-top: 3px solid var(--full-ui-accent) !important; background: var(--full-ui-panel) !important; } #announcerOperationalApp #panelRoster .roster-toolbar { display: grid !important; grid-template-columns: auto minmax(220px, 1fr) auto auto; grid-template-areas: "heading search actions bulk" "legend legend legend bulk"; gap: 8px 12px !important; align-items: center !important; padding-bottom: 8px !important; border-bottom: 1px solid var(--full-ui-line); } #announcerOperationalApp #panelRoster .roster-heading { grid-area: heading; white-space: nowrap; } #announcerOperationalApp #panelRoster .searchWrap { grid-area: search; min-width: 0; width: auto !important; } #announcerOperationalApp #panelRoster .roster-actions { grid-area: actions; } #announcerOperationalApp #panelRoster #bulkAttendanceActions { grid-area: bulk; justify-self: end; align-self: stretch; } #announcerOperationalApp #panelRoster .legend { grid-area: legend; margin: 0 !important; } #announcerOperationalApp #panelRoster .roster-actions :is(button, select), #announcerOperationalApp #panelRoster #bulkAttendanceActions button { min-height: 40px !important; } #announcerOperationalApp #panelRoster .roster-table thead th { background: #edf4ff !important; color: #355884 !important; } #announcerOperationalApp #panelRoster .roster-table tr:has(.attBtn.present.active) td { background: #effbf4 !important; } #announcerOperationalApp #panelRoster .roster-table tr:has(.attBtn.absent.active) td { background: #fff5f5 !important; } #announcerOperationalApp #panelRoster .roster-table .attBtn { min-width: 44px !important; min-height: 44px !important; } #announcerOperationalApp #panelRoster .zoneBtn { border-color: var(--full-ui-accent-line) !important; background: var(--full-ui-accent-soft) !important; color: var(--full-ui-accent) !important; } #announcerOperationalApp #panelRoster .call-guardian-btn { border-color: #f1d29a !important; background: #fff8e9 !important; color: #815000 !important; } /* Workspace-specific command hierarchy. */ #announcerOperationalApp #panelAnnouncements .page-heading, #announcerOperationalApp #panelChemReadings > .card:first-child, #announcerOperationalApp #panelGuardTasks > .card, #announcerOperationalApp #panelVirtualDesk .manager-sidebar, #announcerOperationalApp #panelAdmin .admin-superuser-card { border-top-color: var(--full-ui-accent) !important; } #announcerOperationalApp #panelAnnouncements .announcement-delivery-status, #announcerOperationalApp #panelChemReadings .chem-round-banner, #announcerOperationalApp #panelGuardTasks .guard-setup-row, #announcerOperationalApp #panelAdmin .admin-superuser-card { border-left-color: var(--full-ui-accent) !important; background: var(--full-ui-accent-soft) !important; } #announcerOperationalApp #panelAnnouncements :is(#lastText, #announcementHistory), #announcerOperationalApp #panelAnnouncements :is(#presetFrontDeck, #presetCodeGreen, #presetCodeBrown) { border-color: var(--full-ui-accent-line) !important; background: var(--full-ui-accent-soft) !important; color: var(--full-ui-ink) !important; } #announcerOperationalApp #panelChemReadings .chem-toolbar .pill, #announcerOperationalApp #panelChemReadings .chem-history { border-color: var(--full-ui-accent-line) !important; } #announcerOperationalApp #panelChemReadings .chem-slot { border-top-color: var(--full-ui-accent) !important; } #announcerOperationalApp #panelGuardTasks .guard-meta, #announcerOperationalApp #panelGuardTasks .guard-manager-note { color: #784b00 !important; } #announcerOperationalApp #panelGuardTasks .guard-section h4 { background: var(--full-ui-accent-soft) !important; } #announcerOperationalApp #panelVirtualDesk .sidebar-item.active { border-left: 4px solid var(--full-ui-accent) !important; background: var(--full-ui-accent-soft) !important; color: var(--full-ui-ink) !important; } #announcerOperationalApp #panelAdmin .admin-list-item strong { color: var(--full-ui-accent) !important; } /* Tablet: preserve command grouping while making every control legible. */ @media (min-width: 600px) and (max-width: 1100px) { #announcerOperationalApp .topbar { padding: 9px 10px !important; } #announcerOperationalApp .brand-lockup { min-width: 142px; padding-right: 9px !important; } #announcerOperationalApp .brand-powered, #announcerOperationalApp .topbar-status { display: none !important; } #announcerOperationalApp .topbar-context { flex: 1 1 auto; } #announcerOperationalApp .topbar-context #locationSelect { flex-basis: 200px !important; } #announcerOperationalApp .topbar-context .identity-pill { flex-basis: 150px !important; } #announcerOperationalApp #panelRoster .roster-date-controls { grid-template-columns: minmax(142px, .72fr) minmax(180px, 1fr) auto; } #announcerOperationalApp #panelRoster .roster-date-nav-label { display: none; } #announcerOperationalApp #panelRoster .roster-toolbar { grid-template-columns: auto minmax(170px, 1fr) auto; grid-template-areas: "heading search actions" "legend legend bulk"; } #announcerOperationalApp #panelRoster #bulkAttendanceActions { justify-self: end; } } /* Phone: first choose context, then perform the next action in one vertical flow. */ @media (max-width: 599px) { #announcerOperationalApp .topbar { margin-inline: 0 !important; padding: 9px !important; border-radius: 0 0 12px 12px !important; } #announcerOperationalApp .brand-lockup { min-width: 0; padding: 0 0 8px !important; border: 0; } #announcerOperationalApp .brand-powered, #announcerOperationalApp .topbar-status, #announcerOperationalApp .identity-reminder, #announcerOperationalApp .device-pill { display: none !important; } #announcerOperationalApp .topbar-actions { width: 100%; } #announcerOperationalApp .topbar-context { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(104px, .72fr); width: 100%; } #announcerOperationalApp .topbar-context :is(#locationSelect, #viewSelect, .identity-pill) { width: 100% !important; min-width: 0 !important; } #announcerOperationalApp .topbar-context #locationSelect { grid-column: 1 / -1; } #announcerOperationalApp .topbar-context .identity-pill { display: block !important; } #announcerOperationalApp .reference-primary-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; width: 100%; } #announcerOperationalApp .reference-primary-actions :is(#uploadHtmlBtn, #speakerPanelBtn) { width: 100% !important; min-width: 0 !important; } #announcerOperationalApp #panelRoster .time-block-card { padding: 9px !important; border-radius: 0 !important; } #announcerOperationalApp #panelRoster .roster-date-controls { grid-template-columns: minmax(0, 1fr) !important; flex-basis: 100%; } #announcerOperationalApp #panelRoster .roster-date-command { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; } #announcerOperationalApp #panelRoster .roster-date-nav { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); } #announcerOperationalApp #panelRoster #setDateBtn, #announcerOperationalApp #panelRoster .desktop-session-label { display: none !important; } #announcerOperationalApp #panelRoster .time-block-selection { width: 100%; margin: 0; } #announcerOperationalApp #panelRoster .reference-session-summary { margin-inline: 0 !important; } #announcerOperationalApp #panelRoster .roster-card { padding: 9px !important; border-radius: 0 !important; } #announcerOperationalApp #panelRoster .roster-toolbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "heading heading" "search search" "actions actions" "legend legend" "bulk bulk"; padding-bottom: 9px !important; } #announcerOperationalApp #panelRoster .roster-heading { min-width: 0; } #announcerOperationalApp #panelRoster .roster-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(122px, .8fr); width: 100%; } #announcerOperationalApp #panelRoster .roster-actions :is(button, select) { width: 100%; min-width: 0; } #announcerOperationalApp #panelRoster #bulkAttendanceActions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } #announcerOperationalApp #panelRoster #bulkAttendanceActions button { width: 100%; min-width: 0; white-space: normal !important; } #announcerOperationalApp #panelRoster .legend { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; } #announcerOperationalApp #panelRoster .legendItem { font-size: 12px !important; } #announcerOperationalApp #panelRoster .roster-mobile-list .roster-mobile-entry { border-left: 4px solid var(--full-ui-accent) !important; } #announcerOperationalApp #panelRoster .roster-mobile-entry[data-attendance="present"] { border-left-color: var(--full-ui-success) !important; background: #effbf4 !important; } #announcerOperationalApp #panelRoster .roster-mobile-entry[data-attendance="absent"] { border-left-color: var(--full-ui-danger) !important; background: #fff5f5 !important; } } /* Dark mode retains contrast, task hierarchy, and workspace orientation. */ body.dark-mode #announcerOperationalApp { --full-ui-panel:#122b44; --full-ui-quiet:#10243a; --full-ui-line:#315775; --full-ui-ink:#e8f1ff; --full-ui-muted:#a9c2de; --full-ui-accent-soft:#193b68; --full-ui-accent-line:#3d6ba8; } body.dark-mode #announcerOperationalApp[data-workspace="announcements"] { --full-ui-accent-soft:#31284a; --full-ui-accent-line:#7661ad; } body.dark-mode #announcerOperationalApp[data-workspace="chem"] { --full-ui-accent-soft:#123e3b; --full-ui-accent-line:#2a716a; } body.dark-mode #announcerOperationalApp[data-workspace="lifeguard"] { --full-ui-accent-soft:#442f13; --full-ui-accent-line:#85612d; } body.dark-mode #announcerOperationalApp .topbar, body.dark-mode #announcerOperationalApp :is(#panelRoster .time-block-card, #panelRoster .roster-card) { background: var(--full-ui-panel) !important; } body.dark-mode #announcerOperationalApp .topbar-context :is(#locationSelect, #viewSelect, .identity-pill), body.dark-mode #announcerOperationalApp #panelRoster :is(.dateInput, .desktop-session-select) { background: var(--full-ui-quiet) !important; color: var(--full-ui-ink) !important; } body.dark-mode #announcerOperationalApp #panelRoster .reference-session-status { background: #142b43 !important; } body.dark-mode #announcerOperationalApp #panelRoster .roster-table thead th { background: #193652 !important; color: #bcd6f3 !important; } body.dark-mode #announcerOperationalApp #panelRoster .roster-table tr:has(.attBtn.present.active) td { background: #123d31 !important; } body.dark-mode #announcerOperationalApp #panelRoster .roster-table tr:has(.attBtn.absent.active) td { background: #482733 !important; } /* Narrow landscape tablets keep the console horizontal, but each command group gets its own row. */ @media (min-width: 600px) and (max-width: 1100px) { #announcerOperationalApp .topbar { display: grid !important; grid-template-columns: 150px minmax(0, 1fr); align-items: start !important; gap: 10px !important; } #announcerOperationalApp .topbar-actions { display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; min-width: 0; } #announcerOperationalApp .topbar-context { flex: 1 1 100% !important; display: grid !important; grid-template-columns: minmax(180px, 1fr) minmax(110px, .6fr) minmax(132px, .78fr); } #announcerOperationalApp .topbar-utility.reference-primary-actions { flex: 0 1 auto; } #announcerOperationalApp .topbar-context :is(#locationSelect, #viewSelect, .identity-pill), #announcerOperationalApp .reference-primary-actions :is(#uploadHtmlBtn, #speakerPanelBtn), #announcerOperationalApp .topbar-more summary { min-height: 44px !important; } } @media (min-width: 600px) and (max-width: 1100px) { #announcerOperationalApp .topbar { grid-template-columns: minmax(0, 1fr) !important; } #announcerOperationalApp .topbar .topbar-actions { grid-column: 1 / -1 !important; display: flex !important; width: 100% !important; } #announcerOperationalApp .topbar .topbar-context { display: grid !important; width: 100% !important; grid-template-columns: minmax(180px, 1fr) minmax(110px, .6fr) minmax(132px, .78fr) !important; } #announcerOperationalApp .topbar-context :is(#locationSelect, #viewSelect, .identity-pill) { height: 44px !important; min-height: 44px !important; } } @media (min-width: 600px) and (max-width: 1100px) { #announcerOperationalApp .topbar :is(#locationSelect, #viewSelect, .identity-pill) { box-sizing: border-box !important; height: 44px !important; min-height: 44px !important; max-height: none !important; } } @media (min-width: 600px) and (max-width: 1100px) { #announcerOperationalApp .topbar .topbar-context #locationSelect, #announcerOperationalApp .topbar .topbar-context #viewSelect, #announcerOperationalApp .topbar .topbar-context .identity-pill { height: 44px !important; min-height: 44px !important; } } @media (min-width: 600px) and (max-width: 1100px) { #announcerOperationalApp .topbar .reference-primary-actions { flex: 1 1 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px !important; width: 100% !important; } #announcerOperationalApp .topbar .reference-primary-actions :is(#uploadHtmlBtn, #speakerPanelBtn) { width: 100% !important; min-width: 0 !important; } #announcerOperationalApp .topbar .topbar-more { width: 44px !important; } } /* Date navigation is a single control group. Do not let flex shrinking turn its labels into overlapping text on compact tablets or zoomed desktops. */ #announcerOperationalApp #panelRoster .roster-date-controls { grid-template-areas: "date session" !important; grid-template-columns: minmax(0, 1fr) minmax(220px, .78fr) !important; } #announcerOperationalApp #panelRoster .desktop-session-label, #announcerOperationalApp #panelRoster #setDateBtn { display:none !important; } #announcerOperationalApp #panelRoster .desktop-session-select { grid-area:session !important; align-self:end !important; } #announcerOperationalApp #panelRoster .roster-date-command { display:grid !important; grid-template-columns:minmax(0, 1fr) max-content !important; align-items:center !important; } #announcerOperationalApp #panelRoster .roster-date-nav { display:grid !important; grid-template-columns:max-content max-content max-content !important; align-items:stretch !important; gap:4px !important; min-width:max-content !important; } #announcerOperationalApp #panelRoster .roster-date-nav-btn { min-width:0 !important; white-space:nowrap !important; } @media (min-width:600px) and (max-width:1100px) { #announcerOperationalApp #panelRoster .roster-date-controls { grid-template-columns:minmax(0, 1fr) minmax(176px, .72fr) !important; } #announcerOperationalApp #panelRoster .roster-date-command { grid-template-columns:minmax(0, 1fr) 148px !important; } #announcerOperationalApp #panelRoster .roster-date-nav { grid-template-columns:44px 52px 44px !important; min-width:148px !important; } #announcerOperationalApp #panelRoster .roster-date-nav-btn { width:100% !important; min-height:44px !important; padding-inline:0 !important; } #announcerOperationalApp #panelRoster .roster-date-nav-label { display:none !important; } } @media (max-width:599px) { #announcerOperationalApp #panelRoster .roster-date-controls { grid-template-areas:"date" "session" !important; grid-template-columns:minmax(0, 1fr) !important; } #announcerOperationalApp #panelRoster .roster-date-command { grid-template-columns:minmax(0, 1fr) !important; } #announcerOperationalApp #panelRoster .roster-date-nav { grid-template-columns:minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr) !important; min-width:0 !important; width:100% !important; } #announcerOperationalApp #panelRoster .roster-date-nav-label { display:inline !important; } } /* The large-screen roster card has a separate session summary column. Its toolbar must therefore use the full left column instead of reserving a second, empty grid track that squeezes the date controls to 250px. */ @media (min-width:1280px) { #announcerOperationalApp #panelRoster .time-block-toolbar { grid-template-columns:minmax(0, 1fr) !important; } #announcerOperationalApp #panelRoster .roster-date-controls { width:100% !important; grid-template-columns:minmax(0, 1fr) minmax(220px, .72fr) !important; } #announcerOperationalApp #panelRoster .roster-date-command { grid-template-columns:minmax(0, 1fr) 156px !important; } #announcerOperationalApp #panelRoster .roster-date-nav { grid-template-columns:44px 60px 44px !important; min-width:156px !important; } #announcerOperationalApp #panelRoster .roster-date-nav-btn { width:100% !important; min-height:44px !important; padding-inline:0 !important; } #announcerOperationalApp #panelRoster .roster-date-nav-label { display:none !important; } } /* Wide and narrow tablets use the same compact, predictable day controls. Only phones spell out Previous and Next, where they occupy their own row. */ @media (min-width:600px) { #announcerOperationalApp #panelRoster .roster-date-command { grid-template-columns:minmax(0, 1fr) 152px !important; } #announcerOperationalApp #panelRoster .roster-date-nav { grid-template-columns:44px 56px 44px !important; min-width:152px !important; } #announcerOperationalApp #panelRoster .roster-date-nav-btn { width:100% !important; min-height:44px !important; padding-inline:0 !important; } #announcerOperationalApp #panelRoster .roster-date-nav-label { display:none !important; } } /* Operations console finish (2026-09-28). This terminal layer reduces stacked-card noise and makes the current job, live state, and available action scan as a single operational surface. */ #announcerOperationalApp { --finish-ink:#102f57; --finish-muted:#58718f; --finish-line:#d9e4ef; --finish-surface:#ffffff; --finish-quiet:#f5f8fc; --finish-blue:#2168e5; --finish-teal:#087e8b; --finish-violet:#7157c9; --finish-amber:#a56812; --finish-slate:#3a5878; } #announcerOperationalApp[data-workspace="roster"] { --workspace-finish-accent:var(--finish-blue); --workspace-finish-soft:#eff5ff; } #announcerOperationalApp[data-workspace="announcements"] { --workspace-finish-accent:var(--finish-violet); --workspace-finish-soft:#f5f2ff; } #announcerOperationalApp[data-workspace="chem"] { --workspace-finish-accent:var(--finish-teal); --workspace-finish-soft:#eefbfa; } #announcerOperationalApp[data-workspace="lifeguard"] { --workspace-finish-accent:var(--finish-amber); --workspace-finish-soft:#fff8ea; } #announcerOperationalApp[data-workspace="virtualDesk"] { --workspace-finish-accent:#3e6bb3; --workspace-finish-soft:#f0f5ff; } #announcerOperationalApp[data-workspace="admin"] { --workspace-finish-accent:var(--finish-slate); --workspace-finish-soft:#f3f6fa; } #announcerOperationalApp .topbar { border-color:var(--finish-line) !important; box-shadow:0 1px 0 rgb(23 50 79 / .05) !important; } #announcerOperationalApp .topbar-context :is(#locationSelect, #viewSelect, .identity-pill) { font-weight:750 !important; color:var(--finish-ink) !important; } #announcerOperationalApp .topbar-context #viewSelect { color:var(--workspace-finish-accent, var(--finish-blue)) !important; } #announcerOperationalApp .reference-primary-actions :is(#uploadHtmlBtn, #speakerPanelBtn) { border-radius:9px !important; font-weight:800 !important; letter-spacing:-.01em !important; } #announcerOperationalApp .reference-primary-actions #speakerPanelBtn { background:var(--workspace-finish-soft, #f5f8fc) !important; border-color:var(--workspace-finish-accent, var(--finish-blue)) !important; color:var(--workspace-finish-accent, var(--finish-blue)) !important; } #announcerOperationalApp .reference-primary-actions #speakerPanelBtn:hover { background:var(--workspace-finish-soft, #eff5ff) !important; } /* A single compact command rail: date and session stay together, while the selected class is the quiet, read-only outcome on the right. */ #announcerOperationalApp #panelRoster .time-block-card { border-left-color:var(--workspace-finish-accent, var(--finish-blue)) !important; background:var(--finish-surface) !important; } #announcerOperationalApp #panelRoster .roster-date-controls { border-bottom-color:var(--finish-line) !important; } #announcerOperationalApp #panelRoster .roster-date-command { min-width:0 !important; } #announcerOperationalApp #panelRoster .roster-date-nav { display:flex !important; align-items:center !important; gap:4px !important; min-width:0 !important; } #announcerOperationalApp #panelRoster .roster-date-nav-btn { min-width:0 !important; white-space:nowrap !important; } #announcerOperationalApp #panelRoster .roster-date-today { color:var(--workspace-finish-accent, var(--finish-blue)) !important; border-color:var(--workspace-finish-accent, var(--finish-blue)) !important; background:var(--workspace-finish-soft, #eff5ff) !important; } #announcerOperationalApp #panelRoster .desktop-session-select:focus, #announcerOperationalApp #panelRoster #rosterDate:focus { border-color:var(--workspace-finish-accent, var(--finish-blue)) !important; box-shadow:0 0 0 3px rgb(33 104 229 / .16) !important; } #announcerOperationalApp .reference-session-summary { background:var(--workspace-finish-soft, #eff5ff) !important; border-color:var(--workspace-finish-accent, var(--finish-blue)) !important; border-left-color:var(--workspace-finish-accent, var(--finish-blue)) !important; } #announcerOperationalApp .reference-session-summary strong { color:var(--finish-ink) !important; } #announcerOperationalApp .reference-session-summary :is(span, small) { color:var(--finish-muted) !important; } #announcerOperationalApp .reference-session-status { color:#137842 !important; background:#e8f8ef !important; } #announcerOperationalApp #panelRoster .roster-card { border-top-color:var(--workspace-finish-accent, var(--finish-blue)) !important; } #announcerOperationalApp #panelRoster .roster-heading h2, #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelGuardTasks, #panelVirtualDesk, #panelAdmin) h2 { color:var(--finish-ink) !important; } #announcerOperationalApp #panelRoster .roster-heading h2 { position:relative; padding-left:11px !important; } #announcerOperationalApp #panelRoster .roster-heading h2::before { content:""; position:absolute; left:0; top:.18em; width:4px; height:.9em; border-radius:99px; background:var(--workspace-finish-accent, var(--finish-blue)); } #announcerOperationalApp #panelRoster .roster-toolbar { border-bottom:1px solid var(--finish-line) !important; } #announcerOperationalApp #panelRoster #tagLegend { color:var(--finish-muted) !important; } #announcerOperationalApp #panelRoster .legendItem { background:transparent !important; } #announcerOperationalApp #panelRoster .searchInput { background:#fff !important; } #announcerOperationalApp #panelRoster .roster-actions #addSwimmerBtn { border-color:var(--workspace-finish-accent, var(--finish-blue)) !important; color:var(--workspace-finish-accent, var(--finish-blue)) !important; background:var(--workspace-finish-soft, #eff5ff) !important; } #announcerOperationalApp #panelRoster .zone.zone-action { color:#4c39a8 !important; border-color:#d6cdfa !important; background:#f7f4ff !important; } #announcerOperationalApp #panelRoster .guardian-callout { color:#9a620b !important; border-color:#f4d18f !important; background:#fff8e9 !important; } #announcerOperationalApp #panelRoster .guardian-callout:hover { color:#754400 !important; border-color:#eab751 !important; background:#fff1cd !important; } /* Every non-roster view keeps the existing markup, but reads as a purpose-built operation rather than a stack of unrelated legacy cards. */ #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelVirtualDesk, #panelGuardTasks, #panelAdmin):not(.hidden) { position:relative; } #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelVirtualDesk, #panelGuardTasks, #panelAdmin):not(.hidden)::before { content:""; display:block; height:3px; margin-bottom:8px; border-radius:99px; background:var(--workspace-finish-accent, var(--finish-blue)); } #announcerOperationalApp #panelAnnouncements .page-heading, #announcerOperationalApp #panelChemReadings > .card:first-child, #announcerOperationalApp #panelGuardTasks > .card:first-child { border-top:2px solid var(--workspace-finish-accent, var(--finish-blue)) !important; } #announcerOperationalApp #panelAnnouncements .announcement-delivery-status, #announcerOperationalApp #panelChemReadings .chem-round-banner, #announcerOperationalApp #panelGuardTasks .guard-import-status { border-left:3px solid var(--workspace-finish-accent, var(--finish-blue)) !important; } #announcerOperationalApp #panelAnnouncements #speakBtn, #announcerOperationalApp #panelChemReadings .chem-submit, #announcerOperationalApp #panelGuardTasks #guardTasksSaveAssignments { background:var(--workspace-finish-accent, var(--finish-blue)) !important; border-color:var(--workspace-finish-accent, var(--finish-blue)) !important; } #announcerOperationalApp #panelChemReadings .chem-slot { border-top:3px solid var(--workspace-finish-accent, var(--finish-teal)) !important; } #announcerOperationalApp #panelGuardTasks .guard-section { border-top:3px solid var(--workspace-finish-accent, var(--finish-amber)) !important; } #announcerOperationalApp #panelGuardTasks .guard-section h4 { background:var(--workspace-finish-soft, #fff8ea) !important; } #announcerOperationalApp #panelVirtualDesk .manager-sidebar { border-color:var(--workspace-finish-accent, #3e6bb3) !important; } #announcerOperationalApp #panelVirtualDesk .sidebar-item.active { background:var(--workspace-finish-soft, #f0f5ff) !important; color:var(--workspace-finish-accent, #3e6bb3) !important; box-shadow:inset 3px 0 0 var(--workspace-finish-accent, #3e6bb3) !important; } #announcerOperationalApp #panelAdmin .admin-superuser-card { border-left:3px solid var(--workspace-finish-accent, var(--finish-slate)) !important; } @media (min-width:1101px) { #announcerOperationalApp .topbar { grid-template-columns:226px minmax(0, 1fr) !important; gap:12px !important; min-height:58px !important; padding:8px 14px !important; } #announcerOperationalApp .brand-lockup { padding-right:12px !important; } #announcerOperationalApp .topbar-actions { grid-template-columns:minmax(0, 1fr) auto !important; gap:8px !important; } #announcerOperationalApp .topbar-context { grid-template-columns:minmax(190px, 1fr) 116px minmax(132px, 154px) !important; gap:5px !important; } #announcerOperationalApp .reference-primary-actions { gap:5px !important; } #announcerOperationalApp .reference-primary-actions :is(#uploadHtmlBtn, #speakerPanelBtn) { min-width:106px !important; padding-inline:10px !important; } #announcerOperationalApp #panelRoster .time-block-toolbar { grid-template-columns:minmax(0, .98fr) minmax(340px, 1.02fr) !important; gap:16px !important; } #announcerOperationalApp #panelRoster .roster-date-controls { grid-template-columns:minmax(310px, .92fr) minmax(210px, 1fr) !important; gap:12px !important; } #announcerOperationalApp #panelRoster .roster-date-command { grid-template-columns:minmax(146px, 1fr) auto !important; } #announcerOperationalApp #panelRoster .roster-date-nav-btn { padding-inline:8px !important; } } @media (min-width:600px) and (max-width:1100px) { #announcerOperationalApp .topbar { grid-template-columns:minmax(0, 1fr) auto !important; } #announcerOperationalApp .topbar-context { grid-template-columns:minmax(0, 1fr) 102px minmax(116px, .58fr) !important; } #announcerOperationalApp .reference-primary-actions #speakerPanelBtn { width:42px !important; min-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 .time-block-toolbar { display:grid !important; grid-template-columns:minmax(0, 1fr) minmax(250px, .82fr) !important; gap:12px !important; } #announcerOperationalApp #panelRoster .roster-date-controls { grid-template-columns:minmax(0, 1fr) !important; gap:8px !important; } #announcerOperationalApp #panelRoster .roster-date-field { min-width:0 !important; } #announcerOperationalApp #panelRoster .roster-date-command { grid-template-columns:minmax(0, 1fr) !important; } #announcerOperationalApp #panelRoster .roster-date-nav { justify-content:flex-start !important; } } @media (max-width:599px) { #announcerOperationalApp :is(#panelAnnouncements, #panelChemReadings, #panelVirtualDesk, #panelGuardTasks, #panelAdmin):not(.hidden)::before { margin:0 12px 6px !important; } #announcerOperationalApp #panelRoster .time-block-card { border-left-width:0 !important; border-top:3px solid var(--workspace-finish-accent, var(--finish-blue)) !important; } #announcerOperationalApp #panelRoster .roster-heading h2 { padding-left:9px !important; } #announcerOperationalApp #panelRoster .roster-actions #addSwimmerBtn { min-width:44px !important; } #announcerOperationalApp #panelRoster .add-swimmer-label { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; } #announcerOperationalApp #panelRoster .guardian-callout { border-radius:9px !important; } #announcerOperationalApp #panelChemReadings .chem-grid, #announcerOperationalApp #panelGuardTasks .guard-grid { gap:10px !important; } } body.dark-mode #announcerOperationalApp .reference-session-summary { background:#123d3a !important; border-color:#286b66 !important; } body.dark-mode #announcerOperationalApp .reference-session-summary :is(strong, span, small), body.dark-mode #announcerOperationalApp :is(#panelRoster, #panelAnnouncements, #panelChemReadings, #panelGuardTasks, #panelVirtualDesk, #panelAdmin) h2 { color:#dceaff !important; } body.dark-mode #announcerOperationalApp #panelRoster .roster-toolbar { border-color:#2b5277 !important; } body.dark-mode #announcerOperationalApp #panelRoster .roster-actions #addSwimmerBtn { background:#19385d !important; border-color:#4e78b7 !important; color:#dceaff !important; } body.dark-mode #announcerOperationalApp #panelRoster .zone.zone-action { background:#2b2257 !important; border-color:#7465be !important; color:#d9d0ff !important; } body.dark-mode #announcerOperationalApp #panelRoster .guardian-callout { background:#4b3514 !important; border-color:#a8782b !important; color:#ffe1a2 !important; } /* Date navigation is a frequent tablet action: keep its visual compactness without reducing the actual hit area below the shared touch minimum. */ #announcerOperationalApp #panelRoster .roster-date-nav-btn { min-width:44px !important; min-height:44px !important; } #announcerOperationalApp #panelRoster .roster-date-today { min-width:54px !important; } @media (min-width:1101px) { #announcerOperationalApp #panelRoster .roster-date-command { grid-template-columns:minmax(146px, 1fr) minmax(150px, auto) !important; } } /* Compact tablets need one unbroken command column. Keeping the controls in document order is faster to scan than squeezing two independent controls into a narrow rail. */ @media (min-width:600px) and (max-width:800px) { #announcerOperationalApp #panelRoster .time-block-toolbar { display:block !important; } #announcerOperationalApp #panelRoster .roster-date-controls { display:grid !important; grid-template-columns:minmax(0, 1fr) !important; gap:8px !important; } #announcerOperationalApp #panelRoster .roster-date-field, #announcerOperationalApp #panelRoster .desktop-session-label, #announcerOperationalApp #panelRoster .desktop-session-select { grid-column:1 !important; width:100% !important; min-width:0 !important; } #announcerOperationalApp #panelRoster .desktop-session-label { margin-top:2px !important; } #announcerOperationalApp #panelRoster .reference-session-summary { margin-top:10px !important; } } @media (min-width:600px) and (max-width:800px) { #announcerOperationalApp #panelRoster .roster-date-command { display:grid !important; grid-template-columns:minmax(0, 1fr) 150px !important; gap:8px !important; } #announcerOperationalApp #panelRoster .roster-date-nav { width:150px !important; } #announcerOperationalApp #panelRoster .roster-date-nav-btn { width:44px !important; padding-inline:0 !important; } #announcerOperationalApp #panelRoster .roster-date-today { width:54px !important; } } @media (min-width:600px) and (max-width:800px) { #announcerOperationalApp #panelRoster .roster-date-field { grid-row:1 / span 2 !important; } #announcerOperationalApp #panelRoster .desktop-session-label { grid-row:3 !important; } #announcerOperationalApp #panelRoster .desktop-session-select { grid-row:4 !important; } } @media (max-width:1100px), (pointer:coarse) { #announcerOperationalApp #panelRoster .roster-actions #addSwimmerBtn { min-width:44px !important; min-height:44px !important; height:44px !important; } } #announcerOperationalApp #panelRoster .roster-actions #addSwimmerBtn { min-width:44px !important; min-height:44px !important; height:44px !important; } @media (min-width:1101px) { #announcerOperationalApp #panelRoster .roster-table .attBtn { width:40px !important; min-width:40px !important; height:40px !important; min-height:40px !important; } } @media (min-width:1101px) { #announcerOperationalApp #panelRoster .time-block-toolbar { display:grid !important; align-items:end !important; } } @media (min-width:1101px) { #announcerOperationalApp #panelRoster .time-block-toolbar { grid-template-columns:minmax(0, 1fr) !important; width:100% !important; } #announcerOperationalApp #panelRoster .roster-date-controls { width:100% !important; max-width:560px !important; } } @media (min-width:1101px) { #announcerOperationalApp #panelRoster .time-block-card { padding-block:6px !important; } #announcerOperationalApp #panelRoster .time-block-toolbar { padding-bottom:4px !important; } #announcerOperationalApp #panelRoster .roster-date-controls { padding-bottom:4px !important; } } /* Wide roster: keep the quick flags and bulk attendance controls on one scan line. The earlier desktop rule intentionally used a row-spanning bulk column, which left a visible empty band between these related controls. */ @media (min-width:1101px) { #announcerOperationalApp #panelRoster .roster-toolbar { grid-template-columns:auto minmax(240px, 1fr) auto !important; grid-template-areas: "heading search actions" "legend legend bulk" !important; align-items:center !important; } #announcerOperationalApp #panelRoster #tagLegend { grid-column:auto !important; grid-row:auto !important; grid-area:legend !important; order:initial !important; min-height:40px !important; align-content:center !important; } #announcerOperationalApp #panelRoster #bulkAttendanceActions { grid-column:auto !important; grid-row:auto !important; grid-area:bulk !important; align-self:center !important; justify-self:end !important; display:flex !important; align-items:center !important; flex-wrap:nowrap !important; gap:6px !important; margin:0 !important; } } /* Bubble containment: operational labels must never leak beyond their own surface when a name, class, or status is longer than the available space. */ #announcerOperationalApp :is( .pill, .status-pill, .next-pill, .time-pill, .last-pill, .mini-pill, .chip, .identity-pill, .device-pill, .roster-source-pill, .reference-session-status, .legendItem, .flagBadge, .zone.zone-action, .guard-group-bubble ) { box-sizing:border-box !important; min-width:0 !important; max-width:100% !important; } /* Single-line status bubbles shorten gracefully instead of painting through a rounded edge. */ #announcerOperationalApp :is( .identity-pill, .device-pill, .next-pill, .time-pill, .last-pill, .mini-pill, .roster-source-pill, .reference-session-status, .flagBadge, .zone.zone-action ) { overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #announcerOperationalApp :is( .identity-pill, .device-pill, .next-pill, .time-pill, .last-pill, .mini-pill, .roster-source-pill, .reference-session-status, .flagBadge, .zone.zone-action ) > * { min-width:0 !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Assignment and roster tags have meaningful text, so they grow vertically within the bubble rather than truncating or protruding on narrow tablets. */ #announcerOperationalApp :is(.legendItem, .guard-group-bubble) { white-space:normal !important; overflow-wrap:anywhere !important; word-break:break-word; line-height:1.2 !important; }