* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f3f6fa;
  color: #1f2937;
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 260px;
  background: #0f2a44;
  color: white;
  padding: 20px;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 32px;
}

.brand-icon {
  width: 44px;
  height: 44px;
  background: #1e88e5;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.brand h1 {
  margin: 0;
  font-size: 24px;
}

.brand p {
  margin: 2px 0 0;
  font-size: 13px;
  color: #cbd5e1;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ======================================================
   Operations Center — operational command surface
====================================================== */

.operations-center-console {
  --operations-border: var(--border-color, #d7dee8);
  --operations-muted: var(--text-muted, #667085);
  --operations-soft: #f6f8fb;
  --operations-ink: #172033;
}

.operations-console-titlebar,
.operations-header-actions,
.operations-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.operations-console-titlebar {
  padding-block: 4px 16px;
  border-bottom: 0;
  background: transparent;
}

.operations-title-context h1 {
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  line-height: 1.1;
}

.operations-title-context p {
  margin: 5px 0 0;
  color: var(--operations-muted);
}

.operations-status-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin-bottom: 18px;
  border-block: 1px solid var(--operations-border);
  background: #fff;
}

.operations-status-metric {
  display: flex;
  min-width: 0;
  min-height: 72px;
  padding: 10px 14px;
  border: 0;
  border-right: 1px solid var(--operations-border);
  border-radius: 0;
  background: transparent;
  color: var(--operations-ink);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.operations-status-metric:last-child {
  border-right: 0;
}

.operations-status-metric:hover {
  background: var(--operations-soft);
}

.operations-status-metric span {
  color: var(--operations-muted);
  font-size: 0.88rem;
  font-weight: 650;
}

.operations-status-metric strong {
  margin-top: 2px;
  font-size: 1.62rem;
  line-height: 1;
}

.operations-status-metric-attention strong {
  color: #b42318;
}

.operations-center-console .operations-center-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.8fr);
  gap: 0;
  border: 1px solid var(--operations-border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.operations-center-console .operations-work-deck,
.operations-panel,
.operations-secondary {
  min-width: 0;
  padding: 18px;
  border: 0;
  border-bottom: 1px solid var(--operations-border);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.operations-center-console .operations-work-deck {
  border-right: 1px solid var(--operations-border);
}

.operations-section-heading {
  margin-bottom: 12px;
}

.operations-section-heading h2,
.operations-section-heading h3 {
  margin: 2px 0 0;
}

.operations-work-item[data-urgency="urgent"] {
  border-left: 3px solid #b42318;
}

.operations-work-item[data-urgency="attention"] {
  border-left: 3px solid #b7791f;
}

.operations-upcoming {
  border-bottom: 1px solid var(--operations-border);
}

.operations-timeline-group +
.operations-timeline-group {
  margin-top: 16px;
}

.operations-timeline-group h3 {
  margin: 0 0 5px;
  color: var(--operations-muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.operations-timeline-group ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

.operations-timeline-group li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  border-top: 1px solid #e8ecf2;
}

.operations-timeline-group time {
  padding-top: 11px;
  color: var(--operations-muted);
  font-size: 0.72rem;
}

.operations-timeline-event {
  display: flex;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  background: transparent;
  color: inherit;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.operations-timeline-event:hover strong {
  text-decoration: underline;
}

.operations-timeline-event > span {
  color: var(--operations-muted);
  font-size: 0.74rem;
}

.operations-timeline-status[data-status="healthy"] {
  color: #18794e;
}

.operations-timeline-status[data-status="watch"] {
  color: #8a4b08;
}

.operations-staffing-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.operations-staffing-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.9rem;
}

.operations-staffing-table th,
.operations-staffing-table td {
  padding: 5px 9px;
  border-bottom: 1px solid var(--operations-border);
  text-align: left;
  white-space: nowrap;
}

.operations-staffing-table th {
  color: var(--operations-muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.operations-staffing-table th:nth-child(1) { width: 82px; }
.operations-staffing-table th:nth-child(2) { width: 130px; }
.operations-staffing-table th:nth-child(3) { width: 260px; }
.operations-staffing-table th:nth-child(4) { width: 165px; }
.operations-staffing-table .operations-column-time,
.operations-staffing-table .operations-column-level,
.operations-staffing-table .operations-column-location { text-align: center; }
.operations-staffing-table th.operations-column-matchup { text-align: center; }
.operations-staffing-table td.operations-column-matchup { text-align: left; }

.operations-staffing-table td,
.operations-staffing-table th {
  overflow: hidden;
  text-overflow: ellipsis;
}

.operations-staffing-table .operations-timeline-event {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operations-staffing-table .operations-timeline-event {
  display: inline;
  padding: 0;
  color: #175cd3;
  font-weight: 700;
}

.operations-staffing-assignment[data-status="open"] {
  color: #8a4b08;
  font-weight: 700;
}

.operations-staffing-health {
  display: grid;
  gap: 2px;
}

.operations-period-health {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  padding: 4px 0;
  border-bottom: 1px solid var(--operations-border);
  gap: 9px;
  align-items: center;
}

.operations-period-health-content {
  display: grid;
  gap: 3px;
}

.operations-period-health-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
}

.operations-period-health-summary strong {
  font-size: 0.9rem;
}

.operations-period-health-summary span {
  color: var(--operations-muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.operations-period-signals {
  display: grid;
  margin: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.operations-period-signals > div {
  display: flex;
  min-width: 0;
  padding: 2px;
  border-bottom: 1px solid var(--operations-border);
  border-radius: 0;
  background: transparent;
  align-items: center;
  justify-content: flex-start;
  gap: 72px;
}

.operations-period-signals dt {
  display: flex;
  min-width: 190px;
  overflow: hidden;
  color: var(--operations-muted);
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operations-signal-status {
  margin-left: auto;
  color: #667085;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.operations-period-signals dd {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 800;
}

.operations-period-signals .operations-signal-active {
  color: var(--operations-ink);
}

.operations-log {
  grid-column: 1 / -1;
}

.operations-log-list {
  border-top: 1px solid var(--operations-border);
}

.operations-log-row {
  display: grid;
  grid-template-columns: 64px minmax(120px, 0.75fr) minmax(120px, 0.8fr) minmax(120px, 0.8fr) minmax(220px, 1.8fr);
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 7px 8px;
  border: 0;
  border-bottom: 1px solid #e8ecf2;
  border-radius: 0;
  background: transparent;
  color: var(--operations-ink);
  gap: 10px;
  align-items: center;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.75rem;
  text-align: left;
}

.operations-log-row:hover {
  background: var(--operations-soft);
}

.operations-log-time,
.operations-log-location,
.operations-log-actor {
  color: var(--operations-muted);
}

.operations-log-type {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  font-weight: 700;
}

.operations-log-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.operations-log-action {
  font-family: inherit;
}

.operations-log-more {
  margin-top: 10px;
}

.operations-secondary {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  border-bottom: 0;
  background: var(--operations-soft);
}

.operations-secondary .operations-queue-rail,
.operations-secondary .operations-status-rail {
  min-width: 0;
}

.operations-secondary .operations-log-row {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 3px 8px;
}

.operations-secondary .operations-log-type,
.operations-secondary .operations-log-location,
.operations-secondary .operations-log-actor,
.operations-secondary .operations-log-action {
  grid-column: 2;
}

@media (max-width: 1000px) {
  .operations-center-console .operations-center-shell {
    grid-template-columns: 1fr;
  }

  .operations-center-console .operations-work-deck {
    border-right: 0;
  }

  .operations-log,
  .operations-secondary {
    grid-column: auto;
  }

  .operations-log-row {
    grid-template-columns: 58px minmax(110px, 0.8fr) minmax(100px, 0.8fr) minmax(0, 1.4fr);
  }

  .operations-log-actor {
    grid-column: 3;
  }

  .operations-log-action {
    grid-column: 4;
  }
}

@media (max-width: 720px) {
  .operations-console-titlebar,
  .operations-header-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .operations-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operations-status-metric:nth-child(even) {
    border-right: 0;
  }

  .operations-log-row {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 4px 10px;
  }

  .operations-log-type,
  .operations-log-location,
  .operations-log-actor,
  .operations-log-action {
    grid-column: 2;
  }

  .operations-secondary {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .operations-center-console * {
    scroll-behavior: auto;
  }
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.nav-group[hidden] {
  display: none;
}

.nav-group-label {
  margin: 0 0 2px;
  padding: 0 14px;
  color: #93a9bd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.nav-link {
  border: none;
  background: transparent;
  color: #dbeafe;
  padding: 12px 14px;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font-size: 15px;
}

.nav-link:hover,
.nav-link.active,
.nav-link:focus-visible {
  background: #155eef;
  color: white;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.topbar {
  background: white;
  padding: 22px 28px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar #page-title {
  margin: 0;
  font-size: 26px;
}

.topbar p {
  margin: 4px 0 0;
  color: #6b7280;
}

.role-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
}

.role-btn {
  border: 1px solid #cbd5e1;
  background: white;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.role-btn.active {
  background: #0f2a44;
  color: white;
  border-color: #0f2a44;
}

.content-area {
  padding: 28px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.card {
  background: white;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 14px rgba(15, 42, 68, 0.08);
}

.card h3 {
  margin-top: 0;
}

.placeholder {
  color: #6b7280;
  line-height: 1.5;
}

@media (max-width: 800px) {
  .app-shell {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}
.stat-card {
  min-height: 150px;
}

.stat-number {
  font-size: 38px;
  font-weight: bold;
  color: #0f2a44;
  margin: 12px 0;
}

.stat-number.warning {
  color: #b91c1c;
}

.section-spacer {
  height: 24px;
}

.game-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.game-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #e5e7eb;
}

.game-row:last-child {
  border-bottom: none;
}

.game-row p {
  margin: 6px 0 0;
  color: #6b7280;
  font-size: 14px;
}

.game-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 130px;
}

.status-pill {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: bold;
}

.status-assigned {
  background: #dcfce7;
  color: #166534;
}

.status-unassigned {
  background: #fee2e2;
  color: #991b1b;
}

.umpire-name {
  color: #374151;
  font-size: 13px;
}
.coverage-panel {
  padding: 24px;
}

.coverage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.coverage-percent {
  font-size: 42px;
  font-weight: bold;
  color: #0f2a44;
}

.coverage-bar {
  height: 16px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin: 18px 0;
}

.coverage-fill {
  height: 100%;
  background: #1e88e5;
  border-radius: 999px;
}

.coverage-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: #374151;
  font-size: 14px;
  font-weight: bold;
}

.page-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.primary-btn,
.small-btn {
  border: none;
  background: #1e88e5;
  color: white;
  border-radius: 9px;
  cursor: pointer;
  font-weight: bold;
}

.primary-btn {
  padding: 10px 14px;
  font-size: 14px;
}

.small-btn {
  padding: 7px 10px;
  font-size: 12px;
}

.settings-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-pill {
  background: #eef6ff;
  color: #0f2a44;
  border: 1px solid #bfdbfe;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 13px;
}
.schedule-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) minmax(220px, 2fr);
  gap: 10px;
  margin-bottom: 18px;
}

.schedule-toolbar select,
.schedule-toolbar input {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: white;
  font-size: 14px;
}

.schedule-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 850px;
}

.schedule-table th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  color: #475569;
  text-align: left;
  font-size: 13px;
  padding: 13px 14px;
  border-bottom: 1px solid #e5e7eb;
}

.schedule-table td {
  padding: 14px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
}

.schedule-table tbody tr {
  cursor: pointer;
}

.schedule-table tbody tr:hover {
  background: #f1f5f9;
}

.schedule-table tbody tr:last-child td {
  border-bottom: none;
}

.row-assigned {
  background: #fbfffc;
}

.row-unassigned {
  background: #fffdf5;
}

@media (max-width: 900px) {
  .schedule-toolbar {
    grid-template-columns: 1fr;
  }
}
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 42, 68, 0.25);
  z-index: 40;
}

.game-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 92vw;
  height: 100vh;
  background: white;
  box-shadow: -8px 0 24px rgba(15, 42, 68, 0.18);
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
}

.game-drawer.open {
  transform: translateX(0);
}

.hidden {
  display: none;
}

.drawer-header {
  padding: 22px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.drawer-header h3 {
  margin: 0;
}

.drawer-header p {
  margin: 5px 0 0;
  color: #6b7280;
}

.drawer-close-btn {
  border: none;
  background: #f1f5f9;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.drawer-body {
  padding: 22px;
  overflow-y: auto;
  flex: 1;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid #eef2f7;
}

.detail-row span {
  color: #64748b;
}

.detail-row strong {
  text-align: right;
}

.drawer-note {
  margin-top: 20px;
}

.drawer-note label {
  display: block;
  margin-bottom: 8px;
  color: #64748b;
  font-weight: bold;
  font-size: 14px;
}

.drawer-note textarea {
  width: 100%;
  min-height: 110px;
  padding: 11px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  resize: vertical;
  font-family: inherit;
}

.drawer-footer {
  padding: 18px 22px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.secondary-btn {
  border: 1px solid #cbd5e1;
  background: white;
  color: #334155;
  border-radius: 9px;
  cursor: pointer;
  font-weight: bold;
  padding: 10px 14px;
}
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 7px;
  color: #475569;
  font-weight: bold;
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: white;
  font-size: 14px;
  font-family: inherit;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}
.drawer-footer-split {
  justify-content: space-between;
}

.danger-btn {
  border: none;
  background: #dc2626;
  color: white;
  border-radius: 9px;
  cursor: pointer;
  font-weight: bold;
  padding: 10px 14px;
}

.danger-btn:hover {
  background: #b91c1c;
}
.crew-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crew-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  background: #ffffff;
}

.crew-card h3 {
  margin: 0 0 6px;
}

.crew-card p {
  margin: 4px 0;
  color: #64748b;
  font-size: 14px;
}

.crew-card .settings-list {
  margin-top: 12px;
}

.crew-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-size: 14px;
}

.checkbox-row input {
  width: auto;
}
.quick-assign-select {
  width: 100%;
  min-width: 150px;
  padding: 8px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: white;
  font-size: 13px;
}
.status-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}

.warning-label {
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
}
.schedule-view-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.view-toggle-btn {
  padding: 8px 14px;
  border: 1px solid #ccc;
  background: #f4f4f4;
  border-radius: 6px;
  cursor: pointer;
}

.view-toggle-btn.active {
  background: #1f6feb;
  color: white;
  border-color: #1f6feb;
}

.daily-schedule-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0;
}

.daily-schedule-header h2 {
  margin: 0;
}

.daily-game-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.daily-game-card {
  display: grid;
  grid-template-columns: 90px 1fr 120px 80px;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-left: 7px solid #ccc;
}

.daily-game-card.assigned {
  border-left-color: #2da44e;
}

.daily-game-card.needs-crew {
  border-left-color: #cf222e;
}

.daily-game-time {
  font-size: 18px;
  font-weight: bold;
}

.daily-game-field {
  font-weight: bold;
  margin-bottom: 4px;
}

.daily-game-matchup {
  font-size: 16px;
}

.daily-game-crew {
  margin-top: 6px;
  color: #333;
}

.daily-game-crew.missing {
  color: #cf222e;
  font-weight: bold;
}

.daily-game-status {
  font-weight: bold;
}

.daily-game-actions button,
.daily-schedule-header button {
  padding: 7px 12px;
  border: none;
  border-radius: 6px;
  background: #1f6feb;
  color: white;
  cursor: pointer;
}

.empty-daily-view {
  padding: 20px;
  background: #fff;
  border: 1px dashed #ccc;
  border-radius: 10px;
  text-align: center;
  color: #666;
}
/* ======================================================
   DASHBOARD 2.0
====================================================== */

.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.dashboard-full {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-full {
    grid-column: auto;
  }
}

.dashboard-card {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border: 1px solid #e6ebf2;
}

.card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px;
}

.card-header h2{
  margin:0;
  font-size:1.3rem;
}

.card-subtitle{
  color:#7b8794;
  font-size:.9rem;
}

.summary-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:18px;
}

.summary-tile{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:22px;
  text-align:center;
  transition:.18s;
  cursor:default;
}

.summary-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.summary-icon{
  font-size:30px;
  margin-bottom:10px;
}

.summary-value{
  font-size:34px;
  font-weight:700;
  color:#1f2937;
  line-height:1;
}

.summary-label{
  margin-top:10px;
  color:#6b7280;
  font-size:.95rem;
}

.summary-tile {
  appearance: none;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  border-radius: 12px;
  padding: 22px;
  text-align: left;
  transition: 0.18s;
  cursor: pointer;
  border-left: 6px solid #94a3b8;
}

.summary-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.summary-blue {
  border-left-color: #2563eb;
}

.summary-green {
  border-left-color: #16a34a;
}

.summary-orange {
  border-left-color: #f97316;
}

.summary-red {
  border-left-color: #dc2626;
}

.summary-purple {
  border-left-color: #7c3aed;
}
.attention-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attention-item {
  appearance: none;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.18s;
  border-left: 6px solid #94a3b8;
}

.attention-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.attention-item strong {
  display: block;
  color: #1f2937;
  margin-bottom: 4px;
}

.attention-item span {
  color: #6b7280;
  font-size: 0.9rem;
}

.attention-count {
  font-size: 28px;
  font-weight: 800;
  color: #1f2937;
}

.attention-success {
  border-left-color: #16a34a;
}

.attention-warning {
  border-left-color: #f97316;
}

.attention-danger {
  border-left-color: #dc2626;
}
.today-game-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.today-game {
  display: grid;
  grid-template-columns: 90px 1fr 160px auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  border-left: 6px solid #94a3b8;
}

.today-assigned {
  border-left-color: #16a34a;
}

.today-open {
  border-left-color: #f97316;
}

.today-time {
  font-weight: 800;
  color: #1f2937;
}

.today-details strong {
  display: block;
  color: #111827;
}

.today-details span {
  color: #6b7280;
  font-size: 0.9rem;
}

.today-crew {
  font-weight: 700;
  color: #374151;
}

.needs-crew-text {
  color: #dc2626;
}

.small-action-btn {
  border: none;
  background: #1f2937;
  color: white;
  padding: 8px 12px;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 700;
}

.small-action-btn:hover {
  background: #111827;
}

@media (max-width: 850px) {
  .today-game {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
}
.crew-hero {
    margin-bottom: 24px;
}

.crew-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.stat-value {
    font-size: 30px;
    font-weight: 700;
}

.stat-label {
    margin-top: 6px;
    color: #666;
    font-size: 14px;
}

.hero-status {
    margin-bottom: 14px;
}
.assignment-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 9999;
  display: flex;
  justify-content: flex-end;
}

.assignment-drawer {
  width: min(520px, 100%);
  height: 100vh;
  background: white;
  overflow-y: auto;
  padding: 24px;
  box-shadow: -12px 0 30px rgba(0, 0, 0, 0.18);
}
.claim-queue-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}

.claim-queue-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .5rem 1rem;
}

.claim-queue-details p {
  margin: 0;
}

.claim-queue-actions {
  display: flex;
  gap: .75rem;
}
.is-highlighted {
  border: 2px solid #f4b400;
  box-shadow: 0 0 0 3px rgba(244, 180, 0, 0.18);
  background: rgba(244, 180, 0, 0.08);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.is-highlighted {
  border: 2px solid #f4b400;
  box-shadow: 0 0 0 3px rgba(244, 180, 0, 0.18);
  background-color: rgba(244, 180, 0, 0.08);
  transition:
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}
/* ==================================================
   Availability Management
   ================================================== */

.availability-page {
  display: grid;
  gap: 1.5rem;
}

.availability-page-header h2,
.availability-list-header h3 {
  margin-bottom: 0.25rem;
}

.availability-page-header p,
.availability-list-header p {
  margin: 0;
  color: var(--muted, #64748b);
}

.availability-form-card,
.availability-list-section {
  padding: 1.25rem;
  border: 1px solid var(--border-color, #dbe2ea);
  border-radius: 0.75rem;
  background: var(--surface, #ffffff);
}

.availability-form-grid {
  display: grid;
  grid-template-columns:
    minmax(220px, 1fr)
    minmax(180px, 0.6fr);
  gap: 1rem;
}

.availability-field {
  display: grid;
  gap: 0.4rem;
}

.availability-field > span,
.availability-status-fieldset legend {
  font-weight: 600;
}

.availability-field select,
.availability-field input {
  width: 100%;
  min-height: 2.75rem;
}

.availability-status-fieldset {
  margin: 1.25rem 0 0;
  padding: 0;
  border: 0;
}

.availability-status-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.availability-status-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.6rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}

.availability-status-option:hover,
.availability-status-option.is-selected {
  border-color: currentColor;
  box-shadow: 0 0 0 2px
    color-mix(in srgb, currentColor 18%, transparent);
}

.availability-status-option input {
  margin: 0;
}

.availability-status-available {
  color: #166534;
}

.availability-status-maybe {
  color: #92400e;
}

.availability-status-unavailable {
  color: #991b1b;
}

.availability-form-actions,
.availability-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.availability-form-actions {
  margin-top: 1.25rem;
}

.availability-list-header,
.availability-entry-card,
.availability-entry-details {
  display: flex;
  align-items: center;
}

.availability-list-header,
.availability-entry-card {
  justify-content: space-between;
  gap: 1rem;
}

.availability-entry-count {
  color: var(--muted, #64748b);
  font-size: 0.9rem;
}

.availability-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.availability-entry-card {
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-color, #dbe2ea);
  border-radius: 0.65rem;
}

.availability-entry-details {
  flex-wrap: wrap;
  gap: 0.75rem;
}

.availability-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}

.availability-status-badge-available {
  color: #166534;
  background: #dcfce7;
}

.availability-status-badge-maybe {
  color: #92400e;
  background: #fef3c7;
}

.availability-status-badge-unavailable {
  color: #991b1b;
  background: #fee2e2;
}

@media (max-width: 700px) {
  .availability-form-grid {
    grid-template-columns: 1fr;
  }

  .availability-list-header,
  .availability-entry-card {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* =========================================================
   Assignment availability
   ========================================================= */

.assignment-availability {
  align-self: flex-start;
}

.availability-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.availability-badge-available {
  color: #166534;
  background: #dcfce7;
  border-color: #86efac;
}

.availability-badge-maybe {
  color: #854d0e;
  background: #fef9c3;
  border-color: #fde047;
}

.availability-badge-unavailable {
  color: #991b1b;
  background: #fee2e2;
  border-color: #fca5a5;
}

.crew-builder-slot-controls {
  gap: 8px;
}

.crew-builder-slot-controls select {
  min-width: 0;
}
/* BlueCrew 2027.6 — ranked assignment recommendations */

.assignment-recommendation-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.assignment-recommendation-card {
  border: 1px solid var(--border-color, #d7dce2);
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.recommendation-card-header,
.recommendation-metrics {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.recommendation-card-header {
  justify-content: space-between;
}

.recommendation-rank {
  margin-right: 0.4rem;
  font-weight: 700;
}

.recommendation-score {
  font-weight: 700;
}

.recommendation-metrics {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.recommendation-reasons {
  margin: 0.6rem 0;
  padding-left: 1.25rem;
}

.recommendation-use-btn {
  margin-top: 0.25rem;
}

.crew-builder-slot.locked
  .assignment-recommendation-card {
  opacity: 0.7;
}

/* ----------------------------------------------------
   Game Hub
---------------------------------------------------- */

.game-hub {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.game-hub > h2 {
  margin: 0;
}

.game-hub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.game-hub-summary {
  padding: 24px;
}

.game-hub-umpire-summary { padding: 20px; }
.game-hub-umpire-summary h2 { margin: 0; font-size: clamp(1.3rem, 3vw, 1.75rem); }
.game-hub-summary-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.game-hub-level-badge,
.game-hub-operational-badge,
.game-hub-assignment-badge,
.game-hub-position-badge { border-radius: 999px; display: inline-flex; padding: 7px 12px; font-weight: 800; line-height: 1; }
.game-hub-level-badge { background: #0f2742; color: #fff; }
.game-hub-operational-badge[data-status="on-time"],
.game-hub-assignment-badge[data-assigned="true"] { background: #15803d; color: #fff; }
.game-hub-operational-badge[data-status="delayed"] { background: #c2410c; color: #fff; }
.game-hub-operational-badge[data-status="cancelled"] { background: #b91c1c; color: #fff; }
.game-hub-operational-badge[data-status="completed"] { background: var(--accent, #14b8a6); color: #062b2a; }
.game-hub-assignment-badge[data-assigned="false"], .game-hub-position-badge { background: #e2e8f0; color: #0f2742; }
.game-hub-weather { display: inline-flex; align-items: center; min-height: 30px; color: #334155; font-weight: 650; }
.game-hub-summary-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.game-hub-completion-dialog { width: min(92vw, 520px); border: 0; border-radius: 14px; padding: 24px; box-shadow: 0 24px 60px rgba(15, 39, 66, .28); }
.game-hub-completion-dialog::backdrop { background: rgba(15, 23, 42, .58); }
.game-hub-completion-dialog label { display: grid; gap: 6px; margin: 14px 0; font-weight: 700; }
.game-hub-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.game-hub-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.game-hub-summary-header h3 {
  margin-bottom: 8px;
  font-size: 1.5rem;
}

.game-hub-summary-date {
  color: var(--text-muted, #64748b);
}

.game-hub-summary-status {
  flex-shrink: 0;
}

.game-hub-summary-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.game-hub-summary-details > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.game-hub-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.game-hub-section {
  padding: 20px;
}

.game-hub-section > h3 {
  margin-bottom: 16px;
}

@media (max-width: 700px) {
  .game-hub-summary-header {
    flex-direction: column;
  }

  .game-hub-summary-details {
    grid-template-columns: 1fr;
  }
}

.game-hub-notes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.game-hub-notes-input {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  resize: vertical;
  font: inherit;
  color: inherit;
  background: inherit;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}

.game-hub-notes-footer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.game-hub-checklist {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.game-hub-checklist-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.game-hub-checklist-header h3 {
  margin: 0;
}

.game-hub-checklist-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.game-hub-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
}

.game-hub-checklist-item input {
  margin-top: 3px;
}

.game-hub-checklist-item > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.game-hub-checklist-item:has(input:checked) {
  opacity: 0.7;
}

.game-hub-checklist-item:has(input:checked) strong {
  text-decoration: line-through;
}

@media (max-width: 700px) {
  .game-hub-checklist-header {
    align-items: flex-start;
    flex-direction: column;
  }
}
.game-hub-review-comments {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-color, #d0d0d0);
  border-radius: .5rem;
  background: var(--surface-subtle, #f8f8f8);
}

.game-hub-review-comments dd {
  margin-top: .5rem;
  white-space: pre-wrap;
  font-weight: 600;
}

/* Game Hub lifecycle presentation */

.game-hub-lifecycle-banner {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.game-hub-lifecycle-banner[data-status="cancelled"] {
  border-left: 4px solid var(--danger-color, #b42318);
}

.game-hub-lifecycle-banner[data-status="postponed"] {
  border-left: 4px solid var(--warning-color, #b54708);
}

.game-hub-lifecycle-banner[data-status="approved"] {
  border-left: 4px solid var(--success-color, #027a48);
}

.game-hub-summary-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.game-hub-lifecycle-badge {
  white-space: nowrap;
}


/* Reports */

.reports-page .dashboard-grid {
  margin-top: 1.25rem;
}

.report-summary-list {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0 0;
}

.report-summary-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.report-summary-row dt {
  color: var(--muted-text, #667085);
}

.report-summary-row dd {
  font-weight: 700;
  margin: 0;
}


/* Reporting Detail Views */

.report-card {
  align-self: start;
}

.report-detail-toggle {
  white-space: nowrap;
}

.report-detail {
  border-top: 1px solid
    var(--border-color, #e4e7ec);
  margin-top: 1rem;
  padding-top: 1rem;
}

.report-table-wrapper {
  overflow-x: auto;
}

.report-table {
  border-collapse: collapse;
  width: 100%;
}

.report-table th,
.report-table td {
  border-bottom: 1px solid
    var(--border-color, #e4e7ec);
  padding: 0.75rem;
  text-align: left;
  vertical-align: top;
}

.report-table th {
  color: var(--muted-text, #667085);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.report-table-secondary {
  color: var(--muted-text, #667085);
  display: block;
  font-size: 0.85rem;
  margin-top: 0.2rem;
}

.report-detail-empty {
  color: var(--muted-text, #667085);
  padding: 1rem 0;
}


/* Report Exports */

.report-card-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}


/* Report Presets */

.reports-preset-card {
  background: var(--card-background, #fff);
  border: 1px solid
    var(--border-color, #e4e7ec);
  border-radius: 0.75rem;
  margin-top: 1rem;
  padding: 1rem;
}

.reports-preset-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns:
    repeat(auto-fit, minmax(220px, 1fr));
}

.reports-preset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.reports-preset-message {
  margin: 0.75rem 0 0;
}

.reports-preset-message-success {
  color: var(--success-color, #067647);
}

.reports-preset-message-error {
  color: var(--danger-color, #b42318);
}


/* Season Operations Dashboard */

.season-dashboard-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns:
    repeat(auto-fit, minmax(300px, 1fr));
}

.season-dashboard-card {
  min-width: 0;
}

.season-dashboard-activity {
  grid-column: 1 / -1;
}


/* Season Dashboard Intelligence */

.season-dashboard-intelligence {
  min-width: 0;
}

.season-intelligence-list {
  display: grid;
  gap: 0.75rem;
}

.season-intelligence-item {
  align-items: center;
  border: 1px solid var(--border-color, #d9dee7);
  border-radius: 0.75rem;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.9rem;
}

.season-intelligence-content {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.season-intelligence-heading {
  align-items: center;
  display: flex;
  gap: 0.65rem;
}

.season-intelligence-count {
  align-items: center;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 700;
  justify-content: center;
  min-height: 1.65rem;
  min-width: 1.65rem;
  padding: 0 0.45rem;
}

.season-health-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns:
    repeat(auto-fit, minmax(180px, 1fr));
}

.season-health-item {
  border: 1px solid var(--border-color, #d9dee7);
  border-radius: 0.75rem;
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
}

.season-health-label {
  font-weight: 600;
}

.season-health-value {
  font-size: 1.6rem;
}

.season-health-healthy {
  border-left: 4px solid #238636;
}

.season-health-watch {
  border-left: 4px solid #bf8700;
}

.season-health-critical {
  border-left: 4px solid #cf222e;
}


/* Season Dashboard Drill-Down */

.season-dashboard-metric-action {
  appearance: none;
  background: inherit;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: inherit;
  width: 100%;
}

.season-dashboard-metric-action:hover,
.season-dashboard-metric-action:focus-visible {
  border-color: currentColor;
  transform: translateY(-1px);
}

/* Operations Center quick actions */
.operations-task-actions,
.operations-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.operations-action-message {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
}

.operations-action-message[data-state="error"] {
  font-weight: 600;
}

/* Operations Center workflow advancement */
.operations-current-task-advanced {
  animation:
    operations-task-advance 600ms ease-out;
}

.operations-action-message[data-state="success"] {
  font-weight: 600;
}

@keyframes operations-task-advance {
  0% {
    opacity: 0.55;
    transform: translateY(0.35rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .operations-current-task-advanced {
    animation: none;
  }
}

/* Administrative Game Hub command view */
body[data-page="game-hub"] .game-hub-admin {
  --game-hub-teal: #07596b;
  --game-hub-cyan: #22aabd;
  display: grid;
  gap: 10px;
}

.game-hub-admin-nav { display: flex; justify-content: flex-start; }
.game-hub-command-layout { display: grid; gap: 10px; }
.game-hub-command-card {
  padding: 14px 16px;
  border: 1px solid #a9ced6;
  border-top: 4px solid var(--game-hub-cyan);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(15, 39, 66, 0.07);
}

.game-hub-command-summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  border-top-color: var(--game-hub-teal);
}

.game-hub-command-title h2,
.game-hub-command-title h3 { margin: 2px 0 0; color: #13283f; }
.game-hub-command-status { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.game-hub-command-summary dl {
  display: grid;
  margin: 4px 0 0;
  grid-column: 1 / -1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.game-hub-command-summary dl > div {
  padding: 6px 10px;
  border-radius: 5px;
  background: linear-gradient(135deg, #07596b, #087f91);
  color: #fff;
}
.game-hub-command-summary dt { color: #c9f5fa; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.game-hub-command-summary dd { margin: 2px 0 0; font-size: 1rem; font-weight: 800; }
.game-hub-command-complete { align-self: start; justify-self: end; }

.game-hub-command-crew > header,
.game-hub-crew-picker header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.game-hub-command-crew h3, .game-hub-command-contact h3, .game-hub-crew-picker h3 { margin: 2px 0 0; }
.game-hub-picker-heading { display: grid; gap: 3px; }
.game-hub-picker-heading > span { color: #526779; font-weight: 700; }
.game-hub-admin-heading { margin: 12px 0; }
.game-hub-admin-heading h2 { margin: 2px 0 0; }
.game-hub-command-slots { display: grid; margin-top: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.game-hub-command-slot {
  display: flex;
  min-height: 64px;
  padding: 8px 10px;
  border: 1px solid #b8d6de;
  border-radius: 6px;
  background: #eef8fa;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}
.game-hub-command-slot > span { color: #526b7a; font-size: 0.73rem; font-weight: 800; text-transform: uppercase; }
.game-hub-command-slot > strong { color: #07596b; }
.game-hub-command-slot .button { align-self: flex-start; min-height: 30px; padding: 4px 9px; }

.game-hub-crew-picker { width: min(720px, calc(100vw - 32px)); max-height: min(680px, calc(100vh - 32px)); padding: 0; border: 1px solid #75aeba; border-radius: 10px; }
.game-hub-crew-picker::backdrop { background: rgba(7, 37, 57, 0.62); }
.game-hub-crew-picker form { display: grid; }
.game-hub-decline-dialog { width: min(520px, calc(100vw - 32px)); }
.game-hub-decline-dialog .game-hub-decline-content { display: grid; gap: 8px; padding: 16px; }
.game-hub-decline-dialog textarea { box-sizing: border-box; width: 100%; min-height: 112px; resize: vertical; }
.game-hub-decline-dialog footer { justify-content: flex-end; padding: 0 16px 16px; }
.game-hub-crew-picker header { position: sticky; top: 0; z-index: 1; padding: 14px 16px; border-bottom: 1px solid #b8d6de; background: #fff; }
.game-hub-picker-actions { display: flex; gap: 6px; }
.game-hub-crew-search { padding: 10px 16px 0; }
.game-hub-crew-search label { display: grid; gap: 5px; color: #526b7a; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.game-hub-crew-search input { width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid #a9ced6; border-radius: 6px; color: #13283f; font: inherit; text-transform: none; }
.game-hub-crew-options { display: grid; padding: 10px 16px 16px; gap: 5px; overflow: auto; }
.game-hub-crew-option { display: flex; padding: 9px 10px; border: 1px solid #d4e4e8; border-radius: 6px; gap: 10px; align-items: center; cursor: pointer; }
.game-hub-crew-option:hover, .game-hub-crew-option:has(input:checked) { border-color: #22aabd; background: #e9f8fa; }
.game-hub-crew-option[hidden] { display: none !important; }
.game-hub-crew-option span { display: grid; gap: 2px; }
.game-hub-crew-option small { color: #526b7a; }
.game-hub-crew-levels { display: flex !important; flex-wrap: wrap; gap: 4px !important; }
.game-hub-crew-levels > span { display: inline-flex; width: fit-content; padding: 2px 7px; border: 1px solid #a9dce5; border-radius: 999px; background: #dff5f8; color: #07596b; font-size: .72rem; font-weight: 800; }
.game-hub-notes-dialog { padding: 0 16px 16px; }
.game-hub-notes-dialog header { margin-inline: -16px; }
.game-hub-admin-notes p { padding-bottom: 8px; border-bottom: 1px solid #d8e6ea; }
.game-hub-command-contact { display: grid; gap: 4px; }
.game-hub-command-contact a { width: fit-content; color: #076b7d; }

@media (max-width: 900px) {
  .game-hub-command-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .game-hub-command-summary { grid-template-columns: 1fr; }
  .game-hub-command-status { grid-row: auto; }
  .game-hub-command-summary dl, .game-hub-command-slots { grid-template-columns: 1fr; }
  .game-hub-command-complete { position: static; justify-self: start; }
}

.role-switcher-label {
  display: grid;
  margin-right: 4px;
  line-height: 1.1;
}

.role-switcher-label strong {
  font-size: 0.75rem;
}

.role-switcher-label small {
  color: #667085;
  font-size: 0.65rem;
}

.status-badge {
  align-items: center;
  background: #f2f4f7;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  color: #344054;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  min-height: 24px;
  padding: 0.25rem 0.625rem;
}

.status-badge-approved,
.status-badge-filled,
.status-badge-success,
.status-badge-healthy {
  background: #ecfdf3;
  border-color: #abefc6;
  color: #067647;
}

.status-badge-pending,
.status-badge-warning,
.status-badge-watch {
  background: #fffaeb;
  border-color: #fedf89;
  color: #93370d;
}

.status-badge-open,
.status-badge-rejected,
.status-badge-danger,
.status-badge-critical {
  background: #fef3f2;
  border-color: #fecdca;
  color: #b42318;
}

.status-badge-info {
  background: #eff8ff;
  border-color: #b2ddff;
  color: #175cd3;
}

.status-badge-needs-assignment {
  background: #c7372f;
  border-color: #a92b25;
  color: #fff;
}

.status-badge-assigned {
  background: #207a49;
  border-color: #185f39;
  color: #fff;
}

.status-badge-scheduled { background: #207a49; border-color: #185f39; color: #fff; }
.status-badge-pending-approval { background: #b54708; border-color: #93370d; color: #fff; }
.status-badge-completed,
.status-badge-approved-semantic { background: #175cd3; border-color: #1849a9; color: #fff; }
.status-badge-cancelled { background: #667085; border-color: #475467; color: #fff; }

/* ======================================================
   THE SLATE SHARED PRESENTATION CONTRACT

   Controls use `.button` with one canonical variant:
   `.button-primary`, `.button-secondary`, `.button-danger`,
   or `.button-link`. Legacy control classes remain supported
   while high-traffic surfaces migrate incrementally.
====================================================== */

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  display: inline-flex;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  gap: 0.5rem;
  justify-content: center;
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.button-primary {
  background: #155eef;
  border-color: #155eef;
  color: #ffffff;
}

.button-primary:hover:not(:disabled) {
  background: #004eeb;
  border-color: #004eeb;
}

.button-secondary {
  background: #ffffff;
  border-color: #98a2b3;
  color: #344054;
}

.button-secondary:hover:not(:disabled) {
  background: #f2f4f7;
  border-color: #667085;
}

.button-danger {
  background: #b42318;
  border-color: #b42318;
  color: #ffffff;
}

.button-danger:hover:not(:disabled) {
  background: #912018;
  border-color: #912018;
}

.button-link {
  background: transparent;
  border-color: transparent;
  color: #175cd3;
  padding-inline: 0.375rem;
}

.button-link:hover:not(:disabled) {
  background: #eff8ff;
  color: #004eeb;
  text-decoration: underline;
}

.button-ghost { background: transparent; border-color: #d0d5dd; color: #344054; }
.button-ghost:hover:not(:disabled) { background: #f2f4f7; border-color: #98a2b3; }
.button-view-all { white-space: nowrap; }

.button-compact {
  min-height: 36px;
  min-width: 36px;
  padding: 0.4375rem 0.625rem;
}

.button:focus-visible,
.button-primary:focus-visible,
.button-secondary:focus-visible,
.button-danger:focus-visible,
.button-link:focus-visible {
  outline: 3px solid #101828;
  outline-offset: 3px;
}

.button.button-primary:disabled,
.button.button-secondary:disabled,
.button.button-danger:disabled,
.button.button-ghost:disabled,
.button[aria-disabled="true"] {
  background: #f2f4f7;
  border-color: #d0d5dd;
  color: #667085;
  opacity: 1;
}

.presentation-card,
.presentation-panel {
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  min-width: 0;
}

.presentation-form-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.presentation-table-wrapper {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  width: 100%;
}

.presentation-empty-state,
.presentation-error-state {
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
}

.presentation-error-state {
  background: #fef3f2;
  border: 1px solid #fecdca;
  color: #912018;
}

.presentation-empty-state h3,
.presentation-empty-state p,
.presentation-error-state h3,
.presentation-error-state p {
  margin-block: 0;
}

.presentation-empty-state h3 + p,
.presentation-error-state h3 + p {
  margin-top: 0.375rem;
}

/* ======================================================
   BLUECREW 2028.13C
   Responsive Layout & Final UX Hardening
====================================================== */

/*
  Shared containment
*/

.page-wrapper,
.page-section,
.dashboard-card,
.card,
.workbench-card,
.operations-card,
.notification-card,
.profile-card,
.game-hub-card,
.season-dashboard-card {
  min-width: 0;
}

.page-wrapper,
.page-section {
  width: 100%;
  max-width: 100%;
}

.page-wrapper *,
.page-section * {
  box-sizing: border-box;
}

.page-wrapper img,
.page-section img,
.page-wrapper svg,
.page-section svg {
  max-width: 100%;
}

.page-wrapper h1,
.page-wrapper h2,
.page-wrapper h3,
.page-wrapper h4,
.page-wrapper p,
.page-wrapper li,
.page-wrapper dt,
.page-wrapper dd,
.page-section h1,
.page-section h2,
.page-section h3,
.page-section h4,
.page-section p,
.page-section li,
.page-section dt,
.page-section dd {
  overflow-wrap: anywhere;
}

/*
  Shared responsive grids
*/

.dashboard-grid,
.workbench-grid,
.season-dashboard-grid,
.operations-grid,
.game-hub-grid,
.profile-grid,
.summary-grid {
  min-width: 0;
}

.workbench-grid,
.season-dashboard-grid,
.operations-grid,
.game-hub-grid {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(100%, 280px),
        1fr
      )
    );
}

.summary-grid {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(100%, 170px),
        1fr
      )
    );
}

.dashboard-card,
.workbench-card,
.operations-card,
.game-hub-card,
.season-dashboard-card,
.summary-tile {
  min-width: 0;
  max-width: 100%;
}

/*
  Shared headers, toolbars, action rows, and chip groups
*/

.page-header,
.page-section-header,
.dashboard-card-header,
.card-header,
.workbench-card-header,
.operations-card-header,
.notification-center-header,
.notification-section-header,
.profile-header,
.game-hub-header,
.season-dashboard-header,
.table-header {
  min-width: 0;
}

.page-header,
.page-section-header,
.dashboard-card-header,
.card-header,
.workbench-card-header,
.operations-card-header,
.notification-center-header,
.notification-section-header,
.profile-header,
.game-hub-header,
.season-dashboard-header,
.table-header,
.card-actions,
.form-actions,
.action-row,
.button-row,
.toolbar,
.filter-row,
.filter-chip-group,
.notification-filter-chips,
.notification-center-actions,
.notification-card-actions,
.operations-quick-actions,
.operations-task-actions,
.workbench-launch,
.workbench-card-actions,
.profile-form-actions,
.availability-form-actions,
.availability-entry-actions,
.reports-filter-actions,
.reports-preset-actions,
.report-card-actions,
.crew-availability-buttons,
.game-hub-actions,
.season-dashboard-actions {
  gap: 12px;
}

.card-actions,
.form-actions,
.action-row,
.button-row,
.filter-row,
.filter-chip-group,
.notification-filter-chips,
.notification-center-actions,
.notification-card-actions,
.operations-quick-actions,
.operations-task-actions,
.workbench-launch,
.workbench-card-actions,
.profile-form-actions,
.availability-form-actions,
.availability-entry-actions,
.reports-filter-actions,
.reports-preset-actions,
.report-card-actions,
.crew-availability-buttons,
.game-hub-actions,
.season-dashboard-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.page-header > *,
.page-section-header > *,
.dashboard-card-header > *,
.card-header > *,
.notification-center-header > *,
.notification-section-header > *,
.operations-card-header > *,
.profile-header > *,
.game-hub-header > *,
.season-dashboard-header > * {
  min-width: 0;
}

/*
  Filter chips
*/

.filter-chip-group,
.notification-filter-chips,
.claim-history-filters,
.claim-history-date-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.filter-chip,
.claim-history-filters button,
.claim-history-date-filters button {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: normal;
}

/*
  Forms
*/

.form-grid,
.profile-form-grid,
.availability-form-grid,
.reports-filter-grid,
.game-hub-form-grid {
  min-width: 0;
}

.form-grid > *,
.profile-form-grid > *,
.availability-form-grid > *,
.reports-filter-grid > *,
.game-hub-form-grid > * {
  min-width: 0;
}

input,
select,
textarea {
  max-width: 100%;
}

textarea {
  resize: vertical;
}

/*
  Tables
*/

.table-wrapper,
.table-container,
.responsive-table,
.schedule-table-wrapper,
.my-schedule-table-wrapper,
.claims-queue-table-wrapper,
.review-queue-table-wrapper,
.report-detail-table-wrapper {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.table-wrapper table,
.table-container table,
.responsive-table table,
.schedule-table-wrapper table,
.my-schedule-table-wrapper table,
.claims-queue-table-wrapper table,
.review-queue-table-wrapper table,
.report-detail-table-wrapper table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.table-wrapper th,
.table-wrapper td,
.table-container th,
.table-container td,
.responsive-table th,
.responsive-table td,
.schedule-table-wrapper th,
.schedule-table-wrapper td,
.my-schedule-table-wrapper th,
.my-schedule-table-wrapper td,
.claims-queue-table-wrapper th,
.claims-queue-table-wrapper td,
.review-queue-table-wrapper th,
.review-queue-table-wrapper td {
  overflow-wrap: normal;
  word-break: normal;
}

.table-wrapper th,
.table-container th,
.responsive-table th {
  white-space: nowrap;
}

/*
  Badges and metadata
*/

.badge-row,
.status-row,
.status-badge-row,
.notification-meta,
.workbench-item-meta,
.operations-task-meta,
.game-hub-status-row,
.season-dashboard-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.badge,
.status-badge,
.availability-status-badge,
.notification-status,
.workbench-status,
.game-hub-status {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/*
  Shared control sizing and states
*/

button,
.button,
.primary,
.secondary,
.primary-btn,
.secondary-btn,
.small-btn,
.primary-button,
.secondary-button,
.danger-button,
.button-primary,
.button-secondary,
.button-danger,
.filter-chip,
[role="button"] {
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button,
.button,
.primary,
.secondary,
.primary-btn,
.secondary-btn,
.small-btn,
.primary-button,
.secondary-button,
.danger-button,
.button-primary,
.button-secondary,
.button-danger,
.filter-chip {
  line-height: 1.2;
  white-space: normal;
}

button:not(:disabled),
.button:not([aria-disabled="true"]),
[role="button"]:not([aria-disabled="true"]) {
  cursor: pointer;
}

button:disabled,
button[aria-disabled="true"],
.button[aria-disabled="true"],
[role="button"][aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

button:disabled:hover,
button[aria-disabled="true"]:hover,
.button[aria-disabled="true"]:hover {
  box-shadow: none;
  transform: none;
}

button:focus-visible,
.button:focus-visible,
.primary:focus-visible,
.secondary:focus-visible,
.primary-btn:focus-visible,
.secondary-btn:focus-visible,
.small-btn:focus-visible,
.primary-button:focus-visible,
.secondary-button:focus-visible,
.danger-button:focus-visible,
.button-primary:focus-visible,
.button-secondary:focus-visible,
.button-danger:focus-visible,
.filter-chip:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid
    rgba(30, 136, 229, 0.38);
  outline-offset: 2px;
}

/*
  Destructive actions
*/

.danger-button,
.button-danger,
.destructive-button,
[data-action*="delete"],
[data-action*="remove"],
[data-action*="reject"] {
  border-color: #b42318;
  color: #b42318;
}

.danger-button:hover:not(:disabled),
.button-danger:hover:not(:disabled),
.destructive-button:hover:not(:disabled) {
  background: #fff1f0;
}

.danger-button:focus-visible,
.button-danger:focus-visible,
.destructive-button:focus-visible {
  outline-color:
    rgba(180, 35, 24, 0.35);
}

/*
  Synchronous busy affordance.

  Mutation handlers may set aria-busy="true" while
  executing without introducing asynchronous behavior.
*/

button[aria-busy="true"],
.button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.72;
  pointer-events: none;
  position: relative;
}

button[aria-busy="true"]::after,
.button[aria-busy="true"]::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.55em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.1em;
  animation:
    bluecrew-control-spin 700ms linear infinite;
}

@keyframes bluecrew-control-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  button,
  .button,
  .summary-tile {
    scroll-behavior: auto;
    transition: none;
  }

  button[aria-busy="true"]::after,
  .button[aria-busy="true"]::after {
    animation-duration: 1400ms;
  }
}

/*
  Tablet and narrow-screen hierarchy
*/

@media (max-width: 900px) {
  .dashboard-grid,
  .workbench-grid,
  .season-dashboard-grid,
  .operations-grid,
  .game-hub-grid,
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-full {
    grid-column: auto;
  }

  .page-header,
  .page-section-header,
  .dashboard-card-header,
  .card-header,
  .notification-center-header,
  .notification-section-header,
  .operations-card-header,
  .profile-header,
  .game-hub-header,
  .season-dashboard-header,
  .table-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .form-grid,
  .profile-form-grid,
  .availability-form-grid,
  .reports-filter-grid,
  .game-hub-form-grid {
    grid-template-columns: 1fr;
  }
}

/*
  Phone layouts
*/

@media (max-width: 640px) {
  .page-wrapper,
  .page-section {
    padding-inline:
      max(12px, env(safe-area-inset-left));
  }

  .dashboard-card,
  .card,
  .workbench-card,
  .operations-card,
  .notification-card,
  .profile-card,
  .game-hub-card,
  .season-dashboard-card {
    padding: 16px;
  }

  .page-header,
  .page-section-header,
  .dashboard-card-header,
  .card-header,
  .notification-center-header,
  .notification-section-header,
  .operations-card-header,
  .profile-header,
  .game-hub-header,
  .season-dashboard-header,
  .table-header {
    flex-direction: column;
    align-items: stretch;
  }

  .notification-center-actions,
  .notification-card-actions,
  .operations-quick-actions,
  .operations-task-actions,
  .profile-form-actions,
  .availability-form-actions,
  .reports-filter-actions,
  .reports-preset-actions,
  .report-card-actions,
  .crew-availability-buttons,
  .game-hub-actions,
  .season-dashboard-actions {
    align-items: stretch;
  }

  .notification-center-actions > button,
  .notification-card-actions > button,
  .operations-quick-actions > button,
  .operations-task-actions > button,
  .profile-form-actions > button,
  .availability-form-actions > button,
  .reports-filter-actions > button,
  .reports-preset-actions > button,
  .report-card-actions > button,
  .crew-availability-buttons > button,
  .game-hub-actions > button,
  .season-dashboard-actions > button {
    flex: 1 1 100%;
    width: 100%;
  }

  .workbench-launch > button {
    width: 100%;
  }

  .notification-center-actions .muted,
  .notification-selection-count {
    flex: 1 1 100%;
  }

  .filter-chip-group,
  .notification-filter-chips,
  .claim-history-filters,
  .claim-history-date-filters {
    align-items: stretch;
  }

  .filter-chip,
  .claim-history-filters button,
  .claim-history-date-filters button {
    flex: 1 1 auto;
  }

  .summary-grid {
    grid-template-columns:
      repeat(
        auto-fit,
        minmax(
          min(100%, 145px),
          1fr
        )
      );
  }

  .summary-tile {
    padding: 16px 12px;
  }

  .table-wrapper,
  .table-container,
  .responsive-table,
  .schedule-table-wrapper,
  .my-schedule-table-wrapper,
  .claims-queue-table-wrapper,
  .review-queue-table-wrapper,
  .report-detail-table-wrapper {
    margin-inline: 0;
    padding-bottom: 4px;
  }

  .table-wrapper table,
  .table-container table,
  .responsive-table table,
  .schedule-table-wrapper table,
  .my-schedule-table-wrapper table,
  .claims-queue-table-wrapper table,
  .review-queue-table-wrapper table,
  .report-detail-table-wrapper table {
    min-width: 640px;
  }
}

/* The Slate brand attribution */

/* SwatWorks company attribution */

/* The Slate — SwatWorks attribution */
#sidebar .brand .brand-company,
.brand .brand-company,
p.brand-company {
  margin: 0.1rem 0 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;

  text-transform: none !important;
  font-variant: normal !important;
  font-variant-caps: normal !important;
  text-decoration: none;
}

.brand-company,
.brand-company-name {
  text-transform: none !important;
  font-variant: normal !important;
  font-variant-caps: normal !important;
  font-family: Arial, sans-serif !important;
}

.brand-company-name {
  display: inline;
}

/* Preserve SwatWorks mixed-case branding */
.sidebar .brand .brand-company {
  text-transform: none !important;
  font-variant: normal !important;
  font-variant-caps: normal !important;
}

/* ==================================================
   DASHBOARD 3.0 ENTRY EXPERIENCE
================================================== */

.operations-dashboard {
  display: grid;
  gap: 20px;
}

.dashboard-welcome {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.dashboard-welcome h1 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  margin: 0.15rem 0 0;
}

.dashboard-eyebrow {
  color: #64748b;
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-current-date {
  color: #475569;
  font-weight: 600;
  text-align: right;
}

.dashboard-entry-grid {
  display: grid;
  gap: 20px;
  grid-template-columns:
    minmax(0, 2fr)
    minmax(280px, 1fr);
}

.dashboard-entry-main,
.dashboard-entry-side {
  align-content: start;
  display: grid;
  gap: 20px;
  min-width: 0;
}

.dashboard-entry-activity {
  grid-column: 1 / -1;
  min-width: 0;
}

.dashboard-daily-brief {
  padding: 20px;
}

.dashboard-brief-message {
  color: #475569;
  margin: 0 0 16px;
}

.dashboard-brief-grid {
  display: grid;
  gap: 10px;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}

.dashboard-brief-metric {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 14px;
  text-align: left;
}

.dashboard-brief-metric:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.dashboard-brief-metric strong {
  color: #0f172a;
  font-size: 1.45rem;
}

.dashboard-brief-metric span {
  color: #64748b;
  font-size: 0.82rem;
}

.dashboard-brief-alert {
  border-left: 4px solid #dc2626;
}

.dashboard-today-list {
  display: grid;
  gap: 9px;
}

.dashboard-today-game {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #22c55e;
  border-radius: 10px;
  display: grid;
  gap: 12px;
  grid-template-columns:
    90px
    minmax(150px, 1fr)
    minmax(145px, 0.8fr)
    auto;
  padding: 12px 14px;
}

.dashboard-today-attention {
  border-left-color: #dc2626;
}

.dashboard-today-time,
.dashboard-today-matchup,
.dashboard-today-status {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dashboard-today-time span,
.dashboard-today-matchup span,
.dashboard-today-status span {
  color: #64748b;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
  .dashboard-entry-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-entry-activity {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .dashboard-welcome {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-current-date {
    text-align: left;
  }

  .dashboard-brief-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .dashboard-today-game {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .dashboard-brief-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================================================
   DASHBOARD 3.1 COMPACT ENTRY EXPERIENCE
================================================== */

.dashboard-welcome {
  align-items: center;
}

.dashboard-welcome-copy {
  min-width: 0;
}

.dashboard-welcome-tools {
  align-items: center;
  display: flex;
  gap: 14px;
}

.dashboard-notification-bell {
  align-items: center;
  background: #ffffff;
  border: 1px solid #dbe3ec;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  min-width: 42px;
  padding: 0 11px;
  position: relative;
}

.dashboard-notification-bell:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.dashboard-notification-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.dashboard-notification-count {
  align-items: center;
  background: #dc2626;
  border: 2px solid #ffffff;
  border-radius: 999px;
  color: #ffffff;
  display: flex;
  font-size: 0.65rem;
  font-weight: 700;
  height: 19px;
  justify-content: center;
  min-width: 19px;
  padding: 0 4px;
  position: absolute;
  right: -4px;
  top: -5px;
}

.dashboard-entry-grid {
  display: block;
}

.dashboard-entry-main {
  display: grid;
  gap: 16px;
}

.dashboard-entry-activity {
  margin-top: 16px;
}

.dashboard-card {
  padding: 18px;
}

.dashboard-daily-brief {
  padding: 18px;
}

.dashboard-brief-heading {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 13px;
}

.dashboard-brief-heading h2 {
  margin: 0.15rem 0 0;
}

.dashboard-brief-message {
  margin: 0;
  max-width: 320px;
  text-align: right;
}

.dashboard-brief-grid {
  gap: 8px;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
}

.dashboard-brief-metric {
  min-height: 76px;
  padding: 10px 12px;
}

.dashboard-brief-metric strong {
  font-size: 1.25rem;
}

.dashboard-brief-metric span {
  font-size: 0.76rem;
}

.dashboard-brief-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.dashboard-today-games {
  padding: 16px 18px;
}

.dashboard-today-games .dashboard-card-header {
  margin-bottom: 10px;
}

.dashboard-text-action {
  background: transparent;
  border: 0;
  color: #2563eb;
  cursor: pointer;
  font-weight: 700;
  padding: 4px;
}

.dashboard-text-action:hover {
  text-decoration: underline;
}

.dashboard-today-list {
  gap: 0;
}

.dashboard-today-game {
  display: grid;
  gap: 12px;
  grid-template-columns:
    90px
    minmax(180px, 1.4fr)
    minmax(140px, 1fr)
    110px;
}

.dashboard-today-header {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #dbe3ec;
  border-radius: 0;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 7px 10px;
  text-transform: uppercase;
}

.dashboard-today-row {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #edf1f5;
  border-radius: 0;
  cursor: pointer;
  padding: 11px 10px;
  text-align: left;
  width: 100%;
}

.dashboard-today-row:hover {
  background: #f8fafc;
}

.dashboard-today-row:last-child {
  border-bottom: 0;
}

.dashboard-today-time,
.dashboard-today-location {
  color: #475569;
  font-size: 0.85rem;
}

.dashboard-today-matchup {
  color: #0f172a;
  min-width: 0;
  overflow-wrap: anywhere;
}

.dashboard-game-status {
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 700;
  justify-content: center;
  padding: 5px 8px;
  white-space: nowrap;
}

.dashboard-game-status-filled {
  background: #dcfce7;
  color: #166534;
}

.dashboard-game-status-open {
  background: #fee2e2;
  color: #991b1b;
}

.dashboard-game-status-pending {
  background: #fef3c7;
  color: #92400e;
}

.dashboard-entry-activity .dashboard-card {
  padding: 16px 18px;
}

@media (max-width: 1000px) {
  .dashboard-brief-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .dashboard-today-game {
    grid-template-columns:
      80px
      minmax(160px, 1.4fr)
      minmax(120px, 1fr)
      105px;
  }
}

@media (max-width: 760px) {
  .dashboard-welcome-tools {
    align-items: flex-start;
    width: 100%;
  }

  .dashboard-current-date {
    flex: 1;
  }

  .dashboard-brief-heading {
    flex-direction: column;
  }

  .dashboard-brief-message {
    max-width: none;
    text-align: left;
  }

  .dashboard-brief-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .dashboard-today-header {
    display: none;
  }

  .dashboard-today-game {
    gap: 5px;
    grid-template-columns: 1fr;
  }

  .dashboard-today-row {
    padding: 12px 6px;
  }

  .dashboard-game-status {
    justify-self: start;
  }
}

@media (max-width: 480px) {
  .dashboard-brief-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================================================
   DASHBOARD ACTIVITY TIMELINE
================================================== */

.dashboard-activity-feed {
  max-height: 420px;
  overflow: hidden;
}

.assignment-activity-list {
  max-height: 330px;
  overflow-y: auto;
  padding-right: 5px;
}

.dashboard-timeline-item {
  align-items: flex-start;
  display: grid;
  gap: 10px;
  grid-template-columns:
    10px
    minmax(0, 1fr)
    auto;
}

.dashboard-timeline-marker {
  background: #3b82f6;
  border-radius: 999px;
  height: 8px;
  margin-top: 7px;
  width: 8px;
}

.dashboard-timeline-category {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dashboard-timeline-item
.assignment-activity-content {
  gap: 3px;
}

.dashboard-timeline-item
.assignment-activity-content strong {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Operations Center 2.1 Unified Work Deck */

.operations-work-queue-header {
  align-items: center;
  background: rgba(25, 65, 91, 0.22);
  border: 1px solid var(--operations-line);
  display: flex;
  justify-content: space-between;
  padding: 0.9rem 1rem;
}

.operations-work-queue-header h3 {
  color: var(--operations-text);
  margin: 0.15rem 0 0;
  text-transform: uppercase;
}

.operations-work-queue-header > strong {
  color: var(--operations-active);
  font-family: ui-monospace, monospace;
  font-size: 1.4rem;
}

.operations-work-list {
  border: 1px solid var(--operations-line);
  border-top: 0;
}

.operations-work-item {
  align-items: center;
  background: rgba(5, 14, 23, 0.62);
  border-bottom: 1px solid var(--operations-line);
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 1rem;
}

.operations-work-item:last-child {
  border-bottom: 0;
}

.operations-work-item-primary {
  background: rgba(35, 101, 137, 0.22);
  box-shadow: inset 3px 0 0 var(--operations-active);
}

.operations-work-item-signal {
  color: var(--operations-active);
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
}

.operations-work-item-content {
  display: grid;
  gap: 0.35rem;
}

.operations-work-item-type {
  color: var(--operations-active);
  font-family: ui-monospace, monospace;
  font-size: 0.67rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.operations-work-item-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.operations-work-item-action {
  background: rgba(99, 199, 244, 0.1);
  border: 1px solid rgba(99, 199, 244, 0.4);
  border-radius: 6px;
  color: var(--operations-active);
  cursor: pointer;
  font-weight: 800;
  padding: 0.65rem 0.75rem;
  text-transform: uppercase;
}

.operations-work-queue-empty {
  border: 1px solid rgba(110, 212, 164, 0.3);
  color: var(--operations-muted);
  display: grid;
  gap: 0.25rem;
  padding: 1.25rem;
}

.operations-work-queue-empty strong {
  color: var(--operations-success);
}

.operations-compatibility-hooks {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}

@media (max-width: 800px) {
  .operations-work-item {
    grid-template-columns: 1fr;
  }
}

/* ==================================================
   OPERATIONS CENTER 2.2 TELEMETRY RAIL
================================================== */

.operations-status-rail {
  align-content: start;
  display: grid;
  gap: 0;
  overflow: hidden;
}

.operations-status-rail
.operations-console-panel-header {
  border-bottom:
    1px solid
    rgba(148, 163, 184, 0.2);
  padding-bottom: 14px;
}

.operations-telemetry-module {
  border-top:
    1px solid
    rgba(148, 163, 184, 0.18);
  padding: 18px 0;
}

.operations-telemetry-module:first-of-type {
  border-top: 0;
}

.operations-telemetry-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.operations-telemetry-heading h3 {
  font-size: 0.95rem;
  margin: 2px 0 0;
}

.operations-status-light {
  background: #94a3b8;
  border:
    2px solid
    rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  box-shadow:
    0 0 0 1px
    rgba(15, 23, 42, 0.22);
  display: inline-block;
  flex: 0 0 auto;
  height: 9px;
  width: 9px;
}

.operations-status-light-healthy {
  background: #22c55e;
}

.operations-status-light-watch {
  background: #eab308;
}

.operations-status-light-critical {
  background: #ef4444;
}

.operations-health-state {
  border-left: 3px solid #94a3b8;
  display: grid;
  gap: 3px;
  margin-bottom: 16px;
  padding: 2px 0 2px 12px;
}

.operations-health-state[data-status="healthy"] {
  border-left-color: #22c55e;
}

.operations-health-state[data-status="watch"] {
  border-left-color: #eab308;
}

.operations-health-state[data-status="critical"] {
  border-left-color: #ef4444;
}

.operations-health-state strong {
  font-size: 0.88rem;
}

.operations-health-state span {
  color: #64748b;
  font-size: 0.75rem;
  line-height: 1.4;
}

.operations-queue-health {
  border-bottom:
    1px solid
    rgba(148, 163, 184, 0.18);
  border-top:
    1px solid
    rgba(148, 163, 184, 0.18);
  display: grid;
  margin-bottom: 16px;
}

.operations-queue-health-row {
  align-items: center;
  display: grid;
  font-size: 0.76rem;
  gap: 9px;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;
  min-height: 32px;
}

.operations-queue-health-row +
.operations-queue-health-row {
  border-top:
    1px solid
    rgba(148, 163, 184, 0.12);
}

.operations-queue-health-row strong {
  color: #64748b;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.operations-progress-instrument {
  display: grid;
  gap: 10px;
}

.operations-progress-readout {
  align-items: end;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.operations-progress-readout > div {
  display: grid;
  gap: 1px;
}

.operations-progress-readout strong {
  font-size: 1.55rem;
  line-height: 1;
}

.operations-progress-readout > span {
  color: #64748b;
  font-size: 0.7rem;
  line-height: 1.35;
  max-width: 115px;
  text-align: right;
}

.operations-progress-instrument progress {
  appearance: none;
  border: 0;
  border-radius: 0;
  height: 6px;
  overflow: hidden;
  width: 100%;
}

.operations-progress-instrument
progress::-webkit-progress-bar {
  background:
    rgba(148, 163, 184, 0.2);
}

.operations-progress-instrument
progress::-webkit-progress-value {
  background: #3b82f6;
}

.operations-progress-instrument
progress::-moz-progress-bar {
  background: #3b82f6;
}

.operations-live-indicator {
  align-items: center;
  color: #64748b;
  display: inline-flex;
  font-size: 0.66rem;
  font-weight: 700;
  gap: 5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.operations-live-indicator > span {
  background: #22c55e;
  border-radius: 999px;
  height: 6px;
  width: 6px;
}

.operations-feed-list {
  display: grid;
  max-height: 330px;
  overflow-y: auto;
  padding-right: 4px;
}

.operations-feed-item {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;
  padding: 10px 0;
}

.operations-feed-item +
.operations-feed-item {
  border-top:
    1px solid
    rgba(148, 163, 184, 0.14);
}

.operations-feed-signal {
  background: #3b82f6;
  border-radius: 999px;
  height: 6px;
  margin-top: 5px;
  width: 6px;
}

.operations-feed-content {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.operations-feed-content strong {
  font-size: 0.75rem;
  line-height: 1.3;
}

.operations-feed-content span {
  color: #64748b;
  font-size: 0.69rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
}

.operations-feed-time {
  color: #64748b;
  font-size: 0.66rem;
  font-variant-numeric:
    tabular-nums;
  white-space: nowrap;
}

.operations-feed-empty {
  align-items: center;
  color: #64748b;
  display: flex;
  font-size: 0.75rem;
  gap: 8px;
  min-height: 54px;
}

@media (max-width: 1100px) {
  .operations-status-rail {
    grid-column: 1 / -1;
  }

  .operations-queue-health {
    grid-template-columns:
      repeat(
        5,
        minmax(0, 1fr)
      );
  }

  .operations-queue-health-row {
    align-content: center;
    gap: 4px;
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 68px;
    text-align: center;
  }

  .operations-queue-health-row +
  .operations-queue-health-row {
    border-left:
      1px solid
      rgba(148, 163, 184, 0.12);
    border-top: 0;
  }
}

@media (max-width: 700px) {
  .operations-queue-health {
    grid-template-columns: 1fr;
  }

  .operations-queue-health-row {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;
    justify-items: stretch;
    min-height: 34px;
    text-align: left;
  }

  .operations-queue-health-row +
  .operations-queue-health-row {
    border-left: 0;
    border-top:
      1px solid
      rgba(148, 163, 184, 0.12);
  }
}

/* ==================================================
   OPERATIONS CENTER 2.4 QUEUE-AWARE TELEMETRY
================================================== */

.operations-telemetry-context {
  color: #64748b;
  font-size: 0.7rem;
  line-height: 1.4;
  margin: -6px 0 14px;
}

.operations-queue-health-row {
  position: relative;
  transition:
    background 120ms ease,
    box-shadow 120ms ease;
}

.operations-queue-health-row-focused {
  background:
    rgba(59, 130, 246, 0.08);
  box-shadow:
    inset 2px 0 0
    #3b82f6;
  padding-left: 8px;
  padding-right: 6px;
}

.operations-queue-health-row-focused
strong {
  color: #2563eb;
}

.operations-health-module[
  data-active-queue="conflicts"
]
.operations-progress-instrument
progress::-webkit-progress-value {
  background: #ef4444;
}

.operations-health-module[
  data-active-queue="conflicts"
]
.operations-progress-instrument
progress::-moz-progress-bar {
  background: #ef4444;
}

.operations-health-module[
  data-active-queue="claims"
]
.operations-progress-instrument
progress::-webkit-progress-value,
.operations-health-module[
  data-active-queue="reviews"
]
.operations-progress-instrument
progress::-webkit-progress-value {
  background: #6366f1;
}

.operations-health-module[
  data-active-queue="claims"
]
.operations-progress-instrument
progress::-moz-progress-bar,
.operations-health-module[
  data-active-queue="reviews"
]
.operations-progress-instrument
progress::-moz-progress-bar {
  background: #6366f1;
}

.operations-live-feed[
  data-active-queue="conflicts"
]
.operations-feed-signal {
  background: #ef4444;
}

.operations-live-feed[
  data-active-queue="claims"
]
.operations-feed-signal,
.operations-live-feed[
  data-active-queue="reviews"
]
.operations-feed-signal {
  background: #6366f1;
}

.operations-live-feed[
  data-active-queue="accounts"
]
.operations-feed-signal {
  background: #0ea5e9;
}

@media (max-width: 1100px) {
  .operations-queue-health-row-focused {
    box-shadow:
      inset 0 2px 0
      #3b82f6;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 700px) {
  .operations-queue-health-row-focused {
    box-shadow:
      inset 2px 0 0
      #3b82f6;
    padding-left: 8px;
    padding-right: 6px;
  }
}

/* Shared contract cascade boundary. */
.button.button-primary {
  background: #155eef;
  border-color: #155eef;
  color: #ffffff;
}

.button.button-secondary {
  background: #ffffff;
  border-color: #98a2b3;
  color: #344054;
}

.button.button-danger {
  background: #b42318;
  border-color: #b42318;
  color: #ffffff;
}

.button.button-link {
  background: transparent;
  border-color: transparent;
  color: #175cd3;
}

.button.button-primary:focus-visible,
.button.button-secondary:focus-visible,
.button.button-danger:focus-visible,
.button.button-link:focus-visible {
  outline: 3px solid #101828;
  outline-offset: 3px;
}

/* Viewport-fit Operations Center desktop layout. */
@media (min-width: 1001px) {
  body[data-page="operations-center"] {
    height: 100dvh;
    overflow: hidden;
  }

  body[data-page="operations-center"] .app-shell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body[data-page="operations-center"] .sidebar {
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body[data-page="operations-center"] .main-content {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body[data-page="operations-center"] .content-area {
    display: flex;
    min-height: 0;
    padding: 14px 20px;
    flex: 1;
    overflow: hidden;
  }

  body[data-page="operations-center"] .page-wrapper,
  body[data-page="operations-center"] .operations-center-console {
    display: flex;
    width: 100%;
    min-height: 0;
    flex: 1;
    flex-direction: column;
  }

  body[data-page="operations-center"] .operations-console-titlebar {
    padding-block: 0 10px;
    flex: 0 0 auto;
  }

  body[data-page="operations-center"] .operations-title-context h1 {
    font-size: 1.55rem;
  }

  body[data-page="operations-center"] .operations-status-strip {
    margin-bottom: 10px;
    flex: 0 0 auto;
  }

  body[data-page="operations-center"] .operations-status-metric {
    min-height: 58px;
    padding: 7px 12px;
  }

  body[data-page="operations-center"] .operations-status-metric strong {
    font-size: 1.62rem;
  }

  body[data-page="operations-center"] .operations-action-message,
  body[data-page="operations-center"] .operations-console-complete {
    flex: 0 0 auto;
  }

  body[data-page="operations-center"] .operations-center-shell {
    display: grid;
    height: auto;
    min-height: 0;
    margin: 0;
    grid-template-columns: minmax(0, 1fr) 330px;
    grid-template-rows: 118px minmax(0, 1fr) 250px;
    flex: 1;
  }

  body[data-page="operations-center"] .operations-work-deck,
  body[data-page="operations-center"] .operations-upcoming,
  body[data-page="operations-center"] .operations-log,
  body[data-page="operations-center"] .operations-secondary {
    min-height: 0;
    padding: 12px 14px;
  }

  body[data-page="operations-center"] .operations-work-deck {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 1;
    flex-direction: column;
    overflow: hidden;
  }

  body[data-page="operations-center"] .operations-current-task-stage,
  body[data-page="operations-center"] .operations-work-queue {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
  }

  body[data-page="operations-center"] .operations-work-list {
    display: flex;
    min-height: 0;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
  }

  body[data-page="operations-center"] .operations-work-queue-header {
    display: none;
  }

  body[data-page="operations-center"] .operations-work-item {
    min-width: min(360px, 80vw);
    padding: 6px 8px;
  }

  body[data-page="operations-center"] .operations-work-item-actions {
    gap: 4px;
  }

  body[data-page="operations-center"] .operations-upcoming {
    grid-column: 1;
    grid-row: 2;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body[data-page="operations-center"] .operations-log {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 3;
    flex-direction: column;
    overflow: hidden;
  }

  body[data-page="operations-center"] .operations-section-heading,
  body[data-page="operations-center"] .operations-console-panel-header {
    margin-bottom: 7px;
    flex: 0 0 auto;
  }

  body[data-page="operations-center"] .operations-log-list {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body[data-page="operations-center"] .operations-log-row {
    min-height: 44px;
    padding-block: 4px;
  }

  body[data-page="operations-center"] .operations-log-more {
    min-height: 44px;
    margin-top: 4px;
    flex: 0 0 auto;
  }

  body[data-page="operations-center"] .operations-secondary {
    display: grid;
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 10px;
    gap: 6px;
    overflow: auto;
    overscroll-behavior: contain;
  }

  body[data-page="operations-center"] .operations-center-shell-no-attention {
    grid-template-rows: minmax(0, 1fr) 180px;
  }

  body[data-page="operations-center"] .operations-center-shell-no-attention .operations-upcoming,
  body[data-page="operations-center"] .operations-center-shell-no-attention .operations-secondary {
    grid-row: 1;
  }

  body[data-page="operations-center"] .operations-secondary > .operations-log {
    grid-column: auto;
    grid-row: auto;
    padding: 10px 0 0;
    border-top: 1px solid var(--operations-border);
    background: transparent;
  }

  body[data-page="operations-center"] .operations-center-shell-no-attention > .operations-log {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body[data-page="operations-center"] .operations-secondary .operations-console-panel-header,
  body[data-page="operations-center"] .operations-secondary .operations-queue-rail-footer {
    display: none;
  }

  body[data-page="operations-center"] .operations-secondary .operations-queue-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  body[data-page="operations-center"] .operations-secondary .operations-queue-control {
    min-height: 44px;
    padding: 4px 6px;
  }

  body[data-page="operations-center"] .operations-secondary .operations-telemetry-heading {
    margin-bottom: 5px;
  }

  body[data-page="operations-center"] .operations-secondary .operations-queue-health-row {
    padding-block: 3px;
  }
}

.nav-group-toggle {
  display: flex;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.76);
  align-items: center;
  justify-content: space-between;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-group-toggle:hover,
.nav-group-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.nav-group-chevron {
  display: inline-flex;
  transition: transform 160ms ease;
}

.nav-group-toggle[aria-expanded="false"]
.nav-group-chevron {
  transform: rotate(-90deg);
}

.nav-group-items[hidden] {
  display: none;
}

.nav-group-items {
  display: grid;
  gap: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-group-chevron {
    transition: none;
  }
}

.operations-detail-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: min(680px, calc(100dvh - 48px));
  padding: 0;
  border: 1px solid #98a2b3;
  border-radius: 10px;
  background: #ffffff;
  color: #172033;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.22);
}

#operations-detail-pending-claims {
  width: min(920px, calc(100vw - 40px));
  max-height: min(780px, calc(100dvh - 40px));
}

#operations-detail-pending-claims .operations-detail-header {
  padding: 20px 24px;
}

#operations-detail-pending-claims .operations-detail-item {
  padding: 16px 24px;
  gap: 20px;
}

#operations-detail-pending-claims .operations-detail-list {
  max-height: calc(100dvh - 160px);
}

.operations-detail-dialog::backdrop {
  background: rgba(15, 23, 42, 0.52);
}

.operations-detail-header {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 16px 18px;
  border-bottom: 1px solid #d7dee8;
  background: #ffffff;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.operations-detail-header h2 {
  margin: 2px 0 0;
}

.operations-detail-list {
  display: grid;
  max-height: calc(100dvh - 180px);
  overflow-y: auto;
}

.operations-detail-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px 18px;
  border-bottom: 1px solid #e8ecf2;
  gap: 14px;
  align-items: center;
}

.operations-detail-item > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.operations-detail-item span {
  color: #667085;
  font-size: 0.82rem;
}

.operations-claim-requester {
  margin-top: 3px;
  color: var(--operations-ink) !important;
}

.operations-detail-actions {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
}

@media (max-width: 640px) {
  .operations-detail-item {
    grid-template-columns: 1fr;
  }

  .operations-detail-item .button {
    width: 100%;
  }
}

/* Operations Center — Sky Teal visual system. */
.operations-center-console {
  --operations-navy: #0f2742;
  --operations-deep-teal: #07596b;
  --operations-teal: #087f91;
  --operations-cyan: #22b8cf;
  --operations-canvas: #edf4f7;
  --operations-surface: #fff;
  --operations-soft: #f3f9fa;
  --operations-border: #cbdce2;
  --operations-muted: #526779;
  --operations-ink: #13283f;
  --operations-shadow: 0 5px 16px rgba(15, 39, 66, 0.07);
}

body[data-page="operations-center"] .content-area {
  background: linear-gradient(135deg, rgba(34, 184, 207, 0.05), transparent 38%), var(--operations-canvas);
}

body[data-page="operations-center"] .nav-link.active,
body[data-page="operations-center"] .nav-link[aria-current="page"] {
  border-color: rgba(34, 184, 207, 0.58);
  background: linear-gradient(90deg, #07596b, #087f91);
  color: #fff;
  box-shadow: inset 3px 0 #67e8f9;
}

.operations-status-strip {
  overflow: hidden;
  gap: 4px;
  padding: 4px;
  border: 1px solid #b8d2da;
  border-radius: 8px;
  background: #d6e8ec;
  box-shadow: var(--operations-shadow);
}

.operations-status-metric {
  position: relative;
  border: 0;
  border-radius: 5px;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.operations-status-metric-priority {
  background: linear-gradient(180deg, #f7ffff, #e4f5f7);
}

.operations-status-metric-context { background: #fff; }

.operations-status-metric:hover {
  background: #dff3f6;
  box-shadow: inset 0 -3px var(--operations-cyan);
}

.operations-status-metric:focus-visible,
.operations-timeline-event:focus-visible,
.operations-log-row:focus-visible,
.operations-attention-row:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid #087f91;
  outline-offset: -3px;
}

.operations-status-metric span { color: #31566a; }
.operations-status-metric strong {
  color: var(--operations-navy);
  font-variant-numeric: tabular-nums;
}

.operations-status-metric-attention {
  box-shadow: inset 0 0 0 2px #ff675c;
}

.operations-status-metric-attention:hover {
  box-shadow: inset 0 0 0 2px #ff675c, inset 0 -4px #67e8f9;
}

.operations-status-metric-attention strong { color: #b42318; }

.operations-attention-summary {
  margin: -10px 2px 10px;
  color: #b42318;
  font-size: 0.82rem;
  font-weight: 800;
  text-align: right;
}

.operations-center-console .operations-center-shell {
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.operations-center-console .operations-upcoming,
.operations-center-console .operations-secondary,
.operations-center-console .operations-log {
  border: 1px solid var(--operations-border);
  border-radius: 8px;
  background: var(--operations-surface);
  box-shadow: var(--operations-shadow);
}

.operations-center-console .operations-upcoming { border-top: 3px solid var(--operations-teal); }
.operations-center-console .operations-secondary {
  border-top: 3px solid var(--operations-cyan);
  background: #fff;
}
.operations-center-console .operations-log { border-top: 3px solid var(--operations-deep-teal); }

.operations-section-heading h2,
.operations-section-heading h3 {
  color: var(--operations-navy);
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.operations-timeline-group h3 {
  padding: 5px 8px;
  border-left: 3px solid var(--operations-cyan);
  background: #eaf6f8;
  color: #24566a;
}

.operations-staffing-table tbody tr { transition: background-color 120ms ease; }
.operations-staffing-table tbody tr:hover { background: #f0f9fa; }
.operations-staffing-table th {
  background: #f7fafb;
  color: #405d70;
}
.operations-staffing-table .operations-timeline-event { color: #076b7d; }

.operations-staffing-assignment[data-status="open"] {
  color: #8a4b08;
  font-weight: 800;
}

.operations-staffing-assignment[data-status="open"]::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: #d68a08;
  content: "";
}

.operations-period-health { padding: 6px 0; }
.operations-period-health-summary strong { color: var(--operations-navy); }
.operations-period-health-summary span { color: #405d70; }
.operations-period-signals > div { position: relative; }
.operations-period-signals > div::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--operations-teal), transparent 72%);
  content: "";
  opacity: 0.17;
}
.operations-period-signals dd:not(.operations-signal-active) { color: #8798a6; }

.operations-attention-module {
  min-width: 0;
  padding-top: 3px;
  border-top: 1px solid #d6e5e9;
}
.operations-attention-module .operations-section-heading { margin: 0 0 4px; }
.operations-attention-total {
  color: #9d3a25;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.operations-attention-list { display: grid; gap: 2px; }
.operations-attention-row {
  display: grid;
  width: 100%;
  min-height: 30px;
  padding: 4px 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--operations-ink);
  grid-template-columns: 10px minmax(0, 1fr) auto 8px;
  gap: 7px;
  align-items: center;
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
}
.operations-attention-row:hover { background: #edf8f9; }
.operations-attention-row strong {
  color: #9d3a25;
  font-variant-numeric: tabular-nums;
}
.operations-attention-empty,
.operations-feed-empty {
  display: flex;
  min-height: 42px;
  padding: 8px;
  border: 1px dashed #bed4db;
  border-radius: 5px;
  background: #f6fbfc;
  color: #506979;
  gap: 8px;
  align-items: center;
  font-size: 0.78rem;
}

.operations-log-row { font-family: Arial, sans-serif; }
.operations-log-time {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.operations-log-type,
.operations-log-action { color: var(--operations-ink); }
.operations-feed-signal { background: var(--operations-cyan); }

@media (min-width: 1001px) {
  body[data-page="operations-center"] .operations-center-shell {
    grid-template-rows: minmax(0, 1fr) 180px;
  }
  body[data-page="operations-center"] .operations-secondary {
    align-content: start;
    gap: 8px;
  }
}

@media (max-width: 1000px) {
  .operations-center-console .operations-center-shell { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .operations-status-metric,
  .operations-staffing-table tbody tr { transition: none; }
}

/* Option 4 hierarchy: saturated command instruments with calm data surfaces. */
.operations-status-metric-priority {
  background: linear-gradient(135deg, #07596b 0%, #087f91 72%, #0891a5 100%);
  color: #fff;
}

.operations-status-metric-priority + .operations-status-metric-priority {
  border-left-color: rgba(255, 255, 255, 0.22);
}

.operations-status-metric-priority span,
.operations-status-metric-priority strong {
  color: #fff;
}

.operations-status-metric-priority:hover {
  background: linear-gradient(135deg, #064d5c 0%, #077f91 72%, #169daf 100%);
  box-shadow: inset 0 -4px #67e8f9;
}

.operations-status-metric-priority.operations-status-metric-attention strong {
  color: #fff;
  -webkit-text-stroke: 1px #b42318;
  paint-order: stroke fill;
  text-shadow: 0 0 1px #b42318;
}

.operations-status-metric-context {
  background: linear-gradient(135deg, #07596b 0%, #087f91 72%, #0891a5 100%);
  color: #fff;
}

.operations-status-metric-context span,
.operations-status-metric-context strong {
  color: #fff;
}

.operations-status-metric-context.operations-status-metric-attention strong {
  color: #fff;
  -webkit-text-stroke: 1px #b42318;
  paint-order: stroke fill;
  text-shadow: 0 0 1px #b42318;
}

.operations-status-metric-context:hover {
  background: linear-gradient(135deg, #064d5c 0%, #077f91 72%, #087f91 100%);
}

.operations-status-metric.operations-status-metric-attention:hover {
  box-shadow: inset 0 0 0 2px #ff675c, inset 0 -4px #67e8f9;
}

.operations-center-console .operations-upcoming {
  border-top-width: 4px;
}

.operations-status-rail {
  margin: -12px -10px 0;
  padding: 13px 12px 11px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(155deg, #0b5362, #073d4d 72%);
  color: #fff;
}

.operations-status-rail .operations-section-heading h2,
.operations-status-rail .operations-period-health-summary strong,
.operations-status-rail .operations-period-health-summary span,
.operations-status-rail .operations-period-signals dt,
.operations-status-rail .operations-period-signals dd,
.operations-status-rail .operations-signal-status {
  color: #fff;
}

.operations-status-rail .operations-period-health {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.operations-status-rail .operations-period-signals > div {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.operations-status-rail .operations-period-signals > div::after {
  display: none;
}

.operations-status-rail .operations-signal-status {
  opacity: 0.72;
}

.operations-status-rail .operations-period-signals dd:not(.operations-signal-active) {
  color: #b8d3da;
}

.operations-staffing-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(1, 25, 34, 0.62);
}

.operations-staffing-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #45cf73;
}

.operations-period-health[data-status="watch"] .operations-staffing-progress span {
  background: #f8b51d;
}

.operations-period-health[data-status="critical"] .operations-staffing-progress span {
  background: #ff675c;
}

.operations-attention-module {
  padding: 8px 2px 0;
}

.operations-attention-row {
  border-bottom: 1px solid #dce9ed;
}

.operations-center-console .operations-log {
  border-color: #07596b;
  background: linear-gradient(145deg, #0b5362, #073d4d 76%);
  color: #fff;
}

.operations-log .operations-section-heading h3,
.operations-log .operations-log-type,
.operations-log .operations-log-action {
  color: #fff;
}

.operations-log .operations-log-time,
.operations-log .operations-log-location,
.operations-log .operations-log-actor {
  color: #b9d8df;
}

.operations-log .operations-log-list {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.operations-log .operations-log-row {
  border-bottom-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.operations-log .operations-log-row:hover {
  background: rgba(34, 184, 207, 0.15);
}

.operations-log .operations-feed-empty {
  border-color: rgba(103, 232, 249, 0.38);
  background: rgba(255, 255, 255, 0.07);
  color: #d9f4f7;
}

.operations-log .button-link {
  color: #67e8f9;
}

@media (min-width: 1001px) {
  body[data-page="operations-center"] .operations-secondary {
    overflow: hidden;
    background: linear-gradient(155deg, #0b5362, #073d4d 72%);
  }

  body[data-page="operations-center"] .operations-status-rail {
    min-height: calc(100% + 24px);
    margin: -12px -10px;
  }
}

.operations-staffing-row {
  cursor: pointer;
}

.operations-staffing-row:hover,
.operations-staffing-row:focus-visible {
  background: #e2f4f7 !important;
}

.operations-staffing-row:focus-visible {
  outline: 3px solid var(--operations-teal);
  outline-offset: -3px;
}

.operations-staffing-matchup {
  color: #076b7d;
}

.dashboard-activity-header,
.dashboard-activity-feed .operations-log-row {
  grid-template-columns: 86px 145px 130px 190px minmax(280px, 1fr);
}

.dashboard-activity-header {
  display: grid;
  gap: 10px;
  padding: 0 12px 7px;
  color: var(--slate-muted, #526779);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-activity-header > :first-child,
.dashboard-activity-header > :nth-child(3),
.dashboard-activity-feed .operations-log-time,
.dashboard-activity-feed .operations-log-location { text-align: center; }

.schedule-header-sort {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: inherit;
  gap: 5px;
  justify-content: center;
  min-height: 32px;
  padding: 2px 4px;
}

.schedule-header-sort:focus-visible { outline: 3px solid var(--slate-cyan, #22b8cf); outline-offset: 2px; }
.schedule-table .schedule-column-time,
.schedule-table th.schedule-column-time { text-align: center; }
.schedule-table th.schedule-column-complex { min-width: 180px; }
.schedule-table th:nth-child(6) { min-width: 220px; }

/* ======================================================
   The Slate shared Sky Teal theme
====================================================== */
:root {
  --slate-navy: #0f2742;
  --slate-navy-deep: #0a1f35;
  --slate-deep-teal: #07596b;
  --slate-teal: #087f91;
  --slate-cyan: #22b8cf;
  --slate-canvas: #edf4f7;
  --slate-surface: #ffffff;
  --slate-surface-soft: #f3f9fa;
  --slate-border: #cbdce2;
  --slate-text: #13283f;
  --slate-muted: #526779;
  --slate-success: #278a55;
  --slate-warning: #b7791f;
  --slate-danger: #b42318;
  --border-color: var(--slate-border);
  --text-muted: var(--slate-muted);
}

.button:disabled,
.button[aria-disabled="true"] {
  background: #f2f4f7;
  border-color: #d0d5dd;
  color: #667085;
  cursor: not-allowed;
  opacity: 1;
}

body {
  background: var(--slate-canvas);
  color: var(--slate-text);
}

.sidebar {
  background: linear-gradient(180deg, var(--slate-navy), var(--slate-navy-deep));
}

.brand-icon {
  background: linear-gradient(135deg, var(--slate-teal), var(--slate-cyan));
  box-shadow: 0 6px 16px rgba(34, 184, 207, 0.24);
  object-fit: cover;
}

.nav-link:hover,
.nav-link.active,
.nav-link:focus-visible {
  background: linear-gradient(90deg, var(--slate-deep-teal), var(--slate-teal));
  color: #fff;
  box-shadow: inset 3px 0 #67e8f9;
}

.topbar {
  border-bottom-color: var(--slate-border);
  background: rgba(255, 255, 255, 0.96);
}

.topbar #page-title,
.card h1,
.card h2,
.card h3,
.presentation-panel h1,
.presentation-panel h2,
.presentation-panel h3 {
  color: var(--slate-navy);
}

.topbar p,
.muted {
  color: var(--slate-muted);
}

.content-area {
  background: linear-gradient(135deg, rgba(34, 184, 207, 0.035), transparent 34%), var(--slate-canvas);
}

.card,
.presentation-panel,
.dashboard-card,
.workbench-card,
.game-hub-section,
.notification-card,
.profile-card,
.season-dashboard-card {
  border-color: var(--slate-border);
  background: var(--slate-surface);
  box-shadow: 0 5px 16px rgba(15, 39, 66, 0.07);
}

.button-primary,
.button.button-primary,
.primary,
.primary-btn,
.primary-button {
  border-color: var(--slate-teal);
  background: var(--slate-teal);
  color: #fff;
}

.button-primary:hover:not(:disabled),
.button.button-primary:hover:not(:disabled),
.primary:hover:not(:disabled),
.primary-btn:hover:not(:disabled),
.primary-button:hover:not(:disabled) {
  border-color: var(--slate-deep-teal);
  background: var(--slate-deep-teal);
}

.button-secondary,
.button.button-secondary,
.secondary,
.secondary-btn,
.secondary-button {
  border-color: #91b1bc;
  background: #fff;
  color: var(--slate-navy);
}

.button-secondary:hover:not(:disabled),
.button.button-secondary:hover:not(:disabled),
.secondary:hover:not(:disabled),
.secondary-btn:hover:not(:disabled),
.secondary-button:hover:not(:disabled) {
  border-color: var(--slate-teal);
  background: #e9f7f9;
}

.button-link,
.button.button-link,
a {
  color: #076f82;
}

.role-btn.active {
  border-color: var(--slate-deep-teal);
  background: var(--slate-navy);
  color: #fff;
}

button:focus-visible,
.button:focus-visible,
.button.button-primary:focus-visible,
.button.button-secondary:focus-visible,
.button.button-danger:focus-visible,
.button.button-link:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color: rgba(8, 145, 165, 0.55);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--slate-teal);
}

.status-badge-info {
  border-color: #9bdde7;
  background: #e8f8fa;
  color: var(--slate-deep-teal);
}

/* Consolidated Crew workload and player-style Crew Card. */
.crew-roster-workload {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--slate-border);
  border-top: 4px solid var(--slate-teal);
  border-radius: 10px;
}

.crew-roster-header {
  display: flex;
  padding: 16px 18px;
  background: #fff;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.crew-roster-header h3,
.crew-roster-header p {
  margin: 0;
}

.crew-roster-header p {
  margin-top: 3px;
  color: var(--slate-muted);
}

.crew-roster-header > span {
  color: var(--slate-deep-teal);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.crew-roster-columns,
.crew-roster-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.15fr) minmax(190px, 1.1fr) minmax(210px, 1.25fr) 130px;
  gap: 14px;
  align-items: center;
}

.crew-roster-columns {
  padding: 8px 18px;
  border-block: 1px solid var(--slate-border);
  background: #eaf6f8;
  color: #405d70;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crew-roster-row {
  width: 100%;
  min-height: 66px;
  padding: 10px 18px;
  border: 0;
  border-bottom: 1px solid #dce8ec;
  border-radius: 0;
  background: #fff;
  color: var(--slate-text);
  font: inherit;
  text-align: left;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.crew-roster-row:last-child {
  border-bottom: 0;
}

.crew-roster-row:hover {
  background: #eff9fa;
  box-shadow: inset 4px 0 var(--slate-cyan);
}

.crew-roster-row:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--slate-teal);
  outline-offset: -3px;
}

.crew-roster-identity,
.crew-roster-contact {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.crew-roster-identity {
  position: relative;
  padding-left: 18px;
}

.crew-roster-identity > .crew-status-dot {
  position: absolute;
  top: 5px;
  left: 0;
}

.crew-roster-identity strong,
.crew-roster-contact strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crew-roster-identity small,
.crew-roster-contact small,
.crew-roster-muted {
  color: var(--slate-muted);
  font-size: 0.76rem;
}

.crew-roster-levels,
.crew-profile-card-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.crew-roster-levels .settings-pill,
.crew-profile-card-levels .settings-pill {
  margin: 0;
  padding: 4px 8px;
  border: 1px solid #9bdde7;
  border-radius: 999px;
  background: #e5f7f9;
  color: var(--slate-deep-teal);
  font-size: 0.72rem;
  font-weight: 800;
}

.crew-roster-row .crew-workload-stats {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.crew-roster-row .crew-workload-stats > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
}

.crew-roster-row .crew-workload-stats strong {
  color: var(--slate-navy);
  font-size: 1.05rem;
}

.crew-roster-row .crew-workload-stats small {
  color: var(--slate-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.crew-profile-card-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  padding: 0;
  overflow: auto;
  border: 1px solid #75aab6;
  border-radius: 16px;
  background: #fff;
  color: var(--slate-text);
  box-shadow: 0 24px 70px rgba(8, 31, 48, 0.34);
}

.crew-profile-card-dialog::backdrop {
  background: rgba(7, 24, 39, 0.68);
  backdrop-filter: blur(3px);
}

.crew-profile-card {
  min-width: 0;
}

.crew-profile-card-header {
  position: relative;
  display: grid;
  min-height: 160px;
  padding: 26px 62px 24px 28px;
  background:
    radial-gradient(circle at 82% 22%, rgba(103, 232, 249, 0.2), transparent 30%),
    linear-gradient(135deg, var(--slate-navy), var(--slate-deep-teal));
  color: #fff;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.crew-profile-card-avatar {
  display: flex;
  width: 96px;
  height: 112px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 48% 48% 42% 42%;
  background: linear-gradient(145deg, var(--slate-cyan), var(--slate-teal));
  color: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.crew-profile-card-kicker {
  color: #9eeaf4;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.crew-profile-card-header h2 {
  margin: 5px 0 10px;
  color: #fff;
  font-size: clamp(1.65rem, 4vw, 2.35rem);
}

.crew-profile-card-status {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: #dff8e8;
  color: #176c3e;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crew-profile-card-status[data-status="inactive"] {
  background: #fee4e2;
  color: #9f2318;
}

.crew-profile-card-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.5rem;
}

.crew-profile-card-body {
  display: grid;
  padding: 22px 26px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}

.crew-profile-card-body section {
  min-width: 0;
}

.crew-profile-card-body h3 {
  margin: 0 0 9px;
  color: var(--slate-navy);
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.crew-profile-card-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.crew-profile-card-stats > div {
  display: flex;
  min-height: 82px;
  border: 1px solid #b9dce3;
  border-radius: 9px;
  background: #edf9fa;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.crew-profile-card-stats strong {
  color: var(--slate-deep-teal);
  font-size: 1.75rem;
}

.crew-profile-card-stats span {
  color: var(--slate-muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.crew-profile-card-contact dl,
.crew-profile-card-contact dd {
  margin: 0;
}

.crew-profile-card-contact dl {
  display: grid;
  gap: 9px;
}

.crew-profile-card-contact dl > div {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 10px;
}

.crew-profile-card-contact dt {
  color: var(--slate-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.crew-profile-card-contact dd {
  overflow-wrap: anywhere;
  font-weight: 700;
}

.crew-profile-card-notes {
  grid-column: 1 / -1;
  padding: 13px 15px;
  border-left: 3px solid var(--slate-cyan);
  background: #f3f8fa;
}

.crew-profile-card-notes p {
  margin: 0;
  color: #405d70;
}

.crew-profile-card-footer {
  display: flex;
  padding: 14px 26px 20px;
  border-top: 1px solid var(--slate-border);
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 900px) {
  .crew-roster-columns {
    display: none;
  }

  .crew-roster-row {
    grid-template-columns: minmax(170px, 1fr) minmax(160px, 1fr) 120px;
  }

  .crew-roster-contact {
    grid-column: 1 / 3;
    grid-row: 2;
  }
}

@media (max-width: 620px) {
  .crew-roster-header,
  .crew-profile-card-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .crew-roster-row,
  .crew-profile-card-body,
  .crew-profile-card-header {
    grid-template-columns: 1fr;
  }

  .crew-roster-contact {
    grid-column: auto;
    grid-row: auto;
  }

  .crew-profile-card-header {
    text-align: center;
    justify-items: center;
  }

  .crew-profile-card-notes {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crew-roster-row {
    transition: none;
  }
}

/* Desktop compact-density system: more operational data, no CSS zoom. */
@media (min-width: 1001px) {
  html {
    font-size: 15px;
  }

  .sidebar {
    width: 220px;
    padding: 15px;
  }

  .brand {
    margin-bottom: 22px;
    gap: 9px;
  }

  .brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    font-size: 16px;
  }

  .brand h1 {
    font-size: 20px;
  }

  .brand p {
    font-size: 11px;
  }

  .nav-menu {
    gap: 12px;
  }

  .nav-group {
    gap: 3px;
  }

  .nav-group-toggle {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 0.68rem;
  }

  .nav-group-label {
    padding-inline: 10px;
    font-size: 10px;
  }

  .nav-link {
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 14px;
  }

  .topbar {
    min-height: 72px;
    padding: 14px 22px;
  }

  .topbar #page-title {
    font-size: 23px;
  }

  .topbar p {
    margin-top: 2px;
    font-size: 13px;
  }

  .role-switcher {
    gap: 6px;
  }

  .role-btn {
    min-height: 36px;
    padding: 6px 10px;
  }

  .content-area {
    padding: 18px 20px;
  }

  .card {
    padding: 16px;
    border-radius: 10px;
  }

  .card-grid {
    gap: 14px;
  }

  button,
  .button,
  .primary,
  .secondary,
  .primary-btn,
  .secondary-btn,
  .small-btn,
  .primary-button,
  .secondary-button,
  .danger-button,
  .button-primary,
  .button-secondary,
  .button-danger,
  .filter-chip,
  [role="button"] {
    min-height: 36px;
    min-width: 36px;
  }

  .button {
    padding: 0.5rem 0.72rem;
  }

  .page-section-header,
  .panel-header,
  .toolbar,
  .action-row {
    gap: 10px;
  }

  body[data-page="operations-center"] .content-area {
    padding: 10px 16px;
  }

  body[data-page="operations-center"] .operations-status-metric {
    min-height: 50px;
    padding: 5px 9px;
  }

  body[data-page="operations-center"] .operations-center-shell-no-attention {
    grid-template-rows: minmax(0, 1fr) 138px;
  }

  body[data-page="operations-center"] .operations-log-row {
    min-height: 36px;
  }

  .crew-roster-header {
    padding: 12px 15px;
  }

  .crew-roster-columns {
    padding: 6px 15px;
  }

  .crew-roster-row {
    min-height: 54px;
    padding: 7px 15px;
  }
}

/* Dashboard command surface aligned with Operations Center. */
body[data-page="dashboard"] .operations-dashboard {
  --dashboard-border: var(--slate-border);
  --dashboard-shadow: 0 5px 16px rgba(15, 39, 66, 0.07);
}

body[data-page="dashboard"] .dashboard-welcome {
  margin-bottom: 12px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid var(--dashboard-border);
}

body[data-page="dashboard"] .dashboard-welcome h1 {
  margin: 2px 0 0;
  color: var(--slate-navy);
}

body[data-page="dashboard"] .dashboard-eyebrow {
  color: var(--slate-teal);
}

body[data-page="dashboard"] .dashboard-notification-bell {
  border-color: #9fc5ce;
  background: #eff9fa;
  color: var(--slate-deep-teal);
}

body[data-page="dashboard"] .dashboard-daily-brief {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="dashboard"] .dashboard-brief-heading {
  margin-bottom: 8px;
  padding-inline: 2px;
  align-items: flex-end;
}

body[data-page="dashboard"] .dashboard-brief-heading h2 {
  color: var(--slate-navy);
  font-size: 1.05rem;
}

body[data-page="dashboard"] .dashboard-brief-message {
  color: #b42318;
  font-size: 0.78rem;
  font-weight: 800;
}

body[data-page="dashboard"] .dashboard-brief-grid {
  overflow: hidden;
  gap: 4px;
  padding: 4px;
  border: 1px solid #a9ced6;
  border-radius: 9px;
  background: #d6e8ec;
  box-shadow: var(--dashboard-shadow);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

body[data-page="dashboard"] .dashboard-brief-metric {
  position: relative;
  min-height: 74px;
  padding: 8px 10px;
  border: 0;
  border-right: 0;
  border-radius: 5px;
  align-content: center;
  justify-items: center;
  text-align: center;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

body[data-page="dashboard"] .dashboard-brief-metric:last-child {
  border-right: 0;
}

body[data-page="dashboard"] .dashboard-brief-metric-priority {
  background: linear-gradient(135deg, #07596b 0%, #087f91 72%, #0891a5 100%);
  color: #fff;
}

body[data-page="dashboard"] .dashboard-brief-metric-context {
  border-right-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(135deg, #07596b 0%, #087f91 72%, #0891a5 100%);
}

body[data-page="dashboard"] .dashboard-brief-metric-priority strong,
body[data-page="dashboard"] .dashboard-brief-metric-priority span {
  color: #fff;
}

body[data-page="dashboard"] .dashboard-brief-metric-context strong {
  color: #fff;
}

body[data-page="dashboard"] .dashboard-brief-metric-context span {
  color: #fff;
}

body[data-page="dashboard"] .dashboard-brief-metric strong {
  font-size: 1.55rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

body[data-page="dashboard"] .dashboard-brief-metric span {
  font-size: 0.78rem;
  font-weight: 750;
}

body[data-page="dashboard"] .dashboard-brief-metric-priority:hover {
  background: linear-gradient(135deg, #064d5c, #077f91 74%, #169daf);
  box-shadow: inset 0 -4px #67e8f9;
}

body[data-page="dashboard"] .dashboard-brief-metric-context:hover {
  background: linear-gradient(135deg, #064d5c, #077f91 72%, #087f91);
  box-shadow: inset 0 -4px var(--slate-cyan);
}

body[data-page="dashboard"] .dashboard-brief-alert {
  border-left: 0;
  box-shadow: inset 0 0 0 2px #ff675c;
}

body[data-page="dashboard"] .dashboard-brief-alert:hover {
  box-shadow: inset 0 0 0 2px #ff675c, inset 0 -4px #67e8f9;
}

body[data-page="dashboard"] .dashboard-brief-alert strong {
  color: #fff;
  -webkit-text-stroke: 1px #b42318;
  paint-order: stroke fill;
  text-shadow: 0 0 1px #b42318;
}

@media (max-width: 1000px) {
  body[data-page="dashboard"] .dashboard-brief-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body[data-page="dashboard"] .dashboard-brief-actions {
  margin-top: 8px;
}

body[data-page="dashboard"] .dashboard-today-games {
  overflow: hidden;
  padding: 9px 15px 12px;
  border: 1px solid var(--dashboard-border);
  border-top: 4px solid var(--slate-teal);
  border-radius: 9px;
  background: #fff;
  box-shadow: var(--dashboard-shadow);
}

body[data-page="dashboard"] .dashboard-today-games .dashboard-card-header {
  display: flex;
  width: 100%;
  margin-bottom: 5px;
  padding: 0;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

body[data-page="dashboard"] .dashboard-today-heading {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: baseline;
}

body[data-page="dashboard"] .dashboard-today-heading h2,
body[data-page="dashboard"] .dashboard-today-heading .card-subtitle {
  margin: 0;
}

body[data-page="dashboard"] .dashboard-today-heading .card-subtitle {
  padding: 2px 7px;
  border: 1px solid #9ccbd4;
  border-radius: 999px;
  background: #e4f5f7;
  color: #07596b;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}

body[data-page="dashboard"] .dashboard-view-schedule,
body[data-page="dashboard"] [data-testid="dashboard-view-schedule"] {
  flex: 0 0 auto;
  min-height: 28px;
  margin-left: auto;
  padding: 2px 4px;
  align-self: center;
}

body[data-page="dashboard"] .dashboard-today-time {
  font-weight: 800;
}

body[data-page="dashboard"] .dashboard-today-list {
  max-height: 420px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

body[data-page="dashboard"] .dashboard-today-list:focus-visible,
body[data-page="dashboard"] .dashboard-entry-activity .operations-log-list:focus-visible {
  outline: 3px solid var(--slate-cyan);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  body[data-page="dashboard"] .dashboard-today-games .dashboard-card-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

body[data-page="dashboard"] .dashboard-today-header {
  border-bottom-color: #b8d6de;
  background: #eaf6f8;
  color: #405d70;
}

body[data-page="dashboard"] .dashboard-today-row {
  border-bottom-color: #dce8ec;
}

body[data-page="dashboard"] .dashboard-today-row:hover {
  background: #eff9fa;
  box-shadow: inset 4px 0 var(--slate-cyan);
}

body[data-page="dashboard"] .dashboard-today-matchup {
  color: var(--slate-deep-teal);
}

body[data-page="dashboard"] .dashboard-entry-activity .dashboard-card {
  overflow: hidden;
  border: 1px solid var(--slate-deep-teal);
  border-top: 4px solid var(--slate-cyan);
  border-radius: 9px;
  background: linear-gradient(145deg, #0b5362, #073d4d 76%);
  color: #fff;
  box-shadow: var(--dashboard-shadow);
}

body[data-page="dashboard"] .dashboard-entry-activity .operations-log-list {
  max-height: 180px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

body[data-page="dashboard"] .dashboard-entry-activity h2,
body[data-page="dashboard"] .dashboard-entry-activity .card-subtitle,
body[data-page="dashboard"] .dashboard-entry-activity .assignment-activity-content strong,
body[data-page="dashboard"] .dashboard-entry-activity .empty-state {
  color: #fff;
}

body[data-page="dashboard"] .dashboard-entry-activity .dashboard-timeline-category,
body[data-page="dashboard"] .dashboard-entry-activity .assignment-activity-time {
  color: #b9d8df;
}

body[data-page="dashboard"] .dashboard-entry-activity .assignment-activity-item {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

body[data-page="dashboard"] .dashboard-entry-activity .dashboard-timeline-marker {
  background: var(--slate-cyan);
}

body[data-page="dashboard"] .dashboard-entry-activity .operations-log-row.dashboard-timeline-item {
  display: grid;
  grid-template-columns: 64px minmax(120px, 0.75fr) minmax(120px, 0.8fr) minmax(120px, 0.8fr) minmax(220px, 1.8fr);
  gap: 10px;
  align-items: center;
}

body[data-page="dashboard"] .dashboard-entry-activity .operations-log-row > * {
  min-width: 0;
  overflow-wrap: normal;
}

body[data-page="dashboard"] .dashboard-entry-activity .operations-log-actor {
  white-space: nowrap;
}

body[data-page="operations-center"] .operations-status-rail {
  padding-top: 9px;
  padding-bottom: 7px;
}

body[data-page="operations-center"] .operations-status-rail .operations-section-heading {
  margin-bottom: 2px;
}

body[data-page="operations-center"] .operations-status-rail .operations-period-health {
  padding: 0;
  gap: 4px;
}

body[data-page="operations-center"] .operations-status-rail .operations-period-health-content {
  gap: 1px;
}

body[data-page="operations-center"] .operations-status-rail .operations-period-health-summary strong {
  font-size: 0.82rem;
}

body[data-page="operations-center"] .operations-status-rail .operations-period-health-summary span {
  font-size: 0.78rem;
}

body[data-page="operations-center"] .operations-status-rail .operations-period-signals > div {
  min-height: 15px;
  padding: 0 1px;
  gap: 8px;
}

body[data-page="operations-center"] .operations-status-rail .operations-period-health-summary span[data-incomplete="true"] {
  color: #ff3b30;
  font-weight: 900;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

body[data-page="operations-center"] .operations-status-rail .operations-period-signals dt {
  min-width: 0;
  font-size: 0.84rem;
  line-height: 1;
}

body[data-page="operations-center"] .operations-status-rail .operations-period-signals dd {
  margin-left: auto;
  font-size: 0.8rem;
  line-height: 1;
}

body[data-page="operations-center"] .operations-status-rail .operations-signal-status {
  font-size: 0.58rem;
}

body[data-page="operations-center"] .operations-status-rail .operations-staffing-progress {
  height: 4px;
}

/* Integrated Build Crew drawer and compact recommendations */
.assignment-drawer { width: min(680px, 100%); padding: 0; border-left: 4px solid #22aabd; background: #f4f8fb; }
.assignment-drawer-header { padding: 16px 18px; background: linear-gradient(145deg, #07596b, #087f91); color: #fff; }
.assignment-drawer-header h2, .assignment-drawer-header p { margin: 0; color: #fff; }
.assignment-drawer-body { display: grid; padding: 12px 16px; gap: 10px; }
.assignment-drawer-footer { position: sticky; bottom: 0; display: flex; padding: 10px 16px; border-top: 1px solid #b8d6de; background: #fff; gap: 7px; justify-content: flex-end; }
.drawer-validation { margin: 10px 16px 0; padding: 8px 10px; border-radius: 6px; background: #fff; }
.crew-builder-slot { padding: 10px; border: 1px solid #b8d6de; border-top: 3px solid #22aabd; border-radius: 7px; background: #fff; }
.assignment-recommendation-card { padding: .55rem .65rem; background: #f8fcfd; }
.recommendation-name { padding: 0; border: 0; background: transparent; color: #06788d; font: inherit; font-weight: 900; text-decoration: underline; cursor: pointer; }
.recommendation-stars { margin-left: .45rem; color: #f4b400; letter-spacing: 1px; }
.recommendation-score { padding: 3px 7px; border-radius: 999px; }
.recommendation-score.score-green { background: #daf5e5; color: #087443; }
.recommendation-score.score-yellow { background: #fff4cc; color: #7a5b00; }
.recommendation-score.score-orange { background: #ffead5; color: #a04400; }
.recommendation-score.score-red { background: #fee4e2; color: #b42318; }
.recommendation-more { margin-top: 5px; color: #526b7a; font-size: .8rem; }
.recommendation-more summary { cursor: pointer; font-weight: 800; }
.recommendation-use-btn { margin-left: auto; }
.recommendation-metrics { justify-content: space-between; }

/* Time-window availability command surface */
.availability-page { gap: 10px; }
.availability-page-header { padding: 12px 15px; border-radius: 8px; background: linear-gradient(145deg, #07596b, #087f91); color: #fff; }
.availability-page-header h2, .availability-page-header p { margin: 0; color: #fff; }
.availability-form-card, .availability-list-section { padding: 12px 14px; border-top: 4px solid #22aabd; border-radius: 8px; }
.availability-form-grid { grid-template-columns: minmax(190px, 1.2fr) minmax(150px, .8fr) minmax(130px, .6fr) minmax(130px, .6fr); gap: 8px; }
.availability-time-window { padding: 3px 8px; border-radius: 999px; background: #dff5f8; color: #07596b; font-size: .8rem; font-weight: 800; }
@media (max-width: 900px) { .availability-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Assigner Workbench command-center layout */
body[data-page="assigner-workbench"] .page-section {
  display: grid;
  gap: 12px;
}

.workbench-status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid #8fc8d2;
  border-radius: 9px;
  background: #d7ebef;
}

.workbench-status-strip button {
  display: flex;
  min-height: 72px;
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(145deg, #087f91, #0b97a8);
  color: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.workbench-status-strip button[data-attention="true"] {
  box-shadow: inset 0 0 0 2px #ff675c;
}

.workbench-status-strip span { font-size: 0.88rem; font-weight: 800; }
.workbench-status-strip strong { margin-top: 2px; font-size: 1.65rem; }

.workbench-tools,
.workbench-notification-center {
  padding: 14px 16px;
  border: 1px solid #b8d6de;
  border-top: 4px solid #087f91;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(15, 39, 66, 0.06);
}

.workbench-tools {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.workbench-tools h2,
.workbench-tools p,
.workbench-section-header h2 { margin: 2px 0 0; }
.workbench-tool-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

.workbench-section-header {
  display: flex;
  margin-bottom: 8px;
  align-items: center;
  justify-content: space-between;
}

.workbench-notification-title,
.workbench-notification-actions {
  display: flex;
  gap: 9px;
  align-items: center;
}

.workbench-count {
  display: grid;
  min-width: 34px;
  min-height: 34px;
  border-radius: 999px;
  background: #07596b;
  color: #fff;
  place-items: center;
  font-weight: 800;
}

.workbench-notification-list { border-top: 1px solid #b8d6de; }
.workbench-notification-row {
  display: grid;
  width: 100%;
  min-height: 46px;
  padding: 7px 8px;
  border: 0;
  border-bottom: 1px solid #d8e6ea;
  background: transparent;
  grid-template-columns: 135px minmax(190px, 0.8fr) minmax(260px, 1.6fr) 55px;
  gap: 10px;
  align-items: center;
  color: #13283f;
  text-align: left;
  cursor: pointer;
}
.workbench-notification-game { display: grid; gap: 2px; }
.workbench-notification-game small { color: #526b7a; font-weight: 700; }
.workbench-notification-change { font-weight: 650; }
.workbench-notification-row:hover,
.workbench-notification-row:focus-visible { background: #e9f8fa; }
.workbench-notification-row[data-read="false"] { box-shadow: inset 4px 0 #22aabd; }
.workbench-notification-row[data-read="false"],
.workbench-notification-row[data-read="false"] strong,
.workbench-notification-row[data-read="false"] .workbench-notification-change { font-weight: 800; }
.workbench-notification-row[data-read="true"],
.workbench-notification-row[data-read="true"] strong,
.workbench-notification-row[data-read="true"] .workbench-notification-change { font-weight: 400; }
.workbench-notification-type { color: #07596b; font-weight: 800; text-transform: capitalize; }
.workbench-notification-state { color: #526b7a; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; }

body[data-page="assigner-workbench"] .workbench-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="assigner-workbench"] .workbench-grid > section {
  margin: 0;
  border-top: 4px solid #22aabd;
  border-radius: 9px;
  box-shadow: 0 5px 16px rgba(15, 39, 66, 0.06);
}

body[data-page="assigner-workbench"] .workbench-grid .dashboard-card-header {
  display: flex;
  width: 100%;
  min-height: 36px;
  margin-bottom: 4px;
  padding-bottom: 5px;
  align-items: center;
}
.workbench-card-title {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: center;
}
.workbench-card-title h3 { margin: 0; }
.workbench-card-title .status-badge {
  display: grid;
  min-width: 28px;
  min-height: 28px;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: #07596b;
  color: #fff;
  place-items: center;
}
.workbench-card-title [data-testid="workbench-next-label"] { white-space: nowrap; }
.workbench-card-view-all { margin: 0 0 0 auto; white-space: nowrap; }

body[data-page="assigner-workbench"] .workbench-grid > section { padding: 10px 12px; }
body[data-page="assigner-workbench"] .workbench-grid .workbench-list { margin: 0; }

/* Compact claim review rows */
.claims-queue-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.claims-queue-heading h2 { margin: 0; }
.claims-queue-showing { margin: 3px 0 9px; color: #526b7a; font-size: .85rem; }
.claim-queue-bulk-actions { display: flex; margin-bottom: 8px; flex-wrap: wrap; gap: 6px; }
.claim-queue-bulk-actions button { min-height: 32px; padding: 5px 10px; }
.claims-queue-table-wrapper { overflow-x: auto; border: 1px solid #b8d6de; border-radius: 8px; }
.claims-queue-table { width: 100%; min-width: 1080px; border-collapse: collapse; table-layout: auto; }
.claims-queue-table th,
.claims-queue-table td { padding: 7px 8px; border-bottom: 1px solid #d8e6ea; text-align: center; vertical-align: middle; white-space: nowrap; }
.claims-queue-table th { background: #edf6f8; color: #263f58; font-size: .76rem; letter-spacing: .025em; text-transform: uppercase; }
.claims-queue-table tbody tr:last-child td { border-bottom: 0; }
.claims-queue-table tbody tr:nth-child(even) { background: #f8fbfc; }
.claims-queue-table .claims-align-left { text-align: left; }
.claim-queue-row.is-highlighted { background: #fff4cf; box-shadow: inset 4px 0 #d28b00; }
.claim-select-cell { width: 38px; }
.claim-select-cell label { display: inline-grid; min-width: 28px; min-height: 28px; place-items: center; }
.claim-queue-actions { display: inline-flex; justify-content: center; gap: 5px; }
.claim-queue-actions button { min-height: 32px; padding: 5px 9px; }
.claims-queue-table-wrapper:focus-visible { outline: 3px solid #1d6f80; outline-offset: 2px; }

/* Claim History command-center presentation */
.claim-history-summary {
  display: grid;
  margin-bottom: 10px;
  padding: 1px;
  border-radius: 8px;
  background: #a9ced6;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
}
.claim-history-summary-card { margin: 0; padding: 9px 12px; border: 0; border-radius: 0; background: linear-gradient(145deg, #087f91, #0b97a8); color: #fff; text-align: center; }
.claim-history-summary-card h3 { margin: 0; font-size: .82rem; }
.claim-history-summary-card p { margin: 2px 0 0; font-size: 1.45rem; font-weight: 900; }
.claim-history-filters,
.claim-history-date-filters { margin: 0 0 7px; }
.claim-history-section { margin-top: 10px; padding: 10px 12px; border: 1px solid #b8d6de; border-top: 4px solid #22aabd; border-radius: 8px; background: #fff; }
.claim-history-section > summary { display: flex; margin: -2px 0 7px; padding: 2px 0 5px; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.claim-history-section > summary::-webkit-details-marker { display: none; }
.claim-history-section > summary h3 { margin: 0; }
.claim-history-section > summary > span:not(.claim-history-chevron) { display: grid; min-width: 28px; min-height: 28px; padding: 3px; border-radius: 999px; background: #07596b; color: #fff; place-items: center; font-weight: 800; }
.claim-history-chevron { width: 9px; height: 9px; margin-left: auto; border-right: 2px solid #07596b; border-bottom: 2px solid #07596b; transform: rotate(45deg); transition: transform 120ms ease; }
.claim-history-section:not([open]) .claim-history-chevron { transform: rotate(-45deg); }
.claim-history-section:not([open]) > summary { margin-bottom: -2px; padding-bottom: 2px; }
.claim-history-list { display: grid; gap: 6px; }
.claim-history-card { position: relative; display: grid; padding: 8px 92px 8px 10px; border: 1px solid #8fb5bf; border-left: 3px solid #168fa1; border-radius: 6px; background: #fff; gap: 6px; }
.claim-history-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.claim-history-card-header h4 { margin: 0; color: #06788d; font-size: 1rem; }
.claim-history-status { padding: 3px 8px; border-radius: 999px; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.claim-history-status[data-status="approved"] { background: #daf5e5; color: #087443; }
.claim-history-status[data-status="rejected"] { background: #fee4e2; color: #b42318; }
.claim-history-card-details { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.claim-history-card-details p { display: grid; margin: 0; justify-items: center; gap: 6px; text-align: center; }
.claim-history-card-details strong { color: #405d70; font-size: .7rem; text-decoration: underline; text-underline-offset: 2px; text-transform: uppercase; }
.claim-history-card-details span { font-weight: 700; }
.claim-history-card-details .claim-data-pill {
  display: inline-flex;
  width: fit-content;
  min-height: 25px;
  padding: 3px 8px;
  border: 1px solid #9bdde7;
  border-radius: 999px;
  align-items: center;
  background: #e5f7f9;
  color: #0f2942;
  font-weight: 800;
  text-decoration: none;
}
.claim-history-card-header { min-height: 30px; }
.claim-history-status { position: absolute; top: 50%; right: 10px; align-self: center; transform: translateY(-50%); }

.operations-log-period {
  color: #cbeaf0;
  font-size: .74rem;
  font-weight: 700;
}
.operations-log-week-navigation {
  display: flex;
  padding-top: 6px;
  justify-content: flex-end;
  gap: 8px;
}

/* Denser administrative Game Hub controls */
.game-hub-command-summary dl {
  grid-template-columns: repeat(3, minmax(120px, 180px));
  justify-content: start;
}
.game-hub-crew-picker { width: min(980px, calc(100vw - 32px)); }
.game-hub-crew-options { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }

.workbench-mini-game { margin: 0; border-bottom: 1px solid #d8e6ea; }
.workbench-mini-game:last-child { border-bottom: 0; }
.workbench-mini-game .workbench-item-action {
  display: grid;
  width: 100%;
  padding: 10px 8px;
  border: 0;
  border-left: 3px solid #22aabd;
  background: #fff;
  grid-template-columns: 78px minmax(0, 1fr) minmax(105px, 0.65fr);
  gap: 12px;
  align-items: center;
  color: #13283f;
  text-align: left;
  cursor: pointer;
}
.workbench-mini-game .workbench-item-action:hover,
.workbench-mini-game .workbench-item-action:focus-visible { background: #e9f8fa; }
.workbench-mini-game .workbench-item-action:has(.workbench-mini-game-date) {
  grid-template-columns: 92px 78px minmax(0, 1fr) auto;
}
.workbench-mini-game-date { font-size: 0.88rem; font-weight: 800; }
.workbench-mini-game-time { font-size: 1.02rem; font-weight: 900; }
.workbench-mini-game-main,
.workbench-mini-game-crew { display: grid; gap: 2px; min-width: 0; }
.workbench-mini-game-main strong { color: #06788d; font-size: 1rem; }
.workbench-mini-game-main small,
.workbench-mini-game-crew small { color: #526b7a; }
.workbench-mini-game-crew { justify-items: end; text-align: right; }
.workbench-mini-game-crew .workbench-staffing-count.status-badge {
  white-space: nowrap;
  text-shadow: none;
}

.workbench-staffing-count[data-incomplete="true"] {
  color: #fff;
  font-weight: 900;
  text-shadow:
    -1px -1px 0 #b42318,
    1px -1px 0 #b42318,
    -1px 1px 0 #b42318,
    1px 1px 0 #b42318;
}

/* Compact Crew roster cards and live roster search. */
.crew-page-shell > .page-section-header {
  margin-bottom: 10px;
}

.crew-summary-grid {
  gap: 10px;
}

.crew-summary-grid > .stat-card {
  min-height: 0;
  padding: 12px 16px;
}

.crew-summary-grid > .stat-card h3,
.crew-summary-grid > .stat-card p {
  margin-block: 0;
}

.crew-summary-grid > .stat-card .stat-number {
  margin-block: 2px;
  font-size: 1.65rem;
}

.crew-summary-grid {
  padding: 2px;
  border-radius: 10px;
  background: #9fc5ce;
  gap: 4px;
}

.crew-summary-grid > .crew-summary-card {
  border: 1px solid #19425d;
  border-top: 4px solid #22aabd;
  background: linear-gradient(145deg, #123b58, #0b2943);
  color: #fff;
  text-align: center;
}

.crew-summary-grid > .crew-summary-card h3,
.crew-summary-grid > .crew-summary-card p {
  color: #fff;
}

.crew-summary-grid > .crew-summary-active .stat-number {
  color: #19a55a;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.crew-summary-grid > .crew-summary-inactive .stat-number {
  color: #d92d20;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.crew-summary-grid > .crew-summary-total .stat-number {
  color: #fff;
}

.crew-roster-header {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(240px, 420px) minmax(120px, 1fr);
}

.crew-roster-header-actions {
  display: flex;
  justify-self: end;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  color: var(--slate-deep-teal);
  font-size: .75rem;
  font-weight: 800;
}
.crew-inactive-toggle { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.crew-inactive-toggle input { margin: 0; }

.crew-roster-search input {
  width: 100%;
  min-height: 38px;
  margin: 0;
}

.crew-roster-header > span:last-child {
  justify-self: end;
}

.crew-roster-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  background: #eef6f8;
}

.crew-roster-row {
  display: flex;
  min-height: 162px;
  padding: 9px 10px;
  border: 1px solid #c7dce2;
  border-radius: 8px;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}

.crew-roster-row:last-child {
  border-bottom: 1px solid #c7dce2;
}

.crew-roster-row[hidden] {
  display: none !important;
}

.crew-roster-row:hover {
  box-shadow: inset 0 4px var(--slate-cyan);
}

.crew-roster-identity {
  padding-left: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.crew-roster-status {
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
}

.crew-roster-status[data-status="active"] { background: #16803c; }
.crew-roster-status[data-status="inactive"] { background: #b42318; }

.crew-roster-contact {
  margin-top: auto;
}

.crew-roster-row .crew-workload-stats {
  padding-top: 5px;
  border-top: 1px solid #dce8ec;
}

.crew-profile-card-contact dd,
.crew-contact-action { overflow: visible; white-space: nowrap; word-break: normal; }
.crew-contact-action {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #06788d;
  font: inherit;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Role-specific administrator availability finder. */
.availability-finder-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)) auto; gap: 10px; align-items: end; }
.availability-finder-grid .button { min-height: 44px; }
.availability-finder-results { min-height: 90px; }
.availability-finder-result-header { display: flex; margin-bottom: 8px; align-items: center; justify-content: space-between; }
.availability-finder-result-header h3 { margin: 0; }
.availability-finder-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.availability-finder-card {
  display: grid;
  min-height: 90px;
  padding: 10px;
  border: 1px solid #9fc6cf;
  border-top: 4px solid #22aabd;
  border-radius: 8px;
  background: #fff;
  color: #0f2942;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}
.availability-finder-card > span:first-child { display: grid; gap: 2px; }
.availability-finder-card small { color: #16803c; font-weight: 800; }

body[data-page="claims-queue"] button,
body[data-page="claim-history"] button,
body[data-page="availability"] button:not(.crew-contact-action) { border-color: #0f2942; background: #0f2942; color: #fff; }
body[data-page="claims-queue"] button:disabled,
body[data-page="claim-history"] button:disabled,
body[data-page="availability"] button:disabled { opacity: .5; }

@media (max-width: 1100px) {
  .availability-finder-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .availability-finder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .availability-finder-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1450px) {
  .crew-roster-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1120px) {
  .crew-roster-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 840px) {
  .crew-roster-header { grid-template-columns: 1fr 1fr; }
  .crew-roster-search { grid-column: 1 / -1; grid-row: 2; }
  .crew-roster-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .crew-roster-list { grid-template-columns: 1fr; }
}

/* Reusable Slate credential / baseball Crew Card. */
.crew-credential-front {
  display: grid;
  width: 100%;
  min-height: 112px;
  padding: 10px 11px;
  border: 1px solid #87bac4;
  border-top: 4px solid #22aabd;
  border-radius: 10px;
  background: linear-gradient(145deg, #ffffff 0 76%, #e8f6f8 100%);
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  align-items: start;
  color: #0f2942;
  text-align: left;
  box-shadow: 0 4px 12px rgba(15, 41, 66, .08);
  cursor: pointer;
}
.crew-credential-front:hover { border-color: #168fa1; transform: translateY(-1px); }
.crew-credential-front:focus-visible { outline: 3px solid #22aabd; outline-offset: 2px; }
.crew-credential-front-photo { grid-row: 1 / span 2; }
.crew-credential-photo { display: grid; width: 54px; height: 68px; border: 2px solid #0f2942; border-radius: 8px; object-fit: cover; background: linear-gradient(#dbe5e8, #8f9da2); place-items: center; }
.crew-credential-photo-fallback span { color: #fff; font-size: 1.1rem; font-weight: 900; }
.crew-credential-front-main { display: grid; min-width: 0; min-height: 90px; grid-template-rows: auto 1fr auto; gap: 3px; }
.crew-credential-front-main > small { color: #087f91; font-size: .65rem; font-weight: 900; letter-spacing: .04em; }
.crew-credential-front-main > strong { color: #071f35; font-size: .96rem; line-height: 1.15; }
.crew-credential-front-main > span:not(.crew-credential-levels) { color: #294b60; font-size: .72rem; font-weight: 750; }
.crew-credential-contact-summary { display: flex; overflow: visible; flex-direction: column; justify-content: space-evenly; gap: 3px; white-space: normal; }
.crew-credential-contact-summary > span { min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.crew-credential-levels { display: flex; margin-top: auto; flex-wrap: wrap; gap: 3px; }
.crew-credential-levels i { padding: 2px 6px; border: 1px solid #77c9d4; border-radius: 999px; background: #dff5f8; color: #07596b; font-size: .64rem; font-style: normal; font-weight: 900; }
.crew-credential-front-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.crew-credential-front-meta b, .crew-credential-photo-block > b { padding: 3px 7px; border-radius: 999px; background: #16803c; color: #fff; font-size: .62rem; text-transform: uppercase; }
.crew-credential-front-meta b[data-status="inactive"] { background: #b42318; }
.crew-credential-front-meta b[data-status="pending"] { background: #b06a00; }
.crew-credential-front-meta span { color: #526b7a; font-size: .64rem; font-weight: 800; white-space: nowrap; }
.crew-roster-credential { min-height: 120px; }
.crew-roster-credential[hidden] { display: none !important; }
body[data-page="availability"] button.crew-credential-front {
  border-color: #87bac4;
  border-top-color: #22aabd;
  background: linear-gradient(145deg, #fff 0 76%, #e8f6f8 100%);
  color: #0f2942;
}

.crew-credential-dialog { width: min(1180px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); padding: 0; overflow: auto; border: 1px solid #4f8290; border-radius: 18px; background: transparent; box-shadow: 0 30px 85px rgba(5, 24, 39, .45); }
.crew-credential-dialog::backdrop, .crew-card-admin-dialog::backdrop { background: rgba(3, 20, 34, .72); backdrop-filter: blur(3px); }
.crew-credential-modal { position: relative; padding: 12px; perspective: 1800px; }
.crew-credential-dialog-actions { position: absolute; z-index: 20; top: 26px; right: 26px; }
.crew-credential-flipper { position: relative; min-height: 700px; transition: transform .7s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.crew-credential-flipper.is-flipped { transform: rotateY(180deg); }
.crew-credential-face { position: absolute; inset: 0; overflow: hidden; border: 13px solid #071f35; border-radius: 18px; backface-visibility: hidden; }
.crew-credential-face-front { display: grid; padding: 80px; background: linear-gradient(135deg, #071f35 0 34%, #138e9d 34% 50%, #f8faf8 50%); grid-template-columns: 300px 1fr; align-items: center; gap: 55px; }
.crew-credential-brand { position: absolute; top: 35px; left: 50px; display: grid; color: #fff; text-transform: uppercase; }
.crew-credential-brand strong { font-size: 2rem; }.crew-credential-brand span { color: #4bd1dd; font-weight: 900; letter-spacing: .12em; }
.crew-credential-modal-photo { width: 270px; height: 350px; border-width: 5px; border-radius: 22px; }
.crew-credential-front-identity { align-self: center; }.crew-credential-front-identity small { color: #087f91; font-weight: 900; }.crew-credential-front-identity h2 { margin: 5px 0; color: #071f35; font-size: 3.5rem; line-height: .95; text-transform: uppercase; }.crew-credential-front-identity p { color: #087f91; font-size: 1.4rem; font-weight: 900; text-transform: uppercase; }
.crew-credential-face-back { display: grid; padding: 22px; background-color: #f7f8f5; background-image: linear-gradient(120deg, rgba(7,31,53,.025), transparent 35%, rgba(8,127,145,.035)); grid-template-columns: 1.05fr .9fr 1.5fr; grid-template-rows: auto 1.05fr 1fr; gap: 12px; transform: rotateY(180deg); color: #071f35; }
.crew-credential-back-header { display: grid; margin: -22px -22px 0; padding: 18px 26px; background: linear-gradient(115deg, #071f35 0 28%, #138e9d 28% 48%, transparent 48%); grid-column: 1 / -1; grid-template-columns: 280px 230px 1fr; align-items: center; color: #fff; }.crew-credential-back-header > div { position: relative; display: grid; align-content: center; justify-items: center; text-align: center; }.crew-card-site-logo { position: absolute; left: 0; width: 52px; height: 52px; border: 1px solid #4bd1dd; border-radius: 10px; object-fit: cover; box-shadow: 0 5px 14px rgba(0, 0, 0, .24); }.crew-credential-back-header > div:first-child strong { font-size: 1.6rem; text-transform: uppercase; }.crew-credential-back-header > div:first-child > span { color: #4bd1dd; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.crew-credential-back-header > div:nth-child(2) small { font-size: .9rem; font-weight: 800; }.crew-credential-back-header > div:nth-child(2) b { font-size: 1.35rem; }.crew-credential-back-header p { width: 100%; justify-self: stretch; color: #071f35; font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 1.35rem; font-style: italic; text-align: center; }

.profile-credentials { margin-top: 20px; padding: 18px; border: 1px solid #b8d6de; border-radius: 12px; background: #f7fbfc; }
.profile-credential-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-credential-grid > div { padding: 12px 14px; border-left: 4px solid #1598a8; background: #fff; }
.profile-credential-grid > div > span { display: block; margin-bottom: 6px; color: #526b7a; font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.profile-credential-levels > div { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-credential-history ul { margin: 0; padding-left: 18px; }

@media (max-width: 720px) { .profile-credential-grid { grid-template-columns: 1fr; } }

/* Crew portal command dashboard */
body[data-role="umpire"][data-page="dashboard"] .content-area { background: var(--slate-canvas); }
.crew-command-dashboard { display: grid; gap: 14px; }
.crew-command-header { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 18px; }
.crew-command-header h1 { margin: 0; color: var(--slate-navy); font-size: 1.45rem; }
.crew-command-header p { margin: 4px 0 0; color: var(--slate-muted); font-weight: 650; }
.crew-command-header time { display: grid; color: var(--slate-deep-teal); font-weight: 850; justify-items: end; white-space: nowrap; }
.crew-command-header time strong { color: var(--slate-navy); font-size: 1.05rem; }
.crew-command-dashboard .crew-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.crew-command-dashboard .stat-card { display: grid; min-height: 86px; padding: 12px; border: 2px solid transparent; border-radius: 8px; background: linear-gradient(135deg, var(--slate-deep-teal), var(--slate-teal)); color: #fff; place-items: center; align-content: center; gap: 3px; cursor: pointer; }
.crew-command-dashboard .stat-card:hover,.crew-command-dashboard .stat-card:focus-visible { border-color: #67e8f9; filter: brightness(1.04); }
.crew-command-dashboard .stat-card[data-attention="true"] { border-color: #dc2626; }
.crew-command-dashboard .stat-label { color: #fff !important; font-size: .9rem; font-weight: 850; }
.crew-command-dashboard .stat-value { color: #fff !important; font-size: 1.75rem; font-weight: 950; line-height: 1; }
.crew-command-dashboard .stat-card[data-attention="true"] .stat-value { color: #ef4444 !important; text-shadow: -1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff; }
.crew-command-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .8fr); gap: 14px; }
.crew-command-panel { overflow: hidden; border: 1px solid #b8d6de; border-top: 4px solid var(--slate-teal); border-radius: 9px; background: #fff; box-shadow: 0 5px 14px rgba(7, 31, 53, .06); }
.crew-command-panel > header { display: flex; min-height: 46px; padding: 8px 14px; align-items: center; justify-content: space-between; border-bottom: 1px solid #d7e6ea; }
.crew-command-panel > header h2 { margin: 0; color: var(--slate-navy); font-size: 1.05rem; }
.crew-command-today { min-height: 150px; }
.crew-hero { display: grid; width: 100%; min-height: 96px; padding: 16px 18px; border: 0; background: #f7fbfc; color: var(--slate-navy); grid-template-columns: 105px minmax(0, 1fr) 120px auto; align-items: center; gap: 16px; text-align: left; cursor: pointer; }
.crew-hero:hover,.crew-hero:focus-visible { background: #e9f8fa; outline: 2px solid var(--slate-cyan); outline-offset: -2px; }
.crew-hero-time { font-size: 1.35rem; font-weight: 950; }
.crew-hero-matchup,.crew-hero-detail { display: grid; gap: 4px; }
.crew-hero-matchup strong { color: var(--slate-deep-teal); font-size: 1.15rem; }
.crew-hero small { color: var(--slate-muted); font-weight: 700; }
.crew-hero-empty { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; cursor: default; }
.crew-command-actions { background: var(--slate-deep-teal); color: #fff; }
.crew-command-actions > header { border-bottom-color: rgba(255,255,255,.18); }
.crew-command-actions > header h2 { color: #fff; }
.crew-action-row,.crew-returned-review { display: grid; width: 100%; min-height: 54px; padding: 9px 14px; border: 0; border-bottom: 1px solid rgba(255,255,255,.17); background: transparent; color: #fff; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; text-align: left; }
.crew-action-row { cursor: pointer; }
.crew-action-row:hover,.crew-action-row:focus-visible { background: rgba(255,255,255,.08); }
.crew-action-row span,.crew-returned-review span { display: grid; gap: 2px; }
.crew-action-row small,.crew-returned-review small { color: #bfe7ec; }
.crew-action-row > b,.crew-returned-review > b { display: grid; min-width: 29px; height: 29px; padding-inline: 6px; border-radius: 999px; background: #fff; color: var(--slate-deep-teal); place-items: center; }
.crew-action-row > b[data-attention="true"] { color: #c81e1e; }
.crew-returned-review { grid-template-columns: minmax(0,1fr) auto auto; }
.crew-returned-review .button { padding: 7px 10px; }
.crew-command-lists { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); gap: 14px; }
.crew-command-list { display: grid; }
.crew-command-game-row { display: grid; width: 100%; min-height: 60px; padding: 9px 14px; border: 0; border-bottom: 1px solid #d7e6ea; border-radius: 0; background: #fff; color: var(--slate-navy); grid-template-columns: 80px minmax(0,1fr) 105px auto; align-items: center; gap: 12px; text-align: left; cursor: pointer; }
.crew-command-game-row:hover,.crew-command-game-row:focus-visible { background: #e9f8fa; }
.crew-command-game-row span { display: grid; gap: 2px; }
.crew-command-game-row small { color: var(--slate-muted); }
.crew-command-claim-row { display: grid; padding: 10px 12px; border: 0; border-bottom: 1px solid #d7e6ea; border-radius: 0; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; }
.crew-claim-summary { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.crew-claim-summary span { display: grid; gap: 2px; }
.crew-claim-summary small { color: var(--slate-muted); }
.crew-claim-summary em { padding: 3px 7px; border-radius: 999px; background: #e7f4f6; color: var(--slate-deep-teal); font-size: .72rem; font-style: normal; font-weight: 850; }
.crew-availability-buttons { display: flex; justify-content: flex-end; gap: 6px; }
.crew-availability-buttons .button { padding: 6px 9px; font-size: .76rem; }
.crew-command-empty { padding: 22px 14px; color: var(--slate-muted); text-align: center; }

/* Keep the expanded credential inside the visible browser window. */
.crew-credential-dialog { height: min(760px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); overflow: hidden; }
.crew-credential-modal { display: grid; height: 100%; min-height: 0; padding: 10px; grid-template-rows: minmax(0,1fr); }
.crew-credential-flipper { height: 100%; min-height: 0; }
.crew-credential-modal-footer { position: absolute; z-index: 15; right: 20px; bottom: 18px; padding: 0; }

@media (max-height: 780px) and (min-width: 901px) {
  .crew-credential-face-back { padding: 15px; gap: 8px; }
  .crew-credential-back-header { margin: -15px -15px 0; padding: 10px 20px; }
  .crew-card-site-logo { width: 42px; height: 42px; }
  .crew-credential-identity-panel { grid-template-columns: 125px 1fr; gap: 12px; }
  .crew-credential-identity-panel .crew-credential-modal-photo { width: 118px; height: 150px; }
  .crew-credential-identity-panel h2 { font-size: 1.85rem; }
  .crew-credential-identity-panel h3 { margin: 7px 0; padding-block: 4px; }
  .crew-credential-age { gap: 14px; }
  .crew-credential-panel > h3 { padding: 5px 10px; }
  .crew-credential-eligibility > div { padding: 9px; }
  .crew-credential-eligibility > div span { width: 37px; height: 37px; }
  .crew-credential-service { padding: 5px 9px; }
  .crew-credential-history ul,.crew-credential-notes ul { padding-top: 6px; padding-bottom: 6px; }
}

@media (max-width: 980px) {
  .crew-command-dashboard .crew-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .crew-command-grid,.crew-command-lists { grid-template-columns: 1fr; }
}

.settings-location-card { grid-column: 1 / -1; }
.settings-location-list { display: grid; padding-top: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.settings-location-list section { padding: 12px; border: 1px solid #b8d6de; border-radius: 8px; background: #f7fbfc; }
.settings-location-list section > strong { display: block; margin-bottom: 9px; color: var(--slate-navy); }
.settings-location-list section > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.settings-location-list section > header strong { color: var(--slate-navy); }

.availability-identity { display: grid; align-content: center; padding: 9px 12px; border: 1px solid #8dc8d1; border-radius: 8px; background: #e9f8fa; }
.availability-identity span { color: #526b7a; font-size: .72rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.availability-identity strong { color: #071f35; }
.availability-identity small { color: #087f91; font-weight: 700; }

body[data-page="notifications"] .page-section { border: 1px solid #b8d6de; border-top: 4px solid #1598a8; border-radius: 9px; background: #fff; }
body[data-page="notifications"] .page-section > .section-header { margin: -1px -1px 0; padding: 10px 14px; border-bottom: 1px solid #d7e6ea; background: #f7fbfc; }
body[data-page="notifications"] .page-section .dashboard-grid { display: grid; padding: 0; grid-template-columns: 1fr; gap: 0; }
body[data-page="notifications"] .notification-card { display: grid; min-height: 92px; margin: 0; padding: 11px 14px; border: 0; border-bottom: 1px solid #d7e6ea; border-left: 4px solid transparent; border-radius: 0; background: #fff; grid-template-columns: auto minmax(0,1fr) auto; grid-template-rows: auto auto auto; gap: 3px 12px; box-shadow: none; }
body[data-page="notifications"] .notification-card[data-notification-status="unread"] { border-left-color: #18a7b8; background: #f0fbfc; }
body[data-page="notifications"] .notification-card[data-notification-status="read"] { color: #526b7a; }
.shared-notification-message-rich { white-space: pre-line; }
body[data-page="notifications"] .notification-selection { grid-column: 1; grid-row: 1 / -1; align-self: center; }
body[data-page="notifications"] .notification-selection span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
body[data-page="notifications"] .notification-card > .section-header { display: flex; margin: 0; padding: 0; border: 0; background: transparent; grid-column: 2; grid-row: 1; justify-content: flex-start; gap: 8px; }
body[data-page="notifications"] .notification-card > .section-header time { font-size: .76rem; }
body[data-page="notifications"] .notification-card > h3 { margin: 1px 0; color: #071f35; font-size: .96rem; grid-column: 2; grid-row: 2; }
body[data-page="notifications"] .notification-card > p { margin: 0; color: #294b60; line-height: 1.35; grid-column: 2; grid-row: 3; }
body[data-page="notifications"] .notification-card-actions { align-self: center; justify-content: flex-end; grid-column: 3; grid-row: 1 / -1; gap: 6px; }
body[data-page="notifications"] .notification-card-actions button { padding: 7px 10px; border-color: #0f2942; background: #0f2942; color: #fff; font-size: .76rem; }

@media (max-width: 760px) {
  .crew-command-claim-row { grid-template-columns: 1fr; }
  body[data-page="notifications"] .notification-card { grid-template-columns: auto minmax(0,1fr); }
  body[data-page="notifications"] .notification-card-actions { grid-column: 2; grid-row: 4; justify-content: flex-start; }
}

/* Milestone 6.10 responsive rules remain last so legacy breakpoints cannot
   restore the former tall claim cards or three-column medium profile layout. */
.claim-history-card { min-height: 48px; padding-block: 5px; }
.claim-history-card-details {
  grid-template-columns: minmax(155px, .9fr) minmax(210px, 1.5fr) minmax(100px, .65fr) minmax(80px, .55fr) minmax(100px, auto);
}

@media (max-width: 900px) {
  body[data-page="profile"] .profile-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  body[data-page="profile"] .profile-details-grid { grid-template-columns: 1fr; }
}

/* Milestone 6.6 umpire experience polish. */
body[data-role="umpire"] .crew-command-dashboard { gap: var(--space-medium); }
.crew-command-grid-polished { grid-template-columns: 1fr; }
.crew-action-center-primary {
  border-top-color: var(--slate-navy, #0f2942);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.crew-action-center-primary > header { grid-column: 1 / -1; }
.crew-action-center-primary .crew-action-row { min-height: 58px; }
.crew-command-lists-polished { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr); }
.crew-command-lists-polished .crew-command-game-row {
  grid-template-columns: 120px 82px 76px minmax(190px, 1fr) auto;
  min-height: 48px;
  padding: var(--space-small) var(--space-medium);
}
.crew-command-lists-polished .crew-command-game-row > span { min-width: 0; }
.crew-command-lists-polished .crew-command-game-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-recent-notifications .shared-notification-row {
  align-items: center;
  display: grid;
  gap: var(--space-small);
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 48px;
  padding: var(--space-small) var(--space-medium);
  border: 0;
  border-bottom: 1px solid var(--slate-border, #d7e6ea);
  border-radius: 0;
  box-shadow: none;
}
.crew-recent-notifications .shared-notification-copy { min-width: 0; }
.crew-recent-notifications .shared-notification-copy h3,
.crew-recent-notifications .shared-notification-copy p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-recent-notifications .shared-notification-copy h3 { font-size: 0.85rem; }
.crew-recent-notifications .shared-notification-copy p,
.crew-recent-notifications .shared-notification-supporting,
.crew-recent-notifications .shared-notification-time { color: var(--slate-muted, #526b7a); font-size: 0.72rem; }
.crew-recent-notifications .shared-notification-time { grid-column: 1; }
.crew-recent-notifications .shared-notification-actions { grid-column: 2; grid-row: 1 / span 2; }

.claim-games-compact { padding: var(--space-card); }
.claim-games-compact .presentation-card-header-blue h2 { margin: 0; }
.claim-games-table { min-width: 900px; }
.claim-games-table th,
.claim-games-table td { height: 42px; padding-block: 2px; }
.claim-games-table td:last-child { text-align: right; }
.claim-games-table .button { min-height: 32px; padding: 3px 10px; }

.my-schedule-compact-table { min-width: 940px; }
.my-schedule-compact-table th,
.my-schedule-compact-table td { height: 48px; padding-block: var(--space-small); }
.my-schedule-compact-table td:last-child { text-align: right; }
.my-schedule-compact-table .status-badge { white-space: nowrap; }

body[data-page="game-hub"] .game-hub-umpire-summary { gap: var(--space-medium); }
body[data-page="game-hub"] .game-hub-umpire-details { gap: var(--space-small) var(--space-medium); }
body[data-page="game-hub"] .game-hub-umpire-details > div { padding: var(--space-small) 0; }

body[data-page="profile"] [data-testid="profile"] { display: grid; gap: var(--space-large); }
body[data-page="profile"] .profile-crew-card-preview,
body[data-page="profile"] .form-card { margin: 0; }
body[data-page="profile"] .form-card { display: grid; gap: var(--space-large); }
body[data-page="profile"] .form-grid { align-items: end; gap: var(--space-medium); }
body[data-page="profile"] .profile-credentials,
body[data-page="profile"] .settings-section { margin: 0; padding: var(--space-large); border: 1px solid var(--slate-border, #d7e6ea); border-radius: var(--presentation-radius-card); }
body[data-page="profile"] .form-actions { gap: var(--space-button); justify-content: flex-end; }

body[data-page="availability"] .availability-page { gap: var(--space-medium); }
body[data-page="availability"] .availability-form-card,
body[data-page="availability"] .availability-list-section { margin: 0; }
body[data-page="availability"] .availability-identity small { color: #07596b; }

@media (max-width: 820px) {
  .crew-action-center-primary { grid-template-columns: 1fr; }
  .crew-action-center-primary > header { grid-column: 1; }
  .crew-command-lists-polished { grid-template-columns: 1fr; }
  .crew-command-lists-polished .crew-command-game-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crew-command-lists-polished .crew-command-game-row .status-badge { justify-self: start; }
}

/* Milestone 6.3 Operations Center presentation. */
.operations-page-meta {
  align-items: center;
  display: flex;
  gap: var(--space-large);
  justify-content: space-between;
  min-height: 42px;
}
.operations-page-meta time {
  color: var(--operations-navy, #0f2942);
  font-size: 0.9rem;
  font-weight: 750;
}
.operations-page-meta .operations-attention-summary {
  align-items: center;
  background: #fff4ed;
  border: 1px solid #f7b27a;
  border-radius: 999px;
  color: #9c2a10;
  display: inline-flex;
  font-size: 0.875rem;
  margin: 0;
  min-height: 34px;
  padding: var(--space-small) var(--space-medium);
  text-align: right;
}

.operations-staffing-table { min-width: 1040px; }
.operations-staffing-table .operations-col-time { width: 9%; }
.operations-staffing-table .operations-col-level { width: 10%; }
.operations-staffing-table .operations-col-matchup { width: 28%; }
.operations-staffing-table .operations-col-location { width: 27%; }
.operations-staffing-table .operations-col-umpires { width: 26%; }
.operations-staffing-table th:nth-child(n) { width: auto; }
.operations-staffing-table th.operations-column-matchup { text-align: center; }
.operations-staffing-table td.operations-column-matchup { text-align: left; }
.operations-staffing-table th.operations-column-location,
.operations-staffing-table td.operations-column-location { text-align: center; }
.operations-staffing-table .operations-column-matchup,
.operations-staffing-table .operations-column-location {
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}
.operations-column-umpires { min-width: 240px; }
.operations-umpire-list { display: grid; gap: 3px; }
.operations-umpire-entry {
  align-items: baseline;
  display: flex;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}
.operations-umpire-entry > strong { color: var(--operations-navy, #0f2942); min-width: 24px; }
.operations-umpire-entry > span:not(.visually-hidden) { overflow: hidden; text-overflow: ellipsis; }
.operations-staffing-assignment[data-status="open"]::before { flex: 0 0 auto; }

@media (max-width: 700px) {
  .operations-page-meta { align-items: flex-start; flex-direction: column; gap: var(--space-small); }
  .operations-page-meta .operations-attention-summary { text-align: left; }
}

/* Milestone 6.8: crew, profile, and pilot-settings presentation polish. */
.crew-roster-list { align-items: stretch; }
.crew-credential-front { min-width: 0; padding: 11px 12px; }
.crew-credential-front-main { min-width: 0; }
.crew-credential-levels { align-items: center; gap: 5px; }
.crew-credential-levels i {
  display: inline-flex;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 8px;
  align-items: center;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}
.crew-credential-eligibility > div { align-content: center; align-items: center; }
.crew-credential-eligibility > div span {
  width: auto;
  min-width: 46px;
  max-width: 100%;
  height: auto;
  min-height: 40px;
  padding: 6px 9px;
  border-radius: 999px;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}
.crew-card-admin-dialog { overflow: auto; }
.crew-card-admin-form > header {
  position: sticky;
  z-index: 2;
  top: 0;
  margin: -18px -18px 0;
  padding: 16px 18px;
  background: #123b58;
  color: #fff;
}
.crew-card-admin-form > header h2,
.crew-card-admin-form > header span { color: #fff; }
.crew-card-admin-grid { align-items: start; gap: 14px; }
.crew-card-admin-grid > label { align-content: start; gap: 6px; }
.crew-card-admin-grid fieldset { padding: 12px; border: 1px solid #b8d6de; border-radius: 8px; background: #f7fbfc; }
.crew-card-admin-grid fieldset legend { padding-inline: 5px; color: #123b58; font-weight: 900; }
.crew-card-admin-grid .crew-admin-select-all { padding-right: 10px; border-right: 1px solid #b8d6de; color: #07596b; font-weight: 900; }
.crew-card-admin-form > footer { display: flex; padding-top: 4px; justify-content: flex-end; }

body[data-page="profile"] .page-section > .section-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--slate-border, #d7e6ea);
  border-radius: var(--presentation-radius-card) var(--presentation-radius-card) 0 0;
  background: linear-gradient(135deg, #123b58, #07596b);
}
body[data-page="profile"] .page-section > .section-header h2,
body[data-page="profile"] .page-section > .section-header p { margin: 0; color: #fff; }
body[data-page="profile"] .page-section > .section-header p { margin-top: 3px; opacity: .88; }
body[data-page="profile"] .profile-form-card { padding: 0; overflow: hidden; }
body[data-page="profile"] .profile-details-section { padding: var(--space-large); }
body[data-page="profile"] .profile-section-heading { margin: calc(-1 * var(--space-large)) calc(-1 * var(--space-large)) var(--space-large); padding: 11px var(--space-large); border-bottom: 1px solid #d7e6ea; background: #f0f7f8; }
body[data-page="profile"] .profile-section-heading h3,
body[data-page="profile"] .profile-section-heading p { margin: 0; }
body[data-page="profile"] .profile-section-heading p { margin-top: 3px; color: #526b7a; font-size: .88rem; }
body[data-page="profile"] .profile-details-grid > label { display: grid; min-width: 0; align-content: start; gap: 5px; color: #29465b; font-weight: 800; }
body[data-page="profile"] .profile-details-grid input,
body[data-page="profile"] .profile-details-grid select { width: 100%; min-width: 0; }
body[data-page="profile"] .profile-credentials,
body[data-page="profile"] .settings-section { margin-inline: var(--space-large); }
body[data-page="profile"] .form-actions { margin: 0; padding: 14px var(--space-large); border-top: 1px solid #d7e6ea; background: #f7fbfc; }

.settings-page { display: grid; gap: var(--space-large); }
.settings-page-header { padding: 16px 18px; border-top: 4px solid #22aabd; border-radius: var(--presentation-radius-card); background: #fff; }
.settings-page-header h2,
.settings-page-header p { margin: 0; }
.settings-page-header p { margin-top: 3px; color: #526b7a; }
.settings-card-grid { align-items: stretch; gap: var(--space-large); }
.settings-card { padding: 0; overflow: hidden; }
.settings-card > .page-section-header { margin: 0; padding: 11px 14px; }
.settings-card > .page-section-header h3,
.settings-card > .page-section-header p { margin: 0; color: #fff; }
.settings-card > .page-section-header p { margin-top: 2px; font-size: .82rem; opacity: .86; }
.settings-card > .settings-list { padding: 14px; align-content: start; }
.settings-location-card .settings-location-list { padding: 14px; }

@media (max-width: 720px) {
  .crew-credential-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
  .crew-credential-flipper { min-height: 0; }
  .crew-credential-face-back { overflow-y: auto; grid-template-columns: 1fr; grid-template-rows: auto; }
  .crew-credential-back-header,
  .crew-credential-identity-panel,
  .crew-credential-contact,
  .crew-credential-eligibility,
  .crew-credential-history,
  .crew-credential-notes { grid-column: 1; }
  .crew-credential-back-header { grid-template-columns: 1fr; gap: 8px; }
  .crew-credential-identity-panel { grid-template-columns: 100px minmax(0, 1fr); }
  .crew-credential-identity-panel .crew-credential-modal-photo { width: 92px; height: 118px; }
  .crew-credential-identity-panel h2 { font-size: 1.45rem; }
  .crew-credential-age { flex-wrap: wrap; gap: 10px 16px; }
  .crew-credential-dialog-actions { top: 18px; right: 18px; }
  .crew-credential-modal-footer { right: 16px; bottom: 14px; }
  .crew-card-admin-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .crew-card-admin-grid { grid-template-columns: 1fr; }
  .crew-admin-address,
  .crew-admin-history,
  .crew-admin-notes { grid-column: 1; }
  .crew-card-admin-grid fieldset { grid-column: 1; }
  body[data-page="profile"] .profile-details-section { padding: var(--space-medium); }
  body[data-page="profile"] .profile-section-heading { margin: calc(-1 * var(--space-medium)) calc(-1 * var(--space-medium)) var(--space-medium); padding-inline: var(--space-medium); }
  body[data-page="profile"] .profile-credentials,
  body[data-page="profile"] .settings-section { margin-inline: var(--space-medium); padding: var(--space-medium); }
  body[data-page="profile"] .form-actions { position: sticky; bottom: 0; z-index: 2; padding-inline: var(--space-medium); }
  .settings-card-grid { grid-template-columns: 1fr; }
  .settings-card > .page-section-header { align-items: flex-start; }
}

/* Milestone 6.9: umpire correction pass and readable narrow-window boundaries. */
.crew-action-center-primary { gap: 0; background: #fff; color: var(--slate-navy); }
.crew-action-center-primary > header { background: var(--slate-deep-teal); color: #fff; }
.crew-action-center-primary .crew-action-cell {
  display: flex;
  min-height: 92px;
  padding: 12px;
  border-right: 1px solid #9fc7cf;
  border-bottom: 0;
  background: #fff;
  color: var(--slate-navy);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.crew-action-center-primary .crew-action-cell:last-child { border-right: 0; }
.crew-action-center-primary .crew-action-cell:hover,
.crew-action-center-primary .crew-action-cell:focus-visible { background: #e9f8fa; }
.crew-action-center-primary .crew-action-cell > span { display: grid; justify-items: center; gap: 2px; }
.crew-action-center-primary .crew-action-cell small { color: #526b7a; }
.crew-action-center-primary .crew-action-cell > b {
  display: grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid #d92d20;
  border-radius: 50%;
  background: #fff;
  color: #d92d20;
  font-size: 1rem;
  line-height: 1;
  place-items: center;
}
.crew-action-center-primary .crew-returned-review { grid-column: 1 / -1; }

.crew-recent-notifications .shared-notification-copy p { color: #294b60; font-size: .78rem; }
.crew-recent-notifications .shared-notification-supporting,
.crew-recent-notifications .shared-notification-time:empty { display: none; }

.presentation-table-wrapper[tabindex="0"]:focus-visible { outline: 3px solid #22aabd; outline-offset: 2px; }
.presentation-table-centered th,
.presentation-table-centered td { text-align: center; vertical-align: middle; }
.presentation-table-centered td:last-child { text-align: center; }
.claim-games-compact { padding: 0; overflow: hidden; }
.claim-games-compact .presentation-table-wrapper { margin: 0; border: 0; border-radius: 0; }
.claim-games-table { min-width: 780px; table-layout: auto; }
.claim-games-table th,
.claim-games-table td { height: auto; padding: 2px 8px; line-height: 1.15; white-space: nowrap; }
.claim-games-table tbody tr { height: 42px; }
.claim-games-table .button { min-height: 30px; padding-block: 3px; }
.claim-games-table .status-badge { min-height: 26px; padding-block: 2px; }
.claim-games-table th:nth-child(1), .claim-games-table td:nth-child(1) { min-width: 105px; }
.claim-games-table th:nth-child(2), .claim-games-table td:nth-child(2) { min-width: 90px; }
.claim-games-table th:nth-child(4), .claim-games-table td:nth-child(4) { min-width: 210px; white-space: normal; }
.claim-games-table th:nth-child(5), .claim-games-table td:nth-child(5) { min-width: 90px; }
.my-schedule-compact-table { min-width: 940px; table-layout: auto; }
.my-schedule-compact-table th,
.my-schedule-compact-table td { text-align: center; vertical-align: middle; }
.my-schedule-compact-table td:last-child { text-align: center; }
.my-schedule-compact-table th:nth-child(4), .my-schedule-compact-table td:nth-child(4) { min-width: 190px; }
.my-schedule-compact-table th:nth-child(8), .my-schedule-compact-table td:nth-child(8) { min-width: 130px; }

body[data-page="profile"] .profile-credential-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-page="profile"] .profile-credential-grid > div { display: grid; min-width: 0; min-height: 88px; border: 1px solid #b8d6de; border-top: 4px solid #1598a8; border-left-width: 1px; border-radius: 8px; align-content: center; text-align: center; }
body[data-page="profile"] .profile-credential-grid > div > span { overflow-wrap: anywhere; }
body[data-page="profile"] .profile-credential-grid > div > strong { overflow-wrap: anywhere; }
body[data-page="profile"] [data-testid="profile-crew-card"] .crew-credential-front-main { min-height: 64px; }

@media (max-width: 900px) {
  body[data-page="profile"] .profile-credential-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .crew-action-center-primary { grid-template-columns: 1fr; }
  .crew-action-center-primary > header,
  .crew-action-center-primary .crew-returned-review { grid-column: 1; }
  .crew-action-center-primary .crew-action-cell { min-height: 74px; border-right: 0; border-bottom: 1px solid #9fc7cf; }
  .crew-action-center-primary .crew-action-cell:last-child { border-bottom: 0; }
  body[data-page="profile"] .profile-credential-grid { grid-template-columns: 1fr; }
}

/* Milestone 6.10: final admin presentation corrections. */
.workbench-game-dialog .game-hub-command-summary-header {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, auto) minmax(150px, 1fr);
  align-items: center;
  gap: 12px;
}
.workbench-game-dialog .game-hub-command-title { justify-self: start; text-align: left; }
.workbench-game-dialog .game-hub-command-lifecycle { justify-self: center; text-align: center; }
.workbench-game-dialog .game-hub-command-assignment { justify-self: end; text-align: right; }
.game-hub-command-lifecycle,
.game-hub-command-assignment { display: flex; align-items: center; }

.claim-history-section { padding: 0; overflow: hidden; }
.claim-history-section > summary { min-height: 42px; margin: 0; padding: 7px 12px; border-bottom: 1px solid #d7e6ea; background: #f7fbfc; }
.claim-history-section:not([open]) > summary { margin: 0; padding: 7px 12px; border-bottom: 0; }
.claim-history-list { display: grid; gap: 0; }
.claim-history-card {
  display: grid;
  min-width: 760px;
  min-height: 52px;
  padding: 7px 12px;
  border: 0;
  border-bottom: 1px solid #d7e6ea;
  border-left: 4px solid #168fa1;
  border-radius: 0;
  gap: 3px;
}
.claim-history-card:last-child { border-bottom: 0; }
.claim-history-card-details {
  display: grid;
  grid-template-columns: minmax(155px, .9fr) minmax(210px, 1.5fr) minmax(100px, .65fr) minmax(80px, .55fr) minmax(100px, auto);
  align-items: center;
  gap: 10px;
}
.claim-history-card-details > span:not(.claim-history-status) { display: flex; min-width: 0; align-items: baseline; gap: 5px; }
.claim-history-card-details strong { flex: 0 0 auto; color: #526b7a; font-size: .66rem; text-decoration: none; text-transform: uppercase; }
.claim-history-card-details span span { min-width: 0; overflow: hidden; font-size: .82rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.claim-history-card .claim-history-status { position: static; justify-self: end; transform: none; text-transform: capitalize; }
.claim-history-supporting { color: #526b7a; font-size: .7rem; line-height: 1.2; }
.claim-history-section { overflow-x: auto; }
.claim-history-section:focus-visible { outline: 3px solid #22aabd; outline-offset: 2px; }

body[data-page="profile"] .profile-details-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
body[data-page="profile"] .profile-details-grid > label {
  min-height: 92px;
  padding: 10px 12px;
  border: 1px solid #b8d6de;
  border-top: 4px solid #1598a8;
  border-radius: 8px;
  background: #fff;
}
body[data-page="profile"] .profile-details-grid > label input,
body[data-page="profile"] .profile-details-grid > label select { margin-top: auto; }

@media (max-width: 900px) {
  body[data-page="profile"] .profile-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .workbench-game-dialog .game-hub-command-summary-header { grid-template-columns: 1fr; justify-items: start; }
  .workbench-game-dialog .game-hub-command-title,
  .workbench-game-dialog .game-hub-command-lifecycle,
  .workbench-game-dialog .game-hub-command-assignment { justify-self: start; text-align: left; }
  body[data-page="profile"] .profile-details-grid { grid-template-columns: 1fr; }
}
.crew-credential-identity-panel { display: grid; grid-template-columns: 175px 1fr; gap: 18px; align-items: center; }.crew-credential-identity-panel .crew-credential-modal-photo { width: 165px; height: 210px; }.crew-credential-photo-block { position: relative; }.crew-credential-photo-block > b { position: absolute; right: 5px; bottom: -5px; min-width: 92px; padding: 7px; text-align: center; }.crew-credential-identity-panel h2 { margin: 0; font-size: 2.5rem; line-height: .95; text-transform: uppercase; }.crew-credential-identity-panel h3 { margin: 12px 0; padding-block: 7px; border-block: 2px solid #168fa1; color: #087f91; text-transform: uppercase; }
.crew-credential-age { display: flex; gap: 22px; }.crew-credential-age div { display: grid; }.crew-credential-age dt { font-size: .7rem; font-weight: 900; text-transform: uppercase; }.crew-credential-age dd { margin: 0; font-size: 1.2rem; font-weight: 900; }
.crew-credential-panel { overflow: hidden; border: 1px solid #8da8af; border-radius: 8px; background: rgba(255,255,255,.82); }.crew-credential-panel > h3 { margin: 0; padding: 7px 12px; background: linear-gradient(110deg, #07596b, #0b7784); color: #fff; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; }
.crew-credential-contact { grid-column: 2 / -1; }.crew-credential-contact dl { display: grid; height: calc(100% - 33px); margin: 0; padding: 3px 14px; grid-template-rows: repeat(6, minmax(0, 1fr)); }.crew-credential-contact dl div { display: grid; min-height: 0; padding: 3px; border-bottom: 1px dotted #a9b8bc; grid-template-columns: 155px 1fr; align-items: center; gap: 10px; }.crew-credential-contact dl div:last-child { border-bottom: 0; }.crew-credential-contact dt { position: relative; display: flex; min-height: 26px; padding-right: 15px; align-items: center; font-size: .7rem; font-weight: 900; text-transform: uppercase; }.crew-credential-contact dt::after { position: absolute; top: 12.5%; right: 0; width: 2px; height: 75%; background: #78a9b4; content: ""; }.crew-credential-contact dd { display: flex; margin: 0; padding-left: 6px; align-items: center; overflow: hidden; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.crew-credential-eligibility { grid-column: 1; }.crew-credential-eligibility > h3,.crew-credential-history > h3,.crew-credential-notes > h3 { text-align: center; }.crew-credential-eligibility > div { display: flex; padding: 15px; flex-wrap: wrap; justify-content: center; gap: 7px; }.crew-credential-eligibility > div span { display: grid; width: 45px; height: 45px; border: 2px solid #07596b; border-radius: 50%; background: linear-gradient(#24b6c3,#087283); color: #fff; place-items: center; font-size: .72rem; font-weight: 900; }
.crew-credential-history { grid-column: 2; }.crew-credential-service { display: flex; padding: 8px 12px; align-items: center; justify-content: space-between; background: #eef5f6; font-weight: 900; text-transform: uppercase; }.crew-credential-service b { display: grid; width: 38px; height: 34px; background: #071f35; color: #fff; place-items: center; font-size: 1.25rem; }.crew-credential-history ul { margin: 0; padding: 10px 12px 10px 30px; }.crew-credential-history li { padding: 4px 0; border-bottom: 1px dotted #9eafb4; }.crew-credential-history li b { margin-right: 6px; color: #09899b; }.crew-credential-history li small { display: block; margin-left: 2px; }
.crew-credential-notes { grid-column: 3; }.crew-credential-notes p { padding: 14px; line-height: 1.55; }.crew-credential-notes ul { margin: 0; padding: 14px 14px 14px 34px; line-height: 1.55; }.crew-credential-notes li + li { margin-top: 5px; }
.crew-credential-modal-footer { position: relative; z-index: 10; display: flex; padding: 8px 14px 0; justify-content: flex-end; }

.crew-card-admin-dialog { width: min(900px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); padding: 0; border: 1px solid #6f9ca7; border-radius: 12px; }
.crew-card-admin-form { display: grid; padding: 18px; gap: 14px; }.crew-card-admin-form > header { display: flex; align-items: start; justify-content: space-between; }.crew-card-admin-form h2 { margin: 2px 0; }.crew-card-admin-form header span { color: #087f91; font-weight: 900; text-transform: uppercase; }.crew-card-admin-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }.crew-card-admin-grid > label { display: grid; gap: 4px; font-weight: 800; }.crew-card-admin-grid input,.crew-card-admin-grid select,.crew-card-admin-grid textarea { width: 100%; }.crew-card-admin-grid fieldset { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 8px; }.crew-card-admin-grid fieldset label { display: flex; align-items: center; gap: 4px; }.crew-admin-address,.crew-admin-history,.crew-admin-notes { grid-column: span 2; }.crew-admin-history textarea,.crew-admin-notes textarea { min-height: 95px; }.crew-admin-active { align-self: end; }

@media (prefers-reduced-motion: reduce) { .crew-credential-flipper { transition: none; } }
@media (max-width: 900px) { .crew-credential-flipper { min-height: 900px; }.crew-credential-face-back { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto; }.crew-credential-back-header { grid-template-columns: 1fr 1fr; }.crew-credential-back-header p { display: none; }.crew-credential-identity-panel { grid-column: 1; }.crew-credential-contact { grid-column: 2; }.crew-credential-eligibility { grid-column: 1; }.crew-credential-history { grid-column: 2; }.crew-credential-notes { grid-column: 1 / -1; }.crew-card-admin-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.workbench-game-dialog {
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid #75aeba;
  border-radius: 10px;
}
.workbench-game-dialog::backdrop { background: rgba(7, 37, 57, 0.68); }
.workbench-game-dialog > article { display: grid; padding: 16px; gap: 12px; }
.workbench-game-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.workbench-game-dialog-header h2 { margin: 2px 0 0; }
.workbench-dialog-callout {
  display: flex;
  padding: 10px 12px;
  border: 1px solid #e2a23b;
  border-radius: 7px;
  background: #fff8e7;
  justify-content: space-between;
  gap: 12px;
}
.workbench-dialog-callout > div:first-child { display: grid; gap: 3px; }
.workbench-claim-actions { display: flex; gap: 7px; align-items: center; }
.workbench-dialog-review { padding: 12px; border: 2px solid #22aabd; border-radius: 8px; background: #f4fcfd; }

.workbench-notification-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid #75aeba;
  border-radius: 10px;
}
.workbench-notification-dialog::backdrop { background: rgba(7, 37, 57, 0.64); }
.workbench-notification-detail,
.workbench-game-notification { display: grid; padding: 18px; gap: 14px; }
.workbench-notification-detail header,
.workbench-game-notification header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.workbench-notification-detail h2,
.workbench-game-notification h2 { margin: 2px 0 0; }
.workbench-final-score { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.workbench-final-score span { display: flex; padding: 14px; border-radius: 6px; background: linear-gradient(145deg, #07596b, #087f91); color: #fff; justify-content: space-between; }
.workbench-final-score strong { font-size: 1.5rem; }
.workbench-game-facts { display: grid; margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.workbench-game-facts > div { padding: 9px; border: 1px solid #d8e6ea; border-radius: 6px; }
.workbench-game-facts dt { color: #526b7a; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.workbench-game-facts dd { margin: 3px 0 0; font-weight: 800; }

@media (max-width: 800px) {
  .workbench-status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workbench-tools { align-items: stretch; flex-direction: column; }
  .workbench-tool-actions { justify-content: flex-start; }
  .workbench-notification-row { grid-template-columns: 100px minmax(110px, 0.7fr) minmax(160px, 1.3fr) 45px; }
  .workbench-notification-row > strong { display: none; }
  .game-hub-crew-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .claim-queue-details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .claim-history-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .claim-history-card-details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  body[data-page="assigner-workbench"] .workbench-grid { grid-template-columns: 1fr; }
  .workbench-notification-row { grid-template-columns: 90px minmax(0, 1fr) 42px; }
  .workbench-notification-change { grid-column: 2 / 4; }
  .workbench-notification-state { grid-column: 3; grid-row: 1; }
  .workbench-notification-type { display: none; }
  .workbench-game-facts { grid-template-columns: 1fr; }
  .workbench-mini-game .workbench-item-action { grid-template-columns: 68px minmax(0, 1fr); }
  .workbench-mini-game-crew { grid-column: 2; }
  .game-hub-crew-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .claim-queue-card-header { grid-template-columns: auto minmax(0, 1fr); }
  .claim-queue-actions { grid-column: 1 / -1; }
  .claim-history-card-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body[data-page="dashboard"] .dashboard-brief-grid {
    gap: 1px;
    border-radius: 7px;
    background: #b9d8df;
  }

  body[data-page="dashboard"] .dashboard-brief-metric {
    border-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="dashboard"] .dashboard-brief-metric {
    transition: none;
  }
}

/* Desktop Dashboard density refinement. */
@media (min-width: 1001px) {
  body[data-page="dashboard"] .content-area {
    padding-block: 12px;
  }

  body[data-page="dashboard"] .dashboard-welcome {
    min-height: 42px;
    margin-bottom: 7px;
    padding: 0 2px 6px;
  }

  body[data-page="dashboard"] .dashboard-welcome h1 {
    margin-top: 0;
    font-size: 1.45rem;
    line-height: 1.05;
  }

  body[data-page="dashboard"] .dashboard-welcome-tools {
    gap: 8px;
  }

  body[data-page="dashboard"] .dashboard-notification-bell {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0 8px;
  }

  body[data-page="dashboard"] .dashboard-entry-main {
    gap: 9px;
  }

  body[data-page="dashboard"] .dashboard-brief-heading {
    margin-bottom: 5px;
  }

  body[data-page="dashboard"] .dashboard-brief-heading h2 {
    margin-top: 0;
  }

  body[data-page="dashboard"] .dashboard-brief-metric {
    min-height: 62px;
    padding: 6px 8px;
  }

  body[data-page="dashboard"] .dashboard-brief-metric strong {
    font-size: 1.42rem;
  }

  body[data-page="dashboard"] .dashboard-brief-actions {
    margin-top: 5px;
  }

  body[data-page="dashboard"] .dashboard-brief-actions .button {
    min-height: 32px;
    padding-block: 0.35rem;
  }

  body[data-page="dashboard"] .dashboard-today-games {
    padding: 7px 13px 9px;
  }

  body[data-page="dashboard"] .dashboard-today-games .dashboard-card-header {
    margin-bottom: 5px;
  }

  body[data-page="dashboard"] .dashboard-today-header {
    padding: 5px 8px;
  }

  body[data-page="dashboard"] .dashboard-today-row {
    min-height: 38px;
    padding: 7px 8px;
  }

  body[data-page="dashboard"] .dashboard-game-status {
    padding: 3px 7px;
  }

  body[data-page="dashboard"] .dashboard-entry-activity {
    margin-top: 9px;
  }

  body[data-page="dashboard"] .dashboard-entry-activity .dashboard-card {
    padding: 10px 13px;
  }

  body[data-page="dashboard"] .dashboard-entry-activity .card-header {
    margin-bottom: 5px;
  }

  body[data-page="dashboard"] .assignment-activity-item {
    min-height: 36px;
    padding-block: 6px;
  }

  body[data-page="dashboard"] .dashboard-brief-heading h2 {
    font-size: 1.45rem;
    line-height: 1.05;
  }
}

.workbench-open-positions {
  display: grid;
  gap: 10px;
}

.workbench-open-positions-header {
  display: flex;
  padding: 14px 16px;
  border-top: 4px solid var(--slate-teal);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.workbench-open-positions-header h2,
.workbench-open-positions-header p {
  margin: 0;
}

.workbench-open-positions-header p {
  margin-top: 3px;
  color: var(--slate-muted);
}

.workbench-open-table-wrap {
  overflow: hidden;
  border: 1px solid var(--slate-border);
  border-radius: 9px;
  background: #fff;
}

.workbench-open-table {
  width: 100%;
  border-collapse: collapse;
}

.workbench-open-table th {
  background: #eaf6f8;
  color: #405d70;
}

.workbench-open-table td,
.workbench-open-table th {
  padding: 8px 10px;
  border-bottom: 1px solid #dce8ec;
  text-align: left;
}

.workbench-open-table tbody tr:hover {
  background: #eff9fa;
}

.workbench-open-position-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

@media (max-width: 760px) {
  .workbench-open-positions-header {
    align-items: stretch;
    flex-direction: column;
  }

  .workbench-open-table-wrap {
    overflow-x: auto;
  }

  .workbench-open-table {
    min-width: 760px;
  }
}
.role-switcher[hidden] {
  display: none;
}

/* Milestone 6.2 Game Hub presentation. */
.game-hub-admin-heading { margin: var(--space-small) 0; }
.game-hub-admin-heading h1 {
  color: var(--slate-navy, #0f2942);
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1.15;
  margin: 0;
}

.game-hub-command-layout {
  align-items: start;
  display: grid;
  gap: var(--space-card);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}
.game-hub-command-summary { display: grid; grid-column: 1; grid-template-columns: minmax(0, 1fr) auto; }
.game-hub-command-summary-header {
  align-items: center;
  display: flex;
  gap: var(--space-medium);
  grid-column: 1 / -1;
  justify-content: space-between;
}
.game-hub-command-status { align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
.game-hub-command-summary dl {
  gap: var(--space-medium) var(--space-large);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-large);
}
.game-hub-command-summary dl > div {
  background: transparent;
  border-bottom: 1px solid var(--slate-border, #d7e6ea);
  color: var(--slate-navy, #0f2942);
  padding: var(--space-medium) 0;
}
.game-hub-command-summary dl > div:nth-child(3) { grid-column: 1 / -1; }
.game-hub-command-summary dt { color: var(--slate-muted, #526b7a); }
.game-hub-command-summary dd { font-size: 1rem; }
.game-hub-command-complete { grid-column: 2; margin-top: var(--space-medium); }
.game-hub-command-crew { grid-column: 2; grid-row: 1 / span 2; }
.game-hub-command-contact { grid-column: 1; }
.game-hub-command-slots { grid-template-columns: 1fr; gap: var(--space-medium); }
.game-hub-command-slot { min-height: 76px; padding: var(--space-medium); }

.game-hub-notes-dialog { padding: 0 var(--space-large) var(--space-large); }
.game-hub-notes-dialog header { margin-inline: calc(-1 * var(--space-large)); padding: var(--space-large); }
.game-hub-admin-notes { display: grid; gap: var(--space-medium); padding-top: var(--space-large); }
.game-hub-admin-notes p { margin: 0; padding-bottom: var(--space-medium); }
.game-hub-admin-notes .presentation-empty-state { margin: var(--space-medium) 0 0; padding: var(--space-large); }

.game-hub-umpire-summary { display: grid; gap: var(--space-large); }
.game-hub-umpire-status-row {
  align-items: center;
  display: grid;
  gap: var(--space-medium);
  grid-template-columns: auto auto minmax(0, 1fr);
}
.game-hub-umpire-status-row .game-hub-weather { justify-self: end; text-align: right; }
.game-hub-umpire-details { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.game-hub-umpire-details > div { min-width: 0; }
.game-hub-umpire-details strong { overflow-wrap: anywhere; }

@media (max-width: 800px) {
  .game-hub-command-layout { grid-template-columns: 1fr; }
  .game-hub-command-summary,
  .game-hub-command-crew,
  .game-hub-command-contact { grid-column: 1; grid-row: auto; }
  .game-hub-command-summary-header { align-items: flex-start; flex-direction: column; }
  .game-hub-command-status { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .game-hub-command-summary { grid-template-columns: 1fr; }
  .game-hub-command-summary dl,
  .game-hub-umpire-details { grid-template-columns: 1fr; }
  .game-hub-command-summary dl > div:nth-child(3) { grid-column: 1; }
  .game-hub-command-complete { grid-column: 1; justify-self: start; }
  .game-hub-umpire-status-row { grid-template-columns: 1fr; }
  .game-hub-umpire-status-row .game-hub-weather { justify-self: start; text-align: left; }
}

/* Milestone 6.1 shared presentation tokens and opt-in primitives. */
:root {
  --space-small: 0.375rem;
  --space-medium: 0.75rem;
  --space-large: 1.25rem;
  --space-section: 2rem;
  --space-card: 1.25rem;
  --space-button: 0.5rem;
  --presentation-radius-card: 14px;
  --presentation-shadow-card: 0 5px 16px rgba(15, 39, 66, 0.07);
  --presentation-table-header-height: 44px;
  --presentation-table-row-height: 48px;
}

.space-small { gap: var(--space-small); }
.space-medium { gap: var(--space-medium); }
.space-large { gap: var(--space-large); }
.section-spacing { margin-block-end: var(--space-section); }
.card-spacing { gap: var(--space-card); }
.button-spacing { gap: var(--space-button); }

.presentation-card {
  border-radius: var(--presentation-radius-card);
  box-shadow: var(--presentation-shadow-card);
  padding: var(--space-card);
}

.presentation-card-header-blue {
  background: var(--slate-navy, #0f2942);
  color: #fff;
  margin: calc(-1 * var(--space-card));
  margin-bottom: var(--space-card);
  padding: var(--space-medium) var(--space-card);
}

.presentation-card-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-button);
  margin-top: var(--space-large);
}

.presentation-table { border-collapse: collapse; width: 100%; }
.presentation-table th { height: var(--presentation-table-header-height); }
.presentation-table td { height: var(--presentation-table-row-height); }
.presentation-table th,
.presentation-table td { padding: var(--space-medium); vertical-align: middle; }
.presentation-table tbody tr:not([data-row-action]):hover { background: #f8fafc; }
.presentation-table [data-row-action] { cursor: pointer; }
.table-align-start { text-align: left; }
.table-align-center { text-align: center; }
.table-align-end { text-align: right; }
.table-action-cell { display: flex; flex-wrap: wrap; gap: var(--space-button); justify-content: flex-end; }

body[data-page="notifications"] .shared-notification-row {
  align-items: center;
  display: grid;
  gap: var(--space-small) var(--space-medium);
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  min-height: 48px;
  padding: var(--space-small) var(--space-medium);
}
body[data-page="notifications"] .shared-notification-copy { grid-column: 2; min-width: 0; }
body[data-page="notifications"] .shared-notification-copy h3,
body[data-page="notifications"] .shared-notification-copy p { margin: 0; }
body[data-page="notifications"] .shared-notification-copy h3 { font-size: 0.9rem; line-height: 1.15; }
body[data-page="notifications"] .shared-notification-copy p {
  font-size: 0.82rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="notifications"] .shared-notification-supporting {
  color: var(--slate-muted, #526b7a);
  display: block;
  font-size: 0.72rem;
  line-height: 1.15;
  margin-top: 2px;
}
body[data-page="notifications"] .shared-notification-time { grid-column: 3; font-size: 0.75rem; white-space: nowrap; }
body[data-page="notifications"] .shared-notification-actions { grid-column: 4; grid-row: 1; }
body[data-page="notifications"] .notification-card { min-height: 48px; padding: var(--space-small) var(--space-medium); }
body[data-page="notifications"] .notification-card:hover { cursor: default; }
body[data-page="notifications"] .notification-center-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-button);
}

.nav-notifications-link { align-items: center; display: flex; justify-content: space-between; gap: 8px; }
.sidebar-notification-badge {
  align-items: center;
  background: #d92d20;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 900;
  justify-content: center;
  line-height: 1;
  min-height: 22px;
  min-width: 22px;
  padding: 3px 6px;
}
.sidebar-notification-badge[hidden] { display: none; }

@media (max-width: 760px) {
  body[data-page="notifications"] .shared-notification-row { grid-template-columns: auto minmax(0, 1fr); }
  body[data-page="notifications"] .shared-notification-copy,
  body[data-page="notifications"] .shared-notification-time,
  body[data-page="notifications"] .shared-notification-actions { grid-column: 2; }
  body[data-page="notifications"] .shared-notification-copy p { white-space: normal; }
  body[data-page="notifications"] .shared-notification-time { grid-row: 2; }
  body[data-page="notifications"] .shared-notification-actions { grid-row: 3; justify-content: flex-start; }
}

/* Milestone 6.10 final cascade guard. */
.claim-history-card.shared-notification-row.presentation-card {
  min-height: 48px;
  padding: 4px 8px;
}
.claim-history-card-details {
  grid-template-columns: minmax(155px, .9fr) minmax(210px, 1.5fr) minmax(100px, .65fr) minmax(80px, .55fr) minmax(100px, auto);
}

@media (max-width: 900px) {
  body[data-page="profile"] .profile-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  body[data-page="profile"] .profile-details-grid { grid-template-columns: 1fr; }
}
.account-security-page { max-width: 620px; margin-inline: auto; }
.account-security-page form, .account-security-dialog form { display: grid; gap: 14px; }
.account-security-page label, .account-security-dialog label { display: grid; gap: 6px; font-weight: 700; }
.account-security-dialog { width: min(520px, calc(100vw - 28px)); border: 0; border-radius: 14px; padding: 24px; box-shadow: 0 24px 60px rgba(15,39,66,.28); }
.account-security-dialog::backdrop { background: rgba(15,23,42,.58); }
.account-security-admin-row { display: grid; gap: 10px; }

/* Milestone 7.6: shared responsive and mobile readiness guardrails. */
@media (max-width: 1000px) {
  html { font-size: 16px; }
  .app-shell, .main-content, .content-area, .page-wrapper, .panel, .card { min-width: 0; }
  .sidebar { padding: 12px 14px; }
  .sidebar .brand { margin-bottom: 12px; }
  .nav-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .nav-group { min-width: 0; }
  .nav-group-toggle, .nav-link { width: 100%; min-height: 44px; }
  .topbar { padding: 14px 18px; }
  .content-area { width: 100%; padding: 18px; }
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .operations-detail-dialog, .workbench-game-dialog, .workbench-notification-dialog,
  .game-hub-crew-picker, .game-hub-completion-dialog, .game-hub-decline-dialog,
  .account-security-dialog, .crew-card-admin-dialog {
    max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px);
    overflow: auto; overscroll-behavior: contain;
  }
  .table-wrapper, .responsive-table, .table-container, .presentation-table-wrapper,
  .schedule-table-wrap, .schedule-table-wrapper, .my-schedule-table-wrapper,
  .claims-queue-table-wrapper, .claim-history-section, .review-queue-table-wrapper,
  .report-table-wrapper, .report-detail-table-wrapper, .operations-staffing-table-wrap,
  .workbench-open-table-wrap {
    max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain;
    scrollbar-gutter: stable; -webkit-overflow-scrolling: touch;
  }
  .table-wrapper:focus-visible, .responsive-table:focus-visible, .table-container:focus-visible,
  .presentation-table-wrapper:focus-visible, .schedule-table-wrap:focus-visible,
  .report-table-wrapper:focus-visible, .operations-staffing-table-wrap:focus-visible {
    outline: 3px solid #147d92; outline-offset: 2px;
  }
  table th { text-align: center; }
  table th, table td { min-height: 48px; vertical-align: middle; }
}

@media (max-width: 600px) {
  body { overflow-x: hidden; }
  .sidebar { padding: 10px 12px; }
  .sidebar .brand { gap: 10px; }
  .sidebar .brand-icon { width: 40px; height: 40px; }
  .sidebar .brand h1 { font-size: 1.2rem; }
  .sidebar .brand p { margin-block: 0; font-size: .75rem; }
  .nav-menu { grid-template-columns: 1fr; gap: 6px; }
  .nav-group-toggle { padding: 8px 10px; }
  .nav-group-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 6px; }
  .nav-link { padding: 9px 10px; overflow-wrap: anywhere; font-size: .9rem; }
  .topbar { gap: 8px; padding: 12px 14px; }
  .topbar #page-title { font-size: 1.35rem; line-height: 1.2; overflow-wrap: anywhere; }
  .topbar p { font-size: .875rem; }
  .content-area { padding: 12px; }
  .page-wrapper > section, .panel, .card { max-width: 100%; }
  .card { padding: 14px; }
  .card > header, .panel > header, .presentation-card > header,
  .form-actions, .dialog-actions, dialog footer { align-items: stretch; flex-wrap: wrap; }
  button, .button, .primary, .secondary, .primary-btn, .secondary-btn,
  .primary-button, .secondary-button, input, select, textarea { max-width: 100%; }
  button, .button, .primary, .secondary, .primary-btn, .secondary-btn,
  .primary-button, .secondary-button, input:not([type="checkbox"]):not([type="radio"]), select { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { min-width: 22px; min-height: 22px; }
  dialog:not(.crew-credential-dialog) {
    width: calc(100vw - 16px); max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px); margin: auto; padding: 16px;
  }
  dialog .form-actions, dialog footer { display: flex; gap: 8px; }
  dialog .form-actions > button, dialog footer > button { flex: 1 1 150px; }
  .status-pill, .status-badge, [class*="status-badge"], [class*="status-pill"] {
    max-width: 100%; line-height: 1.25; text-align: center; white-space: normal;
  }
  .account-registration .card, .account-security-page { width: 100%; max-width: 100%; }
  .account-registration .form-actions, .account-security-page .form-actions { display: grid; grid-template-columns: 1fr; }
  .operations-status-strip, .workbench-status-strip { overflow-x: auto; scroll-snap-type: x proximity; }
  .operations-status-metric, .workbench-status-strip > * { scroll-snap-align: start; }
}

@media (max-width: 360px) {
  .nav-group-items { grid-template-columns: 1fr; }
  .content-area { padding: 10px; }
  .card { padding: 12px; }
  .operations-status-strip { grid-template-columns: 1fr 1fr; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .sidebar .brand { display: none; }
  .sidebar { max-height: 46dvh; overflow-y: auto; }
  dialog { max-height: calc(100dvh - 12px) !important; }
}