/* ===== Order history (Event orders) ===== */

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

    --oh-new: #2563eb;   --oh-new-bg: #eff4ff;
    --oh-prog: #b45309;  --oh-prog-bg: #fff7ec;
    --oh-ready: #0f766e; --oh-ready-bg: #e8f6f4;
    --oh-done: #15803d;  --oh-done-bg: #eefaf1;
    --oh-rej: #b91c1c;   --oh-rej-bg: #fef1f1;

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

    min-height: 100%;
    background: var(--oh-bg);
    color: var(--oh-ink);
    -webkit-font-smoothing: antialiased;
}

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

/* ===== Top bar ===== */
.oh-top { position: sticky; top: 0; z-index: 40; background: var(--oh-surface); border-bottom: 1px solid var(--oh-line); }
.oh-top-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .7rem 1.5rem; }

.oh-brand { display: flex; align-items: center; gap: .85rem; min-width: 0; justify-self: start; }
.oh-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; }
.oh-brand-text { min-width: 0; }
.oh-app-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.oh-app-sub { font-size: .8rem; color: var(--oh-faint); font-weight: 500; }

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

.oh-status-select { justify-self: end; appearance: none; -webkit-appearance: none;
    padding: .5rem 2.1rem .5rem .85rem; font-size: .9rem; font-weight: 700; color: var(--oh-ink);
    border: 1px solid var(--oh-line); border-radius: 10px; cursor: pointer; outline: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235b626b'%3E%3Cpath d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") no-repeat right .7rem center / 13px;
    transition: border-color .15s, box-shadow .15s; }
.oh-status-select:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(183, 28, 28, .15); }

/* ===== Canvas ===== */
.oh-canvas { padding: 1rem 1.5rem 2.5rem; max-width: 800px; margin: 0 auto; }
.oh-summary { font-size: .85rem; color: var(--oh-soft); font-weight: 600; margin: 0 0 1rem; }
.oh-summary b { color: var(--oh-ink); }

/* ===== Location accordion ===== */
.oh-grp { background: var(--oh-surface); border: 1px solid var(--oh-line); border-radius: 14px;
    box-shadow: var(--oh-shadow); overflow: hidden; margin-bottom: .85rem; }
.oh-grp-head { width: 100%; display: flex; align-items: center; gap: .85rem; padding: 1rem 1.15rem;
    background: var(--oh-surface); border: 0; cursor: pointer; text-align: left; transition: background .15s; }
.oh-grp-head:hover { background: #fafbfc; }
.oh-grp-chev { width: 16px; height: 16px; color: var(--oh-faint); flex-shrink: 0; transition: transform .2s ease; }
.oh-grp-chev.open { transform: rotate(90deg); }
.oh-loc-ic { width: 34px; height: 34px; border-radius: 10px; background: #f1f3f5; color: var(--brand);
    display: grid; place-items: center; flex-shrink: 0; }
.oh-loc-ic svg { width: 18px; height: 18px; fill: currentColor; }
.oh-grp-text { display: flex; flex-direction: column; min-width: 0; }
.oh-grp-name { font-weight: 800; font-size: 1.02rem; }
.oh-grp-meta { font-size: .78rem; color: var(--oh-faint); font-weight: 600; margin-top: .05rem; }
.oh-grp-right { margin-left: auto; display: flex; align-items: center; }
.oh-grp-total { font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.oh-grp-body { padding: .7rem; background: #f8f9fb; border-top: 1px solid var(--oh-line);
    display: flex; flex-direction: column; gap: .55rem; }

/* ===== Order card ===== */
.oh-ord { background: var(--oh-surface); border: 1px solid var(--oh-line); border-radius: 11px; overflow: hidden; }
.oh-ord-head { display: flex; align-items: center; gap: .85rem; padding: .8rem .95rem; cursor: pointer; transition: background .15s; }
.oh-ord-head:hover { background: #fafbfc; }
.oh-ord-id { font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums; }
.oh-ord-time { font-size: .82rem; color: var(--oh-soft); }
.oh-ord-dur { font-size: .72rem; font-weight: 700; color: var(--oh-soft); background: #f1f3f5;
    padding: .16rem .45rem; border-radius: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oh-ord-right { margin-left: auto; display: flex; align-items: center; gap: .85rem; }
.oh-ord-total { font-weight: 800; font-size: .98rem; font-variant-numeric: tabular-nums; }
.oh-ord-chev { width: 13px; height: 13px; color: var(--oh-faint); flex-shrink: 0; transition: transform .2s; }
.oh-ord-chev.open { transform: rotate(90deg); }

/* Status badge */
.oh-badge { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    padding: .25rem .6rem; border-radius: 7px; white-space: nowrap; }
.oh-badge.b-received { background: var(--oh-new-bg); color: var(--oh-new); }
.oh-badge.b-in-progress { background: var(--oh-prog-bg); color: var(--oh-prog); }
.oh-badge.b-ready { background: var(--oh-ready-bg); color: var(--oh-ready); }
.oh-badge.b-completed { background: var(--oh-done-bg); color: var(--oh-done); }
.oh-badge.b-rejected { background: var(--oh-rej-bg); color: var(--oh-rej); }

/* ===== Order detail ===== */
.oh-ord-detail { padding: .2rem .95rem 1rem; border-top: 1px solid var(--oh-line); }
.oh-det-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    color: var(--oh-faint); margin: .7rem 0 .15rem; }
.oh-items { list-style: none; margin: .35rem 0 0; padding: .4rem .9rem; background: #f8f9fb; border: 1px solid var(--oh-line); border-radius: 10px; }
.oh-items li { display: flex; align-items: baseline; gap: .6rem; padding: .4rem 0; border-bottom: 1px dashed #eef0f2; }
.oh-items li:last-child { border-bottom: 0; }
.oh-it-name { font-weight: 650; font-size: .92rem; flex: 1; }
.oh-it-cat { font-size: .76rem; color: var(--oh-faint); }
.oh-it-price { font-weight: 650; font-variant-numeric: tabular-nums; }

/* ===== Customer info ===== */
.oh-cust { margin-top: .35rem; background: #f8f9fb; border: 1px solid var(--oh-line); border-radius: 10px;
    padding: .8rem .9rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem 1.3rem; }
.oh-cust-field { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.oh-cust-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--oh-faint); }
.oh-cust-value { font-size: .9rem; font-weight: 600; color: var(--oh-ink); word-break: break-word; }

/* ===== Stage timing timeline ===== */
.oh-vtl { background: #f8f9fb; border: 1px solid var(--oh-line); border-radius: 10px; padding: .8rem .9rem .65rem; margin-top: .35rem; }
.oh-vtl-stage { display: flex; gap: .65rem; }
.oh-vtl-gutter { flex: 0 0 14px; display: flex; flex-direction: column; align-items: center; }
.oh-vtl-dot { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto; margin-top: 2px; box-shadow: 0 0 0 3px #f8f9fb; }
.oh-vtl-dot.placed { background: var(--oh-new); }
.oh-vtl-dot.inprogress { background: var(--oh-prog); }
.oh-vtl-dot.ready { background: var(--oh-ready); }
.oh-vtl-dot.done { background: var(--oh-done); }
.oh-vtl-dot.rejected { background: var(--oh-rej); }
.oh-vtl-line { width: 2px; flex: 1; background: #d7dbe0; margin: 3px 0; border-radius: 2px; min-height: 12px; }
.oh-vtl-stage:last-of-type .oh-vtl-line { display: none; }
.oh-vtl-body { flex: 1; padding-bottom: .55rem; min-width: 0; }
.oh-vtl-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.oh-vtl-name { font-weight: 750; font-size: .88rem; }
.oh-vtl-time { font-size: .78rem; color: var(--oh-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.oh-vtl-dur { font-size: .74rem; color: var(--oh-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.oh-vtl-stage.pending .oh-vtl-name { color: var(--oh-faint); font-weight: 600; }
.oh-vtl-stage.pending .oh-vtl-dot { background: #fff; box-shadow: inset 0 0 0 2px #cfd4da; }
.oh-vtl-na { font-size: .84rem; color: var(--oh-faint); font-style: italic; padding: .2rem 0 .4rem; }
.oh-vtl-total { display: flex; align-items: center; justify-content: space-between; margin-top: .1rem; padding-top: .5rem; border-top: 1px solid var(--oh-line); }
.oh-vtl-total .l { font-weight: 800; font-size: .84rem; }
.oh-vtl-total .v { font-weight: 800; font-size: .9rem; color: var(--brand); font-variant-numeric: tabular-nums; }

/* ===== Totals ===== */
.oh-totals { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--oh-line); max-width: 280px; margin-left: auto; }
.oh-trow { display: flex; justify-content: space-between; font-size: .86rem; color: var(--oh-soft); padding: .18rem 0; }
.oh-trow.grand { font-weight: 800; font-size: 1rem; color: var(--oh-ink); padding-top: .45rem; margin-top: .2rem; border-top: 1px solid var(--oh-line); }

.oh-empty { text-align: center; padding: 2.5rem 1rem; color: var(--oh-faint); }

/* ===== Pagination ===== */
.oh-pager { display: flex; align-items: center; justify-content: center; gap: .9rem; padding: 1.2rem 0 0; }
.oh-pager button { padding: .5rem 1rem; border: 1px solid var(--oh-line); background: var(--oh-surface);
    border-radius: 9px; font-weight: 700; font-size: .86rem; color: var(--oh-ink); cursor: pointer; transition: background .15s; }
.oh-pager button:hover:not(:disabled) { background: #f5f5f5; }
.oh-pager button:disabled { color: #bbb; cursor: not-allowed; background: #fafafa; }
.oh-pager-status { font-size: .86rem; color: var(--oh-soft); }
.oh-pager-status b { color: var(--oh-ink); }
.oh-pager-count { color: var(--oh-faint); margin-left: .25rem; }

/* ===== Responsive ===== */
@media (max-width: 720px) {
    .oh-top-row { grid-template-columns: 1fr auto; row-gap: .6rem; }
    .oh-search { grid-column: 1 / -1; order: 3; justify-self: stretch; width: 100%; }
    .oh-status-select { justify-self: end; }
    .oh-canvas { padding: 1rem 1rem 2.5rem; }
    .oh-top-row { padding: .7rem 1rem; }
}