/* Aanvullingen op app.css (de stijl van de oorspronkelijke configurator) voor de offerte-applicatie. */
a{color:inherit}
.sub{font-size:12.5px;color:var(--ink3)}
.pre{white-space:pre-line}
.r{text-align:right}

/* navigatie */
.brand .brandmark{display:block;width:max-content}
.nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.nav form{margin:0}
.tg{text-decoration:none;display:inline-block}
.tg[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--card)}

/* offertebalk */
.qbar{background:var(--card);border-bottom:1px solid var(--line2)}
.qbar-in{max-width:1180px;margin:0 auto;padding:12px 18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.qid{flex:1 1 auto;min-width:180px}
.qid h1{font-size:19px}
.qbar .btn{flex:none;padding:7px 16px}
.btn:disabled{opacity:.6;cursor:default}
.btn{text-decoration:none;text-align:center}
.banner{background:var(--brass-soft);border-bottom:1px solid var(--line)}
.banner-in{max-width:1180px;margin:0 auto;padding:9px 18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;font-size:13.5px}
.msg{font-size:13px;padding:4px 10px;border-radius:6px}
.msg.ok{color:#1b6b3a;background:#e5f4ea}
.msg.err{color:var(--accent);background:var(--accent-soft)}
.actions{flex-wrap:wrap}


/* status */
select.status{border:1px solid var(--line);border-radius:999px;padding:5px 10px;font-size:13px;background:var(--card);text-transform:capitalize}
select.status.s-verzonden{border-color:#2f6fb7;color:#2f6fb7}
select.status.s-aanvaard{border-color:#1b8a4b;color:#1b8a4b}
select.status.s-verloren{border-color:var(--ink3);color:var(--ink3)}

/* pagina's en tabellen */
.page{padding-top:22px}
.page-hd{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
.page-hd h1{font-size:22px}
.page-hd .btn{flex:none}
.crumbs{font-size:13px;color:var(--ink3);margin-bottom:4px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.filters input[type=search]{flex:1 1 260px;min-width:0}
.filters .btn{flex:none}
:where(input[type=search],input[type=text],input[type=password],input[type=number],input:not([type]),textarea,select){
  padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--card)}
textarea{font:inherit;color:inherit;width:100%;resize:vertical}
.tbl-scroll{overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:10px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{position:sticky;top:0;z-index:2;background:var(--card);text-align:left;font-size:12.5px;color:var(--ink3);font-weight:600;
  padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl th.r,.tbl td.r{text-align:right;white-space:nowrap}
.tbl form{margin:0;display:inline}
.acts{white-space:nowrap;text-align:right}
.lnk{background:none;border:none;padding:0 0 0 12px;color:var(--ink2);text-decoration:underline;cursor:pointer;font-size:13px}
.lnk.danger{color:var(--accent)}
.empty-state{padding:40px 16px;text-align:center;color:var(--ink3);background:var(--card);border:1px dashed var(--line);border-radius:10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:18px}
.card h2{font-size:16px;margin-bottom:12px}
.card .lbl{margin-top:10px}
.card input,.card textarea{width:100%}
.card .btn{flex:none;margin-top:14px}
.hint{font-size:12.5px;color:var(--ink3);margin:6px 0 0}
.row-form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.row-form > div{flex:1 1 180px}
.pill{display:inline-block;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:1px 9px;color:var(--ink2)}
.pill.actief{border-color:#1b8a4b;color:#1b8a4b}

/* beheertabellen met inline bewerken */
.edit td{padding:4px 5px}
.edit input,.edit select{width:100%;min-width:70px;padding:6px 7px;font-size:13.5px;background:transparent;border-color:transparent}
.edit input:hover,.edit input:focus,.edit select:hover,.edit select:focus{border-color:var(--line);background:var(--paper)}
.edit input.num{text-align:right;min-width:86px}
.edit input.wide{min-width:220px}
.edit tr.group td{background:var(--paper);font-weight:600;font-size:13px;padding:8px 12px}
.saved{font-size:12.5px;color:var(--ink3)}

/* matrix */
.matrix{max-height:calc(100vh - 230px)}
.matrix th.col{writing-mode:vertical-rl;transform:rotate(180deg);text-align:left;padding:8px 4px;font-weight:500;color:var(--ink2);max-height:190px}
.matrix th.first,.matrix td.first{position:sticky;left:0;z-index:1;background:var(--card);min-width:240px;max-width:300px;border-right:1px solid var(--line)}
.matrix th.first{z-index:3}
.matrix td{padding:2px}
.matrix td.first{padding:6px 10px;font-size:13px}
.matrix select{width:58px;min-width:0;padding:4px 2px;font-size:12px;border-color:transparent;background:transparent;text-align:center}
.matrix select.v-optie{background:var(--brass-soft)}
.matrix select.v-standaard{background:#e5f4ea;color:#1b6b3a}
.matrix select.v-aanvraag{background:var(--accent-soft)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:18px}
.login .card{width:100%;max-width:360px}
.login-logo svg{height:44px;width:auto;display:block;margin-bottom:14px}
.login h1{font-size:19px;margin-bottom:8px}
.login .btn{width:100%}

@media print{
  .qbar,.banner,.nav{display:none!important}
}

/* Review: leesbaarheid, compacte bediening en betrouwbare bewaarfeedback. */
:root { --ink3:#6b655f; --button-ink:#fff; }
:root[data-theme="dark"] { --ink3:#b1aaa3; --button-ink:#211714; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --ink3:#b1aaa3; --button-ink:#211714; } }
.btn:not(.ghost),.tg[aria-pressed="true"] { color:var(--button-ink); }
a:focus-visible,summary:focus-visible,textarea:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.config-form { border:0; padding:0; margin:0; min-width:0; }
.config-form:disabled { opacity:.85; }
.toggles { flex-wrap:wrap; min-width:0; }
.grid { grid-template-columns:minmax(0,1fr) 360px; }
.grid > * { min-width:0; }
.config-jumps { display:flex; gap:8px; max-width:1180px; margin:auto; padding:10px 18px; background:var(--card); }
.config-jumps a { padding:6px 12px; border:1px solid var(--line); border-radius:20px; text-decoration:none; font-size:13px; }
.option-tools { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:18px; }
.option-tools input[type=search] { flex:1 1 180px; min-width:0; }
.option-tools label { font-size:13px; }
#opties,#overzicht,#klant { scroll-margin-top:16px; }
.sum { position:static; }
.sum h2 { background:var(--card); }
.chosen-price { flex:none; white-space:nowrap; }
.remove-option { border:0; background:transparent; color:var(--ink2); cursor:pointer; padding:2px 6px; min-width:28px; min-height:28px; }
.exrow { display:grid; grid-template-columns:minmax(0,1fr) 92px 28px; align-items:center; }
.exrow input.nm { grid-column:1 / -1; width:100%; }
.exrow input.pr { width:100%; min-width:0; }
.exrow input.pr { grid-column:1 / 3; }
.add-extra { margin:4px 0 12px; }
.klant h2 { padding:0 0 10px; border:0; }
.recalc-review { display:block; }
.recalc-review .btn { display:inline-block; }
.msg.err { margin:8px 0; }
.rules-panel { margin-top:24px; }
.rules-panel li { margin:8px 0; }
.rules-panel select { max-width:100%; min-width:0; flex:1 1 180px; }
.edit input,.edit select { border-color:var(--line2); }
.edit tr:focus-within td,.matrix tr:focus-within td { background:var(--brass-soft); }
.edit input[data-save=dirty],.edit select[data-save=dirty] { border-color:var(--ink2); }
[data-save=saving] { outline:2px dotted var(--ink2); }
[data-save=error] { outline:2px solid var(--accent); background:var(--accent-soft)!important; }
.matrix select:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.matrix select { min-height:36px; }
.tbl-scroll { max-width:100%; }
.remember { display:flex; align-items:flex-start; gap:8px; font-size:13px; margin-top:14px; }
.remember input { width:auto!important; margin-top:4px; }
.draft-stamp { border:2px solid #b32024; padding:8px; font-weight:bold; color:#b32024; }
@media(min-width:901px) { .mbar { display:flex; position:sticky; bottom:0; max-width:1180px; margin:auto; border:1px solid var(--line); border-radius:8px 8px 0 0; } }
@media(max-width:900px) { .grid { grid-template-columns:minmax(0,1fr); } }
@media(max-width:600px) {
 .top-in { padding:10px 14px; gap:8px; align-items:center; }
 .brand { min-width:0; flex:1; }
 .brand .brandmark svg { height:26px; }
 .nav { gap:5px; width:100%; }
 .nav .tg { font-size:12px; padding:5px 9px; }
 .qbar-in { padding:10px 14px; gap:8px; }
 .qbar .toggles { width:100%; gap:6px; }
 .qbar .toggles > .btn { display:none; }
 .qid h1 { font-size:18px; }
 .chooser-in { padding:10px 14px 14px; gap:10px; }
 .field { min-width:0; flex-basis:100%; }
 select.model { font-size:15px; }
 .basis { text-align:left; }
 .basis .amt { font-size:20px; }
 .config-jumps { padding:8px 14px; gap:6px; }
 .config-jumps a { padding:6px 10px; }
 .opt { gap:8px; }
 .opt .nm,.opt .pr b { font-size:13.5px; }
 .opt .pr { max-width:105px; white-space:normal; }
 .wrap { padding-left:14px; padding-right:14px; }
 .sum .line.tot { font-size:19px; }
 .mbar { padding-left:14px; padding-right:14px; }
 .matrix th.first,.matrix td.first { min-width:160px; max-width:180px; }
}
@media print {
 .config-form { display:none!important; }
 .sheet .draft-stamp { display:block; }
 .sheet tr { break-inside:avoid; }
 .sheet thead { display:table-header-group; }
 .sheet .ft { break-inside:avoid; }
}

.mobile-menu { display:none; position:relative; }
@media(max-width:600px) {
 .top-in { flex-wrap:nowrap; }
 .brand { flex:0 0 auto; }
 .nav { width:auto; flex:1; justify-content:flex-end; flex-wrap:nowrap; }
 .nav .nav-secondary { display:none; }
 .nav .tg { white-space:nowrap; padding:5px 8px; }
 .mobile-menu { display:block; }
 .mobile-menu summary { list-style:none; cursor:pointer; }
 .mobile-menu summary::-webkit-details-marker { display:none; }
 .mobile-menu-panel { position:absolute; right:0; top:calc(100% + 6px); display:grid; gap:8px; padding:12px; min-width:170px; background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:0 5px 20px #0002; z-index:30; }
 .chooser-in .basis { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; width:100%; gap:5px; }
 .chooser-in .basis .lbl { max-width:185px; margin:0; }
}
@media(max-width:360px) { .brand .brandmark svg { height:21px; } .nav .tg { font-size:11px; padding:5px 6px; } }

/* publieke configurator (iframe) */
.public .wrap{padding-bottom:24px}
.public .brand h1{margin-top:7px}
@media print{.public .top{display:none!important}}