/* Logistics ERP — the only project stylesheet (≤ 100 lines, ERP_PLAN §8.1). Pico.css does the rest. */
:root {
    --pico-font-size: 95%;
    --erp-ok: #2e7d32;
    --erp-warn: #ed6c02;
    --erp-danger: #c62828;
    --erp-muted: #6b7280;
}

nav.container ul li a { padding-inline: .5rem; white-space: nowrap; }

main.container { padding-block: 1rem 3rem; }

/* Dense tables for lists (orders, stock, tasks, charges). */
table.dense th, table.dense td { padding: .3rem .5rem; font-size: .9rem; white-space: nowrap; }
table.dense td.num, table.dense th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dense td.wrap { white-space: normal; min-width: 14rem; max-width: 30rem; overflow-wrap: anywhere; vertical-align: top; } /* long text (异常中心 说明 / actions) wraps instead of widening the table (CR #154) */

/* Status badges: colour comes from a data-status attribute, never from hardcoded text. */
.badge {
    display: inline-block; padding: .1rem .5rem; border-radius: 999px;
    font-size: .8rem; line-height: 1.4; background: var(--pico-muted-border-color); color: inherit;
}
.badge[data-tone="ok"] { background: var(--erp-ok); color: #fff; }
.badge[data-tone="warn"] { background: var(--erp-warn); color: #fff; }
.badge[data-tone="danger"] { background: var(--erp-danger); color: #fff; }
.badge[data-tone="muted"] { background: var(--erp-muted); color: #fff; }
.badge[data-tone="info"] { background: #2563eb; color: #fff; }

/* Scan-gun friendly inputs: big, always visible, autofocus target (AGENTS.md "Every warehouse form accepts scan-gun input"). */
input.scan { font-size: 1.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; }

/* Mobile driver / scanning pages. */
@media (max-width: 640px) {
    main.container { padding-inline: .75rem; }
    button, [role="button"] { min-height: 3rem; }
}

.text-muted { color: var(--erp-muted); }
.text-danger { color: var(--erp-danger); }

/* Flash messages and inline forms (nav logout). */
.flash { padding: .6rem 1rem; margin-bottom: 1rem; border-left: 4px solid var(--erp-ok); }
.flash-error { border-left-color: var(--erp-danger); }
.flash ul { margin: 0; padding-left: 1.2rem; }
form.inline { display: inline; margin: 0; }
form.inline button { padding: .2rem .7rem; margin: 0; width: auto; }
.login-card { max-width: 26rem; margin: 3rem auto; }
.register-card { max-width: 44rem; margin: 2rem auto; }

/* Top bar: one dropdown per module, nothing wraps mid-word; the bar itself wraps on narrow screens. */
nav.erp-nav { flex-wrap: wrap; row-gap: .25rem; }
nav.erp-nav ul { flex-wrap: wrap; }
nav.erp-nav details.dropdown { margin: 0; }
nav.erp-nav details.dropdown summary { white-space: nowrap; padding: .3rem .75rem; border: none; background: transparent; color: var(--pico-primary); font-weight: 500; }
nav.erp-nav details.dropdown summary.active { font-weight: 700; text-decoration: underline; text-underline-offset: .3rem; }
nav.erp-nav details.dropdown summary::after { margin-left: .25rem; }
nav.erp-nav details.dropdown ul { min-width: 12rem; }
nav.erp-nav details.dropdown ul li { white-space: nowrap; }
nav.erp-nav .erp-search { width: 13rem; margin: 0; padding: .25rem .6rem; }
nav.erp-nav .erp-user { white-space: nowrap; }
nav.erp-nav .erp-logout { padding: .25rem .7rem; margin: 0; white-space: nowrap; }
@media (max-width: 1100px) { nav.erp-nav .erp-search { width: 9rem; } nav.erp-nav .erp-user { display: none; } }

/* Shared form / layout classes (tester feedback round 1, CHANGE_REQUESTS #80). */
/* Every label/value list renders as a two-column grid (was: bare <dl> stacks, tester feedback 2026-09-10); .kv-2 = two pairs per row on wide screens. */
dl { display: grid; grid-template-columns: 9rem minmax(0, 1fr); column-gap: 1rem; row-gap: .4rem; align-items: baseline; margin: 0 0 1.25rem; }
dl dt { margin: 0; color: var(--erp-muted); font-weight: 400; }
dl dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 768px) { dl.kv-2 { grid-template-columns: 9rem minmax(0, 1fr) 9rem minmax(0, 1fr); } }
article.kv-card { padding: .9rem 1.1rem .4rem; margin-bottom: 1.25rem; }
form.filter-row { display: flex; flex-wrap: nowrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
form.filter-row > * { margin-bottom: 0; }
form.filter-row input[type="search"] { flex: 1 1 14rem; min-width: 0; }
form.filter-row select, form.filter-row button { flex: 0 0 auto; width: auto; }
form.filter-row select { min-width: 9rem; }
@media (max-width: 640px) { form.filter-row { flex-wrap: wrap; } form.filter-row input[type="search"] { flex-basis: 100%; } }
table.form-rows { margin-bottom: .5rem; }
table.form-rows th, table.form-rows td { padding: .2rem .25rem; vertical-align: middle; white-space: nowrap; font-size: .85rem; }
table.form-rows th { font-weight: 500; color: var(--erp-muted); }
table.form-rows input, table.form-rows select { margin-bottom: 0; padding: .3rem .5rem; font-size: .9rem; height: auto; }
table.form-rows td.desc input { min-width: 11rem; }
table.form-rows td.type select { min-width: 9.5rem; }
table.form-rows td.num input { width: 5.5rem; }
table.form-rows button.remove-row { width: auto; margin: 0; padding: .15rem .6rem; line-height: 1.2; }
button.form-rows-add { width: auto; margin-bottom: 1.5rem; }
.suggest-wrap { position: relative; }
.suggest-list { position: absolute; z-index: 20; left: 0; right: 0; margin: 0; padding: .25rem 0; list-style: none; background: var(--pico-background-color); border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); max-height: 18rem; overflow-y: auto; }
.suggest-list li { padding: .4rem .75rem; cursor: pointer; font-size: .9rem; line-height: 1.35; }
.suggest-list li[aria-selected="true"], .suggest-list li:hover { background: var(--pico-secondary-focus); }
.suggest-list li small { display: block; color: var(--erp-muted); }

/* Forms: give hints and the tailgate checkbox room to breathe (tester feedback, portal new-order page). */
form label > small, form fieldset > small, form .grid > small { display: block; margin-top: .4rem; line-height: 1.5; }
#tailgate-field { margin: 1.25rem 0 1.75rem; }
#tailgate-field label { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; font-size: 1rem; }
#tailgate-field label input[type="checkbox"] { margin: 0; }
#tailgate-field small { display: block; margin-top: .2rem; line-height: 1.6; }
/* <x-date-field> (AGENTS.md, DateFieldTest): dd/mm/yyyy text + hidden ISO + calendar button; the native date input is only the picker, kept 1px and transparent so showPicker() still anchors to the field. */
.date-field { display: flex; align-items: stretch; gap: .25rem; position: relative; margin-bottom: var(--pico-spacing); } label > .date-field { margin-top: calc(var(--pico-spacing) * .25); } .date-field > input, .date-field > button { margin-bottom: 0; } .date-field > .date-text { flex: 1 1 7rem; min-width: 0; } .date-field > .date-time { flex: 0 1 7.5rem; width: auto; } .date-field > .date-pick { flex: 0 0 auto; width: auto; padding: .25rem .55rem; line-height: 1; display: inline-flex; align-items: center; } .date-field > .date-native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; } form.filter-row .date-field { flex: 0 1 11rem; }