/* Back-office only. The cashier, public menu, login and receipt layouts retain
   their own typography. Override legacy 8–11px component text at this boundary. */
@media screen {
body.backoffice-mode :is(#app-shell, #modal-root, #toast-stack, .backoffice-modal-exit-confirm) {
  font-size: 16px;
  line-height: 1.5;
}
body.backoffice-mode :is(#app-shell, #modal-root) :is(p, li, dt, dd) {
  font-size: 16px;
  line-height: 1.5;
}
body.backoffice-mode :is(#app-shell, #modal-root) :is(label, legend, input, select, textarea, button, .button, .tiny-button, .tabs button, td) {
  font-size: 15px !important;
  line-height: 1.4;
}
body.backoffice-mode :is(#app-shell, #modal-root) :is(small, .eyebrow, .status, .badge, .permission-note, .nav-label, .clock, .stat-label, .stat-note, .stat-meta, .trend, .classic-context) {
  font-size: 13px !important;
  line-height: 1.5;
}
body.backoffice-mode :is(#app-shell, #modal-root) :is(p, li, label, legend, td, th) :is(span, strong, b, a) {
  font-size: inherit !important;
}
body.backoffice-mode :is(#app-shell, #modal-root) :is(p, li, label, td) small {
  font-size: 13px !important;
}
body.backoffice-mode :is(#app-shell, #modal-root) h1 { font-size: 30px; line-height: 1.2; }
body.backoffice-mode :is(#app-shell, #modal-root) h2 { font-size: 23px; line-height: 1.3; }
body.backoffice-mode :is(#app-shell, #modal-root) h3 { font-size: 19px; line-height: 1.35; }
body.backoffice-mode :is(#app-shell, #modal-root) h4 { font-size: 16px; line-height: 1.4; }

body.backoffice-mode .app-shell { grid-template-columns: 264px minmax(0, 1fr); }
body.backoffice-mode .sidebar { width: 264px; }
body.backoffice-mode .main-nav { flex: 1; min-height: 0; overflow-y: auto; }
body.backoffice-mode .main-nav :is(a, summary) {
  min-height: 44px;
  font-size: 15px !important;
  line-height: 1.35;
  white-space: normal;
}
body.backoffice-mode .nav-group > div a { min-height: 40px; }
body.backoffice-mode :is(.user-chip strong, .mini-row-main strong, .mini-row-value, .classic-switch-row strong, .sales-settings-row strong, .role-tree-leaf, .role-crud-row > strong) {
  font-size: 15px;
  line-height: 1.4;
}
body.backoffice-mode :is(.user-chip small, .mini-row-main small, .role-workflow-note p, .workflow-arrow, .payment-setting-name small) { font-size: 13px; }
body.backoffice-mode :is(#app-shell, #modal-root) :is(.empty-state, .small-link) { font-size: 15px; line-height: 1.5; }
body.backoffice-mode :is(.stat-meta, .empty-state, .dashboard-breakdown-copy, .dashboard-chart-axis, .bar-labels) > span { font-size: 13px; }
body.backoffice-mode .topbar :is(button, select, .language-control) { font-size: 14px !important; }
body.backoffice-mode .topbar button > span { font-size: inherit; }
body.backoffice-mode .topbar #day-guide-button span { font-size: 14px !important; }
body.backoffice-mode :is(.card-head, .data-toolbar, .page-actions) { flex-wrap: wrap; gap: 12px; }
body.backoffice-mode :is(.data-toolbar, .dashboard-period-tabs button, .classic-filter-tabs button) { font-size: 15px; }
body.backoffice-mode :is(.data-toolbar > span, .catalog-batch-count, .role-editor-tabs span) { font-size: 13px; }
/* The outer workspace is single-column; item filters use catalog-library-layout inside it. */
body.backoffice-mode .catalog-workspace { grid-template-columns: minmax(0, 1fr); }

body.backoffice-mode :is(#app-shell, #modal-root) th {
  font-size: 13px !important;
  letter-spacing: .035em;
  line-height: 1.4;
  white-space: normal;
}
body.backoffice-mode :is(.data-table, .classic-table, .printer-picker-table, .printer-plan-table) :is(th, td) { padding: 13px 16px; }
body.backoffice-mode .data-table-wrap { max-width: 100%; overflow-x: auto; }
body.backoffice-mode .data-table:has(#catalog-table-select-all) { min-width: 1220px; }
body.backoffice-mode .data-table:has(#catalog-table-select-all) :is(th, td):nth-child(2) { min-width: 220px; }
body.backoffice-mode .data-table:has(#catalog-table-select-all) td:nth-child(3) { white-space: nowrap; }
body.backoffice-mode :is(#app-shell, #modal-root) .tiny-button { min-height: 36px; padding: 7px 11px; }
body.backoffice-mode :is(#app-shell, #modal-root) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not(.switch-control),
body.backoffice-mode :is(#app-shell, #modal-root) select { min-height: 44px; }
body.backoffice-mode :is(#app-shell, #modal-root) textarea { min-height: 100px; }
body.backoffice-mode .modal:not(.wide):not(.drawer) { width: min(720px, 100%); }
body.backoffice-mode .modal-head p { font-size: 14px; }
body.backoffice-mode .modal-foot { flex-wrap: wrap; }
body.backoffice-mode .form-grid { gap: 18px; }
body.backoffice-mode .form-grid > * { min-width: 0; }
body.backoffice-mode #modal-root .form-grid strong { font-size: 15px; line-height: 1.4; }
body.backoffice-mode #modal-root .form-grid :is(em, .catalog-option-minimum span, .catalog-ingredient-count) { font-size: 13px; line-height: 1.5; }
body.backoffice-mode .toast { font-size: 15px; line-height: 1.5; }

@media (max-width: 840px) {
  body.backoffice-mode .app-shell { grid-template-columns: minmax(0, 1fr); }
  body.backoffice-mode .sidebar { width: min(280px, 86vw); }
  body.backoffice-mode .modal-foot .button { flex: 1 1 auto; }
}
}