/* ═══════════════════════════════════════════════════════════════════════════
   Orders — the dispatch ledger.
   An order is a parcel, so it is drawn as the docket that travels with one:
   a stub with the consignment number and a status stamp, a perforated tear
   line, and the workbench unfolding below it. Monospace is a utility role —
   consignment numbers, references, ledger amounts — never decoration.
   Palette and faces are Empyra's; only the structure is particular to this page.
   ═══════════════════════════════════════════════════════════════════════════ */

.ebo {
    --dk-mono: ui-monospace, 'SF Mono', 'Roboto Mono', 'DejaVu Sans Mono', monospace;
    --dk-rule: 1px solid var(--emp-border);
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--emp-charcoal);
}

/* ── Ledger header: what you are owed, and what is waiting on you ────────── */
.ebo__ledger {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--emp-charcoal);
}
.ebo__owed { display: flex; flex-direction: column; gap: 2px; }
.ebo__owed-label {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--emp-muted);
}
.ebo__owed-amount {
    font-family: var(--emp-font-heading);
    font-size: clamp(34px, 6vw, 52px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
}
.ebo__owed-sub { font-size: 13px; color: var(--emp-muted); }

.ebo__todo { display: flex; flex-wrap: wrap; gap: 8px; }
.ebo__todo-item {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 8px 14px;
    border: var(--dk-rule);
    border-radius: var(--emp-r-badge);
    background: var(--emp-bg-card);
    text-decoration: none;
    color: inherit;
}
a.ebo__todo-item:hover { border-color: var(--emp-charcoal); }
.ebo__todo-item--act  { border-color: var(--emp-coral); background: var(--emp-coral-light); }
.ebo__todo-item--ask  { border-color: var(--emp-mustard); background: #FDF3DC; }
.ebo__todo-n { font-family: var(--emp-font-heading); font-size: 17px; font-weight: 700; }
.ebo__todo-l { font-size: 12px; letter-spacing: .04em; }
.ebo__todo-clear { font-size: 13px; color: var(--emp-muted); }

/* ── Filter bar: tabs for the states you work in, search beside them ─────── */
.ebo__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ebo__tabs { display: flex; flex-wrap: wrap; gap: 2px; }
.ebo__tab {
    padding: 7px 13px;
    font-size: 13px;
    color: var(--emp-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.ebo__tab:hover { color: var(--emp-charcoal); }
.ebo__tab.is-on {
    color: var(--emp-charcoal);
    font-weight: 600;
    border-bottom-color: var(--emp-coral);
}
.ebo__find { display: flex; align-items: center; gap: 6px; }
.ebo__find-input,
.ebo__find-date {
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--emp-charcoal);
    background: var(--emp-bg-card);
    border: var(--dk-rule);
    border-radius: var(--emp-r-input);
}
.ebo__find-input { width: 190px; }
.ebo__find-date  { width: 130px; color: var(--emp-muted); }
.ebo__find-input:focus,
.ebo__find-date:focus { outline: none; border-color: var(--emp-coral); box-shadow: var(--emp-focus-ring); }
.ebo__find-go {
    height: 34px;
    padding: 0 14px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-family: var(--emp-font-heading);
    font-weight: 600;
    color: var(--emp-charcoal);
    background: none;
    border: var(--dk-rule);
    border-radius: var(--emp-r-btn);
    cursor: pointer;
}
.ebo__find-go:hover { background: var(--emp-cream); }

/* ── The dockets ─────────────────────────────────────────────────────────── */
.ebo__dockets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.dk {
    background: var(--emp-bg-card);
    border: var(--dk-rule);
    border-radius: var(--emp-r-card);
    overflow: hidden;
}
.dk--flag { border-color: var(--emp-mustard); }

.dk__face {
    display: grid;
    grid-template-columns: 128px minmax(140px, 1.1fr) minmax(120px, 1fr) auto 20px;
    align-items: center;
    gap: 18px;
    padding: 0;
    cursor: pointer;
    list-style: none;
}
.dk__face::-webkit-details-marker { display: none; }
.dk__face:focus-visible { outline: 2px solid var(--emp-coral); outline-offset: -2px; }

/* The stub: the part a courier reads. Separated by a perforation, not a border. */
.dk__stub {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: stretch;
    justify-content: center;
    padding: 16px 18px;
    background: var(--emp-cream);
    border-right: 1px dashed var(--emp-border-input);
}
.dk__no {
    font-family: var(--dk-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
}
.dk__stamp {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid currentColor;
    border-radius: 3px;
    color: var(--emp-muted);
}
.dk__stamp--processing { color: var(--emp-coral-text); }
.dk__stamp--completed  { color: var(--emp-teal); }
.dk__stamp--on-hold    { color: #8A6A00; }
.dk__stamp--cancelled,
.dk__stamp--refunded   { color: var(--emp-muted); text-decoration: line-through; }

.dk__who, .dk__what { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 16px 0; }
.dk__name  { font-weight: 600; font-size: 14px; }
.dk__where { font-size: 12px; color: var(--emp-muted); }
.dk__pieces { font-size: 13px; }
.dk__title {
    font-size: 12px;
    color: var(--emp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dk__money { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 16px 0; }
.dk__net { font-family: var(--emp-font-heading); font-size: 18px; font-weight: 700; }
.dk__net-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--emp-muted); }

.dk__open {
    justify-self: center;
    margin-right: 16px;
    width: 7px; height: 7px;
    border-right: 1.5px solid var(--emp-muted);
    border-bottom: 1.5px solid var(--emp-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}
.dk[open] .dk__open { transform: rotate(-135deg); }
.dk[open] { border-color: var(--emp-charcoal); }

/* ── The workbench, below the tear line ──────────────────────────────────── */
/* Below the tear line the docket becomes a workbench: a recessed ground with
   the panels raised on it, so each block of work reads as its own surface
   instead of text floating on the card. */
.dk__work {
    border-top: 1px dashed var(--emp-border-input);
    background: var(--emp-bg-site);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: dk-unfold .18s ease;
}
@keyframes dk-unfold { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .dk__work { animation: none; }
    .dk__open { transition: none; }
}

.dk__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    align-items: start;
}
.dk__panel {
    background: var(--emp-bg-card);
    border: var(--dk-rule);
    border-radius: 10px;
    padding: 16px 18px 18px;
    box-shadow: var(--emp-shadow);
}
/* The one thing waiting on a person: raised, warm, and marked down its edge. */
.dk__panel--ask {
    background: #FEF8EA;
    border-color: var(--emp-mustard);
    border-left-width: 3px;
}
.dk__panel--talk { padding-bottom: 16px; }

/* Sections inside a panel are separated by a rule, not by guesswork. */
.dk__h--sub {
    margin-top: 20px;
    padding-top: 16px;
    border-top: var(--dk-rule);
}

.dk__h {
    font-family: var(--emp-font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--emp-charcoal);
    margin: 0 0 12px;
}
.dk__note { font-size: 12px; color: var(--emp-muted); margin: 6px 0 0; }
.dk__label { font-size: 12px; font-weight: 600; color: var(--emp-muted); display: flex; flex-direction: column; gap: 4px; }

.dk__quote {
    margin: 0 0 12px;
    padding-left: 12px;
    border-left: 2px solid var(--emp-mustard);
    font-size: 14px;
}

/* Items */
.dk__items { list-style: none; margin: 0; padding: 0; }
.dk__item {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 10px;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px dotted var(--emp-border);
    font-size: 14px;
}
.dk__item-q { font-family: var(--dk-mono); font-size: 12px; color: var(--emp-muted); }
.dk__item-p { font-family: var(--dk-mono); font-size: 13px; }
.dk__item.is-refunded .dk__item-n { text-decoration: line-through; color: var(--emp-muted); }
.dk__refunded {
    font-style: normal;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--emp-coral-text);
    margin-left: 6px;
}
.dk__addr { font-style: normal; font-size: 14px; line-height: 1.55; }

/* Ledger */
.dk__ledger { margin: 0; font-size: 14px; }
.dk__ledger > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.dk__ledger dt, .dk__ledger dd { margin: 0; }
.dk__ledger dt em { font-style: normal; font-family: var(--dk-mono); font-size: 12px; color: var(--emp-muted); }
.dk__ledger dd { font-family: var(--dk-mono); }
.dk__ledger .is-net {
    border-top: 1px solid var(--emp-charcoal);
    margin-top: 4px;
    padding-top: 8px;
    font-weight: 700;
}
.dk__ledger .is-net dd { font-family: var(--emp-font-heading); font-size: 17px; }

/* Payout */
.dk__payout { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.dk__flag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: var(--emp-r-badge);
    background: var(--emp-cream);
    color: var(--emp-muted);
    border: var(--dk-rule);
}
.dk__flag--due      { background: var(--emp-coral-light); color: var(--emp-coral-text); border-color: transparent; }
.dk__flag--paid     { background: var(--emp-teal-light);  color: var(--emp-teal);       border-color: transparent; }
.dk__flag--adjusted { background: #FDF3DC;                color: #8A6A00;               border-color: transparent; }
.dk__mono { font-family: var(--dk-mono); font-size: 13px; }
.dk__mono--ref { color: var(--emp-muted); }
.dk__pay-grid {
    display: grid;
    /* Two columns even in the narrow money column — eight stacked fields turns a
       payout into a scroll. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.dk__label--wide { grid-column: 1 / -1; }

/* Forms inside a docket */
.dk__form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; }
.dk__form .emp-input,
.dk__form .emp-select,
.dk__form .emp-textarea { width: 100%; }
.dk__acts { display: flex; gap: 8px; }

/* Notes */
.dk__notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dk__note-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 13px;
    padding-left: 10px;
    border-left: 2px solid var(--emp-border);
    color: var(--emp-muted);
}
.dk__note-row.is-customer { border-left-color: var(--emp-coral); color: var(--emp-charcoal); }
.dk__note-row time { font-size: 11px; color: var(--emp-muted); white-space: nowrap; }

/* Feedback */
.ebo__msg { padding: 9px 12px; border-radius: var(--emp-r-input); margin: 12px 0 0; font-size: 13px; }
.ebo__msg--ok  { background: var(--emp-success-light); color: var(--emp-success); }
.ebo__msg--err { background: var(--emp-danger-light);  color: var(--emp-danger); }

.ebo__empty { color: var(--emp-muted); padding: 32px 0; font-size: 15px; }
.ebo__pager { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ebo__pager-page { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--emp-muted); }

/* ── Small screens: the stub becomes the docket's header strip ───────────── */
@media (max-width: 720px) {
    /* Read down the docket: consignment, then who and how much on one line,
       then what is in the parcel. Placement is explicit — auto-placement put the
       amount above the customer's name. */
    .dk__face {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 4px 12px;
        padding: 0 14px 14px;
    }
    .dk__stub {
        grid-column: 1 / -1;
        grid-row: 1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: 0 -14px 10px;
        padding: 10px 14px;
        border-right: none;
        border-bottom: 1px dashed var(--emp-border-input);
    }
    .dk__who, .dk__what, .dk__money { padding: 0; }
    .dk__who   { grid-column: 1; grid-row: 2; }
    .dk__money { grid-column: 2; grid-row: 2; align-items: flex-end; }
    .dk__what  { grid-column: 1 / -1; grid-row: 3; }
    .dk__open { display: none; }
    .ebo__find { width: 100%; flex-wrap: wrap; }
    .ebo__find-input { flex: 1 1 100%; width: auto; }
}

/* ── Money reads quiet ────────────────────────────────────────────────────
   WooCommerce paints prices in the theme accent. In a ledger that makes every
   figure shout and nothing rank. Coral is reserved for the one number this page
   exists to show — what you are owed — and for primary actions. Everything else
   is charcoal, and the numbers align in monospace so columns can be scanned. */
.dk__item-p .woocommerce-Price-amount,
.dk__ledger dd .woocommerce-Price-amount,
.dk__note .woocommerce-Price-amount,
.dk__payout .woocommerce-Price-amount { color: var(--emp-charcoal); }
.dk__ledger .is-net dd .woocommerce-Price-amount { color: var(--emp-charcoal); }
.dk__net .woocommerce-Price-amount { color: var(--emp-charcoal); }
.ebo__owed-amount .woocommerce-Price-amount { color: var(--emp-coral-dark); }
.ebo__owed-sub .woocommerce-Price-amount { color: var(--emp-muted); }

/* Forms sit at a readable measure instead of stretching the full column. */
.dk__form { max-width: 420px; }
.dk__form .emp-textarea { min-height: 62px; }
.dk__pay { max-width: none; }

/* Label the control for a screen reader when the section heading already names
   it on screen — two visible labels for one select is noise. */
.dk__sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.dk__net--none { color: var(--emp-muted); font-weight: 400; }

/* ── Actions read as actions ──────────────────────────────────────────────
   One filled button per panel — the thing you came to do — with secondary
   actions outlined beside it. Sized to be hit on a phone, not decorative pills. */
.dk__form .emp-btn {
    min-height: 38px;
    padding: 0 20px;
    font-size: 12px;
}
.dk__form .emp-btn--coral   { box-shadow: 0 1px 2px rgba(184, 92, 56, .25); }
.dk__form .emp-btn--outline {
    background: var(--emp-bg-card);
    color: var(--emp-charcoal);
    border-color: var(--emp-border-input);
}
.dk__form .emp-btn--outline:hover { background: var(--emp-cream); border-color: var(--emp-charcoal); }

.dk__form .emp-input,
.dk__form .emp-select,
.dk__form .emp-textarea { background: var(--emp-bg-subtle); }

/* Values carry the weight; labels stay quiet. */
.dk__ledger { font-size: 14px; }
.dk__ledger dd { font-size: 14px; }
.dk__ledger .is-net { font-size: 15px; }
/* Field labels sit quietly under the section headings — sentence case, so they
   don't compete with them for the same rank. */
.dk__label { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--emp-muted); }
.dk__items { margin-bottom: 4px; }
.dk__item { padding: 7px 0; }

/* A pending return is the one thing on this page that is waiting on a person,
   so it is named on the collapsed row rather than hidden behind a click. */
.dk__alert {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #8A6A00;
}
.dk__alert::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--emp-mustard);
}
.dk__settled { font-size: 12px; color: var(--emp-muted); }

/* A request names the pieces it covers before it gives the reason. */
.dk__pieces-list { margin: 0 0 8px; font-size: 13px; font-family: var(--dk-mono); }
.dk__settled { font-weight: 400; color: var(--emp-muted); }