/* =====================================================================
   Lager — interface styles

   Built for people who look at this for eight hours. Priorities, in
   order: legibility of numbers and codes, obvious selection state,
   density, speed. Decoration comes last and mostly not at all.

   Layout rule, permanent: the right frame takes constrained,
   system-driven entry only — serials, locations, quantities, unit
   assignment. Free-text business data belongs in the middle frame.
   ===================================================================== */

:root {
    --ink:        #16191d;
    --ink-soft:   #5b636f;
    --line:       #d6dae0;
    --line-soft:  #e8ebee;
    --surface:    #f2f4f6;
    --panel:      #ffffff;

    /* One saturated colour in the whole interface, reserved for
       selection and focus. If it is blue, your eye is there. */
    --select:     #0b4f8f;
    --select-bg:  #e2edf9;

    --ok:         #146b48;
    --warn:       #8a5106;
    --bad:        #96222a;

    --row:        30px;
    --menu-w:     208px;
    --entry-w:    360px;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Monospace only where character confusion has a real cost:
       serials, article numbers, barcodes, locations. 0/O and 1/l. */
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink);
    background: var(--surface);
}

a { color: var(--select); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono, .col-code { font-family: var(--mono); font-size: 12px; }
.num, .col-num { font-variant-numeric: tabular-nums; text-align: right; }
.muted { color: var(--ink-soft); }
.hint { color: var(--ink-soft); font-size: 11px; margin-left: 6px; }

/* ------------------------------------------------------------------ */
/*  Frame                                                             */
/* ------------------------------------------------------------------ */

.app {
    display: grid;
    grid-template-columns: var(--menu-w) minmax(0, 1fr) auto;
    height: 100vh;
}

.menu {
    background: #1a1e24;
    color: #c8cdd4;
    overflow-y: auto;
    padding-bottom: 24px;
}

.menu__brand {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #fff;
    padding: 14px 16px;
    border-bottom: 1px solid #2a2f37;
}

.menu__group { margin-top: 18px; }

.menu__group-name {
    font-size: 11px;
    color: #7c8592;
    padding: 0 16px 5px;
}

.menu__item {
    display: block;
    padding: 5px 16px;
    color: #c8cdd4;
    border-left: 3px solid transparent;
}
.menu__item:hover { background: #22272e; color: #fff; text-decoration: none; }
.menu__item.is-active {
    background: #22272e;
    color: #fff;
    border-left-color: var(--select);
}

.main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* ------------------------------------------------------------------ */
/*  Filter bar — fixed above the list, never scrolls away              */
/* ------------------------------------------------------------------ */

.filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}

.filter__search { flex: 0 1 340px; }
.filter__select { flex: 0 0 auto; }
.filter__count  { margin-left: auto; color: var(--ink-soft); font-size: 12px; }

input[type="search"], input[type="text"], input[type="number"], select {
    font: inherit;
    padding: 4px 8px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: #fff;
    color: var(--ink);
}

input:focus, select:focus, button:focus-visible, .list__row:focus-visible {
    outline: 2px solid var(--select);
    outline-offset: -1px;
}

.btn {
    font: inherit;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}
.btn:hover { background: #f6f8fa; }

.btn--primary {
    background: var(--select);
    border-color: var(--select);
    color: #fff;
}
.btn--primary:hover { background: #0a4478; }

/* ------------------------------------------------------------------ */
/*  List                                                              */
/* ------------------------------------------------------------------ */

.list {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
    flex: 1 1 auto;
    overflow-y: auto;
    display: block;
}

.list thead, .list tbody { display: table; width: 100%; table-layout: fixed; }

.list thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fbfcfd;
    box-shadow: inset 0 -1px 0 var(--line);
}

.list th {
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    color: var(--ink-soft);
    padding: 6px 10px;
}
.list th.col-num { text-align: right; }

.list td {
    padding: 0 10px;
    height: var(--row);
    border-bottom: 1px solid var(--line-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list__row { cursor: pointer; }
.list__row:hover { background: #f7f9fb; }
.list__row.is-selected,
.list__row.is-selected:hover {
    background: var(--select-bg);
    box-shadow: inset 3px 0 0 var(--select);
}

.list th.col-code, .list td.col-code { width: 130px; }
.list th.col-num,  .list td.col-num  { width: 80px; }

/* ------------------------------------------------------------------ */
/*  Tags                                                              */
/* ------------------------------------------------------------------ */

.tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 11px;
    border: 1px solid transparent;
}
.tag--serial { background: #eaf1fa; color: var(--select); border-color: #c7dcf2; }
.tag--batch  { background: #eef4ec; color: var(--ok);     border-color: #cde0d4; }
.tag--off    { background: #f2f3f4; color: var(--ink-soft); border-color: var(--line); }
.tag--blocked{ background: #fbeceb; color: var(--bad);    border-color: #f0cfcd; }

/* ------------------------------------------------------------------ */
/*  Detail                                                            */
/* ------------------------------------------------------------------ */

.detail { overflow-y: auto; padding: 14px; }

.detail__head { margin-bottom: 12px; }
.back { font-size: 12px; }

.detail__title {
    font-size: 17px;
    font-weight: 600;
    margin: 4px 0 0;
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 12px;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 12px 14px;
}

.panel__title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.panel__note { font-weight: 400; font-size: 11px; color: var(--ink-soft); }
.panel__foot { margin: 10px 0 0; font-size: 11px; color: var(--ink-soft); }

.fields {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 3px 12px;
    margin: 0 0 8px;
}
.fields dt { color: var(--ink-soft); }
.fields dd { margin: 0; }
.fields dd.num { text-align: left; }

/* ------------------------------------------------------------------ */
/*  Right frame                                                       */
/* ------------------------------------------------------------------ */

.entry {
    width: var(--entry-w);
    background: var(--panel);
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.entry[hidden] { display: none; }

.entry__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
}
.entry__title { font-weight: 600; }

.entry__close {
    border: 0;
    background: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--ink-soft);
    padding: 0 4px;
}

.entry__body { padding: 14px; overflow-y: auto; flex: 1 1 auto; }

/* Progress readout for N-of-M capture. The number is the whole point,
   so it gets the size. */
.progress {
    font-variant-numeric: tabular-nums;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 2px;
}
.progress__label { color: var(--ink-soft); font-size: 12px; margin-bottom: 12px; }

.scan-list { list-style: none; margin: 12px 0 0; padding: 0; }
.scan-list li {
    font-family: var(--mono);
    font-size: 12px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    justify-content: space-between;
}
.scan-list li.is-dupe { background: #fbeceb; color: var(--bad); }

/* ------------------------------------------------------------------ */
/*  Messages                                                          */
/* ------------------------------------------------------------------ */

.flashes { padding: 10px 14px 0; }
.flash {
    padding: 7px 10px;
    border-radius: 2px;
    border: 1px solid var(--line);
    margin-bottom: 6px;
}
.flash--ok    { background: #eef4ec; border-color: #cde0d4; color: var(--ok); }
.flash--error { background: #fbeceb; border-color: #f0cfcd; color: var(--bad); }
.flash--warn  { background: #fdf5e8; border-color: #ecdcbd; color: var(--warn); }

.empty {
    margin: auto;
    padding: 60px 20px;
    text-align: center;
    color: var(--ink-soft);
    max-width: 46ch;
}
.empty__hint { font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}


/* ------------------------------------------------------------------ */
/*  Signed-out screens                                                */
/* ------------------------------------------------------------------ */

.body--plain {
    display: grid;
    place-items: center;
    min-height: 100vh;
    background: #1a1e24;
}

.signin__box {
    width: 340px;
    background: var(--panel);
    border-radius: 3px;
    padding: 26px 28px 28px;
}

.signin__title  { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.signin__note   { color: var(--ink-soft); font-size: 12px; margin: 0 0 16px; }
.signin__label  { display: block; margin: 12px 0 4px; font-size: 12px; color: var(--ink-soft); }
.signin__input  { width: 100%; height: 32px; }
.signin__submit { width: 100%; height: 34px; margin-top: 20px; }

.signin__error {
    background: #fbeceb;
    border: 1px solid #f0cfcd;
    color: var(--bad);
    padding: 7px 10px;
    border-radius: 2px;
    margin: 12px 0 0;
    font-size: 12px;
}

/* ------------------------------------------------------------------ */
/*  Menu footer — who is signed in                                    */
/* ------------------------------------------------------------------ */

.menu__user {
    margin-top: 26px;
    padding: 12px 16px 0;
    border-top: 1px solid #2a2f37;
}
.menu__user-name { color: #e6e9ed; }
.menu__user-role { color: #7c8592; font-size: 11px; margin-bottom: 8px; }

.menu__logout {
    background: none;
    border: 1px solid #39404a;
    color: #c8cdd4;
    font: inherit;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 2px;
    cursor: pointer;
}
.menu__logout:hover { background: #22272e; color: #fff; }