/* app2.css — additional styles for v2 pages (date-bucketed bookings, R&M, master data, notes, calendar) */

/* ============ STICKY BOOKINGS HEADER (action bar + date tabs) ============ */
/* Freezes the booking-status legend, action buttons, and date tabs at the
   top of the viewport when the user scrolls down through Current Bookings. */
/* .page's own top padding is shrunk for this page (see .page:has() below) so
   the sticky bar sits close to the top; only left/right bleed into the page
   gutters, no top/bottom padding-cancelling trick needed anymore. */
.page:has(.bookings-sticky) { padding-top: 0; }
.bookings-sticky {
  position: sticky;
  top: 0; /* .page is its own scroll region now; topbar is a fixed sibling, not part of this scroll */
  z-index: 9;
  margin: 0 -32px 12px;
  padding: 0 32px;
  background: var(--color-grey-100);
}

/* Filter-this-page (topbar magnifier): rows that don't match are hidden. */
.plc-filter-hidden { display: none !important; }

/* The magnifier's filter field must appear whenever it is toggled open — the
   original rule lived inside a max-width media query, so on wider viewports
   (and in the desktop preview) clicking the icon appeared to do nothing. */
html.plc-mobile .topbar__search--mobile-open { display: block !important; position: absolute !important; left: 16px; right: 16px; top: calc(100% + 8px); z-index: 80; margin-left: 0; max-width: none; background: #fff; border-radius: var(--radius-md); box-shadow: 0 14px 36px rgba(11,31,58,0.18); }
@media (max-width: 900px) { .topbar__search--mobile-open { display: block !important; position: absolute !important; left: 16px; right: 16px; top: calc(100% + 8px); z-index: 80; margin-left: 0; max-width: none; background: #fff; border-radius: var(--radius-md); box-shadow: 0 14px 36px rgba(11,31,58,0.18); } }
.topbar { position: relative; }
@media (max-width: 900px) {
  .page:has(.bookings-sticky) { padding-top: 0; }
  .bookings-sticky {
    top: 0;
    margin: 0 -16px 12px;
    padding: 0 16px;
  }
}

/* ============ DATE TABS (Yesterday / Today / Tomorrow / Day After) ============ */
.date-tabs {
  display: flex;
  gap: 4px;
  background: var(--color-white);
  padding: 5px;
  border-radius: 12px;
  border: 1px solid var(--color-grey-200);
  margin-bottom: 10px;
  overflow-x: auto;
}

.date-tab {
  flex: 1 1 0;
  min-width: 52px;
  padding: 5px 4px;
  border-radius: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  white-space: nowrap;
  transition: all 0.15s;
  border: 1px solid transparent;
}

.date-tab:hover {
  background: var(--color-grey-100);
}

.cat-group__header { position: relative; }

/* Public-holiday name, shown in every machine-category header on that date. */
.cat-group__holiday {
  flex: none;
  margin: 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.cat-group__leave { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; }
.cat-group__leave-pill { padding: 2px 9px; border-radius: 999px; background: rgba(220, 38, 38, 0.1); color: #b91c1c; font-size: 11px; font-weight: 700; white-space: nowrap; }
.cat-group__leave-pill--annual { background: #f3e8ff; color: #6d28d9; }
.cat-group__leave-pill--medical { background: #fee2e2; color: #b91c1c; }

/* Sunday and any date in the Public Holiday master list: shaded red so dispatch
   spots a rest day before assigning work to it. */
.date-tab--rest {
  background: rgba(220, 38, 38, 0.09);
  border-color: rgba(220, 38, 38, 0.28);
}
.date-tab--rest:hover {
  background: rgba(220, 38, 38, 0.16);
}
.date-tab--rest.date-tab--active {
  background: #b91c1c;
  border-color: #b91c1c;
  color: var(--color-white);
}
.date-tab--rest.date-tab--active:hover {
  background: #b91c1c;
}

.date-tab--active {
  background: var(--color-navy);
  color: var(--color-white);
}

.date-tab--active:hover {
  background: var(--color-navy);
}

.date-tab__label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
  white-space: nowrap;
}

.date-tab--active .date-tab__label {
  opacity: 0.85;
}

.date-tab__date {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-display);
  white-space: nowrap;
}

.date-tab__count {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: 0;
  opacity: 0.85;
}

.date-tab__count-pill {
  display: inline-block;
  background: var(--color-yellow);
  color: var(--color-navy);
  padding: 0 4px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  min-width: 16px;
  text-align: center;
}
/* Today is marked with a dot rather than a word, to keep every tab the same width. */
.date-tab:nth-child(2) { box-shadow: inset 0 0 0 1px var(--color-grey-300); }
.date-tab:nth-child(2) .date-tab__date::after { content: " \00b7"; color: var(--color-yellow); }

.date-tab--active .date-tab__count-pill {
  background: var(--color-yellow);
  color: var(--color-navy);
}

/* ============ CATEGORY GROUP HEADER ============ */
.cat-group {
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}

.cat-group__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--color-grey-100);
  border-bottom: 1px solid var(--color-grey-200);
}

.cat-group__swatch {
  width: 4px;
  height: 24px;
  border-radius: 2px;
}

.cat-group__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-navy);
}

.cat-group__count {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--color-grey-600);
  font-weight: 600;
}

/* Keep the category, leave/holiday indicators, and counts in three stable slots. */
.cat-group__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.cat-group__label { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cat-group__markers { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.cat-group__count { margin: 0; justify-self: end; text-align: right; white-space: nowrap; }

@media (max-width: 600px) {
  .cat-group__header { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .cat-group__label { grid-column: 1; grid-row: 1; }
  .cat-group__markers { grid-column: 1 / -1; grid-row: 2; }
  .cat-group__count { grid-column: 2; grid-row: 1; font-size: 11px; }
}

/* ============ MACHINE STATUS DOT ============ */
.mdot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 1px var(--color-grey-300);
}
.mdot--available   { background: #16a34a; }
.mdot--occupied    { background: #dc2626; }
.mdot--unavailable { background: #9ca3af; }

.mdot-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mdot-legend {
  display: flex;
  gap: 16px;
  font-size: var(--text-xs);
  color: var(--color-grey-600);
  margin-left: auto;
}

.mdot-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ============ BOOKING ROW (within category group) ============ */
.bk-row {
  display: grid;
  grid-template-columns: 120px 44px 200px 1fr 1fr 110px 150px 70px;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  border-top: 1px solid var(--color-grey-100);
  font-size: var(--text-sm);
  line-height: 1.25;
  transition: background 0.1s;
  min-width: 954px;
}

.bk-row:first-of-type { border-top: none; }
.bk-row:hover { background: var(--color-grey-50, #fafafa); }

/* Column header for Current Bookings — aligns to the .bk-row grid and rides
   along inside the frozen .bookings-sticky region. */
.bk-head {
  display: grid;
  grid-template-columns: 120px 44px 200px 1fr 1fr 110px 150px 70px;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  background: var(--color-grey-100);
  border: 1px solid var(--color-grey-200);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-grey-600);
  margin-top: 8px;
}
@media (max-width: 1100px) {
  .bk-head { display: none; }
}
/* Booking rows always keep their full desktop grid layout — no stacking to
   1-column on narrow screens. The category-group/page container scrolls
   horizontally instead so every column stays readable in a single row. */
.cat-group { overflow-x: auto; }

.bk-row__id {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--color-grey-600);
  font-weight: 600;
}

.bk-row__customer {
  font-weight: 600;
  color: var(--color-navy);
}

.bk-row__sub {
  font-size: 11.5px;
  color: var(--color-grey-600);
  margin-top: 1px;
  line-height: 1.2;
}

.bk-row__time {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-grey-700);
}

.bk-row__shift-pill {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  background: var(--color-grey-100);
  color: var(--color-grey-700);
  padding: 1px 5px;
  border-radius: 4px;
  margin-top: 1px;
  letter-spacing: 0.05em;
}

/* Row-density button (Bookings toolbar) — label shows ON/OFF state */
.density-btn { display: inline-flex; align-items: center; gap: 6px; }
.density-btn__state { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 1px 5px; border-radius: 4px; background: #dc2626; color: #fff; }
.density-btn.is-on { border-color: var(--color-navy); color: var(--color-navy); }
.density-btn.is-on .density-btn__state { background: #16a34a; color: #fff; }

/* Time + shift pill sit on one line to save row height. */
.bk-row__shift { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bk-row__shift .bk-row__shift-pill { margin-top: 0; }

/* Remark column (desktop/tablet only) — long text truncates; title exposes the full value. */
.bk-row__remark {
  font-size: 12px;
  color: var(--color-grey-700);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
body.bk-compact .bk-row__remark { -webkit-line-clamp: 1; font-size: 11.5px; }

/* ---- Compact density (toggled from the Bookings toolbar) ---- */
body.bk-compact .bk-row { padding: 3px 12px; gap: 8px; line-height: 1.15; }
body.bk-compact .bk-head { padding: 4px 12px; }
/* Second line (contact · phone, rigger) hidden — available on hover via the
   row's title tooltip. */
body.bk-compact .bk-row__sub { display: none; }
body.bk-compact .bk-row__wo { margin-top: 2px !important; }
body.bk-compact .bk-row > div > div[style*="border-top"] { margin-top: 3px !important; padding-top: 3px !important; }
/* Actions keep Switch/Delete on one line; WhatsApp has its own narrow column.
   Compact mode makes every action icon-only. */
body.bk-compact .bk-row,
body.bk-compact .bk-head {
  grid-template-columns: 112px 40px 124px minmax(150px, 0.9fr) minmax(160px, 1.1fr) 104px minmax(110px, 0.8fr) 116px;
  column-gap: 6px;
}
body.bk-compact .bk-row > div:nth-child(3) { min-width: 0; }
body.bk-compact .bk-row > div:nth-child(3) > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.bk-compact .bk-row > div:last-child { flex-wrap: nowrap !important; gap: 4px !important; }
body.bk-compact .bk-row > div:last-child .btn { padding: 5px 7px !important; }
body.bk-compact .btn__label { display: none; }
/* Status cell: WO number and the multi-day pills ride inline. */
body.bk-compact .bk-row__wo { margin-top: 0 !important; margin-left: 6px !important; }

/* On phones and tablets, keep the eight Compact columns visually close like the
   desktop reference. The booking group remains the only horizontal scroller on
   very narrow portrait screens, so text is never clipped by the page itself. */
@media (max-width: 900px) {
  body.bk-compact .bk-row {
    grid-template-columns: 88px 36px 106px minmax(110px, 0.8fr) minmax(120px, 1fr) 92px minmax(90px, 0.7fr) 72px;
    column-gap: 4px;
    min-width: 724px;
    padding-inline: 8px;
  }
}

/* Phones: booking rows stop being a wide 8-column table and become a stacked
   card that fits the panel width — no left/right scrolling. Cell order in the
   markup is Status, WA, Machine/Operator, Company/Contact, Location, Shift,
   Remark, Actions. */
@media (max-width: 640px) {
  .cat-group { overflow-x: visible !important; }
  .bk-head { display: none !important; }
  .bk-row, body.bk-compact .bk-row {
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "status wa" "machine machine" "company company" "location location" "shift actions" !important;
    row-gap: 4px !important;
    column-gap: 8px !important;
    padding: 9px 12px !important;
    align-items: start !important;
  }
  .bk-row > div { min-width: 0 !important; max-width: 100% !important; }
  .bk-row > div:nth-child(1) { grid-area: status; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .bk-row > div:nth-child(2) { grid-area: wa; }
  .bk-row > div:nth-child(3) { grid-area: machine; }
  .bk-row > div:nth-child(4) { grid-area: company; }
  .bk-row > div:nth-child(5) { grid-area: location; }
  .bk-row > div:nth-child(6) { grid-area: shift; }
  .bk-row > div:nth-child(7) { display: none !important; }
  .bk-row > div:nth-child(8) { grid-area: actions; display: flex; justify-content: flex-end; flex-wrap: wrap !important; gap: 4px !important; }
  body.bk-compact .bk-row > div:nth-child(3) > div { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  body.bk-compact .bk-row__sub { display: block !important; }
  .bk-row__sub { word-break: break-word; }
}

/* ============ DAILY NOTES PAGE ============ */
.note-card {
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
  position: relative;
}

.note-card__date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-navy);
  margin-bottom: 8px;
}

.note-card__date-pill {
  background: var(--color-yellow);
  color: var(--color-navy);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.note-card__author {
  font-size: var(--text-xs);
  color: var(--color-grey-600);
  margin-bottom: 10px;
}

.note-card__body {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-grey-800);
  white-space: pre-wrap;
}

.note-card__body--editable {
  width: 100%;
  border: 1px dashed var(--color-grey-300);
  border-radius: 8px;
  padding: 12px;
  font-family: inherit;
  font-size: var(--text-base);
  resize: vertical;
  min-height: 80px;
}
.note-card__body--editable:focus {
  outline: none;
  border-color: var(--color-navy);
  border-style: solid;
}

.note-banner {
  background: linear-gradient(135deg, rgba(11,31,58,0.04), rgba(245,196,0,0.06));
  border: 1px solid var(--color-grey-200);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: var(--text-sm);
  color: var(--color-grey-700);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============ ADD REPAIR (operator) ============ */
/* The form column clips and its body scrolls, so the action row can sit as a
   non-scrolling flex sibling flush with the card's bottom edge — the same
   arrangement as the New Booking drawer. Applies at every width; the card just
   gets taller on a phone. */
.addrepair-grid > .card:first-child { display: flex; flex-direction: column; max-height: calc(100dvh - 132px); overflow: hidden; padding: 0; }
.addrepair-grid > .card:first-child > .card__body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 18px 0; display: flex; flex-direction: column; }
/* The row leaves the body's flow-padding and spans the full card width. */
.addrepair-actions { position: sticky; bottom: 0; z-index: 5; margin: auto -18px 0; padding: 10px 18px; display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; background: white; border-top: 1px solid var(--color-grey-200); }
.addrepair-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .addrepair-grid { grid-template-columns: 1fr; }
}

/* Severity segmented control */
.sev-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.sev-seg__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 11px 13px;
  border: 1px solid var(--color-grey-300);
  border-radius: 10px;
  background: white;
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.sev-seg__btn:hover { border-color: var(--color-grey-400); }
.sev-seg__label { font-size: 14px; font-weight: 700; color: var(--color-navy); }
.sev-seg__note { font-size: 11.5px; color: var(--color-grey-500); }
.sev-seg__btn--active { box-shadow: inset 0 0 0 1px currentColor; }
.sev-seg__btn--low    { border-color: var(--color-grey-500); color: var(--color-grey-700); background: var(--color-grey-50); }
.sev-seg__btn--medium { border-color: #d97706; color: #b45309; background: #fffbeb; }
.sev-seg__btn--high   { border-color: #dc2626; color: #b91c1c; background: #fef2f2; }
.sev-seg__btn--active .sev-seg__label { color: inherit; }

/* Photo drop / capture zone */
.addrepair-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 14px;
  border: 1.5px dashed var(--color-grey-300);
  border-radius: 10px;
  color: var(--color-grey-600);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: var(--color-grey-50);
  transition: border-color .12s, color .12s, background .12s;
}
.addrepair-photo:hover { border-color: var(--color-navy); color: var(--color-navy); background: white; }

/* ============ R&M OVERVIEW ============ */
.rm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 1100px) {
  .rm-grid { grid-template-columns: 1fr; }
}

/* Overview columns: scroll the list inside each column while the card header
   (title + subtitle) stays frozen at the top of the column. */
.rm-ov-card {
  padding: 0;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.rm-ov-card .card__header {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0;
  padding: 20px 22px 16px;
  background: white;
  border-bottom: 1px solid var(--border-default);
}

.rm-overdue-banner {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.rm-overdue-banner__icon {
  background: #dc2626;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.rm-overdue-banner__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: #991b1b;
  font-size: var(--text-base);
}
.rm-overdue-banner__sub {
  font-size: var(--text-xs);
  color: #7f1d1d;
}

.countdown-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.countdown-pill--ok { background: #dcfce7; color: #166534; }
.countdown-pill--soon { background: #fef3c7; color: #92400e; }
.countdown-pill--overdue { background: #fee2e2; color: #991b1b; }

/* R&M page: tab bar + search freeze at the top of the .page scroll region.
   Page top padding is moved onto the first child so the frozen panel can reach
   the very top of the scrollport with no content sliver above it. */
.page:has(.rm-sticky) { padding-top: 0; }
.page:has(.rm-sticky) > :first-child { margin-top: 32px; }
.rm-sticky {
  position: sticky;
  top: 0;
  z-index: 9;
  background: var(--color-white);
  margin: 0 -32px 16px;
  padding: 12px 32px 0;
  border-bottom: 1px solid var(--color-grey-200);
}
.rm-sticky .tab-bar { margin-bottom: 12px; }
@media (max-width: 900px) {
  .page:has(.rm-sticky) > :first-child { margin-top: 16px; }
  .rm-sticky { margin: 0 -16px 12px; padding: 10px 16px 0; }
}
/* R&M tabs: keep both labels whole on one line at every width. */
.rm-sticky .tab-bar { flex-wrap: nowrap; gap: 2px; padding: 0 4px; }
.rm-sticky .tab-bar > .tab-btn { padding: 11px 12px; font-size: 13px; gap: 6px; white-space: nowrap; flex: 0 1 auto; }
/* R&M tabs on phones: two equal tabs side by side in one row, no wrapping. */
@media (max-width: 640px) {
  .rm-sticky .tab-bar { padding: 0 4px; flex-wrap: nowrap; }
  .rm-sticky .tab-bar > .tab-btn { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; padding: 11px 4px; font-size: 11.5px; gap: 4px; line-height: 1.25; white-space: normal; }
  .rm-sticky .tab-bar > .tab-btn > * { min-width: 0; }
}

/* ============ MASTER DATA TABS ============ */
.tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-grey-200);
  margin-bottom: 20px;
  background: var(--color-white);
  padding: 0 8px;
  border-radius: 12px 12px 0 0;
  border: 1px solid var(--color-grey-200);
  border-bottom: none;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 14px 18px;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-grey-600);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tab-btn:hover { color: var(--color-navy); }
.tab-btn--active {
  color: var(--color-navy);
  border-bottom-color: var(--color-yellow);
}

/* ============ CALENDAR ============ */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--color-grey-200);
  border: 1px solid var(--color-grey-200);
  border-radius: 12px;
  overflow: hidden;
}

.cal-head {
  background: var(--color-grey-100);
  padding: 10px 12px;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-grey-600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cal-cell {
  background: var(--color-white);
  min-height: 110px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cal-cell--today { background: #fffbe6; }
.cal-cell--out { background: var(--color-grey-50, #fafafa); color: var(--color-grey-400); }

.cal-cell__date {
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--color-navy);
  font-size: var(--text-sm);
}

.cal-cell--today .cal-cell__date {
  background: var(--color-yellow);
  color: var(--color-navy);
  display: inline-block;
  border-radius: 999px;
  padding: 0 8px;
  align-self: flex-start;
}

.cal-evt {
  background: var(--color-grey-100);
  border-left: 3px solid var(--color-navy);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--color-navy);
}

.cal-evt--more {
  background: transparent;
  border: none;
  color: var(--color-grey-600);
  font-size: 11px;
  padding: 2px 6px;
}

/* ============ DELETE-RESTRICTED HINT ============ */
.restricted-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-grey-500);
  background: var(--color-grey-100);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

/* ============ COMMON HELPERS used by v2 pages ============ */
.page {
  padding: 32px;
  max-width: 1400px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  width: 100%;
}
/* All Bookings needs the full width so the 8-column table doesn't overflow. */
.page--allbookings {
  max-width: none;
}
.page--allbookings:has(> .page-actions) { padding-top: 0; }
.page--allbookings > .page-actions {
  position: sticky;
  top: 0;
  z-index: 9;
  background: var(--color-grey-100);
  margin: 0 -32px 16px;
  padding: 32px 32px 12px;
}
@media (max-width: 900px) {
  .page--allbookings > .page-actions {
    margin: 0 -16px 16px;
    padding: 16px 16px 12px;
  }
}
@media (max-width: 900px) {
  .page { padding: 16px; }
}

.page-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.page-actions .btn {
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
  gap: 6px;
  flex-shrink: 0;
}
.page-actions .btn svg { width: 14px; height: 14px; }
.page-actions .restricted-tag { flex-shrink: 0; }
.page-actions .status-legend { flex-shrink: 0; flex-wrap: nowrap; white-space: nowrap; }

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-grey-200);
  gap: 12px;
  flex-wrap: wrap;
}
.wo-drawer__body > .card__header { padding: 0 0 8px; border-bottom: none; }
.card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-navy);
  margin: 0;
}
.card__sub {
  font-size: 12px;
  color: var(--color-grey-600);
  margin-top: 2px;
}
.card__body { padding: 0; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--color-white);
}
.status-legend .status {
  padding: 2px 8px;
  font-size: 9px;
  letter-spacing: 0.03em;
}
.status--gray   { background: #6b7280; color: var(--color-white); }
.status--blue   { background: #2563eb; color: var(--color-white); }
.status--green  { background: #16a34a; color: var(--color-white); }
.status--yellow { background: #d97706; color: var(--color-white); }
.status--orange { background: #ea580c; color: var(--color-white); }
.status--red    { background: #dc2626; color: var(--color-white); }
.status--purple { background: #7c3aed; color: var(--color-white); }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--color-grey-50, #fafafa);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-grey-600);
  border-bottom: 1px solid var(--color-grey-200);
}
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-grey-100);
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--color-grey-50, #fafafa); }

.input, .select {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--color-grey-300);
  border-radius: 8px;
  font-size: 14px;
  background: var(--color-white);
  color: var(--color-grey-800);
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--color-navy);
}

.leave-days-stepper {
  position: relative;
  width: 100%;
}
.leave-days-stepper .input {
  padding-right: 46px !important;
  -moz-appearance: textfield;
}
.leave-days-stepper .input::-webkit-inner-spin-button,
.leave-days-stepper .input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.leave-days-stepper__buttons {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  width: 40px;
  overflow: hidden;
  border-left: 1px solid var(--color-grey-300);
  border-radius: 0 7px 7px 0;
}
.leave-days-stepper__button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 18px;
  padding: 0;
  border: 0;
  background: var(--color-grey-50, #fafafa);
  color: var(--color-grey-700);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.leave-days-stepper__button + .leave-days-stepper__button {
  border-top: 1px solid var(--color-grey-300);
}
.leave-days-stepper__button:hover,
.leave-days-stepper__button:focus-visible {
  background: var(--color-grey-200);
  color: var(--color-navy);
  outline: none;
}

/* ============ ALL BOOKINGS PAGE ============ */
.ab-layout {
  display: grid;
  /* Sidebar trimmed so the bookings table gets more horizontal room. */
  grid-template-columns: 180px 1fr;
  gap: 16px;
  align-items: flex-start;
}
.ab-sidebar {
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: 12px;
  padding: 8px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  position: sticky;
  top: 96px;
}
@media (max-width: 900px) {
  .ab-layout { grid-template-columns: 1fr; }
  .ab-sidebar {
    position: sticky;
    top: 0;
    z-index: 5;
    max-height: 260px;
    margin-bottom: 12px;
    box-shadow: 0 4px 10px rgba(11,31,58,0.08);
  }
}

.ab-side-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  text-align: left;
  font-size: 13px;
  color: var(--color-grey-800);
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
}
.ab-side-item:hover { background: var(--color-grey-100); }
.ab-side-item--active {
  background: rgba(255,213,0,0.18);
  color: var(--color-navy);
  font-weight: 700;
}
.ab-side-item--month  { padding-left: 22px; font-size: 12px; }
.ab-side-item--day    { padding-left: 38px; font-size: 12px; color: var(--color-grey-700); }
.ab-side-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--color-grey-500);
  background: var(--color-grey-100);
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}
.ab-side-item--active .ab-side-count {
  background: var(--color-navy);
  color: var(--color-white);
}

.ab-main {
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: 12px;
  overflow: hidden;
}

.ab-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-grey-200);
}
.ab-header__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-navy);
}
.ab-header__sub {
  font-size: 12px;
  color: var(--color-grey-500);
  margin-top: 2px;
}

.ab-table {
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  overflow-x: auto;
}

.ab-row {
  display: grid;
  /* chat / date / category / machine+operator / company / location / shift / confirm */
  grid-template-columns: 36px 110px 130px 190px 1.1fr 1.4fr 80px 34px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-grey-100);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s;
}
.ab-row:hover { background: var(--color-grey-50, #fafafa); }
.ab-row--head {
  background: var(--color-grey-50, #fafafa);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-grey-600);
  cursor: default;
  position: sticky;
  top: 0;
  z-index: 1;
}
.ab-row--head:hover { background: var(--color-grey-50, #fafafa); }
.ab-row > div { min-width: 0; }
.ab-row__confirm { display: flex; justify-content: flex-end; }
.ab-row__confirm .btn { width: 28px; height: 28px; padding: 0 !important; display: grid; place-items: center; border-radius: 6px; }
.ab-row__confirm .btn__label { display: none; }
html.plc-mobile .ab-row--head { display: none !important; }
.ab-row--head > div { min-width: 0; line-height: 1.25; overflow-wrap: anywhere; word-break: break-word; }

.ab-row__chat {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(34,197,94,0.15);
  color: #15803d;
}

.ab-cat {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ab-machine {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.ab-machine__stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ab-machine__op {
  font-weight: 500;
  font-size: 11.5px;
  color: var(--color-grey-500);
}
.ab-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2563eb;
  flex-shrink: 0;
}
.ab-dot--multi { background: #7C3AED; }

.ab-cr-icon {
  display: grid;
  place-items: center;
  background: #7C3AED;
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 1200px) {
  .ab-row {
    grid-template-columns: 32px 100px 120px 160px 1fr 1.2fr 34px;
    min-width: 760px;
  }
  .ab-row > div:nth-child(7) { display: none; }
  .ab-row--head > div:nth-child(7) { display: none; }
}

@media (max-width: 900px) {
  .ab-table {
    max-height: none;
    -webkit-overflow-scrolling: touch;
  }
  .ab-row {
    min-width: 720px;
  }
}

/* ============ CUSTOMER PRICE LIST (Account & Finance) ============ */
.pricelist {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.pricelist__customers {
  position: sticky;
  top: 88px;
  padding-bottom: 8px;
}
.pricelist__customer-list {
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  overflow-y: auto;
  border-top: 1px solid var(--border-default);
}
.pricelist__customer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 11px 16px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.pricelist__customer + .pricelist__customer {
  border-top: 1px solid var(--color-grey-100);
}
.pricelist__customer:hover { background: var(--color-grey-50); }
.pricelist__customer--active {
  background: var(--color-grey-50);
  border-left-color: var(--color-yellow, #F4B400);
}
.pricelist__customer-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-navy);
}
.pricelist__customer-code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-grey-500);
}
.pricelist__customer--active .pricelist__customer-code { color: var(--color-grey-700); }

.pricelist__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 18px 16px;
}
.pricelist__stat {
  flex: 1;
  min-width: 130px;
  padding: 12px 14px;
  background: var(--color-grey-50);
  border: 1px solid var(--border-default);
  border-radius: 10px;
}
.pricelist__stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-grey-500);
  margin-bottom: 4px;
}
.pricelist__stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy);
}
.pricelist__table th,
.pricelist__table td { vertical-align: middle; }

@media (max-width: 900px) {
  .pricelist { grid-template-columns: 1fr; }
  .pricelist__customers { position: static; }
  .pricelist__customer-list { max-height: 240px; }
}

/* ============ GLOBAL MOBILE/TABLET OVERFLOW GUARD ============ */
.page,
.card,
.card__body,
.ab-layout,
.ab-main,
.ab-table,
.cat-group,
.date-tabs {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 900px) {
  .date-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2px;
    padding: 4px;
  }

  /* All 8 days fit one phone row: weekday initials, day number only (month is
     dropped), and hair-thin count pills. */
  .date-tab {
    flex: 1 1 0;
    min-width: 0;
    width: 0;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 5px 1px;
    white-space: nowrap;
  }
  .date-tab__mon, .date-tab__unit { display: none; }
  .date-tab__label { font-size: 8px; letter-spacing: 0.02em; overflow: visible; text-overflow: clip; }
  .date-tab__date { font-size: 11px; white-space: nowrap; overflow: hidden; max-width: 100%; }
  .date-tab__count { display: flex; gap: 2px; margin-top: 2px; }
  .date-tab__count-pill { padding: 0 3px; font-size: 8.5px; min-width: 0; }
  .date-tab__count .status { display: none; }
}

@media (max-width: 900px) {
  /* Booking-status legend + action bar: wrap onto their own lines instead
     of forcing left/right scroll on narrow screens. */
  .page-actions {
    flex-wrap: nowrap;
    overflow-x: visible;
    gap: 6px;
  }
  .page-actions .status-legend {
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 3px;
    overflow: hidden;
  }
  .page-actions .status-legend strong { display: none; }
  .page-actions .status-legend .status { padding: 2px 5px; font-size: 8px; }
  .page-actions > div:last-child {
    flex-wrap: nowrap;
    gap: 4px;
    flex-shrink: 0;
  }
  .page-actions .btn { flex: 0 1 auto; justify-content: center; padding: 0 8px; font-size: 0; gap: 0; }
  .page-actions .btn svg { width: 15px; height: 15px; }
  .page-actions .restricted-tag { font-size: 10px; }
}

/* All Bookings: below tablet width, use compact 3-line cards so many more
   bookings fit on one mobile screen (no per-field label rows). */
@media (max-width: 1024px) {
  .page--allbookings { max-width: 100%; overflow-x: hidden; }
  .ab-table { overflow-x: hidden; max-height: none; }
  .ab-row--head { display: none; }

  .ab-row {
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr) auto 34px;
    min-width: 0;
    gap: 1px 7px;
    margin: 0;
    padding: 7px 10px;
    border: 0;
    border-bottom: 1px solid var(--color-grey-200);
    border-radius: 0;
    background: var(--color-white);
    box-shadow: none;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
  }

  .ab-row > div { min-width: 0; display: flex; align-items: center; gap: 5px; }
  .ab-row > div::before { content: none; display: none; }

  /* line 1: chat · date · shift */
  .ab-row > div:nth-child(1) { grid-area: 1 / 1 / 2 / 2; justify-content: flex-start; }
  .ab-row > div:nth-child(2) { grid-area: 1 / 2 / 2 / 3; gap: 6px; }
  .ab-row > div:nth-child(7),
  .ab-row--head > div:nth-child(7) { display: flex; }
  .ab-row > div:nth-child(7) {
    grid-area: 1 / 3 / 2 / 4;
    justify-content: flex-end;
    font-size: 10.5px;
    color: var(--color-grey-600);
    white-space: nowrap;
  }

  /* line 2: machine + operator · category */
  .ab-row > div:nth-child(4) { grid-area: 2 / 1 / 3 / 3; }
  .ab-row > div:nth-child(3) { grid-area: 2 / 3 / 3 / 5; justify-content: flex-end; }

  /* line 3: company · location */
  .ab-row > div:nth-child(5) { grid-area: 3 / 1 / 4 / 3; font-size: 12px; }
  .ab-row > div:nth-child(6) { grid-area: 3 / 3 / 4 / 5; justify-content: flex-end; font-size: 11px; }

  .ab-row > div:nth-child(2) > div { font-size: 12.5px !important; }
  .ab-row > div:nth-child(2) .status { padding: 1px 5px !important; font-size: 9px !important; margin-top: 0 !important; }
  .ab-row__chat svg { width: 15px; height: 15px; }

  .ab-cat { min-width: 0; font-size: 10.5px; color: var(--color-grey-600); }
  .ab-cat svg { width: 13px; height: 13px; }
  .ab-cat span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92px; }

  .ab-machine { min-width: 0; }
  .ab-machine__stack { flex-direction: row; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; }
  .ab-machine__op { font-size: 10.5px; }
  .ab-machine__stack > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .ab-row > div:nth-child(5) > *,
  .ab-row > div:nth-child(6) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
  }
  .ab-row > div:nth-child(6) { text-align: right; }
  .ab-row > div:nth-child(8) { grid-area: 1 / 4 / 2 / 5; justify-content: flex-end; }
  .ab-row__confirm .btn { width: 26px; height: 26px; }
}

/* Page-specific actions portalled into the fixed topbar. */
.topbar__slot { display: flex; align-items: center; gap: 8px; }
.topbar__slot .btn { height: 30px; padding: 0 9px; font-size: 12px; gap: 5px; white-space: nowrap; }
.topbar__slot .density-btn { gap: 5px; }
.topbar__slot .density-btn__state { font-size: 9.5px; padding: 1px 4px; }

@media (max-width: 820px) {
  .topbar__slot-label { display: none; }
  .topbar__slot .btn { padding: 0 8px; }
  .topbar__slot .density-btn { font-size: 0; gap: 0; }
  .topbar__slot .density-btn__state { font-size: 9.5px; }
}

html.plc-mobile .topbar__slot-label { display: none; }
html.plc-mobile .topbar__slot .density-btn { font-size: 0; gap: 0; }
html.plc-mobile .topbar__slot .density-btn__state { font-size: 9.5px; }

/* Let the search field absorb tight widths instead of clipping the bell. */
.topbar__search { flex: 1 1 0; min-width: 0; }
.topbar__actions { flex-shrink: 0; flex-wrap: nowrap; }
@media (max-width: 1200px) {
  .topbar__slot-label { display: none; }
  .plc-syncnow__label { display: none; }
  .topbar__slot .density-btn { font-size: 0; gap: 0; }
  .topbar__slot .density-btn__state { font-size: 9.5px; }
}

/* Desktop has the inline page filter; the magnifier is mobile-only. */
html:not(.plc-mobile) .topbar__mobile-search-btn { display: none !important; }

/* ===== Mobile compact: New/Modify Booking form + Pending Submissions panel =====
   Same fields, tighter vertical rhythm so more of the form fits one phone
   screen. Scoped to the booking form only (the data-name hook sits on the .card
   in page mode and on .wo-drawer__body in drawer mode) so other card pages are
   untouched. Inputs stay >=40px tall for touch. */
@media (max-width: 640px) {
  [data-name="form_create_booking"] { padding: 14px !important; border-radius: 10px; }
  .wo-drawer__head { padding: 8px 10px !important; }
  .wo-drawer__title { font-size: 15px !important; }
  [data-name="form_create_booking"] .card__header { margin-bottom: 12px !important; padding-bottom: 10px !important; }
  [data-name="form_create_booking"] .card__title { font-size: 16px !important; }
  [data-name="form_create_booking"] section { margin-bottom: 14px !important; }
  [data-name="form_create_booking"] .eyebrow { margin-bottom: 8px !important; font-size: 10px !important; }
  [data-name="form_create_booking"] .form-grid { gap: 10px !important; }
  [data-name="form_create_booking"] .plc-pair-row { gap: 10px !important; }
  [data-name="form_create_booking"] .field { margin-bottom: 0 !important; }
  [data-name="form_create_booking"] .field[style] { margin-bottom: 10px !important; }
  [data-name="form_create_booking"] .field > label { font-size: 11px !important; margin-bottom: 3px !important; }
  [data-name="form_create_booking"] .field__hint { font-size: 10.5px !important; line-height: 1.35 !important; margin-top: 3px !important; }
  [data-name="form_create_booking"] .input, [data-name="form_create_booking"] input, [data-name="form_create_booking"] select { min-height: 40px !important; height: auto !important; font-size: 13.5px !important; padding-top: 0; padding-bottom: 0; }
  [data-name="form_create_booking"] textarea { min-height: 64px !important; font-size: 13.5px !important; padding: 8px 10px !important; }
  [data-name="form_create_booking"] .btn { height: 38px; font-size: 12.5px; }

  /* Pending Submissions popover: full-width sheet under the topbar, denser rows. */
  .plc-pending-backdrop { padding: 56px 8px 8px !important; }
  .plc-pending-drawer { width: 70vw !important; max-width: 70vw !important; max-height: 70vh !important; }
  .plc-pending-head { padding: 9px 10px !important; gap: 8px !important; }
  .plc-pending-head h2 { font-size: 13px !important; }
  .plc-pending-head p { font-size: 10.5px !important; }
  .plc-pending-body { padding: 10px !important; gap: 10px !important; }
  .plc-pending-body .btn { height: 28px !important; font-size: 11.5px !important; padding: 0 8px !important; }
  .plc-pending-section { gap: 6px !important; }
  .plc-pending-empty { padding: 12px 10px !important; }
  .plc-pending-history { font-size: 11px !important; gap: 4px !important; }
  .plc-pending-history__row { padding: 4px 0 !important; }
}

/* Booking drawer: capped at half the viewport (app.css). Tablets get a wider
   sheet; phones cap it at 70% of the screen width so the list stays visible. */
@media (max-width: 900px) { .wo-drawer { width: min(760px, 94vw) !important; } }
@media (max-width: 640px) { .wo-drawer { width: 100vw !important; max-width: 100vw !important; } }

/* Phone: booking form must fit the panel width — no sideways scrolling.
   Everything is width-contained (border-box, min-width:0, max-width:100%) and
   the fixed 4-up quick-pick rows drop to 2-up so they never overflow. */
@media (max-width: 640px) {
  .wo-drawer__body, [data-name="form_create_booking"] { overflow-x: hidden !important; }
  [data-name="form_create_booking"] * { min-width: 0 !important; }
  [data-name="form_create_booking"] .field, [data-name="form_create_booking"] section, [data-name="form_create_booking"] .form-grid, [data-name="form_create_booking"] .plc-pair-row { max-width: 100% !important; }
  [data-name="form_create_booking"] input, [data-name="form_create_booking"] select, [data-name="form_create_booking"] textarea, [data-name="form_create_booking"] .input { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; }
  [data-name="form_create_booking"] .field > div[style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-name="form_create_booking"] .field > div[style*="grid-template-columns"] { max-width: 100% !important; }
  [data-name="form_create_booking"] .btn, [data-name="form_create_booking"] button { max-width: 100% !important; white-space: normal; }
}

/* iOS zooms the visual viewport when a focused text control is below 16px.
   Because booking creation runs inside the SPA drawer, that zoom can persist
   into the next screen and make a correctly sized drawer appear clipped.
   Keep browser/user pinch zoom available; only prevent automatic focus zoom. */
@media (max-width: 640px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px !important; }
}
/* Runtime fallback for mobile browsers using a desktop-like layout viewport. */
html.plc-mobile input:not([type="checkbox"]):not([type="radio"]),
html.plc-mobile select,
html.plc-mobile textarea { font-size: 16px !important; }

/* All R&M filter bar (AllRM.jsx). */
.allrm-filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 18px;border-bottom:1px solid var(--color-grey-100)}
.allrm-filters__group{display:flex;gap:4px;flex-wrap:wrap}
@media (max-width: 640px){
  .allrm-filters{flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px}
  .allrm-filters__group{flex-wrap:nowrap;gap:4px;width:100%;min-width:0;max-width:100%;overflow:hidden}
  .allrm-filters__group>button{flex:1 1 0;min-width:0;min-height:30px;padding:5px 4px !important;font-size:10px !important;border-radius:8px !important;white-space:normal;line-height:1.15;text-align:center;letter-spacing:-.1px}
}

/* Today's machine availability board. */
.ma-legend{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin:0 0 14px}
.ma-legend__date{font-size:12.5px;color:var(--color-grey-500)}
.ma-legend__keys{display:flex;gap:8px;flex-wrap:wrap}
.ma-key{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--color-grey-300);background:var(--color-white);border-radius:999px;font-size:11.5px;font-weight:600;color:var(--color-grey-700);cursor:pointer}
.ma-key--on{border-color:var(--color-navy);box-shadow:inset 0 0 0 1px var(--color-navy)}
.ma-key__dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.ma-key__count{font-variant-numeric:tabular-nums;color:var(--color-grey-500)}
.ma-card{margin-bottom:14px}
.ma-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px;padding:8px 10px}
.ma-tile{display:flex;flex-direction:row;align-items:center;gap:8px;padding:5px 9px;border-radius:5px;min-height:0}
.ma-tile__plate{font-size:12.5px;font-weight:700;letter-spacing:-.1px}
.ma-tile__name{font-size:11px;opacity:.7;margin-left:auto}
@media (max-width:640px){
  .ma-legend{gap:8px;margin-bottom:10px}
  .ma-legend__keys{width:100%}
  .ma-key{flex:1 1 0;min-width:0;justify-content:center;padding:6px 6px;font-size:10px;gap:5px}
  .ma-key__label{white-space:normal;line-height:1.15;text-align:center}
  .ma-grid{grid-template-columns:1fr;gap:3px;padding:8px}
  .ma-tile{padding:5px 8px}
  .ma-tile__plate{font-size:12px}
  .ma-tile__name{font-size:10.5px}
}