/* Light POS — adaptive layout for every screen: phone, tablet (portrait / landscape), POS terminal, desktop.
 * Loaded at the end of <head> of every app, so it wins over the app's own styles. Rules are scoped per app
 * (html[data-light-app=...] is set by light-sync.js) and only touch layout — the apps' logic is unchanged.
 * Breakpoints:  phone < 768px  •  tablet portrait 768–1023px  •  landscape tablet / POS / desktop >= 1024px
 */

/* ------------------------------------------------------------------ everywhere */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
button, a, [onclick] { touch-action: manipulation; }               /* no 300ms delay / double-tap zoom on buttons */
img, svg, video, canvas { max-width: 100%; }

/* every modal fits the screen and scrolls instead of being cut off */
@media (max-width: 767px) {
    input, select, textarea { font-size: max(16px, 1em); }        /* iPhone: no zoom-in when a field gets focus */
    .fixed.inset-0 > div:not(.absolute):not([class*="pointer-events-none"]) {
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .fixed.inset-0 > .p-8, .fixed.inset-0 > div > .p-8 { padding: 1.25rem !important; }
    .fixed.inset-0 .text-3xl { font-size: 1.5rem !important; line-height: 2rem !important; }
}

/* ================================================================== POS / KDS (pos.html) */
html[data-light-app="pos"] body { height: 100dvh; }
html[data-light-app="pos"] header.glass-panel { padding-top: env(safe-area-inset-top); height: calc(4rem + env(safe-area-inset-top)) !important; }

/* tablet portrait + small laptops: slimmer order panel, more room for the menu */
@media (max-width: 1100px) {
    html[data-light-app="pos"] #pos-view > div.flex-1 > div.w-96 { width: 20rem; }
    html[data-light-app="pos"] header.glass-panel { padding-left: .75rem; padding-right: .75rem; gap: .5rem; }
    /* the zone tabs scroll inside their own strip; the action buttons always stay visible */
    html[data-light-app="pos"] header.glass-panel > div:nth-child(2) { flex: 1; min-width: 0; justify-content: flex-end; }
    html[data-light-app="pos"] header.glass-panel > div:nth-child(2) > button { flex-shrink: 0; }
    html[data-light-app="pos"] header.glass-panel #map-tabs { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    html[data-light-app="pos"] header.glass-panel #map-tabs::-webkit-scrollbar { display: none; }
    html[data-light-app="pos"] header.glass-panel #map-tabs > * { flex-shrink: 0; }
    html[data-light-app="pos"] #settings-view > div.w-64 { width: 13rem; }
    html[data-light-app="pos"] .settings-tab-content.p-8 { padding: 1.5rem !important; }
}

/* narrow menus (iPad portrait, split view): as many columns as fit instead of the fixed count from Settings */
@media (max-width: 900px) {
    html[data-light-app="pos"] #pos-menu-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important; }
}

/* header buttons: icons only until there is room for the labels */
@media (max-width: 1023px) {
    html[data-light-app="pos"] header.glass-panel > div:nth-child(2) > button { font-size: 0 !important; padding: .55rem .7rem !important; margin: 0 !important; }
    html[data-light-app="pos"] header.glass-panel > div:nth-child(2) > button i { font-size: 1rem; margin: 0 !important; }
    html[data-light-app="pos"] #grid-view > div:first-child { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
    html[data-light-app="pos"] #grid-view > div:first-child > button { flex-shrink: 0; }
}

/* ------------------------------------------------------------------ POS: phone */
@media (max-width: 767px) {
    /* header in two rows: logo + actions + user, then the zone tabs across the full width */
    html[data-light-app="pos"] header.glass-panel {
        flex-wrap: wrap; justify-content: flex-start; height: auto !important; row-gap: .4rem; column-gap: .35rem;
        padding: calc(.4rem + env(safe-area-inset-top)) .5rem .45rem;
    }
    html[data-light-app="pos"] header.glass-panel > div:first-child svg { width: 2.25rem; height: 2.25rem; }
    html[data-light-app="pos"] header.glass-panel > div:nth-child(2) { display: contents; }
    html[data-light-app="pos"] header.glass-panel #map-tabs { order: 9; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
    html[data-light-app="pos"] header.glass-panel #map-tabs > * { flex-shrink: 0; }
    html[data-light-app="pos"] header.glass-panel > div:last-child { gap: .25rem; margin-inline-start: auto; }
    html[data-light-app="pos"] #current-user-avatar { width: 2.25rem; height: 2.25rem; }
    html[data-light-app="pos"] main.p-4 { padding: .5rem; }
    html[data-light-app="pos"] .map-legend { gap: 8px; font-size: 11px; }
    html[data-light-app="pos"] #map-view > div { padding: .5rem; border-radius: 1.25rem; }
    html[data-light-app="pos"] .floor-plan-area { border-radius: 14px; }

    /* home screen */
    html[data-light-app="pos"] #grid-view > div:first-child { gap: .25rem; padding: .5rem; }
    html[data-light-app="pos"] #grid-view > div.flex-1 { padding: .75rem; }
    html[data-light-app="pos"] #home-stats { gap: .5rem; margin-bottom: .75rem; }

    /* order screen: menu on top, order as a bottom sheet (tap the order title to open / close it) */
    html[data-light-app="pos"] #pos-view > div.flex-1 { flex-direction: column; gap: .5rem; padding: .5rem; padding-top: 0; }
    html[data-light-app="pos"] #pos-view > div.flex-1 > div.flex-1 { margin-top: .25rem; gap: .5rem; }
    html[data-light-app="pos"] #pos-float-back { top: .5rem; left: .5rem; padding: .6rem; }
    html[data-light-app="pos"] #pos-search-row { padding-left: 3.25rem; flex-wrap: wrap; }
    html[data-light-app="pos"] #pos-search-row > div:first-child { width: auto; flex: 1 1 100%; padding-top: .45rem; padding-bottom: .45rem; }
    html[data-light-app="pos"] #pos-categories { flex: 1 1 100%; padding-bottom: .25rem; }
    html[data-light-app="pos"] #pos-menu-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important; gap: .5rem; padding: .5rem .25rem; }
    html[data-light-app="pos"] .cat-rail { width: 76px; }
    html[data-light-app="pos"] .cat-rail-btn { min-height: 60px; font-size: 11px; border-radius: 12px; }
    html[data-light-app="pos"] .pos-bar { padding: 6px 8px; }
    html[data-light-app="pos"] .pos-stat { padding: 2px 8px; min-width: 56px; }
    html[data-light-app="pos"] .pos-stat .v { font-size: 17px; }

    html[data-light-app="pos"] #pos-view > div.flex-1 > div.w-96 { width: 100%; margin-top: 0; flex-shrink: 0; max-height: 46dvh; border-radius: 1.25rem; padding-bottom: env(safe-area-inset-bottom); }
    html[data-light-app="pos"] #pos-view > div.flex-1 > div.w-96 > div:first-child { padding: .6rem .9rem; cursor: pointer; border-radius: 1.25rem 1.25rem 0 0; }
    html[data-light-app="pos"] #pos-view > div.flex-1 > div.w-96 > div:last-child { padding: .6rem .75rem .75rem; }
    html[data-light-app="pos"] #pos-view > div.flex-1 > div.w-96 > div:last-child .text-2xl { font-size: 1.25rem; margin-bottom: .5rem; }
    html[data-light-app="pos"] #pos-view > div.flex-1 > div.w-96 > div:last-child .py-3\.5 { padding-top: .75rem; padding-bottom: .75rem; }
    html[data-light-app="pos"] #cart-items { padding: .5rem; }
    html[data-light-app="pos"] #pos-view:not(.lr-cart-open) #cart-items { display: none; }
    html[data-light-app="pos"] #pos-view.lr-cart-open > div.flex-1 > div.w-96 { max-height: 78dvh; height: 78dvh; }
    html[data-light-app="pos"] #pos-view.lr-cart-open > div.flex-1 > div.flex-1 { flex: 0 0 auto; height: 0; overflow: hidden; margin: 0; }
    html[data-light-app="pos"] #pos-view .lr-cart-toggle { display: inline-flex; margin-inline-start: auto; margin-inline-end: .75rem; }

    /* settings: the side menu becomes a scrolling tab strip on top */
    html[data-light-app="pos"] #settings-view.active { flex-direction: column; gap: .5rem; }
    html[data-light-app="pos"] #settings-view > div.w-64 { width: 100%; flex-direction: row; align-items: center; border-radius: 1rem; flex-shrink: 0; }
    html[data-light-app="pos"] #settings-view > div.w-64 > div:first-child { display: none; }
    html[data-light-app="pos"] #settings-view > div.w-64 > div.flex-1 { flex-direction: row; overflow-x: auto; padding: .4rem; gap: .25rem; scrollbar-width: none; }
    html[data-light-app="pos"] #settings-view > div.w-64 > div.flex-1 > .settings-group-label { display: none; }
    html[data-light-app="pos"] #settings-view > div.w-64 > div.flex-1 > button { width: auto; flex-shrink: 0; white-space: nowrap; padding: .5rem .75rem; font-size: .8rem; }
    html[data-light-app="pos"] #settings-view > div.w-64 > div:last-child { padding: .4rem; border: 0; }
    html[data-light-app="pos"] #settings-view > div.w-64 > div:last-child button { font-size: 0; padding: .6rem .8rem; white-space: nowrap; }
    html[data-light-app="pos"] #settings-view > div.w-64 > div:last-child button i { font-size: 1rem; margin: 0; }
    html[data-light-app="pos"] #settings-view > div.flex-1 { border-radius: 1.25rem; min-height: 0; }
    html[data-light-app="pos"] .settings-tab-content.p-8 { padding: 1rem !important; gap: 1rem !important; }
    html[data-light-app="pos"] .settings-tab-content .text-3xl { font-size: 1.4rem; line-height: 1.9rem; }
    html[data-light-app="pos"] .settings-tab-content .p-6 { padding: 1rem; }
    html[data-light-app="pos"] .settings-tab-content .p-5 { padding: .85rem; }
    html[data-light-app="pos"] .settings-tab-content .grid-cols-3 { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
    html[data-light-app="pos"] .settings-tab-content input.w-24 { width: 100%; }

    /* kitchen screen */
    html[data-light-app="pos"] #kds-view > div:first-child { padding: .5rem .75rem; gap: .5rem; }
    html[data-light-app="pos"] #kds-view > div:first-child #kds-stats { display: none; }
    html[data-light-app="pos"] #kds-view > div.flex-1 { padding: .5rem; }
    html[data-light-app="pos"] .kds-board { grid-template-columns: 1fr; gap: 10px; }

    /* home board of open orders */
    html[data-light-app="pos"] .orders-item { padding: 10px 10px 10px 6px; }
    html[data-light-app="pos"] #toast-container { right: 8px; left: 8px; bottom: calc(12px + env(safe-area-inset-bottom)); }
    html[data-light-app="pos"] .toast { max-width: none; min-width: 0; }
}
html[data-light-app="pos"] .lr-cart-toggle { display: none; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 800; color: var(--brand); }
html[data-light-app="pos"] .lr-cart-toggle i { transition: transform .2s; }
html[data-light-app="pos"] #pos-view.lr-cart-open .lr-cart-toggle i { transform: rotate(180deg); }

/* very narrow phones */
@media (max-width: 380px) {
    html[data-light-app="pos"] #pos-menu-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important; }
    html[data-light-app="pos"] header.glass-panel > div:last-child > div:first-child { display: none !important; }
}

/* large POS terminals / desktop: use the space */
@media (min-width: 1600px) {
    html[data-light-app="pos"] #pos-view > div.flex-1 > div.w-96 { width: 28rem; }
}

/* ================================================================== Hostess */
@media (max-width: 1023px) {
    html[data-light-app="hostess"] header { padding-left: .5rem; padding-right: .5rem; gap: .5rem; padding-top: env(safe-area-inset-top); height: calc(4rem + env(safe-area-inset-top)); }
    html[data-light-app="hostess"] header > div:last-child { min-width: 0; overflow-x: auto; scrollbar-width: none; gap: .35rem; }
    html[data-light-app="hostess"] header > div:last-child::-webkit-scrollbar { display: none; }
    html[data-light-app="hostess"] header > div:last-child > * { flex-shrink: 0; }
    html[data-light-app="hostess"] main aside { width: 290px; }
}
@media (max-width: 767px) {
    html[data-light-app="hostess"] header h1 > span.text-sm, html[data-light-app="hostess"] header #clock { display: none; }
    html[data-light-app="hostess"] header > div:first-child > div:first-child { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
    html[data-light-app="hostess"] header .w-px { display: none; }
    html[data-light-app="hostess"] main { padding: .5rem; gap: .5rem; }
    html[data-light-app="hostess"] main > section { padding: .5rem; border-radius: 1.25rem; }
    html[data-light-app="hostess"] #legend { display: none; }
    /* the reservations / wait list panel opens as a full screen sheet from the floating button */
    html[data-light-app="hostess"] body.lr-side main aside {
        display: flex !important; position: fixed; z-index: 45; width: auto;
        top: calc(4rem + env(safe-area-inset-top)); left: 0; right: 0; bottom: 0; border-radius: 1.25rem 1.25rem 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    html[data-light-app="hostess"] body .lr-side-btn { display: flex; }
}
html[data-light-app="hostess"] .lr-side-btn {
    display: none; position: fixed; z-index: 46; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom));
    align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; border: 0;
    background: #E85A2A; background: var(--brand, #E85A2A); color: #fff; font: 800 15px Heebo, Arial, sans-serif;
    box-shadow: 0 10px 24px -8px rgba(0,0,0,.45);
}
html[data-light-app="hostess"] .lr-side-btn b { background: rgba(255,255,255,.25); border-radius: 999px; padding: 0 8px; font-size: 13px; }

/* ================================================================== POS on a phone-size screen: the newer pieces */
@media (max-width: 767px) {
    /* the top bar is solid: the see-through "glass" let the page show behind the icons and looked smudged */
    html[data-light-app="pos"] header.glass-panel { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    html.dark[data-light-app="pos"] header.glass-panel { background: #1D1B19; }
    /* small text buttons: a bit tighter, still easy to tap */
    html[data-light-app="pos"] .menu-compact { gap: 6px !important; }
    html[data-light-app="pos"] .mi { padding: 9px 11px; font-size: 14px; border-radius: 11px; }
    /* outside orders: three per column, narrower */
    html[data-light-app="pos"] .ext-board { grid-auto-columns: minmax(170px, 78vw); }
    /* the "מוכן להגשה" bar and the cart actions fit the width */
    html[data-light-app="pos"] #ready-bar { top: calc(4.5rem + env(safe-area-inset-top)); padding: 6px 8px; gap: 6px; font-size: 13px; }
    html[data-light-app="pos"] #ready-bar button { padding: 5px 9px; font-size: 13px; }
    html[data-light-app="pos"] .cart-selbar { flex-wrap: wrap; font-size: 12px; }
    html[data-light-app="pos"] .cart-selbar button, html[data-light-app="pos"] .row-acts button { padding: 6px 6px; font-size: 12px; }
    /* payment: the confirm-capture line stays on one row */
    html[data-light-app="pos"] #pay-captured-wrap { font-size: 13px; }
}

/* ================================================================== Back Office (already responsive — small touch ups) */
@media (max-width: 767px) {
    html[data-light-app="backoffice"] table { font-size: 13px; }
    html[data-light-app="backoffice"] .overflow-x-auto, html[data-light-app="backoffice"] .table-wrap { -webkit-overflow-scrolling: touch; }
    /* number cards, two in a row: the icon goes above the text so the whole title fits */
    html[data-light-app="backoffice"] .kpi { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
    html[data-light-app="backoffice"] .kpi > div:first-child { width: 36px; height: 36px; font-size: 16px; border-radius: 12px; }
    html[data-light-app="backoffice"] .kpi p.truncate { white-space: normal; overflow: visible; line-height: 1.25; }
}

/* ================================================================== printing never uses the screen layout tweaks */
@media print {
    #light-sync-badge, .lr-side-btn, .lr-cart-toggle { display: none !important; }
}

/* ================================================================== battery saver (admin → עיצוב; on by default, light-sync.js sets html.oe-saver)
   Looping animations (pulsing tables, the "fire" glow, the late kitchen header) play once and stay in their highlighted look,
   instead of keeping the processor and the screen busy all day. Loading spinners keep spinning. */
html.oe-saver *:not(.fa-spin):not(.animate-spin), html.oe-saver *::before, html.oe-saver *::after { animation-iteration-count: 1 !important; }
@media (prefers-reduced-motion: reduce) {
    *:not(.fa-spin):not(.animate-spin), *::before, *::after { animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}