.reservationPanel{margin-bottom:24px;padding:24px}.reservationHeading{display:flex;justify-content:space-between;gap:16px;align-items:center}.reservationHeading h2{margin:0;font-size:20px}.reservationHeading p{color:var(--muted);margin:8px 0}.reservationPanel button{min-height:44px;cursor:pointer;border:1px solid var(--border,#ccdcd4);border-radius:9px;padding:9px 14px;background:var(--surface,#fff);color:inherit}.reservationPanel button:disabled{opacity:.45;cursor:default}.reservationTabs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.reservationTabs [aria-pressed=true]{background:#d9f4e9;border-color:#278f70}.reservationRows{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}.reservationRow{display:flex;flex-direction:column;align-items:start;gap:6px;text-align:left}.reservationRow small{color:#556960}.reservationEmpty{padding:28px 0;color:#5a6e63}.reservationNotice{padding:12px;background:#fff3d6;border-radius:8px;color:#644c21}.reservationDate,.reservationRules label,.reservationDetail label{display:flex;gap:6px;flex-direction:column;margin:12px 0}.reservationPanel input,.reservationPanel select,.reservationPanel textarea{min-height:44px;max-width:100%;border:1px solid #ccdcd4;border-radius:8px;padding:8px;font:inherit;box-sizing:border-box}.reservationPanel input[type=checkbox]{min-height:auto;align-self:flex-start}.reservationFields{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.reservationFields label{flex:1;min-width:110px}.reservationRules{max-width:780px}.reservationBackdrop{position:fixed;inset:0;z-index:90;background:#10281db3;display:grid;place-items:center;padding:20px}.reservationDetail{background:#fff;border-radius:16px;width:min(100%,1020px);max-height:90vh;overflow:auto;padding:24px;box-sizing:border-box}.reservationColumns{display:grid;grid-template-columns:1fr 1fr;gap:24px}.reservationColumns section{min-width:0}.reservationMessage{background:#f0f6f3;padding:12px;border-radius:10px;margin:10px 0}.reservationMessage p{white-space:pre-wrap;overflow-wrap:anywhere}.reservationActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.reservationDetail small{line-height:1.6}.reservationPanel button:focus-visible{outline:3px solid #138261;outline-offset:2px}@media(max-width:640px){.reservationPanel{padding:16px}.reservationHeading{align-items:start}.reservationColumns{grid-template-columns:1fr}.reservationBackdrop{padding:8px}.reservationDetail{padding:16px;max-height:96vh}.reservationTabs button{flex:1}.reservationDetail .reservationHeading h2{font-size:17px}}

.reservationPanel button.reservationPrimary{background:#14795e;color:white;border-color:#14795e}
:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: oklch(0.205 0.02 250);
  background: oklch(0.985 0.005 170);
  --brand-red: oklch(0.72 0.135 168);
  --brand-red-dark: oklch(0.57 0.115 168);
  --brand-red-soft: oklch(0.8 0.11 168);
  --brand-primary-foreground: oklch(0.19 0.04 168);
  --brand-ink: oklch(0.205 0.02 250);
  --brand-sidebar: oklch(0.97 0.008 175);
  --brand-cream: oklch(0.985 0.005 170);
  --brand-card: oklch(1 0 0);
  --brand-panel: oklch(0.96 0.008 180);
  --brand-border: oklch(0.9 0.012 200);
  --brand-muted: oklch(0.52 0.02 230);
  --brand-gold: oklch(0.8 0.12 150);
  --brand-button-soft: oklch(0.955 0.012 170);
  --brand-success: oklch(0.6 0.13 168);
  --brand-blue: oklch(0.65 0.11 200);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
}

#root {
  min-height: 100vh;
  height: 100vh;
  height: 100dvh;
}

.fallbackScreen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background: var(--brand-cream);
}

.fallbackScreen section {
  display: grid;
  gap: 14px;
  width: min(520px, 100%);
  padding: 24px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: var(--brand-card);
}

.fallbackScreen h1,
.fallbackScreen p {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid color-mix(in oklch, var(--brand-red) 38%, transparent);
  outline-offset: 2px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.appShell {
  display: grid;
  grid-template-columns: 232px 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 12px;
  color: var(--brand-ink);
  background: var(--brand-sidebar);
  border-right: 1px solid var(--brand-border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 8px;
}

.brandMark {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 9px;
  color: var(--brand-primary-foreground);
  background: var(--brand-red);
}

.brand strong {
  display: block;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.brand span,
.topBar p,
.stat span,
.staffRow span,
.meta {
  color: var(--brand-muted);
}

.sidebar .brand span {
  color: var(--brand-muted);
  font-size: 12px;
}

nav {
  display: grid;
  gap: 5px;
}

nav button,
.cardActions button,
.primaryButton,
.iconButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

nav button {
  justify-content: flex-start;
  min-height: 42px;
  padding: 0 12px;
  color: var(--brand-ink);
  background: transparent;
  font-size: 15px;
  font-weight: 650;
}

nav button:hover {
  background: var(--brand-panel);
}

nav button.active {
  color: var(--brand-primary-foreground);
  background: var(--brand-red);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--brand-red-dark) 20%, transparent);
}

.content {
  padding: 28px 32px 40px;
  min-width: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.topBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.topActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.connectionBadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.connectionBadge.online {
  color: oklch(0.38 0.09 168);
  background: oklch(0.93 0.035 170);
}

.connectionBadge.offline {
  color: #7a3d06;
  background: #f5d9aa;
}

.topBar p {
  margin: 0 0 4px;
  font-size: 15px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

h2 {
  font-size: 22px;
}

.primaryButton {
  padding: 0 18px;
  color: var(--brand-primary-foreground);
  background: var(--brand-red);
  font-weight: 750;
  box-shadow: 0 1px 2px color-mix(in oklch, var(--brand-red-dark) 20%, transparent);
}

.statsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 18px;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  background: var(--brand-card);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--brand-ink) 6%, transparent);
}

.stat strong {
  display: block;
  font-size: 30px;
}

.searchBox,
.calendarSearch {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 16px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: var(--brand-card);
}

.searchBox {
  max-width: 760px;
}

.calendarSearch {
  margin-top: 16px;
  background: #fffdfa;
}

.searchBox input,
.calendarSearch input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

.bookingGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}

.rosterGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}

.rosterGrid.withEditor {
  grid-template-columns: minmax(0, 1fr) 380px;
}

.inlineFormPanel {
  max-width: 760px;
  margin: 0 0 18px;
}

.inlineFormPanel .editor {
  position: static;
}

.queue,
.editor,
.panel {
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  background: var(--brand-card);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--brand-ink) 5%, transparent);
}

.queue,
.panel {
  padding: 18px;
}

.bookingCardWrap {
  min-width: 0;
}

.bookingCard {
  padding: 18px;
  border: 1px solid var(--brand-border);
  border-left: 5px solid var(--brand-gold);
  border-radius: 12px;
  background: var(--brand-card);
}

.cardInlineForm {
  margin-top: 8px;
  margin-left: 8px;
  padding-left: 14px;
  border-left: 4px solid var(--brand-red);
}

.cardInlineForm .editor {
  position: static;
}

.bookingCard.pending {
  border-left-color: var(--brand-gold);
}

.bookingCard.accepted {
  border-left-color: var(--brand-success);
}

.bookingCard.seated {
  border-left-color: #286f9d;
}

.bookingCard.cancelled {
  border-left-color: #797979;
}

.bookingTop {
  display: grid;
  gap: 10px;
}

.bookingTop h3 {
  margin-bottom: 6px;
  font-size: 24px;
  line-height: 1.15;
}

.bookingTop p,
.meta,
.notes {
  font-size: 17px;
  line-height: 1.45;
}

.bookingTop p,
.notes {
  margin-bottom: 0;
}

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

.statusBadge {
  height: 34px;
  min-width: 90px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-transform: capitalize;
  text-align: center;
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
}

.statusBadge.pending {
  color: #744308;
  border-color: #efb258;
  background: #fff1cb;
}

.statusBadge.accepted {
  color: #0f563e;
  border-color: var(--brand-success);
  background: #dff4ec;
}

.statusBadge.seated {
  color: #174a75;
  border-color: #2f78b7;
  background: #dff0ff;
}

.statusBadge.cancelled {
  color: #8f2f25;
  border-color: var(--brand-red-soft);
  background: #ffe1dd;
}

.meta {
  margin: 14px 0 8px;
}

.notes {
  color: var(--brand-ink);
}

.cardActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.cardActions button {
  min-height: 44px;
  padding: 0 14px;
  color: var(--brand-ink);
  background: var(--brand-button-soft);
  font-size: 15px;
  font-weight: 750;
}

.danger {
  color: #fff !important;
  background: #92352d !important;
}

.warning {
  color: var(--brand-red-dark) !important;
  background: #f5d9aa !important;
}

.editor {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 14px;
  padding: 18px;
}

.editor.compact {
  position: static;
}

.editorHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.editorHeader h2 {
  margin-bottom: 0;
}

.iconButton {
  width: 48px;
  min-width: 48px;
  padding: 0;
  color: var(--brand-ink);
  background: var(--brand-button-soft);
}

label {
  display: grid;
  gap: 7px;
  font-weight: 750;
}

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  background: var(--brand-card);
  color: var(--brand-ink);
}

textarea {
  resize: vertical;
}

.fieldGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.shiftQuickChoices {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  background: var(--brand-panel);
}

.shiftQuickChoices button {
  min-height: 48px;
  padding: 0 8px;
  color: var(--brand-ink);
  background: #fffdfa;
  font-weight: 900;
}

.shiftQuickChoices button.active {
  color: #fff;
  background: var(--brand-red);
}

.shiftQuickChoices button:last-child.active {
  background: #9d251e;
}

.bossGrid {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
  gap: 18px;
}

.businessSnapshotPanel,
.periodSummaryPanel {
  min-width: 0;
}

.sectionHeader {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.sectionHeader h2,
.sectionHeader p {
  margin-bottom: 0;
}

.sectionHeader p {
  margin-top: 4px;
  color: var(--brand-muted);
  font-weight: 800;
}

.sectionHeader label,
.managementDatePanel label {
  min-width: 220px;
}

.managementDatePanel {
  display: grid;
  gap: 14px;
}

.managementDatePanel h2,
.managementDatePanel p {
  margin-bottom: 0;
}

.managementDatePanel p {
  margin-top: 4px;
  color: var(--brand-muted);
  font-weight: 800;
}

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

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

.rangeQuickButtons button {
  min-height: 42px;
  padding: 0 14px;
  color: var(--brand-ink);
  background: var(--brand-button-soft);
  font-weight: 850;
}

.periodGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}

.periodTile {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 132px;
  padding: 16px 18px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: #fffdfa;
  overflow: hidden;
}

.periodTile strong {
  display: block;
  color: var(--brand-red);
  font-size: 24px;
  line-height: 1.1;
  text-align: center;
}

.periodMetrics {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  min-width: 0;
}

.periodMetrics span {
  color: var(--brand-ink);
  font-size: clamp(16px, 1.05vw, 18px);
  font-weight: 800;
  white-space: nowrap;
}

.periodMetrics em {
  color: var(--brand-red-dark);
  font-size: clamp(16px, 1.05vw, 18px);
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.rosterGrid .periodTile {
  min-height: 146px;
}

.rosterGrid .periodMetrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  width: 100%;
}

.rosterGrid .periodMetrics span,
.rosterGrid .periodMetrics em {
  min-width: 0;
  font-size: clamp(20px, 1.25vw, 22px);
  white-space: nowrap;
}

.rosterGrid .periodTile strong {
  font-size: 28px;
}

.schedulePanel,
.dayPanel {
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: var(--brand-card);
}

.schedulePanel {
  padding: 18px;
  min-width: 0;
}

.scheduleToolbar,
.dayPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.scheduleToolbar h2,
.dayPanelHeader h2 {
  margin-bottom: 0;
}

.scheduleToolbar p {
  margin: 4px 0 0;
  color: var(--brand-muted);
  font-weight: 800;
}

.scheduleToolbar label {
  min-width: 230px;
}

.dateStrip {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
}

.dateCardGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dateCard {
  display: grid;
  gap: 8px;
  min-height: 128px;
  padding: 16px;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  color: var(--brand-ink);
  background: var(--brand-card);
  text-align: left;
  align-content: start;
}

.dateCard.selected {
  color: var(--brand-primary-foreground);
  background: var(--brand-red);
  border-color: var(--brand-red);
}

.dateCard.today {
  border-color: var(--brand-red);
}

.dateCard span,
.dateCard em,
.dateCard i {
  font-weight: 800;
  font-style: normal;
}

.dateCard strong {
  font-size: 28px;
}

.dateCard i {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 8px;
  color: var(--brand-red-dark);
  background: #f5d9aa;
}

.dateCard.selected i {
  color: var(--brand-primary-foreground);
  background: color-mix(in oklch, var(--brand-card) 62%, transparent);
}

.scheduleBody {
  margin-top: 18px;
}

.dayPanel {
  padding: 18px;
  min-width: 0;
}

.dayPanelHeader p {
  margin: 0 0 4px;
  color: var(--brand-muted);
}

.bookingHeaderActions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 14px;
}

.managerFilter {
  min-width: 190px;
}

.managerFilter select {
  min-height: 72px;
  font-size: 20px;
  font-weight: 850;
}

.dayTotals {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border-radius: 8px;
  background: var(--brand-panel);
}

.dayTotals span {
  color: var(--brand-muted);
  font-weight: 800;
}

.dayTotals strong {
  font-size: 30px;
}

.bookingListGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}

.emptyState {
  margin: 18px 0 0;
  padding: 18px;
  border-radius: 8px;
  color: var(--brand-muted);
  background: var(--brand-panel);
  font-weight: 800;
}

.dashboardPanel {
  display: grid;
  gap: 16px;
}

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

.dashboardHeader h2,
.dashboardHeader p {
  margin-bottom: 0;
}

.dashboardHeader p {
  margin-top: 4px;
  color: var(--brand-muted);
  font-weight: 800;
}

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

.dashboardTabs button {
  min-height: 44px;
  padding: 0 14px;
  color: var(--brand-ink);
  background: var(--brand-button-soft);
  font-weight: 850;
}

.dashboardTabs button.active {
  color: var(--brand-primary-foreground);
  background: var(--brand-red);
}

.dashboardSummaryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dashboardSummaryGrid section {
  display: grid;
  gap: 4px;
  min-height: 94px;
  padding: 16px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: #fffdfa;
}

.dashboardSummaryGrid strong {
  font-size: 30px;
}

.dashboardSummaryGrid span {
  color: var(--brand-muted);
  font-weight: 800;
}

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

.managerDashboardList article {
  display: grid;
  align-content: space-between;
  gap: 14px;
  min-height: 118px;
  padding: 14px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: #fffdfa;
}

@media (min-width: 921px) and (max-width: 1180px) {
  .appShell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .content {
    padding: 24px;
  }

  .statsGrid,
  .dashboardSummaryGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stat {
    padding: 16px;
  }

  .dateCard {
    padding: 14px;
  }

  .dateCard strong {
    font-size: 24px;
  }
}

.managerDashboardList strong,
.managerDashboardList span {
  display: block;
  min-width: 0;
}

.managerDashboardList span,
.managerDashboardList em {
  color: var(--brand-muted);
  font-style: normal;
  font-weight: 800;
}

.managerDashboardList em {
  justify-self: end;
}

.wide {
  grid-column: 1 / -1;
}

.snapshotRows {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  font-size: 19px;
}

.snapshotRows strong {
  font-size: 24px;
}

.barRow {
  display: grid;
  grid-template-columns: 64px 1fr 40px;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
}

.barRow div {
  height: 22px;
  border-radius: 999px;
  background: var(--brand-button-soft);
  overflow: hidden;
}

.barRow i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-red);
}

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

.noteList p {
  display: grid;
  gap: 8px;
  margin-bottom: 0;
  padding: 18px;
  border-radius: 8px;
  background: var(--brand-panel);
  font-size: 22px;
  line-height: 1.35;
}

.managerNotesPanel h2 {
  font-size: 30px;
}

.noteList strong,
.noteManagerLine {
  display: block;
  font-size: 22px;
}

.noteManagerLine {
  color: var(--brand-muted);
  font-weight: 800;
}

.rosterTable {
  display: grid;
  gap: 10px;
}

.rosterEmployeeGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 18px;
}

.rosterDepartments {
  display: grid;
  gap: 14px;
}

.rosterDepartment h3 {
  margin: 0;
  color: var(--brand-red-dark);
  font-size: 24px;
}

.rosterEmployeeCard {
  display: grid;
  gap: 10px;
  min-height: 148px;
  padding: 18px;
  border: 1px solid var(--brand-border);
  border-left: 8px solid var(--brand-gold);
  border-radius: 8px;
  background: #fffdfa;
}

.rosterEmployeeCard.offShift,
.monthlyShiftRow.offShift,
.rosterCalendarEvent.offShift {
  border-color: #d86d62;
  border-left-color: #b63a30;
  background: #fff0ed;
}

.rosterEmployeeHeader,
.rosterEmployeeFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.rosterEmployeeCard strong {
  color: #1f66b3;
  font-size: 28px;
  white-space: nowrap;
}

.rosterEmployeeCard span,
.rosterEmployeeCard p,
.rosterEmployeeCard em {
  margin-bottom: 0;
  color: var(--brand-ink);
  font-size: 22px;
  font-style: normal;
  font-weight: 800;
}

.rosterEmployeeCard span,
.rosterEmployeeShift {
  white-space: nowrap;
}

.rosterEmployeeHeader span {
  text-align: right;
}

.rosterEmployeeFooter em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.rosterEmployeeFooter em:empty,
.monthlyShiftRow p em:empty,
.rosterCalendarEvent em:empty {
  display: none;
}

.rosterEmployeeActions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.rosterEmployeeActions .iconButton {
  width: 48px;
  height: 48px;
}

.rosterModeBar {
  display: flex;
  gap: 10px;
  margin: 0 0 18px;
  padding: 8px;
  border-radius: 8px;
  background: var(--brand-panel);
}

.rosterModeBar button {
  border: 0;
  color: var(--brand-ink);
  background: transparent;
}

.rosterModeBar button.active {
  color: #fff;
  background: var(--brand-red);
}

.monthlyRosterControls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.monthlyRosterControls label {
  width: min(100%, 360px);
}

.monthlyRosterGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.monthlyRosterCard {
  container-type: inline-size;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--brand-border);
  border-left: 8px solid var(--brand-gold);
  border-radius: 8px;
  background: #fffdfa;
}

.monthlyRosterHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.monthlyRosterHeader strong,
.monthlyShiftRow strong {
  display: block;
  color: #1f66b3;
  font-size: 26px;
  white-space: nowrap;
}

.monthlyRosterHeader span {
  display: block;
  color: var(--brand-muted);
  font-size: 20px;
  font-weight: 800;
}

.rosterToggleButton {
  min-height: 42px;
  padding: 0 14px;
  color: var(--brand-ink);
  background: var(--brand-button-soft);
  font-weight: 900;
  white-space: nowrap;
}

.monthlyShiftList {
  display: grid;
  gap: 8px;
  max-height: 560px;
  padding-right: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.monthlyShiftRow {
  display: grid;
  grid-template-columns: minmax(145px, 0.9fr) minmax(125px, 1fr) 74px;
  gap: 8px;
  align-items: center;
  min-height: 74px;
  min-width: 0;
  padding: 10px 8px 10px 14px;
  border-radius: 8px;
  background: var(--brand-panel);
}

.monthlyShiftRow p,
.monthlyShiftRow em {
  margin: 0;
  color: var(--brand-ink);
  font-size: clamp(15px, 2.2cqw, 20px);
  font-style: normal;
  font-weight: 800;
}

.monthlyShiftRow.offShift strong,
.monthlyShiftRow.offShift p,
.monthlyShiftRow.offShift em,
.rosterEmployeeCard.offShift strong,
.rosterEmployeeCard.offShift span,
.rosterEmployeeCard.offShift p,
.rosterEmployeeCard.offShift em,
.rosterCalendarEvent.offShift strong,
.rosterCalendarEvent.offShift span,
.rosterCalendarEvent.offShift em {
  color: #9d251e;
}

.monthlyShiftRow strong {
  min-width: 0;
  font-size: clamp(16px, 2.35cqw, 20px);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.monthlyShiftRow p {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-size: clamp(14px, 2cqw, 17px);
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: keep-all;
}

.monthlyShiftRow p span,
.monthlyShiftRow p em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthlyShiftActions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

.monthlyShiftActions .iconButton {
  width: 34px;
  min-width: 34px;
  height: 34px;
}

.monthlyShiftActions .iconButton svg {
  width: 16px;
  height: 16px;
}

.rosterGrid.withEditor .monthlyRosterGrid {
  grid-template-columns: 1fr;
}

.rosterGrid.withEditor .monthlyShiftRow {
  grid-template-columns: minmax(160px, 1fr) minmax(145px, 1fr) 72px;
}

@container (max-width: 460px) {
  .monthlyShiftRow {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .monthlyShiftRow p {
    grid-column: 1;
  }

  .monthlyShiftActions {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

.calendarControls {
  align-items: end;
  gap: 14px;
}

.calendarScopeButtons {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: var(--brand-panel);
}

.calendarScopeButtons button {
  min-height: 48px;
  padding: 0 18px;
  color: var(--brand-ink);
  background: var(--brand-button-soft);
  font-weight: 900;
}

.calendarScopeButtons button.active {
  color: #fff;
  background: var(--brand-red);
}

.rosterCalendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.calendarWeekday {
  color: var(--brand-muted);
  font-size: 18px;
  text-align: center;
}

.rosterCalendarCell {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 132px;
  padding: 8px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: #fffdfa;
}

.rosterCalendarCell.selected {
  border-color: var(--brand-red);
  box-shadow: inset 0 0 0 2px var(--brand-red);
}

.rosterCalendarCell.muted {
  opacity: 0.55;
}

.rosterCalendarCell.hasOff {
  border-color: #d86d62;
  background: #fff7f5;
}

.rosterCalendarCell.hasOff .calendarCellDate span {
  color: #9d251e;
}

.calendarCellDate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.calendarCellDate strong {
  color: var(--brand-ink);
  font-size: 22px;
}

.calendarCellDate span,
.calendarMore {
  color: var(--brand-muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.calendarCellEvents,
.calendarDayEvents {
  display: grid;
  gap: 6px;
}

.weekCalendar {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.weekCalendar .rosterCalendarCell {
  min-height: 360px;
}

.rosterCalendarEvent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  padding: 8px;
  border-left: 5px solid var(--brand-gold);
  border-radius: 7px;
  background: var(--brand-panel);
}

.rosterCalendarEvent strong,
.rosterCalendarEvent span,
.rosterCalendarEvent em {
  display: block;
  min-width: 0;
  color: var(--brand-ink);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.rosterCalendarEvent strong {
  color: #1f66b3;
}

.rosterCalendarActions {
  display: flex;
  gap: 4px;
}

.rosterCalendarActions .iconButton {
  width: 30px;
  height: 30px;
}

.rosterCalendarEvent.compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  min-height: 30px;
  padding: 5px 7px;
  border-left-width: 4px;
}

.rosterCalendarEvent.compact strong,
.rosterCalendarEvent.compact span {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rosterCalendarEvent.compact span {
  color: var(--brand-red-dark);
}

.rosterCalendarDay {
  display: grid;
  gap: 14px;
}

.calendarDayHeader {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: #fffdfa;
}

.calendarDayHeader strong {
  color: var(--brand-ink);
  font-size: 34px;
}

.calendarDayHeader span {
  color: var(--brand-muted);
  font-size: 24px;
  font-weight: 900;
}

.calendarRoleGroup {
  display: grid;
  gap: 10px;
}

.calendarRoleGroup h3 {
  margin: 0;
  color: var(--brand-red-dark);
  font-size: 24px;
}

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

.calendarDayEvents .rosterCalendarEvent {
  min-height: 92px;
  padding: 14px;
}

.calendarDayEvents .rosterCalendarEvent strong {
  font-size: 24px;
}

.calendarDayEvents .rosterCalendarEvent span,
.calendarDayEvents .rosterCalendarEvent em {
  font-size: 20px;
}

.staffRow {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 48px 48px;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: #fffdfa;
}

.staffRow strong,
.staffRow span {
  display: block;
}

.menuGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 18px;
}

.menuIntroPanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
  gap: 18px;
  align-items: center;
}

.menuIntroPanel h2,
.menuIntroPanel p,
.packagePanel h2,
.packagePanel p,
.bomPanel h2,
.catalogueControls h2,
.catalogueControls p {
  margin-bottom: 0;
}

.menuIntroPanel p,
.packagePanel p,
.catalogueControls p {
  margin-top: 6px;
  color: var(--brand-muted);
  font-weight: 800;
}

.menuQuickStats,
.packageSummary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.packageSummary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.menuQuickStats section,
.packageSummary section {
  display: grid;
  gap: 4px;
  min-height: 86px;
  padding: 14px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: #fffdfa;
}

.menuQuickStats strong,
.packageSummary strong {
  color: var(--brand-red-dark);
  font-size: 28px;
  line-height: 1.1;
}

.menuQuickStats span,
.packageSummary span {
  color: var(--brand-muted);
  font-weight: 850;
}

.packagePanel,
.bomPanel,
.menuCataloguePanel {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.packagePanel .sectionHeader {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}

.packagePanel .sectionHeader > div:first-child {
  min-width: 0;
}

.packagePanel .sectionHeader h2,
.packagePanel .sectionHeader p {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
}

.packageInputs,
.catalogueFilters {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 12px;
  min-width: min(100%, 420px);
}

.packageInputs {
  width: 100%;
}

.packageSummary .negative {
  color: #9d251e;
}

.packageEditControls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.packageEditControls label {
  display: grid;
  gap: 8px;
  color: var(--brand-ink);
  font-size: 18px;
  font-weight: 900;
}

.packageEditControls select {
  width: 100%;
}

.packageEditControls button,
.menuItemAddButton,
.packageRemoveButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 900;
}

.packageEditControls button,
.menuItemAddButton {
  padding: 0 18px;
  color: #fff;
  background: var(--brand-red);
}

.customDishBuilder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.65fr);
  gap: 12px;
  align-items: end;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: var(--brand-panel);
}

.customDishBuilder > div:first-child {
  grid-column: 1 / -1;
}

.customDishBuilder h3,
.customDishBuilder p {
  margin: 0;
}

.customDishBuilder h3 {
  color: var(--brand-ink);
  font-size: 20px;
  line-height: 1.15;
}

.customDishBuilder p {
  margin-top: 5px;
  color: var(--brand-muted);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.customDishBuilder label {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: var(--brand-ink);
  font-size: 17px;
  font-weight: 900;
}

.customDishBuilder label:nth-of-type(3) {
  grid-column: 1 / -1;
}

.customDishBuilder button {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  color: #fff;
  background: var(--brand-red);
  font-weight: 900;
  white-space: nowrap;
}

.recommendedMenuList,
.departmentCostList,
.bomDetailList {
  display: grid;
  gap: 10px;
}

.recommendedMenuList article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: #fffdfa;
}

.departmentCostList article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: #fffdfa;
}

.recommendedMenuList strong,
.departmentCostList strong,
.bomDetailList h3,
.menuItemTop strong {
  display: block;
  color: var(--brand-ink);
  font-size: 20px;
  line-height: 1.2;
}

.recommendedMenuList span,
.departmentCostList span,
.bomDetailList p,
.menuItemCard p,
.menuItemCard small,
.menuItemMeta span,
.recommendedMenuList small,
.bomDetailList small {
  color: var(--brand-muted);
  font-weight: 800;
}

.menuItemCard small,
.recommendedMenuList small,
.bomDetailList small {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.25;
}

.recommendedMenuList em,
.departmentCostList em {
  flex: 0 0 auto;
  color: var(--brand-red-dark);
  font-size: 22px;
  font-style: normal;
  font-weight: 900;
}

.recommendedMenuList article > div {
  min-width: 0;
}

.packageMarketPrice {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(120px, 0.55fr) minmax(220px, 1fr);
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(107, 29, 32, 0.12);
}

.packageMarketPrice label {
  gap: 4px;
  color: var(--brand-ink);
  font-size: 13px;
  font-weight: 900;
}

.packageMarketPrice input {
  min-height: 38px;
  padding: 7px 9px;
  font-size: 15px;
}

.packageQuantityControl {
  display: inline-grid;
  grid-template-columns: 38px minmax(86px, auto) 38px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: var(--brand-panel);
}

.packageQuantityControl button {
  min-height: 38px;
  padding: 0;
  color: var(--brand-ink);
  background: transparent;
  font-size: 22px;
  font-weight: 900;
}

.packageQuantityControl span {
  min-width: 0;
  padding: 0 10px;
  color: var(--brand-ink);
  font-size: 16px;
  text-align: center;
  white-space: nowrap;
}

.packageRemoveButton {
  flex: 0 0 48px;
  width: 48px;
  min-height: 48px;
  color: #fff;
  background: #9d251e;
}

.emptyPackageItem {
  min-height: 76px;
}

.bomDetailList {
  max-height: 430px;
  overflow: auto;
}

.bomDetailList section {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 8px;
  background: var(--brand-panel);
}

.bomDetailList p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

.bomDetailList em {
  color: var(--brand-red-dark);
  font-style: normal;
  white-space: nowrap;
}

.catalogueControls {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

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

.menuItemCard {
  display: grid;
  gap: 10px;
  min-height: 176px;
  padding: 16px;
  border: 1px solid var(--brand-border);
  border-left: 7px solid var(--brand-gold);
  border-radius: 8px;
  background: #fffdfa;
}

.menuItemTop {
  display: grid;
  gap: 4px;
}

.menuItemTop span {
  color: var(--brand-red);
  font-size: 16px;
  font-weight: 900;
}

.menuItemTop em {
  color: var(--brand-red-dark);
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
}

.menuItemCard p {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.25;
}

.menuItemMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
}

.menuItemMeta span {
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--brand-panel);
  font-size: 14px;
}

.menuItemAddButton {
  width: fit-content;
  min-height: 44px;
  margin-top: 4px;
}

.secondaryButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--brand-border);
  color: var(--brand-ink);
  background: var(--brand-card);
  font-weight: 700;
}

.userBadge {
  display: grid;
  gap: 1px;
  min-height: 44px;
  padding: 6px 11px;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  background: var(--brand-card);
  text-align: left;
}

.userBadge strong {
  font-size: 14px;
}

.userBadge small {
  color: var(--brand-muted);
  font-size: 11px;
  text-transform: uppercase;
}

.logoutButton {
  border: 1px solid var(--brand-border);
  background: var(--brand-card);
}

.syncAlert,
.migrationBanner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 13px 15px;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  background: var(--brand-card);
}

.syncAlert {
  justify-content: space-between;
  border-color: #e4b36d;
  color: #7a3d06;
  background: #fff8ea;
}

.syncAlert button {
  min-height: 36px;
  padding: 0 12px;
}

.migrationBanner > div {
  display: grid;
  gap: 3px;
  margin-right: auto;
}

.migrationBanner span {
  color: var(--brand-muted);
  font-size: 13px;
}

.authShell {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
  overflow: auto;
  background:
    radial-gradient(circle at 15% 15%, color-mix(in oklch, var(--brand-red) 16%, transparent), transparent 32%),
    var(--brand-cream);
}

.authCard {
  display: grid;
  gap: 26px;
  width: min(440px, 100%);
  padding: 30px;
  border: 1px solid var(--brand-border);
  border-radius: 18px;
  background: color-mix(in oklch, var(--brand-card) 94%, transparent);
  box-shadow: 0 24px 70px color-mix(in oklch, var(--brand-ink) 12%, transparent);
}

.compactAuthCard {
  place-items: center;
  text-align: center;
}

.authCard h1,
.authCard p {
  margin-bottom: 0;
}

.authCard > div > p:not(.eyebrow) {
  margin-top: 9px;
  color: var(--brand-muted);
  line-height: 1.55;
}

.authBrand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.authBrand div {
  display: grid;
  gap: 2px;
}

.authBrand strong {
  font-size: 17px;
}

.authBrand span {
  color: var(--brand-muted);
  font-size: 12px;
}

.authLogo,
.successIcon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  color: var(--brand-primary-foreground);
  background: var(--brand-red);
}

.eyebrow {
  margin-bottom: 7px;
  color: var(--brand-red-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.authCard form,
.invitePanel form {
  display: grid;
  gap: 15px;
}

.authCard label,
.invitePanel label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 750;
}

.authCard input,
.invitePanel input,
.invitePanel select {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  background: var(--brand-card);
}

.authSecurity {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--brand-border);
  color: var(--brand-muted);
  font-size: 12px;
}

.formError {
  margin: 0;
  padding: 10px 12px;
  border-radius: 9px;
  color: #8a2d18;
  background: #fff0eb;
  font-size: 13px;
}

.modalBackdrop {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in oklch, var(--brand-ink) 34%, transparent);
  backdrop-filter: blur(5px);
}

.invitePanel {
  display: grid;
  gap: 20px;
  width: min(500px, 100%);
  max-height: calc(100dvh - 40px);
  padding: 24px;
  overflow: auto;
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  background: var(--brand-card);
  box-shadow: 0 28px 80px color-mix(in oklch, var(--brand-ink) 20%, transparent);
}

.invitePanel h2,
.invitePanel h3,
.invitePanel p {
  margin-bottom: 0;
}

.inviteResult {
  display: grid;
  gap: 13px;
}

.accountIdentity {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--brand-panel);
}

.accountIdentity span {
  color: var(--brand-muted);
  font-size: 13px;
  text-transform: capitalize;
}

.inviteResult code {
  padding: 12px;
  overflow-wrap: anywhere;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  color: var(--brand-muted);
  background: var(--brand-panel);
}

.spin {
  animation: spin .9s linear infinite;
}

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

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

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 3;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
  }

  .brand {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 4px;
  }

  .brandMark {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .brand strong {
    font-size: 14px;
    white-space: nowrap;
  }

  .sidebar .brand div > span {
    display: none;
  }

  nav {
    grid-auto-flow: column;
    gap: 4px;
  }

  nav button {
    width: 46px;
    min-height: 42px;
    padding: 0;
    justify-content: center;
  }

  nav button svg + * {
    display: none;
  }

  .content {
    padding: 18px;
  }

  .statsGrid,
  .bossGrid,
  .bookingGrid,
  .rosterGrid.withEditor,
  .bookingListGrid,
  .noteList,
  .monthlyRosterGrid,
  .menuGrid,
  .menuIntroPanel,
  .menuCatalogueGrid,
  .dashboardSummaryGrid {
    grid-template-columns: 1fr;
  }

  .customDishBuilder {
    grid-template-columns: 1fr;
  }

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

  .calendarWeekday {
    display: none;
  }

  .weekCalendar .rosterCalendarCell {
    min-height: 260px;
  }

  .dateStrip {
    grid-template-columns: 48px 1fr 48px;
  }

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

  .scheduleToolbar,
  .dashboardHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .catalogueControls {
    align-items: stretch;
    flex-direction: column;
  }

  .editor,
  .dayPanel {
    position: static;
  }
}

@media (max-width: 640px) {
  .topBar {
    align-items: stretch;
    flex-direction: column;
  }

  .topActions {
    justify-content: flex-start;
  }

  .topActions .connectionBadge,
  .topActions .userBadge {
    flex: 1 1 auto;
  }

  .migrationBanner {
    align-items: stretch;
    flex-direction: column;
  }

  .authCard {
    padding: 22px;
  }

  h1 {
    font-size: 28px;
  }

  .statsGrid {
    grid-template-columns: 1fr 1fr;
  }

  .fieldGrid,
  .staffRow,
  .rosterEmployeeGrid,
  .monthlyShiftRow,
  .menuQuickStats,
  .packageSummary,
  .packageInputs,
  .packageMarketPrice,
  .catalogueFilters,
  .periodGrid {
    grid-template-columns: 1fr;
  }

  .monthlyRosterControls {
    align-items: stretch;
    flex-direction: column;
    justify-content: stretch;
  }

  .monthlyRosterControls label {
    width: 100%;
  }

  .monthlyShiftActions {
    justify-content: flex-start;
  }

  .calendarScopeButtons {
    flex-wrap: wrap;
  }

  .rosterCalendar,
  .weekCalendar,
  .calendarDayEvents {
    grid-template-columns: 1fr;
  }

  .rosterCalendarCell {
    min-height: 160px;
  }

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

  .periodTile {
    min-height: auto;
  }

  .sectionHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .dateStrip {
    grid-template-columns: 1fr;
  }

  .dateStrip > .iconButton {
    width: 100%;
  }

  .dateCardGrid {
    grid-template-columns: 1fr;
  }

  .scheduleToolbar label,
  .sectionHeader label,
  .managementDatePanel label {
    min-width: 0;
  }

  .dayPanelHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .bookingHeaderActions {
    align-items: stretch;
    flex-direction: column;
  }

  .managerFilter {
    min-width: 0;
  }

  .dashboardTabs button {
    flex: 1;
  }
}