:root {
  /* Real Spectrum 2 dark-mode gray scale, pulled directly from
     adobe/spectrum-design-data (packages/tokens/src/color-palette.json,
     "dark" set) -- not approximated. */
  --gray-50: rgb(17, 17, 17);
  --gray-75: rgb(34, 34, 34);
  --gray-100: rgb(44, 44, 44);
  --gray-200: rgb(50, 50, 50);
  --gray-300: rgb(57, 57, 57);
  --gray-600: rgb(138, 138, 138);
  --gray-900: rgb(242, 242, 242);

  --bg: var(--gray-50);
  --surface: var(--gray-75);
  --surface-2: var(--gray-100);
  --border: var(--gray-300);
  --text: var(--gray-900);
  --text-dim: var(--gray-600);

  /* Adobe's actual brand red, from the same corner-mark logo used in the
     header (adobe/react-spectrum's .storybook/logo-dark.svg). */
  --accent: #fa0c00;
  --accent-ink: #ffffff;
  --floater: #e58b1e;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.55);

  --content-max: 640px;

  font-family: "Adobe Clean", "Adobe Clean VF", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (min-width: 900px) {
  :root { --content-max: 1400px; }
}

* { box-sizing: border-box; }

/* Any element toggled via the `hidden` attribute must actually hide,
   regardless of a component's own `display` rule (flex/grid declarations
   otherwise beat the browser's default [hidden]{display:none} on
   specificity ties -- this has bitten the modal, the shift-change window
   row, and the admin chat panel; fixing it once here instead of per
   component). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

#app, #admin-app {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 20px 20px 96px;
}

/* ---- Header / branding ---- */

/* Full-bleed bar (breaks out of #app's max-width via the classic
   100vw/-50vw technique) so desktop gets a proper header band instead of
   small left-aligned text floating on an otherwise empty row -- the
   .header-inner child re-applies the page's max-width/centering so its
   content still lines up with the rest of the page. */
.app-header {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-bottom: 20px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border-bottom: 3px solid var(--accent);
}

.header-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* Live/upcoming/complete status pill -- desktop only; mobile's header stays
   as compact as before since staff mostly hit this on phones. */
.header-status { display: none; }
@media (min-width: 900px) {
  .header-status {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    white-space: nowrap;
  }
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-dim);
}
.status-dot--live {
  background: #2ecc71;
  animation: status-pulse 2s infinite;
}
.status-dot--upcoming { background: var(--floater); }
.status-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.status-text--live { color: var(--text); }

@keyframes status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.brand-adobe-logo { height: 24px; width: auto; display: block; flex-shrink: 0; }
.brand-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
}
.brand-ibc-logo { height: 44px; width: auto; display: block; }

.app-header h1 {
  margin: 0 0 2px;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.app-sub { margin: 0; color: var(--text-dim); font-size: 15px; }

.hint { color: var(--text-dim); font-size: 14px; }

.toggle {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 20px;
  max-width: 480px;
}
.toggle-btn {
  flex: 1;
  padding: 11px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.toggle-btn.toggle-active { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-1); }

.panel-hidden { display: none; }

.name-picker { margin-bottom: 20px; max-width: 480px; }
.name-label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; font-weight: 600; }
.name-input-wrap { position: relative; }
.name-input {
  width: 100%;
  padding: 13px 36px 13px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.15s ease;
}
.name-input:focus { outline: none; border-color: var(--accent); }
.name-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
}
.name-suggestions {
  position: absolute;
  z-index: 10;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  list-style: none;
  margin: 0;
  padding: 4px;
}
.name-option { padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; }
.name-option:hover, .name-option.name-focused { background: var(--surface); }

/* ---- My Schedule ---- */

.my-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: start;
}

.day-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}
.day-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.day-name { font-weight: 700; font-size: 15px; }
.today-pill {
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}

.slot {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-1);
}
.slot:last-child { margin-bottom: 0; }
.slot-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.slot-floater { background: var(--gray-300); }
.slot-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.slot-station { font-weight: 600; }
.slot-time { color: var(--text-dim); font-size: 13px; }
.now-badge {
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}
.floater-label { color: var(--floater); font-size: 12px; margin-top: 4px; font-weight: 600; }

.slot-request-btn {
  margin-top: 10px;
  padding: 7px 14px;
  background: var(--gray-200);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.slot-request-btn:hover { background: var(--gray-300); border-color: var(--accent); }

/* ---- Who's On Now ---- */

.day-picker { display: flex; gap: 8px; margin-bottom: 16px; max-width: 640px; }
.day-btn {
  flex: 1;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.day-btn-active { background: var(--surface-2); color: var(--text); border-color: var(--accent); }

.slot-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.nav-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  font-size: 18px;
  cursor: pointer;
}
.nav-btn:not([disabled]):hover { border-color: var(--accent); }
.nav-btn[disabled] { opacity: 0.3; cursor: default; }
.slot-label { font-weight: 700; font-size: 16px; }

.stations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.station-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow-1);
}
.station-name { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 8px; font-weight: 700; }
.station-people { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
}
.chip-link { cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.chip-link:hover { background: var(--gray-200); border-color: var(--accent); }
.chip-floater { border-color: var(--floater); color: var(--floater); }
.chip-floater.chip-link:hover { background: var(--gray-200); border-color: var(--floater); }

.floater-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  max-width: 640px;
}
.floater-panel-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 10px; font-weight: 700; }
.floater-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- Shift Change modal ---- */

.coverage-modal { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; }
.coverage-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); }
.coverage-sheet {
  position: relative;
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 24px;
  max-width: 480px;
  box-shadow: var(--shadow-3);
}

@media (min-width: 640px) {
  .coverage-modal { align-items: center; }
  .coverage-sheet { border-radius: var(--radius-lg); border-bottom: 1px solid var(--border); }
}

.coverage-title { margin: 0 0 8px; font-size: 19px; font-weight: 700; }
.coverage-context { color: var(--text-dim); font-size: 14px; margin-bottom: 14px; line-height: 1.5; }

.cov-window-row { display: flex; gap: 10px; margin-bottom: 14px; }
.cov-field { flex: 1; }
.cov-field label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; font-weight: 600; }
.cov-field select {
  width: 100%;
  padding: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}

.coverage-msg-label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; font-weight: 600; }
.coverage-msg {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  margin-bottom: 14px;
  resize: vertical;
}
.coverage-msg:focus, .cov-field select:focus { outline: none; border-color: var(--accent); }

.coverage-send, .coverage-copy {
  width: 100%;
  padding: 13px;
  border-radius: var(--radius-sm);
  border: none;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
  cursor: pointer;
  font-family: inherit;
}
.coverage-send { background: var(--accent); color: var(--accent-ink); }
.coverage-send:hover { filter: brightness(1.1); }
.coverage-copy { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.coverage-copy:hover { background: var(--gray-300); }
.staff-alerts-btn {
  margin-top: 10px; padding: 8px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.staff-alerts-btn:disabled { opacity: 0.7; cursor: default; }

.incoming-asks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.my-requests { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.myreq-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.myreq-shift { font-size: 13px; color: var(--text); font-weight: 600; }
.myreq-state { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.myreq-declined_by_target .myreq-state { color: var(--accent); }
.myreq-approved .myreq-state { color: #2d9d78; }
.ask-card {
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--radius-md); padding: 12px 14px;
}
.ask-title { font-weight: 700; font-size: 14px; color: var(--text); }
.ask-sub { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.ask-msg { font-size: 13px; color: var(--text); margin-top: 6px; font-style: italic; }
.ask-actions { display: flex; gap: 8px; margin-top: 10px; }
.ask-accept, .ask-decline {
  padding: 8px 16px; border-radius: var(--radius-sm); border: none;
  font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit;
}
.ask-accept { background: var(--accent); color: var(--accent-ink); }
.ask-decline { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.ask-result { margin: 8px 0 0; font-size: 13px; color: var(--text-dim); }

.contacts-list { display: flex; flex-direction: column; }
.contact-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 4px; border-bottom: 1px solid var(--border);
}
.contact-info { min-width: 0; }
.contact-name { font-weight: 700; font-size: 15px; color: var(--text); }
.contact-title { font-size: 13px; color: var(--text-dim); margin-top: 1px; }
.contact-handle { font-size: 13px; color: var(--accent); margin-top: 2px; }
.contact-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.contact-btn {
  padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700;
  text-decoration: none; white-space: nowrap; border: 1px solid var(--border);
}
.contact-slack { background: #611f69; color: #fff; border-color: #611f69; }
.contact-phone { background: var(--surface-2); color: var(--text); }
.contact-email { background: var(--surface-2); color: var(--text); }

.coverage-status { margin: 10px 0 0; font-size: 13px; min-height: 1em; color: var(--text-dim); }
.coverage-status[data-kind="ok"] { color: #2d9d78; }
.coverage-status[data-kind="err"] { color: var(--accent); }
.coverage-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.coverage-close:hover { color: var(--text); }