/* ==========================================================================
   WMS app — design system
   Shares tokens with the marketing site (ink + paper neutrals, one
   safety-yellow accent, Archivo / IBM Plex). Tuned denser for daily use.
   Bootstrap 5.3 is themed through its CSS variables where possible.
   ========================================================================== */

:root {
    --ink: #111315;
    --ink-2: #1c1f23;
    --ink-3: #2a2e33;
    --paper: #f6f5f1;
    --surface: #ffffff;
    --surface-2: #fbfaf7;
    --line: #e2e0d9;
    --line-strong: #cfccc3;
    --text: #1b1d20;
    --muted: #5a5e65;
    --accent: #f2b705;
    --accent-soft: rgba(242, 183, 5, .45);
    --success: #1f7a4d;
    --danger: #b42318;

    --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;

    --radius: 6px;
    --radius-lg: 10px;
    --shadow: 0 1px 2px rgba(17, 19, 21, .06), 0 8px 24px rgba(17, 19, 21, .08);

    /* Bootstrap theme */
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: 15px;
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--text);
    --bs-body-bg: var(--paper);
    --bs-secondary-color: var(--muted);
    --bs-border-color: var(--line);
    --bs-border-radius: var(--radius);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-link-color: var(--ink);
    --bs-link-color-rgb: 17, 19, 21;
    --bs-link-hover-color: var(--ink);
    --bs-link-hover-color-rgb: 17, 19, 21;
    --bs-emphasis-color: var(--ink);
    --bs-heading-color: var(--ink);
    --bs-focus-ring-color: var(--accent-soft);
}

/* ---------- Base ---------- */

body {
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink);
    letter-spacing: -0.015em;
    font-weight: 700;
}

a { text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.mono { font-family: var(--font-mono); }
.text-muted, .text-secondary { color: var(--muted) !important; }

/* Generic link inside data: dark, underline on hover. */
.link-quiet { color: var(--ink); text-decoration: none; }
.link-quiet:hover { color: var(--ink); text-decoration: underline; }

/* ---------- App shell ---------- */

.app-header {
    position: sticky; top: 0; z-index: 1020;
    background: rgba(246, 245, 241, .94);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--line);
}
.app-header .navbar { padding: var(--s-2) 0; }
.app-header .navbar-brand img { display: block; }
.app-header .nav-link {
    font-size: 14px; font-weight: 500; color: var(--muted);
    padding: var(--s-2) var(--s-3) !important; border-radius: var(--radius);
}
.app-header .nav-link:hover { color: var(--ink); }
.app-header .nav-link.active { color: var(--ink); }
.app-header .navbar-toggler { border: 1px solid var(--line); padding: 6px var(--s-2); }
.app-header .navbar-toggler:focus { box-shadow: none; }
.app-header .user-name { font-size: 14px; color: var(--muted); }

/* Facility section nav: horizontal, scrolls on small screens. */
.facility-nav { border-top: 1px solid var(--line); }
.facility-nav ul {
    display: flex; gap: var(--s-1); list-style: none; margin: 0; padding: 0;
    overflow-x: auto; scrollbar-width: none;
}
.facility-nav ul::-webkit-scrollbar { display: none; }
.facility-nav a {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 10px var(--s-3); font-size: 14px; font-weight: 500; color: var(--muted);
    text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.facility-nav a:hover { color: var(--ink); }
.facility-nav a.active { color: var(--ink); border-bottom-color: var(--accent); }
.facility-nav i { font-size: 15px; }

.app-main { flex: 1; padding-top: var(--s-5); padding-bottom: var(--s-7); }

.app-footer {
    border-top: 1px solid var(--line); padding: var(--s-4) 0;
    font-size: 13px; color: var(--muted);
}

/* ---------- Page header ---------- */

.breadcrumb { --bs-breadcrumb-margin-bottom: var(--s-2); font-size: 13px; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb-item, .breadcrumb-item.active { color: var(--muted); }

.page-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--s-3) var(--s-4); margin-bottom: var(--s-5);
}
.page-title { font-size: 1.75rem; margin: 0; letter-spacing: -0.025em; }
.page-title .id { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }

.section-title {
    display: flex; align-items: baseline; gap: var(--s-2);
    font-size: 1.125rem; margin: var(--s-6) 0 var(--s-3);
}
.section-title .count { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--muted); }
.section-title .aside { margin-left: auto; font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--muted); }

/* ---------- Buttons ---------- */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: 14px;
    --bs-btn-padding-x: 14px;
    --bs-btn-padding-y: 8px;
    --bs-btn-border-radius: var(--radius);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--accent-soft);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-sm { --bs-btn-padding-x: 10px; --bs-btn-padding-y: 5px; --bs-btn-font-size: 13px; }
.btn-lg { --bs-btn-padding-x: 20px; --bs-btn-padding-y: 12px; --bs-btn-font-size: 16px; }

.btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ink-3); --bs-btn-hover-border-color: var(--ink-3);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ink-2); --bs-btn-active-border-color: var(--ink-2);
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--ink-3); --bs-btn-disabled-border-color: var(--ink-3);
}
.btn-outline-secondary {
    --bs-btn-color: var(--ink); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--surface); --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-color: var(--ink); --bs-btn-active-bg: var(--surface-2); --bs-btn-active-border-color: var(--ink);
    --bs-btn-disabled-color: var(--muted); --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-border-color: var(--line);
}
.btn-outline-danger {
    --bs-btn-color: var(--danger); --bs-btn-bg: var(--surface); --bs-btn-border-color: #e6b8b3;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #8f1c13; --bs-btn-active-border-color: #8f1c13;
}
.btn-link { --bs-btn-color: var(--muted); --bs-btn-hover-color: var(--ink); text-decoration: none; font-weight: 500; }

/* Segmented control (radio .btn-check groups) */
.btn-check + .btn-outline-secondary { --bs-btn-active-bg: var(--ink); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--ink); }

/* ---------- Forms ---------- */

.form-label { font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.form-control, .form-select {
    font-size: 15px; border-color: var(--line-strong); border-radius: var(--radius);
    padding: 8px 12px; background-color: var(--surface);
}
.form-control:focus, .form-select:focus {
    border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); background-color: var(--surface);
}
.form-control::placeholder { color: #9a9ea5; }
.form-control:disabled, .form-control[readonly] { background-color: var(--surface-2); color: var(--muted); border-color: var(--line); }
.form-select-sm { font-size: 13px; padding-top: 5px; padding-bottom: 5px; }
.input-group-text { background: var(--surface-2); border-color: var(--line-strong); color: var(--muted); }
.form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.form-check-input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); }

form ul.form-element-error {
    list-style: none; padding: 0; margin: var(--s-1) 0 0;
    font-size: 13px; color: var(--danger);
}
.form-control.is-invalid { border-color: var(--danger); }

.form-panel {
    max-width: 560px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: var(--s-5);
}
.form-actions { display: flex; gap: var(--s-2); margin-top: var(--s-5); }

/* Search bar above lists */
.search-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.search-bar .input-group { max-width: 520px; flex: 1 1 320px; }
.result-count { font-size: 13px; color: var(--muted); margin-bottom: var(--s-3); }

/* Scan field: the primary interaction on warehouse floor screens. */
.scan-panel {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: var(--s-5); margin-bottom: var(--s-5);
}
.scan-step {
    display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3);
    font-family: var(--font-mono); font-size: 12px; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.scan-step::before { content: ""; width: 8px; height: 8px; background: var(--accent); flex: none; }
.scan-field .input-group-text { background: var(--ink); border-color: var(--ink); color: var(--accent); font-size: 1.25rem; padding: 0 var(--s-4); }
.scan-field .form-control {
    font-family: var(--font-mono); font-size: 1.125rem; padding: 14px var(--s-4); border-color: var(--ink);
}
.scan-field .btn { padding-left: var(--s-5); padding-right: var(--s-5); }
@media (max-width: 575.98px) {
    .scan-panel { padding: var(--s-3); }
    .scan-field .form-control { font-size: 1rem; padding: 12px; }
}

/* ---------- Surfaces ---------- */

.panel {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: var(--s-4) var(--s-5);
}
.card { --bs-card-border-color: var(--line); --bs-card-border-radius: var(--radius-lg); }

/* Key/value facts on detail pages */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px var(--s-5); margin: 0; }
.facts dt { font-weight: 500; color: var(--muted); font-size: 14px; }
.facts dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.facts dd .meta { color: var(--muted); font-family: var(--font-mono); font-size: 13px; margin-left: var(--s-2); }

/* Empty states */
.empty {
    border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
    padding: var(--s-6) var(--s-5); text-align: center; color: var(--muted);
}
.empty p { margin: 0; }
.empty .btn { margin-top: var(--s-4); }

/* ---------- Data tables ---------- */

.table-wrap {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    overflow-x: auto;
}
.table-data {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--surface-2);
    margin: 0; font-size: 14px; white-space: nowrap;
}
.table-data th {
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted); background: var(--surface-2);
    padding: 10px var(--s-4); border-bottom: 1px solid var(--line);
}
.table-data td { padding: 10px var(--s-4); vertical-align: middle; border-color: var(--line); }
.table-data tr:last-child td { border-bottom: 0; }
.table-data .wrap { white-space: normal; min-width: 14rem; }
.table-data a { color: var(--ink); text-decoration: none; }
.table-data a:hover { text-decoration: underline; }
.table-data .primary { font-weight: 600; }
.table-data .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Identifiers, tags, status ---------- */

.code { font-family: var(--font-mono); font-size: .92em; }

.tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .03em;
    text-transform: uppercase; color: var(--ink); text-decoration: none;
    background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 4px;
    padding: 2px 8px; line-height: 1.5;
}
a.tag:hover { border-color: var(--ink); color: var(--ink); }
.tag-remove { color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1; }
.tag-remove:hover { color: var(--danger); }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }

.status { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }
.status::before {
    content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px;
    background: var(--line-strong); vertical-align: 1px;
}
.status.is-on::before { background: var(--accent); }

/* ---------- Timeline (item / package / collection history) ---------- */

.timeline { list-style: none; margin: 0; padding: 0; position: relative; max-height: 360px; overflow-y: auto; }
.timeline li {
    position: relative; padding: 0 0 var(--s-4) 26px; font-size: 14px;
}
.timeline li::before {
    content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px;
    background: var(--surface); border: 2px solid var(--ink); z-index: 1;
}
.timeline li::after {
    content: ""; position: absolute; left: 5px; top: 17px; bottom: 0; width: 2px; background: var(--line);
}
.timeline li:last-child::after { display: none; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li.is-current::before { background: var(--accent); }
.timeline .ev { color: var(--ink); }
.timeline .ev a { font-weight: 600; color: var(--ink); text-decoration: none; }
.timeline .ev a:hover { text-decoration: underline; }
.timeline time { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* ---------- Home: facility tool grid ---------- */

.facility-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--s-5); }
.facility-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
}
.facility-card-head h2 { font-size: 1.25rem; margin: 0; }
.facility-card-head h2 a { color: var(--ink); text-decoration: none; }
.facility-card-head h2 a:hover { text-decoration: underline; }

.tool-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--surface); border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden;
}
.tool {
    display: flex; flex-direction: column; gap: var(--s-3); background: var(--surface);
    padding: var(--s-5); color: var(--ink); text-decoration: none; font-weight: 600;
    transition: background .15s;
    /* Cell dividers; the outer edges are clipped by the grid's overflow. */
    box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}
.tool i { font-size: 1.5rem; line-height: 1; }
.tool:hover { background: var(--surface-2); color: var(--ink); }
.tool:hover i { color: var(--ink); }
.tool:focus-visible { outline-offset: -3px; }
.tool-grid.is-standalone { gap: var(--s-3); background: none; overflow: visible; border-radius: 0; }
.tool-grid.is-standalone .tool { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
.tool-grid.is-standalone .tool:hover { border-color: var(--ink); }
@media (max-width: 767.98px) {
    .tool-grid { grid-template-columns: repeat(2, 1fr); }
    .tool { padding: var(--s-4); }
}

/* ---------- Picklist ---------- */

.pick-group { margin-bottom: var(--s-4); }
.pick-group h3 {
    font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .06em;
    color: var(--muted); margin: 0 0 var(--s-2);
}
.pick-group h3 a { color: var(--muted); text-decoration: none; }
.pick-group h3 a:hover { color: var(--ink); }
.pick-row {
    display: flex; align-items: center; gap: var(--s-3); background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-2) var(--s-3); margin-bottom: 6px;
}
.pick-row .qty { font-family: var(--font-mono); font-weight: 600; min-width: 3ch; }
.pick-row .sku { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pick-row .sku a { color: var(--ink); text-decoration: none; font-weight: 500; }
.pick-row .sku a:hover { text-decoration: underline; }
.pick-row .item-id { font-family: var(--font-mono); font-size: 13px; color: var(--muted); text-decoration: none; }
.pick-row .actions { display: flex; gap: 6px; }

/* ---------- Tabs ---------- */

.nav-tabs { --bs-nav-tabs-border-color: var(--line); --bs-nav-tabs-link-active-bg: var(--paper); --bs-nav-tabs-link-active-border-color: var(--line) var(--line) var(--paper); margin-bottom: var(--s-4); }
.nav-tabs .nav-link { color: var(--muted); font-weight: 500; font-size: 14px; }
.nav-tabs .nav-link:hover { color: var(--ink); }
.nav-tabs .nav-link.active { color: var(--ink); box-shadow: inset 0 2px 0 var(--accent); }

/* ---------- Alerts / flash ---------- */

.alert {
    --bs-alert-border-radius: var(--radius);
    border: 0; border-left: 3px solid; font-size: 14px; padding: var(--s-3) var(--s-4);
}
.alert-dismissible .btn-close { padding: 14px var(--s-4); }
.alert-success { --bs-alert-bg: #edf6f0; --bs-alert-color: #14512f; border-left-color: var(--success); }
.alert-danger, .alert-error { --bs-alert-bg: #fdf1f0; --bs-alert-color: #7a1a12; border-left-color: var(--danger); background: #fdf1f0; color: #7a1a12; }
.alert-warning { --bs-alert-bg: #fdf6e1; --bs-alert-color: #5c4500; border-left-color: var(--accent); }
.alert-info, .alert-primary, .alert-secondary { --bs-alert-bg: var(--surface); --bs-alert-color: var(--ink); border-left-color: var(--ink); }

/* Login screen: inline message under heading */
.discrete-flash .alert { padding: 0; margin: 0; background: none; border: none; }
.discrete-flash button { display: none; }

/* ---------- Modals ---------- */

.modal { --bs-modal-border-radius: var(--radius-lg); --bs-modal-border-color: var(--line); --bs-modal-header-border-color: var(--line); --bs-modal-footer-border-color: var(--line); }
.modal-title { font-size: 1.125rem; }
.search-help dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-4); margin: 0; }
.search-help dt { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.search-help dd { margin: 0; font-size: 14px; color: var(--muted); }

/* ---------- Auth screens ---------- */

.auth { max-width: 400px; margin: var(--s-7) auto 0; }
.auth-logo { display: block; margin: 0 auto var(--s-5); }
.auth .panel { padding: var(--s-5); box-shadow: var(--shadow); }
.auth h1 { font-size: 1.5rem; margin-bottom: var(--s-4); }
.auth .form-actions { justify-content: space-between; align-items: center; }

/* ---------- Misc ---------- */

.barcode-print.input-group { width: auto; flex-wrap: nowrap; }
.barcode-print .form-select { width: auto; max-width: 14rem; }

.order-barcodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-4); text-align: center; }
.order-barcodes img { max-width: 100%; height: auto; }

iframe { width: 1px; min-width: 100%; border: 0; }

.spinner-border-sm { --bs-spinner-width: .85rem; --bs-spinner-height: .85rem; --bs-spinner-border-width: .15em; color: var(--muted); }

.error-page { text-align: center; padding: var(--s-7) 0; }
.error-page h1 { font-size: 2.5rem; }
.error-page p { color: var(--muted); }