:root {
  --color-primary: #32756f;
  --color-primary-dark: #265a56;
  --color-primary-soft: #e7f1ef;
  --color-canvas: #f7f6f3;
  --color-surface: #fff;
  --color-surface-soft: #f0efeb;
  --color-text: #263238;
  --color-text-muted: #66736f;
  --color-border: #d8ddd9;
  --color-success: #2e7d58;
  --color-success-soft: #e8f4ee;
  --color-warning: #c87912;
  --color-warning-soft: #fff3e0;
  --color-danger: #c2413b;
  --color-danger-soft: #fcebe9;
  --color-info: #3c6f91;
  --color-info-soft: #eaf2f8;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-control: 7px;
  --radius-panel: 11px;
  --focus-ring: 0 0 0 3px rgb(50 117 111 / 28%);
}

* { box-sizing: border-box; }
body { min-width: 320px; background: var(--color-canvas); color: var(--color-text); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; }
a { color: var(--color-primary-dark); text-underline-offset: 2px; }
a:hover { color: var(--color-primary-dark); }
:focus-visible { outline: 0; box-shadow: var(--focus-ring); border-radius: var(--radius-control); }
.app-main { min-height: 100vh; }
.app-content { max-width: 1180px; margin: 0 auto; padding: var(--space-6); }
.app-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.app-page-header h1 { margin: 0; font-size: clamp(30px, 3vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.app-page-context { max-width: 680px; margin: var(--space-2) 0 0; color: var(--color-text-muted); }
.app-page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); flex-shrink: 0; }
h2 { font-size: clamp(22px, 2vw, 24px); font-weight: 600; line-height: 1.25; }
h3 { font-size: 18px; font-weight: 600; line-height: 1.35; }
.app-eyebrow { color: var(--color-text-muted); display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.btn { min-height: 40px; border-radius: var(--radius-control); font-weight: 600; padding: 8px 14px; }
.btn-primary { --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary-dark); --bs-btn-hover-border-color: var(--color-primary-dark); --bs-btn-active-bg: var(--color-primary-dark); --bs-btn-active-border-color: var(--color-primary-dark); }
.btn-outline-primary { --bs-btn-color: var(--color-primary-dark); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary); }
.btn-outline-danger { --bs-btn-color: var(--color-danger); --bs-btn-border-color: var(--color-danger); --bs-btn-hover-bg: var(--color-danger); --bs-btn-hover-border-color: var(--color-danger); }
.form-control, .form-select { background: var(--color-surface); border-color: var(--color-border); border-radius: var(--radius-control); color: var(--color-text); min-height: 44px; }
.form-control:focus, .form-select:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.form-label { font-weight: 600; font-size: 14px; }
.form-text, .text-muted { color: var(--color-text-muted) !important; }
.card, .app-panel, .app-task-card, .app-list-card, .app-recent-result, .app-swatch-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); box-shadow: 0 1px 2px rgb(38 50 56 / 4%); }
.app-panel { padding: var(--space-5); }.app-panel > h2 { margin-top: 0; }.card-header { background: var(--color-surface-soft); border-bottom-color: var(--color-border); }
.app-sidebar { background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; height: 100vh; left: 0; padding: var(--space-5) var(--space-3); position: fixed; top: 0; width: 244px; z-index: 10; }
.app-brand { color: var(--color-text); font-size: 20px; font-weight: 650; padding: 0 var(--space-3); text-decoration: none; }
.app-brand-subtitle { color: var(--color-text-muted); font-size: 13px; margin: 2px var(--space-3) var(--space-5); }
.app-nav { display: grid; gap: var(--space-1); }
.app-nav-link { border-radius: var(--radius-control); color: var(--color-text); font-weight: 600; padding: 10px var(--space-3); text-decoration: none; }
.app-nav-link:hover, .app-nav-link.is-active { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.app-account-control { border-top: 1px solid var(--color-border); color: var(--color-text-muted); display: flex; flex-wrap: wrap; font-size: 14px; gap: var(--space-1) var(--space-2); margin-top: auto; padding: var(--space-3); }
.app-account-control form { display: inline; }
.app-account-control .btn { color: var(--color-primary-dark); font-size: 14px; min-height: auto; padding: 0; }
.app-authenticated .app-main { margin-left: 244px; }
.app-mobile-nav { display: none; }
.app-alert { align-items: baseline; border: 1px solid; border-radius: var(--radius-control); display: flex; gap: var(--space-2); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); }
.app-alert--success { background: var(--color-success-soft); border-color: var(--color-success); color: #19563a; }.app-alert--warning { background: var(--color-warning-soft); border-color: var(--color-warning); color: #754300; }.app-alert--danger { background: var(--color-danger-soft); border-color: var(--color-danger); color: #7f2723; }.app-alert--info { background: var(--color-info-soft); border-color: var(--color-info); color: #23526f; }
.app-status-chip { border-radius: 999px; display: inline-flex; font-size: 13px; font-weight: 650; line-height: 1.2; padding: 5px 9px; white-space: nowrap; }
.app-status-chip--success { background: var(--color-success-soft); color: #19563a; }.app-status-chip--warning { background: var(--color-warning-soft); color: #754300; }.app-status-chip--danger { background: var(--color-danger-soft); color: #7f2723; }.app-status-chip--info { background: var(--color-info-soft); color: #23526f; }
.app-dashboard-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--space-6); }
.app-task-card { border-left: 4px solid var(--color-primary); padding: var(--space-5); }.app-task-card--danger { border-left-color: var(--color-danger); }.app-task-card h2 { font-size: 20px; margin: 0 0 var(--space-2); }.app-task-card p { color: var(--color-text-muted); margin: 0 0 var(--space-4); }
.app-section { margin: var(--space-6) 0; }.app-section-heading { align-items: end; display: flex; gap: var(--space-4); justify-content: space-between; margin-bottom: var(--space-3); }.app-section-heading h2 { margin: 0; }.app-section-heading p { color: var(--color-text-muted); margin: var(--space-1) 0 0; }
.app-data-row, .app-variation-row { align-items: center; border-bottom: 1px solid var(--color-border); display: flex; gap: var(--space-3); justify-content: space-between; padding: var(--space-3) var(--space-4); }.app-data-row:last-child, .app-variation-row:last-child { border-bottom: 0; }.app-data-row span, .app-variation-row span, .app-catalog-row span { color: var(--color-text-muted); display: block; font-size: 14px; }
.app-recent-result { align-items: center; display: flex; gap: var(--space-5); justify-content: space-between; margin-top: var(--space-6); padding: var(--space-5); }.app-recent-result h2 { margin: var(--space-1) 0; }.app-recent-result p, .app-recent-result span { color: var(--color-text-muted); margin: 0; }.app-recent-result strong { display: block; font-size: 26px; line-height: 1.1; }
.app-empty-state { background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-panel); margin: var(--space-5) 0; max-width: 720px; padding: var(--space-6); text-align: center; }.app-empty-state h2 { margin: 0; }.app-empty-state p { color: var(--color-text-muted); margin: var(--space-2) 0 var(--space-4); }
.app-first-run { display: grid; gap: var(--space-3); max-width: 720px; padding-left: 24px; }.app-first-run li { padding-left: var(--space-1); }
.app-swatch { display: grid; gap: var(--space-4); }.app-swatch-section { padding: var(--space-5); }.app-swatch-section h2 { margin-top: 0; }.app-swatch-type-title { color: var(--color-primary-dark); font-size: 24px; font-weight: 600; }.app-save-status { color: var(--color-success); font-size: 14px; font-weight: 600; }.app-filter-bar { align-items: end; background: var(--color-surface-soft); border-radius: var(--radius-control); display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3); }.app-filter-bar label { flex: 1 1 180px; font-size: 14px; font-weight: 600; }
.app-item-group { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); overflow: hidden; }.app-item-group-category { background: var(--color-surface-soft); color: var(--color-text-muted); font-size: 14px; font-weight: 650; padding: var(--space-2) var(--space-4); }.app-item-group details summary { align-items: center; cursor: pointer; display: flex; justify-content: space-between; padding: var(--space-3) var(--space-4); }.app-item-group details summary span { color: var(--color-text-muted); font-size: 14px; }.app-variation-row { margin-left: var(--space-3); }
.app-quantity-stepper { align-items: center; display: flex; gap: var(--space-1); }.app-quantity-stepper button { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-primary-dark); font-size: 22px; font-weight: 600; height: 44px; line-height: 1; width: 44px; }.app-quantity-stepper input { min-width: 58px; text-align: center; }.app-workflow-row { align-items: center; background: var(--color-surface-soft); border-radius: var(--radius-control); display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); }.app-workflow-row h3 { margin: var(--space-1) 0; }.app-workflow-row p { margin: 0; }
.app-catalog-row { align-items: center; border-bottom: 1px solid var(--color-border); display: grid; gap: var(--space-3); grid-template-columns: minmax(180px, 1fr) minmax(330px, 1.5fr) auto; padding: var(--space-3) 0; }.app-catalog-row:last-of-type { border-bottom: 0; }.app-stock-form { align-items: center; display: grid; gap: var(--space-2); grid-template-columns: minmax(130px, 1fr) 100px auto; }.app-stock-form .form-select, .app-stock-form .form-control { min-height: 40px; }
.app-calendar-controls { align-items: center; display: flex; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }.app-calendar-controls h2 { margin: 0; text-align: center; }.app-calendar { background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-panel); display: grid; gap: 1px; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: hidden; }.app-calendar-weekday { background: var(--color-surface-soft); color: var(--color-text-muted); font-size: 13px; font-weight: 650; padding: var(--space-2) var(--space-3); }.app-calendar-day { background: var(--color-surface); display: flex; flex-direction: column; gap: var(--space-1); min-height: 136px; padding: var(--space-2); }.app-calendar-day.is-outside-month { background: #fafaf8; }.app-calendar-day.is-outside-month .app-calendar-date { color: var(--color-text-muted); }.app-calendar-day.is-today .app-calendar-date { background: var(--color-primary); border-radius: 999px; color: #fff; }.app-calendar-date { align-items: center; display: inline-flex; font-size: 13px; font-weight: 650; height: 24px; justify-content: center; width: 24px; }.app-calendar-show, .app-calendar-schedule { border-radius: 5px; display: block; font-size: 13px; font-weight: 650; overflow: hidden; padding: 3px 5px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }.app-calendar-show { background: var(--color-primary-soft); color: var(--color-primary-dark); }.app-calendar-schedule { background: var(--color-surface-soft); color: var(--color-text); }.app-calendar-schedule small { color: var(--color-text-muted); font-weight: 400; margin-left: var(--space-1); }.app-schedule-list { border-top: 1px solid var(--color-border); list-style: none; margin: var(--space-4) 0 0; padding: var(--space-2) 0 0; }.app-schedule-list li { align-items: baseline; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-1) 0; }.app-schedule-list time, .app-schedule-list span, .app-schedule-list small { color: var(--color-text-muted); font-size: 14px; }.app-schedule-list time { min-width: 104px; }.app-schedule-edit { font-size: 14px; font-weight: 600; }.app-schedule-list small { flex-basis: 100%; }.app-danger-zone { border-top: 3px solid var(--color-danger); padding-top: var(--space-4); }.app-production-list, .app-report-list { display: grid; gap: var(--space-2); }.app-production-row, .app-report-row { align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); display: flex; gap: var(--space-4); justify-content: space-between; padding: var(--space-4); }.app-production-row h2 { font-size: 18px; margin: var(--space-1) 0; }.app-production-row p, .app-report-row span, .app-report-row small { color: var(--color-text-muted); display: block; font-size: 14px; margin: 0; }.app-production-signals { align-items: flex-end; display: flex; flex-direction: column; gap: var(--space-2); }.app-production-signals a { font-size: 14px; font-weight: 600; }.app-report-row > div:last-child { text-align: right; }.app-show-list { display: grid; gap: var(--space-3); }.app-show-card { align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); display: flex; gap: var(--space-4); justify-content: space-between; padding: var(--space-5); }.app-show-card h2 { margin: var(--space-1) 0; }.app-show-card p { color: var(--color-text-muted); margin: 0; }.app-show-card-action { align-items: flex-end; display: flex; flex-direction: column; gap: var(--space-2); }.app-back-link { display: inline-block; margin-bottom: var(--space-2); }.app-show-summary { align-items: center; background: var(--color-surface-soft); border-radius: var(--radius-control); display: flex; gap: var(--space-3); justify-content: space-between; margin: calc(var(--space-5) * -1) 0 var(--space-5); padding: var(--space-2) var(--space-3); }.app-show-summary > div { align-items: center; display: flex; gap: var(--space-2); }.app-show-summary > div > span:last-child { color: var(--color-text-muted); font-size: 14px; }.app-show-summary nav { display: flex; flex-wrap: wrap; gap: var(--space-3); }.app-show-summary nav a { font-size: 14px; font-weight: 600; }.app-show-line { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); margin-bottom: var(--space-2); padding: var(--space-3); }.app-show-line > div > span { color: var(--color-text-muted); display: block; font-size: 14px; }.app-inline-fields, .app-reconcile-form { align-items: end; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }.app-inline-fields label, .app-reconcile-form label { flex: 1 1 90px; font-size: 13px; font-weight: 600; }.app-set-aside-control { flex: 1 1 180px; }.app-set-aside-control summary { color: var(--color-primary-dark); cursor: pointer; font-size: 13px; font-weight: 600; margin-bottom: var(--space-1); }.app-set-aside-control small { color: var(--color-text-muted); display: block; font-size: 12px; margin-top: var(--space-1); }.app-reconcile-form label:last-of-type { flex-basis: 180px; }.app-inline-fields .form-control, .app-reconcile-form .form-control { min-height: 40px; }.app-pack-form { align-items: end; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }.app-pack-form > label { font-size: 13px; font-weight: 600; }.app-results-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(4, 1fr); margin-bottom: var(--space-4); }.app-results-grid > div { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); padding: var(--space-3); }.app-results-grid span, .app-results-grid small { color: var(--color-text-muted); display: block; font-size: 13px; }.app-results-grid strong { display: block; font-size: 22px; line-height: 1.25; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--color-text); --bs-table-border-color: var(--color-border); }.table > :not(caption) > * > * { padding: var(--space-3); }
@media (max-width: 767.98px) { .app-sidebar { display: none; }.app-authenticated .app-main { margin-left: 0; margin-bottom: 72px; }.app-content { padding: var(--space-4); }.app-mobile-nav { background: var(--color-surface); border-top: 1px solid var(--color-border); bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); left: 0; position: fixed; right: 0; z-index: 10; }.app-mobile-nav a { color: var(--color-text-muted); font-size: 11px; font-weight: 650; min-height: 64px; padding: 20px 4px 8px; text-align: center; text-decoration: none; }.app-mobile-nav a.is-active { color: var(--color-primary-dark); }.app-page-header { align-items: stretch; flex-direction: column; margin-bottom: var(--space-5); }.app-page-actions .btn { flex: 1; }.app-dashboard-grid { grid-template-columns: 1fr; }.app-section-heading, .app-recent-result, .app-workflow-row { align-items: flex-start; flex-direction: column; }.app-data-row { align-items: flex-start; flex-direction: column; }.app-data-row > div:last-child { display: flex; flex-wrap: wrap; gap: var(--space-1); }.app-swatch-section { padding: var(--space-4); }.app-variation-row { align-items: flex-start; flex-direction: column; margin-left: 0; }.app-item-group details summary { align-items: flex-start; flex-direction: column; }.app-filter-bar .btn { width: 100%; }.app-catalog-row { align-items: stretch; grid-template-columns: 1fr; }.app-stock-form { grid-template-columns: 1fr 100px; }.app-stock-form .btn { grid-column: 1 / -1; }.app-show-card, .app-show-summary, .app-production-row, .app-report-row { align-items: flex-start; flex-direction: column; }.app-calendar-controls { align-items: stretch; }.app-calendar-controls .btn { flex: 1; }.app-calendar-controls h2 { font-size: 18px; }.app-calendar { display: block; background: transparent; border: 0; overflow: visible; }.app-calendar-weekday { display: none; }.app-calendar-day { border: 1px solid var(--color-border); border-radius: var(--radius-control); margin-bottom: var(--space-2); min-height: 0; }.app-calendar-day.is-outside-month { display: none; }.app-calendar-show, .app-calendar-schedule { overflow: visible; white-space: normal; }.app-calendar-schedule small { display: block; margin-left: 0; }.app-schedule-list li { align-items: flex-start; flex-direction: column; gap: 0; }.app-schedule-list small { flex-basis: auto; }.app-production-signals { align-items: flex-start; }.app-report-row > div:last-child { text-align: left; }.app-show-card-action { align-items: flex-start; flex-direction: row; }.app-show-summary nav { gap: var(--space-2) var(--space-3); }.app-results-grid { grid-template-columns: repeat(2, 1fr); }.app-reconcile-form label:last-of-type { flex-basis: 100%; } }
.app-account-switcher { flex-basis: 100%; }.app-account-switcher summary { color: var(--color-primary-dark); cursor: pointer; }.app-account-switcher li { padding: var(--space-1) 0; }