/* Shared screen layout. Print rules remain independent of compact device sizing. */
@media screen {
    html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
    body { overflow-wrap: break-word; }
    .page, .legacy-content, .card, .filter-row, .form-grid, .legacy-form-grid,
    .details-grid, .grid, .two-col, .chat-layout, fieldset { min-width: 0; }
    fieldset { max-width: 100%; }
    .page img, .legacy-content img { max-width: 100%; }
    .page iframe, .legacy-content iframe, .page canvas { max-width: 100%; }
    .page input, .page select, .page textarea,
    .legacy-content input, .legacy-content select, .legacy-content textarea { min-width: 0; }
    .page-title > div, .section-heading > *, .card-actions > * { min-width: 0; }
    .page-title h1, .section-heading h2, .details-grid dd { overflow-wrap: anywhere; }
    .actions, .card-actions, .filter-actions { flex-wrap: wrap; }
    .table-wrap, .table-responsive {
        width: 100%; max-width: 100%; overflow-x: auto;
        overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    }
    .table-wrap:focus-visible, .table-responsive:focus-visible {
        outline: 2px solid var(--teal); outline-offset: 2px;
    }
    .table-wrap table { margin-bottom: 0; }
    .page pre, .legacy-content pre { max-width: 100%; overflow-x: auto; }
    body .table-grid {
        --tile-image-width: 44px;
        --tile-image-height: 36px;
        --tile-height: 108px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
        gap: 10px;
    }
    body .table-grid .table-tile {
        min-width: 0;
        min-height: var(--tile-height);
        padding: 10px 7px;
        border-left-width: 4px;
        border-radius: 11px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-align: center;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    body .table-grid .table-tile strong {
        margin: 1px 0;
        font-size: 16px;
        line-height: 1.2;
    }
    body .table-grid .table-tile > img {
        width: var(--tile-image-width) !important;
        height: var(--tile-image-height) !important;
        min-height: 0 !important;
        object-fit: contain;
        flex: 0 0 auto;
    }
    body .table-grid .table-tile small,
    body .table-grid .table-tile span { font-size: 11px; line-height: 1.25; }
    body .manager-table-grid {
        max-height: min(58dvh, 560px);
        overflow-y: auto;
        padding: 4px;
        scrollbar-gutter: stable;
    }
    body .manager-item-grid { gap: 10px; }
    body .manager-item-grid .manager-item-card img { height: 110px; min-height: 0; }
    body .manager-item-info { padding: 10px; gap: 4px; }
    body .manager-price { font-size: 16px; }
    body .manager-add { padding: 6px 10px; }
    /* Older category and item selection pages use Bootstrap columns around list items. */
    .legacy-content #myUL { padding: 0; margin: 8px 0; }
    .legacy-content #myUL .row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 0; }
    .legacy-content #myUL .row > [class*="col-"] { width: auto; padding: 0; min-width: 0; }
    .legacy-content #myUL form, .legacy-content #myUL li { margin: 0; height: 100%; }
    .legacy-content #myUL .btn { white-space: normal; height: 100%; }
    .legacy-content #myUL li > p:empty { display: none; }
    .legacy-content font { font-size: inherit; }
}

@media screen and (min-width: 1101px) and (max-width: 1439px) {
    html { font-size: 14px; }
    :root { --sidebar: 210px; }
    body.portal-body .page { padding: 22px 22px 65px; }
    body.portal-body .legacy-content { padding: 20px; }
    .page-title h1 { font-size: 26px; }
    .card { padding: 20px; }
    body .table-grid { --tile-height: 100px; gap: 8px; }
}

@media screen and (max-width: 1100px) {
    html { font-size: 13px; }
    body, body.legacy-body { font-size: 13px; }
    body .topbar {
        min-height: 62px; height: auto; padding: 8px 14px; gap: 10px;
        flex-wrap: nowrap;
    }
    .topbar .brand { min-width: 0; font-size: 17px; gap: 7px; }
    .topbar .brand-mark { width: 30px; height: 30px; font-size: 18px; border-radius: 8px; }
    .topbar .nav-clock { font-size: 10px; order: initial; }
    .topbar .nav-person { display: block; max-width: 25vw; order: initial; margin-left: auto; text-align: right; }
    .topbar .nav-person strong { font-size: 11px; }
    .topbar .nav-person small { font-size: 10px; }
    body .menu-toggle { display: inline-flex; min-height: 34px; margin-left: 0; padding: 6px 10px; font-size: 12px; }
    body .role-nav { display: none; top: var(--topbar-height,62px); width: min(280px,85vw); box-shadow: 8px 0 30px #18354725; }
    body .role-nav.open { display: flex; }
    body .role-nav a, body .nav-group summary { font-size: 12px; padding: 9px 11px; }
    body.portal-body .page, body .page { margin-left: 0; padding: 18px 16px 65px; }
    body.portal-body .legacy-content { margin-left: 0; padding: 16px; }
    body.portal-body .legacy-context, body .qr-reminder { margin-left: 0; }
    .page-title { gap: 12px; margin-bottom: 16px; }
    .page-title h1 { font-size: 23px; margin: 3px 0 6px; }
    .page-title p { font-size: 12px; line-height: 1.4; }
    .eyebrow { font-size: 10px; letter-spacing: 1.1px; }
    .card { padding: 17px; border-radius: 12px; margin-bottom: 13px; }
    .card h2, .section-heading h2 { font-size: 16px; }
    .card p { font-size: 12px; }
    .section-heading { margin: 18px 0 10px; gap: 9px; flex-wrap: wrap; }
    .grid, .stack, .two-col, .details-grid { gap: 14px; }
    .form-grid, .legacy-form-grid, .legacy-content form.flow-grid { gap: 13px; }
    .form-grid label, label { font-size: 12px; }
    body .page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    body .page select, body .page textarea,
    body .legacy-content input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    body .legacy-content select, body .legacy-content textarea {
        min-height: 38px; font-size: 13px; padding: 8px 10px; margin-top: 5px;
    }
    body .button, body button, body .btn, body input[type="submit"] {
        min-height: 36px; padding: 7px 11px !important; font-size: 12px;
    }
    .filter-row { gap: 10px; margin-bottom: 14px; }
    .filter-row label { min-width: 120px; }
    .filter-row .filter-actions { width: auto; }
    .metric-grid { gap: 10px; grid-template-columns: repeat(3,minmax(0,1fr)); }
    .metric { min-height: 88px; padding: 14px; }
    .metric strong { font-size: 23px; margin-top: 5px; }
    .metric span { font-size: 11px; }
    table { font-size: 12px; }
    th { font-size: 10px; }
    td, th { padding: 9px 10px; }
    .item-thumb { width: 42px; height: 36px; }
    .legacy-content img[src*="/product/"], .legacy-content img[src^="product/"],
    .legacy-content img[src*="categoryphoto/"] { max-width: 112px !important; max-height: 90px !important; object-fit: contain; }
    .chart { height: 220px; }
    body .table-grid {
        --tile-image-width: 30px; --tile-image-height: 25px; --tile-height: 82px;
        grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px;
    }
    body .table-grid .table-tile { padding: 7px 5px !important; border-radius: 9px; gap: 2px; }
    body .table-grid .table-tile strong { font-size: 13px; }
    body .table-grid .table-tile small, body .table-grid .table-tile span { font-size: 10px; }
    body .manager-table-grid { max-height: min(55dvh,500px); }
    body .manager-item-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 12px 0; }
    body .manager-item-grid .manager-item-card img { height: 80px; }
    body .manager-item-info { padding: 8px; font-size: 12px; }
    body .manager-item-info small, body .manager-add { font-size: 10px; }
    body .manager-price { font-size: 14px; }
    body .manager-quantity button { min-height: 34px; min-width: 32px; padding: 4px 8px !important; font-size: 17px; }
    body .manager-quantity input { min-height: 34px !important; width: 58px; padding: 4px !important; margin: 0 !important; }
    body .manager-inline-quantity { gap: 4px; padding: 6px; }
    body .manager-basket-line { grid-template-columns: minmax(0,1fr) 145px 85px 70px; gap: 9px; padding: 12px 0; }
    body .manager-basket-line > button { grid-column: auto; }
    body .manager-line-name { grid-column: auto; }
    body .manager-line-amount { grid-column: auto; }
    body .manager-basket > label { margin: 13px 0; }
    body #manager-selected-table { margin: 12px 0; }
    body .manager-filters { grid-template-columns: repeat(3,minmax(0,1fr)); }
    body .table-setup-fields { grid-template-columns: repeat(3,minmax(0,1fr)); }
    body .manager-search-results { grid-template-columns: repeat(2,minmax(0,1fr)); }
    body .manager-search-item .manager-add { margin: 7px; }
    body .alert { padding: 10px 12px; font-size: 12px; margin-bottom: 14px; }
    body .qr-reminder { font-size: 11px; padding: 5px 0; }
    body .save-bar { padding: 9px 12px; flex-wrap: wrap; gap: 8px; font-size: 12px; }
    .details-grid dd { font-size: 12px; }
    .card-icon { width: 34px; height: 34px; font-size: 18px; }
    .auth-hero { padding: 24px; }
    .auth-hero h1 { font-size: 30px; }
    .auth-form { padding: 25px; }
    .auth-box h2 { font-size: 25px; }
    .payment-qr-dialog { width: min(360px,calc(100vw - 24px)); padding: 17px; }
    .payment-qr-image { max-height: 48dvh; }
}

@media screen and (max-width: 600px) {
    html { font-size: 12px; }
    body, body.legacy-body { font-size: 12px; }
    body .topbar {
        display: grid; grid-template-columns: minmax(0,1fr) auto;
        grid-template-areas: "brand menu" "person clock";
        min-height: 64px; padding: 6px 10px; gap: 3px 8px;
    }
    .topbar .brand { grid-area: brand; font-size: 14px; gap: 6px; }
    .topbar .brand-mark { width: 23px; height: 23px; font-size: 15px; border-radius: 6px; }
    body .topbar .menu-toggle { grid-area: menu; min-height: 30px; font-size: 11px; padding: 4px 9px !important; }
    .topbar .nav-person { grid-area: person; text-align: left; margin: 0; max-width: 47vw; }
    .topbar .nav-person strong { font-size: 10px; line-height: 1.25; }
    .topbar .nav-person small { font-size: 9px; line-height: 1.2; }
    .topbar .nav-clock { grid-area: clock; text-align: right; font-size: 9px; margin: 0; }
    .topbar .nav-clock a { font-size: 9px !important; }
    body .role-nav { padding: 14px 11px; top: var(--topbar-height,64px); }
    body.portal-body .page, body .page { padding: 12px 10px 58px; }
    body.portal-body .legacy-content { padding: 12px 10px 58px; }
    .page-title { gap: 8px; margin-bottom: 12px; }
    .page-title h1 { font-size: 19px; letter-spacing: -.3px; margin: 2px 0 4px; }
    .page-title p { font-size: 11px; }
    .eyebrow { font-size: 9px; letter-spacing: .8px; }
    .card, .section-form .card { padding: 12px; border-radius: 10px; margin-bottom: 11px; }
    .card h2, .section-heading h2 { font-size: 14px; }
    .card p, .auth-box p, .post-body { font-size: 11px; line-height: 1.45; }
    .section-heading { margin: 13px 0 8px; gap: 6px; }
    body .button, body button, body .btn, body input[type="submit"] {
        min-height: 34px; font-size: 11px; padding: 6px 9px !important;
    }
    .actions, .card-actions, .filter-row { gap: 7px; }
    .filter-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .filter-row label { min-width: 0; }
    .filter-row .filter-actions { grid-column: 1/-1; width: 100%; }
    .filter-actions > * { flex: 1; }
    body .form-grid, body .legacy-form-grid, body .legacy-content form.flow-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
    body .form-grid .wide { grid-column: auto; }
    label, .form-grid label { font-size: 11px; }
    small, .form-grid small, .food-badge { font-size: 10px; }
    body .page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    body .page select, body .page textarea,
    body .legacy-content input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    body .legacy-content select, body .legacy-content textarea {
        min-height: 36px; padding: 7px 9px; font-size: 12px;
    }
    body .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
    body .metric { padding: 10px; min-height: 74px; }
    .metric strong { font-size: 20px; margin-top: 4px; }
    .metric span { font-size: 10px; }
    .grid, .grid.two { grid-template-columns: minmax(0,1fr); gap: 10px; }
    .details-grid { gap: 11px; }
    .details-grid dt { font-size: 9px; }
    .details-grid dd { font-size: 11px; }
    body .table-wrap { padding: 0; }
    table, .legacy-content table { font-size: 11px !important; }
    td, th, .legacy-content td, .legacy-content th { padding: 7px 8px; }
    th { font-size: 9px; letter-spacing: .2px; }
    .item-thumb { width: 32px; height: 28px; }
    .legacy-content img[src*="/product/"], .legacy-content img[src^="product/"],
    .legacy-content img[src*="categoryphoto/"] { max-width: 76px !important; max-height: 60px !important; }
    .legacy-content #myUL .row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
    .legacy-content #myUL .btn { font-size: 11px !important; }
    .legacy-content [style*="font-size"]:is(h1,h2,h3,font) { font-size: 17px !important; }
    body .table-grid {
        --tile-image-width: 25px; --tile-image-height: 21px; --tile-height: 72px;
        grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px;
    }
    body .table-grid .table-tile { padding: 5px 3px !important; gap: 2px; border-radius: 8px; border-left-width: 3px; }
    body .table-grid .table-tile strong { font-size: 11px; }
    body .table-grid .table-tile small, body .table-grid .table-tile span { font-size: 9px; }
    body .table-grid .table-tile:hover { transform: none; }
    body .manager-table-grid { max-height: min(52dvh,440px); padding: 3px; }
    body .manager-item-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
    body .manager-item-grid .manager-item-card { display: flex; flex-direction: column; padding: 0 !important; }
    body .manager-item-grid .manager-item-card img { width: 100%; height: 64px; min-height: 0; object-fit: cover; }
    body .manager-item-info { font-size: 11px; padding: 7px; gap: 3px; }
    body .manager-item-info small { font-size: 9px; }
    body .manager-price { font-size: 13px; }
    body .manager-add { padding: 5px 7px; font-size: 10px; }
    body .manager-inline-quantity { padding: 5px 3px; gap: 3px; margin-top: 4px; }
    body .manager-quantity { gap: 3px; }
    body .manager-quantity button { min-height: 32px; min-width: 30px; font-size: 17px; padding: 3px 7px !important; }
    body .manager-quantity input { min-height: 32px !important; width: 49px; font-size: 12px; padding: 3px !important; }
    body .manager-search-results { grid-template-columns: minmax(0,1fr); gap: 7px; }
    body .manager-basket-line { grid-template-columns: minmax(0,1fr) 75px; gap: 8px; padding: 10px 0; }
    body .manager-line-name { grid-column: 1/-1; padding-right: 67px; }
    body .manager-basket-line > button { grid-column: 2; grid-row: 1; }
    body .manager-line-amount { grid-column: 2; }
    body .manager-basket .actions > * { width: auto; flex: 1 1 140px; }
    body .manager-filters, body .table-setup-fields { grid-template-columns: minmax(0,1fr); }
    body .alert { padding: 8px 10px; font-size: 11px; margin-bottom: 10px; }
    .badge { font-size: 9px; padding: 4px 6px; letter-spacing: 0; }
    .chart { height: 180px; }
    .auth-hero { padding: 16px; gap: 8px; }
    .auth-hero h1 { font-size: 24px; margin: 12px 0 6px; }
    .auth-form { padding: 20px 17px; }
    .auth-box h2 { font-size: 23px; }
    .auth-box form { margin-top: 18px; }
    .auth-box label { font-size: 12px; margin-bottom: 12px; }
    .auth-box input, .auth-box select { min-height: 38px; font-size: 14px; padding: 8px 10px; }
    .pin-page .card { padding: 13px; }
    .pin-form { gap: 16px; }
    .pin-field { margin: 10px 0 14px; }
    .pin-label { font-size: 11px; }
    body .pin-boxes { gap: 6px; }
    body .pin-boxes input { height: 40px; min-height: 40px !important; font-size: 19px !important; padding: 4px !important; }
    body .chat-launcher { width: 44px; height: 44px; min-height: 44px; padding: 0 !important; right: 12px; bottom: 12px; font-size: 22px; border-radius: 14px; }
    .support-panel { right: 10px; bottom: 64px; width: calc(100vw - 20px); max-height: calc(100dvh - 85px); }
    .chat-bubble p { font-size: 12px; }
    .chat-compose { padding: 10px; gap: 7px; }
    .payment-qr-dialog { width: min(300px,calc(100vw - 20px)); padding: 12px; }
    .dialog-heading h2 { font-size: 17px; }
    .payment-qr-image { max-height: 43dvh; }
}

@media screen and (max-width: 359px) {
    body .table-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .topbar .brand { font-size: 12px; }
    .topbar .nav-clock, .topbar .nav-clock a { font-size: 8px !important; }
}

/* Preserve native iPhone form focus without disabling page zoom. */
@supports (-webkit-touch-callout: none) {
    @media screen and (max-width: 1100px) {
        body .page input:not([type="checkbox"]):not([type="radio"]),
        body .page select, body .page textarea, body .legacy-content input,
        body .legacy-content select, body .legacy-content textarea,
        body .auth-box input { font-size: 16px; }
    }
}

@media print {
    .table-wrap, .table-responsive { overflow: visible !important; max-height: none !important; }
    .table-wrap table, .table-responsive table { min-width: 0 !important; }
}

/* Override inline sizes retained by older PHP forms as well. */
@media screen and (max-width: 1100px) {
    body .legacy-content input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    body .legacy-content select, body .legacy-content textarea,
    body .button, body button, body .btn, body input[type="submit"] { font-size: 12px !important; }
    body .legacy-content input[type="submit"], body .legacy-content button.btn { height: auto !important; }
    body .manager-quantity button { font-size: 17px !important; }
    body .manager-item-card, body .manager-search-item { white-space: normal !important; }
}
@media screen and (max-width: 600px) {
    body .legacy-content input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    body .legacy-content select, body .legacy-content textarea,
    body .button, body button, body .btn, body input[type="submit"] { font-size: 11px !important; }
    body .legacy-content td, body .legacy-content th { font-size: 11px !important; }
    body .manager-quantity button { font-size: 17px !important; }
    body .chat-launcher { font-size: 22px !important; }
    body .legacy-content input[type="image"] { max-width: 76px; max-height: 60px; object-fit: contain; }
}
@supports (-webkit-touch-callout: none) {
    @media screen and (max-width: 1100px) {
        body .page input:not([type="checkbox"]):not([type="radio"]), body .page select,
        body .page textarea, body .legacy-content input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
        body .legacy-content select, body .legacy-content textarea { font-size: 16px !important; }
    }
}