/* CameraCashier — shared stylesheet for Web and MAUI Blazor Hybrid */

:root {
    /* Brand primitives (locked — from TallyTill badge) */
    --brand-green:  #1B3D2A;   /* badge background — forest green */
    --brand-amber:  #D97746;   /* badge centre — amber */
    --brand-blue:   #1565C0;   /* ring tones — locked primitive */
    --brand-red:    #B71C1C;   /* error/danger */
    --pay-green:    #2E7D32;   /* payment success indicator (functional, not brand) */

    /* Design system: Direction B (Warm & Approachable) */
    --surface:      #FFFFFF;
    --surface-2:    #faf8f4;   /* warm off-white — matches DS --content-bg */
    --border:       #e2dbd0;   /* DS --border */
    --text:         #1c2a1e;   /* DS --text-primary */
    --text-muted:   #8aa290;   /* DS --text-muted */
    --text-secondary: #4f6855; /* DS --text-secondary */
    --accent:       #d97746;   /* DS --accent (amber) */
    --accent-hover: #c0612e;
    --success:      #2E7D32;
    --success-light: #e8f5e9;
    --warning:      #d97706;
    --warning-light: #fef3c7;
    --danger:       #c62828;
    --danger-light: #fce8e8;

    /* Typography */
    --font-sans:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-mono:  'DM Mono', 'Cascadia Code', ui-monospace, monospace;

    /* Spacing & shape — sharper to match DS */
    --radius:       2px;
    --radius-sm:    2px;
    --radius-md:    4px;
    --radius-full:  9999px;
    --shadow:       0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-xs:    0 1px 2px rgba(0,0,0,.04);
    --shadow-focus: 0 0 0 3px rgba(217, 119, 70, 0.22);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--text);
    background: var(--surface-2);
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

#app { height: 100%; display: flex; flex-direction: column; }
.cc-layout { height: 100%; overflow: hidden; display: flex; flex-direction: column; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    border: none;
    border-radius: var(--radius);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, filter .15s;
    white-space: nowrap;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:not(:disabled):hover { filter: brightness(.93); }

.btn-primary { background: var(--accent); color: #fff; }
.btn-pay     { background: var(--pay-green); color: var(--pay-green-text, #fff); font-size: 1.05rem; padding: .6rem 1.5rem; }
.btn-danger  { background: var(--brand-red); color: var(--brand-red-text, #fff); }
.btn-ghost   { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-ai      { background: #5E35B1; color: #fff; }
.btn-sm      { padding: .35rem .75rem; font-size: .85rem; }

/* Ensure readable button text across theme changes */
.btn-contrast-safe { color: #fff !important; }
.btn-primary.btn-contrast-safe,
.btn-danger.btn-contrast-safe { color: #fff !important; }
.btn-ghost.btn-contrast-safe { color: var(--text) !important; }

/* ── Header ──────────────────────────────────────────────────────── */
.cc-header {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    background: var(--brand-green);
    color: var(--brand-green-text, #fff);
    gap: .75rem;
}
.header-title { font-size: 1.1rem; font-weight: 700; }
.header-actions { display: flex; gap: .5rem; }
.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    pointer-events: none;
    text-align: center;
}
.header-device-name {
    font-size: .7rem;
    font-weight: 400;
    opacity: .72;
    color: var(--brand-green-text, #fff);
    letter-spacing: .02em;
    white-space: nowrap;
}

/* Fullscreen toggle — sits at the right edge of the checkout header */
.btn-fullscreen {
    background: transparent;
    border: none;
    color: var(--brand-green-text, #fff);
    font-size: 1.25rem;
    cursor: pointer;
    padding: .25rem .4rem;
    border-radius: var(--radius-sm, 4px);
    opacity: .6;
    line-height: 1;
    flex-shrink: 0;
    margin-left: auto;
}
.btn-fullscreen:hover { opacity: 1; background: rgba(255,255,255,.15); }
.btn-fullscreen:active { opacity: .8; }

/* Cloud connectivity badge — shown only when cloud sync is configured and offline */
.cloud-offline-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: rgba(251,146,60,.92); /* amber-400 */
    color: #1a1a1a;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .03em;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
}
.cloud-offline-badge::before {
    content: '';
    display: inline-block;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: #92400e;
    flex-shrink: 0;
}

/* Buttons in themed headers need contrast text */
.cc-header .btn,
.cc-header .btn-ghost {
    color: var(--brand-green-text, #fff) !important;
}
.cc-header .btn-ghost {
    border-color: var(--brand-green-text, #fff);
}
.header-actions .btn-ghost {
    color: #fff;
    border-color: rgba(255,255,255,.5);
}

/* Tenant brand (left side of checkout header) */
.header-tenant {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    min-width: 0;
}
.header-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Product brand icon (right side of checkout header) */
.header-product-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.header-product-icon {
    height: 32px;
    width: auto;
    opacity: .85;
    filter: brightness(0) invert(1);  /* white on the green background */
}

/* Footer attribution */
.app-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 1rem;
    font-size: .75rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    margin-top: auto;
}
.footer-company-logo {
    height: 20px;
    width: auto;
    opacity: .6;
}
.footer-attribution { color: var(--text-muted); }

/* ── Logo ────────────────────────────────────────────────────────── */
.logo {
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    letter-spacing: .02em;
    font-family: var(--company-font, inherit);
}
.logo:active { opacity: .8; }

/* ── Status bar ─────────────────────────────────────────────────── */
.scan-status {
    font-size: .82rem;
    font-weight: 600;
    padding: .25rem .75rem;
    border-radius: 20px;
    background: rgba(255,255,255,0.92);
    color: #1B5E20;
    border: 1.5px solid rgba(255,255,255,0.6);
    white-space: nowrap;
    max-width: 55vw;
    overflow: hidden;
    text-overflow: ellipsis;
}
.status-error {
    background: rgba(255,255,255,0.92);
    color: #B71C1C;
}

/* ── Camera section ─────────────────────────────────────────────── */
.camera-section { padding: .5rem 1rem 0; }

/* When robot face is active the camera section becomes the robot's "mouth" */
.camera-section.robot-mouth {
    padding: 0 1rem 0;
}
.camera-section.robot-mouth .camera-continuous,
.camera-section.robot-mouth .camera-picker {
    border: 2px solid #1565C0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 3px 0 #90CAF9;
    transition: border-color .25s, box-shadow .25s;
}

.camera-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 160px;
    background: #1a1a2e;
    border-radius: var(--radius);
    color: #888;
    gap: .5rem;
    font-size: 2rem;
}
.camera-placeholder p { font-size: .9rem; color: #666; }

.camera-live { height: 160px; border-radius: var(--radius); overflow: hidden; }
.scanner-host {
    height: 100%;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scanner-hint { color: #aaa; font-size: .9rem; }

/* ── Camera source picker ───────────────────────────────────────── */
.camera-picker {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.camera-picker-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-muted);
}
.camera-picker-actions {
    display: flex;
    gap: .5rem;
}
.camera-picker-actions .btn { flex: 1; }

/* ── Webcam live preview (legacy) ───────────────────────────────── */
.camera-live-web {
    position: relative;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
}
.webcam-video {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    display: block;
}
.webcam-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: .5rem;
    padding: .6rem;
    background: linear-gradient(transparent, rgba(0,0,0,.6));
}
.webcam-controls .btn { flex: 1; }

/* ── Continuous ML vision camera ────────────────────────────────── */
.camera-continuous {
    position: relative;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
}
.vision-video {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
}
.camera-mirrored { transform: scaleX(-1); }
.vision-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.vision-loading {
    position: absolute;
    bottom: .5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.65);
    color: #ccc;
    font-size: .75rem;
    padding: .2rem .65rem;
    border-radius: 99px;
    white-space: nowrap;
}
/* ── Diffie mic button ──────────────────────────────────────────── */
/* Mic button in robot face wrapper (Plan B — right of eyes) */
.diffie-mic-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--brand-green, #1b3d2a);
    color: #fff;
    cursor: pointer;
    transition: background .15s, transform .1s;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.diffie-mic-btn:hover { background: var(--accent, #d97746); transform: translateY(-50%) scale(1.08); }
/* No-robot fallback: inside camera-continuous at bottom-right (overflow:hidden clips, so use wrapper) */
.diffie-mic-btn.diffie-mic-camera {
    position: absolute;
    bottom: 10px;
    right: 10px;
    top: auto;
    transform: none;
}
.diffie-mic-btn.diffie-mic-camera:hover { transform: scale(1.08); }
.diffie-mic-btn.mic-active {
    background: #c0392b;
    animation: mic-pulse 1.2s infinite ease-in-out;
}
.diffie-mic-btn.mic-session-active {
    outline: 2px solid rgba(255,255,255,.55);
    outline-offset: 2px;
}
@keyframes mic-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.45); }
    50%      { box-shadow: 0 0 0 8px rgba(192,57,43,0); }
}
/* Idle "ask for help" invite: a gentle accent glow + breathing so customers notice the mic is
   tappable. Animates box-shadow only (never transform) so it works for both the top-right and
   in-camera variants without breaking their positioning. Stops once listening/session-active. */
.diffie-mic-btn:not(.mic-active):not(.mic-session-active) {
    animation: mic-invite 2.6s ease-in-out infinite;
}
@keyframes mic-invite {
    0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 0 0 0   rgba(217,119,70,.55); }
    50%      { box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 0 0 9px rgba(217,119,70,0); }
}
@media (prefers-reduced-motion: reduce) {
    .diffie-mic-btn:not(.mic-active):not(.mic-session-active) { animation: none; }
}

/* ── Diffie toast ───────────────────────────────────────────────── */
.diffie-toast-thumbs-down {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(255,255,255,.45);
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    border-radius: 99px;
    transition: color .15s, background .15s;
}
.diffie-toast-thumbs-down:hover  { color: #ef4444; }
.diffie-toast-thumbs-down.voted  { color: #ef4444; background: rgba(239,68,68,.2); border-radius: 99px; }
.diffie-toast-thumbs-up {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(255,255,255,.45);
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    border-radius: 99px;
    transition: color .15s, background .15s;
}
.diffie-toast-thumbs-up:hover { color: #22c55e; }
.diffie-toast-thumbs-up.voted  { color: #22c55e; background: rgba(34,197,94,.2); }
.diffie-toast {
    position: fixed;
    top: 3.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(0,0,0,.82);
    color: #fff;
    padding: .6rem 1.1rem;
    border-radius: 99px;
    font-size: .9rem;
    max-width: min(90vw, 480px);
    z-index: 9999;
    animation: diffie-toast-in .2s ease-out;
}
.diffie-toast-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.diffie-toast-icon { flex-shrink: 0; font-size: 1rem; }
@keyframes diffie-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* "Heard" toast — shows the customer's recognized speech (what STT transcribed) so they get
   immediate confirmation the mic worked. Brand-green to distinguish it from the dark reply toast;
   it's auto-replaced by the reply toast at the same position. */
.diffie-heard-toast {
    position: fixed;
    top: 3.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(27,61,42,.92);
    color: #fff;
    padding: .55rem 1.05rem;
    border-radius: 99px;
    font-size: .9rem;
    max-width: min(90vw, 480px);
    z-index: 9999;
    animation: diffie-toast-in .2s ease-out;
}
.diffie-heard-icon { flex-shrink: 0; font-size: 1rem; }
.diffie-heard-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-style: italic;
}

.cam-switch-btn {
    position: absolute;
    top: .4rem;
    right: .4rem;
    background: rgba(0,0,0,.5);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: .3rem .5rem;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
}
.cam-switch-btn:hover { background: rgba(0,0,0,.75); }

/* ── ML match selection overlay ─────────────────────────────────── */
.match-overlay {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: .5rem 1rem 0;
    padding: .75rem;
    box-shadow: var(--shadow);
}
.match-heading {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: .4rem;
}
.match-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .2rem;
}
.match-pct {
    font-size: .85rem;
    color: var(--text-muted);
    margin-bottom: .6rem;
}
.match-actions {
    display: flex;
    gap: .5rem;
}
.match-actions .btn { flex: 1; }
.match-multiple {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.match-option {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: .95rem;
    text-align: left;
}
.match-option:hover { background: var(--border); }
.match-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--brand-blue);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.match-thumb {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid var(--border);
    margin: .3rem auto .6rem;
}
.match-thumb-sm {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.match-name-sm { flex: 1; font-weight: 600; }
.match-pct-sm  { font-size: .8rem; color: var(--text-muted); }
.match-dismiss { margin-top: .25rem; }

/* ── Input row ───────────────────────────────────────────────────── */
.input-row {
    display: flex;
    gap: .5rem;
    padding: .5rem 1rem;
    align-items: center;
}
.barcode-input {
    flex: 1;
    padding: .55rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .95rem;
}
.barcode-input:focus { outline: 2px solid var(--brand-blue); border-color: transparent; }

/* ── Item search dropdown ────────────────────────────────────────── */
.barcode-wrap {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.barcode-wrap .barcode-input { width: 100%; }
.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--brand-blue);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    z-index: 200;
    max-height: 220px;
    overflow-y: auto;
}
.search-option {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .75rem;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    text-align: left;
    font-size: .9rem;
}
.search-option:last-child { border-bottom: none; }
.search-option:hover, .search-option:focus { background: var(--surface-2); outline: none; }
.search-option-thumb {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.search-option-name  { flex: 1; font-weight: 600; }
.search-option-price { color: var(--text-muted); font-size: .82rem; white-space: nowrap; }

/* ── Session tax override bar ────────────────────────────────────── */
.tax-override-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.tax-override-label { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.tax-override-select {
    flex: 1;
    font-size: .85rem;
    padding: .2rem .4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
}
.food-exempt-badge {
    font-size: .75rem;
    padding: .15rem .5rem;
    border-radius: 99px;
    background: #E8F5E9;
    color: var(--brand-green);
    white-space: nowrap;
    font-weight: 600;
}

/* ── Cart ────────────────────────────────────────────────────────── */
.cart-section {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 0 1rem;
}
.cart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    color: var(--text-muted);
    font-size: .95rem;
}
.cart-list { display: flex; flex-direction: column; gap: .25rem; padding: .25rem 0; }

.cart-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .3rem .6rem;
    box-shadow: var(--shadow);
}
.item-info { flex: 1; min-width: 0; }
.item-name { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-meta-row { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.item-unit-price { font-size: .75rem; color: var(--text-muted); }
.item-tax-exempt { font-size: .67rem; color: var(--brand-green); font-weight: 600; }

.qty-controls { display: flex; align-items: center; gap: .3rem; }
.qty-btn {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.qty-btn:hover { background: var(--border); }
.qty-value { width: 24px; text-align: center; font-weight: 700; }

.item-total { font-weight: 700; min-width: 52px; text-align: right; }
.remove-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 1rem; padding: .15rem;
}
.remove-btn:hover { color: var(--brand-red); }

/* ── Totals ──────────────────────────────────────────────────────── */
.totals-section {
    padding: .4rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.totals-row {
    display: flex;
    justify-content: space-between;
    padding: .15rem 0;
    font-size: .9rem;
    color: var(--text-muted);
}
.totals-grand {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    padding-top: .4rem;
    border-top: 1px solid var(--border);
    margin-top: .2rem;
}

/* ── Pay row ─────────────────────────────────────────────────────── */
.pay-row {
    padding: .55rem 1rem;
    background: var(--surface);
    display: flex;
    gap: 0;
    align-items: stretch;
}
/* New Cart button — same height as Pay, left-rounded only, left-aligned, smaller font */
.pay-row .btn-new-cart {
    background: var(--brand-red);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    padding: .7rem .9rem;
    border: none;
    border-radius: var(--radius) 0 0 var(--radius);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity .15s, filter .15s;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.pay-row .btn-new-cart:hover { filter: brightness(.9); }
/* When New Cart is visible, Pay button loses its left rounding */
.pay-row .btn-new-cart + .btn-pay {
    border-radius: 0 var(--radius) var(--radius) 0;
    flex: 1;
}
/* When New Cart is absent Pay keeps full rounding */
.pay-row .btn-pay:only-child,
.pay-row .btn-pay:first-child {
    border-radius: var(--radius);
    flex: 1;
    width: 100%;
}
.pay-row .btn-pay { flex: 1; }

/* ── Two-column checkout layout (featured left, checkout right) ──── */
.checkout-layout {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--surface-2);
}

/* ── Featured products panel — left column ───────────────────────── */
.featured-section {
    display: none;   /* hidden on mobile */
    flex-direction: column;
    padding: .75rem 1rem .5rem;
    border-right: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
}
.featured-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: .5rem;
}
.featured-search-clear {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: .65rem;
    font-weight: 600;
    padding: .1rem .45rem;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    transition: background .12s, color .12s;
}
.featured-search-clear:hover { background: var(--surface-2); color: var(--text); }

/* Featured panel search row */
.featured-search-row {
    display: flex;
    gap: .35rem;
    margin-bottom: .5rem;
}
.featured-search-input {
    flex: 1;
    padding: .3rem .55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    font-size: .8rem;
    min-width: 0;
}
.featured-search-input:focus {
    outline: none;
    border-color: var(--brand-blue, #6366f1);
}
.featured-mic-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    transition: background .12s, color .12s, border-color .12s;
}
.featured-mic-btn:hover { background: var(--surface-2, #e5e7eb); color: var(--text); }
.featured-mic-btn.active {
    background: #fee2e2;
    border-color: #ef4444;
    color: #ef4444;
    animation: mic-pulse .8s ease-in-out infinite alternate;
}
@keyframes mic-pulse { from { opacity: 1; } to { opacity: .55; } }

/* Framework-free spinner (cashier hosts don't load Bootstrap) */
.cc-spinner {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    vertical-align: middle;
    border: 2px solid color-mix(in srgb, var(--brand-green) 30%, transparent);
    border-top-color: var(--brand-green);
    border-radius: 50%;
    animation: cc-spin .7s linear infinite;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* Inline chevron that flips on expand (replaces Bootstrap-Icons bi-chevron-*) */
.cc-chevron { transition: transform .15s; }
.cc-chevron.up { transform: rotate(180deg); }
.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: .5rem;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    align-content: start;
}
.featured-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .5rem .25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    text-align: center;
    font-size: .75rem;
    transition: filter .15s;
}
.featured-card:hover { filter: brightness(.92); }
.featured-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: calc(var(--radius) - 2px);
}
.featured-thumb-placeholder {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border-radius: calc(var(--radius) - 2px);
    font-size: 1.6rem;
}
.featured-name { font-weight: 600; color: var(--text); line-height: 1.2; }
.featured-price { color: var(--brand-green, #2a9d4e); font-weight: 700; }

/* Category filter bar */
.featured-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .5rem;
}
.featured-filter-btn {
    padding: .2rem .55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    white-space: nowrap;
}
.featured-filter-btn:hover { background: var(--surface); color: var(--text); }
.featured-filter-btn.active {
    background: var(--brand-blue, #2563eb);
    border-color: var(--brand-blue, #2563eb);
    color: #fff;
}
.featured-filter-select {
    font-size: .75rem;
    padding: .2rem .4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    margin-bottom: .5rem;
}

/* Featured / checkout responsive overrides live after .checkout-page base rule below */

/* ── Modal body text ─────────────────────────────────────────────── */
.modal-body { font-size: .95rem; color: var(--text-muted); margin: 0; }

/* ── Full checkout layout ────────────────────────────────────────── */
.checkout-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: var(--surface-2);
}

/* Show featured left column on tablets and larger — featured expands, checkout fixed right */
@media (min-width: 768px) {
    .featured-section {
        display: flex;
        flex: 1;
        min-width: 0;
    }
    .checkout-page {
        flex: 0 0 460px;
        width: 460px;
        min-width: 320px;
        margin: 0;
    }
}

/* Wider checkout column on large tablets (kiosk displays) */
@media (min-width: 1100px) {
    .checkout-page {
        flex: 0 0 520px;
        width: 520px;
    }
}

/* ── MAUI / native app overrides ──────────────────────────────────── */
/* Hide the web fullscreen toggle — MAUI uses Android immersive mode */
.maui-app .btn-fullscreen { display: none !important; }

/* Empty featured panel: show a friendly placeholder instead of blank white */
.featured-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: var(--text-muted);
    text-align: center;
    padding: 2rem 1.5rem;
}
.featured-empty-icon { font-size: 3rem; opacity: .35; }
.featured-empty-title { font-size: .95rem; font-weight: 700; color: var(--text); }
.featured-empty-hint { font-size: .8rem; line-height: 1.5; }

/* ── Admin page ──────────────────────────────────────────────────── */
.admin-page { background: var(--surface); width: 100%; flex: 1; overflow-y: auto; }

/* ── Categories management page ─────────────────────────────────── */
.categories-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
    align-items: start;
}
@media (max-width: 600px) {
    .categories-layout { grid-template-columns: 1fr; }
}
.cat-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}
.cat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .75rem;
    background: var(--surface-2, #f8f8f8);
    border-bottom: 1px solid var(--border);
}
.cat-panel-header h3 { margin: 0; font-size: .95rem; font-weight: 700; }
.cat-list { display: flex; flex-direction: column; }
.cat-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .75rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .15s;
}
.cat-row:last-child { border-bottom: none; }
.cat-row:hover { background: var(--surface-2, #f5f5f5); }
.cat-row-selected { background: color-mix(in srgb, var(--brand-blue, #6d4c41) 10%, transparent); }
.cat-name { flex: 1; font-size: .92rem; font-weight: 600; }
.cat-count { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }
.cat-edit-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .75rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--brand-blue, #6d4c41) 6%, transparent);
}
.cat-name-input { flex: 1; }
.field-input-sm { width: 5rem !important; }
.cat-empty { padding: 1.2rem .75rem; font-size: .88rem; color: var(--text-muted); text-align: center; }
.product-list { padding: .5rem 1rem; display: flex; flex-direction: column; gap: .4rem; }
.product-row {
    display: flex;
    align-items: center;
    padding: .6rem .75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    gap: .5rem;
}
.product-info { flex: 1; min-width: 0; }
.product-name { font-weight: 600; display: block; }
.product-meta { font-size: .82rem; color: var(--text-muted); }
.dirty-badge {
    display: inline-block;
    background: #FFF9C4;
    color: #827717;
    border-radius: 4px;
    padding: 0 .35rem;
    font-size: .75rem;
    margin-left: .25rem;
    border: 1px solid #F9A825;
}
.fab-row { padding: 1rem; display: flex; justify-content: center; }

/* ── Forms (edit, settings) ─────────────────────────────────────── */
.edit-page, .settings-page { background: var(--surface); width: 100%; flex: 1; overflow-y: auto; }
.form-body, .settings-body { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }

.settings-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .75rem;
}
.section-title { font-weight: 700; margin-bottom: .6rem; color: var(--brand-green); }
.section-note  { font-size: .85rem; color: var(--text-muted); margin-bottom: .6rem; }

.field-group { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .6rem; }
.field-group label { font-size: .85rem; font-weight: 600; color: var(--text-muted); }
.field-group-center { justify-content: center; }
.toggle-label { display: flex; align-items: center; gap: .4rem; font-weight: normal; cursor: pointer; padding-top: .35rem; }
.toggle-label input[type=checkbox] { width: 1rem; height: 1rem; cursor: pointer; }
.field-row { display: flex; gap: .75rem; }
.field-row .field-group { flex: 1; }

.field-input, .field-select {
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .95rem;
    background: var(--surface);
}
.field-input:focus, .field-select:focus {
    outline: 2px solid var(--brand-blue);
    border-color: transparent;
}

.connect-btn { margin-top: .35rem; width: 100%; }

.field-note { font-size: .8rem; color: var(--text-muted); margin-top: .25rem; }

.btc-rate-row { display: flex; gap: .5rem; align-items: center; }
.btc-rate-input { flex: 1; background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }

.suggest-tax-btn { margin-top: .5rem; }

.barcode-input-row { display: flex; gap: .5rem; align-items: center; }
.barcode-input-row .field-input { flex: 1; }
.barcode-scan-btn { white-space: nowrap; }

.barcode-scan-live { position: relative; width: 100%; }
.barcode-video { width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--radius); background: #000; }
.barcode-scan-overlay { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; }
.scan-status { font-size: .85rem; color: var(--text-muted); flex: 1; }

.required { color: var(--brand-red); }
.validation-error { color: var(--brand-red); font-size: .9rem; padding: .4rem .6rem; background: #FFEBEE; border-radius: var(--radius); }
.status-message   { color: var(--brand-green); font-size: .9rem; padding: .4rem .6rem; background: #E8F5E9; border-radius: var(--radius); }
.form-actions { display: flex; gap: .75rem; padding-top: .5rem; }
.form-actions .btn-pay { flex: 1; }

/* ── Payment page ────────────────────────────────────────────────── */
.payment-page { display: flex; flex-direction: column; background: var(--surface); width: 100%; flex: 1; overflow-y: auto; }
.total-display { text-align: center; padding: 1.5rem 1rem; }
.total-label   { font-size: 1rem; color: var(--text-muted); margin-bottom: .25rem; }
.total-amount  { font-size: 3rem; font-weight: 900; color: var(--brand-green); }
.breakdown-row {
    display: flex;
    justify-content: space-between;
    font-size: .9rem;
    color: var(--text-muted);
    padding: .1rem 1.5rem;
    margin-bottom: .1rem;
}
.breakdown-divider {
    height: 1px;
    background: var(--border);
    margin: .5rem 1.5rem .75rem;
}
.no-methods    { text-align: center; padding: 2rem; color: var(--text-muted); }
.no-methods p  { margin-bottom: .5rem; }

.cash-check-fallback {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.txn-id-block {
    background: var(--surface-2, #f5f5f5);
    border: 2px dashed var(--brand-green, #333);
    border-radius: 8px;
    text-align: center;
    padding: .75rem 1rem;
}
.txn-id-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.txn-id-value { font-size: 2rem; font-weight: 700; letter-spacing: .15em; font-family: monospace; color: var(--brand-green, #333); margin: .15rem 0; }
.txn-id-hint  { font-size: .78rem; color: var(--text-muted); }

.cash-check-prompt { font-size: .95rem; font-weight: 600; text-align: center; margin: .25rem 0 -.25rem; }

.cash-check-card {
    background: var(--surface, #fff);
    border: 2px solid var(--border, #ddd);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.cash-check-card:hover        { border-color: var(--brand-green, #333); }
.cash-check-card.selected     { border-color: var(--brand-green, #2e7d32); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-green, #2e7d32) 20%, transparent); }
.cash-check-card-top          { display: flex; align-items: center; gap: .5rem; }
.cash-check-icon              { font-size: 1.4rem; flex-shrink: 0; }
.cash-check-title             { font-size: 1rem; font-weight: 600; flex: 1; }
.cash-check-selected-mark     { font-size: 1.1rem; font-weight: 700; color: var(--brand-green, #2e7d32); }
.cash-check-instructions      { font-size: .88rem; color: var(--text-muted); line-height: 1.5; }

/* ── Cash secondary toggle (shown when QR methods also present) ────── */
.cash-alt-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1.25rem;
    font-size: .9rem;
    color: var(--text-muted);
    cursor: pointer;
    border-top: 1px solid var(--border, #eee);
    user-select: none;
}
.cash-alt-toggle:hover { color: var(--brand-green, #333); }

/* ── Honor-mode envelope code panel ───────────────────────────────── */
.honor-code-panel {
    background: var(--surface-2, #f5f5f5);
    border: 2px dashed var(--brand-green, #333);
    border-radius: 8px;
    text-align: center;
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.honor-code-label        { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.honor-code-value        { font-size: 2.4rem; font-weight: 700; letter-spacing: .25em; font-family: monospace; color: var(--brand-green, #333); }
.honor-code-instructions { font-size: .88rem; color: var(--text-muted); line-height: 1.5; margin-top: .2rem; }

/* ── Change due panel ──────────────────────────────────────────────── */
.change-due-panel {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.change-due-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.change-due-denoms {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}
.change-denom-btn {
    padding: .35rem .75rem;
    border-radius: 99px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.change-denom-btn:hover  { border-color: var(--brand-green, #2e7d32); }
.change-denom-btn.active { background: var(--brand-green, #2e7d32); border-color: var(--brand-green, #2e7d32); color: #fff; }
.change-due-input {
    width: 100%;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: .45rem .7rem;
    font-size: 1rem;
    background: #fff;
    box-sizing: border-box;
}
.change-due-input:focus { outline: none; border-color: var(--brand-green, #2e7d32); }
.change-due-result {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background: #dcfce7;
    border-radius: 8px;
    padding: .5rem .75rem;
}
.change-due-result.change-due-short { background: #fef2f2; }
.change-due-result-label  { font-size: .85rem; color: #166534; font-weight: 600; }
.change-due-result.change-due-short .change-due-result-label { color: #991b1b; }
.change-due-result-amount { font-size: 1.4rem; font-weight: 800; color: #15803d; }
.change-due-result.change-due-short .change-due-result-amount { color: #dc2626; }

.qr-scroll {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding: .5rem 1rem 1rem;
}
.qr-card {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}
.qr-label {
    font-weight: 700;
    font-size: 1.05rem;
    width: 100%;
    text-align: center;
    padding-bottom: .4rem;
    margin-bottom: .6rem;
    border-bottom: 2px solid var(--accent, #1e6fff);
}
.qr-image { width: 160px; height: 160px; image-rendering: pixelated; }
.qr-hint  { font-size: .78rem; color: var(--text-muted); margin-top: .5rem; }

/* Mobile portrait: 2-column QR grid so the 3rd card isn't clipped */
@media (max-width: 480px) {
    .qr-card  { flex: 0 0 calc(50% - .5rem); }
    .qr-image { width: 120px; height: 120px; }
}

.honor-note {
    text-align: center;
    padding: .75rem;
    color: var(--text-muted);
    font-size: .9rem;
}
.payment-confirm-note {
    text-align: center;
    padding: .25rem 1rem .5rem;
    color: var(--brand-green);
    font-size: .8rem;
    font-weight: 600;
}
.payment-actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .75rem 1rem 1.5rem;
}
.payment-actions .btn { width: 100%; }

/* ── Receipt prompt ──────────────────────────────────────────────── */
.receipt-prompt {
    margin: .5rem 1rem 1.5rem;
    padding: 1.25rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-top: 3px solid var(--brand-green);
}
.receipt-prompt-check {
    font-size: .85rem;
    font-weight: 700;
    color: var(--brand-green);
    margin-bottom: .35rem;
}
.receipt-prompt-heading { margin: 0 0 1rem; font-size: 1.05rem; }
.receipt-actions {
    display: flex;
    gap: .5rem;
    margin-top: .75rem;
}
.receipt-msg { font-size: .85rem; margin: .35rem 0 0; }
.receipt-error { color: var(--brand-red); }
.receipt-sent  { color: #2E7D32; font-weight: 600; }

/* ── Contact form (payment page) ─────────────────────────────────── */
.contact-form {
    margin: .25rem 1rem .75rem;
    padding: 1.25rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-top: 3px solid var(--accent);
}
.contact-form-heading { margin: 0 0 .75rem; font-size: 1.05rem; }
.required-star { color: var(--brand-red); }

/* ── Payment pending notice ──────────────────────────────────────── */
.receipt-pending-notice {
    background: #fff8e1;
    border-left: 4px solid #f9a825;
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: .75rem 1rem;
    margin: .5rem 0 1rem;
    font-size: .88rem;
    color: #5d4037;
    line-height: 1.5;
}
.receipt-pending-notice strong { display: block; margin-bottom: .25rem; color: #e65100; }
.receipt-pending-notice p { margin: 0; }

/* ── Modal (PIN dialog) ──────────────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
}
.modal-box {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    width: min(320px, 90vw);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.modal-box h3 { font-size: 1.1rem; }
.modal-hint { font-size: .9rem; color: var(--text-muted); margin: 0; text-align: center; }
.pin-input {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1.2rem;
    text-align: center;
    letter-spacing: .3em;
}
.pin-error { color: var(--brand-red); font-size: .9rem; }
.modal-actions { display: flex; gap: .6rem; }
.modal-actions .btn { flex: 1; }

/* ── Cart thumbnail ──────────────────────────────────────────────── */
.cart-thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

/* ── Product image management ────────────────────────────────────── */
.image-capture-row {
    display: flex;
    gap: .5rem;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
    padding: .25rem 0;
}

.image-card {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}

.image-card.is-thumbnail {
    border-color: var(--brand-green);
}

.image-preview {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--surface-2);
}

.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: var(--surface-2);
}

.thumbnail-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: var(--brand-green);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: .1rem .35rem;
    border-radius: 4px;
}

.image-card-actions {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .5rem;
}

.training-toggle {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: .15rem 0;
}

.training-toggle input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--brand-blue);
}

/* ── Misc ────────────────────────────────────────────────────────── */
.loading    { padding: 2rem; text-align: center; color: var(--text-muted); }
.not-found  { padding: 2rem; text-align: center; color: var(--text-muted); }

/* ── Reports page ────────────────────────────────────────────────── */
.reports-page { background: var(--surface); width: 100%; flex: 1; overflow-y: auto; }

.report-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    background: var(--surface-2);
}
.tab-btn {
    padding: .65rem 1.4rem;
    border: none;
    background: none;
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: var(--text); }
.tab-active { color: var(--brand-green) !important; border-bottom-color: var(--brand-green) !important; }

.report-section { padding: 1rem; }
.report-section-scroll { overflow-y: auto; max-height: calc(100vh - 80px); }

.report-filters {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}
.filter-row {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
.filter-row .field-group { flex: 1; min-width: 140px; }
.report-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Product sheet card */
.product-sheet {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow);
}
/* .sheet-row is the main horizontal layout: thumb | body | catalog-QR */
.sheet-row, .sheet-top {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.sheet-thumb {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.sheet-body { flex: 1; }
.sheet-name  { font-size: 1.4rem; font-weight: 800; margin-bottom: .3rem; color: var(--text); }
.sheet-desc  { color: var(--text-muted); font-size: .95rem; margin-bottom: .5rem; }
.sheet-price { font-size: 1.5rem; font-weight: 900; color: var(--brand-green); }

.sheet-qr-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border);
}
.sheet-qr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
}
.sheet-qr-label { font-weight: 700; font-size: .85rem; }
.sheet-qr-img   { width: 110px; height: 110px; image-rendering: pixelated; }
.sheet-qr-hint  { font-size: .72rem; color: var(--text-muted); text-align: center; }

/* Catalog QR — green dashed outline, sits inline at the right of sheet-row */
.sheet-qr-item-catalog .sheet-qr-label { color: var(--brand-green); }
.sheet-qr-item-catalog .sheet-qr-hint  { color: var(--brand-green); font-weight: 600; }
.sheet-qr-item-catalog .sheet-qr-img   {
    outline: 2.5px dashed var(--brand-green);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Sales report */
.report-summary {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: .75rem;
    font-size: .9rem;
    color: var(--text-muted);
}
.report-empty { padding: 2rem; text-align: center; color: var(--text-muted); }

.report-table-wrap { overflow-x: auto; }
.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.report-table th, .report-table td {
    padding: .5rem .75rem;
    border: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}
.report-table th {
    background: var(--surface-2);
    font-weight: 700;
    color: var(--text-muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.report-table tbody tr:nth-child(even) { background: var(--surface-2); }
.report-table .col-num   { text-align: right; }
.report-table .col-txnid { font-size: .78rem; white-space: nowrap; }
.txnid-link { color: var(--brand-green); text-decoration: none; font-family: monospace; }
.txnid-link:hover { text-decoration: underline; }
.totals-foot td {
    font-weight: 800;
    background: var(--surface-2);
    border-top: 2px solid var(--border);
}

.print-report-header { margin-bottom: .75rem; }
.print-report-header h2 { font-size: 1.4rem; }
.print-report-header p  { color: var(--text-muted); font-size: .9rem; }

/* ── Print styles ────────────────────────────────────────────────── */
.print-only { display: none; }

@media print {
    .no-print   { display: none !important; }
    .print-only { display: block !important; }

    body, html { background: white; }

    .reports-page { max-width: none; box-shadow: none; }

    .product-sheet { border: 1px solid #ccc; box-shadow: none; page-break-after: always; }
    .product-sheet:last-child { page-break-after: avoid; }

    .report-table th                          { background: #eee !important; }
    .report-table tbody tr:nth-child(even)    { background: #f9f9f9 !important; }
    .totals-foot td                           { background: #eee !important; }
    .report-summary                           { background: #f5f5f5 !important; }
}

/* ── Image Editor Modal ────────────────────────────────────────────── */
/* ── Cloud Account section ──────────────────────────────────────────── */
.cloud-status {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .5rem .75rem; border-radius: var(--radius);
    font-size: .875rem; font-weight: 600; margin-bottom: .75rem;
}
.cloud-status-connected { background: #E8F5E9; color: #2E7D32; border: 1px solid #A5D6A7; }
.cloud-device-id { font-family: monospace; font-size: .78rem; font-weight: 400; color: #555; }
.cloud-sync-row  { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* Connection indicator dot on collapsed section header */
.cloud-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: .4rem; flex-shrink: 0; }
.cloud-dot-on  { background: #4CAF50; box-shadow: 0 0 4px #4CAF50; }
.cloud-dot-off { background: #bbb; }

/* Read-only field display for connected state */
.field-value-readonly { font-size: .875rem; color: #333; padding: .35rem 0; word-break: break-all; }
.key-masked { font-family: monospace; letter-spacing: .05em; color: #777; display: flex; align-items: center; gap: .25rem; }
.key-last4  { color: #333; font-weight: 600; letter-spacing: normal; }

.img-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
}
.img-editor-modal {
    background: var(--surface);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    width: min(620px, 96vw);
    max-height: 94vh;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.img-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.img-editor-title { font-weight: 600; font-size: 1rem; }
.img-editor-canvas-wrap {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem;
    background: #111;
    min-height: 120px;
}
.img-editor-canvas-wrap canvas {
    max-width: 100%;
    max-height: 46vh;
    object-fit: contain;
    cursor: crosshair;
    display: block;
    touch-action: none;
}
.img-editor-hint {
    font-size: .72rem;
    color: #aaa;
    padding: .2rem 0 0;
}
.img-editor-controls {
    padding: .6rem 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex-shrink: 0;
}
.editor-control-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.editor-slider-label {
    width: 76px;
    font-size: .82rem;
    flex-shrink: 0;
}
.editor-control-row input[type=range] {
    flex: 1;
    min-width: 80px;
    accent-color: var(--brand-green);
}
.editor-slider-val {
    width: 38px;
    font-size: .78rem;
    text-align: right;
    color: var(--text-muted);
    flex-shrink: 0;
}
.img-editor-actions {
    display: flex;
    gap: .5rem;
    padding: .65rem 1rem;
    border-top: 1px solid var(--border);
    justify-content: flex-end;
    flex-shrink: 0;
}

/* ── Collapsible settings section headers ───────────────────────── */
.section-header {
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    padding: .25rem 0 .4rem;
    cursor: pointer;
    font-size: inherit;
    gap: .5rem;
    text-align: left;
}
.section-header:hover { opacity: .82; }
.section-header .section-title { margin-bottom: 0; }
.section-icon { font-size: 1.15rem; flex-shrink: 0; }
.section-chevron { margin-left: auto; font-size: .75rem; transition: transform .2s; flex-shrink: 0; }
.section-chevron.open { transform: rotate(0deg); }
.section-chevron:not(.open) { transform: rotate(-90deg); }
.section-content {
    animation: sectionFade .12s ease;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
@keyframes sectionFade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

/* ── Diagnostics ─────────────────────────────────────────────────────── */
.diag-row   { display: flex; align-items: flex-start; gap: .5rem; }
.diag-value { flex: 1; min-width: 0; }
.diag-path  { font-family: monospace; font-size: .8rem; word-break: break-all; }
.diag-copy  { flex-shrink: 0; font-size: .75rem; padding: .15rem .5rem; }

/* ── Branding ────────────────────────────────────────────────────── */
.logo-preview { max-width: 140px; max-height: 64px; margin-top: .5rem; border-radius: 4px; border: 1px solid var(--border); display: block; }
.color-input-row { display: flex; gap: .75rem; align-items: center; }
.color-swatch { width: 42px; height: 42px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; padding: 2px; flex-shrink: 0; }

.theme-preset-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.theme-preset-btn {
    display: flex; align-items: center; gap: .35rem;
    padding: .3rem .55rem; border: 2px solid var(--border);
    border-radius: var(--radius); background: var(--surface);
    cursor: pointer; font-size: .8rem; color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.theme-preset-btn:hover { border-color: var(--brand-green); box-shadow: 0 0 0 2px rgba(46,125,50,.15); }
.theme-preset-btn.active { border-color: var(--brand-green); box-shadow: 0 0 0 2px rgba(46,125,50,.25); }
.preset-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.12); }
.preset-name { white-space: nowrap; }

/* ── Transaction Photos settings ────────────────────────────────── */
.photo-event-row { display: flex; flex-direction: column; gap: .45rem; margin-top: .25rem; }
.photo-event-label { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .9rem; font-weight: normal; }
.photo-event-label input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--brand-green); cursor: pointer; }

/* ── Session status badges ───────────────────────────────────────── */
.status-completed { display: inline-block; background: #E8F5E9; color: var(--brand-green); padding: .15rem .55rem; border-radius: 20px; font-size: .78rem; font-weight: 600; }
.status-abandoned { display: inline-block; background: #FFF3E0; color: #E65100; padding: .15rem .55rem; border-radius: 20px; font-size: .78rem; font-weight: 600; }
.session-row-abandoned td { color: var(--text-muted); }

/* ── Abandoned cart summary ──────────────────────────────────── */
.abandoned-summary {
    display: flex; flex-wrap: wrap; gap: .75rem;
    margin-bottom: 1rem;
}
.ab-stat {
    flex: 1; min-width: 120px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .75rem 1rem;
    text-align: center;
}
.ab-stat-loss { border-color: #E65100; background: #FFF3E0; }
.ab-stat-value { font-size: 1.45rem; font-weight: 800; color: var(--text); }
.ab-stat-loss .ab-stat-value { color: #E65100; }
.ab-stat-label { font-size: .72rem; color: var(--text-muted); margin-top: .15rem; text-transform: uppercase; letter-spacing: .04em; }
.lost-value { color: #C62828; font-weight: 600; }

/* ── Payment Reconciliation ─────────────────────────────────────── */
.recon-summary { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.recon-stat { flex: 1; min-width: 110px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .65rem .9rem; text-align: center; }
.recon-stat-disputed { border-color: #E65100; }
.recon-stat-loss     { border-color: #C62828; background: #FFEBEE; }
.recon-stat-value    { font-size: 1.3rem; font-weight: 800; }
.recon-stat-label    { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: .1rem; }
.recon-card {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: .6rem;
}
.recon-disputed { border-color: #E65100; background: #FFF3E0; }
.recon-card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3rem; }
.recon-card-meta   { display: flex; gap: .55rem; align-items: baseline; flex-wrap: wrap; }
.recon-method      { font-weight: 700; font-size: .85rem; }
.recon-time        { font-size: .78rem; color: var(--text-muted); }
.recon-card-total  { font-weight: 800; color: #C62828; font-size: 1.05rem; }
.recon-card-items  { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.recon-item        { font-size: .8rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .15rem .5rem; }
.recon-card-actions { display: flex; gap: .5rem; }
.recon-status-badge { display: inline-block; padding: .15rem .5rem; border-radius: 10px; font-size: .75rem; font-weight: 600; }
.recon-badge-pending     { background: #FFF9C4; color: #F57F17; }
.recon-badge-received    { background: #E8F5E9; color: #2E7D32; }
.recon-badge-disputed    { background: #FFF3E0; color: #E65100; }
.recon-badge-voided      { background: #ECEFF1; color: #546E7A; }
.recon-row-disputed td { background: #FFF8F0; }
.recon-action-cell { display: flex; gap: .35rem; flex-wrap: wrap; }

/* ── Tab alert badge dot ─────────────────────────────────────────── */
.tab-alert-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--brand-red, #C62828);
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* ── Dispute modal overrides ─────────────────────────────────────── */
.modal-title { font-size: 1.1rem; font-weight: 700; }
.dispute-note-input { width: 100%; resize: vertical; }
.field-error { color: var(--brand-red, #C62828); font-size: .85rem; margin-top: .25rem; }

/* ── Transaction notes ───────────────────────────────────────────── */
.txn-notes-list { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .75rem; }
.txn-note-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: .15rem .5rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .55rem .75rem;
}
.txn-note-meta {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    gap: .5rem;
    align-items: baseline;
}
.txn-note-delete { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.txn-note-by   { font-size: .78rem; font-weight: 700; color: var(--text); }
.txn-note-time { font-size: .73rem; color: var(--text-muted); }
.txn-note-text { grid-column: 1; grid-row: 2; font-size: .9rem; white-space: pre-wrap; word-break: break-word; }
.txn-add-note  { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.txn-note-input { width: 100%; resize: vertical; }

/* ── Transaction detail page ─────────────────────────────────────── */
.transaction-detail-page { background: var(--surface); width: 100%; flex: 1; overflow-y: auto; }
.detail-body { display: flex; flex-direction: column; }
.detail-meta { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.detail-date { font-weight: 700; font-size: 1rem; }
.detail-section { padding: .75rem 1rem 1rem; border-bottom: 1px solid var(--border); }
.detail-section:last-child { border-bottom: none; }
.detail-section-title { font-size: .8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }

/* ── Photo grid ──────────────────────────────────────────────────── */
.photo-grid { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .25rem; }
.photo-card {
    width: 130px; border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; background: var(--surface-2);
    cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.photo-card:hover { transform: scale(1.04); box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.photo-thumb-wrap { position: relative; }
.photo-img  { width: 100%; height: 97px; object-fit: cover; display: block; }
.photo-zoom-hint {
    position: absolute; bottom: 4px; right: 4px;
    background: rgba(0,0,0,.55); color: #fff;
    font-size: .7rem; border-radius: 3px; padding: 1px 4px;
    pointer-events: none; opacity: 0; transition: opacity .12s;
}
.photo-card:hover .photo-zoom-hint { opacity: 1; }
.photo-meta { padding: .3rem .4rem; }
.photo-event   { font-size: .73rem; font-weight: 700; color: var(--brand-green); }
.photo-product { font-size: .73rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-time    { font-size: .68rem; color: var(--text-muted); }

/* ── Lightbox ─────────────────────────────────────────────────── */
.lightbox-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.9);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 1.25rem 1rem;
    outline: none;
    animation: lb-fade-in .15s ease;
}
@keyframes lb-fade-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox-content {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    gap: .65rem; max-height: 100%;
}
.lightbox-close {
    position: absolute; top: -2.4rem; right: -.5rem;
    background: transparent; border: none;
    color: #fff; font-size: 1.4rem; cursor: pointer;
    padding: .2rem .45rem; line-height: 1; border-radius: 4px;
    opacity: .75; transition: opacity .12s, background .12s;
}
.lightbox-close:hover { opacity: 1; background: rgba(255,255,255,.12); }
.lightbox-main {
    position: relative; display: flex; align-items: center; justify-content: center;
}
.lightbox-img {
    max-width: min(82vw, 680px);
    max-height: 58vh;
    object-fit: contain;
    border-radius: 6px;
    display: block;
    background: #111;
    animation: lb-scale-in .15s ease;
}
@keyframes lb-scale-in { from { transform: scale(.96); } to { transform: scale(1); } }
.lightbox-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.55); border: none; color: #fff;
    font-size: 2.8rem; line-height: 1; cursor: pointer;
    padding: .3rem .55rem; border-radius: 4px; z-index: 1;
    transition: background .12s; user-select: none;
}
.lightbox-arrow:hover { background: rgba(0,0,0,.85); }
.lightbox-prev { left: -3.8rem; }
.lightbox-next { right: -3.8rem; }
.lightbox-footer {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; color: #ccc; font-size: .85rem;
    padding: 0 .1rem;
}
.lightbox-meta { display: flex; gap: .55rem; align-items: baseline; flex-wrap: wrap; }
.lightbox-event   { font-weight: 700; color: var(--brand-green); }
.lightbox-product { color: #bbb; }
.lightbox-time    { color: #777; font-size: .78rem; }
.lightbox-counter { color: #777; font-size: .8rem; white-space: nowrap; padding-left: 1rem; }
.lightbox-strip {
    display: flex; gap: .35rem; overflow-x: auto;
    max-width: min(82vw, 680px);
    padding: .15rem .05rem .25rem;
    scrollbar-width: thin; scrollbar-color: #444 transparent;
}
.lightbox-strip-thumb {
    width: 60px; height: 45px; object-fit: cover;
    border-radius: 4px; cursor: pointer; flex-shrink: 0;
    border: 2px solid transparent; opacity: .5;
    transition: opacity .12s, border-color .12s;
}
.lightbox-strip-thumb:hover { opacity: .8; }
.lightbox-strip-thumb.active { border-color: var(--brand-green); opacity: 1; }

/* ── Robot Face ──────────────────────────────────────────────────── */
.robot-face-wrapper {
    position: relative;
    background: #dceeff;
    border: 2px solid #1a1a2e;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    margin: .5rem 1rem 0;
    padding: 8px 12px 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; /* eyes stay centered */
    min-height: 68px;
}

.robot-face {
    display: flex;
    gap: 24px;
    align-items: flex-end;
    flex-shrink: 0;
    /* centered in the wrapper — bubble is absolute so it doesn't push eyes */
}

.robot-eye-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.robot-brow {
    width: 42px;
    height: 7px;
    background: #1565C0;
    border-radius: 4px;
    transform-origin: center center;
}

.robot-eye-sock {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #1565C0;
    box-shadow: 0 3px 0 #90CAF9;
    overflow: hidden;
    transition: border-color .3s;
}

.robot-eye-sock svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Speech bubble — absolute right side, text right-aligned, left-pointing tail */
.robot-bubble {
    position: absolute;
    right: 10px;
    top: 20%;
    transform: translateY(-50%);
    max-width: 42%;
    background: #fff;
    border: 1.5px solid #b0c8e8;
    border-radius: 12px;
    padding: 7px 11px;
    font-size: .82rem;
    line-height: 1.35;
    color: #1a2a40;
    text-align: right;
    word-break: break-word;
    white-space: normal;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
    z-index: 10;
}
.robot-bubble.show { opacity: 1; }
/* left-pointing tail */
.robot-bubble::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 7px 9px 7px 0;
    border-style: solid;
    border-color: transparent #b0c8e8 transparent transparent;
}
.robot-bubble::after {
    content: '';
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 8px 6px 0;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    z-index: 1;
}

/* Scan sweep bar — full-width strip at the bottom of the face wrapper */
.robot-scanbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}
.robot-scanbar.active {
    background: linear-gradient(90deg, transparent 0%, #FF9800 40%, #FF9800 60%, transparent 100%);
    background-size: 200% 100%;
    animation: robotSweep 1.2s linear infinite;
}

/* Eyebrow keyframes */
@keyframes browHappyL  { 0%{transform:translateY(0) rotate(0)}  35%{transform:translateY(-7px) rotate(-6deg)} 100%{transform:translateY(0) rotate(0)} }
@keyframes browHappyR  { 0%{transform:translateY(0) rotate(0)}  35%{transform:translateY(-7px) rotate(6deg)}  100%{transform:translateY(0) rotate(0)} }
@keyframes browSadL    { 0%{transform:translateY(0) rotate(0)}  35%{transform:translateY(4px) rotate(9deg)}   100%{transform:translateY(0) rotate(0)} }
@keyframes browSadR    { 0%{transform:translateY(0) rotate(0)}  35%{transform:translateY(4px) rotate(-9deg)}  100%{transform:translateY(0) rotate(0)} }
@keyframes browPonderL { 0%{transform:translateY(0) rotate(0)}  50%{transform:translateY(-3px) rotate(-2deg)} 100%{transform:translateY(0) rotate(0)} }
@keyframes browPonderR { 0%{transform:translateY(0) rotate(0)}  50%{transform:translateY(-3px) rotate(2deg)}  100%{transform:translateY(0) rotate(0)} }

/* Blink: scaleY on the whole eye socket (squints it shut) */
@keyframes robotBlink {
    0%,80%,100% { transform: scaleY(1); }
    88%          { transform: scaleY(0.08); }
}
.robot-eye-sock {
    animation: robotBlink 4s ease-in-out infinite;
}

/* Idle brow float — gentle continuous raise/lower when no override is active */
@keyframes browIdleFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-3px); }
}
.robot-brow {
    animation: browIdleFloat 3.5s ease-in-out infinite;
}

/* Talking mouth — pulse the camera border when robot is speaking */
@keyframes robotTalkPulse {
    0%,100% { border-color: #1565C0; box-shadow: 0 3px 0 #90CAF9; }
    25%     { border-color: #42A5F5; box-shadow: 0 4px 0 #90CAF9, 0 0 8px rgba(66,165,245,.5); }
    75%     { border-color: #0D47A1; box-shadow: 0 2px 0 #90CAF9; }
}
.camera-section.robot-mouth.robot-talking .camera-continuous,
.camera-section.robot-mouth.robot-talking .camera-picker {
    animation: robotTalkPulse 0.45s ease-in-out infinite;
}

@keyframes robotSockBounce { 0%{transform:scale(1)} 40%{transform:scale(1.13)} 70%{transform:scale(0.95)} 100%{transform:scale(1)} }
@keyframes robotSweep  { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* ── Receivables tab ─────────────────────────────────────────────── */
.btn-warning       { background: #e65100; color: #fff; }
.btn-warning:not(:disabled):hover { filter: brightness(.88); }
.btn-warning.btn-sent { background: var(--success); opacity: .85; }

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--brand-red, #C62828);
    color: #fff;
    border-radius: 50%;
    font-size: .65rem;
    font-weight: 700;
    margin-left: 5px;
    vertical-align: middle;
    line-height: 1;
}

.receivables-summary {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.rcv-stat {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .75rem 1.25rem;
    min-width: 120px;
    text-align: center;
}
.rcv-stat-outstanding { border-color: #e65100; background: #fff3e0; }
.rcv-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--text); line-height: 1.2; }
.rcv-stat-outstanding .rcv-stat-value { color: #e65100; }
.rcv-stat-label { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }

.rcv-row-outstanding td { background: #fffdf8; }
.rcv-row-outstanding:hover td { background: #fff8f0; }

.recon-pending  { display: inline-block; padding: .15rem .55rem; border-radius: 10px; font-size: .75rem; font-weight: 600; background: #fff9c4; color: #f57f17; }
.recon-received { display: inline-block; padding: .15rem .55rem; border-radius: 10px; font-size: .75rem; font-weight: 600; background: #e8f5e9; color: #2e7d32; }
.recon-disputed { display: inline-block; padding: .15rem .55rem; border-radius: 10px; font-size: .75rem; font-weight: 600; background: #fff3e0; color: #e65100; }
.recon-voided   { display: inline-block; padding: .15rem .55rem; border-radius: 10px; font-size: .75rem; font-weight: 600; background: #eceff1; color: #546e7a; }

.contact-detail { font-size: .82rem; color: var(--text-secondary); }
.no-contact     { font-size: .82rem; color: var(--text-muted); font-style: italic; }

.col-actions { white-space: nowrap; }
.col-actions .btn + .btn { margin-left: .25rem; }

/* ── ConnectPage (device registration lockdown screen) ─────────────────── */
/* display:flex + child margin:auto centers the card when it fits, but lets the page scroll
   (top stays reachable) when the card is taller than the viewport — e.g. tablet landscape.
   align-items/justify-content:center would push the top off-screen with no way to scroll to it. */
.connect-page { display: flex; min-height: 100vh; overflow-y: auto; background: var(--surface-2); padding: 1.5rem; box-sizing: border-box; }
.connect-card { margin: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 2rem 2.5rem; max-width: 460px; width: 100%; text-align: center; box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.connect-logo { margin-bottom: 1rem; }
.connect-title { font-size: 1.4rem; font-weight: 700; color: var(--text); margin: 0 0 .4rem; }
.connect-subtitle { font-size: .9rem; color: var(--text-muted); margin: 0 0 1.5rem; line-height: 1.5; }
.connect-section { margin-bottom: 1rem; text-align: left; }
.connect-hint { font-size: .85rem; color: var(--text-secondary); margin-bottom: .75rem; }
.connect-portal { margin-top: -.4rem; }
.connect-portal-link { color: var(--brand-blue); font-weight: 600; text-decoration: none; word-break: break-all; }
.connect-portal-link:hover { text-decoration: underline; }
.connect-divider { font-size: .8rem; color: var(--text-muted); text-align: center; margin: 1rem 0; position: relative; }
.connect-divider::before, .connect-divider::after { content: ''; position: absolute; top: 50%; width: 42%; height: 1px; background: var(--border); }
.connect-divider::before { left: 0; }
.connect-divider::after { right: 0; }
.connect-camera-wrap { position: relative; border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 4/3; }
.connect-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.connect-scan-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: .5rem; background: rgba(0,0,0,.55); text-align: center; }
.connect-scan-status { font-size: .8rem; font-weight: 600; }
.scan-waiting { color: #fbbf24; }
.scan-found   { color: #34d399; }
.connect-pin-row { display: flex; gap: .5rem; align-items: stretch; }
.connect-pin-row .btn-connect-primary { width: auto; flex: 0 0 auto; margin-top: 0; white-space: nowrap; }
/* min-width:0 lets this flex input shrink below its ~20-char intrinsic width; without it the
   input refuses to shrink and pushes the "Unlock" button past the card content box (clipped on
   phones wider than the 380px stack breakpoint, e.g. ~412px). */
.connect-pin-input { flex: 1; min-width: 0; padding: .6rem .9rem; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; background: var(--surface); color: var(--text); letter-spacing: .2em; }
.connect-pin-error { font-size: .8rem; color: #ef4444; margin-top: .3rem; }
.connect-field-group { margin-bottom: .9rem; }
.connect-field-group label { display: block; font-size: .82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .3rem; }
.connect-input { width: 100%; padding: .6rem .9rem; border: 1px solid var(--border); border-radius: 8px; font-size: .9rem; background: var(--surface); color: var(--text); }
.connect-field-hint { display: block; font-size: .78rem; color: var(--text-muted); margin-top: .25rem; }
.btn-connect-primary { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: .7rem 1.2rem; background: var(--brand-green); color: var(--brand-green-text, #fff); border: none; border-radius: 8px; font-size: .95rem; font-weight: 600; cursor: pointer; margin-top: .5rem; }
.connect-cam-icon { display: block; flex: 0 0 auto; }
.btn-connect-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-connect-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); border-radius: 8px; padding: .4rem .9rem; font-size: .85rem; cursor: pointer; }
.connect-success { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; border-radius: 8px; padding: .7rem 1rem; margin-bottom: 1rem; font-weight: 600; }
.connect-error   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; border-radius: 8px; padding: .7rem 1rem; margin-bottom: 1rem; font-size: .85rem; }
.connect-busy    { color: var(--text-muted); font-size: .9rem; padding: 1rem; }

/* Narrow screens: keep the connect card breathable and stop the PIN row from
   crowding the "Unlock" button against a squeezed input. Below 380px the row
   stacks so both controls stay full-width and finger-friendly. */
@media (max-width: 380px) {
    .connect-card { padding: 1.5rem 1.25rem; }
    .connect-pin-row { flex-direction: column; align-items: stretch; }
    .connect-pin-row .btn-connect-primary { width: 100%; }
}

/* ── How to Tap overlay (Tap to Pay on Android / iPhone) ──────────────────────
   Apple requires this instructional screen when enabling Tap to Pay on iPhone.
   Shown whenever CardReaderMode = "taptopay" and a payment is being collected.
─────────────────────────────────────────────────────────────────────────────── */
.tap-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: tap-overlay-in .2s ease both;
}

@keyframes tap-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.tap-overlay-card {
    background: var(--surface, #fff);
    border-radius: 20px;
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    max-width: 320px;
    width: calc(100% - 2rem);
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
    animation: tap-card-in .25s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes tap-card-in {
    from { opacity: 0; transform: scale(.88) translateY(12px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* Icon area — phone centred in a field of expanding rings */
.tap-overlay-icon-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tap-phone-icon {
    position: relative;
    z-index: 1;
    color: var(--primary, #1a73e8);
}

/* Three concentric pulse rings */
.tap-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px solid var(--primary, #1a73e8);
    opacity: 0;
    animation: tap-ripple 2.1s ease-out infinite;
}
.tap-ring-1 { animation-delay: 0s; }
.tap-ring-2 { animation-delay: .7s; }
.tap-ring-3 { animation-delay: 1.4s; }

@keyframes tap-ripple {
    0%   { transform: scale(.65); opacity: .75; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Text */
.tap-overlay-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text, #111);
    margin: 0 0 .6rem;
}

.tap-overlay-body {
    font-size: 1rem;
    color: var(--text, #333);
    line-height: 1.5;
    margin: 0 0 .5rem;
}

.tap-overlay-hint {
    font-size: .82rem;
    color: var(--text-muted, #888);
    margin: 0;
}

/* Phone (<600px) shows the phone-specific span; tablet hides it */
.tap-loc-phone  { display: inline; }
.tap-loc-tablet { display: none; }
@media (min-width: 600px) {
    .tap-loc-phone  { display: none; }
    .tap-loc-tablet { display: inline; }
}