/* Demo-only additions on top of the real Clienora POS styles. */

.demo-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; flex: none;
  padding: .45rem 1rem; background: var(--brand); color: var(--brand-ink); font-size: .9rem; }
.demo-bar .spacer { flex: 1; }
.demo-pill { background: var(--brand-ink); color: var(--brand); border-radius: 999px; padding: .1rem .6rem; font-weight: 700; font-size: .8rem; }
.demo-text { min-width: 0; }
.demo-bar .btn { color: var(--brand-ink); border-color: color-mix(in srgb, var(--brand-ink) 45%, transparent); background: transparent; }
.demo-bar .demo-cta { background: var(--brand-ink); color: var(--brand); border-color: var(--brand-ink); font-weight: 700; }
.demo-bar a:hover { text-decoration: none; }
.demo-hint { font-size: .85rem; color: var(--muted); background: var(--surface-2); border-radius: 8px; padding: .5rem .7rem; margin: 0; }

dialog.modal-xl { width: min(880px, calc(100vw - 32px)); }
.modal-body [data-close] { flex: none; }

/* Tables */
.table-scroll { overflow-x: auto; max-height: 60vh; overflow-y: auto; }
.demo-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.demo-table th { text-align: start; color: var(--muted); font-weight: 600; font-size: .8rem; padding: .45rem .5rem;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.demo-table td { padding: .5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.demo-table tr.new td { background: var(--brand-soft); }
.demo-table .btn { padding: .25rem .6rem; }

/* Report */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.kpi { background: var(--surface-2); border-radius: 12px; padding: .7rem .8rem; }
.kpi small { display: block; }
.kpi strong { font-size: 1.35rem; }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.report-grid h3 { margin: 0 0 .3rem; }
@media (max-width: 700px) { .report-grid { grid-template-columns: 1fr; } }
.hours { display: flex; align-items: flex-end; gap: 4px; height: 110px; padding-top: .5rem; border-top: 1px solid var(--line); }
.hours .hbar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; height: 100%; }
.hours .hbar span { width: 100%; background: var(--brand); border-radius: 4px 4px 0 0; min-height: 2px; }
.hours .hbar small { font-size: .7rem; }

/* Receipt preview (80 mm paper) */
.receipt-modal { width: min(420px, calc(100vw - 32px)); }
.receipt-scroll { max-height: 58vh; overflow-y: auto; background: var(--surface-2); border-radius: 12px; padding: .8rem 0; }
.paper { width: 72mm; max-width: 100%; margin: 0 auto; padding: 4mm 3mm 6mm; background: #fff; color: #000;
  font-size: 12px; line-height: 1.45; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.paper .center { text-align: center; }
.paper .logo { width: 14mm; height: 14mm; display: block; margin: 0 auto 1mm; }
.paper h1 { font-size: 15px; margin: 0; }
.paper .doc { font-weight: 700; font-size: 13px; margin: 2mm 0 1mm; border-block: 1px dashed #000; padding: 1mm 0; }
.paper .order { font-size: 30px; font-weight: 700; line-height: 1; margin: 1mm 0; }
.paper .row { display: flex; justify-content: space-between; gap: 2mm; }
.paper hr { border: 0; border-top: 1px dashed #000; margin: 2mm 0; }
.paper table { width: 100%; border-collapse: collapse; }
.paper td { vertical-align: top; padding: .6mm 0; }
.paper td.qty { width: 11mm; padding-inline-end: 1.5mm; white-space: nowrap; }
.paper td.amt { text-align: end; white-space: nowrap; padding-inline-start: 2mm; }
.paper .opts { font-size: 10.5px; opacity: .8; }
.paper .total { font-size: 16px; font-weight: 700; }
.paper .qr { display: flex; justify-content: center; margin: 2mm 0; }
.paper .qr svg, .paper .qr img { width: 30mm; height: 30mm; }
.paper .foot { font-size: 10px; text-align: center; margin-top: 2mm; }
@media (max-width: 640px) {
  .demo-text { display: none; }
  .demo-bar { padding: .35rem .75rem; }
}