:root {
  --ink: #17243e;
  --muted: #77849a;
  --line: #e8edf4;
  --bg: #f5f7fb;
  --blue: #3977e8;
  --navy: #172b50;
  --white: #fff;
  --green: #14a77d;
  --red: #e4515f;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vw, 48px);
  background: var(--bg);
}

.login-card {
  width: min(460px, 100%);
  padding: 36px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 12px 36px rgba(24, 33, 43, .1);
}

.login-brand {
  display: grid;
  justify-items: start;
  gap: 10px;
}

.login-brand-logo {
  display: block;
  width: 224px;
  max-width: 100%;
  height: 36px;
  object-fit: contain;
  object-position: left center;
}

.login-brand small {
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
}

.login-card h1 {
  margin: 32px 0 8px;
  color: var(--text);
  font-size: 28px;
  line-height: 1.3;
}

.login-card > p {
  margin: 0 0 24px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.6;
}

#loginForm {
  display: grid;
  gap: 18px;
}

#loginForm label {
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

#loginForm input {
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  outline: 0;
  color: var(--text);
  background: var(--surface);
  font-size: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

#loginForm input::placeholder {
  color: var(--text-3);
}

#loginForm input:hover {
  border-color: #aeb6c1;
}

#loginForm input:focus,
#loginForm input:focus-visible {
  border-color: var(--brand);
  outline: 0;
  box-shadow: 0 0 0 3px var(--brand-soft);
}

#loginForm button {
  min-height: 52px;
  margin-top: 2px;
  border-radius: var(--radius-md);
  font-size: 17px;
  box-shadow: none;
}

#loginForm button:hover {
  background: var(--brand-dark);
}

#loginForm button:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.login-help {
  display: grid;
  gap: 6px;
  margin-top: 22px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text-2);
  background: #fafbfc;
}

.login-help strong {
  color: var(--text);
  font-size: 15px;
}

.login-help span,
.login-help small {
  font-size: 15px;
  line-height: 1.6;
}

.login-help small {
  color: var(--text-3);
}
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 244px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--navy); color: #fff; padding: 24px 14px 18px; display: flex; flex-direction: column; }
.brand { display: flex; gap: 11px; align-items: center; padding: 0 12px 24px; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(145deg, #5d9cff, #3271e8); display: grid; place-items: center; font-size: 20px; font-weight: 800; box-shadow: 0 6px 18px #0c193a; }
.brand strong { display: block; font-size: 18px; letter-spacing: .2px; }
.brand small, .sidebar-footer small { display: block; margin-top: 2px; color: #93a2bc; font-size: 14px; }
nav { overflow-y: auto; flex: 1; }
.nav-label { padding: 17px 13px 7px; margin: 0; color: #7487a6; font-size: 14px; font-weight: 700; letter-spacing: 1.4px; }
.nav-item { width: 100%; border: 0; background: transparent; color: #b4c1d4; display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 8px; text-align: left; margin: 2px 0; font-size: 14px; }
.nav-item span { width: 18px; text-align: center; font-size: 17px; }
.nav-item:hover:not(.disabled) { background: #20385f; color: white; }
.nav-item.active { background: linear-gradient(90deg, #3375e5, #3d82f1); color: #fff; box-shadow: 0 7px 15px #112447; }
.nav-item.primary-nav:not(.active) { color: #e4edfb; background: #203b64; border: 1px solid #2b4b77; }
.nav-item.primary-nav:not(.active):hover { background: #294a78; }
.nav-item em { margin-left: auto; font-size: 14px; font-style: normal; background: #315078; padding: 2px 5px; border-radius: 8px; }
.nav-item.disabled { cursor: default; opacity: .68; }
.sidebar-footer { border-top: 1px solid #284064; padding: 18px 12px 0; display: flex; gap: 10px; align-items: center; font-size: 14px; color: #cad3e1; }
.sidebar-footer strong { display: block; font-size: 14px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #27d39b; box-shadow: 0 0 0 5px #27d39b20; }
.sidebar-footer[data-status="checking"] .pulse { background: #e7a33c; box-shadow: 0 0 0 5px #e7a33c20; }
.sidebar-footer[data-status="ready"] .pulse { background: #27d39b; box-shadow: 0 0 0 5px #27d39b20; }
.sidebar-footer[data-status="unavailable"] { color: #ffd2d7; }
.sidebar-footer[data-status="unavailable"] small { color: #e8a8b0; }
.sidebar-footer[data-status="unavailable"] .pulse { background: #f05c6c; box-shadow: 0 0 0 5px #f05c6c25; }
main { min-width: 0; }
header { height: 76px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 34px; position: sticky; top: 0; z-index: 10; }
header h1 { margin: 0; font-size: 20px; }
header p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 11px; }
.signed-user { text-align: right; }
.signed-user strong, .signed-user small { display: block; }
.signed-user strong { font-size: 14px; }
.signed-user small { margin-top: 3px; color: var(--muted); font-size: 14px; }
.icon-button { border: 1px solid var(--line); background: #fff; width: 38px; height: 38px; border-radius: 9px; color: #69778d; font-size: 20px; }
.avatar { border: 0; border-radius: 10px; width: 38px; height: 38px; background: #e7efff; color: #3977e8; font-weight: 700; }
.header-pin-button { min-height: 36px; padding: 0 13px; border: 1px solid #cbdaf4; border-radius: 9px; color: #2c63bd; background: #f4f8ff; font-size: 14px; font-weight: 700; }
.header-pin-button:hover { border-color: #8eafe8; background: #eaf2ff; }
.menu-button { display: none; margin-right: 12px; }
.app-update-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; margin: 14px 34px 0; padding: 14px 16px; border: 2px solid #6b99e7; border-left-width: 6px; border-radius: 11px; color: #173f79; background: #edf5ff; box-shadow: 0 6px 18px #1f5ba718; }
.app-update-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #3977e8; font-size: 19px; font-weight: 900; }
.app-update-banner strong, .app-update-banner small { display: block; }
.app-update-banner strong { font-size: 15px; }
.app-update-banner small { margin-top: 4px; color: #52709a; font-size: 14px; line-height: 1.5; }
.app-update-banner button { min-height: 42px; padding: 0 18px; border: 0; border-radius: 9px; color: #fff; background: #2f6fdc; font-size: 14px; font-weight: 900; box-shadow: 0 5px 13px #2f6fdc2e; }
.app-update-banner button:hover { background: #245fc2; }
.default-pin-warning { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; margin: 14px 34px 0; padding: 13px 15px; border: 1px solid #f0cf93; border-radius: 11px; color: #6f4d17; background: #fff8e9; box-shadow: 0 4px 14px #8a5b1110; }
.default-pin-warning-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #d89025; font-size: 17px; font-weight: 900; }
.default-pin-warning strong, .default-pin-warning small { display: block; }
.default-pin-warning strong { font-size: 14px; }
.default-pin-warning small { margin-top: 3px; color: #8a672f; font-size: 14px; line-height: 1.5; }
.default-pin-warning button { min-height: 40px; padding: 0 15px; border: 1px solid #dda54d; border-radius: 9px; color: #744b0f; background: #fff; font-size: 14px; font-weight: 800; }
.default-pin-warning button:hover { border-color: #bd7b17; background: #fffdf8; }
.content { padding: 28px 34px 46px; max-width: 1500px; margin: 0 auto; }
.page { display: none; }
.page.active { display: block; animation: appear .22s ease; }
@keyframes appear { from { opacity: 0; transform: translateY(3px); } }
.welcome { padding: 25px 28px; border-radius: 15px; color: #fff; background: radial-gradient(circle at 86% -30%, #ffffff35 0, transparent 36%), linear-gradient(120deg, #215bbd, #2d76dd 65%, #3d86ed); display: flex; align-items: center; justify-content: space-between; box-shadow: 0 10px 28px #3373cf2a; }
.welcome-identity { min-width: 0; }
.welcome h2 { margin: 6px 0 7px; font-size: 23px; }
.welcome p { margin: 0; color: #d6e5ff; font-size: 14px; }
.dashboard-duty-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.dashboard-duty-badges strong { min-width: 68px; padding: 8px 14px; border: 1px solid #ffffff38; border-radius: 999px; color: #fff; background: #0c367b55; font-size: 14px; line-height: 1; text-align: center; box-shadow: inset 0 1px #ffffff1c; }
.dashboard-duty-badges.manager strong { background: #ffffff24; }
.eyebrow { font-size: 14px; letter-spacing: 2px; color: #bcd5ff; font-weight: 700; }
.today { font-size: 14px; color: #dbe8ff; background: #ffffff17; padding: 10px 14px; border-radius: 9px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 20px; }
.stats-grid.worker-dashboard-stats { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 20px; display: flex; gap: 16px; align-items: center; box-shadow: 0 3px 12px #1f335408; }
.stat-card-action { width: 100%; color: inherit; text-align: left; transition: transform .16s, border-color .16s, box-shadow .16s; }
.stat-card-action:hover { transform: translateY(-2px); border-color: #efb2ba; box-shadow: 0 9px 22px #9a263514; }
.stat-card-action:focus-visible, .inventory-warning-card:focus-visible { outline: 3px solid #3977e838; outline-offset: 2px; }
.stat-icon { width: 47px; height: 47px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; }
.blue .stat-icon { background: #e7f0ff; color: #3677e5; }.violet .stat-icon { background: #f0eaff; color: #7757d9; }.amber .stat-icon { background: #fff3db; color: #e39524; }.red .stat-icon { background: #ffeaed; color: #dc4d5c; }
.stat-card span, .stat-card small { color: var(--muted); font-size: 16px; line-height: 1.5; display: block; }
.stat-card strong { display: block; font-size: 26px; margin: 3px 0; }
.dashboard-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; margin-top: 20px; }
.dashboard-grid.worker-actions-only { grid-template-columns: 1fr; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 21px; box-shadow: 0 3px 12px #1f335408; }
.panel-title { display: flex; justify-content: space-between; align-items: start; }
.panel-title h3 { margin: 0; font-size: 15px; }.panel-title p { margin: 5px 0 0; font-size: 14px; color: var(--muted); }
.panel-title button { background: none; border: 0; color: var(--blue); font-size: 14px; }
.big-progress { display: flex; align-items: baseline; gap: 10px; margin: 28px 0 10px; }
.big-progress strong { font-size: 32px; }.big-progress span { font-size: 14px; color: var(--muted); }
.progress-track { height: 8px; background: #edf1f7; border-radius: 8px; overflow: hidden; }.progress-track i { display: block; height: 100%; background: linear-gradient(90deg, #3475e3, #55a2f5); border-radius: inherit; }
.progress-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 17px; color: var(--muted); font-size: 14px; }.progress-legend b { color: var(--text); font-size: 14px; }.dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; margin-right: 5px; }.done { background: #3478e7; }.doing { background: #f2a53a; }.pending { background: #cdd5e1; }.paused { background: #e45757; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.quick-grid button { position: relative; background: #f7f9fc; border: 1px solid #edf0f5; border-radius: 10px; padding: 17px 12px; text-align: left; color: #52617a; font-size: 14px; }
.quick-grid button:hover:not(.coming) { background: #edf4ff; border-color: #dbe8ff; color: var(--blue); }
.quick-grid b { display: block; font-size: 20px; color: var(--blue); margin-bottom: 7px; }
.dashboard-action-count { position: absolute; top: 10px; right: 10px; min-width: 22px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #d72638; color: #fff; font-size: 14px; font-style: normal; font-weight: 900; box-shadow: 0 6px 14px #d7263833; }
.dashboard-data-safety { display: grid; grid-template-columns: 1.2fr 2fr auto; align-items: center; gap: 18px; margin-top: 18px; padding: 17px 20px; border: 1px solid; border-left-width: 5px; border-radius: 13px; box-shadow: 0 6px 18px #1f33540d; }
.dashboard-data-safety.healthy { border-color: #bfe5d9; border-left-color: #14a77d; background: #f5fcfa; }
.dashboard-data-safety.attention { border-color: #f2c6cb; border-left-color: #d72638; background: #fff7f8; }
.dashboard-data-safety-lead { display: flex; align-items: center; gap: 13px; min-width: 0; }
.dashboard-data-safety-icon { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #fff; background: #14a77d; font-size: 14px; font-weight: 900; }
.dashboard-data-safety.attention .dashboard-data-safety-icon { background: #d72638; }
.dashboard-data-safety-lead small { display: block; color: #728197; font-size: 14px; font-weight: 800; letter-spacing: .5px; }
.dashboard-data-safety-lead strong { display: block; margin-top: 3px; color: #117c61; font-size: 17px; }
.dashboard-data-safety.attention .dashboard-data-safety-lead strong { color: #b51f30; }
.dashboard-data-safety-lead p { margin: 3px 0 0; color: #68768a; font-size: 14px; }
.dashboard-data-safety-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dashboard-data-safety-steps span { display: grid; grid-template-columns: auto 1fr; gap: 1px 7px; padding: 9px 11px; border: 1px solid #dfe9e6; border-radius: 9px; color: #536377; background: #fff; font-size: 14px; font-weight: 800; }
.dashboard-data-safety-steps i { grid-row: 1 / span 2; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #14a77d; font-size: 14px; font-style: normal; }
.dashboard-data-safety.attention .dashboard-data-safety-steps i { background: #d96b78; }
.dashboard-data-safety-steps b { color: #128466; font-size: 14px; }
.dashboard-data-safety.attention .dashboard-data-safety-steps b { color: #b64a57; }
.dashboard-data-safety-action { min-width: 150px; text-align: right; }
.dashboard-data-safety-action span { display: block; margin-bottom: 7px; color: #728197; font-size: 14px; }
.dashboard-data-safety-action button { border: 0; color: var(--blue); background: transparent; font-size: 14px; font-weight: 800; }
.dashboard-exception-summary { display: grid; grid-template-columns: minmax(180px, 1.3fr) repeat(3, minmax(130px, 1fr)); gap: 10px; margin-top: 18px; padding: 10px; border: 1px solid #f2c6cb; border-left: 5px solid #d72638; border-radius: 13px; background: #fff7f8; box-shadow: 0 6px 18px #9c1e2b12; }
.dashboard-exception-lead { display: flex; align-items: center; gap: 13px; padding: 8px 12px; }
.dashboard-exception-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #fff; background: #d72638; font-size: 21px; font-weight: 900; }
.dashboard-exception-lead small, .dashboard-exception-lead p { display: block; margin: 0; color: #91535b; font-size: 14px; font-weight: 700; }
.dashboard-exception-lead strong { display: inline-block; margin: 1px 8px 1px 0; color: #b51f30; font-size: 28px; line-height: 1; }
.dashboard-exception-summary > button { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; min-height: 65px; padding: 11px 14px; border: 1px solid #f0dadd; border-radius: 10px; color: #5c3540; background: #fff; text-align: left; }
.dashboard-exception-summary > button:hover { border-color: #e7a8af; background: #fffafb; }
.dashboard-exception-summary > button span { font-size: 14px; font-weight: 800; }
.dashboard-exception-summary > button strong { grid-row: 1 / span 2; grid-column: 2; color: #c12a3b; font-size: 24px; }
.dashboard-exception-summary > button small { color: #a36b73; font-size: 14px; }
.dashboard-exception-summary.clear { border-color: #cce8df; border-left-color: #14a77d; background: #f5fcfa; }
.dashboard-exception-summary.clear .dashboard-exception-icon { background: #14a77d; }
.dashboard-exception-summary.clear .dashboard-exception-lead strong { color: #128466; }
.quick-grid .coming { opacity: .65; cursor: default; }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.search { width: min(420px, 55%); background: #fff; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; padding: 0 13px; }
.search span { color: #8b97a9; }.search input { width: 100%; border: 0; outline: 0; padding: 11px; color: var(--ink); background: transparent; }
.primary { background: var(--blue); color: #fff; border: 0; border-radius: 9px; padding: 11px 17px; font-weight: 600; font-size: 14px; box-shadow: 0 5px 12px #3977e833; }
.primary:hover { background: #2d69d5; }
.table-panel { padding: 0; overflow: auto; }
.catalog-table { min-width: 980px; }
.product-inactive-row { background: #f6f7f9; opacity: .72; }
.product-inactive-row strong { color: #667085; }
.configuration-text { display: block; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th { background: #fafbfd; color: #7d899a; font-size: 14px; text-align: left; padding: 13px 17px; border-bottom: 1px solid var(--line); letter-spacing: .3px; }
td { padding: 15px 17px; border-bottom: 1px solid #edf0f5; font-size: 14px; color: #536079; }
tr:last-child td { border-bottom: 0; } td strong { color: #273750; }
.badge { display: inline-block; border-radius: 10px; padding: 4px 8px; font-size: 14px; }.badge.active { background: #e3f8f1; color: #138867; }.badge.inactive { background: #f0f2f5; color: #7c8797; }.badge.draft { background: #fff3da; color: #b87918; }
.row-actions { display: flex; gap: 7px; }.row-actions button { border: 0; background: #edf3fd; color: #3b70c9; border-radius: 6px; padding: 5px 8px; font-size: 14px; }.row-actions .danger { color: #d94a58; background: #fff0f2; }
.empty { padding: 60px 20px; text-align: center; color: var(--muted); }.hidden { display: none !important; }
.section-hint { color: var(--muted); font-size: 14px; }
.bom-toolbar { gap: 14px; }
.bom-toolbar-actions { display: flex; align-items: center; gap: 8px; }
.bom-toolbar-actions .secondary { min-height: 38px; padding: 9px 12px; color: #315f9f; border-color: #c8d8ef; background: #f7faff; font-weight: 800; }
.bom-toolbar-actions .bom-import-button { color: #1f6757; border-color: #b9d9d0; background: #f3faf8; }
.bom-product-filter { display: flex; align-items: center; gap: 9px; margin-left: auto; padding: 7px 9px 7px 12px; border: 1px solid #c6d9d5; border-radius: 9px; color: #54716d; background: #f4faf8; font-size: 14px; }
.bom-product-filter strong { color: #214f49; font-size: 14px; }
.bom-product-filter button { padding: 6px 9px; border: 1px solid #a9c6bf; border-radius: 7px; color: #2b6860; background: #fff; font-size: 14px; font-weight: 800; }
.module-welcome { display: flex; align-items: center; gap: 16px; padding: 23px 25px; margin-bottom: 18px; border-radius: 13px; color: #fff; background: linear-gradient(120deg, #1e5fbd, #3984eb); }
.module-welcome .module-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 12px; background: #ffffff20; font-size: 25px; }
.module-welcome h2 { margin: 4px 0; font-size: 21px; }
.module-welcome p { margin: 0; color: #d9e8ff; font-size: 14px; }
.employee-welcome { background: linear-gradient(120deg, #203658, #3977e8); }
.employee-welcome .primary { margin-left: auto; border: 1px solid #b9d1ff; background: #245ec3; }
.employee-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 2px 12px; }
.employee-toolbar h3 { margin: 0; font-size: 17px; }
.employee-toolbar p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.employee-search-box { min-width: 310px; }
.employee-table-panel table { min-width: 1250px; }
.employee-role { display: inline-block; border-radius: 10px; padding: 4px 8px; font-size: 14px; font-weight: 800; }
.employee-role.manager { color: #235fb8; background: #eaf2ff; }
.employee-role.worker { color: #54708d; background: #eef3f7; }
.employee-pin-status { display: inline-flex; align-items: center; min-height: 26px; padding: 5px 8px; border: 1px solid transparent; border-radius: 999px; white-space: nowrap; font-size: 14px; font-weight: 900; }
.employee-pin-status.warning { border-color: #efcb8a; color: #845710; background: #fff6df; }
.employee-pin-status.secure { border-color: #b9dfd1; color: #167158; background: #eaf8f3; }
.employee-pin-status.inactive { border-color: #d9e0e9; color: #768297; background: #f3f5f8; }
.employee-inactive-row { opacity: .62; }
.employee-actions { flex-wrap: wrap; }
.employee-modal-note { margin-top: 15px; padding: 11px 13px; border: 1px solid #d9e5f5; border-radius: 9px; color: #52657d; background: #f6f9fd; font-size: 14px; line-height: 1.6; }
.employee-pin-card { width: min(460px, 100%); }
.employee-pin-reset-fields { display: grid; gap: 16px; }
.employee-modal-card { width: min(720px, 100%); }
.employee-job { color: #27476f; font-size: 14px; }
.employee-module-list { display: flex; flex-wrap: wrap; gap: 5px; min-width: 170px; }
.employee-module-badge { display: inline-flex; padding: 4px 7px; border: 1px solid #d8e5f5; border-radius: 6px; color: #315e99; background: #f2f7fd; font-size: 14px; font-weight: 800; }
.employee-worker-access { padding: 15px; border: 1px solid #d9e5f5; border-radius: 11px; background: #f8fbff; }
.employee-access-hint, .employee-access-summary { margin: 8px 0 0; color: #677890; font-size: 14px; line-height: 1.6; }
.employee-access-summary { color: #285b9f; font-weight: 800; }
.employee-extra-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 11px; }
.employee-extra-modules label { display: flex; align-items: center; gap: 7px; padding: 10px; border: 1px solid #dce6f2; border-radius: 8px; color: #425873; background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.employee-extra-modules label.default-module { border-color: #a9c9f2; color: #245a9f; background: #eaf3ff; cursor: default; }
.employee-extra-modules input { width: auto; accent-color: #3977e8; }
.employee-manager-access { padding: 15px; border: 1px solid #bcd5f6; border-radius: 10px; color: #245a9f; background: #edf5ff; font-size: 14px; font-weight: 700; line-height: 1.7; }
.customer-welcome { background: linear-gradient(120deg, #253b52, #2c7e9b); }
.customer-welcome .primary { margin-left: auto; border: 1px solid #b8e5f0; background: #1d7190; }
.customer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 2px 12px; }
.customer-toolbar h3 { margin: 0; font-size: 17px; }
.customer-toolbar p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.customer-search-box { min-width: 310px; }
.customer-table-panel table { min-width: 1180px; }
.customer-note { display: block; margin-top: 5px; max-width: 260px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.customer-contact small { display: block; margin-top: 4px; color: var(--muted); }
.customer-order-summary strong, .customer-order-summary small { display: block; white-space: nowrap; }
.customer-order-summary strong { color: #244d68; }
.customer-order-summary small { margin-top: 4px; color: #a15d13; font-weight: 700; }
.customer-order-summary button { margin-top: 7px; padding: 4px 8px; border: 1px solid #b7ceda; border-radius: 6px; color: #25627d; background: #f4fbfe; font-size: 14px; font-weight: 800; }
.customer-order-summary button:hover { border-color: #43839e; background: #eaf7fb; }
.customer-last-order { color: #52677d; font-weight: 700; white-space: nowrap; }
.customer-inactive-row { opacity: .62; }
.sales-order-welcome { background: linear-gradient(120deg, #653c18, #d6892d); }
.sales-order-welcome .primary { margin-left: auto; border: 1px solid #ffd9a0; background: #b96a16; }
.sales-order-ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 2px 12px; }
.sales-order-ledger-head h3 { margin: 0; font-size: 17px; }
.sales-order-ledger-head p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.sales-order-ledger-head span { padding: 7px 10px; border-radius: 999px; color: #9b5d10; background: #fff3dc; font-size: 14px; font-weight: 800; }
.sales-order-search { display: grid; grid-template-columns: minmax(280px, 1fr) auto auto; align-items: center; gap: 10px; margin: 0 2px 13px; padding: 12px; border: 1px solid #eadcc8; border-radius: 11px; background: #fffaf3; }
.sales-order-search .search { width: 100%; background: #fff; }
.sales-order-search > strong { min-width: 76px; color: #9b5d10; font-size: 14px; text-align: right; }
.sales-order-status-filter { display: flex; gap: 8px; margin: 0 2px 13px; }
.sales-order-status-filter button { min-height: 34px; padding: 8px 14px; border: 1px solid #e5d5bf; border-radius: 999px; color: #77634a; background: #fff; font-size: 14px; font-weight: 800; }
.sales-order-status-filter button:hover { border-color: #d99a49; color: #a45f0e; }
.sales-order-status-filter button.active { border-color: #d88629; color: #fff; background: #c87317; box-shadow: 0 5px 12px #b96a1622; }
.sales-order-status-filter button.urgent { border-color: #efc1c6; color: #b83946; background: #fff6f7; }
.sales-order-status-filter button.urgent.active { border-color: #d64a58; color: #fff; background: #cf3f4e; }
.sales-order-list { display: grid; gap: 13px; }
.sales-order-card { overflow: hidden; border: 1px solid #eadcc8; border-radius: 13px; background: #fff; box-shadow: 0 6px 18px #1829410b; }
.sales-order-card.pending { border-left: 6px solid #e09a3d; }
.sales-order-card.pending.overdue { border-color: #e6a6ad; border-left: 6px solid #d54553; box-shadow: 0 7px 20px #c7374517; }
.sales-order-card.shipped { border-left: 6px solid #13a77b; }
.sales-order-card.cancelled { opacity: .68; border-left: 6px solid #9aa6b6; }
.sales-order-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 19px; background: #fffaf3; }
.sales-order-card-head span { color: #a56515; font-size: 14px; font-weight: 900; letter-spacing: .5px; }
.sales-order-card-head h3 { margin: 4px 0; font-size: 18px; }
.sales-order-card-head p { margin: 0; color: var(--muted); font-size: 14px; }
.sales-order-ship-plan { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.sales-order-ship-timing { padding: 3px 7px; border-radius: 999px; color: #52637a; background: #edf2f7; font-size: 14px; }
.sales-order-ship-timing.overdue { color: #fff; background: #d54553; }
.sales-order-ship-timing.today { color: #8d5608; background: #ffe6b9; }
.sales-order-ship-timing.upcoming { color: #26629d; background: #e6f1ff; }
.sales-order-status { padding: 7px 10px; border-radius: 999px; font-size: 14px; }
.sales-order-status.pending { color: #a5620f; background: #fff1d8; }
.sales-order-status.shipped { color: #087553; background: #e7f9f2; }
.sales-order-status.cancelled { color: #68758a; background: #eef2f6; }
.sales-order-customer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--line); }
.sales-order-customer div { padding: 11px 14px; background: #fbfcfd; }
.sales-order-customer span { display: block; color: var(--muted); font-size: 14px; }
.sales-order-customer strong { display: block; margin-top: 4px; color: #344762; font-size: 14px; }
.sales-order-customer.hidden-customer { display: block; padding: 12px 16px; color: #6a778d; background: #f7f9fc; font-size: 14px; font-weight: 700; }
.sales-order-cancelled-summary { display: flex; align-items: center; gap: 14px; padding: 12px 17px; border-bottom: 1px solid #d9dee6; color: #5f6b7b; background: #f4f6f8; font-size: 14px; }
.sales-order-cancelled-summary strong { color: #3e4a59; font-size: 14px; }
.sales-order-items { display: grid; gap: 8px; padding: 14px 17px; }
.sales-order-items div { display: grid; grid-template-columns: minmax(220px, 1fr) 160px 100px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #edf0f5; border-radius: 9px; background: #fff; }
.sales-order-items strong { color: #263a56; font-size: 14px; }
.sales-order-items span { color: var(--muted); font-size: 14px; }
.sales-order-items b { color: #9d5a0b; font-size: 14px; text-align: right; }
.sales-order-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 12px 17px; border-top: 1px solid var(--line); background: #fbfcfd; }
.danger-outline { border-color: #f0c0c6; color: #c94452; background: #fff4f5; }
.sales-order-foot { padding: 10px 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; background: #f8fafc; }
.worker-shipment-task { overflow: hidden; border: 2px solid #e5d5bf; border-left: 8px solid #df9536; border-radius: 15px; background: #fff; box-shadow: 0 7px 20px #1829410d; }
.worker-shipment-task.overdue { border-color: #e5a7ae; border-left-color: #d54553; background: #fffafa; }
.worker-shipment-task.shipped { border-color: #b8dfd2; border-left-color: #13a77b; background: #fbfffd; }
.worker-shipment-head { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 15px 18px; background: #fff8ed; }
.worker-shipment-task.overdue .worker-shipment-head { background: #fff0f2; }
.worker-shipment-task.shipped .worker-shipment-head { background: #effbf7; }
.worker-shipment-head span { display: block; color: #8b6738; font-size: 14px; font-weight: 800; }
.worker-shipment-head > div > strong { display: block; margin-top: 4px; color: #5c3c18; font-size: 16px; }
.worker-shipment-plan { display: flex; align-items: center; gap: 9px; padding: 12px 18px; border-block: 1px solid #eee4d6; color: #76644c; }
.worker-shipment-plan > span { font-size: 14px; font-weight: 800; }
.worker-shipment-plan > strong { color: #3d4d64; font-size: 14px; }
.worker-shipment-products { display: grid; gap: 10px; padding: 14px 18px; }
.worker-shipment-product { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 15px; border: 1px solid #e4e9f0; border-radius: 11px; background: #f9fafc; }
.worker-shipment-product-name { min-width: 0; }
.worker-shipment-product-name span, .worker-shipment-quantity span { display: block; color: #718097; font-size: 14px; font-weight: 800; }
.worker-shipment-product-name > strong { display: block; margin-top: 5px; color: #20477e; font-size: 20px; overflow-wrap: anywhere; }
.worker-shipment-product-name h4 { margin: 5px 0 0; color: #253955; font-size: 15px; }
.worker-shipment-product-name small { display: block; margin-top: 5px; color: #68778d; font-size: 14px; }
.worker-shipment-quantity { min-width: 112px; padding-left: 16px; border-left: 1px solid #dfe5ed; text-align: center; }
.worker-shipment-quantity strong { display: block; margin-top: 6px; color: #d1790b; font-size: 34px; line-height: 1; }
.worker-shipment-quantity em { font-size: 14px; font-style: normal; }
.worker-shipment-actions { display: grid; gap: 9px; padding: 13px 18px 17px; border-top: 1px solid #e7ebf0; background: #fbfcfd; }
.worker-shipment-confirm { width: 100%; min-height: 52px; border: 0; border-radius: 10px; color: #fff; background: #c87518; font-size: 15px; font-weight: 900; box-shadow: 0 7px 16px #c8751828; }
.worker-shipment-task.overdue .worker-shipment-confirm { background: #cb4050; box-shadow: 0 7px 16px #cb405028; }
.worker-shipment-confirmed { padding: 15px; border-radius: 10px; color: #087553; background: #e2f7ef; text-align: center; font-size: 14px; font-weight: 900; }
.worker-shipment-foot { padding: 10px 18px; border-top: 1px solid #e3ebe7; color: #637b72; background: #f5fbf8; font-size: 14px; }
.sales-order-modal-card { width: min(860px, 100%); }
.sales-order-form { padding: 22px 23px; }
.sales-order-items-head { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; }
.sales-order-items-head strong { font-size: 14px; }
.sales-order-item-rows { display: grid; gap: 10px; }
.sales-order-item-row { display: grid; grid-template-columns: minmax(240px, 1fr) 120px 120px 80px; align-items: end; gap: 10px; padding: 12px; border: 1px solid #e4ebf2; border-radius: 10px; background: #fafbfd; }
.shipping-welcome { background: linear-gradient(120deg, #123f55, #21819a); }
.shipping-welcome .primary { margin-left: auto; border: 1px solid #a8e2ea; color: #12485c; background: #fff; }
.shipping-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }
.shipping-summary article { padding: 15px 17px; border: 1px solid #d7e5e9; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px #132c3b0a; }
.shipping-summary span { display: block; color: #718391; font-size: 14px; font-weight: 800; }
.shipping-summary strong { display: block; margin-top: 6px; color: #184f64; font-size: 27px; }
.shipping-summary .waiting strong { color: #ae6e0a; }
.shipping-summary .moving strong { color: #2664a1; }
.shipping-summary .danger strong { color: #c03d4b; }
.shipping-ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 17px 2px 12px; }
.shipping-ledger-head h3 { margin: 0; color: #173b4d; font-size: 18px; }
.shipping-ledger-head p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.shipping-ledger-head > span { padding: 8px 11px; border-radius: 999px; color: #1c6574; background: #eaf7f8; font-size: 14px; font-weight: 800; }
.shipping-filters { display: grid; grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(130px, auto)) repeat(2, minmax(120px, auto)) auto; gap: 9px; align-items: end; margin-bottom: 14px; padding: 12px; border: 1px solid #d8e7ea; border-radius: 12px; background: #f5fbfc; }
.shipping-filters .search { width: 100%; background: #fff; }
.shipping-filters select, .shipping-filters input[type="date"] { width: 100%; min-height: 38px; border: 1px solid #d4e1e5; border-radius: 8px; padding: 8px 9px; color: #304c5c; background: #fff; font-size: 14px; }
.shipping-filters label span { display: block; margin-bottom: 4px; color: #71828c; font-size: 14px; font-weight: 800; }
.shipping-filters > strong { grid-column: 1 / -1; color: #276174; font-size: 14px; }
.shipping-filters.worker-mode { grid-template-columns: 1fr auto; }
.shipping-filters.worker-mode > :not(.search):not(strong) { display: none; }
.shipping-task-list { display: grid; gap: 17px; }
.shipping-worker-group-title { margin: 3px 2px -5px; color: #214e60; font-size: 17px; }
.shipping-worker-group-title.recent { margin-top: 12px; padding-top: 15px; border-top: 2px solid #dce6e9; color: #647580; }
.shipping-task-card { overflow: hidden; border: 2px solid #d8e5e9; border-left: 8px solid #27778c; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px #132b3c0e; }
.shipping-task-card.mode-third_party_pickup { border-left-color: #7b5bb8; }
.shipping-task-card.mode-customer_pickup { border-left-color: #c57a18; }
.shipping-task-card.status-exception, .shipping-task-card.overdue { border-color: #e6a3aa; border-left-color: #cf4050; }
.shipping-task-card.status-completed, .shipping-task-card.status-handed_over { border-color: #b8ded2; border-left-color: #159776; }
.shipping-task-card.status-cancelled { opacity: .7; border-left-color: #8995a5; }
.shipping-task-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 17px 19px; background: #f3fafb; }
.shipping-task-card.mode-third_party_pickup .shipping-task-head { background: #f7f3fc; }
.shipping-task-card.mode-customer_pickup .shipping-task-head { background: #fff8ed; }
.shipping-task-card.status-exception .shipping-task-head, .shipping-task-card.overdue .shipping-task-head { background: #fff2f3; }
.shipping-task-head small { display: block; margin-top: 10px; color: #6f8390; font-size: 14px; font-weight: 800; }
.shipping-task-head h3 { margin: 3px 0; color: #173e50; font-size: 21px; }
.shipping-task-head p { margin: 0; color: #697b88; font-size: 14px; }
.shipping-mode-badge { display: inline-flex; padding: 6px 9px; border-radius: 999px; color: #fff; background: #23788d; font-size: 14px; font-weight: 900; }
.shipping-mode-badge.third_party_pickup { background: #7653b2; }
.shipping-mode-badge.customer_pickup { background: #bd7110; }
.shipping-task-status-area { display: flex; align-items: flex-end; flex-direction: column; gap: 7px; }
.shipping-status-badge, .shipping-alert-badge { display: inline-flex; padding: 7px 10px; border-radius: 999px; color: #315f71; background: #dceff3; font-size: 14px; white-space: nowrap; }
.shipping-status-badge.in_transit { color: #235b92; background: #e4f0fc; }
.shipping-status-badge.completed, .shipping-status-badge.handed_over { color: #087257; background: #e1f6ef; }
.shipping-status-badge.exception, .shipping-alert-badge { color: #fff; background: #cb4050; }
.shipping-status-badge.cancelled { color: #667487; background: #e9edf2; }
.shipping-assignment-line { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-block: 1px solid #dfe8eb; background: #dfe8eb; }
.shipping-assignment-line div { padding: 11px 18px; background: #fbfdfd; }
.shipping-assignment-line span, .shipping-fact-grid span, .shipping-address-line > span, .shipping-notes-grid span { display: block; color: #71828d; font-size: 14px; font-weight: 800; }
.shipping-assignment-line strong, .shipping-fact-grid strong, .shipping-address-line strong, .shipping-notes-grid strong { display: block; margin-top: 4px; color: #263e4e; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.shipping-info-section { margin: 14px 17px 0; padding: 15px; border: 1px solid #dfe8eb; border-radius: 12px; background: #fff; }
.shipping-info-section > h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #1e4b5e; font-size: 14px; }
.shipping-info-section > h4 > b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: #23788d; font-size: 14px; }
.shipping-product-list { display: grid; gap: 9px; }
.shipping-product-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 13px; border: 1px solid #e2eaed; border-radius: 10px; background: #f9fbfc; }
.shipping-product-row > div:first-child > span, .shipping-product-quantity > span { display: block; color: #748691; font-size: 14px; font-weight: 800; }
.shipping-product-row > div:first-child > strong { display: block; margin-top: 4px; color: #1c5c87; font-size: 21px; overflow-wrap: anywhere; }
.shipping-product-row h4 { margin: 4px 0 0; color: #263d4d; font-size: 14px; }
.shipping-product-row small { display: block; margin-top: 4px; color: #6f808c; font-size: 14px; }
.shipping-product-quantity { min-width: 122px; padding-left: 16px; border-left: 1px solid #dce6e9; text-align: right; }
.shipping-product-quantity strong { display: block; margin-top: 5px; color: #c87317; font-size: 29px; line-height: 1; }
.shipping-product-quantity em { font-size: 14px; font-style: normal; }
.shipping-notes-grid, .shipping-fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shipping-notes-grid { margin-top: 10px; }
.shipping-notes-grid > div, .shipping-fact-grid > div, .shipping-address-line { padding: 10px 11px; border-radius: 9px; background: #f5f8f9; }
.shipping-address-line { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; margin-top: 10px; }
.shipping-address-line > span { grid-column: 1 / -1; }
.shipping-address-line button, .shipping-call-link { justify-self: end; padding: 7px 9px; border: 1px solid #a9cbd2; border-radius: 7px; color: #1e6b7d; background: #fff; font-size: 14px; font-weight: 900; text-decoration: none; }
.shipping-call-link { display: inline-flex; margin-top: 7px; }
.shipping-recipient-note { margin: 10px 0 0; padding: 10px 11px; border-radius: 9px; color: #6a5328; background: #fff8e8; font-size: 14px; line-height: 1.6; }
.shipping-pickup-party { border-color: #ddceec; background: #fcfaff; }
.shipping-exception-banner { display: flex; flex-direction: column; gap: 5px; margin: 14px 17px 0; padding: 14px 16px; border: 1px solid #e9a8af; border-radius: 11px; color: #99323e; background: #fff0f2; }
.shipping-exception-banner strong { font-size: 14px; }
.shipping-exception-banner span { font-size: 14px; }
.shipping-task-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; margin-top: 14px; padding: 14px 17px 17px; border-top: 1px solid #e0e8eb; background: #f9fbfc; }
.shipping-task-actions button { min-height: 48px; border-radius: 10px; font-size: 14px; font-weight: 900; }
.shipping-primary-action { grid-column: 1 / -1; min-height: 58px !important; border: 0; color: #fff; background: #24798e; font-size: 16px !important; box-shadow: 0 8px 18px #1e6f8425; }
.shipping-primary-action.complete { background: #158467; }
.shipping-primary-action.handoff { background: #7454ae; }
.shipping-exception-action { border: 1px solid #dc9099; color: #b53745; background: #fff2f3; }
.shipping-event-timeline { margin: 0 17px 17px; border: 1px solid #dbe5e8; border-radius: 10px; background: #fff; }
.shipping-event-timeline summary { padding: 12px 14px; color: #315f6e; font-size: 14px; font-weight: 900; cursor: pointer; }
.shipping-event-timeline ol { display: grid; gap: 0; margin: 0; padding: 0 14px 14px; list-style: none; }
.shipping-event-timeline li { display: grid; grid-template-columns: 14px 1fr; gap: 9px; padding: 10px 0; border-top: 1px solid #eef2f3; }
.shipping-event-timeline li > i { width: 9px; height: 9px; margin-top: 4px; border: 2px solid #fff; border-radius: 50%; background: #2b8194; box-shadow: 0 0 0 2px #c7dfe4; }
.shipping-event-timeline li strong, .shipping-event-timeline li span { display: block; }
.shipping-event-timeline li strong { color: #294959; font-size: 14px; }
.shipping-event-timeline li span { margin-top: 3px; color: #7a8992; font-size: 14px; }
.shipping-event-timeline li p { margin: 5px 0 0; color: #5b6c75; font-size: 14px; }
.shipping-event-timeline li button { margin-top: 7px; padding: 6px 8px; border: 1px solid #b8d4da; border-radius: 6px; color: #236b7a; background: #f3fafb; font-size: 14px; font-weight: 900; }
.modal-card:has(.shipping-task-form) { width: min(920px, 100%); }
.shipping-task-form { display: grid; gap: 15px; }
.shipping-form-notice { padding: 12px 14px; border: 1px solid #b9d8de; border-left: 5px solid #23788d; border-radius: 9px; color: #356574; background: #f0fafb; font-size: 14px; line-height: 1.6; }
.shipping-form-section { padding: 15px; border: 1px solid #dce6e9; border-radius: 11px; background: #fafcfd; }
.shipping-form-section > h4 { margin: 0 0 13px; color: #245364; font-size: 14px; }
.shipping-source-preview { display: grid; gap: 5px; padding: 12px 14px; border-radius: 9px; color: #5b6f78; background: #f3f6f7; font-size: 14px; }
.shipping-source-preview strong { color: #274d5c; font-size: 14px; }
.shipping-source-item-list { display: grid; gap: 9px; margin-top: 6px; }
.shipping-source-item { display: grid; grid-template-columns: minmax(220px, 1fr) 100px minmax(160px, .7fr); align-items: end; gap: 10px; padding: 11px; border: 1px solid #dce6e9; border-radius: 9px; background: #fff; }
.shipping-source-item > div b, .shipping-source-item > div span { display: block; }
.shipping-source-item > div b { color: #254d5e; font-size: 14px; }
.shipping-source-item > div span { margin-top: 4px; color: #71818b; font-size: 14px; }
.shipping-source-item label { color: #657681; font-size: 14px; font-weight: 800; }
.shipping-source-item input { width: 100%; min-height: 38px; margin-top: 5px; border: 1px solid #d3e0e4; border-radius: 7px; padding: 7px 8px; }
.shipping-empty-detail { margin: 0; color: #7b8991; font-size: 14px; }
.finance-welcome { background: linear-gradient(120deg, #17335f, #1f6f8f); }
.finance-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.finance-card { display: flex; align-items: center; gap: 15px; min-height: 126px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 6px 18px #1829410b; }
.finance-card-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; background: #edf3ff; color: var(--blue); font-size: 22px; font-weight: 900; }
.finance-card span { display: block; color: var(--muted); font-size: 14px; font-weight: 800; }
.finance-card strong { display: block; margin: 4px 0; color: var(--navy); font-size: 28px; }
.finance-card small { display: block; color: #7a879b; font-size: 14px; line-height: 1.45; }
.finance-card.green .finance-card-icon { color: #087553; background: #e7f9f2; }
.finance-card.green strong { color: #087553; }
.finance-card.violet .finance-card-icon { color: #7055cf; background: #f0eaff; }
.finance-card.amber .finance-card-icon { color: #a86400; background: #fff3db; }
.finance-card.red .finance-card-icon { color: var(--red); background: #ffeaed; }
.finance-card.red strong { color: var(--red); }
.finance-card.gray .finance-card-icon { color: #66758b; background: #eef2f6; }
.finance-ledger-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 15px 17px; border: 1px solid #d7e4f4; border-radius: 12px; background: #f7fbff; color: #51627a; font-size: 14px; }
.finance-ledger-note strong { color: var(--navy); white-space: nowrap; }
.system-backup-welcome { background: linear-gradient(120deg, #173f3a, #28796c); }
.system-backup-welcome-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.system-backup-welcome-actions button { min-height: 39px; padding: 9px 14px; border: 1px solid #ffffff70; border-radius: 9px; color: #fff; background: #ffffff16; font-size: 14px; font-weight: 800; }
.system-backup-welcome-actions .primary { background: #fff; color: #176457; box-shadow: 0 7px 18px #0a30262b; }
.system-backup-welcome-actions button:disabled { opacity: .72; cursor: wait; }
.system-backup-notice { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; padding: 15px 18px; border: 1px solid #f1d39a; border-radius: 12px; background: #fff8e8; }
.system-backup-notice strong { color: #87570d; font-size: 14px; white-space: nowrap; }
.system-backup-notice span { color: #7f6a49; font-size: 14px; line-height: 1.6; }
.deployment-readiness-panel { margin-bottom: 14px; overflow: hidden; border: 1px solid #cfdde5; border-radius: 13px; background: #fff; box-shadow: 0 7px 20px #18354b0a; }
.deployment-readiness-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; }
.deployment-readiness-head span { color: #397166; font-size: 14px; font-weight: 900; letter-spacing: .08em; }
.deployment-readiness-head h3 { margin: 5px 0 4px; color: #233f53; font-size: 18px; }
.deployment-readiness-head p { margin: 0; color: #75838f; font-size: 14px; }
.deployment-readiness-head button { min-height: 40px; padding: 9px 15px; border: 1px solid #2f776b; border-radius: 9px; color: #fff; background: #2f776b; font-size: 14px; font-weight: 900; }
.deployment-readiness-head button:disabled { opacity: .65; cursor: wait; }
.deployment-readiness-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-top: 1px solid #edf2f4; border-bottom: 1px solid #edf2f4; }
.deployment-readiness-summary strong { font-size: 14px; }
.deployment-readiness-summary span { color: #6c7b85; font-size: 14px; text-align: right; }
.deployment-readiness-summary.pending { color: #7c6537; background: #fffaf0; }
.deployment-readiness-summary.ready { color: #087759; background: #f0faf6; }
.deployment-readiness-summary.attention { color: #b13b49; background: #fff2f4; }
.deployment-readiness-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px 20px; }
.deployment-readiness-check { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 10px; min-width: 0; padding: 13px; border: 1px solid #dfe8eb; border-radius: 10px; background: #fbfdfd; }
.deployment-readiness-check > i { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: #fff; font-style: normal; font-weight: 900; }
.deployment-readiness-check.passed > i { background: #24806d; }
.deployment-readiness-check.failed { border-color: #f0c5cb; background: #fffafb; }
.deployment-readiness-check.failed > i { background: #c44755; }
.deployment-readiness-check strong, .deployment-readiness-check p, .deployment-readiness-check small { display: block; }
.deployment-readiness-check strong { color: #2c4658; font-size: 14px; }
.deployment-readiness-check p { margin: 4px 0 0; color: #6e7f89; font-size: 14px; line-height: 1.5; }
.deployment-readiness-check small { margin-top: 7px; color: #a13342; font-size: 14px; font-weight: 800; }
.deployment-readiness-empty { grid-column: 1 / -1; padding: 23px; border: 1px dashed #cbd7dc; border-radius: 9px; color: #7a898f; text-align: center; font-size: 14px; }
#deploymentReadinessMeta { display: block; padding: 0 20px 15px; color: #7e8d93; font-size: 14px; }
.system-backup-reminder { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; align-items: center; gap: 11px 18px; margin-bottom: 14px; padding: 15px 18px; border: 1px solid #c9ddd8; border-radius: 12px; background: #f6fbfa; }
.system-backup-reminder strong, .system-backup-reminder span { display: block; }
.system-backup-reminder strong { color: #1f5f55; font-size: 14px; }
.system-backup-reminder span, .system-backup-reminder small { color: #70837f; font-size: 14px; }
.system-backup-reminder span { margin-top: 4px; }
.system-backup-reminder label { display: flex; align-items: center; gap: 7px; color: #315f58; font-size: 14px; font-weight: 800; white-space: nowrap; }
.system-backup-reminder input { width: 74px; padding: 8px 9px; border: 1px solid #aac7c1; border-radius: 8px; color: #214f48; background: #fff; text-align: center; }
.system-backup-reminder button { padding: 9px 13px; border: 1px solid #5b9c90; border-radius: 8px; color: #fff; background: #28796c; font-size: 14px; font-weight: 800; }
.system-backup-reminder button:disabled { opacity: .65; }
.system-backup-reminder small { grid-column: 1 / -1; }
.system-backup-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 13px; margin-bottom: 17px; }
.system-backup-summary article { min-height: 104px; padding: 17px 19px; border: 1px solid #dce7e4; border-radius: 12px; background: #fff; }
.system-backup-summary span, .system-backup-summary small { display: block; color: #788b88; font-size: 14px; }
.system-backup-summary strong { display: block; margin: 7px 0 5px; color: #1f4f48; font-size: 22px; }
.system-backup-summary strong.is-verified { color: #087759; }
.system-backup-summary strong.is-failed { color: #c13f4d; }
.system-backup-ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0 2px 11px; }
.system-backup-ledger-head h3 { margin: 0; font-size: 17px; }
.system-backup-ledger-head p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.system-backup-ledger-head > span { padding: 8px 11px; border-radius: 8px; color: #687a77; background: #eaf3f1; font-size: 14px; }
.system-backup-ledger-head > span strong { color: #205f55; }
.system-backup-list { display: grid; gap: 14px; }
.system-backup-card { overflow: hidden; border: 1px solid #dbe7e4; border-radius: 13px; background: #fff; box-shadow: 0 7px 20px #15362f0b; }
.system-backup-card.has-error { border-color: #efbdc3; }
.system-backup-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 17px 19px 14px; }
.system-backup-card-head h3 { margin: 7px 0 3px; color: #233a36; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.system-backup-card-head p { margin: 0; color: var(--muted); font-size: 14px; }
.system-backup-card-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.system-backup-card-actions button { padding: 8px 12px; border: 1px solid #99bdb6; border-radius: 8px; color: #236c60; background: #f5fbf9; font-size: 14px; font-weight: 800; }
.system-backup-card-actions button:first-child { border-color: #87a9d9; color: #285f9f; background: #f2f7ff; }
.system-backup-card-actions button:disabled { opacity: .62; cursor: wait; }
.backup-integrity { display: inline-flex; align-items: center; min-height: 25px; padding: 0 10px; border-radius: 999px; font-size: 14px; font-weight: 900; }
.backup-integrity.verified { color: #087759; background: #e5f7f0; }
.backup-integrity.failed { color: #b63242; background: #ffe9ec; }
.backup-integrity.pending { color: #8d651e; background: #fff3dc; }
.system-backup-facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #edf2f1; border-bottom: 1px solid #edf2f1; background: #fbfdfc; }
.system-backup-facts > div { padding: 14px 18px; border-right: 1px solid #edf2f1; }
.system-backup-facts > div:last-child { border-right: 0; }
.system-backup-facts span, .system-backup-facts small { display: block; color: #83928f; font-size: 14px; }
.system-backup-facts strong { display: block; margin: 5px 0 3px; color: #2f4d48; font-size: 15px; }
.system-backup-verification { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 18px; font-size: 14px; }
.system-backup-verification strong { font-size: 14px; }
.system-backup-verification span { color: #71817e; text-align: right; }
.system-backup-verification.verified { color: #087759; background: #f1fbf7; }
.system-backup-verification.failed { color: #b63242; background: #fff2f4; }
.system-backup-verification.pending { color: #8d651e; background: #fff9ed; }
.backup-preflight { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 18px; border-top: 1px solid #e7eeec; }
.backup-preflight > div > span { display: block; margin-bottom: 3px; color: #7d8c89; font-size: 14px; font-weight: 800; }
.backup-preflight strong { font-size: 14px; }
.backup-preflight > span { color: #71817e; font-size: 14px; text-align: right; }
.backup-preflight.passed { color: #087759; background: #eefaf5; }
.backup-preflight.failed { color: #b63242; background: #fff0f2; }
.backup-preflight.not-run { color: #6d788a; background: #f6f8fa; }
.backup-export { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; border-top: 1px solid #e7eeec; }
.backup-export > div:first-child > span { display: block; margin-bottom: 3px; color: #7d8c89; font-size: 14px; font-weight: 800; }
.backup-export strong { display: block; font-size: 14px; }
.backup-export small { display: block; max-width: 760px; margin-top: 5px; overflow-wrap: anywhere; color: #6d7b89; font-size: 14px; line-height: 1.5; }
.backup-export > div:last-child { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.backup-export > div:last-child > span { color: #71817e; font-size: 14px; text-align: right; }
.backup-export button { padding: 8px 12px; border: 1px solid #74a595; border-radius: 8px; color: #087759; background: #fff; font-size: 14px; font-weight: 900; white-space: nowrap; }
.backup-export button:disabled { opacity: .62; cursor: wait; }
.backup-export.ready { color: #087759; background: #eaf8f2; }
.backup-export.failed { color: #b63242; background: #fff0f2; }
.backup-export.not-generated { color: #6d788a; background: #f6f8fa; }
.system-backup-empty { padding: 34px; border: 1px dashed #b8ccc7; border-radius: 12px; background: #f8fbfa; }
.audit-log-welcome { background: linear-gradient(120deg, #202a3d, #4f617c); }
.audit-view-tabs { display: inline-flex; gap: 5px; padding: 5px; border: 1px solid #dfe6ef; border-radius: 11px; background: #eef2f7; }
.audit-view-tabs button { min-width: 112px; padding: 9px 15px; border: 0; border-radius: 8px; color: #66758b; background: transparent; font-size: 14px; font-weight: 800; }
.audit-view-tabs button.active { color: #fff; background: #324b70; box-shadow: 0 5px 13px #1c304b2b; }
.audit-log-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 2px 12px; }
.audit-log-toolbar h3 { margin: 0; font-size: 17px; }
.audit-log-toolbar p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.audit-log-filters { display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.audit-date-filters { display: flex; align-items: flex-end; gap: 7px; }
.audit-date-filters label { display: grid; gap: 4px; color: #68768a; font-size: 14px; font-weight: 800; }
.audit-date-filters input { min-height: 39px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; color: #32435d; background: #fff; font: inherit; }
.audit-date-filters i { align-self: center; margin-top: 14px; color: #8490a0; font-size: 14px; font-style: normal; }
.audit-date-actions { display: flex; gap: 5px; }
.audit-date-actions button { min-height: 39px; padding: 0 10px; border: 1px solid #c9d5e6; border-radius: 9px; color: #3d5f8c; background: #f5f8fc; font-size: 14px; font-weight: 800; }
.audit-date-actions button:hover { border-color: #9cb4d6; background: #eaf2fd; }
.audit-export-button { min-height: 39px; padding: 0 13px; border: 1px solid #aac4e7; border-radius: 9px; color: #fff; background: #356cb4; font-size: 14px; font-weight: 900; }
.audit-export-button:hover { background: #285b9e; }
.audit-export-button:disabled { cursor: wait; opacity: .65; }
.audit-log-search { min-width: 340px; }
.audit-log-table-panel table { min-width: 1080px; }
.audit-log-table-panel td strong, .audit-log-table-panel td small { display: block; }
.audit-log-table-panel td small { margin-top: 4px; color: var(--muted); font-size: 14px; }
.audit-module { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; padding: 6px 10px; border-radius: 999px; color: #285da9; background: #e9f1ff; font-size: 14px; font-weight: 800; }
.audit-business-operation { color: #24344f; font-size: 14px; }
.audit-business-target { color: #465673; font-size: 14px; }
.audit-technical-path { display: block; max-width: 390px; margin-top: 5px; overflow: hidden; color: #9aa5b5; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.audit-result-code { white-space: nowrap; }
.audit-action, .audit-status { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; padding: 6px 9px; border-radius: 999px; font-size: 14px; font-weight: 800; }
.audit-action.post { color: #0a7655; background: #e7f9f2; }
.audit-action.patch, .audit-action.put { color: #865400; background: #fff3db; }
.audit-action.delete { color: #b63e4c; background: #ffeaed; }
.audit-status.ok { color: #0a7655; background: #e7f9f2; }
.audit-status.error { color: #b63e4c; background: #ffeaed; }
.evidence-ledger-filters { display: flex; align-items: center; gap: 10px; }
.evidence-ledger-filters select { min-height: 39px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: 10px; color: #53617a; background: #fff; font-size: 14px; }
.evidence-ledger-table table { min-width: 980px; }
.evidence-ledger-table td strong, .evidence-ledger-table td small { display: block; }
.evidence-ledger-table td small { margin-top: 4px; color: var(--muted); font-size: 14px; }
.evidence-action-label { color: #263750; font-size: 14px; }
.evidence-ledger-view { padding: 8px 11px; border: 1px solid #b9cdee; border-radius: 8px; color: #2f67ba; background: #f1f6ff; font-size: 14px; font-weight: 800; }
.evidence-ledger-view:hover { color: #fff; background: #3977e8; }
.task-workbench { margin-bottom: 18px; overflow: hidden; border: 1px solid #dfe7f2; border-radius: 13px; background: #fff; box-shadow: 0 3px 12px #1f335408; }
.task-workbench-head { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.task-workbench-head h3 { margin: 0; font-size: 16px; }
.task-workbench-head p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.current-identity { margin-left: auto; padding: 8px 12px; border: 1px solid #dce5f1; border-radius: 9px; background: #f7f9fc; }
.current-identity span, .current-identity strong { display: block; }
.current-identity span { color: var(--muted); font-size: 14px; }
.current-identity strong { margin-top: 3px; color: #2d4770; font-size: 14px; }
.packaging-task-list { display: grid; gap: 10px; padding: 14px; background: #f8fafd; }
.packaging-task { overflow: hidden; border: 2px solid #f3b85f; border-radius: 14px; background: #fff; box-shadow: 0 5px 18px #263b5f12; }
.packaging-task.is-completed { border-color: #7ed7bc; opacity: .86; }
.packaging-task.is-cancelled { border-color: #aeb7c3; opacity: .78; }
.packaging-task.shortage-task { border: 2px solid #e55a68; }
.packaging-task-disclosure { border-top: 1px solid var(--line); background: #fff; }
.packaging-task-disclosure > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 22px; cursor: pointer; list-style: none; color: var(--ink); font-size: 16px; font-weight: 900; }
.packaging-task-disclosure > summary::-webkit-details-marker { display: none; }
.packaging-task-disclosure > summary::before { content: '›'; flex: 0 0 auto; color: var(--red); font-size: 28px; line-height: 1; transition: transform .16s ease; }
.packaging-task-disclosure[open] > summary::before { transform: rotate(90deg); }
.packaging-task-disclosure > summary strong { color: #47596f; font-size: 14px; }
.packaging-task-disclosure > summary b { padding: 5px 9px; border-radius: 999px; font-size: 14px; }
.packaging-task-disclosure > summary .packaging-disclosure-ready { color: #16765b; background: #e9f7f2; }
.packaging-task-disclosure > summary .packaging-disclosure-alert { color: #a7313d; background: #fff0f2; }
.packaging-task-disclosure > summary em { margin-left: auto; color: var(--red); font-size: 14px; font-style: normal; }
.packaging-task-disclosure > summary .when-open,
.packaging-task-disclosure[open] > summary .when-closed { display: none; }
.packaging-task-disclosure[open] > summary .when-open { display: inline; }
.packaging-task-disclosure > summary:focus-visible { outline: 3px solid #e4002b2b; outline-offset: -3px; }
.packaging-task-details { background: #fff; }
.task-main { display: grid; grid-template-columns: 110px minmax(240px, 1fr) 180px; align-items: center; gap: 22px; padding: 20px 24px; background: linear-gradient(100deg, #fffaf1, #fff 62%); }
.is-completed .task-main { background: linear-gradient(100deg, #f1fbf7, #fff 62%); }
.is-cancelled .task-main { background: linear-gradient(100deg, #f1f3f5, #fff 62%); }
.task-status span { display: inline-block; padding: 7px 10px; border-radius: 10px; color: #985c08; background: #ffe7bd; font-size: 14px; font-weight: 800; }
.is-completed .task-status span { color: #128160; background: #e4f7f1; }
.is-cancelled .task-status span { color: #667085; background: #edf0f4; }
.task-status small { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; }
.task-model-label { display: block; margin-bottom: 3px; color: #718096; font-size: 14px; font-weight: 700; }
.task-product .task-model-code { display: block; color: #173f80; font-size: 30px; line-height: 1.15; letter-spacing: .6px; }
.task-product h4 { margin: 7px 0 0; color: #33435c; font-size: 16px; }
.task-quantity { padding: 12px 16px; border: 2px solid #ffcf83; border-radius: 12px; text-align: center; background: #fff4df; }
.task-quantity span { display: block; margin-bottom: 2px; color: #89560f; font-size: 14px; font-weight: 700; }
.task-quantity strong { color: #df7a00; font-size: 46px; line-height: 1; }
.task-quantity em { margin-left: 5px; color: #89560f; font-size: 16px; font-style: normal; font-weight: 700; }
.task-progress { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; margin: 15px 24px 0; padding: 13px 16px; border: 1px solid #dce5f0; border-radius: 11px; background: #f8fafd; text-align: center; }
.task-progress span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 14px; }
.task-progress strong { color: #34435a; font-size: 17px; }
.task-progress b { color: #a4afbf; }
.task-progress .progress-done strong { color: var(--green); }
.task-progress .progress-left strong { color: #df7a00; }
.task-key-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 24px 0; }
.task-packaging-checklist { margin: 18px 24px 0; overflow: hidden; border: 2px solid #c9d9d3; border-radius: 16px; background: #f8fbfa; }
.task-packaging-checklist-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; color: #fff; background: linear-gradient(110deg, #173c35, #27745f); }
.task-packaging-checklist-title strong { font-size: 18px; }
.task-packaging-checklist-title span { font-size: 14px; font-weight: 800; opacity: .88; }
.task-packaging-items { display: grid; gap: 1px; background: #dce7e3; }
.task-packaging-item { display: grid; grid-template-columns: 42px minmax(190px, 1.5fr) minmax(210px, 1fr) minmax(145px, .7fr); align-items: center; gap: 14px; padding: 15px 18px; background: #fff; }
.task-packaging-item.is-low-stock { background: #fffaf0; }
.task-packaging-item.is-insufficient { background: #fff2f2; }
.task-packaging-number { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: #fff; background: #226a58; font-size: 18px; }
.task-packaging-name strong, .task-packaging-name small, .task-packaging-name em { display: block; }
.task-packaging-name strong { color: #152f2a; font-size: 17px; }
.task-packaging-name small { margin-top: 4px; color: #71817d; font-size: 14px; }
.task-packaging-name em { margin-top: 6px; color: #a56405; font-size: 14px; font-style: normal; font-weight: 800; }
.task-packaging-quantity { display: grid; gap: 7px; }
.task-packaging-quantity span { color: #6d7b78; font-size: 14px; font-weight: 700; }
.task-packaging-quantity b { margin-left: 5px; color: #263c38; font-size: 15px; }
.task-packaging-quantity strong { margin-left: 5px; color: #087759; font-size: 20px; }
.task-packaging-stock { padding: 9px 12px; border-radius: 11px; text-align: right; }
.task-packaging-stock span, .task-packaging-stock strong, .task-packaging-stock small { display: block; }
.task-packaging-stock span { font-size: 14px; font-weight: 800; opacity: .72; }
.task-packaging-stock strong { margin: 3px 0; font-size: 16px; }
.task-packaging-stock small { font-size: 14px; font-weight: 800; }
.task-packaging-stock.enough { color: #087759; background: #e9f8f1; }
.task-packaging-stock.warning { color: #9b6504; background: #fff0c8; }
.task-packaging-stock.danger { color: #b12d3e; background: #ffdfe3; }
.task-packaging-empty { padding: 20px; color: #a92d3c; background: #fff0f2; }
.task-packaging-empty strong, .task-packaging-empty span { display: block; }
.task-packaging-empty strong { font-size: 17px; }
.task-packaging-empty span { margin-top: 5px; font-size: 14px; }
.task-fact { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid #dbe5f2; border-radius: 10px; background: #f7faff; }
.task-fact span { min-width: 42px; color: #69778c; font-size: 14px; font-weight: 700; }
.task-fact strong { color: #1d3458; font-size: 17px; }
.color-fact { border-color: #e2dcf6; background: #faf8ff; }
.task-configuration { padding: 17px 24px 20px; }
.task-section-title { display: block; margin-bottom: 11px; color: #2e3d56; font-size: 14px; }
.task-config-list { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.task-config-list li { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 11px; border: 1px solid #e1e7ef; border-radius: 9px; color: #43516a; background: #fbfcfe; font-size: 14px; font-weight: 600; }
.task-config-list i { width: 21px; height: 21px; flex: 0 0 21px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 14px; font-style: normal; font-weight: 800; }
.task-action { padding: 0 24px 22px; text-align: center; }
.task-manager-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-manager-actions .danger { min-height: 42px; padding: 9px 15px; border-radius: 9px; font-weight: 800; }
.task-cancelled-mark { display: flex; align-items: center; gap: 14px; padding: 14px 15px; border: 1px solid #d9dee6; border-radius: 10px; color: #5f6b7b; background: #f4f6f8; font-size: 14px; text-align: left; }
.task-cancelled-mark strong { color: #3e4a59; font-size: 14px; }
.task-actions-row { display: grid; grid-template-columns: minmax(150px, .42fr) 1fr; gap: 11px; }
.complete-task { width: 100%; min-height: 54px; border-radius: 11px; background: #119c72; font-size: 18px; box-shadow: 0 7px 16px #119c7230; }
.complete-task:hover { background: #0c865f; }
.shortage-report-button { min-height: 54px; border: 2px solid #ed9aa3; border-radius: 11px; color: #bd3544; background: #fff2f3; font-size: 16px; font-weight: 800; }
.shortage-report-button:hover { background: #ffe5e8; }
.shortage-alert { margin: 0 24px 18px; padding: 14px 15px; border: 1px solid #f1a5ad; border-radius: 10px; color: #a92e3b; background: #fff0f2; }
.shortage-alert-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shortage-alert-title strong { font-size: 14px; }
.shortage-alert-title span { color: #b35a64; font-size: 14px; font-weight: 700; }
.shortage-alert > b { display: block; margin-top: 9px; font-size: 15px; }
.shortage-management-list { display: grid; gap: 8px; margin-top: 12px; }
.shortage-management-item { display: flex; align-items: center; gap: 12px; padding: 10px 11px; border: 1px solid #efc0c5; border-radius: 8px; background: #fff; }
.shortage-management-item div { flex: 1; }
.shortage-management-item strong { display: block; color: #85303a; font-size: 14px; }
.shortage-management-item small { display: block; margin-top: 4px; color: #8c6b70; font-size: 14px; }
.shortage-management-item button { border: 0; border-radius: 8px; padding: 9px 13px; color: #fff; background: #119c72; font-size: 14px; font-weight: 800; }
.shortage-management-item .shortage-photo-button, .shortage-worker-list .shortage-photo-button { width: fit-content; margin-top: 7px; border: 1px solid #efb0b8; border-radius: 7px; padding: 6px 9px; color: #a93442; background: #fff6f7; font-size: 14px; font-weight: 800; }
.shortage-form-hint { margin-bottom: 16px; padding: 13px 15px; border-radius: 9px; color: #8f570b; background: #fff3dd; font-size: 14px; line-height: 1.6; }
.shortage-choice-grid { display: grid; gap: 9px; }
.shortage-choice { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid #dfe5ed; border-radius: 9px; cursor: pointer; background: #fbfcfe; }
.shortage-choice:has(input:checked) { border-color: #e76c79; background: #fff0f2; }
.shortage-choice input { width: 21px; height: 21px; flex: 0 0 21px; accent-color: #d94b59; }
.shortage-choice strong { display: block; color: #34425a; font-size: 14px; }
.shortage-choice small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.shortage-submit { border: 0; border-radius: 9px; padding: 10px 16px; color: #fff; background: #d94b59; font-size: 14px; font-weight: 700; }
.task-completed-mark { display: grid; gap: 7px; padding: 15px; border-radius: 10px; color: #0b7d5a; background: #e7f8f2; font-size: 15px; font-weight: 800; }
.task-completed-mark small { color: #477268; font-size: 14px; font-weight: 600; }
.task-completed-mark em { color: #7a8a86; font-size: 14px; font-style: normal; font-weight: 600; }
.task-completed-mark button, .operation-evidence-summary button { width: fit-content; border: 1px solid #75b7a6; border-radius: 7px; padding: 7px 10px; color: #087559; background: #fff; font-size: 14px; font-weight: 700; }
.task-waiting-mark { display: block; padding: 14px; border-radius: 10px; color: #985c08; background: #fff5e4; font-size: 14px; font-weight: 700; }
.task-empty { padding: 30px; background: #fff; border-radius: 9px; }
.packaging-task-search { display: grid; grid-template-columns: auto minmax(260px, 1fr) auto auto; align-items: center; gap: 12px; margin: 0 18px 18px; padding: 12px 14px; border: 2px solid #f0bd69; border-radius: 12px; background: #fffaf0; }
.packaging-task-search label { color: #70480b; font-size: 16px; font-weight: 900; white-space: nowrap; }
.packaging-task-search > div { display: flex; align-items: center; min-height: 46px; border: 2px solid #d7dee8; border-radius: 9px; background: #fff; }
.packaging-task-search > div:focus-within { border-color: #e29a26; box-shadow: 0 0 0 3px #e39b2520; }
.packaging-task-search > div span { padding-left: 13px; color: #8b97a9; font-size: 22px; }
.packaging-task-search input { width: 100%; padding: 11px 13px; border: 0; outline: 0; color: #26344b; background: transparent; font-size: 16px; font-weight: 700; }
.packaging-task-search strong { min-width: 82px; color: #80591b; font-size: 14px; text-align: center; }
.packaging-task-search > button { min-height: 42px; padding: 0 17px; border: 1px solid #d5a24d; border-radius: 8px; color: #76501a; background: #fff; font-size: 14px; font-weight: 800; }
.packaging-task-status-filter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin: 0 18px 18px; }
.packaging-task-status-filter button { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 58px; padding: 10px 14px; border: 2px solid #dce3ea; border-radius: 11px; color: #5a687b; background: #fff; font-size: 14px; font-weight: 900; }
.packaging-task-status-filter button strong { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 8px; color: #33445c; background: #eef2f6; font-size: 17px; }
.packaging-task-status-filter button.active { border-color: #dc8a15; color: #784807; background: #fff4df; box-shadow: 0 6px 15px #cf7f171c; }
.packaging-task-status-filter button.active strong { color: #fff; background: #df8509; }
.packaging-task-status-filter button.urgent { border-color: #efc1c6; color: #ac3542; background: #fff8f8; }
.packaging-task-status-filter button.urgent.active { border-color: #d64a58; color: #9e2936; background: #ffecee; }
.packaging-task-status-filter button.urgent.active strong { background: #cf3f4e; }
.packaging-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.packaging-summary article { padding: 17px 19px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.packaging-summary span { display: block; color: var(--muted); font-size: 14px; }
.packaging-summary strong { display: block; margin-top: 5px; font-size: 24px; }
.packaging-summary .task-summary { border: 2px solid #f3b85f; background: linear-gradient(105deg, #fff5df, #fffaf1); box-shadow: 0 5px 16px #d98b1820; }
.packaging-summary .task-summary span { color: #87530a; font-size: 14px; font-weight: 800; }
.packaging-summary .task-summary strong { color: #df7a00; font-size: 42px; line-height: 1.1; }
.packaging-summary .task-summary small { color: #9b6b29; font-size: 14px; font-weight: 700; }
.packaging-summary .warning-summary { border-color: #ffd8dc; background: #fff9fa; }
.packaging-summary .warning-summary strong { color: var(--red); }
.packaging-filter { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.packaging-filter label { color: #5e6c82; font-size: 14px; font-weight: 600; }
.packaging-search-box { display: flex; align-items: center; min-width: 390px; border: 1px solid #dfe5ed; border-radius: 8px; background: #fff; }
.packaging-search-box span { padding-left: 11px; color: #8793a5; }
.packaging-search-box input { width: 100%; padding: 9px 11px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.packaging-search-box:focus-within { border-color: #6b9bed; box-shadow: 0 0 0 3px #3977e812; }
.packaging-legend { display: flex; justify-content: flex-end; gap: 18px; margin: 0 2px 10px; color: var(--muted); font-size: 14px; }
.stock-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; }
.stock-dot.normal { background: var(--green); }
.stock-dot.low { background: var(--red); }
.packaging-product-list { display: grid; gap: 15px; }
.packaging-product-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.packaging-product-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; }
.packaging-product-head h3 { display: inline; margin: 0 9px; font-size: 14px; }
.packaging-product-head p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.packaging-card-actions { display: flex; align-items: center; gap: 9px; }
.product-sku { padding: 4px 7px; border-radius: 6px; color: #316ccf; background: #eaf2ff; font-size: 14px; font-weight: 700; }
.accessory-total { padding: 5px 8px; border-radius: 10px; color: #647187; background: #f1f4f8; font-size: 14px; }
.configure-accessory { padding: 7px 10px; border: 1px solid #cfe0fa; border-radius: 7px; color: #316ccf; background: #edf4ff; font-size: 14px; }
.configure-accessory:hover { border-color: #9dbdeb; background: #e3efff; }
.packaging-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.packaging-table-wrap table { min-width: 850px; }
.packaging-table-wrap th { background: #fafbfd; }
.low-stock-row { background: #fffafb; }
.accessory-name { color: #34425a; font-weight: 600; }
.accessory-name small { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; font-weight: 400; }
.accessory-name em { display: block; margin-top: 4px; color: #8a642a; font-size: 14px; font-style: normal; font-weight: 700; }
.packaging-requirement-actions { display: flex; gap: 6px; }
.packaging-requirement-actions button { padding: 6px 9px; border: 1px solid #cfe0fa; border-radius: 7px; color: #316ccf; background: #edf4ff; font-size: 14px; font-weight: 700; }
.packaging-requirement-actions .danger { border-color: #f0c0c6; color: #bd3948; background: #fff1f3; }
.packaging-remove-warning { padding: 15px 17px; border: 1px solid #efc5ca; border-radius: 10px; background: #fff6f7; }
.packaging-remove-warning strong { color: #a72f3e; font-size: 14px; }
.packaging-remove-warning p { margin: 7px 0 0; color: #7b5d62; font-size: 14px; line-height: 1.65; }
.stock-number-low { color: var(--red); }
.stock-status { display: inline-block; min-width: 49px; padding: 4px 7px; border-radius: 9px; text-align: center; font-size: 14px; font-weight: 700; }
.stock-status.normal { color: #128160; background: #e4f7f1; }
.stock-status.low { color: #c73f4d; background: #ffe9ec; }
.unconfigured-row { padding: 28px; text-align: center; color: var(--muted); }
.inventory-welcome { background: linear-gradient(120deg, #243857, #3977e8); }
.inventory-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 15px; }
.inventory-summary article, .inventory-summary > button { padding: 17px 19px; border: 1px solid var(--line); border-radius: 11px; color: inherit; background: #fff; text-align: left; }
.inventory-summary span { display: block; color: var(--muted); font-size: 14px; }
.inventory-summary strong { display: block; margin-top: 5px; font-size: 26px; }
.inventory-summary .inventory-warning-card { border-color: #ffd6da; background: #fff8f9; }
.inventory-summary .inventory-warning-card strong { color: var(--red); }
.inventory-summary .inventory-warning-card small { display: block; margin-top: 3px; color: #b56b74; font-size: 14px; font-weight: 700; }
.inventory-summary .inventory-warning-card:hover { border-color: #eeaab2; background: #fff2f4; }
.inventory-summary .inventory-production-materials-card { cursor: pointer; }
.inventory-summary .inventory-production-materials-card small { display: block; margin-top: 5px; color: var(--muted); font-size: 14px; font-weight: 800; }
.inventory-summary .inventory-production-materials-card:hover,
.inventory-summary .inventory-production-materials-card:focus-visible { border-color: #d99ba7; background: #fff8fa; outline: 3px solid #e4002b1f; outline-offset: 2px; }
.inventory-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.inventory-tabs button { flex: 1; padding: 11px 13px; border: 0; border-radius: 8px; color: #657187; background: transparent; font-size: 14px; font-weight: 700; }
.inventory-tabs button.active { color: #fff; background: var(--navy); box-shadow: 0 5px 13px #172b5025; }
.inventory-tabs button em { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: 5px; padding: 0 6px; border-radius: 10px; color: #fff; background: var(--red); font-size: 14px; font-style: normal; }
.inventory-tabs button.active em { color: #b52536; background: #fff; }
.inventory-panel { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.inventory-panel-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.inventory-panel-head h3 { margin: 0; font-size: 15px; }
.inventory-panel-head p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.inventory-panel-actions { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.inventory-create-button { padding: 10px 13px; border: 1px solid #244d85; border-radius: 8px; color: #fff; background: var(--navy); font-size: 14px; font-weight: 900; }
.inventory-create-button:hover { background: #284c78; }
.inventory-export-button { padding: 10px 13px; border: 1px solid #9bbce8; border-radius: 8px; color: #fff; background: #2f6fbd; font-size: 14px; font-weight: 800; }
.inventory-export-button:hover { background: #245e9f; }
.inventory-export-button:disabled { opacity: .62; cursor: wait; }
.low-stock-workbench { border-color: #f0c7cc; }
.low-stock-workbench-head { border-bottom-color: #f1dadd; background: linear-gradient(90deg, #fff5f6, #fff); }
.low-stock-workbench-head > span { margin-left: auto; padding: 7px 10px; border-radius: 8px; color: #b62c3d; background: #ffe6e9; font-size: 14px; font-weight: 900; }
.low-stock-workbench-actions { width: min(410px, 48%); margin-left: auto; }
.low-stock-search { width: 100%; border-color: #eccbd0; background: #fff; }
.low-stock-search:focus-within { border-color: #db7d89; box-shadow: 0 0 0 3px #d94a5812; }
.low-stock-search-summary { min-height: 13px; margin: 5px 3px 0; color: #9f6570; font-size: 14px; font-weight: 700; }
.low-stock-priority-filters { display: grid; grid-template-columns: auto repeat(4, minmax(125px, 1fr)); align-items: center; gap: 8px; padding: 10px 20px; border-bottom: 1px solid #f0dde0; background: #fffafb; }
.low-stock-priority-filters > strong { padding-right: 8px; color: #3f3035; font-size: 14px; }
.low-stock-priority-filters button { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border: 1px solid #eadde0; border-radius: 9px; color: #6f5960; background: #fff; font-size: 14px; font-weight: 800; }
.low-stock-priority-filters button:hover { border-color: #d9b8be; background: #fff5f6; }
.low-stock-priority-filters button.active { border-color: var(--navy); color: #fff; background: var(--navy); box-shadow: 0 5px 13px #172b5025; }
.low-stock-priority-filters i { width: 8px; height: 8px; border-radius: 50%; }
.low-stock-priority-filters i.critical { background: #d43d4e; box-shadow: 0 0 0 3px #d43d4e18; }
.low-stock-priority-filters i.high { background: #e98a2e; box-shadow: 0 0 0 3px #e98a2e18; }
.low-stock-priority-filters i.warning { background: #d1a62c; box-shadow: 0 0 0 3px #d1a62c18; }
.low-stock-priority-filters em { min-width: 22px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; border-radius: 10px; color: #8e5660; background: #f7e9eb; font-size: 14px; font-style: normal; }
.low-stock-priority-filters button.active em { color: var(--navy); background: #fff; }
.low-stock-row-actions { display: flex; align-items: center; gap: 6px; min-width: 145px; }
.low-stock-row-actions button { white-space: nowrap; }
.low-stock-purchase-button { padding: 7px 10px; border: 1px solid #9bb8df; border-radius: 7px; color: #214f8c; background: #edf5ff; font-size: 14px; font-weight: 900; }
.low-stock-purchase-button:hover { border-color: #5f91d1; color: #fff; background: #2f66ad; }
.low-stock-production-button { padding: 7px 10px; border: 1px solid #e0b16b; border-radius: 7px; color: #8d5818; background: #fff6e7; font-size: 14px; font-weight: 900; white-space: nowrap; }
.low-stock-production-button:hover { border-color: #c9822c; color: #fff; background: #c9822c; }
.low-stock-priority { display: inline-grid; gap: 2px; min-width: 94px; padding: 7px 9px; border: 1px solid; border-radius: 9px; }
.low-stock-priority strong { font-size: 14px; }
.low-stock-priority small { font-size: 14px; white-space: nowrap; }
.low-stock-priority.critical { border-color: #f0bcc2; color: #b62637; background: #fff0f2; }
.low-stock-priority.high { border-color: #f2d0aa; color: #ad651e; background: #fff7ec; }
.low-stock-priority.warning { border-color: #eadca6; color: #92731b; background: #fffbed; }
.production-planning-stock { display: inline-grid; gap: 3px; min-width: 118px; padding: 7px 9px; border: 1px solid #d8e1ed; border-radius: 9px; color: #405773; background: #f7f9fc; }
.production-planning-stock strong { font-size: 14px; white-space: nowrap; }
.production-planning-stock small { color: #748197; font-size: 14px; white-space: nowrap; }
.production-planning-stock.committed { border-color: #efd39e; color: #8d5b18; background: #fff8e9; }
.production-planning-stock.committed small { color: #9a6a2a; }
.production-planning-stock.shortage { border-color: #efb8c0; color: #ad2f3f; background: #fff0f2; box-shadow: inset 3px 0 0 #cf394b; }
.production-planning-stock.shortage small { color: #b14453; font-weight: 900; }
.low-stock-incoming { display: inline-grid; gap: 3px; min-width: 138px; padding: 8px 10px; border: 1px solid #d8e1ed; border-radius: 9px; color: #485d77; background: #f7f9fc; }
.low-stock-incoming strong { font-size: 14px; }
.low-stock-incoming small { color: inherit; font-size: 14px; line-height: 1.4; white-space: nowrap; }
.low-stock-incoming em { width: max-content; margin-top: 2px; padding: 3px 6px; border-radius: 5px; color: #237058; background: #dff3eb; font-size: 14px; font-style: normal; font-weight: 900; }
.low-stock-incoming.none { color: #7a8798; background: #f4f6f8; }
.low-stock-incoming.waiting { border-color: #efd39e; color: #966317; background: #fff8e9; }
.low-stock-incoming.expected { border-color: #b8d1ef; color: #2f619e; background: #eef6ff; }
.low-stock-incoming.overdue { border-color: #efb8c0; color: #a92e3d; background: #fff0f2; }
.low-stock-incoming.covered { border-color: #9fd4c3; box-shadow: inset 3px 0 0 #2b8a6b; }
.low-stock-section + .low-stock-section { border-top: 8px solid #f5f7fb; }
.low-stock-section-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.low-stock-section-title h4 { margin: 0; font-size: 14px; }
.low-stock-section-title p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.low-stock-section-title > strong { min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--red); font-size: 16px; }
.low-stock-supplier-options { display: grid; gap: 10px; max-height: 56vh; overflow: auto; padding-right: 3px; }
.low-stock-supplier-card { overflow: hidden; border: 1px solid #d8e1ed; border-left: 5px solid var(--navy); border-radius: 11px; background: #fff; box-shadow: 0 5px 15px #172b500b; }
.low-stock-supplier-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 16px 12px; border-bottom: 1px solid #e7ecf2; background: #f8fafc; }
.low-stock-supplier-heading span { display: block; color: #768397; font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.low-stock-supplier-heading strong { display: block; margin-top: 4px; color: #20364f; font-size: 14px; }
.low-stock-supplier-heading b { color: #b72c3e; font-size: 18px; }
.low-stock-supplier-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #e7ecf2; }
.low-stock-supplier-facts span { padding: 11px 12px; color: #748095; background: #fff; font-size: 14px; }
.low-stock-supplier-facts strong { display: block; margin-top: 4px; color: #32475f; font-size: 14px; }
.low-stock-supplier-action { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; }
.low-stock-supplier-action small { color: #65758a; font-size: 14px; font-weight: 700; }
.low-stock-supplier-action button { flex: none; padding: 9px 12px; border: 0; border-radius: 8px; color: #fff; background: var(--navy); font-size: 14px; font-weight: 900; }
.low-stock-supplier-action button:hover { background: #294b78; }
.low-stock-supplier-empty { padding: 30px 22px; border: 1px dashed #d8a7ae; border-radius: 11px; color: #83414a; background: #fff6f7; text-align: center; }
.low-stock-supplier-empty strong { display: block; font-size: 17px; }
.low-stock-supplier-empty p { margin: 8px 0 0; color: #8c6670; font-size: 14px; line-height: 1.6; }
.import-placeholder { margin-left: auto; padding: 9px 12px; border: 1px dashed #b8c4d5; border-radius: 8px; color: #8490a1; background: #f8fafc; font-size: 14px; cursor: not-allowed; }
.inventory-import-button { margin-left: auto; padding: 10px 13px; border: 1px solid #b9d7ff; border-radius: 8px; color: #245ba5; background: #edf5ff; font-size: 14px; font-weight: 800; }
.inventory-panel-actions .inventory-import-button, .inventory-panel-actions .import-placeholder { margin-left: 0; }
.inventory-import-button:hover { border-color: #7dadf2; background: #e1efff; }
.inventory-import-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-bottom: 1px solid #cce7d5; color: #147a45; background: #ecfaf2; font-size: 14px; }
.inventory-import-result strong { font-size: 14px; }
.inventory-import-result span { color: #39775a; }
.inventory-import-result > div { display: grid; gap: 3px; }
.inventory-baseline-status { margin: 0 0 14px; padding: 14px 16px; border: 1px solid #f1cf72; border-left: 5px solid #e5a900; border-radius: 10px; background: #fff8df; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #6e5200; }
.inventory-baseline-status > div { display: grid; gap: 4px; }
.inventory-baseline-status strong { font-size: 14px; }
.inventory-baseline-status span { font-size: 14px; line-height: 1.6; }
.inventory-baseline-status button { flex: 0 0 auto; padding: 10px 14px; border: 0; border-radius: 8px; color: #fff; background: #b98200; font-weight: 800; }
.inventory-initialization-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.inventory-initialization-summary article { padding: 13px; border: 1px solid #dce4ec; border-radius: 10px; background: #f8fafc; display: grid; gap: 4px; }
.inventory-initialization-summary span, .inventory-initialization-summary small { color: #64748b; font-size: 14px; }
.inventory-initialization-summary strong { color: #15345b; font-size: 22px; }
.inventory-initialization-warning { padding: 13px 14px; border: 1px solid #f1cf72; border-radius: 9px; background: #fff8df; display: grid; gap: 5px; color: #6e5200; }
.inventory-initialization-warning strong { font-size: 14px; }
.inventory-initialization-warning span { font-size: 14px; line-height: 1.6; }
.inventory-initialization-files { max-height: 150px; overflow: auto; display: grid; gap: 6px; }
.inventory-initialization-files span { padding: 8px 10px; border-radius: 7px; background: #eef4fa; color: #3e5873; font-size: 14px; }
.inventory-movement-head { justify-content: space-between; }
.inventory-movement-notice { padding: 8px 11px; border: 1px solid #c9d8ee; border-radius: 8px; color: #526985; background: #f4f8fd; font-size: 14px; font-weight: 800; }
.inventory-movement-toolbar { display: grid; grid-template-columns: minmax(250px, 1fr) 170px 190px auto; align-items: end; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: #f8fafc; }
.inventory-movement-toolbar > label:not(.search) { display: grid; gap: 5px; }
.inventory-movement-toolbar > label > span { color: var(--muted); font-size: 14px; font-weight: 800; }
.inventory-movement-toolbar select { min-height: 37px; padding: 0 10px; border: 1px solid #d5deea; border-radius: 8px; color: var(--ink); background: #fff; font-size: 14px; }
.inventory-movement-toolbar > strong { align-self: center; color: #46617f; font-size: 14px; white-space: nowrap; }
.inventory-movement-search { min-width: 0; }
.inventory-movement-table-wrap table { min-width: 1120px; }
.inventory-movement-table-wrap td strong, .inventory-movement-table-wrap td small { display: block; }
.inventory-movement-table-wrap td small { margin-top: 4px; color: var(--muted); font-size: 14px; }
.inventory-movement-type { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 14px; font-weight: 800; }
.inventory-movement-type.inbound { color: #18754a; background: #e9f8f0; }
.inventory-movement-type.outbound { color: #a83c49; background: #fff0f2; }
.inventory-movement-change { font-size: 14px; }
.inventory-movement-change.inbound { color: #178552; }
.inventory-movement-change.outbound { color: #c13b4c; }
.inventory-movement-photo { padding: 7px 9px; border: 1px solid #b9d2f4; border-radius: 7px; color: #2f66af; background: #edf5ff; font-size: 14px; font-weight: 800; }
@media (max-width: 900px) { .inventory-movement-toolbar { grid-template-columns: 1fr 1fr; } .inventory-movement-search { grid-column: 1 / -1; } }
.inventory-stocktake-workbench { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.inventory-stocktake-head { margin: 0; border-bottom: 0; }
.inventory-stocktake-notice { display: flex; align-items: center; gap: 12px; margin: 0 20px 14px; padding: 13px 16px; border: 2px solid #f0c46d; border-radius: 11px; color: #604615; background: #fff8e8; }
.inventory-stocktake-notice strong { flex: 0 0 auto; font-size: 14px; }
.inventory-stocktake-notice span { font-size: 14px; font-weight: 650; line-height: 1.6; }
.inventory-stocktake-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) 170px 170px auto; align-items: end; gap: 12px; padding: 14px 20px; border-block: 1px solid var(--line); background: #f8fafc; }
.inventory-stocktake-toolbar > label:not(.search) { display: grid; gap: 5px; }
.inventory-stocktake-toolbar > label > span { color: var(--muted); font-size: 14px; font-weight: 800; }
.inventory-stocktake-toolbar select { min-height: 37px; padding: 0 10px; border: 1px solid #d5deea; border-radius: 8px; color: var(--ink); background: #fff; font-size: 14px; }
.inventory-stocktake-toolbar > strong { align-self: center; color: #46617f; font-size: 14px; white-space: nowrap; }
.inventory-stocktake-list { display: grid; gap: 16px; padding: 20px; }
.inventory-stocktake-card { overflow: hidden; border: 2px solid #dbe3ed; border-left: 8px solid #e4a836; border-radius: 16px; background: #fff; box-shadow: 0 8px 22px #1829420b; }
.inventory-stocktake-card.approved { border-left-color: #2e8a61; }
.inventory-stocktake-card.rejected { border-left-color: #b7bec8; opacity: .88; }
.inventory-stocktake-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 20px 14px; }
.inventory-stocktake-card-head h4 { margin: 7px 0 3px; color: var(--ink); font-size: 19px; line-height: 1.25; }
.inventory-stocktake-card-head p { color: var(--muted); font-size: 14px; }
.stocktake-inventory-type { display: inline-flex; padding: 4px 8px; border-radius: 999px; color: #365f91; background: #edf4fc; font-size: 14px; font-weight: 850; }
.stocktake-status { padding: 7px 11px; border-radius: 999px; color: #8b5a08; background: #fff1cf; font-size: 14px; white-space: nowrap; }
.stocktake-status.approved { color: #176d49; background: #e8f7ef; }
.stocktake-status.rejected { color: #697386; background: #eef1f5; }
.stocktake-card-quantities { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid #e5eaf1; background: #f8fafc; }
.stocktake-card-quantities > div { display: grid; gap: 6px; padding: 17px 20px; border-right: 1px solid #e5eaf1; }
.stocktake-card-quantities > div:last-child { border-right: 0; }
.stocktake-card-quantities span { color: var(--muted); font-size: 14px; font-weight: 800; }
.stocktake-card-quantities strong { color: var(--ink); font-size: 20px; }
.stocktake-difference.shortage { color: #c52f42 !important; }
.stocktake-difference.surplus { color: #158153 !important; }
.stocktake-difference.same { color: var(--muted) !important; }
.inventory-stocktake-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 15px 20px 6px; }
.inventory-stocktake-details span { display: grid; gap: 4px; }
.inventory-stocktake-details small { color: var(--muted); font-size: 14px; font-weight: 800; }
.inventory-stocktake-details strong { overflow-wrap: anywhere; color: var(--ink); font-size: 14px; }
.stocktake-note, .stocktake-resolution { margin: 10px 20px 0; padding: 10px 12px; border-radius: 8px; color: #4f6074; background: #f3f6fa; font-size: 14px; line-height: 1.5; }
.stocktake-resolution { color: #8a3f49; background: #fff0f2; }
.inventory-stocktake-photos, .inventory-stocktake-actions { display: flex; flex-wrap: wrap; gap: 9px; padding: 14px 20px; }
.inventory-stocktake-photos { padding-bottom: 6px; }
.inventory-stocktake-actions { border-top: 1px solid #e5eaf1; background: #fbfcfe; }
.inventory-stocktake-actions .primary { min-height: 43px; font-size: 14px; }
.danger-button { border-color: #e5b9bf !important; color: #b32d3f !important; background: #fff1f3 !important; }
.inventory-stocktake-modal-card { width: min(780px, 100%); }
#inventoryStocktakeForm, #inventoryStocktakeRejectForm { padding: 20px 22px; }
.stocktake-form-warning { margin-bottom: 17px; padding: 11px 13px; border-radius: 9px; color: #725214; background: #fff5d9; font-size: 14px; font-weight: 750; }
.stocktake-quantity-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.stocktake-quantity-preview article { display: grid; gap: 8px; min-height: 96px; padding: 13px; border: 1px solid #dce4ee; border-radius: 10px; background: #f8fafc; }
.stocktake-quantity-preview span { color: var(--muted); font-size: 14px; font-weight: 800; }
.stocktake-quantity-preview strong { align-self: center; color: var(--ink); font-size: 18px; }
.stocktake-quantity-preview input { width: 100%; min-height: 44px; border: 2px solid #8faed3; border-radius: 8px; color: var(--ink); background: #fff; font-size: 18px; font-weight: 800; text-align: center; }
.inventory-stocktake-reject-card { width: min(520px, 100%); }
@media (max-width: 900px) {
  .inventory-stocktake-toolbar { grid-template-columns: 1fr 1fr; }
  .inventory-stocktake-toolbar .search { grid-column: 1 / -1; }
  .inventory-stocktake-details { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .inventory-stocktake-notice { align-items: flex-start; flex-direction: column; }
  .inventory-stocktake-toolbar, .stocktake-card-quantities, .stocktake-quantity-preview { grid-template-columns: 1fr; }
  .stocktake-card-quantities > div { border-right: 0; border-bottom: 1px solid #e5eaf1; }
  .stocktake-card-quantities > div:last-child { border-bottom: 0; }
  .inventory-stocktake-details { grid-template-columns: 1fr; }
  .inventory-stocktake-card-head { flex-direction: column; }
}
.inventory-breadcrumbs { display: flex; align-items: center; gap: 8px; min-height: 47px; padding: 10px 20px; border-bottom: 1px solid var(--line); color: var(--muted); background: #f8fafc; }
.inventory-breadcrumbs button { padding: 6px 9px; border: 1px solid #d8e2ef; border-radius: 7px; color: #3569bb; background: #fff; font-size: 14px; }
.inventory-breadcrumbs strong { color: var(--ink); font-size: 14px; }
.inventory-all-materials-toolbar { display: grid; grid-template-columns: auto minmax(260px, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfc; }
.inventory-all-materials-toolbar label { color: var(--ink); font-size: 16px; font-weight: 900; }
.inventory-all-materials-toolbar > div { display: flex; align-items: center; min-height: 46px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; }
.inventory-all-materials-toolbar > div:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px #e4002b1f; }
.inventory-all-materials-toolbar > div span { padding-left: 12px; color: var(--muted); font-size: 21px; }
.inventory-all-materials-toolbar input { width: 100%; min-width: 0; padding: 10px 12px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 16px; }
.inventory-all-materials-toolbar > strong { color: var(--muted); font-size: 14px; white-space: nowrap; }
.inventory-all-materials-table { max-width: 100%; overflow-x: auto; }
.inventory-all-materials-table table { min-width: 1560px; }
.inventory-all-materials-empty { padding: 28px !important; color: var(--muted); text-align: center; }
.inventory-baseline-tag { display: block; width: max-content; margin-top: 5px; padding: 3px 7px; border-radius: 999px; color: #8a5b00; background: #fff3cf; font-size: 15px; font-weight: 800; }
.inventory-explorer { min-height: 360px; padding: 20px; background: #f7f9fc; }
.inventory-level-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 16px; }
.inventory-level-heading > div { flex: 1; }
.inventory-level-heading span, .configuration-title span { color: var(--red); font-size: 14px; font-weight: 800; letter-spacing: .12em; }
.inventory-level-heading h4, .configuration-title h4 { margin: 5px 0 3px; font-size: 19px; }
.inventory-level-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.inventory-level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 14px; }
.inventory-level-card { min-height: 168px; padding: 20px; border: 1px solid #dce3ed; border-radius: 14px; color: var(--ink); background: #fff; text-align: left; box-shadow: 0 5px 16px #172b5009; transition: .18s; }
.inventory-level-card:hover { transform: translateY(-2px); border-color: #9dbdeb; box-shadow: 0 9px 24px #172b5015; }
.inventory-level-card > span { color: var(--muted); font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.inventory-level-card > strong { display: block; margin: 9px 0 5px; font-size: 27px; }
.inventory-level-card > small { display: block; min-height: 30px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.inventory-level-card.model-card { border-top: 4px solid #3977e8; }
.inventory-level-card.brand-card { border-top: 4px solid var(--navy); }
.inventory-level-card.common-card { border-color: #f2c4c8; border-top: 4px solid var(--red); background: #fffafb; }
.inventory-level-card.configuration-card { border-top: 4px solid #27a27a; }
.inventory-card-metrics { display: flex; gap: 9px; margin-top: 14px; }
.inventory-card-metrics b { min-width: 62px; padding: 7px 10px; border-radius: 8px; color: #24456e; background: #edf4ff; font-size: 15px; text-align: center; }
.inventory-card-metrics b.warning { color: #c33f4c; background: #ffecef; }
.inventory-card-metrics small { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; }
.inventory-color-chips { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; margin-top: 8px; }
.inventory-color-chips i { padding: 3px 6px; border-radius: 8px; color: #57667c; background: #eef1f5; font-size: 14px; font-style: normal; }
.inventory-empty-state { padding: 55px 20px; border: 1px dashed #c9d4e2; border-radius: 12px; color: var(--muted); background: #fff; text-align: center; font-size: 14px; }
.configuration-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 17px; padding: 17px 19px; border-radius: 12px; color: #fff; background: var(--navy); }
.configuration-title span { color: #ffadb4; }
.configuration-title h4 { margin-bottom: 0; }
.configuration-title > strong { font-size: 14px; }
.configuration-section { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.configuration-section.common-configuration-section { border-color: #efc9cd; }
.configuration-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: #fafbfd; }
.configuration-section-title h5 { margin: 0; font-size: 14px; }
.configuration-section-title span { color: var(--muted); font-size: 14px; }
.configuration-section-title > div span { display: block; margin-top: 3px; }
.configuration-empty { padding: 30px 18px; color: var(--muted); text-align: center; font-size: 14px; }
.inventory-configuration-table, .inventory-common-table { overflow-x: auto; border: 0; border-radius: 0; box-shadow: none; }
.inventory-configuration-table table { min-width: 1050px; }
.brand-configuration-material-picker { display: grid; gap: 14px; }
.brand-configuration-material-picker small { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }
.brand-configuration-material-picker select { width: 100%; min-height: 210px; padding: 7px; border: 1px solid #dfe5ed; border-radius: 9px; background: #fff; }
.brand-configuration-material-picker select option { padding: 9px 8px; }
.inventory-common-table table { min-width: 980px; }
.common-material-groups { display: grid; gap: 14px; }
.common-material-group { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.configuration-assignment-list { display: grid; gap: 9px; }
.configuration-assignment { display: grid; grid-template-columns: auto 1fr 105px auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfd; }
.configuration-assignment > input[type="checkbox"] { width: 18px; height: 18px; }
.configuration-assignment span strong, .configuration-assignment span small { display: block; }
.configuration-assignment span small { margin-top: 2px; color: var(--muted); font-size: 14px; }
.configuration-assignment > input[type="number"] { width: 105px; padding: 8px; border: 1px solid #dfe5ed; border-radius: 7px; }
.configuration-assignment em { color: var(--muted); font-size: 14px; font-style: normal; }
.inventory-table-wrap { border: 0; border-radius: 0; box-shadow: none; }
.inventory-table-wrap table { min-width: 1480px; }
.import-placeholder.imported { color: #147a45; border-color: #b9e4ce; background: #ecfaf2; }
.inventory-low-row { background: #fff8f9; }
.inventory-edit-button { padding: 6px 9px; border: 1px solid #cbdcf5; border-radius: 6px; color: #3569bb; background: #edf4ff; font-size: 14px; }
.inventory-readonly { color: var(--muted); font-size: 14px; }
.production-calculator-form { display: grid; grid-template-columns: 1.3fr .8fr auto; align-items: end; gap: 14px; padding: 20px; background: #f8fafc; border-bottom: 1px solid var(--line); }
.production-calculator-form .primary { min-height: 40px; }
.calculation-result { padding: 18px 20px 20px; }
.calculation-placeholder { padding: 45px 20px; color: var(--muted); border: 1px dashed #cad4e2; border-radius: 10px; text-align: center; font-size: 14px; }
.calculation-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.calculation-summary div { padding: 13px 15px; border: 1px solid #dce4ee; border-radius: 9px; background: #f8fafc; }
.calculation-summary span { display: block; color: var(--muted); font-size: 14px; }
.calculation-summary strong { display: block; margin-top: 5px; font-size: 15px; }
.calculation-summary.sufficient div:last-child { border-color: #bfe6d9; background: #f1fbf7; }
.calculation-summary.sufficient div:last-child strong { color: var(--green); }
.calculation-summary.insufficient div:last-child { border-color: #f1c1c6; background: #fff4f5; }
.calculation-summary.insufficient div:last-child strong { color: var(--red); }
.calculation-error { padding: 18px; border: 1px solid #f1c1c6; border-radius: 9px; color: #bd3f4c; background: #fff4f5; font-size: 14px; }
.supplier-welcome { align-items: center; background: linear-gradient(120deg, #173e3b, #2f6962); }
.supplier-welcome .primary { margin-left: auto; border: 1px solid #8bd3c1; background: #119c72; }
.supplier-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 15px; }
.supplier-summary article { padding: 16px 18px; border: 1px solid var(--line); border-top: 4px solid #3e8c7b; border-radius: 11px; background: #fff; }
.supplier-summary span { display: block; color: var(--muted); font-size: 14px; font-weight: 600; }
.supplier-summary strong { display: block; margin-top: 5px; color: #19584d; font-size: 26px; }
.supplier-summary .overdue { border-top-color: var(--red); }
.supplier-summary .overdue strong { color: var(--red); }
.supplier-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 2px 12px; }
.supplier-toolbar h3 { margin: 0; font-size: 17px; }
.supplier-toolbar p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.supplier-search-box { min-width: 310px; }
.supplier-card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.supplier-card { overflow: hidden; border: 1px solid #dbe4e1; border-radius: 13px; background: #fff; box-shadow: 0 6px 18px #1829410b; }
.supplier-card.is-inactive { opacity: .67; }
.supplier-card-head { display: flex; align-items: center; gap: 13px; padding: 17px 18px; border-top: 4px solid #2a7769; }
.supplier-factory-mark { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 11px; color: #fff; background: #2a7769; font-size: 17px; font-weight: 900; }
.supplier-card-head > div:nth-child(2) { flex: 1; }
.supplier-card-head span { color: #27816e; font-size: 14px; font-weight: 800; }
.supplier-card-head h3 { margin: 4px 0; color: #203f3b; font-size: 17px; }
.supplier-card-head p { margin: 0; color: var(--muted); font-size: 14px; }
.supplier-card-head button { border: 1px solid #b9dacf; border-radius: 8px; padding: 8px 10px; color: #176455; background: #eff9f6; font-size: 14px; font-weight: 700; }
.supplier-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 0 18px 14px; }
.supplier-contact-grid div { padding: 10px 11px; border-radius: 8px; background: #f7f9fb; }
.supplier-contact-grid .full { grid-column: 1 / -1; }
.supplier-contact-grid span, .supplier-card-metrics span { display: block; color: var(--muted); font-size: 14px; }
.supplier-contact-grid strong { display: block; margin-top: 4px; color: #405168; font-size: 14px; }
.supplier-card-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-top: 1px solid var(--line); background: var(--line); }
.supplier-card-metrics div { padding: 11px 14px; background: #fbfcfd; }
.supplier-card-metrics strong { display: block; margin-top: 3px; color: #2f645b; font-size: 14px; }
.supplier-card-metrics .danger strong { color: var(--red); }
.supplier-card-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--line); }
.supplier-card-actions button { border: 1px solid #d1dce5; border-radius: 7px; padding: 7px 10px; color: #586b80; background: #fff; font-size: 14px; }
.supplier-empty { grid-column: 1 / -1; padding: 55px 20px; border: 1px dashed #c9d4e2; border-radius: 12px; color: var(--muted); text-align: center; background: #fff; }
.modal-card:has(.supplier-detail), .modal-card:has(.supplier-comparison-table) { width: min(1120px, 100%); }
.supplier-detail-tabs { display: flex; gap: 8px; margin-bottom: 17px; border-bottom: 1px solid var(--line); }
.supplier-detail-tabs button { border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; color: #718096; background: transparent; font-size: 14px; font-weight: 700; }
.supplier-detail-tabs button.active { border-bottom-color: #27816e; color: #176455; }
.supplier-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.supplier-profile-grid div { padding: 13px 14px; border: 1px solid #e0e6ec; border-radius: 9px; background: #fafbfd; }
.supplier-profile-grid .full { grid-column: 1 / -1; }
.supplier-profile-grid span { display: block; color: var(--muted); font-size: 14px; }
.supplier-profile-grid strong { display: block; margin-top: 5px; color: #35465d; font-size: 14px; }
.supplier-panel-action { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.supplier-panel-action strong, .supplier-panel-action span { display: block; }
.supplier-panel-action span { margin-top: 4px; color: var(--muted); font-size: 14px; }
.supplier-material-table, .supplier-history-table, .supplier-comparison-table { overflow-x: auto; }
.supplier-material-table table { min-width: 1040px; }
.supplier-history-table table { min-width: 850px; }
.supplier-comparison-table table { min-width: 980px; }
.supplier-material-table td small, .supplier-history-table td small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.supplier-state { display: inline-block; padding: 5px 8px; border-radius: 12px; font-size: 14px; font-weight: 800; }
.supplier-state.active { color: #087553; background: #e4f7f0; }
.supplier-state.inactive { color: #7e8999; background: #edf0f4; }
.supplier-history-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 12px; }
.supplier-history-summary div { padding: 12px 13px; border: 1px solid #dce5e1; border-radius: 9px; background: #f5faf8; }
.supplier-history-summary span { display: block; color: var(--muted); font-size: 14px; }
.supplier-history-summary strong { display: block; margin-top: 4px; color: #176455; font-size: 15px; }
.supplier-material-form > .field { margin-bottom: 15px; }
.supplier-material-form select { width: 100%; margin-top: 7px; border: 1px solid #dfe5ed; border-radius: 8px; padding: 9px 10px; }
.worker-purchase-notice { padding: 14px 16px; color: #38516f; background: #edf4fc; font-size: 14px; font-weight: 700; }
.worker-purchase-card { overflow: hidden; border: 1px solid #dbe2ec; border-radius: 12px; background: #fff; }
.worker-purchase-task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 14px; }
.worker-purchase-task { display: flex; flex-direction: column; min-width: 0; padding: 18px; border: 2px solid #dce5f0; border-radius: 12px; background: #fff; box-shadow: 0 5px 14px #1528440b; }
.worker-purchase-task.overdue { border-color: #e9a8b0; background: #fff8f9; }
.worker-purchase-task.arrived { border-color: #b9dfd3; background: #f8fffc; }
.worker-purchase-task-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.worker-purchase-task-head > span { color: #718098; font-size: 14px; font-weight: 800; }
.worker-purchase-material { display: block; margin-top: 12px; color: #1f3554; font-size: 22px; line-height: 1.35; overflow-wrap: anywhere; }
.worker-purchase-task-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 17px 0; }
.worker-purchase-task-facts > div { padding: 13px 14px; border: 1px solid #e1e7ef; border-radius: 10px; background: #f8fafc; }
.worker-purchase-task-facts span { display: block; color: #718097; font-size: 14px; font-weight: 700; }
.worker-purchase-task-facts strong { display: block; margin-top: 6px; color: #243a59; font-size: 17px; }
.worker-purchase-quantity strong { color: #d47708; font-size: 30px; line-height: 1; }
.worker-purchase-quantity em { font-size: 14px; font-style: normal; }
.worker-purchase-arrived-button { width: 100%; min-height: 52px; margin-top: auto; border: 0; border-radius: 10px; color: #fff; background: #168566; font-size: 15px; font-weight: 900; box-shadow: 0 7px 16px #16856628; }
.worker-purchase-arrived-button:hover { background: #0d7357; }
.worker-purchase-task.overdue .worker-purchase-arrived-button { background: #cc4050; box-shadow: 0 7px 16px #cc405028; }
.worker-purchase-confirmed { margin-top: auto; padding: 15px; border-radius: 10px; color: #087553; background: #e3f7ef; text-align: center; font-size: 14px; font-weight: 900; }
.purchase-welcome { align-items: center; background: linear-gradient(120deg, #172b4d, #304d77); }
.purchase-welcome .primary { margin-left: auto; border: 1px solid #ff808a; background: var(--red); box-shadow: 0 8px 20px #101b3038; }
.purchase-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 15px; }
.purchase-summary article { padding: 16px 18px; border: 1px solid var(--line); border-top: 4px solid #6c88ad; border-radius: 11px; background: #fff; }
.purchase-summary span { display: block; color: var(--muted); font-size: 14px; font-weight: 600; }
.purchase-summary strong { display: block; margin-top: 5px; color: var(--navy); font-size: 26px; }
.purchase-summary .waiting { border-top-color: #e8a23b; }
.purchase-summary .waiting strong { color: #a86400; }
.purchase-summary .overdue { border-top-color: var(--red); }
.purchase-summary .overdue strong { color: var(--red); }
.purchase-summary .arrived { border-top-color: var(--green); }
.purchase-summary .arrived strong { color: var(--green); }
.purchase-ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 2px 12px; }
.purchase-ledger-head h3 { margin: 0; font-size: 17px; }
.purchase-ledger-head p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.purchase-ledger-head > span { padding: 7px 10px; border-radius: 8px; color: #56667e; background: #eef2f7; font-size: 14px; font-weight: 600; }
.purchase-search { display: grid; grid-template-columns: minmax(280px, 1fr) auto auto; align-items: center; gap: 10px; margin: 0 2px 13px; padding: 12px; border: 1px solid #dce5f0; border-radius: 11px; background: #f7f9fc; }
.purchase-search .search { width: 100%; background: #fff; }
.purchase-search > strong { min-width: 100px; color: #526985; font-size: 14px; text-align: right; }
.purchase-status-filter { display: flex; gap: 8px; margin: 0 2px 13px; }
.purchase-status-filter button { min-height: 34px; padding: 8px 14px; border: 1px solid #dce4ee; border-radius: 999px; color: #5d6c81; background: #fff; font-size: 14px; font-weight: 800; }
.purchase-status-filter button:hover { border-color: #8ba6c9; color: #315d94; }
.purchase-status-filter button.active { border-color: #4c78ad; color: #fff; background: #3d6caa; box-shadow: 0 5px 12px #315d9422; }
.purchase-status-filter button.urgent { border-color: #efc1c6; color: #b83946; background: #fff6f7; }
.purchase-status-filter button.urgent.active { border-color: #d64a58; color: #fff; background: #cf3f4e; }
.purchase-order-list { display: grid; gap: 15px; }
.purchase-order-card { overflow: hidden; border: 1px solid #dbe2ec; border-radius: 13px; background: #fff; box-shadow: 0 6px 18px #1829410b; }
.purchase-order-head { display: grid; grid-template-columns: 225px minmax(230px, 1fr) auto auto; align-items: center; gap: 18px; padding: 18px 20px; border-top: 4px solid var(--navy); }
.purchase-order-number span, .purchase-order-supplier span { display: block; color: var(--muted); font-size: 14px; font-weight: 600; }
.purchase-order-number strong { display: block; margin-top: 5px; color: var(--navy); font-size: 17px; letter-spacing: .03em; }
.purchase-order-supplier strong { display: block; margin-top: 4px; font-size: 14px; }
.purchase-order-supplier small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.purchase-order-meta { display: grid; justify-items: end; gap: 4px; color: #657187; font-size: 14px; }
.purchase-status { display: inline-block; min-width: 60px; padding: 5px 9px; border-radius: 14px; text-align: center; font-size: 14px; font-weight: 800; white-space: nowrap; }
.purchase-status.waiting { color: #9a620f; background: #fff1d8; }
.purchase-status.expected { color: #2e65b7; background: #e9f1ff; }
.purchase-status.overdue { color: #bd3543; background: #ffe7ea; }
.purchase-status.arrived { color: #087553; background: #e4f7f0; }
.purchase-status.cancelled { color: #667085; background: #edf0f4; }
.purchase-preview-button { padding: 9px 12px; border: 1px solid #c6d5ea; border-radius: 8px; color: #294d7e; background: #f2f6fc; font-size: 14px; font-weight: 700; }
.purchase-preview-button:hover { border-color: #8eadd5; background: #e9f1fc; }
.purchase-order-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.purchase-order-card.cancelled { opacity: .82; }
.purchase-order-card.cancelled .purchase-order-head { border-top-color: #8a95a5; }
.purchase-cancelled-summary { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid #d9dee6; border-bottom: 1px solid #d9dee6; color: #5f6b7b; background: #f4f6f8; font-size: 14px; }
.purchase-cancelled-summary strong { color: #3e4a59; font-size: 14px; }
.purchase-batch-date { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-top: 1px solid #dde5ef; background: #f7f9fc; }
.purchase-batch-date > div { flex: 1; }
.purchase-batch-date strong { display: block; color: #344963; font-size: 14px; }
.purchase-batch-date span { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; }
.purchase-batch-date input { padding: 7px 9px; border: 1px solid #ced8e6; border-radius: 7px; color: var(--ink); background: #fff; }
.purchase-batch-date button { padding: 8px 11px; border: 0; border-radius: 7px; color: #fff; background: #365f96; font-size: 14px; font-weight: 700; }
.purchase-items-table { overflow-x: auto; border-top: 1px solid var(--line); }
.purchase-items-table table { min-width: 1090px; }
.purchase-items-table th { background: #f7f9fc; }
.purchase-items-table td > strong { color: #273a55; }
.purchase-items-table td > small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.purchase-items-table input[type="date"] { min-width: 145px; padding: 7px 8px; border: 1px solid #d3dce8; border-radius: 7px; color: #34445b; }
.purchase-overdue-row { background: #fff8f9; }
.purchase-row-actions { display: flex; gap: 6px; }
.purchase-row-actions button { padding: 6px 8px; border: 1px solid #c8d7ea; border-radius: 6px; color: #365f96; background: #f1f6fc; font-size: 14px; font-weight: 700; }
.purchase-row-actions .purchase-material-link-button { border-color: #d9bd78; color: #855a08; background: #fff8e6; }
.purchase-row-actions button.arrived { border-color: #b5e1d2; color: #087553; background: #ebfaf5; }
.purchase-readonly { color: #a0aaba; }
.purchase-receipt-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.purchase-receipt-progress > div { min-width: 0; padding: 12px 14px; border: 1px solid #dfe6ef; border-radius: 10px; background: #f7f9fc; }
.purchase-receipt-progress span, .purchase-receipt-progress strong { display: block; }
.purchase-receipt-progress span { color: #718096; font-size: 14px; font-weight: 700; }
.purchase-receipt-progress strong { margin-top: 5px; color: #29415f; font-size: 18px; overflow-wrap: anywhere; }
.purchase-receipt-progress .remaining { border-color: #efc982; background: #fff8e7; }
.purchase-receipt-progress .remaining strong { color: #9a620f; }
.purchase-receipt-progress .complete { border-color: #b9dfd3; background: #effaf6; }
.purchase-receipt-progress .complete strong { color: #087553; }
.purchase-receipt-progress.compact { min-width: 210px; grid-template-columns: 1fr; gap: 3px; margin: 0; }
.purchase-receipt-progress.compact > div { padding: 0; border: 0; background: transparent; }
.purchase-receipt-progress.compact span { display: block; font-size: 14px; line-height: 1.6; }
.purchase-receipt-progress.compact strong { display: inline; margin: 0 0 0 4px; font-size: 14px; }
.purchase-receipt-quantity-field { margin-top: 14px; }
.purchase-receipt-quantity-input { min-height: 50px; font-size: 22px; font-weight: 800; }
.purchase-receipt-history { display: grid; gap: 5px; margin-top: 7px; }
.purchase-receipt-history > div { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px; padding: 7px 8px; border: 1px solid #dfe7e3; border-radius: 7px; color: #526579; background: #f7fbf9; font-size: 14px; }
.purchase-receipt-history > div.reversed { align-items: stretch; border-color: #efb6bd; background: #fff4f5; }
.purchase-receipt-history strong { color: #087553; }
.purchase-receipt-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.purchase-receipt-line > small { flex: 1; line-height: 1.55; }
.purchase-receipt-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.purchase-receipt-actions button, .purchase-receipt-reversal-mark button { padding: 6px 8px; border: 1px solid #b8d6cc; border-radius: 6px; color: #087553; background: #fff; font-size: 14px; font-weight: 700; }
.purchase-receipt-actions .purchase-receipt-reversal-button { border-color: #e2a0aa; color: #a52d3c; background: #fff1f3; }
.purchase-receipt-reversal-mark { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px; width: 100%; padding: 8px 9px; border: 1px solid #efb6bd; border-radius: 7px; color: #81313c; background: #ffe7ea; }
.purchase-receipt-reversal-mark strong { padding: 3px 7px; border-radius: 12px; color: #fff; background: #bd3543; font-size: 14px; }
.purchase-receipt-reversal-mark span { font-size: 14px; font-weight: 700; }
.purchase-receipt-reversal-summary { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 9px; margin-bottom: 15px; }
.purchase-receipt-reversal-summary > span { padding: 11px 12px; border: 1px solid #e3c0c5; border-radius: 9px; background: #fff6f7; }
.purchase-receipt-reversal-summary small, .purchase-receipt-reversal-summary strong { display: block; }
.purchase-receipt-reversal-summary small { margin-bottom: 5px; color: #8a6268; font-size: 14px; }
.purchase-receipt-reversal-summary strong { color: #71303a; font-size: 14px; overflow-wrap: anywhere; }
.operation-evidence-summary { display: grid; gap: 6px; min-width: 128px; }
.operation-evidence-summary small { color: #657489; font-size: 14px; font-weight: 600; }
.purchase-order-foot { display: flex; justify-content: flex-end; gap: 16px; padding: 10px 20px; border-top: 1px solid var(--line); color: var(--muted); background: #fbfcfe; font-size: 14px; }
.purchase-order-foot strong { color: #334963; }
.purchase-empty { padding: 55px 20px; border: 1px dashed #c9d4e2; border-radius: 12px; color: var(--muted); background: #fff; text-align: center; font-size: 14px; }
.modal-card:has(.purchase-order-form) { width: min(1120px, 100%); }
.purchase-order-form > .form-grid { margin-bottom: 18px; }
.purchase-form-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 4px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.purchase-form-title strong { display: block; font-size: 14px; }
.purchase-form-title span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.purchase-form-title button { padding: 8px 11px; border: 1px solid #bdd0eb; border-radius: 7px; color: #2f63ae; background: #eff5fd; font-size: 14px; font-weight: 700; }
.purchase-form-lines { display: grid; gap: 10px; }
.purchase-form-line { display: grid; grid-template-columns: 34px 1.35fr 1fr 1fr 90px 70px 100px 1fr 115px 30px; align-items: end; gap: 8px; padding: 12px 10px; border: 1px solid #dce3ed; border-radius: 10px; background: #fafbfd; }
.purchase-form-line.linked-material { border-color: #bcd2ee; background: #f3f7fd; }
.purchase-line-index { display: grid; place-items: center; align-self: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: var(--navy); font-size: 14px; font-weight: 800; }
.purchase-form-line .field label { font-size: 14px; }
.purchase-form-line .field input, .purchase-form-line .field select { padding: 8px; font-size: 14px; }
.purchase-form-line input[readonly] { color: #5f6d80; background: #e9eef5; }
.purchase-add-catalog { align-self: center; color: #586b80; font-size: 14px; font-weight: 600; }
.purchase-add-catalog input { width: auto; margin-right: 4px; }
.purchase-remove-line { align-self: center; width: 28px; height: 28px; border: 0; border-radius: 7px; color: #bd3f4c; background: #ffe9ec; font-size: 17px; }
.modal-card:has(.purchase-material-link-picker) { width: min(780px, 100%); }
.purchase-material-link-protection { display: grid; gap: 5px; margin-bottom: 14px; padding: 13px 15px; border: 1px solid #efcf82; border-left: 5px solid #d59819; border-radius: 10px; color: #715410; background: #fff8e6; }
.purchase-material-link-protection strong { font-size: 14px; }
.purchase-material-link-protection span { font-size: 14px; line-height: 1.6; }
.purchase-material-link-snapshot { display: grid; grid-template-columns: 1.4fr 1fr .7fr; gap: 9px; margin-bottom: 15px; }
.purchase-material-link-snapshot span { min-width: 0; padding: 10px 12px; border: 1px solid #dfe6ef; border-radius: 9px; background: #f7f9fc; }
.purchase-material-link-snapshot small, .purchase-material-link-snapshot strong { display: block; }
.purchase-material-link-snapshot small { color: #738096; font-size: 14px; font-weight: 700; }
.purchase-material-link-snapshot strong { margin-top: 4px; overflow-wrap: anywhere; color: #2d405e; font-size: 14px; }
.purchase-material-link-picker { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(360px, 1.25fr); align-items: start; gap: 14px; }
.purchase-material-link-picker .field { min-width: 0; }
.purchase-material-link-picker input { min-height: 46px; font-size: 14px; }
.purchase-material-link-picker select { min-height: 250px; padding: 6px; font-size: 14px; line-height: 1.5; }
.purchase-material-link-picker option { padding: 7px 8px; }
.purchase-material-link-picker .field > small { display: block; margin-top: 6px; color: #718096; font-size: 14px; line-height: 1.5; }
.purchase-preview-modal { z-index: 100; overflow: auto; place-items: start center; }
.purchase-preview-shell { width: min(920px, 100%); margin: 20px auto; }
.purchase-preview-actions { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 12px 15px; border-radius: 11px; color: #fff; background: #172b4df2; box-shadow: 0 8px 24px #101b304a; backdrop-filter: blur(8px); }
.purchase-preview-actions > div { flex: 1; }
.purchase-preview-actions strong, .purchase-preview-actions small { display: block; }
.purchase-preview-actions small { margin-top: 3px; color: #cbd6e7; font-size: 14px; }
.purchase-preview-actions .secondary { padding: 8px 12px; color: #fff; background: transparent; }
.purchase-preview-actions .primary { padding: 9px 13px; }
.formal-purchase-order { min-height: 1123px; padding: 66px 72px; color: #1d2d44; background: #fff; box-shadow: 0 18px 50px #0d172c4a; }
.formal-purchase-brand { display: flex; align-items: center; gap: 15px; }
.formal-brand-mark { padding-right: 15px; border-right: 4px solid var(--red); color: var(--red); font-size: 36px; font-weight: 900; letter-spacing: -.05em; }
.formal-purchase-brand strong, .formal-purchase-brand span { display: block; }
.formal-purchase-brand strong { font-size: 14px; }
.formal-purchase-brand span { margin-top: 3px; color: #788499; font-size: 14px; letter-spacing: .12em; }
.formal-purchase-order h1 { margin: 52px 0 34px; text-align: center; font-size: 32px; letter-spacing: .45em; }
.formal-order-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 40px; margin-bottom: 28px; padding: 18px 20px; border-top: 3px solid var(--navy); border-bottom: 1px solid #d5dce6; background: #f8fafc; }
.formal-order-meta div { display: flex; align-items: center; gap: 15px; }
.formal-order-meta span { min-width: 60px; color: #7b8799; font-size: 14px; }
.formal-order-meta strong { font-size: 14px; }
.formal-purchase-order table { width: 100%; border-collapse: collapse; }
.formal-purchase-order th { padding: 11px 8px; border: 1px solid var(--navy); color: #fff; background: var(--navy); font-size: 14px; }
.formal-purchase-order td { padding: 12px 8px; border: 1px solid #cfd7e2; font-size: 14px; text-align: center; }
.formal-purchase-order td:nth-child(2), .formal-purchase-order td:nth-child(3), .formal-purchase-order td:last-child { text-align: left; }
.formal-order-note { display: flex; gap: 18px; margin-top: 24px; padding: 15px 0; border-bottom: 1px solid #d6dde7; }
.formal-order-note span { color: #7b8799; font-size: 14px; }
.formal-order-note strong { font-size: 14px; }
.formal-order-sign { display: flex; justify-content: space-between; margin-top: 65px; color: #56647a; font-size: 14px; }
.shortage-eta { color: #2f66b2 !important; font-weight: 700; }
.shortage-eta.waiting { color: #a9680c !important; }
.shortage-worker-list { display: grid; gap: 7px; margin-top: 9px; }
.shortage-worker-list b { padding: 8px 10px; border-radius: 7px; background: #fff; font-size: 14px; }
.shortage-worker-list small { display: block; margin-top: 4px; color: #a2505a; font-size: 14px; font-weight: 600; }
.production-welcome { background: linear-gradient(125deg, #173d3a, #2d6660); }
.production-welcome .primary { margin-left: auto; background: #fff; color: #214e49; }
.production-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 22px 0; }
.production-summary article { padding: 19px 21px; border: 1px solid var(--line); border-top: 5px solid #8ea2b8; border-radius: 13px; background: #fff; }
.production-summary article.doing { border-top-color: #3271c8; }
.production-summary article.paused { border-top-color: #d34c59; }
.production-summary article.done { border-top-color: #37836e; }
.production-summary article.cancelled { border-top-color: #8a95a5; }
.production-summary span { display: block; color: var(--muted); font-size: 14px; font-weight: 700; }
.production-summary strong { display: block; margin-top: 8px; color: var(--navy); font-size: 28px; }
.production-task-search { display: grid; grid-template-columns: auto minmax(280px, 1fr) auto auto; align-items: center; gap: 12px; margin: 18px 0 8px; padding: 13px 15px; border: 2px solid #cbd9d6; border-radius: 13px; background: #f8fbfa; }
.production-task-search label { color: #244d49; font-size: 14px; font-weight: 800; }
.production-task-search > div { display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #c9d5d2; border-radius: 9px; background: #fff; }
.production-task-search input { width: 100%; padding: 11px 0; border: 0; outline: 0; background: transparent; font-size: 14px; }
.production-task-search > strong { color: #526b68; font-size: 14px; white-space: nowrap; }
.production-task-search > button { padding: 9px 13px; border: 1px solid #b9c8c5; border-radius: 8px; color: #315d58; background: #fff; font-weight: 700; }
.production-status-filter { display: flex; gap: 8px; margin: 12px 2px 15px; }
.production-status-filter button { min-height: 36px; padding: 8px 14px; border: 1px solid #cbd9d6; border-radius: 999px; color: #466963; background: #fff; font-size: 14px; font-weight: 800; }
.production-status-filter button:hover { border-color: #63998f; color: #24665b; }
.production-status-filter button.active { border-color: #2f7469; color: #fff; background: #2f7469; box-shadow: 0 5px 12px #245e5522; }
.production-status-filter button.urgent { border-color: #efc1c6; color: #b83946; background: #fff6f7; }
.production-status-filter button.urgent.active { border-color: #d64a58; color: #fff; background: #cf3f4e; }
.production-status-filter button b { min-width: 19px; margin-left: 5px; padding: 2px 6px; border-radius: 999px; color: inherit; background: #ffffffb8; font-size: 14px; }
.production-status-filter button.urgent.active b { color: #b83240; }
.production-ledger-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 26px 2px 14px; }
.production-ledger-head h3 { margin: 0 0 4px; font-size: 18px; }
.production-ledger-head p, .production-ledger-head > span { margin: 0; color: var(--muted); font-size: 14px; }
.production-task-list { display: grid; gap: 18px; }
.production-task-card { overflow: hidden; border: 2px solid #d9e2ea; border-left: 8px solid #8799aa; border-radius: 17px; background: #fff; box-shadow: 0 8px 22px #1829420a; }
.production-task-card.in_progress { border-left-color: #3271c8; }
.production-task-card.exception_paused { border-color: #e6b7bc; border-left-color: #cf3d4b; }
.production-task-card.completed { border-left-color: #37836e; opacity: .82; }
.production-task-card.cancelled { border-left-color: #8a95a5; opacity: .78; }
.production-task-card.overdue { border-color: #e3a9b0; border-left-color: #c93746; box-shadow: 0 9px 24px #a72f3d16; }
.production-task-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px 17px; }
.production-order-no { display: block; margin-bottom: 5px; color: #65758a; font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.production-task-head h3 { margin: 0; color: #14283f; font-size: 28px; line-height: 1.15; }
.production-task-head p { margin: 8px 0 0; color: #66778c; font-size: 14px; font-weight: 700; }
.production-status { flex: none; padding: 9px 14px; border-radius: 999px; color: #526477; background: #eef2f5; font-size: 14px; font-weight: 800; }
.production-status.in_progress { color: #245ba6; background: #e9f2ff; }
.production-status.exception_paused { color: #a72d3b; background: #ffe9ec; }
.production-status.completed { color: #2a715e; background: #e6f5f0; }
.production-status.cancelled { color: #667085; background: #edf0f4; }
.production-key-grid { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 1px; margin: 0 24px; overflow: hidden; border: 1px solid #e0e7ee; border-radius: 11px; background: #e0e7ee; }
.production-key-grid div { min-width: 0; padding: 13px 14px; background: #f9fbfc; }
.production-key-grid span { display: block; margin-bottom: 5px; color: #77879a; font-size: 14px; font-weight: 700; }
.production-key-grid strong { display: block; overflow: hidden; color: #21354c; font-size: 14px; line-height: 1.45; text-overflow: ellipsis; }
.production-key-grid .remaining { background: #fff5e7; }
.production-key-grid .remaining strong { color: #a55e0d; font-size: 20px; }
.production-key-grid div.overdue { background: #fff0f2; }
.production-key-grid div.overdue strong { color: #a62d3b; }
.production-due-label { display: block; margin-top: 5px; color: #63758a; font-size: 14px; font-weight: 800; }
.production-due-label.overdue { color: #c03948; }
.production-progress { height: 9px; margin: 18px 24px 13px; overflow: hidden; border-radius: 999px; background: #e9eef3; }
.production-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2d6660, #4e9b88); }
.production-packaging-handoff { margin: 0 24px 17px; padding: 16px; border: 2px solid #d4e2df; border-radius: 13px; background: #f7fbfa; }
.production-handoff-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.production-handoff-title strong, .production-handoff-title span { display: block; }
.production-handoff-title strong { color: #214b43; font-size: 14px; }
.production-handoff-title span { margin-top: 4px; color: #64768a; font-size: 14px; font-weight: 700; }
.production-handoff-title em { flex: none; padding: 7px 10px; border-radius: 999px; color: #8d580d; background: #fff0d8; font-size: 14px; font-style: normal; font-weight: 900; }
.production-handoff-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 9px; }
.production-handoff-step { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid #cddbea; border-radius: 10px; background: #edf4fc; }
.production-handoff-step span { color: #5b6e86; font-size: 14px; font-weight: 800; }
.production-handoff-step strong { color: #244d7c; font-size: 21px; }
.production-handoff-step.finished { border-color: #b9daca; background: #e9f6f0; }
.production-handoff-step.finished strong { color: #256752; }
.production-handoff-step.pending { border-color: #efd0a2; background: #fff5e6; }
.production-handoff-step.pending strong { color: #a35d0d; }
.production-handoff-arrow { align-self: center; color: #8d9aa9; font-size: 17px; }
.production-handoff-alerts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.production-handoff-alerts span { padding: 6px 8px; border-radius: 7px; color: #805718; background: #fff0d9; font-size: 14px; font-weight: 800; }
.production-handoff-alerts span.shortage { color: #a62f3d; background: #ffe5e8; }
.production-materials-panel { margin: 0 24px 17px; overflow: hidden; border: 1px solid #dce6e3; border-radius: 11px; background: #fff; }
.production-materials-panel.insufficient { border-color: #e7aab2; background: #fff8f9; }
.production-materials-panel summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 15px; cursor: pointer; list-style: none; background: #f5faf8; }
.production-materials-panel.insufficient summary { background: #fff0f2; }
.production-materials-panel summary::-webkit-details-marker { display: none; }
.production-materials-panel summary > div strong, .production-materials-panel summary > div span { display: block; }
.production-materials-panel summary > div strong { color: #2b4a44; font-size: 14px; }
.production-materials-panel summary > div span { margin-top: 3px; color: #6d7e8f; font-size: 14px; font-weight: 700; }
.production-materials-panel summary > b { flex: none; padding: 6px 9px; border-radius: 999px; color: #28705d; background: #e2f3ed; font-size: 14px; }
.production-materials-panel.insufficient summary > b { color: #a62f3d; background: #ffdfe3; }
.production-materials-list { display: grid; border-top: 1px solid #e4ebe8; }
.production-material-row { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(110px, .8fr) minmax(110px, .8fr) auto; align-items: center; gap: 14px; padding: 12px 15px; border-top: 1px solid #edf1f3; }
.production-material-row:first-child { border-top: 0; }
.production-material-row.insufficient { background: #fff1f3; }
.production-material-name strong, .production-material-name small { display: block; }
.production-material-name strong { color: #21354c; font-size: 14px; }
.production-material-name small { margin-top: 4px; color: #7b8998; font-size: 14px; }
.production-material-row > div > span { display: block; margin-bottom: 4px; color: #7b8998; font-size: 14px; }
.production-material-row > div > b { color: #2d435a; font-size: 14px; }
.production-material-row > em { min-width: 56px; padding: 6px 8px; border-radius: 7px; color: #28705d; background: #e8f6f1; text-align: center; font-size: 14px; font-style: normal; font-weight: 900; }
.production-material-row.insufficient > em { color: #a62f3d; background: #ffdfe3; }
.production-paused-alert { margin: 0 24px 16px; padding: 13px 15px; border: 1px solid #efb9c0; border-radius: 9px; color: #a52f3d; background: #fff0f2; font-size: 14px; font-weight: 800; }
.production-task-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 17px 24px 22px; border-top: 1px solid #e6ebf0; background: #fafcfd; }
.production-task-actions button { min-height: 52px; border-radius: 10px; font-size: 15px; font-weight: 900; }
.production-task-actions button:disabled { cursor: not-allowed; opacity: .42; }
.production-exception-button, .production-exception-submit { border: 1px solid #e7aab2; color: #a82e3b; background: #fff0f2; }
.production-cancelled-summary { display: flex; align-items: center; gap: 14px; margin: 0 24px 22px; padding: 13px 15px; border: 1px solid #d9dee6; border-radius: 9px; color: #5f6b7b; background: #f4f6f8; font-size: 14px; }
.production-cancelled-summary strong { color: #3e4a59; font-size: 14px; }
.production-exception-panel { margin: 0 24px 22px; padding: 16px; border: 1px solid #efc0c6; border-radius: 12px; background: #fff7f8; }
.production-exception-panel h4 { margin: 0 0 11px; color: #a62e3b; }
.production-exception-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px; border-top: 1px solid #f0d4d8; }
.production-exception-item:first-of-type { border-top: 0; }
.production-exception-item.resolved { opacity: .72; }
.production-exception-item strong, .production-exception-item span, .production-exception-item small { display: block; }
.production-exception-item strong { color: #9b2c39; font-size: 14px; }
.production-exception-item span { margin-top: 4px; color: #4f5e70; font-size: 14px; }
.production-exception-item small { margin-top: 5px; color: #7e8998; font-size: 14px; }
.production-exception-item p { margin: 7px 0 0; font-size: 14px; }
.production-resolution { color: #28705d; font-weight: 700; }
.production-exception-actions { display: flex; flex: none; gap: 8px; }
.production-exception-actions button { padding: 8px 10px; border: 1px solid #d9e0e8; border-radius: 7px; background: #fff; font-size: 14px; }
.production-history { margin: 0 24px 22px; padding: 13px 15px; border: 1px solid #dfe6ed; border-radius: 10px; background: #f8fafc; }
.production-history summary { cursor: pointer; color: #40546c; font-size: 14px; font-weight: 800; }
.production-history > div { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding-top: 11px; font-size: 14px; }
.production-history small { color: #748296; }
.production-history button { padding: 7px 9px; border: 1px solid #d7e0ea; border-radius: 6px; background: #fff; font-size: 14px; }
.production-completion-packaging { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(90px, 1fr)) auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid #d9e4e1; border-radius: 9px; background: #fff; }
.production-completion-packaging > div span, .production-completion-packaging > div strong { display: block; }
.production-completion-packaging > div span { margin-bottom: 3px; color: #7a8999; font-size: 14px; font-weight: 700; }
.production-completion-packaging > div strong { color: #2b4d47; font-size: 14px; }
.production-completion-packaging > em { padding: 6px 8px; border-radius: 6px; color: #a62f3d; background: #ffe5e8; font-size: 14px; font-style: normal; font-weight: 900; }
.production-completion-packaging > button { color: #255f55; border-color: #b9d8cf; background: #edf7f4; font-weight: 800; }
.production-completion-packaging.shortage { border-color: #e8b2b9; background: #fff7f8; }
.production-inventory-preview { margin-top: 17px; padding: 14px; border: 1px solid #dce5ee; border-radius: 10px; background: #f8fafc; }
.production-inventory-preview > span { color: #758296; font-size: 14px; }
.production-inventory-result { display: flex; justify-content: space-between; gap: 12px; color: #27715c; }
.production-inventory-result.insufficient { color: #a93441; }
.production-inventory-items { display: grid; gap: 6px; margin-top: 12px; }
.production-inventory-items div { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 8px; padding: 8px 10px; border-radius: 7px; background: #fff; font-size: 14px; }
.production-inventory-items div.insufficient { color: #a93441; background: #fff0f2; }
.production-inventory-items em { font-style: normal; font-weight: 800; }
.production-inventory-error { color: #a93441; font-size: 14px; font-weight: 700; }
.production-completion-hint, .production-exception-warning { margin-bottom: 16px; padding: 12px 13px; border-radius: 9px; color: #255f55; background: #edf7f4; font-size: 14px; font-weight: 700; line-height: 1.6; }
.production-exception-warning { color: #9c3340; background: #fff0f2; }
.production-batch-materials { display: grid; gap: 6px; margin-top: 14px; padding: 12px; border-radius: 9px; background: #f5f7fa; }
.production-batch-materials span { color: #536377; font-size: 14px; }
.production-exception-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 18px; }
.production-exception-type input { position: absolute; opacity: 0; pointer-events: none; }
.production-exception-type span { display: grid; place-items: center; min-height: 48px; padding: 8px; border: 2px solid #e2e7ed; border-radius: 9px; color: #4f6074; background: #fff; font-size: 14px; font-weight: 800; text-align: center; cursor: pointer; }
.production-exception-type input:checked + span { border-color: #c63c4b; color: #a82d3a; background: #fff0f2; }
.production-exception-submit { padding: 10px 16px; border-radius: 9px; font-weight: 800; }
.production-resolution-context { margin-bottom: 16px; padding: 13px; border-radius: 9px; background: #f5f7fa; }
.production-resolution-context p { color: #617087; font-size: 14px; }
.production-resolution-context button { padding: 7px 9px; border: 1px solid #d7dfe8; border-radius: 6px; background: #fff; font-size: 14px; }
.task-source { display: inline-flex; width: max-content; margin-top: 7px; padding: 5px 7px; border-radius: 6px; color: #53667d; background: #edf1f5; font-size: 14px; }
.task-source.production { color: #236454; background: #e6f5f0; }
.finished-stock-mark { display: inline-flex; margin: 7px 0; padding: 6px 8px; border-radius: 6px; color: #246b58; background: #e7f5f0; font-size: 14px; }
.bom-coverage-panel { margin-bottom: 15px; padding: 17px 18px; border: 1px solid #d6e4e0; border-radius: 13px; background: linear-gradient(135deg, #f7fbfa, #fff); box-shadow: 0 3px 12px #1f335408; }
.bom-coverage-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bom-coverage-head span, .bom-coverage-head strong { display: block; }
.bom-coverage-head span { color: #58736d; font-size: 14px; font-weight: 900; letter-spacing: .5px; }
.bom-coverage-head strong { margin-top: 4px; color: #194e43; font-size: 15px; }
.bom-coverage-head small { color: #7c8897; font-size: 14px; }
.bom-coverage-list { display: grid; gap: 7px; max-height: 310px; margin-top: 13px; overflow: auto; }
.bom-coverage-item { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(310px, 1.5fr) auto; align-items: center; gap: 13px; padding: 10px 12px; border: 1px solid #e1e8eb; border-radius: 9px; background: #fff; }
.bom-coverage-item > div:first-child strong, .bom-coverage-item > div:first-child span { display: block; }
.bom-coverage-item > div:first-child strong { color: #243d57; font-size: 14px; }
.bom-coverage-item > div:first-child span { margin-top: 2px; color: #7b8796; font-size: 14px; }
.bom-coverage-stages { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.bom-coverage-stage { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: 7px; color: #657385; background: #f2f4f7; font-size: 14px; }
.bom-coverage-stage b { color: inherit; }
.bom-coverage-stage.active { color: #1b735d; background: #e7f6f1; }
.bom-coverage-stage.draft { color: #996519; background: #fff4dc; }
.bom-coverage-stage.missing { color: #b23d4c; background: #fff0f2; }
.bom-coverage-item > em { justify-self: end; color: #a13a48; font-size: 14px; font-style: normal; font-weight: 900; }
.bom-coverage-item.complete > em { color: #1b735d; }
.bom-coverage-empty { color: #798697; font-size: 14px; }
.bom-import-result { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 13px 15px; border: 1px solid #a9d7ca; border-left: 5px solid #1b9875; border-radius: 10px; color: #436a61; background: #f1faf7; }
.bom-import-result strong, .bom-import-result span { display: block; }
.bom-import-result strong { color: #17614f; font-size: 14px; }
.bom-import-result span { margin-top: 4px; font-size: 14px; line-height: 1.55; }
.bom-list { display: grid; gap: 14px; }
.bom-card { background: white; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.bom-head { padding: 18px 20px; display: flex; align-items: center; gap: 15px; }
.bom-code { width: 42px; height: 42px; border-radius: 10px; background: #eaf2ff; color: var(--blue); display: grid; place-items: center; font-weight: 700; }
.bom-code.semi_finished { background: #e7f7f1; color: #1c725b; }
.bom-code.finished { background: #fff1dd; color: #9a5a10; }
.bom-head h3 { margin: 0 0 4px; font-size: 14px; }.bom-head p { margin: 0; color: var(--muted); font-size: 14px; }
.bom-head .bom-output { margin-top: 6px; color: #2a6659; }
.bom-head .bom-output strong { color: #174c41; }
.bom-meta { margin-left: auto; text-align: right; }.bom-meta span { margin-left: 8px; }.bom-meta small { display: block; color: var(--muted); margin-top: 5px; }
.bom-activate-button { margin-top: 8px; padding: 7px 10px; border: 1px solid #80b5a6; border-radius: 7px; color: #1c6653; background: #ebf7f3; font-size: 14px; font-weight: 800; }
.bom-activate-button:hover { border-color: #2f8068; background: #dff2ec; }
.bom-clone-button { margin: 8px 0 0 6px; padding: 7px 10px; border: 1px solid #b8c9e3; border-radius: 7px; color: #315f9f; background: #f0f5fc; font-size: 14px; font-weight: 800; }
.bom-clone-button:hover { border-color: #7497c8; background: #e5eef9; }
.bom-production-button { margin: 8px 0 0 6px; padding: 7px 10px; border: 1px solid #d7a965; border-radius: 7px; color: #80561c; background: #fff6e8; font-size: 14px; font-weight: 800; }
.bom-production-button:hover { border-color: #b77a28; background: #ffedd1; }
.bom-production-mark, .bom-draft-hint { display: block; margin-top: 7px; color: #24715e; font-size: 14px; font-style: normal; font-weight: 800; }
.bom-draft-hint { color: #8a6b2e; }
.bom-items-disclosure { border-top: 1px solid var(--line); background: #fff; }
.bom-items-disclosure > summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 20px; cursor: pointer; list-style: none; color: var(--ink); font-size: 16px; font-weight: 800; }
.bom-items-disclosure > summary::-webkit-details-marker { display: none; }
.bom-items-disclosure > summary::before { content: '›'; flex: 0 0 auto; color: var(--red); font-size: 26px; line-height: 1; transition: transform .16s ease; }
.bom-items-disclosure[open] > summary::before { transform: rotate(90deg); }
.bom-items-disclosure > summary strong { padding: 4px 9px; border-radius: 999px; color: #4f6074; background: #eef2f6; font-size: 14px; }
.bom-items-disclosure > summary em { margin-left: auto; color: var(--red); font-size: 14px; font-style: normal; }
.bom-items-disclosure > summary .when-open,
.bom-items-disclosure[open] > summary .when-closed { display: none; }
.bom-items-disclosure[open] > summary .when-open { display: inline; }
.bom-items-disclosure > summary:focus-visible { outline: 3px solid #e4002b2b; outline-offset: -3px; }
.bom-items { border-top: 1px solid var(--line); background: #fbfcfe; padding: 12px 20px 16px; }
.bom-items-table-wrap { max-width: 100%; overflow-x: auto; }
.bom-items table { min-width: 650px; }.bom-items th { background: transparent; }.bom-items td { padding-top: 10px; padding-bottom: 10px; }
.add-item { border: 1px dashed #b9cceb; color: var(--blue); background: #f5f9ff; border-radius: 7px; padding: 7px 10px; font-size: 14px; margin-top: 10px; }
.bom-lock { color: #7d8795; font-size: 14px; font-weight: 700; }
.bom-item-edit-button { border-color: #b7c9e4; color: #315f9f; background: #f0f5fc; }
.bom-locked-note { margin: 10px 0 0; color: #66758a; font-size: 14px; font-weight: 700; }
.bom-clone-context { display: grid; gap: 5px; margin-bottom: 18px; padding: 13px 15px; border: 1px solid #d5e1f2; border-radius: 9px; background: #f3f7fc; }
.bom-clone-context span, .bom-clone-context small { color: #667a96; font-size: 14px; }
.bom-clone-context strong { color: #294f83; font-size: 14px; }
.bom-import-dropzone { display: grid; place-items: center; gap: 6px; min-height: 190px; padding: 24px; border: 2px dashed #b7cae5; border-radius: 13px; color: #55708f; background: #f7faff; text-align: center; outline: 0; transition: border-color .16s, background .16s, transform .16s; }
.bom-import-dropzone:hover, .bom-import-dropzone:focus-visible, .bom-import-dropzone.dragging { border-color: #3977e8; background: #edf4ff; transform: translateY(-1px); }
.bom-import-drop-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #188562, #1ca87b); font-size: 14px; font-weight: 900; box-shadow: 0 8px 18px #15785b2b; }
.bom-import-dropzone strong { color: #294f7d; font-size: 14px; }
.bom-import-dropzone small { max-width: 470px; color: #758399; font-size: 14px; line-height: 1.6; }
.bom-import-selected { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 9px; color: #8893a2; background: #f5f7fa; font-size: 14px; }
.bom-import-selected.has-files { color: #536a84; }
.bom-import-selected span { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid #dce5ef; border-radius: 7px; background: #fff; }
.bom-import-selected b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bom-import-selected small { flex: 0 0 auto; color: #8290a1; }
.bom-import-safety-note { display: grid; gap: 4px; margin-top: 12px; padding: 11px 13px; border: 1px solid #ecd18f; border-radius: 9px; color: #806329; background: #fff9e8; }
.bom-import-safety-note strong { font-size: 14px; }
.bom-import-safety-note span { font-size: 14px; line-height: 1.6; }
.bom-import-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bom-import-summary article { display: grid; gap: 4px; padding: 12px; border: 1px solid #dae4ef; border-radius: 9px; background: #f8fafc; }
.bom-import-summary span { color: #718096; font-size: 14px; }
.bom-import-summary strong { color: #244d7e; font-size: 20px; }
.bom-import-file-list { display: grid; gap: 6px; max-height: 135px; margin-top: 10px; overflow: auto; }
.bom-import-file-list > span { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 7px; color: #586a80; background: #eef3f8; font-size: 14px; }
.bom-import-file-list b { color: #314d70; }
.bom-import-file-list em { margin-left: auto; color: #b23847; font-style: normal; font-weight: 800; }
.bom-import-file-list em.passed { color: #1f7c63; }
.bom-import-error-panel { margin-top: 12px; border: 1px solid #ecc1c7; border-radius: 10px; overflow: hidden; background: #fff8f9; }
.bom-import-error-panel > div { display: grid; gap: 3px; padding: 11px 13px; color: #9e3341; background: #fff0f2; }
.bom-import-error-panel > div strong { font-size: 14px; }
.bom-import-error-panel > div span { font-size: 14px; }
.bom-import-error-panel ol { display: grid; gap: 0; max-height: 280px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.bom-import-error-panel li { display: grid; gap: 3px; padding: 10px 13px; border-top: 1px solid #f0d8db; }
.bom-import-error-panel li span { color: #8e6670; font-size: 14px; }
.bom-import-error-panel li strong { color: #8d2c39; font-size: 14px; }
.bom-import-passed { display: grid; gap: 5px; margin-top: 12px; padding: 12px 14px; border: 1px solid #a8d8ca; border-radius: 9px; color: #376c5f; background: #eef9f5; }
.bom-import-passed strong { color: #18624f; font-size: 14px; }
.bom-import-passed span { font-size: 14px; line-height: 1.6; }
#modal:has(.bom-import-dropzone) .modal-card, #modal:has(.bom-import-summary) .modal-card { width: min(780px, 100%); }
.formula-material-type { display: inline-flex; padding: 4px 7px; border-radius: 999px; background: #edf2f7; color: #556579; font-size: 14px; font-weight: 800; white-space: nowrap; }
.formula-material-type.semi_finished { background: #e4f5ef; color: #17624f; }
.formula-preview-version { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid #d9e3ef; border-radius: 8px; background: #f7f9fc; color: #5b6b80; font-size: 14px; }
.formula-preview-version strong { color: #235c50; }
.production-formula-snapshot { color: #327061 !important; font-weight: 700; }
.formula-link-note { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid #c7ddd7; border-radius: 10px; background: #f1f8f6; color: #54706a; font-size: 14px; }
.formula-link-note strong { color: #1c5147; }
.formula-link-note span { flex: 1; }
.formula-link-note button { padding: 7px 10px; border: 1px solid #83b2a7; border-radius: 7px; background: #fff; color: #245f52; font-weight: 800; }
.modal { position: fixed; inset: 0; z-index: 50; background: #0f1a2e80; display: grid; place-items: center; padding: 20px; backdrop-filter: blur(3px); }
.modal-card { width: min(560px, 100%); max-height: 90vh; overflow: auto; background: #fff; border-radius: 15px; box-shadow: 0 20px 60px #101b3060; }
.change-own-pin-card { width: min(480px, 100%); }
.change-own-pin-card form { padding: 22px 23px 23px; }
.change-own-pin-fields { display: grid; gap: 16px; }
.change-own-pin-note { margin: 0; padding: 11px 13px; border-radius: 9px; color: #5c6d87; background: #f3f7fd; font-size: 14px; line-height: 1.65; }
.option-modal { z-index: 90; }
.option-modal-card { width: min(420px, 100%); }
.option-modal-card #optionForm { padding: 22px 23px; }
.modal-header { display: flex; padding: 21px 23px; border-bottom: 1px solid var(--line); }.modal-header h3 { margin: 0; font-size: 17px; }.modal-header p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }.modal-header button { margin-left: auto; border: 0; }
#modalForm { padding: 22px 23px; }
#employeeForm, #employeePinForm, #customerForm { padding: 22px 23px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.field.full { grid-column: 1 / -1; }
.field label { display: block; font-size: 14px; color: #5c687c; margin-bottom: 7px; font-weight: 600; }
.modal-card:has(.material-create-form) { width: min(760px, 100%); }
.material-create-note { display: grid; gap: 5px; margin-bottom: 17px; padding: 13px 15px; border: 1px solid #b9d2f1; border-left: 5px solid #2f6bb5; border-radius: 10px; color: #416286; background: #f1f7ff; }
.material-create-note strong { color: #1e4e89; font-size: 14px; }
.material-create-note span { font-size: 14px; line-height: 1.6; }
.material-create-scope-note { margin-top: 16px; padding: 10px 12px; border-radius: 8px; color: #6d5b2a; background: #fff8e8; font-size: 14px; line-height: 1.6; }
.structured-title { margin-top: 4px; padding: 11px 13px; border-radius: 8px; color: #3768b8; background: #edf4ff; font-size: 14px; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #dfe5ed; border-radius: 8px; padding: 10px 11px; outline: 0; color: var(--ink); background: #fff; }.field textarea { min-height: 76px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #6b9bed; box-shadow: 0 0 0 3px #3977e812; }
.searchable-select-control { display: grid; gap: 6px; width: 100%; min-width: 0; }
.searchable-select-input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #cfdbea; border-radius: 8px; outline: 0; color: var(--ink); background: #f7faff; font-size: 16px; }
.searchable-select-input::placeholder { color: #718097; opacity: 1; }
.searchable-select-input:focus { border-color: #3977e8; box-shadow: 0 0 0 3px #3977e816; background: #fff; }
.searchable-select-input:disabled { cursor: not-allowed; color: #8793a4; background: #f0f2f5; }
.searchable-select-status { display: none; margin: 0; color: #587193; font-size: 16px; line-height: 1.4; }
.searchable-select-control.has-query .searchable-select-status { display: block; }
.searchable-select-status.no-match { color: #b43b49; font-weight: 800; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }.secondary { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 10px 16px; color: #68758a; font-size: 14px; }
.photo-confirmation-modal, .evidence-photo-modal { z-index: 110; }
.photo-confirmation-card { width: min(720px, 100%); overflow: hidden; }
.photo-confirmation-body { padding: 20px 23px 23px; }
.photo-identity { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; padding: 13px 15px; border: 1px solid #cfe0fa; border-radius: 10px; background: #edf5ff; }
.photo-identity span { color: #587296; font-size: 14px; font-weight: 600; }
.photo-identity strong { color: #173f7c; font-size: 15px; }
.photo-camera-stage { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 13px; background: #111a27; }
.photo-camera-stage video, .photo-camera-stage canvas { width: 100%; height: 100%; object-fit: contain; }
.photo-camera-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #dce9fc; background: #111a27; font-size: 14px; font-weight: 700; }
.photo-camera-error { margin-top: 12px; padding: 12px 14px; border: 1px solid #f0b8bf; border-radius: 9px; color: #a33341; background: #fff0f2; font-size: 14px; line-height: 1.6; }
.photo-step-hint { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 14px; }
.photo-step-hint span { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; border-radius: 8px; color: #58677d; background: #f4f6f9; font-size: 14px; font-weight: 700; }
.photo-step-hint b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: #2f66b2; }
.photo-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.photo-actions .primary { min-width: 150px; font-size: 14px; }
.photo-actions button:disabled { cursor: not-allowed; opacity: .48; }
.evidence-photo-card { width: min(840px, 100%); overflow: hidden; }
.evidence-photo-body { display: grid; place-items: center; min-height: 260px; max-height: 78vh; padding: 16px; overflow: auto; background: #111a27; }
.evidence-photo-body img { display: block; max-width: 100%; max-height: 72vh; border-radius: 8px; object-fit: contain; }
.session-idle-warning-modal { z-index: 130; }
.session-idle-warning-card { width: min(520px, 100%); padding: 31px; border-radius: 18px; background: #fff; box-shadow: 0 24px 70px #0c172f66; text-align: center; }
.session-idle-security-label { display: inline-flex; padding: 7px 12px; border-radius: 999px; color: #80561c; background: #fff1d9; font-size: 14px; font-weight: 900; }
.session-idle-warning-card h3 { margin: 14px 0 8px; color: #183250; font-size: 24px; }
.session-idle-warning-card p { margin: 0 auto; max-width: 410px; color: #607086; font-size: 14px; line-height: 1.7; }
.session-idle-countdown { display: block; margin: 22px 0 8px; color: #b9404d; font-size: 44px; line-height: 1; letter-spacing: 3px; }
.session-idle-warning-card small { color: #7b8798; font-size: 14px; }
.session-idle-actions { display: grid; grid-template-columns: .75fr 1.25fr; gap: 11px; margin-top: 24px; }
.session-idle-actions button { min-height: 50px; font-size: 14px; font-weight: 900; }
.toast { position: fixed; right: 24px; bottom: 24px; background: #1c2c47; color: #fff; border-radius: 9px; padding: 12px 17px; font-size: 14px; box-shadow: 0 10px 30px #0d182844; transform: translateY(30px); opacity: 0; pointer-events: none; transition: .25s; z-index: 80; }.toast.show { transform: none; opacity: 1; }.toast.error { background: #bd3f4c; }
.assistant-workbench { display: grid; gap: 18px; }
.assistant-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 166px; padding: 30px 34px; overflow: hidden; border-radius: 18px; color: #fff; background: linear-gradient(125deg, #152643 0%, #24496d 68%, #237265 100%); box-shadow: 0 14px 36px #12233f24; }
.assistant-hero h2 { margin: 6px 0 8px; font-size: 32px; }
.assistant-hero p { margin: 0; color: #dce9f0; font-size: 15px; }
.assistant-local-notice { display: grid; gap: 7px; min-width: 220px; padding: 18px 20px; border: 1px solid #ffffff40; border-radius: 13px; background: #ffffff14; }
.assistant-local-notice strong { font-size: 18px; color: #9df0d4; }
.assistant-local-notice span { color: #fff; font-size: 14px; }
.assistant-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 18px; }
.assistant-chat-panel, .assistant-task-panel { min-width: 0; padding: 22px; }
.assistant-panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding-bottom: 16px; border-bottom: 1px solid #e7ecef; }
.assistant-panel-title h3 { margin: 0 0 4px; font-size: 19px; color: #17304d; }
.assistant-panel-title p { margin: 0; color: #71808f; font-size: 14px; }
.assistant-panel-title > span { padding: 6px 10px; border-radius: 999px; color: #176954; background: #e7f7f1; font-size: 14px; font-weight: 800; }
.assistant-conversation { display: grid; align-content: start; gap: 13px; min-height: 260px; max-height: 430px; padding: 20px 2px; overflow-y: auto; }
.assistant-message { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; max-width: 88%; }
.assistant-message > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: #237265; font-weight: 900; }
.assistant-message > div { padding: 12px 14px; border-radius: 4px 14px 14px; background: #eef5f4; }
.assistant-message strong { display: block; margin-bottom: 4px; color: #1d4f46; font-size: 14px; }
.assistant-message p { margin: 0; color: #24384a; line-height: 1.65; white-space: pre-wrap; }
.assistant-message.user { grid-template-columns: minmax(0, 1fr) 38px; justify-self: end; }
.assistant-message.user > span { grid-column: 2; color: #17304d; background: #e5ebf2; }
.assistant-message.user > div { grid-column: 1; grid-row: 1; border-radius: 14px 4px 14px 14px; background: #17304d; text-align: right; }
.assistant-message.user strong, .assistant-message.user p { color: #fff; }
.assistant-quick-questions { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 0 15px; border-top: 1px solid #edf1f3; }
.assistant-quick-questions button { min-height: 36px; padding: 7px 11px; border: 1px solid #cfdde0; border-radius: 999px; color: #285c56; background: #f7fbfa; font-size: 14px; font-weight: 700; }
.assistant-quick-questions button:hover { border-color: #237265; background: #eaf6f2; }
.assistant-question-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.assistant-question-form input { min-width: 0; min-height: 48px; padding: 0 15px; border: 1px solid #cfd9df; border-radius: 10px; font-size: 15px; }
.assistant-question-form button { min-height: 48px; padding-right: 22px; padding-left: 22px; }
.assistant-task-actions { display: grid; gap: 11px; padding-top: 18px; }
.assistant-task-action { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; width: 100%; padding: 16px; border: 1px solid #dce5e8; border-radius: 12px; color: #203a51; background: #fbfdfd; text-align: left; }
.assistant-task-action:hover { border-color: #6ba99b; box-shadow: 0 7px 20px #193c3320; transform: translateY(-1px); }
.assistant-task-action > span { font-size: 16px; font-weight: 900; }
.assistant-task-action > strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #237265; font-size: 30px; }
.assistant-task-action > small { color: #778692; }
.assistant-task-action > b { grid-column: 1 / -1; margin-top: 8px; color: #236b5e; font-size: 14px; }
.assistant-empty { padding: 24px 16px; border: 1px dashed #cfd8dc; border-radius: 11px; color: #788691; text-align: center; }
@media (max-width: 1050px) { .stats-grid { grid-template-columns: 1fr 1fr; }.dashboard-grid { grid-template-columns: 1fr; }.dashboard-data-safety { grid-template-columns: 1fr; }.dashboard-data-safety-action { text-align: left; }.dashboard-exception-summary { grid-template-columns: 1fr 1fr; }.dashboard-exception-lead { grid-column: 1 / -1; }.finance-summary-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  #employeePinForm input { min-height: 48px; font-size: 16px; }
  #employeePinForm .form-actions { display: grid; grid-template-columns: 1fr 1fr; }
  #employeePinForm .form-actions button { min-height: 48px; }
  .material-create-form { grid-template-columns: 1fr; }
  .material-create-form input, .material-create-form select { min-height: 46px; }
  #modalForm:has(.material-create-form) .form-actions { display: grid; grid-template-columns: 1fr 1fr; }
  #modalForm:has(.material-create-form) .form-actions button { min-height: 48px; }
  .worker-purchase-task-grid { grid-template-columns: 1fr; padding: 10px; }
  .worker-purchase-task { padding: 16px; }
  .worker-purchase-material { font-size: 21px; }
  .worker-purchase-task-facts { grid-template-columns: 1fr 1fr; }
  .purchase-receipt-progress { grid-template-columns: 1fr; }
  .purchase-receipt-quantity-input { min-height: 48px; }
  .purchase-receipt-line { align-items: stretch; flex-direction: column; }
  .purchase-receipt-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .purchase-receipt-actions button, .purchase-receipt-reversal-button { min-height: 42px; width: 100%; }
  .purchase-receipt-reversal-mark { align-items: flex-start; flex-direction: column; }
  .purchase-receipt-reversal-mark button { min-height: 42px; width: 100%; }
  .purchase-receipt-reversal-summary { grid-template-columns: 1fr; }
  .app-shell { display: block; }.sidebar { position: fixed; z-index: 40; width: 244px; transform: translateX(-100%); transition: .25s; }.sidebar.open { transform: none; box-shadow: 10px 0 30px #0c173e33; }
  .app-update-banner, .default-pin-warning { grid-template-columns: 1fr; margin: 12px 15px 0; padding: 15px; }
  .app-update-icon, .default-pin-warning-icon { display: none; }
  .app-update-banner button, .default-pin-warning button { width: 100%; min-height: 48px; }
  .menu-button { display: block; } header { padding: 0 17px; }.content { padding: 18px 15px 35px; }.header-actions .icon-button { display: none; }
  .welcome { align-items: flex-start; }.today { display: none; }.stats-grid { grid-template-columns: 1fr; gap: 11px; }.stat-card { padding: 15px; }.dashboard-grid { gap: 11px; }
  .dashboard-data-safety-steps { grid-template-columns: 1fr; }
  .dashboard-exception-summary { grid-template-columns: 1fr; }
  .packaging-summary { grid-template-columns: 1fr; gap: 9px; }
  .inventory-summary, .calculation-summary, .purchase-summary, .finance-summary-grid { grid-template-columns: 1fr; }
  .purchase-welcome { align-items: flex-start; }
  .purchase-welcome .primary { width: 100%; margin-left: 0; }
  .purchase-ledger-head, .purchase-batch-date { align-items: stretch; flex-direction: column; }
  .purchase-search { grid-template-columns: 1fr auto; }
  .purchase-search > strong { grid-column: 1 / -1; text-align: left; }
  .purchase-status-filter { overflow-x: auto; padding-bottom: 3px; }
  .purchase-status-filter button { flex: 0 0 auto; min-height: 40px; }
  .purchase-order-head { grid-template-columns: 1fr; }
  .purchase-order-meta { justify-items: start; }
  .purchase-order-head-actions { align-items: stretch; flex-direction: column; }
  .purchase-preview-button { width: 100%; }
  .purchase-cancelled-summary { align-items: flex-start; flex-direction: column; gap: 5px; }
  .sales-order-cancelled-summary, .task-cancelled-mark { align-items: flex-start; flex-direction: column; gap: 5px; }
  .task-manager-actions { align-items: stretch; flex-direction: column; }
  .purchase-form-title { align-items: stretch; flex-direction: column; }
  .purchase-material-link-snapshot { grid-template-columns: 1fr; }
  .purchase-material-link-picker { grid-template-columns: 1fr; }
  .purchase-material-link-picker input { min-height: 46px; font-size: 16px; }
  .purchase-material-link-picker select { min-height: 260px; font-size: 14px; }
  #modalForm:has(.purchase-material-link-picker) .form-actions { display: grid; grid-template-columns: 1fr; }
  #modalForm:has(.purchase-material-link-picker) .form-actions button { min-height: 48px; }
  .audit-log-toolbar { align-items: stretch; flex-direction: column; }
  .audit-log-filters { align-items: stretch; flex-direction: column; }
  .audit-date-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; }
  .audit-date-filters i { margin: 0 0 16px; }
  .audit-date-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  #auditLogFromDate, #auditLogToDate { width: 100%; min-height: 48px; font-size: 16px; }
  .audit-date-actions button { min-height: 48px; font-size: 14px; }
  .audit-export-button { width: 100%; min-height: 48px; font-size: 14px; }
  .audit-log-search { min-width: 0; width: 100%; }
  .audit-view-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .audit-view-tabs button { min-width: 0; }
  .evidence-ledger-filters { align-items: stretch; flex-direction: column; }
  .evidence-ledger-filters select { width: 100%; }
  .purchase-form-line { grid-template-columns: 34px 1fr; }
  .purchase-form-line .field { grid-column: 2; }
  .purchase-line-index { grid-row: 1 / span 2; }
  .purchase-remove-line { grid-column: 1; grid-row: 3; }
  .purchase-preview-actions { flex-wrap: wrap; }
  .purchase-preview-actions > div { flex-basis: 100%; }
  .formal-purchase-order { min-height: 0; padding: 28px 24px; }
  .formal-order-meta { grid-template-columns: 1fr; }
  .production-welcome { align-items: flex-start; }
  .production-welcome .primary { width: 100%; margin-left: 0; }
  .production-summary { grid-template-columns: 1fr 1fr; }
  .production-task-search { grid-template-columns: 1fr auto; }
  .production-task-search label, .production-task-search > div { grid-column: 1 / -1; }
  .production-status-filter { overflow-x: auto; padding-bottom: 3px; }
  .production-status-filter button { flex: 0 0 auto; min-height: 40px; }
  .production-ledger-head { align-items: stretch; flex-direction: column; }
  .production-task-head { flex-direction: column; padding: 18px; }
  .production-task-head h3 { font-size: 25px; }
  .production-key-grid { grid-template-columns: 1fr 1fr; margin: 0 18px; }
  .production-key-grid div:first-child { grid-column: 1 / -1; }
  .production-progress { margin-right: 18px; margin-left: 18px; }
  .production-packaging-handoff { margin-right: 18px; margin-left: 18px; }
  .production-handoff-title { align-items: stretch; flex-direction: column; }
  .production-handoff-title em { align-self: flex-start; }
  .production-handoff-steps { grid-template-columns: 1fr; }
  .production-handoff-arrow { display: none; }
  .production-materials-panel { margin-right: 18px; margin-left: 18px; }
  .production-materials-panel summary { align-items: flex-start; flex-direction: column; gap: 9px; }
  .production-material-row { grid-template-columns: 1fr; gap: 9px; }
  .production-material-row > div:not(.production-material-name) { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .production-material-row > div > span { margin-bottom: 0; }
  .production-material-row > em { justify-self: stretch; padding: 8px; }
  .production-paused-alert { margin-right: 18px; margin-left: 18px; }
  .production-task-actions { grid-template-columns: 1fr; padding: 16px 18px 19px; }
  .production-exception-panel, .production-history { margin-right: 18px; margin-left: 18px; }
  .production-cancelled-summary { align-items: flex-start; flex-direction: column; gap: 5px; margin-right: 18px; margin-left: 18px; }
  .production-exception-item { align-items: stretch; flex-direction: column; }
  .production-exception-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .production-history > div { grid-template-columns: 1fr; }
  .production-completion-packaging { grid-template-columns: 1fr 1fr; }
  .production-completion-packaging > button, .production-completion-packaging > em { grid-column: 1 / -1; }
  .production-inventory-items div { grid-template-columns: 1fr 1fr; }
  .production-inventory-items b { grid-column: 1 / -1; }
  .production-exception-types { grid-template-columns: 1fr 1fr; }
  .inventory-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .inventory-panel-head { align-items: stretch; flex-direction: column; }
  .inventory-panel-actions { margin-left: 0; justify-content: stretch; }
  .inventory-panel-actions button { flex: 1 1 160px; }
  .inventory-baseline-status { align-items: stretch; flex-direction: column; }
  .inventory-baseline-status button { width: 100%; min-height: 44px; }
  .inventory-initialization-summary { grid-template-columns: 1fr 1fr; }
  .low-stock-workbench-actions { width: 100%; margin-left: 0; }
  .low-stock-workbench-head > span { align-self: flex-start; margin-left: 0; }
  .low-stock-priority-filters { grid-template-columns: 1fr 1fr; }
  .low-stock-priority-filters > strong { grid-column: 1 / -1; }
  .low-stock-row-actions { align-items: stretch; flex-direction: column; min-width: 92px; }
  .low-stock-supplier-facts { grid-template-columns: 1fr 1fr; }
  .low-stock-supplier-action { align-items: stretch; flex-direction: column; }
  .low-stock-supplier-action button { width: 100%; }
  .import-placeholder { margin-left: 0; }
  .inventory-explorer { padding: 14px; }
  .inventory-level-heading { align-items: stretch; flex-direction: column; }
  .inventory-level-heading > .primary { width: 100%; }
  .inventory-level-grid { grid-template-columns: 1fr; }
  .configuration-title { align-items: flex-start; flex-direction: column; }
  .configuration-section-title { align-items: flex-start; flex-wrap: wrap; }
  .configuration-section-title > button { width: 100%; min-height: 44px; }
  .configuration-assignment { grid-template-columns: auto 1fr; }
  .configuration-assignment > input[type="number"] { width: 100%; grid-column: 2; }
  .configuration-assignment em { grid-column: 2; }
  .production-calculator-form { grid-template-columns: 1fr; }
  .task-workbench-head { align-items: stretch; flex-direction: column; }
  .current-identity { margin-left: 0; align-self: flex-start; }
  .task-workbench-head > .primary { width: 100%; }
  .task-main { grid-template-columns: 1fr; gap: 14px; }
  .task-quantity { text-align: left; }
  .task-key-facts, .task-config-list { grid-template-columns: 1fr; }
  .task-packaging-checklist { margin-right: 14px; margin-left: 14px; }
  .task-packaging-checklist-title { align-items: flex-start; flex-direction: column; }
  .task-packaging-item { grid-template-columns: 38px 1fr; gap: 10px; }
  .task-packaging-quantity, .task-packaging-stock { grid-column: 2; text-align: left; }
  .task-progress { grid-template-columns: 1fr; text-align: left; }
  .task-progress b { display: none; }
  .task-actions-row { grid-template-columns: 1fr; }
  .task-action { text-align: left; }
  .complete-task { width: 100%; }
  .system-backup-welcome { align-items: stretch; flex-direction: column; }
  .system-backup-welcome-actions { display: grid; grid-template-columns: 1fr; width: 100%; margin-left: 0; }
  .system-backup-welcome-actions button { width: 100%; min-height: 44px; }
  .system-backup-notice { flex-direction: column; }
  .system-backup-notice strong { white-space: normal; }
  .deployment-readiness-head, .deployment-readiness-summary { align-items: stretch; flex-direction: column; }
  .deployment-readiness-head button { width: 100%; min-height: 48px; }
  .deployment-readiness-summary span { text-align: left; }
  .deployment-readiness-checks { grid-template-columns: 1fr; }
  .system-backup-reminder { grid-template-columns: 1fr; }
  .system-backup-reminder small { grid-column: auto; }
  .system-backup-reminder button { min-height: 42px; }
  .system-backup-summary { grid-template-columns: 1fr; }
  .system-backup-ledger-head, .system-backup-card-head, .system-backup-verification, .backup-preflight, .backup-export { align-items: stretch; flex-direction: column; }
  .system-backup-ledger-head > span { align-self: flex-start; }
  .system-backup-card-actions { display: grid; grid-template-columns: 1fr; }
  .system-backup-card-actions button { width: 100%; min-height: 42px; }
  .system-backup-facts { grid-template-columns: 1fr 1fr; }
  .system-backup-facts > div:nth-child(2) { border-right: 0; }
  .system-backup-facts > div:nth-child(-n + 2) { border-bottom: 1px solid #edf2f1; }
  .system-backup-verification span { text-align: left; }
  .backup-preflight > span { text-align: left; }
  .backup-export > div:last-child { align-items: stretch; flex-direction: column; }
  .backup-export > div:last-child > span { text-align: left; }
  .backup-export button { width: 100%; min-height: 42px; }
  .packaging-task-search { grid-template-columns: 1fr auto; margin-right: 0; margin-left: 0; }
  .packaging-task-search label, .packaging-task-search > div { grid-column: 1 / -1; }
  .packaging-task-search strong { text-align: left; }
  .packaging-task-status-filter { grid-template-columns: 1fr 1fr; margin-right: 0; margin-left: 0; }
  .photo-confirmation-modal, .evidence-photo-modal { padding: 0; }
  .photo-confirmation-card, .evidence-photo-card { width: 100%; max-height: 100vh; min-height: 100vh; border-radius: 0; }
  .photo-confirmation-body { padding: 16px; }
  .photo-step-hint { grid-template-columns: 1fr; }
  .photo-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .photo-actions button { width: 100%; }
  .session-idle-warning-modal { padding: 14px; }
  .session-idle-warning-card { padding: 26px 20px; }
  .session-idle-warning-card h3 { font-size: 22px; }
  .session-idle-countdown { font-size: 40px; }
  .session-idle-actions { grid-template-columns: 1fr; }
  .session-idle-actions button { width: 100%; min-height: 52px; }
  .packaging-filter { align-items: stretch; flex-direction: column; }
  .packaging-search-box { min-width: 0; width: 100%; }
  .sales-order-ledger-head { align-items: flex-start; flex-direction: column; }
  .sales-order-search { grid-template-columns: 1fr auto; }
  .sales-order-search > strong { grid-column: 1 / -1; text-align: left; }
  .sales-order-status-filter { overflow-x: auto; padding-bottom: 3px; }
  .sales-order-status-filter button { flex: 0 0 auto; min-height: 40px; }
  .worker-shipment-head { align-items: flex-start; }
  .worker-shipment-plan { align-items: flex-start; flex-wrap: wrap; }
  .worker-shipment-product { grid-template-columns: 1fr; }
  .worker-shipment-quantity { min-width: 0; padding: 13px 0 0; border-top: 1px solid #dfe5ed; border-left: 0; text-align: left; }
  .shipping-welcome { align-items: flex-start; flex-direction: column; }
  .shipping-welcome .primary { width: 100%; margin-left: 0; min-height: 48px; }
  .shipping-summary { grid-template-columns: 1fr 1fr; gap: 9px; }
  .shipping-summary article { padding: 13px; }
  .shipping-summary strong { font-size: 23px; }
  .shipping-ledger-head { align-items: stretch; flex-direction: column; }
  .shipping-ledger-head > span { align-self: flex-start; white-space: normal; }
  .shipping-filters, .shipping-filters.worker-mode { grid-template-columns: 1fr 1fr; }
  .shipping-filters .search { grid-column: 1 / -1; }
  .shipping-filters label, .shipping-filters select { min-width: 0; }
  .shipping-filters select, .shipping-filters input[type="date"] { min-height: 46px; font-size: 14px; }
  .shipping-filters .secondary { min-height: 46px; }
  .shipping-task-card { border-left-width: 6px; border-radius: 13px; }
  .shipping-task-head { padding: 15px; }
  .shipping-task-head h3 { font-size: 20px; overflow-wrap: anywhere; }
  .shipping-task-status-area { align-items: flex-end; }
  .shipping-status-badge, .shipping-alert-badge { font-size: 14px; }
  .shipping-assignment-line { grid-template-columns: 1fr; }
  .shipping-info-section { margin-right: 12px; margin-left: 12px; padding: 13px; }
  .shipping-info-section > h4 { align-items: flex-start; font-size: 14px; line-height: 1.45; }
  .shipping-info-section > h4 > b { flex: 0 0 24px; }
  .shipping-product-row { grid-template-columns: 1fr; }
  .shipping-product-quantity { min-width: 0; padding: 12px 0 0; border-top: 1px solid #dce6e9; border-left: 0; text-align: left; }
  .shipping-product-quantity strong { font-size: 32px; }
  .shipping-notes-grid, .shipping-fact-grid { grid-template-columns: 1fr; }
  .shipping-address-line { grid-template-columns: 1fr; }
  .shipping-address-line button { justify-self: stretch; min-height: 44px; margin-top: 7px; }
  .shipping-call-link { justify-self: stretch; justify-content: center; min-height: 42px; align-items: center; }
  .shipping-exception-banner { margin-right: 12px; margin-left: 12px; }
  .shipping-task-actions { grid-template-columns: 1fr; padding: 13px 12px 15px; }
  .shipping-task-actions button { width: 100%; min-height: 50px; }
  .shipping-primary-action { min-height: 60px !important; font-size: 16px !important; }
  .shipping-event-timeline { margin-right: 12px; margin-left: 12px; }
  .shipping-form-section { padding: 12px; }
  .shipping-source-item { grid-template-columns: 1fr 1fr; }
  .shipping-source-item > div { grid-column: 1 / -1; }
  .shipping-source-item input { min-height: 46px; font-size: 16px; }
  .modal-card:has(.shipping-task-form) { width: 100%; max-height: 100vh; border-radius: 0; }
  .toolbar { gap: 10px; }.search { width: auto; flex: 1; }.form-grid { grid-template-columns: 1fr; }.field.full { grid-column: auto; }
}
@media (max-width: 760px) {
  .assistant-hero { align-items: flex-start; flex-direction: column; padding: 24px 20px; }
  .assistant-hero h2 { font-size: 27px; }
  .assistant-local-notice { min-width: 0; width: 100%; }
  .assistant-layout { grid-template-columns: 1fr; }
  .assistant-chat-panel, .assistant-task-panel { padding: 17px; }
  .assistant-conversation { min-height: 230px; }
  .assistant-message { max-width: 96%; }
  .assistant-question-form { grid-template-columns: 1fr; }
  .assistant-question-form button { width: 100%; }
  .assistant-quick-questions button { min-height: 42px; }
  .assistant-task-action { min-height: 104px; }
}

@media (max-width: 760px) {
  .bom-toolbar { align-items: stretch; flex-direction: column; }
  .bom-product-filter { align-items: flex-start; flex-wrap: wrap; margin-left: 0; }
  .bom-toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .bom-toolbar-actions #addBomButton { grid-column: 1 / -1; min-height: 46px; }
  .bom-toolbar-actions .secondary { min-height: 44px; }
  .bom-coverage-head { align-items: flex-start; flex-direction: column; }
  .bom-coverage-list { max-height: 390px; }
  .bom-coverage-item { grid-template-columns: 1fr; }
  .bom-coverage-stages { grid-template-columns: 1fr; }
  .bom-coverage-item > em { justify-self: start; }
  .bom-import-result { align-items: flex-start; }
  .bom-import-summary { grid-template-columns: 1fr 1fr; }
  .bom-import-file-list > span { align-items: flex-start; flex-wrap: wrap; }
  .bom-import-file-list em { margin-left: 0; }
  .bom-import-dropzone { min-height: 175px; padding: 18px 14px; }
  #modalForm:has(.bom-import-dropzone) .form-actions,
  #modalForm:has(.bom-import-summary) .form-actions { display: grid; grid-template-columns: 1fr; }
  #modalForm:has(.bom-import-dropzone) .form-actions button,
  #modalForm:has(.bom-import-summary) .form-actions button { min-height: 48px; }
}

/* 适老化可读性基线：内部约 20 人使用，优先保证年长员工看得清、点得准。 */
body {
  font-size: 16px;
  line-height: 1.55;
}

button,
input,
select,
textarea {
  line-height: 1.45;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  font-size: 16px;
}

.nav-item {
  min-height: 48px;
  font-size: 16px;
  line-height: 1.5;
}

.signed-user strong { font-size: 16px; }
.signed-user small { font-size: 14px; line-height: 1.5; }
.field label { font-size: 15px; line-height: 1.5; }
.section-hint { font-size: 16px; line-height: 1.6; }

th {
  font-size: 15px;
  line-height: 1.45;
}

td {
  font-size: 16px;
  line-height: 1.5;
}

.primary,
.secondary,
.header-pin-button {
  min-height: 44px;
  font-size: 16px;
}

.sales-order-status-filter button,
.purchase-status-filter button,
.production-status-filter button,
.low-stock-priority-filters button,
.audit-view-tabs button {
  min-height: 44px;
  font-size: 15px;
}

.packaging-task-status-filter button {
  font-size: 16px;
}

.row-actions button,
.purchase-row-actions button,
.purchase-receipt-actions button,
.purchase-receipt-reversal-mark button,
.production-exception-actions button,
.production-history button,
.shipping-event-timeline li button {
  min-height: 40px;
  font-size: 14px;
}

@media (max-width: 760px) {
  .searchable-select-input {
    min-height: 48px;
    font-size: 16px;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  button:not(.modal-close) {
    min-height: 48px;
  }

  .nav-item { min-height: 50px; }
  th { font-size: 15px; }
  td { font-size: 16px; }

  .module-welcome {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .module-welcome > .primary {
    width: 100%;
    margin-left: 0;
  }

  .sales-order-status-filter,
  .purchase-status-filter,
  .production-status-filter {
    overflow: visible;
    flex-wrap: wrap;
  }
}

/* DCXZ V2 Phase 1：公共设计基础。B 仅作视觉基准，本区在 A 的原生技术栈内实现。 */
:root {
  --brand: #e4002b;
  --brand-dark: #be0024;
  --brand-soft: #fff1f3;
  --text: #18212b;
  --text-2: #637083;
  --text-3: #8a94a6;
  --surface: #ffffff;
  --line-strong: #cfd6de;
  --green-soft: #eaf7f1;
  --amber: #b56800;
  --amber-soft: #fff7e8;
  --blue-soft: #edf4ff;
  --red-soft: #fff1f3;
  --shadow: 0 2px 8px rgba(24, 33, 43, .06);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --sidebar-width: 260px;
  --ink: var(--text);
  --muted: var(--text-2);
  --line: #e4e8ed;
  --bg: #f5f7f9;
  --blue: #245ea8;
  --navy: #273754;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(36, 94, 168, .35);
  outline-offset: 2px;
}

.app-shell {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  background: var(--bg);
}

.sidebar {
  width: var(--sidebar-width);
  padding: 0;
  overflow: hidden;
  color: #31405a;
  background: var(--surface);
  border-right: 1px solid var(--line);
  box-shadow: none;
}

.brand {
  min-height: 88px;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.brand-logo {
  width: 82px;
  height: 42px;
  flex: 0 0 auto;
  object-fit: contain;
}

.brand strong {
  color: var(--text);
  font-size: 18px;
  letter-spacing: .2px;
}

.brand small,
.sidebar-footer small {
  color: var(--text-3);
}

.v2-navigation {
  padding: 14px 0 18px;
  scrollbar-width: thin;
  scrollbar-color: #d7dce3 transparent;
}

.nav-group {
  margin: 0 0 12px;
}

.nav-label {
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 5px 20px;
  color: #53627a;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
}

.nav-item {
  position: relative;
  min-height: 48px;
  margin: 0;
  padding: 9px 20px;
  border-radius: 0;
  color: #31405a;
  background: transparent;
  box-shadow: none;
  font-weight: 500;
}

.nav-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: transparent;
}

.nav-item span {
  width: 22px;
  color: #66748a;
  font-size: 18px;
}

.nav-item:hover:not(.disabled) {
  color: var(--text);
  background: #f7f8fa;
}

.nav-item.active,
.nav-item.primary-nav.active {
  color: var(--text);
  background: var(--brand-soft);
  box-shadow: none;
  font-weight: 800;
}

.nav-item.active::before {
  background: var(--brand);
}

.nav-item.active span {
  color: var(--brand);
}

.nav-item.primary-nav:not(.active) {
  color: #31405a;
  background: transparent;
  border: 0;
}

.sidebar-footer {
  margin: 0 16px;
  padding: 16px 4px 18px;
  border-top: 1px solid var(--line);
  color: #53627a;
}

.sidebar-footer strong {
  color: #31405a;
}

.sidebar-scrim {
  position: fixed;
  inset: 0;
  z-index: 35;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(24, 33, 43, .48);
}

main {
  width: 100%;
  min-width: 0;
  background: var(--bg);
}

header {
  min-height: 88px;
  height: auto;
  padding: 13px 28px;
  background: rgba(255, 255, 255, .98);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(24, 33, 43, .02);
}

.page-heading {
  min-width: 0;
}

.page-context {
  display: block;
  margin-bottom: 2px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .4px;
}

header h1 {
  color: var(--text);
  font-size: 23px;
  line-height: 1.25;
}

header p {
  margin-top: 3px;
  color: var(--text-2);
  line-height: 1.45;
}

.signed-user strong {
  color: var(--text);
}

.header-pin-button,
.avatar,
.icon-button {
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.header-pin-button {
  color: #31405a;
  background: #fff;
  border-color: var(--line-strong);
}

.header-pin-button:hover,
.icon-button:hover {
  color: var(--text);
  background: #f2f4f7;
  border-color: #bcc5cf;
}

.avatar {
  color: var(--brand);
  background: var(--brand-soft);
}

.content {
  width: 100%;
  max-width: 1496px;
  padding: 24px 28px 48px;
}

.page.active {
  animation: v2PageAppear .18s ease-out;
}

@keyframes v2PageAppear {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

.panel,
.stat-card,
.sales-order-card,
.purchase-order-card,
.shipping-task-card,
.inventory-card,
.bom-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel {
  padding: 20px;
}

.panel-title h3,
.sales-order-ledger-head h3,
.employee-toolbar h3,
.customer-toolbar h3 {
  color: var(--text);
  font-size: 18px;
  line-height: 1.35;
}

.primary {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--brand);
  box-shadow: none;
  font-weight: 800;
}

.primary:hover {
  background: var(--brand-dark);
}

.secondary {
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: #31405a;
  background: #fff;
  box-shadow: none;
  font-weight: 700;
}

.secondary:hover {
  color: var(--text);
  border-color: #aeb8c4;
  background: #f7f8fa;
}

.danger,
.danger-outline {
  color: var(--brand-dark);
}

.danger-outline {
  border-color: #edb8c0;
  background: var(--red-soft);
}

.toolbar,
.sales-order-search,
.purchase-search,
.shipping-filters {
  gap: 12px;
}

.sample-filter-bar,
.sales-order-search {
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.sample-filter-bar {
  justify-content: flex-start;
}

.sample-filter-bar .search {
  flex: 1;
  max-width: 560px;
}

.search {
  min-height: 44px;
  border-color: var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
}

.search:focus-within {
  border-color: #7f9fc6;
  box-shadow: 0 0 0 3px rgba(36, 94, 168, .1);
}

.search input {
  min-width: 0;
  padding: 10px;
}

.table-panel {
  padding: 0;
  overflow-x: auto;
  border-radius: var(--radius-lg);
}

table {
  background: var(--surface);
}

th {
  height: 46px;
  padding: 11px 16px;
  color: #59687c;
  background: #f8f9fb;
  border-bottom-color: var(--line);
  font-weight: 800;
}

td {
  min-height: 54px;
  padding: 14px 16px;
  color: #405066;
  border-bottom-color: var(--line);
}

tbody tr:hover td {
  background: #fafbfc;
}

.badge,
.status-tag,
.sales-order-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.badge.active,
.status-tag.success,
.sales-order-status.shipped {
  color: #147a52;
  background: var(--green-soft);
  border-color: #cce8dc;
}

.badge.draft,
.status-tag.warning,
.sales-order-status.pending {
  color: var(--amber);
  background: var(--amber-soft);
  border-color: #ead9af;
}

.badge.inactive,
.status-tag.neutral,
.sales-order-status.cancelled {
  color: #637083;
  background: #f1f3f5;
  border-color: #dfe3e8;
}

.status-tag.info {
  color: var(--blue);
  background: var(--blue-soft);
  border-color: #d5e2f5;
}

.status-tag.danger {
  color: var(--brand-dark);
  background: var(--red-soft);
  border-color: #edc4ca;
}

.row-actions {
  flex-wrap: wrap;
  gap: 8px;
}

.row-actions button {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #d5e2f5;
  border-radius: var(--radius-sm);
  color: var(--blue);
  background: var(--blue-soft);
  font-weight: 800;
}

.row-actions .danger {
  color: var(--brand-dark);
  background: var(--red-soft);
  border-color: #edc4ca;
}

.empty,
.loading-state,
.permission-state {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  color: var(--text-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: #fbfcfd;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

.permission-state {
  color: #765000;
  background: var(--amber-soft);
  border-color: #dfc98f;
}

.risk-info,
.form-note,
.inventory-initialization-warning {
  border-radius: var(--radius-md);
}

.risk-info.danger,
.danger-note {
  color: #8e1730;
  background: var(--red-soft);
  border-color: #edc4ca;
}

.modal {
  padding: 24px;
  background: rgba(24, 33, 43, .55);
  backdrop-filter: blur(2px);
}

.modal-card {
  max-height: 88vh;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(24, 33, 43, .24);
}

.modal-header {
  min-height: 68px;
  align-items: flex-start;
  padding: 18px 22px;
  background: #fff;
}

.modal-header h3 {
  color: var(--text);
  font-size: 20px;
}

.modal-header p {
  color: var(--text-2);
  line-height: 1.5;
}

.modal-header .icon-button,
.modal-header button {
  min-width: 44px;
  min-height: 44px;
}

#modalForm,
#employeeForm,
#employeePinForm,
#customerForm,
.sales-order-form {
  padding: 20px 22px 22px;
}

.field input,
.field select,
.field textarea,
.searchable-select-input {
  min-height: 44px;
  border-color: var(--line-strong);
  border-radius: var(--radius-sm);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.searchable-select-input:focus {
  border-color: #7f9fc6;
  box-shadow: 0 0 0 3px rgba(36, 94, 168, .1);
}

.drawer,
.drawer-panel {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 80;
  width: min(560px, 92vw);
  height: 100vh;
  overflow: auto;
  border-left: 1px solid var(--line);
  background: var(--surface);
  box-shadow: -18px 0 50px rgba(24, 33, 43, .18);
}

.sample-page-intro {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.sample-page-intro h2 {
  margin: 3px 0 4px;
  color: var(--text);
  font-size: 22px;
}

.sample-page-intro p {
  margin: 0;
  color: var(--text-2);
}

.sample-page-intro .eyebrow {
  color: var(--brand);
}

.legacy-catalog-back {
  margin-top: 8px;
}

/* 样板一：真实工作台。保留原数据与跳转，只统一视觉层级。 */
.welcome {
  padding: 20px 22px;
  color: var(--text);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.welcome h2 {
  color: var(--text);
}

.welcome p {
  color: var(--text-2);
}

.welcome .eyebrow {
  color: var(--brand);
}

.today {
  color: #53627a;
  background: #f2f4f7;
  border-radius: var(--radius-sm);
}

.dashboard-duty-badges strong,
.dashboard-duty-badges.manager strong {
  color: #31405a;
  background: #f7f8fa;
  border-color: var(--line);
  box-shadow: none;
}

.stats-grid,
.dashboard-grid {
  gap: 14px;
  margin-top: 16px;
}

.stat-card {
  min-height: 108px;
  padding: 18px;
  border-radius: var(--radius-lg);
}

.stat-icon {
  border-radius: 50%;
}

.stat-card strong {
  color: var(--text);
  font-size: 28px;
}

.progress-track i {
  background: var(--blue);
}

.quick-grid button {
  min-height: 86px;
  border-color: var(--line);
  border-radius: var(--radius-md);
  background: #fafbfc;
}

.quick-grid button:hover:not(.coming) {
  color: var(--brand-dark);
  border-color: #edc4ca;
  background: var(--brand-soft);
}

/* 样板三：销售订单列表。业务状态、拍照和危险操作节点保持不变。 */
.sales-order-welcome {
  min-height: 96px;
  padding: 18px 20px;
  color: var(--text);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.sales-order-welcome .module-icon {
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: var(--radius-md);
}

.sales-order-welcome .eyebrow {
  color: var(--brand);
}

.sales-order-welcome h2 {
  color: var(--text);
}

.sales-order-welcome p {
  color: var(--text-2);
}

.sales-order-welcome .primary {
  border-color: var(--brand);
  background: var(--brand);
}

.sales-order-ledger-head {
  margin: 18px 2px 12px;
}

.sales-order-ledger-head span {
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid #ead9af;
  border-radius: var(--radius-sm);
}

.sales-order-search {
  border-color: var(--line);
  background: var(--surface);
}

.sales-order-search > strong {
  color: var(--text-2);
}

.sales-order-status-filter {
  flex-wrap: wrap;
  gap: 8px;
}

.sales-order-status-filter button {
  min-height: 44px;
  padding: 8px 15px;
  color: #53627a;
  border-color: var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
}

.sales-order-status-filter button:hover {
  color: var(--brand-dark);
  border-color: #edb8c0;
}

.sales-order-status-filter button.active {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: none;
}

.sales-order-status-filter button.urgent {
  color: var(--brand-dark);
  border-color: #edc4ca;
  background: var(--red-soft);
}

.sales-order-card {
  border-left-width: 4px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.sales-order-card.pending {
  border-left-color: var(--amber);
}

.sales-order-card.pending.overdue {
  border-color: #edc4ca;
  border-left-color: var(--brand);
}

.sales-order-card.shipped {
  border-left-color: #147a52;
}

.sales-order-card-head,
.sales-order-actions,
.sales-order-foot {
  background: #fafbfc;
}

.sales-order-card-head span {
  color: #53627a;
}

.sales-order-actions {
  flex-wrap: wrap;
}

/* Phase 2：销售订单真实详情。蓝色只保留给进行中等业务语义。 */
.sales-order-search .search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.worker-shipment-product-name > strong {
  color: var(--text);
}

.sales-order-detail-shell {
  display: grid;
  gap: 16px;
  max-width: 100%;
  min-width: 0;
  color: var(--text);
}

.sales-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sales-detail-toolbar > span {
  color: var(--text-3);
  font-size: 14px;
}

.sales-detail-back {
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  background: var(--surface);
  font-size: 15px;
  font-weight: 800;
}

.sales-detail-back:hover,
.sales-detail-back:focus-visible {
  color: var(--brand-dark);
  border-color: #edb8c0;
  outline: 0;
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.sales-order-detail-content {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.sales-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.sales-detail-hero .eyebrow {
  color: var(--brand);
}

.sales-detail-hero h2 {
  margin: 7px 0 5px;
  overflow-wrap: anywhere;
  font-size: 26px;
  line-height: 1.25;
}

.sales-detail-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.65;
}

.sales-detail-risk-note,
.sales-detail-data-notice {
  display: grid;
  gap: 5px;
  padding: 13px 15px;
  border: 1px solid #ead9af;
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-sm);
  color: #6d5423;
  background: var(--amber-soft);
}

.sales-detail-cancellation-note {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 10px 18px;
  padding: 13px 15px;
  border: 1px solid #edc4ca;
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  color: var(--brand-dark);
  background: var(--red-soft);
}

.sales-detail-cancellation-note span {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}

.sales-detail-risk-note strong,
.sales-detail-data-notice strong {
  font-size: 15px;
}

.sales-detail-risk-note span,
.sales-detail-data-notice span {
  font-size: 14px;
  line-height: 1.6;
}

.sales-detail-section {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.sales-detail-section p,
.sales-detail-section li,
.sales-detail-section dd {
  font-size: 15px;
  line-height: 1.6;
}

.sales-detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.sales-detail-section-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sales-detail-section-head > div > span {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: 14px;
  font-weight: 900;
}

.sales-detail-section-head h3 {
  margin: 0;
  font-size: 18px;
}

.sales-detail-section-head > small {
  color: var(--text-3);
  font-size: 14px;
  text-align: right;
}

.sales-detail-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--line);
}

.sales-detail-summary-grid > div {
  min-width: 0;
  padding: 14px 15px;
  background: #fafbfc;
}

.sales-detail-summary-grid dt,
.sales-detail-item dt,
.sales-detail-shipping-task dt {
  color: var(--text-3);
  font-size: 14px;
  font-weight: 700;
}

.sales-detail-summary-grid dd,
.sales-detail-item dd,
.sales-detail-shipping-task dd {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-weight: 800;
}

.sales-detail-order-note {
  display: grid;
  gap: 4px;
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  background: #f6f7f9;
}

.sales-detail-order-note strong {
  color: var(--text);
}

.sales-detail-item-list,
.sales-detail-shipping-list {
  display: grid;
  gap: 10px;
}

.sales-detail-item {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) minmax(360px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fafbfc;
}

.sales-detail-item > div > span {
  color: var(--text-3);
  font-size: 14px;
  font-weight: 700;
}

.sales-detail-item > div > strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 18px;
}

.sales-detail-item > div > p {
  margin: 4px 0 0;
  color: var(--text-2);
}

.sales-detail-item dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.sales-detail-item dl > div {
  min-width: 0;
}

.sales-detail-item dd b {
  color: var(--brand-dark);
  font-size: 19px;
}

.sales-detail-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
}

.sales-detail-inventory-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.sales-detail-inventory-list > div {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) repeat(3, minmax(90px, 1fr));
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fafbfc;
}

.sales-detail-inventory-list span {
  color: var(--text-2);
  font-size: 14px;
}

.sales-detail-inventory-list b {
  color: var(--text);
}

.sales-detail-inventory-list small {
  grid-column: 2 / -1;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.45;
}

.sales-detail-outbound-state {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 112px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fafbfc;
}

.sales-detail-outbound-state strong {
  font-size: 17px;
}

.sales-detail-outbound-state span {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}

.sales-detail-outbound-state.confirmed {
  border-color: #cce8dc;
  background: var(--green-soft);
}

.sales-detail-outbound-state.confirmed strong {
  color: #147a52;
}

.sales-detail-outbound-state.pending strong {
  color: var(--amber);
}

.sales-detail-movement-list {
  display: grid;
  gap: 1px;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--line);
}

.sales-detail-movement-list > div {
  display: grid;
  grid-template-columns: minmax(110px, .8fr) minmax(150px, 1.4fr) auto minmax(150px, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  background: #fafbfc;
}

.sales-detail-movement-list span,
.sales-detail-movement-list small {
  color: var(--text-3);
  font-size: 14px;
}

.sales-detail-private-note {
  display: block;
  color: var(--text-3);
  font-size: 14px;
}

.sales-detail-shipping-task {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.sales-detail-shipping-task > header {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: auto;
  min-height: 58px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #fafbfc;
}

.sales-detail-shipping-task > header span,
.sales-detail-shipping-task > header strong {
  display: block;
}

.sales-detail-shipping-task > header span {
  color: var(--text-3);
  font-size: 14px;
}

.sales-detail-shipping-task > header strong {
  margin-top: 3px;
  font-size: 16px;
}

.sales-detail-badge {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--text-2);
  background: #f1f3f5;
  font-size: 14px;
}

.sales-detail-badge.completed,
.sales-detail-badge.shipped,
.sales-detail-badge.confirmed {
  color: #147a52;
  border-color: #cce8dc;
  background: var(--green-soft);
}

.sales-detail-badge.pending {
  color: var(--amber);
  border-color: #ead9af;
  background: var(--amber-soft);
}

.sales-detail-badge.in_transit {
  color: var(--blue);
  border-color: #d5e2f5;
  background: var(--blue-soft);
}

.sales-detail-badge.cancelled,
.sales-detail-badge.exception {
  color: var(--brand-dark);
  border-color: #edc4ca;
  background: var(--red-soft);
}

.sales-detail-shipping-task > dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 14px;
}

.sales-detail-shipping-items {
  display: grid;
  gap: 1px;
  margin: 0 14px 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--line);
}

.sales-detail-shipping-items > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #fafbfc;
  font-size: 14px;
}

.sales-detail-shipping-items b {
  flex: 0 0 auto;
  color: var(--brand-dark);
}

.sales-detail-shipping-events {
  display: grid;
  gap: 1px;
  padding: 1px 14px 14px;
}

.sales-detail-shipping-events > div {
  display: grid;
  grid-template-columns: 170px minmax(150px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid var(--line);
}

.sales-detail-shipping-events span {
  color: var(--text-3);
  font-size: 14px;
}

.sales-detail-shipping-events small {
  color: var(--text-3);
  font-size: 14px;
}

.sales-detail-fulfillment-notice {
  margin: 0 0 12px;
  color: var(--text-2);
}

.sales-detail-fulfillment-list {
  display: grid;
  grid-template-columns: repeat(8, minmax(92px, 1fr));
  gap: 8px;
}

.sales-detail-fulfillment-node {
  position: relative;
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  min-height: 112px;
  padding: 12px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fafbfc;
}

.sales-detail-fulfillment-node i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-3);
}

.sales-detail-fulfillment-node > span,
.sales-detail-fulfillment-node > strong,
.sales-detail-fulfillment-node > small {
  overflow-wrap: anywhere;
}

.sales-detail-fulfillment-node > span {
  color: var(--text-3);
  font-size: 14px;
}

.sales-detail-fulfillment-node > strong {
  font-size: 15px;
}

.sales-detail-fulfillment-node > small {
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.4;
}

.sales-detail-fulfillment-node.confirmed,
.sales-detail-fulfillment-node.completed,
.sales-detail-fulfillment-node.shipped {
  border-top-color: #147a52;
}

.sales-detail-fulfillment-node.confirmed i,
.sales-detail-fulfillment-node.completed i,
.sales-detail-fulfillment-node.shipped i {
  background: #147a52;
}

.sales-detail-fulfillment-node.tracked,
.sales-detail-fulfillment-node.in_transit {
  border-top-color: var(--blue);
}

.sales-detail-fulfillment-node.tracked i,
.sales-detail-fulfillment-node.in_transit i {
  background: var(--blue);
}

.sales-detail-timeline-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sales-detail-timeline-list > li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.sales-detail-timeline-list > li > i {
  position: relative;
  width: 11px;
  height: 11px;
  margin-top: 7px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}

.sales-detail-timeline-list > li:not(:last-child) > i::after {
  position: absolute;
  top: 11px;
  left: 2px;
  width: 1px;
  height: calc(100% + 48px);
  background: #edc4ca;
  content: "";
}

.sales-detail-timeline-list > li > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 0 0 20px;
}

.sales-detail-timeline-list time,
.sales-detail-timeline-list small {
  color: var(--text-3);
  font-size: 14px;
}

.sales-detail-timeline-list p {
  margin: 0;
  color: var(--text-2);
}

.sales-detail-side-stack {
  display: grid;
  align-content: start;
  gap: 16px;
}

.sales-detail-link-list,
.sales-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.sales-detail-link-list button,
.sales-detail-actions button,
.sales-detail-timeline-list button,
.sales-detail-outbound-state button,
.sales-detail-shipping-events button {
  min-height: 44px;
  font-size: 15px;
}

.sales-detail-gaps ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 21px;
  color: var(--text-2);
}

.sales-detail-gaps > p {
  margin: 0;
  color: var(--text-2);
}

.sales-detail-empty,
.sales-detail-load-error {
  display: grid;
  place-items: start;
  gap: 9px;
  min-height: 74px;
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-3);
  background: #fafbfc;
  font-size: 15px;
  line-height: 1.6;
}

.sales-detail-load-error strong {
  color: var(--brand-dark);
}

.sales-detail-actions {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  justify-content: flex-end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 34px rgba(24, 33, 43, .14);
  backdrop-filter: blur(8px);
}

/* Phase 3：产品完整档案。产品模块的非业务语义旧蓝改为品牌红与中性色。 */
#productsPage .search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

#productsPage .row-actions button {
  min-height: 44px;
  color: var(--text-2);
  border-color: var(--line-strong);
  background: #f7f8fa;
  font-size: 16px;
}

#productsPage .row-actions button:hover,
#productsPage .row-actions button:focus-visible,
#productsPage .row-actions .product-profile-entry {
  color: var(--brand-dark);
  border-color: #edb8c0;
  background: var(--brand-soft);
}

#productsPage .row-actions .danger {
  color: var(--brand-dark);
  border-color: #edc4ca;
  background: var(--red-soft);
}

.product-profile-shell,
.product-profile-content {
  display: grid;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
  color: var(--text);
}

.product-profile-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.product-profile-toolbar > span {
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
}

.product-profile-back {
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  background: var(--surface);
  font-size: 16px;
  font-weight: 800;
}

.product-profile-back:hover,
.product-profile-back:focus-visible {
  color: var(--brand-dark);
  border-color: #edb8c0;
  outline: 0;
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.product-profile-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.product-profile-hero > div {
  min-width: 0;
}

.product-profile-hero .eyebrow {
  color: var(--brand);
}

.product-profile-hero h2 {
  margin: 7px 0 5px;
  overflow-wrap: anywhere;
  font-size: 26px;
  line-height: 1.25;
}

.product-profile-hero h2 span {
  color: var(--text-2);
  font-weight: 600;
}

.product-profile-hero p {
  max-width: 920px;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.65;
}

.product-profile-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow);
}

.product-profile-actions button,
.product-profile-link-list button,
.product-profile-load-error button {
  min-height: 44px;
  font-size: 16px;
}

.product-profile-section {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.product-profile-section p,
.product-profile-section li,
.product-profile-section dd,
.product-profile-section article {
  font-size: 16px;
  line-height: 1.6;
}

.product-profile-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.product-profile-section-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.product-profile-section-head > div > span {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: 14px;
  font-weight: 900;
}

.product-profile-section-head h3 {
  margin: 0;
  font-size: 18px;
}

.product-profile-section-head > small {
  color: var(--text-3);
  font-size: 14px;
  text-align: right;
}

.product-profile-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--text-2);
  background: #f1f3f5;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.product-profile-tag.complete {
  color: #147a52;
  border-color: #cce8dc;
  background: var(--green-soft);
}

.product-profile-tag.pending {
  color: var(--amber);
  border-color: #ead9af;
  background: var(--amber-soft);
}

.product-profile-tag.attention {
  color: var(--brand-dark);
  border-color: #edc4ca;
  background: var(--red-soft);
}

.product-profile-tag.information {
  color: var(--blue);
  border-color: #d5e2f5;
  background: var(--blue-soft);
}

.product-profile-completeness-summary {
  display: grid;
  grid-template-columns: 150px minmax(220px, 1fr) minmax(260px, 1.3fr);
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fafbfc;
}

.product-profile-completeness-score {
  display: grid;
  gap: 3px;
}

.product-profile-completeness-score strong {
  color: var(--brand-dark);
  font-size: 32px;
  line-height: 1;
}

.product-profile-completeness-score span,
.product-profile-completeness-summary p {
  color: var(--text-2);
}

.product-profile-completeness-summary p {
  margin: 0;
}

.product-profile-completeness-progress {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #eceff2;
}

.product-profile-completeness-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}

.product-profile-completeness-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.product-profile-completeness-list article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fafbfc;
}

.product-profile-completeness-list article.complete {
  border-top-color: #147a52;
}

.product-profile-completeness-list article.pending {
  border-top-color: var(--amber);
}

.product-profile-completeness-list article.attention {
  border-top-color: var(--brand);
}

.product-profile-completeness-list article > span,
.product-profile-completeness-list article > small {
  color: var(--text-3);
}

.product-profile-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--line);
}

.product-profile-detail-grid > div {
  min-width: 0;
  padding: 14px 15px;
  background: #fafbfc;
}

.product-profile-detail-grid > div.wide {
  grid-column: span 2;
}

.product-profile-detail-grid dt {
  color: var(--text-3);
  font-size: 14px;
  font-weight: 700;
}

.product-profile-detail-grid dd {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-weight: 800;
}

.product-profile-version-grid,
.product-profile-stock-grid,
.product-profile-metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.product-profile-version-card,
.product-profile-stock-grid article,
.product-profile-metric-row > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fafbfc;
}

.product-profile-version-card {
  border-top: 3px solid #147a52;
}

.product-profile-version-card.missing {
  border-top-color: var(--brand);
}

.product-profile-version-card > span,
.product-profile-version-card > small,
.product-profile-stock-grid span,
.product-profile-metric-row span {
  color: var(--text-3);
}

.product-profile-version-card strong,
.product-profile-stock-grid strong,
.product-profile-metric-row strong {
  overflow-wrap: anywhere;
  font-size: 19px;
}

.product-profile-data-notice,
.product-profile-source-note,
.product-profile-private-note,
.product-profile-purchase-note {
  display: grid;
  gap: 5px;
  margin: 12px 0 0;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  background: #fafbfc;
  font-size: 16px;
  line-height: 1.6;
}

.product-profile-data-notice strong,
.product-profile-purchase-note strong {
  color: var(--text);
}

.product-profile-record-list,
.product-profile-requirement-list,
.product-profile-related-materials,
.product-profile-business-list,
.product-profile-supply-list {
  display: grid;
  gap: 1px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--line);
}

.product-profile-record-list article,
.product-profile-business-list article,
.product-profile-supply-list article {
  display: grid;
  grid-template-columns: minmax(210px, 1.4fr) auto minmax(90px, .6fr) minmax(220px, 1.2fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 12px;
  background: #fafbfc;
}

.product-profile-record-list article > div,
.product-profile-business-list article > div,
.product-profile-supply-list article > div,
.product-profile-requirement-list article > div,
.product-profile-related-materials article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-profile-record-list article > div span,
.product-profile-record-list article > small,
.product-profile-business-list article > div span,
.product-profile-supply-list article > div span,
.product-profile-requirement-list article > div span,
.product-profile-related-materials article > div span {
  overflow-wrap: anywhere;
  color: var(--text-3);
}

.product-profile-record-list b,
.product-profile-requirement-list b,
.product-profile-related-materials b,
.product-profile-business-list b,
.product-profile-supply-list b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.product-profile-requirement-list article,
.product-profile-related-materials article {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(250px, 1.2fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 12px;
  background: #fafbfc;
}

.product-profile-requirement-list article {
  grid-template-columns: minmax(220px, 1fr) auto;
}

.product-profile-related-materials article > span,
.product-profile-business-list article > span,
.product-profile-supply-list article > span {
  color: var(--text-2);
}

.product-profile-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
}

.product-profile-production .product-profile-metric-row,
.product-profile-sales .product-profile-metric-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-profile-business-list article {
  grid-template-columns: minmax(160px, 1fr) auto auto;
}

.product-profile-supply-list article {
  grid-template-columns: minmax(220px, 1.2fr) minmax(150px, 1fr) auto;
}

.product-profile-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.product-profile-gaps ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
  color: var(--text-2);
}

.product-profile-gaps p {
  margin: 0;
  color: var(--text-2);
}

.product-profile-empty,
.product-profile-load-error {
  display: grid;
  place-items: start;
  gap: 9px;
  min-height: 74px;
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-3);
  background: #fafbfc;
  font-size: 16px;
  line-height: 1.6;
}

.product-profile-load-error strong {
  color: var(--brand-dark);
}

@media (max-width: 1260px) and (min-width: 761px) {
  :root { --sidebar-width: 236px; }
  .brand { padding-right: 14px; padding-left: 14px; }
  .brand-logo { width: 72px; }
  .nav-label,
  .nav-item { padding-right: 15px; padding-left: 15px; }
  header { padding-right: 22px; padding-left: 22px; }
  .content { padding-right: 22px; padding-left: 22px; }

  .sales-detail-fulfillment-list {
    grid-template-columns: repeat(4, minmax(100px, 1fr));
  }

  .product-profile-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-profile-two-column {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  :root { --sidebar-width: min(88vw, 320px); }

  .login-screen {
    align-items: center;
    padding: 16px 14px;
  }

  .login-card {
    width: 100%;
    padding: 28px 22px;
  }

  .login-brand-logo {
    width: min(224px, 100%);
    height: auto;
  }

  .login-card h1 {
    margin-top: 28px;
    font-size: 26px;
  }

  #loginForm input,
  #loginForm button {
    min-height: 52px;
  }

  .app-shell {
    display: block;
  }

  .sidebar {
    top: 0;
    z-index: 40;
    width: var(--sidebar-width);
    max-width: 100%;
    transform: translateX(-100%);
    transition: transform .2s ease-out;
  }

  .sidebar.open {
    transform: none;
    box-shadow: 18px 0 48px rgba(24, 33, 43, .22);
  }

  .brand {
    min-height: 80px;
  }

  .nav-label {
    min-height: 36px;
  }

  .nav-item {
    min-height: 52px;
    font-size: 17px;
  }

  header {
    min-height: 82px;
    padding: 10px 14px;
  }

  .menu-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
  }

  .page-context {
    display: none;
  }

  header h1 {
    max-width: 48vw;
    overflow: hidden;
    font-size: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  header p {
    display: none;
  }

  .header-actions {
    gap: 7px;
  }

  .signed-user small {
    display: none;
  }

  .header-pin-button {
    display: inline-flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    width: 52px;
    min-height: 48px;
    padding: 0;
    font-size: 0;
  }

  .header-pin-button::after {
    content: "密码";
    font-size: 15px;
  }

  .avatar {
    width: 48px;
    height: 48px;
  }

  .content {
    padding: 16px 12px 34px;
  }

  .sample-page-intro,
  .sales-order-welcome,
  .welcome {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
  }

  .sample-page-intro .primary,
  .sales-order-welcome .primary {
    width: 100%;
    min-height: 50px;
    margin-left: 0;
  }

  .sample-filter-bar,
  .sales-order-search {
    display: grid;
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .sample-filter-bar .search,
  .sales-order-search .search,
  .legacy-catalog-link,
  .sales-order-search .secondary {
    width: 100%;
    max-width: none;
  }

  .sales-order-search > strong {
    grid-column: auto;
    text-align: left;
  }

  .sales-order-status-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .sales-order-status-filter button {
    width: 100%;
    min-height: 48px;
  }

  .stats-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    min-height: 104px;
  }

  .panel,
  .sales-order-card {
    max-width: 100%;
  }

  .sales-order-card-head,
  .sales-order-customer,
  .sales-order-items div {
    grid-template-columns: 1fr;
  }

  .sales-order-customer {
    gap: 0;
  }

  .sales-order-card-head {
    align-items: flex-start;
  }

  .sales-order-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sales-order-actions button,
  .sales-detail-actions button,
  .row-actions button,
  .photo-actions button {
    width: 100%;
    min-height: 48px;
  }

  .sales-order-detail-shell {
    max-width: 100%;
    overflow-x: hidden;
  }

  .sales-detail-toolbar,
  .sales-detail-hero,
  .sales-detail-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .sales-detail-toolbar > span {
    line-height: 1.5;
  }

  .sales-detail-back {
    width: 100%;
    min-height: 48px;
  }

  .sales-detail-hero,
  .sales-detail-section {
    padding: 16px;
  }

  .sales-detail-hero h2 {
    font-size: 23px;
  }

  .sales-detail-summary-grid,
  .sales-detail-two-column,
  .sales-detail-item,
  .sales-detail-item dl,
  .sales-detail-shipping-task > dl,
  .sales-detail-inventory-list > div,
  .sales-detail-movement-list > div,
  .sales-detail-fulfillment-list {
    grid-template-columns: 1fr;
  }

  .sales-detail-cancellation-note {
    grid-template-columns: 1fr;
  }

  .sales-detail-inventory-list small {
    grid-column: auto;
  }

  .sales-detail-item {
    align-items: stretch;
  }

  .sales-detail-item dl > div,
  .sales-detail-shipping-task > dl > div,
  .sales-detail-inventory-list > div > span {
    padding-top: 9px;
    border-top: 1px solid var(--line);
  }

  .sales-detail-shipping-task > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .sales-detail-shipping-events > div {
    grid-template-columns: 1fr;
  }

  .sales-detail-shipping-items > span {
    align-items: flex-start;
    flex-direction: column;
  }

  .sales-detail-fulfillment-node {
    min-height: 90px;
  }

  .sales-detail-actions {
    bottom: 6px;
    display: grid;
    grid-template-columns: 1fr;
  }

  .product-profile-shell {
    max-width: 100%;
    overflow-x: hidden;
  }

  .product-profile-toolbar,
  .product-profile-hero,
  .product-profile-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-profile-toolbar > span {
    text-align: left;
  }

  .product-profile-back {
    width: 100%;
    min-height: 48px;
  }

  .product-profile-hero,
  .product-profile-section {
    padding: 16px;
  }

  .product-profile-hero h2 {
    font-size: 23px;
  }

  .product-profile-actions,
  .product-profile-two-column,
  .product-profile-completeness-summary,
  .product-profile-detail-grid,
  .product-profile-version-grid,
  .product-profile-stock-grid,
  .product-profile-metric-row,
  .product-profile-production .product-profile-metric-row,
  .product-profile-sales .product-profile-metric-row,
  .product-profile-record-list article,
  .product-profile-requirement-list article,
  .product-profile-related-materials article,
  .product-profile-business-list article,
  .product-profile-supply-list article {
    grid-template-columns: 1fr;
  }

  .product-profile-actions {
    display: grid;
  }

  .product-profile-actions button,
  .product-profile-link-list button,
  .product-profile-load-error button {
    width: 100%;
    min-height: 48px;
  }

  .product-profile-detail-grid > div.wide {
    grid-column: auto;
  }

  .product-profile-completeness-list {
    grid-template-columns: 1fr;
  }

  .table-panel {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .modal {
    padding: 0;
  }

  .modal-card {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .drawer,
  .drawer-panel {
    width: 100%;
    max-width: 100%;
  }
}

/* DCXZ V2 Phase 4：现有执行模块统一体验。仅调整 A 的展示层，不改变动作、状态或事务。 */
.v2-execution-page {
  min-width: 0;
  max-width: 100%;
  color: var(--text);
}

.v2-execution-page > .v2-execution-hero {
  min-height: 96px;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 18px 20px;
  color: var(--text);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.v2-execution-page > .v2-execution-hero .module-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  color: var(--brand);
  border-radius: var(--radius-md);
  background: var(--brand-soft);
}

.v2-execution-page > .v2-execution-hero .eyebrow {
  color: var(--brand);
}

.v2-execution-page > .v2-execution-hero h2 {
  margin: 3px 0 4px;
  color: var(--text);
  font-size: 22px;
  line-height: 1.3;
}

.v2-execution-page > .v2-execution-hero p {
  margin: 0;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.55;
}

.v2-execution-page > .v2-execution-hero .primary {
  margin-left: auto;
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: none;
}

.v2-execution-page > .v2-execution-hero .primary:hover,
.v2-execution-page > .v2-execution-hero .primary:focus-visible {
  color: #fff;
  border-color: var(--brand-dark);
  background: var(--brand-dark);
}

.v2-execution-summary {
  gap: 12px;
  margin: 0 0 16px;
}

.v2-execution-summary > article,
.v2-execution-summary > button {
  min-width: 0;
  min-height: 104px;
  padding: 16px 18px;
  color: var(--text);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.v2-execution-summary span {
  color: var(--text-2);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.v2-execution-summary strong {
  margin-top: 7px;
  color: var(--text);
  font-size: 28px;
  line-height: 1.1;
}

.v2-execution-ledger {
  align-items: center;
  gap: 16px;
  margin: 18px 2px 12px;
}

.v2-execution-ledger h3 {
  margin: 0;
  color: var(--text);
  font-size: 19px;
  line-height: 1.35;
}

.v2-execution-ledger p {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.5;
}

.v2-execution-ledger > span,
.v2-execution-ledger .current-identity {
  color: var(--text-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #f7f8fa;
  box-shadow: none;
}

.v2-execution-filter-bar {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.v2-execution-filter-bar .search,
.v2-execution-filter-bar > div:has(> input[type="search"]) {
  min-height: 44px;
  border-color: var(--line-strong);
  background: #fff;
}

.v2-execution-filter-bar .search:focus-within,
.v2-execution-filter-bar > div:has(> input[type="search"]):focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.v2-execution-filter-bar input,
.v2-execution-filter-bar select,
.v2-execution-filter-bar button {
  font-size: 16px;
}

.v2-execution-filter-bar > label,
.v2-execution-filter-bar label > span,
.v2-execution-filter-bar > strong {
  color: var(--text-2);
}

.v2-execution-filter-bar > button:not(.primary) {
  min-height: 44px;
  color: var(--text-2);
  border-color: var(--line-strong);
  background: #fff;
}

.v2-execution-filter-bar > button:not(.primary):hover,
.v2-execution-filter-bar > button:not(.primary):focus-visible {
  color: var(--brand-dark);
  border-color: #edb8c0;
  background: var(--brand-soft);
}

.v2-execution-status-filter {
  flex-wrap: wrap;
  gap: 8px;
}

.v2-execution-status-filter button {
  min-height: 44px;
  padding: 8px 15px;
  color: #53627a;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: none;
  font-size: 15px;
  font-weight: 800;
}

.v2-execution-status-filter button:hover,
.v2-execution-status-filter button:focus-visible {
  color: var(--brand-dark);
  border-color: #edb8c0;
  background: var(--brand-soft);
}

.v2-execution-status-filter button.active {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: none;
}

.v2-execution-status-filter button.active strong,
.v2-execution-status-filter button.active b {
  color: var(--brand-dark);
  background: #fff;
}

.v2-execution-status-filter button.urgent {
  color: var(--brand-dark);
  border-color: #edc4ca;
  background: var(--red-soft);
}

.v2-execution-status-filter button.urgent.active {
  color: #fff;
  border-color: var(--brand-dark);
  background: var(--brand-dark);
}

.v2-execution-page button:focus-visible,
.v2-execution-page input:focus-visible,
.v2-execution-page select:focus-visible,
.v2-execution-page textarea:focus-visible,
.v2-execution-page [tabindex]:focus-visible {
  outline-color: rgba(228, 0, 43, .35);
}

.v2-execution-page .empty,
.v2-execution-page .task-empty,
.v2-execution-page .production-empty,
.v2-execution-page .shipping-empty-detail {
  color: var(--text-2);
  border-color: var(--line-strong);
  background: #fbfcfd;
  font-size: 16px;
  line-height: 1.6;
}

/* 生产：蓝色仅保留“生产中”等业务状态。 */
.v2-production-page .production-summary article {
  border-top-width: 3px;
}

.v2-production-page .production-summary article.doing {
  border-top-color: var(--blue);
}

.v2-production-page .production-summary article.paused {
  border-top-color: var(--brand);
}

.v2-production-page .production-summary article.done {
  border-top-color: #147a52;
}

.v2-production-page .production-task-search {
  grid-template-columns: auto minmax(280px, 1fr) auto auto;
  margin: 0 0 12px;
  padding: 12px;
}

.v2-production-page .production-task-search label {
  color: var(--text-2);
  font-size: 16px;
}

.v2-production-page .production-task-search > div {
  border-color: var(--line-strong);
}

.v2-production-page .production-task-search > strong {
  color: var(--text-2);
  font-size: 15px;
}

.v2-production-page .production-status-filter {
  margin: 0 2px 16px;
}

.v2-production-page .production-task-list {
  gap: 14px;
}

.v2-production-page .production-task-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.v2-production-page .production-task-card.in_progress {
  border-left-color: var(--blue);
}

.v2-production-page .production-task-card.exception_paused,
.v2-production-page .production-task-card.overdue {
  border-color: #edc4ca;
  border-left-color: var(--brand);
}

.v2-production-page .production-task-card.completed {
  border-left-color: #147a52;
}

.v2-production-page .production-task-head {
  padding: 18px 20px 15px;
  background: #fafbfc;
}

.v2-production-page .production-task-head h3 {
  color: var(--text);
  font-size: 24px;
}

.v2-production-page .production-progress i {
  background: var(--blue);
}

.v2-production-page .production-task-actions,
.v2-production-page .production-history {
  background: #fafbfc;
}

.v2-production-page .production-complete-button {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
}

.v2-production-page .production-complete-button:hover {
  background: var(--brand-dark);
}

/* 包装：待打包/缺料/完成继续使用琥珀、红、绿状态，品牌操作统一为红。 */
.v2-packaging-page .v2-execution-workbench,
.v2-packaging-page .v2-execution-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.v2-packaging-page .task-workbench-head {
  margin: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.v2-packaging-page .current-identity {
  margin-left: auto;
  padding: 8px 12px;
}

.v2-packaging-page .current-identity strong {
  color: var(--text);
  font-size: 15px;
}

.v2-packaging-page .packaging-task-search {
  grid-template-columns: auto minmax(260px, 1fr) auto auto;
  margin: 14px 14px 12px;
  padding: 12px;
}

.v2-packaging-page .packaging-task-search label {
  color: var(--text-2);
}

.v2-packaging-page .packaging-task-search > div {
  border: 1px solid var(--line-strong);
}

.v2-packaging-page .packaging-task-search strong {
  color: var(--text-2);
}

.v2-packaging-page .packaging-task-status-filter {
  display: flex;
  margin: 0 14px 14px;
}

.v2-packaging-page .packaging-task-status-filter button {
  flex: 1 1 130px;
  min-height: 48px;
}

.v2-packaging-page .packaging-task-list {
  gap: 12px;
  padding: 14px;
  background: #f7f8fa;
}

.v2-packaging-page .packaging-task {
  border-width: 1px;
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.v2-packaging-page .packaging-task.is-completed {
  border-left-color: #147a52;
}

.v2-packaging-page .packaging-task.is-cancelled {
  border-left-color: var(--text-3);
}

.v2-packaging-page .packaging-task.shortage-task {
  border-color: #edc4ca;
  border-left: 4px solid var(--brand);
}

.v2-packaging-page .task-main,
.v2-packaging-page .is-completed .task-main,
.v2-packaging-page .is-cancelled .task-main {
  background: #fafbfc;
}

.v2-packaging-page .task-product .task-model-code {
  color: var(--text);
}

.v2-packaging-page .task-packaging-checklist {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}

.v2-packaging-page .task-packaging-checklist-title {
  color: var(--text);
  background: #f1f3f5;
}

.v2-packaging-page .task-packaging-checklist-title span {
  color: var(--text-2);
}

.v2-packaging-page .task-packaging-number {
  background: var(--brand);
}

.v2-packaging-page .complete-task,
.v2-packaging-page .shortage-management-item button {
  color: #fff;
  background: var(--brand);
  box-shadow: none;
}

.v2-packaging-page .complete-task:hover,
.v2-packaging-page .shortage-management-item button:hover {
  background: var(--brand-dark);
}

.v2-packaging-page .formula-link-note,
.v2-packaging-page .packaging-configuration-panel {
  border-color: var(--line);
  background: var(--surface);
}

.v2-packaging-page .formula-link-note {
  border-left: 4px solid var(--brand);
  color: var(--text-2);
}

.v2-packaging-page .formula-link-note button,
.v2-packaging-page .configure-accessory,
.v2-packaging-page .packaging-requirement-actions button {
  min-height: 44px;
  color: var(--brand-dark);
  border-color: #edb8c0;
  background: var(--brand-soft);
}

.v2-packaging-page .packaging-summary {
  padding: 0 14px;
}

.v2-packaging-page .packaging-summary .task-summary {
  border: 1px solid #ead9af;
  border-top: 3px solid var(--amber);
  background: var(--amber-soft);
  box-shadow: none;
}

.v2-packaging-page .packaging-summary .task-summary strong {
  color: var(--amber);
  font-size: 32px;
}

.v2-packaging-page .packaging-filter,
.v2-packaging-page .packaging-legend,
.v2-packaging-page .packaging-product-list {
  margin-right: 14px;
  margin-left: 14px;
}

.v2-packaging-page .packaging-search-box:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.v2-packaging-page .product-sku {
  color: var(--brand-dark);
  background: var(--brand-soft);
}

/* 库存：当前数量、预警和流水保持原业务口径，仅统一层级。 */
.v2-inventory-page .inventory-summary .inventory-warning-card {
  border-color: #edc4ca;
  border-top-color: var(--brand);
  background: var(--red-soft);
}

.v2-inventory-page .v2-execution-tabs {
  gap: 6px;
  padding: 6px;
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.v2-inventory-page .v2-execution-tabs button {
  min-height: 44px;
  padding: 9px 12px;
  color: var(--text-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 15px;
}

.v2-inventory-page .v2-execution-tabs button:hover,
.v2-inventory-page .v2-execution-tabs button:focus-visible {
  color: var(--brand-dark);
  background: var(--brand-soft);
}

.v2-inventory-page .v2-execution-tabs button.active {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: none;
}

.v2-inventory-page .v2-execution-panel {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.v2-inventory-page .inventory-panel-head {
  padding: 16px 18px;
  background: #fafbfc;
}

.v2-inventory-page .inventory-panel-head h3 {
  color: var(--text);
  font-size: 18px;
}

.v2-inventory-page .inventory-panel-head p {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.5;
}

.v2-inventory-page .inventory-panel-actions button,
.v2-inventory-page .inventory-stocktake-actions button,
.v2-inventory-page .inventory-movement-photo {
  min-height: 44px;
  color: var(--text-2);
  border: 1px solid var(--line-strong);
  background: #fff;
  box-shadow: none;
  font-size: 15px;
}

.v2-inventory-page .inventory-panel-actions .inventory-create-button {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
}

.v2-inventory-page .inventory-panel-actions button:hover,
.v2-inventory-page .inventory-movement-photo:hover {
  color: var(--brand-dark);
  border-color: #edb8c0;
  background: var(--brand-soft);
}

.v2-inventory-page .inventory-panel-actions .inventory-create-button:hover {
  color: #fff;
  background: var(--brand-dark);
}

.v2-inventory-page .low-stock-priority-filters button.active {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: none;
}

.v2-inventory-page .low-stock-priority-filters button.active em {
  color: var(--brand-dark);
}

.v2-inventory-page .inventory-movement-toolbar,
.v2-inventory-page .inventory-stocktake-toolbar {
  background: #fafbfc;
}

.v2-inventory-page .inventory-movement-toolbar select,
.v2-inventory-page .inventory-stocktake-toolbar select {
  min-height: 44px;
  border-color: var(--line-strong);
  font-size: 16px;
}

.v2-inventory-page .inventory-movement-toolbar > strong,
.v2-inventory-page .inventory-stocktake-toolbar > strong,
.v2-inventory-page .inventory-movement-notice {
  color: var(--text-2);
}

/* 采购：预计到货继续使用语义蓝；筛选、按钮和普通卡片改为品牌与中性色。 */
.v2-purchase-page .purchase-summary > article:first-child {
  border-top-color: var(--line-strong);
}

.v2-purchase-page .purchase-summary .waiting {
  border-top-color: var(--amber);
}

.v2-purchase-page .purchase-summary .overdue {
  border-top-color: var(--brand);
}

.v2-purchase-page .purchase-summary .arrived {
  border-top-color: #147a52;
}

.v2-purchase-page .purchase-search {
  margin: 0 0 12px;
  padding: 12px;
}

.v2-purchase-page .purchase-search > strong {
  color: var(--text-2);
  font-size: 15px;
}

.v2-purchase-page .purchase-status-filter {
  margin: 0 2px 16px;
}

.v2-purchase-page .purchase-order-list {
  gap: 14px;
}

.v2-purchase-page .purchase-order-card,
.v2-purchase-page .worker-purchase-card,
.v2-purchase-page .worker-purchase-task {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.v2-purchase-page .purchase-order-head,
.v2-purchase-page .purchase-order-actions,
.v2-purchase-page .purchase-order-foot {
  background: #fafbfc;
}

.v2-purchase-page .purchase-row-actions button,
.v2-purchase-page .purchase-preview-button,
.v2-purchase-page .purchase-receipt-actions button,
.v2-purchase-page .purchase-receipt-reversal-mark button {
  min-height: 44px;
  color: var(--text-2);
  border-color: var(--line-strong);
  background: #fff;
  font-size: 15px;
}

.v2-purchase-page .purchase-row-actions button:hover,
.v2-purchase-page .purchase-preview-button:hover,
.v2-purchase-page .purchase-receipt-actions button:hover,
.v2-purchase-page .purchase-receipt-reversal-mark button:hover {
  color: var(--brand-dark);
  border-color: #edb8c0;
  background: var(--brand-soft);
}

.v2-purchase-page .worker-purchase-arrived-button {
  color: #fff;
  background: var(--brand);
  box-shadow: none;
}

.v2-purchase-page .worker-purchase-arrived-button:hover {
  background: var(--brand-dark);
}

/* 发货：运输中保留语义蓝，普通结构改为品牌与中性色。 */
.v2-shipping-page .shipping-summary .waiting {
  border-top-color: var(--amber);
}

.v2-shipping-page .shipping-summary .moving {
  border-top-color: var(--blue);
}

.v2-shipping-page .shipping-summary .danger {
  border-top-color: var(--brand);
}

.v2-shipping-page .shipping-ledger-head > span {
  color: var(--text-2);
  border-color: var(--line);
  background: #f7f8fa;
}

.v2-shipping-page .shipping-filters {
  margin-bottom: 16px;
  padding: 12px;
}

.v2-shipping-page .shipping-filters select,
.v2-shipping-page .shipping-filters input[type="date"] {
  min-height: 44px;
  color: var(--text);
  border-color: var(--line-strong);
  font-size: 15px;
}

.v2-shipping-page .shipping-filters > strong {
  color: var(--text-2);
  font-size: 15px;
}

.v2-shipping-page .shipping-task-list {
  gap: 14px;
}

.v2-shipping-page .shipping-worker-group-title {
  color: var(--text);
}

.v2-shipping-page .shipping-task-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.v2-shipping-page .shipping-task-card.status-in_transit {
  border-left-color: var(--blue);
}

.v2-shipping-page .shipping-task-card.status-exception,
.v2-shipping-page .shipping-task-card.overdue {
  border-color: #edc4ca;
  border-left-color: var(--brand);
}

.v2-shipping-page .shipping-task-card.status-completed,
.v2-shipping-page .shipping-task-card.status-handed_over {
  border-left-color: #147a52;
}

.v2-shipping-page .shipping-task-card.status-cancelled {
  border-left-color: var(--text-3);
}

.v2-shipping-page .shipping-task-head,
.v2-shipping-page .shipping-task-card.mode-third_party_pickup .shipping-task-head,
.v2-shipping-page .shipping-task-card.mode-customer_pickup .shipping-task-head {
  background: #fafbfc;
}

.v2-shipping-page .shipping-task-head h3,
.v2-shipping-page .shipping-info-section > h4,
.v2-shipping-page .shipping-product-row > div:first-child > strong,
.v2-shipping-page .shipping-event-timeline summary {
  color: var(--text);
}

.v2-shipping-page .shipping-info-section > h4 > b,
.v2-shipping-page .shipping-event-timeline li > i {
  background: var(--brand);
}

.v2-shipping-page .shipping-info-section,
.v2-shipping-page .shipping-product-row,
.v2-shipping-page .shipping-event-timeline {
  border-color: var(--line);
}

.v2-shipping-page .shipping-address-line button,
.v2-shipping-page .shipping-call-link,
.v2-shipping-page .shipping-event-timeline li button {
  min-height: 44px;
  color: var(--brand-dark);
  border-color: #edb8c0;
  background: var(--brand-soft);
  font-size: 15px;
}

.v2-shipping-page .shipping-primary-action,
.v2-shipping-page .shipping-primary-action.complete,
.v2-shipping-page .shipping-primary-action.handoff {
  color: #fff;
  background: var(--brand);
  box-shadow: none;
}

.v2-shipping-page .shipping-primary-action:hover {
  background: var(--brand-dark);
}

@media (max-width: 1360px) and (min-width: 761px) {
  .v2-shipping-page .shipping-filters {
    grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(140px, 1fr));
  }

  .v2-shipping-page .shipping-filters label,
  .v2-shipping-page .shipping-filters .secondary {
    min-width: 0;
  }
}

@media (max-width: 1260px) and (min-width: 761px) {
  .v2-execution-summary {
    gap: 10px;
  }

  .v2-shipping-page .shipping-filters {
    grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(140px, 1fr));
  }

  .v2-shipping-page .shipping-filters label,
  .v2-shipping-page .shipping-filters .secondary {
    min-width: 0;
  }

  .v2-production-page .production-key-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .v2-execution-page {
    max-width: 100%;
    overflow-x: hidden;
  }

  .v2-execution-page > .v2-execution-hero {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .v2-execution-page > .v2-execution-hero .module-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .v2-execution-page > .v2-execution-hero h2 {
    font-size: 22px;
  }

  .v2-execution-page > .v2-execution-hero .primary {
    width: 100%;
    min-height: 50px;
    margin-left: 0;
  }

  .v2-execution-summary,
  .v2-production-page .production-summary,
  .v2-purchase-page .purchase-summary,
  .v2-shipping-page .shipping-summary,
  .v2-inventory-page .inventory-summary,
  .v2-packaging-page .packaging-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v2-execution-summary > article,
  .v2-execution-summary > button {
    min-height: 96px;
    padding: 14px;
  }

  .v2-execution-summary strong {
    font-size: 26px;
  }

  .v2-execution-ledger,
  .v2-packaging-page .task-workbench-head {
    align-items: stretch;
    flex-direction: column;
  }

  .v2-execution-ledger > span,
  .v2-execution-ledger .current-identity {
    align-self: stretch;
    margin-left: 0;
  }

  .v2-execution-filter-bar,
  .v2-production-page .production-task-search,
  .v2-packaging-page .packaging-task-search,
  .v2-purchase-page .purchase-search,
  .v2-shipping-page .shipping-filters,
  .v2-shipping-page .shipping-filters.worker-mode {
    grid-template-columns: 1fr;
  }

  .v2-production-page .production-task-search > label,
  .v2-production-page .production-task-search > div,
  .v2-packaging-page .packaging-task-search > label,
  .v2-packaging-page .packaging-task-search > div,
  .v2-shipping-page .shipping-filters .search {
    grid-column: auto;
  }

  .v2-execution-filter-bar > button,
  .v2-execution-filter-bar .secondary,
  .v2-execution-filter-bar select,
  .v2-execution-filter-bar input[type="date"] {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }

  .v2-execution-status-filter,
  .v2-packaging-page .packaging-task-status-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .v2-execution-status-filter button,
  .v2-packaging-page .packaging-task-status-filter button {
    width: 100%;
    min-height: 48px;
  }

  .v2-inventory-page .v2-execution-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v2-inventory-page .v2-execution-tabs button {
    min-height: 48px;
    font-size: 16px;
  }

  .v2-inventory-page .inventory-panel-head,
  .v2-packaging-page .task-main,
  .v2-production-page .production-task-head,
  .v2-shipping-page .shipping-task-head {
    padding: 16px;
  }

  .v2-packaging-page .packaging-task-list,
  .v2-packaging-page .packaging-summary {
    padding-right: 10px;
    padding-left: 10px;
  }

  .v2-packaging-page .packaging-filter,
  .v2-packaging-page .packaging-legend,
  .v2-packaging-page .packaging-product-list {
    margin-right: 10px;
    margin-left: 10px;
  }

  .v2-packaging-page .packaging-search-box {
    min-width: 0;
    width: 100%;
  }

  .v2-packaging-page .formula-link-note {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
    padding: 16px;
  }

  .v2-packaging-page .formula-link-note span {
    min-width: 0;
    line-height: 1.6;
  }

  .v2-packaging-page .formula-link-note button,
  .v2-packaging-page .task-manager-actions button {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }

  .v2-production-page .production-task-actions button,
  .v2-packaging-page .task-actions-row button,
  .v2-purchase-page .worker-purchase-arrived-button,
  .v2-shipping-page .shipping-task-actions button,
  .v2-inventory-page .inventory-panel-actions button,
  .v2-inventory-page .inventory-stocktake-actions button {
    min-height: 50px;
    font-size: 16px;
  }

  .v2-inventory-page .inventory-movement-toolbar,
  .v2-inventory-page .inventory-stocktake-toolbar {
    grid-template-columns: 1fr;
  }

  .v2-inventory-page .inventory-movement-search,
  .v2-inventory-page .inventory-stocktake-toolbar .search {
    grid-column: auto;
  }
}

@media (max-width: 430px) {
  .v2-execution-summary,
  .v2-production-page .production-summary,
  .v2-purchase-page .purchase-summary,
  .v2-shipping-page .shipping-summary,
  .v2-inventory-page .inventory-summary,
  .v2-packaging-page .packaging-summary {
    grid-template-columns: 1fr 1fr;
  }

  .v2-production-page .production-summary article:last-child,
  .v2-inventory-page .inventory-summary > :last-child,
  .v2-packaging-page .packaging-summary > :last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .bom-items-disclosure > summary,
  .packaging-task-disclosure > summary {
    flex-wrap: wrap;
    min-height: 52px;
    padding: 12px 16px;
    font-size: 16px;
  }

  .bom-items-disclosure > summary em,
  .packaging-task-disclosure > summary em {
    margin-left: 0;
  }

  .packaging-task-disclosure > summary .packaging-disclosure-ready,
  .packaging-task-disclosure > summary .packaging-disclosure-alert {
    order: 5;
    width: 100%;
  }

  .bom-items {
    padding-right: 12px;
    padding-left: 12px;
  }

  .inventory-all-materials-toolbar {
    grid-template-columns: 1fr;
  }

  .inventory-all-materials-toolbar > strong {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}