/* Shared visual language for the factory workspace. Loaded after styles.css. */
:root {
  --bg: #f3f6f8;
  --paper: #fff;
  --ink: #253b40;
  --muted: #6c7d84;
  --line: #e3eaed;
  --green: #1c4c46;
  --accent: #24685d;
  --accent-hover: #195449;
  --soft: #edf5f2;
  --sidebar: 248px;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  line-height: 1.65;
}
body { background: var(--bg); }
button, input, select, textarea { font-family: inherit; }
button, a { touch-action: manipulation; }
h1 { color: #203b40; font-size: 30px; line-height: 1.35; letter-spacing: -.5px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
small { font-size: 12px; }
.muted { color: var(--muted); }
.eyebrow { color: #73878b; font-size: 10px; letter-spacing: 1.8px; }
.mono, .text-right { font-variant-numeric: tabular-nums; }
button:focus-visible, a:focus-visible {
  outline: 3px solid #88b9ad;
  outline-offset: 3px;
}
input:focus, select:focus, textarea:focus {
  border-color: #579283;
  box-shadow: 0 0 0 3px #24685d12;
}
input, select, textarea {
  min-height: 42px;
  padding: 10px 12px;
  border-color: #d9e3e6;
  border-radius: 8px;
  color: #2b4248;
  background: #fff;
}
input::placeholder, textarea::placeholder { color: #8b9aa0; }

/* Navigation stays visible while its own menu scrolls on shorter screens. */
.sidebar {
  height: 100dvh;
  padding: 25px 17px 13px;
  background: #173d40;
  border-right: 1px solid #18393c;
  color: #c0d2d0;
  overflow: hidden;
}
.sidebar > .brand, .sidebar > .factory-switch, .sidebar > .nav-caption,
.sidebar > .sidebar-bottom { flex-shrink: 0; }
.brand { gap: 12px; padding: 0 12px 25px; }
.brand > img { flex-shrink: 0; }
.brand > span { min-width: 0; }
.brand strong { font-size: 25px; }
.brand small { font-size: 11px; letter-spacing: 1px; color: #a7beba; }
.brand-english { color: #a6c0bb; }
.brand img { box-shadow: none; }
.factory-switch {
  margin-bottom: 23px;
  padding: 13px 10px;
  border-color: #ffffff15;
  border-radius: 10px;
  background: #ffffff04;
}
.factory-switch strong { font-size: 13px; }
.factory-switch small { color: #b0c6c0; font-size: 10px; }
.factory-avatar { width: 34px; height: 34px; border-radius: 8px; }
.nav-caption { margin: 0 14px 10px; font-size: 11px; color: #90b0a9; }
.sidebar > nav { flex: 1; min-height: 0; overflow-y: auto; padding: 0 2px 8px 0; }
.nav-item {
  min-height: 45px;
  padding: 11px 14px;
  gap: 12px;
  border-radius: 9px;
  color: #c3d5d1;
  font-size: 14px;
  margin: 4px 0;
}
.nav-item:hover { background: #ffffff0c; }
.nav-item.active {
  color: #f5fffb;
  background: #2c5d56;
  box-shadow: inset 3px 0 0 #9ac9b2;
  font-weight: 600;
}
.nav-item.active > svg { color: #c0e2d1; }
.nav-item small {
  font-size: 11px;
  background: #e4f1e6;
  color: #335d4f;
  border-radius: 5px;
  padding: 0 7px;
}
.sidebar-bottom { margin-top: 9px; padding-top: 0; }
.workspace-info {
  padding: 10px 12px 13px;
  border-color: #ffffff13;
  font-size: 11px;
  color: #a6c0b7;
}
.workspace-info small { font-size: 10px; }
.sidebar-bottom .nav-item { padding: 9px 14px; min-height: 38px; font-size: 12px; }
.sidebar-account {
  gap: 11px;
  padding: 16px 10px 7px;
  margin-top: 8px;
}
.sidebar-account strong { color: #ecf5f0; font-size: 13px; }
.sidebar-account small { color: #b1c7c0; font-size: 11px; }
.account-trigger { border-radius: 9px; }
.account-trigger strong { max-width: 160px; }
.avatar { flex-shrink: 0; width: 36px; height: 36px; font-size: 14px; }

/* Shell and hierarchy. */
.main-shell, .main-content { min-width: 0; }
.topbar {
  height: 72px;
  min-height: 72px;
  padding: 0 32px;
  background: #ffffffed;
  border-bottom-color: #e1e9ec;
  position: sticky;
  top: 0;
  z-index: 15;
  backdrop-filter: blur(12px);
}
.breadcrumb { gap: 12px; color: #71838a; font-size: 13px; }
.breadcrumb strong { color: #314b50; font-weight: 600; }
.topbar-actions { gap: 13px; }
.global-search {
  border: 1px solid #e0e8eb;
  padding: 8px 11px;
  min-height: 38px;
  border-radius: 8px;
  color: #73868d;
  font-size: 12px;
  background: #f8fafb;
}
.global-search kbd { font-family: inherit; font-size: 10px; margin-left: 15px; background: white; }
.icon-button { width: 36px; height: 36px; border-radius: 8px; color: #607b7e; }
.icon-button:hover { background: #edf3f2; }
.main-content { padding: 30px 32px 28px; max-width: 1680px; }
.page-heading { align-items: flex-start; gap: 20px; margin-bottom: 24px; }
.page-heading > div:first-child { min-width: 0; }
.page-heading .muted { color: #71828a; font-size: 13px; margin-top: 9px; line-height: 1.8; }
.page-heading .row-actions { justify-content: flex-end; gap: 9px; }
.app-footer { padding: 18px 32px 24px; font-size: 11px; color: #75868b; }
.app-footer .text-link { font-size: 12px; }
.demo-note {
  background: #edf5f2;
  border-color: #dcebe4;
  color: #5f7b70;
  padding: 12px 15px;
  border-radius: 9px;
  font-size: 12px;
  margin-bottom: 24px;
}
.demo-note strong { color: #365f51; }
.demo-note .text-link { font-size: 12px; color: #315f51; }

/* Clear, consistent actions and form controls. */
.btn {
  min-height: 40px;
  padding: 9px 15px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.5;
}
.btn-primary { background: var(--accent); border-color: var(--accent); box-shadow: 0 2px 4px #164e3710; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary { background: #fff; border-color: #d7e1e4; color: #425f64; }
.btn-secondary:hover:not(:disabled) { background: #f3f7f7; border-color: #aec7c2; }
.btn-ghost { color: #346d61; }
.btn-ghost:hover:not(:disabled) { background: #edf5f1; }
.btn-danger { color: #a2463b; background: #fff6f3; border-color: #efd6cf; }
.btn-dark { background: #1e5048; border-color: #1e5048; }
.btn-small { min-height: 36px; font-size: 12px; padding: 7px 12px; }
.text-link { font-size: 13px; color: #3d7465; min-height: 30px; }
.text-link:hover { color: #1e5447; }
.row-actions { gap: 8px; }
.field { color: #4e6870; font-size: 13px; gap: 8px; margin-bottom: 20px; }
.field > span, .field small { font-size: 12px; }
.field input, .field select, .field textarea { font-size: 14px; }
.form-grid { gap: 0 20px; }
.form-note { color: #71838b; font-size: 12px; line-height: 1.8; }
.form-error { font-size: 13px; border-radius: 8px; }
.notice {
  border-color: #e1e8de;
  background: #f6f8f2;
  color: #60744f;
  border-radius: 9px;
  padding: 13px 16px;
  font-size: 12px;
  line-height: 1.85;
  margin-bottom: 20px;
}

/* Cards, metrics and tables use the same surfaces. */
.card, .overview-metric, .summary-strip {
  border-color: #e1e9ec;
  border-radius: 12px;
  box-shadow: 0 3px 12px #284c5a04;
}
.card, .overview-main-grid > *, .overview-bottom-grid > *, .product-detail-bottom > *, .settings-grid > * { min-width: 0; }
.section-head { padding: 22px 24px 18px; }
.section-head h2 { font-size: 18px; }
.section-head .eyebrow { font-size: 10px; }
.overview-metrics { gap: 18px; margin-bottom: 24px; }
.overview-metric { padding: 21px 23px; gap: 8px; }
.overview-metric:hover { border-color: #b4cfc4; transform: translateY(-1px); }
.metric-top { color: #6d8288; font-size: 13px; }
.metric-value { font-size: 34px; line-height: 1.35; font-weight: 650; color: #284e4a; }
.metric-money { font-size: 31px; }
.metric-value small { font-size: 12px; color: #778d8c; }
.metric-bottom { font-size: 12px; color: #75868d; border-top-color: #edf1f3; padding-top: 12px; }
.metric-icon { width: 36px; height: 36px; border-radius: 10px; }
.summary-strip { padding: 23px 0; }
.summary-strip > div { padding: 0 24px; gap: 8px; }
.summary-strip > div > .muted { color: #6d8189; font-size: 13px; }
.summary-strip strong { font-size: 29px; font-weight: 650; color: #294b48; letter-spacing: -.4px; }
.summary-strip strong small, .summary-strip small.muted { font-size: 12px; color: #7b8c92; }
.table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.data-table { font-size: 13px; }
.data-table th {
  padding: 14px 20px;
  font-size: 12px;
  color: #71828b;
  font-weight: 550;
  background: #f7f9fa;
  border-color: #e6edef;
}
.data-table td { padding: 17px 20px; font-size: 13px; color: #3c555c; border-color: #eaf0f2; }
.data-table .muted { font-size: 12px; color: #7b8b92; }
.data-table .mono { font-size: 12px; }
.data-table strong { color: #29484d; font-weight: 600; }
.data-table tbody tr:hover { background: #f8fbfa; }
.data-table .btn { font-size: 12px; min-height: 34px; padding: 7px 10px; }
.data-table td:last-child:has(.row-actions) { min-width: 170px; max-width: 310px; }
.compact-table th { padding: 13px 24px; font-size: 12px; }
.compact-table td { padding: 16px 24px; font-size: 13px; }
.compact-table .mono { font-size: 12px; }
.stock-number { font-variant-numeric: tabular-nums; font-size: 16px; }
.badge { font-size: 11px; padding: 4px 8px; border-radius: 6px; font-weight: 550; }
.badge.green { background: #eaf4ed; color: #447957; }
.badge.amber { background: #fbf1df; color: #946d2d; }
.badge.blue { background: #eaf1f7; color: #52758b; }
.badge.neutral { background: #eef2f3; color: #6b8085; }
.number-chip { font-size: 11px; border-radius: 5px; }
.mini-progress > span { font-size: 12px; color: #728989; }
.progress-track { height: 5px; background: #e9f0ed; }
.progress-fill { background: #6b9c80; }
.toolbar { gap: 16px; padding: 20px 22px; }
.toolbar > .muted { font-size: 12px; }
.toolbar-filters { gap: 11px; }
.search-input, .select-input { font-size: 13px; min-height: 40px; border-radius: 8px; background: #fff; }
.search-input { min-width: 230px; }
.toolbar [role=tab] { font-size: 13px; min-height: 38px; border-radius: 7px; }
.toolbar [role=tab].btn-primary { background: #e7f2ec; color: #2c6750; border-color: #d6e7dd; }
.empty-state { padding: 55px 24px; font-size: 14px; color: #70888a; }
.empty-state strong { font-size: 17px; color: #3c625b; }
.empty-state p { font-size: 13px; }

/* Overview details. */
.production-distribution { padding: 1px 24px 15px; }
.production-distribution .muted, .production-distribution strong small { font-size: 12px; color: #7b8d91; }
.production-distribution strong { color: #2d5551; font-size: 30px; }
.stage-bar { margin: 0 24px; height: 29px; border-radius: 6px; }
.stage-bar > div { font-size: 11px; }
.stage-legend { padding: 14px 24px 22px; gap: 12px; font-size: 12px; color: #758990; }
.stage-legend b { font-size: 12px; color: #4c7068; }
.alerts-list { padding: 0 24px; }
.alert-item { padding: 18px 0; border-color: #eaf0f1; gap: 12px; }
.alert-item strong { font-size: 13px; color: #425f62; font-weight: 550; }
.alert-item small { font-size: 12px; color: #7c8e94; }
.alert-icon { min-width: 32px; height: 32px; border-radius: 8px; }
.alert-footer { padding: 14px 24px; font-size: 11px; color: #80938f; background: #f8faf9; border-color: #eaf0ec; }
.quick-actions { gap: 6px; padding: 4px 16px 22px; }
.quick-actions > button { padding: 12px 5px; border-radius: 9px; }
.quick-actions > button:hover { background: #f2f7f4; }
.quick-actions strong { font-size: 13px; }
.quick-actions small { font-size: 11px; color: #7e9390; }
.workflow-note { padding: 14px 16px; gap: 10px; color: #728881; font-size: 11px; background: #f8faf9; }
.tiny-label { font-size: 10px; color: #8c9b94; border-radius: 4px; }
.activity-card .section-head > .muted { font-size: 12px; }
.activity-list { padding: 0 24px 18px; }
.activity-item { padding: 12px 0; }
.activity-item p { color: #536e68; font-size: 13px; line-height: 1.75; }
.activity-item small { font-size: 11px; color: #8a9b9a; }

/* Product and material workspaces. Wide BOM inputs scroll in their table. */
.product-name-button { gap: 13px; }
.product-thumb { width: 48px; height: 53px; border-radius: 9px; }
.product-thumb-large { width: 94px; height: 103px; border-radius: 11px; }
.product-breadcrumb, .product-breadcrumb .btn { font-size: 12px; }
.product-title-line strong { font-size: 18px; }
.product-overview-main > p { font-size: 13px; }
.product-overview-stat > .muted, .product-overview-stat small { font-size: 12px; }
.product-overview-stat strong { font-size: 30px; color: #356b55; }
.bom-workspace-heading { padding: 24px; }
.bom-workspace-heading p { font-size: 12px; color: #74858a; max-width: 580px; }
.bom-heading-actions, .bom-footer-actions { gap: 9px; }
.bom-heading-actions .btn, .bom-footer-actions .btn { font-size: 12px; }
.bom-statusbar { font-size: 12px; padding: 12px 24px; color: #6c897a; background: #f2f7f2; border-color: #e0ebdf; }
.bom-table th, .bom-table td { padding: 14px 12px; }
.bom-table td:nth-child(2) > small { font-size: 11px; color: #80918c; }
.bom-table input, .bom-table select { font-size: 12px; height: 40px; min-height: 40px; padding: 8px; }
.bom-material-picker select { width: 250px; }
.bom-material-picker .btn { padding: 7px 8px; font-size: 12px; }
.input-suffix > span { font-size: 12px; }
.bom-table select[name=size] { width: 85px; }
.bom-footer { padding: 24px; }
.bom-footer > div:first-child > .muted { font-size: 13px; }
.bom-footer strong { color: #3a7056; font-weight: 650; }
.bom-footer small { font-size: 12px; color: #7d8d8b; }
.product-detail-bottom .card > h2 { font-size: 17px; }
.product-detail-bottom .card > p, .product-detail-bottom .card > p.muted,
.bom-guidance p strong, .bom-guidance p .muted { font-size: 12px; }
.material-library-note { color: #7b8c8f; font-size: 12px; }
.settings-grid { gap: 24px; }
.settings-card { padding: 26px; }
.settings-card > p { font-size: 13px; }
.setting-item { font-size: 13px; padding: 14px 0; }
.feature-list li { font-size: 13px; color: #5e7b6f; }
.backup-list { font-size: 12px; }

/* Dialog chrome stays in place; only its content scrolls. */
.modal-backdrop { padding: 24px; background: #15333780; backdrop-filter: blur(4px); }
.modal {
  display: flex;
  flex-direction: column;
  width: 620px;
  max-height: min(90dvh, calc(100dvh - 48px));
  border: 1px solid #e1e8e6;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 80px #102d3726;
}
.modal-wide { width: 860px; }
.modal > form { display: flex; flex-direction: column; min-height: 0; max-height: inherit; width: 100%; }
.modal-header { padding: 21px 26px; border-color: #e4ebed; flex-shrink: 0; position: static; }
.modal-header h2 { color: #29474b; font-size: 19px; }
.modal-header .icon-button { color: #78918d; }
.modal-body { padding: 24px 26px; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
.modal-body > p.muted { font-size: 13px; }
.modal-footer { padding: 17px 26px; background: #fafcfc; border-color: #e4ebed; flex-shrink: 0; position: static; }
.modal form > .modal-body > p:not([class]) { font-size: 14px; }
.search-result { padding: 17px 6px; border-color: #e8eeee; }
.search-result strong { font-size: 14px; }
.search-result small { font-size: 12px; color: #7a8c8e; }
.create-options > button { border-radius: 9px; padding: 18px 14px; background: #f8fbf9; border-color: #e0eae5; }
.create-options strong { font-size: 14px; }
.create-options small { font-size: 12px; color: #7c9088; }
.help-content p, .help-content ol { font-size: 13px; }
#toast { border-radius: 10px; font-size: 13px; padding: 13px 20px; box-shadow: 0 10px 35px #18392b22; }

/* Receipt tools stay legible within the wider dialog. */
.receipt-workspace { font-size: 14px; }
.receipt-transaction { align-items: center; margin-bottom: 20px; }
.receipt-transaction > .text-link { font-size: 12px; }
.receipt-transaction > div { gap: 5px; }
.receipt-payments { border-color: #e2eaec; border-radius: 9px; margin-bottom: 24px; }
.receipt-payments .data-table td, .receipt-payments .data-table th { font-size: 13px; padding: 13px 15px; }
.receipt-selected td { background: #eef6f1; }
.receipt-section-heading h3 { font-size: 17px; }
.receipt-section-heading h4 { font-size: 15px; }
.receipt-section-heading p, .receipt-section-heading .text-link { font-size: 12px; }
.receipt-file { border-radius: 9px; padding: 17px; border-color: #e1eaec; }
.receipt-file-heading strong { font-size: 14px; color: #345359; }
.receipt-file-heading small { font-size: 12px; color: #7e8f93; }
.receipt-format { flex-basis: 38px; height: 42px; border-radius: 7px; background: #edf5f1; border-color: #dfebe4; color: #557e6a; font-size: 11px; }
.receipt-file .btn { font-size: 12px; padding: 7px 11px; min-height: 34px; }
.receipt-file-note { color: #5f7b70; font-size: 13px; margin-top: 12px; }
.receipt-history-note { color: #7a8d8d; font-size: 12px; }
.receipt-no-files { border-color: #d9e6e2; border-radius: 9px; background: #f8fbfa; color: #7c9390; font-size: 13px; }
.receipt-inline-form { background: #f6faf8; border-color: #dce9e1; padding: 20px; border-radius: 10px; }
.receipt-inline-form .field, .receipt-inline-form > .muted { font-size: 13px; }
.receipt-inline-form input[type=file] { font-size: 13px; min-height: 46px; border-radius: 8px; }
.receipt-inline-form input[type=file]::file-selector-button { font-size: 12px; padding: 8px 11px; border-radius: 6px; }
.receipt-inline-form .btn { font-size: 13px; }
.receipt-history h4, .receipt-orphaned > .muted { font-size: 13px; }
.receipt-pending, .receipt-pending-files, .receipt-upload-progress, .receipt-loading { font-size: 13px; }
.receipt-preview { padding: 18px; background: #f6faf8; border-color: #dde8e2; border-radius: 10px; }
.receipt-preview h4 { font-size: 14px; }
.receipt-preview-fallback .btn { font-size: 12px; }
.receipt-archive-toolbar { grid-template-columns: minmax(0, 1fr) 170px auto; gap: 14px; }
.receipt-archive-toolbar .btn { font-size: 12px; min-height: 42px; }
.receipt-archive-count { font-size: 12px; }
.receipt-file-list .badge { max-width: 125px; font-size: 11px; }
.receipt-pdf-controls { gap: 8px; padding: 12px; border-radius: 8px 8px 0 0; border-color: #dce8e2; }
.receipt-pdf-controls .btn { font-size: 12px; min-height: 34px; }
.receipt-pdf-page, .receipt-pdf-zoom { font-size: 12px; color: #577769; }
.receipt-pdf-stage { border-color: #dce8e2; border-radius: 0 0 8px 8px; background: #e9efeb; }
.receipt-pdf-status { font-size: 13px; }

/* Authentication shares the workspace branding and typography. */
.auth-shell { background: #f5f8f8; }
.auth-story { background: #173d40; }
.auth-brand > img { flex-shrink: 0; }
.auth-brand > span { display: flex; flex-direction: column; min-width: 0; gap: 4px; line-height: 1.15; letter-spacing: 2px; }
.auth-brand strong { font-weight: 600; }
.auth-brand small { margin-left: 0; font-size: 12px; line-height: 1.6; letter-spacing: 1.5px; }
.auth-story h1 { color: #f3f8f0; }
.auth-description, .auth-login-help { font-size: 13px; color: #71878b; }
.auth-form-card { max-width: 390px; }
.auth-form-card > h1 { font-size: 28px; margin-bottom: 14px; }
.auth-form .field { font-size: 13px; }
.auth-form .field input { font-size: 14px; min-height: 48px; border-radius: 9px; }
.auth-submit { min-height: 46px; font-size: 14px; }
.auth-switch { font-size: 13px; }
.auth-footer { max-width: 100%; font-size: 11px; color: #879994; text-align: center; line-height: 1.8; letter-spacing: .2px; white-space: normal; overflow-wrap: anywhere; }
.account-summary strong { font-size: 17px; }
.account-summary p { font-size: 13px; }
.account-menu-actions { gap: 12px; }
.account-audit-card { margin-top: 25px; }
.audit-detail { line-height: 1.85; }

@media (min-width: 1550px) {
  .main-content { padding: 38px 40px 30px; }
  .topbar, .app-footer { padding-left: 40px; padding-right: 40px; }
  .overview-metric { padding: 24px 26px; }
  .metric-value { font-size: 38px; }
  .metric-money { font-size: 34px; }
  .data-table td { padding-top: 20px; padding-bottom: 20px; }
}
@media (max-width: 1279px) and (min-width: 761px) {
  :root { --sidebar: 220px; }
  .sidebar { padding-left: 13px; padding-right: 13px; }
  .brand { gap: 10px; padding-left: 9px; }
  .brand strong { font-size: 23px; }
  .brand-english { font-size: 9px; margin-left: 6px; }
  .topbar { padding: 0 24px; }
  .main-content { padding: 28px 24px 24px; }
  .app-footer { padding-left: 24px; padding-right: 24px; }
  .topbar-actions { gap: 9px; }
  .overview-metrics { gap: 12px; }
  .overview-metric { padding: 18px 17px; }
  .metric-value { font-size: 30px; }
  .metric-money { font-size: 27px; }
  .metric-bottom { font-size: 11px; }
  .overview-main-grid { grid-template-columns: minmax(0, 1.6fr) minmax(270px, 1fr); gap: 18px; }
  .overview-bottom-grid { gap: 18px; }
  .page-heading { flex-wrap: wrap; gap: 16px; }
  .page-heading .row-actions { margin-left: auto; }
  .page-heading .row-actions .btn { font-size: 12px; }
  .summary-strip > div { padding: 0 20px; }
  .summary-strip strong { font-size: 26px; }
  .bom-heading-actions { flex-wrap: wrap; }
}
@media (max-width: 1050px) and (min-width: 761px) {
  :root { --sidebar: 208px; }
  .factory-switch { padding-left: 7px; padding-right: 7px; }
  .factory-switch strong { font-size: 12px; }
  .nav-item { padding-left: 12px; padding-right: 12px; font-size: 13px; }
  .overview-main-grid, .overview-bottom-grid { grid-template-columns: minmax(0, 1fr); }
  .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-money { font-size: 30px; }
  .settings-grid, .product-detail-bottom { grid-template-columns: minmax(0, 1fr); }
  .toolbar { padding: 18px; }
  .topbar-actions .global-search { border: 0; background: transparent; padding: 7px; }
  .topbar-actions .global-search span, .global-search kbd { display: none; }
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
  .summary-strip > div:nth-child(2) { border-right: 0; }
  .product-overview-stat { min-width: 145px; padding-left: 20px; }
}
@media (max-width: 760px) {
  :root { --sidebar: 0px; }
  h1 { font-size: 26px; }
  .sidebar { width: min(280px, calc(100vw - 44px)); padding-top: 24px; }
  .sidebar > nav { margin-bottom: 4px; }
  .sidebar .brand { padding-bottom: 22px; }
  .nav-item { min-height: 45px; font-size: 14px; }
  .sidebar-account strong { max-width: 178px; }
  .topbar { min-height: 66px; height: 66px; padding: 0 16px; }
  .mobile-menu { display: flex; margin-right: 6px; }
  .breadcrumb { gap: 8px; font-size: 12px; }
  .topbar-actions { gap: 4px; }
  .topbar-actions .icon-button { width: 36px; }
  .topbar-actions .global-search { display: none; }
  .topbar-actions .btn { min-height: 36px; padding: 7px 10px; font-size: 12px; gap: 5px; }
  .topbar-actions .btn svg { width: 14px; }
  .main-content { padding: 24px 16px 20px; }
  .page-heading { align-items: flex-start; flex-wrap: wrap; gap: 15px; margin-bottom: 21px; }
  .page-heading h1 { font-size: 26px; }
  .page-heading .muted { font-size: 12px; margin-top: 8px; }
  .page-heading .row-actions { width: 100%; justify-content: flex-start; gap: 8px; }
  .page-heading .btn, .page-heading .row-actions .btn { min-height: 38px; padding: 9px 12px; font-size: 12px; }
  .eyebrow { font-size: 10px; }
  .btn { min-height: 40px; font-size: 13px; }
  .icon-button { width: 36px; height: 36px; }
  .text-link { min-height: 34px; font-size: 12px; }
  .app-footer { padding: 17px 16px 24px; font-size: 11px; gap: 10px; }
  .app-footer > span, .app-footer .text-link { font-size: 11px; }
  .app-footer .text-divider { margin: 0 5px; }
  .demo-note { font-size: 12px; padding: 12px; gap: 8px; align-items: flex-start; }
  .demo-note > svg { margin-top: 3px; }
  .demo-note .text-link { display: none; }
  .overview-metrics, .overview-metrics.without-finance { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .overview-metric { padding: 17px 14px; gap: 7px; border-radius: 10px; }
  .metric-top { font-size: 12px; }
  .metric-icon { width: 28px; height: 28px; border-radius: 8px; }
  .metric-value { font-size: 29px; }
  .metric-money { font-size: 25px; }
  .metric-value small { font-size: 11px; margin-left: 5px; }
  .metric-bottom { font-size: 11px; padding-top: 9px; }
  .overview-main-grid, .overview-bottom-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .section-head { padding: 20px 18px 16px; }
  .section-head h2 { font-size: 17px; }
  .section-head .eyebrow { font-size: 10px; }
  .production-distribution { padding: 0 18px 14px; }
  .production-distribution .muted, .production-distribution strong small { font-size: 12px; }
  .stage-bar { margin: 0 18px; }
  .stage-legend { padding: 13px 18px 20px; gap: 10px; font-size: 11px; }
  .stage-legend b { font-size: 11px; }
  .alerts-list { display: block; padding: 0 18px; }
  .alert-item { padding: 16px 0; }
  .alert-item strong { font-size: 13px; }
  .alert-item small, .alert-footer { font-size: 11px; }
  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 12px 18px; }
  .quick-actions strong { font-size: 13px; }
  .quick-actions small { font-size: 11px; }
  .workflow-note { gap: 8px; font-size: 10px; flex-wrap: wrap; padding: 12px; }
  .activity-list { padding: 0 18px 16px; }
  .activity-item p { font-size: 12px; }
  .activity-item small { font-size: 11px; }
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px 0; gap: 20px 0; }
  .summary-strip > div { padding: 0 16px; gap: 7px; }
  .summary-strip > div:nth-child(2) { border-right: 0; }
  .summary-strip > div > .muted { font-size: 12px; }
  .summary-strip strong { font-size: 26px; }
  .summary-strip strong small, .summary-strip small.muted { font-size: 11px; }
  .toolbar { padding: 17px 15px; gap: 13px; }
  .toolbar-filters { gap: 10px; width: 100%; }
  .toolbar-filters .search-input, .toolbar > .ops-search { width: 100%; }
  .search-input { width: 100%; min-width: 0; }
  .toolbar .ops-search .search-input { min-width: 0; }
  .select-input { flex: 1; min-width: 120px; }
  .toolbar [role=tab] { min-height: 38px; font-size: 12px; }
  .data-table th, .data-table td { padding: 13px 15px; }
  .data-table th, .compact-table th { font-size: 12px; }
  .data-table td, .compact-table td { font-size: 13px; }
  .data-table .btn { min-height: 36px; font-size: 12px; }
  .data-table .muted, .data-table .mono, .compact-table .mono { font-size: 12px; }
  .badge { font-size: 11px; }
  .product-overview { padding: 20px; gap: 17px; }
  .product-thumb-large { width: 75px; height: 85px; }
  .product-title-line strong { font-size: 17px; }
  .product-overview-main > p { font-size: 12px; }
  .product-overview-stat { width: 100%; padding: 14px 0 0; gap: 10px; flex-wrap: wrap; }
  .product-overview-stat strong { font-size: 26px; }
  .product-overview-stat > .muted, .product-overview-stat small { font-size: 12px; }
  .bom-workspace-heading { padding: 20px; gap: 15px; }
  .bom-workspace-heading h2 { font-size: 17px; }
  .bom-workspace-heading p { font-size: 12px; max-width: none; }
  .bom-heading-actions { width: 100%; flex-direction: row; gap: 8px; }
  .bom-heading-actions .btn { flex: 1; font-size: 12px; }
  .bom-statusbar { font-size: 11px; padding: 12px 20px; gap: 6px; flex-wrap: wrap; }
  .bom-footer { padding: 20px; }
  .bom-footer > div:first-child > .muted { font-size: 12px; }
  .bom-footer strong { font-size: 25px; }
  .bom-footer small { font-size: 12px; }
  .bom-footer-actions { width: 100%; flex-wrap: wrap; gap: 8px; }
  .bom-footer-actions .btn { min-height: 38px; font-size: 12px; padding: 8px 11px; }
  .product-detail-bottom, .settings-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .settings-card { padding: 22px; }
  .modal-backdrop { padding: 12px; }
  .modal { width: 620px; border-radius: 12px; max-height: calc(100dvh - 24px); }
  .modal-wide { width: 860px; }
  .modal-header { padding: 18px; }
  .modal-header h2 { font-size: 18px; }
  .modal-body { padding: 20px 18px; }
  .modal-footer { padding: 15px 18px; }
  .modal-body > p.muted, .modal form > .modal-body > p:not([class]) { font-size: 13px; }
  .field { font-size: 13px; margin-bottom: 19px; }
  .field input, .field select, .field textarea { font-size: 16px; min-height: 44px; }
  .field small { font-size: 12px; }
  .form-grid { gap: 0 15px; }
  .create-options { grid-template-columns: minmax(0, 1fr); }
  #toast { left: 50%; bottom: 20px; width: max-content; max-width: calc(100vw - 32px); font-size: 13px; }
  .receipt-workspace { font-size: 13px; }
  .receipt-transaction { gap: 10px; flex-wrap: wrap; }
  .receipt-transaction > .text-link { font-size: 12px; }
  .receipt-section-heading { gap: 10px; }
  .receipt-section-heading h3 { font-size: 16px; }
  .receipt-section-heading h4 { font-size: 14px; }
  .receipt-section-heading p, .receipt-section-heading .text-link { font-size: 12px; }
  .receipt-file { padding: 15px; }
  .receipt-file-heading strong { font-size: 13px; }
  .receipt-file-heading small { font-size: 11px; }
  .receipt-file .row-actions { gap: 5px; }
  .receipt-file .btn { min-height: 36px; font-size: 12px; padding: 7px 10px; }
  .receipt-file-note { font-size: 12px; }
  .receipt-history-note { font-size: 11px; }
  .receipt-inline-form { padding: 16px; }
  .receipt-inline-form .field { font-size: 13px; }
  .receipt-inline-form input[type=file] { font-size: 12px; }
  .receipt-inline-form .btn { min-height: 40px; font-size: 13px; }
  .receipt-preview { padding: 13px; }
  .receipt-preview h4 { font-size: 13px; }
  .receipt-preview-fallback .btn { font-size: 12px; }
  .receipt-archive-toolbar { grid-template-columns: minmax(0, 1fr) 135px; gap: 12px; }
  .receipt-archive-toolbar .field { font-size: 12px; }
  .receipt-archive-toolbar > .btn { grid-column: 1 / -1; }
  .receipt-file-list .badge { font-size: 10px; max-width: 100px; }
  .receipt-pdf-controls { gap: 5px; padding: 9px; }
  .receipt-pdf-controls .btn { font-size: 11px; min-height: 36px; }
  .receipt-pdf-page, .receipt-pdf-zoom { font-size: 12px; }
  .receipt-pdf-stage { max-height: 60dvh; padding: 6px; }
  .receipt-pdf-page { margin-right: 4px; }
  .auth-shell { display: flex; flex-direction: column; }
  .auth-story { min-height: 0; padding: 24px 26px 28px; }
  .auth-brand img { width: 35px; height: 35px; }
  .auth-brand > span { font-size: 23px; }
  .auth-story > div { padding: 30px 0 0; }
  .auth-story .eyebrow { font-size: 10px; margin-bottom: 13px; }
  .auth-story h1 br { display: none; }
  .auth-story > div > p:last-child, .auth-story-foot { display: none; }
  .auth-form-panel { padding: 32px 24px 26px; flex: 1; }
  .auth-form-card > h1 { font-size: 26px; }
  .auth-form .field { font-size: 13px; }
  .auth-form .field input { font-size: 16px; min-height: 48px; }
  .auth-description { font-size: 13px; }
  .auth-story h1 { font-size: 29px; }
  .auth-switch { font-size: 13px; }
  .auth-footer { font-size: 11px; }
}
@media (max-width: 420px) {
  .breadcrumb { gap: 6px; font-size: 11px; }
  .topbar-actions .notifications { display: none; }
  .topbar-actions .btn { font-size: 11px; }
  .page-heading .row-actions { gap: 6px; }
  .page-heading .row-actions .btn { padding-left: 10px; padding-right: 10px; }
  .metric-top { font-size: 11px; }
  .metric-value, .metric-money { font-size: 25px; }
  .metric-icon { width: 25px; height: 25px; }
  .summary-strip strong { font-size: 23px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .receipt-archive-toolbar { grid-template-columns: minmax(0, 1fr); }
  .receipt-archive-toolbar > .btn { grid-column: auto; }
  .receipt-file-heading { flex-wrap: wrap; }
  .receipt-file-heading > div { min-width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Plain text identity for the factory workspace. */
.brand, .auth-brand { align-items: flex-start; }
.brand { padding-bottom: 21px; }
.brand > .brand-system-name, .auth-brand > .brand-system-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 1.4;
}
.brand-system-name > strong { font-size: 25px; font-weight: 600; letter-spacing: 2px; }
.brand-system-name > small { margin: 0; font-size: 11px; letter-spacing: 1.5px; }
.auth-brand .brand-system-name > strong { font-size: 30px; }
.auth-brand .brand-system-name > small { font-size: 12px; }
.loading-system-name { color: #23494a; font-size: 18px; font-weight: 600; letter-spacing: .5px; }
@media (max-width: 760px) {
  .auth-brand .brand-system-name > strong { font-size: 25px; }
  .auth-brand .brand-system-name > small { font-size: 11px; }
}

/* Keep the complete primary menu visible on common laptop-height screens. */
.sidebar > nav {
  scrollbar-width: thin;
  scrollbar-color: #719b8d transparent;
}
.sidebar > nav::-webkit-scrollbar { width: 4px; }
.sidebar > nav::-webkit-scrollbar-track { background: transparent; }
.sidebar > nav::-webkit-scrollbar-thumb { background: #719b8d; border-radius: 4px; }
@media (max-height: 800px) and (min-width: 761px) {
  .sidebar { padding-top: 16px; padding-bottom: 10px; }
  .brand { padding-bottom: 14px; }
  .factory-switch { margin-bottom: 12px; padding: 8px; }
  .factory-avatar { width: 30px; height: 30px; }
  .nav-caption { margin-bottom: 6px; }
  .sidebar > nav { padding-bottom: 4px; }
  .nav-item { min-height: 39px; padding: 8px 12px; margin: 2px 0; font-size: 13px; }
  .sidebar-bottom { margin-top: 5px; }
  .workspace-info { padding: 6px 10px; }
  .sidebar-bottom .nav-item { min-height: 32px; padding: 6px 12px; margin: 2px 0; }
  .sidebar-account { padding: 10px; margin-top: 5px; }
}
@media (max-height: 800px) and (max-width: 760px) {
  .sidebar { padding-top: 16px; padding-bottom: 10px; }
  .sidebar .brand { padding-bottom: 14px; }
  .factory-switch { margin-bottom: 12px; padding: 8px; }
  .factory-avatar { width: 30px; height: 30px; }
  .nav-caption { margin-bottom: 6px; }
  .sidebar > nav { padding-bottom: 4px; }
  .nav-item { min-height: 40px; padding: 8px 12px; margin: 2px 0; }
  .sidebar-bottom { margin-top: 5px; }
  .workspace-info { padding: 6px 10px; }
  .sidebar-bottom .nav-item { min-height: 40px; padding: 8px 12px; margin: 2px 0; }
  .sidebar-account { min-height: 48px; padding: 10px; margin-top: 5px; }
}