/* Reuses the laboratory finance shell's palette, table, form and dialog rhythm. */
:root { color-scheme:light; --page:#f3f6fa; --surface:#fff; --surface-soft:#f8fafd; --ink:#203b57; --ink-strong:#162f49; --muted:#74879c; --line:#dce5ef; --line-soft:#edf1f6; --blue:#286eb9; --blue-dark:#215f9e; --blue-soft:#eaf2fd; --green:#348273; --green-soft:#edf7f2; --amber:#a77320; --amber-soft:#fff6e5; --red:#b64e4e; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei UI","Microsoft YaHei",sans-serif; font-size:14px; line-height:1.5; color:var(--ink); background:var(--page); font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:8px 13px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:var(--surface); cursor:pointer; white-space:nowrap; }
button:hover:not(:disabled) { background:var(--surface-soft); border-color:#b6cce3; }
button:disabled { opacity:.5; cursor:not-allowed; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid #286eb940; outline-offset:2px; }
button.primary { background:var(--blue); color:white; border-color:var(--blue); }
button.primary:hover:not(:disabled) { background:var(--blue-dark); border-color:var(--blue-dark); }
button.link-button { background:transparent; border-color:transparent; color:var(--blue); padding:4px 7px; min-height:28px; }
button.link-button:hover:not(:disabled) { background:var(--blue-soft); }
button.small-button { padding:5px 10px; min-height:30px; font-size:12px; }
button.icon-button { padding:5px; width:34px; min-width:34px; font-size:24px; font-weight:300; }
button.danger { color:var(--red); border-color:#ebcece; }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { color:var(--ink-strong); }
[hidden] { display:none !important; }
.skip-link { position:fixed; top:-60px; left:12px; z-index:30; padding:10px; background:white; }
.skip-link:focus { top:12px; }
.topbar { min-height:76px; padding:15px 28px; background:var(--surface); border-bottom:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-symbol { display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex-shrink:0; padding:8px; border-radius:10px; background:var(--blue-soft); color:var(--blue); }
.brand-symbol svg { width:100%; height:100%; }
.brand h1 { font-size:20px; line-height:1.25; margin:0 0 4px; letter-spacing:.1px; font-weight:650; }
.brand small { display:block; color:var(--muted); font-size:11px; }
.top-actions { display:flex; align-items:center; justify-content:flex-end; gap:14px; font-size:12px; flex-wrap:wrap; }
.mode-pill { padding:5px 8px; border:1px solid var(--line); background:var(--surface-soft); border-radius:5px; color:var(--muted); font-size:11px; }
.operator { display:flex; align-items:center; gap:4px; }
.operator .link-button { font-size:11px; }
.nav { min-height:52px; padding:7px 28px; background:var(--surface); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; }
.nav>button { border-color:transparent; background:transparent; font-size:13px; padding:8px 15px; }
.nav-link { display:inline-flex; align-items:center; min-height:36px; border:1px solid transparent; border-radius:7px; font-size:13px; padding:8px 15px; color:var(--ink); white-space:nowrap; }
.nav-link:hover { background:var(--surface-soft); text-decoration:none; }
.nav>button[aria-current="page"] { background:var(--blue-soft); color:var(--blue); font-weight:600; }
.sync { margin-left:auto; display:flex; align-items:center; gap:9px; color:var(--muted); font-size:11px; }
.sync .link-button { font-size:11px; }
.sync [data-state="saved"] { color:var(--green); }
.sync [data-state="error"] { color:var(--red); }
.shell { max-width:1500px; margin:0 auto; padding:24px 28px 38px; }
#main.shell { width:100%; max-width:1680px; min-width:0; }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.page-head h2 { margin:0 0 4px; font-size:20px; font-weight:650; }
.page-head p { margin:0; font-size:12px; color:var(--muted); }
.page-actions { display:flex; align-items:center; gap:8px; }
.page-actions button { font-size:12px; }
.banner { padding:11px 14px; border:1px solid #d8e5f4; background:#eef5fe; border-radius:8px; margin:0 0 18px; color:#5b7797; font-size:12px; line-height:1.65; }
.banner.warning { color:#8e6624; background:var(--amber-soft); border-color:#eddcb9; }
.error-banner { color:var(--red); background:#fff5f5; border-color:#ebcece; }
.banner strong { font-weight:600; }
.filter-bar { display:flex; align-items:end; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.filter-field { min-width:0; }
.filter-field label { display:block; font-size:11px; color:var(--muted); margin-bottom:5px; }
.filter-field.search-field { flex:1 1 300px; max-width:460px; }
.filter-field select { min-width:132px; }
.filter-bar .reset { min-height:38px; }
input,select,textarea { width:100%; min-height:38px; border:1px solid var(--line); border-radius:7px; padding:8px 10px; background:var(--surface); color:var(--ink); }
input::placeholder,textarea::placeholder { color:#8fa0b2; }
input:focus,select:focus,textarea:focus { border-color:#76a3d0; box-shadow:0 0 0 3px #286eb917; }
input[type="date"] { min-width:0; }
textarea { min-height:72px; resize:vertical; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:10px; min-width:0; overflow:hidden; box-shadow:0 3px 12px #203b5708; }
.table-summary { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 17px; font-size:12px; color:var(--muted); }
.table-summary strong { color:var(--ink); font-weight:600; }
.table-summary .count-note { font-size:11px; }
.table-wrap { width:100%; max-height:calc(100dvh - 350px); min-height:200px; overflow:auto; scrollbar-width:thin; scrollbar-color:#cbd7e5 transparent; overscroll-behavior:contain; }
.data-table { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; white-space:nowrap; }
.data-table th { position:sticky; top:0; z-index:2; text-align:left; font-weight:500; font-size:11px; color:var(--muted); padding:10px 16px; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line); background:var(--surface-soft); }
.data-table td { padding:12px 16px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.data-table tbody tr:last-child td { border-bottom:0; }
.data-table tbody tr:hover { background:#f9fbfe; }
.data-table .name-cell { min-width:215px; max-width:350px; white-space:normal; }
.item-name { text-align:left; display:block; padding:0; border:0; min-height:24px; color:var(--ink); font-weight:600; background:transparent; white-space:normal; word-break:break-word; line-height:1.55; }
.item-name:hover:not(:disabled) { background:transparent; color:var(--blue); text-decoration:underline; }
.name-cell small,.quantity-cell small,.person-cell small,.date-cell small { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
.quantity-cell { min-width:165px; font-variant-numeric:tabular-nums; }
.quantity-cell strong { color:var(--ink); font-weight:600; }
.source-value { color:var(--amber); }
.source-value small { color:var(--amber); }
.data-table .actions { min-width:150px; text-align:right; }
/* Core inventory columns fit the available window; secondary metadata is in details. */
.inventory-table { width:100%; min-width:0; table-layout:fixed; }
.inventory-table .row-number { width:3%; min-width:0; text-align:center; font-variant-numeric:tabular-nums; color:var(--muted); background:var(--surface); }
.inventory-table .grid-name { width:29%; background:var(--surface); border-right:1px solid var(--line-soft); }
.inventory-table th.row-number,.inventory-table th.grid-name { z-index:5; background:var(--surface-soft); }
.inventory-table .grid-spec { width:15%; }
.inventory-table .grid-location { width:20%; }
.inventory-table .quantity-cell { width:14%; min-width:0; }
.inventory-table .grid-status { width:7%; }
.inventory-table .actions { width:12%; min-width:0; }
.inventory-table th button { border:0; background:transparent; padding:0; min-height:24px; color:var(--ink); font-size:11px; justify-content:flex-start; }
.grid-cell-button { width:100%; min-width:0; justify-content:space-between; height:32px; min-height:32px; text-align:left; padding:4px 5px; border:1px solid transparent; border-radius:4px; background:transparent; white-space:nowrap; line-height:18px; }
.grid-cell-button>span:first-child { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.grid-name .grid-cell-button { font-weight:600; }
.grid-name-content { display:flex; align-items:center; gap:6px; min-width:0; }
.inventory-name-labels { flex:1; min-width:0; }
.inventory-name-cas { display:flex; align-items:center; gap:3px; min-width:0; color:var(--muted); font-size:10px; }
.inventory-name-cas::before { content:'CAS'; flex-shrink:0; }
.inventory-table .inventory-name-cas>.grid-cell-button { flex:1; min-height:24px; padding-top:1px; padding-bottom:1px; font-size:11px; font-weight:400; color:var(--muted); }
.data-table.inventory-table td.grid-name { padding-top:2px; padding-bottom:2px; }
.grid-name-content>.grid-cell-button { flex:1; }
.product-photo-thumb { position:relative; display:flex; align-items:center; justify-content:center; flex:0 0 34px; width:34px; height:34px; min-height:34px; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:4px; background:var(--surface-soft); }
.product-photo-thumb:hover,.product-photo-thumb:focus-visible { border-color:var(--blue); outline:2px solid var(--blue-soft); }
.product-photo-thumb.has-discrepancy { border-color:#dab873; }
.product-photo-region { position:relative; display:block; flex:none; overflow:hidden; background:#e9edf2; }
.product-photo-region>img { position:absolute; display:block; width:var(--photo-width); height:var(--photo-height); max-width:none; left:var(--photo-left); top:var(--photo-top); }
.product-photo-count,.product-photo-warning { position:absolute; bottom:0; right:0; min-width:11px; padding:0 2px; background:var(--blue); color:white; font-size:9px; line-height:12px; text-align:center; }
.product-photo-warning { top:0; bottom:auto; background:var(--amber); }
.product-detail-photos { margin:10px 0 16px; display:flex; gap:8px 12px; align-items:center; flex-wrap:wrap; font-size:12px; }
.product-detail-photos>div { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
dialog.product-photo-dialog { width:min(860px,calc(100vw - 24px)); }
.product-photo-body { padding:12px 18px; }
.product-photo-toolbar { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:9px; }
.product-photo-paging,.product-photo-controls { display:flex; align-items:center; gap:5px; }
.product-photo-paging>span { min-width:48px; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }
.product-photo-controls [aria-pressed="true"] { color:var(--blue); background:var(--blue-soft); border-color:#bfd3eb; }
.product-photo-stage { width:100%; height:min(56dvh,470px); min-height:240px; overflow:auto; padding:12px; background:#edf1f5; border:1px solid var(--line); border-radius:6px; overscroll-behavior:contain; touch-action:pan-x pan-y; }
.product-photo-stage>.product-photo-region { margin:0 auto; }
.product-photo-help { margin:7px 0; font-size:11px; color:var(--muted); }
.product-photo-help>a { margin-left:7px; }
.product-photo-discrepancy { padding:8px 11px; margin:10px 0; border:1px solid #e7d1aa; border-radius:5px; color:var(--amber); background:var(--amber-soft); font-size:12px; overflow-wrap:anywhere; }
.product-photo-discrepancy>p { margin:0; }
.product-photo-discrepancy>p+p { margin-top:5px; }
.product-photo-observations { margin:12px 0; }
.product-photo-observations>h3 { margin:0 0 6px; font-size:12px; font-weight:600; }
.product-photo-observations>dl,.product-photo-source>dl { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 16px; }
.product-photo-observations dt,.product-photo-source dt { font-size:10px; color:var(--muted); }
.product-photo-observations dd,.product-photo-source dd { margin:2px 0 0; font-size:12px; white-space:normal; overflow-wrap:anywhere; }
.product-photo-notes { font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; margin:7px 0; }
.product-photo-strip { display:flex; gap:7px; align-items:center; flex-wrap:wrap; padding:5px 0; }
.product-photo-strip>.is-current { border-radius:5px; outline:2px solid var(--blue); outline-offset:1px; }
.product-photo-source { margin:10px 0 0; font-size:11px; color:var(--muted); }
.product-photo-source>dl { margin-top:8px; }
.grid-cell-button:hover:not(:disabled),.grid-cell-button:focus-visible { background:var(--blue-soft); border-color:#bfd3eb; }
.grid-edit-icon { flex-shrink:0; color:var(--blue); font-size:12px; margin-left:5px; opacity:0; }
.grid-cell-button:hover .grid-edit-icon,.grid-cell-button:focus-visible .grid-edit-icon { opacity:1; }
.grid-empty-value { color:var(--muted); }
.grid-flagged-value { color:var(--amber); }
.grid-inline-flag { flex-shrink:0; margin-left:auto; padding:0 4px; font-weight:700; color:var(--amber); }
.grid-stock-button { display:flex; width:100%; min-width:0; justify-content:flex-start; height:32px; min-height:32px; text-align:left; border-color:transparent; padding:4px 5px; white-space:nowrap; line-height:18px; }
.grid-stock-button>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.grid-stock-button:hover:not(:disabled) { background:var(--amber-soft); border-color:#e7d1aa; }
.data-table.inventory-table td { height:auto; padding:6px 7px; border-right:1px solid var(--line-soft); line-height:20px; white-space:normal; overflow-wrap:anywhere; }
.inventory-table .grid-cell-button,.inventory-table .grid-stock-button { height:auto; min-height:34px; white-space:normal; }
.inventory-table .grid-cell-button>span:first-child,.inventory-table .grid-stock-button>span { white-space:normal; overflow:visible; overflow-wrap:anywhere; }
.data-table.inventory-table th { height:36px; padding:6px 12px; white-space:nowrap; }
.inventory-table .actions>div { height:auto; min-width:0; align-items:center; flex-wrap:wrap; gap:4px; }
.inventory-table .actions .small-button { height:30px; min-height:30px; padding:3px 8px; line-height:18px; }
.inventory-table .status { height:24px; max-width:100%; white-space:nowrap; padding:2px 6px; }
.inventory-table tbody tr:hover .grid-name,.inventory-table tbody tr:hover .row-number { background:#f9fbfe; }
@media(min-width:901px) {
  .data-table.inventory-table td { padding:4px 8px; border-right:0; line-height:18px; }
  .inventory-table .grid-name .inventory-name-labels>.grid-cell-button { min-height:24px; padding:2px 4px; line-height:18px; }
  .inventory-table .inventory-name-cas>.grid-cell-button { min-height:20px; height:auto; padding:0 4px; line-height:16px; }
  .inventory-table .grid-cell-button,.inventory-table .grid-stock-button { min-height:30px; padding:3px 4px; }
  .inventory-table .actions>div { display:flex; justify-content:flex-end; }
  .inventory-panel .table-summary { padding:10px 15px; }
}
@media(min-width:901px) and (max-width:1100px) {
  .inventory-table .actions .small-button { padding:3px 6px; font-size:11px; }
}
.qr-entry { color:var(--blue); background:var(--blue-soft); border-color:#c9dbf0; font-weight:600; }
.ledger-home-entry { padding:9px 13px; border-radius:7px; background:var(--blue); color:white; font-weight:600; white-space:nowrap; }
.ledger-home-entry:hover { background:var(--blue-dark); text-decoration:none; }
dialog.cell-editor { max-width:480px; }
.cell-edit-help { margin:12px 0 0; font-size:11px; color:var(--muted); }
.cell-change { display:block; max-width:320px; white-space:normal; overflow-wrap:anywhere; }
.filter-field.search-field { max-width:620px; }
#search { min-height:44px; font-size:14px; }
@media(max-width:640px) {
  .grid-edit-icon { opacity:.5; }
  #ledger-share { grid-column:1/-1; }
  .page-actions { flex-wrap:wrap; }
  .ledger-home-entry { font-size:12px; }
}
@media(max-width:767px) {
  .product-photo-toolbar { align-items:flex-start; }
  .product-photo-controls { flex-wrap:wrap; }
  .product-photo-toolbar .small-button { min-height:34px; padding:4px 7px; font-size:11px; }
  dialog.product-photo-dialog .product-photo-body { padding:10px 12px; }
  .product-photo-stage { height:47dvh; min-height:220px; }
}
.actions>div { display:flex; justify-content:flex-end; gap:5px; }
.status { display:inline-flex; gap:5px; align-items:center; padding:4px 7px; font-size:11px; border-radius:5px; background:#f0f3f7; color:#75859a; line-height:1.3; }
.status[data-status="pending"] { color:var(--amber); background:var(--amber-soft); }
.status[data-status="in-stock"] { color:var(--green); background:var(--green-soft); }
.status[data-status="used-up"] { color:#75859a; background:#f0f3f7; }
.status[data-status="archived"] { color:#8a769e; background:#f3eff7; }
.flag { color:var(--amber); font-size:10px; border:1px solid #ebddc3; border-radius:4px; padding:1px 4px; margin-left:5px; display:inline-block; }
.acid-location { display:inline-flex; align-items:center; gap:5px; }
.acid-location::before { content:""; width:6px; height:6px; background:#d7b54a; border-radius:50%; }
.cabinet-location-link { display:block; font-size:11px; margin-top:4px; color:var(--blue); }
.detail-location-link { display:inline-flex; border:1px solid var(--line); border-radius:7px; padding:8px 12px; margin:0 0 18px; font-size:12px; background:var(--blue-soft); }
.panel-foot { padding:11px 17px; border-top:1px solid var(--line-soft); color:var(--muted); font-size:11px; line-height:1.6; }
.empty { text-align:center; padding:48px 20px; color:var(--muted); }
.empty strong { display:block; font-size:14px; font-weight:500; color:var(--ink); margin-bottom:6px; }
.empty p { font-size:12px; margin:0; }
.empty button { margin-top:15px; }
.loading-state { display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted); padding:80px 20px; }
.loading-state p { margin:0; }
.spinner { width:18px; height:18px; border:2px solid var(--line); border-top-color:var(--blue); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
dialog { padding:0; border:1px solid var(--line); border-radius:12px; width:min(660px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); color:var(--ink); background:var(--surface); box-shadow:0 20px 70px #1d365b33; }
dialog::backdrop { background:#1b2c416b; backdrop-filter:blur(2px); }
.dialog-head { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:18px 22px; border-bottom:1px solid var(--line-soft); }
.dialog-head h2 { margin:0; font-size:18px; font-weight:650; }
.dialog-body { padding:20px 22px; }
.dialog-head .dialog-subtitle { display:block; font-size:11px; color:var(--muted); margin-top:4px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 18px; }
.field { min-width:0; }
.field.full { grid-column:1/-1; }
.field>label { display:block; font-size:12px; color:#61768e; font-weight:500; margin-bottom:6px; }
.required { color:var(--red); }
.field small { display:block; font-size:11px; color:var(--muted); margin-top:5px; }
.dialog-body .banner { margin-bottom:18px; }
.form-footer { padding:15px 22px; border-top:1px solid var(--line-soft); display:flex; align-items:center; justify-content:flex-end; gap:9px; background:#fafbfd; }
.form-footer .operator-note { font-size:11px; color:var(--muted); margin-right:auto; }
.form-error { font-size:12px; color:var(--red); margin:15px 0 0; line-height:1.7; overflow-wrap:anywhere; }
.conflict-box { padding:11px 13px; border-radius:7px; margin-top:14px; background:var(--amber-soft); border:1px solid #eddcb9; font-size:12px; color:#8e6624; }
.conflict-box p { margin:0 0 7px; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 22px; margin:0; }
.detail-grid .full { grid-column:1/-1; }
.detail-grid dt { font-size:11px; color:var(--muted); margin-bottom:4px; }
.detail-grid dd { margin:0; font-size:13px; overflow-wrap:anywhere; white-space:pre-wrap; }
.detail-summary { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px 16px; border-radius:9px; background:var(--surface-soft); margin-bottom:20px; }
.detail-summary strong { color:var(--blue); font-size:20px; font-weight:650; }
.detail-summary small { display:block; font-size:11px; color:var(--muted); margin-top:4px; }
.source-section { margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }
.source-section summary { cursor:pointer; font-size:12px; color:var(--muted); margin-bottom:12px; }
.source-section .detail-grid { gap:12px 20px; }
.usage-preview { padding:13px 16px; border-radius:8px; border:1px solid var(--line); background:var(--surface-soft); margin:16px 0 0; font-size:13px; line-height:1.7; }
.usage-preview strong { color:var(--blue); font-weight:650; }
.usage-preview small { display:block; color:var(--muted); font-size:11px; margin-top:2px; }
.usage-preview.invalid { color:var(--red); border-color:#ebcece; background:#fff5f5; }
.record-note { display:block; color:var(--muted); font-size:11px; white-space:normal; max-width:230px; margin-top:3px; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:40; background:#203b57; color:white; padding:12px 18px; border-radius:9px; font-size:12px; max-width:min(600px,calc(100vw - 28px)); box-shadow:0 6px 30px #203b5730; line-height:1.7; }
.login-page { min-height:100dvh; display:grid; place-items:center; padding:28px 16px; background:var(--page); }
.login-card { width:min(420px,100%); border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:30px; box-shadow:0 8px 35px #203b570a; }
.login-brand { margin-bottom:23px; }
.login-intro { font-size:13px; color:var(--muted); line-height:1.8; margin-bottom:23px; }
.login-card .field { margin-bottom:17px; }
.login-card input { min-height:43px; }
.password-field { position:relative; }
.password-field input { padding-right:55px; }
.password-field button { position:absolute; right:5px; top:7px; font-size:11px; }
.login-submit { width:100%; min-height:43px; margin-top:8px; }
.login-foot { margin:20px 0 0; font-size:11px; color:var(--muted); text-align:center; }
@media (min-width:901px) { .inventory-table th:first-child,.inventory-table td:first-child { position:sticky; left:0; background:var(--surface); z-index:1; border-right:1px solid var(--line-soft); } .inventory-table th:first-child { z-index:3; background:var(--surface-soft); } .inventory-table tbody tr:hover td:first-child { background:#f9fbfe; } }
@media (max-width:767px) { html { -webkit-text-size-adjust:100%; text-size-adjust:100%; } .topbar { padding:13px 14px; align-items:flex-start; flex-wrap:wrap; gap:12px; } .brand h1 { font-size:19px; } .brand-symbol { width:34px; height:34px; } .top-actions { width:100%; justify-content:flex-start; gap:9px; } .top-actions>.primary { margin-left:auto; } .nav { padding:6px 10px; gap:4px; flex-wrap:wrap; } .nav>button { font-size:13px; padding:8px 12px; } .sync { gap:4px; } .sync #sync-status { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .shell { padding:18px 12px 28px; } .page-head { align-items:flex-start; margin-bottom:16px; } .page-head h2 { font-size:18px; } .page-head p { font-size:11px; max-width:200px; } .page-actions { flex-wrap:wrap; justify-content:flex-end; gap:4px; } .page-actions button { padding:6px 9px; font-size:11px; min-height:32px; } .filter-bar { gap:8px; } .filter-field.search-field { max-width:none; flex-basis:100%; } .filter-field:not(.search-field) { flex:1 1 120px; } .filter-field select { min-width:0; font-size:14px; } .filter-bar .reset { min-height:38px; } .table-summary { padding:11px 12px; } .table-summary .count-note { font-size:10px; } .table-wrap { max-height:calc(100dvh - 430px); min-height:260px; } .data-table td { padding:12px; } .data-table th { padding:10px 12px; } .data-table .name-cell { min-width:175px; max-width:210px; } .quantity-cell { min-width:155px; } .data-table .actions { min-width:140px; } .panel-foot { padding:10px 12px; } dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); border-radius:10px; } .dialog-head { padding:15px 17px; } .dialog-body { padding:18px 17px; } .form-footer { padding:13px 17px; gap:7px; } .form-footer .operator-note { font-size:10px; } .form-grid { gap:14px 12px; } .field input,.field select,.field textarea { font-size:16px; } .detail-grid { gap:15px; } .login-card { padding:26px 23px; } }
@media (max-width:400px) { .mode-pill { font-size:10px; } .operator { font-size:11px; } .top-actions { gap:5px; } .top-actions .primary { padding:8px 10px; } .sync { margin-left:auto; } .sync #sync-status { max-width:116px; font-size:10px; } .sync .link-button { padding:4px; } .page-actions { max-width:145px; } .form-grid { grid-template-columns:1fr; } .field.full { grid-column:1; } .form-footer { flex-wrap:wrap; } .form-footer .operator-note { width:100%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition:none !important; } }

/* Daily ledger controls use the same table shell on desktop and mobile. */
button.use-primary { background:var(--green); border-color:var(--green); }
button.use-primary:hover:not(:disabled) { background:#286c60; border-color:#286c60; }
.status-overview { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.status-overview>button { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:8px; height:50px; min-height:50px; padding:8px 12px; white-space:nowrap; background:var(--surface); }
.status-overview>button>span { color:var(--muted); font-size:12px; }
.status-overview strong { display:inline-flex; align-items:baseline; flex-shrink:0; font-size:20px; font-weight:650; line-height:1.3; font-variant-numeric:tabular-nums; }
.status-overview strong small { margin-left:4px; font-size:11px; color:var(--muted); font-weight:400; }
.status-overview>button[aria-pressed="true"] { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); background:var(--blue-soft); }
.status-overview>button[aria-pressed="true"]>span { color:var(--blue); }
.pagination { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--line-soft); color:var(--muted); font-size:11px; }
.pagination>div { display:flex; align-items:center; gap:10px; }
.pagination button { font-size:12px; }
.record-scope { display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:12px; padding:4px 0; }
.event-undone .name-cell>.record-note { color:#8a769e; }
.confirmation-section { margin-bottom:18px; padding:14px; border:1px solid #eddcb9; background:#fffaf1; border-radius:8px; }
.confirmation-section .banner { margin-bottom:12px; }
.confirmation-section .field small { color:#8e6624; }
.picker-label { display:block; margin-bottom:7px; font-size:12px; color:var(--muted); }
.usage-picker { display:flex; flex-direction:column; gap:7px; margin-top:15px; }
.usage-picker>button { display:grid; grid-template-columns:minmax(0,1fr) auto; text-align:left; gap:12px; justify-content:stretch; align-items:center; padding:12px; white-space:normal; }
.usage-picker strong { display:block; color:var(--ink); font-size:13px; }
.usage-picker small { display:block; font-size:11px; margin-top:3px; color:var(--muted); overflow-wrap:anywhere; }
.usage-picker>button>span:last-child { color:var(--blue); font-size:11px; }
.detail-actions { flex-wrap:wrap; }
@media (max-width:767px) {
  .top-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .top-actions .mode-pill { justify-self:start; }
  .top-actions .operator { justify-self:end; }
  .top-actions>#new-item,.top-actions>#used-up-entry { width:100%; margin:0; min-height:40px; }
  .status-overview { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:12px; }
  .status-overview>button { height:46px; min-height:46px; padding:6px 10px; gap:5px; }
  .status-overview>button>span { font-size:11px; }
  .status-overview strong { font-size:18px; }
  .pagination { flex-wrap:wrap; justify-content:center; padding:12px; }
  .pagination>span { width:100%; text-align:center; }
  .usage-picker>button { padding:11px; }
  .confirmation-section { padding:12px; }
  .detail-actions button { flex:1 1 auto; }
}

/* Finance-style entry rhythm: location first, compact core fields, optional detail. */
.ledger-location-strip { display:grid; grid-template-columns:minmax(0,380px) minmax(0,190px); align-items:center; gap:12px; margin:0 0 10px; }
.ledger-location-field { display:flex; align-items:center; gap:9px; min-width:0; }
.ledger-location-field>label { flex:0 0 auto; color:var(--muted); font-size:12px; font-weight:500; }
.ledger-location-field>select { flex:1; width:100%; min-width:0; min-height:34px; height:34px; padding:5px 10px; font-size:13px; }
.ledger-entry-form .dialog-body,.ledger-picker-body { padding:16px 22px; }
.ledger-entry-form .form-grid,.ledger-picker-body .form-grid { gap:10px 14px; }
.form-section { margin:0 0 15px; }
.form-section-head { margin:0 0 9px; }
.form-section-head h3 { font-size:13px; line-height:1.4; margin:0; }
.form-section-head p { font-size:11px; color:var(--muted); line-height:1.6; margin:3px 0 0; }
.form-location-section { padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); }
.ledger-entry-form .field>label { margin-bottom:4px; }
.ledger-entry-form .field input,.ledger-entry-form .field select,.ledger-picker-body select,.ledger-picker-body input { min-height:36px; padding:7px 10px; }
.ledger-entry-form .field textarea { min-height:64px; padding:8px 10px; }
.ledger-entry-form .field small { font-size:10px; line-height:1.5; margin-top:3px; }
.ledger-entry-form .banner { font-size:11px; margin-bottom:12px; padding:9px 11px; }
.ledger-entry-form .confirmation-section { margin-bottom:15px; padding:12px; }
.form-grid-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.optional-fields { margin-top:13px; padding-top:11px; border-top:1px solid var(--line-soft); }
.optional-fields>summary { cursor:pointer; color:var(--muted); font-size:12px; padding:3px 0; }
.optional-fields[open]>summary { margin-bottom:10px; }
.form-selected-item { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.form-selected-item>div { min-width:0; }
.form-selected-item span { display:block; font-size:12px; color:var(--blue); }
.form-selected-item strong { display:block; font-size:14px; margin-top:4px; overflow-wrap:anywhere; }
.form-selected-item small { display:block; color:var(--muted); font-size:11px; margin-top:3px; overflow-wrap:anywhere; }
.form-selected-item button { flex-shrink:0; }
.ledger-entry-form .usage-preview { margin-top:11px; padding:10px 12px; font-size:12px; }
.ledger-picker-body .usage-picker { gap:5px; margin-top:10px; }
.ledger-picker-body .usage-picker>button { padding:9px 11px; }
@media (max-width:767px) {
  .ledger-location-strip { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:8px; }
  .ledger-location-field { display:block; }
  .ledger-location-field>label { display:block; margin-bottom:4px; font-size:11px; }
  .ledger-location-field>select { font-size:16px; min-height:36px; height:36px; padding:5px 7px; }
  .ledger-entry-form .dialog-body,.ledger-picker-body { padding:14px 16px; }
  .ledger-entry-form .form-grid,.ledger-picker-body .form-grid { gap:10px; }
  .ledger-entry-form .field input,.ledger-entry-form .field select,.ledger-picker-body select,.ledger-picker-body input { min-height:40px; }
  .form-grid-three { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .form-grid-three>.field:last-child { grid-column:1/-1; }
}
@media (max-width:400px) {
  .ledger-entry-form .form-grid,.ledger-picker-body .form-grid { grid-template-columns:minmax(0,1fr); }
  .form-grid-three>.field:last-child { grid-column:1; }
  .form-selected-item { align-items:flex-start; }
}

/* Inventory uses page scrolling. Its sticky header is outside the horizontal
   scroll containers, so overflow-x cannot capture its vertical sticky axis. */
.panel.inventory-panel { overflow:visible; }
.inventory-panel .table-summary { border-radius:10px 10px 0 0; }
.inventory-panel .panel-foot { border-radius:0 0 10px 10px; }
.inventory-grid { min-width:0; }
.inventory-sticky-header { position:sticky; top:0; z-index:10; background:var(--surface-soft); box-shadow:0 2px 4px #203b5710; }
.inventory-header-scroll { width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:#cbd7e5 transparent; overscroll-behavior-x:contain; }
.table-wrap.inventory-body-scroll { max-height:none; min-height:0; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; overscroll-behavior-y:auto; }
.inventory-table .inventory-semantic-head th { position:static; height:0; padding:0; border:0; font-size:0; line-height:0; }
.inventory-header-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* The same records become compact rows on narrower screens, with no duplicate
   controls or wide hidden spreadsheet forcing the page beyond its viewport. */
@media(max-width:900px) {
  .inventory-sticky-header { display:none; }
  .inventory-grid,.inventory-header-scroll,.table-wrap.inventory-body-scroll { width:100%; max-width:100%; min-width:0; }
  .table-wrap.inventory-body-scroll { overflow-x:hidden; overflow-y:visible; }
  .inventory-table,.inventory-table tbody { display:block; width:100%; min-width:0; max-width:100%; white-space:normal; }
  .inventory-table colgroup { display:none; }
  .inventory-table .inventory-semantic-head { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .inventory-table tbody { padding:0 10px; }
  .inventory-table tbody tr { display:grid; grid-template-columns:0 minmax(0,1fr) 96px; grid-template-rows:auto auto auto; gap:2px 8px; position:relative; min-width:0; margin:0; padding:8px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:var(--surface); }
  .inventory-table tbody tr:has(.product-photo-thumb) { grid-template-columns:44px minmax(0,1fr) 96px; }
  .inventory-table tbody tr:last-child { border-bottom:0; }
  .data-table.inventory-table td { display:block; width:auto; min-width:0; height:auto; padding:0; border:0; position:static; white-space:normal; overflow:visible; }
  .data-table.inventory-table td.row-number { display:none; }
  .inventory-table .grid-status { grid-column:3; grid-row:1; text-align:right; align-self:center; }
  .data-table.inventory-table td.grid-name,.inventory-table .grid-name-content,.inventory-table .inventory-name-labels { display:contents; }
  .inventory-table .product-photo-thumb { grid-column:1; grid-row:1/4; align-self:start; margin-top:4px; width:44px; height:44px; min-height:44px; border:0; border-radius:6px; }
  .inventory-table .product-photo-thumb>.product-photo-region { transform:scale(1.3125); }
  .inventory-table .grid-name .inventory-name-labels>.grid-cell-button { grid-column:2; grid-row:1; font-size:14px; font-weight:600; line-height:18px; }
  .inventory-table .grid-name .inventory-name-labels>.grid-cell-button>span:first-child { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .inventory-table .inventory-name-cas { grid-column:2; grid-row:2; align-self:start; width:min(112px,62%); font-size:9px; gap:1px; }
  .inventory-table .inventory-name-cas>.grid-cell-button { min-height:32px; padding:3px 1px; font-size:10px; font-weight:400; line-height:14px; }
  .data-table.inventory-table td.grid-spec { grid-column:2; grid-row:2; justify-self:end; width:calc(100% - min(112px,62%) - 4px); }
  .inventory-table .grid-location { grid-column:2; grid-row:3; }
  .inventory-table .quantity-cell { grid-column:3; grid-row:2; }
  .inventory-table .actions { grid-column:3; grid-row:3; align-self:center; }
  .inventory-table .grid-spec::before,.inventory-table .quantity-cell::before,.inventory-table .grid-location::before { display:none; }
  .inventory-table .grid-cell-button,.inventory-table .grid-stock-button { min-height:32px; padding:3px; font-size:12px; line-height:16px; }
  .inventory-table .grid-edit-icon { display:none; }
  .inventory-table .grid-spec .grid-cell-button { font-size:11px; }
  .inventory-table .grid-spec .grid-cell-button>span:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .inventory-table .grid-location .grid-cell-button { color:var(--muted); font-size:11px; }
  .inventory-table .grid-location .grid-cell-button>span:first-child,.inventory-table .grid-stock-button.source-value>span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .inventory-table .grid-stock-button { justify-content:flex-end; text-align:right; font-size:12px; }
  .inventory-table .actions>div { height:auto; justify-content:flex-end; flex-wrap:nowrap; gap:4px; }
  .inventory-table .actions .small-button { min-height:32px; height:auto; padding:4px 8px; font-size:11px; }
  .inventory-panel .table-summary { flex-wrap:wrap; }
}
@media(max-width:767px) {
  #main .page-head { flex-wrap:wrap; }
  #main .page-head>div { min-width:0; max-width:100%; }
  #main .page-head p { max-width:none; overflow-wrap:anywhere; }
  #main .page-actions { width:100%; max-width:none; justify-content:flex-start; flex-wrap:wrap; }
  #main.shell { padding-top:12px; }
  #main .page-head { gap:7px; margin-bottom:12px; }
  #main .page-head p { display:none; }
  #main .status-overview { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin-bottom:10px; }
  #main .status-overview>button { flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; height:54px; min-height:54px; padding:5px 7px; }
  #main .status-overview>button>span { font-size:10px; }
  #main .status-overview strong { font-size:17px; }
  #main .filter-bar { margin-bottom:10px; }
  #main #search { min-height:38px; font-size:16px; }
  ledger-site-header[data-site-page="inventory"] .site-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  ledger-site-header[data-site-page="inventory"] .site-actions .sync { grid-column:1/-1; }
  ledger-site-header[data-site-page="inventory"] .site-actions>button { width:100%; grid-column:auto; }
  ledger-site-header[data-site-page="inventory"] .site-actions>#ledger-share { grid-column:auto; }
}