/*
 * Outnest design system — Route Picker
 * Drop-in vervanging voor static/design-system.css.
 *
 * Waarom dit één bestand kan zijn: elke template linkt deze stylesheet en
 * gebruikt in zijn eigen <style>-blok dezelfde variabelen (--ow-green,
 * --ow-cream, --ow-border, ...). Door de tokens hier te herwaarderen
 * verandert ook de pagina-specifieke opmaak mee — zonder één template aan
 * te raken. Alle bestaande classnames zijn behouden.
 *
 * Afstemming op ikwiltuinmeubelen.nl: donkergroen #2E4033, warm zand
 * #FAF9F6 / #F1EBE0, terracotta #B85C38 uitsluitend als accent, teak wordt
 * goud #B59461 voor labels en hairlines. Type: DM Sans (UI) + DM Mono
 * (cijfers, codes, locaties) — zelfde stem als de routeplanner.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=DM+Mono:wght@500&display=swap');

:root {
    /* Brand — zelfde namen, nieuwe waarden */
    --ow-green: #2E4033;
    --ow-green-dark: #1E2C22;
    --ow-green-soft: #F1EBE0;      /* zand i.p.v. mintgroen */
    --ow-teak: #B59461;            /* goud: labels, hairlines, accenten */
    --ow-teak-soft: #FDF6E9;
    --ow-terracotta: #B85C38;      /* nieuw: accent voor geld/aandacht */
    --ow-terracotta-soft: #FBF1EC;

    /* Canvas + ink */
    --ow-cream: #FAF9F6;
    --ow-cream-dark: #F1EBE0;
    --ow-ink: #1a1a1a;
    --ow-ink-soft: #5a5a5a;
    --ow-muted: #8d8880;
    --ow-border: #E5E0D5;
    --ow-border-soft: #EFEAE0;

    /* Semantisch — alleen status, nooit als merkkleur */
    --ow-red: #B03A20;
    --ow-red-soft: #FBEAE4;
    --ow-amber: #8a6f42;
    --ow-amber-soft: #FDF6E9;
    --ow-amber-border: #C9A961;
    --ow-blue: #2C5490;
    --ow-blue-soft: #E9EFF7;

    /* Elevatie — warm getint */
    --ow-shadow-sm: 0 1px 2px rgba(30, 44, 34, .05);
    --ow-shadow-md: 0 1px 2px rgba(30, 44, 34, .05), 0 6px 16px rgba(30, 44, 34, .05);
    --ow-shadow-header: 0 1px 0 rgba(0, 0, 0, .06), 0 2px 8px rgba(30, 44, 34, .16);

    /* Ritme (8px) */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

    /* Radii — 6 op bediening, 10 op kaarten, 14 op panelen */
    --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

    --tap: 44px;
}

/* ── Reset + base ─────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background: var(--ow-cream);
    color: var(--ow-ink);
    margin: 0;
    line-height: 1.55;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
}
a { color: var(--ow-green); }
a:hover { color: var(--ow-terracotta); }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--ow-teak); outline-offset: 2px; }

/* ── Type-schaal ──────────────────────────────────────────────────── */
h1 {
    font-size: 25px; font-weight: 700; letter-spacing: -.02em;
    margin: 0 0 var(--sp-2); color: var(--ow-ink); text-wrap: balance;
}
@media (min-width: 760px) { h1 { font-size: 26px; } }
h2 {
    font-size: 10.5px; font-weight: 700; margin: var(--sp-6) 0 var(--sp-3);
    color: var(--ow-teak); text-transform: uppercase; letter-spacing: .1em;
    font-family: 'DM Mono', ui-monospace, monospace;
}
.subtitle { color: var(--ow-ink-soft); margin: 0 0 var(--sp-5); font-size: 13.5px; line-height: 1.6; max-width: 78ch; }
.mono, .col-num, code {
    font-family: 'DM Mono', ui-monospace, SFMono-Regular, monospace;
    font-variant-numeric: tabular-nums;
}

/* ── App shell ────────────────────────────────────────────────────── */
.header {
    background: var(--ow-green);
    color: var(--ow-cream);
    padding: var(--sp-3) var(--sp-5);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    position: sticky; top: 0; z-index: 30;
    box-shadow: var(--ow-shadow-header);
}
.header-brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
/* logo.png is nu de witte Oude Wesselink-variant — direct op de groene balk,
   geen crème badge meer nodig. */
.header-logo-badge {
    background: transparent; border-radius: var(--r-pill); padding: 0;
    display: flex; align-items: center; line-height: 0; flex-shrink: 0;
}
.header-logo { height: 22px; width: auto; display: block; }
.header-dot {
    width: 9px; height: 9px; border-radius: 50%; background: var(--ow-teak); flex-shrink: 0;
    display: inline-block; vertical-align: middle; box-shadow: 0 0 0 3px rgba(181, 148, 97, .25);
}
.header-dot.offline { background: var(--ow-terracotta); box-shadow: 0 0 0 3px rgba(184, 92, 56, .25); }
.header-titles { min-width: 0; }
.header-title { font-weight: 700; font-size: 14px; letter-spacing: .01em; white-space: nowrap; }
.header-sub { font-size: 12px; opacity: .78; white-space: nowrap; }
.header-sub .header-dot { margin-right: 5px; }
.header-right { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.header a.header-link {
    color: var(--ow-cream); text-decoration: none; font-size: 13px; font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .3); padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm); min-height: 36px; display: inline-flex; align-items: center;
}
.header a.header-link:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Navigatie: horizontaal scrollend i.p.v. afbrekend over twee regels */
.cross-nav {
    background: #fff; border-bottom: 1px solid var(--ow-border);
    padding: var(--sp-2) var(--sp-4);
    display: flex; gap: var(--sp-2);
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    position: sticky; top: 49px; z-index: 20;
}
.cross-nav::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .cross-nav { flex-wrap: wrap; overflow: visible; } }
.cross-nav a {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ow-ink-soft); text-decoration: none; white-space: nowrap;
    padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill);
    border: 1px solid var(--ow-border);
    min-height: 36px; display: inline-flex; align-items: center;
    transition: background .14s, border-color .14s, color .14s;
}
.cross-nav a:hover { background: var(--ow-cream-dark); border-color: var(--ow-teak); color: var(--ow-ink); }
.cross-nav a.active { background: var(--ow-green); color: #fff; border-color: var(--ow-green); }

/* Navigatie gegroepeerd per rol (werkvloer/inkoop/verkoop) — puur
   structureel, geen nieuwe kleuren/lettertypen: dezelfde pill-links,
   alleen geclusterd met een dun scheidingslijntje tussen groepen. */
.nav-group { display: inline-flex; gap: var(--sp-2); align-items: center; }
.nav-group + .nav-group { padding-left: var(--sp-2); border-left: 1px solid var(--ow-border); }
/* Systeem is alleen voor Jeroen (technische housekeeping) — bewust
   ondergeschikt en naar rechts geduwd, niet als vierde gelijkwaardige groep. */
.nav-systeem { margin-left: auto; opacity: .6; font-size: 10px; }
.nav-systeem:hover, .nav-systeem.active { opacity: 1; }

.container { max-width: 1180px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) 72px; }
@media (min-width: 760px) { .container { padding: var(--sp-6) var(--sp-6) 72px; } }
.container.narrow { max-width: 680px; }

/* ── Knoppen ──────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: 11px var(--sp-4); border-radius: var(--r-sm);
    font-size: 14px; font-weight: 700; font-family: inherit;
    cursor: pointer; border: none; text-decoration: none;
    min-height: var(--tap); transition: background .14s, border-color .14s, transform .05s;
    /* Zonder dit interpreteert iOS Safari twee snelle taps (bv. twee keer
       op + tikken om een aantal op te hogen) als "dubbeltik om in te
       zoomen" — met name vervelend op smalle magazijn-schermen (Inslag/
       Picken) waar precies dat tik-patroon de normale bediening is. */
    touch-action: manipulation;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--ow-green); color: #fff; }
.btn-primary:hover { background: var(--ow-green-dark); color: #fff; }
.btn-secondary { background: #fff; color: var(--ow-green); border: 1px solid var(--ow-border); }
.btn-secondary:hover { background: var(--ow-cream-dark); border-color: var(--ow-teak); }
.btn-danger { background: var(--ow-red); color: #fff; }
.btn-danger:hover { filter: brightness(1.06); color: #fff; }
.btn-small { padding: var(--sp-2) var(--sp-3); font-size: 12.5px; min-height: 36px; }
.btn-full { width: 100%; }
/* Magazijn (picken/inslag): grotere raakvlakken op smalle schermen */
@media (max-width: 759px) {
    .btn { min-height: 52px; font-size: 15px; }
    .btn-small { min-height: 42px; }
}

/* ── Tags / statuspillen ──────────────────────────────────────────── */
.tag {
    display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 10.5px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.tag-open, .tag-pending, .tag-stuck { background: var(--ow-amber-soft); color: var(--ow-amber); border: 1px solid var(--ow-amber-border); }
.tag-partial { background: var(--ow-blue-soft); color: var(--ow-blue); border: 1px solid var(--ow-blue); }
.tag-today, .tag-approved, .tag-ok { background: var(--ow-green-soft); color: var(--ow-green); border: 1px solid var(--ow-green); }
.tag-overdue, .tag-rejected, .tag-negative { background: var(--ow-red-soft); color: var(--ow-red); border: 1px solid var(--ow-red); }
.tag-booked { background: var(--ow-green); color: #fff; }
.tag-outlet { background: var(--ow-terracotta); color: #fff; }

/* ── Kaarten ──────────────────────────────────────────────────────── */
.card, .section, .line-card, .po-card, .req-card, .side-panel {
    background: #fff; border: 1px solid var(--ow-border); border-radius: var(--r-md);
    box-shadow: var(--ow-shadow-sm);
}
.section { padding: var(--sp-5); margin-bottom: var(--sp-4); }
@media (min-width: 760px) { .section { padding: var(--sp-5) var(--sp-6); } }
.section-title {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 10.5px; font-weight: 700; color: var(--ow-teak);
    text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--sp-2);
}
.section-help { font-size: 12.5px; color: var(--ow-ink-soft); margin-bottom: var(--sp-4); line-height: 1.55; }

/* ── Statussen ────────────────────────────────────────────────────── */
.empty-state {
    text-align: center; color: var(--ow-muted); padding: var(--sp-6) var(--sp-3);
    font-size: 13px; font-style: normal;
}
.error-box, .success-box, .info-box, .warning-box {
    border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4);
    margin: var(--sp-2) 0; font-size: 13px; line-height: 1.55;
}
.error-box { background: var(--ow-red-soft); border: 1px solid var(--ow-red); border-left: 3px solid var(--ow-red); color: var(--ow-red); }
.success-box { background: var(--ow-green-soft); border: 1px solid var(--ow-green); border-left: 3px solid var(--ow-green); color: var(--ow-green); }
.info-box { background: var(--ow-blue-soft); border: 1px solid var(--ow-blue); border-left: 3px solid var(--ow-blue); color: #234a80; }
.warning-box { background: var(--ow-amber-soft); border: 1px solid var(--ow-amber-border); border-left: 3px solid var(--ow-amber); color: var(--ow-amber); }

/* ── Tabellen — kantoor vergelijkt regels, dus blijven tabellen ──── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table {
    width: 100%; border-collapse: collapse; margin-top: var(--sp-2);
    font-size: 13px; background: #fff;
}
th {
    text-align: left; background: var(--ow-cream-dark); color: var(--ow-ink-soft);
    font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
    padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--ow-border);
    position: sticky; top: 0; z-index: 1;
}
td { padding: 9px var(--sp-3); border-bottom: 1px solid var(--ow-border-soft); vertical-align: top; }
tbody tr:hover td { background: #FCFBF8; }
tr:last-child td { border-bottom: none; }
.col-num { text-align: right; }
.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-th:hover { color: var(--ow-ink); }
.sortable-th .sort-arrow { color: var(--ow-green-dark); margin-left: 3px; }
/* Ordernummers, SKU's, locaties en tijden in mono zonder extra class */
td code, td .sku, td .mono { font-family: 'DM Mono', ui-monospace, monospace; }

/* ── Formulieren ──────────────────────────────────────────────────── */
label {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ow-muted); font-weight: 700; display: block; margin-bottom: 6px;
}
input[type="text"], input[type="number"], input[type="date"], input[type="time"],
input[type="password"], input[type="file"], select, textarea {
    padding: 11px var(--sp-3); border: 1px solid var(--ow-border); border-radius: var(--r-sm);
    font-family: inherit; font-size: 16px;   /* 16px: voorkomt inzoomen op iOS */
    background: #fff; color: var(--ow-ink); min-height: var(--tap);
    transition: border-color .14s;
}
@media (min-width: 760px) {
    input[type="text"], input[type="number"], input[type="date"], input[type="time"],
    input[type="password"], select, textarea { font-size: 14px; min-height: 40px; }
}
input:focus, select:focus, textarea:focus { border-color: var(--ow-teak); outline: none; }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--ow-green); }
textarea { resize: vertical; }
.toolbar { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); align-items: center; }
@media (max-width: 619px) { .toolbar { flex-direction: column; align-items: stretch; } }

/* ── Utility ──────────────────────────────────────────────────────── */
.stack-8 > * + * { margin-top: var(--sp-2); }
.stack-12 > * + * { margin-top: var(--sp-3); }

/* ── Print (picklijst) — paginaspecifieke @media print in de template
      wint hierover, dit is alleen een schone basis ────────────────── */
@media print {
    body { background: #fff; font-size: 11pt; }
    .header, .cross-nav, .toolbar, .btn { display: none !important; }
    .container { max-width: none; padding: 0; }
    .card, .section, .line-card, .po-card { box-shadow: none; border-color: #999; break-inside: avoid; }
    th { background: #fff; border-bottom: 1.5px solid #000; color: #000; }
    td { border-bottom: 1px solid #ccc; }
}