/* DKS identity, verified against dks.nl on 22 October 2026.
   Active website CTA: #D12B25. Logo artwork: unchanged official SVG.
   Poppins is bundled locally so the demo also works without font services. */
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url('./assets/poppins-regular.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url('./assets/poppins-medium.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url('./assets/poppins-semibold.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url('./assets/poppins-bold.woff2') format('woff2'); }

:root {
  --brand-red: #d12b25;
  --brand-red-dark: #ad221e;
  --brand-red-soft: #fff2f1;
  --brand-header-gradient: linear-gradient(90deg, #cf1815 0%, #a61314 25%, #800e0e 50%, #580a0a 75%, #2f0506 100%);
  --canvas: #f4f4f3;
  --ink: #1b1b1b;
  --muted: #686868;
  --quiet: #888;
  --line: #e6e6e4;
  --line-strong: #d9d9d8;
  --orange: var(--brand-red);
  --orange-dark: var(--brand-red-dark);
  --orange-tint: var(--brand-red-soft);
  --radius: 6px;
  font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body { color: var(--ink); }
::selection { color: #761714; background: #f8d7d5; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible { outline-color: #d12b2570; }
h1, h2, h3, .panel-title, .assistant-title { font-weight: 700; }
h1 { font-size: 27px; letter-spacing: -.9px; line-height: 1.35; }
h1 > span { color: var(--brand-red); }
.eyebrow { color: var(--brand-red); font-weight: 600; }
.subtitle { font-size: 12px; }

.topbar { height: 80px; background: var(--brand-header-gradient); border-bottom: 0; gap: 28px; }
.brand { gap: 21px; }
.brand-logo { display: block; width: 164px; height: 40px; object-fit: contain; }
.brand-copy { padding-left: 21px; border-left: 1px solid #ffffff2b; font-size: 12px; }
.brand-copy small { color: #fff; font-size: 9px; letter-spacing: 0; }
.topbar-center { color: #fff; margin-left: 0; }
.topbar-center > .source-dot { background: #fff; }
.topbar .icon-btn { border-color: #ffffff80; color: #fff; border-radius: 4px; }
.topbar .icon-btn:hover { color: #fff; background: var(--brand-red-dark); }
.demo-pill { background: #ffffff0d; color: #fff; border-color: #ffffff80; border-radius: 4px; font-size: 9px; }
.demo-pill::before { background: #fff; }
.demo-pill:hover { color: #fff; border-color: #fff; background: var(--brand-red-dark); }
.avatar { background: var(--ink); border-color: var(--ink); }
.contextbar { border-bottom-color: #dfdfdd; }
.breadcrumb, .date-select { color: #727272; }
.breadcrumb strong, .breadcrumb .current { color: #282828; }
.breadcrumb svg, .date-select svg { color: #888; }

.btn { border-radius: 4px; font-weight: 600; }
.btn-primary { background: var(--brand-red); border-color: var(--brand-red); box-shadow: none; }
.btn-primary:hover { background: var(--brand-red-dark); border-color: var(--brand-red-dark); box-shadow: none; }
.btn-secondary { color: #333; border-color: #d9d9d8; box-shadow: none; }
.btn-secondary:hover { color: var(--brand-red); border-color: #c7c7c5; background: #fafafa; }
.btn-ghost { color: #686868; }
.btn-ghost:hover { color: #1b1b1b; background: #efefee; }
.icon-btn { color: #666; border-color: #ddd; border-radius: 4px; }
.icon-btn:hover { background: #f2f2f1; }

.overview-strip { padding: 0; overflow: hidden; box-shadow: none; border-color: #e2e2e0; }
.overview-item { padding: 21px 23px; min-height: 92px; }
.overview-icon { border-radius: 5px; background: #f0f0ef; color: #686868; }
.overview-item:nth-child(2) .overview-icon { color: var(--brand-red); background: var(--brand-red-soft); }
.overview-action:hover { background: #fcf9f8; }
.overview-action:hover .overview-icon { box-shadow: 0 0 0 4px #fff0ee; }
.overview-action:hover .overview-label { color: var(--brand-red); }
.overview-number { font-weight: 700; }
.overview-promise { background: var(--brand-red); }
.overview-quote { color: #fff; font-size: 14px; }
.overview-quote strong { color: #fff; font-weight: 600; }
.overview-decoration { color: #fff; }
.overview-decoration svg { stroke-width: 1.35; }

.operations-panel, .assistant-panel { border-color: #e1e1df; box-shadow: none; }
.panel-head { padding-top: 22px; }
.panel-title { font-size: 14px; }
.small-count { color: #666; background: #f0f0ef; }
.context-label { color: #888; }
.search-wrap input { background: #fbfbfb; border-color: #dfdfdd; color: #333; border-radius: 4px; }
.search-wrap input:focus { border-color: var(--brand-red); }
.search-wrap input::placeholder { color: #858585; }
.search-wrap svg { color: #8a8a8a; }
.chip { border-radius: 4px; color: #727272; font-size: 10px; }
.chip:hover { background: #f1f1f0; color: #333; }
.chip.active { color: #fff; background: var(--brand-red); border-color: var(--brand-red); }
.shipment-table thead { background: #f7f7f6; }
.shipment-table th { color: #686868; font-weight: 500; border-color: #e5e5e3; }
.shipment-table td { border-color: #ededeb; }
.shipment-table tbody tr:hover { background: #faf9f8; }
.shipment-table tbody tr.is-selected { background: #fff4f2; }
.shipment-table .order-id { color: #242424; font-weight: 600; }
.shipment-table .order-id:hover { color: var(--brand-red); }
.shipment-table .client-name { color: #242424; font-weight: 600; }
.shipment-table .time-window { font-variant-numeric: tabular-nums; color: #555; }
.attention-link { color: #72544f; }
.attention-link .attention-dot, .attention-dot { background: #d85a52; box-shadow: none; }
.attention-link:hover, .is-selected .row-arrow, .row-arrow:hover { color: var(--brand-red); }
.row-arrow { color: #aaa; }
.table-footer { color: #777; }
.operations-bottom { background: #f7f7f6; }
.mini-card { border-color: #e2e2e0; border-radius: 5px; }
.mini-card:hover, .mini-card.selected { border-color: #e4a7a2; background: #fff7f6; }
.mini-icon { color: #777; }
.mini-badge { color: #b32620; background: #ffedeb; }
.mini-badge.green { color: var(--green); background: var(--green-tint); }
.workflow-note { background: #fff; color: #777; }
.workflow-note > svg { color: #686868; }
.workflow-note strong { color: #454545; }
.workflow-note .btn { color: #555; }

.assistant-panel { border-top: 3px solid var(--brand-red); }
.assistant-header { background: var(--brand-red); border-bottom-color: var(--brand-red-dark); color: #fff; }
.assistant-header .assistant-title, .assistant-header .assistant-subtitle { color: #fff; }
.assistant-mark { color: #fff; background: #ffffff12; border-color: #ffffff80; border-radius: 5px; }
.assistant-count { color: var(--brand-red); background: #fff; border-radius: 4px; }
.assistant-count:hover { background: #ffe4e1; }
.assistant-context { color: #777; }
.assistant-context strong { color: #444; }
.case-card { border-radius: 5px; }
.case-card:hover { background: #fff8f7; border-color: #e9b5b0; }
.case-card.active { background: #fff5f3; border-color: #e8aaa4; box-shadow: none; }
.case-card.active .case-icon { background: #ffe9e6; color: #b72a24; }
.case-icon { background: #f2f2f1; color: #777; border-radius: 5px; }
.detail-eyebrow { color: #b72a24; font-weight: 600; letter-spacing: 1px; }
.case-detail h2 { font-size: 19px; font-weight: 700; letter-spacing: -.65px; }
.back-link { color: #777; }
.back-link:hover { color: var(--brand-red); }
.source-tag { color: #686868; background: #f5f5f4; border-color: #e7e7e5; border-radius: 3px; }
.order-context { background: #f7f7f6; border-color: #e9e9e7; border-radius: 4px; }
.order-context > svg, .order-context small { color: #777; }
.order-context > span { color: #4b4b4b; }
.evidence-card { background: #fbfbfa; border-color: #e3e3e1; border-radius: 5px; }
.evidence-head { color: #505050; }
.evidence-head svg { color: #888; }
.data-row { border-top-color: #e9e9e7; }
.data-value { color: #363636; }
.sample-tag { color: #838383; border-color: #e2e2e0; }
.comparison-column { border-radius: 4px; }
.comparison-column.before { background: #f6f6f5; color: #686868; border-color: #e1e1df; }
.comparison-arrow { color: #969696; }
.message-card { border-color: #dfdfdd; border-radius: 5px; }
.message-label { color: #656565; background: #f6f6f5; border-color: #e9e9e7; }
.message-label > span { color: #858585; }
.message-to strong { color: #424242; }
.message-card > textarea.message-body { color: #414141; font-size: 11px; line-height: 1.9; }
.incoming-mail { background: #f9f9f8; border-color: #e1e1df; border-radius: 5px; }
.incoming-mail p { color: #505050; }
.inline-note { background: #f5f5f4; border-color: #e5e5e3; color: #666; border-radius: 4px; }
.inline-note > svg { color: #777; }
.check-row { color: #414141; }
.check-row small { color: #777; }
.choice-group legend { color: #555; }
.choice-option { border-radius: 4px; }
.choice-option:has(input:checked) { background: #fff5f3; border-color: #e4aaa3; }
.choice-option input { accent-color: var(--brand-red); }
.choice-option strong { color: #333; }
.choice-option small { color: #6a6a6a; }
.attachment { border-color: #dededc; background: #fafaf9; border-radius: 4px; }
.attachment > svg { color: #b92b25; }
.attachment strong { color: #454545; }
.attachment small { color: #777; }
.activity-list h3 { color: #555; }
.activity-item { border-color: #e8e8e6; color: #727272; }
.handover-row { border-color: #e6e6e4; border-radius: 4px; }
.handover-row:hover { background: #fff6f4; border-color: #e1b6b1; }
.handover-row strong { color: #343434; }
.handover-row small { color: #777; }
.detail-description, .subtitle, .panel-subtitle, .case-summary,
.data-label, .message-to, .cell-secondary, .mini-subtitle,
.assistant-subtitle, .result-description, .overview-label { color: #686868; }

.tour-banner { border-color: #e2c2be; border-radius: 5px; box-shadow: none; background: #fffbfa; }
.tour-step { color: var(--brand-red); font-weight: 700; }
.tour-step small { color: #9a7772; }
.tour-copy strong { color: #1b1b1b; }
.tour-copy p { color: #686868; }
.modal-backdrop { background: #1b1b1b88; }
.modal { border-radius: 6px; border-color: #ddd; box-shadow: 0 16px 70px #0003; }
.modal-header, .modal-footer { border-color: #e3e3e1; }
.modal-close, .modal-footer { background: #f7f7f6; color: #666; }
.modal-close:hover { background: #ececeb; }
.modal-body p, .modal-body .modal-lead { color: #555; }
.modal-body .fine-print { color: #727272; }
.step strong { color: #333; }
.step-num { background: #fff0ee; color: #ba2923; border-color: #f2d3cf; }
.pod-document { border-color: #e0e0de; }
.document-letterhead { border-bottom: 2px solid var(--brand-red); }
.document-logo { display: block; width: 170px; height: auto; }
.document-letterhead > span { color: #686868; }
.document-signature { color: #777; border-color: #d9d9d8; background: #fafaf9; }
.toast { background: #1b1b1b; color: #fff; border-color: #333; border-radius: 5px; }
.bottom-note, .bottom-note button { color: #777; }
.bottom-note button:hover { color: var(--brand-red); }
.made-by strong { color: #555; }

/* Rectangular controls with a subtle corner, consistent across every action. */
.btn, .icon-btn, .topbar .icon-btn, .modal-close, .demo-pill, .chip,
.mini-card, .assistant-count, .case-card, .handover-row, button.row-arrow {
  border-radius: 2px;
}

@media (max-width: 1100px) {
  .topbar-center { display: none; }
  .brand-logo { width: 151px; height: 37px; }
  .page-heading { align-items: flex-start; }
  .page-heading h1 { font-size: 25px; }
  .heading-actions { flex-wrap: wrap; justify-content: flex-end; }
  .overview-item { padding: 18px 14px; }
}
@media (max-width: 900px) {
  .page-heading { flex-wrap: wrap; }
  .heading-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .topbar { height: 68px; padding: 0 16px; }
  .brand-logo { width: 144px; height: 36px; }
  .brand-copy { display: none; }
  .demo-pill { font-size: 8px; }
  .overview-item { padding: 17px 14px; }
  .overview-promise { border-radius: 0 0 5px 0; }
  .page-heading h1 { font-size: 24px; }
  .contextbar { flex-wrap: wrap; height: auto; min-height: 44px; padding-top: 7px; padding-bottom: 7px; }
  .date-select { font-size: 8px; padding: 0; }
  .breadcrumb { font-size: 8px; }
  .case-detail h2 { font-size: 20px; }
  .case-detail .message-card > textarea.message-body { font-size: 11px; }
  .document-logo { width: 135px; }
}