.ipos-table-operations { min-height: 100dvh; padding: 36px 32px 52px; background: var(--ipos-canvas); color: var(--ipos-ink); font-family: var(--ipos-font); } .ipos-table-operations *, .ipos-table-operations *::before, .ipos-table-operations *::after { box-sizing: border-box; } .ipos-table-operations button, .ipos-table-operations input, .ipos-table-operations select { font: inherit; } .ipos-table-operations [hidden] { display: none !important; } .ipos-table-operations__header, .ipos-table-operations__toolbar, .ipos-table-operations__message, .ipos-table-operations__workspace { width: min(100%, 1280px); margin-inline: auto; } .ipos-table-operations__attention { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 1280px); gap: 12px; margin: 20px auto 0; } .ipos-table-operations__attention-card { display: grid; min-height: 112px; align-content: start; gap: 5px; padding: 16px; border: 1px solid var(--ipos-line); border-radius: 8px; background: var(--ipos-surface); } .ipos-table-operations__attention-title { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 750; } .ipos-table-operations__attention-icon { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid currentColor; border-radius: 7px; } .ipos-table-operations__attention-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .ipos-table-operations__attention-card strong { font-size: 28px; font-variant-numeric: tabular-nums; line-height: 1; } .ipos-table-operations__attention-card small { color: var(--ipos-muted); font-size: 11px; font-weight: 650; line-height: 1.4; } .ipos-table-operations__attention-card.is-new { border-color: #edc878; background: #fffaf0; color: #8c5100; } .ipos-table-operations__attention-card.is-work { border-color: #ecd6a5; background: #fffdf8; color: var(--ipos-warning); } .ipos-table-operations__attention-card.is-payment { border-color: #b5d1ef; background: #f4f9ff; color: var(--ipos-info); } .ipos-table-operations__attention-card.is-cleanup { background: #fffaf4; color: var(--ipos-warning); } .ipos-table-operations__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--ipos-line); } .ipos-table-operations__eyebrow { margin: 0; color: var(--ipos-muted); font-size: 11px; font-weight: 800; line-height: 1.35; text-transform: uppercase; } .ipos-table-operations__header h1 { margin: 6px 0 0; font-size: 34px; font-weight: 780; line-height: 1.1; } .ipos-table-operations__subtitle { margin: 8px 0 0; color: var(--ipos-muted); font-size: 15px; line-height: 1.5; } .ipos-table-operations__header-actions { display: flex; align-items: center; gap: 12px; } .ipos-table-operations__counter-btn { min-height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; background: var(--ipos-action); color: #fff; font-size: 13px; font-weight: 750; cursor: pointer; box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 8px 18px rgb(25 122 53 / 18%); transition: background 140ms, border-color 140ms, transform 140ms; } .ipos-table-operations__bill-checks, .ipos-table-operations__merge-session { display: grid; gap: 12px; } .ipos-table-operations__bill-checks > h3, .ipos-table-operations__merge-session > h3 { margin: 0; font-size: 15px; } .ipos-table-operations__bill-check-list { display: grid; gap: 10px; } .ipos-table-operations__bill-check { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--ipos-line-strong); border-radius: 12px; background: color-mix(in srgb, var(--ipos-surface) 94%, var(--ipos-canvas)); } .ipos-table-operations__bill-check.is-paid { border-color: color-mix(in srgb, var(--ipos-success, #238636) 42%, var(--ipos-line-strong)); } .ipos-table-operations__bill-check.is-settling { border-color: color-mix(in srgb, var(--ipos-warning, #b7791f) 52%, var(--ipos-line-strong)); } .ipos-table-operations__bill-check-head, .ipos-table-operations__bill-check-items > li, .ipos-table-operations__bill-check-total { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .ipos-table-operations__bill-check-head span { color: var(--ipos-muted); font-size: 12px; font-weight: 700; } .ipos-table-operations__bill-check-items { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; color: var(--ipos-muted); font-size: 12px; } .ipos-table-operations__bill-check-items > li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; } .ipos-table-operations__bill-check-total { padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--ipos-line-strong) 60%, transparent); font-weight: 800; } .ipos-table-operations__bill-check-tools, .ipos-table-operations__bill-check-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; } .ipos-table-operations__merge-session select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--ipos-line-strong); border-radius: 8px; background: var(--ipos-surface); color: var(--ipos-ink); } .ipos-table-operations__merge-session > button { width: 100%; } .ipos-table-operations__bill-check-refund { margin: 0; color: var(--ipos-muted); font-size: 12px; font-weight: 700; } .ipos-table-operations__split-dialog { position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center; padding: 16px; } .ipos-table-operations__split-backdrop { position: absolute; inset: 0; border: 0; background: rgb(18 42 29 / 46%); cursor: pointer; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .ipos-table-operations__split-dialog-panel { position: relative; z-index: 1; display: grid; width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 28px); gap: 12px; overflow: hidden; padding: 18px; border: 1px solid var(--ipos-line-strong); border-radius: 16px; background: var(--ipos-surface); box-shadow: 0 28px 70px rgb(22 55 37 / 28%); } .ipos-table-operations__split-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; } .ipos-table-operations__split-dialog-head p, .ipos-table-operations__split-dialog-head h2, .ipos-table-operations__split-copy, .ipos-table-operations__split-error { margin: 0; } .ipos-table-operations__split-dialog-head p { color: var(--ipos-muted); font-size: 12px; font-weight: 750; } .ipos-table-operations__split-dialog-head h2 { margin-top: 3px; font-size: 22px; } .ipos-table-operations__split-dialog-close { min-width: 64px; min-height: 44px; } .ipos-table-operations__split-copy { color: var(--ipos-muted); font-size: 13px; line-height: 1.45; } .ipos-table-operations__split-form { display: grid; min-height: 0; gap: 12px; overflow: hidden; } .ipos-table-operations__split-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; } .ipos-table-operations__split-controls label { display: grid; gap: 5px; color: var(--ipos-muted); font-size: 12px; font-weight: 750; } .ipos-table-operations__split-controls input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--ipos-line-strong); border-radius: 8px; color: var(--ipos-ink); background: var(--ipos-surface); } .ipos-table-operations__split-controls button { min-height: 44px; } .ipos-table-operations__split-allocation { display: grid; min-height: 0; max-height: min(42dvh, 430px); gap: 8px; overflow: auto; padding-right: 3px; } .ipos-table-operations__split-unit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(138px, 180px); gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--ipos-line); border-radius: 10px; background: color-mix(in srgb, var(--ipos-surface) 94%, var(--ipos-canvas)); font-size: 13px; } .ipos-table-operations__split-unit select { width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid var(--ipos-line-strong); border-radius: 8px; background: var(--ipos-surface); color: var(--ipos-ink); } .ipos-table-operations__split-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px; padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--ipos-info, #276fbf) 7%, var(--ipos-surface)); font-size: 12px; } .ipos-table-operations__split-summary strong { grid-column: 1 / -1; } .ipos-table-operations__split-summary span.is-empty, .ipos-table-operations__split-error { color: var(--ipos-danger, #b42318); } .ipos-table-operations__split-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ipos-table-operations__split-actions button { min-height: 44px; } @media (max-width: 640px) { .ipos-table-operations__bill-check-tools, .ipos-table-operations__bill-check-admin { grid-template-columns: 1fr; } .ipos-table-operations__bill-check-tools > button, .ipos-table-operations__bill-check-admin > button { min-height: 46px; } .ipos-table-operations__split-dialog { place-items: end center; padding: 0; } .ipos-table-operations__split-dialog-panel { width: 100%; max-height: 92dvh; border-radius: 16px 16px 0 0; } .ipos-table-operations__split-controls, .ipos-table-operations__split-unit { grid-template-columns: 1fr; } .ipos-table-operations__split-actions { position: sticky; bottom: 0; padding-top: 4px; background: var(--ipos-surface); } } @media (hover: hover) and (pointer: fine) { .ipos-table-operations__counter-btn:hover { background: var(--ipos-action-hover); color: #fff; } } .ipos-table-operations__counter-btn:active { transform: translateY(1px); } .ipos-table-operations__counter-dialog[hidden] { display: none !important; } .ipos-table-operations__counter-dialog { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; } .ipos-table-operations__counter-backdrop { position: absolute; inset: 0; border: 0; cursor: pointer; background: rgb(18 42 29 / 42%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ipos-table-operations__counter-panel { position: relative; z-index: 1; width: min(1040px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0; overflow: hidden; padding: 0; border: 1px solid var(--ipos-lg-edge, rgb(255 255 255 / 88%)); border-radius: 16px; background: var(--ipos-lg-glass-thick, rgb(255 255 255 / 72%)); box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight, rgb(255 255 255 / 56%)), 0 28px 70px var(--ipos-lg-shadow, rgb(42 89 63 / 22%)); -webkit-backdrop-filter: blur(22px) saturate(1.12); backdrop-filter: blur(22px) saturate(1.12); color: var(--ipos-ink); } .ipos-table-operations__counter-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; padding: 18px 18px 14px; border-bottom: 1px solid rgb(30 100 69 / 12%); background: var(--ipos-lg-glass, rgb(255 255 255 / 48%)); } .ipos-table-operations__counter-head h2 { margin: 4px 0 0; color: var(--ipos-ink); font-size: 26px; font-weight: 780; line-height: 1.12; letter-spacing: 0; } .ipos-table-operations__counter-head > button { display: grid; width: 40px; min-width: 40px; min-height: 40px; place-items: center; padding: 0; border: 1px solid var(--ipos-line-strong); border-radius: 999px; background: var(--ipos-surface); color: var(--ipos-ink); font-size: 22px; line-height: 1; cursor: pointer; } .ipos-table-operations__counter-head > button:hover { border-color: var(--ipos-action); color: var(--ipos-action); } .ipos-table-operations__counter-body { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .9fr); min-height: 0; padding: 16px 18px 18px; overflow: auto; } .ipos-table-operations__counter-menu { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-width: 0; min-height: 0; } .ipos-table-operations__counter-categories { display: flex; gap: 8px; min-width: 0; padding: 1px 1px 5px; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-inline: contain; } .ipos-table-operations .ipos-table-operations__counter-category { flex: 0 0 auto; min-height: 36px; padding: 0 13px; border: 1px solid var(--ipos-line-strong); border-radius: 999px; background: var(--ipos-surface); color: var(--ipos-muted); font-size: 12px; font-weight: 750; } @media (hover: hover) and (pointer: fine) { .ipos-table-operations .ipos-table-operations__counter-category:hover { border-color: var(--ipos-action); color: var(--ipos-action); } } .ipos-table-operations .ipos-table-operations__counter-category.is-active { border-color: var(--ipos-action); background: var(--ipos-action); color: #fff; box-shadow: 0 6px 14px rgb(25 122 53 / 14%); } .ipos-table-operations__counter-catalog { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); align-content: start; min-height: 0; overflow-y: auto; padding-right: 2px; } .ipos-table-operations__counter-product { display: grid; gap: 8px; min-height: 88px; align-content: space-between; padding: 14px; border: 1px solid var(--ipos-line); border-radius: 8px; background: var(--ipos-surface); color: var(--ipos-ink); text-align: left; cursor: pointer; transition: border-color 140ms, background 140ms, transform 140ms, box-shadow 140ms; } @media (hover: hover) and (pointer: fine) { .ipos-table-operations__counter-product:hover { border-color: var(--ipos-action); background: var(--ipos-surface-muted); color: var(--ipos-ink); box-shadow: 0 8px 18px rgb(25 122 53 / 10%); } } .ipos-table-operations__counter-product:active { transform: translateY(1px); } .ipos-table-operations__counter-product span { font-size: 14px; font-weight: 720; line-height: 1.3; } .ipos-table-operations__counter-product b { color: var(--ipos-action); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; } .ipos-table-operations__counter-cart { display: grid; gap: 12px; align-content: start; min-height: 0; padding: 14px; border: 1px solid var(--ipos-line); border-radius: 8px; background: var(--ipos-surface); } .ipos-table-operations__counter-cart h3 { margin: 0; color: var(--ipos-ink); font-size: 16px; font-weight: 760; } .ipos-table-operations__counter-dialog .ipos-table-operations__counter-cart > div[data-ipos-counter-cart-lines] { display: grid; gap: 8px; max-height: min(42vh, 360px); overflow: auto; } .ipos-table-operations__counter-cart > p:not(.ipos-table-operations__counter-total):not(.ipos-table-operations__counter-error) { margin: 0; color: var(--ipos-muted); font-size: 13px; } .ipos-table-operations__counter-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--ipos-line); } .ipos-table-operations__counter-line:last-child { border-bottom: 0; padding-bottom: 0; } .ipos-table-operations__counter-line > div { display: grid; gap: 2px; min-width: 0; } .ipos-table-operations__counter-line span { color: var(--ipos-ink); font-size: 13px; font-weight: 720; line-height: 1.35; } .ipos-table-operations__counter-line small { color: var(--ipos-muted); font-size: 12px; font-weight: 650; line-height: 1.35; } .ipos-table-operations__counter-line small.is-note { color: var(--ipos-warning); } .ipos-table-operations__counter-line b { color: var(--ipos-ink); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; } .ipos-table-operations__counter-line > button { display: grid; width: 36px; min-width: 36px; min-height: 36px; place-items: center; padding: 0; border: 1px solid var(--ipos-line-strong); border-radius: 8px; background: var(--ipos-surface-muted); color: var(--ipos-muted); } @media (hover: hover) and (pointer: fine) { .ipos-table-operations__counter-line > button:hover { border-color: var(--ipos-danger); color: var(--ipos-danger); } } .ipos-table-operations__counter-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 12px 0 4px; border-top: 1px solid var(--ipos-line); font-size: 13px; font-weight: 700; color: var(--ipos-muted); } .ipos-table-operations__counter-total strong { color: var(--ipos-ink); font-size: 22px; font-weight: 820; font-variant-numeric: tabular-nums; } .ipos-table-operations__counter-cart .ipos-field--floating { display: grid; gap: 6px; } .ipos-table-operations__counter-cart .ipos-field--floating > span { color: var(--ipos-muted); font-size: 12px; font-weight: 700; } .ipos-table-operations__counter-cart select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--ipos-line-strong); border-radius: 8px; background: var(--ipos-surface); color: var(--ipos-ink); font-size: 13px; font-weight: 700; } .ipos-table-operations__counter-pay { width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--ipos-action); color: #fff; font-size: 14px; font-weight: 780; cursor: pointer; box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 10px 22px rgb(25 122 53 / 18%); transition: background 140ms, transform 140ms; } @media (hover: hover) and (pointer: fine) { .ipos-table-operations__counter-pay:hover { background: var(--ipos-action-hover); color: #fff; } } .ipos-table-operations__counter-pay:active { transform: translateY(1px); } .ipos-table-operations__counter-pay:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; } .ipos-table-operations__counter-error { color: var(--ipos-danger); margin: 0; font-size: 13px; font-weight: 650; line-height: 1.4; } .ipos-table-operations__counter-options[hidden] { display: none !important; } .ipos-table-operations__counter-options { position: absolute; inset: 10px; z-index: 3; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--ipos-lg-edge, rgb(255 255 255 / 88%)); border-radius: 14px; background: var(--ipos-lg-content, rgb(255 255 255 / 92%)); box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight, rgb(255 255 255 / 56%)), 0 22px 50px var(--ipos-lg-shadow, rgb(42 89 63 / 22%)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .ipos-table-operations__counter-options > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid var(--ipos-line); background: var(--ipos-lg-glass, rgb(255 255 255 / 52%)); } .ipos-table-operations__counter-options h3 { margin: 4px 0 0; color: var(--ipos-ink); font-size: 22px; font-weight: 780; line-height: 1.15; } .ipos-table-operations__counter-options > header > button, .ipos-table-operations__counter-options-qty button { display: grid; width: 40px; min-width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid var(--ipos-line-strong); border-radius: 999px; background: var(--ipos-surface); color: var(--ipos-action); cursor: pointer; } @media (hover: hover) and (pointer: fine) { .ipos-table-operations__counter-options > header > button:hover, .ipos-table-operations__counter-options-qty button:hover { border-color: var(--ipos-action); color: var(--ipos-action-hover); } } .ipos-table-operations__counter-options-scroll { overflow: auto; padding: 14px 16px; display: grid; gap: 14px; align-content: start; } .ipos-table-operations__counter-options-scroll fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; } .ipos-table-operations__counter-options-scroll legend { padding: 0; color: var(--ipos-ink); font-size: 13px; font-weight: 750; } .ipos-table-operations__counter-choices { display: flex; flex-wrap: wrap; gap: 8px; } .ipos-table-operations__counter-combo { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--ipos-line-strong); border-radius: 8px; background: var(--ipos-surface-muted); } .ipos-table-operations__counter-combo p { position: relative; margin: 0; padding-left: 13px; color: var(--ipos-ink-muted); font-size: 13px; font-weight: 650; } .ipos-table-operations__counter-combo p::before { position: absolute; top: .55em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--ipos-action); content: ''; } .ipos-table-operations__counter-choice { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--ipos-line-strong); border-radius: 8px; background: var(--ipos-surface); color: var(--ipos-ink); cursor: pointer; font-size: 13px; font-weight: 650; transition: border-color 140ms, background 140ms, color 140ms; } .ipos-table-operations__counter-choice:has(input:checked) { border-color: var(--ipos-action); background: var(--ipos-surface-muted); color: var(--ipos-action); } .ipos-table-operations__counter-choice input { position: absolute; opacity: 0; pointer-events: none; } .ipos-table-operations__counter-addon { display: grid; gap: 8px; } .ipos-table-operations__counter-options > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 16px; border-top: 1px solid var(--ipos-line); background: var(--ipos-lg-glass, rgb(255 255 255 / 52%)); } .ipos-table-operations__counter-options-qty { display: inline-flex; align-items: center; gap: 8px; } .ipos-table-operations__counter-options-qty strong { min-width: 28px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; } .ipos-table-operations__counter-options-add { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; flex: 1 1 auto; max-width: 300px; margin-left: auto; padding: 0 16px; border: 0; border-radius: 8px; background: var(--ipos-action); color: #fff; font-weight: 780; cursor: pointer; box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 10px 22px rgb(25 122 53 / 16%); } @media (hover: hover) and (pointer: fine) { .ipos-table-operations__counter-options-add:hover { background: var(--ipos-action-hover); color: #fff; } } .ipos-table-operations__counter-options-add:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } .ipos-table-operations__counter-options-add strong { font-variant-numeric: tabular-nums; } @media (max-width: 800px) { .ipos-table-operations__counter-dialog { padding: 10px; align-items: end; } .ipos-table-operations__counter-panel { width: 100%; max-height: calc(100dvh - 16px); border-radius: 16px 16px 12px 12px; } .ipos-table-operations__counter-body { grid-template-columns: 1fr; } .ipos-table-operations__counter-catalog { max-height: 45vh; } .ipos-table-operations__counter-options { inset: 0; border-radius: 16px 16px 12px 12px; } .ipos-table-operations__counter-options > footer { flex-direction: column; align-items: stretch; } .ipos-table-operations__counter-options-add { max-width: none; margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .ipos-table-operations__counter-btn, .ipos-table-operations__counter-product, .ipos-table-operations__counter-pay, .ipos-table-operations__counter-choice { transition: none; } } .ipos-table-operations__sync { color: var(--ipos-muted); font-size: 12px; font-weight: 650; } .ipos-table-operations button { min-height: 40px; padding: 0 13px; border: 1px solid var(--ipos-line-strong); border-radius: 6px; background: var(--ipos-surface); color: var(--ipos-ink); font-size: 13px; font-weight: 720; cursor: pointer; transition: background 140ms, border-color 140ms, color 140ms; } .ipos-table-operations button:not(.ipos-table-operations__marker):not(.ipos-table-operations__card):not(.ipos-styled-select__option):hover { border-color: var(--ipos-action); color: var(--ipos-action); } .ipos-table-operations button:focus-visible, .ipos-table-operations input:focus-visible, .ipos-table-operations select:focus-visible, .ipos-table-operations a:focus-visible { outline: 3px solid rgb(25 122 53 / .22); outline-offset: 2px; } .ipos-table-operations button:disabled { cursor: not-allowed; opacity: .45; } .ipos-table-operations__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; } .ipos-table-operations__search { display: block; position: relative; width: min(100%, 300px); } .ipos-table-operations__search::before { position: absolute; top: 50%; left: 14px; width: 11px; height: 11px; border: 1.5px solid var(--ipos-muted); border-radius: 50%; content: ""; transform: translateY(-60%); } .ipos-table-operations__search::after { position: absolute; top: calc(50% + 4px); left: 24px; width: 7px; height: 1.5px; background: var(--ipos-muted); content: ""; transform: rotate(45deg); transform-origin: left center; } .ipos-table-operations__search input { width: 100%; height: 42px; border: 1px solid var(--ipos-line-strong); border-radius: 6px; background: var(--ipos-surface); color: var(--ipos-ink); font-size: 13px; } .ipos-table-operations__search input { padding: 0 12px 0 36px; } .ipos-table-operations__area-filter { display: block; width: 190px; } .ipos-table-operations__area-filter .ipos-styled-select__trigger { min-height: 42px; } .ipos-table-operations__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 0 auto; padding: 0; list-style: none; } .ipos-table-operations__legend li { display: inline-flex; align-items: center; gap: 6px; color: var(--ipos-muted); font-size: 12px; font-weight: 650; } .ipos-table-operations__chip { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--ipos-line); } .ipos-table-operations__chip.is-empty { background: var(--ipos-surface-muted); } .ipos-table-operations__chip.is-serving { background: #e4f4e7; border-color: #bcd9c2; } .ipos-table-operations__chip.is-payment_requested { background: #fff8e7; border-color: #ecd7a8; } .ipos-table-operations__chip.is-paying { background: #fff2d8; border-color: #ecd7a8; } .ipos-table-operations__chip.is-cleanup_pending { background: #fff8e7; border-color: #ecd7a8; } .ipos-table-operations__chip.is-paused { background: #fdeede; border-color: #f0d2ae; } .ipos-table-operations__chip.is-qr_revoked { background: #fbe9e7; border-color: #e9b9b4; } .ipos-table-operations__message { min-height: 32px; padding: 12px 0; color: var(--ipos-muted); font-size: 13px; } .ipos-table-operations__workspace { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; } .ipos-table-operations__floor { min-width: 0; border: 1px solid var(--ipos-line); border-radius: 8px; background: var(--ipos-surface); padding: 18px; } .ipos-table-operations__loading, .ipos-table-operations__empty { margin: 8px; color: var(--ipos-muted); font-size: 13px; line-height: 1.5; } .ipos-table-operations__area { margin-bottom: 22px; } .ipos-table-operations__area:last-child { margin-bottom: 0; } .ipos-table-operations__area-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ipos-line); } .ipos-table-operations__area-head h3 { margin: 0; font-size: 16px; font-weight: 750; } .ipos-table-operations__area-head span { color: var(--ipos-muted); font-size: 12px; font-weight: 650; } .ipos-table-operations__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; padding-top: 14px; } .ipos-table-operations__card { display: grid; grid-template-columns: 1fr; gap: 8px; min-height: 104px; padding: 12px; border: 1px solid var(--ipos-line); border-left: 4px solid var(--ipos-line-strong); border-radius: 8px; background: var(--ipos-surface); color: var(--ipos-ink); text-align: left; cursor: pointer; transition: border-color 140ms, background 140ms, box-shadow 140ms; } .ipos-table-operations__card:hover { border-color: var(--ipos-line-strong); background: #fbfcfb; } .ipos-table-operations__card.is-selected { box-shadow: 0 0 0 2px var(--ipos-action); } .ipos-table-operations__card.is-empty { border-left-color: var(--ipos-line-strong); } .ipos-table-operations__card.is-serving { border-left-color: #237645; } .ipos-table-operations__card.is-new { border-left-color: #c45c00; } .ipos-table-operations__card.is-preparing { border-left-color: #0a6e66; } .ipos-table-operations__card.is-ready { border-left-color: #187a42; } .ipos-table-operations__card.is-work { border-left-color: #8a6200; } .ipos-table-operations__card.is-payment_requested { border-left-color: #c53d2e; } .ipos-table-operations__card.is-paying { border-left-color: #1f6fb0; } .ipos-table-operations__card.is-cleanup_pending { border-left-color: #6b5b95; } .ipos-table-operations__card-name { display: grid; gap: 2px; min-width: 0; } .ipos-table-operations__card-name strong { overflow: hidden; font-size: 15px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; } .ipos-table-operations__card-name small { color: var(--ipos-muted); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .ipos-table-operations__badge { display: inline-flex; width: max-content; max-width: 100%; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 750; white-space: nowrap; } .ipos-table-operations__badge::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; } .ipos-table-operations__badge.is-empty { background: var(--ipos-surface-muted); color: var(--ipos-muted); } .ipos-table-operations__badge.is-serving { background: #e4f4e7; color: #237645; } .ipos-table-operations__badge.is-new { background: #fff1df; color: #c45c00; } .ipos-table-operations__badge.is-preparing { background: #e3f7f4; color: #0a6e66; } .ipos-table-operations__badge.is-ready { background: #e4f7ea; color: #187a42; } .ipos-table-operations__badge.is-work { background: #fff6d8; color: #8a6200; } .ipos-table-operations__badge.is-payment_requested { background: #ffe9e5; color: #c53d2e; } .ipos-table-operations__badge.is-paying { background: #e8f2ff; color: #1f6fb0; } .ipos-table-operations__badge.is-cleanup_pending { background: #f1ecfb; color: #6b5b95; } .ipos-table-operations__badge.is-available { background: #e4f4e7; color: var(--ipos-success); } .ipos-table-operations__badge.is-paused { background: #fdeede; color: var(--ipos-warning); } .ipos-table-operations__badge.is-qr_revoked { background: #fbe9e7; color: var(--ipos-danger); } .ipos-table-operations__card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; color: var(--ipos-muted); font-size: 11px; } .ipos-table-operations__card-meta time { font: 700 11px/1 var(--ipos-mono); font-variant-numeric: tabular-nums; } .ipos-table-operations__inspector { position: sticky; top: 20px; min-width: 0; border: 1px solid var(--ipos-line); border-radius: 8px; background: var(--ipos-surface); padding: 20px; } .ipos-table-operations__inspector-head { padding: 5px 0 15px; border-bottom: 1px solid var(--ipos-line); } .ipos-table-operations__inspector-head h2 { margin: 4px 0 0; font-size: 24px; font-weight: 780; line-height: 1.2; } .ipos-table-operations__inspector-head p { margin: 5px 0 0; color: var(--ipos-muted); font-size: 13px; } .ipos-table-operations__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; } .ipos-table-operations__round-preview { display: grid; gap: 8px; margin-top: 15px; padding: 14px; border: 1px solid #ead5a8; border-radius: 7px; background: #fffaf0; } .ipos-table-operations__round-preview > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .ipos-table-operations__round-preview span { color: var(--ipos-warning); font-size: 11px; font-weight: 750; } .ipos-table-operations__round-preview strong { font-size: 13px; line-height: 1.35; text-align: right; } .ipos-table-operations__round-preview p { margin: 0; font-size: 13px; line-height: 1.5; } .ipos-table-operations__round-note { color: #765126; } .ipos-table-operations__data-gap { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--ipos-warning); background: #fffaf0; color: #6f592d; font-size: 12px; line-height: 1.45; } .ipos-table-operations__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 15px; border: 1px solid var(--ipos-line); border-radius: 7px; overflow: hidden; background: var(--ipos-line); } .ipos-table-operations__stats > div { min-width: 0; padding: 12px 11px; background: var(--ipos-surface); } .ipos-table-operations__stats span { display: block; color: var(--ipos-muted); font-size: 10px; font-weight: 700; } .ipos-table-operations__stats strong { display: block; margin-top: 6px; overflow: hidden; font-size: 14px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } .ipos-table-operations__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .ipos-table-operations__actions .is-primary { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid var(--ipos-action); border-radius: 6px; background: var(--ipos-action); color: #fff; font-size: 13px; font-weight: 720; text-decoration: none; cursor: pointer; transition: background 140ms; } .ipos-table-operations__actions a.is-primary:hover, .ipos-table-operations__actions button.is-primary:hover { background: var(--ipos-action-hover); border-color: var(--ipos-action-hover); color: #fff; } .ipos-table-operations__actions .is-secondary { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid var(--ipos-line-strong); border-radius: 6px; background: var(--ipos-surface); color: var(--ipos-ink); font-size: 13px; font-weight: 720; text-decoration: none; } .ipos-table-operations__actions .is-secondary:hover { border-color: var(--ipos-action); color: var(--ipos-action); } .ipos-table-operations__hint { flex-basis: 100%; margin: 2px 0 0; color: var(--ipos-muted); font-size: 12px; line-height: 1.5; } .ipos-table-operations__operation-panel.ipos-table-operations__transfer select { display: block; width: 100%; min-height: 44px; margin-top: 10px; padding: 0 12px; border: 1px solid var(--ipos-line-strong); border-radius: 6px; background: var(--ipos-surface); color: var(--ipos-ink); } .ipos-table-operations__operation-panel.ipos-table-operations__transfer > .is-secondary { width: 100%; margin-top: 10px; } .ipos-table-operations__operation-panel h3 { margin: 0; font-size: 14px; line-height: 1.35; } .ipos-table-operations__operation-panel > p { margin: 7px 0 0; color: var(--ipos-muted); font-size: 12px; line-height: 1.45; } .ipos-table-operations__round-history { display: grid; gap: 8px; } .ipos-table-operations__round-detail { overflow: hidden; border: 1px solid var(--ipos-line); border-radius: 6px; background: var(--ipos-surface); } .ipos-table-operations__round-detail summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 10px; cursor: pointer; list-style: none; } .ipos-table-operations__round-detail summary::-webkit-details-marker { display: none; } .ipos-table-operations__round-detail summary::after { width: 7px; height: 7px; margin-left: 3px; border-right: 1.5px solid var(--ipos-muted); border-bottom: 1.5px solid var(--ipos-muted); content: ""; transform: rotate(45deg) translateY(-2px); transition: transform 140ms ease; } .ipos-table-operations__round-detail[open] summary::after { transform: rotate(225deg) translate(-1px, -2px); } .ipos-table-operations__round-detail summary strong { margin-right: auto; font-size: 12px; } .ipos-table-operations__round-detail summary span { padding: 3px 6px; border-radius: 4px; background: var(--ipos-surface-muted); color: var(--ipos-muted); font-size: 10px; font-weight: 750; } .ipos-table-operations__round-detail summary span.is-new { background: #fff1df; color: #c45c00; } .ipos-table-operations__round-detail summary span.is-accepted { background: #fff6d8; color: #8a6200; } .ipos-table-operations__round-detail summary span.is-preparing { background: #e3f7f4; color: #0a6e66; } .ipos-table-operations__round-detail summary span.is-ready { background: #e4f7ea; color: #187a42; } .ipos-table-operations__round-detail summary span.is-served { background: #e4f4e7; color: #237645; } .ipos-table-operations__round-detail-body { display: grid; gap: 9px; padding: 10px; border-top: 1px solid var(--ipos-line); } .ipos-table-operations__round-detail-body ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--ipos-ink); font-size: 12px; line-height: 1.4; } .ipos-table-operations__round-detail-note { margin: 0; color: #765126; font-size: 12px; line-height: 1.4; } .ipos-table-operations__round-total { color: var(--ipos-ink); font: 800 12px/1.2 var(--ipos-mono); } .ipos-table-operations__round-detail-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; } .ipos-table-operations__round-detail-actions .is-primary, .ipos-table-operations__round-detail-actions .is-secondary { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 0 12px; border-radius: 6px; font-size: 12px; font-weight: 720; cursor: pointer; } .ipos-table-operations__round-detail-actions .is-primary { border: 1px solid var(--ipos-action); background: var(--ipos-action); color: #fff; } .ipos-table-operations__round-detail-actions .is-primary:hover { border-color: var(--ipos-action-hover); background: var(--ipos-action-hover); } .ipos-table-operations__round-detail-actions .is-secondary { border: 1px solid var(--ipos-line-strong); background: var(--ipos-surface); color: var(--ipos-ink); } .ipos-table-operations__round-detail-actions .is-secondary:hover { border-color: var(--ipos-action); color: var(--ipos-action); } .ipos-table-operations__round-status-menu { position: relative; min-width: 0; } .ipos-table-operations__round-status-menu summary { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 0 11px; border: 1px solid var(--ipos-line-strong); border-radius: 6px; color: var(--ipos-ink); font-size: 11px; font-weight: 720; cursor: pointer; list-style: none; white-space: nowrap; } .ipos-table-operations__round-status-menu summary::-webkit-details-marker { display: none; } .ipos-table-operations__round-status-menu summary::after { width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ''; transform: rotate(45deg) translateY(-2px); } .ipos-table-operations__round-status-menu[open] summary { border-color: var(--ipos-action); color: var(--ipos-action); } .ipos-table-operations__round-status-menu[open] summary::after { transform: rotate(225deg) translate(-1px, -1px); } .ipos-table-operations__round-status-menu > button { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 3; min-width: 148px; white-space: nowrap; } .ipos-table-operations__operation-panel.is-payment-request { border-color: #e3cf9c; background: #fffaf0; } .ipos-table-operations__operation-panel.is-paying { border-color: #b5d1ef; background: #f4f9ff; } .ipos-table-operations__operation-panel.is-cleanup { position: relative; display: grid; overflow: hidden; gap: 12px; padding: 17px; border: 1px solid color-mix(in srgb, var(--ipos-action) 34%, var(--ipos-line)); border-radius: 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--ipos-action) 7%, var(--ipos-surface)), color-mix(in srgb, var(--ipos-action) 3%, var(--ipos-canvas))); box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight), 0 12px 28px color-mix(in srgb, var(--ipos-action) 10%, transparent); isolation: isolate; } .ipos-table-operations__operation-panel.is-cleanup::after { position: absolute; z-index: -1; top: -74px; right: -64px; width: 150px; height: 150px; border-radius: 50%; background: color-mix(in srgb, var(--ipos-action) 10%, transparent); content: ''; filter: blur(2px); pointer-events: none; } .ipos-table-operations__cleanup-paid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px 12px; } .ipos-table-operations__cleanup-paid > div { display: contents; } .ipos-table-operations__cleanup-paid span { grid-column: 1; grid-row: 1; color: color-mix(in srgb, var(--ipos-muted) 82%, var(--ipos-ink)); font-size: 10.5px; font-weight: 820; letter-spacing: .07em; line-height: 1.1; text-transform: uppercase; } .ipos-table-operations__cleanup-paid::before { grid-column: 1 / -1; grid-row: 2; height: 1px; background: color-mix(in srgb, var(--ipos-action) 18%, var(--ipos-line)); content: ''; } .ipos-table-operations__cleanup-paid strong { grid-column: 1 / -1; grid-row: 3; color: var(--ipos-ink); font-size: clamp(27px, 8.2cqi, 32px); font-variant-numeric: tabular-nums; font-weight: 760; letter-spacing: -.035em; line-height: 1; } .ipos-table-operations__cleanup-paid time { grid-column: 2; grid-row: 1; color: color-mix(in srgb, var(--ipos-muted) 84%, var(--ipos-ink)); font: 760 12px/1 var(--ipos-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } body.ipos-app-shell .ipos-table-operations .ipos-table-operations__operation-panel.is-cleanup > .ipos-table-operations__cleanup-action { display: inline-flex; width: 100%; min-height: 54px; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--ipos-action) 76%, var(--ipos-line)) !important; border-radius: 15px; background: var(--ipos-action) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 36%), 0 10px 24px color-mix(in srgb, var(--ipos-action) 25%, transparent) !important; color: var(--ipos-action-ink, #fff) !important; font-size: 14px; font-weight: 820; letter-spacing: -.01em; cursor: pointer; transition: transform 180ms cubic-bezier(.2,.8,.2,1), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important; } .ipos-table-operations__cleanup-action > span { position: relative; z-index: 1; } .ipos-table-operations__cleanup-action-icon { display: grid; width: 32px; height: 24px; flex: 0 0 32px; place-items: center; transition: transform 260ms cubic-bezier(.2,.8,.2,1); } .ipos-table-operations__cleanup-action-icon svg { display: block; width: 32px; height: 24px; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } .ipos-table-operations__cleanup-action-icon :is(.is-broom-handle, .is-broom-collar) { stroke-width: 1.8; } .ipos-table-operations__cleanup-action-icon .is-broom-head { fill: currentColor; fill-opacity: .14; stroke-width: 1.65; } .ipos-table-operations__cleanup-action-icon .is-broom-bristles { stroke-width: 1.35; } .ipos-table-operations__cleanup-action-icon .is-check-badge { fill: currentColor; fill-opacity: .14; stroke-width: 1.55; } .ipos-table-operations__cleanup-action-icon .is-check-mark { stroke-width: 1.9; } body.ipos-app-shell .ipos-table-operations .ipos-table-operations__operation-panel.is-cleanup > .ipos-table-operations__cleanup-action:not(:disabled):hover { border-color: var(--ipos-action-hover) !important; background: var(--ipos-action-hover) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 44%), 0 15px 30px color-mix(in srgb, var(--ipos-action) 32%, transparent) !important; transform: translateY(-2px); } body.ipos-app-shell .ipos-table-operations .ipos-table-operations__cleanup-action:not(:disabled):hover .ipos-table-operations__cleanup-action-icon { transform: translateY(-1px) rotate(-5deg) scale(1.06); } body.ipos-app-shell .ipos-table-operations .ipos-table-operations__cleanup-action:not(:disabled):active { box-shadow: inset 0 2px 5px rgb(0 0 0 / 22%), 0 6px 14px color-mix(in srgb, var(--ipos-action) 20%, transparent) !important; transform: translateY(0) scale(.985); } body.ipos-app-shell .ipos-table-operations .ipos-table-operations__cleanup-action:focus-visible { outline: 3px solid var(--ipos-focus); outline-offset: 3px; } .ipos-table-operations__cleanup-help, .ipos-table-operations__cleanup-fallback { display: grid; grid-template-columns: 7px minmax(0, 1fr); align-items: start; gap: 9px; margin: 1px 0 0 !important; color: color-mix(in srgb, var(--ipos-muted) 84%, var(--ipos-ink)) !important; font-size: 11.5px !important; font-weight: 620; line-height: 1.45 !important; text-wrap: pretty; } .ipos-table-operations__cleanup-help::before { width: 7px; height: 7px; margin-top: .42em; border-radius: 50%; background: var(--ipos-action); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ipos-action) 10%, transparent); content: ''; } .ipos-table-operations__cleanup-receipt-info { display: flex; min-width: 0; min-height: 42px; align-items: center; gap: 9px; margin-top: 1px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--ipos-action) 12%, var(--ipos-line)); border-radius: 12px; background: color-mix(in srgb, var(--ipos-action) 4%, var(--ipos-surface-muted)); color: color-mix(in srgb, var(--ipos-muted) 88%, var(--ipos-ink)); font-size: 11px; font-weight: 620; line-height: 1.3; } .ipos-table-operations__cleanup-info-icon { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; color: color-mix(in srgb, var(--ipos-action) 60%, var(--ipos-muted)); } .ipos-table-operations__cleanup-info-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } @media (max-width: 360px) { .ipos-table-operations__operation-panel.is-cleanup { gap: 11px; padding: 14px; } .ipos-table-operations__cleanup-paid strong { font-size: 27px; } body.ipos-app-shell .ipos-table-operations .ipos-table-operations__operation-panel.is-cleanup > .ipos-table-operations__cleanup-action { min-height: 52px; } } @media (prefers-reduced-motion: reduce) { body.ipos-app-shell .ipos-table-operations .ipos-table-operations__cleanup-action, .ipos-table-operations__cleanup-action-icon { transition: none !important; } body.ipos-app-shell .ipos-table-operations .ipos-table-operations__cleanup-action:not(:disabled):hover, body.ipos-app-shell .ipos-table-operations .ipos-table-operations__cleanup-action:not(:disabled):hover .ipos-table-operations__cleanup-action-icon { transform: none; } } .ipos-table-operations__payment-receipt { display: grid; gap: 10px; margin-top: 13px; padding: 16px; border: 1px dashed #7f9e8b; border-radius: 8px; background: #fff; color: #172019; } .ipos-table-operations__receipt-eyebrow { margin: 0 !important; color: var(--ipos-success) !important; font: 800 10px/1.2 var(--ipos-mono) !important; letter-spacing: .08em; } .ipos-table-operations__receipt-table { font-size: 19px; line-height: 1.1; } .ipos-table-operations__receipt-lines { display: grid; gap: 4px; margin: 0; padding: 10px 0; border-block: 1px solid var(--ipos-line); list-style: none; font-size: 12px; line-height: 1.35; } .ipos-table-operations__receipt-total { display: flex; align-items: end; justify-content: space-between; gap: 10px; } .ipos-table-operations__receipt-total span { color: var(--ipos-muted); font: 800 10px/1.2 var(--ipos-mono); } .ipos-table-operations__receipt-total strong { font: 850 19px/1.1 var(--ipos-mono); } .ipos-table-operations__receipt-qr { display: grid; justify-items: center; gap: 8px; padding-top: 2px; text-align: center; } .ipos-table-operations__receipt-qr-canvas { display: grid; place-items: center; min-width: 174px; min-height: 174px; padding: 7px; border: 1px solid var(--ipos-line); background: #fff; overflow-wrap: anywhere; font-size: 9px; } .ipos-table-operations__receipt-qr p, .ipos-table-operations__receipt-status { margin: 0 !important; color: var(--ipos-muted) !important; font-size: 11px !important; line-height: 1.4; text-align: center; } .ipos-table-operations__receipt-status { color: #155b86 !important; font-weight: 750; } .ipos-table-operations__payment-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .ipos-table-operations__payment-tools > button { width: 100%; } .ipos-table-operations__payment-safety { margin-top: 10px !important; } .ipos-table-operations__confirm { position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center; padding: 20px; } .ipos-table-operations__confirm-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: rgb(17 27 20 / 52%) !important; cursor: default !important; } .ipos-table-operations__confirm-panel { position: relative; z-index: 1; width: min(100%, 430px); padding: 26px; border: 1px solid #d5dfd6; border-radius: 16px; background: var(--ipos-surface); box-shadow: 0 24px 60px rgb(20 35 24 / 22%); } .ipos-table-operations__confirm-eyebrow { margin: 0; color: var(--ipos-success); font: 800 10px/1.2 var(--ipos-mono); letter-spacing: .1em; } .ipos-table-operations__confirm-panel h2 { margin: 8px 0 0; color: var(--ipos-ink); font-size: 25px; line-height: 1.15; } .ipos-table-operations__confirm-copy { margin: 12px 0 0; color: var(--ipos-muted); font-size: 13px; line-height: 1.55; } .ipos-table-operations__confirm-total { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 14px 0; border-block: 1px solid var(--ipos-line); } .ipos-table-operations__confirm-total span { color: var(--ipos-muted); font: 800 10px/1.2 var(--ipos-mono); } .ipos-table-operations__confirm-total strong { color: var(--ipos-ink); font: 850 23px/1 var(--ipos-mono); } .ipos-table-operations__confirm-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; margin-top: 20px; } .ipos-table-operations__confirm-actions button { width: 100%; min-height: 46px; } .ipos-table-operations__confirm-actions .is-primary { border-color: var(--ipos-action); background: var(--ipos-action); color: #fff; } .ipos-table-operations__confirm-actions .is-primary:hover { border-color: var(--ipos-action-hover); background: var(--ipos-action-hover); color: #fff; } .ipos-table-operations__confirm-actions .is-secondary { border-color: var(--ipos-line-strong); background: var(--ipos-surface); color: var(--ipos-ink); } .ipos-table-operations__confirm-actions .is-secondary:hover { border-color: var(--ipos-action); color: var(--ipos-action); } .ipos-table-operations__operation-panel small { display: block; margin-top: 9px; color: var(--ipos-muted); font-size: 11px; line-height: 1.45; } .ipos-table-operations__operation-panel > .is-primary { width: 100%; margin-top: 12px; } .ipos-table-operations__payment-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; } .ipos-table-operations__payment-choice { min-width: 0; min-height: 38px !important; padding: 6px !important; color: var(--ipos-muted) !important; font-size: 11px !important; } .ipos-table-operations__payment-choice.is-selected { border-color: var(--ipos-info) !important; background: #e8f4ff !important; color: #155b86 !important; box-shadow: inset 0 0 0 1px #2a82b9; } .ipos-table-operations__operation-panel.is-paying > .is-secondary { width: 100%; margin-top: 8px; } .ipos-table-operations__inspector-close { display: none; } @media (min-width: 1380px) { .ipos-table-operations { padding-inline: 40px; } .ipos-table-operations__workspace { grid-template-columns: minmax(0, 1fr) 372px; gap: 26px; } } @media (max-width: 900px) { .ipos-table-operations { padding: 24px 20px 40px; } .ipos-table-operations__attention { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ipos-table-operations__workspace { grid-template-columns: 1fr; } .ipos-table-operations__inspector { position: fixed; inset: auto 0 0 0; z-index: 40; max-height: 82dvh; overflow-y: auto; border: 1px solid var(--ipos-line); border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgb(23 32 25 / 18%); transform: translateY(105%); transition: transform 180ms ease; } .ipos-table-operations__inspector.is-open { transform: translateY(0); } .ipos-table-operations__inspector-close { display: inline-flex; width: 100%; margin-top: 16px; } } @media (max-width: 640px) { .ipos-table-operations { padding: 20px 16px 32px; } .ipos-table-operations__attention { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; } .ipos-table-operations__attention-card { min-height: 78px; grid-template-columns: 1fr auto; align-items: center; gap: 3px 12px; padding: 13px 14px; } .ipos-table-operations__attention-title { grid-column: 1; } .ipos-table-operations__attention-card strong { grid-column: 2; grid-row: 1 / span 2; font-size: 25px; } .ipos-table-operations__attention-card small { grid-column: 1; } .ipos-table-operations__header { align-items: flex-start; flex-direction: column; } .ipos-table-operations__header h1 { font-size: 28px; } .ipos-table-operations__toolbar { align-items: stretch; flex-direction: column; } .ipos-table-operations__search, .ipos-table-operations__area-filter { width: 100%; } .ipos-table-operations__legend { margin: 0; } .ipos-table-operations__grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } .ipos-table-operations__stats { grid-template-columns: 1fr 1fr; } .ipos-table-operations__round-detail-actions { grid-template-columns: minmax(0, 1fr) auto; } .ipos-table-operations__round-status-menu summary { padding-inline: 9px; } .ipos-table-operations__payment-tools { grid-template-columns: 1fr; } .ipos-table-operations__confirm { align-items: end; padding: 12px; } .ipos-table-operations__confirm-panel { padding: 22px 18px; border-radius: 14px 14px 10px 10px; } .ipos-table-operations__confirm-actions { grid-template-columns: 1fr; } } @media print { @page { size: 80mm auto; margin: 0; } /* PDF previews may ignore the roll-height declaration and use Letter/A4. * Let that fallback page own its width, then center the real 80mm receipt. */ html, body { width: auto !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; margin: 0 !important; background: #fff !important; } .ipos-admin-shell:has(.ipos-table-operations.is-printing-payment) { display: block !important; min-height: 0 !important; background: #fff !important; } .ipos-admin-shell:has(.ipos-table-operations.is-printing-payment) .ipos-admin-sidebar, .ipos-admin-shell:has(.ipos-table-operations.is-printing-payment) .ipos-admin-bar { display: none !important; } .ipos-admin-shell:has(.ipos-table-operations.is-printing-payment) .ipos-admin-workspace, .ipos-admin-shell:has(.ipos-table-operations.is-printing-payment) .ipos-admin-content { display: block !important; min-height: 0 !important; height: auto !important; overflow: visible !important; padding: 0 !important; } .ipos-table-operations.is-printing-payment { display: block !important; width: 80mm !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: #fff !important; } .ipos-table-operations.is-printing-payment > :not(.ipos-table-operations__workspace):not(.ipos-table-operations__counter-workspace), .ipos-table-operations.is-printing-payment[data-print-surface="counter-success"] > .ipos-table-operations__workspace, .ipos-table-operations.is-printing-payment .ipos-table-operations__workspace > :not(.ipos-table-operations__inspector), .ipos-table-operations.is-printing-payment .ipos-table-operations__inspector > :not(.ipos-table-operations__inspector-scroll), .ipos-table-operations.is-printing-payment .ipos-table-operations__actions > :not(.ipos-table-operations__operation-panel.is-paying):not(.ipos-table-operations__operation-panel.is-cleanup), .ipos-table-operations.is-printing-payment .ipos-table-operations__operation-panel.is-paying > :not(.ipos-table-operations__payment-receipt), .ipos-table-operations.is-printing-payment .ipos-table-operations__operation-panel.is-cleanup > :not(.ipos-table-operations__payment-receipt) { display: none !important; } .ipos-table-operations.is-printing-payment .ipos-table-operations__counter-workspace > :not(.ipos-table-operations__counter-layout), .ipos-table-operations.is-printing-payment .ipos-table-operations__counter-layout > :not(.ipos-table-operations__counter-rail), .ipos-table-operations.is-printing-payment .ipos-table-operations__counter-rail > :not(.ipos-table-operations__counter-success), .ipos-table-operations.is-printing-payment .ipos-table-operations__counter-success > :not(.ipos-table-operations__counter-success-body), .ipos-table-operations.is-printing-payment .ipos-table-operations__counter-success-body > :not(.ipos-table-operations__counter-success-detail), .ipos-table-operations.is-printing-payment .ipos-table-operations__counter-success-detail > :not(.ipos-table-operations__payment-receipt) { display: none !important; } .ipos-table-operations.is-printing-payment .ipos-table-operations__workspace, .ipos-table-operations.is-printing-payment .ipos-table-operations__counter-workspace, .ipos-table-operations.is-printing-payment .ipos-table-operations__inspector, .ipos-table-operations.is-printing-payment .ipos-table-operations__inspector-scroll, .ipos-table-operations.is-printing-payment .ipos-table-operations__actions, .ipos-table-operations.is-printing-payment .ipos-table-operations__operation-panel.is-paying, .ipos-table-operations.is-printing-payment .ipos-table-operations__operation-panel.is-cleanup { display: block !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; border: 0 !important; background: transparent !important; } .ipos-table-operations.is-printing-payment .ipos-table-operations__payment-receipt { display: grid !important; position: static !important; width: 80mm !important; box-sizing: border-box; margin: 0 !important; padding: 4mm !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; break-inside: avoid; } .ipos-table-operations[data-print-paper-size="58mm"].is-printing-payment .ipos-table-operations__payment-receipt { width: 58mm !important; } /* Operations' normal liquid-glass shell has higher specificity and a 100dvh * canvas. Override it explicitly so it cannot offset or stretch a receipt. */ body.ipos-app-view-operations .ipos-admin-shell:has(.ipos-table-operations.is-printing-payment) { display: block !important; width: auto !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: #fff !important; } body.ipos-app-view-operations .ipos-admin-content:has(.ipos-table-operations.is-printing-payment) { display: flex !important; width: 100% !important; max-width: none !important; min-height: 0 !important; height: auto !important; align-items: flex-start !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: #fff !important; } body.ipos-app-view-operations .ipos-admin-content .ipos-table-operations.is-printing-payment { width: 80mm !important; max-width: 80mm !important; min-height: 0 !important; height: auto !important; margin: 0 auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; } } /* Use print-equivalent geometry before opening the browser dialog so the * payment receipt can provide an explicit page height to the global @page. */ .ipos-table-operations.is-measuring-payment .ipos-table-operations__payment-receipt { display: grid !important; position: static !important; width: 80mm !important; max-width: none !important; box-sizing: border-box; margin: 0 !important; padding: 4mm !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; font: 10pt/1.35 Arial, sans-serif !important; } .ipos-table-operations.is-measuring-payment[data-print-paper-size="58mm"] .ipos-table-operations__payment-receipt { width: 58mm !important; } .ipos-table-operations.is-measuring-payment .ipos-table-operations__receipt-logo { max-width: 30mm !important; max-height: 14mm !important; } .ipos-table-operations.is-measuring-payment .ipos-table-operations__receipt-store { font-size: 12pt !important; } .ipos-table-operations.is-measuring-payment .ipos-table-operations__receipt-address, .ipos-table-operations.is-measuring-payment .ipos-table-operations__receipt-contact { font-size: 8pt !important; } .ipos-table-operations__history-link, .ipos-menu-management__history-link, .ipos-qr-management__history-link { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(22, 61, 45, .14); border-radius: 12px; color: #176b4d; background: #fff; text-decoration: none; } .ipos-table-operations__history-link svg, .ipos-menu-management__history-link svg, .ipos-qr-management__history-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; } .ipos-table-operations__history-link:hover, .ipos-menu-management__history-link:hover, .ipos-qr-management__history-link:hover { background: #eef8f1; } @media (prefers-reduced-motion: reduce) { .ipos-table-operations *, .ipos-table-operations *::before, .ipos-table-operations *::after { transition-duration: .01ms !important; } } /* IPOS-231: any segmented navigation carries one travelling active surface. */ .ipos-table-operations__round-tabs { position: relative; isolation: isolate; } .ipos-table-operations__round-tab-indicator { position: absolute; top: 0; left: 0; z-index: 0; width: var(--ipos-operations-round-tab-width, 0px); height: var(--ipos-operations-round-tab-height, 0px); border: 1px solid rgb(12 107 69 / 16%); border-radius: 11px; background: rgb(255 255 255 / 82%); box-shadow: 0 4px 12px rgb(21 93 63 / 9%), inset 0 1px 0 rgb(255 255 255 / 92%); pointer-events: none; transform: translate3d(var(--ipos-operations-round-tab-x, 0px), var(--ipos-operations-round-tab-y, 0px), 0); transition: transform 240ms cubic-bezier(.22,.75,.2,1), width 240ms cubic-bezier(.22,.75,.2,1), height 240ms cubic-bezier(.22,.75,.2,1), opacity 120ms ease; opacity: 0; } .ipos-table-operations__round-tab-indicator.is-ready { opacity: 1; } .ipos-table-operations__round-tab { position: relative; z-index: 1; } .ipos-table-operations__round-tab.is-active, .ipos-table-operations__round-tab.is-active:hover { border-color: transparent !important; background: transparent !important; box-shadow: none !important; } /* The history and settlement decisions need a real breath between them. */ .ipos-table-operations__round-history + .ipos-table-operations__operation-panel.is-paying { margin-top: 15px; } .ipos-table-operations__voucher-trigger { width: 100%; min-height: 42px; margin-top: 12px; border-color: rgb(18 117 75 / 25%) !important; background: rgb(240 250 244 / 74%) !important; color: #0c6b45 !important; } .ipos-table-operations__voucher-trigger:hover { border-color: rgb(12 107 69 / 40%) !important; background: rgb(231 247 236 / 94%) !important; } .ipos-table-operations__voucher-summary { margin: 8px 2px 0 !important; color: #26734b !important; font-size: 12px !important; } .ipos-table-operations__voucher-dialog { position: fixed; z-index: 10020; inset: 0; display: grid; place-items: center; padding: 20px; } .ipos-table-operations__voucher-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: rgb(18 39 27 / 48%) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .ipos-table-operations__voucher-panel { position: relative; z-index: 1; display: grid; gap: 16px; width: min(100%, 520px); max-height: min(720px, calc(100dvh - 40px)); overflow: auto; padding: 24px; border: 1px solid rgb(255 255 255 / 84%); border-radius: 24px; background: linear-gradient(145deg, rgb(255 255 255 / 96%), rgb(237 249 241 / 93%)); box-shadow: inset 0 1px 0 #fff, 0 28px 70px rgb(14 44 27 / 24%); } .ipos-table-operations__voucher-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; } .ipos-table-operations__voucher-head p { margin: 0 0 5px; color: #167548; font: 800 10px/1.2 var(--ipos-mono); letter-spacing: .09em; } .ipos-table-operations__voucher-head h2 { margin: 0; color: #183b2b; font-size: 27px; letter-spacing: -.035em; } .ipos-table-operations__voucher-close { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid rgb(45 105 70 / 18%); border-radius: 50%; background: rgb(255 255 255 / 62%); color: #315744; font-size: 28px; font-weight: 360; line-height: 1; } .ipos-table-operations__voucher-copy { margin: -5px 0 0; color: #5c7164; font-size: 13px; line-height: 1.5; } .ipos-table-operations__voucher-list { display: grid; gap: 9px; } .ipos-table-operations__voucher-option, .ipos-table-operations__voucher-current { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 66px; padding: 12px 14px; border: 1px solid rgb(65 113 81 / 18%); border-radius: 16px; background: rgb(255 255 255 / 56%); color: #183b2b; text-align: left; } .ipos-table-operations__voucher-option { width: 100%; cursor: pointer; transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease; } .ipos-table-operations__voucher-option:hover { border-color: rgb(12 107 69 / 38%); background: rgb(247 253 248 / 94%); box-shadow: 0 9px 20px rgb(27 95 58 / 9%); transform: translateY(-1px); } .ipos-table-operations__voucher-option > span, .ipos-table-operations__voucher-current > div { display: grid; gap: 3px; min-width: 0; } .ipos-table-operations__voucher-option b, .ipos-table-operations__voucher-current strong { overflow: hidden; color: #133d2a; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } .ipos-table-operations__voucher-option small, .ipos-table-operations__voucher-current small { overflow: hidden; color: #667d70; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .ipos-table-operations__voucher-option > strong { flex: 0 0 auto; color: #08734b; font: 800 14px/1 var(--ipos-mono); } .ipos-table-operations__voucher-current { border-color: rgb(12 107 69 / 28%); background: rgb(234 248 238 / 88%); } .ipos-table-operations__voucher-current span { color: #1b754a; font: 800 9px/1.2 var(--ipos-mono); letter-spacing: .08em; } .ipos-table-operations__voucher-current button { flex: 0 0 auto; min-height: 36px; } .ipos-table-operations__voucher-error, .ipos-table-operations__voucher-empty, .ipos-table-operations__voucher-loading { margin: 0; padding: 13px; border-radius: 14px; background: rgb(255 255 255 / 52%); color: #66776d; font-size: 13px; line-height: 1.45; } .ipos-table-operations__voucher-error { border: 1px solid rgb(191 75 61 / 24%); background: rgb(255 244 241 / 78%); color: #a33d30; } /* IPOS-349 follow-up: Counter voucher keeps its panel skin but uses the same * modal shell as table billing (centered panel + backdrop). */ .ipos-table-operations__voucher-dialog.is-counter-picker.is-counter-modal { display: grid; place-items: center; padding: 20px; pointer-events: auto; } .is-counter-picker.is-counter-modal .ipos-table-operations__voucher-panel { position: relative; top: auto; left: auto; width: min(100%, 610px); grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; gap: 0; max-height: min(720px, calc(100dvh - 40px)); overflow: hidden; padding: 0; border: 1px solid color-mix(in srgb, var(--ipos-action) 46%, var(--ipos-line-strong)); border-radius: 18px; background: color-mix(in srgb, var(--ipos-canvas) 96%, var(--ipos-action) 4%); box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight), 0 24px 70px var(--ipos-shadow-soft); visibility: visible; opacity: 1; } .is-counter-picker.is-counter-modal .ipos-table-operations__voucher-panel::before { display: none; } .is-counter-picker .ipos-table-operations__voucher-head { padding: 22px 24px 0; } .is-counter-picker .ipos-table-operations__voucher-head h2 { color: var(--ipos-ink); font-size: 22px; font-weight: 840; letter-spacing: -.025em; line-height: 1.15; } .is-counter-picker .ipos-table-operations__voucher-close { width: 44px; height: 44px; border: 1px solid color-mix(in srgb, var(--ipos-action) 24%, var(--ipos-line)); border-radius: 10px; background: color-mix(in srgb, var(--ipos-action) 7%, var(--ipos-canvas)); color: var(--ipos-action-hover); } .is-counter-picker .ipos-table-operations__voucher-close svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; } .is-counter-picker .ipos-table-operations__voucher-copy { margin: 5px 0 0; padding: 0 24px 16px; color: color-mix(in srgb, var(--ipos-muted) 82%, var(--ipos-ink) 18%); font-size: 13px; line-height: 1.45; } .is-counter-picker .ipos-table-operations__voucher-list { min-height: 0; overflow: auto; padding: 1px 16px 16px; scrollbar-gutter: stable; } .is-counter-picker .ipos-table-operations__voucher-option { display: grid; min-height: 76px; grid-template-columns: 34px 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--ipos-action) 18%, var(--ipos-line)); border-radius: 15px; background: color-mix(in srgb, var(--ipos-canvas) 98%, var(--ipos-action) 2%); color: var(--ipos-ink); box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight); text-align: left; } .is-counter-picker .ipos-table-operations__voucher-option.is-recommended { border-color: color-mix(in srgb, var(--ipos-action) 66%, var(--ipos-line)); background: color-mix(in srgb, var(--ipos-canvas) 94%, var(--ipos-action) 6%); } .is-counter-picker .ipos-table-operations__voucher-option.is-selected { border-color: var(--ipos-action); background: color-mix(in srgb, var(--ipos-canvas) 88%, var(--ipos-action) 12%); box-shadow: inset 4px 0 0 var(--ipos-action); } .is-counter-picker .ipos-table-operations__voucher-radio { display: block; width: 24px; height: 24px; border: 2px solid color-mix(in srgb, var(--ipos-action) 70%, var(--ipos-line)); border-radius: 50%; background: color-mix(in srgb, var(--ipos-surface) 82%, transparent); box-shadow: inset 0 0 0 5px transparent; } .is-counter-picker .ipos-table-operations__voucher-option.is-selected .ipos-table-operations__voucher-radio { background: var(--ipos-action); box-shadow: inset 0 0 0 5px var(--ipos-surface); } .is-counter-picker .ipos-table-operations__voucher-ticket { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--ipos-action) 9%, var(--ipos-surface)); color: var(--ipos-action); } .is-counter-picker .ipos-table-operations__voucher-ticket svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; } .is-counter-picker .ipos-table-operations__voucher-option-copy { display: grid; min-width: 0; gap: 3px; } .is-counter-picker .ipos-table-operations__voucher-option-copy b { overflow: hidden; color: var(--ipos-ink); font-size: 15px; font-weight: 840; text-overflow: ellipsis; white-space: nowrap; } .is-counter-picker .ipos-table-operations__voucher-option-copy small { overflow: hidden; color: var(--ipos-muted); font-size: 12px; font-weight: 540; text-overflow: ellipsis; white-space: nowrap; } .is-counter-picker .ipos-table-operations__voucher-saving { display: grid; justify-items: end; gap: 8px; min-width: 112px; } .is-counter-picker .ipos-table-operations__voucher-saving small { padding: 4px 7px; border-radius: 6px; background: color-mix(in srgb, var(--ipos-action) 9%, var(--ipos-surface)); color: var(--ipos-action-hover); font-size: 10px; font-weight: 700; line-height: 1.1; white-space: nowrap; } .is-counter-picker .ipos-table-operations__voucher-saving strong { color: var(--ipos-action-hover); font-size: 14px; font-weight: 840; font-variant-numeric: tabular-nums; white-space: nowrap; } .is-counter-picker .ipos-table-operations__voucher-list[aria-busy="true"] .ipos-table-operations__voucher-option { opacity: .56; pointer-events: none; } .is-counter-picker .ipos-table-operations__voucher-manual-toggle { display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 24px; border: 0; border-top: 1px solid var(--ipos-line); border-radius: 0; background: color-mix(in srgb, var(--ipos-canvas) 97%, var(--ipos-action) 3%); color: var(--ipos-action-hover); font-size: 14px; font-weight: 720; text-align: left; } .ipos-table-operations__voucher-manual-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: transform 160ms var(--ipos-counter-curve); } .ipos-table-operations__voucher-manual-toggle[aria-expanded="true"] svg { transform: rotate(90deg); } .ipos-table-operations__voucher-manual { display: grid; gap: 8px; padding: 14px 24px 18px; border-top: 1px solid var(--ipos-line); background: color-mix(in srgb, var(--ipos-canvas) 94%, var(--ipos-action) 6%); } .ipos-table-operations__voucher-manual[hidden] { display: none; } .ipos-table-operations__voucher-manual-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .ipos-table-operations__voucher-manual-field input { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--ipos-line-strong); border-radius: 8px; background: var(--ipos-surface); color: var(--ipos-ink); font: inherit; } .ipos-table-operations__voucher-manual-field input:focus { border-color: var(--ipos-action); outline: 3px solid color-mix(in srgb, var(--ipos-action) 20%, transparent); outline-offset: 1px; } .is-counter-picker .ipos-table-operations__voucher-manual-field button.is-primary { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 0 18px; border: 1px solid var(--ipos-action); border-radius: 8px; background: var(--ipos-action); color: var(--ipos-action-ink, #fff); font: inherit; font-weight: 720; line-height: 1; cursor: pointer; } .is-counter-picker .ipos-table-operations__voucher-manual-field button.is-primary:focus-visible { outline: 3px solid color-mix(in srgb, var(--ipos-action) 30%, transparent); outline-offset: 2px; } .is-counter-picker .ipos-table-operations__voucher-manual-field button.is-primary:disabled { cursor: not-allowed; opacity: .54; } .ipos-table-operations__voucher-picker-status { margin: 0; color: var(--ipos-muted); font-size: 11px; line-height: 1.4; } .ipos-table-operations__voucher-picker-status.is-error { color: var(--ipos-danger); } .is-counter-picker .ipos-table-operations__voucher-remove { min-height: 44px; padding: 0 24px; border: 0; border-top: 1px solid color-mix(in srgb, var(--ipos-danger) 28%, var(--ipos-line)); border-radius: 0; background: color-mix(in srgb, var(--ipos-canvas) 92%, var(--ipos-danger) 8%); color: var(--ipos-danger); font-size: 12px; font-weight: 720; text-align: left; cursor: pointer; } .ipos-table-operations__voucher-remove[hidden] { display: none; } body.ipos-app-shell.ipos-app-view-operations:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations .is-counter-picker button.ipos-table-operations__voucher-option[type="button"]:not(:disabled):not([aria-pressed="true"]) { border-color: color-mix(in srgb, var(--ipos-action) 18%, var(--ipos-line)) !important; background: color-mix(in srgb, var(--ipos-canvas) 98%, var(--ipos-action) 2%) !important; color: var(--ipos-ink) !important; } body.ipos-app-shell.ipos-app-view-operations:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations .is-counter-picker button.ipos-table-operations__voucher-close[type="button"] { border-color: color-mix(in srgb, var(--ipos-action) 24%, var(--ipos-line)) !important; background: color-mix(in srgb, var(--ipos-action) 7%, var(--ipos-canvas)) !important; color: var(--ipos-action-hover) !important; } body.ipos-app-shell.ipos-app-view-operations:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations .is-counter-picker button.ipos-table-operations__voucher-manual-toggle[type="button"] { border-color: var(--ipos-line) !important; background: color-mix(in srgb, var(--ipos-canvas) 97%, var(--ipos-action) 3%) !important; color: var(--ipos-action-hover) !important; } body.ipos-app-shell.ipos-app-view-operations:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations .is-counter-picker button.ipos-table-operations__voucher-remove[type="button"]:not([hidden]) { border-color: color-mix(in srgb, var(--ipos-danger) 28%, var(--ipos-line)) !important; background: color-mix(in srgb, var(--ipos-canvas) 92%, var(--ipos-danger) 8%) !important; color: var(--ipos-danger) !important; } @media (hover: hover) and (pointer: fine) { body.ipos-app-shell.ipos-app-view-operations:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations .is-counter-picker button.ipos-table-operations__voucher-option[type="button"]:not(:disabled):hover { border-color: color-mix(in srgb, var(--ipos-action) 68%, var(--ipos-line)) !important; background: color-mix(in srgb, var(--ipos-canvas) 90%, var(--ipos-action) 10%) !important; box-shadow: 0 9px 20px color-mix(in srgb, var(--ipos-action) 13%, transparent); color: var(--ipos-ink) !important; transform: none; } body.ipos-app-shell.ipos-app-view-operations:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations .is-counter-picker button.ipos-table-operations__voucher-option.is-selected[type="button"]:not(:disabled):hover { background: color-mix(in srgb, var(--ipos-canvas) 84%, var(--ipos-action) 16%) !important; box-shadow: inset 4px 0 0 var(--ipos-action), 0 9px 20px color-mix(in srgb, var(--ipos-action) 14%, transparent); } body.ipos-app-shell.ipos-app-view-operations:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations .is-counter-picker button.ipos-table-operations__voucher-close[type="button"]:not(:disabled):hover { border-color: color-mix(in srgb, var(--ipos-action) 52%, var(--ipos-line)) !important; background: color-mix(in srgb, var(--ipos-canvas) 84%, var(--ipos-action) 16%) !important; color: var(--ipos-action-hover) !important; box-shadow: 0 7px 16px color-mix(in srgb, var(--ipos-action) 12%, transparent); transform: translateY(-1px); } body.ipos-app-shell.ipos-app-view-operations:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations .is-counter-picker button.ipos-table-operations__voucher-manual-toggle[type="button"]:not(:disabled):hover { border-color: color-mix(in srgb, var(--ipos-action) 36%, var(--ipos-line)) !important; background: color-mix(in srgb, var(--ipos-canvas) 90%, var(--ipos-action) 10%) !important; color: var(--ipos-action-hover) !important; box-shadow: inset 4px 0 0 color-mix(in srgb, var(--ipos-action) 72%, transparent); transform: none; } body.ipos-app-shell.ipos-app-view-operations:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations .is-counter-picker button.ipos-table-operations__voucher-remove[type="button"]:not(:disabled):not([hidden]):hover { border-color: color-mix(in srgb, var(--ipos-danger) 52%, var(--ipos-line)) !important; background: color-mix(in srgb, var(--ipos-canvas) 84%, var(--ipos-danger) 16%) !important; color: var(--ipos-danger) !important; box-shadow: inset 4px 0 0 var(--ipos-danger); transform: none; } .is-counter-picker .ipos-table-operations__voucher-manual-field button.is-primary:hover:not(:disabled) { border-color: var(--ipos-action-hover) !important; background: var(--ipos-action-hover) !important; color: var(--ipos-action-ink, #fff) !important; box-shadow: 0 9px 20px color-mix(in srgb, var(--ipos-action) 22%, transparent); transform: translateY(-1px); } .ipos-table-operations .ipos-table-operations__counter-voucher-trigger:hover { background: color-mix(in srgb, var(--ipos-action) 5%, transparent); } } body.ipos-app-shell .ipos-table-operations .is-counter-picker :where(.ipos-table-operations__voucher-option, .ipos-table-operations__voucher-close, .ipos-table-operations__voucher-manual-toggle, .ipos-table-operations__voucher-remove, .ipos-table-operations__voucher-manual-field button.is-primary):focus-visible { outline: 3px solid color-mix(in srgb, var(--ipos-action) 30%, transparent); outline-offset: 2px; } body.ipos-app-shell .ipos-table-operations .is-counter-picker :where(.ipos-table-operations__voucher-option, .ipos-table-operations__voucher-close, .ipos-table-operations__voucher-manual-toggle, .ipos-table-operations__voucher-remove, .ipos-table-operations__voucher-manual-field button.is-primary):not(:disabled):active { box-shadow: none !important; transform: translateY(1px) scale(.985) !important; } @media (max-width: 640px) { .is-counter-picker .ipos-table-operations__voucher-panel { border-radius: 16px; } .is-counter-picker .ipos-table-operations__voucher-panel::before { display: none; } .is-counter-picker .ipos-table-operations__voucher-head { padding: 18px 18px 0; } .is-counter-picker .ipos-table-operations__voucher-copy { padding: 0 18px 14px; } .is-counter-picker .ipos-table-operations__voucher-list { padding: 1px 10px 12px; } .is-counter-picker .ipos-table-operations__voucher-option { min-height: 72px; grid-template-columns: 26px 42px minmax(0, 1fr) auto; gap: 9px; padding: 9px 10px; } .is-counter-picker .ipos-table-operations__voucher-ticket { width: 42px; height: 42px; } .is-counter-picker .ipos-table-operations__voucher-saving { min-width: 88px; } .is-counter-picker .ipos-table-operations__voucher-saving small { display: none; } .is-counter-picker .ipos-table-operations__voucher-manual-toggle { padding-inline: 18px; } .ipos-table-operations__voucher-manual { padding: 12px 18px 16px; } } @media (max-width: 390px) { .is-counter-picker .ipos-table-operations__voucher-option { grid-template-columns: 24px 38px minmax(0, 1fr); } .is-counter-picker .ipos-table-operations__voucher-ticket { width: 38px; height: 38px; } .is-counter-picker .ipos-table-operations__voucher-saving { grid-column: 3; justify-items: start; min-width: 0; } .ipos-table-operations__voucher-manual-field { grid-template-columns: 1fr; } .is-counter-picker .ipos-table-operations__voucher-manual-field button.is-primary { width: 100%; } } /* Payment slips are rendered from the frozen receipt payload, so screen and * print share the profile, item snapshots, voucher and exact bill totals. */ .ipos-table-operations__payment-receipt { gap: 0; padding: 19px; border: 1px solid rgb(80 114 91 / 34%); border-radius: 16px; background: #fffefa; color: #172019; box-shadow: 0 10px 22px rgb(25 62 39 / 8%); font-family: var(--ipos-mono); } .ipos-table-operations__receipt-header { display: grid; justify-items: center; gap: 3px; text-align: center; } .ipos-table-operations__receipt-logo { display: block; width: auto; max-width: 150px; height: auto; max-height: 48px; margin: 0 auto 7px; object-fit: contain; } .ipos-table-operations__receipt-store { font-family: var(--ipos-font); font-size: 15px; font-weight: 850; line-height: 1.15; text-transform: uppercase; } .ipos-table-operations__receipt-address, .ipos-table-operations__receipt-contact { color: #5f6963; font-size: 10px; line-height: 1.35; } .ipos-table-operations__receipt-rule { height: 1px; margin: 16px 0 13px; border-top: 1px dashed #a9b3ac; } .ipos-table-operations__receipt-title { margin: 0; font-family: var(--ipos-font); font-size: 12px; font-weight: 900; letter-spacing: .015em; text-align: center; } .ipos-table-operations__receipt-meta { display: grid; gap: 3px; margin-top: 11px; color: #455249; font-size: 10px; line-height: 1.35; } .ipos-table-operations__receipt-meta span { display: block; } .ipos-table-operations__receipt-lines { display: grid; gap: 5px; margin: 12px 0; padding: 10px 0; border-block: 1px dashed #a9b3ac; } .ipos-table-operations__receipt-line { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; line-height: 1.35; } .ipos-table-operations__receipt-line b { flex: 0 0 auto; font-weight: 700; } .ipos-table-operations__receipt-option { display: block; margin-top: -3px; color: #647067; font-size: 9px; } .ipos-table-operations__receipt-discount { display: block; margin-top: -2px; color: #197a35; font-size: 10px; font-weight: 700; } .ipos-table-operations__receipt-totals { display: grid; gap: 6px; } .ipos-table-operations__receipt-totals > div { display: flex; justify-content: space-between; gap: 10px; color: #405047; font-size: 11px; } .ipos-table-operations__receipt-totals > div.is-total { margin-top: 4px; padding-top: 8px; border-top: 1px dashed #68766c; color: #172019; font-size: 13px; font-weight: 850; } .ipos-table-operations__payment-summary { margin: 4px 0 14px; padding: 12px 14px; border: 1px solid var(--ipos-line); border-radius: 10px; background: var(--ipos-surface-muted, #f6f8f6); font-size: 13px; } .ipos-table-operations__payment-summary > div { font-size: 13px; } .ipos-table-operations__payment-summary > div.is-total { font-size: 15px; } .ipos-table-operations__receipt-qr { margin-top: 16px; } .ipos-table-operations__receipt-thank-you { margin-top: 14px; color: #5d6d62; font-size: 10px; text-align: center; } @media (max-width: 640px) { .ipos-table-operations__voucher-dialog { align-items: end; padding: 10px; } .ipos-table-operations__voucher-panel { max-height: min(680px, calc(100dvh - 20px)); padding: 20px 16px; border-radius: 22px 22px 16px 16px; } } @media (prefers-reduced-motion: reduce) { .ipos-table-operations__round-tab-indicator, .ipos-table-operations__voucher-option { transition: none; } } @media print { .ipos-table-operations.is-printing-payment .ipos-table-operations__payment-receipt { padding: 4mm !important; color: #111 !important; box-shadow: none !important; font: 10pt/1.35 Arial,sans-serif !important; } .ipos-table-operations.is-printing-payment .ipos-table-operations__receipt-logo { max-width: 30mm !important; max-height: 14mm !important; } .ipos-table-operations.is-printing-payment .ipos-table-operations__receipt-store { font-size: 12pt !important; } .ipos-table-operations.is-printing-payment .ipos-table-operations__receipt-address, .ipos-table-operations.is-printing-payment .ipos-table-operations__receipt-contact { font-size: 8pt !important; } } /* IPOS-067: published-map operating surface. Grid coordinates remain logical; CSS never persists, infers or changes a table position. */ .ipos-table-operations__floor { display: grid; gap: 16px; padding: 20px; overflow: hidden; } .ipos-table-operations__map-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; } .ipos-table-operations__map-head h2 { margin: 4px 0 0; font-size: 20px; line-height: 1.15; } .ipos-table-operations__map-count { color: var(--ipos-muted); font: 750 11px/1.3 var(--ipos-mono); font-variant-numeric: tabular-nums; text-align: right; } .ipos-table-operations__map { position: relative; display: grid; grid-template-columns: repeat(var(--ipos-floor-columns, 24), minmax(0, 1fr)); grid-template-rows: repeat(var(--ipos-floor-rows, 16), minmax(30px, 1fr)); min-height: clamp(390px, 53vw, 610px); gap: 3px; padding: 8px; border: 1px solid #d8e1d9; border-radius: 12px; background-color: #f8faf8; background-image: linear-gradient(to right, rgb(86 122 91 / .08) 1px, transparent 1px), linear-gradient(to bottom, rgb(86 122 91 / .08) 1px, transparent 1px); background-size: calc((100% - 16px) / var(--ipos-floor-columns, 24)) calc((100% - 16px) / var(--ipos-floor-rows, 16)); } .ipos-table-operations__map-empty { grid-column: 1 / -1; align-self: center; max-width: 360px; margin: auto; padding: 18px; border: 1px dashed var(--ipos-line-strong); border-radius: 8px; color: var(--ipos-muted); font-size: 13px; line-height: 1.55; text-align: center; background: rgb(255 255 255 / .76); } .ipos-table-operations__landmark { z-index: 0; display: grid; place-items: center; min-width: 0; overflow: hidden; border: 1px dashed #9aab9d; border-radius: 5px; background: rgb(231 237 232 / .82); color: #536358; font-size: 10px; line-height: 1.15; text-align: center; pointer-events: none; }.ipos-table-operations__landmark.is-counter { border-style: solid; background: #e8dfcf; color: #675842; }.ipos-table-operations__landmark.is-window { border-color: #7aa9c0; background: #e8f4f8; color: #35697e; }.ipos-table-operations__landmark.is-plant { border-radius: 999px; background: #e2f0df; color: #477044; } .ipos-table-operations__marker { position: relative; display: grid; min-width: 44px; min-height: 44px; place-items: center; align-content: center; gap: 0; overflow: hidden; border: 2px solid #a9b6aa; border-radius: 10px; background: #fff; color: var(--ipos-ink); box-shadow: 0 2px 0 rgb(25 42 28 / .05); cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease; } /* Override the generic button gutter: it belongs to controls, not spatial markers. */ .ipos-table-operations button.ipos-table-operations__marker { padding: 4px; } .ipos-table-operations__marker:hover { z-index: 2; transform: translateY(-2px); box-shadow: 0 8px 16px rgb(30 50 33 / .14); } .ipos-table-operations__marker:focus-visible { z-index: 3; outline: 3px solid rgb(25 122 53 / .3); outline-offset: 2px; } .ipos-table-operations__marker.is-round, .ipos-table-operations__marker.is-square { width: 100%; height: auto; max-height: 100%; place-self: center; aspect-ratio: 1 / 1; } .ipos-table-operations__marker.is-round { border-radius: 50%; } .ipos-table-operations__marker.is-rectangle { border-radius: 6px; } .ipos-table-operations__marker.is-empty { border-color: #aeb9b0; background: #f7f9f6; color: #405044; } .ipos-table-operations__marker.is-serving { border-color: #237645; background: #e4f4e7; color: #237645; } .ipos-table-operations__marker.is-new { border-color: #c45c00; background: #fff1df; color: #c45c00; } .ipos-table-operations__marker.is-preparing { border-color: #0a6e66; background: #e3f7f4; color: #0a6e66; } .ipos-table-operations__marker.is-ready { border-color: #187a42; background: #e4f7ea; color: #187a42; } .ipos-table-operations__marker.is-work { border-color: #8a6200; background: #fff6d8; color: #8a6200; } .ipos-table-operations__marker.is-payment_requested { border-color: #c53d2e; background: #ffe9e5; color: #c53d2e; } .ipos-table-operations__marker.is-paying { border-color: #1f6fb0; background: #e8f2ff; color: #1f6fb0; } .ipos-table-operations__marker.is-cleanup_pending { border-color: #6b5b95; background: #f1ecfb; color: #6b5b95; } .ipos-table-operations__marker.is-selected { z-index: 2; box-shadow: 0 0 0 3px rgb(25 122 53 / .2), 0 7px 18px rgb(30 50 33 / .16); } /* The whole marker core belongs to its code. Keep short operational codes readable; legacy long codes still clip safely. */ .ipos-table-operations__marker strong { display: block; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; font: 800 clamp(11px, 1.15vw, 15px)/1 var(--ipos-font); letter-spacing: -.02em; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .ipos-table-operations__marker-state { position: absolute; top: 4px; right: 4px; min-width: 10px; min-height: 10px; color: currentColor; font: 800 10px/1 var(--ipos-mono); font-variant-numeric: tabular-nums; text-align: center; } .ipos-table-operations__marker-state:empty { display: none; } .ipos-table-operations__fallback { border-top: 1px solid var(--ipos-line); padding-top: 15px; } .ipos-table-operations__fallback-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 12px; } .ipos-table-operations__fallback-list .ipos-table-operations__card { min-height: 102px; } .ipos-table-operations__fallback-list .ipos-table-operations__card.is-mapped { display: none; } .ipos-table-operations__fallback:not(.has-unplaced) { display: none; } @media (max-width: 1180px) { .ipos-table-operations__workspace { grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; } .ipos-table-operations__map { min-height: 460px; } } @media (max-width: 900px) { .ipos-table-operations__workspace { grid-template-columns: 1fr; } .ipos-table-operations__map { min-height: min(60dvh, 500px); } } @media (max-width: 640px) { .ipos-table-operations__floor { padding: 14px; gap: 14px; } .ipos-table-operations__map { grid-template-columns: repeat(var(--ipos-floor-columns, 24), 22px); min-height: 310px; gap: 2px; padding: 5px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; background-size: 24px calc((100% - 10px) / var(--ipos-floor-rows, 16)); } .ipos-table-operations button.ipos-table-operations__marker { min-width: 0; min-height: 28px; border-width: 1px; padding: 2px; } .ipos-table-operations__marker.is-round, .ipos-table-operations__marker.is-square { width: auto; height: 100%; max-width: 100%; } .ipos-table-operations__marker strong { font-size: 10px; } .ipos-table-operations__marker-state { display: none; } .ipos-table-operations__fallback { display: block !important; } .ipos-table-operations__fallback-list { grid-template-columns: 1fr; } .ipos-table-operations__fallback-list .ipos-table-operations__card.is-mapped { display: grid; } } /* IPOS-121: Light Liquid Glass v4 translation. Functional chrome is glass; operational content remains matte and scan-first. */ .ipos-table-operations { --operations-content: var(--ipos-lg-content, rgb(255 255 255 / 88%)); --operations-glass: var(--ipos-lg-glass, rgb(255 255 255 / 52%)); --operations-glass-thick: var(--ipos-lg-glass-thick, rgb(255 255 255 / 68%)); --operations-edge: var(--ipos-lg-edge, rgb(255 255 255 / 88%)); --operations-shadow: var(--ipos-lg-shadow, rgb(42 89 63 / 18%)); --operations-selection: var(--ipos-lg-selection, #145c38); min-height: calc(100dvh - 62px); padding: 8px 0 28px; background: transparent; color: var(--ipos-lg-ink, var(--ipos-ink)); } .ipos-table-operations__header, .ipos-table-operations__attention, .ipos-table-operations__toolbar, .ipos-table-operations__message, .ipos-table-operations__workspace { width: 100%; max-width: none; } .ipos-table-operations__header { align-items: center; padding: 4px 4px 18px; border: 0; } .ipos-table-operations__header h1 { margin: 0; font-size: clamp(34px, 3.15vw, 44px); font-weight: 760; letter-spacing: -.035em; } .ipos-table-operations__subtitle { margin-top: 5px; color: var(--ipos-lg-ink-muted, var(--ipos-muted)); font-size: 15px; } .ipos-table-operations__header-actions { gap: 10px; } .ipos-table-operations__sync, .ipos-table-operations__layout-status { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; padding: 0 15px; border: 1px solid var(--operations-edge); border-radius: 22px; background: var(--operations-glass); color: #315f43; box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight, rgb(255 255 255 / 56%)), 0 8px 22px rgb(42 89 63 / 10%); -webkit-backdrop-filter: blur(18px) saturate(1.18); backdrop-filter: blur(18px) saturate(1.18); font-size: 12px; font-weight: 700; } .ipos-table-operations__sync svg, .ipos-table-operations__layout-status svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .ipos-table-operations__sync.is-syncing svg { animation: ipos-operations-sync 850ms linear infinite; } .ipos-table-operations__sync.has-error { color: var(--ipos-lg-payment-requested, #b83a30); } @keyframes ipos-operations-sync { to { transform: rotate(360deg); } } .ipos-table-operations__layout-status.is-unavailable { color: var(--ipos-lg-cleanup, #887045); } .ipos-table-operations button.ipos-table-operations__refresh { display: grid; width: 44px; min-height: 44px; place-items: center; padding: 0; border-color: var(--operations-edge); border-radius: 17px; background: var(--operations-glass); box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight, rgb(255 255 255 / 56%)), 0 8px 22px rgb(42 89 63 / 10%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .ipos-table-operations__refresh svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } .ipos-table-operations__attention { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 7px; border: 1px solid var(--operations-edge); border-radius: 30px; background: linear-gradient(145deg, rgb(255 255 255 / 68%), rgb(240 248 240 / 38%)); box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight, rgb(255 255 255 / 56%)), 0 16px 34px rgb(42 89 63 / 13%); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); } .ipos-table-operations__attention-card { display: flex; min-height: 62px; align-items: center; justify-content: center; gap: 11px; padding: 8px 16px; border: 0; border-right: 1px solid rgb(80 102 87 / 13%); border-radius: 0; background: transparent !important; } .ipos-table-operations__attention-card:last-child { border-right: 0; } .ipos-table-operations__attention-card small { display: none; } .ipos-table-operations__attention-card strong { order: 3; display: grid; min-width: 30px; height: 30px; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 55%); font-size: 14px; } .ipos-table-operations__attention-title { gap: 9px; font-size: 14px; font-weight: 680; white-space: nowrap; } .ipos-table-operations__attention-icon { width: 30px; height: 30px; border: 0; border-radius: 0; } .ipos-table-operations__attention-icon svg { width: 26px; height: 26px; stroke-width: 1.65; } .ipos-table-operations__attention-card.is-new, .ipos-table-operations__attention-card.is-work { color: var(--ipos-lg-work, #8a5700); } .ipos-table-operations__attention-card.is-payment { color: var(--ipos-lg-payment-requested, #b83a30); } .ipos-table-operations__attention-card.is-cleanup { color: var(--ipos-lg-cleanup, #6f5b36); } .ipos-table-operations__attention-card.is-idle { color: #68736b; opacity: .7; } .ipos-table-operations__attention-card.is-idle strong { background: rgb(255 255 255 / 34%); color: #59645d; } .ipos-table-operations__toolbar { display: flex; min-height: 64px; align-items: center; gap: 12px; margin-top: 18px; padding: 8px 10px; border: 1px solid var(--operations-edge); border-radius: 27px; background: var(--operations-glass); box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight, rgb(255 255 255 / 56%)), 0 10px 24px rgb(42 89 63 / 10%); -webkit-backdrop-filter: blur(20px) saturate(1.16); backdrop-filter: blur(20px) saturate(1.16); } .ipos-table-operations__search { width: min(34vw, 285px); } .ipos-table-operations__area-filter { width: 190px; } .ipos-table-operations__search input, .ipos-table-operations__area-filter .ipos-styled-select__trigger { height: 46px; min-height: 46px; border-color: rgb(84 111 92 / 16%); border-radius: 19px; background: rgb(255 255 255 / 44%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%); } .ipos-table-operations__layout-status { margin-left: auto; background: rgb(245 252 246 / 54%); box-shadow: none; } .ipos-table-operations__legend { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; } .ipos-table-operations__message { min-height: 28px; padding: 7px 12px; font-size: 12px; } .ipos-table-operations__message:empty { display: none; } .ipos-table-operations__workspace { grid-template-columns: minmax(0, 1fr) minmax(328px, 372px); gap: 18px; align-items: stretch; } .ipos-table-operations__floor { min-height: 530px; gap: 12px; padding: 14px 4px 18px; border: 0; border-radius: 0; background: transparent; overflow: visible; } .ipos-table-operations__map-head { padding: 0 12px; } .ipos-table-operations__map-head .ipos-table-operations__eyebrow { display: none; } .ipos-table-operations__map-head h2 { margin: 0; font-size: 15px; color: var(--ipos-lg-ink-muted, var(--ipos-muted)); } .ipos-table-operations__map { grid-template-rows: repeat(var(--ipos-floor-rows, 16), minmax(30px, 1fr)); min-height: clamp(460px, 39vw, 560px); gap: 4px; padding: 16px; border: 0; border-radius: 24px; background: linear-gradient(155deg, rgb(255 255 255 / 38%), rgb(247 250 244 / 24%)); background-image: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / 74%), inset 0 0 0 1px rgb(70 103 79 / 5%); } .ipos-table-operations__landmark { opacity: .58; border-color: rgb(101 123 105 / 26%); background: rgb(239 244 238 / 40%); } .ipos-table-operations__marker { position: absolute; width: 104px; height: 102px; min-width: 104px; min-height: 102px; max-width: none; place-self: center; grid-template-rows: auto auto auto; align-content: center; gap: 5px; padding: 7px 5px !important; overflow: visible; border: 1px solid transparent; border-radius: 22px; background: transparent; box-shadow: none; color: var(--ipos-lg-empty, #6f7b72); transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease; } .ipos-table-operations__marker:hover { z-index: 2; border-color: rgb(255 255 255 / 82%); background: rgb(255 255 255 / 42%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%), 0 10px 24px rgb(42 89 63 / 12%); transform: translateY(-1px); } .ipos-table-operations__marker.is-empty { border-color: transparent; background: transparent; color: var(--ipos-lg-empty, #6f7b72); } .ipos-table-operations__marker.is-serving { border-color: transparent; background: transparent; color: var(--ipos-lg-serving, #237645); } .ipos-table-operations__marker.is-new { border-color: transparent; background: transparent; color: var(--ipos-lg-new, #c45c00); } .ipos-table-operations__marker.is-preparing { border-color: transparent; background: transparent; color: var(--ipos-lg-preparing, #0a6e66); } .ipos-table-operations__marker.is-ready { border-color: transparent; background: transparent; color: var(--ipos-lg-ready, #187a42); } .ipos-table-operations__marker.is-work { border-color: transparent; background: transparent; color: var(--ipos-lg-work, #8a6200); } .ipos-table-operations__marker.is-payment_requested { border-color: transparent; background: transparent; color: var(--ipos-lg-payment-requested, #c53d2e); } .ipos-table-operations__marker.is-paying { border-color: transparent; background: transparent; color: var(--ipos-lg-paying, #1f6fb0); } .ipos-table-operations__marker.is-cleanup_pending { border-color: transparent; background: transparent; color: var(--ipos-lg-cleanup, #6b5b95); } .ipos-table-operations__marker.is-selected { z-index: 3; border-color: var(--operations-selection); background: rgb(255 255 255 / 48%); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 72%), 0 0 0 3px rgb(20 92 56 / 16%), 0 14px 28px rgb(42 89 63 / 16%); } .ipos-table-operations__marker strong { grid-row: 1; font: 730 clamp(19px, 1.55vw, 22px)/1 var(--ipos-font); color: currentColor; letter-spacing: -.02em; } .ipos-table-operations__table-glyph { display: block; width: clamp(74px, 6.2vw, 88px); max-width: 100%; height: auto; color: currentColor; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; vector-effect: non-scaling-stroke; } .ipos-table-operations__table-glyph .glyph-fill { fill: currentColor; fill-opacity: .12; stroke: none; } .ipos-table-operations__marker-label { max-width: 100%; overflow: hidden; color: currentColor; font-size: 13px; font-weight: 650; line-height: 1.15; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .ipos-table-operations__marker-state { display: none; } .ipos-table-operations__fallback { padding: 14px 12px 0; border-top-color: rgb(80 102 87 / 12%); } .ipos-table-operations__fallback-list { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; } .ipos-table-operations__fallback-list .ipos-table-operations__card { min-height: 136px; } .ipos-table-operations__card { min-height: 146px; place-items: center; align-content: center; gap: 6px; padding: 10px 8px; border: 1px solid transparent; border-left-width: 1px; border-radius: 22px; background: rgb(255 255 255 / 24%); color: var(--ipos-lg-empty, #6f7b72); text-align: center; } .ipos-table-operations__card:hover { border-color: rgb(255 255 255 / 78%); background: rgb(255 255 255 / 46%); } .ipos-table-operations__card.is-selected { border-color: var(--operations-selection); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 72%), 0 0 0 3px rgb(20 92 56 / 14%); } .ipos-table-operations__card.is-serving { color: var(--ipos-lg-serving, #237645); } .ipos-table-operations__card.is-new { color: var(--ipos-lg-new, #c45c00); } .ipos-table-operations__card.is-preparing { color: var(--ipos-lg-preparing, #0a6e66); } .ipos-table-operations__card.is-ready { color: var(--ipos-lg-ready, #187a42); } .ipos-table-operations__card.is-work { color: var(--ipos-lg-work, #8a6200); } .ipos-table-operations__card.is-payment_requested { color: var(--ipos-lg-payment-requested, #c53d2e); } .ipos-table-operations__card.is-paying { color: var(--ipos-lg-paying, #1f6fb0); } .ipos-table-operations__card.is-cleanup_pending { color: var(--ipos-lg-cleanup, #6b5b95); } .ipos-table-operations__card-name { display: grid; justify-items: center; } .ipos-table-operations__card-name strong { color: currentColor; font-size: 18px; } .ipos-table-operations__card-name small { display: none; } .ipos-table-operations__card-state { color: currentColor; font-size: 13px; font-weight: 650; } .ipos-table-operations__card .ipos-table-operations__table-glyph { width: 70px; } .ipos-table-operations__card-meta { display: none; } .ipos-table-operations__card-restriction, .ipos-table-operations__marker-restriction { max-width: 100%; overflow: hidden; color: #9a4d2f; font-size: 9px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; } .ipos-table-operations__marker-restriction { position: absolute; right: 6px; bottom: 5px; left: 6px; padding-top: 3px; border-top: 1px solid currentColor; background: rgb(255 255 255 / 54%); line-height: 1.1; } .ipos-table-operations__card-restriction { font-size: 10px; } .ipos-table-operations__inspector { position: sticky; top: 18px; max-height: min(720px, calc(100dvh - 300px)); padding: 24px 20px; overflow-y: auto; border: 1px solid var(--operations-edge); border-radius: 34px; background: linear-gradient(155deg, rgb(255 255 255 / 76%), rgb(244 248 240 / 48%)); box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight, rgb(255 255 255 / 56%)), inset 0 0 0 1px rgb(59 107 76 / 7%), 0 18px 42px var(--operations-shadow); -webkit-backdrop-filter: blur(26px) saturate(1.16); backdrop-filter: blur(26px) saturate(1.16); scrollbar-width: thin; } .ipos-table-operations__inspector > .ipos-table-operations__eyebrow { display: none; } .ipos-table-operations__inspector-head { padding: 0 0 14px; border-bottom-color: rgb(80 102 87 / 14%); } .ipos-table-operations__inspector-head h2 { margin: 0; font-size: 30px; letter-spacing: -.03em; } .ipos-table-operations__badges { margin-top: 12px; } .ipos-table-operations__badge { padding: 5px 9px; border-radius: 9px; } .ipos-table-operations__bill-summary { padding: 24px 0 18px; border-bottom: 1px solid rgb(80 102 87 / 14%); } .ipos-table-operations__bill-summary > span { display: block; color: var(--ipos-lg-ink-muted, var(--ipos-muted)); font-size: 13px; } .ipos-table-operations__bill-summary > strong { display: block; margin-top: 7px; color: var(--ipos-lg-ink, var(--ipos-ink)); font-size: clamp(30px, 3vw, 42px); font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1; } .ipos-table-operations__bill-summary > strong.is-loading { color: var(--ipos-lg-ink-muted, var(--ipos-muted)); font-size: 23px; letter-spacing: -.02em; } .ipos-table-operations__bill-summary small { display: block; margin-top: 8px; color: var(--ipos-lg-ink-muted, var(--ipos-muted)); font-size: 13px; } .ipos-table-operations__bill-summary small b { color: inherit; font-weight: 700; } .ipos-table-operations__round-preview { display: none !important; } .ipos-table-operations__data-gap { border-radius: 12px; } .ipos-table-operations__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin-top: 15px; border: 0; border-radius: 0; overflow: visible; background: transparent; } .ipos-table-operations__stats > div { padding: 0; background: transparent; } .ipos-table-operations__stats span { font-size: 11px; line-height: 1.25; } .ipos-table-operations__stats strong { margin-top: 4px; font-size: 13px; line-height: 1.25; } .ipos-table-operations__actions { gap: 10px; margin-top: 18px; } .ipos-table-operations__operation-panel { padding: 0; border: 0; border-radius: 0; background: transparent; } .ipos-table-operations__round-history { gap: 9px; } .ipos-table-operations__round-history > h3 { margin-bottom: 3px; font-size: 15px; font-weight: 680; } .ipos-table-operations__round-detail { border-color: rgb(74 101 82 / 13%); border-radius: 18px; background: rgb(255 255 255 / 48%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 78%); } .ipos-table-operations__round-summary { display: grid; width: 100%; min-height: 62px; grid-template-columns: 32px minmax(0, 1fr) auto 12px; align-items: center; gap: 9px; padding: 8px 11px; border: 0; border-radius: 18px; background: transparent; color: var(--ipos-lg-ink, var(--ipos-ink)); text-align: left; } .ipos-table-operations__round-summary:hover { border: 0; background: rgb(255 255 255 / 35%); color: inherit; } .ipos-table-operations__round-number { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: rgb(218 235 222 / 70%); color: #315f43; font-size: 13px; font-weight: 750; } .ipos-table-operations__round-summary-meta { min-width: 0; } .ipos-table-operations__round-summary-meta strong, .ipos-table-operations__round-summary-meta small { display: block; } .ipos-table-operations__round-summary-meta strong { font-size: 13px; } .ipos-table-operations__round-summary-meta small { margin-top: 2px; overflow: hidden; color: var(--ipos-lg-ink-muted, var(--ipos-muted)); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .ipos-table-operations__round-summary-total { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; } .ipos-table-operations__round-chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 140ms ease; } .ipos-table-operations__round-detail.is-open .ipos-table-operations__round-chevron { transform: rotate(225deg) translate(-1px, -2px); } .ipos-table-operations__round-detail-body { gap: 10px; padding: 10px 12px 13px; border-top-color: rgb(74 101 82 / 11%); } .ipos-table-operations__round-items { display: grid; } .ipos-table-operations__round-items li { display: grid; grid-template-columns: minmax(0, 1fr) 28px auto; gap: 7px; padding: 9px 0; border-bottom: 1px solid rgb(74 101 82 / 10%); align-items: baseline; font-size: 12px; } .ipos-table-operations__round-items.has-item-cancel li { grid-template-columns: minmax(0, 1fr) 28px auto auto; align-items: center; } .ipos-table-operations__round-items li:last-child { border-bottom: 0; } .ipos-table-operations__round-items li span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ipos-table-operations__round-items li span:nth-child(2) { color: var(--ipos-lg-ink-muted, var(--ipos-muted)); text-align: center; } .ipos-table-operations__round-items li strong { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .ipos-table-operations__round-detail-note { padding: 8px 10px; border-radius: 10px; background: rgb(255 243 211 / 58%); } .ipos-table-operations__round-detail-actions { margin-top: 2px; } .ipos-table-operations__actions .is-primary, .ipos-table-operations__round-detail-actions .is-primary { border-radius: 16px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 26%), 0 8px 18px rgb(25 122 53 / 16%); } .ipos-table-operations__actions .is-secondary, .ipos-table-operations__round-detail-actions .is-secondary, .ipos-table-operations__round-status-menu summary { border-color: rgb(74 101 82 / 18%); border-radius: 14px; background: rgb(255 255 255 / 46%); } .ipos-table-operations__operation-panel.is-payment-request { padding: 15px; border: 1px solid rgb(217 74 61 / 22%); border-radius: 18px; background: rgb(255 242 238 / 54%); } .ipos-table-operations__operation-panel.is-payment-request > .is-primary { border-color: #e44f42; background: #e9574a; box-shadow: inset 0 1px 0 rgb(255 255 255 / 34%), 0 10px 22px rgb(217 74 61 / 22%); } .ipos-table-operations__operation-panel.is-payment-request > .is-primary:hover { border-color: #ca3d32; background: #ca3d32; } .ipos-table-operations__operation-panel.is-paying { padding: 15px; border: 1px solid rgb(33 108 181 / 18%); border-radius: 18px; background: rgb(238 247 255 / 58%); } .ipos-table-operations__inspector-backdrop { display: none; } @media (max-width: 1180px) { .ipos-table-operations__workspace { grid-template-columns: minmax(0, 1fr); } .ipos-table-operations__floor { min-height: 480px; } .ipos-table-operations__map { grid-template-rows: repeat(var(--ipos-floor-rows, 16), minmax(24px, 1fr)); min-height: 0; } .ipos-table-operations__marker { width: 86px; height: 82px; min-width: 86px; min-height: 82px; } .ipos-table-operations__table-glyph { width: 62px; } button.ipos-table-operations__inspector-backdrop { position: fixed; z-index: 58; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; /* Keep the active floor legible behind the tablet drawer. A full * backdrop-filter flattens the published map in Chromium compositing. */ background: rgb(25 92 61 / 18%); -webkit-backdrop-filter: none; backdrop-filter: none; } .ipos-table-operations__inspector { position: fixed; z-index: 60; top: 20px; right: 20px; bottom: 20px; left: auto; width: min(380px, calc(100vw - 40px)); max-height: none; visibility: hidden; opacity: 0; pointer-events: none; transform: translateX(calc(100% + 44px)); transition: transform 220ms cubic-bezier(.2, .78, .2, 1), opacity 160ms ease, visibility 0s linear 220ms; touch-action: pan-y; } .ipos-table-operations__inspector.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateX(0); transition-delay: 0s; } } @media (max-width: 900px) { .ipos-table-operations { padding-top: 4px; } } @media (max-width: 700px) { .ipos-table-operations { padding: 0; } .ipos-table-operations__header { align-items: center; flex-direction: row; padding: 0 2px 14px; } .ipos-table-operations__header h1 { font-size: 32px; } .ipos-table-operations__subtitle { max-width: 230px; font-size: 12px; } .ipos-table-operations__sync { display: none; } .ipos-table-operations__attention { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 6px; border-radius: 24px; } .ipos-table-operations__attention-card { min-height: 52px; padding: 6px 8px; border-right: 0; border-bottom: 1px solid rgb(80 102 87 / 11%); } .ipos-table-operations__attention-card:nth-last-child(-n+2) { border-bottom: 0; } .ipos-table-operations__attention-title { font-size: 11px; } .ipos-table-operations__attention-icon { width: 23px; height: 23px; } .ipos-table-operations__attention-icon svg { width: 21px; height: 21px; } .ipos-table-operations__attention-card strong { min-width: 25px; height: 25px; font-size: 12px; } .ipos-table-operations__toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 7px; margin-top: 10px; padding: 7px; border-radius: 23px; } .ipos-table-operations__area-filter, .ipos-table-operations__search { width: 100%; } .ipos-table-operations__search input, .ipos-table-operations__area-filter .ipos-styled-select__trigger { height: 44px; min-height: 44px; border-radius: 17px; } .ipos-table-operations__layout-status { grid-column: 1 / -1; min-height: 34px; justify-content: center; margin: 0; padding-inline: 10px; background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .ipos-table-operations__message { min-height: 22px; padding-block: 5px; } .ipos-table-operations__floor { min-height: 0; padding: 2px 0 12px; } .ipos-table-operations__map-head { display: none; } .ipos-table-operations__map { display: none; } .ipos-table-operations__fallback { display: block !important; padding: 0; border: 0; } .ipos-table-operations__fallback-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 0; } .ipos-table-operations__fallback-list .ipos-table-operations__card.is-mapped { display: grid; } .ipos-table-operations__fallback-list .ipos-table-operations__card { min-height: 132px; border-radius: 21px; } .ipos-table-operations__card .ipos-table-operations__table-glyph { width: 64px; } .ipos-table-operations__inspector { top: auto; right: 7px; bottom: calc(84px + env(safe-area-inset-bottom)); left: 7px; width: auto; max-height: calc(100dvh - 104px - env(safe-area-inset-bottom)); padding: 20px 16px; border-radius: 28px; transform: translateY(calc(100% + 120px)); } .ipos-table-operations__inspector.is-open { transform: translateY(0); } .ipos-table-operations__bill-summary > strong { font-size: 34px; } .ipos-table-operations__round-summary { grid-template-columns: 30px minmax(0, 1fr) auto 11px; gap: 7px; padding-inline: 9px; } .ipos-table-operations__round-summary-total { font-size: 12px; } .ipos-table-operations__inspector-close { min-height: 44px; border-radius: 15px; } } /* IPOS-128: preserve readable SVGs by switching the published-map surface to * the existing semantic table list when the floor container, not just the * viewport, becomes too narrow. Saved grid coordinates remain untouched. */ .ipos-table-operations__floor { container: ipos-floor / inline-size; } @container ipos-floor (max-width: 920px) { .ipos-table-operations__floor > .ipos-table-operations__map { display: none; } .ipos-table-operations__floor > .ipos-table-operations__fallback { display: block !important; padding: 0; border-top: 0; } .ipos-table-operations__floor .ipos-table-operations__fallback-list { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin-top: 0; } .ipos-table-operations__floor .ipos-table-operations__fallback-list .ipos-table-operations__card.is-mapped { display: grid !important; } } @media (max-width: 700px) { .ipos-table-operations__floor .ipos-table-operations__fallback-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ipos-table-operations__floor .ipos-table-operations__fallback-list .ipos-table-operations__card .ipos-table-operations__table-glyph { width: 70px; } } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .ipos-table-operations__attention, .ipos-table-operations__toolbar, .ipos-table-operations__inspector, .ipos-table-operations__sync { background: #f8fbf8; -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-reduced-motion: reduce) { .ipos-table-operations__sync.is-syncing svg { animation: none; } } /* IPOS-239: tablet layouts leave the attention rail * narrower than a four-column status row can safely support. Keep all four * states visible, but give each label enough room beside its 40px icon. */ @media screen and (min-width: 701px) and (max-width: 1180px) { body.ipos-app-view-operations .ipos-table-operations__attention { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 4px; } body.ipos-app-view-operations .ipos-table-operations__attention-card { min-width: 0; min-height: 72px; gap: 10px; padding: 10px 12px; } body.ipos-app-view-operations .ipos-table-operations__attention-title { min-width: 0; gap: 7px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } body.ipos-app-view-operations .ipos-table-operations__attention-icon { flex: 0 0 40px; } body.ipos-app-view-operations .ipos-table-operations__attention-card strong { flex: 0 0 38px; min-width: 38px; margin-left: auto; } } /* IPOS-127: stronger at-a-glance state recognition in the desktop work rail. */ @media (min-width: 701px) { .ipos-table-operations__attention-icon { width: 40px; height: 40px; } .ipos-table-operations__attention-icon svg { width: 33px; height: 33px; stroke-width: 1.9; } } /* IPOS-129: selection is a stable operational state, not a weaker hover echo. * Preserve the state color in currentColor while adding a distinct emerald * material and an inner keyline readable on both map markers and list cards. */ .ipos-table-operations__marker.is-selected, .ipos-table-operations__card.is-selected { border-color: var(--operations-selection); background: linear-gradient(145deg, rgb(237 255 245 / 92%), rgb(211 244 226 / 68%)), rgb(255 255 255 / 48%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 86%), inset 0 0 0 3px rgb(12 107 69 / 18%), 0 0 0 3px rgb(12 107 69 / 34%), 0 14px 28px rgb(9 100 64 / 18%); } .ipos-table-operations__marker.is-selected::after { position: absolute; inset: 6px; border: 1px solid rgb(12 107 69 / 42%); border-radius: inherit; content: ""; pointer-events: none; } .ipos-table-operations__floor.is-list-first > .ipos-table-operations__map { display: none; } .ipos-table-operations__floor.is-list-first > .ipos-table-operations__fallback { display: block; padding-top: 0; border-top: 0; } .ipos-table-operations__card.is-selected { transform: translateY(-1px); transition: transform 180ms cubic-bezier(.22, .72, .24, 1), border-color 180ms ease, background 180ms ease, box-shadow 220ms ease; } @media (prefers-reduced-motion: reduce) { .ipos-table-operations__card.is-selected { transform: none; transition: none; } } /* IPOS-122: Operations v5 — Emerald Liquid Glass Workspace. */ body.ipos-app-view-operations .ipos-table-operations { --operations-glass: rgb(255 255 255 / 45%); --operations-glass-strong: rgb(255 255 255 / 66%); --operations-content: rgb(250 254 250 / 62%); --operations-edge: rgb(255 255 255 / 80%); --operations-shadow: rgb(21 93 63 / 16%); --operations-selection: #0c6b45; width: min(100%, 1480px); min-height: 100dvh; margin: 0 auto; padding: 30px 18px 44px; background: transparent; } .ipos-table-operations__header, .ipos-table-operations__attention, .ipos-table-operations__toolbar, .ipos-table-operations__message, .ipos-table-operations__workspace { width: 100%; max-width: none; } .ipos-table-operations__header { display: grid; grid-template-columns: minmax(166px, .72fr) minmax(260px, 1.45fr) auto; align-items: center; gap: 28px; padding: 0 4px 22px; border: 0; } .ipos-table-operations__header h1 { margin: 0; font-size: clamp(31px, 2.55vw, 40px); font-weight: 760; letter-spacing: -.055em; } .ipos-table-operations__subtitle { display: none; } .ipos-table-operations__header-search { width: 100%; max-width: none; } .ipos-table-operations__header-search input { height: 50px; border: 1px solid rgb(255 255 255 / 75%); border-radius: 19px; background: rgb(255 255 255 / 39%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%), 0 9px 22px rgb(42 89 63 / 7%); -webkit-backdrop-filter: blur(18px) saturate(1.13); backdrop-filter: blur(18px) saturate(1.13); } .ipos-table-operations__header-actions { gap: 10px; justify-self: end; } .ipos-table-operations__sync { min-height: 50px; padding: 0 15px; border: 1px solid rgb(255 255 255 / 71%); border-radius: 19px; background: rgb(255 255 255 / 31%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 68%); } .ipos-table-operations button.ipos-table-operations__refresh { width: 50px; min-height: 50px; border-radius: 19px; } .ipos-table-operations__attention { margin: 0; padding: 8px 4px; border-radius: 26px; } .ipos-table-operations__attention-card { position: relative; min-height: 80px; justify-content: flex-start; gap: 12px; padding: 12px 18px; } .ipos-table-operations__attention-card strong { min-width: 38px; height: 38px; margin-left: auto; background: rgb(255 255 255 / 58%); font-size: 21px; } .ipos-table-operations__attention-title { font-size: 15px; } .ipos-table-operations__attention-icon { width: 34px; height: 34px; } .ipos-table-operations__attention-icon svg { width: 28px; height: 28px; stroke-width: 1.85; } .ipos-table-operations__attention-card.is-new { color: #c45c00; background: linear-gradient(135deg, rgb(255 241 223 / 60%), transparent); border-radius: 19px; } .ipos-table-operations__attention-card.is-work { color: #8a6200; background: linear-gradient(135deg, rgb(255 246 216 / 58%), transparent); border-radius: 19px; } .ipos-table-operations__attention-card.is-payment { color: #c53d2e; background: linear-gradient(135deg, rgb(255 233 229 / 58%), transparent); border-radius: 19px; } .ipos-table-operations__attention-card.is-cleanup { color: #6b5b95; background: linear-gradient(135deg, rgb(241 236 251 / 63%), transparent); border-radius: 19px; } .ipos-table-operations__attention-card.is-idle { opacity: .78; } .ipos-table-operations__toolbar { min-height: 62px; gap: 14px; margin-top: 16px; padding: 8px 10px; border-radius: 22px; } .ipos-table-operations__area-tabs { display: flex; min-width: 0; gap: 8px; overflow-x: auto; scrollbar-width: none; } .ipos-table-operations__area-tabs::-webkit-scrollbar { display: none; } .ipos-table-operations__area-tab { min-height: 43px !important; flex: 0 0 auto; padding: 0 15px !important; border-color: rgb(74 101 82 / 15%) !important; border-radius: 15px !important; background: rgb(255 255 255 / 33%) !important; color: var(--ipos-lg-ink, var(--ipos-ink)) !important; font-size: 13px !important; font-weight: 660 !important; } .ipos-table-operations__area-tab:hover { background: rgb(255 255 255 / 55%) !important; } .ipos-table-operations__area-tab.is-active { border-color: #06714b !important; background: linear-gradient(135deg, #087f56, #0e6345) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), 0 8px 18px rgb(11 103 67 / 18%); color: #fff !important; } .ipos-table-operations__layout-status { min-height: 40px; margin-left: auto; padding: 0 11px; border: 0; background: transparent; color: #197a35; font-size: 12px; } .ipos-table-operations__workspace { grid-template-columns: minmax(0, 1fr) minmax(336px, 378px); gap: 16px; margin-top: 14px; } .ipos-table-operations__floor { min-height: 610px; padding: 13px; border: 1px solid rgb(255 255 255 / 79%); border-radius: 27px; background: linear-gradient(150deg, rgb(255 255 255 / 42%), rgb(239 251 244 / 30%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 73%), 0 18px 38px rgb(30 100 70 / 9%); -webkit-backdrop-filter: blur(20px) saturate(1.08); backdrop-filter: blur(20px) saturate(1.08); } .ipos-table-operations__map-head { display: none; } .ipos-table-operations__map { min-height: 580px; padding: 18px; border: 1px solid rgb(255 255 255 / 60%); border-radius: 20px; background: radial-gradient(circle at 10% 8%, rgb(255 255 255 / 76%), transparent 45%), rgb(246 252 248 / 49%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 76%); } .ipos-table-operations__marker { width: 94px; height: 90px; min-width: 94px; min-height: 90px; gap: 4px; border-radius: 26px; } .ipos-table-operations__table-glyph { width: 66px; stroke-width: 1.9; } .ipos-table-operations__marker strong { font-size: clamp(17px, 1.3vw, 20px); } .ipos-table-operations__marker-label { font-size: 12px; } .ipos-table-operations__marker.is-selected { border-color: var(--operations-selection); background: rgb(255 255 255 / 44%); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 75%), 0 0 0 3px rgb(9 107 69 / 18%), 0 14px 26px rgb(9 100 64 / 14%); } .ipos-table-operations__inspector { top: 14px; max-height: calc(100dvh - 58px); padding: 25px 21px; border-radius: 27px; background: linear-gradient(150deg, rgb(255 255 255 / 79%), rgb(236 249 241 / 52%)); } .ipos-table-operations__inspector-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 13px; } .ipos-table-operations__inspector-head h2 { font-size: 29px; } .ipos-table-operations__badges { position: absolute; top: 24px; right: 18px; max-width: 52%; justify-content: flex-end; } .ipos-table-operations__badge { padding: 6px 10px; border-radius: 12px; } .ipos-table-operations__bill-summary { padding: 22px 0 16px; } .ipos-table-operations__stats { gap: 11px 15px; margin-top: 14px; padding-bottom: 2px; border-bottom: 1px solid rgb(80 102 87 / 12%); } .ipos-table-operations__stats > div:nth-child(3) { display: none; } .ipos-table-operations__round-detail { border-radius: 15px; background: rgb(255 255 255 / 39%); } .ipos-table-operations__round-summary { min-height: 60px; border-radius: 15px; } .ipos-table-operations__actions .is-primary { min-height: 48px; border-radius: 15px; } @media (max-width: 1180px) { body.ipos-app-view-operations .ipos-table-operations { padding-inline: 12px; } .ipos-table-operations__header { grid-template-columns: minmax(150px, .8fr) minmax(220px, 1.35fr) auto; gap: 16px; } .ipos-table-operations__workspace { grid-template-columns: 1fr; } .ipos-table-operations__floor, .ipos-table-operations__map { min-height: 510px; } } @media (max-width: 700px) { body.ipos-app-view-operations .ipos-table-operations { width: 100%; padding: 18px 12px 14px; } .ipos-table-operations__header { grid-template-columns: 1fr auto; gap: 10px; padding: 0 4px 13px; } .ipos-table-operations__header h1 { font-size: 31px; } .ipos-table-operations__header-search { grid-column: 1 / -1; grid-row: 2; } .ipos-table-operations__header-search input { height: 46px; border-radius: 17px; } .ipos-table-operations__sync { display: none; } .ipos-table-operations button.ipos-table-operations__refresh { width: 46px; min-height: 46px; border-radius: 17px; } .ipos-table-operations__attention { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 5px; border-radius: 22px; } .ipos-table-operations__attention-card { min-height: 64px; gap: 7px; padding: 8px 9px; } .ipos-table-operations__attention-title { font-size: 11px; } .ipos-table-operations__attention-icon { width: 25px; height: 25px; } .ipos-table-operations__attention-icon svg { width: 22px; height: 22px; } .ipos-table-operations__attention-card strong { min-width: 28px; height: 28px; font-size: 14px; } .ipos-table-operations__toolbar { min-height: 54px; margin-top: 10px; padding: 6px; border-radius: 19px; } .ipos-table-operations__area-tab { min-height: 40px !important; padding-inline: 12px !important; border-radius: 13px !important; font-size: 12px !important; } .ipos-table-operations__layout-status { display: none; } .ipos-table-operations__floor { min-height: 0; padding: 3px 0 2px; border: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .ipos-table-operations__map { display: none; } .ipos-table-operations__fallback { padding: 0; border: 0; } .ipos-table-operations__fallback-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ipos-table-operations__fallback-list .ipos-table-operations__card { min-height: 128px; } .ipos-table-operations__card { border-radius: 20px; } .ipos-table-operations__inspector { right: 8px; bottom: calc(80px + env(safe-area-inset-bottom)); left: 8px; padding: 21px 16px; border-radius: 25px; } .ipos-table-operations__badges { top: 18px; right: 14px; } } /* IPOS-123: Operations v5.1 — one-surface cashier inspector. * Keep runtime data/action hooks intact; only reduce the visual nesting debt. */ .ipos-table-operations__inspector { padding: 27px 24px 22px; border: 1px solid rgb(255 255 255 / 88%); border-radius: 30px; background: radial-gradient(125% 48% at 8% 0%, rgb(255 255 255 / 78%), transparent 60%), linear-gradient(155deg, rgb(255 255 255 / 74%), rgb(230 247 238 / 52%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 92%), 0 22px 48px rgb(21 93 63 / 14%); } .ipos-table-operations__inspector-head { align-items: flex-start; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid rgb(61 98 75 / 14%); } .ipos-table-operations__inspector-head h2 { font-size: clamp(29px, 2vw, 33px); font-weight: 760; letter-spacing: -.052em; } .ipos-table-operations__inspector-head p { margin-top: 5px; color: rgb(46 77 59 / 72%); font-size: 13px; } .ipos-table-operations__badges { position: static; max-width: 56%; margin: 1px 0 0 auto; justify-content: flex-end; } .ipos-table-operations__badge { padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%); } .ipos-table-operations__bill-summary { padding: 20px 0 17px; border-bottom: 0; } .ipos-table-operations__bill-summary > span { color: rgb(46 77 59 / 72%); font-size: 12px; font-weight: 620; } .ipos-table-operations__bill-summary > strong { margin-top: 5px; font-size: clamp(38px, 3vw, 46px); letter-spacing: -.065em; } .ipos-table-operations__bill-summary small { margin-top: 4px; color: rgb(46 77 59 / 78%); } .ipos-table-operations__stats { gap: 14px 22px; margin: 0; padding: 15px 0 16px; border-top: 1px solid rgb(61 98 75 / 14%); border-bottom: 1px solid rgb(61 98 75 / 14%); } .ipos-table-operations__stats > div { min-width: 0; } .ipos-table-operations__stats span { color: rgb(46 77 59 / 62%); font-size: 10px; font-weight: 720; letter-spacing: .02em; text-transform: uppercase; } .ipos-table-operations__stats strong { color: #183126; font-size: 13px; font-weight: 720; } .ipos-table-operations__actions { display: grid; gap: 13px; margin-top: 17px; } .ipos-table-operations__operation-panel { padding: 0; border: 0; border-radius: 0; background: transparent; } .ipos-table-operations__round-history { gap: 5px; } .ipos-table-operations__round-history > h3 { margin: 0 0 2px; color: #193126; font-size: 15px; font-weight: 750; letter-spacing: -.016em; } .ipos-table-operations__round-detail { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .ipos-table-operations__round-summary { min-height: 54px; padding: 6px 0; border-bottom: 1px solid rgb(61 98 75 / 15%); border-radius: 0; background: transparent; } .ipos-table-operations__round-summary:hover { background: transparent; color: inherit; } .ipos-table-operations__round-number { width: 30px; height: 30px; background: rgb(207 232 217 / 76%); color: #1c6941; } .ipos-table-operations__round-summary-meta strong { color: #0d7040; } .ipos-table-operations__round-summary-total { color: #173127; } .ipos-table-operations__round-detail-body { gap: 0; padding: 0 0 13px; border-top: 0; } .ipos-table-operations__round-items { margin-top: 2px !important; } .ipos-table-operations__round-items li { min-height: 34px; align-items: center; border-bottom: 1px solid rgb(61 98 75 / 10%); } .ipos-table-operations__round-items li:last-child { border-bottom: 0; } .ipos-table-operations__round-detail-note { margin: 8px 0 0; padding: 7px 9px; border: 1px solid rgb(204 154 51 / 18%); border-radius: 11px; background: rgb(255 246 218 / 52%); } .ipos-table-operations__round-detail-actions { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 11px; } .ipos-table-operations__actions .is-primary, .ipos-table-operations__round-detail-actions .is-primary { min-height: 50px; border: 1px solid #087244; border-radius: 16px; background: linear-gradient(135deg, #0b804a, #096c3e); box-shadow: inset 0 1px 0 rgb(255 255 255 / 27%), 0 10px 20px rgb(11 105 61 / 20%); color: #fff !important; font-weight: 760; } .ipos-table-operations__actions .is-primary:hover, .ipos-table-operations__round-detail-actions .is-primary:hover { border-color: #075b36; background: #075f38; color: #fff !important; } .ipos-table-operations__round-detail-actions .is-secondary, .ipos-table-operations__round-status-menu summary { border-color: rgb(61 98 75 / 18%); border-radius: 15px; background: rgb(255 255 255 / 42%); } .ipos-table-operations__operation-panel.is-payment-request, .ipos-table-operations__operation-panel.is-paying { padding: 14px; border-radius: 18px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 66%); } .ipos-table-operations__hint { margin: 0; padding-top: 2px; color: rgb(46 77 59 / 70%); } @media (max-width: 700px) { .ipos-table-operations__inspector { padding: 21px 17px 18px; border-radius: 26px; } .ipos-table-operations__inspector-head { padding-bottom: 13px; } .ipos-table-operations__inspector-head h2 { font-size: 28px; } .ipos-table-operations__badges { max-width: 50%; } .ipos-table-operations__bill-summary { padding: 17px 0 14px; } .ipos-table-operations__bill-summary > strong { font-size: 38px; } .ipos-table-operations__stats { gap: 12px 16px; padding: 13px 0; } .ipos-table-operations__round-summary { grid-template-columns: 30px minmax(0, 1fr) auto 11px; gap: 7px; } } /* IPOS-124: semantic primary motion and richer desktop Liquid Glass depth. */ .ipos-table-operations__actions .is-primary, .ipos-table-operations__round-detail-actions .is-primary { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #087143, #087946 54%, #086a3e); transition: border-color 220ms ease, box-shadow 260ms cubic-bezier(.22, .72, .24, 1); } .ipos-table-operations__actions .is-primary::before, .ipos-table-operations__round-detail-actions .is-primary::before { position: absolute; inset: -52% -36%; z-index: -1; background: radial-gradient(ellipse at 66% 44%, rgb(255 255 255 / 32%), transparent 43%); content: ""; opacity: .38; transform: translate3d(-10%, 3%, 0) scale(.92); transition: opacity 250ms ease, transform 420ms cubic-bezier(.18, .82, .2, 1); pointer-events: none; } .ipos-table-operations__actions button.is-primary:hover, .ipos-table-operations__round-detail-actions button.is-primary:hover { border-color: rgb(210 255 229 / 64%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 38%), inset 0 -1px 0 rgb(0 62 35 / 18%), 0 0 0 1px rgb(99 203 151 / 20%), 0 14px 27px rgb(9 111 64 / 25%); color: #fff !important; } .ipos-table-operations__actions button.is-primary:hover::before, .ipos-table-operations__round-detail-actions button.is-primary:hover::before { opacity: .92; transform: translate3d(9%, -3%, 0) scale(1.04); } .ipos-table-operations__actions .is-primary:active, .ipos-table-operations__round-detail-actions .is-primary:active { box-shadow: inset 0 2px 5px rgb(3 67 38 / 28%), 0 5px 12px rgb(11 105 61 / 16%); } @media (min-width: 701px) { .ipos-table-operations__attention, .ipos-table-operations__toolbar { background: linear-gradient(145deg, rgb(255 255 255 / 48%), rgb(220 243 231 / 35%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 76%), 0 16px 32px rgb(27 98 68 / 10%); } .ipos-table-operations__floor { background: linear-gradient(145deg, rgb(255 255 255 / 38%), rgb(202 235 216 / 33%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 76%), 0 20px 40px rgb(30 100 70 / 13%); } .ipos-table-operations__map { background: radial-gradient(circle at 10% 7%, rgb(255 255 255 / 63%), transparent 44%), linear-gradient(145deg, rgb(240 250 244 / 48%), rgb(211 239 222 / 36%)); } .ipos-table-operations__inspector { background: radial-gradient(125% 48% at 8% 0%, rgb(255 255 255 / 70%), transparent 60%), linear-gradient(155deg, rgb(247 253 249 / 66%), rgb(199 233 214 / 50%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 88%), 0 24px 50px rgb(21 93 63 / 17%); } } @media (prefers-reduced-motion: reduce) { .ipos-table-operations__actions .is-primary, .ipos-table-operations__round-detail-actions .is-primary, .ipos-table-operations__actions .is-primary::before, .ipos-table-operations__round-detail-actions .is-primary::before { transition: none; } } /* IPOS-125: explicit icon geometry for Operations search and cleanup state. */ .ipos-table-operations__search::before, .ipos-table-operations__search::after { display: none; } .ipos-table-operations__search-icon { position: absolute; z-index: 1; top: 50%; left: 18px; width: 18px; height: 18px; fill: none; stroke: rgb(38 73 55 / 74%); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transform: translateY(-50%); pointer-events: none; } .ipos-table-operations__header-search input { padding-left: 48px; } .ipos-table-operations__attention-card.is-cleanup .ipos-table-operations__attention-icon svg { stroke-width: 1.8; } .ipos-table-operations__attention-card.is-cleanup .ipos-table-operations__attention-icon rect { fill: rgb(36 119 189 / 10%); } /* IPOS-158: persistent attention is quiet on the map, urgent only when new. */ .ipos-table-operations__attention-launcher, .ipos-table-operations__sound-toggle { position: relative; display: inline-grid; width: 44px; min-height: 44px; place-items: center; padding: 0 !important; border: 1px solid rgb(56 102 76 / 20%) !important; border-radius: 14px !important; background: rgb(250 255 249 / 54%) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%), 0 6px 18px rgb(24 66 40 / 7%); color: #1b6740 !important; line-height: 1; backdrop-filter: blur(16px) saturate(1.08); transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease; } .ipos-table-operations__attention-launcher:hover, .ipos-table-operations__attention-launcher:focus-visible, .ipos-table-operations__sound-toggle:hover, .ipos-table-operations__sound-toggle:focus-visible { border-color: rgb(27 103 64 / 44%) !important; background: rgb(255 255 255 / 74%) !important; box-shadow: inset 0 1px 0 #fff, 0 9px 22px rgb(24 66 40 / 11%); } .ipos-table-operations__header-icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; } .ipos-table-operations__attention-launcher b { position: absolute; top: -5px; right: -5px; display: flex; width: 18px; height: 18px; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; border: 2px solid rgb(247 252 246 / 94%); border-radius: 999px; background: #d94a3d; color: #fff; font: 750 10px/18px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; text-indent: .25px; box-shadow: 0 2px 5px rgb(110 35 29 / 20%); } .ipos-table-operations__sound-toggle[aria-pressed="true"] { border-color: #197a35 !important; background: #197a35 !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 8px 20px rgb(25 122 53 / 24%) !important; color: #fff !important; } .ipos-table-operations__sound-toggle[aria-pressed="true"]::after { position: absolute; right: 7px; bottom: 7px; width: 5px; height: 5px; border: 1.5px solid #197a35; border-radius: 50%; background: #dff5e5; box-shadow: 0 0 0 2px rgb(25 122 53 / 40%); content: ''; } .ipos-table-operations__card { position: relative; } .ipos-table-operations__card.has-unseen { box-shadow: 0 0 0 2px rgb(184 117 8 / 22%), 0 9px 23px rgb(28 57 39 / 10%); animation: ipos-attention-arrive 900ms ease-out 2; } .ipos-table-operations__card.has-payment-attention { box-shadow: 0 0 0 2px rgb(217 74 61 / 30%), 0 9px 23px rgb(98 42 36 / 12%); } .ipos-table-operations__toast-stack { position: fixed; z-index: 90; top: max(110px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); display: grid; width: min(360px, calc(100vw - 32px)); gap: 9px; pointer-events: none; } .ipos-table-operations__toast { min-height: 58px !important; padding: 12px 15px !important; border-radius: 16px !important; box-shadow: 0 18px 42px rgb(20 45 29 / 18%); pointer-events: auto; text-align: left; animation: ipos-toast-in 180ms ease-out both; } .ipos-table-operations__toast.is-order { border-color: #edc878; background: #fff9ec; color: #8b5600; } .ipos-table-operations__toast.is-payment { border-color: #e6a49c; background: #fff4f1; color: #b7352b; } .ipos-table-operations__toast.is-refund { border-color: #b99ae8; background: #f8f3ff; color: #68409f; } .ipos-table-operations__attention-drawer { position: fixed; z-index: 91; top: 116px; right: max(18px, env(safe-area-inset-right)); box-sizing: border-box; width: min(380px, calc(100vw - 32px)); max-height: min(500px, calc(100dvh - 144px)); overflow: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid rgb(255 255 255 / 78%); border-radius: 18px; background: rgb(240 250 244 / 70%); box-shadow: 0 20px 48px rgb(20 45 29 / 14%), inset 0 1px 0 rgb(255 255 255 / 70%); backdrop-filter: blur(28px) saturate(1.18); scrollbar-color: var(--ipos-scrollbar-thumb) transparent; scrollbar-gutter: stable; scrollbar-width: thin; } .ipos-table-operations__attention-drawer::-webkit-scrollbar { width: 8px; height: 8px; } .ipos-table-operations__attention-drawer::-webkit-scrollbar-track { background: transparent; } .ipos-table-operations__attention-drawer::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--ipos-scrollbar-thumb); background-clip: padding-box; } .ipos-table-operations__attention-drawer::-webkit-scrollbar-thumb:hover { background: var(--ipos-scrollbar-thumb-hover); background-clip: padding-box; } .ipos-table-operations__attention-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 6px 9px; border-bottom: 1px solid rgb(60 105 76 / 13%); } .ipos-table-operations__attention-drawer-head strong { color: #1d3328; font-size: 15px; } .ipos-table-operations__attention-drawer-head button { display: grid; width: 34px; min-width: 34px; min-height: 34px; place-items: center; padding: 0 !important; border: 1px solid rgb(56 102 76 / 20%); border-radius: 10px; background: rgb(255 255 255 / 48%); color: #20382a; } .ipos-table-operations__attention-drawer-head button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; } .ipos-table-operations__attention-item { width: 100%; min-height: 46px !important; margin-top: 6px; padding: 10px 12px 10px 28px !important; border-color: rgb(59 106 78 / 20%) !important; border-radius: 11px !important; background: rgb(255 255 255 / 48%) !important; color: #234031 !important; text-align: left; } .ipos-table-operations__attention-item::before { position: absolute; width: 7px; height: 7px; margin: 6px 0 0 -15px; border-radius: 50%; background: #b57808; content: ''; } .ipos-table-operations__attention-item.is-payment, .ipos-table-operations__attention-item.is-payment_requested { border-color: rgb(217 74 61 / 30%) !important; background: rgb(255 246 244 / 58%) !important; color: #9a342b !important; } .ipos-table-operations__attention-item.is-payment::before, .ipos-table-operations__attention-item.is-payment_requested::before { background: #d94a3d; } .ipos-table-operations__attention-item.is-refund { border-color: rgb(111 72 164 / 28%) !important; background: rgb(248 243 255 / 68%) !important; color: #68409f !important; } .ipos-table-operations__attention-item.is-refund::before { background: #8054b9; } .ipos-table-operations__attention-resolved-title { margin: 14px 6px 4px; color: #61766a; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .ipos-table-operations__attention-resolved-item { position: relative; display: block; padding: 7px 8px 7px 24px; border-top: 1px solid rgb(60 105 76 / 10%); color: #718177; font-size: 12px; } .ipos-table-operations__attention-resolved-item::before { position: absolute; top: 14px; left: 8px; width: 7px; height: 7px; border-radius: 50%; background: #89978d; content: ''; } .ipos-table-operations__attention-resolved-item.is-cancelled { border-top-color: rgb(180 66 58 / 16%); color: #a13a34; } .ipos-table-operations__attention-resolved-item.is-cancelled::before { background: #d94a3d; } .ipos-table-operations__attention-resolved-item.is-served { border-top-color: rgb(25 122 53 / 15%); color: #2f7450; } .ipos-table-operations__attention-resolved-item.is-served::before { background: #31935b; } .ipos-table-operations__attention-resolved-item.is-payment { border-top-color: rgb(183 58 48 / 16%); color: #a43d35; } .ipos-table-operations__attention-resolved-item.is-payment::before { background: #c85448; } .ipos-table-operations__attention-resolved-item.is-paid { border-top-color: rgb(25 122 53 / 15%); color: #286c45; } .ipos-table-operations__attention-resolved-item.is-paid::before { background: #197a35; } .ipos-table-operations__attention-resolved-item.is-cleanup { border-top-color: rgb(36 119 189 / 16%); color: #2b70a9; } .ipos-table-operations__attention-resolved-item.is-cleanup::before { background: #3b83bd; } .ipos-table-operations__attention-resolved-item.is-refund { border-top-color: rgb(111 72 164 / 16%); color: #6d4a9d; } .ipos-table-operations__attention-resolved-item.is-refund::before { background: #8054b9; } @keyframes ipos-attention-arrive { 0%, 100% { filter: none; } 45% { filter: brightness(1.04); } } @keyframes ipos-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .ipos-table-operations__card.has-unseen, .ipos-table-operations__toast { animation: none; } } @media (max-width: 640px) { .ipos-table-operations__toast-stack { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); } .ipos-table-operations__attention-drawer { top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; max-height: min(65dvh, 520px); } } /* IPOS-127 final cascade position: the v5 work-rail dimensions precede this. */ @media (min-width: 701px) { .ipos-table-operations__attention-icon { width: 40px; height: 40px; } .ipos-table-operations__attention-icon svg { width: 33px; height: 33px; stroke-width: 1.9; } } /* IPOS-150: keep service rounds tactile and tabs readable. Operations uses one * complete list-first table surface; published coordinates remain persisted * but are not rendered as a second operator-facing table interface. */ .ipos-table-operations__round-detail { border-radius: 15px; transition: background 160ms ease, border-color 160ms ease; } .ipos-table-operations__round-summary { transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, color 150ms ease; } .ipos-table-operations__round-summary:hover, .ipos-table-operations__round-summary:focus-visible { border-color: #0c6b45; background: rgb(247 253 249 / 94%); box-shadow: 0 4px 10px rgb(21 93 63 / 8%); color: #173127; } .ipos-table-operations__round-summary:focus-visible { outline: 3px solid rgb(12 107 69 / 18%); outline-offset: 2px; } .ipos-table-operations__round-detail.is-open { background: rgb(234 248 239 / 54%); } .ipos-table-operations__round-detail-body { max-height: 0; overflow: hidden; opacity: 0; padding-block: 0; transition: max-height 220ms ease, opacity 160ms ease, padding 180ms ease; } .ipos-table-operations__round-detail.is-open .ipos-table-operations__round-detail-body { max-height: 1400px; opacity: 1; padding-block: 0 13px; } .ipos-table-operations__floor.is-list-first > .ipos-table-operations__map-head, .ipos-table-operations__floor.is-list-first > .ipos-table-operations__map { display: none; } .ipos-table-operations__floor.is-list-first > .ipos-table-operations__fallback { display: block !important; min-width: 0; max-width: 100%; overflow: visible; padding: 0; border-top: 0; } .ipos-table-operations__floor.is-list-first .ipos-table-operations__fallback-list { display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); max-width: 100%; min-width: 0; overflow: visible; gap: 8px; margin-top: 0; padding: 0; } .ipos-table-operations__floor.is-list-first .ipos-table-operations__fallback-list .ipos-table-operations__card { display: grid; width: auto; min-width: 0; min-height: 136px; padding: 10px 8px; } .ipos-table-operations__floor.is-list-first .ipos-table-operations__fallback-list .ipos-table-operations__card.is-mapped { display: grid !important; } .ipos-table-operations__layout-status { display: none; } @media (max-width: 700px) { .ipos-table-operations__toolbar { overflow: visible; } /* IPOS-202: keep real area filters in one touch row. The row owns its horizontal * scroll context so four or more live areas never become a tall stack. */ .ipos-table-operations__toolbar { display: block; overflow: hidden; } .ipos-table-operations__area-tabs { display: flex; width: 100%; max-width: 100%; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 0 1px 2px; scrollbar-width: none; } .ipos-table-operations__area-tabs::-webkit-scrollbar { display: none; } .ipos-table-operations__area-tab { min-width: max-content; width: auto; flex: 0 0 auto; padding-inline: 12px !important; white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { .ipos-table-operations__round-detail, .ipos-table-operations__round-summary, .ipos-table-operations__round-detail-body { transition: none; } } /* IPOS-152: state recognition stays quiet and surface-led. The tint and border * carry the state; text and glyph colour remain secondary evidence. */ .ipos-table-operations__card { --ipos-operations-state-accent: #85938a; --ipos-operations-state-tint: rgb(249 252 250 / 82%); position: relative; overflow: hidden; border-color: rgb(113 134 119 / 24%); background: linear-gradient(145deg, rgb(255 255 255 / 78%), var(--ipos-operations-state-tint)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 88%), 0 5px 13px rgb(28 77 52 / 6%); transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; } .ipos-table-operations__card.is-empty { --ipos-operations-state-accent: #87938b; --ipos-operations-state-tint: rgb(247 251 248 / 82%); color: #526158; } .ipos-table-operations__card.is-serving { --ipos-operations-state-accent: #237645; --ipos-operations-state-tint: rgb(224 247 232 / 78%); border-color: rgb(35 118 69 / 31%); color: #237645; } .ipos-table-operations__card.is-new { --ipos-operations-state-accent: #c45c00; --ipos-operations-state-tint: rgb(255 241 223 / 88%); border-color: rgb(196 92 0 / 32%); color: #c45c00; } .ipos-table-operations__card.is-preparing { --ipos-operations-state-accent: #0a6e66; --ipos-operations-state-tint: rgb(217 245 240 / 86%); border-color: rgb(10 110 102 / 32%); color: #0a6e66; } .ipos-table-operations__card.is-ready { --ipos-operations-state-accent: #187a42; --ipos-operations-state-tint: rgb(220 246 228 / 86%); border-color: rgb(24 122 66 / 32%); color: #187a42; } .ipos-table-operations__card.is-work { --ipos-operations-state-accent: #8a6200; --ipos-operations-state-tint: rgb(255 246 216 / 88%); border-color: rgb(138 98 0 / 32%); color: #8a6200; } .ipos-table-operations__card.is-payment_requested { --ipos-operations-state-accent: #c53d2e; --ipos-operations-state-tint: rgb(255 233 229 / 88%); border-color: rgb(197 61 46 / 32%); color: #c53d2e; } .ipos-table-operations__card.is-paying { --ipos-operations-state-accent: #1f6fb0; --ipos-operations-state-tint: rgb(227 242 255 / 86%); border-color: rgb(31 111 176 / 30%); color: #1f6fb0; } .ipos-table-operations__card.is-cleanup_pending { --ipos-operations-state-accent: #6b5b95; --ipos-operations-state-tint: rgb(241 236 251 / 88%); border-color: rgb(107 91 149 / 30%); color: #6b5b95; } .ipos-table-operations__card.is-empty, .ipos-table-operations__card.is-serving, .ipos-table-operations__card.is-new, .ipos-table-operations__card.is-preparing, .ipos-table-operations__card.is-ready, .ipos-table-operations__card.is-work, .ipos-table-operations__card.is-payment_requested, .ipos-table-operations__card.is-paying, .ipos-table-operations__card.is-cleanup_pending { background: linear-gradient(145deg, rgb(255 255 255 / 78%), var(--ipos-operations-state-tint)); } .ipos-table-operations__card:hover { border-color: color-mix(in srgb, var(--ipos-operations-state-accent) 52%, white); background: linear-gradient(145deg, rgb(255 255 255 / 93%), var(--ipos-operations-state-tint)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 92%), 0 10px 20px rgb(28 77 52 / 12%); transform: translateY(-2px); } .ipos-table-operations__card:focus-visible { outline: 3px solid rgb(12 107 69 / 28%); outline-offset: 2px; } .ipos-table-operations__card.is-selected { border-color: #0c6b45; background: linear-gradient(145deg, rgb(235 255 244 / 90%), var(--ipos-operations-state-tint)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 88%), inset 0 0 0 3px rgb(12 107 69 / 17%), 0 0 0 3px rgb(12 107 69 / 28%), 0 14px 26px rgb(16 93 61 / 17%); } @media (prefers-reduced-motion: reduce) { .ipos-table-operations__card { transition: none; } .ipos-table-operations__card:hover { transform: none; } } /* IPOS-154: stable table context with one contained service-history scroll. * The outer inspector never scrolls; summary feedback never moves geometry. */ .ipos-table-operations__inspector { display: flex; height: min(720px, calc(100dvh - 36px)); max-height: min(720px, calc(100dvh - 36px)); flex-direction: column; overflow: hidden; scrollbar-width: auto; } .ipos-table-operations__inspector-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .ipos-table-operations__inspector-head > div:first-child { min-width: 0; } .ipos-table-operations__inspector-head-actions { display: flex; min-width: 0; align-items: flex-start; justify-content: flex-end; gap: 8px; } .ipos-table-operations__badges { position: static; max-width: min(52vw, 190px); justify-content: flex-end; margin: 0; } .ipos-table-operations .ipos-table-operations__inspector-close { display: none; width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px; place-items: center; padding: 0; border: 1px solid rgb(74 101 82 / 20%); border-radius: 50%; background: rgb(255 255 255 / 62%); color: #254334; box-shadow: inset 0 1px 0 rgb(255 255 255 / 88%); cursor: pointer; transition: border-color 140ms ease, background 140ms ease, color 140ms ease; } .ipos-table-operations .ipos-table-operations__inspector-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .ipos-table-operations .ipos-table-operations__inspector-close:hover { border-color: rgb(12 107 69 / 42%); background: rgb(240 250 244 / 94%); color: #0c6b45; } .ipos-table-operations .ipos-table-operations__inspector-close:focus-visible { outline: 3px solid rgb(12 107 69 / 24%); outline-offset: 2px; } .ipos-table-operations__inspector-scroll { --ipos-inspector-scroll-track: color-mix(in srgb, var(--ipos-accent, var(--ipos-action)) 10%, transparent); --ipos-inspector-scroll-thumb: color-mix(in srgb, var(--ipos-accent, var(--ipos-action)) 62%, transparent); min-height: 0; flex: 1 1 auto; margin-top: 13px; padding: 2px 5px 6px 1px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--ipos-inspector-scroll-thumb) var(--ipos-inspector-scroll-track); scrollbar-gutter: stable; scrollbar-width: thin; } .ipos-table-operations__inspector-scroll::-webkit-scrollbar { width: 6px; height: 6px; } .ipos-table-operations__inspector-scroll::-webkit-scrollbar-track { background: var(--ipos-inspector-scroll-track); } .ipos-table-operations__inspector-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--ipos-inspector-scroll-thumb); } .ipos-table-operations__inspector-scroll-cue { position: static; display: inline-flex; flex: 0 0 auto; align-self: flex-end; min-height: 32px; align-items: center; gap: 4px; margin: 5px 5px 0 0; padding: 7px 10px 7px 12px; border: 1px solid rgb(35 111 72 / 18%); border-radius: 999px; background: rgb(247 252 249 / 94%); box-shadow: 0 8px 20px rgb(28 88 59 / 12%), inset 0 1px 0 rgb(255 255 255 / 92%); color: #35604a; font-size: 10px; font-weight: 760; letter-spacing: .01em; pointer-events: none; backdrop-filter: blur(12px); } .ipos-table-operations__inspector-scroll-cue[hidden] { display: none; } .ipos-table-operations__inspector-scroll-cue svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .ipos-table-operations__actions { display: block; margin: 0; padding: 0; } .ipos-table-operations__round-history { display: grid; gap: 10px; } .ipos-table-operations__round-history > h3 { margin: 0 0 1px; color: #193126; font-size: 16px; font-weight: 730; } .ipos-table-operations__round-detail { overflow: hidden; border: 1px solid rgb(74 101 82 / 22%); border-radius: 15px; background: rgb(255 255 255 / 86%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%); transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease; } .ipos-table-operations__round-detail.is-open { border-color: rgb(49 118 77 / 28%); background: rgb(249 253 250 / 90%); } .ipos-table-operations .ipos-table-operations__round-summary { display: grid; width: 100%; min-height: 60px; grid-template-columns: 32px minmax(0, 1fr) auto 12px; align-items: center; gap: 9px; padding: 8px 11px; border: 0; border-radius: inherit; background: transparent; box-shadow: none; color: #173127; text-align: left; transition: color 150ms ease; } .ipos-table-operations .ipos-table-operations__round-summary:hover, .ipos-table-operations .ipos-table-operations__round-summary:focus-visible { color: #173127; } .ipos-table-operations .ipos-table-operations__round-detail:has(> .ipos-table-operations__round-summary:hover), .ipos-table-operations .ipos-table-operations__round-detail:has(> .ipos-table-operations__round-summary:focus-visible) { border-color: rgb(12 107 69 / 42%); background: rgb(245 252 247 / 96%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 96%), 0 3px 8px rgb(21 93 63 / 7%); } .ipos-table-operations .ipos-table-operations__round-summary:focus-visible { outline: 3px solid rgb(12 107 69 / 20%); outline-offset: 2px; } .ipos-table-operations__round-detail-body { gap: 10px; padding: 0 12px; border-top: 1px solid transparent; background: transparent; transition: max-height 220ms ease, opacity 160ms ease, padding 180ms ease, border-color 160ms ease; } .ipos-table-operations__round-detail.is-open .ipos-table-operations__round-detail-body { max-height: 1400px; padding: 12px; border-top-color: rgb(74 101 82 / 11%); } .ipos-table-operations__round-items { display: grid; gap: 0; margin: 0; } .ipos-table-operations__round-items li { min-height: 38px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgb(74 101 82 / 10%); font-size: 13px; } .ipos-table-operations__round-items li span:nth-child(2) { color: #6b7a70; } .ipos-table-operations__round-items li strong { color: #173127; font-size: 13px; } .ipos-table-operations__round-detail-note { margin: 0; padding: 9px 10px; border: 1px solid rgb(189 146 44 / 18%); border-radius: 10px; background: rgb(255 248 223 / 72%); color: #755523; } .ipos-table-operations__round-detail-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 2px; } .ipos-table-operations__round-detail-actions .is-primary { min-height: 48px; border-radius: 14px; } @media (max-width: 1180px) { .ipos-table-operations__inspector { height: auto; max-height: none; } } @media (max-width: 700px) { .ipos-table-operations__inspector { height: min(78dvh, calc(100dvh - 104px - env(safe-area-inset-bottom))); max-height: min(78dvh, calc(100dvh - 104px - env(safe-area-inset-bottom))); padding: 18px 16px; } .ipos-table-operations__inspector-head { padding-bottom: 12px; } .ipos-table-operations__badges { max-width: 164px; } .ipos-table-operations .ipos-table-operations__inspector-close { display: grid; } .ipos-table-operations__inspector-scroll { margin-top: 11px; padding-right: 0; scrollbar-width: none; } .ipos-table-operations__inspector-scroll::-webkit-scrollbar { display: none; } .ipos-table-operations .ipos-table-operations__round-summary { min-height: 60px; grid-template-columns: 30px minmax(0, 1fr) auto 11px; gap: 7px; padding-inline: 10px; } .ipos-table-operations__round-detail-body { padding-inline: 11px; } .ipos-table-operations__round-detail.is-open .ipos-table-operations__round-detail-body { padding: 11px; } } @media (prefers-reduced-motion: reduce) { .ipos-table-operations__round-detail, .ipos-table-operations__round-summary, .ipos-table-operations__round-detail-body, .ipos-table-operations__inspector-close { transition: none; } } .ipos-table-operations__round-item-name { display: grid; gap: 2px; color: #173127; font-weight: 760; } .ipos-table-operations__round-item-name small { color: #66776d; font-size: 11px; font-weight: 620; line-height: 1.35; } .ipos-table-operations__round-item-name small.ipos-table-operations__round-item-option { color: #52685b; font-weight: 740; } .ipos-table-operations__round-item-name small.is-note { color: #805b1f; } /* IPOS-189: one shared active surface travels between area tabs. The tab * buttons remain the semantic/focus targets; this layer only carries the * selected-state paint so variable-width labels can animate as one surface. */ .ipos-table-operations__area-tabs { position: relative; isolation: isolate; } .ipos-table-operations__area-tab-indicator { position: absolute; top: 0; left: 0; z-index: 0; width: var(--ipos-operations-area-tab-width, 0px); height: var(--ipos-operations-area-tab-height, 0px); border: 1px solid #06714b; border-radius: 15px; background: linear-gradient(135deg, #087f56, #0e6345); box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), 0 8px 18px rgb(11 103 67 / 18%); pointer-events: none; transform: translate3d(var(--ipos-operations-area-tab-x, 0px), var(--ipos-operations-area-tab-y, 0px), 0); transition: transform 240ms cubic-bezier(.22, .75, .2, 1), width 240ms cubic-bezier(.22, .75, .2, 1), height 240ms cubic-bezier(.22, .75, .2, 1), opacity 120ms ease; opacity: 0; } .ipos-table-operations__area-tab-indicator.is-ready { opacity: 1; } .ipos-table-operations__area-tab { position: relative; z-index: 1; } .ipos-table-operations__area-tab.is-active, .ipos-table-operations__area-tab.is-active:hover { border-color: transparent !important; background: transparent !important; box-shadow: none !important; color: #fff !important; } @media (prefers-reduced-motion: reduce) { .ipos-table-operations__area-tab-indicator { transition: none; } } /* IPOS-190: the Invoice Inspector is state-led, not a generic card stack. * Keep the bill summary readable at a glance and give an opened-but-empty * session one safe, explicit recovery surface. */ .ipos-table-operations__bill-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 12px; margin-top: 14px; padding: 15px 16px 14px; border: 1px solid rgb(45 111 74 / 18%); border-radius: 18px; background: rgb(255 255 255 / 54%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 84%); } .ipos-table-operations__bill-summary > span { grid-column: 1 / -1; color: rgb(45 77 59 / 72%); font-size: 10px; font-weight: 800; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; } .ipos-table-operations__bill-summary > strong { grid-column: 1; margin-top: 5px; color: #173b2a; font-size: clamp(27px, 3vw, 36px); font-weight: 780; letter-spacing: -.045em; line-height: 1.05; } .ipos-table-operations__bill-summary small { grid-column: 2; margin: 0 0 2px; color: rgb(45 77 59 / 70%); font-size: 11px; font-weight: 650; line-height: 1.35; text-align: right; } .ipos-table-operations__bill-summary small b { color: #1b6d45; font-size: 13px; font-variant-numeric: tabular-nums; } .ipos-table-operations__session-state { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 12px; padding: 13px; border: 1px solid rgb(91 129 104 / 22%); border-radius: 17px; background: linear-gradient(145deg, rgb(246 253 248 / 88%), rgb(224 244 231 / 66%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 88%); } .ipos-table-operations__session-state-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgb(36 129 77 / 26%); border-radius: 12px; background: rgb(255 255 255 / 66%); color: #237747; } .ipos-table-operations__session-state-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; } .ipos-table-operations__session-state-copy { display: grid; min-width: 0; gap: 2px; } .ipos-table-operations__session-state-eyebrow { color: rgb(37 116 70 / 78%); font-size: 9px; font-weight: 820; letter-spacing: .08em; line-height: 1.2; } .ipos-table-operations__session-state-copy strong { color: #183b2a; font-size: 14px; font-weight: 780; line-height: 1.25; } .ipos-table-operations__empty-session-action { grid-column: 1 / -1; width: 100%; min-height: 44px !important; margin-top: 2px; border-color: rgb(44 118 75 / 28%) !important; border-radius: 13px !important; background: rgb(255 255 255 / 64%) !important; color: #176d43 !important; font-size: 12px !important; font-weight: 760 !important; white-space: nowrap; } .ipos-table-operations__empty-session-action:hover, .ipos-table-operations__empty-session-action:focus-visible { border-color: #0c6b45 !important; background: rgb(255 255 255 / 88%) !important; color: #0c6b45 !important; } .ipos-table-operations__actions button { white-space: nowrap; } .ipos-table-operations__operation-panel.is-ready-payment { padding: 13px; border: 1px solid rgb(32 132 78 / 20%); border-radius: 17px; background: rgb(239 251 244 / 58%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 76%); } .ipos-table-operations__operation-panel.is-ready-payment small { display: block; margin-top: 8px; color: rgb(45 77 59 / 70%); font-size: 11px; line-height: 1.4; } @media (max-width: 700px) { .ipos-table-operations__bill-summary { margin-top: 11px; padding: 13px 13px 12px; border-radius: 15px; } .ipos-table-operations__bill-summary > strong { font-size: 29px; } .ipos-table-operations__session-state { margin-top: 10px; padding: 11px; border-radius: 15px; } } @media (prefers-reduced-motion: reduce) { .ipos-table-operations__empty-session-action { transition: none; } } /* IPOS-191: the selected table is a cashier surface, not a stack of web * cards. Keep one restrained bill ledge, a compact operational readout and a * service timeline whose rows are easy to scan before opening their details. */ .ipos-table-operations .ipos-table-operations__inspector-head { padding-bottom: 15px; border-bottom-color: rgb(45 86 61 / 16%); } .ipos-table-operations .ipos-table-operations__inspector-head h2 { font-size: clamp(28px, 2.2vw, 35px); font-weight: 790; letter-spacing: -.058em; } .ipos-table-operations .ipos-table-operations__inspector-head p { margin-top: 4px; font-size: 12px; letter-spacing: .005em; } .ipos-table-operations .ipos-table-operations__badges { margin-top: 2px; } .ipos-table-operations .ipos-table-operations__badge { padding: 7px 11px; border: 1px solid rgb(27 125 71 / 12%); border-radius: 999px; font-size: 11px; font-weight: 780; } .ipos-table-operations .ipos-table-operations__bill-summary { grid-template-areas: "label count" "amount count"; margin-top: 16px; padding: 15px 17px 16px; border: 1px solid rgb(44 116 75 / 19%); border-radius: 20px; background: radial-gradient(100% 130% at 100% 0%, rgb(226 248 233 / 62%), transparent 62%), rgb(255 255 255 / 57%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 88%), 0 6px 18px rgb(30 100 66 / 5%); } .ipos-table-operations .ipos-table-operations__bill-summary > span { grid-area: label; } .ipos-table-operations .ipos-table-operations__bill-summary > strong { grid-area: amount; margin-top: 3px; font-size: clamp(32px, 3.2vw, 42px); font-weight: 800; } .ipos-table-operations .ipos-table-operations__bill-summary > strong.is-empty { font-size: clamp(20px, 2.2vw, 29px); letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; } .ipos-table-operations .ipos-table-operations__bill-summary small { display: grid; grid-area: count; align-content: end; justify-items: end; margin: 0 0 2px; font-size: 10px; line-height: 1.25; white-space: nowrap; } .ipos-table-operations .ipos-table-operations__bill-summary small b { font-size: 17px; line-height: 1; } .ipos-table-operations .ipos-table-operations__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 15px; padding: 14px 0 15px; border-top: 1px solid rgb(45 86 61 / 14%); border-bottom: 1px solid rgb(45 86 61 / 14%); } .ipos-table-operations .ipos-table-operations__stats > div { min-width: 0; padding: 0 12px; background: transparent; } .ipos-table-operations .ipos-table-operations__stats > div:first-child { padding-left: 0; } .ipos-table-operations .ipos-table-operations__stats > div:nth-child(3) { display: none !important; } .ipos-table-operations .ipos-table-operations__stats > div:nth-child(4) { grid-column: 3; border-left: 1px solid rgb(45 86 61 / 12%); } .ipos-table-operations .ipos-table-operations__stats > div + div { border-left: 1px solid rgb(45 86 61 / 12%); } .ipos-table-operations .ipos-table-operations__stats > div:nth-child(4) { padding-right: 0; } .ipos-table-operations .ipos-table-operations__stats span { font-size: 9px; font-weight: 800; letter-spacing: .075em; } .ipos-table-operations .ipos-table-operations__stats strong { margin-top: 5px; font-size: 13px; font-weight: 770; } .ipos-table-operations .ipos-table-operations__inspector.is-counter-overview .ipos-table-operations__bill-summary, .ipos-table-operations .ipos-table-operations__inspector.is-counter-overview .ipos-table-operations__stats, .ipos-table-operations .ipos-table-operations__inspector.is-counter-ticket-focus .ipos-table-operations__bill-summary, .ipos-table-operations .ipos-table-operations__inspector.is-counter-ticket-focus .ipos-table-operations__stats { display: none !important; } .ipos-table-operations .ipos-table-operations__operation-panel.is-counter-queue { display: grid; min-width: 0; max-width: 100%; gap: 12px; margin-top: 0; padding-top: 4px; } .ipos-table-operations__counter-queue-summary { display: grid; min-width: 0; max-width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ipos-table-operations__counter-queue-metric { display: grid; min-width: 0; gap: 2px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--ipos-accent, var(--ipos-action)) 16%, var(--ipos-line)); border-radius: 12px; background: color-mix(in srgb, var(--ipos-surface) 88%, var(--ipos-accent, var(--ipos-action)) 12%); box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight, rgb(255 255 255 / 58%)); } .ipos-table-operations__counter-queue-metric span { min-width: 0; color: var(--ipos-lg-ink-muted, var(--ipos-muted)); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .ipos-table-operations__counter-queue-metric strong { min-width: 0; color: var(--ipos-lg-ink, var(--ipos-ink)); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; } .ipos-table-operations__counter-queue-hint { margin: 0; color: var(--ipos-lg-ink-muted, var(--ipos-muted)); font-size: 12px; line-height: 1.45; } .ipos-table-operations__counter-queue-list { display: grid; min-width: 0; max-width: 100%; gap: 10px; } .ipos-table-operations__counter-queue-empty { margin: 0; padding: 14px 12px; border: 1px dashed rgb(45 86 61 / 18%); border-radius: 12px; color: #5d7468; font-size: 13px; text-align: center; } .ipos-table-operations__counter-queue-card { display: grid; min-width: 0; max-width: 100%; gap: 8px; padding: 10px; border: 1px solid color-mix(in srgb, var(--ipos-accent, var(--ipos-action)) 18%, var(--ipos-line)); border-radius: 14px; background: color-mix(in srgb, var(--ipos-surface) 94%, var(--ipos-accent, var(--ipos-action)) 6%); box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight, rgb(255 255 255 / 62%)); } .ipos-table-operations__counter-queue-card.is-ready { border-color: color-mix(in srgb, var(--ipos-success) 34%, var(--ipos-line)); background: linear-gradient(180deg, var(--ipos-success-soft), color-mix(in srgb, var(--ipos-surface) 94%, var(--ipos-success) 6%)); } .ipos-table-operations .ipos-table-operations__counter-queue-main { display: grid; min-width: 0; max-width: 100%; gap: 6px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; white-space: normal; cursor: pointer; } .ipos-table-operations__counter-queue-head { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 8px; } .ipos-table-operations__counter-queue-head strong { min-width: 0; flex: 1 1 auto; overflow: hidden; color: var(--ipos-lg-ink, var(--ipos-ink)); font-size: 14px; font-weight: 800; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .ipos-table-operations__counter-queue-status { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; background: var(--ipos-success-soft); color: var(--ipos-success); font-size: 10px; font-weight: 800; text-transform: uppercase; } .ipos-table-operations__counter-queue-meta { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--ipos-lg-ink-muted, var(--ipos-muted)); font-size: 12px; } .ipos-table-operations__counter-queue-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ipos-table-operations__counter-queue-meta strong { flex: 0 0 auto; color: var(--ipos-lg-ink, var(--ipos-ink)); font-size: 13px; font-weight: 800; white-space: nowrap; } .ipos-table-operations__counter-queue-items { margin: 0; overflow-wrap: anywhere; color: var(--ipos-lg-ink-muted, var(--ipos-muted)); font-size: 12px; line-height: 1.4; } .ipos-table-operations__counter-queue-deliver { width: 100%; min-height: 44px; border-radius: 12px; font-size: 13px; font-weight: 800; } .ipos-table-operations__counter-queue-back { justify-self: start; margin-bottom: 2px; padding: 0; border: 0; background: transparent; color: #1d7a49; font-size: 13px; font-weight: 750; cursor: pointer; } .ipos-table-operations__counter-queue-back:hover { color: #0f5f38; text-decoration: underline; } .ipos-table-operations .ipos-table-operations__actions { gap: 10px; margin-top: 17px; } .ipos-table-operations .ipos-table-operations__round-history { gap: 0; margin-top: 4px; padding-top: 16px; border-top: 0; } .ipos-table-operations .ipos-table-operations__round-history > h3 { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: #183b2b; font-size: 19px; font-weight: 800; letter-spacing: -.035em; } .ipos-table-operations .ipos-table-operations__round-history > h3::before { width: 3px; height: 20px; border-radius: 999px; background: linear-gradient(180deg, #219358, #9bd9b2); box-shadow: 0 0 0 3px rgb(33 147 88 / 8%); content: ""; } .ipos-table-operations .ipos-table-operations__round-detail { position: relative; overflow: hidden; border: 1px solid transparent; border-bottom: 1px solid rgb(45 86 61 / 13%); border-radius: 15px; background: transparent; box-shadow: inset 0 1px 0 transparent; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .ipos-table-operations .ipos-table-operations__round-detail:last-child { border-bottom: 0; } .ipos-table-operations .ipos-table-operations__round-detail:hover { border-color: rgb(45 126 77 / 20%); background: rgb(255 255 255 / 36%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%); } .ipos-table-operations .ipos-table-operations__round-detail.is-open { border-color: rgb(45 126 77 / 28%); background: rgb(238 250 242 / 48%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 78%), 0 7px 18px rgb(30 100 66 / 6%); } .ipos-table-operations .ipos-table-operations__round-summary { min-height: 61px; grid-template-columns: 30px minmax(0, 1fr) auto 10px; gap: 9px; padding: 8px 10px; border: 0; border-radius: 14px; background: transparent; } .ipos-table-operations .ipos-table-operations__round-summary:hover, .ipos-table-operations .ipos-table-operations__round-summary:focus-visible { background: rgb(255 255 255 / 42%); outline: 2px solid rgb(24 136 72 / 46%); outline-offset: -2px; } .ipos-table-operations .ipos-table-operations__round-number { width: 28px; height: 28px; border: 1px solid rgb(32 126 73 / 17%); background: rgb(216 242 224 / 78%); color: #197243; font-size: 12px; font-weight: 820; } .ipos-table-operations .ipos-table-operations__round-summary-meta strong { color: #147040; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; } .ipos-table-operations .ipos-table-operations__round-summary-meta small { margin-top: 3px; font-size: 10px; font-weight: 650; } .ipos-table-operations .ipos-table-operations__round-summary-total { color: #183b2b; font-size: 14px; font-weight: 800; } .ipos-table-operations .ipos-table-operations__round-chevron { width: 8px; height: 8px; } .ipos-table-operations .ipos-table-operations__round-detail-body { padding: 0 12px 14px 48px; border-top: 0; } .ipos-table-operations .ipos-table-operations__round-detail.is-open .ipos-table-operations__round-detail-body { padding: 0 12px 14px 48px; } .ipos-table-operations .ipos-table-operations__round-items li { min-height: 34px; padding: 8px 0; font-size: 12px; } .ipos-table-operations .ipos-table-operations__round-detail-note { margin-top: 7px; } @media (max-width: 700px) { .ipos-table-operations .ipos-table-operations__inspector-head h2 { font-size: 28px; } .ipos-table-operations .ipos-table-operations__bill-summary { margin-top: 14px; padding: 14px 14px 15px; border-radius: 17px; } .ipos-table-operations .ipos-table-operations__bill-summary > strong { font-size: 34px; } .ipos-table-operations .ipos-table-operations__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 0; padding-block: 13px 14px; } .ipos-table-operations .ipos-table-operations__stats > div { padding-inline: 10px; } .ipos-table-operations .ipos-table-operations__stats > div:first-child { padding-left: 0; } .ipos-table-operations .ipos-table-operations__stats > div:nth-child(4) { grid-column: 1 / -1; padding-left: 0; border-left: 0; } .ipos-table-operations .ipos-table-operations__round-history { padding-top: 14px; } .ipos-table-operations .ipos-table-operations__round-history > h3 { font-size: 18px; } .ipos-table-operations .ipos-table-operations__round-summary { min-height: 58px; grid-template-columns: 28px minmax(0, 1fr) auto 9px; gap: 8px; } .ipos-table-operations .ipos-table-operations__round-detail.is-open .ipos-table-operations__round-detail-body { padding: 0 10px 12px 44px; } } @media (prefers-reduced-motion: reduce) { .ipos-table-operations .ipos-table-operations__round-detail, .ipos-table-operations .ipos-table-operations__round-summary { transition: none; } } /* IPOS-192: one steady geometry for timeline rows and a deliberate escape * path from a pending QR back to service. */ .ipos-table-operations .ipos-table-operations__operation-panel.is-ready-payment > .is-primary { margin-top: 0; } /* IPOS-193: popup actions must keep readable contrast under the global button * hover rule; neighbouring timeline rows need their own visual lane. */ .ipos-table-operations .ipos-table-operations__confirm-actions .is-primary, .ipos-table-operations .ipos-table-operations__confirm-actions .is-primary:hover, .ipos-table-operations .ipos-table-operations__confirm-actions .is-primary:focus-visible { border-color: #086b3d !important; background: #086b3d !important; color: #fff !important; } .ipos-table-operations .ipos-table-operations__round-detail + .ipos-table-operations__round-detail { margin-top: 6px; } .ipos-table-operations .ipos-table-operations__round-detail:hover, .ipos-table-operations .ipos-table-operations__round-detail.is-open { z-index: 2; } /* IPOS-194: unresolved work stays visually above completed service. The * semantic text remains present; the rail and dot make the distinction * scannable without relying on colour alone. */ .ipos-table-operations .ipos-table-operations__round-detail::before { position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; border-radius: 999px; background: #2a985d; content: ""; opacity: .56; } .ipos-table-operations .ipos-table-operations__round-detail.is-unserved::before { background: #c58321; opacity: .92; } .ipos-table-operations .ipos-table-operations__round-detail.is-unserved { background: rgb(255 248 228 / 25%); } .ipos-table-operations .ipos-table-operations__round-detail.is-served { background: rgb(247 252 248 / 24%); } .ipos-table-operations .ipos-table-operations__round-detail.is-unserved .ipos-table-operations__round-summary-meta small::before, .ipos-table-operations .ipos-table-operations__round-detail.is-served .ipos-table-operations__round-summary-meta small::before { display: inline-block; width: 6px; height: 6px; margin: 0 5px 1px 0; border-radius: 50%; background: #2a985d; content: ""; } .ipos-table-operations .ipos-table-operations__round-detail.is-unserved .ipos-table-operations__round-summary-meta small::before { background: #c58321; box-shadow: 0 0 0 3px rgb(197 131 33 / 12%); } .ipos-table-operations .ipos-table-operations__round-detail.is-unserved .ipos-table-operations__round-summary-meta small { color: #8b5d19; font-weight: 760; } .ipos-table-operations .ipos-table-operations__round-detail.is-served .ipos-table-operations__round-summary-meta small { color: #5f7468; } /* IPOS-195: the article owns the single interaction surface. Do not paint a * second inset ring on the summary button when pointer and keyboard states * overlap after a click. */ .ipos-table-operations .ipos-table-operations__round-summary:hover, .ipos-table-operations .ipos-table-operations__round-summary:focus-visible { background: transparent; outline: none; } .ipos-table-operations .ipos-table-operations__round-detail:hover { border-color: transparent; box-shadow: none; } .ipos-table-operations .ipos-table-operations__round-detail:has(> .ipos-table-operations__round-summary:focus-visible) { border-color: rgb(12 107 69 / 50%); background: rgb(245 252 247 / 96%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 96%), 0 3px 8px rgb(21 93 63 / 7%); } .ipos-table-operations .ipos-table-operations__round-detail.is-open:hover { border-color: rgb(45 126 77 / 28%); background: rgb(238 250 242 / 48%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 78%), 0 7px 18px rgb(30 100 66 / 6%); } /* IPOS-196: the status rail belongs to the whole round surface, so it must * reach the parent edges and inherit its radius instead of floating inside. */ .ipos-table-operations .ipos-table-operations__round-detail::before { top: 0; bottom: 0; border-radius: inherit; } /* IPOS-229: operations inspector IA reset. * The left work surface owns attention and area filtering; the right rail is * a persistent, scrollable inspector. This is a layout-only layer: existing * data hooks, actions and transition semantics remain unchanged. */ @media screen and (min-width: 961px) { body.ipos-app-view-operations .ipos-table-operations { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 460px); grid-template-rows: auto auto auto auto minmax(560px, 1fr); grid-template-areas: "header inspector" "attention inspector" "toolbar inspector" "message inspector" "floor inspector"; column-gap: 22px; row-gap: 0; width: min(100%, 1560px); max-width: 1560px; padding: 30px 28px 44px; align-items: start; } body.ipos-app-view-operations .ipos-table-operations__header, body.ipos-app-view-operations .ipos-table-operations__attention, body.ipos-app-view-operations .ipos-table-operations__toolbar, body.ipos-app-view-operations .ipos-table-operations__message, body.ipos-app-view-operations .ipos-table-operations__workspace { width: 100%; max-width: none; margin-inline: 0; } body.ipos-app-view-operations .ipos-table-operations__header { grid-area: header; grid-template-columns: minmax(0, 1fr) max-content; gap: 16px; padding: 0 4px 20px; } body.ipos-app-view-operations .ipos-table-operations__header-search { min-width: 0; } body.ipos-app-view-operations .ipos-table-operations__attention { grid-area: attention; margin-top: 14px; } body.ipos-app-view-operations .ipos-table-operations__toolbar { grid-area: toolbar; margin-top: 12px; } body.ipos-app-view-operations .ipos-table-operations__message { grid-area: message; padding: 9px 0; } body.ipos-app-view-operations .ipos-table-operations__workspace { display: contents; } body.ipos-app-view-operations .ipos-table-operations__floor { grid-area: floor; width: 100%; min-width: 0; margin-top: 0; } body.ipos-app-view-operations .ipos-table-operations__inspector { grid-area: inspector; position: sticky; top: 22px; z-index: 2; width: 100%; height: calc(100dvh - 52px); max-height: calc(100dvh - 52px); min-height: 560px; visibility: visible; opacity: 1; pointer-events: auto; transform: none; } body.ipos-app-view-operations .ipos-table-operations__inspector-backdrop { display: none !important; } body.ipos-app-view-operations .ipos-table-operations__inspector-scroll { min-height: 0; padding-right: 3px; overflow-y: auto; } } @media screen and (min-width: 961px) and (max-width: 1180px) { body.ipos-app-view-operations .ipos-table-operations { grid-template-columns: minmax(0, 1fr) minmax(360px, 390px); column-gap: 16px; padding-inline: 20px; } body.ipos-app-view-operations .ipos-table-operations__inspector { min-height: 520px; height: calc(100dvh - 40px); max-height: calc(100dvh - 40px); } /* Earlier tablet drawer rules are intentionally neutralised at this width. */ body.ipos-app-view-operations .ipos-table-operations__inspector-close { display: none; } } /* The two operational states are tabs inside the inspector, not a second * dashboard-level navigation system. Keep their hit area at least 44px. */ .ipos-table-operations__round-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 14px; padding: 4px; border: 1px solid rgb(74 101 82 / 14%); border-radius: 16px; background: rgb(235 247 238 / 58%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 74%); } .ipos-table-operations__round-tab { display: inline-flex; min-width: 0; min-height: 44px !important; align-items: center; justify-content: center; gap: 8px; padding: 0 10px !important; border: 1px solid transparent !important; border-radius: 11px !important; background: transparent !important; color: #5c7164 !important; font-size: 12px !important; font-weight: 760 !important; white-space: nowrap; } .ipos-table-operations__round-tab:hover, .ipos-table-operations__round-tab:focus-visible { border-color: rgb(12 107 69 / 18%) !important; background: rgb(255 255 255 / 48%) !important; color: #0c6b45 !important; } .ipos-table-operations__round-tab.is-active { border-color: rgb(12 107 69 / 16%) !important; background: rgb(255 255 255 / 82%) !important; box-shadow: 0 4px 12px rgb(21 93 63 / 9%), inset 0 1px 0 rgb(255 255 255 / 92%); color: #0c6b45 !important; } .ipos-table-operations__round-tab b { display: inline-grid; min-width: 22px; height: 22px; padding-inline: 4px; place-items: center; border-radius: 8px; background: rgb(12 107 69 / 9%); color: currentColor; font-size: 11px; font-variant-numeric: tabular-nums; } .ipos-table-operations__round-empty { margin: 0; padding: 14px 12px; border: 1px dashed color-mix(in srgb, var(--ipos-accent) 28%, var(--ipos-line)); border-radius: 12px; background: color-mix(in srgb, var(--ipos-accent) 7%, var(--ipos-surface)); color: color-mix(in srgb, var(--ipos-muted) 86%, var(--ipos-ink)); font-size: 12px; line-height: 1.45; } @media screen and (max-width: 960px) { .ipos-table-operations__round-tabs { margin-top: 12px; } .ipos-table-operations__round-tab { min-height: 46px !important; } } /* IPOS-229 follow-up: MacBook density pass. * Preserve readable type and 44px controls while returning more horizontal * room to the floor map at common 1280–1440px laptop viewports. */ @media screen and (min-width: 961px) and (max-width: 1440px) { body.ipos-app-shell.ipos-nav-ia.ipos-app-view-operations .ipos-admin-shell { grid-template-columns: 228px minmax(0, 1fr); } body.ipos-app-shell.ipos-nav-ia.ipos-app-view-operations .ipos-admin-sidebar { padding: 18px 10px 14px; } body.ipos-app-shell.ipos-nav-ia.ipos-app-view-operations .ipos-admin-sidebar__brand { padding-inline: 6px; padding-bottom: 18px; } body.ipos-app-shell.ipos-nav-ia.ipos-app-view-operations .ipos-admin-sidebar__brand img { width: 74px; } body.ipos-app-shell.ipos-nav-ia.ipos-app-view-operations .ipos-admin-sidebar nav { gap: 3px; margin-top: 16px; } body.ipos-app-shell.ipos-nav-ia.ipos-app-view-operations .ipos-admin-navigation__children { margin-left: 24px; padding-left: 13px; } body.ipos-app-shell.ipos-nav-ia.ipos-app-view-operations .ipos-admin-navigation__child { gap: 8px; padding-inline: 7px; font-size: 12.5px; } body.ipos-app-shell.ipos-nav-ia.ipos-app-view-operations .ipos-admin-sidebar__identity small { overflow: visible; line-height: 1.25; text-overflow: clip; white-space: normal; } body.ipos-app-shell.ipos-nav-ia.ipos-app-view-operations .ipos-admin-sidebar__link { min-height: 42px; gap: 10px; padding-inline: 8px; font-size: 13.5px; } body.ipos-app-view-operations .ipos-table-operations { grid-template-columns: minmax(0, 1fr) minmax(360px, 390px); column-gap: 16px; padding-inline: 20px; } body.ipos-app-view-operations .ipos-table-operations__inspector { min-height: 520px; height: calc(100dvh - 40px); max-height: calc(100dvh - 40px); } } @media screen and (min-width: 961px) and (max-width: 1180px) { /* Keep the established icon rail at tablet widths; the density pass only * narrows the expanded sidebar on laptop-sized viewports. */ body.ipos-app-shell.ipos-nav-ia.ipos-app-view-operations .ipos-admin-shell { grid-template-columns: 76px minmax(0, 1fr); } body.ipos-app-shell.ipos-nav-ia.ipos-app-view-operations .ipos-admin-sidebar { align-items: center; grid-template-columns: minmax(0, 1fr); padding-inline: 8px; } body.ipos-app-shell.ipos-nav-ia.ipos-app-view-operations .ipos-admin-sidebar__brand { width: 100%; justify-content: center; padding-inline: 0; } body.ipos-app-shell.ipos-nav-ia.ipos-app-view-operations .ipos-admin-sidebar__brand img { width: 52px; } body.ipos-app-shell.ipos-nav-ia.ipos-app-view-operations .ipos-admin-sidebar nav { width: 100%; grid-template-columns: minmax(0, 1fr); justify-items: center; } body.ipos-app-shell.ipos-nav-ia.ipos-app-view-operations .ipos-admin-sidebar__link { width: 48px; min-height: 48px; justify-content: center; padding-inline: 0; } body.ipos-app-shell.ipos-nav-ia.ipos-app-view-operations .ipos-admin-sidebar__link > span:last-child { display: none; } body.ipos-app-shell.ipos-nav-ia.ipos-app-view-operations .ipos-admin-sidebar__link > span:first-child { width: auto; } } /* IPOS-229 follow-up: keep the inspector subordinate to the floor map and * anchor the attention popover to the bell instead of the viewport edge. */ @media screen and (min-width: 961px) and (max-width: 1440px) { body.ipos-app-view-operations .ipos-table-operations { grid-template-columns: minmax(0, 1fr) minmax(320px, 340px); column-gap: 14px; } body.ipos-app-view-operations .ipos-table-operations__inspector { min-height: 480px; height: calc(100dvh - 40px); max-height: calc(100dvh - 40px); padding: 21px 17px 18px; border-radius: 24px; } body.ipos-app-view-operations .ipos-table-operations__inspector-head h2 { font-size: clamp(26px, 2vw, 30px); } body.ipos-app-view-operations .ipos-table-operations__bill-summary > strong { font-size: clamp(32px, 2.8vw, 40px); } } @media screen and (min-width: 1441px) { body.ipos-app-view-operations .ipos-table-operations { grid-template-columns: minmax(0, 1fr) minmax(360px, 380px); column-gap: 18px; } body.ipos-app-view-operations .ipos-table-operations__inspector { min-height: 520px; padding: 23px 19px 20px; border-radius: 26px; } } @media screen and (min-width: 641px) { body.ipos-app-view-operations .ipos-table-operations__attention-drawer { top: auto; right: auto; left: auto; width: min(360px, calc(100vw - 32px)); max-height: min(500px, calc(100dvh - 144px)); } } /* IPOS-230: keep timeline summary content optically centred on the vertical * axis. The metadata stack gets its own line box so the time/status pair does * not sit higher than the amount and chevron when fonts or diacritics differ. */ .ipos-table-operations .ipos-table-operations__round-summary { min-height: 68px; padding-block: 10px; align-items: center; } .ipos-table-operations .ipos-table-operations__round-summary-meta { display: grid; min-width: 0; min-height: 38px; align-self: center; align-content: center; gap: 2px; } .ipos-table-operations .ipos-table-operations__round-summary-meta strong, .ipos-table-operations .ipos-table-operations__round-summary-meta small { line-height: 1.2; } .ipos-table-operations .ipos-table-operations__round-summary-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ipos-table-operations .ipos-table-operations__round-summary-meta small { margin-top: 0; } .ipos-table-operations .ipos-table-operations__round-number, .ipos-table-operations .ipos-table-operations__round-summary-total, .ipos-table-operations .ipos-table-operations__round-chevron { align-self: center; } @media (max-width: 700px) { .ipos-table-operations .ipos-table-operations__round-summary { min-height: 64px; padding-block: 9px; } .ipos-table-operations .ipos-table-operations__round-summary-meta { min-height: 36px; } } .ipos-table-operations .ipos-table-operations__fallback-list.is-counter-orders { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); align-items: start; gap: 8px; } .ipos-table-operations .ipos-table-operations__counter-order-card { display: grid; min-height: 246px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name state" "glyph glyph" "details details"; grid-template-rows: auto minmax(108px, 1fr) auto; align-content: stretch; justify-items: stretch; gap: 10px 8px; padding: 15px 14px 14px 18px; text-align: left; } .ipos-table-operations .ipos-table-operations__counter-order-card.is-new, .ipos-table-operations .ipos-table-operations__counter-order-card.is-work, .ipos-table-operations .ipos-table-operations__counter-order-card.is-preparing, .ipos-table-operations .ipos-table-operations__counter-order-card.is-ready, .ipos-table-operations .ipos-table-operations__counter-order-card.is-empty { background: linear-gradient(145deg, rgb(255 255 255 / 68%), var(--ipos-operations-state-tint)); } .ipos-table-operations .ipos-table-operations__counter-order-card .ipos-table-operations__card-name { grid-area: name; align-self: start; justify-items: start; } .ipos-table-operations .ipos-table-operations__counter-order-card .ipos-table-operations__card-name strong { width: 100%; color: var(--ipos-operations-state-accent); font-size: 19px; font-weight: 840; letter-spacing: -.02em; } .ipos-table-operations .ipos-table-operations__counter-order-card .ipos-table-operations__card-name small { display: block; width: 100%; overflow: visible; font-size: 12px; font-weight: 650; line-height: 1.35; text-overflow: clip; white-space: normal; } .ipos-table-operations__takeaway-glyph { display: grid; min-height: 104px; grid-area: glyph; place-items: center; color: var(--ipos-operations-state-accent); } .ipos-table-operations__takeaway-glyph svg { display: block; width: min(154px, 88%); height: 112px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; } .ipos-table-operations__counter-order-details { display: flex; grid-area: details; align-items: center; justify-content: space-between; gap: 8px; padding-top: 2px; color: var(--ipos-lg-ink, var(--ipos-ink)); font-size: 13px; font-weight: 770; } .ipos-table-operations__counter-order-details strong { color: var(--ipos-lg-ink, var(--ipos-ink)); font-size: 13px; font-variant-numeric: tabular-nums; } .ipos-table-operations .ipos-table-operations__counter-order-card .ipos-table-operations__card-state { display: inline-flex; grid-area: state; width: max-content; align-self: start; align-items: center; gap: 6px; margin: 0; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--ipos-operations-state-accent) 24%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--ipos-operations-state-accent) 10%, white); color: var(--ipos-operations-state-accent); font-size: 12px; font-weight: 760; white-space: nowrap; } .ipos-table-operations .ipos-table-operations__counter-order-card .ipos-table-operations__card-state::before { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; content: ""; } .ipos-table-operations .ipos-table-operations__counter-order-card.is-selected { border-color: #075e4d; background: rgb(255 255 255 / 94%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 94%), inset 0 0 0 2px rgb(7 94 77 / 15%), 0 0 0 2px rgb(7 94 77 / 24%), 0 15px 28px rgb(15 74 58 / 16%); } .ipos-table-operations .ipos-table-operations__counter-order-card.is-selected::after { position: absolute; inset: 5px; border: 1px solid rgb(7 94 77 / 28%); border-radius: calc(var(--ipos-radius-card, 16px) - 4px); content: ""; pointer-events: none; } .ipos-table-operations__inspector.is-counter-ticket-focus { --ipos-counter-ticket-accent: #0a6e66; } .ipos-table-operations__inspector.is-counter-ticket-focus[data-counter-ticket-visual="new"] { --ipos-counter-ticket-accent: #c5540a; } .ipos-table-operations__inspector.is-counter-ticket-focus[data-counter-ticket-visual="work"] { --ipos-counter-ticket-accent: #8a6200; } .ipos-table-operations__inspector.is-counter-ticket-focus[data-counter-ticket-visual="preparing"] { --ipos-counter-ticket-accent: #0a6e66; } .ipos-table-operations__inspector.is-counter-ticket-focus[data-counter-ticket-visual="ready"] { --ipos-counter-ticket-accent: #187a42; } .ipos-table-operations__inspector.is-counter-ticket-focus[data-counter-ticket-visual="empty"] { --ipos-counter-ticket-accent: #69766e; } .ipos-table-operations__inspector.is-counter-ticket-focus .ipos-table-operations__inspector-head h2 { color: var(--ipos-counter-ticket-accent); font-size: 25px; font-weight: 870; letter-spacing: -.03em; } .ipos-table-operations__inspector.is-counter-ticket-focus .ipos-table-operations__inspector-head > div:first-child { flex: 1 1 0; min-width: 0; } .ipos-table-operations__inspector.is-counter-ticket-focus .ipos-table-operations__inspector-head-actions { flex: 0 0 auto; } .ipos-table-operations__inspector.is-counter-ticket-focus .ipos-table-operations__inspector-head p { max-width: 100%; margin-top: 8px; overflow-wrap: anywhere; color: var(--ipos-lg-ink, var(--ipos-ink)); font-size: 13px; font-weight: 680; } .ipos-table-operations__inspector.is-counter-ticket-focus > .ipos-table-operations__round-tabs, .ipos-table-operations__inspector.is-counter-ticket-focus > .ipos-table-operations__bill-summary, .ipos-table-operations__inspector.is-counter-ticket-focus > .ipos-table-operations__session-state, .ipos-table-operations__inspector.is-counter-ticket-focus > .ipos-table-operations__round-preview, .ipos-table-operations__inspector.is-counter-ticket-focus > .ipos-table-operations__data-gap, .ipos-table-operations__inspector.is-counter-ticket-focus > .ipos-table-operations__stats { display: none !important; } .ipos-table-operations__inspector.is-counter-ticket-focus .ipos-table-operations__inspector-scroll { margin-top: 16px; padding: 0 3px 0 0; border-top: 1px solid rgb(79 103 87 / 16%); } .ipos-table-operations__counter-ticket-inspector { display: flex; min-height: 100%; flex-direction: column; padding: 18px 0 0; color: var(--ipos-lg-ink, var(--ipos-ink)); } .ipos-table-operations__counter-ticket-hero { display: grid; min-height: 178px; place-items: center; color: var(--ipos-counter-ticket-accent); } .ipos-table-operations__counter-ticket-hero svg { display: block; width: min(230px, 78%); height: 170px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.35; } .ipos-table-operations__counter-ticket-timing { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 4px 20px; border-bottom: 1px solid rgb(79 103 87 / 16%); } .ipos-table-operations__counter-ticket-timing > div { display: grid; gap: 4px; } .ipos-table-operations__counter-ticket-timing > div:last-child { justify-items: end; text-align: right; } .ipos-table-operations__counter-ticket-timing strong { font-size: 16px; font-weight: 830; font-variant-numeric: tabular-nums; } .ipos-table-operations__counter-ticket-timing small { color: var(--ipos-lg-ink-muted, var(--ipos-muted)); font-size: 11px; font-weight: 630; } .ipos-table-operations__counter-ticket-section { display: grid; gap: 12px; padding: 20px 4px; border-bottom: 1px solid rgb(79 103 87 / 16%); } .ipos-table-operations__counter-ticket-section h3 { margin: 0; font-size: 13px; font-weight: 820; } .ipos-table-operations__counter-ticket-section p { margin: 0; color: var(--ipos-lg-ink-muted, var(--ipos-muted)); font-size: 12px; line-height: 1.5; } .ipos-table-operations__counter-ticket-items { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; } .ipos-table-operations__counter-ticket-items li { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .ipos-table-operations__counter-ticket-items li > span { display: grid; min-width: 0; gap: 3px; } .ipos-table-operations__counter-ticket-items li strong { font-size: 13px; font-weight: 730; } .ipos-table-operations__counter-ticket-items li small { color: var(--ipos-lg-ink-muted, var(--ipos-muted)); font-size: 11px; line-height: 1.35; } .ipos-table-operations__counter-ticket-items li small.is-note { color: var(--ipos-warning); } .ipos-table-operations__counter-ticket-items li > b { flex: 0 0 auto; font-size: 12px; font-variant-numeric: tabular-nums; } .ipos-table-operations__counter-ticket-items li.is-empty { color: var(--ipos-muted); font-size: 12px; } .ipos-table-operations__counter-ticket-actions { position: sticky; bottom: 0; margin-top: auto; padding: 22px 4px 8px; background: linear-gradient(180deg, transparent, var(--ipos-surface) 24%); } .ipos-table-operations .ipos-table-operations__counter-ticket-actions > button { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: center; border-radius: 11px; background: #076b5b; box-shadow: 0 12px 24px rgb(7 94 77 / 18%); color: #fff; font-size: 13px; font-weight: 810; } @media (hover: hover) and (pointer: fine) { .ipos-table-operations .ipos-table-operations__counter-ticket-actions > button:hover { background: #05594d; color: #fff; transform: translateY(-1px); } } @media (max-width: 700px) { .ipos-table-operations .ipos-table-operations__fallback-list.is-counter-orders { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ipos-table-operations .ipos-table-operations__counter-order-card { min-height: 210px; grid-template-rows: auto minmax(78px, 1fr) auto; padding: 13px 11px 12px 15px; } .ipos-table-operations__takeaway-glyph { min-height: 76px; } .ipos-table-operations__takeaway-glyph svg { width: min(124px, 92%); height: 84px; } .ipos-table-operations .ipos-table-operations__counter-order-card .ipos-table-operations__card-name strong { font-size: 16px; } .ipos-table-operations .ipos-table-operations__counter-order-card .ipos-table-operations__card-state { padding-inline: 7px; font-size: 10px; } } /* IPOS-326 follow-up: keep takeaway tickets on the table list's fluid column * rhythm. The shared table fallback uses the same 118px minimum, so tickets * gain density as the floor grows instead of becoming four oversized cards. * The compact vertical header keeps code and state readable at that width. */ @media screen and (min-width: 701px) { .ipos-table-operations .ipos-table-operations__fallback-list.is-counter-orders { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); grid-auto-rows: 188px; align-items: stretch; gap: 8px; } .ipos-table-operations .ipos-table-operations__counter-order-card { height: 100%; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "state" "glyph" "details"; grid-template-rows: auto auto minmax(54px, 1fr) auto; gap: 6px; padding: 10px 8px 10px 12px; } .ipos-table-operations .ipos-table-operations__counter-order-card .ipos-table-operations__card-name strong { font-size: 17px; } .ipos-table-operations .ipos-table-operations__counter-order-card .ipos-table-operations__card-name small { display: block; overflow: hidden; font-size: 11px; line-height: 1.28; text-overflow: ellipsis; white-space: nowrap; } .ipos-table-operations__takeaway-glyph { min-height: 54px; } .ipos-table-operations__takeaway-glyph svg { width: min(92px, 74%); height: 62px; stroke-width: 2.2; } .ipos-table-operations .ipos-table-operations__counter-order-card .ipos-table-operations__card-state { gap: 5px; padding: 4px 7px; font-size: 11px; } .ipos-table-operations__counter-order-details { gap: 6px; font-size: 11px; } .ipos-table-operations__counter-order-details strong { font-size: 11px; } } /* IPOS-318: a persistent rail scrollbar and a subtle bottom shadow show that * more work is available without putting a floating label over a CTA. */ @media screen and (min-width: 701px) { .ipos-table-operations .ipos-table-operations__inspector-scroll { padding: 2px 12px 18px 1px; scrollbar-color: var(--ipos-inspector-scroll-thumb) var(--ipos-inspector-scroll-track); scrollbar-width: auto; } .ipos-table-operations .ipos-table-operations__inspector-scroll::-webkit-scrollbar { width: 9px; height: 9px; } .ipos-table-operations .ipos-table-operations__inspector-scroll::-webkit-scrollbar-track { border-radius: 999px; background: var(--ipos-inspector-scroll-track); } .ipos-table-operations .ipos-table-operations__inspector-scroll::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--ipos-inspector-scroll-thumb); background-clip: padding-box; } .ipos-table-operations .ipos-table-operations__inspector.has-scroll-cue .ipos-table-operations__inspector-scroll { box-shadow: inset 0 -18px 16px -19px rgb(21 80 56 / 74%); } .ipos-table-operations .ipos-table-operations__inspector-scroll-cue { display: none !important; } .ipos-table-operations .ipos-table-operations__inspector.is-counter-overview .ipos-table-operations__round-summary-meta strong { overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; } } /* IPOS-170: native Chrome print preview does not reliably recompute a dynamic * :has() ancestor when window.print() adds the receipt state. This explicit * body class is applied immediately before printing and sits after every * Operations visual rule, so none of the desktop glass/sticky sizing leaks * into the physical receipt. */ @media print { body.ipos-printing-payment, body.ipos-printing-payment .ipos-admin-shell, body.ipos-printing-payment .ipos-admin-content, body.ipos-printing-payment .ipos-table-operations.is-printing-payment, body.ipos-printing-payment .ipos-table-operations__workspace, body.ipos-printing-payment .ipos-table-operations__inspector, body.ipos-printing-payment .ipos-table-operations__inspector-scroll, body.ipos-printing-payment .ipos-table-operations__actions, body.ipos-printing-payment .ipos-table-operations__operation-panel.is-paying, body.ipos-printing-payment .ipos-table-operations__operation-panel.is-cleanup { min-height: 0 !important; max-height: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; position: static !important; transform: none !important; flex: none !important; } body.ipos-printing-payment .ipos-admin-shell { display: block !important; width: auto !important; max-width: none !important; background: #fff !important; } body.ipos-printing-payment .ipos-admin-content { display: flex !important; width: 100% !important; max-width: none !important; align-items: flex-start !important; justify-content: center !important; background: #fff !important; } /* Chrome's PDF/A4 fallback keeps the receipt's 80mm width but gives it a * full page height. Only the completed Counter receipt opts into vertical * centering; table receipts and the normal thermal-print flow keep their * existing top-aligned placement. */ body.ipos-printing-counter-receipt .ipos-admin-content { display: flex !important; width: 100% !important; min-height: 100vh !important; height: 100vh !important; align-items: center !important; justify-content: center !important; } body.ipos-printing-payment .ipos-table-operations.is-printing-payment { display: block !important; width: 80mm !important; max-width: 80mm !important; margin-inline: auto !important; background: #fff !important; } body.ipos-printing-payment .ipos-table-operations__workspace { display: block !important; width: 80mm !important; max-width: 80mm !important; } body.ipos-printing-payment .ipos-table-operations__inspector, body.ipos-printing-payment .ipos-table-operations__inspector-scroll, body.ipos-printing-payment .ipos-table-operations__actions, body.ipos-printing-payment .ipos-table-operations__operation-panel.is-paying, body.ipos-printing-payment .ipos-table-operations__operation-panel.is-cleanup { display: block !important; width: 100% !important; } body.ipos-printing-payment .ipos-table-operations__payment-receipt { width: 80mm !important; margin: 0 !important; padding: 4mm !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; } body.ipos-printing-payment .ipos-table-operations[data-print-paper-size="58mm"] .ipos-table-operations__payment-receipt, body.ipos-printing-payment .ipos-table-operations[data-print-paper-size="58mm"] .ipos-table-operations__workspace, body.ipos-printing-payment .ipos-table-operations[data-print-paper-size="58mm"] { width: 58mm !important; max-width: 58mm !important; } } /* IPOS-245: laptop/tablet spacing pass. Keep the attention rail readable while * giving the area filter and floor surface a deliberate vertical separation. */ @media screen and (min-width: 961px) { body.ipos-app-view-operations .ipos-table-operations { padding-inline: 18px; } body.ipos-app-view-operations .ipos-table-operations__toolbar { margin-bottom: 16px; } } @media screen and (min-width: 701px) and (max-width: 1180px) { body.ipos-app-view-operations .ipos-table-operations { padding-inline: 12px; } body.ipos-app-view-operations .ipos-table-operations__attention { padding-inline: 4px; } body.ipos-app-view-operations .ipos-table-operations__toolbar { margin-bottom: 14px; } } @media screen and (max-width: 700px) { body.ipos-app-view-operations .ipos-table-operations__toolbar { margin-bottom: 10px; } } /* IPOS-257: keep the desktop attention rail legible when the inspector narrows * the left work surface on MacBook-sized screens. The icon/label group owns * the left column; the count owns the right column. This is presentation-only * and deliberately leaves tablet/phone layouts on their existing rules. */ @media screen and (min-width: 1181px) { body.ipos-app-view-operations .ipos-table-operations__attention-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-content: initial; gap: 8px 10px; min-height: 88px; padding: 10px 12px; } body.ipos-app-view-operations .ipos-table-operations__attention-title { min-width: 0; align-items: center; justify-content: center; gap: 5px; text-align: center; white-space: normal; line-height: 1.15; flex-direction: column; } body.ipos-app-view-operations .ipos-table-operations__attention-icon { flex: 0 0 auto; } body.ipos-app-view-operations .ipos-table-operations__attention-card strong { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; order: 0; width: 38px; min-width: 38px; height: 38px; margin-left: 0; } } /* IPOS-258: MacBook Air's default 1280px canvas gives the left work surface * tighter cards than a wide desktop. Keep the semantic labels single-line * without changing the tablet or phone presentation. */ @media screen and (min-width: 1181px) and (max-width: 1320px) { body.ipos-app-view-operations .ipos-table-operations__attention-card { grid-template-columns: minmax(0, 1fr) 34px; gap: 6px 8px; padding-inline: 10px; } body.ipos-app-view-operations .ipos-table-operations__attention-title { font-size: 13px; white-space: nowrap; } body.ipos-app-view-operations .ipos-table-operations__attention-card strong { width: 34px; min-width: 34px; height: 34px; font-size: 18px; } } /* IPOS-334: all four attention filters share the same desktop geometry. */ body.ipos-app-view-operations main.ipos-table-operations { padding-top: 0; } /* IPOS-247: destructive round cancellation is explicit, reasoned and kept * visually separate from the normal forward status action. */ .ipos-table-operations__round-cancel-action { display: flex; justify-content: flex-end; padding-top: 9px; border-top: 1px solid rgb(180 54 48 / 10%); } .ipos-table-operations__round-cancel-action .is-danger { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid rgb(180 54 48 / 34%); border-radius: 14px; background: rgb(255 244 242 / 72%); color: #a1322c; font-size: 12px; font-weight: 720; cursor: pointer; transition: border-color 140ms, background 140ms, color 140ms; } .ipos-table-operations__round-cancel-action .is-danger:hover, .ipos-table-operations__round-cancel-action .is-danger:focus-visible { border-color: #b43830; background: #fff0ed; color: #8d211c; } .ipos-table-operations__round-detail-actions button:disabled, .ipos-table-operations__round-cancel-action button:disabled { cursor: wait; opacity: .58; } .ipos-table-operations__round-item-cancel { min-height: 32px; padding: 0 9px; border: 1px solid rgb(180 54 48 / 28%); border-radius: 10px; background: rgb(255 244 242 / 78%); color: #a1322c; font-size: 11px; font-weight: 720; cursor: pointer; } .ipos-table-operations__round-item-cancel:hover, .ipos-table-operations__round-item-cancel:focus-visible { border-color: #b43830; background: #fff0ed; color: #8d211c; } .ipos-table-operations__round-item-cancel:disabled { cursor: wait; opacity: .58; } .ipos-table-operations__round-cancel-dialog { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 20px; isolation: isolate; } .ipos-table-operations__round-cancel-dialog[hidden] { display: none; } button.ipos-table-operations__round-cancel-backdrop { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0 !important; border-radius: 0 !important; background: rgb(14 42 29 / 50%) !important; box-shadow: none !important; color: transparent !important; cursor: default; -webkit-backdrop-filter: blur(5px) brightness(.82) saturate(.9); backdrop-filter: blur(5px) brightness(.82) saturate(.9); } .ipos-table-operations__round-cancel-panel { position: relative; z-index: 1; display: grid; width: min(100%, 460px); gap: 16px; padding: 24px; border: 1px solid rgb(74 101 82 / 18%); border-radius: 22px; background: var(--ipos-surface, #fff); box-shadow: 0 24px 70px rgb(17 45 29 / 26%); color: var(--ipos-ink, #18301f); } .ipos-table-operations__round-cancel-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; } .ipos-table-operations__round-cancel-head h2 { margin: 5px 0 0; font-size: 22px; line-height: 1.15; } .ipos-table-operations__round-cancel-close { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid rgb(74 101 82 / 16%); border-radius: 11px; background: transparent; color: var(--ipos-muted, #63756a); cursor: pointer; } .ipos-table-operations__round-cancel-close:hover { border-color: rgb(74 101 82 / 34%); color: var(--ipos-ink, #18301f); } .ipos-table-operations__round-cancel-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; } .ipos-table-operations__round-cancel-copy { margin: 0; color: var(--ipos-muted, #63756a); font-size: 13px; line-height: 1.5; } .ipos-table-operations__round-cancel-field { display: grid; gap: 7px; color: var(--ipos-ink, #18301f); font-size: 12px; font-weight: 720; } .ipos-table-operations__round-cancel-field select:not([data-ipos-styled-select]), .ipos-table-operations__round-cancel-field textarea { width: 100%; min-height: 42px; padding: 10px 11px; border: 1px solid rgb(74 101 82 / 20%); border-radius: 11px; background: #fff; color: inherit; font: inherit; font-weight: 500; } .ipos-table-operations__round-cancel-field textarea { min-height: 80px; resize: vertical; line-height: 1.45; } .ipos-table-operations__round-cancel-field select:not([data-ipos-styled-select]):focus, .ipos-table-operations__round-cancel-field textarea:focus { outline: 2px solid rgb(23 122 77 / 25%); outline-offset: 1px; border-color: var(--ipos-action, #177a4d); } .ipos-table-operations__round-cancel-field > .ipos-styled-select { width: 100%; } .ipos-table-operations__round-cancel-field .ipos-styled-select__menu { z-index: 92; max-height: min(248px, 42dvh); border-radius: 14px; background: var(--ipos-selection-surface-solid); box-shadow: 0 18px 38px rgb(17 45 29 / 22%), inset 0 1px 0 rgb(255 255 255 / 90%); backdrop-filter: none; } .ipos-table-operations__round-cancel-field .ipos-styled-select__option { min-height: 40px; border-radius: 10px; font-size: 13px; font-weight: 650; } .ipos-table-operations__round-cancel-error { margin: -4px 0 0; padding: 9px 10px; border-radius: 10px; background: #fff0ed; color: #9a2b24; font-size: 12px; line-height: 1.4; } .ipos-table-operations__round-cancel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 2px; } .ipos-table-operations__round-cancel-actions button { min-height: 44px; border-radius: 13px; font-size: 13px; font-weight: 760; cursor: pointer; } .ipos-table-operations__round-cancel-secondary { border: 1px solid rgb(74 101 82 / 20%); background: transparent; color: var(--ipos-ink, #18301f); } .ipos-table-operations__round-cancel-confirm { border: 1px solid var(--ipos-danger, #b42318); background: var(--ipos-danger, #b42318); color: #fff; box-shadow: 0 8px 16px rgb(180 35 24 / 17%); } .ipos-table-operations .ipos-table-operations__round-cancel-confirm:hover, .ipos-table-operations .ipos-table-operations__round-cancel-confirm:focus-visible { border-color: #8f1d16 !important; background: #8f1d16 !important; color: #fff !important; } .ipos-table-operations__round-cancel-actions button:disabled { cursor: wait; opacity: .58; } @media (max-width: 520px) { .ipos-table-operations__round-cancel-dialog { padding: 12px; } .ipos-table-operations__round-cancel-panel { gap: 14px; padding: 19px; border-radius: 18px; } .ipos-table-operations__round-cancel-actions { grid-template-columns: 1fr; } } .ipos-table-operations__card.has-staff-call { box-shadow: inset 0 0 0 2px #d5a800; } .ipos-table-operations__card-staff-call { justify-self: start; padding: 4px 8px; border-radius: 999px; background: #fff3b8; color: #684f00; font-size: 10px; font-weight: 800; } .ipos-table-operations__badge.is-staff-call { border-color: #e0c250; background: #fff6ce; color: #684f00; } .ipos-table-operations__operation-panel.is-staff-call { border-color: #e3cd72; background: #fffbed; } .ipos-table-operations__operation-panel.is-staff-call > h3 { margin: 0 0 10px; color: #684f00; } .ipos-table-operations__staff-call-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px; border: 1px solid rgb(104 79 0 / 16%); border-radius: 11px; background: #fff; } .ipos-table-operations__staff-call-row + .ipos-table-operations__staff-call-row { margin-top: 8px; } .ipos-table-operations__staff-call-row > div:first-child { display: grid; gap: 3px; } .ipos-table-operations__staff-call-row small { color: var(--ipos-muted, #63756a); font-size: 11px; } .ipos-table-operations__staff-call-actions { display: flex; gap: 7px; } .ipos-table-operations__staff-call-actions button { min-height: 38px; padding: 0 11px; } .ipos-table-operations__attention-item.is-staff_call, .ipos-table-operations__toast.is-staff-call { border-color: #d8bd45; background: #fff8d8; color: #684f00; } .ipos-table-operations__attention-resolved-item.is-staff-call { color: #6b5a13; } @media (max-width: 520px) { .ipos-table-operations__staff-call-row { grid-template-columns: 1fr; } .ipos-table-operations__staff-call-actions { display: grid; grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { .ipos-table-operations__round-cancel-action .is-danger, .ipos-table-operations__round-cancel-confirm { transition: none; } } /* IPOS-248: bulk cancellation keeps the destructive action separate from * normal service controls and uses the same dark glass confirmation layer. */ .ipos-table-operations__operation-panel.is-bulk-cancel { display: grid; gap: 12px; margin-top: 14px; padding: 14px; border: 1px dashed color-mix(in srgb, var(--ipos-danger, #b42318) 44%, transparent); border-radius: 15px; background: color-mix(in srgb, var(--ipos-danger, #b42318) 5%, var(--ipos-surface, #fff)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%); } .ipos-table-operations__bulk-cancel-headline { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; } .ipos-table-operations__bulk-cancel-icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid color-mix(in srgb, var(--ipos-danger, #b42318) 18%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--ipos-danger, #b42318) 7%, var(--ipos-surface, #fff)); color: var(--ipos-danger, #b42318); } .ipos-table-operations__bulk-cancel-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } .ipos-table-operations__bulk-cancel-summary { display: grid; min-width: 0; gap: 4px; } .ipos-table-operations__bulk-cancel-copy-block { color: var(--ipos-danger, #b42318); font-size: 12px; font-weight: 850; line-height: 1.2; } .ipos-table-operations__operation-panel.is-bulk-cancel small { color: color-mix(in srgb, var(--ipos-danger, #b42318) 48%, var(--ipos-muted, #667168)); font-size: 11.5px; font-weight: 630; line-height: 1.45; } .ipos-table-operations .ipos-table-operations__bulk-cancel-trigger { display: inline-flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; gap: 9px; margin: 0; border: 1px solid color-mix(in srgb, var(--ipos-danger, #b42318) 72%, transparent) !important; border-radius: 12px !important; background: color-mix(in srgb, var(--ipos-danger, #b42318) 4%, var(--ipos-surface, #fff)) !important; box-shadow: none; color: var(--ipos-danger, #b42318) !important; font-size: 12.5px; font-weight: 800; } .ipos-table-operations .ipos-table-operations__bulk-cancel-trigger .is-button-icon { width: 22px; height: 22px; border: 0; border-radius: 0; background: transparent; } .ipos-table-operations .ipos-table-operations__bulk-cancel-trigger .is-button-icon svg { width: 21px; height: 21px; } .ipos-table-operations .ipos-table-operations__bulk-cancel-trigger:hover, .ipos-table-operations .ipos-table-operations__bulk-cancel-trigger:focus-visible { border-color: var(--ipos-danger, #b42318) !important; background: color-mix(in srgb, var(--ipos-danger, #b42318) 10%, var(--ipos-surface, #fff)) !important; box-shadow: 0 8px 18px color-mix(in srgb, var(--ipos-danger, #b42318) 13%, transparent) !important; color: color-mix(in srgb, var(--ipos-danger, #b42318) 88%, #410a06) !important; } .ipos-table-operations__bulk-cancel-dialog { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 20px; isolation: isolate; } .ipos-table-operations__bulk-cancel-dialog[hidden] { display: none; } button.ipos-table-operations__bulk-cancel-backdrop { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0 !important; border-radius: 0 !important; background: rgb(14 42 29 / 55%) !important; box-shadow: none !important; color: transparent !important; cursor: default; -webkit-backdrop-filter: blur(6px) brightness(.8) saturate(.9); backdrop-filter: blur(6px) brightness(.8) saturate(.9); } .ipos-table-operations__bulk-cancel-panel { position: relative; z-index: 1; display: grid; width: min(100%, 500px); gap: 15px; padding: 24px; border: 1px solid rgb(74 101 82 / 19%); border-radius: 22px; background: var(--ipos-surface, #fff); box-shadow: 0 24px 70px rgb(17 45 29 / 29%); color: var(--ipos-ink, #18301f); } .ipos-table-operations__bulk-cancel-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; } .ipos-table-operations__bulk-cancel-head h2 { margin: 5px 0 0; font-size: 22px; line-height: 1.15; } .ipos-table-operations__bulk-cancel-close { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid rgb(74 101 82 / 16%); border-radius: 11px; background: transparent; color: var(--ipos-muted, #63756a); cursor: pointer; } .ipos-table-operations__bulk-cancel-close:hover, .ipos-table-operations__bulk-cancel-close:focus-visible { border-color: rgb(74 101 82 / 34%); color: var(--ipos-ink, #18301f); } .ipos-table-operations__bulk-cancel-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; } .ipos-table-operations__bulk-cancel-copy { margin: 0; color: var(--ipos-muted, #63756a); font-size: 13px; line-height: 1.5; } .ipos-table-operations__bulk-cancel-preview { display: flex; flex-direction: column; gap: 6px; padding: 10px 11px; border: 1px solid rgb(180 54 48 / 13%); border-radius: 13px; background: rgb(255 247 244 / 80%); color: #7e403a; font-size: 12px; } .ipos-table-operations__bulk-cancel-preview-header { display: flex; align-items: center; justify-content: space-between; } .ipos-table-operations__bulk-cancel-preview-header strong { color: #6e2d28; font-size: 11px; } .ipos-table-operations__bulk-cancel-toggle-all { border: none; background: none; color: #b43630; font-size: 11px; font-weight: 600; cursor: pointer; padding: 2px 4px; text-decoration: underline; } .ipos-table-operations__bulk-cancel-toggle-all:hover { color: #7e2520; } .ipos-table-operations__bulk-cancel-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; max-height: 180px; overflow-y: auto; } .ipos-table-operations__bulk-cancel-check-label { display: flex; align-items: center; gap: 6px; padding: 5px 4px; cursor: pointer; font-weight: 600; font-size: 12px; } .ipos-table-operations__bulk-cancel-check-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: #b43630; cursor: pointer; } .ipos-table-operations__bulk-cancel-kitchen-label { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; color: var(--ipos-muted, #63756a); font-size: 12px; font-weight: 600; cursor: pointer; } .ipos-table-operations__bulk-cancel-kitchen-label input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; accent-color: #b43630; cursor: pointer; } .ipos-table-operations__bulk-cancel-field { display: grid; gap: 7px; color: var(--ipos-ink, #18301f); font-size: 12px; font-weight: 720; } .ipos-table-operations__bulk-cancel-field select:not([data-ipos-styled-select]), .ipos-table-operations__bulk-cancel-field textarea { width: 100%; min-height: 42px; padding: 10px 11px; border: 1px solid rgb(74 101 82 / 20%); border-radius: 11px; background: #fff; color: inherit; font: inherit; font-weight: 500; } .ipos-table-operations__bulk-cancel-field textarea { min-height: 80px; resize: vertical; line-height: 1.45; } .ipos-table-operations__bulk-cancel-field > .ipos-styled-select { width: 100%; } .ipos-table-operations__bulk-cancel-field .ipos-styled-select__menu { z-index: 92; max-height: min(248px, 42dvh); border-radius: 14px; background: var(--ipos-selection-surface-solid); box-shadow: 0 18px 38px rgb(17 45 29 / 22%), inset 0 1px 0 rgb(255 255 255 / 90%); backdrop-filter: none; } .ipos-table-operations__bulk-cancel-field .ipos-styled-select__option { min-height: 40px; border-radius: 10px; font-size: 13px; font-weight: 650; } .ipos-table-operations__bulk-cancel-error { margin: -3px 0 0; padding: 9px 10px; border-radius: 10px; background: #fff0ed; color: #9a2b24; font-size: 12px; line-height: 1.4; } .ipos-table-operations__bulk-cancel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 2px; } .ipos-table-operations__bulk-cancel-actions button { min-height: 44px; border-radius: 13px; font-size: 13px; font-weight: 760; cursor: pointer; } .ipos-table-operations__bulk-cancel-secondary { border: 1px solid rgb(74 101 82 / 20%); background: transparent; color: var(--ipos-ink, #18301f); } .ipos-table-operations .ipos-table-operations__bulk-cancel-confirm { border: 1px solid var(--ipos-danger, #b42318) !important; background: var(--ipos-danger, #b42318) !important; color: #fff !important; box-shadow: 0 8px 16px rgb(180 35 24 / 17%); } .ipos-table-operations .ipos-table-operations__bulk-cancel-confirm:hover, .ipos-table-operations .ipos-table-operations__bulk-cancel-confirm:focus-visible { border-color: #8f1d16 !important; background: #8f1d16 !important; color: #fff !important; } .ipos-table-operations__bulk-cancel-actions button:disabled { cursor: wait; opacity: .58; } @media (max-width: 520px) { .ipos-table-operations__bulk-cancel-dialog { padding: 12px; } .ipos-table-operations__bulk-cancel-panel { gap: 14px; padding: 19px; border-radius: 18px; } .ipos-table-operations__bulk-cancel-actions { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .ipos-table-operations__bulk-cancel-trigger, .ipos-table-operations__bulk-cancel-confirm { transition: none; } } .ipos-table-operations__round-items li.is-addon-line, .ipos-table-operations__receipt-line.is-addon-line { padding-left: 14px; } .ipos-table-operations__round-items li.is-addon-line .ipos-table-operations__round-item-name::before, .ipos-table-operations__receipt-line.is-addon-line span:first-child::before { margin-right: 4px; color: #8a9a8f; content: '└ '; } /* Manual post-payment adjustments keep the paid receipt immutable. The entry * surface is a compact finance ledger; the detailed workflow remains modal. */ .ipos-table-operations__operation-panel.is-refunds { display: grid; gap: 13px; padding: 15px; border: 1px solid color-mix(in srgb, var(--ipos-warning) 28%, var(--ipos-line)); border-radius: 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--ipos-warning) 6%, var(--ipos-surface)), color-mix(in srgb, var(--ipos-warning) 3%, var(--ipos-canvas))); box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight), 0 9px 24px color-mix(in srgb, var(--ipos-warning) 8%, transparent); } .ipos-table-operations__refund-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; } .ipos-table-operations__refund-title { display: grid; min-width: 0; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; } .ipos-table-operations__refund-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid color-mix(in srgb, var(--ipos-warning) 34%, var(--ipos-line)); border-radius: 12px; background: color-mix(in srgb, var(--ipos-warning) 11%, var(--ipos-surface)); color: var(--ipos-warning); } .ipos-table-operations__refund-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } .ipos-table-operations__refund-head h3, .ipos-table-operations__refund-head p { margin: 0; } .ipos-table-operations__refund-head h3 { color: var(--ipos-ink); font-size: 15px; font-weight: 820; letter-spacing: -.015em; line-height: 1.2; } .ipos-table-operations__refund-head p { margin-top: 3px; max-width: 27ch; color: color-mix(in srgb, var(--ipos-muted) 84%, var(--ipos-ink)); font-size: 10.5px; font-weight: 610; line-height: 1.35; text-wrap: pretty; } .ipos-table-operations__refund-state { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--ipos-line); border-radius: 999px; background: var(--ipos-surface-muted); color: color-mix(in srgb, var(--ipos-muted) 78%, var(--ipos-ink)); font-size: 10px; font-weight: 800; white-space: nowrap; } .ipos-table-operations__refund-state.is-refund_pending { border-color: color-mix(in srgb, var(--ipos-warning) 38%, var(--ipos-line)); background: var(--ipos-warning-soft); color: var(--ipos-warning); } .ipos-table-operations__refund-state.is-partially_refunded { border-color: color-mix(in srgb, var(--ipos-info) 38%, var(--ipos-line)); background: var(--ipos-info-soft); color: var(--ipos-info); } .ipos-table-operations__refund-state.is-refunded { border-color: color-mix(in srgb, var(--ipos-success) 38%, var(--ipos-line)); background: var(--ipos-success-soft); color: var(--ipos-success); } .ipos-table-operations__refund-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid color-mix(in srgb, var(--ipos-warning) 18%, var(--ipos-line)); border-radius: 13px; background: color-mix(in srgb, var(--ipos-warning) 3%, var(--ipos-surface)); } .ipos-table-operations__refund-totals > div { display: grid; min-width: 0; gap: 4px; padding: 10px; } .ipos-table-operations__refund-totals > div + div { border-left: 1px solid color-mix(in srgb, var(--ipos-warning) 16%, var(--ipos-line)); } .ipos-table-operations__refund-totals span { color: color-mix(in srgb, var(--ipos-muted) 84%, var(--ipos-ink)); font-size: 9.5px; font-weight: 720; line-height: 1.2; } .ipos-table-operations__refund-totals strong { min-width: 0; overflow: hidden; color: var(--ipos-ink); font-size: 12.5px; font-variant-numeric: tabular-nums; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .ipos-table-operations__refund-totals > div:last-child strong { color: var(--ipos-action-hover); } .ipos-table-operations__refund-history { display: grid; gap: 7px; } .ipos-table-operations__refund-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--ipos-line); border-radius: 12px; background: color-mix(in srgb, var(--ipos-warning) 2%, var(--ipos-surface)); } .ipos-table-operations__refund-row > div:first-child { display: grid; min-width: 0; gap: 2px; } .ipos-table-operations__refund-row span, .ipos-table-operations__refund-row small { overflow: hidden; color: var(--ipos-muted, #63756a); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .ipos-table-operations__refund-row.is-cancelled { opacity: .58; } .ipos-table-operations__refund-row-actions { display: flex; gap: 6px; } .ipos-table-operations__refund-row-actions button { min-height: 34px; padding: 7px 9px; font-size: 10px; } .ipos-table-operations__refund-request-row { display: grid; gap: 6px; } body.ipos-app-shell .ipos-table-operations .ipos-table-operations__refund-request { display: inline-flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 9px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--ipos-action) 52%, var(--ipos-line)) !important; border-radius: 14px; background: color-mix(in srgb, var(--ipos-action) 12%, var(--ipos-surface)) !important; box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight), 0 7px 18px color-mix(in srgb, var(--ipos-action) 10%, transparent); color: var(--ipos-action-hover) !important; font-size: 13px; font-weight: 800; cursor: pointer; transition: border-color 170ms ease, background 170ms ease, box-shadow 170ms ease, color 170ms ease, transform 120ms cubic-bezier(.2,.8,.2,1); } .ipos-table-operations__refund-request-icon { display: grid; width: 20px; height: 20px; place-items: center; } .ipos-table-operations__refund-request-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; } body.ipos-app-shell .ipos-table-operations .ipos-table-operations__refund-request:not(:disabled):hover { border-color: var(--ipos-action-hover) !important; background: var(--ipos-action-hover) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 32%), 0 12px 24px color-mix(in srgb, var(--ipos-action) 24%, transparent); color: var(--ipos-action-ink, #fff) !important; transform: translateY(-2px); } body.ipos-app-shell .ipos-table-operations .ipos-table-operations__refund-request:not(:disabled):active { box-shadow: inset 0 2px 4px rgb(0 0 0 / 18%); transform: translateY(0) scale(.985); } body.ipos-app-shell .ipos-table-operations .ipos-table-operations__refund-request:focus-visible { outline: 3px solid var(--ipos-focus); outline-offset: 3px; } body.ipos-app-shell .ipos-table-operations .ipos-table-operations__refund-request:disabled { cursor: not-allowed; opacity: .58; } .ipos-table-operations__refund-available { margin: 0 !important; color: color-mix(in srgb, var(--ipos-muted) 82%, var(--ipos-ink)) !important; font-size: 10.5px; font-weight: 680; line-height: 1.3; text-align: center; } @media (max-width: 360px) { .ipos-table-operations__operation-panel.is-refunds { padding: 13px; } .ipos-table-operations__refund-head { grid-template-columns: 1fr; } .ipos-table-operations__refund-state { width: fit-content; margin-left: 48px; } .ipos-table-operations__refund-totals > div { padding: 9px 7px; } .ipos-table-operations__refund-totals span { font-size: 9px; } .ipos-table-operations__refund-totals strong { font-size: 11.5px; } } @media (prefers-reduced-motion: reduce) { body.ipos-app-shell .ipos-table-operations .ipos-table-operations__refund-request { transition: none; } body.ipos-app-shell .ipos-table-operations .ipos-table-operations__refund-request:not(:disabled):hover { transform: none; } } .ipos-table-operations__refund-dialog { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 18px; isolation: isolate; } button.ipos-table-operations__refund-backdrop { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0 !important; border-radius: 0 !important; background: var(--ipos-overlay-backdrop) !important; box-shadow: none !important; backdrop-filter: blur(8px) saturate(.88); } .ipos-table-operations__refund-dialog-panel { position: relative; z-index: 1; display: grid; width: min(100%, 620px); max-height: min(92dvh, 760px); overflow: auto; gap: 18px; padding: 24px; border: 1px solid var(--ipos-line-strong); border-radius: 8px; background: color-mix(in srgb, var(--ipos-canvas) 95%, var(--ipos-action) 5%); box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight), 0 24px 70px var(--ipos-shadow-soft); color: var(--ipos-ink); scrollbar-gutter: stable; } .ipos-table-operations__refund-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .ipos-table-operations__refund-dialog-head p, .ipos-table-operations__refund-dialog-head h2, .ipos-table-operations__refund-dialog-copy { margin: 0; } .ipos-table-operations__refund-dialog-head p { color: var(--ipos-warning); font-size: 11px; font-weight: 780; letter-spacing: 0; line-height: 1.2; } .ipos-table-operations__refund-dialog-head h2 { margin-top: 5px; font-size: 27px; font-weight: 780; letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; } body.ipos-app-shell .ipos-table-operations__refund-dialog .ipos-table-operations__refund-dialog-close { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; padding: 0; border: 1px solid var(--ipos-line) !important; border-radius: 6px; background: var(--ipos-surface-muted) !important; box-shadow: none; color: var(--ipos-muted) !important; cursor: pointer; } .ipos-table-operations__refund-dialog-close svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.9; } body.ipos-app-shell .ipos-table-operations__refund-dialog .ipos-table-operations__refund-dialog-close:hover { border-color: var(--ipos-line-strong) !important; background: var(--ipos-surface) !important; color: var(--ipos-ink) !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--ipos-ink) 10%, transparent); transform: translateY(-1px); } .ipos-table-operations__refund-dialog-copy { padding: 10px 12px; border-left: 3px solid var(--ipos-warning); border-radius: 0 6px 6px 0; background: color-mix(in srgb, var(--ipos-warning) 7%, var(--ipos-surface-muted)); color: color-mix(in srgb, var(--ipos-muted) 82%, var(--ipos-ink) 18%); font-size: 13px; line-height: 1.5; text-wrap: pretty; } .ipos-table-operations__refund-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 12px; padding-top: 2px; } .ipos-table-operations__refund-field { min-width: 0; font-size: 13px; font-weight: 680; } .ipos-table-operations__refund-field.is-scope, .ipos-table-operations__refund-field.is-reference, .ipos-table-operations__refund-field.is-reason, .ipos-table-operations__refund-selection, .ipos-table-operations__refund-dialog-error, .ipos-table-operations__refund-dialog-actions { grid-column: 1 / -1; } .ipos-table-operations__refund-field input, .ipos-table-operations__refund-field textarea, .ipos-table-operations__refund-field .ipos-styled-select__trigger { font-variant-numeric: tabular-nums; font-weight: 600; } .ipos-table-operations__refund-field textarea { resize: vertical; } .ipos-table-operations__refund-dialog .ipos-styled-select__menu { z-index: 4; border-color: var(--ipos-line-strong); background: var(--ipos-selection-surface-solid); box-shadow: 0 16px 34px color-mix(in srgb, var(--ipos-ink) 18%, transparent); backdrop-filter: none; } .ipos-table-operations__refund-dialog .ipos-styled-select__option:is(:hover, :focus-visible) { border-color: color-mix(in srgb, var(--ipos-action-hover) 44%, var(--ipos-line)); background: var(--ipos-selection-active-solid); color: var(--ipos-action-hover); } .ipos-table-operations__refund-dialog .ipos-styled-select__option[aria-selected="true"] { border-color: var(--ipos-action-hover); background: var(--ipos-selection-active-solid); color: var(--ipos-action-hover); } .ipos-table-operations__refund-selection { display: grid; max-height: 190px; gap: 6px; overflow: auto; padding: 8px; border: 1px solid var(--ipos-line); border-radius: 6px; background: var(--ipos-surface-muted); } .ipos-table-operations__refund-choice { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 10px; border: 1px solid transparent; border-radius: 6px; background: var(--ipos-surface); font-size: 12px; font-weight: 680; cursor: pointer; transition: border-color 140ms ease, background 140ms ease, color 140ms ease; } .ipos-table-operations__refund-choice:hover { border-color: color-mix(in srgb, var(--ipos-action) 30%, var(--ipos-line)); background: color-mix(in srgb, var(--ipos-action) 6%, var(--ipos-surface)); } .ipos-table-operations__refund-choice input { width: 16px; height: 16px; accent-color: var(--ipos-action, #176b3a); } .ipos-table-operations__refund-dialog-error { margin: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--ipos-danger) 30%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--ipos-danger) 8%, var(--ipos-surface)); color: var(--ipos-danger); font-size: 12px; font-weight: 650; } .ipos-table-operations__refund-dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 2px; } body.ipos-app-shell .ipos-table-operations__refund-dialog .ipos-table-operations__refund-dialog-actions > button { display: inline-flex; min-width: 142px; min-height: 48px; align-items: center; justify-content: center; padding: 0 18px; border-radius: 6px; font: 760 13px/1 var(--ipos-font); white-space: nowrap; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 120ms cubic-bezier(.2,.8,.2,1), opacity 140ms ease; } body.ipos-app-shell .ipos-table-operations__refund-dialog .ipos-table-operations__refund-dismiss { border: 1px solid var(--ipos-line-strong) !important; background: color-mix(in srgb, var(--ipos-canvas) 98%, var(--ipos-action) 2%) !important; box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight); color: var(--ipos-ink) !important; } body.ipos-app-shell.ipos-app-view-operations:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations__refund-dialog .ipos-table-operations__refund-dialog-actions > button.is-secondary.ipos-table-operations__refund-dismiss[type="button"]:not(:disabled):hover { border-color: var(--ipos-action-hover) !important; background: color-mix(in srgb, var(--ipos-action) 8%, var(--ipos-surface)) !important; box-shadow: 0 7px 16px color-mix(in srgb, var(--ipos-ink) 9%, transparent); color: var(--ipos-action-hover) !important; transform: translateY(-1px); } body.ipos-app-shell .ipos-table-operations__refund-dialog .ipos-table-operations__refund-submit { position: relative; overflow: hidden; border: 1px solid var(--ipos-action) !important; background: var(--ipos-action) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), 0 9px 20px color-mix(in srgb, var(--ipos-action) 22%, transparent); color: var(--ipos-action-ink, #fff) !important; } body.ipos-app-shell .ipos-table-operations__refund-dialog .ipos-table-operations__refund-submit::after { margin-left: 8px; content: '→'; font-size: 16px; line-height: 1; transition: transform 140ms cubic-bezier(.2,.8,.2,1); } body.ipos-app-shell .ipos-table-operations__refund-dialog .ipos-table-operations__refund-submit:not(:disabled):hover { border-color: var(--ipos-action-hover) !important; background: var(--ipos-action-hover) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 34%), 0 13px 26px color-mix(in srgb, var(--ipos-action) 28%, transparent); color: var(--ipos-action-ink, #fff) !important; transform: translateY(-2px); } body.ipos-app-shell .ipos-table-operations__refund-dialog .ipos-table-operations__refund-submit:not(:disabled):hover::after { transform: translateX(3px); } body.ipos-app-shell .ipos-table-operations__refund-dialog .ipos-table-operations__refund-dialog-actions > button:not(:disabled):active { box-shadow: none !important; transform: translateY(1px) scale(.985); } body.ipos-app-shell .ipos-table-operations__refund-dialog .ipos-table-operations__refund-dialog-actions > button:disabled { cursor: not-allowed; opacity: .62; } @media (max-width: 520px) { .ipos-table-operations__refund-dialog { padding: 10px; } .ipos-table-operations__refund-dialog-panel { gap: 16px; padding: 18px 16px; border-radius: 8px; } .ipos-table-operations__refund-dialog-head h2 { font-size: 24px; } .ipos-table-operations__refund-form { grid-template-columns: 1fr; } .ipos-table-operations__refund-field, .ipos-table-operations__refund-selection, .ipos-table-operations__refund-dialog-error, .ipos-table-operations__refund-dialog-actions { grid-column: 1; } .ipos-table-operations__refund-dialog .ipos-table-operations__refund-totals { grid-template-columns: 1fr; } .ipos-table-operations__refund-dialog-actions { display: grid; grid-template-columns: 1fr; } body.ipos-app-shell .ipos-table-operations__refund-dialog .ipos-table-operations__refund-dialog-actions > button { width: 100%; min-width: 0; } .ipos-table-operations__refund-row { grid-template-columns: 1fr; } } /* IPOS-314: Counter is a secondary route context and a first-class workspace, * never a modal over Operations. Dense content remains matte; translucency is * reserved for the stable shell boundary. */ .ipos-table-operations__counter-btn { display: inline-flex; position: relative; min-height: 44px; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid color-mix(in srgb, var(--ipos-action) 42%, var(--ipos-line)); border-radius: 10px; background: color-mix(in srgb, var(--ipos-action) 8%, var(--ipos-surface)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 52%), 0 7px 18px rgb(16 72 50 / 8%); color: var(--ipos-action); font-size: 13px; font-weight: 780; cursor: pointer; transition: background-color 140ms cubic-bezier(.2,.8,.2,1), border-color 140ms cubic-bezier(.2,.8,.2,1), color 140ms cubic-bezier(.2,.8,.2,1), box-shadow 140ms cubic-bezier(.2,.8,.2,1), transform 100ms cubic-bezier(.2,.8,.2,1); } .ipos-table-operations__counter-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .ipos-table-operations__counter-btn b { display: grid; position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; place-items: center; padding-inline: 5px; border: 2px solid var(--ipos-surface); border-radius: 999px; background: var(--ipos-warning); color: #fff; font-size: 10px; font-variant-numeric: tabular-nums; } .ipos-table-operations__header-divider { width: 1px; height: 28px; margin-inline: 5px 1px; background: color-mix(in srgb, var(--ipos-line-strong) 68%, transparent); } @media (hover: hover) and (pointer: fine) { .ipos-table-operations__counter-btn:hover { border-color: var(--ipos-action); background: color-mix(in srgb, var(--ipos-action) 13%, var(--ipos-surface)); color: var(--ipos-action-hover); box-shadow: inset 0 1px 0 rgb(255 255 255 / 62%), 0 9px 22px rgb(16 72 50 / 12%); } } .ipos-table-operations__counter-btn:active { transform: scale(.985); } .ipos-table-operations.is-counter-active { min-height: calc(100dvh - 48px); height: calc(100dvh - 48px); max-height: calc(100dvh - 48px); grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; grid-template-areas: "counter" !important; align-items: stretch !important; padding: 0; overflow: hidden; } .ipos-table-operations.is-counter-active > :not(.ipos-table-operations__counter-workspace) { display: none !important; } @media (min-width: 801px) { body.ipos-app-view-operations:has(.ipos-table-operations.is-counter-active) { overflow: hidden; } } .ipos-table-operations__counter-workspace { --ipos-counter-curve: cubic-bezier(.2,.8,.2,1); display: grid; grid-area: counter; width: min(100%, 1480px); min-height: 0; height: calc(100dvh - 48px); grid-template-rows: auto minmax(0, 1fr); margin-inline: auto; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ipos-line-strong) 78%, transparent); border-radius: 20px; background: color-mix(in srgb, var(--ipos-surface) 97%, var(--ipos-canvas)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 62%), 0 24px 64px rgb(11 61 46 / 13%); opacity: 0; transform: translateY(8px); transition: opacity 240ms var(--ipos-counter-curve), transform 240ms var(--ipos-counter-curve); } .ipos-table-operations__counter-workspace.is-visible { opacity: 1; transform: none; } .ipos-table-operations.is-counter-leaving .ipos-table-operations__counter-workspace { opacity: 0; transform: translateY(5px); transition-duration: 150ms; } .ipos-table-operations__counter-workspace-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 82px; padding: 14px 18px; border-bottom: 1px solid var(--ipos-line); background: color-mix(in srgb, var(--ipos-surface) 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.08); backdrop-filter: blur(14px) saturate(1.08); } .ipos-table-operations .ipos-table-operations__counter-back { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid var(--ipos-line-strong); border-radius: 12px; background: var(--ipos-surface); color: var(--ipos-ink); transition: background-color 140ms var(--ipos-counter-curve), border-color 140ms var(--ipos-counter-curve), color 140ms var(--ipos-counter-curve), transform 100ms var(--ipos-counter-curve); } .ipos-table-operations__counter-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .ipos-table-operations__counter-back:active { transform: scale(.985); } .ipos-table-operations__counter-identity { display: flex; min-width: 0; align-items: center; gap: 12px; } .ipos-table-operations__counter-register { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border: 1px solid color-mix(in srgb, var(--ipos-action) 32%, var(--ipos-line)); border-radius: 14px; background: color-mix(in srgb, var(--ipos-action) 10%, var(--ipos-surface)); color: var(--ipos-action); } .ipos-table-operations__counter-register svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .ipos-table-operations__counter-identity h2 { margin: 2px 0 0; color: var(--ipos-ink); font-size: clamp(22px, 2vw, 28px); font-weight: 820; line-height: 1.12; letter-spacing: -.025em; } .ipos-table-operations__counter-identity > div > p:last-child { margin: 4px 0 0; color: var(--ipos-muted); font-size: 12px; line-height: 1.4; } .ipos-table-operations__counter-head-meta { display: grid; justify-items: end; gap: 3px; } .ipos-table-operations__counter-head-meta span { display: inline-flex; align-items: center; gap: 7px; color: var(--ipos-action); font-size: 12px; font-weight: 760; } .ipos-table-operations__counter-head-meta i { width: 7px; height: 7px; border-radius: 50%; background: var(--ipos-action); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ipos-action) 12%, transparent); } .ipos-table-operations__counter-head-meta small { color: var(--ipos-muted); font-size: 11px; font-variant-numeric: tabular-nums; } .ipos-table-operations__counter-layout { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(360px, 390px); background: color-mix(in srgb, var(--ipos-canvas) 64%, var(--ipos-surface)); } .ipos-table-operations__counter-menu { display: grid; position: relative; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 14px; padding: 18px; } .ipos-table-operations__counter-menu::before { position: absolute; z-index: 4; inset: 0; background: color-mix(in srgb, var(--ipos-canvas) 58%, transparent); content: ""; opacity: 0; pointer-events: none; transition: opacity 220ms var(--ipos-counter-curve); } .ipos-table-operations__counter-workspace.is-success .ipos-table-operations__counter-menu::before { opacity: 0; } .ipos-table-operations__counter-menu::after { position: absolute; right: 26px; bottom: 24px; z-index: 2; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--ipos-action) 24%, var(--ipos-line)); border-radius: 999px; background: color-mix(in srgb, var(--ipos-canvas) 92%, white); box-shadow: 0 7px 18px rgb(16 47 35 / 14%); color: var(--ipos-action); content: "Cuộn để xem thêm ↓"; font-size: 10px; font-weight: 780; letter-spacing: .01em; opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity 150ms var(--ipos-counter-curve), transform 150ms var(--ipos-counter-curve); } .ipos-table-operations__counter-menu.has-catalog-overflow::after { opacity: 1; transform: translateY(0); } .ipos-table-operations__counter-catalog-head { display: flex; position: relative; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; } .ipos-table-operations__counter-catalog-head > [data-ipos-counter-product-count] { flex: 0 0 auto; color: var(--ipos-muted); font-size: 12px; font-weight: 720; font-variant-numeric: tabular-nums; } .ipos-table-operations__counter-category-cue { display: none; } .ipos-table-operations__counter-categories { display: flex; position: relative; min-width: 0; gap: 7px; isolation: isolate; overflow-x: auto; padding: 1px; scrollbar-width: none; } .ipos-table-operations__counter-categories::-webkit-scrollbar { display: none; } .ipos-table-operations__counter-tab-indicator { position: absolute; top: 0; left: 0; z-index: 0; width: var(--ipos-counter-tab-width, 0px); height: var(--ipos-counter-tab-height, 0px); border: 1px solid var(--ipos-accent-border, color-mix(in srgb, var(--ipos-action) 50%, var(--ipos-line))); border-radius: 10px; background: linear-gradient(135deg, var(--ipos-accent-surface-strong, color-mix(in srgb, var(--ipos-action) 14%, var(--ipos-surface))), var(--ipos-accent-surface, color-mix(in srgb, var(--ipos-action) 7%, var(--ipos-surface)))); box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight), 0 6px 14px var(--ipos-accent-shadow, color-mix(in srgb, var(--ipos-action) 10%, transparent)); pointer-events: none; transform: translate3d(var(--ipos-counter-tab-x, 0px), var(--ipos-counter-tab-y, 0px), 0); transition: transform 240ms cubic-bezier(.22, .75, .2, 1), width 240ms cubic-bezier(.22, .75, .2, 1), height 240ms cubic-bezier(.22, .75, .2, 1), opacity 120ms ease; will-change: transform, width, height; opacity: 0; } .ipos-table-operations__counter-tab-indicator.is-ready { opacity: 1; } .ipos-table-operations .ipos-table-operations__counter-category { position: relative; z-index: 1; min-height: 44px; flex: 0 0 auto; padding: 0 14px; border: 1px solid var(--ipos-line); border-radius: 10px; background: transparent; box-shadow: none; color: var(--ipos-muted); font-size: 12px; font-weight: 750; transition: background-color 140ms var(--ipos-counter-curve), border-color 140ms var(--ipos-counter-curve), color 140ms var(--ipos-counter-curve), transform 100ms var(--ipos-counter-curve); } .ipos-table-operations .ipos-table-operations__counter-category.is-active { border-color: transparent; background: transparent; box-shadow: none; color: var(--ipos-accent-hover) !important; } .ipos-table-operations .ipos-table-operations__counter-category:active { transform: scale(.985); } .ipos-table-operations__counter-catalog { display: grid; min-height: 0; grid-template-columns: repeat(3, minmax(220px, 1fr)); align-content: start; gap: 10px; overflow-y: auto; padding: 1px 5px 18px 1px; overscroll-behavior: contain; scrollbar-color: color-mix(in srgb, var(--ipos-action) 24%, transparent) transparent; scrollbar-width: thin; } @media screen and (min-width: 701px) { .ipos-table-operations__counter-menu::after { display: none; } .ipos-table-operations__counter-catalog { padding-right: 12px; scrollbar-color: rgb(16 101 69 / 58%) rgb(41 91 66 / 9%); scrollbar-width: auto; } .ipos-table-operations__counter-catalog::-webkit-scrollbar { width: 9px; } .ipos-table-operations__counter-catalog::-webkit-scrollbar-track { border-radius: 999px; background: rgb(41 91 66 / 9%); } .ipos-table-operations__counter-catalog::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgb(16 101 69 / 58%); background-clip: padding-box; } .ipos-table-operations__counter-menu.has-catalog-overflow .ipos-table-operations__counter-catalog { box-shadow: inset 0 -18px 16px -19px rgb(21 80 56 / 74%); } } .ipos-table-operations .ipos-table-operations__counter-product { display: grid; position: relative; min-width: 0; min-height: 104px; grid-template-columns: 92px minmax(0, 1fr) 28px; align-items: center; gap: 12px; padding: 6px 8px 6px 6px; border: 1px solid var(--ipos-line); border-radius: 12px; background: var(--ipos-surface); box-shadow: 0 3px 10px rgb(11 61 46 / 4%); color: var(--ipos-ink); text-align: left; transform: translateZ(0); transition: background-color 150ms var(--ipos-counter-curve), border-color 150ms var(--ipos-counter-curve), box-shadow 150ms var(--ipos-counter-curve), transform 100ms var(--ipos-counter-curve); } .ipos-table-operations .ipos-table-operations__counter-product.is-selected { border-color: var(--ipos-action); background: color-mix(in srgb, var(--ipos-action) 5%, var(--ipos-surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ipos-action) 16%, transparent), 0 8px 20px rgb(11 61 46 / 8%); } .ipos-table-operations__counter-media, .ipos-table-operations__counter-line-media { display: grid; position: relative; aspect-ratio: 1 / 1; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ipos-line) 84%, transparent); border-radius: 9px; background: linear-gradient(145deg, color-mix(in srgb, var(--ipos-action) 9%, var(--ipos-surface)), color-mix(in srgb, var(--ipos-canvas) 84%, var(--ipos-surface))); color: color-mix(in srgb, var(--ipos-action) 68%, var(--ipos-muted)); } .ipos-table-operations__counter-media { width: 92px; } .ipos-table-operations__counter-media img, .ipos-table-operations__counter-line-media img { width: 100%; max-width: none; height: 100% !important; aspect-ratio: 1 / 1; object-fit: cover; opacity: 0; transform: scale(1); transition: opacity 160ms var(--ipos-counter-curve), transform 150ms var(--ipos-counter-curve); } .ipos-table-operations__counter-media.is-loaded img, .ipos-table-operations__counter-line-media.is-loaded img { opacity: 1; } .ipos-table-operations__counter-media-fallback, .ipos-table-operations__counter-line-media-fallback { position: absolute; font-size: 20px; font-weight: 840; } .ipos-table-operations__counter-product-copy { display: grid; min-width: 0; align-content: center; gap: 5px; } .ipos-table-operations__counter-product-copy strong { display: -webkit-box; overflow: hidden; color: var(--ipos-ink); font-size: 14px; font-weight: 780; line-height: 1.28; overflow-wrap: anywhere; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .ipos-table-operations__counter-product-copy b { color: var(--ipos-action); font-size: 15px; font-weight: 840; font-variant-numeric: tabular-nums; white-space: nowrap; } .ipos-table-operations__counter-product-copy small { color: var(--ipos-muted); font-size: 10px; font-weight: 700; } .ipos-table-operations__counter-product-add { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--ipos-action) 9%, var(--ipos-surface)); color: var(--ipos-action); font-size: 18px; font-weight: 650; } .ipos-table-operations .ipos-table-operations__counter-product:active { transform: scale(.985); } @media (hover: hover) and (pointer: fine) { .ipos-table-operations .ipos-table-operations__counter-product:hover { border-color: color-mix(in srgb, var(--ipos-action) 62%, var(--ipos-line)); background: color-mix(in srgb, var(--ipos-action) 4%, var(--ipos-surface)); box-shadow: 0 10px 24px rgb(11 61 46 / 10%); color: var(--ipos-ink); transform: translateY(-1px); } .ipos-table-operations__counter-product:hover .ipos-table-operations__counter-media img { transform: scale(1.025); } .ipos-table-operations .ipos-table-operations__counter-category:not(.is-active):hover { border-color: color-mix(in srgb, var(--ipos-accent) 55%, var(--ipos-line)); background: color-mix(in srgb, var(--ipos-accent) 6%, var(--ipos-surface)); color: var(--ipos-accent-hover) !important; } .ipos-table-operations .ipos-table-operations__counter-back:hover { border-color: var(--ipos-action); background: color-mix(in srgb, var(--ipos-action) 7%, var(--ipos-surface)); color: var(--ipos-action); } } .ipos-table-operations__counter-product.is-skeleton { pointer-events: none; opacity: .68; } .ipos-table-operations__counter-product.is-skeleton .ipos-table-operations__counter-media { width: 92px; border-color: transparent; background: color-mix(in srgb, var(--ipos-line) 38%, var(--ipos-surface)); } .ipos-table-operations__counter-product.is-skeleton .ipos-table-operations__counter-product-copy { width: 72%; height: 38px; border-radius: 8px; background: color-mix(in srgb, var(--ipos-line) 30%, var(--ipos-surface)); } .ipos-table-operations__counter-catalog-state { display: grid; grid-column: 1 / -1; min-height: 240px; place-content: center; justify-items: center; gap: 7px; padding: 24px; border: 1px dashed var(--ipos-line-strong); border-radius: 16px; color: var(--ipos-muted); text-align: center; } .ipos-table-operations__counter-catalog-state strong { color: var(--ipos-ink); font-size: 16px; } .ipos-table-operations__counter-catalog-state p { max-width: 340px; margin: 0; font-size: 12px; line-height: 1.5; } .ipos-table-operations__counter-catalog-state button { min-height: 44px; margin-top: 6px; border-radius: 10px; } .ipos-table-operations__counter-catalog-state.is-error { border-color: color-mix(in srgb, var(--ipos-danger) 36%, var(--ipos-line)); background: color-mix(in srgb, var(--ipos-danger) 5%, var(--ipos-surface)); } .ipos-table-operations__counter-rail { display: grid; position: relative; min-width: 0; min-height: 0; grid-template-rows: minmax(0, 1fr); margin: 14px 14px 14px 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ipos-line-strong) 78%, transparent); border-radius: 16px; background: var(--ipos-surface); box-shadow: 0 14px 34px rgb(11 61 46 / 10%); } .ipos-table-operations__counter-rail.is-rail-changing > section { animation: ipos-counter-rail-in 190ms var(--ipos-counter-curve) both; } @keyframes ipos-counter-rail-in { from { opacity: .45; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } .ipos-table-operations__counter-cart { display: block; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0; border: 0; border-radius: 0; background: var(--ipos-surface); scrollbar-gutter: stable; scrollbar-width: thin; } .ipos-table-operations__counter-cart > header { display: flex; position: sticky; z-index: 2; top: 0; min-height: 68px; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--ipos-line); background: var(--ipos-surface); } .ipos-table-operations__counter-cart h3 { margin: 2px 0 0; font-size: 18px; font-weight: 820; letter-spacing: -.015em; } .ipos-table-operations .ipos-table-operations__counter-clear { display: grid; width: 44px; min-width: 44px; min-height: 44px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--ipos-danger); box-shadow: none; } .ipos-table-operations__counter-clear svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } @media (hover: hover) and (pointer: fine) { .ipos-table-operations .ipos-table-operations__counter-clear:hover { border-color: color-mix(in srgb, var(--ipos-danger) 24%, transparent); background: color-mix(in srgb, var(--ipos-danger) 8%, transparent); color: var(--ipos-danger); } } .ipos-table-operations__counter-lines { display: grid; align-content: start; gap: 0; overflow: visible; padding: 4px 14px; } .ipos-table-operations__counter-cart-empty { display: grid; min-height: 180px; place-content: center; justify-items: center; gap: 6px; padding: 22px; color: var(--ipos-muted); text-align: center; } .ipos-table-operations__counter-cart-empty > span { display: grid; width: 44px; height: 44px; place-items: center; margin-bottom: 4px; border: 1px solid var(--ipos-line); border-radius: 13px; background: color-mix(in srgb, var(--ipos-action) 6%, var(--ipos-surface)); color: var(--ipos-action); font-size: 22px; } .ipos-table-operations__counter-cart-empty strong { color: var(--ipos-ink); font-size: 14px; } .ipos-table-operations__counter-cart-empty p { max-width: 220px; margin: 0; font-size: 11px; line-height: 1.45; } .ipos-table-operations__counter-line { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "media content actions"; align-items: stretch; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--ipos-line); transition: opacity 180ms var(--ipos-counter-curve), transform 180ms var(--ipos-counter-curve), background-color 160ms var(--ipos-counter-curve); } .ipos-table-operations__counter-line.is-entering { animation: ipos-counter-line-in 190ms var(--ipos-counter-curve) both; } @keyframes ipos-counter-line-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .ipos-table-operations__counter-line-media { grid-area: media; width: 52px; align-self: center; } .ipos-table-operations__counter-line-media-fallback { font-size: 13px; } .ipos-table-operations__counter-line-content { display: grid; min-width: 0; align-content: center; grid-area: content; gap: 7px; padding-block: 2px; } .ipos-table-operations__counter-line-info { display: grid; min-width: 0; gap: 3px; } .ipos-table-operations__counter-line-info strong { overflow: hidden; color: var(--ipos-ink); font-size: 15px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .ipos-table-operations__counter-line-info small { overflow: hidden; color: var(--ipos-muted); font-size: 11px; font-weight: 680; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .ipos-table-operations__counter-line-info small.is-configuration { width: fit-content; padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--ipos-action) 8%, var(--ipos-surface)); color: color-mix(in srgb, var(--ipos-action) 82%, var(--ipos-ink)); font-size: 10px; font-weight: 790; letter-spacing: .025em; } .ipos-table-operations__counter-line-info small.is-note { overflow: visible; color: color-mix(in srgb, var(--ipos-warning) 82%, var(--ipos-ink)); font-size: 10px; font-weight: 720; text-overflow: clip; white-space: normal; } .ipos-table-operations__counter-line-price { color: var(--ipos-ink); font-size: 15px; font-weight: 840; font-variant-numeric: tabular-nums; letter-spacing: -.015em; } .ipos-table-operations__counter-line-actions { display: grid; grid-area: actions; align-content: space-between; justify-items: end; gap: 8px; } .ipos-table-operations__counter-line-qty { display: inline-grid; grid-template-columns: 36px 32px 36px; align-items: stretch; overflow: hidden; border: 1px solid var(--ipos-line); border-radius: 10px; background: color-mix(in srgb, var(--ipos-canvas) 74%, var(--ipos-surface)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 46%); } .ipos-table-operations .ipos-table-operations__counter-line-qty button { width: 36px; min-width: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ipos-ink); font-size: 16px; font-weight: 700; } .ipos-table-operations .ipos-table-operations__counter-line-qty button + strong { border-left: 1px solid var(--ipos-line); } .ipos-table-operations .ipos-table-operations__counter-line-qty strong + button { border-left: 1px solid var(--ipos-line); } .ipos-table-operations__counter-line-qty strong { display: grid; min-height: 36px; place-items: center; color: var(--ipos-ink); font-size: 12px; font-variant-numeric: tabular-nums; } .ipos-table-operations .ipos-table-operations__counter-line-remove { display: grid; width: 32px; min-width: 32px; min-height: 32px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: color-mix(in srgb, var(--ipos-danger) 72%, var(--ipos-muted)); } .ipos-table-operations__counter-line-remove svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } /* IPOS-333: Counter has one invoice scroll owner. Keep cart lines, voucher, * recipient, method and payment CTA in the same rail so trackpad scrolling * never switches between nested regions on a short desktop viewport. */ .ipos-table-operations__counter-checkout { display: grid; gap: 16px; overflow: visible; padding: 13px 14px 14px; border-top: 1px solid var(--ipos-line); background: color-mix(in srgb, var(--ipos-canvas) 46%, var(--ipos-surface)); } .ipos-table-operations__counter-invoice-summary { display: grid; gap: 7px; padding-bottom: 2px; } .ipos-table-operations__counter-invoice-row { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; color: var(--ipos-muted); font-size: 11px; font-weight: 720; } .ipos-table-operations__counter-invoice-row strong { display: inline-flex; align-items: baseline; gap: 3px; color: var(--ipos-ink); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .ipos-table-operations__counter-invoice-row.is-discount, .ipos-table-operations__counter-invoice-row.is-discount strong { color: var(--ipos-action); } .ipos-table-operations__counter-total { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 0 2px; border-top: 1px solid var(--ipos-line); color: var(--ipos-muted); font-size: 12px; font-weight: 760; } .ipos-table-operations__counter-total strong { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ipos-ink); font-size: 25px; font-weight: 860; font-variant-numeric: tabular-nums; letter-spacing: -.03em; } .ipos-table-operations__counter-total strong small { font-size: 12px; font-weight: 760; } .ipos-table-operations__counter-total b.is-updating { animation: ipos-counter-total-update 180ms var(--ipos-counter-curve) both; } @keyframes ipos-counter-total-update { 0% { opacity: .58; transform: translateY(2px); } 100% { opacity: 1; transform: translateY(0); } } .ipos-table-operations__counter-voucher { display: grid; border-block: 1px solid var(--ipos-line); background: color-mix(in srgb, var(--ipos-action) 2%, var(--ipos-surface)); } .ipos-table-operations .ipos-table-operations__counter-voucher-trigger { display: grid; width: 100%; min-height: 56px; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 8px; padding: 0 3px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ipos-ink); text-align: left; } .ipos-table-operations__counter-voucher-trigger > span { min-width: 0; font-size: 12px; font-weight: 800; } .ipos-table-operations__counter-voucher-trigger > strong { color: var(--ipos-action); font-size: 12px; font-weight: 760; white-space: nowrap; } .ipos-table-operations__counter-voucher-trigger svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: transform 150ms var(--ipos-counter-curve); } .ipos-table-operations__counter-voucher-trigger:active svg { transform: translateX(2px); } .ipos-table-operations__counter-voucher-trigger:disabled { opacity: .52; } .ipos-table-operations__counter-voucher-feedback { margin: -1px 0 0; padding: 8px 3px 9px; border-top: 1px solid color-mix(in srgb, var(--ipos-line) 72%, transparent); color: var(--ipos-action); font-size: 10px; font-weight: 700; line-height: 1.4; } .ipos-table-operations__counter-voucher-feedback.is-error { color: var(--ipos-danger); } .ipos-table-operations__counter-voucher.is-applied { background: color-mix(in srgb, var(--ipos-action) 6%, var(--ipos-surface)); } .ipos-table-operations__counter-checkout .ipos-field--floating { margin-top: 0; } .ipos-table-operations__counter-checkout .ipos-styled-select { width: 100%; } .ipos-table-operations__counter-checkout .ipos-styled-select__trigger { min-height: 46px; border-radius: 10px; background: var(--ipos-surface); } .ipos-table-operations__counter-checkout .ipos-styled-select__menu { background: var(--ipos-canvas); box-shadow: 0 16px 34px rgb(16 47 35 / 24%); } .ipos-table-operations__counter-checkout .ipos-styled-select.is-open-up > .ipos-styled-select__menu { top: auto !important; bottom: calc(100% + 7px) !important; } .ipos-table-operations__counter-ticket-preview { margin: -1px 0 1px; color: var(--ipos-muted); font-size: 10px; line-height: 1.4; } .ipos-table-operations__counter-error { margin: 0; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--ipos-danger) 28%, var(--ipos-line)); border-radius: 10px; background: color-mix(in srgb, var(--ipos-danger) 6%, var(--ipos-surface)); color: var(--ipos-danger); font-size: 11px; line-height: 1.45; } .ipos-table-operations .ipos-table-operations__counter-pay, .ipos-table-operations .ipos-table-operations__counter-new-order { display: inline-flex; width: 100%; min-height: 50px; align-items: center; justify-content: center; gap: 9px; padding: 0 15px; border: 1px solid var(--ipos-action); border-radius: 11px; background: var(--ipos-action); box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 10px 22px rgb(11 91 61 / 18%); color: #fff; font-size: 13px; font-weight: 810; transition: background-color 140ms var(--ipos-counter-curve), border-color 140ms var(--ipos-counter-curve), box-shadow 140ms var(--ipos-counter-curve), transform 100ms var(--ipos-counter-curve), opacity 140ms var(--ipos-counter-curve); } .ipos-table-operations__counter-pay svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; } .ipos-table-operations .ipos-table-operations__counter-pay:active, .ipos-table-operations .ipos-table-operations__counter-new-order:active { transform: scale(.985); } .ipos-table-operations .ipos-table-operations__counter-pay.is-busy { cursor: wait; } body.ipos-app-shell .ipos-table-operations button.ipos-table-operations__counter-pay.is-primary:disabled { border-color: var(--ipos-line-strong) !important; background: var(--ipos-surface-muted) !important; box-shadow: none; color: var(--ipos-muted) !important; opacity: 1 !important; } @media (hover: hover) and (pointer: fine) { .ipos-table-operations .ipos-table-operations__counter-pay:hover, .ipos-table-operations .ipos-table-operations__counter-new-order:hover { border-color: var(--ipos-action-hover); background: var(--ipos-action-hover); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 24%), 0 12px 25px rgb(11 91 61 / 23%); } .ipos-table-operations .ipos-table-operations__counter-line-remove:hover { background: color-mix(in srgb, var(--ipos-danger) 8%, transparent); color: var(--ipos-danger); } } .ipos-table-operations__counter-options { display: grid; position: relative; inset: auto; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 0; border-radius: 0; background: var(--ipos-surface); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .ipos-table-operations__counter-options > header { display: grid; min-height: 68px; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--ipos-line); background: var(--ipos-surface); } .ipos-table-operations__counter-options h3 { overflow: hidden; margin: 2px 0 0; color: var(--ipos-ink); font-size: 18px; font-weight: 820; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .ipos-table-operations .ipos-table-operations__counter-options > header > button { display: grid; width: 44px; min-width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid var(--ipos-line); border-radius: 11px; background: color-mix(in srgb, var(--ipos-canvas) 60%, var(--ipos-surface)); color: var(--ipos-ink); } .ipos-table-operations__counter-options > header > button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; } .ipos-table-operations__counter-options-scroll { display: grid; min-height: 0; align-content: start; gap: 26px; overflow-y: auto; padding: 18px 14px 22px; scroll-padding-block: 18px; } .ipos-table-operations__counter-options-scroll > div { display: grid; gap: 22px; } .ipos-table-operations__counter-options-scroll fieldset { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; } .ipos-table-operations__counter-options-scroll legend { margin-bottom: 2px; padding: 0; color: var(--ipos-ink); font-size: 12px; font-weight: 780; } .ipos-table-operations__counter-options-scroll > .ipos-field--floating { margin-top: 2px; } .ipos-table-operations__counter-choices { display: flex; flex-wrap: wrap; gap: 7px; } .ipos-table-operations__counter-choices[data-ipos-counter-choice-tabs] { position: relative; isolation: isolate; } .ipos-table-operations__counter-choices[data-ipos-counter-choice-tabs] > .ipos-table-operations__counter-tab-indicator { border-radius: 10px; } .ipos-table-operations__counter-choice { position: relative; z-index: 1; min-height: 42px; padding: 8px 11px; border-color: var(--ipos-line); border-radius: 10px; background: var(--ipos-surface); font-size: 12px; transition: background-color 140ms var(--ipos-counter-curve), border-color 140ms var(--ipos-counter-curve), color 140ms var(--ipos-counter-curve), transform 100ms var(--ipos-counter-curve); } .ipos-table-operations__counter-choice:has(input:checked) { border-color: var(--ipos-action); background: color-mix(in srgb, var(--ipos-action) 9%, var(--ipos-surface)); color: var(--ipos-action); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ipos-action) 12%, transparent); } .ipos-table-operations__counter-choices[data-ipos-counter-choice-tabs] > .ipos-table-operations__counter-choice:has(input:checked) { border-color: transparent; background: transparent; box-shadow: none; color: var(--ipos-accent, var(--ipos-action)) !important; } .ipos-table-operations__counter-choice:active { transform: scale(.985); } .ipos-table-operations__counter-combo { border-radius: 10px; background: color-mix(in srgb, var(--ipos-action) 5%, var(--ipos-surface)); } .ipos-table-operations__counter-options > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid var(--ipos-line); background: color-mix(in srgb, var(--ipos-canvas) 44%, var(--ipos-surface)); } .ipos-table-operations__counter-options-qty { display: grid; grid-template-columns: 44px 30px 44px; align-items: center; gap: 3px; } .ipos-table-operations .ipos-table-operations__counter-options-qty button { width: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 10px; } .ipos-table-operations__counter-options-qty strong { min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; } .ipos-table-operations .ipos-table-operations__counter-options-add { display: inline-flex; min-height: 48px; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 12px; max-width: 230px; margin: 0 0 0 auto; padding: 0 14px; border: 1px solid var(--ipos-action); border-radius: 11px; background: var(--ipos-action); color: #fff; box-shadow: 0 8px 20px rgb(11 91 61 / 16%); } .ipos-table-operations__counter-options-add strong { display: inline-flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; } .ipos-table-operations__counter-options-add small { font-size: 10px; } .ipos-table-operations__counter-success { display: grid; min-height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--ipos-action) 7%, transparent), transparent 46%); text-align: center; opacity: 0; transform: translateY(8px); transition: opacity 260ms var(--ipos-counter-curve), transform 260ms var(--ipos-counter-curve); } .ipos-table-operations__counter-success.is-visible { opacity: 1; transform: translateY(0); } .ipos-table-operations__counter-success-head { display: flex; min-height: 68px; align-items: center; justify-content: space-between; padding: 0 14px 0 16px; border-bottom: 1px solid var(--ipos-line); text-align: left; } .ipos-table-operations__counter-success-head > strong { color: var(--ipos-ink); font-size: 13px; font-weight: 830; letter-spacing: .055em; text-transform: uppercase; } .ipos-table-operations .ipos-table-operations__counter-success-head > button { display: grid; width: 44px; min-width: 44px; min-height: 44px; place-items: center; padding: 0; border: 0; border-radius: 11px; background: transparent; color: var(--ipos-muted); box-shadow: none; } .ipos-table-operations .ipos-table-operations__counter-success-head > button:focus-visible { outline: 3px solid color-mix(in srgb, var(--ipos-action) 28%, transparent); outline-offset: 2px; } .ipos-table-operations__counter-success-head svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; } .ipos-table-operations__counter-success-body { display: grid; min-height: 0; align-content: start; justify-items: center; gap: 7px; overflow-y: auto; padding: 14px 26px 12px; } .ipos-table-operations__counter-success-handoff { display: grid; width: min(100%, 300px); min-height: 116px; place-items: center; margin-bottom: 2px; color: #173b67; } .ipos-table-operations__counter-success-handoff svg { display: block; width: 100%; height: auto; max-height: 132px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; } .ipos-table-operations__counter-success-handoff .is-receipt circle { fill: color-mix(in srgb, var(--ipos-action) 8%, var(--ipos-surface)); stroke: var(--ipos-action); } .ipos-table-operations__counter-success-handoff .is-receipt circle + path { stroke: var(--ipos-action); stroke-width: 2.6; } .ipos-table-operations__counter-success-handoff .is-flow { stroke: #09b8ca; stroke-width: 2.7; } .ipos-table-operations__counter-success-body > .ipos-table-operations__eyebrow { margin: 0; color: var(--ipos-action); font-size: 15px; font-weight: 850; letter-spacing: .04em; } .ipos-table-operations__counter-success-body > p:not(.ipos-table-operations__eyebrow) { max-width: 300px; margin: 0 0 6px; color: #173b67; font-size: 13px; font-weight: 620; line-height: 1.5; } .ipos-table-operations__counter-success-digest { display: grid; width: 100%; margin: 0; overflow: hidden; border: 1px solid var(--ipos-line); border-radius: 11px; background: color-mix(in srgb, var(--ipos-surface) 92%, var(--ipos-canvas)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 78%); } .ipos-table-operations__counter-success-digest > div { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 14px; } .ipos-table-operations__counter-success-digest > div + div { border-top: 1px solid var(--ipos-line); } .ipos-table-operations__counter-success-digest dt, .ipos-table-operations__counter-success-digest dd { min-width: 0; margin: 0; color: #173b67; font-size: 13px; font-weight: 690; overflow-wrap: anywhere; } .ipos-table-operations__counter-success-digest dt { text-align: left; } .ipos-table-operations__counter-success-digest dd { text-align: right; font-variant-numeric: tabular-nums; } .ipos-table-operations__counter-success-digest > div:first-child dd, .ipos-table-operations__counter-success-digest > div:last-child dd { flex: 0 0 auto; white-space: nowrap; } .ipos-table-operations__counter-success-digest dd b { font-size: 15px; font-weight: 850; } .ipos-table-operations__counter-success-digest dd small { font-size: 10px; font-weight: 760; } .ipos-table-operations__counter-success-detail { display: grid; width: 100%; gap: 10px; margin-top: 2px; text-align: left; } .ipos-table-operations__counter-success-detail-state { margin: 0; padding: 11px 12px; border: 1px dashed color-mix(in srgb, var(--ipos-action) 34%, var(--ipos-line)); border-radius: 11px; background: color-mix(in srgb, var(--ipos-action) 5%, var(--ipos-surface)); color: var(--ipos-muted); font-size: 11px; line-height: 1.45; text-align: center; } .ipos-table-operations__counter-success-detail-state.is-warning { border-color: color-mix(in srgb, var(--ipos-danger) 34%, var(--ipos-line)); background: color-mix(in srgb, var(--ipos-danger) 5%, var(--ipos-surface)); color: var(--ipos-danger); } .ipos-table-operations__counter-success-detail > .ipos-table-operations__payment-receipt { width: 100%; margin-top: 0; padding: 14px; border-radius: 12px; box-shadow: 0 5px 14px rgb(25 62 39 / 7%); } .ipos-table-operations__counter-success-detail .ipos-table-operations__receipt-lines { max-height: 190px; overflow-y: auto; scrollbar-width: thin; } .ipos-table-operations__counter-success-refunds { display: grid; gap: 8px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--ipos-action) 20%, var(--ipos-line)); border-radius: 11px; background: color-mix(in srgb, var(--ipos-action) 4%, var(--ipos-surface)); } .ipos-table-operations__counter-success-refund-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ipos-table-operations__counter-success-refund-head strong { color: var(--ipos-ink); font-size: 12px; font-weight: 820; } .ipos-table-operations__counter-success-refund-head span { padding: 4px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ipos-action) 11%, var(--ipos-surface)); color: var(--ipos-action); font-size: 10px; font-weight: 760; white-space: nowrap; } .ipos-table-operations__counter-success-refund-head span.is-refund_pending { background: #fff4df; color: #95600b; } .ipos-table-operations__counter-success-refund-head span.is-partially_refunded, .ipos-table-operations__counter-success-refund-head span.is-refunded { background: #e9f6ed; color: #197a35; } .ipos-table-operations__counter-success-refund-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; } .ipos-table-operations__counter-success-refund-totals > div { display: grid; gap: 2px; min-width: 0; } .ipos-table-operations__counter-success-refund-totals span { color: var(--ipos-muted); font-size: 9px; } .ipos-table-operations__counter-success-refund-totals b { color: var(--ipos-ink); font-size: 11px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .ipos-table-operations__counter-success-refunds > small { color: var(--ipos-muted); font-size: 9px; line-height: 1.35; } .ipos-table-operations__counter-success-refund-history { display: grid; gap: 5px; padding-top: 7px; border-top: 1px solid var(--ipos-line); } .ipos-table-operations__counter-success-refund-history > div { display: grid; gap: 2px; } .ipos-table-operations__counter-success-refund-history strong { color: var(--ipos-ink); font-size: 10px; } .ipos-table-operations__counter-success-refund-history small { color: var(--ipos-muted); font-size: 9px; line-height: 1.35; } .ipos-table-operations__counter-success-actions { display: grid; gap: 6px; padding: 15px 16px 18px; border-top: 1px solid color-mix(in srgb, var(--ipos-line) 72%, transparent); background: color-mix(in srgb, var(--ipos-surface) 92%, transparent); } .ipos-table-operations .ipos-table-operations__counter-success-actions > button { width: 100%; min-height: 44px; } .ipos-table-operations .ipos-table-operations__counter-return { min-height: 44px; border: 1px solid color-mix(in srgb, #173b67 24%, var(--ipos-line)); border-radius: 11px; background: color-mix(in srgb, var(--ipos-surface) 92%, var(--ipos-canvas)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 76%); color: #173b67; font-weight: 760; } @media (hover: hover) and (pointer: fine) { .ipos-table-operations .ipos-table-operations__counter-return:hover { border-color: color-mix(in srgb, #173b67 44%, var(--ipos-line)); background: color-mix(in srgb, #173b67 6%, var(--ipos-surface)); color: #102b4d; } } .ipos-table-operations .ipos-table-operations__counter-new-order { width: 100%; min-height: 52px; } @media (hover: hover) and (pointer: fine) { .ipos-table-operations .ipos-table-operations__counter-success-head > button:hover { background: color-mix(in srgb, var(--ipos-action) 7%, transparent); color: var(--ipos-action); } } .ipos-table-operations__counter-success-body { justify-items: stretch; } .ipos-table-operations__counter-success-detail { min-width: 0; gap: 12px; margin: 0; } .ipos-table-operations__counter-paid-panel { display: grid; min-width: 0; gap: 12px; padding: 14px; border: 1px solid var(--ipos-line); border-radius: 13px; background: var(--ipos-surface); box-shadow: 0 8px 22px rgb(11 61 46 / 7%); text-align: left; } .ipos-table-operations__counter-paid-head { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 10px; } .ipos-table-operations__counter-paid-identity { display: grid; min-width: 0; gap: 3px; } .ipos-table-operations__counter-paid-identity .ipos-table-operations__eyebrow { margin: 0; color: var(--ipos-action); font-size: 10px; font-weight: 820; letter-spacing: .08em; } .ipos-table-operations__counter-paid-identity h3 { max-width: 100%; margin: 0; color: var(--ipos-ink); font-size: 23px; font-weight: 880; letter-spacing: -.035em; line-height: 1.05; overflow-wrap: anywhere; } .ipos-table-operations__counter-paid-identity > p:last-child { margin: 0; color: var(--ipos-muted); font-size: 11px; font-weight: 680; overflow-wrap: anywhere; } .ipos-table-operations__counter-paid-head > .ipos-table-operations__badge { flex: 0 0 auto; } .ipos-table-operations__counter-paid-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0; } .ipos-table-operations__counter-paid-meta > div { display: grid; min-width: 0; gap: 3px; padding: 8px 9px; border: 1px solid var(--ipos-line); border-radius: 9px; } .ipos-table-operations__counter-paid-meta dt { color: var(--ipos-muted); font-size: 9px; font-weight: 700; } .ipos-table-operations__counter-paid-meta dd { margin: 0; color: var(--ipos-ink); font-size: 11px; font-weight: 780; overflow-wrap: anywhere; } .ipos-table-operations__counter-paid-panel > .ipos-table-operations__payment-summary { margin: 0; } .ipos-table-operations__counter-paid-round { display: grid; min-width: 0; gap: 8px; padding: 11px 12px; border: 1px solid var(--ipos-line); border-radius: 11px; background: color-mix(in srgb, var(--ipos-canvas) 36%, var(--ipos-surface)); } .ipos-table-operations__counter-paid-round-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; } .ipos-table-operations__counter-paid-round-head > div { display: grid; min-width: 0; gap: 2px; } .ipos-table-operations__counter-paid-round-head strong { color: var(--ipos-ink); font-size: 12px; font-weight: 820; } .ipos-table-operations__counter-paid-round-head small { color: var(--ipos-muted); font-size: 10px; font-weight: 700; } .ipos-table-operations__counter-paid-round-head > b { flex: 0 0 auto; color: var(--ipos-ink); font-size: 12px; font-variant-numeric: tabular-nums; } .ipos-table-operations__counter-paid-items { display: grid; min-width: 0; gap: 0; margin: 0; padding: 0; list-style: none; } .ipos-table-operations__counter-paid-items > li { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ipos-line); } .ipos-table-operations__counter-paid-items > li > span { display: grid; min-width: 0; gap: 2px; } .ipos-table-operations__counter-paid-items strong { color: var(--ipos-ink); font-size: 11px; font-weight: 760; overflow-wrap: anywhere; } .ipos-table-operations__counter-paid-items small { color: var(--ipos-muted); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; } .ipos-table-operations__counter-paid-items > li > b { flex: 0 0 auto; color: var(--ipos-ink); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; } .ipos-table-operations__counter-paid-items > li.is-combo-component { padding-left: 14px; border-top-style: dashed; } .ipos-table-operations__counter-paid-items > li.is-combo-component strong::before { margin-right: 2px; color: color-mix(in srgb, var(--ipos-muted) 88%, var(--ipos-ink)); content: '└ '; } .ipos-table-operations__counter-paid-items > li.is-combo-component > em.is-included { flex: 0 0 auto; color: var(--ipos-muted); font-size: 10px; font-style: normal; font-weight: 700; white-space: nowrap; } .ipos-table-operations__counter-paid-note { margin: 0; color: var(--ipos-muted); font-size: 10px; line-height: 1.4; } .ipos-table-operations__counter-paid-round-actions { display: grid; padding-top: 3px; } .ipos-table-operations .ipos-table-operations__counter-paid-round-actions button { width: 100%; min-height: 42px; } .ipos-table-operations__counter-success-detail > .ipos-table-operations__counter-paid-panel > .ipos-table-operations__operation-panel { margin: 0; } .ipos-table-operations__counter-success-detail > .ipos-table-operations__payment-receipt { display: none; } .ipos-table-operations__counter-success-detail > .ipos-table-operations__payment-receipt .ipos-table-operations__receipt-lines { max-height: none; overflow: visible; } .ipos-table-operations__counter-success-refunds { margin: 0; } .ipos-table-operations__counter-payos { display: grid; gap: 12px; min-height: 0; overflow: auto; padding: 14px; border: 1px solid #b5d1ef; border-radius: 8px; background: #f4f9ff; color: #1f6fb0; } .ipos-table-operations__counter-payos-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .ipos-table-operations__counter-payos-head h3 { margin: 4px 0 0; color: #173b67; font-size: 20px; } .ipos-table-operations__counter-payos-head > span { padding: 6px 9px; border-radius: 999px; background: #e8f2ff; color: #1f6fb0; font-size: 11px; font-weight: 760; white-space: nowrap; } .ipos-table-operations__counter-payos-receipt { display: grid; justify-items: center; } .ipos-table-operations__counter-payos-receipt .ipos-table-operations__payment-receipt { width: min(100%, 360px); } .ipos-table-operations__counter-payos-error { margin: 0; padding: 9px 10px; border-radius: 7px; background: #fff0ee; color: #a33d32; font-size: 12px; font-weight: 650; } .ipos-table-operations__counter-payos-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ipos-table-operations__counter-payos-actions button { min-height: 44px; border: 1px solid #b5cce5; border-radius: 8px; background: #fff; color: #174e7b; font-size: 12px; font-weight: 760; cursor: pointer; } .ipos-table-operations__counter-ticket-payment-status { margin: 0; padding: 10px; border-radius: 8px; background: #e8f2ff; color: #1f6fb0; font-size: 12px; font-weight: 760; } .ipos-table-operations .ipos-table-operations__counter-order-card.is-paying { background: linear-gradient(145deg, rgb(255 255 255 / 74%), #e8f2ff); } .ipos-table-operations .ipos-table-operations__counter-mobile-cart { display: none; } .ipos-table-operations .ipos-table-operations__counter-order-card.is-counter-new-ticket { animation: ipos-counter-ticket-arrival 520ms var(--ipos-counter-curve) 1; } @keyframes ipos-counter-ticket-arrival { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ipos-action) 34%, transparent); transform: translateY(5px); } 100% { box-shadow: 0 0 0 8px transparent; transform: translateY(0); } } @media (max-width: 1599px) { .ipos-table-operations__counter-catalog { grid-template-columns: repeat(2, minmax(220px, 1fr)); } } @media (max-width: 1250px) { .ipos-table-operations__counter-catalog-head { align-items: flex-start; flex-direction: column; gap: 7px; } .ipos-table-operations__counter-categories { width: 100%; flex-wrap: wrap; overflow: visible; padding-bottom: 1px; } .ipos-table-operations__counter-category-cue { display: none !important; } } @media (max-width: 1100px) { .ipos-table-operations.is-counter-active { min-height: calc(100dvh - 28px); height: calc(100dvh - 28px); max-height: calc(100dvh - 28px); padding: 0; } .ipos-table-operations__counter-workspace { height: calc(100dvh - 28px); } .ipos-table-operations__counter-layout { grid-template-columns: minmax(0, 1fr) minmax(330px, 360px); } .ipos-table-operations__counter-catalog { grid-template-columns: repeat(2, minmax(200px, 1fr)); } .ipos-table-operations__counter-product { grid-template-columns: 72px minmax(0, 1fr) 28px; } .ipos-table-operations__counter-media { width: 72px; } .ipos-table-operations__counter-product-copy strong { display: block; overflow: visible; font-size: 12.75px; letter-spacing: -.035em; overflow-wrap: normal; text-overflow: clip; -webkit-line-clamp: unset; } } @media (max-width: 900px) { .ipos-table-operations__counter-workspace { --ipos-counter-mobile-bottom: 14px; } .ipos-table-operations.is-counter-active { min-height: 100dvh; height: auto; max-height: none; padding: 10px 10px 92px; overflow: visible; } .ipos-table-operations__counter-workspace { min-height: auto; height: auto; overflow: visible; border-radius: 17px; } .ipos-table-operations__counter-workspace-head { position: sticky; z-index: 3; top: 0; grid-template-columns: 44px minmax(0, 1fr); min-height: 72px; padding: 11px 12px; } .ipos-table-operations__counter-register, .ipos-table-operations__counter-head-meta, .ipos-table-operations__counter-identity > div > p:last-child { display: none; } .ipos-table-operations__counter-identity h2 { font-size: 21px; } .ipos-table-operations__counter-layout { grid-template-columns: 1fr; } .ipos-table-operations__counter-menu { min-height: 590px; padding: 12px; } .ipos-table-operations__counter-catalog-head { align-items: flex-start; flex-direction: column; gap: 7px; } .ipos-table-operations__counter-categories { width: 100%; } .ipos-table-operations__counter-catalog { max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding-right: 1px; } .ipos-table-operations .ipos-table-operations__counter-product { min-height: 0; grid-template-columns: 1fr; align-content: start; gap: 8px; padding: 7px; } .ipos-table-operations__counter-media { width: 100%; } .ipos-table-operations__counter-product-copy { padding: 0 2px 4px; } .ipos-table-operations__counter-product-add { position: absolute; right: 12px; bottom: 12px; } .ipos-table-operations__counter-rail { position: fixed; z-index: 78; right: max(14px, calc((100vw - 560px) / 2)); bottom: calc(var(--ipos-counter-mobile-bottom) + 62px + env(safe-area-inset-bottom, 0px)); left: max(14px, calc((100vw - 560px) / 2)); min-height: min(640px, calc(100dvh - var(--ipos-counter-mobile-bottom) - 84px)); max-height: calc(100dvh - var(--ipos-counter-mobile-bottom) - 84px); margin: 0; background: var(--ipos-canvas); visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(12px); box-shadow: 0 24px 70px rgb(9 45 32 / 28%); transition: opacity 190ms var(--ipos-counter-curve), transform 190ms var(--ipos-counter-curve), visibility 0s linear 190ms; } .ipos-table-operations__counter-rail.is-mobile-open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0s; } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations button.ipos-table-operations__counter-mobile-cart { display: flex; position: fixed; z-index: 79; right: max(14px, calc((100vw - 560px) / 2)); bottom: calc(var(--ipos-counter-mobile-bottom) + env(safe-area-inset-bottom, 0px)); left: max(14px, calc((100vw - 560px) / 2)); min-height: 52px; align-items: center; justify-content: space-between; gap: 14px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--ipos-action) 48%, var(--ipos-line)) !important; border-radius: 14px; background: #0b6b48 !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 16px 36px rgb(9 45 32 / 24%); color: #fff !important; transition: background-color 140ms var(--ipos-counter-curve), border-color 140ms var(--ipos-counter-curve), transform 100ms var(--ipos-counter-curve); } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations button.ipos-table-operations__counter-mobile-cart.is-open { border-color: color-mix(in srgb, var(--ipos-action) 28%, var(--ipos-line)) !important; background: color-mix(in srgb, var(--ipos-action) 8%, var(--ipos-canvas)) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 10px 24px rgb(9 45 32 / 14%); color: var(--ipos-ink) !important; } .ipos-table-operations__counter-mobile-cart > span, .ipos-table-operations__counter-mobile-cart > strong { display: inline-flex; align-items: center; gap: 8px; } .ipos-table-operations__counter-mobile-cart svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .ipos-table-operations__counter-mobile-cart b { color: inherit; font-size: 13px; font-weight: 810; } .ipos-table-operations__counter-mobile-cart small { font-size: 10px; } .ipos-table-operations__counter-mobile-cart i { font-size: 15px; font-style: normal; transition: transform 160ms var(--ipos-counter-curve); } .ipos-table-operations__counter-mobile-cart.is-open i { transform: rotate(180deg); } .ipos-table-operations .ipos-table-operations__counter-category, .ipos-table-operations .ipos-table-operations__counter-clear, .ipos-table-operations .ipos-table-operations__counter-options > header > button, .ipos-table-operations .ipos-table-operations__counter-line-qty button, .ipos-table-operations .ipos-table-operations__counter-line-remove, .ipos-table-operations .ipos-table-operations__counter-options-qty button { min-width: 44px; min-height: 44px; } .ipos-table-operations__counter-line-qty { grid-template-columns: 44px 34px 44px; } .ipos-table-operations__counter-line-qty strong { min-height: 44px; } .ipos-table-operations__counter-options-qty { grid-template-columns: 44px 30px 44px; } .ipos-table-operations__counter-options > footer { position: sticky; bottom: 0; } .ipos-table-operations__counter-success-body { padding: 12px 14px 10px; } .ipos-table-operations__counter-paid-meta { grid-template-columns: 1fr 1fr; } .ipos-table-operations__counter-paid-meta > div:last-child { grid-column: 1 / -1; } } /* The fixed cart rail leaves less than 400px for the menu on a compact * desktop. One readable product row is safer than two clipped columns. */ @media screen and (min-width: 901px) and (max-width: 980px) { .ipos-table-operations__counter-catalog { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .ipos-table-operations__counter-workspace { --ipos-counter-mobile-bottom: 116px; } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations button.ipos-table-operations__counter-mobile-cart { right: 76px; } } @media (max-width: 430px) { .ipos-table-operations__counter-menu { min-height: 540px; } .ipos-table-operations__counter-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ipos-table-operations__counter-product-copy strong { font-size: 12px; } .ipos-table-operations__counter-product-copy b { font-size: 13px; } .ipos-table-operations__counter-product-copy small { display: none; } .ipos-table-operations__counter-rail { min-height: min(470px, calc(100dvh - var(--ipos-counter-mobile-bottom) - 84px)); } .ipos-table-operations__counter-options > footer { align-items: stretch; flex-direction: column; } .ipos-table-operations__counter-options-qty { justify-content: center; } .ipos-table-operations .ipos-table-operations__counter-options-add { width: 100%; max-width: none; margin: 0; } } @media (pointer: coarse) { .ipos-table-operations .ipos-table-operations__counter-category, .ipos-table-operations .ipos-table-operations__counter-clear, .ipos-table-operations .ipos-table-operations__counter-line-qty button, .ipos-table-operations .ipos-table-operations__counter-line-remove, .ipos-table-operations .ipos-table-operations__counter-options-qty button { min-width: 44px; min-height: 44px; } .ipos-table-operations__counter-line-qty { grid-template-columns: 44px 34px 44px; } .ipos-table-operations__counter-line-qty strong { min-height: 44px; } } @media (max-width: 340px) { .ipos-table-operations.is-counter-active { padding-inline: 6px; } .ipos-table-operations__counter-workspace-head { padding-inline: 8px; } .ipos-table-operations__counter-menu { padding-inline: 8px; } .ipos-table-operations__counter-category { padding-inline: 11px; } .ipos-table-operations__counter-line { grid-template-columns: 40px minmax(0, 1fr) auto; } .ipos-table-operations__counter-line-media { width: 40px; } } @media (prefers-reduced-motion: reduce) { .ipos-table-operations__counter-menu::after, .ipos-table-operations__counter-menu::before, .ipos-table-operations__counter-workspace, .ipos-table-operations__counter-btn, .ipos-table-operations__counter-back, .ipos-table-operations__counter-category, .ipos-table-operations__counter-product, .ipos-table-operations__counter-media img, .ipos-table-operations__counter-line, .ipos-table-operations__counter-choice, .ipos-table-operations__counter-tab-indicator, .ipos-table-operations__counter-pay, .ipos-table-operations__counter-options-add, .ipos-table-operations__counter-success, .ipos-table-operations__counter-mobile-cart, .ipos-table-operations__counter-total b { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .ipos-table-operations__counter-rail.is-rail-changing > section, .ipos-table-operations__counter-line.is-entering, .ipos-table-operations .ipos-table-operations__counter-order-card.is-counter-new-ticket { animation: none !important; } } /* IPOS-284 restoration: target-table picker. This mounts directly under body * because Operations' animated work surface may otherwise turn a fixed dialog * into ordinary document flow and clip it beneath the inspector. */ body.ipos-transfer-picker-open { overflow: hidden; } body > .ipos-table-operations__split-picker { position: fixed; z-index: 201; inset: 0; display: grid; place-items: center; padding: 16px; isolation: isolate; } body > .ipos-table-operations__split-picker[hidden] { display: none; } body > .ipos-table-operations__split-picker > .ipos-table-operations__split-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 !important; border-radius: 0 !important; background: var(--ipos-overlay-backdrop) !important; backdrop-filter: blur(6px); } body > .ipos-table-operations__split-picker > .ipos-table-operations__split-panel { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; gap: 12px; width: min(100%, 580px); max-height: min(760px, calc(100dvh - 32px)); overflow: hidden; padding: 22px; border: 1px solid var(--ipos-line-strong); border-radius: 20px; background: var(--ipos-surface); color: var(--ipos-ink); box-shadow: 0 28px 80px var(--ipos-lg-shadow); } .ipos-table-operations__split-header { display: flex; align-items: start; justify-content: space-between; gap: 12px; } .ipos-table-operations__split-header h2 { margin: 0; color: var(--ipos-ink) !important; font-size: 23px; } .ipos-table-operations__split-help, .ipos-table-operations__split-status { margin: 0; color: var(--ipos-muted) !important; font-size: 13px; } .ipos-table-operations__split-list { display: grid; align-content: start; gap: 8px; overflow: auto; } .ipos-table-operations__split-item { display: grid; grid-template-columns: minmax(0, 1fr) 75px; align-items: center; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--ipos-line-strong); border-radius: 11px; color: var(--ipos-ink); } .ipos-table-operations__split-item span { min-width: 0; font-weight: 700; } .ipos-table-operations__split-item small { grid-column: 1; color: var(--ipos-muted); } .ipos-table-operations__split-item input { grid-column: 2; grid-row: 1 / 3; width: 100%; min-height: 42px; padding: 0 6px; border: 1px solid var(--ipos-line-strong); border-radius: 8px; background: var(--ipos-surface); color: var(--ipos-ink); text-align: center; } .ipos-table-operations__split-target { display: grid; gap: 6px; font-weight: 700; } .ipos-table-operations__split-target select { min-height: 44px; padding: 0 10px; border: 1px solid var(--ipos-line-strong); border-radius: 8px; background: var(--ipos-surface); color: var(--ipos-ink); } .ipos-table-operations__split-picker .ipos-table-operations__transfer-picker-footer .is-primary { min-height: 48px; border: 1px solid var(--ipos-action) !important; border-radius: 10px; background: var(--ipos-action) !important; color: var(--ipos-action-ink, #fff) !important; cursor: pointer; } .ipos-table-operations__split-picker .ipos-table-operations__transfer-picker-footer .is-primary:disabled { opacity: .5; cursor: not-allowed; } @media (max-width: 700px) { body > .ipos-table-operations__split-picker { align-items: end; padding: 0; } body > .ipos-table-operations__split-picker > .ipos-table-operations__split-panel { width: 100%; max-height: calc(100dvh - 10px); padding: 18px 14px calc(14px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; } } body > .ipos-table-operations__transfer-picker { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 16px; isolation: isolate; } body > .ipos-table-operations__transfer-picker[hidden] { display: none; } body > .ipos-table-operations__transfer-picker > .ipos-table-operations__transfer-picker-backdrop { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0 !important; border-radius: 0 !important; background: var(--ipos-overlay-backdrop) !important; box-shadow: none !important; color: transparent !important; cursor: default; -webkit-backdrop-filter: blur(6px) brightness(.84) saturate(.92); backdrop-filter: blur(6px) brightness(.84) saturate(.92); animation: ipos-transfer-picker-fade-in 180ms ease both; } body > .ipos-table-operations__transfer-picker > .ipos-table-operations__transfer-picker-panel { position: relative; z-index: 1; display: grid; /* Keep the picker neutral enough for an overlay, but resolve every semantic * color through the active palette so ocean/indigo and dark mode do not * inherit emerald-only contrast values. */ --ipos-transfer-picker-ink: var(--ipos-ink); --ipos-transfer-picker-muted: var(--ipos-muted); --ipos-transfer-picker-line: var(--ipos-line-strong); --ipos-transfer-picker-action: var(--ipos-action); --ipos-transfer-picker-action-hover: var(--ipos-action-hover); --ipos-transfer-picker-surface: var(--ipos-surface); --ipos-transfer-picker-panel-surface: color-mix(in srgb, var(--ipos-surface) 92%, var(--ipos-canvas)); --ipos-transfer-picker-shadow: var(--ipos-lg-shadow); width: min(100%, 780px); max-height: min(760px, calc(100dvh - 32px)); grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 12px; overflow: hidden; padding: 22px; border: 1px solid var(--ipos-lg-edge); border-radius: 20px; background: var(--ipos-transfer-picker-panel-surface); box-shadow: 0 28px 80px var(--ipos-transfer-picker-shadow), inset 0 1px 0 var(--ipos-lg-inner-highlight); color: var(--ipos-transfer-picker-ink); animation: ipos-transfer-picker-enter 220ms cubic-bezier(.2,.82,.2,1) both; } .ipos-table-operations__transfer-picker-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; } .ipos-table-operations__transfer-picker-header h2 { color: var(--ipos-transfer-picker-ink) !important; } .ipos-table-operations__transfer-picker-header h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); line-height: 1.12; letter-spacing: -.025em; } .ipos-table-operations__transfer-picker-close { --ipos-button-secondary-bg: color-mix(in srgb, var(--ipos-transfer-picker-surface) 86%, var(--ipos-canvas)); --ipos-button-secondary-hover: color-mix(in srgb, var(--ipos-transfer-picker-action) 9%, var(--ipos-transfer-picker-surface)); --ipos-button-secondary-text: var(--ipos-transfer-picker-muted); --ipos-button-secondary-hover-text: var(--ipos-transfer-picker-ink); --ipos-line-strong: var(--ipos-transfer-picker-line); --ipos-field-line-hover: var(--ipos-transfer-picker-action); display: grid; width: 44px; height: 44px; min-width: 44px; place-items: center; padding: 0; border: 1px solid var(--ipos-transfer-picker-line) !important; border-radius: 12px; background: var(--ipos-button-secondary-bg) !important; color: var(--ipos-transfer-picker-muted) !important; cursor: pointer; transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, color 140ms ease, transform 100ms ease; } .ipos-table-operations__transfer-picker-close::before { content: '×'; font-size: 27px; font-weight: 760; line-height: 1; } .ipos-table-operations__transfer-picker-close:hover { border-color: var(--ipos-transfer-picker-action) !important; background: var(--ipos-button-secondary-hover) !important; box-shadow: 0 8px 18px color-mix(in srgb, var(--ipos-transfer-picker-action) 16%, transparent); color: var(--ipos-transfer-picker-ink) !important; } .ipos-table-operations__transfer-picker-close:active { transform: translateY(1px); } .ipos-table-operations__transfer-picker-close:focus-visible, .ipos-table-operations__transfer-picker-card:focus-visible, .ipos-table-operations__transfer-picker-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--ipos-transfer-picker-action) 34%, transparent); outline-offset: 2px; } .ipos-table-operations__transfer-picker-tabs { position: relative; display: flex; gap: 8px; isolation: isolate; overflow-x: auto; padding: 2px 1px 4px; scrollbar-color: color-mix(in srgb, var(--ipos-transfer-picker-action) 52%, transparent) transparent; scrollbar-width: thin; } .ipos-table-operations__transfer-picker-tab-indicator { position: absolute; top: 0; left: 0; z-index: 0; width: var(--ipos-transfer-picker-tab-width, 0px); height: var(--ipos-transfer-picker-tab-height, 0px); border: 1px solid color-mix(in srgb, var(--ipos-transfer-picker-action) 50%, var(--ipos-transfer-picker-line)); border-radius: 11px; background: linear-gradient(135deg, color-mix(in srgb, var(--ipos-transfer-picker-action) 14%, var(--ipos-transfer-picker-surface)), color-mix(in srgb, var(--ipos-transfer-picker-action) 7%, var(--ipos-transfer-picker-surface))); box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight), 0 6px 14px color-mix(in srgb, var(--ipos-transfer-picker-action) 10%, transparent); pointer-events: none; transform: translate3d(var(--ipos-transfer-picker-tab-x, 0px), var(--ipos-transfer-picker-tab-y, 0px), 0); transition: transform 240ms cubic-bezier(.22, .75, .2, 1), width 240ms cubic-bezier(.22, .75, .2, 1), height 240ms cubic-bezier(.22, .75, .2, 1), opacity 120ms ease; will-change: transform, width, height; opacity: 0; } .ipos-table-operations__transfer-picker-tab-indicator.is-ready { opacity: 1; } .ipos-table-operations__transfer-picker-tab { --ipos-button-secondary-bg: color-mix(in srgb, var(--ipos-transfer-picker-surface) 86%, var(--ipos-canvas)); --ipos-button-secondary-hover: color-mix(in srgb, var(--ipos-transfer-picker-action) 9%, var(--ipos-transfer-picker-surface)); --ipos-button-secondary-text: var(--ipos-transfer-picker-ink); --ipos-button-secondary-hover-text: var(--ipos-transfer-picker-action); --ipos-line-strong: var(--ipos-transfer-picker-line); --ipos-field-line-hover: var(--ipos-transfer-picker-action); position: relative; z-index: 1; flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 1px solid var(--ipos-transfer-picker-line) !important; border-radius: 11px; background: var(--ipos-button-secondary-bg) !important; color: var(--ipos-transfer-picker-ink) !important; font-size: 12px; font-weight: 760; cursor: pointer; transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 100ms ease; } .ipos-table-operations__transfer-picker-tab:hover { border-color: color-mix(in srgb, var(--ipos-transfer-picker-action) 52%, var(--ipos-transfer-picker-line)); } .ipos-table-operations__transfer-picker-tab.is-active { border-color: transparent !important; background: transparent !important; color: var(--ipos-transfer-picker-action) !important; box-shadow: none; } .ipos-table-operations__transfer-picker-tab:active { transform: translateY(1px); } .ipos-table-operations__transfer-picker-status { min-height: 17px; margin: 0; color: var(--ipos-transfer-picker-muted); font-size: 12px; font-weight: 650; } .ipos-table-operations__transfer-picker-grid { display: grid; min-height: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-auto-rows: 138px; align-content: start; gap: 10px; overflow: auto; padding: 2px 3px 4px 1px; overscroll-behavior: contain; scrollbar-color: color-mix(in srgb, var(--ipos-transfer-picker-action) 52%, transparent) transparent; scrollbar-width: thin; } .ipos-table-operations__transfer-picker-grid::-webkit-scrollbar { width: 10px; } .ipos-table-operations__transfer-picker-grid::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--ipos-action) 58%, transparent); background-clip: padding-box; } .ipos-table-operations__transfer-picker-card { --ipos-button-secondary-bg: color-mix(in srgb, var(--ipos-transfer-picker-surface) 86%, var(--ipos-canvas)); --ipos-button-secondary-hover: var(--ipos-transfer-picker-surface); --ipos-button-secondary-text: var(--ipos-transfer-picker-ink); --ipos-button-secondary-hover-text: var(--ipos-transfer-picker-action); --ipos-line-strong: var(--ipos-transfer-picker-line); --ipos-field-line-hover: var(--ipos-transfer-picker-action); display: grid; box-sizing: border-box; min-height: 138px !important; align-content: center; justify-items: center; gap: 5px; padding: 12px 10px 10px; border: 1px solid var(--ipos-transfer-picker-line) !important; border-radius: 14px; background: var(--ipos-button-secondary-bg) !important; color: var(--ipos-transfer-picker-ink) !important; cursor: pointer; text-align: center; transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, background 140ms ease; } .ipos-table-operations__transfer-picker-card:hover { border-color: color-mix(in srgb, var(--ipos-transfer-picker-action) 64%, var(--ipos-transfer-picker-line)) !important; background: var(--ipos-transfer-picker-surface) !important; transform: translateY(-1px); } .ipos-table-operations__transfer-picker-card:active { transform: translateY(1px); } .ipos-table-operations__transfer-picker-card.is-selected { border-color: var(--ipos-transfer-picker-action) !important; background: color-mix(in srgb, var(--ipos-transfer-picker-action) 9%, var(--ipos-transfer-picker-surface)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ipos-transfer-picker-action) 15%, transparent); } .ipos-table-operations__transfer-picker-card-heading { color: var(--ipos-transfer-picker-ink) !important; font-size: 20px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; } .ipos-table-operations__transfer-picker-glyph { width: 65px; height: 42px; color: var(--ipos-transfer-picker-ink) !important; } .ipos-table-operations__transfer-picker-glyph path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; } .ipos-table-operations__transfer-picker-glyph .glyph-fill { fill: currentColor; stroke: currentColor; } .ipos-table-operations__transfer-picker-area { color: var(--ipos-transfer-picker-muted) !important; font-size: 11px; font-weight: 650; } .ipos-table-operations__transfer-picker-empty { grid-column: 1 / -1; margin: 18px 4px; color: var(--ipos-transfer-picker-muted) !important; text-align: center; } .ipos-table-operations__transfer-picker-footer { display: grid; padding-top: 4px; border-top: 1px solid color-mix(in srgb, var(--ipos-transfer-picker-line) 45%, transparent); } .ipos-table-operations__transfer-picker-footer button { min-height: 52px; border-radius: 13px; font-size: 13px; font-weight: 780; cursor: pointer; transition: box-shadow 140ms ease, transform 100ms ease, filter 140ms ease; } .ipos-table-operations__transfer-picker-footer .is-primary { border: 1px solid var(--ipos-transfer-picker-action) !important; background: var(--ipos-transfer-picker-action) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 24%), 0 10px 24px color-mix(in srgb, var(--ipos-transfer-picker-action) 24%, transparent); color: var(--ipos-action-ink, #fff) !important; } .ipos-table-operations__transfer-picker-footer .is-primary:hover:not(:disabled) { border-color: var(--ipos-transfer-picker-action-hover) !important; background: var(--ipos-transfer-picker-action-hover) !important; box-shadow: 0 16px 30px color-mix(in srgb, var(--ipos-transfer-picker-action) 30%, transparent); filter: saturate(1.08); transform: translateY(-1px); } .ipos-table-operations__transfer-picker-footer button:disabled { cursor: not-allowed; opacity: .48; } @keyframes ipos-transfer-picker-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ipos-transfer-picker-enter { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 700px) { body > .ipos-table-operations__transfer-picker { align-items: end; padding: 0; } body > .ipos-table-operations__transfer-picker > .ipos-table-operations__transfer-picker-panel { width: 100%; max-height: calc(100dvh - 10px); padding: 19px 14px calc(14px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; } .ipos-table-operations__transfer-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 126px; gap: 8px; } .ipos-table-operations__transfer-picker-card { min-height: 126px !important; } } @media (prefers-reduced-motion: reduce) { body > .ipos-table-operations__transfer-picker > .ipos-table-operations__transfer-picker-backdrop, body > .ipos-table-operations__transfer-picker > .ipos-table-operations__transfer-picker-panel { animation: none; } .ipos-table-operations__transfer-picker-close, .ipos-table-operations__transfer-picker-tab, .ipos-table-operations__transfer-picker-tab-indicator, .ipos-table-operations__transfer-picker-card, .ipos-table-operations__transfer-picker-footer button { transition: none; } } /* IPOS-318 Floor Inspector: retain the coarse unserved/served tabs for rapid * history switching, then expose the actual operational handoff inside the * unserved tab. These are presentation groups over the existing lifecycle. */ .ipos-table-operations .ipos-table-operations__round-history.is-state-board { display: grid; gap: 10px; margin-top: 2px; padding-top: 8px; } .ipos-table-operations .ipos-table-operations__round-state-group { --ipos-round-group-accent: #607269; --ipos-round-group-rgb: 96 114 105; position: relative; overflow: hidden; border: 1px solid rgb(var(--ipos-round-group-rgb) / 20%); border-radius: 18px; background: radial-gradient(120% 140% at 100% 0%, rgb(var(--ipos-round-group-rgb) / 12%), transparent 58%), linear-gradient(145deg, rgb(255 255 255 / 72%), rgb(247 251 248 / 48%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 88%), 0 9px 24px rgb(19 65 43 / 6%); -webkit-backdrop-filter: blur(16px) saturate(1.06); backdrop-filter: blur(16px) saturate(1.06); } .ipos-table-operations .ipos-table-operations__round-state-group.is-entering { animation: ipos-floor-state-group-enter 240ms cubic-bezier(.2, .82, .2, 1) both; } .ipos-table-operations .ipos-table-operations__round-state-group::after { position: absolute; top: 0; right: 18px; left: 18px; height: 1px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 82%), transparent); content: ''; pointer-events: none; } .ipos-table-operations .ipos-table-operations__round-state-group.is-waiting { --ipos-round-group-accent: #a95e08; --ipos-round-group-rgb: 188 112 24; } .ipos-table-operations .ipos-table-operations__round-state-group.is-preparing { --ipos-round-group-accent: #176aa3; --ipos-round-group-rgb: 35 118 171; } .ipos-table-operations .ipos-table-operations__round-state-group.is-ready { --ipos-round-group-accent: #17764b; --ipos-round-group-rgb: 28 130 82; } .ipos-table-operations .ipos-table-operations__round-state-group.is-served { --ipos-round-group-accent: #53685d; --ipos-round-group-rgb: 83 104 93; } .ipos-table-operations button.ipos-table-operations__round-state-toggle { display: grid; width: 100%; min-height: 58px; grid-template-columns: 38px minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; padding: 8px 13px 8px 10px; border: 0; border-radius: 17px 17px 12px 12px; background: transparent; box-shadow: none; color: var(--ipos-round-group-accent); text-align: left; transition: background 160ms ease, transform 120ms ease; } .ipos-table-operations button.ipos-table-operations__round-state-toggle::before { display: none; content: none; } .ipos-table-operations__round-state-icon { display: grid; width: 36px; height: 36px; grid-column: 1; grid-row: 1; place-items: center; border: 1px solid rgb(var(--ipos-round-group-rgb) / 16%); border-radius: 11px; background: rgb(var(--ipos-round-group-rgb) / 9%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 74%); color: var(--ipos-round-group-accent); } .ipos-table-operations__round-state-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } .ipos-table-operations__round-state-label { grid-column: 2; grid-row: 1; font-size: 12px; font-weight: 850; letter-spacing: .055em; line-height: 1.2; } .ipos-table-operations__round-state-count { display: grid; grid-column: 3; min-width: 28px; height: 28px; place-items: center; padding-inline: 8px; border: 1px solid rgb(var(--ipos-round-group-rgb) / 16%); border-radius: 10px; background: rgb(var(--ipos-round-group-rgb) / 10%); color: var(--ipos-round-group-accent); font-size: 12px; font-weight: 840; font-variant-numeric: tabular-nums; } .ipos-table-operations__round-state-chevron { width: 8px; height: 8px; grid-column: 4; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(225deg) translate(-1px, -1px); transition: transform 180ms cubic-bezier(.2, .8, .2, 1); } .ipos-table-operations__round-state-group.is-collapsed .ipos-table-operations__round-state-chevron { transform: rotate(45deg) translate(-2px, -2px); } .ipos-table-operations__round-state-body { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 220ms cubic-bezier(.2, .8, .2, 1), opacity 150ms ease; } .ipos-table-operations__round-state-body-inner { min-height: 0; overflow: hidden; padding: 0 9px 9px; } .ipos-table-operations__round-state-group.is-collapsed .ipos-table-operations__round-state-body { grid-template-rows: 0fr; opacity: 0; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-detail { border: 1px solid rgb(var(--ipos-round-group-rgb) / 12%); border-radius: 14px; background: rgb(255 255 255 / 48%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 76%); } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-detail + .ipos-table-operations__round-detail { margin-top: 7px; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-detail::before { width: 3px; background: var(--ipos-round-group-accent); opacity: .88; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-detail.is-open { border-color: rgb(var(--ipos-round-group-rgb) / 24%); background: rgb(255 255 255 / 70%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), 0 8px 18px rgb(var(--ipos-round-group-rgb) / 8%); } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-number { border-color: rgb(var(--ipos-round-group-rgb) / 18%); background: rgb(var(--ipos-round-group-rgb) / 10%); color: var(--ipos-round-group-accent); } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-summary-meta strong { color: var(--ipos-round-group-accent); } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-summary-meta small { color: color-mix(in srgb, var(--ipos-round-group-accent) 80%, #53645b); } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-summary-meta small::before { background: var(--ipos-round-group-accent); box-shadow: 0 0 0 3px rgb(var(--ipos-round-group-rgb) / 10%); } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-summary-total { color: #193127; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-detail.is-open .ipos-table-operations__round-detail-body { padding: 0 10px 12px; container: ipos-round-body / inline-size; } /* Item rows are compact POS records: product identity first, then a stable * quantity cell, amount and a semantically destructive cancellation icon. */ .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-items { display: grid; gap: 0; margin: 4px 0 2px; border-top: 1px solid rgb(var(--ipos-round-group-rgb) / 12%); } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-items li { display: grid; min-height: 62px; grid-template-areas: "name facts" "price price"; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 8px; border: 0; border-bottom: 1px solid rgb(var(--ipos-round-group-rgb) / 10%); border-radius: 0; background: transparent; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-items.has-item-cancel li { grid-template-areas: "name facts facts" "price price cancel"; grid-template-columns: minmax(0, 1fr) auto 40px; column-gap: 9px; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-items li:last-child { border-bottom: 0; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-items li.is-addon-line { margin-left: 12px; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-item-name { display: flex; min-width: 0; grid-area: name; flex-direction: column; align-items: flex-start; gap: 4px; overflow: visible; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-item-product { max-width: 100%; overflow: visible; color: #14291f; font-size: 13.5px; font-weight: 820; letter-spacing: -.01em; line-height: 1.25; text-overflow: clip; white-space: normal; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-item-option { display: inline-flex; min-height: 26px; align-items: center; margin: 0; padding: 4px 8px; border: 1px solid rgb(var(--ipos-round-group-rgb) / 14%); border-radius: 8px; background: rgb(var(--ipos-round-group-rgb) / 8%); color: color-mix(in srgb, var(--ipos-round-group-accent) 78%, #425449); font-size: 10.5px; font-weight: 800; line-height: 1; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-item-name small.is-note { color: #96600d; font-size: 10px; font-weight: 720; line-height: 1.35; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-item-quantity { display: inline-flex; width: auto; height: 26px; align-items: center; justify-content: center; padding: 4px 8px; border: 1px solid rgb(79 98 88 / 12%); border-radius: 8px; background: rgb(242 247 244 / 76%); color: #52665b; font-size: 10.5px; font-weight: 780; font-variant-numeric: tabular-nums; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-item-facts { display: inline-flex; min-width: 0; grid-area: facts; align-items: center; gap: 6px; white-space: nowrap; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-item-price { grid-area: price; justify-self: end; color: #183329; font-size: 13.5px; font-weight: 830; font-variant-numeric: tabular-nums; white-space: nowrap; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-item-cancel { display: grid; width: 40px; height: 40px; min-height: 40px; grid-area: cancel; align-self: center; place-items: center; padding: 0; border: 1px solid rgb(174 57 49 / 18%); border-radius: 12px; background: rgb(255 247 245 / 58%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 76%); color: #a13b34; transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 120ms ease; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-item-cancel svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } @container ipos-round-body (min-width: 360px) { .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-items li { grid-template-areas: "name facts price"; grid-template-columns: minmax(112px, 1fr) auto minmax(72px, auto); } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-items.has-item-cancel li { grid-template-areas: "name facts price cancel"; grid-template-columns: minmax(102px, 1fr) auto minmax(72px, auto) 40px; } } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-primary-action { display: inline-flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 9px; border-color: var(--ipos-round-group-accent) !important; border-radius: 12px !important; background: var(--ipos-round-group-accent) !important; box-shadow: 0 9px 20px rgb(var(--ipos-round-group-rgb) / 18%), inset 0 1px 0 rgb(255 255 255 / 24%) !important; color: #fff !important; font-size: 13px; font-weight: 820; } .ipos-table-operations__round-primary-icon { display: grid; width: 23px; height: 23px; place-items: center; } .ipos-table-operations__round-primary-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } @media (hover: hover) and (pointer: fine) { .ipos-table-operations button.ipos-table-operations__round-state-toggle:hover { background: rgb(var(--ipos-round-group-rgb) / 6%); color: var(--ipos-round-group-accent); } .ipos-table-operations .ipos-table-operations__round-state-group:hover { border-color: rgb(var(--ipos-round-group-rgb) / 30%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), 0 12px 28px rgb(var(--ipos-round-group-rgb) / 9%); } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-item-cancel:hover { border-color: rgb(174 57 49 / 34%); background: rgb(255 235 231 / 86%); color: #8f2822; transform: translateY(-1px); } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-primary-action:hover { filter: saturate(1.08) brightness(.94); transform: translateY(-1px); } } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-item-cancel:active { transform: translateY(1px) scale(.97); } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-item-cancel:focus-visible { outline: 3px solid rgb(174 57 49 / 20%); outline-offset: 2px; } .ipos-table-operations button.ipos-table-operations__round-state-toggle:active { transform: translateY(1px); } .ipos-table-operations button.ipos-table-operations__round-state-toggle:focus-visible { outline: 3px solid rgb(var(--ipos-round-group-rgb) / 24%); outline-offset: -3px; } @keyframes ipos-floor-state-group-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 700px) { .ipos-table-operations .ipos-table-operations__round-history.is-state-board { gap: 8px; padding-top: 6px; } .ipos-table-operations .ipos-table-operations__round-state-group { border-radius: 16px; } .ipos-table-operations button.ipos-table-operations__round-state-toggle { min-height: 56px; padding: 8px 11px 8px 9px; border-radius: 15px 15px 11px 11px; } .ipos-table-operations__round-state-body-inner { padding: 0 6px 6px; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-detail.is-open .ipos-table-operations__round-detail-body { padding-inline: 8px; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-items li { grid-template-areas: "name facts" "price price"; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 9px; padding-inline: 8px; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-items.has-item-cancel li { grid-template-areas: "name facts facts" "price price cancel"; grid-template-columns: minmax(0, 1fr) auto 38px; } .ipos-table-operations .ipos-table-operations__round-state-group .ipos-table-operations__round-item-cancel { width: 38px; height: 38px; min-height: 38px; } .ipos-table-operations__bulk-cancel-headline { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; } .ipos-table-operations__bulk-cancel-icon { width: 40px; height: 40px; } } /* Keep the primary transfer intent visually independent from table utilities. * Pause ordering is cautionary; QR viewing remains a neutral read/print tool. */ .ipos-table-operations .ipos-table-operations__transfer > .ipos-table-operations__transfer-trigger { display: inline-flex; width: 100%; } .ipos-table-operations .ipos-table-operations__transfer + .ipos-table-operations__ordering-shortcuts { margin-top: 5px; padding-top: 12px; border-top: 1px solid rgb(61 98 75 / 12%); } .ipos-table-operations .ipos-table-operations__ordering-shortcuts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .ipos-table-operations .ipos-table-operations__ordering-shortcuts.is-available-actions { grid-template-columns: minmax(0, 1fr) minmax(116px, .7fr); } .ipos-table-operations .ipos-table-operations__ordering-shortcuts > button { display: inline-flex; width: 100%; min-width: 0; min-height: 46px; align-items: center; justify-content: center; gap: 5px; padding-inline: 7px; border-radius: 13px; font-size: 12px; font-weight: 780; } .ipos-table-operations .ipos-table-operations__ordering-shortcuts > button > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ipos-table-operations .ipos-table-operations__ordering-toggle.is-pause { --ipos-button-secondary-bg: color-mix(in srgb, var(--ipos-warning, #a15c00) 7%, var(--ipos-surface, #fff)); --ipos-button-secondary-hover: color-mix(in srgb, var(--ipos-warning, #a15c00) 12%, var(--ipos-surface, #fff)); --ipos-button-secondary-text: color-mix(in srgb, var(--ipos-warning, #a15c00) 86%, #3c2910); --ipos-button-secondary-hover-text: #784600; --ipos-line-strong: color-mix(in srgb, var(--ipos-warning, #a15c00) 34%, transparent); --ipos-field-line-hover: color-mix(in srgb, var(--ipos-warning, #a15c00) 62%, transparent); border-color: color-mix(in srgb, var(--ipos-warning, #a15c00) 34%, transparent) !important; background: color-mix(in srgb, var(--ipos-warning, #a15c00) 7%, var(--ipos-surface, #fff)) !important; color: color-mix(in srgb, var(--ipos-warning, #a15c00) 86%, #3c2910) !important; } .ipos-table-operations .ipos-table-operations__qr-link { --ipos-button-secondary-bg: rgb(255 255 255 / 54%); --ipos-button-secondary-hover: color-mix(in srgb, var(--ipos-action, #197a35) 6%, var(--ipos-surface, #fff)); --ipos-button-secondary-text: #274437; --ipos-button-secondary-hover-text: #176d43; --ipos-line-strong: rgb(61 98 75 / 18%); --ipos-field-line-hover: color-mix(in srgb, var(--ipos-action, #197a35) 42%, transparent); border-color: rgb(61 98 75 / 18%) !important; background: rgb(255 255 255 / 54%) !important; color: #274437 !important; } .ipos-table-operations .ipos-table-operations__ordering-toggle.is-pause:hover, .ipos-table-operations .ipos-table-operations__ordering-toggle.is-pause:focus-visible { border-color: color-mix(in srgb, var(--ipos-warning, #a15c00) 62%, transparent) !important; background: color-mix(in srgb, var(--ipos-warning, #a15c00) 12%, var(--ipos-surface, #fff)) !important; color: #784600 !important; } .ipos-table-operations .ipos-table-operations__qr-link:hover, .ipos-table-operations .ipos-table-operations__qr-link:focus-visible { border-color: color-mix(in srgb, var(--ipos-action, #197a35) 42%, transparent) !important; background: color-mix(in srgb, var(--ipos-action, #197a35) 6%, var(--ipos-surface, #fff)) !important; color: #176d43 !important; } .ipos-table-operations__utility-icon { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; } .ipos-table-operations__utility-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; } /* IPOS-334: the rail is semantic material, not four white cards. White remains * only as the luminous inner edge; active increases the same role colour by * one level without changing geometry or the continuous-rail composition. */ .ipos-table-operations button.ipos-table-operations__attention-card { appearance: none; width: 100%; cursor: pointer; font: inherit; text-align: inherit; } body.ipos-app-view-operations .ipos-table-operations__attention { gap: 8px; } .ipos-table-operations button.ipos-table-operations__attention-card.is-new { --ipos-attention-filter-tone: var(--ipos-warning); } .ipos-table-operations button.ipos-table-operations__attention-card.is-work { --ipos-attention-filter-tone: var(--ipos-success); } .ipos-table-operations button.ipos-table-operations__attention-card.is-payment { --ipos-attention-filter-tone: var(--ipos-danger); } .ipos-table-operations button.ipos-table-operations__attention-card.is-cleanup { --ipos-attention-filter-tone: var(--ipos-info); } body.ipos-app-shell.ipos-app-view-operations:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations button.ipos-table-operations__attention-card:not(.is-primary):not(.is-danger):not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]):not([hidden]):not([type="submit"]) { border: 1px solid color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 52%, var(--ipos-line)) !important; background: linear-gradient(145deg, color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 28%, var(--ipos-control-surface, var(--ipos-surface, #fff))), color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 18%, var(--ipos-elevated-surface, var(--ipos-surface-muted, #f4f8f5)))) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 40%), 0 5px 14px color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 9%, transparent) !important; } body.ipos-app-shell.ipos-app-view-operations:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations button.ipos-table-operations__attention-card strong { border: 1px solid color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 34%, var(--ipos-line)) !important; background: color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 20%, var(--ipos-elevated-surface, var(--ipos-surface, #fff))) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 36%); } .ipos-table-operations button.ipos-table-operations__attention-card.is-filter-active { border-radius: 22px; } body.ipos-app-shell.ipos-app-view-operations:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations button.ipos-table-operations__attention-card.is-filter-active { border: 2px solid var(--ipos-attention-role, var(--ipos-attention-filter-tone)) !important; background: linear-gradient(145deg, color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 42%, var(--ipos-control-surface, var(--ipos-surface, #fff))), color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 30%, var(--ipos-elevated-surface, var(--ipos-surface-muted, #f4f8f5)))) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 24%, transparent), 0 10px 22px color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 18%, transparent), inset 0 1px 0 rgb(255 255 255 / 46%) !important; } body.ipos-app-shell.ipos-app-view-operations:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations button.ipos-table-operations__attention-card.is-filter-active strong { border-color: color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 58%, var(--ipos-line)) !important; background: color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 30%, var(--ipos-elevated-surface, var(--ipos-surface, #fff))) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 34%); } /* IPOS-335: deep semantic glass for Emerald/Ocean/Indigo Dark. The rail uses * the palette-owned dark glass rather than a white translucent wash. Status * hue lives in the card depth, keyline, icon and count; labels retain the * palette's high-contrast ink. Active increases chroma without becoming neon. */ body.ipos-app-shell.ipos-app-view-operations[data-ipos-mode="dark"]:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations__attention { border-color: color-mix(in srgb, var(--ipos-lg-edge) 72%, transparent) !important; background: linear-gradient(145deg, color-mix(in srgb, var(--ipos-lg-glass-thick) 92%, var(--ipos-canvas)), color-mix(in srgb, var(--ipos-lg-glass) 78%, var(--ipos-canvas))) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ipos-lg-inner-highlight) 70%, transparent), 0 18px 38px var(--ipos-lg-shadow) !important; -webkit-backdrop-filter: blur(24px) saturate(1.28); backdrop-filter: blur(24px) saturate(1.28); } body.ipos-app-shell.ipos-app-view-operations[data-ipos-mode="dark"]:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations button.ipos-table-operations__attention-card:not(.is-primary):not(.is-danger):not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]):not([hidden]):not([type="submit"]) { border-color: color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 58%, var(--ipos-line)) !important; background: linear-gradient(145deg, color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 34%, var(--ipos-canvas)), color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 22%, var(--ipos-control-surface))) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 18%, transparent), 0 8px 18px color-mix(in srgb, var(--ipos-canvas) 82%, transparent) !important; color: var(--ipos-ink) !important; } body.ipos-app-shell.ipos-app-view-operations[data-ipos-mode="dark"]:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations button.ipos-table-operations__attention-card :where(.ipos-table-operations__attention-icon, strong) { color: var(--ipos-attention-role, var(--ipos-attention-filter-tone)) !important; } body.ipos-app-shell.ipos-app-view-operations[data-ipos-mode="dark"]:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations button.ipos-table-operations__attention-card strong { border-color: color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 56%, var(--ipos-line)) !important; background: color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 26%, var(--ipos-elevated-surface)) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 16%, transparent) !important; } body.ipos-app-shell.ipos-app-view-operations[data-ipos-mode="dark"]:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations button.ipos-table-operations__attention-card.is-filter-active { border-color: var(--ipos-attention-role, var(--ipos-attention-filter-tone)) !important; background: linear-gradient(145deg, color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 48%, var(--ipos-canvas)), color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 32%, var(--ipos-control-surface))) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 18%, transparent), 0 12px 26px color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 14%, var(--ipos-lg-shadow)), inset 0 1px 0 color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 26%, transparent) !important; color: var(--ipos-ink) !important; } body.ipos-app-shell.ipos-app-view-operations[data-ipos-mode="dark"]:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations button.ipos-table-operations__attention-card.is-filter-active strong { border-color: color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 76%, var(--ipos-line)) !important; background: color-mix(in srgb, var(--ipos-attention-role, var(--ipos-attention-filter-tone)) 38%, var(--ipos-elevated-surface)) !important; } .ipos-table-operations button.ipos-table-operations__attention-card:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .ipos-table-operations .ipos-table-operations__round-state-group.is-entering { animation: none; } .ipos-table-operations button.ipos-table-operations__round-state-toggle, .ipos-table-operations .ipos-table-operations__round-item-cancel, .ipos-table-operations__round-state-chevron, .ipos-table-operations__round-state-body, .ipos-table-operations .ipos-table-operations__ordering-shortcuts > button { transition: none; } } /* IPOS-345: published floor markers use the same material contract as the * fallback table cards. The operational state is carried by a tinted surface, * a clear full border and a semantic left keyline instead of colour-only text. * Keep selection's brand ring intact while retaining the state keyline. */ body.ipos-app-shell.ipos-app-view-operations { --ipos-floor-cleanup-accent: #6b5b95; --ipos-floor-empty-surface: rgb(255 255 255 / 94%); } body.ipos-app-shell.ipos-app-view-operations[data-ipos-mode="dark"] { --ipos-floor-cleanup-accent: #c3b7ff; --ipos-floor-empty-surface: var(--ipos-surface); } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations :is( .ipos-table-operations__map .ipos-table-operations__marker, .ipos-table-operations__fallback-list .ipos-table-operations__card:not(.ipos-table-operations__counter-order-card) ).is-empty { --ipos-floor-state-accent: var(--ipos-muted); } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations :is( .ipos-table-operations__map .ipos-table-operations__marker, .ipos-table-operations__fallback-list .ipos-table-operations__card:not(.ipos-table-operations__counter-order-card) ).is-serving, body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations :is( .ipos-table-operations__map .ipos-table-operations__marker, .ipos-table-operations__fallback-list .ipos-table-operations__card:not(.ipos-table-operations__counter-order-card) ).is-ready { --ipos-floor-state-accent: var(--ipos-success); } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations :is( .ipos-table-operations__map .ipos-table-operations__marker, .ipos-table-operations__fallback-list .ipos-table-operations__card:not(.ipos-table-operations__counter-order-card) ).is-new, body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations :is( .ipos-table-operations__map .ipos-table-operations__marker, .ipos-table-operations__fallback-list .ipos-table-operations__card:not(.ipos-table-operations__counter-order-card) ).is-work { --ipos-floor-state-accent: var(--ipos-warning); } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations :is( .ipos-table-operations__map .ipos-table-operations__marker, .ipos-table-operations__fallback-list .ipos-table-operations__card:not(.ipos-table-operations__counter-order-card) ).is-cleanup_pending { --ipos-floor-state-accent: var(--ipos-floor-cleanup-accent); } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations :is( .ipos-table-operations__map .ipos-table-operations__marker, .ipos-table-operations__fallback-list .ipos-table-operations__card:not(.ipos-table-operations__counter-order-card) ).is-preparing, body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations :is( .ipos-table-operations__map .ipos-table-operations__marker, .ipos-table-operations__fallback-list .ipos-table-operations__card:not(.ipos-table-operations__counter-order-card) ).is-paying { --ipos-floor-state-accent: var(--ipos-info); } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations :is( .ipos-table-operations__map .ipos-table-operations__marker, .ipos-table-operations__fallback-list .ipos-table-operations__card:not(.ipos-table-operations__counter-order-card) ).is-payment_requested { --ipos-floor-state-accent: var(--ipos-danger); } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations :is( .ipos-table-operations__map .ipos-table-operations__marker:not(.is-selected):not(.is-primary):not(.is-danger):not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]):not([hidden]):not([type="submit"]), .ipos-table-operations__fallback-list .ipos-table-operations__card:not(.ipos-table-operations__counter-order-card):not(.is-selected):not(.is-primary):not(.is-danger):not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]):not([hidden]):not([type="submit"]) ) { appearance: none; -webkit-appearance: none; border: 1px solid color-mix(in srgb, var(--ipos-floor-state-accent) 54%, var(--ipos-line)) !important; border-left: 5px solid var(--ipos-floor-state-accent) !important; border-left-color: var(--ipos-floor-state-accent) !important; background-color: transparent !important; background: linear-gradient(145deg, color-mix(in srgb, var(--ipos-floor-state-accent) 36%, var(--ipos-surface)), color-mix(in srgb, var(--ipos-floor-state-accent) 20%, var(--ipos-surface-muted))) !important; box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight), 0 7px 18px color-mix(in srgb, var(--ipos-floor-state-accent) 12%, transparent) !important; color: var(--ipos-ink) !important; } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations :is( .ipos-table-operations__map .ipos-table-operations__marker:not(.is-selected):not(.is-primary):not(.is-danger):not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]):not([hidden]):not([type="submit"]), .ipos-table-operations__fallback-list .ipos-table-operations__card:not(.ipos-table-operations__counter-order-card):not(.is-selected):not(.is-primary):not(.is-danger):not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]):not([hidden]):not([type="submit"]) ) :is(.ipos-table-operations__marker-label, .ipos-table-operations__card-state, .ipos-table-operations__table-glyph) { color: var(--ipos-floor-state-accent) !important; } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations :is( .ipos-table-operations__map .ipos-table-operations__marker:not(.is-selected):not(.is-primary):not(.is-danger):not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]):not([hidden]):not([type="submit"]), .ipos-table-operations__fallback-list .ipos-table-operations__card:not(.ipos-table-operations__counter-order-card):not(.is-selected):not(.is-primary):not(.is-danger):not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]):not([hidden]):not([type="submit"]) ) .ipos-table-operations__table-glyph { stroke: currentColor !important; } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations :is( .ipos-table-operations__map .ipos-table-operations__marker:not(.is-selected):not(.is-primary):not(.is-danger):not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]):not([hidden]):not([type="submit"]), .ipos-table-operations__fallback-list .ipos-table-operations__card:not(.ipos-table-operations__counter-order-card):not(.is-selected):not(.is-primary):not(.is-danger):not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]):not([hidden]):not([type="submit"]) ):hover { border-color: color-mix(in srgb, var(--ipos-floor-state-accent) 72%, var(--ipos-line)) !important; border-left-color: var(--ipos-floor-state-accent) !important; background: linear-gradient(145deg, color-mix(in srgb, var(--ipos-floor-state-accent) 42%, var(--ipos-surface)), color-mix(in srgb, var(--ipos-floor-state-accent) 25%, var(--ipos-surface-muted))) !important; box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight), 0 10px 22px color-mix(in srgb, var(--ipos-floor-state-accent) 16%, transparent) !important; } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations :is( .ipos-table-operations__map .ipos-table-operations__marker:not(.is-selected):not(.is-primary):not(.is-danger):not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]):not([hidden]):not([type="submit"]), .ipos-table-operations__fallback-list .ipos-table-operations__card:not(.ipos-table-operations__counter-order-card):not(.is-selected):not(.is-primary):not(.is-danger):not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]):not([hidden]):not([type="submit"]) ).is-empty { border: 1px solid var(--ipos-line-strong) !important; border-left: 5px solid var(--ipos-line-strong) !important; background-color: var(--ipos-floor-empty-surface) !important; background-image: none !important; background: var(--ipos-floor-empty-surface) !important; box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight), 0 5px 13px color-mix(in srgb, var(--ipos-line) 28%, transparent) !important; } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations :is( .ipos-table-operations__map .ipos-table-operations__marker, .ipos-table-operations__fallback-list .ipos-table-operations__card:not(.ipos-table-operations__counter-order-card) ).is-selected { /* Solid material prevents wallpaper from changing text contrast. Keep the * semantic rail/tint; the outer brand ring identifies selection. */ border-left: 5px solid var(--ipos-floor-state-accent, var(--ipos-action)) !important; background: color-mix(in srgb, var(--ipos-floor-state-accent, var(--ipos-action)) 10%, var(--ipos-floor-selection-base)) !important; color: var(--ipos-ink) !important; } /* IPOS-356/IPOS-357: status must remain recognizable from the card surface itself in * all six themes. The previous shared-theme mix (8-18%) reduced takeaway * tickets to an almost-white card, while selected table cards could fall back * to selection material without their operational tint. Counter tickets use * this five-pixel border as their only keyline; the older inset ::before rail * was removed so the left edge cannot render twice. */ body.ipos-app-shell.ipos-app-view-operations:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations .ipos-table-operations__fallback-list.is-counter-orders button.ipos-table-operations__counter-order-card:is( .is-new, .is-work, .is-preparing, .is-ready, .is-serving, .is-payment_requested, .is-paying, .is-cleanup_pending ) { border: 1px solid color-mix(in srgb, var(--ipos-operations-state-accent) 62%, var(--ipos-line)) !important; border-left: 5px solid var(--ipos-operations-state-accent) !important; background-color: transparent !important; background: linear-gradient(145deg, color-mix(in srgb, var(--ipos-operations-state-accent) 36%, var(--ipos-surface)), color-mix(in srgb, var(--ipos-operations-state-accent) 20%, var(--ipos-surface-muted))) !important; box-shadow: inset 0 1px 0 var(--ipos-lg-inner-highlight), 0 8px 20px color-mix(in srgb, var(--ipos-operations-state-accent) 14%, transparent) !important; } body.ipos-app-shell.ipos-app-view-operations[data-ipos-mode="dark"]:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations .ipos-table-operations__fallback-list.is-counter-orders button.ipos-table-operations__counter-order-card:is( .is-new, .is-work, .is-preparing, .is-ready, .is-serving, .is-payment_requested, .is-paying, .is-cleanup_pending ) { border-color: color-mix(in srgb, var(--ipos-operations-state-accent) 68%, var(--ipos-line)) !important; border-left-color: var(--ipos-operations-state-accent) !important; background: linear-gradient(145deg, color-mix(in srgb, var(--ipos-operations-state-accent) 34%, var(--ipos-control-surface)), color-mix(in srgb, var(--ipos-operations-state-accent) 20%, var(--ipos-elevated-surface))) !important; } body.ipos-app-shell.ipos-app-view-operations:not(.ipos-app-view-customer):not(.ipos-app-view-kitchen) .ipos-table-operations .ipos-table-operations__fallback-list.is-counter-orders button.ipos-table-operations__counter-order-card.is-empty { border: 1px solid var(--ipos-line-strong) !important; border-left: 5px solid var(--ipos-line-strong) !important; background: var(--ipos-floor-empty-surface, var(--ipos-surface)) !important; } /* IPOS-362: a read-only provisional bill action and an isolated thermal print * surface. Screen styling follows the active theme; paper stays ink-friendly. */ .ipos-table-operations .ipos-table-operations__bill-summary .ipos-table-operations__provisional-print { grid-column: 1 / -1; display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; border-color: color-mix(in srgb, var(--ipos-action) 42%, var(--ipos-line)) !important; border-radius: 13px; background: color-mix(in srgb, var(--ipos-action) 10%, var(--ipos-surface)) !important; color: var(--ipos-action) !important; font-size: 12px; font-weight: 780; } .ipos-table-operations .ipos-table-operations__bill-summary .ipos-table-operations__provisional-print[hidden] { display: none !important; } .ipos-table-operations .ipos-table-operations__bill-summary .ipos-table-operations__provisional-print:hover, .ipos-table-operations .ipos-table-operations__bill-summary .ipos-table-operations__provisional-print:focus-visible { border-color: var(--ipos-action) !important; background: color-mix(in srgb, var(--ipos-action) 17%, var(--ipos-surface)) !important; color: var(--ipos-action) !important; } .ipos-table-operations__provisional-print svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } .ipos-table-operations__provisional-print-host { display: none; } /* Measure with the same geometry before window.print(). Chrome locks native * pagination before `beforeprint`, so late page-size injection falls back to A4. */ .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-print-host { display: block !important; position: fixed !important; top: 0; left: -10000px; width: 80mm !important; visibility: hidden !important; pointer-events: none !important; } .ipos-table-operations.is-measuring-provisional[data-provisional-paper-size="58mm"] .ipos-table-operations__provisional-print-host, .ipos-table-operations.is-measuring-provisional[data-provisional-paper-size="58mm"] .ipos-table-operations__provisional-receipt { width: 58mm !important; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-receipt { display: block !important; width: 80mm !important; box-sizing: border-box; margin: 0 !important; padding: 4mm !important; font: 9pt/1.35 Arial, sans-serif !important; overflow-wrap: anywhere; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-header { display: grid; justify-items: center; gap: 2px; text-align: center; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-header strong { font-size: 12pt; line-height: 1.15; text-transform: uppercase; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-header span { font-size: 8pt; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-logo { display: block; width: auto; max-width: 30mm; height: auto; max-height: 13mm; margin: 0 auto 2mm; object-fit: contain; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-title { margin: 4mm 0 3mm; padding-block: 2.5mm; border-block: 1px dashed #555; text-align: center; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-title h1 { margin: 0; font-size: 13pt; line-height: 1.1; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-title strong { display: block; margin-top: 1mm; font-size: 8pt; letter-spacing: .08em; } .ipos-table-operations.is-measuring-provisional :is(.ipos-table-operations__provisional-meta, .ipos-table-operations__provisional-totals) { display: grid; gap: 1mm; margin: 0; } .ipos-table-operations.is-measuring-provisional :is(.ipos-table-operations__provisional-meta, .ipos-table-operations__provisional-totals) > div { display: flex; justify-content: space-between; gap: 3mm; } .ipos-table-operations.is-measuring-provisional :is(.ipos-table-operations__provisional-meta, .ipos-table-operations__provisional-totals) dd { margin: 0; font-weight: 700; text-align: right; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-group { margin-top: 3mm; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-group h2 { margin: 0; padding: 1.5mm 0; border-block: 1px solid #111; font-size: 8.5pt; letter-spacing: .04em; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-round { padding: 2mm 0; border-bottom: 1px dashed #777; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-round h3 { margin: 0 0 1.5mm; font-size: 8pt; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-round > p { margin: 1mm 0 0; font-size: 7.5pt; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2mm; align-items: start; padding: .8mm 0; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-line.is-addon { padding-left: 3mm; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-line :is(strong, small) { display: block; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-line small { margin-top: .5mm; font-size: 7.5pt; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-line > :is(span, b) { white-space: nowrap; font-variant-numeric: tabular-nums; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-line > span { font-size: 8pt; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-totals { margin-top: 3mm; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-totals dd { white-space: nowrap; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-totals .is-total { margin-top: 1mm; padding-top: 2mm; border-top: 1px solid #111; font-size: 11pt; font-weight: 800; } .ipos-table-operations.is-measuring-provisional .ipos-table-operations__provisional-warning { margin: 4mm 0 0; padding-top: 2.5mm; border-top: 1px dashed #555; font-size: 7.5pt; text-align: center; } @media print { html.ipos-printing-provisional, body.ipos-printing-provisional, body.ipos-printing-provisional .ipos-admin-shell, body.ipos-printing-provisional .ipos-admin-workspace, body.ipos-printing-provisional .ipos-admin-content, body.ipos-printing-provisional .ipos-table-operations.is-printing-provisional { width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; overflow: visible !important; transform: none !important; } body.ipos-printing-provisional .ipos-admin-sidebar, body.ipos-printing-provisional .ipos-admin-bar, body.ipos-printing-provisional .ipos-table-operations.is-printing-provisional > :not(.ipos-table-operations__provisional-print-host) { display: none !important; } body.ipos-printing-provisional .ipos-admin-content { display: flex !important; align-items: flex-start !important; justify-content: center !important; } body.ipos-printing-provisional .ipos-table-operations__provisional-print-host { display: block !important; width: 80mm !important; margin-inline: auto !important; color: #111 !important; background: #fff !important; break-before: avoid; break-after: avoid; } body.ipos-printing-provisional .ipos-table-operations__provisional-receipt { display: block !important; width: 80mm !important; box-sizing: border-box; margin: 0 !important; padding: 4mm !important; color: #111 !important; background: #fff !important; font: 9pt/1.35 Arial, sans-serif !important; overflow-wrap: anywhere; print-color-adjust: economy; } body.ipos-printing-provisional .ipos-table-operations[data-provisional-paper-size="58mm"] .ipos-table-operations__provisional-print-host, body.ipos-printing-provisional .ipos-table-operations[data-provisional-paper-size="58mm"] .ipos-table-operations__provisional-receipt { width: 58mm !important; } body.ipos-app-shell.ipos-printing-provisional .ipos-table-operations__provisional-receipt :where(h1, h2, h3) { color: #111 !important; } .ipos-table-operations__provisional-header { display: grid; justify-items: center; gap: 2px; text-align: center; } .ipos-table-operations__provisional-header strong { font-size: 12pt; line-height: 1.15; text-transform: uppercase; } .ipos-table-operations__provisional-header span { font-size: 8pt; } .ipos-table-operations__provisional-logo { display: block; width: auto; max-width: 30mm; height: auto; max-height: 13mm; margin: 0 auto 2mm; object-fit: contain; } .ipos-table-operations__provisional-title { margin: 4mm 0 3mm; padding-block: 2.5mm; border-block: 1px dashed #555; text-align: center; } .ipos-table-operations__provisional-title h1 { margin: 0; color: #111 !important; font-size: 13pt; line-height: 1.1; } .ipos-table-operations__provisional-title strong { display: block; margin-top: 1mm; color: #111 !important; font-size: 8pt; letter-spacing: .08em; } .ipos-table-operations__provisional-meta, .ipos-table-operations__provisional-totals { display: grid; gap: 1mm; margin: 0; } .ipos-table-operations__provisional-meta > div, .ipos-table-operations__provisional-totals > div { display: flex; justify-content: space-between; gap: 3mm; } .ipos-table-operations__provisional-meta dt, .ipos-table-operations__provisional-totals dt { color: #333; } .ipos-table-operations__provisional-meta dd, .ipos-table-operations__provisional-totals dd { margin: 0; font-weight: 700; text-align: right; white-space: nowrap; overflow-wrap: normal; } .ipos-table-operations__provisional-group { margin-top: 3mm; } .ipos-table-operations__provisional-group h2 { margin: 0; padding: 1.5mm 0; border-block: 1px solid #111; color: #111 !important; font-size: 8.5pt; letter-spacing: .04em; } .ipos-table-operations__provisional-round { padding: 2mm 0; border-bottom: 1px dashed #777; break-inside: avoid; } .ipos-table-operations__provisional-round h3 { margin: 0 0 1.5mm; color: #111 !important; font-size: 8pt; } .ipos-table-operations__provisional-round > p { margin: 1mm 0 0; font-size: 7.5pt; } .ipos-table-operations__provisional-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2mm; align-items: start; padding: .8mm 0; } .ipos-table-operations__provisional-line.is-addon { padding-left: 3mm; } .ipos-table-operations__provisional-line strong, .ipos-table-operations__provisional-line small { display: block; } .ipos-table-operations__provisional-line small { margin-top: .5mm; color: #333; font-size: 7.5pt; } .ipos-table-operations__provisional-line > span, .ipos-table-operations__provisional-line > b { white-space: nowrap; font-variant-numeric: tabular-nums; } .ipos-table-operations__provisional-line > span { color: #444; font-size: 8pt; } .ipos-table-operations__provisional-totals { margin-top: 3mm; } .ipos-table-operations__provisional-totals .is-total { margin-top: 1mm; padding-top: 2mm; border-top: 1px solid #111; font-size: 11pt; font-weight: 800; } .ipos-table-operations__provisional-warning { margin: 4mm 0 0; padding-top: 2.5mm; border-top: 1px dashed #555; font-size: 7.5pt; text-align: center; } } .ipos-table-operations__staff-order-link { display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 10px; background: #08714f; color: #fff; font-weight: 700; text-decoration: none; } .ipos-table-operations__staff-order-link:hover, .ipos-table-operations__staff-order-link:focus-visible { color: #fff; background: #05583d; } /* IPOS-421: the visually hidden route title no longer owns a phone column. * Let the counter action fill the available row and keep utility targets at a * stable touch size instead of pinning the whole cluster to the right edge. */ @media (max-width: 700px) { body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations__header { grid-template-columns: minmax(0, 1fr); } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations__header-actions { display: flex; width: 100%; min-width: 0; justify-self: stretch; gap: 8px; } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations__counter-btn { min-width: 0; flex: 1 1 auto; justify-content: center; } body.ipos-app-shell.ipos-app-view-operations :is( .ipos-table-operations__history-link, .ipos-table-operations__attention-launcher, .ipos-table-operations__sound-toggle ) { width: 46px; height: 46px; min-width: 46px; min-height: 46px; flex: 0 0 46px; } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations__header-divider { margin-inline: 0; } } /* IPOS-429: the hidden route title must not reserve a tablet column. Keep the * same flexible-search / max-content-actions geometry used on desktop so the * utility cluster and attention rail share the 4px right inset. */ @media screen and (min-width: 701px) and (max-width: 1180px) { body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations__header { grid-template-columns: minmax(0, 1fr) max-content; gap: 16px; } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations__header-search { min-width: 0; } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations__header-actions { min-width: 0; justify-self: end; } } /* IPOS-434: selected floor text must remain readable for custom brand HEX. */ body.ipos-app-shell.ipos-app-view-operations { --ipos-floor-selection-base: #ffffff; } body.ipos-app-shell.ipos-app-view-operations[data-ipos-mode="dark"] { --ipos-floor-selection-base: #14251d; } /* This is a layout wrapper, not a second white card inside the inspector. */ body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations .ipos-table-operations__operation-panel.is-counter-queue { background: transparent !important; border: 0 !important; box-shadow: none !important; } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations .ipos-table-operations__counter-queue-empty { background: transparent !important; border-color: var(--ipos-line-strong); border-radius: 12px; color: var(--ipos-ink-muted, var(--ipos-muted)) !important; box-shadow: none !important; } /* IPOS-436: transfer/merge groups share the inspector material. */ body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations .ipos-table-operations__operation-panel:is(.ipos-table-operations__transfer, .ipos-table-operations__merge-session) { background: transparent !important; box-shadow: none !important; } /* IPOS-437: payment is one item in the inspector flow, not a nested white card. */ body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations .ipos-table-operations__operation-panel.is-paying { background: transparent !important; box-shadow: none !important; } /* IPOS-438: give the QR, actions and safety note distinct breathing room. */ body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations .ipos-table-operations__payment-tools { gap: 12px; margin-top: 14px; } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations__payment-tools > .ipos-table-operations__payment-print { display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .ipos-table-operations__payment-print svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } body.ipos-app-shell.ipos-app-view-operations .ipos-table-operations__payment-safety { margin-top: 12px !important; }