/* Tally Prime chrome for the Stock & Customer Manager web app.
   Light is the shipped palette; [data-theme="dark"] below re-maps the same
   tokens onto a deep navy so every rule stays colour-agnostic. */
:root {
    color-scheme: light;

    /* brand */
    --navy: #12405f;
    --navy-2: #0d3350;
    --navy-3: #1b5580;
    --accent: #1a6fa8;
    --accent-soft: #e8f2f9;

    /* text */
    --ink: #16262f;
    --muted: #63798a;

    /* surfaces */
    --bg: #dfe6ec;
    --panel: #f6f8fa;
    --card: #ffffff;
    --line: #c2cfda;
    --line-2: #9aabb8;
    --field: #fff;
    --field-off: #f2f5f8;
    --field-focus: #fffbe0;
    --bar-strip: #f7fafc;
    --head-a: #fff;
    --head-b: #f4f8fb;
    --vhead-a: #fff;
    --vhead-b: #f2f7fb;
    --th-bg: #dce7ef;
    --th-sep: #eef3f7;
    --row-line: #e7edf2;
    --row-alt: #fbfdfe;
    --opt-line: #f1f5f8;
    --dot-line: #dfe6ec;

    /* dark chrome: top bar and nav rail */
    --bar-a: #1d5a80;
    --bar-b: #0d3350;
    --nav-edge: #0a2a41;
    --on-nav: #fff;
    --nav-btn: rgba(255, 255, 255, .1);
    --nav-btn-bd: rgba(255, 255, 255, .25);
    --nav-btn-hover: rgba(255, 255, 255, .22);
    --nav-mark-bg: #fff;
    --nav-mark-ink: #12405f;
    --nav-spin-track: rgba(255, 255, 255, .35);
    --nav-spin: #fff;
    --chip-bg: rgba(255, 255, 255, .09);
    --chip-bd: rgba(255, 255, 255, .26);
    --chip-bg-hover: rgba(255, 255, 255, .17);
    --dot-idle: #9db6c9;
    --dot-ok: #4be08a;
    --dot-amb: #ffc14d;
    --dot-bad: #ff7070;
    --rail-ink: #dbe9f3;
    --rail-grp: #86b3d3;
    --rail-ink-hi: #fff;
    --rail-sel-bg: #fff;

    /* buttons */
    --btn-a: #fdfefe;
    --btn-b: #e6ecf1;
    --btn-hi: #fff;
    --btn-hover-a: #fff;
    --btn-hover-b: #d9e6f0;
    --btn-press-a: #dbe6ee;
    --btn-press-b: #eef3f7;
    --press-inset: rgba(0, 0, 0, .18);
    --pg-b: #e9eff4;
    --pri-a: #2b81bd;
    --pri-b: #14618f;
    --pri-bd: #0f4c72;
    --pri-ink: #fff;
    --pri-hi: rgba(255, 255, 255, .3);
    --pri-hover-a: #3693d2;
    --pri-hover-b: #1771a5;
    --pri-soft: #d5ecfa;
    --kb-a: #eef3f7;
    --kb-b: #dbe4eb;

    /* status */
    --red: #b30000;
    --green: #0a6b3d;
    --amber: #8a5a00;
    --tag-bg: #fff;
    --ok-bd: #a9d4bf;
    --ok-bg: #eef8f3;
    --bad-bd: #e6b3b3;
    --bad-bg: #fdeeee;
    --mut-bd: #c9d5de;
    --mut-bg: #f2f5f8;
    --amb-bd: #e2c98f;
    --amb-bg: #fdf6e6;
    --warn-bg: #fff7e6;
    --warn-bd: #f0c96a;
    --conflict-bg: #fff6e2;

    /* elevation */
    --shadow-soft: rgba(18, 64, 95, .07);
    --shadow-pop: rgba(18, 64, 95, .18);
    --shadow-toast: rgba(18, 64, 95, .22);
}

[data-theme="dark"] {
    color-scheme: dark;

    /* brand */
    --navy: #0e2537;
    --navy-2: #d5e7f4;
    --navy-3: #1a3b55;
    --accent: #57a9de;
    --accent-soft: #17354b;

    /* text */
    --ink: #dde7ef;
    --muted: #92a9ba;

    /* surfaces */
    --bg: #0a1117;
    --panel: #101b24;
    --card: #16232e;
    --line: #2a4152;
    --line-2: #3c5a6f;
    --field: #0e1a23;
    --field-off: #1a2b38;
    --field-focus: #1b3a52;
    --bar-strip: #13212c;
    --head-a: #1a2b38;
    --head-b: #16232e;
    --vhead-a: #1a2b38;
    --vhead-b: #16232e;
    --th-bg: #1b3040;
    --th-sep: #22394a;
    --row-line: #223443;
    --row-alt: #132029;
    --opt-line: #1c2c38;
    --dot-line: #2a4152;

    /* dark chrome: top bar and nav rail */
    --bar-a: #16405c;
    --bar-b: #091b28;
    --nav-edge: #04121b;
    --on-nav: #f4f9fd;
    --nav-btn: rgba(255, 255, 255, .08);
    --nav-btn-bd: rgba(255, 255, 255, .2);
    --nav-btn-hover: rgba(255, 255, 255, .16);
    --nav-mark-bg: #dbe8f2;
    --nav-mark-ink: #0e2537;
    --nav-spin-track: rgba(255, 255, 255, .25);
    --nav-spin: #f4f9fd;
    --chip-bg: rgba(255, 255, 255, .07);
    --chip-bd: rgba(255, 255, 255, .22);
    --chip-bg-hover: rgba(255, 255, 255, .14);
    --dot-idle: #7b93a5;
    --dot-ok: #3fd07e;
    --dot-amb: #f0b53f;
    --dot-bad: #ff6b6b;
    --rail-ink: #b9cfdd;
    --rail-grp: #6f9dbd;
    --rail-ink-hi: #f4f9fd;
    --rail-sel-bg: #1d4360;

    /* buttons */
    --btn-a: #21384a;
    --btn-b: #16232e;
    --btn-hi: rgba(255, 255, 255, .08);
    --btn-hover-a: #294658;
    --btn-hover-b: #1b2f3d;
    --btn-press-a: #101c25;
    --btn-press-b: #1a2c3a;
    --press-inset: rgba(0, 0, 0, .5);
    --pg-b: #16242f;
    --pri-a: #2f7fb8;
    --pri-b: #1b5a86;
    --pri-bd: #0f3c59;
    --pri-ink: #f4f9fd;
    --pri-hi: rgba(255, 255, 255, .16);
    --pri-hover-a: #3b8ec6;
    --pri-hover-b: #24688f;
    --pri-soft: #e6f3fd;
    --kb-a: #14232e;
    --kb-b: #0d1820;

    /* status */
    --red: #ff9a9a;
    --green: #74dfab;
    --amber: #f2c877;
    --tag-bg: #16232e;
    --ok-bd: #2f6b52;
    --ok-bg: #12291f;
    --bad-bd: #7a3b3b;
    --bad-bg: #2c1515;
    --mut-bd: #3b5261;
    --mut-bg: #17252f;
    --amb-bd: #7a6330;
    --amb-bg: #2a2210;
    --warn-bg: #2a2210;
    --warn-bd: #7a6330;
    --conflict-bg: #291f0f;

    /* elevation */
    --shadow-soft: rgba(0, 0, 0, .4);
    --shadow-pop: rgba(0, 0, 0, .55);
    --shadow-toast: rgba(0, 0, 0, .6);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font: 13px/1.45 "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

button {
    font: inherit;
    color: inherit;
}

.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- shell ---------- */
.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px;
    height: 42px;
    flex: 0 0 42px;
    background: linear-gradient(var(--bar-a), var(--bar-b));
    color: var(--on-nav);
    border-bottom: 1px solid var(--nav-edge);
}

.tb-btn {
    background: var(--nav-btn);
    border: 1px solid var(--nav-btn-bd);
    border-radius: 3px;
    width: 28px;
    height: 26px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}

.tb-btn:hover {
    background: var(--nav-btn-hover);
}

.tb-btn svg {
    width: 15px;
    height: 15px;
    display: block;
}

#btnTheme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.company {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.company .mark {
    width: 24px;
    height: 24px;
    border-radius: 3px;
    background: var(--nav-mark-bg);
    color: var(--nav-mark-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.company .mark svg {
    width: 16px;
    height: 16px;
}

.company .cname {
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.company .cyear {
    font-size: 11px;
    opacity: .8;
    white-space: nowrap;
}

.spacer {
    flex: 1 1 auto;
}

.busy {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    opacity: .92;
}

.busy.on {
    display: inline-flex;
}

.spin {
    width: 13px;
    height: 13px;
    border: 2px solid var(--nav-spin-track);
    border-top-color: var(--nav-spin);
    border-radius: 50%;
    animation: sp .7s linear infinite;
}

@keyframes sp {
    to {
        transform: rotate(360deg)
    }
}

.tb-date {
    text-align: right;
    font-size: 12px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tb-date b {
    display: block;
    font-size: 12.5px;
}

.tb-date span {
    font-size: 10.5px;
    opacity: .72;
}

/* ---------- live sync chip ---------- */
.sync {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 3px 9px;
    border: 1px solid var(--chip-bd);
    border-radius: 11px;
    background: var(--chip-bg);
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
}

.sync:hover {
    background: var(--chip-bg-hover);
}

.sync .sdot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot-idle);
    flex: 0 0 auto;
}

.sync.ok .sdot {
    background: var(--dot-ok);
}

.sync.amb .sdot {
    background: var(--dot-amb);
}

.sync.bad .sdot {
    background: var(--dot-bad);
}

.sync.busy .sdot {
    animation: sp .7s linear infinite;
    background: transparent;
    border: 2px solid var(--nav-spin-track);
    border-top-color: var(--nav-spin);
    width: 11px;
    height: 11px;
}

.sync b {
    font-size: 11px;
}

.sync .sage {
    opacity: .72;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .sync .sage {
        display: none;
    }
}

/* unsent entries owned by this PC: the chip is the one place the shopkeeper looks */
.sync .squeue {
    display: none;
    padding: 1px 6px;
    border: 1px solid var(--amb-bd);
    border-radius: 9px;
    background: var(--amb-bg);
    color: var(--amber);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.sync .squeue.on {
    display: inline-block;
}

.rail.mini .nav-item .qbadge {
    display: none;
}

.qbadge {
    display: none;
    min-width: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--amber);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.qbadge.on {
    display: inline-block;
}

/* one-line notice under a report toolbar */
.note {
    padding: 0 14px 6px;
    font-size: 11.5px;
    color: var(--red);
    min-height: 12px;
}

.note:empty {
    display: none;
}

/* ---------- body row ---------- */
.body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.rail {
    flex: 0 0 230px;
    background: var(--navy);
    color: var(--rail-ink);
    overflow-y: auto;
    padding: 6px 0 10px;
    border-right: 1px solid var(--nav-edge);
}

.rail.mini {
    flex-basis: 48px;
}

.rail.mini .grp-title,
.rail.mini .nav-item .lbl,
.rail.mini .nav-item .kbd {
    display: none;
}

.rail.mini .nav-item {
    justify-content: center;
    padding: 8px 0;
}

.grp-title {
    padding: 10px 12px 4px;
    font-size: 10px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--rail-grp);
    font-weight: 700;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 12px;
    border: 0;
    border-left: 3px solid transparent;
    background: none;
    color: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

.nav-item svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.nav-item:hover {
    background: var(--navy-3);
    color: var(--rail-ink-hi);
}

.nav-item.sel {
    background: var(--rail-sel-bg);
    color: var(--navy-2);
    border-left-color: var(--accent);
    font-weight: 700;
}

.nav-item .kbd {
    margin-left: auto;
    font-size: 10px;
    opacity: .55;
}

/* ---------- stage ---------- */
.stage {
    flex: 1 1 auto;
    min-width: 0;
    overflow: auto;
    background: var(--panel);
    padding: 10px;
}

.sheet {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 2px;
    box-shadow: 0 1px 2px var(--shadow-soft);
    margin-bottom: 10px;
}

.rpt-head {
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(var(--head-a), var(--head-b));
}

.rpt-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy-2);
}

.rpt-head p {
    margin: 2px 0 0;
    font-size: 11.5px;
    color: var(--muted);
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--bar-strip);
}

.toolbar .lab {
    font-size: 10.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.field {
    background: var(--field);
    border: 1px solid var(--line-2);
    border-radius: 2px;
    padding: 4px 7px;
    font: inherit;
    color: var(--ink);
    min-height: 27px;
}

.field:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    background: var(--field-focus);
}

.field:disabled {
    background: var(--field-off);
    color: var(--muted);
}

.toolbar .field {
    min-width: 180px;
}

/* Tally button: bevelled */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    min-height: 27px;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: linear-gradient(var(--btn-a), var(--btn-b));
    box-shadow: inset 0 1px 0 var(--btn-hi);
    cursor: pointer;
    font-size: 12.5px;
    white-space: nowrap;
}

.btn:hover {
    background: linear-gradient(var(--btn-hover-a), var(--btn-hover-b));
    border-color: var(--accent);
}

.btn:active {
    background: linear-gradient(var(--btn-press-a), var(--btn-press-b));
    box-shadow: inset 0 1px 2px var(--press-inset);
}

.btn .kb {
    font-size: 10.5px;
    color: var(--muted);
}

.btn.primary {
    background: linear-gradient(var(--pri-a), var(--pri-b));
    border-color: var(--pri-bd);
    color: var(--pri-ink);
    box-shadow: inset 0 1px 0 var(--pri-hi);
}

.btn.primary:hover {
    background: linear-gradient(var(--pri-hover-a), var(--pri-hover-b));
}

.btn.primary .kb {
    color: var(--pri-soft);
}

/* ---------- tables ---------- */
.tbl-scroll {
    overflow-x: auto;
}

table.tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.tbl thead th {
    background: var(--th-bg);
    color: var(--navy-2);
    border-bottom: 1px solid var(--line-2);
    border-right: 1px solid var(--th-sep);
    padding: 6px 9px;
    font-weight: 700;
    font-size: 11.5px;
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.tbl thead th.num {
    text-align: right;
}

.tbl thead th.ctr {
    text-align: center;
}

.tbl tbody td {
    padding: 5px 9px;
    border-bottom: 1px solid var(--row-line);
    white-space: nowrap;
}

.tbl tbody tr:nth-child(even) {
    background: var(--row-alt);
}

.tbl tbody tr:hover {
    background: var(--accent-soft);
}

.name {
    font-weight: 600;
}

.sub {
    color: var(--muted);
}

.neg {
    color: var(--red);
}

.pos {
    color: var(--green);
}

.tag {
    display: inline-block;
    padding: 0 6px;
    border: 1px solid;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 700;
    background: var(--tag-bg);
}

.tag.ok {
    color: var(--green);
    border-color: var(--ok-bd);
    background: var(--ok-bg);
}

.tag.bad {
    color: var(--red);
    border-color: var(--bad-bd);
    background: var(--bad-bg);
}

.tag.mut {
    color: var(--muted);
    border-color: var(--mut-bd);
    background: var(--mut-bg);
}

.tag.amb {
    color: var(--amber);
    border-color: var(--amb-bd);
    background: var(--amb-bg);
}

.lnk {
    background: none;
    border: 0;
    padding: 1px 4px;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
    font-size: 12px;
    border-radius: 2px;
}

.lnk:hover {
    background: var(--accent-soft);
}

.lnk.green {
    color: var(--green);
}

.empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--muted);
}

.empty b {
    display: block;
    color: var(--navy-2);
    font-size: 13px;
}

/* ---------- pager ---------- */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 12px;
    border-top: 1px solid var(--line);
    background: var(--bar-strip);
    font-size: 11.5px;
    color: var(--muted);
}

.pager .pg {
    display: flex;
    gap: 4px;
}

.pager button {
    padding: 2px 9px;
    min-height: 24px;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: linear-gradient(var(--btn-a), var(--pg-b));
    cursor: pointer;
    font-size: 11.5px;
}

.pager button:hover:not(:disabled) {
    border-color: var(--accent);
    background: var(--field);
}

.pager button:disabled {
    opacity: .4;
    cursor: default;
}

/* ---------- right action panel ---------- */
.panel {
    flex: 0 0 198px;
    background: var(--panel);
    border-left: 1px solid var(--line);
    padding: 10px 9px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.panel .ptitle {
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 2px;
}

.panel .btn {
    justify-content: flex-start;
    width: 100%;
}

.panel .hint {
    margin-top: auto;
    padding-top: 10px;
    font-size: 10.5px;
    color: var(--muted);
    line-height: 1.6;
}

.panel .hint kbd {
    background: var(--field);
    border: 1px solid var(--line-2);
    border-radius: 2px;
    padding: 0 4px;
    font: inherit;
    font-size: 10px;
}

/* ---------- key bar ---------- */
.keybar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 3px 14px;
    flex-wrap: wrap;
    padding: 5px 10px;
    background: linear-gradient(var(--kb-a), var(--kb-b));
    border-top: 1px solid var(--line-2);
    font-size: 11px;
    color: var(--navy-2);
}

.keybar .fk {
    white-space: nowrap;
}

.keybar .fk b {
    color: var(--accent);
}

.keybar .credit {
    margin-left: auto;
    color: var(--muted);
    font-size: 10.5px;
}

.keybar .credit button {
    background: none;
    border: 0;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
    font-size: 10.5px;
    padding: 0;
}

/* ---------- voucher (full-screen entry) ---------- */
.v-head {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(var(--vhead-a), var(--vhead-b));
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.v-head h2 {
    margin: 0;
    font-size: 15px;
    color: var(--navy-2);
}

.v-head .v-sub {
    font-size: 11.5px;
    color: var(--muted);
}

.v-body {
    padding: 12px;
}

.v-grid {
    display: grid;
    grid-template-columns: minmax(140px, 210px) minmax(0, 1fr);
    gap: 7px 10px;
    align-items: center;
    max-width: 760px;
}

.v-grid label {
    font-size: 12px;
    color: var(--navy-2);
    text-align: right;
}

.v-grid label .req {
    color: var(--red);
}

.v-grid .field {
    width: 100%;
}

.v-grid .pair {
    display: flex;
    gap: 8px;
}

.v-grid .pair>div {
    flex: 1 1 0;
    min-width: 0;
}

.v-sec {
    grid-column: 1 / -1;
    margin: 8px 0 1px;
    padding-top: 6px;
    border-top: 1px dashed var(--line);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
}

.v-total .amt .tag {
    font-size: 11px;
    vertical-align: middle;
    margin-left: 6px;
}

.v-grid .v-note {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--muted);
}

/* live sync found the stock move under a half-typed bill */
.v-grid .v-warn {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--amber);
    background: var(--warn-bg);
    border: 1px solid var(--warn-bd);
    border-left: 3px solid var(--amber);
    border-radius: 2px;
    padding: 5px 8px;
}

.items .irow.conflict {
    background: var(--conflict-bg);
    box-shadow: inset 3px 0 0 var(--amber);
}

/* the reason field only belongs to an alteration, so it joins the grid's own two
   columns instead of wrapping them in a third box */
.v-grid .v-only-alter {
    display: contents;
}

/* what has already been corrected on the entry being altered */
.v-grid .v-hist {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding: 6px 8px;
    font-size: 11px;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 2px;
}

.v-hist .h-row {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) minmax(0, .9fr);
    gap: 8px;
    padding-top: 4px;
    margin-top: 4px;
    border-top: 1px dotted var(--dot-line);
    color: var(--muted);
}

.v-hist .h-row b {
    color: var(--ink);
    font-weight: 600;
}

@media (max-width: 720px) {
    .v-hist .h-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* invoice item entry */
.items {
    grid-column: 1 / -1;
    border: 1px solid var(--line);
    border-radius: 2px;
}

/* overflow:hidden here used to clip the item search list; the header
   rounds itself instead */
.items .ihead {
    border-radius: 1px 1px 0 0;
}

.items .ihead,
.items .irow {
    display: grid;
    grid-template-columns: minmax(0, 2.6fr) 78px 96px 112px 30px;
    gap: 4px;
    align-items: center;
    padding: 3px 6px;
}

.items .ihead {
    background: var(--th-bg);
    color: var(--navy-2);
    font-size: 11px;
    font-weight: 700;
    border-bottom: 1px solid var(--line-2);
}

.items .ihead .num {
    text-align: right;
}

.items .irow {
    border-bottom: 1px solid var(--th-sep);
}

.items .irow:nth-child(even) {
    background: var(--row-alt);
}

.items .field {
    min-height: 25px;
    padding: 3px 6px;
}

.items .amt-cell {
    text-align: right;
    background: var(--field-off);
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 3px 6px;
}

.items .del {
    background: none;
    border: 1px solid transparent;
    color: var(--red);
    cursor: pointer;
    border-radius: 2px;
    font-size: 15px;
    line-height: 1;
    padding: 1px 5px;
}

.items .del:hover {
    background: var(--bad-bg);
    border-color: var(--bad-bd);
}

/* ---------- searchable dropdown ---------- */
.dd {
    position: relative;
}

.dd .opts {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    background: var(--field);
    border: 1px solid var(--line-2);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 8px 16px var(--shadow-pop);
    z-index: 40;
    display: none;
}

.dd.open .opts {
    display: block;
}

.dd .opt {
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12.5px;
    border-bottom: 1px solid var(--opt-line);
}

.dd .opt:hover,
.dd .opt.hl {
    background: var(--accent-soft);
}

.dd .opt.q {
    color: var(--muted);
    cursor: default;
}

/* the last row of a name box keeps what the shopkeeper typed, so it has to read as a
   choice being offered and not as the dead "no matching record" line above it */
.dd .opt.add {
    border-bottom: 0;
    color: var(--accent);
    font-weight: 700;
}

/* ---------- toast ---------- */
.toasts {
    position: fixed;
    right: 12px;
    bottom: 40px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.toast {
    max-width: 340px;
    padding: 7px 12px;
    border-radius: 2px;
    border: 1px solid var(--line-2);
    border-left-width: 4px;
    background: var(--card);
    box-shadow: 0 6px 18px var(--shadow-toast);
    font-size: 12.5px;
    animation: pop .14s ease-out;
}

@keyframes pop {
    from {
        opacity: 0;
        transform: translateY(6px)
    }
}

.toast.ok {
    border-left-color: var(--green);
}

.toast.err {
    border-left-color: var(--red);
}

.toast.warn {
    border-left-color: var(--amber);
}

.toast.info {
    border-left-color: var(--accent);
}

.toast.out {
    opacity: 0;
    transition: opacity .25s;
}

/* ---------- misc ---------- */
.hidden {
    display: none !important;
}

.about-body .row {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px dotted var(--dot-line);
}

.about-body .row span {
    color: var(--muted);
}

/* the page behind the "wavelinkinfo" credit: company on the left, this build on the
   right, both read from js/developer.js */
.dev-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* the company's own tagline, in its own case - not a section kicker */
.dev-kind {
    margin-top: 2px;
    font-size: 12px;
    color: var(--accent);
    font-weight: 700;
}

/* .sheet carries no padding - each band supplies its own - so this is where the page
   gets the inset a table screen gets from its cells, and the room under the last row.
   auto-fit: the "This installation" column is markup the shop trims by hand, and one
   column should fill the sheet instead of sitting in the left half of two tracks.
   minmax(0, 1fr) because an unbreakable value (the %APPDATA% store folder) would
   otherwise widen its own track and leave the columns unequal. */
.dev-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 14px 26px;
    padding: 10px 12px 14px;
    align-items: start;
}

/* the band above ends in a rule; the label starts a column, it does not divide one */
.dev-col > .v-sec:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.dev-cols .about-body .row:last-child {
    border-bottom: 0;
}

/* the store folder path has no breakable space in it; without this it spills out of a
   track that minmax(0, 1fr) has correctly refused to widen */
.dev-cols .about-body .row > div {
    overflow-wrap: anywhere;
}

.mk {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
}

/* narrow: rail to icons, panel to bottom strip */
@media (max-width: 960px) {
    .rail {
        flex-basis: 48px;
    }

    .dev-cols {
        grid-template-columns: minmax(0, 1fr);
    }

    /* stacked: the lists follow one another, so the rule the columns replace is wanted */
    .dev-col + .dev-col > .v-sec {
        padding-top: 8px;
        border-top: 1px dashed var(--line);
    }

    .rail .grp-title,
    .rail .nav-item .lbl,
    .rail .nav-item .kbd {
        display: none;
    }

    .rail .nav-item {
        justify-content: center;
        padding: 8px 0;
    }

    .panel {
        flex-basis: 170px;
    }
}

@media (max-width: 720px) {
    .body {
        flex-direction: column;
    }

    .rail {
        flex: 0 0 auto;
        display: flex;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--nav-edge);
    }

    .rail .nav-item {
        width: auto;
        border-left: 0;
        border-bottom: 3px solid transparent;
        flex: 0 0 auto;
    }

    .rail .nav-item.sel {
        border-bottom-color: var(--accent);
    }

    .panel {
        order: 3;
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .panel .ptitle {
        width: 100%;
        margin: 0;
    }

    .panel .btn {
        width: auto;
    }

    .panel .hint {
        display: none;
    }

    .v-grid {
        grid-template-columns: 1fr;
    }

    .v-grid label {
        text-align: left;
    }

    .items .ihead,
    .items .irow {
        grid-template-columns: minmax(0, 1.7fr) 58px 72px 86px 26px;
    }
}