/*
 * Malvern POS on phones and small tablets, October 2026.
 * Tills (980px and up) keep the no-scroll, fit-to-screen layout. Below that the app is a touch
 * app: the page scrolls, every page heading stacks, toolbars wrap or scroll sideways, two-panel
 * pages stack, data tables become tappable cards, kanban boards swipe column by column, and
 * Checkout gets a basket bar pinned to the bottom. Nothing is hidden that a till shows.
 * Loaded after app-chrome.css. Presentation only: same ids, hooks and text.
 */

/* The basket bar exists only on phones. */
.mobile-basket-bar { display: none; }

@media (max-width: 820px) {
  html .app-shell .workflow-view.fit-view .tw-salon { height: auto; min-height: 0; }
  html .app-shell .tw-salon .tw-main-body { overflow: visible; flex: none; }
  html .app-shell .tw-salon .tw-list { flex: none; }
  html .app-shell .tw-salon .tw-salon-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .app-shell .tw-salon .tw-row { flex: none; height: auto; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 8px; }
  html .app-shell .tw-salon .tw-row > button { grid-column: 2 / -1; }
}

/* Tills: small row buttons and segment switches reach a comfortable touch size. */
html .app-shell .view :is(.mini-button, .rd-mini) { position: relative; min-height: 40px; }
html .app-shell .view :is(.mini-button, .rd-mini)::after { content: ""; position: absolute; inset: -2px; }
html .app-shell .view .rd-seg > button { min-height: 44px; }
html .app-shell .view .subcategory-chip { min-height: 40px; }

@media (max-width: 979px) {
  /* Small tablets: two-panel pages and workflow splits stack. */
  html .app-shell :is(.two-panel-grid, .staff-layout, .settings-layout) { grid-template-columns: minmax(0, 1fr); }
  html .app-shell .workflow-view.fit-view :is(.tw-split, .rd-rounds.tw-split, .rd-services) { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  html .app-shell main { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
  html .app-shell .page-view { padding: 12px 12px 24px; }
  /* Fit-to-screen views grow to their content so the page scrolls on a phone. */
  html .app-shell main > .view.active,
  html .app-shell main > .view.active.fit-view { display: flex; flex: 0 0 auto; flex-direction: column; height: auto; min-height: 100%; max-height: none; overflow: visible; }
  html .app-shell main > .view.active :is(.fit-fill, .fit-view > *) { flex: 0 0 auto; height: auto; max-height: none; overflow: visible; }

  /* Page headings: the title always gets the full width; actions sit underneath. */
  html .app-shell .view :is(.page-heading, .rd-page-head) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  html .app-shell .view :is(.page-heading, .rd-page-head) > :is(.rd-title-block, div:first-child) { width: 100%; min-width: 0; }
  html .app-shell .view :is(.page-heading, .rd-page-head) h1 { font-size: 24px; line-height: 1.15; }

  /* Button rows and segment switches scroll sideways rather than squeezing. */
  html .app-shell .view :is(.inline-actions, .rd-tools, .view-segments, .rd-seg, .rd-filter-chips, .settings-tabs, .stat-strip) {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  html .app-shell .view :is(.inline-actions, .rd-tools, .view-segments, .rd-seg, .rd-filter-chips, .settings-tabs, .stat-strip)::-webkit-scrollbar { display: none; }
  html .app-shell .view :is(.inline-actions, .rd-tools, .view-segments, .rd-seg, .rd-filter-chips, .settings-tabs) > * { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
  html .app-shell .view .stat-strip > * { flex: 1 0 140px; }

  /* Toolbars: search full width, filters in a row underneath. */
  html .app-shell .view .rd-toolbar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; overflow: visible; }
  html .app-shell .view .rd-toolbar > .search-box { flex: 1 1 100%; width: 100%; }
  html .app-shell .view .rd-toolbar > .search-box input { width: 100%; min-height: 44px; }
  html .app-shell .view .rd-toolbar > .rd-select { flex: 1 1 calc(50% - 4px); min-width: 0; }
  html .app-shell .view .rd-toolbar > .rd-select select { width: 100%; min-height: 44px; }
  html .app-shell .view .rd-toolbar > :is(.rd-seg, .rd-filter-chips) { flex: 1 1 100%; }

  /* Two-panel pages stack into one column. */
  html .app-shell .view :is(.two-panel-grid, .staff-layout, .settings-layout),
  html .app-shell :is(#categoriesView .two-panel-grid, #staffView .staff-layout, #settingsView .settings-layout) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 12px;
  }
  html .app-shell .view :is(.two-panel-grid, .staff-layout, .settings-layout) > * { min-width: 0; max-width: 100%; }
  html .app-shell #settingsView :is(.settings-panel, .settings-card, form, fieldset, .panel) { width: 100%; max-width: 100%; }
  html .app-shell #settingsView :is(input, select, textarea) { width: 100%; max-width: 100%; }
  html .app-shell .view :is(.fit-fill, .fit-list) { min-height: 0; max-height: none; }

  /* Data tables become cards: the first cell is the title, values flow beneath, actions sit
     to the right. Column headings are dropped because each value reads on its own. */
  html .app-shell .view :is(.data-table, .fit-list, .supplier-directory, .permission-matrix) { overflow-x: visible; }
  html .app-shell .view table:is(.rd-table, .workspace-table):not(.permission-matrix > table) { display: block; width: 100%; min-width: 0; table-layout: auto; border: 0; }
  html .app-shell .view table:is(.rd-table, .workspace-table):not(.permission-matrix > table) :is(colgroup, thead) { display: none; }
  html .app-shell .view table:is(.rd-table, .workspace-table):not(.permission-matrix > table) tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html .app-shell .view table:is(.rd-table, .workspace-table):not(.permission-matrix > table) tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    padding: 12px 14px;
    border: 1px solid #E8E8EB;
    border-radius: 12px;
    background: #FFFFFF;
    min-width: 0;
    max-width: 100%;
  }
  html .app-shell .view table:is(.rd-table, .workspace-table):not(.permission-matrix > table) td {
    overflow-wrap: anywhere;
    display: block;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    white-space: normal;
  }
  html .app-shell .view table:is(.rd-table, .workspace-table):not(.permission-matrix > table) td[hidden],
  html .app-shell .view table:is(.rd-table, .workspace-table):not(.permission-matrix > table) td.rd-hide { display: none; }
  html .app-shell .view table:is(.rd-table, .workspace-table):not(.permission-matrix > table) td:first-child { flex: 1 1 100%; font-size: 15px; font-weight: 600; }
  html .app-shell .view table:is(.rd-table, .workspace-table):not(.permission-matrix > table) td.numeric { font-family: var(--mp-font-family-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
  html .app-shell .view table:is(.rd-table, .workspace-table):not(.permission-matrix > table) td:last-child:not(:first-child) { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
  html .app-shell .view table:is(.rd-table, .workspace-table):not(.permission-matrix > table) td :is(button, .mini-button) { min-height: 44px; min-width: 44px; }
  /* The permissions grid stays a grid: it scrolls sideways with the role names pinned. */
  html .app-shell .view .permission-matrix { overflow-x: auto; }
  html .app-shell .view .permission-matrix table th:first-child,
  html .app-shell .view .permission-matrix table td:first-child { position: sticky; left: 0; z-index: 1; background: #FFFFFF; }

  /* Small row buttons get a full touch target. */
  html .app-shell .view :is(.mini-button, .rd-mini, .subcategory-chip) { min-height: 44px; }
  html .app-shell .view .fit-pager .fp-btn { min-width: 44px; }

  /* Workflow pages (tables, kitchen, orders, rounds): stacked, and boards swipe column by column. */
  html .app-shell .workflow-view.fit-view :is(.tw-split, .rd-rounds.tw-split, .rd-services) { display: grid; grid-template-columns: minmax(0, 1fr); }
  html .app-shell .tw-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  html .app-shell .tw-board > * { scroll-snap-align: start; }
  html .app-shell .tw-board::-webkit-scrollbar { display: none; }
  html .app-shell .tw-row { grid-template-columns: minmax(0, 1fr) auto; }
  html .app-shell .tw-floor { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Checkout: catalogue first, then the basket; the pinned bar jumps to the basket and shows
     the running total. Extra bottom space keeps the pay buttons clear of the bar. */
  html .app-shell #checkoutView .checkout-layout { display: flex; flex-direction: column; gap: 10px; height: auto; padding: 8px 8px 88px; }
  /* The catalogue fills one phone screen (above the bar) and pages inside it; the basket
     follows underneath at its natural height. */
  html .app-shell #checkoutView .catalog-panel { display: flex; flex: 0 0 auto; flex-direction: column; height: calc(100dvh - var(--header-height) - 92px); min-height: 460px; max-height: none; }
  html .app-shell #checkoutView .catalog-panel #productList { flex: 1 1 auto; min-height: 0; }
  html .app-shell #checkoutView .basket-panel { flex: 0 0 auto; height: auto; min-height: 0; max-height: none; overflow: visible; scroll-margin-top: 8px; }
  html .app-shell #checkoutView .checkout-layout { flex: 0 0 auto; }
  html .app-shell #checkoutView .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .app-shell #checkoutView .basket { max-height: none; overflow: visible; }
  /* Basket lines stay on one row: name, quantity, total and remove. */
  html .app-shell #checkoutView .basket-panel .basket-line { grid-template-columns: minmax(0, 1fr) auto 58px 44px; gap: 6px; align-items: center; }
  html .app-shell #checkoutView .basket-panel .basket-line .remove-line { grid-column: auto; grid-row: auto; }
  html .app-shell #checkoutView .basket-panel .basket-columns { display: none; }
  html .app-shell #checkoutView.active .mobile-basket-bar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 30;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 16px;
    border: 0;
    border-radius: 14px;
    color: #FFFFFF;
    background: #08080A;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .35);
    font: inherit;
    text-align: left;
  }
  html .app-shell #checkoutView.active .mobile-basket-bar[data-empty="true"] { color: #FFFFFF; background: #3A3A40; }
  html .app-shell .mobile-basket-bar .mbb-count {
    padding: 4px 10px;
    border-radius: 999px;
    color: #000000;
    background: var(--mp-brand-volt, #DDFF2A);
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  html .app-shell .mobile-basket-bar .mbb-label { font-size: 15px; font-weight: 600; }
  html .app-shell .mobile-basket-bar strong { font-family: var(--mp-font-family-mono, ui-monospace, monospace); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
  html .app-shell .mobile-basket-bar .ui-icon { width: 18px; height: 18px; color: #FFFFFF; }
  html .app-shell #checkoutView.active .mobile-basket-bar[data-pay-visible="true"] { visibility: hidden; opacity: 0; pointer-events: none; }
  body:has(dialog[open]) .mobile-basket-bar,
  body.osk-open .mobile-basket-bar { display: none !important; }

  /* Dialogs use the whole phone: a bottom sheet with the actions always reachable. */
  html body dialog[open]:not(.locked-dialog) {
    width: 100vw;
    max-width: 100vw;
    max-height: calc(100dvh - 24px);
    margin: auto 0 0;
    border-radius: 18px 18px 0 0;
  }
  html body dialog[open]:not(.locked-dialog) :is(.dialog-card, .rd-card) { max-height: calc(100dvh - 24px); overflow-y: auto; border-radius: 18px 18px 0 0; }
  html body dialog[open]:not(.locked-dialog) :is(.dialog-actions, .rd-foot) { position: sticky; bottom: 0; z-index: 1; padding-bottom: calc(12px + env(safe-area-inset-bottom)); background: #FFFFFF; }
}

/* Phones: sign-in fits one screen, with the Sign in button above the fold. */
@media (max-width: 700px) {
  html #loginDialog .login-brand-panel { min-height: 0; padding-block: 18px; }
  html #loginDialog .login-brand-logo { width: 150px; }
  html #loginDialog .login-form-content { gap: 10px; }
  html #loginDialog .login-form-content h1 { font-size: 24px; }
  html #loginDialog .login-keypad { gap: 8px; }
  html #loginDialog .login-keypad button { min-height: 52px; height: 52px; font-size: 22px; }
  html .startup-footer { white-space: nowrap; font-size: 11px; }
}

@media (max-width: 380px) {
  html .app-shell #checkoutView .product-grid { grid-template-columns: minmax(0, 1fr); }
  html .app-shell .mobile-basket-bar .mbb-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html .app-shell .tw-board { scroll-snap-type: none; }
}

/* Order bar on phones: the name for the order gets its own row, the order type and More share
 * the next, so the cup name is never squeezed to nothing. */
@media (max-width: 560px) {
  html .basket-panel .order-bar { flex-wrap: wrap; }
  html .basket-panel .order-bar .order-name-field { flex: 1 0 100%; }
  html .basket-panel .order-bar .order-type-seg { flex: 1 1 auto; }
  html .basket-panel .order-bar .order-type-seg button { flex: 1 1 0; }
}