/* Kitchen OS responsive/readability contract.
   This layer is intentionally loaded last. It standardizes interactive
   geometry and bilingual wrapping without changing business behavior. */

:root {
  --kitchen-control-font-min: 12px;
  --kitchen-control-height: 32px;
  --kitchen-touch-height: 40px;
}

html,
body,
#app,
.app-shell,
.main-shell,
.page-content {
  max-width: 100%;
}

button,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-width: 0;
  font-size: max(var(--kitchen-control-font-min), 0.75rem);
}

/* Select typography is a cross-module accessibility contract. Several legacy
   forms use higher-specificity 10-11.5px rules, so the final contract must win. */
select {
  font-size: var(--kitchen-control-font-min) !important;
}

/* Desktop form controls are interactive targets too. Legacy inventory rules
   used 19-27px inputs and 11.5px selects; keep every visible form control at
   the same readable baseline as buttons. */
input:not([type="checkbox"]):not([type="radio"]),
select {
  min-height: var(--kitchen-control-height);
  box-sizing: border-box;
}

.inventory-select,
.quantity-input,
.minimum-input {
  min-height: var(--kitchen-control-height) !important;
  font-size: var(--kitchen-control-font-min) !important;
  box-sizing: border-box;
}

button,
[role="button"],
.nav-item {
  min-height: var(--kitchen-control-height);
}

button:not(.icon-button),
.primary-button,
.secondary-button,
.danger-button,
.central-action,
.op-primary,
.operation-filter-chip,
.operation-tab,
.report-tab,
.permission-action,
.level-pill,
.area-tabs button,
.qr-action-button,
.qr-print-sheet button,
.central-zone-tab,
.central-mode-tab,
.calendar-shortcut,
.language-switch > button,
.topbar-language-switch > button,
.auth-user-chip button,
.skill-layout-toggle button {
  min-width: 24px;
  min-height: var(--kitchen-control-height);
  font-size: var(--kitchen-control-font-min);
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.icon-button {
  min-width: var(--kitchen-control-height);
  min-height: var(--kitchen-control-height);
}

/* Account administration uses compact icon/actions in the legacy table. Keep
   them comfortably clickable without enlarging unrelated inventory rows. */
.account-admin-card button,
.account-modal button,
.account-self-card button {
  min-height: 42px;
}

.account-admin-card .icon-button,
.account-modal .icon-button {
  min-width: 42px;
}

.calendar-field input,
.calendar-field select,
.modal .input-grid input,
.modal .input-grid select,
.account-modal input,
.account-modal select,
.account-modal textarea,
.central-editor-modal input,
.central-editor-modal select,
.central-editor-modal textarea {
  font-size: max(12px, 0.8rem);
}

/* Product dialogs scroll vertically only. The legacy sticky submit footer used
   negative inline margins and expanded to 1484px in a 1440px viewport. Keep
   every submit bar inside its own containing block regardless of modal markup. */
.ingredient-modal {
  overflow-x: clip;
}

.modal-submit-bar {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

.bilingual-control-label,
.bilingual-control-label > span,
.label-primary,
.label-secondary,
button > span,
.nav-item > span {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Long translated labels should reflow before the control shrinks below a
   readable size. */
.branch-ops-tabs,
.central-tabs,
.inventory-view-switch,
.warehouse-switch,
.filters-row,
.actions-row,
.modal-actions,
.account-actions {
  min-width: 0;
}

.branch-ops-tabs button,
.central-tabs button,
.inventory-view-switch button,
.warehouse-switch button,
.filter-tab {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Scrolling is allowed inside a deliberate table/strip container, never as a
   consequence of the document itself being wider than the device. */
.inventory-table,
.account-table,
.table-scroll,
.storage-table-scroll {
  max-width: 100%;
}

@media (max-width: 760px) {
  html,
  body,
  #app,
  .app-shell,
  .main-shell {
    width: 100%;
    min-width: 0 !important;
    overflow-x: clip;
  }

  button,
  [role="button"],
  .nav-item,
  .primary-button,
  .secondary-button,
  .danger-button,
  .central-action,
  .op-primary,
  .operation-filter-chip,
  .operation-tab,
  .report-tab,
  .permission-action,
  .level-pill,
  .area-tabs button,
  .qr-action-button,
  .central-zone-tab,
  .central-mode-tab,
  .calendar-shortcut {
    min-height: var(--kitchen-touch-height);
    font-size: 12px;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .calendar-field input,
  .calendar-field select,
  .modal .input-grid input,
  .modal .input-grid select,
  .account-modal input,
  .account-modal select,
  .account-modal textarea,
  .central-editor-modal input,
  .central-editor-modal select,
  .central-editor-modal textarea {
    min-height: var(--kitchen-touch-height);
    font-size: 16px;
  }

  select,
  .inventory-select,
  .quantity-input,
  .minimum-input {
    min-height: var(--kitchen-touch-height) !important;
    font-size: 16px !important;
  }

  /* Numeric inventory fields are frequently operated one-handed on phones.
     Grid shrinkage used to collapse minimum inputs to 15-17px wide at 320px,
     making them effectively untappable. Keep a compact but real touch target. */
  .quantity-input,
  .minimum-input {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: var(--kitchen-touch-height) !important;
    min-height: var(--kitchen-touch-height) !important;
  }

  /* Schedule labels are bilingual and can exceed the compact action width at
     320px. A legacy page-action rule uses nowrap/hidden, which clipped the
     Vietnamese "Xếp thêm người" label. Allow this action to wrap instead of
     truncating a primary operation. */
  button[data-action="schedule-add"] {
    max-width: 100%;
    height: auto !important;
    min-height: var(--kitchen-touch-height) !important;
    padding-top: 6px;
    padding-bottom: 6px;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.2;
  }

  /* SOP page actions were still overridden by an older compact mobile rule to
     32px/9px. They are primary operational controls, so keep them readable and
     tappable at the same mobile baseline as the rest of the application. */
  button[data-action="sop-qr"],
  button[data-action="sop-add"] {
    max-width: 100%;
    height: auto !important;
    min-height: var(--kitchen-touch-height) !important;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.2;
  }

  .account-admin-card button,
  .account-modal button,
  .account-self-card button {
    min-height: 44px;
  }

  .account-admin-card .icon-button,
  .account-modal .icon-button {
    min-width: 44px;
  }

  .modal-card,
  .account-modal,
  .central-editor-modal {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px);
  }

  .modal-actions,
  .account-actions,
  .page-heading,
  .filters-row {
    min-width: 0;
    flex-wrap: wrap;
  }
}