/* The stock workspace: a sidebar and a work area, in the look of the FinDash
   Figma file (colours, type and buttons from site.css and dashboard.css).
   The dashboard loads this file too, for its stock section, so rules for
   the workspace's page are scoped to .stock-layout. */
body:has(.stock-layout) { padding: 0; background-image: none; }
[hidden] { display: none !important; }
.stock-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.stock-sidebar { padding: 32px 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 24px; background: var(--card); position: sticky; top: 0; height: 100vh; }
.stock-sidebar nav { display: flex; flex-direction: column; gap: 8px; }
.stock-sidebar nav a { padding: 11px 16px; border-radius: var(--radius-pill); text-decoration: none; font-weight: 700; letter-spacing: -0.025em; }
.stock-sidebar nav a:hover { background: var(--accent-soft); color: var(--accent-soft-ink); }
.stock-sidebar nav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.stock-settings-link { margin-top: 24px; }
.stock-layout main { width: 100%; max-width: 1120px; padding: 40px clamp(18px, 4vw, 56px); min-width: 0; }
.stock-page-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.stock-layout h1 { margin: 8px 0 18px; font-family: var(--font-serif), "FinDash Chinese", serif; font-weight: 400; font-size: clamp(36px, 5vw, 48px); line-height: 0.95; letter-spacing: -0.03em; }
.stock-layout h2 { margin-top: 0; font-family: var(--font-serif), "FinDash Chinese", serif; font-weight: 400; font-size: 26px; letter-spacing: -0.03em; }
.stock-eyebrow { margin: 0; font-family: var(--mono), "FinDash Chinese", monospace; color: var(--caption); font-size: 12px; letter-spacing: -0.01em; }
.stock-storage { color: var(--ink-2); margin-bottom: 28px; }
.stock-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 24px; margin-bottom: 20px; }
.stock-message { padding: 14px 18px; border-radius: var(--radius-control); border: 1px solid var(--accent-hover); background: var(--accent-soft); color: var(--accent-soft-ink); overflow-wrap: anywhere; }
.stock-drop { padding: 48px 24px; text-align: center; border: 2px dashed var(--line); border-radius: var(--radius); }
.stock-drop.over { border-color: var(--accent); }
.stock-hint, .stock-secondary { color: var(--ink-2); font-size: 14px; }
.stock-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0; }
.stock-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.stock-language, .stock-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.stock-field input, .stock-field select, .stock-language select { width: 100%; padding: 10px 14px; background: var(--card-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-control); font: inherit; min-height: 44px; }
.stock-field input:focus, a:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stock-table-wrap { overflow-x: auto; }
.stock-table { width: 100%; border-collapse: collapse; }
.stock-table th, .stock-table td { padding: 14px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.stock-table th { font-family: var(--mono), "FinDash Chinese", monospace; font-size: 12px; font-weight: 400; color: var(--caption); border-bottom-color: var(--line-strong); }
.stock-table .btn { padding: 8px 10px; min-height: 44px; }
.stock-count { font-size: 22px; font-weight: 650; }
dialog { max-width: 620px; width: calc(100% - 32px); max-height: 90vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); padding: 28px; box-shadow: var(--shadow-card); }
dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.stock-skip { position: absolute; left: 240px; top: -80px; background: var(--card); padding: 10px; z-index: 10; }
.stock-skip:focus { top: 0; }
.stock-review-line { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; }
.stock-preview { max-width: 220px; max-height: 220px; object-fit: contain; }
.stock-danger { color: var(--critical); }
.stock-layout footer { margin-top: 40px; display: flex; gap: 20px; }
@media (max-width: 760px) {
 .stock-layout { display: block; }
 .stock-sidebar { position: static; height: auto; padding: 16px; gap: 14px; }
 .stock-sidebar nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
 .stock-sidebar nav a { padding: 10px; }
 .stock-settings-link { margin: 0; border: 0; }
 .stock-language { max-width: 220px; margin: 0; }
 .stock-layout main { padding-top: 24px; }
 .stock-page-header { align-items: flex-start; }
 .stock-skip { left: 10px; }
}
@media print {
 .stock-sidebar, .stock-page-header .btn, .stock-storage, .stock-message, .stock-actions, footer, .stock-skip { display: none !important; }
 .stock-layout { display: block; }
 body:has(.stock-layout), .stock-card { background: white; color: black; }
 .stock-layout main { padding: 0; max-width: none; }
}
/* Self-hosted CJK fallback: Chinese labels and supplier text remain readable
   even on devices without a Chinese system font. SIL OFL license in fonts/. */
@font-face {
 font-family: "FinDash Chinese";
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url("/fonts/noto-sans-sc.woff2") format("woff2");
 unicode-range: U+2000-206F, U+2E80-9FFF, U+F900-FAFF, U+FF00-FFEF;
}
#dashboard-stock, #stock-dialog, .stock-layout, .stock-layout button, .stock-layout input, .stock-layout select, .stock-layout dialog {
 font-family: var(--font-sans), "FinDash Chinese", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
/* On phones each item is a card, so all four daily actions remain visible
   without discovering a horizontal table scrollbar. */
@media (max-width: 760px) {
 .stock-items-table, .stock-items-table tbody { display: block; width: 100%; }
 .stock-items-table thead { display: none; }
 .stock-items-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; border-bottom: 1px solid var(--line); padding: 16px 0; }
 .stock-items-table td { display: block; border: 0; padding: 0; overflow-wrap: anywhere; }
 .stock-items-table td:first-child, .stock-items-table td:last-child { grid-column: 1 / -1; }
 .stock-items-table td[data-label]::before { content: attr(data-label); display: block; color: var(--ink-2); font-size: 12px; font-weight: 400; margin-bottom: 6px; }
 .stock-items-table .stock-actions { margin: 4px 0; }
 .stock-items-table .stock-actions .btn { flex: 1; padding-inline: 12px; }
 .stock-history-table { min-width: 460px; }
 .stock-history-table td { word-break: keep-all; }
 .stock-layout footer { flex-wrap: wrap; }
}

/* The P&L page shares stock forms and rows without changing its page layout. */
#dashboard-stock { margin-top: 24px; }
#dashboard-stock h2 { margin: 0; }
#dashboard-stock .stock-language { max-width: 180px; margin: 0; }
#dashboard-stock .stock-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
@media print { #dashboard-stock { display: none; } }

/* Stock's tabs: the stock itself, the buying list, delivery problems. */
.stock-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.stock-tabs a { padding: 9px 16px; border-radius: var(--radius-pill); text-decoration: none; font-weight: 700; background: var(--card-2); color: var(--ink); }
.stock-tabs a:hover { background: var(--accent-soft); color: var(--accent-soft-ink); }
.stock-tabs a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.stock-badge { display: inline-block; min-width: 1.6em; padding: 0 6px; margin-left: 4px; border-radius: var(--radius-pill); background: var(--critical); color: #ffffff; font-size: 12px; text-align: center; }
.stock-low { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--critical); }
.stock-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stock-buy { width: 96px; padding: 8px 10px; background: var(--card-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-control); font: inherit; min-height: 44px; }

/* Invoice review: did each line arrive, and how the shelf changes. */
.stock-arrival { margin-top: 20px; padding: 16px 18px; border-radius: var(--radius-control); background: var(--card-2); }
.stock-arrival h3 { margin: 0 0 6px; font-size: 16px; }
.stock-arrival .stock-hint { margin: 0 0 12px; }
.stock-mode { border: 0; padding: 0; margin: 4px 0 16px; min-width: 0; }
.stock-mode legend { padding: 0; margin-bottom: 6px; font-weight: 700; }
.stock-mode label { display: block; margin: 6px 0; }
.stock-mode input[type="radio"], .stock-mode input[type="checkbox"] { accent-color: var(--accent); }
.stock-pack-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.stock-pack-row > span { padding-bottom: 28px; }
.stock-pack-row .stock-field { flex: 1 1 140px; }

/* Delivery problems: one card each, with what happened since. */
.stock-check-list { list-style: none; padding: 0; margin: 0; }
.stock-check p { margin: 6px 0; }
.stock-check-history { margin: 8px 0 12px; padding-left: 18px; font-size: 13px; color: var(--ink-2); }

/* Needs refilling: how much to put out on a shelf, from the newest count. */
.stock-refill { color: var(--critical); }