/* ===== Expo Console — Kanban board ===== */

.expo-page {
    --brand: #B71C1C;
    --brand-dark: #8b1515;
    --ex-bg: #f4f5f7;
    --ex-surface: #ffffff;
    --ex-ink: #1f2328;
    --ex-ink-soft: #5b626b;
    --ex-ink-faint: #8b929b;
    --ex-line: #e6e8eb;

    --ex-new: #2563eb;   --ex-new-soft: #dbe7ff;
    --ex-prog: #b45309;  --ex-prog-bg: #fff7ec;
    --ex-ready: #15803d;
    --ex-done: #5b626b;  --ex-done-bg: #f1f3f5;
    --ex-over: #b91c1c;  --ex-over-bg: #fef1f1;

    --ex-shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 16px rgba(16,24,40,.06);

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ex-bg);
    color: var(--ex-ink);
    -webkit-font-smoothing: antialiased;
}

.expo-page *, .expo-page *::before, .expo-page *::after { box-sizing: border-box; }

/* ===== Top bar ===== */
.expo-top { position: sticky; top: 0; z-index: 40; background: var(--ex-surface); border-bottom: 1px solid var(--ex-line); }
.expo-top-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .7rem 1.5rem; }
.expo-brand { display: flex; align-items: center; gap: 1rem; min-width: 0; justify-self: start; }
.expo-brand-dot { width: 34px; height: 34px; border-radius: 9px; background: var(--brand); color: #fff;
    display: grid; place-items: center; font-weight: 800; font-size: 1rem; flex-shrink: 0; }
.expo-app-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.expo-app-sub { font-size: .8rem; color: var(--ex-ink-faint); font-weight: 500; }
.expo-live { color: var(--ex-ready); font-weight: 700; }
.expo-live::before { content: "● "; font-size: .7em; vertical-align: middle; animation: expoPulseDot 1.8s infinite; }
@keyframes expoPulseDot { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Reference-id search */
.expo-search { justify-self: center; width: clamp(200px, 32vw, 380px); padding: .5rem .8rem; font-size: .9rem;
    border: 1px solid var(--ex-line); border-radius: 10px; background: var(--ex-bg); color: var(--ex-ink);
    outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.expo-search::placeholder { color: var(--ex-ink-faint); }
.expo-search:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 2px rgba(183,28,28,.15); }

/* Active / Completed toggle */
.expo-toggle { justify-self: end; display: inline-flex; background: #eef0f3; border-radius: 11px; padding: 4px; }
.expo-toggle button { border: 0; background: transparent; cursor: pointer; padding: .55rem 1.1rem; border-radius: 8px;
    font-size: .9rem; font-weight: 700; color: var(--ex-ink-soft); display: inline-flex; align-items: center; gap: .45rem;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.expo-toggle button.on { background: #fff; color: var(--brand); box-shadow: var(--ex-shadow); }
.expo-tcount { background: #fff; border-radius: 999px; min-width: 1.35rem; height: 1.35rem; padding: 0 .4rem;
    display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: var(--ex-ink-soft); }
.expo-toggle button.on .expo-tcount { background: var(--ex-done-bg); }

.expo-canvas { padding: 1rem 1.5rem 2rem; flex: 1; display: flex; flex-direction: column; }
.expo-hint { font-size: .82rem; color: var(--ex-ink-faint); margin: 0 0 1rem; }

/* Re-mounted (via @key) on every Active/Completed switch, so this entry animation replays. */
.expo-view { animation: expoViewIn .24s ease; flex: 1; display: flex; flex-direction: column; }
@keyframes expoViewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ===== Kanban columns ===== */
.expo-kb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 1.1rem; flex: 1; }
.expo-col { background: #eceef1; border-radius: 16px; padding: .7rem; }
.expo-col-head { display: flex; align-items: center; gap: .55rem; padding: .4rem .55rem .7rem; }
.expo-col-head .expo-pip { width: 12px; height: 12px; border-radius: 50%; }
.expo-col-title { font-weight: 800; font-size: 1rem; }
.expo-col-count { margin-left: auto; background: #fff; border-radius: 999px; min-width: 1.6rem; height: 1.6rem;
    padding: 0 .5rem; display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: var(--ex-ink-soft); }
.expo-col.new .expo-pip { background: var(--ex-new); }
.expo-col.prog .expo-pip { background: var(--ex-prog); }
.expo-col.ready .expo-pip { background: var(--ex-ready); }
.expo-col-body { display: flex; flex-direction: column; gap: .7rem; }

/* ===== Ticket card ===== */
.expo-kcard { background: #fff; border-radius: 13px; box-shadow: var(--ex-shadow);
    overflow: hidden; transition: transform .1s, box-shadow .15s; }
/* Status color fills the card header instead of a left stripe; "over" (overdue) takes priority. */
.expo-kcard.received .expo-kcard-top { background: var(--ex-new); }
.expo-kcard.in-progress .expo-kcard-top { background: var(--ex-prog); }
.expo-kcard.ready .expo-kcard-top { background: var(--ex-ready); }
.expo-kcard.over .expo-kcard-top { background: var(--ex-over); }
.expo-kcard-top { display: flex; align-items: center; gap: .55rem; padding: .6rem .9rem; flex-wrap: wrap; }
.expo-kcard-idcol { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.expo-kcard-top .expo-ordno { color: #fff; }
.expo-kcard-top .expo-cust { color: rgba(255, 255, 255, .85); }
.expo-kcard-top .expo-age,
.expo-kcard-top .expo-age.warn,
.expo-kcard-top .expo-age.over { background: rgba(255, 255, 255, .22); color: #fff; }
.expo-ordno { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.expo-cust { color: var(--ex-ink-soft); font-weight: 600; font-size: .92rem; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expo-age { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 800;
    padding: .22rem .55rem; border-radius: 8px; background: #f1f3f5; color: var(--ex-ink-soft); font-variant-numeric: tabular-nums; }
.expo-age.warn { background: var(--ex-prog-bg); color: var(--ex-prog); }
.expo-age.over { background: var(--ex-over-bg); color: var(--ex-over); }

/* Refund / void banner — order was reversed by an admin (status column, not the kitchen stage) */
.expo-refund-banner { margin: .5rem .9rem .35rem; padding: .3rem .6rem; border-radius: 9px; text-align: center;
    background: var(--ex-over-bg); color: var(--ex-over); font-size: .82rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em; }
.expo-refund-banner::before { content: "↩ "; }

/* Fulfillment destination / pickup note */
.expo-dest { margin: .5rem .9rem .35rem; padding: .4rem .6rem; border-radius: 9px; font-size: .9rem; font-weight: 700; }
.expo-dest.deliver { background: var(--ex-new-soft); color: #1e40af; }
.expo-dest.deliver::before { content: "📍 "; }
.expo-dest.pickup { background: var(--ex-done-bg); color: var(--ex-ink-soft); font-weight: 600; }
.expo-dest.pickup::before { content: "🏷 "; }

.expo-items { list-style: none; margin: 0; padding: .2rem .9rem .55rem; }
.expo-items li { display: flex; gap: .55rem; padding: .32rem 0; border-bottom: 1px dashed #eef0f2; }
.expo-items li:last-child { border-bottom: 0; }
.expo-qty { flex-shrink: 0; min-width: 1.55rem; height: 1.55rem; padding: 0 .4rem; border-radius: 8px; background: #f0f2f4;
    font-weight: 800; font-size: .88rem; display: grid; place-items: center; }
.expo-it-name { font-size: .98rem; font-weight: 650; }
.expo-mods { font-size: .82rem; margin-top: .12rem; line-height: 1.35; display: flex; flex-wrap: wrap; gap: .1rem .6rem; }
.expo-mod-add { color: var(--ex-ready); }
.expo-mod-rm { color: var(--ex-over); }

.expo-kcard-foot { padding: .5rem .9rem .85rem; display: flex; flex-direction: column; gap: .4rem; }
.expo-advance { width: 100%; border: 0; cursor: pointer; padding: .95rem; border-radius: 11px;
    font-size: 1rem; font-weight: 750; color: #fff; transition: transform .08s, filter .15s; touch-action: manipulation; }
.expo-advance:active { transform: scale(.98); filter: brightness(.96); }
.expo-advance.to-prog { background: var(--ex-prog); }
.expo-advance.to-ready { background: var(--ex-ready); }
.expo-advance.to-done { background: var(--ex-ink); }
.expo-reject-link { border: 0; background: transparent; color: var(--ex-ink-faint); cursor: pointer;
    font-size: .8rem; font-weight: 600; padding: .15rem; align-self: center; }
.expo-reject-link:hover { color: var(--ex-over); text-decoration: underline; }

/* tap feedback flash + new-order pulse */
.expo-kcard.flash { animation: expoFlash .45s ease; }
@keyframes expoFlash { 0% { box-shadow: 0 0 0 4px var(--ex-new-soft), var(--ex-shadow); } 100% { box-shadow: var(--ex-shadow); } }
.expo-kcard.pulse { animation: expoPulse 1.9s infinite; }
@keyframes expoPulse { 0%,100% { box-shadow: var(--ex-shadow); } 50% { box-shadow: 0 0 0 3px var(--ex-new-soft), var(--ex-shadow); } }

.expo-empty { padding: 1.4rem 1rem; text-align: center; color: var(--ex-ink-faint); font-size: .9rem; }
.expo-empty-block { background: #fff; border-radius: 13px; box-shadow: var(--ex-shadow); }

/* ===== Completed view ===== */
.expo-completed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; }
.expo-dcard { background: #fff; border-radius: 13px; box-shadow: var(--ex-shadow); overflow: hidden; opacity: .94; display: flex; flex-direction: column; }
/* Status color fills the header (completed = slate, rejected = red), matching the active board cards. */
.expo-dcard .expo-dcard-top { background: var(--ex-done); }
.expo-dcard.rejected .expo-dcard-top { background: var(--ex-over); }
.expo-dcard-top { display: flex; align-items: center; gap: .55rem; padding: .6rem .9rem; flex-wrap: wrap; }
.expo-dcard-top .expo-ordno { color: #fff; }
.expo-dcard-top .expo-cust { color: rgba(255, 255, 255, .85); }
.expo-check { width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .22); color: #fff;
    display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex-shrink: 0; }
.expo-done-time { margin-left: auto; font-size: .78rem; color: rgba(255, 255, 255, .8); font-weight: 700; }
.expo-reject-reason { margin: 0 .9rem .35rem; font-size: .82rem; color: var(--ex-over); font-weight: 600; }
.expo-dcard-foot { padding: .4rem .9rem .85rem; margin-top: auto; }
.expo-reopen { width: 100%; border: 1.5px solid var(--ex-line); background: #fff; color: var(--ex-ink-soft);
    border-radius: 10px; padding: .6rem; font-weight: 700; font-size: .85rem; cursor: pointer; }
.expo-reopen:active { background: #f6f7f9; }

/* Per-transition timing breakdown on completed cards */
.expo-timeline { margin: 0 .9rem .55rem; padding: .5rem .65rem; background: #f7f8fa; border-radius: 9px; }
.expo-tl-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; padding: .2rem 0; }
.expo-tl-label { color: var(--ex-ink-faint); font-weight: 600; }
.expo-tl-dur { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ex-ink); }
.expo-tl-row.muted .expo-tl-dur { color: var(--ex-ink-faint); font-weight: 600; font-style: italic; }
.expo-tl-row.total { border-top: 1px solid var(--ex-line); margin-top: .15rem; padding-top: .35rem; }
.expo-tl-row.total .expo-tl-label { color: var(--ex-ink); font-weight: 800; }
.expo-tl-row.total .expo-tl-dur { color: var(--brand); font-weight: 800; }

/* ===== Skeleton ===== */
.expo-skel-card { height: 180px; border-radius: 13px; margin-bottom: .7rem; }
.expo-shimmer { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%;
    animation: expoShimmer 1.5s infinite; }
@keyframes expoShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ===== Responsive ===== */
@media (max-width: 760px) {
    .expo-top-row { display: flex; flex-wrap: wrap; justify-content: space-between; }
    .expo-search { order: 3; width: 100%; }
}
@media (max-width: 820px) {
    .expo-kb { grid-template-columns: 1fr; grid-auto-rows: auto; flex: 0 1 auto; }
    .expo-col { min-height: 40vh; }
    .expo-top-row { padding: .7rem 1rem; }
    .expo-canvas { padding: 1rem; }
}

/* ===== Rejection modal ===== */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; animation: overlayFade 0.2s ease;
}
@keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }
.modal-content {
    background: #fff; border-radius: 12px; padding: 1.5rem; width: 90%; max-width: 440px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); animation: modalSlide 0.3s ease;
}
@keyframes modalSlide { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.modal-title { margin: 0 0 0.25rem; font-size: 1.25rem; font-weight: 700; color: #222; }
.modal-subtitle { font-size: 0.875rem; color: #888; margin: 0; }
.modal-form-group { margin-top: 1rem; }
.modal-label { display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.375rem; }
.modal-label .required { color: #B71C1C; }
.modal-textarea {
    width: 100%; padding: 0.625rem 0.75rem; border: 2px solid #e5e7eb; border-radius: 8px;
    resize: vertical; font-size: 0.875rem; font-family: inherit; outline: none;
    transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box;
}
.modal-textarea::placeholder { color: #aaa; }
.modal-textarea:focus { border-color: #B71C1C; box-shadow: 0 0 0 2px rgba(183, 28, 28, 0.15); }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }
.btn-modal-cancel {
    padding: 0.5rem 1rem; border: 2px solid #e5e7eb; border-radius: 8px; background: #fff; color: #374151;
    cursor: pointer; font-weight: 500; font-size: 0.875rem; transition: all 0.2s;
}
.btn-modal-cancel:hover { background: #f3f4f6; }
.btn-modal-reject {
    padding: 0.5rem 1rem; border: none; border-radius: 8px; background: #B71C1C; color: #fff;
    cursor: pointer; font-weight: 600; font-size: 0.875rem; transition: all 0.2s;
}
.btn-modal-reject:hover { background: #8b1515; }
.btn-modal-reject:disabled { background: #e5e7eb; color: #888; cursor: not-allowed; }

/* ===== BLE receipt printer ===== */
.expo-top-right { justify-self: end; display: inline-flex; align-items: center; gap: .55rem; }

.expo-printer-chip { display: inline-flex; align-items: center; gap: .45rem; border: 0; background: transparent;
    border-radius: 999px; padding: .45rem .5rem; font-size: .82rem; font-weight: 700;
    color: var(--ex-ink-soft); cursor: pointer; touch-action: manipulation; }
.expo-printer-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ex-ink-faint); flex-shrink: 0; }
.expo-printer-chip.connected { cursor: default; }
.expo-printer-chip.connected .expo-printer-dot { background: var(--ex-ready); }
.expo-printer-chip.connecting .expo-printer-dot,
.expo-printer-chip.reconnecting .expo-printer-dot { background: var(--ex-prog); animation: expoPulseDot 1.2s infinite; }
.expo-printer-chip.disconnected { color: var(--ex-over); }
.expo-printer-chip.disconnected .expo-printer-dot { background: var(--ex-over); }
.expo-printer-chip.reconnecting { color: var(--ex-prog); }
.expo-printer-queue { background: var(--ex-over); color: #fff; border-radius: 999px; min-width: 1.15rem; height: 1.15rem;
    padding: 0 .3rem; display: grid; place-items: center; font-size: .68rem; font-weight: 800; }

.expo-autoprint { border: 1px solid var(--ex-line); background: #fff; color: var(--ex-ink-faint); cursor: pointer;
    border-radius: 999px; padding: .45rem .7rem; font-size: .78rem; font-weight: 700; touch-action: manipulation; }
.expo-autoprint.on { border-color: var(--ex-ready); color: var(--ex-ready); background: #f0faf3; }

.expo-kcard-links { display: flex; align-items: center; justify-content: center; gap: 1.1rem; }
.expo-print-link { border: 0; background: transparent; color: var(--ex-ink-faint); cursor: pointer;
    font-size: .8rem; font-weight: 600; padding: .15rem; }
.expo-print-link:hover { color: var(--ex-ink); text-decoration: underline; }
.expo-print-link.unprinted { color: var(--ex-over); font-weight: 700; }
.expo-dcard-foot .expo-print-link { width: 100%; margin-top: .35rem; }

@media (max-width: 900px) {
    .expo-printer-label { display: none; } /* dot-only chip on narrow screens */
}