/* =====================================================================
   LEAF2Serve — shared styles
   ===================================================================== */

:root {
  --color-bg: #f5f6fb;
  --color-surface: #ffffff;
  --color-text: #15161d;
  --color-text-muted: #6b7086;
  --color-border: #ecedf5;
  --color-primary: #4a5cf0;
  --color-primary-dark: #3949d6;
  --color-primary-contrast: #ffffff;
  --color-primary-tint: #eceffe;
  --color-success: #16a34a;
  --color-success-bg: #e8f9ef;
  --color-warning: #d98324;
  --color-warning-bg: #fdf1e2;
  --color-danger: #e0483e;
  --color-danger-bg: #fdecea;
  --color-neutral-bg: #f1f2f8;
  --color-chat-bg: #e9ebf4; /* darker canvas behind chat messages (Bryan: "darker color instead of white") */
  --radius: 16px;
  --shadow: 0 4px 20px rgba(20, 20, 40, 0.06), 0 1px 3px rgba(20, 20, 40, 0.05);
  --max-width: 880px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.45;
}

a {
  color: var(--color-primary);
}

.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 16px 64px;
}

/* ---------- Top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--color-surface);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.topbar .brand {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.topbar .who {
  font-size: 0.85rem;
  opacity: 0.9;
  margin-right: 12px;
  max-width: 28vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}

.topbar-right {
  display: flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
}

.topbar button.link {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
}

.topbar button.link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---------- Auth (login/signup) screens ---------- */

.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 24px;
}

.auth-card .auth-logo {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  border-radius: 22px;
}

.auth-card h1 {
  font-size: 1.3rem;
  margin: 0 0 4px;
  text-align: center;
}

.auth-card .subtitle {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0 0 20px;
}

/* "Remember me" row on the login card — a normal-weight inline label
   with the checkbox beside it (the global label styles are for field
   headings, so this overrides them). */
.remember-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 400;
  margin: 14px 0 0;
  cursor: pointer;
  color: var(--color-text);
}

.remember-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.auth-card .switch-link {
  text-align: center;
  font-size: 0.88rem;
  margin-top: 16px;
  color: var(--color-text-muted);
}

/* ---------- Forms ---------- */

label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 14px 0 6px;
}

label:first-child {
  margin-top: 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
}

textarea {
  resize: vertical;
  min-height: 70px;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* ---------- Buttons ---------- */

button {
  font-family: inherit;
  cursor: pointer;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: 999px;
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  width: 100%;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
}

.btn-secondary {
  background: var(--color-neutral-bg);
  color: var(--color-text);
}

.btn-secondary:hover {
  background: #e3e5f1;
}

.btn-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.btn-small {
  width: auto;
  padding: 7px 12px;
  font-size: 0.85rem;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.btn-row .btn {
  width: auto;
  flex: 1;
}

/* ---------- Messages ---------- */

.msg {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.88rem;
  margin: 14px 0;
}

.msg-error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.msg-success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.msg-hidden {
  display: none;
}

/* ---------- Cards / sections ---------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 18px;
}

.card h2 {
  font-size: 1.05rem;
  margin: 0 0 14px;
}

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

.section-title:first-child {
  margin-top: 0;
}

/* ---------- Points hero ---------- */

.points-hero {
  text-align: center;
  padding: 20px 0 8px;
}

.points-hero .num {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}

.points-hero .label {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-top: 6px;
}

/* ---------- Tabs (manager dashboard) ---------- */

.tabs {
  display: flex;
  gap: 4px;
  background: var(--color-neutral-bg);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 18px;
  overflow-x: auto;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 9px 10px;
  border: none;
  background: none;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.tab.active {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  box-shadow: var(--shadow);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* ---------- List rows (employees, transactions, rewards, requests) ---------- */

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

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

.row-main {
  min-width: 0;
}

.row-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.row-sub {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.row-side {
  text-align: right;
  flex-shrink: 0;
}

.empty-state {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  text-align: center;
  padding: 18px 0;
}

/* ---------- Badges ---------- */

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
}

.badge-pending {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge-approved {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge-fulfilled {
  background: var(--color-neutral-bg);
  color: var(--color-text-muted);
}

.badge-denied {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.badge-reversed {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge-active {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge-expired {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.badge-requested {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.row-attention {
  background: var(--color-warning-bg);
  border-radius: 8px;
  border-bottom: none;
  padding: 12px 10px;
  margin: 6px 0;
}

.points-amount {
  font-weight: 700;
}

.points-amount.positive {
  color: var(--color-success);
}

.points-amount.negative {
  color: var(--color-danger);
}

/* ---------- Reward cards (employee catalog) ---------- */

.reward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.reward-card {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reward-card .name {
  font-weight: 700;
}

.reward-card .desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  flex-grow: 1;
}

.reward-card .cost {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
}

.redeem-code {
  font-family: "SF Mono", Consolas, monospace;
  font-size: 1.1rem;
  letter-spacing: 2px;
  font-weight: 700;
  background: var(--color-success-bg);
  color: var(--color-success);
  padding: 4px 10px;
  border-radius: 6px;
}

/* ---------- Modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
}

.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 22px 20px 26px;
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
}

.modal h3 {
  margin: 0 0 14px;
  font-size: 1.05rem;
}

@media (min-width: 640px) {
  .modal-backdrop {
    align-items: center;
  }
  .modal {
    border-radius: var(--radius);
  }
}

.hidden {
  display: none !important;
}

.spinner-text {
  text-align: center;
  color: var(--color-text-muted);
  padding: 40px 0;
  font-size: 0.9rem;
}

/* ---------- Dashboard greeting + at-a-glance stats (manager Team tab) ---------- */

.greeting-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.greeting-row h2 {
  margin: 0;
  font-size: 1.2rem;
}

.stat-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.stat-chip {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.stat-chip b {
  color: var(--color-primary);
  font-size: 0.95rem;
}

/* ---------- Team tab layout: side-by-side + collapsible sections ---------- */

.team-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  align-items: start;
}

/* Left column of the Team tab: Team Members, then the manager's
   Announcement box under it (Bryan 2026-09-29). */
.team-grid-main {
  min-width: 0;
}

/* Right-hand column of the Team tab: Managers on top, Pending
   Invitations directly under it — together they sit beside the Team
   Members list. The cards' own margin-bottom provides the spacing. */
.team-grid-side {
  min-width: 0;
}

.team-grid-side .card:last-child {
  margin-bottom: 0;
}

/* MANAGER rewards catalog as compact tiles (2026-09-25, Bryan): 6 per
   row on desktop so the whole catalog fits one screen; 3 across on
   phones. (.reward-grid stays the EMPLOYEE catalog grid.) */
.reward-tile-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 900px) {
  .reward-tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .reward-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.reward-tile {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 8px 9px;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.reward-tile.removed {
  opacity: 0.55;
  border-style: dashed;
}

.reward-tile-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
}

.reward-tile-name {
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.reward-tile-type {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0 5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.reward-tile-pts {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}

.reward-tile-pts small {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-left: 2px;
}

.reward-tile-desc {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.reward-tile-limits {
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

.reward-tile-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}

.reward-tile-foot .btn-small {
  padding: 3px 8px;
  font-size: 0.72rem;
}

/* Mouse drag-to-scroll on the schedule columns (desktop) */
@media (hover: hover) and (pointer: fine) {
  .sched-week-scroll {
    cursor: grab;
    scroll-snap-type: none; /* snapping fights a mouse drag */
  }
  .sched-week-scroll.dragging {
    cursor: grabbing;
    user-select: none;
  }
}

/* Top row: narrow Upload box + Shift Swaps beside it. While a file
   preview is open the upload box takes the full row (the preview
   table needs the room) and Swaps drops under it. */
.sched-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.sched-top-grid > * {
  min-width: 0;
}

.sched-top-grid .sched-admin-expanded {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .sched-top-grid {
    grid-template-columns: 1fr;
  }
  /* Tablet/phone order stays as it always was (the desktop layout of
     2026-09-29 moved boxes around): holiday, month view (tablet), schedule,
     time-off, blackouts, swaps, then the "use a computer" hint (upload is
     hidden on phones). display:contents lets the desktop row wrappers
     step aside so each box can take its old place. */
  #tab-schedule.active {
    display: flex;
    flex-direction: column;
  }
  #tab-schedule .sched-cal-row,
  #tab-schedule .sched-cal-side { display: contents; }
  #tab-schedule #hb-switch-slot { order: 1; }
  #tab-schedule #hb-admin { order: 2; }
  #tab-schedule .sched-cal-card { order: 3; }
  #tab-schedule .sched-week-card { order: 4; }
  #tab-schedule .sched-timeoff-card { order: 5; }
  #tab-schedule .sched-blackout-card { order: 6; }
  #tab-schedule .sched-top-grid { order: 7; }
  #tab-schedule #sched-admin-mobile { order: 8; }
}

@media (max-width: 640px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
  /* Phones: the announcement stays at the top of the Team tab, as before
     (on bigger screens it sits under Team Members). */
  #tab-team.active { display: flex; flex-direction: column; }
  #tab-team .team-grid,
  #tab-team .team-grid-main { display: contents; }
  #tab-team #announcement-slot { order: -1; }
}

.count-pill {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-neutral-bg);
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}

details.card {
  padding: 0;
}

details.card summary {
  list-style: none;
  cursor: pointer;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.05rem;
  font-weight: 600;
}

details.card summary::-webkit-details-marker {
  display: none;
}

details.card summary::after {
  content: "▾";
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 0.85rem;
  margin-left: 10px;
}

details.card[open] summary {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
}

details.card .details-body {
  padding: 14px 18px 18px;
}

.hint {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: 8px;
}

/* "First 5 + Show All" pattern for long history lists. display:contents
   makes the expanded wrapper invisible to layout, so the extra rows
   render exactly like the always-visible ones. */
.list-more {
  display: contents;
}

.list-more.hidden {
  display: none;
}

.list-more-btn {
  width: 100%;
  margin-top: 12px;
}

/* ---------- Bottom navigation (phone only) ---------- */

.bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  position: relative;
}

.nav-item .icon {
  font-size: 1.3rem;
  line-height: 1;
}

.nav-item.active {
  color: var(--color-primary);
}

.nav-badge {
  position: absolute;
  top: -2px;
  right: 22%;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 999px;
  min-width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

@media (max-width: 640px) {
  .tabs {
    display: none;
  }
  .bottom-nav {
    display: flex;
  }
  .page {
    padding-bottom: 84px;
  }
}

/* ---------- Chat ---------- */

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

.chat-setup-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.row-badge {
  background: var(--color-danger);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  margin-left: 8px;
}

/* Small "x" button on each chat inbox row to remove that conversation
   from your own inbox. Subdued by default so it doesn't compete with the
   row's content; turns red on hover/tap to signal it's a delete action. */
.row-remove-btn {
  border: none;
  background: var(--color-neutral-bg);
  color: var(--color-text-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.75rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.row-remove-btn:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* ---------- Full-screen conversation view ---------- */
/* Inside a conversation, the chat covers the whole screen top to bottom
   (like WhatsApp/iMessage): the top bar and bottom nav are covered, the
   messages area takes all remaining height, and the input bar sits at
   the very bottom. The back arrow returns to the inbox. z-index sits
   above the bottom nav (40) but below modals (50). */
#chat-conversation-view:not(.hidden) {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--color-chat-bg);
  display: flex;
  flex-direction: column;
}

#chat-conversation-view .card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--color-chat-bg);
  padding: calc(12px + env(safe-area-inset-top, 0px)) 14px calc(10px + env(safe-area-inset-bottom, 0px));
}

#chat-conversation-view .chat-messages {
  flex: 1;
  max-height: none;
  min-height: 0;
}

.chat-conv-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.chat-conv-header .btn-icon {
  border: none;
  background: var(--color-neutral-bg);
  color: var(--color-primary);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.chat-conv-header .chat-conv-title {
  font-weight: 800;
  font-size: 1.2rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1; /* pushes the 👥 group-members button to the right edge */
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 58vh;
  overflow-y: auto;
  padding: 4px 2px;
  margin-bottom: 12px;
}

.msg-bubble-row {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}

.msg-bubble-row.mine {
  align-self: flex-end;
  align-items: flex-end;
}

.msg-bubble-row.theirs {
  align-self: flex-start;
  align-items: flex-start;
}

.msg-bubble-sender {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 2px;
  padding: 0 4px;
}

/* Chat text sizes bumped ~2 steps (2026-08-31, Bryan) to match the
   ~17px message text of iMessage/WhatsApp. */
.msg-bubble {
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 1.05rem;
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* Only the message text itself keeps intentional line breaks —
   pre-wrap on the whole bubble rendered the HTML template's own
   indentation as phantom blank lines and indents. */
.msg-text {
  white-space: pre-wrap;
}

.msg-bubble-row.mine .msg-bubble {
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.msg-bubble-row.theirs .msg-bubble {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 4px;
}

.msg-bubble .chat-photo-img {
  display: block;
  max-width: 220px;
  max-height: 220px;
  border-radius: 12px;
  margin-bottom: 4px;
  object-fit: cover;
  cursor: pointer;
}

.msg-bubble-time {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 3px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The placeholder bubble a viewer sees in place of an unsent message's
   real content -- dashed border and muted styling instead of the normal
   solid/colored bubble so it visually reads as "gone", not just plain
   text. */
.msg-bubble-removed {
  background: none !important;
  border: 1px dashed var(--color-border) !important;
  color: var(--color-text-muted);
}

.msg-removed-note {
  font-style: italic;
  font-size: 0.95rem;
}

/* Small caption under a bubble that's still visible to only the sender
   ("you unsent this") or a manager doing oversight -- everyone else sees
   the dashed placeholder above instead, with no note at all. */
.msg-status-note {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-text-muted);
  padding: 2px 4px 0;
}

/* Message actions moved into the press-and-hold menu (no visible icon
   row). Holding a bubble must not trigger iOS text-selection/callout. */
.msg-bubble-row .msg-bubble {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Reaction pills tucked under a bubble's corner (Noto emoji images) */
.msg-reactions {
  display: flex;
  gap: 4px;
  margin-top: -8px;
  padding: 0 6px;
  position: relative;
  z-index: 2;
}

.msg-bubble-row.mine .msg-reactions {
  justify-content: flex-end;
}

.msg-react-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 0.78rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.msg-react-badge.own {
  border-color: var(--color-primary);
  background: #eef2ff;
}

.react-emoji-img {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
}

.react-emoji-img.big {
  width: 28px;
  height: 28px;
}

/* The press-and-hold menu: dimmed backdrop, the held message floating,
   the reaction bar, then the action list. Above everything (z 90). */
.msg-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.msg-menu-focus {
  max-width: 320px;
}

.msg-menu-focus .msg-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 1.05rem;
  overflow-wrap: break-word;
}

.msg-menu-focus.mine .msg-bubble {
  background: var(--color-primary);
  color: #fff;
}

.msg-menu-focus.theirs .msg-bubble {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.msg-react-row {
  display: flex;
  gap: 6px;
  background: var(--color-surface);
  border-radius: 999px;
  padding: 8px 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.msg-react-row button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 50%;
  line-height: 1;
}

.msg-react-row button.selected {
  background: #eef2ff;
  outline: 2px solid var(--color-primary);
}

.msg-menu-actions {
  background: var(--color-surface);
  border-radius: 14px;
  min-width: 220px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.msg-menu-actions button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  padding: 12px 16px;
  font-size: 0.95rem;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.msg-menu-actions button:last-child {
  border-bottom: none;
}

.msg-menu-actions button.danger {
  color: var(--color-danger);
}

/* Quoted original message at the top of a reply bubble */
.msg-quote {
  display: flex;
  flex-direction: column;
  border-left: 3px solid rgba(99, 102, 241, 0.55);
  background: rgba(99, 102, 241, 0.08);
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 6px;
  font-size: 0.82rem;
  max-width: 100%;
}

.msg-quote-name {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.76rem;
}

.msg-quote-text {
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inside the sender's own (solid indigo) bubble the quote needs the
   light-on-dark treatment or it disappears. */
.msg-bubble-row.mine .msg-quote {
  border-left-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.18);
}

.msg-bubble-row.mine .msg-quote-name {
  color: #fff;
}

.msg-bubble-row.mine .msg-quote-text {
  color: rgba(255, 255, 255, 0.85);
}

/* "@Name" highlighting; ".me" = the viewer is the one mentioned */
.msg-mention {
  color: var(--color-primary);
  font-weight: 600;
}

.msg-mention.me {
  background: #fef3c7;
  color: #b45309;
  border-radius: 4px;
  padding: 0 3px;
}

.msg-bubble-row.mine .msg-mention {
  color: #fff;
  text-decoration: underline;
}

/* Teammate suggestions shown above the input while typing "@..." */
.mention-suggest {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 10px;
  margin-bottom: 6px;
  overflow: hidden;
}

.mention-option {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 8px 12px;
  font-size: 0.95rem;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
}

.mention-option:hover {
  background: rgba(99, 102, 241, 0.08);
}

/* "Replying to …" bar above the composer */
.chat-reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 3px solid rgba(99, 102, 241, 0.55);
  background: rgba(99, 102, 241, 0.08);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
}

.chat-reply-bar-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
}

.chat-reply-bar-text .msg-quote-text {
  white-space: nowrap;
}

.chat-reply-cancel {
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
}

.chat-day-divider {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 6px 0;
}

/* Desktop-only "⋯" affordance: appears when the mouse hovers a message
   (touch screens never show it — press-and-hold is their gesture). */
.msg-more-btn {
  display: none;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 0 4px;
}

.msg-more-btn:hover {
  color: var(--color-primary);
}

@media (hover: hover) and (pointer: fine) {
  .msg-bubble-row:hover .msg-more-btn {
    display: inline-block;
  }
}

/* Manager oversight separation: the inbox lists YOUR chats first, then
   a divider and the team's private chats (view-only, dimmed). */
.conv-section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 14px 0 4px;
}

.conv-section-divider::before,
.conv-section-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-border);
}

.conv-row.oversight {
  opacity: 0.7;
}

.conv-oversight-badge {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 1px 7px;
  flex-shrink: 0;
}

/* Read-only banner shown in place of the typing box */
.chat-oversight-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-neutral-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Small note while an older batch of messages downloads (scroll-up) */
.chat-older-loading {
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  padding: 6px 0;
}

/* A newly arrived/sent bubble slides in like a real messaging app,
   instead of the whole thread being redrawn at once. */
.msg-bubble-row.msg-new {
  animation: msg-pop-in 0.22s ease-out;
}

/* 📌 Pinned-message banner under the conversation header. Tapping the
   text jumps to (and flashes) the message; ✕ unpins. */
.chat-pinned-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fef9ec;
  border: 1px solid #f0d98c;
  border-radius: 10px;
  padding: 6px 10px;
  margin-bottom: 8px;
}

.chat-pinned-bar .pin-icon {
  flex-shrink: 0;
}

.chat-pinned-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  cursor: pointer;
}

.chat-pinned-text .msg-quote-name {
  font-size: 0.85rem;
}

.chat-pinned-text .msg-quote-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  color: var(--color-text);
}

/* Brief highlight on the message the pinned banner jumps to */
.msg-bubble-row.msg-flash .msg-bubble {
  animation: pin-flash 1.4s ease-out;
}

@keyframes pin-flash {
  0% {
    box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.9);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(240, 180, 41, 0);
  }
}

@keyframes msg-pop-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* "Seen" / "Seen by Maria, Jon +3" under the newest message. Sits under
   the right edge when the last message is yours, left edge otherwise. */
.seen-by-note {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  padding: 0 4px;
  align-self: flex-start;
}

.seen-by-note.mine {
  align-self: flex-end;
  text-align: right;
}

.seen-by-note:empty {
  display: none;
}

/* When more than 2 people have seen it, the note is tappable and
   expands to the full name list ("+3 ▾" → every name). */
.seen-by-note.expandable {
  cursor: pointer;
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Multi-line composer (2026-09-20, Bryan): the box grows downward as
   you type — like iMessage/WhatsApp — up to 20 lines or half the
   screen, whichever comes first, then scrolls inside itself. */
.chat-input-row {
  align-items: flex-end; /* 📷 and ➤ stay anchored at the bottom */
}

.chat-input-row textarea {
  flex: 1;
  margin: 0;
  resize: none;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1.35;
  padding: 8px 14px;
  /* The app-wide textarea rule forces min-height 70px (for the bigger
     form boxes in popups) — the chat composer must start as ONE line. */
  min-height: 0;
  height: 39px;
  max-height: min(480px, 50vh);
  overflow-y: auto;
}

.chat-input-row .btn-icon {
  border: none;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.chat-photo-preview-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px;
  background: var(--color-neutral-bg);
  border-radius: 10px;
}

.chat-photo-preview-wrap img {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
}

.new-chat-people-list {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 4px 10px;
  margin-top: 6px;
}

.new-chat-person-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.88rem;
}

.new-chat-person-row:last-child {
  border-bottom: none;
}

.new-chat-person-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---------- Chat v2 (Aug 2026 redesign): WhatsApp-style inbox ---------- */

/* Unread indicator on the Chat button: a plain red dot, no number
   (Bryan's choice — "just a red dot is fine"). One style for the bottom
   nav (absolute, sits by the icon) and one for the desktop tab bar
   (inline, after the label). */
.nav-item .nav-dot {
  position: absolute;
  top: 0;
  right: 28%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-danger);
}

.tab .nav-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-danger);
  margin-left: 6px;
  vertical-align: middle;
}

.conv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

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

.avatar-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
  overflow: hidden;
}

/* An uploaded profile picture fills its circle */
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Small avatar next to your name in the top bar (tap = My Profile) */
.topbar-avatar {
  width: 26px;
  height: 26px;
  font-size: 0.8rem;
  cursor: pointer;
}

/* No picture yet: dashed 📷 circle inviting people to add one */
.topbar-avatar.add-hint {
  border: 1.5px dashed rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 0.75rem;
}

.who-clickable {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 3px;
}

/* Big picture in the My Profile popup */
.profile-avatar-lg {
  width: 84px;
  height: 84px;
  font-size: 2rem;
  margin: 0 auto 12px;
  border: 3px solid var(--color-primary);
}

/* Teammates' messages in Team/group chats carry a small picture,
   bottom-aligned to the bubble (own messages stay clean). */
.msg-with-avatar {
  display: flex;
  gap: 6px;
}

.msg-with-avatar .msg-col {
  min-width: 0;
  flex: 1;
}

.msg-avatar {
  width: 38px;
  height: 38px;
  font-size: 1.05rem;
  align-self: flex-end;
  margin-bottom: 24px;
}

.avatar-circle.team {
  background: var(--color-primary);
  color: #fff;
}

.conv-main {
  flex: 1;
  min-width: 0;
}

.conv-name-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.conv-name {
  font-size: 1.05rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-row.row-unread .conv-name {
  font-weight: 800;
}

.conv-time {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

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

.conv-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.conv-unread {
  background: var(--color-danger);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  min-width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* Rounded message input + circular send button (matches the v2 mockup). */
.chat-input-row textarea {
  border-radius: 18px;
  background: var(--color-neutral-bg);
  border: 1px solid transparent;
}

.chat-send-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  font-size: 1rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-send-circle:hover {
  background: var(--color-primary-dark);
}

.chat-send-circle:disabled {
  opacity: 0.55;
}

/* iPhone "how to turn on notifications" guided steps (shown in a modal
   instead of a plain browser alert). */
.ios-steps {
  background: var(--color-primary-tint);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.9rem;
  line-height: 1.8;
}

.ios-steps b {
  color: var(--color-primary-dark);
}

/* ---------- Level (50/75/100, set by managers) ---------- */
/* Color-coded so status reads at a glance: orange = 50, indigo = 75,
   green = 100. Managers see a text label per team member; each employee
   sees their own level as a bar under their points. */

.level-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.level-bar {
  width: 130px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-neutral-bg);
  overflow: hidden;
  flex-shrink: 0;
}

.level-bar .fill {
  height: 100%;
  border-radius: 999px;
}

.level-bar.level-0 .fill { width: 0; }
.level-bar.level-50 .fill { width: 50%; background: var(--color-warning); }
.level-bar.level-75 .fill { width: 75%; background: var(--color-primary); }
.level-bar.level-100 .fill { width: 100%; background: var(--color-success); }

.level-label {
  font-size: 0.78rem;
  font-weight: 700;
}

.level-0-text { color: var(--color-text-muted); }
.level-50-text { color: var(--color-warning); }
.level-75-text { color: var(--color-primary); }
.level-100-text { color: var(--color-success); }

.level-pills {
  display: flex;
  gap: 8px;
}

.level-pill {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-neutral-bg);
  cursor: pointer;
}

.level-pill.selected {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ---------- Schedule (stage 2; column layout per Bryan 2026-09-07) ---------- */
/* Colors per Bryan: Server = orange, Host = blue, Lunch = green,
   Dinner = red. The week renders as side-scrolling day columns with a
   "My Shifts" column first so nobody hunts for their own shifts. */

:root {
  --color-server: #d98324;
  --color-server-bg: #fdf1e2;
  --color-host: #2563eb;
  --color-host-bg: #e8effc;
  --color-lunch: #16a34a;
  --color-lunch-bg: #e8f9ef;
  --color-dinner: #e0483e;
  --color-dinner-bg: #fdecea;
}

.sched-week-scroll {
  overflow-x: auto;
  padding-bottom: 6px;
}

.sched-week-cols {
  display: flex;
  gap: 10px;
  min-width: max-content;
}

.sched-day-col {
  width: 178px;
  flex-shrink: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 8px;
}

.sched-day-col.today {
  border: 2px solid var(--color-primary);
}

.sched-day-col.mine-col {
  background: var(--color-primary-tint);
  border-color: #c9d0fb;
}

.sched-col-head {
  font-weight: 800;
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.sched-day-col.mine-col .sched-col-head {
  color: var(--color-primary-dark);
}

.sched-today-tag {
  font-size: 0.62rem;
  color: var(--color-primary);
  font-weight: 700;
}

.sched-sec-head {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 6px;
  margin: 8px 0 5px;
  display: inline-block;
}

.sched-sec-head.sec-server { color: var(--color-server); background: var(--color-server-bg); }
.sched-sec-head.sec-host { color: var(--color-host); background: var(--color-host-bg); }
.sched-sec-head.sec-other { color: var(--color-text-muted); background: var(--color-neutral-bg); }

.sched-shift-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 5px 7px;
  margin-bottom: 5px;
  font-size: 0.78rem;
}

.sched-shift-card.mine {
  outline: 2px solid var(--color-primary);
  font-weight: 700;
}

.sched-shift-card .sched-nm {
  font-weight: 700;
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

/* The name stretches to fill the row, so the LUNCH/DINNER chip (and the
   manager's ✎ pencil) sit flush at the right edge on EVERY row instead
   of drifting with the name's length. */
.sched-shift-card .sched-nm > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sched-shift-card .sched-tm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.sched-meal {
  font-size: 0.62rem;
  font-weight: 800;
  border-radius: 5px;
  padding: 1px 5px;
  flex-shrink: 0;
}

.sched-meal.lunch { color: var(--color-lunch); background: var(--color-lunch-bg); }
.sched-meal.dinner { color: var(--color-dinner); background: var(--color-dinner-bg); }
.sched-meal.off { color: var(--color-text-muted); background: var(--color-neutral-bg); }

.sched-sec-head.sec-off { color: var(--color-text-muted); background: var(--color-neutral-bg); }

.sched-shift-card.off-card {
  background: var(--color-neutral-bg);
  border-style: dashed;
}

/* ---------- Announcement (pinned to the top of the dashboard) ---------- */

.announcement-card {
  background: var(--color-primary-tint);
  border: 1px solid #c9d0fb;
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 18px;
}

.announcement-card.empty {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
}

.announcement-card .ann-title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}

.announcement-card.empty .ann-title {
  color: var(--color-text-muted);
  font-weight: 600;
}

.announcement-card .ann-body {
  font-size: 0.95rem;
  white-space: pre-wrap;
}

.announcement-card .ann-meta {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 8px;
}

/* "Hasn't turned on notifications yet" icon on the manager Team lists */
.push-off-tag {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Manager view: who has acknowledged the pinned announcement */
.ann-ack-status {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(99, 102, 241, 0.2);
}

.ann-ack-line {
  font-size: 0.8rem;
  margin-top: 4px;
}

.ann-ack-line.ok {
  color: #15803d;
}

.ann-ack-line.wait {
  color: #b45309;
}

/* Employee blocking overlay: must sit above every tab, modal, and the
   full-screen chat view — dismissed only by the Acknowledge button. */
#announcement-ack-overlay {
  z-index: 70;
}

#announcement-ack-overlay .ack-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 14px;
}

/* Draft-week banner with the Publish Now button (managers only) */
.sched-draft-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fef9ec;
  border: 1px solid #f0d98c;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 0.88rem;
}

.sched-conflict-box {
  background: var(--color-warning-bg);
  border: 1px solid #f0d98c;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--color-warning);
  margin-top: 12px;
  line-height: 1.6;
}

.mine-col .sched-day-label {
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--color-primary);
}

.mine-col .sched-sec-tag {
  font-size: 0.62rem;
  color: var(--color-text-muted);
}

.sched-edit-btn {
  border: none;
  background: var(--color-neutral-bg);
  color: var(--color-text-muted);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.7rem;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
}

.sched-edit-btn:hover {
  background: var(--color-primary-tint);
  color: var(--color-primary);
}

.sched-add-btn {
  border: none;
  background: var(--color-neutral-bg);
  color: var(--color-primary);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 10px;
  cursor: pointer;
}

/* Phones (Bryan's request): each column fills the white box, and the
   sideways swipe SNAPS one whole column at a time — page-flip feel,
   never stuck between two days. Desktop keeps the multi-column view. */
.sched-swipe-hint {
  display: none;
}

@media (max-width: 640px) {
  .sched-week-scroll {
    scroll-snap-type: x mandatory;
  }
  .sched-day-col {
    width: calc(100vw - 70px); /* viewport minus page + card padding = full box width */
    scroll-snap-align: start;
  }
  .sched-swipe-hint {
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
  }
}

/* Upload preview grid (desktop verification against the Excel). */
.sched-preview-scroll {
  overflow-x: auto;
}

.sched-preview-table {
  border-collapse: collapse;
  font-size: 0.78rem;
  min-width: 900px;
}

.sched-preview-table th,
.sched-preview-table td {
  border: 1px solid var(--color-border);
  padding: 4px 7px;
  text-align: center;
  white-space: nowrap;
}

.sched-preview-table th {
  background: var(--color-primary-tint);
}

.sched-preview-section th {
  background: var(--color-primary) !important;
  color: #fff;
  text-align: left;
}

.sched-preview-name {
  text-align: left !important;
  font-weight: 700;
  background: #fafbff;
}

.sched-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.sched-name-row select {
  width: auto;
  max-width: 55%;
}

.sched-name-row.unmatched > span::after {
  content: " · no account";
  color: var(--color-warning);
  font-size: 0.78rem;
  font-weight: 700;
}

/* Upload is desktop-only (Bryan: fewer mistakes); phones get a hint. */
.sched-mobile-only { display: none; }

@media (max-width: 640px) {
  .sched-desktop-only { display: none; }
  .sched-mobile-only { display: block; }
}

/* =====================================================================
   Stage 2 (Sign-Up Tracker results): the 2-week progress / period result
   box on the employee Dashboard, and the managers' chips and cards.
   ===================================================================== */
.s2-box { border: 2px solid var(--color-primary); }
.s2-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.s2-head h3 { margin: 0; font-size: 1.05rem; }
.s2-updated { font-size: 0.78rem; color: var(--color-text-muted); margin: 3px 0 10px; }
.s2-tag { font-size: 0.74rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: var(--color-neutral-bg); color: var(--color-text-muted); }
.s2-tag-ok { background: var(--color-success-bg); color: var(--color-success); }
.s2-tag-no { background: var(--color-danger-bg); color: var(--color-danger); }
.s2-tag-blue { background: var(--color-primary-tint); color: var(--color-primary); }
.s2-line { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; font-size: 0.93rem; }
.s2-line b { font-size: 1.05rem; }
.s2-line small { color: var(--color-text-muted); font-weight: 600; }
.s2-bar { height: 9px; border-radius: 999px; background: var(--color-neutral-bg); overflow: hidden; margin-top: 5px; }
.s2-bar > div { height: 100%; border-radius: 999px; }
.s2-fill-ok { background: var(--color-success); }
.s2-fill-mid { background: var(--color-warning); }
.s2-fill-no { background: var(--color-danger); }
.s2-sub { font-size: 0.78rem; margin-top: 4px; color: var(--color-text-muted); }
.s2-good { color: var(--color-success); font-weight: 600; }
.s2-bad { color: var(--color-danger); font-weight: 600; }
.s2-callout { margin-top: 12px; border-radius: 12px; padding: 11px 13px; font-size: 0.86rem; line-height: 1.4; }
.s2-callout > b:first-child { display: block; margin-bottom: 3px; font-size: 0.92rem; }
.s2-callout-bad { background: var(--color-danger-bg); color: #9c2a22; }
.s2-callout-good { background: var(--color-success-bg); color: #0f6b33; }
.s2-callout-blue { background: var(--color-primary-tint); color: #2b3aa8; }
.s2-callout-gray { background: var(--color-neutral-bg); color: var(--color-text-muted); }
.s2-callout-promo { background: var(--color-warning-bg); color: #8a4b0f; }
.s2-pill { display: inline-block; margin-top: 4px; font-size: 0.74rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: #fff; color: var(--color-text-muted); }
.s2-pill-ok { color: var(--color-success); }
.s2-pill-wait { color: var(--color-warning); }
.s2-full-btn { width: 100%; margin-top: 9px; }
.s2-small { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 10px; line-height: 1.4; }
.s2-change { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 4px 0 8px; }
.s2-lvl { font-size: 1.5rem; font-weight: 800; text-align: center; }
.s2-lvl small { display: block; font-size: 0.68rem; font-weight: 600; color: var(--color-text-muted); }
.s2-arrow { font-size: 1.3rem; color: var(--color-text-muted); }
.s2-down { color: var(--color-danger); }
.s2-up { color: var(--color-success); }
.s2-res { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--color-border); font-size: 0.92rem; }

/* Managers */
.s2-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.s2-chip { font-size: 0.73rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; background: var(--color-neutral-bg); color: var(--color-text-muted); }
.s2-chip-ok { background: var(--color-success-bg); color: var(--color-success); }
.s2-chip-no { background: var(--color-danger-bg); color: var(--color-danger); }
.s2-chip-blue { background: var(--color-primary-tint); color: var(--color-primary); }
.s2-pts { color: var(--color-success); font-weight: 800; font-size: 0.85rem; margin-left: 6px; }
.s2-unmatched { border-left: 4px solid var(--color-warning); }
.s2-toast-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--color-border); font-size: 0.9rem; }
.s2-toast-row:first-of-type { border-top: 0; }
.s2-toast-row input { width: 18px; height: 18px; flex-shrink: 0; }
.s2-toast-row.done { color: var(--color-text-muted); text-decoration: line-through; }

/* Stage 2: the one line under the Level card (1 Level Promotion running / ended) */
.s2-level-note { margin-top: 8px; font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.35; }
.s2-level-note b { color: #2b3aa8; }

/* Team Members rows (Bryan 2026-09-29): one line per person + a full-width tracker strip */
.team-row { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.team-row:last-child { border-bottom: 0; }
.team-row-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.team-row-top .row-main { min-width: 0; }
.team-actions { flex-wrap: nowrap; gap: 6px; flex-shrink: 0; }
.btn-icon { width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.team-legend { margin: -2px 0 8px; font-size: 0.78rem; }
.s2-strip { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.s2-promo-line { flex-basis: 100%; font-size: 0.78rem; font-weight: 700; color: #2b3aa8; line-height: 1.35; }
.s2-promo-line small { font-weight: 600; color: var(--color-text-muted); }

/* Month View (desktop, managers) — Bryan 2026-09-29 */
.sched-cal-card { margin-bottom: 18px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.cal-nav { display: flex; gap: 6px; align-items: center; }
.cal-month { font-weight: 800; font-size: 1.05rem; min-width: 170px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted); text-align: center; padding: 2px 0; }
.cal-day { min-height: 64px; border: 1px solid var(--color-border); border-radius: 8px; padding: 4px 6px; background: #fff; font-size: 0.78rem; min-width: 0; }
.cal-day.out { background: #f6f7fb; color: #b0b7c3; }
.cal-day.today { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.cal-day.blackout { background: #fdeceb; border-color: #f3b8b3; }
.cal-day.period-start { border-left: 3px solid var(--color-primary); }
.cal-num { font-weight: 800; font-size: 0.8rem; margin-bottom: 2px; display: flex; justify-content: space-between; align-items: baseline; }
.cal-num small { font-weight: 600; color: var(--color-primary); font-size: 0.66rem; }
.cal-off { display: block; background: var(--color-success-bg); color: #0f6b33; border-radius: 5px; padding: 1px 5px; margin-top: 2px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-off small { font-weight: 600; opacity: 0.8; }
.cal-off.pending { background: #fff4d6; color: #8a4b0f; font-weight: 600; }
.cal-block { display: block; background: #f8c9c4; color: #9c2a22; border-radius: 5px; padding: 1px 5px; margin-top: 2px; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 0.78rem; color: var(--color-text-muted); }
.cal-legend span b { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
/* Upload + Shift Swaps: a little smaller on desktop so the calendar has room */
@media (min-width: 641px) {
  .sched-compact .card h2 { font-size: 1rem; }
  .sched-compact .card .row-sub { font-size: 0.8rem; }
}

/* =====================================================================
   Holiday Shift Sign-Up (js/holiday.js) - from mockup v8
   Green = claimed (final), yellow = waitlist (doesn't count).
   ===================================================================== */
.hb-card h2 { font-size: 1.1rem; }
.hb-min { border-radius: 10px; padding: 9px 11px; font-size: 0.84rem; margin-bottom: 10px; background: #fff4d6; color: #8a4b0f; }
.hb-min.ok { background: var(--color-success-bg); color: #0f6b33; }
.hb-dots { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.hb-dot { font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: rgba(255, 255, 255, 0.75); color: var(--color-text-muted); }
.hb-dot.done { background: #16a34a; color: #fff; }
.hb-dot.wait { background: #f59e0b; color: #fff; }
.hb-countdown { text-align: center; background: var(--color-primary-tint); border-radius: 12px; padding: 12px 10px; margin: 8px 0; }
.hb-countdown .big { font-size: 1.5rem; font-weight: 800; color: var(--color-primary-dark); }
.hb-countdown .small { font-size: 0.8rem; color: var(--color-text-muted); }
.hb-eday { border: 1px solid var(--color-border); border-radius: 10px; background: #fff; padding: 8px 10px; margin-top: 8px; }
.hb-eday.has { border-color: var(--color-success); background: var(--color-success-bg); }
.hb-eday.waitday { border-color: #f59e0b; background: #fffbeb; }
.hb-eday-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 0.9rem; font-weight: 800; }
.hb-eday-top small { font-weight: 600; color: var(--color-text-muted); font-size: 0.74rem; white-space: nowrap; }
.hb-extra { font-size: 0.66rem; font-weight: 700; color: var(--color-text-muted); background: var(--color-neutral-bg); border-radius: 999px; padding: 1px 6px; }
.hb-ebonus { font-size: 0.72rem; font-weight: 700; color: #7c3aed; margin-top: 1px; }
.hb-ebtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.hb-eb { border: 1px solid var(--color-border); background: #fff; border-radius: 8px; padding: 7px 4px; font-size: 0.82rem; font-weight: 700; cursor: pointer; text-align: center; color: var(--color-text); font-family: inherit; }
.hb-eb small { display: block; font-weight: 600; color: var(--color-text-muted); font-size: 0.7rem; }
.hb-eb small.low { color: var(--color-danger); }
.hb-eb.lunch { border-left: 4px solid #22c55e; }
.hb-eb.dinner { border-left: 4px solid #ef4444; }
.hb-eb:disabled { cursor: default; }
.hb-eb.mine { background: #16a34a; color: #fff; border-color: #16a34a; }
.hb-eb.mine small { color: #dcfce7; }
.hb-eb.wait { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.hb-eb.wait small { color: #b45309; }
.hb-eb.full { opacity: 0.65; }
.hb-eb.full[data-hb-join] { opacity: 1; background: var(--color-neutral-bg); }
.hb-note { font-size: 0.8rem; background: var(--color-neutral-bg); border-radius: 8px; padding: 8px 10px; margin-top: 10px; }
.hb-modal-name { font-weight: 700; margin-bottom: 10px; }
.hb-modal-warn { background: var(--color-danger-bg); color: #9c2a22; border-radius: 8px; padding: 9px 11px; font-size: 0.86rem; font-weight: 600; }
.hb-modal-warn.yellow { background: #fef3c7; color: #92400e; }

/* manager */
.hb-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hb-sw { width: 46px; height: 26px; border-radius: 99px; background: #16a34a; position: relative; border: none; cursor: pointer; flex-shrink: 0; }
.hb-sw::after { content: ""; position: absolute; top: 3px; left: 23px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.hb-sw.off { background: #cbd5e1; }
.hb-sw.off::after { left: 3px; }
.hb-status { font-size: 0.7rem; font-weight: 800; border-radius: 999px; padding: 3px 9px; white-space: nowrap; margin-left: 6px; vertical-align: middle; }
.hb-status.open { background: var(--color-success-bg); color: #0f6b33; }
.hb-status.soon { background: #fff4d6; color: #8a4b0f; }
.hb-status.closed { background: var(--color-neutral-bg); color: var(--color-text-muted); }
.hb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hb-chip { border: 1px solid var(--color-border); background: #fff; border-radius: 999px; padding: 6px 11px; font-size: 0.82rem; font-weight: 600; cursor: pointer; color: var(--color-text); font-family: inherit; }
.hb-chip.on { background: var(--color-primary-tint); border-color: var(--color-primary); color: var(--color-primary-dark); }
.hb-scroll { overflow-x: auto; }
.hb-spots { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.hb-spots th { font-size: 0.7rem; color: var(--color-text-muted); font-weight: 700; padding: 3px; text-align: center; }
.hb-spots th:first-child { text-align: left; }
.hb-spots td { padding: 3px; border-top: 1px solid var(--color-border); text-align: center; }
.hb-spots td:first-child { text-align: left; white-space: nowrap; font-weight: 600; }
.hb-spots input[type="number"] { width: 54px; padding: 5px 6px; font-size: 0.85rem; text-align: center; }
.hb-spots input.pts-in { width: 66px; }
.hb-help { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 6px; }
.hb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hb-two > div { min-width: 0; }
@media (max-width: 520px) { .hb-two { grid-template-columns: 1fr; } }
.hb-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; }
.hb-inline input { width: 70px; padding: 7px 9px; }
.hb-infobox { background: var(--color-primary-tint); border-radius: 10px; padding: 9px 11px; font-size: 0.82rem; margin-top: 12px; line-height: 1.5; }
.hb-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.hb-round { border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 12px; margin-top: 10px; background: #fff; }
.hb-round summary { cursor: pointer; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; list-style: none; }
.hb-round summary::-webkit-details-marker { display: none; }
.hb-round-title { font-weight: 800; }
.hb-round-sum { font-size: 0.76rem; color: var(--color-text-muted); }
.hb-shift { margin-top: 10px; }
.hb-shift-top { display: flex; justify-content: space-between; gap: 8px; font-size: 0.82rem; font-weight: 700; }
.hb-shift-top > span { color: var(--color-text-muted); font-weight: 600; }
.hb-role { font-size: 0.66rem; font-weight: 800; border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
.hb-role.server { background: #ffedd5; color: #9a3412; }
.hb-role.host { background: #dbeafe; color: #1e40af; }
.hb-bar { height: 7px; background: var(--color-neutral-bg); border-radius: 99px; overflow: hidden; margin: 4px 0 6px; }
.hb-bar b { display: block; height: 100%; background: var(--color-primary); border-radius: 99px; }
.hb-bar b.full { background: var(--color-success); }
.hb-names { display: flex; flex-wrap: wrap; gap: 5px; }
.hb-name { font-size: 0.78rem; background: #eef0ff; border-radius: 6px; padding: 2px 7px; display: inline-flex; align-items: center; gap: 5px; }
.hb-name i { font-style: normal; color: var(--color-text-muted); font-size: 0.7rem; }
.hb-name em { font-style: normal; font-size: 0.68rem; color: var(--color-text-muted); }
.hb-name.wait { background: #fff4d6; color: #8a4b0f; }
.hb-name button { border: none; background: none; color: var(--color-text-muted); cursor: pointer; padding: 0 0 0 2px; font-size: 0.85rem; line-height: 1; }
.hb-copy { background: #15161d; color: #e5e7f0; border-radius: 10px; padding: 10px 12px; font-size: 0.76rem; white-space: pre; overflow-x: auto; margin-top: 10px; font-family: ui-monospace, Consolas, monospace; }
.hb-cap { background: var(--color-success-bg); color: #0f6b33; border-radius: 10px; padding: 8px 11px; font-size: 0.82rem; margin-top: 8px; }
.hb-cap.bad { background: var(--color-danger-bg); color: #9c2a22; }
.hb-track { width: 100%; border-collapse: collapse; font-size: 0.83rem; margin-top: 8px; }
.hb-track th { text-align: left; font-size: 0.72rem; color: var(--color-text-muted); font-weight: 700; padding: 5px 6px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.hb-track td { padding: 5px 5px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.hb-track .c { text-align: center; }
.hb-track select { width: auto; padding: 4px 6px; font-size: 0.8rem; }
.hb-host-row td { color: var(--color-text-muted); }
.hb-need { font-size: 0.72rem; font-weight: 800; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.hb-need.met { background: var(--color-success-bg); color: #0f6b33; }
.hb-need.one { background: #fff4d6; color: #8a4b0f; }
.hb-need.two { background: var(--color-danger-bg); color: #9c2a22; }
.hb-how { font-size: 0.76rem; color: var(--color-text-muted); }
.hb-waitcell { background: #fef3c7; color: #92400e; border-radius: 5px; padding: 1px 6px; font-weight: 700; }
.hb-assign { display: inline-flex; gap: 6px; align-items: center; }
.hb-assign select { max-width: 150px; padding: 4px 6px; font-size: 0.78rem; }
.hb-skip { margin-top: 10px; font-size: 0.86rem; }
.hb-skip summary { cursor: pointer; color: var(--color-text-muted); }
.hb-skip-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--color-border); }
.hb-skip-row select { width: auto; padding: 4px 6px; font-size: 0.8rem; }
.hb-settings summary { cursor: pointer; list-style: none; }
.hb-settings summary::-webkit-details-marker { display: none; }
details.card.hb-settings { padding: 16px 18px; }
.hb-bonus-day { border-top: 1px solid var(--color-border); padding-top: 10px; margin-top: 10px; }
.hb-bonus-title { margin-bottom: 4px; }
.bonus-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--color-border); font-size: 0.88rem; flex-wrap: wrap; }
.bonus-row label { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 0 6px; font-weight: 400; font-size: 0.84rem; }
.bonus-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--color-primary); }
.bonus-row .who { min-width: 130px; font-weight: 600; }
.bonus-row .pts { margin-left: auto; font-size: 0.82rem; font-weight: 800; color: #7c3aed; white-space: nowrap; }
.bonus-row .pts.zero { color: var(--color-text-muted); }
.hb-hist-title { font-weight: 700; font-size: 0.86rem; margin: 14px 0 2px; }

/* =====================================================================
   Desktop sidebar layout (Bryan 2026-09-29, preview-desktop-sidebar.html)
   901px and wider: the tabs become a left sidebar (can shrink to icons,
   js/sidebar.js) and the page uses the whole width with boxes side by
   side. 641-900px keeps the pill tabs; phones keep the bottom nav — both
   exactly as before.
   ===================================================================== */
.sidebar,
.page-title,
.chat-empty-pane,
.hb-pop-title { display: none; }

:root { --sb-w: 230px; }
body.sb-mini { --sb-w: 76px; }

@media (min-width: 901px) {
  .topbar,
  .tabs { display: none; }

  /* ---- Sidebar ---- */
  .sidebar {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--sb-w); z-index: 30;
    background: var(--color-surface); border-right: 1px solid var(--color-border);
    padding: 18px 12px; transition: width 0.18s;
  }
  .sb-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
  .sb-brand img { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; }
  .sb-brand b { display: block; font-size: 1.02rem; white-space: nowrap; }
  .sb-brand small { color: var(--color-text-muted); font-size: 0.75rem; font-weight: 600; }
  .sb-nav { display: flex; flex-direction: column; gap: 4px; }
  .sb-item {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px;
    border: none; background: none; border-radius: 12px; cursor: pointer; text-align: left;
    font-size: 0.95rem; font-weight: 600; color: var(--color-text-muted); white-space: nowrap;
  }
  .sb-item:hover { background: var(--color-neutral-bg); color: var(--color-text); }
  .sb-item.active { background: var(--color-primary-tint); color: var(--color-primary); }
  .sb-item .icon { font-size: 1.2rem; width: 24px; text-align: center; }
  .sb-count { margin-left: auto; background: var(--color-danger); color: #fff; border-radius: 999px; font-size: 0.7rem; font-weight: 700; padding: 1px 7px; }
  .sb-dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--color-danger); }
  .sb-foot { margin-top: auto; border-top: 1px solid var(--color-border); padding: 14px 6px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .sb-foot .avatar-circle { flex-shrink: 0; cursor: pointer; }
  .sb-who {
    flex: 1; min-width: 0; border: none; background: none; padding: 0; text-align: left; cursor: pointer;
    font-weight: 700; font-size: 0.88rem; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sb-who small { display: block; font-weight: 600; color: var(--color-text-muted); font-size: 0.72rem; }
  .sb-who:hover small { color: var(--color-primary); }
  .sb-logout {
    flex-basis: 100%; background: none; border: 1px solid var(--color-border); border-radius: 8px;
    padding: 5px 10px; font-size: 0.78rem; color: var(--color-text); cursor: pointer; white-space: nowrap;
  }
  .sb-logout:hover { border-color: var(--color-primary); color: var(--color-primary); }
  .sb-logout-ico { display: none; }

  /* The ‹ / › shrink button, halfway down the edge so everyone sees it */
  .sb-toggle {
    position: absolute; top: 50%; transform: translateY(-50%); right: -15px; width: 30px; height: 30px;
    border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface);
    color: var(--color-text-muted); font-size: 1.05rem; font-weight: 700; line-height: 1; cursor: pointer;
    box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; padding: 0;
  }
  .sb-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); }

  /* Shrunk: icons only (hover shows the name), badges sit on the icon */
  .sb-mini .sidebar { padding: 18px 10px; }
  .sb-mini .sb-brand { justify-content: center; padding: 4px 0 18px; }
  .sb-mini .sb-brand > div,
  .sb-mini .sb-label,
  .sb-mini .sb-who,
  .sb-mini .sb-logout-txt { display: none; }
  .sb-mini .sb-item { justify-content: center; padding: 12px 0; position: relative; }
  .sb-mini .sb-item .icon { font-size: 1.35rem; }
  .sb-mini .sb-count { position: absolute; top: 3px; right: 6px; margin: 0; font-size: 0.62rem; padding: 0 5px; }
  .sb-mini .sb-dot { position: absolute; top: 8px; right: 14px; margin: 0; }
  .sb-mini .sb-foot { flex-direction: column; padding: 14px 0 0; }
  .sb-mini .sb-logout { flex-basis: auto; padding: 6px 8px; }
  .sb-mini .sb-logout-ico { display: inline; }

  /* ---- The right side uses the whole screen (capped on huge monitors) ---- */
  .page { max-width: none; margin: 0 0 0 var(--sb-w); padding: 26px 30px 40px; transition: margin 0.18s; }
  .tab-panel { max-width: 1640px; }
  .page-title { display: block; font-size: 1.35rem; font-weight: 800; margin: 0 0 18px; }

  .dk-grid-2,
  .dk-grid-3 { display: grid; gap: 18px; align-items: start; }
  .dk-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dk-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dk-col { min-width: 0; }

  /* Team: the member list in two columns on wide screens */
  #team-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; }
  #team-list > .empty-state,
  #team-list > .spinner-text { grid-column: 1 / -1; }
  #team-list .team-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

  /* Employee dashboard: points beside the 2-week progress */
  .dash-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .dash-grid:has(> #stage2-box.hidden) { grid-template-columns: 1fr; }

  /* Schedule: the whole week fits (no sideways swipe on a 1366px+ screen);
     in narrower columns the full name gets its own line. */
  .sched-week-cols { min-width: 100%; }
  .sched-day-col { flex: 1 0 118px; width: auto; min-width: 0; }
  .sched-shift-card .sched-nm { flex-wrap: wrap; row-gap: 3px; }
  .sched-shift-card .sched-nm > span:first-child { flex-basis: 100%; }
  .sched-shift-card .sched-nm .sched-edit-btn { margin-left: auto; }

  /* Month View with the Holiday switch, Time-Off and Blackouts beside it */
  .sched-cal-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .sched-cal-row > * { min-width: 0; }
  #hb-switch-slot .hb-switch-card { border: 2px solid #c6efd6; }

  /* Holiday ON: one box under the calendar row — sign-up list | tracker */
  #hb-admin.hb-pop {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 0 18px; align-items: start;
    border: 2px dashed #9fd9b4; border-radius: 20px; padding: 16px 16px 0; margin-bottom: 18px; background: #f3fbf6;
  }
  #hb-admin.hb-pop.hidden { display: none; }
  #hb-admin.hb-pop > * { grid-column: 1 / -1; min-width: 0; }
  #hb-admin.hb-pop > .hb-season-card,
  #hb-admin.hb-pop > .hb-tracker-card { grid-column: auto; }
  .hb-pop-title { display: block; font-weight: 800; font-size: 1.05rem; margin: 0 0 12px; color: #0f6b33; }

  /* Team member Holiday Shifts: the holidays side by side */
  #hb-employee { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; align-items: start; }
  #hb-employee.hidden { display: none; }
  #hb-employee > :not(.hb-eday) { grid-column: 1 / -1; }
  #hb-employee .hb-eday { margin: 0; }

  /* Rewards: boxes fill the row */
  .reward-tile-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
  .reward-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

  /* Chat: list on the left, open conversation on the right (no full-screen takeover) */
  #tab-chat.active {
    display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px;
    height: calc(100vh - 66px); max-width: none;
  }
  #tab-chat #chat-inbox-view.hidden { display: block !important; }
  #tab-chat #chat-inbox-view { min-height: 0; }
  #tab-chat #chat-inbox-view .card { height: 100%; overflow-y: auto; margin: 0; }
  #chat-conversation-view:not(.hidden) { position: static; inset: auto; z-index: auto; background: none; min-height: 0; }
  #chat-conversation-view .card {
    height: 100%; max-width: none; margin: 0; padding: 16px 18px;
    border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow);
  }
  #chat-back-btn { display: none; }
  #chat-conversation-view.hidden + .chat-empty-pane {
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: var(--color-chat-bg); border-radius: var(--radius); color: var(--color-text-muted);
    font-weight: 600; font-size: 0.95rem; line-height: 2;
  }
  .conv-row.selected { background: var(--color-primary-tint); border-radius: 12px; }
}

@media (min-width: 901px) and (max-width: 1250px) {
  #team-list { grid-template-columns: 1fr; }
  .dk-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 901px) and (max-width: 1150px) {
  #hb-admin.hb-pop { grid-template-columns: 1fr; }
  #hb-admin.hb-pop > .hb-season-card,
  #hb-admin.hb-pop > .hb-tracker-card { grid-column: 1 / -1; }
}

/* Sub-menus inside a tab (manager page, Bryan 2026-09-30) */
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; padding: 5px; background: #fff; border: 1px solid var(--color-border); border-radius: 999px; width: fit-content; max-width: 100%; }
.subnav button { border: 0; background: transparent; font: inherit; font-size: 0.86rem; font-weight: 700; color: var(--color-text-muted); padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.subnav button.on { background: var(--color-primary); color: #fff; }
.subnav-n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 0.7rem; line-height: 18px; text-align: center; }
.subnav button.on .subnav-n { background: #fff; color: var(--color-primary); }
.sub-off { display: none !important; }
@media (max-width: 640px) {
  .subnav { flex-wrap: nowrap; overflow-x: auto; border-radius: 14px; width: auto; scrollbar-width: none; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav button { flex-shrink: 0; }
  /* The announcement has its own sub-menu now, so it no longer jumps above the list. */
  #tab-team #announcement-slot { order: 0; }
}

/* Redemption tab: only one column shows at a time now, so it takes the full width. */
.dk-grid-2.dk-grid-sub { grid-template-columns: minmax(0, 1fr); }

/* Desktop (option A, Bryan 2026-09-30): the sub-menu lives in the left sidebar,
   under the open tab. The pills on the page only show when the sidebar is
   shrunk to icons (and on tablets/phones, which have no sidebar). */
.sb-sub { display: none; }
@media (min-width: 901px) {
  .sb-sub.open { display: flex; flex-direction: column; gap: 2px; margin: 0 0 6px 22px; padding-left: 12px; border-left: 2px solid var(--color-border); }
  .sb-sub button { border: 0; background: transparent; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--color-text-muted); text-align: left; padding: 7px 10px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
  .sb-sub button:hover { background: var(--color-neutral-bg); color: var(--color-text); }
  .sb-sub button.on { color: var(--color-primary); font-weight: 800; background: var(--color-primary-tint); }
  .sb-sub .subnav-n { margin-left: auto; }
  .sb-sub .subnav-n.hidden { display: none; }
  body:not(.sb-mini) .tab-panel .subnav { display: none; }
  .sb-mini .sb-sub.open { display: none; }
}

/* ---------- Schedule: By Day / By Person switch + date tabs (Bryan 2026-10-01) ---------- */
.sched-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.sv-switch { display: inline-flex; padding: 3px; background: var(--color-neutral-bg); border-radius: 999px; margin-left: auto; }
.sv-switch button { border: 0; background: transparent; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--color-text-muted); padding: 5px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.sv-switch button.on { background: #fff; color: var(--color-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
/* Date strip (7shifts style): all days in one row, no sliding. */
.sched-day-tabs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; flex: 1 1 320px; max-width: 520px; }
.sched-day-tabs button { border: 0; background: transparent; font: inherit; color: var(--color-text-muted); padding: 5px 0 4px; border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; }
.sched-day-tabs button small { font-size: 0.68rem; font-weight: 600; }
.sched-day-tabs button b { font-size: 1.1rem; font-weight: 800; line-height: 1.25; color: var(--color-text); }
.sched-day-tabs button i { width: 5px; height: 5px; border-radius: 50%; margin-top: 1px; }
.sched-day-tabs button i.dot { background: var(--color-text-muted); }
.sched-day-tabs button:hover { background: var(--color-neutral-bg); }
.sched-day-tabs button.today small, .sched-day-tabs button.today b { color: var(--color-primary); }
.sched-day-tabs button.on { background: var(--color-primary); box-shadow: 0 3px 8px rgba(74, 92, 240, 0.35); }
.sched-day-tabs button.on small, .sched-day-tabs button.on b { color: #fff; }
.sched-day-tabs button.on i.dot { background: #fff; }
@media (max-width: 640px) {
  .sched-toolbar { flex-direction: column-reverse; align-items: stretch; }
  .sched-day-tabs { flex: none; max-width: none; }
  .sv-switch { margin: 0 auto; }
  .sched-week-scroll.pg-scroll { scroll-snap-type: none; }
}

/* By Person grid */
.pg-scroll { border: 1px solid var(--color-border); border-radius: 12px; background: #fff; padding-bottom: 0; }
.pg { display: grid; grid-template-columns: 170px repeat(7, minmax(112px, 1fr)); min-width: max-content; width: 100%; }
.pg > div { border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); padding: 6px; min-width: 0; }
.pg-corner, .pg-name { position: sticky; left: 0; z-index: 2; background: #fff; }
.pg-dayhead { text-align: center; font-weight: 800; font-size: 0.82rem; background: var(--color-bg); padding: 8px 4px !important; }
.pg-dayhead small { display: block; font-weight: 600; font-size: 0.68rem; color: var(--color-text-muted); margin-top: 1px; }
.pg-dayhead.today { background: var(--color-primary-tint); color: var(--color-primary-dark); box-shadow: inset 0 3px 0 var(--color-primary); }
.pg-add { display: block; margin: 4px auto 0; border: 1px dashed var(--color-border); background: #fff; border-radius: 6px; font: inherit; font-size: 0.66rem; font-weight: 700; color: var(--color-text-muted); padding: 1px 8px; cursor: pointer; }
.pg-add:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pg-corner { background: var(--color-bg); font-size: 0.72rem; font-weight: 700; color: var(--color-text-muted); display: flex; align-items: flex-end; }
.pg > .pg-sec { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 10px; border-right: 0; }
.pg-sec.sec-server { color: var(--color-server); background: var(--color-server-bg); }
.pg-sec.sec-host { color: var(--color-host); background: var(--color-host-bg); }
.pg-sec.sec-other, .pg-sec.sec-off { color: var(--color-text-muted); background: var(--color-neutral-bg); }
.pg-name { display: flex; align-items: center; gap: 8px; }
.pg-av { width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary-tint); color: var(--color-primary-dark); font-weight: 800; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pg-name > div { min-width: 0; }
.pg-name b { display: block; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-name small { display: block; font-size: 0.68rem; color: var(--color-text-muted); font-weight: 600; }
.pg > .pg-row-me { background: var(--color-primary-tint); }
.pg-row-me .pg-av { background: #fff; }
.pg-cell { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.pg-cell.today { background: #f7f8ff; }
.pg-cell.empty::after { content: "·"; color: #cbd5e1; text-align: center; }
.sq { border-radius: 8px; padding: 4px 7px; font-size: 0.76rem; border: 1px solid var(--color-border); position: relative; }
.sq b { display: block; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.03em; }
.sq b em { font-style: normal; color: var(--color-text-muted); margin-left: 4px; }
.sq span { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sq.lunch { background: var(--color-lunch-bg); }
.sq.lunch b { color: var(--color-lunch); }
.sq.dinner { background: var(--color-dinner-bg); }
.sq.dinner b { color: var(--color-dinner); }
.sq.off { background: var(--color-neutral-bg); border-style: dashed; text-align: center; }
.sq.off b { color: var(--color-text-muted); font-size: 0.66rem; }
.sq.can-edit { cursor: pointer; }
.sq.can-edit:hover { box-shadow: 0 0 0 2px var(--color-primary); }
.sq-pen { position: absolute; top: 3px; right: 5px; font-size: 0.68rem; font-style: normal; color: var(--color-text-muted); }
.sq-btn { position: absolute; top: 2px; right: 3px; border: 0; background: #fff; border-radius: 6px; font-size: 0.72rem; padding: 0 5px; cursor: pointer; color: var(--color-primary); }
.pg > .pg-foot { background: var(--color-bg); font-size: 0.7rem; font-weight: 700; text-align: center; color: var(--color-text-muted); border-bottom: 0; }
.pg-foot i { font-style: normal; display: block; }
.pg-foot .l { color: var(--color-lunch); }
.pg-foot .d { color: var(--color-dinner); }
.pg-corner.pg-foot { text-align: left; display: block; }
@media (max-width: 640px) {
  .pg { grid-template-columns: 104px repeat(7, 92px); }
  .pg-av { display: none; }
  .pg-name b { font-size: 0.78rem; }
  .sq { padding: 3px 5px; font-size: 0.7rem; }
}

/* Copy Week pop-up (manager) */
.cw-opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--color-border); border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; cursor: pointer; }
.cw-opt.on { border-color: var(--color-primary); background: var(--color-primary-tint); }
.cw-opt.dis { opacity: 0.55; cursor: not-allowed; }
.cw-opt input { margin-top: 3px; width: auto; }
.cw-opt b { display: block; font-size: 0.92rem; }
.cw-opt small { color: var(--color-text-muted); font-size: 0.78rem; }
.cw-tag { display: inline-block; font-size: 0.66rem; font-weight: 800; border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.cw-tag.empty { background: var(--color-neutral-bg); color: var(--color-text-muted); }
.cw-tag.draft { background: #fef9ec; color: #92700c; border: 1px solid #f0d98c; }
.cw-tag.pub { background: var(--color-lunch-bg); color: var(--color-lunch); }

/* By Person: manager right-click menu, copied-shift bar, Shift-drag copy */
.pg.can-ctx { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.pg.can-ctx .pg-cell { cursor: context-menu; }
.pg-cell.paste-ok { outline: 2px dashed #c9d0fb; outline-offset: -3px; }
.pg-cell.drop-ok { outline: 2px solid var(--color-primary); outline-offset: -3px; background: var(--color-primary-tint); }
.pg-cell.drop-no { outline: 2px solid var(--color-danger); outline-offset: -3px; }
.sq.copied { box-shadow: 0 0 0 2px var(--color-primary); }
.sched-ctx { position: fixed; z-index: 100; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.22); padding: 6px; min-width: 200px; }
.sched-ctx .ctx-h { font-size: 0.7rem; font-weight: 700; color: var(--color-text-muted); padding: 4px 10px 6px; border-bottom: 1px solid var(--color-border); margin-bottom: 4px; }
.sched-ctx button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; font: inherit; font-size: 0.88rem; font-weight: 600; text-align: left; padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--color-text); }
.sched-ctx button:hover { background: var(--color-neutral-bg); }
.sched-ctx button.danger { color: var(--color-danger); }
.sched-ctx button:disabled { opacity: 0.4; cursor: not-allowed; }
.sched-ctx button small { margin-left: auto; color: var(--color-text-muted); font-weight: 600; font-size: 0.72rem; }
.sched-clip-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 90; background: #0f172a; color: #fff; border-radius: 999px; padding: 8px 8px 8px 16px; font-size: 0.82rem; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); max-width: 94vw; }
.sched-clip-bar.hidden, .sched-ctx.hidden { display: none; }
.sched-clip-bar button { border: 0; background: #334155; color: #fff; font: inherit; font-weight: 700; font-size: 0.78rem; border-radius: 999px; padding: 4px 12px; cursor: pointer; flex-shrink: 0; }
.sched-drag-ghost { position: fixed; z-index: 110; pointer-events: none; opacity: 0.92; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25); }
body.sched-dragging, body.sched-dragging * { cursor: copy !important; }
@media (max-width: 640px) { .sched-clip-bar { bottom: 84px; border-radius: 14px; } }

/* Schedule job codes pop-up (manager) */
.jc-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-top: 1px solid var(--color-border); border-radius: 8px; }
.jc-row:first-child { border-top: 0; }
.jc-row.recolor { background: var(--color-primary-tint); }
.jc-dot { width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--color-border); cursor: pointer; padding: 0; }
.jc-dot:disabled { cursor: default; }
.jc-name { font-weight: 700; font-size: 0.92rem; flex: 1; min-width: 0; }
.jc-name small { display: block; font-weight: 600; font-size: 0.72rem; color: var(--color-text-muted); }
.jc-tag { font-size: 0.68rem; font-weight: 800; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.jc-x { border: 0; background: transparent; color: var(--color-text-muted); font-size: 0.95rem; width: 28px; text-align: center; }
button.jc-x { cursor: pointer; }
button.jc-x:hover { color: var(--color-danger); }
.jc-add { border-top: 1px solid var(--color-border); margin-top: 6px; padding-top: 12px; }
.jc-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 12px; }
.jc-swatches button { width: 30px; height: 30px; border-radius: 9px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--color-border); cursor: pointer; padding: 0; }
.jc-swatches button.on { box-shadow: 0 0 0 3px #0f172a; }
.jc-hint { flex-basis: 100%; font-size: 0.82rem; color: var(--color-primary-dark); }

/* =====================================================================
   Management Report (Bryan 2026-10-02, js/report.js): manager.html's
   📝 Report tab and report.html (HOU Managers' only page).
   ===================================================================== */
#mr-root .subnav { margin-bottom: 10px; }
#mr-root .mr-stores button.on { background: var(--color-text); }
.mr-compose h2 { font-size: 1.02rem; }
.mr-compose textarea { min-height: 110px; }
#mr-problem-body { min-height: 80px; }
.mr-guide { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; color: var(--color-text-muted); margin: 6px 2px 10px; }
.mr-counter { white-space: nowrap; font-weight: 700; }
.mr-counter.ok { color: var(--color-success); }
.mr-q { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.9rem; font-weight: 600; margin: 4px 0 10px; }
.mr-yn { display: inline-flex; border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; background: var(--color-surface); }
.mr-yn button { border: 0; background: transparent; font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--color-text-muted); padding: 6px 16px; cursor: pointer; }
.mr-yn button.on { background: var(--color-primary); color: #fff; }
#mr-comp-detail { margin-bottom: 10px; }
.mr-wide { width: 100%; }
#mr-open-problem { margin-bottom: 12px; }
.mr-store-pick { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); }
.mr-store-pick button { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; padding: 5px 14px; font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--color-text-muted); cursor: pointer; }
.mr-store-pick button.on { background: var(--color-text); border-color: var(--color-text); color: #fff; }
.mr-levels { display: flex; gap: 8px; margin-bottom: 4px; }
.mr-levels button { flex: 1; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 12px; padding: 9px 4px; font: inherit; font-size: 0.86rem; font-weight: 700; color: var(--color-text-muted); cursor: pointer; }
.mr-levels button[data-mr-level="fyi"].on { background: var(--color-neutral-bg); border-color: var(--color-text-muted); color: var(--color-text); }
.mr-levels button[data-mr-level="help"].on { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); }
.mr-levels button[data-mr-level="urgent"].on { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.mr-day { font-size: 0.76rem; font-weight: 800; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 16px 4px 8px; }
.mr-post, .mr-prob { margin-bottom: 10px; }
.mr-who { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mr-av { width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary-tint); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; flex: none; }
.mr-name { font-weight: 700; font-size: 0.92rem; }
.mr-time { color: var(--color-text-muted); font-size: 0.78rem; }
.mr-chip { margin-left: auto; font-size: 0.7rem; font-weight: 800; border-radius: 6px; padding: 2px 7px; }
.mr-chip.hou { background: #e6f4ff; color: #1769aa; }
.mr-chip.mem { background: #f3e8ff; color: #7a3db8; }
.mr-body { font-size: 0.93rem; white-space: pre-line; overflow-wrap: anywhere; }
.mr-cv { margin-top: 10px; font-size: 0.82rem; border-radius: 8px; padding: 6px 10px; }
.mr-cv.no { background: var(--color-success-bg); color: var(--color-success); }
.mr-cv.yes { background: var(--color-warning-bg); color: var(--color-warning); font-weight: 600; }
.mr-prob { border-left: 5px solid var(--color-border); }
.mr-prob.urgent { border-left-color: var(--color-danger); }
.mr-prob.help { border-left-color: var(--color-warning); }
.mr-prob.done { opacity: 0.8; }
.mr-prob-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.mr-lvl { font-size: 0.7rem; font-weight: 800; border-radius: 6px; padding: 2px 8px; text-transform: uppercase; }
.mr-lvl.urgent { background: var(--color-danger); color: #fff; }
.mr-lvl.help { background: var(--color-warning-bg); color: var(--color-warning); }
.mr-lvl.fyi { background: var(--color-neutral-bg); color: var(--color-text-muted); }
.mr-waiting { font-size: 0.74rem; font-weight: 800; color: var(--color-text-muted); }
.mr-acts { display: flex; gap: 8px; margin-top: 10px; }
.mr-act { flex: 1; border: 0; border-radius: 10px; padding: 9px; font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.mr-act.fix { background: var(--color-success-bg); color: var(--color-success); }
.mr-act.wait { background: var(--color-neutral-bg); color: var(--color-text-muted); }
.mr-act:disabled { opacity: 0.6; }
.mr-fixing { margin-top: 10px; }
.mr-fixing input { margin-bottom: 8px; }
.mr-fixed-note { margin-top: 8px; font-size: 0.82rem; color: var(--color-success); background: var(--color-success-bg); border-radius: 8px; padding: 6px 10px; }
.mr-fixed-toggle { display: block; border: 0; background: none; font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--color-text-muted); padding: 10px 4px; cursor: pointer; }
.mr-brand-store { color: var(--color-text-muted); font-weight: 600; }
/* report.html has no sidebar or bottom nav */
body.report-only .page { padding-top: 16px; }
@media (min-width: 901px) {
  body.report-only .topbar { display: flex; }
  body.report-only .page { max-width: var(--max-width); margin: 0 auto; padding: 22px 16px 40px; }
}
/* Management Report: its own pills (Daily Updates / Problems, All / HOU / MEM)
   stay visible on desktop too (other tabs move theirs into the sidebar). */
@media (min-width: 901px) {
  body:not(.sb-mini) .tab-panel #mr-root .subnav { display: flex; }
}
.nav-two-line { line-height: 1.1; text-align: center; font-size: 0.62rem; }

/* Management Report: problem pictures */
.mr-photo-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.mr-guide-inline { font-size: 0.78rem; color: var(--color-text-muted); }
.mr-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; }
.mr-thumbs:empty { display: none; }
.mr-thumb { position: relative; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-neutral-bg); padding: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; cursor: pointer; }
.mr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mr-thumb-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.75rem; line-height: 22px; padding: 0; cursor: pointer; }
.mr-lightbox { position: fixed; inset: 0; z-index: 95; background: rgba(0, 0, 0, 0.88); display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.mr-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.mr-lightbox-close { position: absolute; top: 14px; right: 18px; color: #fff; font-size: 1.6rem; }

/* Schedule position filter (Bryan 2026-10-02) */
.sched-pos-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.sched-pos-filter > span { font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted); margin-right: 2px; }
.sched-pos-filter button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 0.84rem; font-weight: 700; color: var(--color-text-muted); cursor: pointer; white-space: nowrap; }
.sched-pos-filter button i { width: 9px; height: 9px; border-radius: 50%; background: var(--pos, #888); }
.sched-pos-filter button.on { background: var(--color-text); border-color: var(--color-text); color: #fff; }
.sched-pos-filter button.on i { box-shadow: 0 0 0 2px #fff; }
@media (max-width: 640px) {
  .sched-pos-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sched-pos-filter::-webkit-scrollbar { display: none; }
}

/* Management Only: Manager's Schedule (js/report-schedule.js). The week grid
   itself reuses the team Schedule's .sched-* styles. */
.mrs-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.mrs-week { font-weight: 800; font-size: 0.95rem; min-width: 150px; text-align: center; }
.mrs-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mrs-head h2 { margin: 0; }
.mrs-live { font-size: 0.84rem; color: var(--color-text-muted); background: var(--color-neutral-bg); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.mrs-link { border: 0; background: none; font: inherit; font-weight: 700; color: var(--color-primary); padding: 0 0 0 6px; cursor: pointer; text-decoration: underline; }
.mrs-note { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 2px; overflow-wrap: anywhere; }
.mrs-copy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: 0.85rem; font-weight: 700; color: var(--color-text-muted); }
.mrs-copy select { width: auto; flex: 1 1 200px; max-width: 320px; margin: 0; }
.mrs-nav .sv-switch { margin-left: auto; }
.sq.mrs-sq { background: var(--color-primary-tint); border-color: #c9d0fb; }
.sq .mrs-note { display: block; font-weight: 600; margin-top: 0; }
.pg-cell.mrs-add-cell { cursor: pointer; }
.pg-cell.mrs-add-cell:hover { background: var(--color-primary-tint); }
.pg-cell.mrs-add-cell:hover::after { content: "+ Add"; color: var(--color-primary); font-size: 0.7rem; font-weight: 700; }
.mr-pace { display: inline-block; font-size: 0.7rem; font-weight: 800; border-radius: 6px; padding: 2px 8px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.mr-pace.busy { background: var(--color-dinner-bg); color: var(--color-dinner); }
.mr-pace.steady { background: var(--color-success-bg); color: var(--color-success); }
.mr-pace.slow { background: var(--color-neutral-bg); color: var(--color-text-muted); }
/* Daily Update: which shift + which day (Bryan 2026-10-03) */
.mr-pace.mr-shift { background: var(--color-text); color: #fff; margin-right: 6px; }
.mr-compose input.mr-date { width: auto; min-width: 150px; margin: 0; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; font-size: 0.9rem; font-weight: 600; background: var(--color-surface); color: var(--color-text); }
.mr-date-note { font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted); }
.mr-date-note.past { color: var(--color-dinner); }

/* ---------- Settings (Bryan 2026-10-03) ----------
   ⚙️ in the top right corner opens a popup with the whole-team switches
   (Sign-Up Tracker, Holiday Look). Phones/tablets: a button in the top bar.
   Desktop (no top bar): a pill in the top right corner of the page. */
.topbar button.settings-btn { padding: 5px 8px; margin-right: 8px; font-size: 1rem; line-height: 1; }
.topbar button.link { white-space: nowrap; }
.settings-corner { display: none; }
.settings-modal .card { box-shadow: none; margin: 14px 0 0; }
@media (max-width: 480px) {
  .topbar .brand-role { display: none; }
}
@media (min-width: 901px) {
  .settings-corner {
    display: inline-flex; align-items: center; gap: 6px;
    position: absolute; top: 20px; right: 30px; z-index: 5;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px;
    padding: 7px 14px; font: inherit; font-size: 0.86rem; font-weight: 700; color: var(--color-text-muted); cursor: pointer;
  }
  .settings-corner:hover { border-color: var(--color-primary); color: var(--color-primary); }
  /* Keep the corner clear for it: the Team tab's welcome row (stat chips) stops
     short of the button, and it steps aside on Chat, where the open
     conversation's header uses that corner. */
  .greeting-row { padding-right: 132px; }
  body:has(#tab-chat.active) .settings-corner { display: none; }
}

/* Schedule labor cost + overtime (managers only, js/schedule-labor.js) */
.lab-sum { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 10px; }
/* Short boxes (Bryan: "I dont need the box info that big, big number is okay"):
   label on top, big number with its note beside it, goal on the label line. */
.lab-sum > div { border: 1px solid var(--color-border); border-radius: 12px; padding: 6px 12px; background: var(--color-bg); min-width: 0; display: flex; flex-wrap: wrap; column-gap: 10px; align-items: baseline; align-content: flex-start; }
.lab-sum > div > small { flex: 1 0 100%; }
.lab-sum > div.has-goal > small { flex: 1 1 auto; align-self: center; }
.lab-sum > div > .lab-br { flex: 0 0 100%; height: 0; }
.lab-sum > div > b { flex: 0 0 auto; }
.lab-sum > div > i { flex: 1 1 90px; text-align: right; line-height: 1.2; }
.lab-sum small { display: block; font-size: 0.68rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.lab-sum b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.lab-sum i { display: block; font-style: normal; font-size: 0.7rem; color: var(--color-text-muted); }
.lab-sum .bad { background: var(--color-danger-bg); border-color: #f6c3be; }
.lab-sum .bad b { color: var(--color-danger); }
/* Overtime colors (Bryan 2026-10-03): over 40 h = maroon red (his last pick, after yellow and neon), close to it = grey
   highlight. Red and orange looked too much like the Dinner and Lunch squares. */
.lab-sum .ot-over { background: #f6e4e7; border-color: #800020; }
.lab-sum .ot-over b { color: #800020; }
.lab-sum .ot-over i, .lab-sum .ot-over small { color: #6b2231; }
.lab-sum .ot-near { background: #fbf3cf; border-color: #d9b93b; }
.lab-sum .ot-near b { color: #8a6700; }
.lab-sum .good { background: var(--color-success-bg); border-color: #bfe8cd; }
.lab-sum .good b { color: var(--color-success); }
.lab-goal { display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.lab-goal input { width: 50px; padding: 1px 5px; border: 1px solid #d7d9e6; border-radius: 8px; font: inherit; font-weight: 800; text-align: right; background: #fff; }
.lab-goal .btn { padding: 1px 8px; font-size: 0.68rem; margin-left: 2px; }
.lab-alert { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 10px 12px; font-size: 0.84rem; margin-bottom: 8px; }
.lab-alert.over { background: #f6e4e7; color: #5c0017; }
.lab-alert.near { background: #fbf3cf; color: #6b5000; }
.lab-alert.grey { background: var(--color-neutral-bg); color: var(--color-text-muted); }
.lab-alert > div { flex: 1; min-width: 0; }
.lab-hide { flex-shrink: 0; border: 1px solid currentColor; background: none; border-radius: 999px; padding: 1px 10px; font: inherit; font-size: 0.72rem; font-weight: 700; color: inherit; opacity: 0.75; cursor: pointer; }
.lab-hide:hover { opacity: 1; }
.lab-hidden { font-size: 0.78rem; color: var(--color-text-muted); margin: 0 0 8px 2px; }
.lab-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--color-primary); text-decoration: underline; cursor: pointer; }
.pg-name small + .lab-ot, .pg-name .lab-ot { display: inline-block; border-radius: 999px; font-size: 0.62rem; font-weight: 800; padding: 1px 7px; margin-top: 2px; white-space: nowrap; }
.lab-ot.over { background: #800020; color: #fff; }
.lab-ot.near { background: #f5e6a8; color: #6b5000; }
.lab-ot.miss { background: var(--color-neutral-bg); color: var(--color-text-muted); border: 1px dashed #c7cadb; }
/* No borders or fills (Bryan: "the box too messy ... just color the name"): the person's
   NAME is colored, maroon over 40 h, dark yellow close to it. The shifts past 40 h carry a small
   maroon "OT" word instead of an outline. */
.pg-name.lab-row-over b { color: #800020; }
.pg-name.lab-row-near b { color: #a67c00; }
.sq b em.lab-ot-word { color: #800020; font-weight: 800; }
/* The shifts past 40 h keep a maroon outline (Bryan: "it helps manager know which on starting OT"). */
.sq.lab-over { box-shadow: 0 0 0 2px #800020; }
.pg > .pg-sec { display: flex; justify-content: space-between; gap: 10px; }
.lab-sec { font-weight: 700; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.pg > .lab-foot { font-variant-numeric: tabular-nums; border-top: 1px solid var(--color-border); }
.lab-foot .lf { display: block; height: 21px; line-height: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-foot .lf.v { font-size: 0.8rem; color: var(--color-text); }
.lab-foot .lf b { color: var(--color-text); font-size: 0.74rem; margin-right: 4px; }
.lab-foot .lab-pct { font-style: normal; margin-top: 0; line-height: 17px; }
.lab-foot.actual { background: #fff; border-top: 2px solid var(--color-border); }
.lab-pct { display: inline-block; border-radius: 999px; padding: 0 8px; margin-top: 2px; font-weight: 800; background: var(--color-neutral-bg); color: var(--color-text); }
.lab-pct.ok { background: var(--color-success-bg); color: var(--color-success); }
.lab-pct.hi { background: var(--color-danger-bg); color: var(--color-danger); }
.pay-list { max-height: 55vh; overflow-y: auto; }
.pay-sec { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); background: var(--color-neutral-bg); padding: 5px 10px; border-radius: 8px; margin-top: 10px; }
.pay-sec:first-child { margin-top: 0; }
.pay-sec + .pay-row { border-top: 0; }
.pay-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 2px 7px 10px; border-left: 3px solid var(--pos, var(--color-border)); border-top: 1px solid var(--color-border); font-size: 0.88rem; }
.pay-row small { display: block; font-size: 0.72rem; color: var(--color-text-muted); }
.pay-in { display: flex; align-items: center; gap: 4px; font-weight: 700; flex-shrink: 0; }
.pay-in input { width: 96px; padding: 7px 10px; border: 1px solid #d7d9e6; border-radius: 10px; font: inherit; text-align: right; }
.pay-row.missing .pay-in input { border-color: var(--color-danger); background: var(--color-danger-bg); }
@media (max-width: 700px) {
  .lab-sum { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .lab-sum > div.has-goal { grid-column: 1 / -1; order: 1; }
  .lab-sum > div > i { text-align: left; }
}
@media print { .lab-sum, .lab-alert, .lab-hidden, .lab-foot, .lab-ot, .lab-sec { display: none !important; } }

/* Job codes per team member: tags on the Team tab, tick boxes in Edit */
.jc-mtag { display: inline-block; border-radius: 999px; font-size: 0.66rem; font-weight: 800; padding: 0 8px; margin-left: 2px; color: var(--pos); background: color-mix(in srgb, var(--pos) 14%, #fff); white-space: nowrap; }
.jc-ticks { display: flex; flex-wrap: wrap; gap: 8px; }
.jc-tick { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d7d9e6; border-radius: 999px; padding: 6px 12px; font-size: 0.85rem; font-weight: 700; cursor: pointer; margin: 0; width: auto; }
.jc-tick input { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--color-primary); }
.jc-tick i { width: 9px; height: 9px; border-radius: 50%; background: var(--pos); }
.jc-tick:has(input:checked) { background: var(--color-primary-tint); border-color: var(--color-primary); }

/* FOH / BOH on schedule job codes (Job Codes pop-up) */
.jc-area { border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: 0.66rem; font-weight: 800; padding: 2px 9px; white-space: nowrap; }
button.jc-area { cursor: pointer; }
.jc-area.foh { background: var(--color-success-bg); color: var(--color-success); }
.jc-area.boh { background: var(--color-neutral-bg); color: var(--color-text-muted); border-color: #d7d9e6; }
button.jc-area:hover { border-color: currentColor; }
.jc-area-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.jc-area-pick button { border: 1px solid #d7d9e6; background: #fff; border-radius: 12px; padding: 8px 10px; font: inherit; text-align: left; cursor: pointer; }
.jc-area-pick button b { display: block; font-size: 0.9rem; }
.jc-area-pick button small { display: block; font-size: 0.7rem; color: var(--color-text-muted); }
.jc-area-pick button.on { border-color: var(--color-primary); background: var(--color-primary-tint); box-shadow: 0 0 0 1px var(--color-primary); }

/* ---------------------------------------------------------------------
   Manager permissions (js/manager.js, sql/manager-permissions.sql).
   The database refuses what is switched off; these rules only take the
   buttons away so a manager is not offered something that will be refused.
   --------------------------------------------------------------------- */
.mugm-only { display: none !important; }
body.is-mugm .mugm-only { display: inline-flex !important; }
.mgr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mgr-head h2 { margin: 0; }
.perm-list { max-height: 60vh; overflow-y: auto; }
.perm-grp { margin-top: 12px; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.perm-grp-h { background: var(--color-bg); font-weight: 800; font-size: 0.82rem; padding: 7px 12px; display: flex; justify-content: space-between; gap: 8px; }
.perm-grp-h span { font-weight: 600; color: var(--color-text-muted); font-size: 0.72rem; }
.perm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--color-border); font-size: 0.86rem; font-weight: 600; margin: 0; cursor: pointer; }
.perm-row small { display: block; color: var(--color-text-muted); font-size: 0.74rem; font-weight: 500; }
.perm-row.perm-off { opacity: 0.5; cursor: default; }
.perm-sw { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.perm-sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.perm-sw i { position: absolute; inset: 0; background: #cfd3e1; border-radius: 999px; transition: background 0.15s; }
.perm-sw i::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.15s; }
.perm-sw input:checked + i { background: var(--color-success); }
.perm-sw input:checked + i::before { transform: translateX(18px); }
.perm-sw input:focus-visible + i { box-shadow: 0 0 0 3px var(--color-primary-tint); }
.perm-lock { font-style: normal; font-size: 0.72rem; font-weight: 800; color: var(--color-text-muted); background: var(--color-neutral-bg); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.lab-sum.lab-sum-2 { grid-template-columns: repeat(2, minmax(0, 260px)); }

body.noperm-pay_see #pay-rates-btn,
body.noperm-sched_edit #sched-admin > .card:first-child,
body.noperm-sched_edit #sched-admin-mobile,
body.noperm-sched_edit #copy-week-btn,
body.noperm-sched_publish #sched-publish-draft-btn,
body.noperm-sched_publish #sched-republish-btn,
body.noperm-sched_publish #sched-publish,
body.noperm-sched_approve [data-timeoff-decide-id],
body.noperm-sched_approve [data-swap-decide-id],
body.noperm-sched_approve [data-swap-dismiss-id],
body.noperm-sched_approve [data-remove-blackout-id],
body.noperm-sched_approve #blackout-add-btn,
body.noperm-job_codes #job-codes-btn,
body.noperm-team_invite #open-invite-btn,
body.noperm-team_invite [data-reactivate-id],
body.noperm-team_invite [data-invite-email],
body.noperm-team_invite [data-invite-send],
body.noperm-team_points [data-emp-id],
body.noperm-team_points [data-special-id],
body.noperm-team_points [data-special-cancel-id],
body.noperm-redeem_decide [data-decide-id],
body.noperm-redeem_decide [data-undo-fulfill-id],
body.noperm-redeem_decide [data-special-fulfill-id],
body.noperm-redeem_decide [data-s2-use-id],
body.noperm-reward_list #open-reward-btn,
body.noperm-reward_list [data-edit-reward-id],
body.noperm-announce #announcement-open-btn,
body.noperm-announce #announcement-remove-btn,
body.noperm-announce [data-repost-announcement-id],
body.noperm-settings #s2-switch-btn,
body.noperm-settings #theme-switch-btn,
body.noperm-settings [data-hb-switch] { display: none !important; }
body.noperm-team_edit.noperm-team_promote.noperm-team_invite [data-edit-name-id] { display: none !important; }

/* Permissions for one manager */
.perm-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.perm-diff { font-style: normal; font-size: 0.66rem; font-weight: 800; color: var(--color-primary); background: var(--color-primary-tint); border-radius: 999px; padding: 1px 8px; }
.perm-own-tag { border: 0; background: var(--color-primary-tint); color: var(--color-primary); border-radius: 999px; font: inherit; font-size: 0.68rem; font-weight: 800; padding: 1px 8px; cursor: pointer; }