/* Natuurzuiver: existing logo, Nunito Sans and the NZ-B2B style-system palette.
   Kept separate from layout so the established CRM flows and text sizes remain. */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/nunito-sans-latin.woff2") format("woff2");
}

:root {
  --ink: #141c23;
  --muted: #62696c;
  --line: #ddd8ce;
  --paper: #f6f4ef;
  --gold: #cdb478;
  --gold-deep: #7c6137;
  --gold-pale: #f1e9d7;
  --green: #2f6b4f;
  --red: #a33a32;
  font-family: "Nunito Sans", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

body { color: var(--ink); background: var(--paper); }
::selection { color: var(--ink); background: #e7d6ac; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline-color: var(--gold-deep);
}
.demo-banner { background: #ece6da; color: #53534c; }
.sidebar { background: #fff; border-right-color: var(--line); }
.brand { display: grid; justify-items: center; gap: 14px; padding: 0 10px 28px; }
.brand-logo { display: block; width: 180px; height: auto; }
.brand-caption { color: var(--muted); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }
.sidebar nav button { font-weight: 650; }
.sidebar nav button.active {
  color: var(--ink);
  background: var(--gold-pale);
}
.sidebar nav button:hover, .saved-view:hover { background: #f6f2e9; }
.nav-count, .saved-view span { background: #e5d8b8; color: #56472e; }
.nav-section, .team-label { color: #746345; }
.saved-view { color: #4c555c; }
.login-line, .login-line small, .research-link { color: var(--muted); }
.avatar { background: #e8ecee; color: #445662; }
.avatar.sam { background: #efe4ce; color: #705732; }
.avatar.none { background: #eeece6; color: #66675f; }
.topbar { background: #fff; border-top: 3px solid var(--gold); }
.crumb, .shared-label { color: var(--muted); }
.crumb b { color: var(--ink); }
.crumb-brand { color: var(--ink) !important; font-weight: 700; }
.crumb-divider { color: #b0a68f !important; }
.mobile-brand-logo { display: none; }
h1, h2 { font-weight: 750; color: var(--ink); letter-spacing: -.5px; }
h3 { color: var(--ink); font-weight: 700; }
.page-heading p { color: var(--muted); }
.button { color: var(--ink); border-color: var(--line); font-weight: 750; border-radius: 6px; }
.button:hover { background: #f6f2e9; }
.button.primary { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.button.primary:hover { background: #bea064; border-color: #bea064; }
.button.missing { background: #faf5e9; color: var(--gold-deep); border-color: #c9b486; }
.view-tabs button { color: #606764; }
.view-tabs button.active { color: var(--ink); border-bottom-color: var(--gold); font-weight: 800; }
.view-tabs button span { background: #eae7de; color: #585b55; }
.view-tabs button.active span { background: #e8dbb9; color: #58472b; }
.view-tabs button.attention span { background: #f8e8e3; color: var(--red); }
.search, .filters select { border-color: var(--line); color: var(--muted); }
.search:focus-within { outline-color: var(--gold-deep); }
.search input::placeholder { color: #747b7c; }
.results-caption, .sort { color: var(--muted); }
.results-caption b, .sort select { color: var(--ink); }
.warning-text { color: var(--gold-deep); }
.table-wrap { background: white; border-color: var(--line); box-shadow: 0 3px 12px #141c2303; }
th { background: #eeeae1; color: #555b58; font-weight: 750; }
tbody tr:hover { background: #faf8f2; }
.strong, .store-name b { font-weight: 750; }
.text-button:hover { color: var(--gold-deep); }
.task-kind, .task-company small, td small, .next-action small { color: var(--muted); }
.task-check { border-color: #bcbbae; }
.task-check:hover { background: #f4ecd8; border-color: var(--gold-deep); color: var(--gold-deep); }
.task-check.done { background: var(--green); border-color: var(--green); }
.date-chip { color: var(--muted); }
.date-chip.late { color: var(--red); }
.date-chip.today { color: var(--green); }
.list-footer, .workspace-footer { color: #666c68; }
.workspace-footer { border-color: var(--line); }
.store-monogram, .store-monogram.large { background: #f1ebdd; border-color: #e2d8c3; color: #74603c; }
.badge { background: #efede7; color: #62655d; font-weight: 650; }
.badge.phase-1 { background: #e9edef; color: #49606d; }
.badge.phase-2 { background: #f4e8cb; color: #77591e; }
.badge.phase-3 { background: #ede6da; color: #756049; }
.badge.phase-4 { background: #e6efe8; color: #2f6b4f; }
.badge.phase-5 { background: #eeede7; color: #61665d; }
.badge.phase-6 { background: #f6e8e3; color: #94483a; }
.empty { border-color: var(--line); color: var(--muted); background: #fdfcf9; }
.empty h3 { color: var(--ink); }
dialog { border-color: var(--line); box-shadow: 0 16px 55px #141c2320; }
dialog::backdrop { background: #141c2345; }
dialog.record-panel { border-left-color: var(--line); }
dialog.record-panel::backdrop { background: #141c231c; }
.record-top { background: var(--paper); color: #736342; border-top: 3px solid var(--gold); }
.record-heading p, .record-properties label { color: var(--muted); }
.record-properties select { background: #fcfbf8; color: var(--ink); border-color: var(--line); }
.next-block { background: #faf7ef; }
.next-block h3 span { background: #eaddbe; color: #655133; }
.mini-task b { font-weight: 700; }
.mini-task small { color: var(--muted); }
.record-tabs button { color: var(--muted); }
.record-tabs button.active { color: var(--ink); border-color: var(--gold); font-weight: 800; }
.event-icon { background: #f0eadc; color: #7c6844; }
.event-header strong { font-weight: 750; }
time, .event-main>small, .event-main>p { color: var(--muted); }
.event-note { background: #f6f3eb; color: #686451; }
.event-next { color: var(--gold-deep); }
.contact-card p, .contact-card small, .agreement small, .record-body dt { color: var(--muted); }
.agreement strong { color: var(--gold-deep); }
.form-heading { border-top: 3px solid var(--gold); }
.form-heading p, .field small, .help-line { color: var(--muted); }
.field>span { color: #4c555a; font-weight: 750; }
.field input, .field select, .field textarea { color: var(--ink); border-color: var(--line); }
.more-details summary, .toggle-label { color: #5b604f; }
.more-details summary span { color: var(--muted); }
.toggle-label input { accent-color: var(--gold-deep); }
.followup-fields { background: #faf7ef; border-color: #e7dcc4; }
.research-copy a { color: var(--gold-deep); }
#toast { background: var(--ink); color: #fff; }
#toast button { color: #ecce8c; }

@media(max-width:1150px) { .brand-logo { width: 165px; } }
@media(max-width:800px) {
  .topbar { height: 72px; }
  .mobile-brand-logo { display: block; width: 90px; height: auto; }
  .crumb-brand { display: none; }
  .crumb { gap: 14px; }
  .mobile-nav { background: #fff; border-color: var(--line); }
  .mobile-nav button { color: #656b66; }
  .mobile-nav button.active { color: var(--gold-deep); font-weight: 800; }
  .mobile-nav .quick-contact { background: var(--gold); color: var(--ink); font-weight: 750; }
  .mobile-task-meta { color: var(--muted); }
  .mobile-task-meta .text-button { text-decoration-color: #bcaa80; }
}