/* Clienora POS - cashier screen. Big touch targets, Clienora tokens, RTL via logical properties. */

/* Tile palette: one hue per category, soft background derived for both themes. */
.c-teal   { --hue: #0e6b5c; } .c-amber  { --hue: #b45309; } .c-rose   { --hue: #be123c; } .c-violet { --hue: #6d28d9; }
.c-sky    { --hue: #0369a1; } .c-lime   { --hue: #4d7c0f; } .c-orange { --hue: #c2410c; } .c-slate  { --hue: #475569; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-teal { --hue: #34b39b; } :root:not([data-theme="light"]) .c-amber { --hue: #f59e0b; }
  :root:not([data-theme="light"]) .c-rose { --hue: #fb7185; } :root:not([data-theme="light"]) .c-violet { --hue: #a78bfa; }
  :root:not([data-theme="light"]) .c-sky { --hue: #38bdf8; } :root:not([data-theme="light"]) .c-lime { --hue: #a3e635; }
  :root:not([data-theme="light"]) .c-orange { --hue: #fb923c; } :root:not([data-theme="light"]) .c-slate { --hue: #94a3b8; }
}
:root[data-theme="dark"] .c-teal { --hue: #34b39b; } :root[data-theme="dark"] .c-amber { --hue: #f59e0b; }
:root[data-theme="dark"] .c-rose { --hue: #fb7185; } :root[data-theme="dark"] .c-violet { --hue: #a78bfa; }
:root[data-theme="dark"] .c-sky { --hue: #38bdf8; } :root[data-theme="dark"] .c-lime { --hue: #a3e635; }
:root[data-theme="dark"] .c-orange { --hue: #fb923c; } :root[data-theme="dark"] .c-slate { --hue: #94a3b8; }

.mi { display: inline-block; width: 1.25em; height: 1.25em; flex: none; background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }

body.register { height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
.reg-top { display: flex; align-items: center; gap: .6rem; padding: .5rem 1rem; background: var(--surface);
  border-bottom: 1px solid var(--line); flex: none; }
.reg-top .brand { padding: 0; font-size: 1rem; }
.reg-top form { margin: 0; }
.reg-top .spacer { flex: 1; }
.reg-shift { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .88rem; }

.reg-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.reg-menu { min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .8rem; }
.reg-search { display: flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 0 .9rem; }
.reg-search input { border: 0; background: transparent; padding: .8rem 0; font-size: 1.05rem; outline: none; }
.reg-search input:focus { outline: none; }
.reg-search .i { color: var(--muted); }

.cat-row { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .2rem; flex: none; }
.cat-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-weight: 600;
  white-space: nowrap; cursor: pointer; min-height: 48px; }
.cat-chip .mi { color: var(--hue, var(--brand)); }
.cat-chip.active { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.cat-chip.active .mi { color: var(--brand-ink); }

.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; min-height: 140px;
  padding: .9rem .6rem; border-radius: 16px; border: 1px solid var(--line); border-top: 4px solid var(--hue);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: center;
  box-shadow: var(--shadow); transition: transform .06s; touch-action: manipulation; }
.tile:active { transform: scale(.97); }
.tile:hover { border-color: var(--hue); }
.tile-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: var(--hue);
  background: color-mix(in srgb, var(--hue) 13%, var(--surface)); }
.tile-ico .mi { width: 30px; height: 30px; }
.tile-name { font-weight: 600; line-height: 1.3; }
.tile-price { color: var(--muted); font-weight: 600; }

/* Cart */
.reg-cart { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-inline-start: 1px solid var(--line);
  padding: .9rem; gap: .7rem; }
.seg-lg { display: flex; width: 100%; }
.seg-lg label { flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .7rem; font-size: .95rem; }
.cart-lines { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; }
.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .5rem;
  padding: .6rem .2rem; border-bottom: 1px dashed var(--line); }
.cart-line.flash { animation: flash .6s; }
@keyframes flash { from { background: var(--brand-soft); } to { background: transparent; } }
.cl-main { display: flex; flex-direction: column; min-width: 0; }
.cl-name { font-weight: 600; }
.cl-opts { font-size: .8rem; color: var(--muted); }
.cl-qty { display: flex; align-items: center; gap: .35rem; }
.cl-qty .btn { width: 36px; height: 36px; padding: 0; font-size: 1.15rem; }
.cl-qty .num { min-width: 1.6rem; text-align: center; font-weight: 700; }
.cl-total { font-weight: 700; min-width: 4.2rem; text-align: end; }
.cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--muted); }
.cart-empty .i { width: 2.6rem; height: 2.6rem; }
.cart-empty[hidden] { display: none; }
.cart-totals { display: grid; grid-template-columns: 1fr auto; gap: .25rem .5rem; margin: 0; font-size: .92rem; }
.cart-totals dt { color: var(--muted); }
.cart-totals dd { margin: 0; text-align: end; font-weight: 600; }
.cart-totals [hidden] { display: none; }
.cart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cart-actions .btn:only-child { grid-column: 1 / -1; }
.btn-pay { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem; font-size: 1.25rem;
  border-radius: 14px; min-height: 64px; }
.btn-pay .pay-total { font-size: 1.4rem; font-weight: 700; }
.btn-pay small { color: inherit; opacity: .85; font-size: .8em; }

/* Dialogs */
dialog.modal { border: 0; border-radius: 18px; padding: 0; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog.modal-wide { width: min(640px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgba(10, 20, 16, .45); }
.modal-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .9rem; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.modal-head h2 { margin: 0; font-size: 1.25rem; }
.opt-groups { display: flex; flex-direction: column; gap: .8rem; max-height: 55vh; overflow-y: auto; }
.opt-group { border: 0; padding: 0; margin: 0; }
.opt-group legend { font-weight: 700; margin-bottom: .45rem; display: flex; align-items: center; gap: .4rem; }
.opt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .45rem; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .75rem .85rem; min-height: 52px;
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 600; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt small { color: var(--muted); font-weight: 600; }
.opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.qty-row { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.qty-btn { width: 56px; height: 56px; padding: 0; border-radius: 50%; }
.qty-val { font-size: 1.6rem; font-weight: 700; min-width: 2.5rem; text-align: center; }
.input-xl { font-size: 1.6rem !important; padding: .7rem .9rem !important; text-align: center; font-weight: 700; direction: ltr; }
.quick { display: flex; flex-wrap: wrap; gap: .45rem; }
.quick .btn { flex: 1; min-width: 70px; min-height: 52px; font-size: 1.05rem; }
.due { font-size: 1.05rem; color: var(--muted); display: flex; justify-content: space-between; align-items: baseline; }
.due strong { font-size: 2rem; color: var(--text); }
.methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
.method { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .9rem .5rem; border: 2px solid var(--line);
  border-radius: 14px; cursor: pointer; font-weight: 700; }
.method .mi { width: 28px; height: 28px; color: var(--muted); }
.method input { position: absolute; opacity: 0; pointer-events: none; }
.method:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.method:has(input:checked) .mi { color: var(--brand); }
#cashPanel { display: flex; flex-direction: column; gap: .5rem; }
#cashPanel[hidden] { display: none; }
#cashPanel label { font-weight: 600; }
.change { font-size: 1.1rem; display: flex; justify-content: space-between; }
.change strong { font-size: 1.5rem; color: var(--ok); }
.btn-confirm { min-height: 60px; font-size: 1.2rem; }
.approval { display: flex; flex-direction: column; gap: .6rem; }
.approval[hidden] { display: none; }
.done-icon .i { width: 4rem; height: 4rem; color: var(--ok); }
.order-no { font-size: 4rem; font-weight: 700; line-height: 1; color: var(--brand); }
.change-big { font-size: 1.3rem; }
.change-big[hidden] { display: none; }
.change-big strong { color: var(--ok); font-size: 1.8rem; }
.errors[hidden] { display: none; }
.print-frame { position: absolute; width: 0; height: 0; border: 0; visibility: hidden; }
.toast { position: fixed; bottom: 24px; inset-inline-start: 50%; transform: translateX(-50%); background: var(--text); color: var(--surface);
  padding: .7rem 1.2rem; border-radius: 10px; font-weight: 600; z-index: 50; }
[dir="rtl"] .toast { transform: translateX(50%); }

@media (max-width: 900px) {
  body.register { height: auto; overflow: auto; padding-bottom: 0; }
  .reg-main { grid-template-columns: 1fr; }
  .reg-cart { border-inline-start: 0; border-top: 1px solid var(--line); position: sticky; bottom: 0; max-height: 60vh; }
  .tile-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .tile { min-height: 120px; }
}