/* Session-first operational shell. Loaded after legacy styles so launch keeps all features. */
:root {
  --oc-ink: #102a43;
  --oc-muted: #627d98;
  --oc-line: #d9e2ec;
  --oc-surface: #ffffff;
  --oc-soft: #f7fafc;
  --oc-primary: #2563eb;
  --oc-primary-strong: #1d4ed8;
  --oc-teal: #0f766e;
  --oc-radius: 14px;
}

body.light-mode { background: #f7fafc !important; color: var(--oc-ink); }
#announcerOperationalApp.wrap { width: min(calc(100% - 48px), 1500px) !important; }
body.light-mode .topbar,
body.light-mode #panelRoster > .card,
body.light-mode #panelRoster .roster-card {
  border-color: var(--oc-line) !important;
  border-radius: var(--oc-radius) !important;
  box-shadow: 0 10px 28px rgba(16, 42, 67, .055) !important;
}
body.light-mode .topbar { padding: 16px 20px !important; background: var(--oc-surface) !important; }
body.light-mode .topbar::after { background: var(--oc-primary) !important; height: 3px !important; }
body.light-mode .brand-lockup { min-width: 215px; }
body.light-mode .brand-powered { font-size: 12px; color: var(--oc-muted) !important; }
body.light-mode .topbar-actions { gap: 8px !important; }
body.light-mode .topbar-actions #uploadHtmlBtn {
  display: inline-flex !important; min-width: 124px !important; padding: 0 14px !important;
  background: var(--oc-primary) !important; border-color: var(--oc-primary) !important;
}
body.light-mode .topbar-actions #uploadHtmlBtn:hover { background: var(--oc-primary-strong) !important; }
body.light-mode .topbar-actions #speakerPanelBtn {
  width: auto !important; min-width: 122px !important; padding: 0 14px !important;
}

#panelRoster .time-block-card { padding: 18px 22px !important; }
#panelRoster .roster-date-controls { gap: 10px !important; align-items: end; }
#panelRoster .session-command-title { display: flex; flex-direction: column; min-width: 172px; padding-right: 10px; }
#panelRoster .session-command-title h2 { margin: 0; line-height: 1.1; font-size: 22px; color: var(--oc-ink); }
#panelRoster .session-command-title span { margin-top: 5px; color: var(--oc-muted); font-size: 13px; line-height: 1.35; }
#panelRoster .roster-date-controls > label,
#panelRoster .desktop-session-label,
#panelRoster .roster-toolbar label { color: var(--oc-muted); font-size: 11px; letter-spacing: .09em; font-weight: 800; text-transform: uppercase; }
#panelRoster .time-block-selection .pill { background: var(--oc-soft) !important; border-color: var(--oc-line) !important; }
#panelRoster .blocks.has-time-buttons { display: none !important; }
#panelRoster .roster-card { padding: 20px 22px 0 !important; overflow: hidden; }
#panelRoster .roster-toolbar { gap: 14px !important; min-height: 42px; }
#panelRoster .roster-heading h2 { font-size: 25px; letter-spacing: -.025em; }
#panelRoster #tagLegend { order: 5; width: 100%; padding: 10px 0 2px; border-top: 1px solid var(--oc-line); }
#panelRoster .roster-table-wrap { margin-left: -22px; margin-right: -22px; border-radius: 0 !important; border-left: 0; border-right: 0; }
#panelRoster .roster-table th { background: #eef4fb !important; color: #486581 !important; }
#panelRoster .roster-table td { white-space: nowrap; }
#panelRoster .roster-table td:first-child { min-width: 144px; }
#panelRoster .attendance-actions { flex-wrap: nowrap !important; }
#panelRoster .attendance-actions button { min-width: 42px !important; width: 42px; padding: 0 !important; white-space: nowrap !important; }
#panelRoster .attendance-actions button .attendance-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
#panelRoster .attWrap .attendance-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
#panelRoster .attWrap .attBtn { min-width: 44px !important; width: 44px; padding: 0 !important; }
#panelRoster .attWrap .attBtn.here { color: #15803d !important; border-color: #86efac !important; background: #f0fdf4 !important; }
#panelRoster .attWrap .attBtn.absent { color: #dc2626 !important; border-color: #fca5a5 !important; background: #fef2f2 !important; }
#panelRoster .session-progress { border-radius: 12px !important; }

.backup-dev-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 12px; padding: 16px; border: 1px solid #bfdbfe; border-radius: 12px; background: #eff6ff;
}
.backup-dev-notice > div { display: grid; gap: 4px; }
.backup-dev-notice strong { color: var(--oc-ink); }
.backup-dev-notice span { color: #486581; font-size: 14px; line-height: 1.4; }

@media (max-width: 980px) {
  #announcerOperationalApp.wrap { width: min(calc(100% - 28px), 1500px) !important; }
  body.light-mode .topbar { padding: 14px !important; }
  body.light-mode .brand-lockup { min-width: 100%; }
  #panelRoster .time-block-card, #panelRoster .roster-card { padding-left: 16px !important; padding-right: 16px !important; }
  #panelRoster .roster-table-wrap { margin-left: -16px; margin-right: -16px; }
  #panelRoster .session-command-title { min-width: 150px; }
}

@media (max-width: 599px) {
  #announcerOperationalApp.wrap { width: calc(100% - 16px) !important; }
  body.light-mode .topbar { border-radius: 12px !important; }
  body.light-mode .topbar-actions, body.light-mode .topbar-context, body.light-mode .topbar-utility { width: 100% !important; }
  body.light-mode .topbar-context { display: grid !important; grid-template-columns: 1fr 1fr; }
  body.light-mode .topbar-context #locationSelect { grid-column: 1 / -1; max-width: none !important; }
  body.light-mode .topbar-context .identity-pill { grid-column: 1 / -1; max-width: none !important; }
  body.light-mode .topbar-utility { display: grid !important; grid-template-columns: 1fr 1fr; }
  body.light-mode .topbar-actions #uploadHtmlBtn, body.light-mode .topbar-actions #speakerPanelBtn { min-width: 0 !important; width: 100% !important; }
  body.light-mode .topbar-utility button:not(#uploadHtmlBtn):not(#speakerPanelBtn), body.light-mode .topbar-more { display: none !important; }
  #panelRoster .time-block-card { padding: 16px !important; }
  #panelRoster .time-block-toolbar, #panelRoster .roster-date-controls { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; }
  #panelRoster .session-command-title { grid-column: 1 / -1; padding-right: 0; }
  #panelRoster .roster-date-controls > label { align-self: end; }
  #panelRoster .desktop-session-label { display: none !important; }
  #panelRoster .desktop-session-select { grid-column: 1 / -1; width: 100% !important; }
  #panelRoster .time-block-selection { margin-top: 12px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  #panelRoster .time-block-selection .pill { grid-column: 1 / -1; }
  #panelRoster .roster-card { padding: 16px 0 0 !important; }
  #panelRoster .roster-toolbar { padding: 0 16px; display: grid !important; grid-template-columns: 1fr; }
  #panelRoster .roster-toolbar .searchInput, #panelRoster .roster-toolbar .sort-wrap { width: 100% !important; }
  #panelRoster #tagLegend { padding: 10px 16px 2px; overflow-x: auto; white-space: nowrap; }
  #panelRoster .session-progress { margin-left: 16px; margin-right: 16px; }
  #panelRoster .roster-table-wrap { display: none !important; }
  #panelRoster #rosterMobileList { display: grid !important; gap: 10px; padding: 12px 16px 20px; }
  #panelRoster .roster-mobile-row { border: 1px solid var(--oc-line); border-radius: 12px; padding: 14px; background: #fff; }
  #panelRoster .roster-mobile-actions button { min-height: 44px !important; min-width: 44px !important; }
  .backup-dev-notice { align-items: stretch; flex-direction: column; }
  .backup-dev-notice button { min-height: 44px; }
}