/* Website brand, shared by Beheer, Boekhouding, Groeiplan and their login.
   Appearance only: existing navigation, dialogs, data and print layouts remain owned by each app. */
@font-face {
  font-family: "VDA Switzer";
  src: url("fonts/switzer-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@media screen {
  body.vda-site-app {
    --vda-canvas: #f8f6f1;
    --vda-surface: #fefdfa;
    --vda-sunken: #f1ede6;
    --vda-ink: #2a211a;
    --vda-ink-soft: #4e463f;
    --vda-muted: #6b635c;
    --vda-line: #e2ddd4;
    --vda-line-strong: #cec6bb;
    --vda-gold: #be9d65;
    --vda-gold-ink: #7f5d31;
    --vda-cream: #f7f3eb;
    --vda-shadow: 0 1px 2px #2a211a05, 0 8px 24px -16px #2a211a20;
    --bg: var(--vda-canvas);
    --cream: var(--vda-canvas);
    --white: var(--vda-surface);
    --paper: var(--vda-surface);
    --ink: var(--vda-ink);
    --muted: var(--vda-muted);
    --gold: var(--vda-gold-ink);
    --dark: var(--vda-ink);
    --border: var(--vda-line);
    --line: var(--vda-line);
    --green: #317a45;
    background: var(--vda-canvas);
    color: var(--vda-ink);
    font-family: "VDA Switzer", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .vda-site-app :is(button, input, select, textarea),
  .vda-site-app .vda-workspace-switch a {
    font-family: "VDA Switzer", Arial, sans-serif;
  }
  .vda-site-app :is(h1, h2, h3, h4) {
    font-family: "VDA Switzer", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -.02em;
  }
  .vda-site-app ::selection { background: #be9d6559; }
  .vda-site-app :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--vda-gold-ink);
    outline-offset: 3px;
  }
  .vda-site-app :is(.page-heading, .growth-heading) h1 {
    color: var(--vda-ink);
    font-family: "VDA Switzer", Arial, sans-serif;
    font-size: clamp(32px, 3.1vw, 44px);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.12;
  }
  .vda-site-app :is(.panel-head, .section-title, .modal-head, .editor-heading) :is(h2, h3),
  .vda-site-app .panel > h2,
  .vda-site-app .phase-heading h2,
  .vda-site-app .growth-empty h2,
  .vda-site-app .confirm-dialog h2 {
    font-family: "VDA Switzer", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.3;
    color: var(--vda-ink);
  }
  .vda-site-app :is(.panel-head, .section-title) h2,
  .vda-site-app .panel > h2 { font-size: 21px; }
  .vda-site-app .phase-heading h2 { font-size: 24px; }
  .vda-site-app .eyebrow {
    color: var(--vda-gold-ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1.6;
    text-transform: uppercase;
  }
  .vda-site-app :is(.page-heading, .growth-heading) p:not(.eyebrow) {
    color: var(--vda-muted);
    font-size: 15px;
    line-height: 1.65;
    margin-top: 10px;
  }

  /* The website's light header becomes a quiet, familiar app navigation. */
  .vda-site-app :is(.sidebar, .growth-sidebar, .mobile-category-menu) {
    background: var(--vda-canvas);
    color: var(--vda-ink-soft);
    border-right: 1px solid var(--vda-line);
  }
  .vda-site-app :is(.sidebar .brand, .growth-brand) {
    color: var(--vda-ink);
    gap: 12px;
    text-decoration: none;
  }
  .vda-site-app :is(.brand, .growth-brand) .brand-mark {
    display: block;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: url("vda-mark.svg") center / contain no-repeat;
    font-size: 0 !important;
    letter-spacing: 0;
  }
  .vda-site-app .brand-mark > span { display: none; }
  .vda-site-app .brand > div,
  .vda-site-app .growth-brand > span:not(.brand-mark) {
    font-family: "VDA Switzer", Arial, sans-serif;
    color: var(--vda-ink);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .18em;
  }
  .vda-site-app .brand > div > span,
  .vda-site-app .growth-brand small {
    color: var(--vda-ink-soft);
    font-family: "VDA Switzer", Arial, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .31em;
  }
  .vda-site-app :is(.sidebar-label, .workspace-label, .side-label) {
    color: var(--vda-gold-ink);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
  }
  .vda-site-app .sidebar nav button,
  .vda-site-app .accounting-nav > a,
  .vda-site-app .nav-group summary,
  .vda-site-app .side-nav {
    color: var(--vda-ink-soft);
    border-radius: 13px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    min-height: 46px;
  }
  .vda-site-app .sidebar nav button:hover,
  .vda-site-app .grouped-nav button:hover,
  .vda-site-app .accounting-nav > a:hover,
  .vda-site-app .nav-group summary:hover,
  .vda-site-app .nav-group summary:focus-visible,
  .vda-site-app .side-nav:hover {
    background: var(--vda-sunken);
    color: var(--vda-ink);
  }
  .vda-site-app .sidebar nav button.active,
  .vda-site-app .grouped-nav button.active,
  .vda-site-app .accounting-nav > a[aria-current],
  .vda-site-app .nav-group-active > summary,
  .vda-site-app .side-nav.selected {
    background: var(--vda-ink);
    color: var(--vda-cream);
  }
  .vda-site-app .mobile-category-menu .grouped-nav button { color: var(--vda-ink-soft); }
  .vda-site-app .mobile-category-menu .grouped-nav button.active { background: var(--vda-ink); color: var(--vda-cream); }
  .vda-site-app .nav-category.has-active > .nav-category-toggle { background: var(--vda-sunken); color: var(--vda-ink); }
  .vda-site-app .nav-category-toggle .nav-chevron { color: inherit; }
  .vda-site-app :is(.nav-group, .nav-category, .nav-category-list, .profile, .workspace-profile, .side-note) {
    border-color: var(--vda-line);
  }
  .vda-site-app :is(.nav-group-links, .nav-category-items) { border-color: var(--vda-line-strong); }
  .vda-site-app :is(.nav-group-links a, .nav-category-items button) {
    color: var(--vda-ink-soft);
    font-size: 13px;
  }
  .vda-site-app .nav-group-links a:hover,
  .vda-site-app .nav-group-links a[aria-current] {
    background: var(--vda-sunken);
    color: var(--vda-ink);
  }
  .vda-site-app :is(.private, .workspace-private, .profile, .workspace-profile, .side-note p) {
    color: var(--vda-ink-soft);
  }
  .vda-site-app :is(.private span, .workspace-private small, .profile small, .workspace-profile small, .side-note > span) {
    color: var(--vda-muted);
  }
  .vda-site-app :is(.profile, .workspace-profile) > span {
    background: var(--vda-sunken);
    color: var(--vda-gold-ink);
  }
  .vda-site-app .sidebar nav b {
    background: var(--vda-sunken);
    color: var(--vda-gold-ink);
  }
  .vda-site-app .sidebar nav button.active b { background: #51453c; color: #f7f3eb; }
  .vda-site-app .install {
    background: var(--vda-surface);
    border-color: var(--vda-line-strong);
    color: var(--vda-ink-soft);
    border-radius: 12px;
  }
  .vda-site-app :is(.workspace-drawer-heading, .mobile-menu-heading) h2 {
    color: var(--vda-ink);
    font-family: "VDA Switzer", Arial, sans-serif;
    font-weight: 600;
  }
  .vda-site-app :is(.workspace-drawer-close, .mobile-menu-heading .icon-button) { color: var(--vda-ink-soft); }
  .vda-site-app :is(.workspace-drawer-close, .mobile-menu-heading .icon-button):hover { background: var(--vda-sunken); }

  .vda-site-app .topbar.vda-shell-header,
  .vda-site-app .growth-topbar.vda-shell-header {
    background: #f8f6f1f5;
    border-color: var(--vda-line);
    color: var(--vda-muted);
    font-family: "VDA Switzer", Arial, sans-serif;
    backdrop-filter: blur(12px);
  }
  .vda-site-app .vda-shell-header > .workspace-crumb { font-size: 12px; color: var(--vda-muted); }
  .vda-site-app .workspace-crumb b { color: var(--vda-ink-soft); }
  .vda-site-app .workspace-top-actions > a { color: var(--vda-gold-ink); }
  .vda-site-app .vda-workspace-switch {
    background: var(--vda-sunken);
    border-color: var(--vda-line);
    border-radius: 16px;
    padding: 5px;
  }
  .vda-site-app .vda-workspace-switch a {
    color: var(--vda-muted);
    font-size: 13px;
    font-weight: 500;
    border-radius: 11px;
  }
  .vda-site-app .vda-workspace-switch a:hover { background: #e8e1d6; color: var(--vda-ink); }
  .vda-site-app .vda-workspace-switch a[aria-current=page] {
    background: var(--vda-ink);
    color: var(--vda-cream);
    box-shadow: none;
  }

  .vda-site-app :is(.panel, .stat, .metric, .customer-card, .growth-stats article, .phase-card, .growth-empty) {
    background: var(--vda-surface);
    border-color: var(--vda-line);
    border-radius: 24px;
    box-shadow: var(--vda-shadow);
  }
  .vda-site-app :is(.stat.accent, .metric.highlight, .metric.featured, .metric.dark) {
    background: var(--vda-sunken);
    border-color: var(--vda-line);
    color: var(--vda-ink);
  }
  .vda-site-app :is(.stat, .metric, .growth-stats article) > strong {
    font-family: "VDA Switzer", Arial, sans-serif;
    color: var(--vda-ink);
    font-size: clamp(27px, 2.5vw, 34px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  .vda-site-app :is(.stat, .metric, .growth-stats article) > span { color: var(--vda-muted); font-size: 13px; }
  .vda-site-app :is(.stat, .metric, .growth-stats article) > small { color: var(--vda-muted); font-size: 12px; line-height: 1.55; }
  .vda-site-app :is(.metric.dark, .metric.featured) strong { color: var(--vda-ink); }
  .vda-site-app :is(.metric.dark, .metric.featured) > span,
  .vda-site-app :is(.metric.dark, .metric.featured) small { color: var(--vda-muted); }
  .vda-site-app :is(.panel-head p, .plan-note, .growth-stats em, .section-title > span) { color: var(--vda-muted); font-size: 12px; }
  .vda-site-app :is(.phase-summary, .phase-number, .empty-icon, .info-strip, .feature) {
    background: var(--vda-sunken);
    border-color: var(--vda-line);
  }
  .vda-site-app .phase-number { color: var(--vda-gold-ink); border-radius: 12px; }
  .vda-site-app .phase-summary span { color: var(--vda-muted); font-size: 12px; }
  .vda-site-app .phase-summary strong { font-size: 16px; }
  .vda-site-app .vda-next-action .eyebrow { color: var(--vda-gold); }
  .vda-site-app .feature,
  .vda-site-app .feature :is(h2, h3) { color: var(--vda-ink); }
  .vda-site-app .feature p { color: var(--vda-ink-soft); }
  .vda-site-app .feature :is(a, .eyebrow) { color: var(--vda-gold-ink); }
  .vda-site-app :is(.appt-row, .inventory-row, .expense-row) { background: var(--vda-surface); border-color: var(--vda-line); }
  .vda-site-app :is(.appt-row, .inventory-row, .expense-row):hover { background: var(--vda-sunken); }
  .vda-site-app :is(.phase-summary, .phase-finance) strong { font-family: "VDA Switzer", Arial, sans-serif; font-weight: 600; }

  .vda-site-app .primary:not(.danger),
  .vda-site-app .button:not(.secondary):not(.danger) {
    background: var(--vda-ink);
    color: var(--vda-cream);
    border-color: var(--vda-ink);
    border-radius: 14px;
    min-height: 46px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
  }
  .vda-site-app .primary:not(.danger):hover,
  .vda-site-app .button:not(.secondary):not(.danger):hover { background: #3e332a; }
  .vda-site-app .secondary,
  .vda-site-app .vda-accounting-workspace .secondary {
    background: var(--vda-surface);
    color: var(--vda-ink);
    border: 1px solid var(--vda-line-strong);
    border-radius: 14px;
    min-height: 44px;
    padding: 11px 17px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
  }
  .vda-site-app .secondary:hover { background: var(--vda-sunken); color: var(--vda-ink); }
  .vda-site-app.vda-accounting-workspace form > button:where(:not(.workspace-logout):not(.workspace-menu-toggle)) { border-radius: 14px; font-size: 14px; font-weight: 600; }
  .vda-site-app :is(.text-action, .text-button, .muted-action) { color: var(--vda-gold-ink); }
  .vda-site-app :is(.icon-button, .dialog-close) { border-radius: 12px; color: var(--vda-ink-soft); }
  .vda-site-app .confirm-actions .confirm-danger { background: #ba3728; color: white; border-color: #ba3728; }

  .vda-site-app :is(input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]):not([type=color])), select, textarea) {
    background: var(--vda-surface);
    border: 1px solid var(--vda-line-strong);
    border-radius: 12px;
    color: var(--vda-ink);
    font-size: 16px;
    min-height: 46px;
    padding: 11px 13px;
    line-height: 1.4;
  }
  .vda-site-app :is(input, textarea)::placeholder { color: #81786e; }
  .vda-site-app :is(input, select, textarea):where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden])):focus {
    border-color: var(--vda-ink);
    outline: 0;
    box-shadow: 0 0 0 4px #be9d653d;
  }
  .vda-site-app :is(input[type=checkbox], input[type=radio]) { accent-color: var(--vda-ink); }
  .vda-site-app :is(input, select, textarea)[aria-invalid=true] { border-color: #ba3728; box-shadow: 0 0 0 1px #ba3728; }
  .vda-site-app :is(.field, .form-grid label, .editor-form label) { color: var(--vda-ink-soft); font-size: 13px; line-height: 1.5; }
  .vda-site-app :is(.finance-fields, .editor-conflict) { border-color: var(--vda-line); border-radius: 16px; }
  .vda-site-app :is(.modal, .confirm-dialog, #growth-editor) {
    background: var(--vda-canvas);
    color: var(--vda-ink);
    border-color: var(--vda-line);
    border-radius: 28px;
  }
  .vda-site-app :is(.modal-head, .editor-heading, .editor-footer) { background: var(--vda-canvas); border-color: var(--vda-line); }
  .vda-site-app :is(.modal, #growth-editor)::backdrop { background: #2a211a66; }

  .vda-site-app :is(.table-wrap, .vda-table-scroll) { border-radius: 14px; }
  .vda-site-app table:not(.invoice-paper table) { font-size: 14px; }
  .vda-site-app th:not(.invoice-paper th) { background: var(--vda-canvas); color: var(--vda-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; border-color: var(--vda-line); }
  .vda-site-app td:not(.invoice-paper td) { border-color: var(--vda-line); }
  .vda-site-app :is(td small, .row-link small):not(.invoice-paper *) { color: var(--vda-muted); font-size: 12px; line-height: 1.5; }
  .vda-site-app .mini-note { color: var(--vda-muted); font-size: 12px; line-height: 1.6; }
  .vda-site-app .money { font-variant-numeric: tabular-nums; }
  /* Keep the invoice itself a document; this stylesheet only themes its app. */
  .vda-site-app .invoice-paper { font-family: "DM Sans", Arial, sans-serif; }
  .vda-site-app .invoice-paper :is(h1, h2, h3) { font-family: Georgia, serif; font-weight: 400; }

  .vda-site-app .login-story { background: var(--vda-ink); color: var(--vda-cream); }
  .vda-site-app .login-story .eyebrow { color: var(--vda-gold); }
  .vda-site-app .login-story h1,
  .vda-site-app .login-panel h2 { font-family: "VDA Switzer", Arial, sans-serif; font-weight: 600; letter-spacing: -.03em; }
  .vda-site-app .login-panel { background: var(--vda-canvas); }
  .vda-site-app .login-panel form { background: var(--vda-surface); border-color: var(--vda-line); border-radius: 28px; }
  .vda-site-app .login-panel button { background: var(--vda-ink); color: var(--vda-cream); border-radius: 14px; min-height: 48px; font-weight: 600; }
  .vda-site-app .login-story .brand { color: var(--vda-cream); }
  .vda-site-app .login-story .brand > div { color: var(--vda-cream); }

  @media (max-width: 760px) {
    .vda-site-app :is(.page-heading, .growth-heading) h1 { font-size: 32px; }
    .vda-site-app :is(.page-heading, .growth-heading) p:not(.eyebrow) { font-size: 14px; }
    .vda-site-app .vda-workspace-switch a { font-size: 12px; }
    .vda-site-app :is(.panel, .stat, .metric, .phase-card, .growth-stats article) { border-radius: 20px; }
    .vda-site-app :is(.stat, .metric, .growth-stats article) > strong { font-size: 27px; }
    .vda-site-app .phase-summary { gap: 12px; }
    .vda-site-app :is(.modal, .confirm-dialog, #growth-editor) { border-radius: 22px; }
    .vda-site-app .vda-shell-header .workspace-menu-toggle { background: transparent; color: var(--vda-ink); }
    .vda-site-app .mobile-category-menu .grouped-nav button { font-size: 14px; }
    .vda-site-app :is(.primary, .secondary, .button) { white-space: normal; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .vda-site-app :is(.primary, .secondary, .button, .side-nav, .vda-workspace-switch a) {
      transition: background-color 160ms cubic-bezier(.23, 1, .32, 1), color 160ms cubic-bezier(.23, 1, .32, 1), border-color 160ms cubic-bezier(.23, 1, .32, 1);
    }
  }
}