/* Role colors — muted labels (not solid “candy” pills) */
.role-kitchen {
  --role-bg: #fffbeb;
  --role-fg: #92400e;
  --role-border: #fde68a;
}
.role-server {
  --role-bg: #eff6ff;
  --role-fg: #1d4ed8;
  --role-border: #bfdbfe;
}
.role-bartender {
  --role-bg: #ecfdf5;
  --role-fg: #047857;
  --role-border: #a7f3d0;
}

*,
*::before,
*::after { box-sizing: border-box; }

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #0f172a;
  --text-muted: #475569;
  --border: #e8eaef;
  --hover-fill: #fafbfc;
  --primary: #1e3a5f;
  --primary-hover: #2d4a73;
  --danger: #b91c1c;
  --radius: 6px;
  --radius-sm: 4px;
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --space-main: 24px;
  --space-block: 20px;
  --space-tight: 12px;
  /* Fixed-height sticky chrome (must match .app-top grid rows + main top padding) */
  --app-header-row-h: 3.5rem;
  --app-nav-row-h: 3rem;
  --app-top-total-h: calc(var(--app-header-row-h) + var(--app-nav-row-h));
  --shift-edit-chrome: calc(var(--app-top-total-h) + var(--space-main) + var(--safe-bottom));
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 900px) {
  html {
    /* Avoid content width jumping when only some screens scroll (e.g. History vs Schedule). */
    scrollbar-gutter: stable;
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  padding-bottom: var(--safe-bottom);
  -webkit-font-smoothing: antialiased;
}

body.availability-modal-open,
body.schedule-sheet-open {
  overflow: hidden;
}

/* --- Login gate (client-side demo auth; not a substitute for server auth) --- */
html:not(.authed),
html:not(.authed) body {
  overflow: hidden;
  height: 100%;
}

html:not(.authed) .app,
html:not(.authed) .app-employee {
  display: none !important;
}

html.authed.manager-app .app-employee {
  display: none !important;
}

html.authed.employee-app .app {
  display: none !important;
}

/* Employee portal: main fills viewport so Messages inbox scrolls inside the list */
html.authed.employee-app .app-employee {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

html.authed.employee-app .app-employee .app-top {
  flex-shrink: 0;
}

html.authed.employee-app .app-employee .main.emp-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

html.authed.employee-app .main.emp-main > .emp-screen {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
}

html.authed.employee-app .main.emp-main > #empScreenMessages:not([hidden]) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html.authed.employee-app #empScreenMessages .emp-messages-layout {
  flex: 1;
  min-height: 0;
}

html.authed .login-screen {
  display: none !important;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(165deg, #f1f5f9 0%, #e2e8f0 40%, #f8fafc 100%);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: manipulation;
}

/* Create account: grey band above the card (class toggled in index.html) */
.login-screen.login-screen--register {
  align-items: flex-start;
  padding-top: max(48px, calc(env(safe-area-inset-top, 0px) + 32px));
}

.login-card {
  width: 100%;
  max-width: 22rem;
  padding: 28px 24px 26px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
}

.login-logo-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 12px;
}

.login-logo {
  height: clamp(4.5rem, 24vw, 5.75rem);
  width: auto;
  max-width: min(9rem, 78%);
  object-fit: contain;
  display: block;
}

.login-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

.login-subtitle {
  margin: 0 0 22px;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.login-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 1rem;
  background: var(--surface);
  color: var(--text);
}

.login-input:focus {
  outline: 1px solid var(--primary);
  outline-offset: 0;
}

.login-error {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--danger);
}

.login-error.is-success {
  color: #15803d;
}

.login-hint {
  margin: 0 0 18px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.login-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.login-footer-actions {
  margin: 18px 0 0;
  text-align: center;
}

.login-link-btn {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}

.login-link-btn:hover {
  opacity: 0.88;
}

.login-submit {
  margin-top: 4px;
}

/* Login + create account: phones, notches, keyboard-safe scrolling */
@media (max-width: 480px) {
  .login-screen {
    align-items: flex-start;
    justify-content: center;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }

  .login-screen.login-screen--register {
    padding-top: max(56px, calc(env(safe-area-inset-top, 0px) + 36px));
  }

  .login-card {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
    padding-top: 20px;
    padding-bottom: max(22px, env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .login-title {
    font-size: 1.28rem;
    line-height: 1.2;
  }

  .login-subtitle {
    margin-bottom: 16px;
  }

  .login-hint {
    margin-bottom: 14px;
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .login-form {
    gap: 12px;
  }

  .login-form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* 16px+ avoids iOS zooming the viewport on input focus */
  .login-input {
    font-size: 16px;
    padding: 14px 14px;
  }

  .login-footer-actions .login-link-btn {
    width: 100%;
    min-height: 48px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    text-underline-offset: 3px;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
  }

  .login-link-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  .login-footer-actions {
    margin-top: 16px;
  }

  .login-screen .btn.login-submit {
    min-height: 48px;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 1rem;
  }
}

.header-signout-btn {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.2;
}

html.authed .header-signout-btn {
  display: inline-flex;
}

.header-signout-btn:hover,
.header-signout-btn:focus-visible {
  background: var(--hover-fill);
  color: var(--text);
  outline: 1px solid var(--border);
  outline-offset: 1px;
}

.app,
.app-employee {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background: var(--surface);
  overflow-x: clip;
}

/* --- Employee portal --- */
.emp-main {
  padding-bottom: calc(var(--space-main) + 24px);
}

.emp-card {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--hover-fill);
  margin-bottom: var(--space-block);
}

.emp-welcome-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.emp-welcome-meta {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.emp-welcome-hint {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.emp-section-title {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.emp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.emp-section-head .emp-section-title {
  margin: 0;
}

.emp-week-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.emp-week-nav-btn.btn {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 0.75rem;
}

.emp-week-nav-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 7.5rem;
  text-align: center;
}

.emp-screen .emp-section + .emp-section {
  margin-top: 14px;
}

.emp-shift-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.emp-shift-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.emp-shift-item:last-child {
  border-bottom: none;
}

.emp-shift-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.emp-shift-day {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

.emp-week-header {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--hover-fill);
  border-bottom: 1px solid var(--border);
}

.emp-shift-meta {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.emp-shift-empty {
  padding: 14px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.emp-manager-banner {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: var(--space-block);
}

.emp-manager-line {
  margin: 0;
  font-size: 0.9rem;
}

.emp-manager-line.muted {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.emp-avail-week-chips {
  margin: 0 0 10px;
}

.emp-avail-grid-wrap {
  margin-bottom: 12px;
}

.emp-avail-check-all {
  margin-bottom: 10px;
}

.emp-timeoff-week-chips {
  margin: 0 0 10px;
}

.emp-timeoff-grid-wrap {
  margin-bottom: 12px;
}

.emp-timeoff-check-all {
  margin-bottom: 10px;
}

.emp-messages-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-block);
  min-height: 0;
}

.emp-messages-layout--stacked {
  display: flex;
  flex-direction: column;
  gap: var(--space-block);
  min-height: 0;
}

.emp-messages-list-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-block);
  flex: 1;
  min-height: 0;
}

.emp-thread-list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.emp-thread-list-scroll .emp-thread-list {
  border: none;
  border-radius: 0;
}

.emp-messages-layout--chat-open .emp-messages-list-view {
  display: none;
}

.emp-messages-layout--chat-open .emp-chat-panel:not([hidden]) {
  flex: 1;
  min-height: 0;
  max-height: none;
}

.emp-messages-layout--chat-open .emp-chat-log {
  min-height: 0;
}

.emp-message-search-wrap {
  display: block;
  margin: 0;
}

.emp-thread-row--pick {
  border-left: 3px solid var(--primary, #1e3a5f);
}

.emp-thread-pick-hint {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
}

.emp-chat-empty {
  margin: 16px 12px;
  padding: 12px 14px;
  font-size: 0.9rem;
  color: var(--text-muted, #64748b);
  text-align: center;
  border: 1px dashed var(--border, #e8eaef);
  border-radius: var(--radius-sm, 6px);
}

.emp-chat-back {
  flex-shrink: 0;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

.emp-chat-back:hover,
.emp-chat-back:focus-visible {
  background: var(--hover-fill);
  outline: none;
}

.emp-chat-top .emp-chat-title {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.emp-thread-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.emp-thread-row {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: inherit;
}

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

.emp-thread-row:hover,
.emp-thread-row:focus-visible {
  background: var(--hover-fill);
  outline: none;
}

.emp-thread-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.emp-thread-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.emp-thread-preview {
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emp-chat-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  min-height: 280px;
  max-height: min(520px, 70dvh);
  background: var(--surface);
}

.emp-chat-panel[hidden] {
  display: none !important;
}

.emp-chat-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
}

.emp-chat-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.emp-chat-title {
  font-weight: 600;
  font-size: 0.95rem;
  min-width: 0;
}

.emp-chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
}

.emp-msg {
  max-width: 88%;
  padding: 8px 12px 6px;
  border-radius: 12px;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.emp-msg--peer {
  align-self: flex-start;
  background: var(--hover-fill);
  border: 1px solid var(--border);
}

.emp-msg--self {
  align-self: flex-end;
  background: #e8eef5;
  border: 1px solid #d6dee9;
}

.emp-msg-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.emp-msg-time {
  margin: 6px 0 0;
  padding: 0;
  align-self: flex-end;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  line-height: 1.2;
}

.emp-chat-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.emp-chat-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 1rem;
}

.emp-chat-send {
  flex-shrink: 0;
}

.emp-hint {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0 0 var(--space-block);
}

.emp-request-type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-block);
}

.emp-request-form[hidden] {
  display: none !important;
}

.emp-form-feedback {
  margin-top: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
}

/* Employee Actions — Shift Swap */
.emp-form-swap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.emp-swap-intro {
  margin: 0 0 16px;
  padding: 12px 14px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
  background: var(--hover-fill);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.emp-swap-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.emp-swap-panel--offer {
  border-left: 3px solid var(--primary);
}

.emp-swap-panel--accept {
  border-left: 3px solid rgba(15, 23, 42, 0.22);
}

.emp-swap-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.03) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
}

.emp-swap-panel-badge {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
}

.emp-swap-panel-badge--muted {
  background: var(--text-muted);
  opacity: 0.85;
}

.emp-swap-panel-head-text {
  min-width: 0;
}

.emp-swap-panel-title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
}

.emp-swap-panel-desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.emp-swap-panel-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.emp-swap-field .form-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.emp-swap-optional {
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0.85;
}

.emp-swap-select,
.emp-swap-textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font: inherit;
  font-size: 0.9375rem;
}

.emp-swap-select {
  min-height: 44px;
  padding: 10px 12px;
  color: var(--text);
}

.emp-swap-textarea {
  padding: 10px 12px;
  resize: vertical;
  min-height: 72px;
  line-height: 1.45;
}

.emp-swap-textarea:focus,
.emp-swap-select:focus {
  outline: 2px solid var(--primary);
  outline-offset: 0;
  border-color: var(--primary);
}

.emp-swap-submit-offer {
  margin-top: 4px;
}

.emp-swap-submit-accept {
  margin-top: 4px;
}

.emp-swap-connector {
  position: relative;
  height: 20px;
  margin: 0 auto;
  width: 2px;
  background: var(--border);
}

.emp-swap-connector::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--border);
}

.callout-section-label {
  list-style: none;
  background: var(--hover-fill);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.callout-section-label .history-item-meta {
  margin: 0;
  padding: 10px 12px;
}

.callout-employee-request {
  border-left: 3px solid var(--primary);
}

/* Sticky top: fixed two-row height so switching tabs never grows/shrinks the bar */
.app-top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-rows: var(--app-header-row-h) var(--app-nav-row-h);
  grid-template-columns: minmax(0, 1fr);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  box-sizing: border-box;
}

/* Header */
.header {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 0;
  height: 100%;
  padding: 0 var(--space-main);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
  overflow: hidden;
}

.header-logo {
  height: 2.125rem;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 1.1rem;
  cursor: pointer;
}

.back-btn:not([hidden]) { display: flex; }
.back-btn[hidden] { display: none !important; }

.back-btn:hover,
.back-btn:focus-visible {
  background: var(--hover-fill);
  outline: 1px solid var(--primary);
  outline-offset: 1px;
}

.title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  /* Long titles (e.g. “Shift Filled / History”) were wrapping and growing the sticky header. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  height: 100%;
  padding: 0 var(--space-main);
  background: var(--surface);
  box-sizing: border-box;
}

.top-nav .nav-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-nav .nav-item:hover,
.top-nav .nav-item:focus-visible {
  color: var(--text);
  background: var(--hover-fill);
  outline: none;
}

.top-nav .nav-item.active {
  color: var(--primary);
  font-weight: 600;
  border-bottom-color: var(--primary);
}

/* Availability submission modal (Requests tab) */
.availability-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-main);
  padding-bottom: calc(var(--space-main) + var(--safe-bottom));
  box-sizing: border-box;
}

.availability-modal[hidden] {
  display: none !important;
}

.availability-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
}

.availability-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 26rem;
  max-height: min(92vh, 52rem);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.18);
  padding: var(--space-block);
}

.availability-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-tight);
  margin-bottom: 10px;
}

.availability-modal-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  flex: 1;
  min-width: 0;
}

.availability-modal-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

.availability-modal-close:hover,
.availability-modal-close:focus-visible {
  background: var(--hover-fill);
  color: var(--text);
  outline: 1px solid var(--primary);
  outline-offset: 1px;
}

.availability-modal-meta {
  margin: 0 0 var(--space-block);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.availability-modal-grid-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.schedule-sheet-modal {
  z-index: 65;
}

.draft-schedule-modal {
  z-index: 66;
}

.draft-schedule-panel.availability-modal-panel {
  max-width: min(96vw, 56rem);
}

.draft-role-chips {
  margin-bottom: var(--space-tight);
  flex-wrap: wrap;
}

.draft-schedule-table-wrap {
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: min(58vh, 520px);
  margin-top: var(--space-tight);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.draft-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.draft-schedule-table th,
.draft-schedule-table td {
  border: 1px solid var(--border);
  padding: 6px 8px;
  vertical-align: top;
}

.draft-schedule-table thead th {
  background: var(--hover-fill, rgba(15, 23, 42, 0.04));
  font-weight: 600;
  text-align: center;
}

.draft-slot-label {
  white-space: nowrap;
  text-align: left;
}

.draft-cell-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 8.5rem;
}

.draft-dayoff-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.draft-cell-times {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.draft-cell-times input[type="time"] {
  min-width: 5.5rem;
  padding: 4px 6px;
  font-size: 0.8125rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}

.draft-time-sep {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.draft-cell-hours {
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--text-muted);
  min-width: 2.5rem;
}

.draft-schedule-empty {
  margin: 0;
  padding: var(--space-block);
  font-size: 0.875rem;
  color: var(--text-muted);
}

.draft-schedule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-tight);
  margin-top: var(--space-block);
  align-items: center;
}

.draft-schedule-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
}

.draft-schedule-actions .btn-primary {
  flex: 1 1 140px;
}

.schedule-sheet-panel .availability-modal-meta {
  margin-bottom: var(--space-tight);
}

.schedule-sheet-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-block);
}

.schedule-sheet-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-tight) 0;
}

.schedule-sheet-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.schedule-sheet-field .schedule-template-select,
.schedule-sheet-field .schedule-template-name-input,
.schedule-sheet-field .schedule-add-restaurant-input {
  width: 100%;
  box-sizing: border-box;
}

.request-view-grid-wrap {
  margin-top: 10px;
}

/* Main content */
.main {
  padding: var(--space-main);
  padding-bottom: calc(var(--space-main) + 16px);
  padding-left: max(var(--space-main), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-main), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.screen {
  display: none;
  min-width: 0;
  max-width: 100%;
}
.screen.active {
  display: block;
}

#screen-eligible.screen.active {
  display: flex;
  flex-direction: column;
  /* vh fallback: some embedded browsers (e.g. IDE preview) report 0 or odd dvh — keep list scrollable */
  --shift-body: calc(100vh - var(--shift-edit-chrome));
  min-height: max(320px, var(--shift-body));
  max-height: max(320px, var(--shift-body));
}

@supports (height: 100dvh) {
  #screen-eligible.screen.active {
    --shift-body: calc(100dvh - var(--shift-edit-chrome));
  }
}

/* Manager Messages: column layout + inbox scroll inside list (when .main is flex) */
html.authed.manager-app .main > #screen-manager-messages.screen.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

html.authed.manager-app #screen-manager-messages .emp-messages-layout {
  flex: 1;
  min-height: 0;
}

/*
 * Narrow viewports: fill space under the sticky header with flex so the worker
 * list (Edit Staffing / Coverage) gets a real flex height — vh-only sizing left
 * too little room after chips, shift context, tabs, search, and footer.
 */
@media (max-width: 1023px) {
  html.authed.manager-app .app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
  }

  html.authed.manager-app .main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  html.authed.manager-app .main > .screen.active {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  html.authed.manager-app #screen-eligible.screen.active {
    overflow: hidden;
    max-height: none;
    min-height: 0;
  }
}

/* Schedule table */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}

.schedule-view-toggle {
  display: flex;
  gap: var(--space-tight);
  margin-bottom: var(--space-block);
}

.btn-toggle {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
}

.btn-toggle.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.btn-toggle:hover,
.btn-toggle:focus-visible {
  outline: 1px solid var(--primary);
  outline-offset: 1px;
}

.schedule-calendar-wrap {
  margin-top: var(--space-tight);
}

.calendar-table-wrap {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: var(--space-block) var(--space-block) 16px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Wide schedule matrix scrolls inside the card (phones). */
#calendarGrid {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.schedule-toolbar-compact {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-tight) var(--space-block);
  flex-wrap: wrap;
  margin-bottom: var(--space-block);
}

.schedule-toolbar-left {
  flex: 1;
  min-width: min(100%, 200px);
}

.schedule-toolbar-left .employee-filter-label {
  display: block;
  margin-bottom: 6px;
}

.schedule-toolbar-actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-tight);
  align-items: center;
}

/* Compact type for the schedule toolbar */
.btn.schedule-toolbar-btn {
  padding: 8px 14px;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}

.schedule-template-select,
.schedule-template-name-input,
.schedule-add-restaurant-input {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--text);
}

.schedule-template-select {
  min-width: 0;
}

.schedule-add-restaurant-input {
  min-width: 0;
}

.restaurant-switcher {
  display: flex;
  gap: var(--space-tight);
  flex-wrap: wrap;
  margin-bottom: var(--space-block);
}

.restaurant-chip {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1.25;
}

.restaurant-chip:hover {
  border-color: #d1d5db;
  color: var(--text);
  background: var(--hover-fill);
}

.restaurant-chip.active {
  border-color: var(--primary);
  background: var(--surface);
  color: var(--primary);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--primary);
}

.calendar-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: var(--space-block);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
}

.calendar-hint {
  margin: 10px 2px 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.schedule-notice {
  margin: 8px 0 var(--space-block);
  padding: 12px 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
}

.schedule-notice.hidden {
  display: none;
}

.schedule-notice-text {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.4;
}

.calendar-wrap {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 10px;
}

.calendar-cell {
  min-height: 150px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.calendar-th-full {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}

.calendar-th-date-sub {
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: none;
}

.calendar-matrix--redpoke .calendar-section-foh td,
.calendar-matrix--redpoke .calendar-section-delivery td,
.calendar-matrix--redpoke .calendar-section-boh td {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.calendar-slot-rp {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}

.calendar-slot-rp-time {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

.calendar-slot-rp-break {
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
}

.calendar-slot-rp-hours {
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

.emp-shift-rp {
  margin-top: 8px;
  padding: 8px 0;
  border-top: 1px dashed var(--border);
}

.emp-shift-rp-time {
  font-size: 0.84rem;
  font-weight: 600;
}

.emp-shift-rp-break {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.emp-shift-rp-hours {
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Calendar matrix (table) */
.calendar-matrix {
  /* Let day columns honor min-widths; scroll horizontally inside #calendarGrid instead of squishing. */
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 0.86rem;
}

.calendar-matrix th,
.calendar-matrix td {
  border-bottom: 1px solid var(--border);
  padding: 14px 10px;
  vertical-align: top;
}

.calendar-matrix thead th:not(.time-col),
.calendar-matrix tbody tr:not(.calendar-group-row) td {
  min-width: 128px;
  box-sizing: border-box;
}

/*
 * Schedule home calendar: fixed table layout + equal day columns so a focused text
 * input’s default intrinsic min-width can’t widen the matrix (horizontal “tile stretch”).
 */
.calendar-matrix.calendar-matrix--redpoke {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

.calendar-matrix.calendar-matrix--redpoke thead th:not(.time-col),
.calendar-matrix.calendar-matrix--redpoke tbody tr:not(.calendar-group-row) td {
  min-width: 0;
  width: 1%;
}

/* Below desktop width: fixed equal columns cram day cells — scroll horizontally with roomy columns instead. */
@media (max-width: 1023px) {
  .calendar-matrix.calendar-matrix--redpoke {
    width: max-content;
    min-width: 100%;
    max-width: none;
    table-layout: auto;
  }

  .calendar-matrix.calendar-matrix--redpoke thead th:not(.time-col),
  .calendar-matrix.calendar-matrix--redpoke tbody tr:not(.calendar-group-row) td {
    width: auto;
    min-width: clamp(11rem, 42vw, 14.5rem);
  }
}

.calendar-matrix thead th {
  background: var(--surface);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.calendar-matrix .time-col {
  width: 112px;
  min-width: 112px;
  max-width: 140px;
  font-weight: 600;
  background: var(--surface);
}

.time-role {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.time-role-main {
  font-weight: 600;
  color: var(--text);
}

.time-role-sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

.calendar-slot-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  min-height: 168px;
  box-sizing: border-box;
}

.calendar-slot-wrap:hover,
.calendar-slot-wrap:focus-visible {
  outline: 1px solid var(--primary);
  outline-offset: 0;
  background: var(--hover-fill);
}

.calendar-slot-pills {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.calendar-cell-edit-host {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 auto;
  align-self: stretch;
  position: relative;
  z-index: 2;
  /* Keeps calendar slot height stable vs a single .role-pill-mini row */
}

.calendar-cell-name-input {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  /* Match .role-pill-mini padding + font so the cell doesn’t jump */
  padding: 5px 8px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  height: calc(1.35 * 0.72rem + 12px);
  min-height: calc(1.35 * 0.72rem + 12px);
  max-height: calc(1.35 * 0.72rem + 12px);
  background: #fff;
  color: var(--text);
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  field-sizing: fixed;
}

.calendar-cell-name-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--primary);
}

.calendar-name-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  max-height: 11rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 30;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

.calendar-name-dropdown.hidden {
  display: none;
}

.calendar-name-dropdown li {
  padding: 8px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text);
}

.calendar-name-dropdown li:hover,
.calendar-name-dropdown li:focus {
  background: var(--hover-fill);
  outline: none;
}

.calendar-matrix--drag-active .calendar-slot-wrap[data-shiftid] {
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.calendar-slot-wrap.calendar-slot-invalid {
  background: rgba(239, 68, 68, 0.11);
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.22);
}

.calendar-worker-pill[draggable="true"] {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.calendar-worker-pill[draggable="true"]:active {
  cursor: grabbing;
}

.calendar-worker-pill--static {
  cursor: text;
}

.calendar-group-row td {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.calendar-slot-wrap.calendar-slot-empty {
  cursor: default;
  background: rgba(255, 255, 255, 0.6);
  color: var(--text-muted);
  min-height: 48px;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.calendar-slot-wrap.calendar-slot-empty--timed {
  min-height: 120px;
  padding: 10px 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}

.calendar-slot-rp--dayoff {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
  opacity: 0.92;
}

.calendar-slot-empty--timed .calendar-slot-rp--dayoff .calendar-slot-rp-time {
  color: var(--text-muted);
  font-weight: 600;
}

.calendar-slot-empty-label {
  margin-top: auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--text-muted);
}

.calendar-slot-wrap.calendar-slot-empty:hover,
.calendar-slot-wrap.calendar-slot-empty:focus-visible {
  outline: none;
}

.calendar-worker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Schedule (screen 1): wider calendar + more vertical space on desktop browsers */
@media (min-width: 1024px) {
  html.authed.manager-app .app {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }

  html.authed.manager-app .main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  #screen-schedule.active {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  #screen-schedule .calendar-table-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: calc(100% + 2 * var(--space-main));
    margin-left: calc(-1 * var(--space-main));
    margin-right: calc(-1 * var(--space-main));
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 12px var(--space-main) 16px;
    box-sizing: border-box;
  }

  #screen-schedule #calendarGrid {
    flex: 1;
    min-height: min(72vh, calc(100dvh - 220px));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .calendar-matrix thead th:not(.time-col),
  .calendar-matrix tbody tr:not(.calendar-group-row) td {
    min-width: 156px;
  }

  .calendar-matrix.calendar-matrix--redpoke thead th:not(.time-col),
  .calendar-matrix.calendar-matrix--redpoke tbody tr:not(.calendar-group-row) td {
    min-width: 0;
    width: 1%;
  }

  .calendar-slot-wrap:not(.calendar-slot-empty) {
    min-height: 140px;
  }

  .availability-modal-panel {
    max-width: min(92vw, 44rem);
  }

  .availability-matrix-dayhead {
    min-width: 4.25rem;
  }
}

.calendar-worker-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.calendar-day {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.calendar-day-dow {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.calendar-day-date {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

.calendar-shifts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}

.shift-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.role-pill-mini {
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--role-bg);
  color: var(--role-fg);
  border: 1px solid var(--role-border);
  display: inline-block;
  max-width: 100%;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.chip-worker {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.schedule-table th,
.schedule-table td {
  padding: 14px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.schedule-table th {
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  white-space: nowrap;
}

.schedule-table tbody tr:last-child td { border-bottom: 0; }
.schedule-table tbody tr:hover { background: var(--hover-fill); }

.schedule-table-shiftcell {
  min-width: 148px;
  vertical-align: top;
}

.schedule-rp-time {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text);
}

.schedule-rp-break {
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

.schedule-rp-hours {
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}

.role-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--role-bg);
  color: var(--role-fg);
  border: 1px solid var(--role-border);
}

.btn-callout {
  padding: 6px 12px;
  border: 1px solid #991b1b;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--danger);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.btn-callout:hover,
.btn-callout:focus-visible {
  background: #991b1b;
  outline: 1px solid #7f1d1d;
  outline-offset: 1px;
}

/* Screen 2: Eligible workers */
.slot-location-filter {
  flex-shrink: 0;
  margin-bottom: var(--space-block);
  padding: 0 2px;
}

.shift-context {
  flex-shrink: 0;
  padding: 14px 18px;
  margin-bottom: var(--space-block);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.worker-list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  margin-bottom: 4px;
}

.shift-worker-search-wrap {
  margin-bottom: var(--space-tight);
}

.worker-list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-tight);
}

.worker-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.worker-item:hover { border-color: #d1d5db; background: var(--hover-fill); }

.worker-item input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--primary);
  cursor: pointer;
}

.worker-item-info { flex: 1; }
.worker-item-name { font-weight: 600; margin: 0 0 2px; }
.worker-item-meta { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

.screen-actions { margin-top: var(--space-tight); }

.screen-actions-footer {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: var(--space-block);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.screen-actions-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-tight);
}

.callout-footer-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
}

/* Screen 2: Mode tabs (Edit vs Callout) */
.mode-tabs {
  flex-shrink: 0;
  display: flex;
  gap: 0;
  margin: 0 0 var(--space-block);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}

.mode-tab {
  flex: 1;
  padding: 12px 14px;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-muted);
}

.mode-tab:last-child {
  border-right: none;
}

.mode-tab.active {
  background: var(--hover-fill);
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 1px 0 var(--hover-fill);
}

.mode-tab:hover,
.mode-tab:focus-visible {
  color: var(--text);
  outline: none;
}

.mode-tab:focus-visible {
  z-index: 1;
  box-shadow: inset 0 0 0 1px var(--primary);
}

.mode-panel.hidden {
  display: none;
}

#screen-eligible .mode-panel:not(.hidden) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.panel-subtitle {
  flex-shrink: 0;
  margin: 0 0 var(--space-tight);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Buttons */
.btn {
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

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

.btn-secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  outline: 1px solid var(--primary);
  outline-offset: 1px;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--hover-fill);
  border-color: #d1d5db;
  outline: 1px solid var(--border);
  outline-offset: 1px;
}

.btn-block { width: 100%; }

/* Screen 3: Shift accepted */
.accepted-card {
  padding: var(--space-block) var(--space-main);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.accepted-badge {
  margin: 0 0 14px;
  padding: 4px 10px;
  display: inline-block;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.accepted-details {
  margin: 0 0 20px;
  font-size: 1rem;
}

.accepted-details dt {
  margin: 12px 0 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.accepted-details dd { margin: 0; }

/* Screen 4: History */
.tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-block);
  border-bottom: 1px solid var(--border);
}

.tab {
  flex: 1;
  padding: 12px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1.2;
}

.tab:hover { color: var(--text); background: transparent; }
.tab.active {
  color: var(--primary);
  font-weight: 600;
  border-bottom-color: var(--primary);
}

.history-list {
  list-style: none;
  margin: 0 0 var(--space-main);
  padding: 0;
}

.history-item {
  padding: 16px 18px;
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.history-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.history-item-role { font-weight: 600; }
.history-item-status {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.history-item-status.filled {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.history-item-status.pending {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

.history-item-status.declined {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.request-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-tight);
  margin-top: 12px;
  padding-top: var(--space-tight);
  border-top: 1px solid var(--border);
}

.request-item-actions .request-action-btn {
  flex: 1;
  min-width: 6.5rem;
}

.history-item-meta { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 4px; }
.history-item-notes { font-size: 0.85rem; margin: 8px 0 0; padding-top: var(--space-tight); border-top: 1px solid var(--border); color: var(--text-muted); }

.callout-log-item .callout-log-body {
  margin-top: 10px;
  padding-top: var(--space-tight);
  border-top: 1px solid var(--border);
}

.callout-log-line {
  font-size: 0.875rem;
  line-height: 1.45;
  margin: 0 0 8px;
  color: var(--text);
}

.callout-log-line:last-child {
  margin-bottom: 0;
}

.callout-log-label {
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 6px;
}

.callout-log-muted {
  color: var(--text-muted);
}

.callout-log-line--highlight .callout-log-label {
  color: var(--text);
}

.callout-log-role {
  font-weight: 500;
  color: var(--text-muted);
}

.notes-section label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: var(--space-tight);
}

.notes-section textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  resize: vertical;
}

.notes-section textarea:focus {
  outline: 1px solid var(--primary);
  outline-offset: 0;
}

/* Messaging templates */
.messaging-intro {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0 0 var(--space-block);
}

.template-vars-card {
  padding: 16px 18px;
  margin-bottom: var(--space-block);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
}

.template-vars-title {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.template-vars-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text);
  line-height: 1.45;
}

.template-vars-list code {
  font-size: 0.78rem;
  background: var(--surface);
  padding: 1px 4px;
  border-radius: 4px;
}

.messaging-field {
  margin-bottom: var(--space-block);
}

.messaging-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  resize: vertical;
}

.messaging-textarea:focus {
  outline: 1px solid var(--primary);
  outline-offset: 0;
}

.template-preview {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.messaging-save-feedback {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
}

.messaging-save-feedback[hidden] {
  display: none !important;
}

/* Employees */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.employees-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-block);
  margin-bottom: var(--space-block);
}

.employee-search-wrap {
  display: block;
}

.employee-search-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--surface);
}

.employee-search-input:focus {
  outline: 1px solid var(--primary);
  outline-offset: 0;
}

/* Messages tab search: no heavy focus ring (browser / type="search" defaults). */
.employee-search-input.emp-messages-search:focus,
.employee-search-input.emp-messages-search:focus-visible {
  outline: none;
  box-shadow: none;
}

.emp-message-search-wrap .employee-search-input.emp-messages-search {
  -webkit-tap-highlight-color: transparent;
}

.employee-filter-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.employee-filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.employee-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.employee-filter-chips-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.filter-chip {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.filter-chip:hover,
.filter-chip:focus-visible {
  border-color: #d1d5db;
  color: var(--text);
  background: var(--hover-fill);
  outline: none;
}

.filter-chip.active {
  background: var(--hover-fill);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

.employees-toolbar {
  padding: 0;
}

.requests-list {
  margin-top: 0;
}

.employee-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.employee-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.employee-section-title {
  margin: 0 0 var(--space-tight);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.employee-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.employee-card:hover,
.employee-card:focus-visible {
  border-color: #d1d5db;
  background: var(--hover-fill);
  outline: none;
}

.employee-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.employee-card-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  min-width: 0;
  text-align: left;
}

.employee-card .role-pill {
  flex-shrink: 0;
  font-size: 0.7rem;
  padding: 2px 8px;
}

.employee-card-phone {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.employee-card-location {
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.3;
  text-align: left;
}

.employee-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-block);
  max-width: 520px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-tight);
}

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

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field-block { width: 100%; }

.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.form-field input,
.form-field select {
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
}

.form-field input:focus,
.form-field select:focus {
  outline: 1px solid var(--primary);
  outline-offset: 0;
}

.week-avail-fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

.form-hint {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.availability-grid-wrap {
  width: 100%;
  max-width: 100%;
  margin-top: 6px;
}

/* Mon–Sun columns; rows = schedule lines; times shown in each cell. */
.availability-matrix-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}

.availability-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  min-width: max-content;
}

.availability-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--hover-fill);
  color: var(--text-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  vertical-align: bottom;
  padding: 6px 4px 8px;
  text-align: center;
}

/* Day columns — align with main schedule (weekday label). */
.availability-matrix-dayhead {
  min-width: 2.75rem;
}

.availability-matrix-dayhead-dow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}

.availability-matrix-cell--off {
  background: #f8fafc;
  color: var(--text-muted);
  text-align: center;
  vertical-align: middle;
  font-size: 0.85rem;
  user-select: none;
}

.availability-matrix tbody tr:nth-child(even) td.availability-matrix-cell--off {
  background: #f1f5f9;
}

.availability-matrix-off {
  opacity: 0.55;
}

.availability-matrix tbody tr:nth-child(even) td.availability-matrix-cell {
  background: var(--hover-fill);
}

.availability-matrix td.availability-matrix-cell {
  border: 1px solid var(--border);
  padding: 4px;
  text-align: center;
  vertical-align: top;
}

.availability-matrix-cell-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.availability-matrix-cell-time {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: 0.01em;
  max-width: 100%;
  word-break: break-word;
}

.availability-matrix-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
  margin: 0;
  cursor: pointer;
  width: 100%;
}

.availability-matrix-scroll--readonly .availability-matrix-label {
  cursor: default;
}

.availability-matrix .availability-grid-cb {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary);
}

.availability-matrix-scroll--readonly .availability-grid-cb {
  cursor: default;
  pointer-events: none;
  opacity: 0.9;
}

/* Phones / small screens: fit width, reduce padding, keep calendar usable via horizontal scroll */
@media (max-width: 640px) {
  :root {
    --space-main: 12px;
    --space-block: 12px;
    --space-tight: 8px;
  }

  .title {
    font-size: 1rem;
  }

  .calendar-table-wrap {
    padding: 12px 10px 14px;
  }

  .calendar-matrix {
    font-size: 0.8rem;
  }

  .calendar-matrix th,
  .calendar-matrix td {
    padding: 8px 6px;
  }

  /* Default day columns — Red Poke schedule uses wider mins via .calendar-matrix--redpoke rule above */
  .calendar-matrix thead th:not(.time-col),
  .calendar-matrix tbody tr:not(.calendar-group-row) td {
    min-width: min(148px, 44vw);
  }

  .calendar-matrix .time-col {
    width: 88px;
    min-width: 88px;
    max-width: 104px;
  }

  .calendar-slot-wrap {
    min-height: 92px;
    padding: 8px 8px;
  }

  /* One horizontal line per name; ellipsis instead of letter-stacking wraps */
  .calendar-slot-pills {
    flex: 0 1 auto;
  }

  .calendar-slot-wrap:not(.calendar-slot-empty) .role-pill-mini.calendar-worker-pill {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.35;
    max-height: 2.85em;
  }

  .calendar-slot-wrap:not(.calendar-slot-empty) .time-role-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .calendar-matrix thead th:not(.time-col) {
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .calendar-matrix thead th:not(.time-col) .calendar-th-full {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .calendar-matrix thead th:not(.time-col) .calendar-th-date-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .shift-context {
    padding: 10px 12px;
    font-size: 0.78rem;
  }

  .schedule-toolbar-compact {
    flex-direction: column;
    align-items: stretch;
  }

  .schedule-toolbar-left {
    min-width: 0;
  }

  .schedule-toolbar-actions {
    width: 100%;
    justify-content: stretch;
  }

  .btn.schedule-toolbar-btn {
    flex: 1 1 0;
    min-width: 0;
  }

  .employee-filter-chips {
    gap: 8px;
  }

  .worker-item {
    padding: 12px 12px;
    gap: 10px;
  }

  .availability-modal {
    padding: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }

  .employee-form {
    max-width: 100%;
  }
}

@media (min-width: 780px) {
  .app,
  .app-employee {
    border-radius: 0;
  }
}