/* The work portal keeps its compact layout; colour carries the brand and hierarchy. */
:is(.app-shell, body:has(.app-shell) dialog.structured-editor) {
  --background: #f6f5ef;
  --surface-subtle: #f8f9f3;
  --cream: #eef3e5;
  --green-100: #e2edcf;
  --line: #dfe5d7;
  --line-strong: #ccd8c0;
  --green-200: #b6cba0;
  --green-300: #71915a;
  --green: #233a25;
  --green-hover: #355735;
  --muted: #5e6c58;
  --text: #2c362b;
  --warning-bg: #fbf3df;
  --warning-line: #e8d5a4;
  --warning-text: #7b5b1e;
  --danger-bg: #fbede8;
  --danger: #a13e31;
  --row-surface: #ffffff;
  --row-alternate: #f4f7ee;
  --row-hover: #eaf1df;
  --work-shadow: 0 2px 8px #233a2507, 0 1px 2px #233a2504;
  --work-focus: #567b32;
}

.app-shell {
  background: var(--background);
  color: var(--text);
}

/* A recognisable, quiet navigation rail, including its mobile drawer. */
.app-shell .sidebar {
  background: #233a25;
  color: #f5f8ef;
  border-right-color: #203723;
  box-shadow: 3px 0 18px #233a2509;
  scrollbar-color: #70876a #233a25;
}
.app-shell .sidebar .brand img { filter: brightness(0) invert(1); }
.app-shell .sidebar-label { color: #b9cca9; letter-spacing: 1.7px; }
.app-shell .sidebar .nav-link {
  color: #e0e9d9;
  border-radius: 8px;
  transition: color .15s ease, background-color .15s ease;
}
.app-shell .sidebar .nav-link > .icon { color: #bbd39f; }
.app-shell .sidebar .nav-link:hover {
  color: #fff;
  background: #ffffff0e;
}
.app-shell .sidebar .nav-link.active {
  color: #263d21;
  background: #d6edb4;
  box-shadow: inset 3px 0 #86bc3d;
  font-weight: 650;
}
.app-shell .sidebar .nav-link.active > .icon { color: #35582b; }
.app-shell .sidebar .nav-management-summary.is-active-section { color: #e3f2cc; }
.app-shell .sidebar .nav-management-links { border-left-color: #ffffff26; }
.app-shell .sidebar .nav-package-section { border-top-color: #ffffff26; }
.app-shell .sidebar .nav-package-section.active { border-top-color: transparent; border-radius: 8px !important; }
.app-shell .sidebar .nav-count {
  background: #ffffff18;
  color: #f1f7e8;
}
.app-shell .sidebar .active .nav-count { background: #bcd893; color: #263d21; }
.app-shell .sidebar-user { border-top-color: #ffffff20; }
.app-shell .sidebar-user strong { color: #f2f7eb; }
.app-shell .sidebar-user div > span { color: #b9c9ae; }
.app-shell .sidebar-user .avatar {
  color: #e0f2be;
  background: #ffffff12;
  border: 1px solid #ffffff20;
}
.app-shell .sidebar :is(a, summary):focus-visible {
  outline: 2px solid #d7efb6;
  outline-offset: 3px;
}

/* The breadcrumb remains the page heading. No additional banners or copy. */
.app-shell .topbar {
  background: #fffef9;
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 #fff;
}
.app-shell .breadcrumbs > h1 { color: var(--green); font-weight: 650; letter-spacing: -.55px; }
.app-shell .breadcrumbs > .icon { color: #91a27d; }
.app-shell .topbar .user-button {
  background: #e5efcf;
  color: #35522a;
  box-shadow: inset 0 0 0 1px #cbdcb3;
}
.app-shell .app-footer { color: #637158; }
.app-shell .app-footer .footer-dot { color: #91ac6b; }
.app-shell :is(.orders-history-toolbar, .delivery-history-toolbar) { background: var(--background); }

/* Surfaces have a warm, tactile base without adding visual weight to rows. */
.app-shell :is(.card, .stat-card, .product-card, .package-card) {
  border-color: var(--line);
  box-shadow: var(--work-shadow);
}
.app-shell .stat-card { border-top: 3px solid #c1dba0; }
.app-shell .stat-label { color: #59694e; }
.app-shell .stat-card strong { letter-spacing: -.9px; }
.app-shell .stat-icon {
  color: #4f7333;
  background: #eaf2dc;
  border-radius: 10px;
}
.app-shell .attention-icon.green { color: #4c702f; background: #eaf2dc; }
.app-shell .attention-icon.amber { color: #7b5b1e; background: #fbf0d5; }
.app-shell .quiet-card { background: #edf3e3; border-color: #d3dfc2; }
.app-shell .empty-icon { color: #668243; background: #edf3df; }
.app-shell .product-media { background: #f0f3e5; }
.app-shell .product-card-footer { border-top-color: #e2e8d9; }
.app-shell .product-category { color: #60764a; }

/* One visual language for work controls, while their dimensions stay intact. */
:is(.app-shell, body:has(.app-shell) dialog.structured-editor) :is(.btn-primary, .btn-primary:visited) {
  background: #2e4b2e;
  border-color: #2e4b2e;
  color: #fff;
  box-shadow: 0 2px 3px #233a2512;
}
:is(.app-shell, body:has(.app-shell) dialog.structured-editor) .btn-primary:hover:not(:disabled) {
  background: #3d6134;
  border-color: #3d6134;
}
:is(.app-shell, body:has(.app-shell) dialog.structured-editor) :is(.btn-outline, .btn-secondary) {
  color: #38562d;
  border-color: #cddac0;
  background: #fff;
}
:is(.app-shell, body:has(.app-shell) dialog.structured-editor) :is(.btn-outline, .btn-secondary):hover:not(:disabled) {
  background: #f0f5e7;
  border-color: #adc592;
}
.app-shell :is(.icon-button, .btn-text, .btn-link) { color: #597249; }
.app-shell :is(.icon-button, .btn-text, .btn-link):hover { color: #2f4f29; background: #eaf1df; }
.app-shell :is(.period-select, .search-field) { border-color: #cfdac4; box-shadow: 0 1px 2px #233a2505; }
.app-shell .period-select :is(input, label > .icon) { color: #405b31; }
.app-shell :is(.production-mode-switch, .preparation-view-switch) { background: #e8eddf; }
.app-shell :is(.production-mode-switch, .preparation-view-switch) > button[aria-pressed=true] {
  color: #355429;
  background: #fff;
  box-shadow: 0 1px 4px #233a2515;
}
.app-shell :is(.filter.active, .preparation-status-switch > button[aria-pressed=true]) {
  color: #375a2b;
  border-bottom-color: #709c3f;
}
.app-shell .action-menu[open] > summary { color: #355429; background: #e6efda; }
.app-shell .menu-panel { border-color: #d1ddc6; box-shadow: 0 12px 36px #20371e24; }

/* Repeated weekly/day sections become easy to scan; the compact rows are untouched. */
.app-shell :is(.orders-week-heading, .delivery-day-heading, .preparation-day-heading, .preparation-product-heading) {
  background: #eaf1dd;
  border-bottom-color: #cddbbb;
  box-shadow: inset 0 3px #b7d48d;
}
.app-shell :is(.orders-week-heading h2, .delivery-day-title, .preparation-day-heading h2, .preparation-product-heading h2) {
  color: #2e4a27;
}
.app-shell :is(.delivery-route-heading, .preparation-route-heading) { background: #f5f7ee; }
.app-shell .delivery-route-heading h3 { color: #5f734c; }
.app-shell .data-table th {
  background: #edf3e3;
  color: #546548;
  border-color: #dbe5cf;
  font-weight: 600;
}
.app-shell :is(.orders-stream-customer strong, .delivery-stop-identity h3, .preparation-order-identity strong) { color: #2d3d28; }
.app-shell :is(.orders-stream-amount, .numeric, .production-plan-table, .preparation-allocation-quantity) { font-variant-numeric: tabular-nums; }
.app-shell .stop-number { color: #526d3d; background: #eaf0df; border-color: #d3dfc1; }
.app-shell .production-plan-columns th { color: #536948; background: #eaf1df; border-bottom-color: #d7e2ca; }
.app-shell .production-plan-table .production-product-header { background: #f3f6eb; border-color: #dde7d1; }
.app-shell .production-plan-product + .production-plan-product .production-product-header { border-top-color: #ccdcbc; }
.app-shell .production-plan-summary > strong { color: #3b5b2d; }
.app-shell .production-available-mark { color: #477630; }
.app-shell .production-purchase-table thead th { color: #536948; background: #edf3e3; }
.app-shell :is(.production-inventory-row, .production-batch-row, .production-campaign-list > div):nth-child(even) { background: var(--row-alternate); }

/* Status colours stay semantic and readable, with text labels retained. */
.app-shell :is(.badge.bevestigd, .badge.active, .badge.klaar) { color: #3d6228; background: #e5f0d5; }
.app-shell :is(.badge.geleverd, .badge.verwerkt) { color: #4c6856; background: #e6efe7; }
.app-shell :is(.badge.concept, .badge.open) { color: #7b5b1e; background: #fbf0d5; }
.app-shell :is(.badge.geannuleerd, .badge.inactive) { color: #915246; background: #f8e9e3; }
.app-shell .badge.afhalen { color: #68517f; background: #f1eaf7; }
.app-shell .badge.bezorgen { color: #476382; background: #eaf0f7; }
.app-shell :is(.operation-check > input:checked + span) { background: #3d6530; border-color: #3d6530; }

/* Editors belong to the same work environment; sections keep their quiet hierarchy. */
body:has(.app-shell) dialog.structured-editor {
  border-color: #ccd8bf;
  box-shadow: 0 24px 80px #1b301b2e;
}
body:has(.app-shell) dialog.structured-editor > .dialog-heading {
  background: #f2f6e9;
  border-bottom-color: #d7e3c9;
  box-shadow: inset 0 3px #b7d48d;
}
body:has(.app-shell) dialog.structured-editor > .dialog-body { background: #f7f8f2; }
body:has(.app-shell) dialog.structured-editor :is(.edit-section, .edit-disclosure) { border-color: #dce4d2; }
body:has(.app-shell) dialog.structured-editor .edit-section-heading { background: #fbfcf8; border-bottom-color: #e0e8d8; }
body:has(.app-shell) dialog.structured-editor .edit-disclosure > summary:hover { background: #f1f6e8; }
body:has(.app-shell) dialog.structured-editor .edit-disclosure[open] > summary { background: #f4f8ed; border-bottom-color: #dce6d0; }
body:has(.app-shell) dialog.structured-editor :is(.dialog-footer, .dialog-actions) { background: #f7f8f2; box-shadow: 0 -8px 18px #f7f8f2; }

:is(.app-shell, body:has(.app-shell) dialog.structured-editor) :is(input, select, textarea) { accent-color: #557e32; }
:is(.app-shell, body:has(.app-shell) dialog.structured-editor) :is(input, select, textarea):focus {
  outline-color: var(--work-focus);
  border-color: #7f9e62;
}
:is(.app-shell, body:has(.app-shell) dialog.structured-editor) :is(button, a, summary):focus-visible {
  outline: 2px solid var(--work-focus);
  outline-offset: 3px;
}
.app-shell .sidebar :is(button, a, summary):focus-visible { outline-color: #d7efb6; }
.app-shell .search-field:focus-within { outline-color: var(--work-focus); }

@media (max-width: 760px) {
  .app-shell .sidebar { box-shadow: 8px 0 32px #14251330; }
  .app-shell .breadcrumbs > h1 { letter-spacing: -.3px; }
  .app-shell .stat-card { border-top-width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell :is(.sidebar, .nav-link) { transition: none; }
}
@media print {
  body:has(.app-shell) dialog.structured-editor { background:#fff; border:0; border-radius:0; box-shadow:none; }
  body:has(.app-shell) dialog.structured-editor > .dialog-body { background:#fff; }
  .app-shell { background: #fff; --row-alternate: #fff; --row-hover: #fff; }
  .app-shell :is(.card, .stat-card, .product-card, .package-card) { box-shadow: none; }
  .app-shell :is(.orders-week-heading, .delivery-day-heading, .preparation-day-heading, .preparation-product-heading) { background: #fff; box-shadow: none; }
}

@media screen {
  .sidebar .portal-view-menu {display:block;width:100%;}
  .sidebar .portal-view-menu>summary {list-style:none;cursor:pointer;margin:0;}
  .sidebar .portal-view-menu>summary::-webkit-details-marker {display:none;}
  .sidebar .portal-view-menu>summary>span {flex:1;}
  .sidebar .portal-view-menu>summary>.icon:last-child {width:14px;height:14px;opacity:.7;}
  .sidebar .portal-view-menu>summary:focus-visible {outline:2px solid var(--work-lime,#d7e99f);outline-offset:2px;}
}