/* NOX field app palette. Loaded after styles.css to replace legacy pink/purple. */
html[data-theme="light"] body.ipad-app {
  color-scheme: light;
  --ink: #132238;
  --muted: #5d6b80;
  --line: #c2cfdf;
  --soft: #eef4fa;
  --deep: #102a49;
  --accent: #1768d4;
  --purple: #245fa6;
  --theme-surface: #ffffff;
  --theme-surface-2: #f2f6fb;
  --theme-text: #132238;
  --theme-muted: #5d6b80;
  --theme-line: #c2cfdf;
  --theme-action: #1768d4;
  --theme-action-2: #3c8ae8;
  --theme-action-text: #ffffff;
  --theme-selected-bg: #dceeff;
  --theme-selected-border: #1768d4;
  --theme-selected-text: #102a49;
  --field-calendar-grid: #8b9fb6;
  --field-icon: #1f5ea8;
  --field-control-line: #bdcad9;
  --field-card-line: #c6d2df;
  color: #132238 !important;
  background: #f1f5fa !important;
}

html[data-theme="light"] body.ipad-app :where(.ipad-brandbar, .ipad-tabs, .ipad-card, .card, .panel, fieldset, dialog) {
  color: #132238 !important;
  border-color: #c2cfdf !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

html[data-theme="light"] body.ipad-app .ipad-brandbar {
  color: #ffffff !important;
  border-color: #274766 !important;
  background: linear-gradient(110deg, #0b2039, #173b60) !important;
}

html[data-theme="light"] body.ipad-app .ipad-clock {
  color: #dbeafe !important;
  border-color: #526f8d !important;
  background: #1f3b58 !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.ipad-app .ipad-brandbar :where(strong,span,small,svg) {
  color: #ffffff !important;
}

/* Header controls need their own foregrounds; the dark brand bar must not force
   white text onto white or pale control surfaces. */
html[data-theme="light"] body.ipad-app .ipad-brandbar .theme-toggle {
  color: #173554 !important;
  -webkit-text-fill-color: #173554 !important;
  border-color: #aebed0 !important;
  background: #ffffff !important;
}

html[data-theme="light"] body.ipad-app .ipad-brandbar .theme-toggle :where(span,svg) {
  color: #173554 !important;
  stroke: currentColor !important;
}

html[data-theme="light"] body.ipad-app #store-operation-status.open {
  color: #075d43 !important;
  -webkit-text-fill-color: #075d43 !important;
  border-color: #77c9aa !important;
  background: #e1f7ee !important;
}

html[data-theme="light"] body.ipad-app #store-operation-status:not(.open) {
  color: #7a1d1d !important;
  -webkit-text-fill-color: #7a1d1d !important;
  border-color: #e59a9a !important;
  background: #fff1f1 !important;
}

html[data-theme="light"] body.ipad-app #store-open-button {
  color: #0f5f45 !important;
  -webkit-text-fill-color: #0f5f45 !important;
  border-color: #8dcbb4 !important;
  background: #e7f6f0 !important;
}

html[data-theme="light"] body.ipad-app #store-close-button {
  color: #861f1f !important;
  -webkit-text-fill-color: #861f1f !important;
  border-color: #e59a9a !important;
  background: #fff1f1 !important;
}

html[data-theme="light"] body.ipad-app #reload-shared-config {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #2674c7 !important;
  background: #1768d4 !important;
}

html[data-theme="light"] body.ipad-app :where(#store-open-button,#store-close-button):disabled {
  color: #526174 !important;
  -webkit-text-fill-color: #526174 !important;
  border-color: #9dacbd !important;
  background: #dfe6ee !important;
  opacity: .78 !important;
}

html[data-theme="light"] body.ipad-app :where(h1,h2,h3,h4,strong,b,label,legend,th,.section-heading) {
  color: #132238 !important;
}

html[data-theme="light"] body.ipad-app :where(p,small,.muted,.hint,label>span,.section-heading>span,.stock-row-label) {
  color: #5d6b80 !important;
}

html[data-theme="light"] body.ipad-app :where(.ipad-tab, button, .button, [role="button"]) {
  color: #233752 !important;
  border-color: #bdcad9 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

@media (hover: hover) {
  html[data-theme="light"] body.ipad-app :where(.ipad-tab:hover, button:hover) {
    color: #0a4ea8 !important;
    border-color: #5f99dc !important;
    background: #edf5ff !important;
  }
}

html[data-theme="light"] body.ipad-app :where(.ipad-tab.active, button.active, .primary, .primary-btn, .stock-save-button, .stock-add-button) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #1768d4 !important;
  background: linear-gradient(135deg, #1768d4, #3c8ae8) !important;
  box-shadow: 0 8px 18px rgba(23, 104, 212, .22) !important;
}

html[data-theme="light"] body.ipad-app :where(.ipad-card,.card,.panel,.ticket-head-card,.table-timer-card) {
  box-shadow: 0 8px 24px rgba(20, 48, 78, .08) !important;
}

html[data-theme="light"] body.ipad-app .dot.active {
  background: #1768d4 !important;
}

html[data-theme="light"] body.ipad-app :where(input,select,textarea,option) {
  color: #132238 !important;
  caret-color: #1768d4 !important;
  border-color: #b8c7d8 !important;
  background: #ffffff !important;
}

html[data-theme="light"] body.ipad-app :where(input,textarea)::placeholder {
  color: #65758a !important;
  opacity: 1 !important;
}

html[data-theme="light"] body.ipad-app :where(
  .stock-row, .customer-app-result, .customer-app-profile,
  .customer-app-history details, .open-ticket-card, .timer-grid button,
  .menu-grid button, .order-item, .history-card, .vault-card
) {
  color: #132238 !important;
  border-color: #c6d2df !important;
  background: #ffffff !important;
}

html[data-theme="light"] body.ipad-app .customer-app-result.active {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
  border-color: #6da7e8 !important;
  background: #e9f3ff !important;
  background-image: none !important;
  box-shadow: inset 4px 0 #1463d6 !important;
}
html[data-theme="light"] body.ipad-app .customer-app-result.active strong {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
}
html[data-theme="light"] body.ipad-app .customer-app-result.active small {
  color: #526177 !important;
  -webkit-text-fill-color: #526177 !important;
}
html[data-theme="light"] body.ipad-app .customer-app-result.active :where(svg,[data-lucide]) {
  color: #1463d6 !important;
  stroke: currentColor !important;
}

/* Timecard actions: keep the icon visible in both enabled and disabled states. */
body.ipad-app .punch-actions button {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
body.ipad-app .punch-actions button :where(svg,[data-lucide]) {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 auto;
  color: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 2.35 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html[data-theme="light"] body.ipad-app .punch-actions button:disabled {
  color: #34445c !important;
  -webkit-text-fill-color: #34445c !important;
  border: 2px solid #9fb2c8 !important;
  background: #e3eaf2 !important;
}
html[data-theme="nox"] body.ipad-app .punch-actions button:disabled {
  color: #dbe6ef !important;
  -webkit-text-fill-color: #dbe6ef !important;
  border: 2px solid #607d95 !important;
  background: #233441 !important;
}

html[data-theme="light"] body.ipad-app :where(.stock-row-note,.customer-app-result small,.customer-app-summary span,.customer-app-profile-actions small,#open-ticket-count,#ticket-table-list-count,#selected-table-label) {
  color: #53657c !important;
  -webkit-text-fill-color: #53657c !important;
}

html[data-theme="light"] body.ipad-app .open-ticket-empty {
  color: #5d6b80 !important;
  border-color: #b8c7d8 !important;
  background: #f7faff !important;
}

/* Every cast/customer avatar keeps white initials on a guaranteed dark fill. */
html[data-theme="light"] body.ipad-app :where(.avatar-chip,.customer-app-avatar) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.58) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.38) !important;
}
html[data-theme="light"] body.ipad-app .avatar-chip.coral { background: #245f9f !important; }
html[data-theme="light"] body.ipad-app .avatar-chip.blue { background: #245f9f !important; }
html[data-theme="light"] body.ipad-app .avatar-chip.amber { background: #805000 !important; }
html[data-theme="light"] body.ipad-app .avatar-chip.mint { background: #176b58 !important; }
html[data-theme="light"] body.ipad-app .avatar-chip.green { background: #26704f !important; }
html[data-theme="light"] body.ipad-app .avatar-chip.violet { background: #315f93 !important; }
html[data-theme="light"] body.ipad-app .avatar-chip.pink { background: #245f9f !important; }
html[data-theme="light"] body.ipad-app .avatar-chip.free { background: #40536b !important; }
html[data-theme="light"] body.ipad-app .customer-app-avatar { background: #245f9f !important; }

html[data-theme="light"] body.ipad-app :where(.shift-app-day.today,.shift-app-day.today .shift-app-day-head,.shift-app-day.today .shift-app-day-list) {
  color: #154f92 !important;
}
html[data-theme="light"] body.ipad-app .shift-app-day.today .shift-app-day-number {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #1768d4 !important;
}

/* Field shift calendar: prevent one- and two-digit date badges from becoming ovals. */
body.ipad-app .shift-app-calendar .shift-app-day-number {
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  flex: 0 0 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  line-height: 1 !important;
}

/* Tablet layout audit: headings and month controls must not be clipped by the calendar scroller. */
body.ipad-app :where(.ipad-view,.ipad-card,.shift-app-layout,.shift-app-calendar-card,.shift-app-calendar-head,.section-heading) {
  box-sizing: border-box;
  min-width: 0;
}
body.ipad-app :where(.ipad-card,.shift-app-calendar-card) {
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}
body.ipad-app :where(.shift-app-calendar-head,.section-heading) > :where(h1,h2,h3,strong) {
  min-width: 0;
  margin-inline: 0;
  overflow-wrap: anywhere;
}
body.ipad-app .shift-app-month-actions {
  min-width: 0;
  flex: 0 1 auto;
}
body.ipad-app .shift-app-month-actions input[type="month"] {
  box-sizing: border-box;
  width: 156px;
  min-width: 156px;
  padding-inline: 12px 8px;
  line-height: 1.2;
}

@media (max-width: 900px) {
  body.ipad-app .shift-app-calendar-card {
    overflow: visible !important;
  }
  body.ipad-app .shift-app-calendar {
    width: 100%;
    min-width: 0 !important;
  }
  body.ipad-app .shift-app-calendar-head {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }
  body.ipad-app .shift-app-month-actions {
    display: grid;
    grid-template-columns: 42px 42px minmax(156px, 1fr) 42px;
    width: 100%;
  }
  body.ipad-app .shift-app-month-actions input[type="month"] {
    width: 100%;
    min-width: 0;
  }
  body.ipad-app .shift-app-day {
    min-width: 0;
    padding-inline: 7px;
  }
  body.ipad-app .shift-app-day-head {
    min-width: 0;
  }
  body.ipad-app .shift-app-day-total {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 560px) {
  body.ipad-app :where(.ipad-card,.shift-app-calendar-card) {
    padding-inline: 12px;
  }
  body.ipad-app .shift-app-month-actions {
    grid-template-columns: 40px 40px minmax(128px, 1fr) 40px;
    gap: 6px;
  }
  body.ipad-app .shift-app-month-actions button {
    width: 40px;
    height: 40px;
  }
  body.ipad-app .shift-app-calendar {
    overflow-x: auto;
    grid-template-columns: repeat(7, minmax(68px, 1fr));
  }
}

/* Dark theme: an open-table status is secondary information, but the legacy
   action pink was below AA on the dark draft surface.  Keep the hue while
   raising luminance; selected tables continue to use the selection contract. */
html[data-theme="dark"] body.ipad-app .table-button-grid button.is-draft:not(.selected) > :is(span, small),
html[data-theme="dark"] body.ipad-app .table-button-grid button.is-draft:not(.selected):is(:hover, :focus-visible) > :is(span, small) {
  color: #f2b8d7 !important;
  -webkit-text-fill-color: #f2b8d7 !important;
  opacity: 1 !important;
}

/* Active ticket cards: readable status pill, compact metadata and safe bottom spacing. */
body.ipad-app .open-ticket-card {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  min-height: 140px !important;
  height: auto !important;
  overflow: hidden;
  padding: 11px !important;
}
body.ipad-app .open-ticket-table {
  display: grid !important;
  grid-template-columns: auto auto minmax(46px,1fr);
  align-items: center;
  justify-content: stretch;
  gap: 4px;
  min-width: 0;
}
body.ipad-app .open-ticket-table > strong {
  min-width: 24px;
}
body.ipad-app .open-ticket-table .table-vip-label {
  justify-self: start;
  padding: 2px 4px;
}
body.ipad-app .open-ticket-table > em {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  min-width: 46px;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid #79bca3;
  border-radius: 999px;
  color: #0b6549 !important;
  background: #dff4eb !important;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}
body.ipad-app .open-ticket-card.is-locked .open-ticket-table > em {
  min-width: 68px;
  color: #714900 !important;
  border-color: #d4a744;
  background: #fff0c7 !important;
}
body.ipad-app .open-ticket-meta {
  gap: 5px;
  margin-top: 9px;
}
body.ipad-app .open-ticket-meta > span {
  min-height: 16px;
  line-height: 1.2;
}
body.ipad-app .open-ticket-meta :where(svg,[data-lucide]) {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
}
body.ipad-app .open-ticket-amount {
  margin-top: auto !important;
  padding-top: 8px;
  line-height: 1.15;
}
html[data-theme="nox"] body.ipad-app .open-ticket-table > em {
  color: #d8fff0 !important;
  border-color: #4f8f79;
  background: #1d4a3b !important;
}

/* Vault summary intentionally has a dark panel in every theme. */
html[data-theme="light"] body.ipad-app .vault-grand,
html[data-theme="light"] body.ipad-app .vault-grand :where(div,span,strong) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html[data-theme="light"] body.ipad-app .vault-grand span { color: #d8e1ec !important; }
html[data-theme="light"] body.ipad-app .vault-grand .vault-total strong { color: #b9ddff !important; }

html[data-theme="light"] body.ipad-app .customer-app-empty {
  color: #53657c !important;
  border-color: #b8c7d8 !important;
  background: #f7faff !important;
}

html[data-theme="light"] body.ipad-app :where(svg,[data-lucide]) {
  color: inherit;
  stroke: currentColor !important;
  opacity: 1 !important;
}

html[data-theme="light"] body.ipad-app :where(.danger,.delete,.stock-delete,.timer-clear-button) {
  color: #991b1b !important;
  border-color: #e59a9a !important;
  background: #fff1f1 !important;
}

html[data-theme="light"] body.ipad-app :where(a,button,input,select,textarea):focus-visible {
  outline: 3px solid #1768d4 !important;
  outline-offset: 2px !important;
}

html[data-theme="nox"] body.ipad-app {
  color-scheme: dark;
  --ink: #f7f8fa;
  --muted: #cbd4dd;
  --line: #60758a;
  --soft: #202a34;
  --deep: #0b0710;
  --accent: #8fc5ee;
  --purple: #4f769a;
  --theme-surface: #202832;
  --theme-surface-2: #293541;
  --theme-text: #f7f8fa;
  --theme-muted: #cbd4dd;
  --theme-line: #60758a;
  --theme-action: #e2e3e5;
  --theme-action-2: #73a9d4;
  --theme-selected-bg: #354a60;
  --theme-selected-border: #9bc0e2;
  --theme-selected-text: #ffffff;
  --field-control-line: #687b8f;
  --field-card-line: #596f83;
  background: linear-gradient(145deg, #0b0710 0%, #131923 55%, #172636 100%) !important;
}

html[data-theme="nox"] body.ipad-app .ipad-clock {
  color: #dbeafe !important;
  border-color: #60758a !important;
  background: #1d2d3d !important;
  box-shadow: none !important;
}

html[data-theme="nox"] body.ipad-app :where(.ipad-tab,button,.button,[role="button"]) {
  box-shadow: none !important;
}

html[data-theme="nox"] body.ipad-app :where(.ipad-tab.active,button.active,.primary,.primary-btn) {
  box-shadow: 0 8px 18px rgba(57, 98, 136, .3) !important;
}

html[data-theme="nox"] body.ipad-app .dot.active {
  background: #73a9d4 !important;
}

html[data-theme="nox"] body.ipad-app :where(.ipad-brandbar, .ipad-tabs, .ipad-card, .card, .panel, fieldset, dialog) {
  color: #f7f8fa !important;
  border-color: #60758a !important;
  background-color: #202832 !important;
  background-image: none !important;
}

html[data-theme="nox"] body.ipad-app .ipad-brandbar {
  background: linear-gradient(110deg, #11151c, #23384a) !important;
}

html[data-theme="nox"] body.ipad-app :where(h1,h2,h3,h4,strong,b,label,legend,th,.section-heading) {
  color: #f7f8fa !important;
}

html[data-theme="nox"] body.ipad-app :where(p,small,.muted,.hint,label>span,.section-heading>span,.stock-row-label) {
  color: #cbd4dd !important;
}

html[data-theme="nox"] body.ipad-app :where(.ipad-tab, button, .button, [role="button"]) {
  color: #f7f8fa !important;
  border-color: #687b8f !important;
  background: #2d3a47 !important;
}

@media (hover: hover) {
  html[data-theme="nox"] body.ipad-app :where(.ipad-tab:hover, button:hover) {
    color: #ffffff !important;
    border-color: #9ac8ea !important;
    background: #36536b !important;
  }
}

html[data-theme="nox"] body.ipad-app :where(.ipad-tab.active, button.active, .primary, .primary-btn, .stock-save-button, .stock-add-button) {
  color: #081018 !important;
  -webkit-text-fill-color: #081018 !important;
  border-color: #e2e3e5 !important;
  background: linear-gradient(135deg, #f3f4f5, #bed2e2 52%, #73a9d4) !important;
}

html[data-theme="nox"] body.ipad-app :where(input,select,textarea,option) {
  color: #f7f8fa !important;
  caret-color: #8fc5ee !important;
  border-color: #71869a !important;
  background: #111923 !important;
}

html[data-theme="nox"] body.ipad-app :where(input,textarea)::placeholder {
  color: #bfcad4 !important;
  opacity: 1 !important;
}

html[data-theme="nox"] body.ipad-app :where(
  .stock-row, .customer-app-result, .customer-app-profile,
  .customer-app-history details, .open-ticket-card, .timer-grid button,
  .menu-grid button, .order-item, .history-card, .vault-card
) {
  color: #f7f8fa !important;
  border-color: #596f83 !important;
  background: #252f39 !important;
}

html[data-theme="nox"] body.ipad-app :where(.stock-row-note,.customer-app-result small,.customer-app-summary span,.customer-app-profile-actions small) {
  color: #cbd4dd !important;
}

html[data-theme="nox"] body.ipad-app .open-ticket-empty {
  color: #cbd4dd !important;
  border-color: #60758a !important;
  background: #202832 !important;
}

html[data-theme="nox"] body.ipad-app :where(.avatar-chip,.customer-app-avatar) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid #9ac8ea !important;
  background: #315b7b !important;
}

/* Cast information modal shared by the field app. */
.cast-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(8, 14, 24, .68);
  backdrop-filter: blur(8px);
}
.cast-info-overlay.show { display: grid; }
.cast-info-dialog {
  box-sizing: border-box;
  width: min(920px, 96vw);
  max-height: 90vh;
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--theme-line);
  border-radius: 18px;
  color: var(--theme-text);
  background: var(--theme-surface);
  box-shadow: 0 28px 70px rgba(0,0,0,.34);
}
.cast-info-head,.cast-info-identity,.cast-info-section-head { display: flex; align-items: center; }
.cast-info-head,.cast-info-section-head { justify-content: space-between; gap: 14px; }
.cast-info-identity { gap: 14px; }
.cast-info-identity h2 { margin: 2px 0; }
.cast-info-identity small,.cast-info-identity div>span,.cast-info-period { color: var(--theme-muted); }
.cast-info-head>button { width: 46px; height: 46px; border-radius: 12px; }
.cast-info-summary { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.cast-info-summary>div { padding: 15px; border: 1px solid var(--theme-line); border-radius: 12px; background: var(--theme-surface-2); }
.cast-info-summary span,.cast-info-summary strong { display: block; }
.cast-info-summary span { color: var(--theme-muted); font-size: 12px; font-weight: 800; }
.cast-info-summary strong { margin-top: 7px; font-size: 21px; }
.cast-info-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.receipt-issued-badge { display: inline-flex !important; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 5px; padding: 4px 7px; color: #0c684d !important; border: 1px solid #78c7ad; border-radius: 999px; background: #e9fbf4; font-size: 10px !important; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.receipt-issued-badge svg { width: 13px; height: 13px; flex: 0 0 13px; }
.cast-info-columns>section,.cast-info-dialog>section { margin-top: 12px; padding: 15px; border: 1px solid var(--theme-line); border-radius: 14px; background: var(--theme-surface-2); }
.cast-info-section-head h3 { margin: 0; }
.cast-info-section-head span { color: var(--theme-muted); font-weight: 800; }
.cast-info-list,.cast-info-customer-list { display: grid; gap: 7px; margin-top: 10px; }
.cast-info-list article,.cast-info-customer-list article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--theme-line); border-radius: 10px; background: var(--theme-surface); }
.cast-info-list article div,.cast-info-customer-list article div { display: grid; gap: 3px; }
.cast-info-list small,.cast-info-customer-list small,.cast-info-list p,.cast-info-customer-list p { color: var(--theme-muted); }
.cast-info-customer-list article>span { display: grid; width: 38px; height: 38px; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: #245f9f; font-weight: 900; }
.cast-info-customer-list article>div { flex: 1; }
.cast-info-customer-list article>p { margin: 0; text-align: right; }
.cast-directory-item { cursor: pointer; text-align: left; }
.cast-directory-item:hover,.cast-directory-item:focus-visible { border-color: var(--theme-action) !important; transform: translateY(-1px); }
@media(max-width:1040px){.cast-info-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.cast-info-summary{grid-template-columns:1fr 1fr}.cast-info-columns{grid-template-columns:1fr}.cast-info-dialog{padding:16px}}

html[data-theme="nox"] body.ipad-app :where(#open-ticket-count, #ticket-table-list-count, #selected-table-label) {
  color: #dbe6ef !important;
  -webkit-text-fill-color: #dbe6ef !important;
}

html[data-theme="nox"] body.ipad-app :where(svg,[data-lucide]) {
  color: inherit;
  stroke: currentColor !important;
  opacity: 1 !important;
}

html[data-theme="nox"] body.ipad-app :where(.danger,.delete,.stock-delete,.timer-clear-button) {
  color: #fff4f5 !important;
  border-color: #cf7480 !important;
  background: #6f303a !important;
}

html[data-theme="nox"] body.ipad-app :where(a,button,input,select,textarea):focus-visible {
  outline: 3px solid #9ac8ea !important;
  outline-offset: 2px !important;
}

/* Final field-app selection audit: blue selection and neutral navy shadows. */
html[data-theme="light"] body.ipad-app :where(
  .ipad-tab.active,
  .floor-tabs button.active,
  .floor-list button.active,
  .table-floor-list button.active,
  .ticket-settings-tabs button.active,
  .segmented-control button.active,
  [role="tab"][aria-selected="true"]
) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #0d4fae !important;
  background: linear-gradient(135deg, #0d4fae, #1463d6 58%, #287dcc) !important;
  background-image: linear-gradient(135deg, #0d4fae, #1463d6 58%, #287dcc) !important;
  box-shadow: 0 8px 20px rgba(20, 99, 214, .22) !important;
}
html[data-theme="light"] body.ipad-app :where(
  .ipad-tab.active,
  .floor-tabs button.active,
  .floor-list button.active,
  .table-floor-list button.active,
  .ticket-settings-tabs button.active,
  .segmented-control button.active,
  [role="tab"][aria-selected="true"]
) :where(strong,span,small,svg,[data-lucide]) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  stroke: currentColor !important;
}
html[data-theme="light"] body.ipad-app :where(
  .ipad-header,
  .ipad-tabs,
  .ticket-workspace,
  .ticket-settings-panel,
  .ticket-history-summary,
  .floor-panel,
  .table-panel
) {
  box-shadow: 0 8px 24px rgba(20, 48, 78, .10) !important;
}

/*
 * Final four-theme field-app contract.
 *
 * A number of field-app widgets still carry the original light/purple values
 * in styles.css and the inline screen styles.  Those values are fine in the
 * light theme, but made helper labels, inner cards and disabled actions look as
 * if the theme switch had not run.  Keep every dark-mode surface on the shared
 * theme tokens and reserve fixed colours for semantic success/warning/danger.
 */
html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app {
  --field-success-bg: #173f34;
  --field-success-line: #4f927b;
  --field-success-text: #d9fff1;
  --field-warning-bg: #493617;
  --field-warning-line: #a9792d;
  --field-warning-text: #ffe0a0;
  --field-danger-bg: #5b2833;
  --field-danger-line: #b96373;
  --field-danger-text: #ffe8ec;
}

html[data-theme="nox"] body.ipad-app {
  --field-panel-elevated: #31404d;
  --field-panel-selected: #36536b;
  --field-focus: #9ac8ea;
  --field-calendar-grid: #718aa0;
  --field-icon: #b9ddff;
}

html[data-theme="dark"] body.ipad-app {
  --theme-selected-bg: #4c2f67;
  --theme-selected-border: #b99be8;
  --theme-selected-text: #ffffff;
  --field-panel-elevated: #35283e;
  --field-panel-selected: #452b43;
  --field-focus: #ef83b8;
  --field-calendar-grid: #916994;
  --field-icon: #ffc3e3;
  --field-control-line: var(--theme-line);
  --field-card-line: var(--theme-line);
}

html[data-theme="luxury"] body.ipad-app {
  --theme-selected-bg: #43341f;
  --theme-selected-border: #dfc477;
  --theme-selected-text: #fff7e8;
  --field-panel-elevated: #352b1e;
  --field-panel-selected: #49391f;
  --field-focus: #e1c77f;
  --field-calendar-grid: #9a8148;
  --field-icon: #ffe2a0;
  --field-control-line: var(--theme-line);
  --field-card-line: var(--theme-line);
  --field-warning-bg: #4a3515;
  --field-warning-line: #b78b39;
  --field-warning-text: #ffe3a2;
}

/* Secondary labels must follow the theme instead of the legacy purple. */
html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app :where(
  .section-heading > span,
  .heading-actions > span,
  .open-ticket-heading > span,
  .staff-filter-heading span,
  .shift-app-calendar-head span,
  .stock-row-label,
  .stock-row-note,
  .customer-app-result small,
  .customer-app-summary span,
  .customer-app-profile-actions small,
  .customer-app-history summary span,
  .customer-app-item,
  .history-summary span,
  .history-list span,
  .history-list small,
  .ticket-detail-row :where(span,small,em),
  .vault-heading-actions > span,
  .vault-summary span,
  .vault-uncollected-breakdown > strong,
  .vault-history-detail span,
  .vault-collection-list-row span,
  .vault-shopping-row span,
  .staff-list-row span,
  .empty-log,
  #open-ticket-count,
  #ticket-table-list-count,
  #selected-table-label,
  #stock-count,
  #customer-app-count,
  #staff-summary-count,
  #cast-directory-count,
  #history-count,
  #vault-date-label
) {
  color: var(--theme-muted) !important;
  -webkit-text-fill-color: var(--theme-muted) !important;
  border-color: var(--theme-line) !important;
}

/* Inner cards and rows that previously stayed white in dark themes. */
html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app :where(
  .customer-app-search,
  .customer-app-result,
  .customer-app-profile,
  .customer-app-profile textarea,
  .customer-app-history details,
  .customer-app-items,
  .customer-app-summary > div,
  .customer-app-empty,
  .category-row button,
  .menu-grid button,
  .order-item,
  .qty-controls,
  .qty-controls button,
  .qty-controls b,
  .empty-order,
  .order-note,
  .payment-state,
  .ticket-total-bar,
  .ghost-action,
  .held-list button,
  .history-summary > div,
  .history-list .history-row,
  .history-detail-button,
  .ticket-detail-toggle button,
  .ticket-detail-row,
  .vault-history-head,
  .vault-history-head button,
  .vault-weekday,
  .vault-day,
  .vault-day-number,
  .vault-history-detail > div,
  .vault-summary > div,
  .vault-uncollected-breakdown,
  .vault-uncollected-breakdown span,
  .vault-fixed-change,
  .vault-cash-base-input,
  .vault-collection-list-row,
  .vault-count-row,
  .vault-count-row input,
  .vault-shopping,
  .vault-shopping-form input,
  .vault-shopping-row,
  .vault-shopping-row button,
  .manual-menu-type-row button,
  .manual-menu-form input,
  .manual-back-list input,
  .menu-staff-grid button,
  .choice-grid button,
  .complete-receipt > div,
  #complete-close,
  .edit-field input,
  .payment-methods button,
  .payment-summary > div,
  #payment-cancel,
  #edit-cancel,
  .staff-chips button,
  #month-total
) {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background-color: var(--theme-surface-2) !important;
  background-image: none !important;
}

html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app :where(
  .customer-app-search,
  .customer-app-profile textarea,
  .vault-cash-base-input,
  .vault-count-row input,
  .vault-shopping-form input,
  .manual-menu-form input,
  .manual-back-list input,
  .edit-field input
) {
  background-color: var(--theme-surface) !important;
}

html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app :where(
  .history-summary strong,
  .history-list .history-row > strong,
  .ticket-detail-row b,
  .vault-history-head strong,
  .vault-day,
  .vault-day-number,
  .vault-history-detail strong,
  .vault-summary strong,
  .vault-uncollected-breakdown :where(b,em),
  .vault-fixed-change strong,
  .vault-collection-list-row strong,
  .vault-count-row span,
  .vault-shopping-row,
  .payment-summary strong,
  .complete-receipt strong,
  .current-time,
  .staff-picker h2,
  .month-head h2
) {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text) !important;
}

/* Selected/primary controls use each theme's own action colours. */
html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app :where(
  .ipad-tab.active,
  .stock-mode-tabs button.active,
  .category-row button.selected,
  .manual-menu-type-row button.selected,
  .menu-staff-grid button.selected,
  .choice-grid button.selected,
  .payment-methods button.selected,
  .staff-chips button.selected,
  .vault-heading-actions button.selected,
  .primary,
  .primary-btn,
  .stock-add-button,
  .stock-save-button,
  .shift-app-save,
  .shift-day-detail-add,
  .sync-action,
  .paid-action,
  #payment-confirm,
  #edit-save,
  #complete-new,
  #vault-collect,
  #add-shopping
) {
  color: var(--theme-action-text) !important;
  -webkit-text-fill-color: var(--theme-action-text) !important;
  border-color: transparent !important;
  background-color: var(--theme-action) !important;
  background-image: linear-gradient(135deg, var(--theme-action), var(--theme-action-2)) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-action) 24%, transparent) !important;
}

html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app :where(
  .ipad-tab.active,
  .stock-mode-tabs button.active,
  .category-row button.selected,
  .manual-menu-type-row button.selected,
  .menu-staff-grid button.selected,
  .choice-grid button.selected,
  .payment-methods button.selected,
  .staff-chips button.selected,
  .vault-heading-actions button.selected,
  .primary,
  .primary-btn,
  .stock-add-button,
  .stock-save-button,
  .shift-app-save,
  .shift-day-detail-add,
  .sync-action,
  .paid-action,
  #payment-confirm,
  #edit-save,
  #complete-new,
  #vault-collect,
  #add-shopping
) :where(strong,span,small,svg,[data-lucide]) {
  color: var(--theme-action-text) !important;
  -webkit-text-fill-color: var(--theme-action-text) !important;
  stroke: currentColor !important;
}

/* Header surfaces and controls visibly change with every theme. */
html[data-theme="dark"] body.ipad-app .ipad-brandbar {
  border-color: #5c4864 !important;
  background: linear-gradient(110deg, #17101e, #35233e) !important;
}

html[data-theme="luxury"] body.ipad-app .ipad-brandbar {
  border-color: #806638 !important;
  background: linear-gradient(110deg, #100c08, #352817) !important;
}

html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app .ipad-clock {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--field-panel-elevated) !important;
  box-shadow: none !important;
}

html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app .ipad-clock :where(span,strong),
html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app .ipad-syncbar > small {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text) !important;
}

html[data-theme="nox"] body.ipad-app .theme-toggle {
  color: #eff8ff !important;
  -webkit-text-fill-color: #eff8ff !important;
  border-color: #718da5 !important;
  background: linear-gradient(135deg, #293844, #3d607b) !important;
}

html[data-theme="dark"] body.ipad-app .theme-toggle {
  color: #fff2fa !important;
  -webkit-text-fill-color: #fff2fa !important;
  border-color: #8d5b79 !important;
  background: linear-gradient(135deg, #3a263f, #5b2d4b) !important;
}

html[data-theme="luxury"] body.ipad-app .theme-toggle {
  color: #fff1c7 !important;
  -webkit-text-fill-color: #fff1c7 !important;
  border-color: #9f7d3f !important;
  background: linear-gradient(135deg, #3a2e1d, #5a431f) !important;
}

html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app .theme-toggle :where(span,svg,[data-lucide]) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  stroke: currentColor !important;
}

/* Store status is semantic, but its surface must belong to the active theme. */
html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app #store-operation-status.open {
  color: var(--field-success-text) !important;
  -webkit-text-fill-color: var(--field-success-text) !important;
  border: 1px solid var(--field-success-line) !important;
  background: var(--field-success-bg) !important;
}

html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app #store-operation-status:not(.open) {
  color: var(--theme-muted) !important;
  -webkit-text-fill-color: var(--theme-muted) !important;
  border: 1px solid var(--theme-line) !important;
  background: var(--theme-surface-2) !important;
}

html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app #store-open-button {
  color: var(--field-success-text) !important;
  -webkit-text-fill-color: var(--field-success-text) !important;
  border: 1px solid var(--field-success-line) !important;
  background: var(--field-success-bg) !important;
}

html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app :where(
  #store-close-button,
  .danger,
  .delete,
  .danger-action,
  .stock-delete,
  .timer-clear-button
) {
  color: var(--field-danger-text) !important;
  -webkit-text-fill-color: var(--field-danger-text) !important;
  border-color: var(--field-danger-line) !important;
  background: var(--field-danger-bg) !important;
  background-image: none !important;
}

html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app #reload-shared-config {
  color: var(--theme-action-text) !important;
  -webkit-text-fill-color: var(--theme-action-text) !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--theme-action), var(--theme-action-2)) !important;
}

html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app :where(
  button,
  .button,
  [role="button"]
):disabled {
  color: var(--theme-muted) !important;
  -webkit-text-fill-color: var(--theme-muted) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-2) !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: .78 !important;
}

html[data-theme="dark"] body.ipad-app .punch-actions button:disabled,
html[data-theme="luxury"] body.ipad-app .punch-actions button:disabled {
  color: var(--theme-muted) !important;
  -webkit-text-fill-color: var(--theme-muted) !important;
  border: 2px solid var(--theme-line) !important;
  background: var(--field-panel-elevated) !important;
}

/* Warnings keep their meaning without falling back to the light palette. */
html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app .low-stock-alert,
html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app .shift-app-day.understaffed {
  color: var(--field-warning-text) !important;
  border-color: var(--field-warning-line) !important;
  background: var(--field-warning-bg) !important;
}

html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app :where(
  .low-stock-alert-head strong,
  .low-stock-alert-item span,
  .stock-alert-value,
  .shift-app-warning
) {
  color: var(--field-warning-text) !important;
  -webkit-text-fill-color: var(--field-warning-text) !important;
}

html[data-theme="dark"] body.ipad-app .open-ticket-table > em,
html[data-theme="luxury"] body.ipad-app .open-ticket-table > em {
  color: var(--field-success-text) !important;
  border-color: var(--field-success-line) !important;
  background: var(--field-success-bg) !important;
}

html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app .receipt-issued-badge {
  color: var(--field-success-text) !important;
  border-color: var(--field-success-line) !important;
  background: var(--field-success-bg) !important;
}

/* The floating login strip is part of the field app and must not stay white. */
html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app #ark-auth-bar.ark-auth-bar {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.28) !important;
}

html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app #ark-auth-bar :where(.ark-auth-user,strong,span,small) {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text) !important;
  background: transparent !important;
}

html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app #ark-auth-bar .ark-auth-logout {
  color: var(--field-danger-text) !important;
  -webkit-text-fill-color: var(--field-danger-text) !important;
  border-color: var(--field-danger-line) !important;
  background: var(--field-danger-bg) !important;
}

/* Vault grand totals deliberately remain dark, with explicit readable text. */
html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app .vault-grand,
html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app .vault-grand > div {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(9,13,20,.92) !important;
}

html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app .vault-grand span {
  color: #dbe5ef !important;
  -webkit-text-fill-color: #dbe5ef !important;
}

html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app .vault-grand strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="luxury"] body.ipad-app .vault-grand .vault-total strong {
  color: #ffe2a0 !important;
  -webkit-text-fill-color: #ffe2a0 !important;
}

html[data-theme="nox"] body.ipad-app .vault-grand .vault-total strong {
  color: #b9ddff !important;
  -webkit-text-fill-color: #b9ddff !important;
}

html[data-theme="dark"] body.ipad-app .vault-grand .vault-total strong {
  color: #ffd3ea !important;
  -webkit-text-fill-color: #ffd3ea !important;
}

html:is([data-theme="nox"],[data-theme="dark"],[data-theme="luxury"]) body.ipad-app :where(a,button,input,select,textarea,summary):focus-visible {
  outline: 3px solid var(--field-focus) !important;
  outline-offset: 2px !important;
}

/*
 * Calendar grid contract.
 * The grid container must remain a stronger colour than every day surface.
 * Earlier theme overrides gave the container and cells the same background,
 * which made the day boundaries disappear in the vault calendar.
 */
html[data-theme] body.ipad-app :where(.vault-calendar,.shift-app-calendar) {
  gap: 1px !important;
  border: 1px solid var(--field-calendar-grid) !important;
  background-color: var(--field-calendar-grid) !important;
  background-image: none !important;
}

html[data-theme] body.ipad-app :where(.vault-weekday,.vault-day,.shift-app-weekday,.shift-app-day) {
  border: 0 !important;
}

/* Icons follow their control foreground instead of legacy fixed pink/purple. */
html[data-theme] body.ipad-app :where(button,a,[role="button"],.ipad-tab) :where(svg,[data-lucide]) {
  color: inherit !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

html[data-theme] body.ipad-app :where(.field,.shift-app-form,.customer-app-search,.stock-editor) > :where(svg,[data-lucide]) {
  color: var(--field-icon) !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

/* Final text and state contrast sweep for all eight field-app screens. */
html[data-theme] body.ipad-app :where(.avatar-chip,.customer-app-avatar) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
}

html[data-theme="nox"] body.ipad-app :where(.avatar-chip,.customer-app-avatar) { background: #315b7b !important; }
html[data-theme="dark"] body.ipad-app :where(.avatar-chip.coral,.avatar-chip.pink,.customer-app-avatar) { background: #8b2d5e !important; }
html[data-theme="dark"] body.ipad-app :where(.avatar-chip.blue,.avatar-chip.violet) { background: #65378c !important; }
html[data-theme="dark"] body.ipad-app .avatar-chip.amber { background: #76511e !important; }
html[data-theme="dark"] body.ipad-app :where(.avatar-chip.mint,.avatar-chip.green) { background: #2f6b56 !important; }
html[data-theme="luxury"] body.ipad-app :where(.avatar-chip.coral,.avatar-chip.pink,.customer-app-avatar) { background: #7d4430 !important; }
html[data-theme="luxury"] body.ipad-app :where(.avatar-chip.blue,.avatar-chip.violet) { background: #5b456e !important; }
html[data-theme="luxury"] body.ipad-app .avatar-chip.amber { background: #6f5422 !important; }
html[data-theme="luxury"] body.ipad-app :where(.avatar-chip.mint,.avatar-chip.green) { background: #365c46 !important; }

html[data-theme] body.ipad-app :where(#open-cast-add,.punch-actions button:not(:disabled),.ipad-tab.active,.ticket-floor-tab.active) {
  color: var(--theme-action-text) !important;
  -webkit-text-fill-color: var(--theme-action-text) !important;
}

html[data-theme] body.ipad-app :where(.ipad-tab.active,.ticket-floor-tab.active,.ticket-floor-tab.active *) {
  color: var(--theme-action-text) !important;
  -webkit-text-fill-color: var(--theme-action-text) !important;
}

html[data-theme] body.ipad-app :where(.timecard-row,.timecard-row strong,.timecard-row b) {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text) !important;
}

html[data-theme] body.ipad-app :where(.timecard-row span,.timecard-row small,.timecard-duration) {
  color: var(--theme-muted) !important;
  -webkit-text-fill-color: var(--theme-muted) !important;
}

html[data-theme] body.ipad-app :where(.shift-app-more,#toggle-all-open-tickets) {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-2) !important;
}

html[data-theme] body.ipad-app .open-ticket-table > em {
  color: var(--field-success-text) !important;
  -webkit-text-fill-color: var(--field-success-text) !important;
  border-color: var(--field-success-line) !important;
  background: var(--field-success-bg) !important;
}

html[data-theme] body.ipad-app :where(
  .ticket-floor-tabs > button.active,
  #open-cast-add,
  .punch-actions button:not(:disabled)
) {
  color: var(--theme-action-text) !important;
  -webkit-text-fill-color: var(--theme-action-text) !important;
  border-color: var(--theme-action) !important;
  background: linear-gradient(135deg, var(--theme-action), var(--theme-action-2)) !important;
  background-image: linear-gradient(135deg, var(--theme-action), var(--theme-action-2)) !important;
}

html[data-theme] body.ipad-app .ticket-floor-tabs > button.active :where(span,strong,small,svg,[data-lucide]) {
  color: var(--theme-action-text) !important;
  -webkit-text-fill-color: var(--theme-action-text) !important;
  stroke: currentColor !important;
}

html[data-theme] body.ipad-app .cast-directory-item {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-2) !important;
}

html[data-theme] body.ipad-app .cast-directory-item strong {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text) !important;
}

html[data-theme] body.ipad-app .cast-directory-item small {
  color: var(--theme-muted) !important;
  -webkit-text-fill-color: var(--theme-muted) !important;
}

html[data-theme] body.ipad-app .staff-chips button.selected :where(.staff-picker-name,strong,small) {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text) !important;
}

/* Calculator-style input pad: keep number keys and actions legible in every theme. */
html[data-theme] body.ipad-app .numeric-keypad-dialog {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
}

html[data-theme] body.ipad-app .numeric-keypad-head :where(strong,small) {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text) !important;
}

html[data-theme] body.ipad-app .numeric-keypad-head small {
  color: var(--theme-muted) !important;
  -webkit-text-fill-color: var(--theme-muted) !important;
}

html[data-theme] body.ipad-app .numeric-keypad-display {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text) !important;
  border-color: var(--theme-action) !important;
  background: var(--theme-surface-2) !important;
}

html[data-theme] body.ipad-app .numeric-keypad-grid > button,
html[data-theme] body.ipad-app #numeric-keypad-close,
html[data-theme] body.ipad-app #numeric-keypad-clear {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-surface-2) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme] body.ipad-app .numeric-keypad-grid > button:active {
  color: var(--theme-action-text) !important;
  -webkit-text-fill-color: var(--theme-action-text) !important;
  border-color: var(--theme-action) !important;
  background: var(--theme-action) !important;
}

html[data-theme] body.ipad-app #numeric-keypad-done {
  color: var(--theme-action-text) !important;
  -webkit-text-fill-color: var(--theme-action-text) !important;
  border-color: var(--theme-action) !important;
  background: linear-gradient(135deg, var(--theme-action), var(--theme-action-2)) !important;
}

/* Ticket wizard selections must stay visually distinct from the audit palette's
   generic button surface in every field-app theme. */
html[data-theme] body.ipad-app .wizard-plan-card.selected {
  color: var(--theme-selected-text) !important;
  -webkit-text-fill-color: var(--theme-selected-text) !important;
  border-color: var(--theme-selected-border) !important;
  background: var(--theme-selected-bg) !important;
  background-image: none !important;
  box-shadow: 0 0 0 3px var(--theme-surface), 0 0 0 6px var(--theme-selected-border) !important;
}

html[data-theme] body.ipad-app .wizard-plan-card.selected :where(
  header strong,
  .wizard-plan-columns b,
  .wizard-plan-price,
  .wizard-plan-price strong
) {
  color: var(--theme-selected-text) !important;
  -webkit-text-fill-color: var(--theme-selected-text) !important;
}

html[data-theme] body.ipad-app .wizard-cast-chips button.selected {
  color: var(--theme-selected-text) !important;
  -webkit-text-fill-color: var(--theme-selected-text) !important;
  border-color: var(--theme-selected-border) !important;
  background: var(--theme-selected-bg) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px var(--theme-selected-border) !important;
}

/* The combobox active row must override the field theme's generic
   button.active palette so keyboard and touch selection remain visible. */
html[data-theme] body.ipad-app .bottle-product-option:is(.active, [aria-selected="true"]) {
  color: var(--theme-action-text) !important;
  -webkit-text-fill-color: var(--theme-action-text) !important;
  border-color: var(--theme-action) !important;
  background: linear-gradient(135deg, var(--theme-action), var(--theme-action-2)) !important;
  background-image: linear-gradient(135deg, var(--theme-action), var(--theme-action-2)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-action-text) 28%, transparent) !important;
}

html[data-theme] body.ipad-app .bottle-product-option:is(.active, [aria-selected="true"]) :where(strong, small, span) {
  color: var(--theme-action-text) !important;
  -webkit-text-fill-color: var(--theme-action-text) !important;
}

html[data-theme] body.ipad-app .bottle-product-option:is(.active, [aria-selected="true"]) span {
  border-color: color-mix(in srgb, var(--theme-action-text) 45%, transparent) !important;
  background: color-mix(in srgb, var(--theme-action-text) 14%, transparent) !important;
  background-image: none !important;
}

/*
 * Field-app selection contract.
 * Selected controls use the same semantic colours in every theme and never
 * rely on a subtle tint alone.  This deliberately comes after the older
 * action-gradient rules so selection and primary actions remain distinct.
 */
html[data-theme] body.ipad-app :where(
  .ipad-tab.active,
  .ticket-floor-tabs > button.active,
  .table-button-grid button.selected,
  .open-ticket-card.selected,
  #toggle-all-open-tickets.active,
  .category-row button.selected,
  .stock-mode-tabs button.active,
  .stock-category-filter.active,
  .customer-app-result.active,
  .ticket-settings-mode-tabs button.active,
  .table-settings-floor-list button.active,
  .back-mode-switch button.active,
  .ticket-preview-categories button.active,
  .wizard-absent-toggle.active,
  .wizard-plan-card.selected,
  .wizard-cast-chips button.selected,
  .staff-add-grid button.selected,
  .menu-staff-grid button.selected,
  .manual-menu-type-row button.selected,
  .choice-grid button.selected,
  .payment-methods button.selected,
  #time-staff-chips button.selected,
  .vault-heading-actions button.selected,
  .vault-day.selected,
  .timecard-transport-toggle[data-active="true"]
) {
  color: var(--theme-selected-text) !important;
  -webkit-text-fill-color: var(--theme-selected-text) !important;
  border: 2px solid var(--theme-selected-border) !important;
  background: var(--theme-selected-bg) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px var(--theme-selected-border), 0 5px 14px rgba(0, 0, 0, .16) !important;
}

html[data-theme] body.ipad-app :where(
  .ipad-tab.active,
  .ticket-floor-tabs > button.active,
  .table-button-grid button.selected,
  .open-ticket-card.selected,
  #toggle-all-open-tickets.active,
  .category-row button.selected,
  .stock-mode-tabs button.active,
  .stock-category-filter.active,
  .customer-app-result.active,
  .ticket-settings-mode-tabs button.active,
  .table-settings-floor-list button.active,
  .back-mode-switch button.active,
  .ticket-preview-categories button.active,
  .wizard-absent-toggle.active,
  .wizard-plan-card.selected,
  .wizard-cast-chips button.selected,
  .staff-add-grid button.selected,
  .menu-staff-grid button.selected,
  .manual-menu-type-row button.selected,
  .choice-grid button.selected,
  .payment-methods button.selected,
  #time-staff-chips button.selected,
  .vault-heading-actions button.selected,
  .vault-day.selected,
  .timecard-transport-toggle[data-active="true"]
) :where(strong, span, small, b, em, svg, [data-lucide]) {
  color: var(--theme-selected-text) !important;
  -webkit-text-fill-color: var(--theme-selected-text) !important;
  stroke: currentColor !important;
}

/* Checkbox/radio rows retain their native control and gain a selected surface. */
html[data-theme] body.ipad-app :where(.payment-table-option, label) > input:is([type="checkbox"], [type="radio"]) {
  accent-color: var(--theme-selected-border);
}

html[data-theme] body.ipad-app .payment-table-option > input:checked + span {
  color: var(--theme-selected-text) !important;
  -webkit-text-fill-color: var(--theme-selected-text) !important;
  border-color: var(--theme-selected-border) !important;
  background: var(--theme-selected-bg) !important;
  box-shadow: inset 0 0 0 1px var(--theme-selected-border) !important;
}

/* A visible check reinforces compact selections without depending on colour. */
html[data-theme] body.ipad-app :where(
  .table-button-grid button.selected,
  .category-row button.selected,
  .stock-category-filter.active,
  .customer-app-result.active,
  .staff-add-grid button.selected,
  .menu-staff-grid button.selected,
  .manual-menu-type-row button.selected,
  .choice-grid button.selected,
  .payment-methods button.selected,
  #time-staff-chips button.selected,
  .vault-heading-actions button.selected
) {
  position: relative !important;
  padding-right: 30px !important;
}

html[data-theme] body.ipad-app :where(
  .table-button-grid button.selected,
  .category-row button.selected,
  .stock-category-filter.active,
  .customer-app-result.active,
  .staff-add-grid button.selected,
  .menu-staff-grid button.selected,
  .manual-menu-type-row button.selected,
  .choice-grid button.selected,
  .payment-methods button.selected,
  #time-staff-chips button.selected,
  .vault-heading-actions button.selected
)::after {
  content: "✓";
  position: absolute;
  z-index: 2;
  top: 5px;
  right: 5px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: var(--theme-selected-bg) !important;
  -webkit-text-fill-color: var(--theme-selected-bg) !important;
  border: 1px solid var(--theme-selected-border);
  border-radius: 999px;
  background: var(--theme-selected-border);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

html[data-theme] body.ipad-app .table-button-grid button.selected::after {
  right: auto;
  left: 5px;
}

html[data-theme] body.ipad-app .table-button-grid button.selected {
  padding-right: 6px !important;
  padding-left: 30px !important;
}

html[data-theme] body.ipad-app .customer-app-result.active > svg {
  visibility: hidden;
}

/* Compact field controls stay tappable on 320px-wide and older devices. */
html[data-theme] body.ipad-app :where(
  .ipad-tab,
  #toggle-all-open-tickets,
  .ticket-preview-categories button,
  .ticket-settings-mode-tabs button,
  .back-mode-switch button,
  .vault-heading-actions button,
  .timecard-transport-toggle
) {
  min-height: 44px !important;
  touch-action: manipulation;
}

html[data-theme] body.ipad-app :where(
  button,
  a.ipad-tab,
  [role="button"],
  [role="tab"],
  [role="radio"],
  [role="switch"]
):focus-visible {
  outline: 3px solid var(--theme-selected-border) !important;
  outline-offset: 2px !important;
}

/* Higher-specificity fallback for older WebKit and persistent touch-hover. */
html[data-theme] body.ipad-app a.ipad-tab.active,
html[data-theme] body.ipad-app .ticket-floor-tabs > button.active,
html[data-theme] body.ipad-app .table-button-grid > button.selected,
html[data-theme] body.ipad-app button.open-ticket-card.selected,
html[data-theme] body.ipad-app button#toggle-all-open-tickets.active,
html[data-theme] body.ipad-app .category-row > button.selected,
html[data-theme] body.ipad-app .stock-mode-tabs > button.active,
html[data-theme] body.ipad-app button.stock-category-filter.active,
html[data-theme] body.ipad-app button.customer-app-result.active,
html[data-theme] body.ipad-app .ticket-settings-mode-tabs > button.active,
html[data-theme] body.ipad-app .table-settings-floor-list > button.active,
html[data-theme] body.ipad-app .back-mode-switch > button.active,
html[data-theme] body.ipad-app .ticket-preview-categories > button.active,
html[data-theme] body.ipad-app .menu-staff-grid > button.selected,
html[data-theme] body.ipad-app .manual-menu-type-row > button.selected,
html[data-theme] body.ipad-app .choice-grid > button.selected,
html[data-theme] body.ipad-app .payment-methods > button.selected,
html[data-theme] body.ipad-app #time-staff-chips > button.selected,
html[data-theme] body.ipad-app .vault-heading-actions > button.selected,
html[data-theme] body.ipad-app button.vault-day.selected,
html[data-theme] body.ipad-app button.timecard-transport-toggle[data-active="true"] {
  color: var(--theme-selected-text) !important;
  -webkit-text-fill-color: var(--theme-selected-text) !important;
  border: 2px solid var(--theme-selected-border) !important;
  background: var(--theme-selected-bg) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px var(--theme-selected-border), 0 5px 14px rgba(0, 0, 0, .16) !important;
}

html[data-theme] body.ipad-app a.ipad-tab.active *,
html[data-theme] body.ipad-app .ticket-floor-tabs > button.active *,
html[data-theme] body.ipad-app .table-button-grid > button.selected *,
html[data-theme] body.ipad-app button.open-ticket-card.selected *,
html[data-theme] body.ipad-app .category-row > button.selected *,
html[data-theme] body.ipad-app .stock-mode-tabs > button.active *,
html[data-theme] body.ipad-app button.stock-category-filter.active *,
html[data-theme] body.ipad-app button.customer-app-result.active *,
html[data-theme] body.ipad-app .ticket-settings-mode-tabs > button.active *,
html[data-theme] body.ipad-app .table-settings-floor-list > button.active *,
html[data-theme] body.ipad-app .back-mode-switch > button.active *,
html[data-theme] body.ipad-app .ticket-preview-categories > button.active *,
html[data-theme] body.ipad-app .menu-staff-grid > button.selected *,
html[data-theme] body.ipad-app .manual-menu-type-row > button.selected *,
html[data-theme] body.ipad-app .choice-grid > button.selected *,
html[data-theme] body.ipad-app .payment-methods > button.selected *,
html[data-theme] body.ipad-app #time-staff-chips > button.selected *,
html[data-theme] body.ipad-app .vault-heading-actions > button.selected *,
html[data-theme] body.ipad-app button.vault-day.selected *,
html[data-theme] body.ipad-app button.timecard-transport-toggle[data-active="true"] * {
  color: var(--theme-selected-text) !important;
  -webkit-text-fill-color: var(--theme-selected-text) !important;
  stroke: currentColor !important;
}

/* Bottle combobox: the highlighted row is a persistent selection, not a
   primary action.  Semantic selection tokens keep every text layer at AA. */
html[data-theme] body.ipad-app button.bottle-product-option:is(.active, [aria-selected="true"]) {
  color: var(--theme-selected-text) !important;
  -webkit-text-fill-color: var(--theme-selected-text) !important;
  border: 2px solid var(--theme-selected-border) !important;
  background: var(--theme-selected-bg) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px var(--theme-selected-border) !important;
}

html[data-theme] body.ipad-app button.bottle-product-option:is(.active, [aria-selected="true"]) :is(strong, small, span) {
  color: var(--theme-selected-text) !important;
  -webkit-text-fill-color: var(--theme-selected-text) !important;
}

html[data-theme] body.ipad-app button.bottle-product-option:is(.active, [aria-selected="true"]) span {
  border-color: var(--theme-selected-border) !important;
  background: transparent !important;
  background-image: none !important;
}

/* Persistent ticket-setting choices remain comfortably tappable even where
   older mobile rules reduced them to 38–40px. */
html[data-theme] body.ipad-app :is(
  .ticket-settings-mode-tabs > button,
  .table-settings-floor-list > button,
  .back-mode-switch > button,
  .ticket-preview-categories > button,
  .wizard-absent-toggle,
  .wizard-plan-card,
  .wizard-cast-chips > button
) {
  box-sizing: border-box;
  min-height: 44px !important;
}

/* The 320px ticket card has less than 130px of inner width.  Put the status
   on its own line so the table name and status never crop one another. */
@media (max-width: 360px) {
  body.ipad-app .open-ticket-card[data-open-ticket-table] {
    min-width: 0;
    padding: 10px !important;
  }

  body.ipad-app .open-ticket-card[data-open-ticket-table] .open-ticket-table {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 3px 6px;
  }

  body.ipad-app .open-ticket-card[data-open-ticket-table] .open-ticket-table > strong {
    grid-column: 1;
  }

  body.ipad-app .open-ticket-card[data-open-ticket-table] .open-ticket-table > small {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.ipad-app .open-ticket-card[data-open-ticket-table] .open-ticket-table > :is(em, .table-vip-label) {
    position: static;
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  body.ipad-app :is(.ticket-floor-tabs, .stock-category-filters) {
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 2px;
    scroll-snap-type: inline proximity;
  }

  body.ipad-app :is(.ticket-floor-tabs > button, .stock-category-filters > button) {
    scroll-snap-align: start;
  }
}

/* Field controls use one optical centre regardless of whether Lucide has
   already replaced the placeholder icon.  Grid/card controls keep their own
   layout; only compact one-line controls are normalized here. */
body.ipad-app :where(
  .ipad-tab,
  .table-settings-link,
  .ticket-floor-tabs > button,
  .stock-mode-tabs > button,
  .stock-category-filter,
  .ticket-preview-categories > button,
  .ticket-settings-mode-tabs > button,
  .table-settings-floor-list > button,
  .back-mode-switch > button,
  .manual-menu-type-row > button,
  .vault-heading-actions > button,
  .shift-app-month-actions > button
) {
  box-sizing: border-box;
  align-items: center !important;
  justify-content: center;
  line-height: 1.25;
}

body.ipad-app :where(
  .table-settings-link,
  .timer-actions > button,
  #extend-timer,
  #clear-timer,
  [data-panel="stock"] button
) {
  min-height: 44px !important;
}

body.ipad-app :where(button, a.ipad-tab, [role="button"], [role="tab"]) > :where(svg, [data-lucide]) {
  flex: 0 0 auto;
  align-self: center;
  vertical-align: middle;
}

/* A selected control is persistent state, not a hover treatment.  Pointer
   hover, keyboard focus and press feedback must therefore preserve its theme
   surface and foreground. */
html[data-theme] body.ipad-app :where(
  .ipad-tab.active,
  .ticket-floor-tabs > button.active,
  .table-button-grid button.selected,
  .open-ticket-card.selected,
  #toggle-all-open-tickets.active,
  .category-row button.selected,
  .stock-mode-tabs button.active,
  .stock-category-filter.active,
  .customer-app-result.active,
  .ticket-settings-mode-tabs button.active,
  .table-settings-floor-list button.active,
  .back-mode-switch button.active,
  .ticket-preview-categories button.active,
  .wizard-absent-toggle.active,
  .wizard-plan-card.selected,
  .wizard-cast-chips button.selected,
  .staff-add-grid button.selected,
  .menu-staff-grid button.selected,
  .manual-menu-type-row button.selected,
  .choice-grid button.selected,
  .payment-methods button.selected,
  #time-staff-chips button.selected,
  .vault-heading-actions button.selected,
  .vault-day.selected,
  .timecard-transport-toggle[data-active="true"]
):is(:hover, :active, :focus-visible) {
  color: var(--theme-selected-text) !important;
  -webkit-text-fill-color: var(--theme-selected-text) !important;
  border: 2px solid var(--theme-selected-border) !important;
  background: var(--theme-selected-bg) !important;
  background-image: none !important;
}

/* Touch Safari can retain :hover after a tap.  Disable the few legacy hover
   decorations that were defined outside a hover-capability media query. */
@media (hover: none) {
  body.ipad-app .stock-category-filter:not(.active):hover,
  body.ipad-app .bottle-product-option:not(.active):not([aria-selected="true"]):hover,
  body.ipad-app .open-ticket-card:not(.selected):hover,
  body.ipad-app :where(.shift-app-birthday-person, .shift-app-day-birthday):hover {
    transform: none !important;
    box-shadow: none !important;
  }

  body.ipad-app .stock-category-filter:not(.active):hover,
  body.ipad-app .bottle-product-option:not(.active):not([aria-selected="true"]):hover {
    border-color: var(--field-control-line) !important;
  }

  body.ipad-app .open-ticket-card:not(.selected):hover {
    border-color: var(--field-card-line) !important;
  }

  body.ipad-app :where(.shift-app-birthday-person, .shift-app-day-birthday):hover {
    border-color: var(--theme-line) !important;
  }
}

@media (max-width: 560px) {
  body.ipad-app [data-panel] :where(
    button,
    input:not([type="checkbox"]):not([type="radio"]),
    select
  ) {
    box-sizing: border-box;
    min-height: 44px !important;
  }
}