/* ============================================================================
   61-cohesion.css — App-wide visual cohesion

   Promotes the treatments refined for the Shipping redesign to the rest of
   the WMS. Pure CSS, no JS dependencies, **no new colors** — uses only the
   design tokens already defined in 00-base.css.

   Loaded LAST so it can refine. Rules are deliberately narrow and additive
   (no element resets, no aggressive overrides) so nothing layout-wise can
   accidentally break.
   ============================================================================ */

/* ── Status badges: leading dot, app-wide ───────────────────────────────────
   The Shipping tab got these dot-prefixed pills; promote that look to every
   .badge in the app. The dot uses currentColor so it automatically picks up
   the badge-green / -yellow / -red etc. tint. Opt-out class for the rare
   place where a plain label badge is preferred. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.badge.no-dot::before { content: none; }
/* Don't double-up: boot.js already injects .ph-pulse-dot into badges for
   PENDING / PENDING_RECEIVE / ON_HOLD / PROCESSING (it animates a pulse).
   Suppress our ::before dot when that animated dot is already present. */
.badge:has(.ph-pulse-dot)::before { content: none; }
/* The Inventory tab uses .badge purely as colored NUMBER pills (Expected /
   Available / Allocated / Out counts and column headers), not as status
   badges — the leading dot looks wrong there, so suppress it. */
#inventory .badge::before { content: none; }
.inv-stat .badge::before,
.inv-row-stats .badge::before { content: none; }
/* Inside printed BOL/manifest/invoice popups don't add the dot — print
   layouts have their own constrained chrome. */
@media print {
    .badge::before { content: none; }
}

/* ── Tables: sticky header app-wide, but ONLY where the surrounding
   .table-container scrolls. We don't add a max-height (that would change
   layout); we just promote thead to sticky for when scroll already exists. */
.table-container > table > thead th,
.table-container > div > table > thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
@media print {
    .table-container > table > thead th,
    .table-container > div > table > thead th { position: static; }
}

/* ── Empty state: consistent muted treatment when an existing
   "No X yet" message is wrapped in .empty-state */
.empty-state {
    text-align: center;
    color: var(--text-muted);
}
.empty-state p { margin: 0; font-size: 14px; }

/* ── Hover lift on KPI / quick-action tiles for the whole app, not just
   shipping. Subtle, additive, doesn't change layout. */
.quick-action,
.ship-kpi {
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.quick-action:hover,
.ship-kpi:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* ── Buttons: keep .btn-sm vertically centered when used alongside other
   .btn-sm in row actions (consistent baseline across tabs). */
td .btn-sm { vertical-align: middle; }

/* ── Inputs / selects in modals: focus ring uses the brand green tokens
   instead of the browser default blue. Only applies when the element is
   inside a modal so we don't change global input behaviour. */
.modal input:focus,
.modal select:focus,
.modal textarea:focus,
#modalContent input:focus,
#modalContent select:focus,
#modalContent textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--green-ghost);
}

/* ── Modal action row: consistent footer treatment app-wide (only adds
   the subtle top divider and spacing, doesn't touch button styles). */
.modal-actions {
    border-top: 1px solid var(--border);
}
/* Inline `style="..."` on a per-modal .modal-actions still wins, so any
   modal that customized its action area is unaffected. */

/* ── Cards: ensure border + shadow are consistent across the app.
   We don't change padding (different cards intentionally have different
   internal spacing); only the chrome. */
.card {
    border-color: var(--border);
}

/* ── Tiny consistency fixes for things that are visibly different from
   tab to tab today. */

/* "Lot number" red used in shipping/invoice/receiving — pin to the
   token shade so all tabs match. */
.lot-number,
td .lot-number {
    color: var(--status-danger-text);
    font-weight: 600;
}

/* Section dividers inside long modals — when a heading-like span is used
   with .section-label class, render it consistently. */
.section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Page header subtitle consistency ── */
.page-header .subtitle {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 2px;
}

/* ── Picker chip (Orders table) ──────────────────────────────────────────────
   Compact rounded-pill that lives in its own Picker column. Three states:
   - assigned   : green-soft bg, green-dark text, clickable (re-assign)
   - unassigned : neutral dashed pill, clickable (assign)
   - locked     : muted, no hover (shipped — read-only)
   - empty      : em-dash placeholder for shipped+unassigned (shouldn't happen) */
.picker-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 999px;
    white-space: nowrap;
    user-select: none;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.picker-chip.picker-assigned {
    background: var(--green-soft);
    color: var(--green-dark);
    border: 1px solid var(--green-soft);
    cursor: pointer;
}
.picker-chip.picker-assigned:hover {
    background: var(--green-dark);
    color: #fff;
    border-color: var(--green-dark);
}
.picker-chip.picker-unassigned {
    background: transparent;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    cursor: pointer;
}
.picker-chip.picker-unassigned:hover {
    color: var(--green-dark);
    border-color: var(--green-primary);
    border-style: solid;
    background: var(--green-ghost);
}
.picker-chip.picker-locked {
    background: var(--bg-muted, #f4f5f7);
    color: var(--text-muted);
    border: 1px solid var(--border);
    cursor: default;
}
.picker-chip.picker-empty {
    color: var(--text-muted);
    opacity: 0.5;
    padding: 3px 8px;
}

/* ── Order Picking tab: elapsed-time pill ───────────────────────────────────
   Subtle status indicator showing wait/active/completed durations next to
   each row. Color tells the manager which orders are aging. */
.pick-elapsed {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--green-ghost);
    color: var(--green-dark);
    white-space: nowrap;
}
.pick-elapsed.pick-elapsed-wait {
    background: rgba(217,119,6,0.10);
    color: #b45309;
}
.pick-elapsed.pick-elapsed-done {
    background: var(--green-soft);
    color: var(--green-dark);
}

/* ── Pick sheet variance highlight ─────────────────────────────────────────
   Inputs in the verification modal that diverge from expected get a soft
   red wash so they're impossible to miss before the manager hits Complete. */
.pick-variance-flag {
    font-size: 14px;
    line-height: 1;
}

/* ── Pick sheet density ─────────────────────────────────────────────────────
   Modal sprawls without these — the default modal has no width cap and the
   global table padding (13px+) eats vertical space. Lock the modal to a
   sensible width and compact the table cells. */
#modalContent:has(.pick-sheet-table) {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}
.pick-sheet-table table { font-size: 12.5px; }
.pick-sheet-table thead th {
    padding: 8px 12px;
    font-size: 10px;
    letter-spacing: 0.7px;
    background: var(--bg-subtle, #f8fafc);
}
.pick-sheet-table tbody td {
    padding: 8px 12px;
    line-height: 1.35;
}
.pick-sheet-table tbody td input[type="number"] {
    padding: 4px 8px;
    font-size: 12.5px;
    height: 28px;
}
.pick-sheet-table tbody td .btn-sm {
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.3;
}