/* Stockbook: a compact, keyboard-friendly workspace. No external assets. */
:root {
  --bg: #f6f7f9;
  --surface: #fff;
  --sidebar: #f0f2f5;
  --ink: #202b3c;
  --muted: #5e6b7d;
  --line: #dce1e8;
  --line-strong: #aeb9c8;
  --accent: #2658a6;
  --accent-hover: #1e4786;
  --accent-soft: #e5edf9;
  --focus: #3974c7;
  --ok: #24634a;
  --ok-bg: #eaf5ef;
  --bad: #ac302b;
  --bad-bg: #fff0ee;
  --warn: #805510;
  --warn-bg: #fff5df;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --radius-sm: 5px;
  --radius: 8px;
  --radius-lg: 12px;
  --text-xs: .857rem;
  --text-sm: .929rem;
  --text-base: 1rem;
  --text-lg: 1.143rem;
  --text-title: 1.714rem;
  --sidebar-width: 216px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
main:focus { outline: none; }
.skip-link { position: fixed; top: -100px; left: var(--space-4); z-index: 100; padding: var(--space-3) var(--space-4); background: var(--surface); border-radius: var(--radius); }
.skip-link:focus { top: var(--space-3); }
h1, h2, p { overflow-wrap: anywhere; }
h1 { font-size: var(--text-title); line-height: 1.25; letter-spacing: -.035em; font-weight: 650; margin: 0; }
h2 { font-size: var(--text-lg); line-height: 1.4; font-weight: 650; margin: var(--space-5) 0 var(--space-3); }
p { margin: 0 0 var(--space-4); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); background: var(--sidebar); border-right: 1px solid var(--line); padding: var(--space-5) var(--space-3) var(--space-4); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); color: var(--ink); font-size: 1.286rem; letter-spacing: -.025em; font-weight: 750; }
.brand:hover { text-decoration: none; }
.brand-mark { display: inline-grid; place-items: center; width: 30px; height: 32px; flex: 0 0 auto; border-radius: var(--radius); background: var(--ink); color: white; font-size: 19px; font-weight: 650; }
.navigation { margin-top: var(--space-6); }
.navigation > summary { display: none; }
.sidebar nav a { display: block; color: #435169; padding: .55rem var(--space-3); border-radius: var(--radius-sm); margin-bottom: 2px; line-height: 1.4; }
.sidebar nav a:hover { background: #e4e8ee; text-decoration: none; }
.sidebar nav a.on { color: #204f97; background: #e0e8f5; box-shadow: inset 3px 0 var(--accent); font-weight: 650; }
.nav-group { margin-top: var(--space-5); }
.nav-label, .eyebrow { display: block; color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .075em; text-transform: uppercase; }
.nav-label { padding: 0 var(--space-3) var(--space-2); }
.eyebrow { margin: 0 0 var(--space-2); }
.user { border-top: 1px solid var(--line); padding: var(--space-4) var(--space-2) 0; margin-top: var(--space-6); font-size: var(--text-sm); }
.user-name { overflow-wrap: anywhere; font-weight: 600; }
.role { display: inline-block; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); font-size: var(--text-xs); font-weight: 400; margin: var(--space-1) 0; }
.user-links { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.user-links a { color: var(--muted); }
.user-links a[aria-current] { color: var(--accent); text-decoration: underline; }
.app main { margin-left: var(--sidebar-width); }
main { padding: 32px clamp(20px, 2.5vw, 48px) 48px; min-width: 0; }
.bar { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--space-5); }
.bar > *, .grid > *, .two-col > *, .form-grid > * { min-width: 0; }
.page-description { color: var(--muted); margin: var(--space-2) 0 0; max-width: 75ch; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); }
.section-title { margin: 0 0 var(--space-4); }
.card > p:last-child { margin-bottom: 0; }
[data-spacing="below"] { margin-bottom: var(--space-5); }
[data-spacing="above"] { margin-top: var(--space-5); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.stat { display: flex; flex-direction: column; gap: var(--space-2); }
.stat .n { overflow-wrap: anywhere; font-size: clamp(1.55rem, 2.3vw, 2rem); line-height: 1.25; letter-spacing: -.035em; font-weight: 650; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--muted); font-size: var(--text-sm); }
.stat:first-child { border-top: 3px solid var(--accent); padding-top: calc(var(--space-5) - 2px); }
.activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-5); }
.activity-card { padding: 0; overflow: hidden; }
.activity-card h2 { font-size: var(--text-base); margin: 0; padding: var(--space-4) var(--space-5); background: #fafbfc; border-bottom: 1px solid var(--line); }
.activity-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); }
.activity-row:last-child { border-bottom: 0; }
.activity-row a { font-weight: 600; }
.activity-row .activity-party { grid-column: 1 / -1; color: var(--muted); overflow-wrap: anywhere; }
.activity-row time { color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.btn, button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 36px; padding: .45rem .85rem; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent); color: white; font-size: var(--text-sm); font-weight: 600; line-height: 1.5; cursor: pointer; text-align: center; text-decoration: none; }
.btn:hover, button:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
.btn.secondary, button.secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn.secondary:hover, button.secondary:hover { background: #edf1f6; border-color: #8797ad; }
.btn.ghost, button.ghost, .btn.quiet, button.quiet, .btn.danger-quiet, button.danger-quiet { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover, button.ghost:hover, .btn.quiet:hover, button.quiet:hover { color: var(--ink); background: #e9eef5; }
.btn.danger-quiet:hover, button.danger-quiet:hover, .btn.danger-quiet:focus-visible, button.danger-quiet:focus-visible { color: var(--bad); background: var(--bad-bg); }
.btn.danger, button.danger { color: white; background: var(--bad); border-color: var(--bad); }
.btn.danger:hover, button.danger:hover { background: #8c2520; }
.btn.small, button.small { min-height: 30px; padding: .25rem .55rem; font-size: var(--text-sm); }
button:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.actions, .action-group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.actions { margin-top: var(--space-5); }
.bar .actions { margin-top: 0; }
.preview-actions { margin: 0 0 var(--space-5); }
.inline-form { display: inline-flex; }
.master-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--line); padding-bottom: var(--space-3); margin-bottom: var(--space-5); }
.master-nav a { padding: .5rem .75rem; color: var(--muted); border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 550; }
.master-nav a:hover { background: #e9edf3; color: var(--ink); text-decoration: none; }
.master-nav a.on { background: var(--accent-soft); color: #204f97; border-color: #c3d3eb; }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.filters label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); color: var(--muted); min-width: 125px; max-width: 100%; }
.filters label:has(input[type="search"]) { flex: 1 1 220px; }
.filters select { max-width: 280px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { min-height: 36px; min-width: 0; max-width: 100%; padding: .45rem .65rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
input::placeholder, textarea::placeholder { color: #68768a; opacity: 1; }
input:focus, select:focus, textarea:focus { outline: 3px solid #3974c733; outline-offset: 1px; border-color: var(--focus); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--accent); vertical-align: middle; }
input[type="file"] { font-size: var(--text-sm); }
input::file-selector-button { font: inherit; background: #eef2f7; border: 0; border-right: 1px solid var(--line); padding: .4rem .65rem; margin: -.45rem .65rem -.45rem -.65rem; color: var(--ink); cursor: pointer; }
textarea { width: 100%; resize: vertical; }
textarea[name="rolls"] { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; line-height: 1.7; background: #fcfdff; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.form-card { max-width: 960px; }
.field label { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-2); }
.field input:not([type="checkbox"]), .field select, .field textarea { width: 100%; }
.field + .field { margin-top: var(--space-4); }
.form-grid > .field { margin-top: 0; }
.field.wide { grid-column: 1 / -1; }
.help { color: var(--muted); font-size: var(--text-xs); margin-top: var(--space-1); }
.errorlist { color: var(--bad); padding: 0; margin: var(--space-2) 0; list-style: none; font-size: var(--text-sm); }
.errorlist li { margin-top: var(--space-1); }
.has-error input, .has-error select, .has-error textarea, [aria-invalid="true"] { border-color: var(--bad) !important; background-color: var(--bad-bg) !important; }
.two-col { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.entry-form .actions { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.check-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-4); border-bottom: 1px solid var(--line); background: #fafbfc; }
.panel-heading h2, .panel-heading .eyebrow { margin: 0; }
.panel-heading .eyebrow { margin-bottom: var(--space-1); }
#roll-check { padding: var(--space-4); min-height: 190px; }
.check-summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-4); }
.steps { display: flex; gap: var(--space-5); list-style: none; padding: 0 0 var(--space-4); margin: 0 0 var(--space-5); border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--text-sm); }
.steps .current { color: var(--accent); font-weight: 650; }
.table-wrap { width: 100%; max-width: 100%; overflow: auto; max-height: 60vh; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overscroll-behavior-x: contain; scrollbar-color: #b8c2cf #f0f2f5; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); line-height: 1.45; }
th, td { padding: .65rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { position: sticky; top: 0; z-index: 1; background: #f0f3f7; color: #536177; font-weight: 600; font-size: var(--text-xs); white-space: nowrap; }
td { max-width: 380px; overflow-wrap: break-word; }
td a { font-weight: 550; }
tbody tr:nth-child(even) { background: #fafbfc; }
tbody tr:hover { background: #f0f5fc; }
tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: 650; background: #eef2f7; border-top: 1px solid var(--line); border-bottom: 0; }
tr.bad td { background: var(--bad-bg); }
tr.bad td:first-child { box-shadow: inset 3px 0 var(--bad); }
tr.bad .err { display: block; margin-top: var(--space-1); }
tr.cancelled td { color: var(--muted); text-decoration: line-through; }
tr.cancelled .pill { text-decoration: none; }
.actions-heading, .row-actions { text-align: right; width: 1%; white-space: nowrap; }
.row-actions .action-group { justify-content: flex-end; flex-wrap: nowrap; }
.empty-state { text-align: center; color: var(--muted); padding: var(--space-6) var(--space-5); font-size: var(--text-sm); }
p.empty-state { margin: 0; }
.messages { list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.messages li { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius-sm); margin-bottom: var(--space-2); overflow-wrap: anywhere; background: var(--surface); }
.messages .success { color: var(--ok); background: var(--ok-bg); border-color: #b5d9c5; }
.messages .error { color: var(--bad); background: var(--bad-bg); border-color: #e5aaa4; }
.messages .warning { color: var(--warn); background: var(--warn-bg); border-color: #dec593; }
.messages .info { color: var(--accent); background: var(--accent-soft); border-color: #c3d3eb; }
.pill { display: inline-block; width: fit-content; padding: 2px 8px; border-radius: 4px; font-size: var(--text-xs); font-weight: 550; line-height: 1.5; background: #edf0f4; color: #536177; white-space: nowrap; letter-spacing: 0; }
.pill.IN_STOCK, .pill.IN { color: var(--ok); background: var(--ok-bg); }
.pill.ISSUED, .pill.OUT { color: #285899; background: #eaf0fb; }
.pill.RETURNED, .pill.RETURN { color: var(--warn); background: var(--warn-bg); }
.pill.CUST_RET { color: #5c438d; background: #f0ebfa; }
.pill.CANCELLED, .pill.CANCEL { color: var(--bad); background: var(--bad-bg); }
.pill.OPENING { color: #4c596d; background: #e9edf3; }
.pill.MISSING { color: #8a2c0d; background: #fde8dc; }
.pill.FOUND { color: var(--ok); background: var(--ok-bg); }
.pill.ADJUST { color: #3d4f8a; background: #e7ebf8; }
.muted { color: var(--muted); }
.err { color: var(--bad); }
.ok { color: var(--ok); }
.pager { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
dl.meta { display: grid; grid-template-columns: minmax(100px, max-content) minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: 0; font-size: var(--text-sm); }
dl.meta dt { color: var(--muted); }
dl.meta dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.danger-zone { border-color: #e3c4c0; }
.disclosure { margin-top: var(--space-5); }
.disclosure > summary { color: var(--muted); font-size: var(--text-sm); cursor: pointer; }
.disclosure > summary:hover, .disclosure > summary:focus-visible { color: var(--bad); }
.disclosure[open] > summary { margin-bottom: var(--space-4); }
.account-card { max-width: 460px; }
.auth main { padding: var(--space-5); }
.login { max-width: 420px; margin: 12vh auto; padding: var(--space-6); border-radius: var(--radius-lg); box-shadow: 0 8px 32px #202b3c08; }
.login-brand { padding: 0; margin-bottom: var(--space-6); }
.login .page-description { margin-bottom: var(--space-5); }
.login .actions button { width: 100%; }
.access-message { max-width: 620px; margin: 8vh auto; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
@media (min-width: 1600px) { .two-col { grid-template-columns: 400px minmax(0, 1fr); } }
@media (max-width: 1100px) {
  :root { --sidebar-width: 194px; }
  main { padding: var(--space-5); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-col { grid-template-columns: minmax(280px, .9fr) minmax(0, 1fr); gap: var(--space-4); }
  .card { padding: var(--space-4); }
  .activity-card { padding: 0; }
}
@media (max-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .sidebar { position: static; width: auto; padding: var(--space-4); border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .brand { padding: 0; }
  .navigation { margin-top: var(--space-3); }
  .navigation > summary { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; font-weight: 600; font-size: var(--text-sm); list-style: none; }
  .navigation > summary::-webkit-details-marker { display: none; }
  .navigation nav { margin-top: var(--space-3); }
  .nav-group { margin-top: var(--space-3); }
  .user { margin-top: var(--space-4); }
  .app main { margin-left: 0; }
  main { padding: var(--space-5) var(--space-4) var(--space-6); }
  h1 { font-size: 1.5rem; }
  .activity-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .filters label { flex: 1 1 125px; }
  .filters select { width: 100%; max-width: 100%; }
  .master-nav { gap: var(--space-1); }
  .master-nav a { padding: .5rem .6rem; }
  .bar { align-items: flex-start; }
  .bar .actions { width: 100%; }
  .btn, button { min-height: 40px; }
  .btn.small, button.small { min-height: 36px; }
  .login { margin: 5vh auto; padding: var(--space-5); }
  .steps { gap: var(--space-4); }
}
@media print {
  .sidebar, .skip-link, .filters, .actions, .pager, .bar > .btn, .danger-zone { display: none; }
  .app main { margin: 0; padding: 0; }
  body { background: white; }
  .table-wrap { max-height: none; overflow: visible; }
  th { position: static; }
}

/* Browser review: keep roll entry and its feedback in one reading sequence. */
.roll-workspace { display: grid; gap: var(--space-4); min-width: 0; }
.roll-workspace .actions { margin-top: 0; padding: var(--space-4) 0; }
.roll-entry textarea[name="rolls"] { min-height: 150px; height: 170px; }
.roll-entry .field { margin: 0; }
.inventory-summary { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 1.25rem 0; color: var(--muted); }
.inventory-summary strong { color: var(--ink); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.upload-field { padding: var(--space-4); background: #f6f9fe; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.upload-field p { margin-bottom: 0; }
.activity-grid { align-items: start; }
textarea[name="address"] { min-height: 100px; }
.table-hint { margin: 0 0 .5rem; color: var(--muted); font-size: var(--text-xs); }
@media (max-width: 760px) {
  .table-wrap table { min-width: 760px; }
  .table-wrap td { max-width: 260px; }
  .dashboard-bar .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .dashboard-bar .actions .btn { padding-inline: .5rem; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; min-height: 44px; }
  .navigation > summary, .sidebar nav a { min-height: 44px; }
}
.entry-options { margin-top: var(--space-5); border-top: 1px solid var(--line); padding-top: var(--space-4); }
.entry-options summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); padding: .25rem 0; }
.entry-options[open] summary { margin-bottom: var(--space-4); }
.entry-options .field { margin-top: var(--space-4); }
.select-search { margin-bottom: .5rem; }
.select-search-status { margin-bottom: .5rem; }
.result-count { color: var(--muted); font-size: var(--text-sm); margin: 0 0 .75rem; }
.result-count strong { color: var(--ink); font-weight: 600; }
.master-table td:first-child { min-width: 180px; }
@media (max-width: 760px) {
  .master-table table { min-width: 1040px; }
  .master-table td:nth-child(2) { min-width: 240px; }
  .pager { align-items: flex-start; }
  .pager .action-group { gap: .5rem; }
}

@media (max-width: 760px) {
  .master-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .entry-options summary { min-height: 44px; padding-block: .75rem; }
}
/* Empty results need no wide column grid on a phone. */
@media (max-width: 760px) {
  .table-wrap table:has(td.empty-state) { min-width: 0; }
  .table-wrap table:has(td.empty-state) thead { display: none; }
  .table-wrap td.empty-state { min-width: 0; max-width: none; }
}