/* Shared visual system. Layout and presentation only; scanner behavior lives in app.js. */
:root {
  --ink:#17274b; --muted:#75829d; --accent:#315bea; --accent-dark:#2448c7;
  --bg:#f4f7fd; --white:#fff; --soft:#edf3ff; --line:#e4ebf7;
  --success:#246e65; --success-bg:#e8f5f1; --warning:#876327; --warning-bg:#fff5df;
  --danger:#aa4056; --danger-bg:#fff0f3;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px;
  --radius-sm:12px; --radius-control:14px; --radius:24px; --radius-lg:32px;
  --shadow:0 8px 32px -16px #24478c21; --shadow-hover:0 16px 36px -18px #24478c38;
  --control-height:46px; --transition:180ms ease;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:14px; color:var(--ink); font-synthesis:none;
}
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(ellipse at 80% 0,#e6edff80,transparent 48%),var(--bg); line-height:1.55; }
[hidden] { display:none!important; }
a { color:var(--accent); text-decoration:none; text-underline-offset:4px; }
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 #809fff; outline-offset:3px; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(26px,2.3vw,36px); font-weight:720; line-height:1.2; letter-spacing:-1.1px; margin-bottom:12px; }
h2 { font-size:20px; line-height:1.35; letter-spacing:-.4px; margin-bottom:12px; }
h3 { font-size:16px; line-height:1.4; margin-bottom:8px; }
p+p { margin-top:8px; }
small { font-size:12px; line-height:1.5; }
strong,.strong { font-weight:650; }
.muted,.count,.subtle-label { color:var(--muted); }
.block { display:block; }
.right { text-align:right; }
.mono { font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.eyebrow { color:var(--muted); font-size:10px; font-weight:650; letter-spacing:1.6px; text-transform:uppercase; margin-bottom:10px; }
.icon { width:21px; height:21px; flex:none; vertical-align:middle; }
.skip-link { position:fixed; top:-80px; left:16px; z-index:100; padding:12px 20px; background:var(--white); border-radius:var(--radius-sm); }
.skip-link:focus { top:12px; }
/* One application shell and one content grid. */
.sidebar { position:fixed; inset:20px auto 20px 20px; width:240px; padding:28px 16px 18px; display:flex; flex-direction:column; border:1px solid #ffffff; border-radius:var(--radius-lg); background:#ffffffdc; box-shadow:var(--shadow); z-index:20; }
.brand { display:flex; align-items:center; gap:14px; color:var(--ink); padding:0 12px; text-decoration:none; }
.brand:hover { text-decoration:none; }
.brand-mark { display:flex; align-items:center; justify-content:center; flex:none; }
.organization-logo { display:block; width:64px; height:48px; object-fit:contain; }
.brand-note { color:var(--muted); font-size:12px; font-weight:500; line-height:1.65; }
.nav-caption { font-size:9px; letter-spacing:1.7px; font-weight:700; color:#99a7c0; margin:36px 14px 14px; }
.sidebar nav { margin-top:24px; display:flex; flex-direction:column; gap:6px; overflow-y:auto; min-height:0; padding:4px; scrollbar-width:thin; }
.nav-link { display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:16px; color:#647391; font-size:13px; font-weight:550; line-height:1.35; min-height:49px; transition:background var(--transition),color var(--transition); }
.nav-link:hover { background:var(--soft); color:var(--accent); text-decoration:none; }
.nav-link.active { background:var(--accent); color:var(--white); box-shadow:0 6px 14px -8px #315bea99; }
.sidebar-bottom { border-top:1px solid var(--line); padding:18px 12px 0; margin-top:auto; }
.profile { display:flex; align-items:center; gap:10px; min-width:0; color:var(--ink); }
.profile-text { min-width:0; overflow-wrap:anywhere; font-size:12px; font-weight:600; }
.profile-text small { display:block; color:var(--muted); font-weight:400; }
.avatar { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#e7eeff; color:var(--accent); flex:none; font-weight:600; }
.logout { margin-top:12px; padding:8px 0; min-height:36px; background:transparent; border:0; color:var(--muted); font-size:12px; justify-content:flex-start; box-shadow:none; }
.workspace { margin-left:280px; padding:0 36px 48px; min-width:0; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:94px; max-width:1440px; margin:auto; }
.breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:12px; }
.breadcrumbs strong { color:#536586; font-weight:550; }
.connection { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; white-space:nowrap; }
.connection-dot { width:6px; height:6px; border-radius:50%; background:#7294ed; }
.page { max-width:1440px; margin:auto; min-width:0; }
.page > *+* { margin-top:24px; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.page-heading h1,.page-heading h2 { margin-bottom:4px; }
.page-heading p { color:var(--muted); }
.back { display:inline-flex; gap:8px; color:var(--muted); font-size:12px; }
/* Controls: consistent height, shape, focus and disabled states. */
button,.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:var(--control-height); padding:11px 20px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--white); color:var(--accent); cursor:pointer; font-weight:600; line-height:1.4; transition:background var(--transition),border-color var(--transition),box-shadow var(--transition),transform var(--transition); text-align:center; }
button:hover,.button:hover { background:var(--soft); text-decoration:none; transform:translateY(-1px); }
button:active,.button:active { transform:translateY(0); }
button:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.primary { background:var(--accent); color:var(--white); border-color:var(--accent); box-shadow:0 6px 15px -9px #315beaa0; }
.primary:hover { background:var(--accent-dark); border-color:var(--accent-dark); }
.secondary { background:var(--soft); color:#4164ac; border-color:#e0e8fc; }
.secondary:hover { background:#e2ebff; }
.danger { background:var(--danger-bg); color:var(--danger); border-color:#f4dce3; }
.danger:hover { background:#ffe3eb; }
label { display:flex; flex-direction:column; gap:8px; font-size:13px; font-weight:550; color:#52617d; min-width:0; }
input,select,textarea { width:100%; min-width:0; min-height:var(--control-height); border:1px solid #dfe6f3; border-radius:var(--radius-control); padding:11px 14px; background:#fbfcff; color:var(--ink); transition:border-color var(--transition),box-shadow var(--transition),background var(--transition); }
input:hover,select:hover,textarea:hover { border-color:#bfcdec; }
input:focus,select:focus,textarea:focus { outline:none; border-color:#7d9df8; box-shadow:0 0 0 4px #315bea0d; background:var(--white); }
input::placeholder,textarea::placeholder { color:#97a3ba; opacity:1; }
input[readonly],input:disabled { background:#f0f3fa; color:var(--muted); }
textarea { min-height:98px; resize:vertical; }
input[type=checkbox],input[type=radio] { width:18px; height:18px; min-height:0; flex:none; padding:0; accent-color:var(--accent); }
.check { flex-direction:row; align-items:flex-start; gap:10px; line-height:1.55; font-weight:400; }
.check input { margin:2px 0 0; }
input[type=range] { padding:0; box-shadow:none; accent-color:var(--accent); }
input[type=file] { padding:8px; font-size:12px; }
input::file-selector-button { background:var(--soft); border:0; border-radius:9px; padding:8px 12px; color:var(--accent); margin-right:12px; font:inherit; }
fieldset { border:1px solid var(--line); border-radius:18px; padding:20px; min-width:0; margin:0; }
legend { font-size:12px; color:var(--muted); padding:0 8px; }
.stack { display:flex; flex-direction:column; gap:20px; }
.stack > button,.stack > .button { align-self:flex-start; }
.form-row { display:flex; flex-wrap:wrap; align-items:flex-start; gap:20px; }
.form-row > label,.form-row > p { flex:1 1 160px; min-width:0; }
.form-row > button { align-self:flex-end; }
.action-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.review-actions { display:flex; flex-wrap:wrap; gap:12px; padding:20px 24px; }
.panel > .panel-heading + p { padding:20px 24px 0; color:var(--muted); }
.task-line + .task-line { margin-top:16px; }
.inline-form { display:inline-flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:12px; }
/* Cards, forms and tables share the same border and elevation. */
.panel { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); min-width:0; }
.form-panel { padding:28px; }
.form-panel > *+* { margin-top:20px; }
.form-panel.stack > *+* { margin-top:0; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 28px; border-bottom:1px solid var(--line); }
.panel-heading h2 { margin:0; font-size:17px; }
.toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:20px 24px; min-width:0; }
form.toolbar:not(.panel .toolbar) { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); }
.toolbar > input { flex:1 1 220px; width:auto; }
.toolbar > label,.filter-client { flex:1 1 180px; }
.toolbar .check { flex:0 1 auto; }
.count { margin-left:auto; font-size:12px; }
.table-wrap { width:100%; overflow-x:auto; scrollbar-width:thin; border-radius:var(--radius); }
table { border-collapse:collapse; width:100%; font-size:13px; text-align:left; }
th { padding:15px 24px; background:#f8faff; color:#8390aa; font-size:10px; font-weight:650; letter-spacing:.4px; white-space:nowrap; }
td { padding:18px 24px; border-top:1px solid #edf1f9; vertical-align:middle; line-height:1.65; overflow-wrap:anywhere; }
td .block+small { margin-top:3px; }
td small { color:var(--muted); }
tbody tr { transition:background var(--transition); }
tbody tr:hover { background:#fafcff; }
tfoot td { background:#f8faff; font-weight:600; }
td.right,.quantity { font-variant-numeric:tabular-nums; }
.table-empty { text-align:center; color:var(--muted); padding:48px 24px; }
td form { min-width:210px; }
td details { min-width:140px; }
.tabs { display:flex; flex-wrap:wrap; align-items:center; gap:5px; padding:5px; background:#eaf0fc; width:fit-content; max-width:100%; border-radius:16px; }
.tabs a { padding:10px 18px; color:#6b7da2; border-radius:12px; font-size:13px; font-weight:600; transition:background var(--transition),color var(--transition); }
.tabs a:hover { text-decoration:none; background:#ffffff80; }
.tabs a.selected { background:var(--white); color:var(--accent); box-shadow:0 3px 9px #234b8c0a; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:9px; font-size:11px; font-weight:550; white-space:nowrap; background:var(--soft); color:#5e78ab; }
.badge::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.badge.green { background:var(--success-bg); color:var(--success); }
.badge.amber { background:var(--warning-bg); color:var(--warning); }
.badge.pink { background:#f0edff; color:#7965a4; }
.badge.blue { background:#eaf0ff; color:#4165c0; }
.alert,.notice,.scanner-notice { border-radius:var(--radius-sm); padding:14px 18px; font-size:13px; line-height:1.6; border:1px solid transparent; }
.notice { background:var(--soft); color:#506a9c; border-color:#e0e9fd; }
.alert { background:var(--danger-bg); color:var(--danger); border-color:#f3dce3; }
.scanner-notice { background:var(--success-bg); color:var(--success); margin-bottom:16px; }
.danger-area { border-top:1px solid var(--line); margin-top:28px; padding-top:24px; }
/* Dashboard: capacity is a member of the KPI grid, not a separate panel. */
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:stretch; grid-auto-rows:1fr; }
.metric { position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:24px; min-height:190px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; transition:transform var(--transition),box-shadow var(--transition); }
.metric:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.metric-top { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; font-weight:550; color:#687995; }
.metric-top h2 { margin:0; font:inherit; }
.metric-icon { width:34px; height:34px; border-radius:12px; background:var(--soft); color:#537be5; display:grid; place-items:center; flex:none; }
.metric-icon .icon { width:18px; height:18px; }
.metric > strong { display:block; font-size:34px; letter-spacing:-1px; line-height:1.15; font-weight:650; font-variant-numeric:tabular-nums; margin-top:auto; overflow-wrap:anywhere; }
.metric > small { color:var(--muted); font-size:11px; }
.metric-capacity { background:linear-gradient(135deg,#eff4ff,#e3ecff); border-color:#dce6fc; }
.metric-capacity > strong { color:var(--accent); }
.metric-capacity > progress { position:absolute; bottom:10px; left:24px; width:calc(100% - 48px); height:4px; }
.capacity-value span { font-size:16px; }
.metric-warning { font-size:11px; color:var(--warning); line-height:1.4; }
progress { display:block; appearance:none; width:100%; height:6px; border:0; border-radius:99px; overflow:hidden; background:#dfe7f9; accent-color:var(--accent); }
progress::-webkit-progress-bar { background:#dfe7f9; border-radius:99px; }
progress::-webkit-progress-value { background:var(--accent); border-radius:99px; }
progress::-moz-progress-bar { background:var(--accent); border-radius:99px; }
progress.warning { accent-color:var(--warning); }
progress.critical { accent-color:var(--danger); }
.capacity-panel { background:var(--soft); padding:24px; border-radius:18px; }
.capacity-panel > *+* { margin-top:12px; }
.capacity-panel .form-row p { font-size:12px; color:var(--muted); }
.capacity-panel strong { display:block; font-size:20px; color:var(--ink); }
.task-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.task-card { display:flex; flex-direction:column; gap:12px; min-width:0; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); box-shadow:var(--shadow); color:var(--ink); transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition); }
.task-card:hover { text-decoration:none; transform:translateY(-3px); border-color:#c1d2fa; box-shadow:var(--shadow-hover); }
.task-card-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.task-card p { margin:0; font-size:12px; color:#637596; overflow-wrap:anywhere; }
.task-card small { color:var(--muted); margin-top:auto; }
.task-card > .block { color:var(--accent); font-size:12px; font-weight:600; }
.management-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
.management-grid h2 { margin-bottom:20px; }
.summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
#documents article { padding:20px 0; border-bottom:1px solid var(--line); }
#documents article:first-of-type { padding-top:0; }
/* Physical product images keep the same 3:4 shape at every size. */
.product-photo { display:block; width:60px; height:80px; aspect-ratio:3/4; object-fit:cover; border-radius:12px; background:var(--soft); flex:none; }
.empty-photo { display:grid; place-items:center; color:#a5b8e1; border:1px solid var(--line); }
.product-title { display:flex; align-items:center; gap:24px; min-width:0; }
.product-title .product-photo,.form-panel > .product-photo { width:90px; height:120px; border-radius:18px; }
.product-title h1 { margin-bottom:10px; }
.product-title p { font-size:12px; }
.product-dimensions { font-size:11px; color:var(--muted); }
.total { background:var(--white); border:1px solid var(--line); padding:20px 24px; border-radius:var(--radius); min-width:180px; box-shadow:var(--shadow); }
.total small { display:block; color:var(--muted); }
.total strong { font-size:32px; font-variant-numeric:tabular-nums; }
.total span { font-size:14px; color:var(--muted); }
/* Scanner markup, field bindings and workflow are unchanged. */
#task-work > *+* { margin-top:20px; }
.scan-panel { border:1px solid #d6e2ff; border-radius:var(--radius); padding:28px; background:linear-gradient(120deg,#f5f8ff,#eaf1ff); }
.scan-panel h2,#task-work > form > h2 { font-size:clamp(26px,3vw,40px); line-height:1.2; color:#284caa; font-weight:650; letter-spacing:-.8px; }
.scanner-product { display:flex; align-items:center; gap:24px; padding:20px 0; }
.scanner-product .product-photo { width:90px; height:120px; border-radius:18px; }
.scanner-product h3 { font-size:18px; }
.scanner-product p { font-size:13px; }
.scan-facts { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0; }
.scan-facts > * { padding:10px 16px; background:#ffffffb8; border-radius:12px; font-size:13px; }
.scan-form { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.scan-form > input:not([type=hidden]) { flex:1 1 220px; min-height:54px; background:var(--white); font-size:18px; font-variant-numeric:tabular-nums; }
.scan-form > button { min-height:54px; }
.scan-form.stack { align-items:stretch; }
.scan-form.stack > input:not([type=hidden]) { flex:0 0 auto; }
.recommendation { color:#5771a7; padding:12px 0; font-size:13px; }
.task-meta { display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); }
.finish-list { display:flex; flex-direction:column; gap:12px; }
.finish-details { background:var(--white); border:1px solid var(--line); padding:20px 24px; border-radius:18px; }
.finish-details form { margin-top:20px; }
/* Native expandable panels and dialogs retain keyboard interaction. */
details { min-width:0; }
summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; font-weight:550; color:#526a97; }
summary::-webkit-details-marker { display:none; }
summary::after { content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform var(--transition); flex:none; margin:0 3px 4px 0; }
details[open] > summary::after { transform:rotate(225deg); margin-bottom:0; }
details[open] > :not(summary) { animation:reveal 180ms ease-out; }
details > form { margin-top:20px; }
dialog { width:min(560px,calc(100% - 32px)); max-height:calc(100dvh - 48px); overflow:auto; padding:32px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--white); color:var(--ink); box-shadow:0 30px 100px #17274b33; }
dialog[open] { animation:reveal 180ms ease-out; }
dialog::backdrop { background:#162d5655; backdrop-filter:blur(4px); }
dialog h2 { margin-bottom:24px; }
.welcome-art { display:grid; place-items:center; width:80px; height:80px; margin:0 auto 24px; border-radius:24px; background:var(--soft); color:var(--accent); }
.welcome-art .icon { width:36px; height:36px; }
.welcome-art .orbit,.welcome-art .art-spark { display:none; }
.error-page,.empty-state { max-width:680px; margin:80px auto; padding:40px; text-align:center; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); }
.error-logo { margin:0 auto 24px; }
/* Sign-in uses the same controls with one restrained blue illustration. */
.standalone { padding:32px; min-height:100vh; display:grid; place-items:center; }
.standalone > .page { width:100%; }
.login-layout { display:grid; grid-template-columns:1fr 1fr; max-width:1120px; min-height:680px; margin:auto; background:var(--white); border:1px solid var(--line); border-radius:36px; padding:12px; box-shadow:var(--shadow); }
.login-visual { background:linear-gradient(145deg,#3e69ee,#264ecd); color:var(--white); border-radius:26px; padding:36px; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.login-visual-brand .organization-logo { width:80px; height:55px; }
.login-visual-copy { margin-top:48px; position:relative; z-index:1; }
.login-visual .eyebrow { color:#ccdbff; }
.login-visual h2 { font-size:44px; letter-spacing:-1.5px; line-height:1.1; }
.login-visual-copy > p:last-child { color:#d5e1ff; font-size:13px; line-height:1.8; margin-top:20px; }
.login-sculpture { height:180px; margin-top:20px; position:relative; }
.sculpture-box { position:absolute; width:110px; height:140px; left:38%; top:14px; border-radius:28px; background:linear-gradient(135deg,#a7c0ff,#5c86f8); transform:rotate(-14deg); box-shadow:16px 20px 50px #18398940,inset 1px 1px 0 #d8e5ff80; display:grid; place-items:center; }
.sculpture-ring { position:absolute; width:210px; height:130px; border:1px solid #aec8ff60; border-radius:50%; top:20px; left:15%; transform:rotate(-24deg); }
.sculpture-chip { position:absolute; left:23%; top:93px; padding:16px; border-radius:20px; background:#8caffe99; backdrop-filter:blur(8px); }
.login-visual-footer { font-size:11px; color:#c9d8ff; margin-top:auto; }
.login-card { padding:50px 44px; display:flex; flex-direction:column; justify-content:center; }
.login-card .brand { padding:0; margin-bottom:32px; }
.login-card h1 { font-size:36px; }
.login-card > .muted { margin-bottom:28px; }
.login-card form > .primary { align-self:stretch; }
.login-card .alert { margin-bottom:20px; }
.footnote { text-align:center; color:var(--muted); font-size:11px; margin-top:24px; }
@keyframes reveal { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
.page > .page-heading,.page > .metric-grid,.page > .panel { animation:reveal 240ms ease-out; }
/* Responsive layout, without hiding functions or changing their order. */
@media(min-width:1800px) { .workspace { padding-right:64px; padding-left:64px; } }
@media(max-width:1250px) {
  .sidebar { width:218px; left:16px; inset-block:16px; }
  .workspace { margin-left:250px; padding-inline:24px; }
  .metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .task-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric { padding:20px; }
}
@media(max-width:960px) {
  .sidebar { position:relative; inset:auto; width:auto; margin:16px; padding:16px; display:grid; grid-template-columns:1fr auto; gap:16px; border-radius:24px; }
  .sidebar .brand { padding:0; }
  .sidebar .brand-note { display:none; }
  .sidebar .organization-logo { width:60px; height:40px; }
  .nav-caption { display:none; }
  .sidebar nav { grid-column:1/-1; grid-row:2; flex-direction:row; overflow-x:auto; overflow-y:hidden; padding:4px 0; gap:6px; }
  .nav-link { white-space:nowrap; flex:none; padding:11px 14px; min-height:42px; font-size:12px; }
  .sidebar-bottom { grid-column:2; grid-row:1; display:flex; align-items:center; gap:14px; border:0; padding:0; margin:0; }
  .profile-text { max-width:130px; }
  .profile-text small,.logout span { display:none; }
  .logout { padding:8px; margin:0; min-height:36px; }
  .workspace { margin:0; padding:0 24px 36px; }
  .topbar { min-height:64px; }
  .management-grid { grid-template-columns:1fr; }
  .login-card { padding:36px 28px; }
  .login-visual { padding:28px; }
}
@media(max-width:600px) {
  :root { --radius:20px; --radius-lg:26px; }
  .sidebar { margin:10px; padding:14px; gap:12px; }
  .profile-text { max-width:95px; font-size:11px; }
  .workspace { padding:0 16px 32px; }
  .topbar { min-height:62px; }
  .connection { display:none; }
  .breadcrumbs { font-size:10px; gap:8px; }
  .page-heading { flex-direction:column; align-items:stretch; gap:16px; }
  .page-heading > .button { align-self:flex-start; }
  .page > *+* { margin-top:20px; }
  h1 { letter-spacing:-.7px; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .metric { padding:16px; min-height:168px; gap:10px; }
  .metric-top { font-size:11px; gap:6px; align-items:flex-start; }
  .metric-icon { width:27px; height:27px; border-radius:9px; }
  .metric-icon .icon { width:15px; height:15px; }
  .metric > strong,.metric-capacity > strong { font-size:26px; }
  .metric > small { font-size:10px; }
  .task-card-grid,.summary-grid { grid-template-columns:1fr; }
  .form-panel,.scan-panel,.task-card { padding:20px; }
  .toolbar { padding:16px; }
  .form-row { gap:16px; }
  .form-row > label { flex-basis:100%; }
  .panel-heading { padding:20px; }
  td,th { padding:14px 16px; }
  .table-wrap table { min-width:540px; }
  .panel > table { display:block; overflow-x:auto; }
  input,select,textarea { font-size:16px; }
  .product-title { gap:16px; }
  .product-title .product-photo { width:72px; height:96px; }
  .scanner-product { gap:16px; }
  .scanner-product .product-photo { width:66px; height:88px; border-radius:12px; }
  .scanner-product h3 { font-size:15px; }
  .scanner-product p { font-size:12px; }
  .scan-form > button { width:100%; }
  .tabs { width:100%; }
  .tabs a { flex:1; text-align:center; padding:10px 8px; font-size:12px; }
  dialog { padding:24px; }
  .standalone { padding:16px; }
  .login-layout { display:block; padding:0; min-height:0; margin:4vh auto; }
  .login-visual { display:none; }
  .login-card { padding:32px 24px; }
  .error-page,.empty-state { padding:28px; margin:30px auto; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

.line-action { width:46px; min-width:46px; padding:8px; font-size:24px; }
.wb-label { display:block; width:290px; height:200px; object-fit:contain; background:white; margin:24px 0; }
@media print {
  @page { size:58mm 40mm; margin:0; }
  .sidebar,.topbar,.skip-link,.print-controls,.scanner-notice { display:none!important; }
  body,.workspace,.standalone,.page { padding:0!important; margin:0!important; background:white!important; min-height:0!important; }
  .wb-label { width:58mm; height:40mm; margin:0!important; }
}

/* Printed-address controls deliberately use the same monochrome palette as the label. */
.cell-label-card { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px; margin:20px 0; background:#fff; color:#171717; border:1px solid #d9d9d9; border-radius:18px; }
.cell-label-format { font-size:11px; letter-spacing:.12em; color:#555; }
.cell-label-info h2 { margin:10px 0; font-size:28px; color:#171717; }
.cell-label-info p { margin:8px 0; }
.cell-label-info small { color:#555; }
.cell-label-card .cell-label-button { background:#171717; color:#fff; border:1px solid #171717; white-space:nowrap; box-shadow:none; }
.cell-label-card .cell-label-button:hover { background:#333; border-color:#333; }
.cell-label-button:focus-visible { outline:3px solid #777; outline-offset:3px; }
@media(max-width:600px) { .cell-label-card { flex-direction:column; align-items:stretch; padding:20px; } .cell-label-button { width:100%; justify-content:center; } }

/* Shared alignment and touch targets for operational screens. */
.page-heading > div, .panel, .form-panel, .stack, .task-meta > *, .scanner-product > div { min-width:0; }
.page-heading h1, .task-card, .alert, .muted, .task-meta { overflow-wrap:anywhere; }
.seller-heading { align-items:center; }
.seller-heading > .button { flex-shrink:0; margin:0; }
.scan-form [data-scan] { min-height:56px; font-size:20px; width:100%; }
.scan-form { gap:12px; }
.scan-form label { min-width:0; width:100%; }
[data-wb-status]:empty { display:none; }

.pdf-print-frame { width:100%; height:65vh; border:1px solid var(--line); border-radius:12px; background:#fff; }
.wb-label { max-width:100%; height:auto; }
@media(max-width:960px) {
  button, .button, summary, .nav-link { min-height:44px; }
  .scan-panel { padding:20px; }
  .scan-form { display:flex; flex-direction:column; }
  .scan-form button { width:100%; }
  input, select, textarea { font-size:16px; }
  .toolbar { flex-wrap:wrap; }
  .toolbar > *, .action-row > * { min-width:0; max-width:100%; }
}
@media(max-width:600px) {
  .sidebar nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; }
  .sidebar .nav-link { white-space:normal; justify-content:center; text-align:center; flex-direction:column; padding:8px 4px; }
  .tabs { flex-wrap:wrap; overflow:visible; }
  .tabs a { white-space:normal; overflow-wrap:anywhere; }
  .seller-heading > .button { align-self:stretch; justify-content:center; }
  .action-row { flex-wrap:wrap; }
  .action-row > button, .action-row > .button { flex:1 1 160px; }
}
@media(max-width:600px) {
  .table-wrap:has(.mobile-cards) { overflow:visible; }
  table.mobile-cards, .mobile-cards tbody { display:block; width:100%; min-width:0; }
  .mobile-cards thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .mobile-cards tr { display:block; padding:12px; border-bottom:1px solid var(--line); }
  .mobile-cards td { display:grid; grid-template-columns:minmax(75px, 32%) minmax(0,1fr); gap:10px; width:auto; padding:8px 0; white-space:normal; overflow-wrap:anywhere; text-align:left; }
  .mobile-cards td::before { content:attr(data-label); color:var(--muted); font-size:12px; font-weight:500; }
  .mobile-cards td > small, .mobile-cards td > progress { grid-column:2; }
  .mobile-cards td[colspan] { display:block; }
  .mobile-cards td[data-label=""]::before { display:none; }
  .mobile-cards td[data-label=""] { display:block; }
}

/* Dashboard actions retain the metric icon geometry. */
.metric-top form { margin:0; }
button.metric-refresh { border:0; padding:0; min-height:34px; cursor:pointer; }
button.metric-refresh:hover { background:var(--line); }
.metric [data-wb-status]:empty { display:none; }
.wb-updated { text-align:right; }
@media (max-width:600px) { button.metric-refresh { position:relative; min-height:27px; } button.metric-refresh::after { content:""; position:absolute; inset:-9px; } }
[data-wb-status]:empty { display:none; }

/* Shared dashboard rows, stock quantities and document actions. */
.metric-active { background:#e5f2ff; border-color:#cce3fb; }
.dashboard-section-heading { align-items:center; gap:20px; }
.dashboard-section-heading h2,.dashboard-section-links { font-size:18px; font-weight:600; line-height:1.4; }
.dashboard-section-heading h2 { margin:0; }
.dashboard-section-links { margin-left:auto; display:flex; align-items:center; justify-content:flex-end; gap:28px; flex-wrap:wrap; }
.dashboard-task-list { display:grid; gap:12px; }
.dashboard-task { display:grid; grid-template-columns:minmax(180px,1fr) minmax(0,2fr) auto 24px; align-items:center; gap:24px; padding:22px 26px; background:var(--white); border:1px solid var(--line); border-radius:24px; color:var(--ink); box-shadow:var(--shadow); }
.dashboard-task:hover { background:var(--soft); text-decoration:none; border-color:#b9cef5; }
.dashboard-task-title,.dashboard-task-products { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:8px; overflow-wrap:anywhere; }
.dashboard-task small { color:var(--muted); font-size:12px; }
.dashboard-task-totals { display:flex; gap:24px; font-size:12px; color:var(--muted); }
.dashboard-task-totals strong { display:block; font-size:24px; color:var(--ink); font-variant-numeric:tabular-nums; }
.dashboard-task-arrow { color:var(--accent); font-size:24px; }
.stock-quantity { font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); }
.stock-quantity small { font-size:12px; font-weight:400; }
.document-card { padding:20px 0; border-bottom:1px solid var(--line); }
.document-row { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.document-row > div { min-width:0; overflow-wrap:anywhere; }
.document-row h3 { margin:0 0 8px; }
.document-row p { color:var(--muted); margin:0; }
.document-download { border-radius:18px; flex:none; }
@media (max-width:900px) {
  .dashboard-section-heading { flex-wrap:wrap; }
  .dashboard-section-links { font-size:16px; gap:16px; }
  .dashboard-task { grid-template-columns:minmax(0,1fr) auto; gap:16px; padding:20px; }
  .dashboard-task-products { grid-row:2; grid-column:1 / -1; }
  .dashboard-task-totals { grid-row:1; grid-column:2; gap:14px; }
  .dashboard-task-arrow { display:none; }
}
@media (max-width:480px) {
  .dashboard-section-links { margin-left:0; justify-content:flex-start; }
  .dashboard-section-heading h2,.dashboard-section-links { font-size:16px; }
  .document-row { gap:12px; align-items:flex-start; }
  .document-download { padding:10px 14px; }
}