/* =========================================================================
   THEMA'S: alle kleuren als variabelen. Nieuw thema = extra blok hieronder
   (en een regel in theme.js). Contrast gecontroleerd op WCAG AA.
   ========================================================================= */
:root,
[data-theme="shopify-donker"] {
  --bg: #0f1110; --panel: #1a1c1b; --card: #242726; --input: #121413;
  --text: #e3e5e4; --muted: #8a8f8c; --border: #2e3230; --hover: #222524; --selected: #11261f;
  --sel-bg: rgba(0, 128, 96, .6); --sel-fg: #ffffff; /* geselecteerde tekst: duidelijk zichtbaar */
  --accent: #008060; --accent-hover: #006e52; --on-accent: #ffffff; --link: #3fc79a; --accent2: #95bf47; --focus: #3fc79a;
  --st-open-bg: #173b2e; --st-open-fg: #7ad9b0;
  --st-wacht-bg: #172f47; --st-wacht-fg: #8cc4f5;
  --st-hand-bg: #3e2c12; --st-hand-fg: #f5b971;
  --st-grey-bg: #2c302e; --st-grey-fg: #b4b9b6;
  --warn-bg: #36280f; --warn-fg: #f7c27e; --warn-border: #6b4a17;
  --danger-bg: #3a1a1a; --danger-fg: #f5a3a3; --danger-border: #6e2c2c;
  --ok-fg: #7ad9b0;
  --ours: #16241e; --ours-border: #008060;
  --cb-row: rgba(220, 38, 38, .15); --cb-row-threat: rgba(220, 38, 38, .07);
  --shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
[data-theme="middernacht"] {
  --bg: #0b1020; --panel: #121a2b; --card: #1a2438; --input: #0e1526;
  --text: #e2e8f2; --muted: #95a2b9; --border: #26324a; --hover: #1f2b42; --selected: #133a35;
  --sel-bg: rgba(0, 128, 96, .6); --sel-fg: #ffffff; /* geselecteerde tekst: duidelijk zichtbaar */
  --accent: #008060; --accent-hover: #006e52; --on-accent: #ffffff; --link: #3fc79a; --accent2: #95bf47; --focus: #3fc79a;
  --st-open-bg: #12382f; --st-open-fg: #7ad9b0;
  --st-wacht-bg: #16304f; --st-wacht-fg: #93c5fd;
  --st-hand-bg: #3d2c14; --st-hand-fg: #f5b971;
  --st-grey-bg: #232d40; --st-grey-fg: #b3bdcc;
  --warn-bg: #352812; --warn-fg: #f7c27e; --warn-border: #6b4a17;
  --danger-bg: #3a1a24; --danger-fg: #f6a6b2; --danger-border: #6e2c3c;
  --ok-fg: #7ad9b0;
  --ours: #112420; --ours-border: #008060;
  --cb-row: rgba(220, 38, 38, .15); --cb-row-threat: rgba(220, 38, 38, .07);
  --shadow: 0 8px 24px rgba(0, 0, 0, .55);
}
[data-theme="grafiet"] {
  --bg: #18181a; --panel: #222225; --card: #2b2b2f; --input: #1c1c1f;
  --text: #e7e7ea; --muted: #9c9ca4; --border: #3a3a40; --hover: #323236; --selected: #1d3a31;
  --sel-bg: rgba(0, 128, 96, .6); --sel-fg: #ffffff; /* geselecteerde tekst: duidelijk zichtbaar */
  --accent: #008060; --accent-hover: #006e52; --on-accent: #ffffff; --link: #45c99d; --accent2: #95bf47; --focus: #45c99d;
  --st-open-bg: #1b3a2f; --st-open-fg: #80dbb4;
  --st-wacht-bg: #1d3046; --st-wacht-fg: #95c8f5;
  --st-hand-bg: #402e16; --st-hand-fg: #f5bb75;
  --st-grey-bg: #36363b; --st-grey-fg: #c0c0c7;
  --warn-bg: #3a2b14; --warn-fg: #f7c27e; --warn-border: #6b4c1c;
  --danger-bg: #3d1e1e; --danger-fg: #f5a8a8; --danger-border: #703232;
  --ok-fg: #80dbb4;
  --ours: #1f2a25; --ours-border: #008060;
  --cb-row: rgba(220, 38, 38, .15); --cb-row-threat: rgba(220, 38, 38, .07);
  --shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
[data-theme="shopify-licht"] {
  --bg: #f6f6f7; --panel: #ffffff; --card: #ffffff; --input: #ffffff;
  --text: #202223; --muted: #5c6166; --border: #e1e3e5; --hover: #f1f2f3; --selected: #e3f5ee;
  --sel-bg: #b3d4ff; --sel-fg: #0b1a2e; /* geselecteerde tekst: duidelijk zichtbaar */
  --accent: #008060; --accent-hover: #006e52; --on-accent: #ffffff; --link: #006e52; --accent2: #95bf47; --focus: #008060;
  --st-open-bg: #cdfee1; --st-open-fg: #0c5132;
  --st-wacht-bg: #e0f0ff; --st-wacht-fg: #00527c;
  --st-hand-bg: #ffe8c7; --st-hand-fg: #7a4100;
  --st-grey-bg: #e8e9eb; --st-grey-fg: #44474a;
  --warn-bg: #fff1e3; --warn-fg: #7a3e00; --warn-border: #f3c58d;
  --danger-bg: #fee9e8; --danger-fg: #8e1f0b; --danger-border: #f5b4ad;
  --ok-fg: #0c5132;
  --ours: #f0faf5; --ours-border: #008060;
  --cb-row: #fdecec; --cb-row-threat: #fef6f6;
  --shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
[data-theme="zacht"] {
  --bg: #f4f2ee; --panel: #faf8f4; --card: #fffdf9; --input: #fffdf9;
  --text: #34322e; --muted: #66625b; --border: #e4e0d8; --hover: #efebe4; --selected: #e4f1ea;
  --sel-bg: #b3d4ff; --sel-fg: #0b1a2e; /* geselecteerde tekst: duidelijk zichtbaar */
  --accent: #008060; --accent-hover: #006e52; --on-accent: #ffffff; --link: #006e52; --accent2: #95bf47; --focus: #008060;
  --st-open-bg: #dcefe3; --st-open-fg: #1d5a3a;
  --st-wacht-bg: #e1ebf5; --st-wacht-fg: #1f4d70;
  --st-hand-bg: #f6e6cc; --st-hand-fg: #704300;
  --st-grey-bg: #ebe7e0; --st-grey-fg: #4d4943;
  --warn-bg: #f8ecdb; --warn-fg: #6f4300; --warn-border: #e8c99a;
  --danger-bg: #f6e3df; --danger-fg: #8a2a1c; --danger-border: #e6b5ab;
  --ok-fg: #1d5a3a;
  --ours: #eef5ef; --ours-border: #008060;
  --cb-row: #f8e6e2; --cb-row-threat: #fbf1ee;
  --shadow: 0 8px 24px rgba(60, 50, 30, .12);
}

/* Vaste kleuren, voor elk thema gelijk */
:root { --test-bg: #e8a33d; --test-fg: #1f1400; --radius: 6px; --radius-sm: 4px; }
/* Plekken om in te vullen: altijd rode tekst op lichtrood, in elk thema even goed leesbaar */
:root { --ph-bg: #ffdede; --ph-fg: #b3001b; --ph-border: #f08a8a; }

/* =========================================================================
   BASIS
   ========================================================================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; display: flex; flex-direction: column; overflow: hidden;
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg); color: var(--text);
}
h1 { font-size: 18px; margin: 0; font-weight: 600; }
h2 { font-size: 15px; margin: 0 0 8px; font-weight: 600; }
h3 { font-size: 13px; margin: 16px 0 8px; font-weight: 600; }
h4 { font-size: 13px; margin: 0 0 8px; font-weight: 600; }
a { color: var(--link); }
code { font-size: 12px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
[hidden] { display: none !important; }
.ic { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* Selectie overal (conversatie, panelen, invoervelden); kleuren per thema in --sel-bg / --sel-fg */
::selection { background: var(--sel-bg); color: var(--sel-fg); }

input[type=text], input[type=search], input[type=email], input[type=url], input[type=password], input[type=tel], input[type=number], select, textarea {
  font: inherit; color: var(--text); background: var(--input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px;
}
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
textarea { width: 100%; resize: vertical; line-height: 1.5; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

/* Knoppen */
button { font: inherit; color: inherit; cursor: pointer; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 30px;
  background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-weight: 500;
}
.btn:hover { background: var(--hover); border-color: var(--muted); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); }
.btn.danger:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--hover); }
.btn.block { width: 100%; justify-content: flex-start; }
.icon-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; background: transparent; color: var(--muted); border-radius: var(--radius-sm); }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.link-btn { border: 0; background: none; color: var(--link); padding: 0; font-weight: 500; }
.link-btn:hover { text-decoration: underline; }

/* Meldingen */
.testbar { background: var(--test-bg); color: var(--test-fg); font-weight: 600; font-size: 12px; text-align: center; padding: 3px 12px; flex: none; }
.testbar code { font-size: 11px; }
.alert {
  display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; margin: 0 0 10px; border-radius: var(--radius);
  background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-border); font-weight: 500;
}
.alert.danger { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); }
.alert .ic { margin-top: 1px; }
.alert-body { flex: 1; min-width: 0; }
.alert #d-warning-short { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert.expanded #d-warning-short { white-space: normal; }
.alert #d-warning-full { margin-top: 2px; font-weight: 400; }
.alert .link-btn { color: inherit; text-decoration: underline; flex: none; }
.alert.compact { padding: 4px 9px; font-size: 12px; font-weight: 400; }
.alert.compact .ic { width: 14px; height: 14px; }
.alert .kandidaten { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.banner { margin: 0; border-radius: 0; border-width: 0 0 1px; flex: none; }
.warning { background: var(--danger-bg); color: var(--danger-fg); border: 1px solid var(--danger-border); padding: 8px 10px; border-radius: var(--radius); white-space: pre-wrap; margin: 8px 0; }
.notice { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-border); padding: 6px 10px; border-radius: var(--radius); margin: 6px 0; }
.ok { color: var(--ok-fg); margin: 8px 0; font-weight: 500; }
.confirm { margin: 10px 0; padding: 12px; border: 1px solid var(--danger-border); border-left: 4px solid var(--danger-fg); border-radius: var(--radius); background: var(--card); }
.confirm p { margin: 0 0 8px; }
.confirm label { display: block; margin: 4px 0; }
.confirm input[type=text] { margin-bottom: 8px; }

/* Statuslabels: klein gekleurd blokje met korte tekst */
.st { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 18px; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.st.open { background: var(--st-open-bg); color: var(--st-open-fg); }
.st.wacht_op_klant { background: var(--st-wacht-bg); color: var(--st-wacht-fg); }
.st.handmatig, .st.fout { background: var(--st-hand-bg); color: var(--st-hand-fg); }
.st.gesloten, .st.geen_klant, .st.samengevoegd { background: var(--st-grey-bg); color: var(--st-grey-fg); }
.label { display: inline-block; padding: 1px 7px; border-radius: var(--radius-sm); font-size: 12px; background: var(--st-grey-bg); color: var(--st-grey-fg); margin-right: 4px; white-space: nowrap; }
.label.klant_zeker { background: var(--st-open-bg); color: var(--st-open-fg); }
.label.klant_waarschijnlijk, .label.todo { background: var(--st-hand-bg); color: var(--st-hand-fg); }
.label.klant_handmatig, .label.beantwoord { background: var(--st-wacht-bg); color: var(--st-wacht-fg); }
.code { font-weight: 600; font-variant-numeric: tabular-nums; }
.center-head .code { color: var(--muted); font-weight: 500; }

/* =========================================================================
   INDELING
   ========================================================================= */
.app { flex: 1; min-height: 0; display: grid; grid-template-columns: 52px 216px minmax(0, 1fr); }

/* 1. Navigatiebalk */
.rail { background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; }
.rail-spacer { flex: 1; }
.rail-btn { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted); }
.rail-btn .ic { width: 20px; height: 20px; }
.rail-btn:hover { background: var(--hover); color: var(--text); }
.rail-btn.active { background: var(--selected); color: var(--link); }
.rail-btn.active::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--accent2); }
.rail-btn[data-tip]:hover::after, .rail-btn[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 44px; top: 50%; transform: translateY(-50%); z-index: 50;
  background: var(--text); color: var(--bg); font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none;
}

/* 2. Weergaven */
.views { background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; overflow: auto; padding: 12px 8px; }
.views-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 8px; margin-top: 6px; }
.view-list { list-style: none; margin: 0 0 8px; padding: 0; }
.view { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); text-align: left; }
.view:hover { background: var(--hover); }
.view.active { background: var(--selected); font-weight: 600; }
.view .cnt { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.view .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.view .name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.views-foot { margin-top: auto; padding: 8px 0 0; border-top: 1px solid var(--border); }
.views-foot .small { margin-top: 6px; overflow-wrap: anywhere; }

/* Werkruimte en tabbladen */
.workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tabbar { display: flex; align-items: flex-end; gap: 2px; padding: 6px 8px 0; background: var(--panel); border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; flex: none; scrollbar-width: thin; }
.wtab { display: flex; align-items: center; gap: 6px; max-width: 220px; padding: 6px 6px 6px 10px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: transparent; color: var(--muted); cursor: pointer; }
.wtab:hover { background: var(--hover); color: var(--text); }
.wtab.active { background: var(--bg); color: var(--text); border-color: var(--border); margin-bottom: -1px; padding-bottom: 7px; }
.wtab .t-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtab .t-code { font-weight: 600; flex: none; }
.wtab .icon-btn { width: 20px; height: 20px; }
.wtab .icon-btn .ic { width: 14px; height: 14px; }
.pane { flex: 1; min-height: 0; }

/* 3. Ticketlijst */
#list-view { display: flex; flex-direction: column; }
.list-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.search { position: relative; margin-left: auto; width: min(420px, 45%); }
.search .ic { position: absolute; left: 8px; top: 8px; color: var(--muted); }
.search input { width: 100%; padding-left: 30px; }
.bulkbar { display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: var(--selected); border-block: 1px solid var(--border); }
.table-wrap { flex: 1; min-height: 0; overflow: auto; }
table.tickets { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tickets th { position: sticky; top: 0; z-index: 1; background: var(--bg); text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); padding: 0; }
.tickets th button { width: 100%; text-align: left; border: 0; background: none; color: inherit; font-weight: inherit; padding: 7px 8px; display: flex; align-items: center; gap: 4px; }
.tickets th button:hover { color: var(--text); background: var(--hover); }
.tickets th[aria-sort="ascending"] button::after { content: "↑"; }
.tickets th[aria-sort="descending"] button::after { content: "↓"; }
.tickets th.chk, .tickets td.chk { width: 36px; text-align: center; padding: 0; }
.tickets th:nth-child(2) { width: 184px; }
.tickets th:nth-child(3) { width: 82px; }
.tickets th:nth-child(5) { width: 17%; }
.tickets th:nth-child(6) { width: 136px; }
.tickets th:nth-child(7) { width: 84px; }
.tickets th:nth-child(8) { width: 96px; }
.tickets td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tickets tbody tr { cursor: pointer; }
.tickets tbody tr:hover { background: var(--hover); }
.tickets tbody tr.selected { background: var(--selected); }
.tickets tbody tr.current { box-shadow: inset 3px 0 0 var(--accent2); }
.tickets tbody tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tickets .subj { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.tickets .preview { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.tickets .shop { display: flex; align-items: center; gap: 6px; }
.tickets .shop .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tickets .date { color: var(--muted); font-variant-numeric: tabular-nums; }
.empty { padding: 40px 16px; text-align: center; color: var(--muted); }

/* 5. Ticketscherm: drie kolommen */
.ticket { display: grid; grid-template-columns: 320px minmax(0, 1fr) 232px; }
.ticket.ctx-collapsed { grid-template-columns: 36px minmax(0, 1fr) 232px; }
.props, .center, .context { min-height: 0; overflow: auto; }
.props { background: var(--panel); border-left: 1px solid var(--border); padding: 14px 12px; display: flex; flex-direction: column; gap: 12px; }
.field label, .field .flabel { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
.field select { width: 100%; }
.field .hint { margin-top: 3px; }
.props-actions { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.sep { height: 1px; background: var(--border); margin: 2px 0; }
.center { padding: 14px 18px 40px; }
.center-head { margin-bottom: 10px; }
.center-head h2 { font-size: 17px; margin: 0 0 2px; }
.section-title { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }

/* Editor met vaste knoppenbalk */
.composer { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.composer:focus-within { border-color: var(--focus); }
.composer-head { padding: 6px 10px; border-bottom: 1px solid var(--border); min-height: 30px; display: flex; align-items: center; gap: 8px; }
.composer-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.naar-kort { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--warn-fg, var(--text)); background: var(--warn-bg, transparent); border: 1px solid var(--warn-border, var(--border)); border-radius: 10px; padding: 1px 9px; }
.naar-kort .ic { width: 13px; height: 13px; }
.info-wrap { position: relative; display: inline-flex; }
.info-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--text); background: var(--hover, rgba(0,0,0,.06)); }
.info-btn .ic { width: 16px; height: 16px; }
.info-pop { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: max-content; max-width: min(420px, 80vw); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 10px; font-size: 12px; }
.info-wrap:hover .info-pop, .info-wrap.open .info-pop { display: block; }
.info-pop dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; }
.info-pop dt { color: var(--muted); }
.info-pop dd { margin: 0; overflow-wrap: anywhere; }
.composer textarea { border: 0; border-radius: 0; background: transparent; min-height: 150px; height: 28vh; padding: 10px; display: block; }
/* Concept met rode plekken: de laag erachter toont de tekst (met <mark>), het tekstvak erboven heeft doorzichtige tekst.
   Lettertype, regelafstand, binnenruimte en afbreken moeten precies gelijk zijn. */
.editor { position: relative; }
.editor-marks, .editor textarea { font: inherit; line-height: 1.5; padding: 10px; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; letter-spacing: normal; tab-size: 8; }
.editor-marks { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--text); pointer-events: none; box-sizing: border-box; }
.editor textarea { position: relative; color: transparent; caret-color: var(--text); background: transparent; }
.editor textarea::placeholder { color: var(--muted); }
.editor textarea::selection { color: transparent; background: transparent; } /* de laag erachter tekent de selectie (.sel) */
.editor-marks .sel { background: var(--sel-bg); color: var(--sel-fg); border-radius: 0; }
.editor-marks mark { background: var(--ph-bg); color: var(--ph-fg); border-radius: 2px; box-shadow: 0 0 0 1px var(--ph-border); padding: 0; font: inherit; }
/* [DISCOUNT CODE] die de app bij versturen zelf aanmaakt: groen, blokkeert niet */
.editor-marks mark.auto { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); }
.ph-count { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--ph-border); background: var(--ph-bg); color: var(--ph-fg); border-radius: 10px; padding: 1px 9px; font-size: 12px; font-weight: 600; cursor: pointer; }
.ph-count:hover { filter: brightness(.96); }
.send-hint { color: var(--danger-fg); font-size: 12px; font-weight: 600; }
.btn:disabled, .menu button:disabled { opacity: .5; cursor: not-allowed; }
.composer textarea:focus-visible { outline: none; }
.composer-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); background: var(--card); border-radius: 0 0 var(--radius) var(--radius); z-index: 2; }
.split { position: relative; display: inline-flex; }
.split > .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.split-toggle { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; border-left: 1px solid rgba(255, 255, 255, .35) !important; padding: 6px 7px !important; }
.split-toggle:not(.primary) { border-left-color: var(--border) !important; margin-left: -1px; }
.menu { position: absolute; bottom: calc(100% + 4px); left: 0; min-width: 230px; z-index: 20; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px; }
.menu button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: none; color: var(--text); border-radius: var(--radius-sm); }
.menu button:hover, .menu button:focus-visible { background: var(--hover); }
#d-action-result { margin-left: 4px; }

/* Conversatie */
.thread { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.msg.out { background: var(--ours); border-left: 3px solid var(--ours-border); }
.msg.target { border-left: 3px solid var(--st-hand-fg); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--st-grey-bg); color: var(--st-grey-fg); }
.msg.out .avatar { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px var(--accent2); }
.msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.msg-head .name { font-weight: 600; }
.msg-head .time { color: var(--muted); font-size: 12px; }
.msg-head .icon-btn, .msg-head .small-btn { margin-left: auto; }
.msg-meta { color: var(--muted); font-size: 12px; margin-top: 1px; overflow-wrap: anywhere; }
.msg-subject { font-weight: 500; margin-top: 4px; }
.msg pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 6px 0 0; }
.msg pre .mail-code, .mail-voorbeeld .mail-code, .preview .mail-code { font-weight: 700; }
.mail-voorbeeld { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 10px 12px; margin: 8px 0; background: var(--card); }
.mail-voorbeeld pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 6px 0 0; }
.msg.collapsed pre { max-height: 6.2em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.small-btn { font-size: 12px; padding: 2px 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: var(--radius-sm); }
.small-btn:hover { background: var(--hover); color: var(--text); }

/* 5. Rechts: context */
.context { background: var(--panel); border-right: 1px solid var(--border); position: relative; }
.context-toggle .ic { transform: scaleX(-1); } /* gespiegeld: het paneel staat links */
.context-toggle { position: sticky; top: 0; float: right; margin: 8px 8px 0 0; display: grid; place-items: center; width: 28px; height: 28px; border: 0; background: transparent; color: var(--muted); border-radius: var(--radius-sm); z-index: 3; }
.context-toggle:hover { background: var(--hover); color: var(--text); }
.ticket.ctx-collapsed .context-body { display: none; }
.ticket.ctx-collapsed .context-toggle { float: none; margin: 8px 4px; }
.context-body { padding: 12px; display: flex; flex-direction: column; gap: 12px; clear: both; }
/* Reactietijden: behandeltijd opgeteld en de tickets eronder */
.behandel-totaal { display: block; margin-top: 4px; text-align: left; }
.reactie-behandel { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.reactie-behandel-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.reactie-behandel-kop .icon-btn { margin-left: auto; }
.reactie-behandel .mono { font-variant-numeric: tabular-nums; }
.ctx-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.ctx-card h4 { display: flex; align-items: center; gap: 6px; }
.kv { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 3px 8px; font-size: 12.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.order + .order { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.order ul { margin: 2px 0 0; padding-left: 16px; }
.ctx-tickets { list-style: none; margin: 4px 0 0; padding: 0; }
.ctx-tickets button { display: flex; gap: 6px; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 4px 6px; border-radius: var(--radius-sm); color: var(--text); }
.ctx-tickets button:hover { background: var(--hover); }
.ctx-tickets .t-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
/* Eerdere contacten (rechterpaneel) */
.history { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.history .ctx-tickets button { padding: 3px 4px; font-size: 12px; }
.history .merge-hint { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-border); border-radius: var(--radius-sm); padding: 5px 7px; }
.hist-mail summary { cursor: pointer; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-mail .hist-body { white-space: pre-wrap; max-height: 260px; overflow: auto; margin-top: 4px; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.log { padding-left: 16px; margin: 6px 0 0; max-height: 260px; overflow: auto; }
details summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.ext { display: inline-flex; align-items: center; gap: 3px; }
.ext .ic { width: 12px; height: 12px; }

/* Dossier */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 14px; }
.dossier { margin-top: 10px; border-color: var(--accent); }
.dossier h3 { margin-top: 0; }
.dossier fieldset { border: 1px solid var(--border); border-radius: var(--radius); margin: 8px 0; }
.dossier fieldset label { display: block; margin: 3px 0; }
.dossier h4 { margin: 14px 0 6px; }
.dossier textarea { margin-top: 4px; }
.ds-msg { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.ds-msg .quote { grid-column: 2; font-style: italic; color: var(--muted); }
.ds-msg select { grid-column: 2; justify-self: start; }
#ds-telling.te-lang { color: var(--danger-fg); font-weight: 600; }

/* Instellingen */
.settings { overflow: auto; padding: 16px 20px 40px; }
.settings > h1 { margin-bottom: 14px; }
.theme-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.theme-card { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); color: var(--text); text-align: left; }
.theme-card:hover { border-color: var(--muted); }
.theme-card[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.swatch { display: flex; height: 38px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.swatch span { flex: 1; }
.swatch span:last-child { flex: .5; }
.swatch.system { background: linear-gradient(135deg, #0f1110 50%, #f6f6f7 50%); }
.theme-card .t-name { font-weight: 600; }
.theme-card .t-kind { font-size: 12px; color: var(--muted); }
.theme-system { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.theme-system label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.shoptest { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
.shoptest .actions, .shopform .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.shoptest button, .shopform button { padding: 5px 12px; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: var(--radius-sm); }
.shoptest button:hover, .shopform button:hover { background: var(--hover); }
.shopform button.primary, .shoptest button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.shopform button.danger, .shoptest button.danger { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); }
.shopform { margin-top: 14px; max-width: 760px; }
.shopform fieldset { border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 12px; padding: 8px 12px 12px; }
.shopform legend { font-weight: 600; padding: 0 4px; }
.shopform label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 8px 0 3px; }
.shopform input[type=text], .shopform input[type=email], .shopform input[type=password], .shopform input[type=tel], .shopform input[type=number], .shopform select { width: 100%; }
.shopform .row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; align-items: end; }
.hint { font-size: 12px; color: var(--muted); margin-top: 2px; }
.hint.bad { color: var(--danger-fg); font-weight: 600; }
.testresult { white-space: pre-wrap; font: 12px/1.5 ui-monospace, Menlo, monospace; margin: 8px 0 0; }
.testresult:empty { display: none; }
#btn-shop-add { margin-top: 4px; }

/* Thema-snelknop en sneltoetsen */
.popover { position: fixed; left: 60px; bottom: 12px; z-index: 60; width: 260px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; }
.popover .pop-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 8px 4px; }
.theme-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; background: none; color: var(--text); border-radius: var(--radius-sm); text-align: left; }
.theme-opt:hover, .theme-opt:focus-visible { background: var(--hover); }
.theme-opt .mini { width: 34px; height: 20px; display: flex; border-radius: 3px; overflow: hidden; border: 1px solid var(--border); flex: none; }
.theme-opt .mini span { flex: 1; }
.theme-opt .mini.system { background: linear-gradient(135deg, #0f1110 50%, #f6f6f7 50%); }
.theme-opt .check { margin-left: auto; color: var(--link); }
.overlay { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .45); display: grid; place-items: center; }
.dialog { width: min(520px, 92vw); background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dialog-head h2 { margin: 0; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.points { margin: 4px 0 0; padding-left: 18px; }
.points li { margin: 2px 0; }
.fu-bar .uitkomst { margin-top: 3px; font-weight: 400; }
.fu-bar .points { font-weight: 400; }
/* Chargeback-dreiging: 100% store credit */
.tegoed-box { padding: 8px 10px; margin: 0 0 10px; border-radius: var(--radius); background: var(--ok-bg, var(--card)); border: 1px solid var(--accent); }
.tegoed-box.danger { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); }
.tegoed-box.warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
.tegoed-kop { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.tegoed-regels { display: grid; gap: 4px; }
.tegoed-groot { font-weight: 600; }
.tegoed-berekening { margin: 0; padding-left: 18px; }
.tegoed-berekening .tegoed-totaal { font-weight: 600; }
.tegoed-artikel select { max-width: 100%; }
.cb-bar .dis { font-weight: 600; margin-top: 2px; }
.check-row { display: flex; align-items: center; gap: 8px; font-weight: 500; }
/* Open: bolletjes naast het aantal (rood = chargeback/dreiging, oranje = follow-up die vandaag of eerder moet) */
.cnt-wrap { display: inline-flex; align-items: center; gap: 5px; }
.flag-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.flag-dot.cb { background: var(--danger-fg); }
.flag-dot.fu { background: var(--warn-fg); }
/* Filters boven Open: aantal in rood/oranje; gedempt bij 0 */
#open-filter .f-cnt { font-variant-numeric: tabular-nums; opacity: .85; }
#open-filter .f-cb .f-cnt { color: var(--danger-fg); font-weight: 700; opacity: 1; }
#open-filter .f-fu .f-cnt { color: var(--warn-fg); font-weight: 700; opacity: 1; }
#open-filter button.zero { opacity: .5; }
#open-filter button.zero .f-cnt { color: inherit; font-weight: 400; }
/* Wachtend: oranje vanaf 24 uur, rood vanaf 48 uur */
.tickets td.wait.lang { color: var(--warn-fg); font-weight: 600; }
.tickets td.wait.late { color: var(--danger-fg); font-weight: 700; }
/* Herschrijven met instructie */
.rw-box { display: grid; gap: 8px; border-color: var(--border); border-left-color: var(--accent); }
.rw-box textarea { width: 100%; }
.rw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--border); background: var(--input); color: var(--text); border-radius: 14px; padding: 3px 11px; font-size: 12px; cursor: pointer; }
.chip:hover { border-color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rw-note { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--selected); font-size: 13px; }
.rw-note-body { flex: 1; min-width: 0; }
.cf-options { display: grid; gap: 6px; margin: 4px 0 2px; }
.cf-options p { margin: 0 0 2px; }
.btn.warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
/* Geen reactie nodig: afsluitende actie (oranje), en de melding onderaan met Ongedaan maken */
.btn.noreply { border-color: var(--warn-border); color: var(--warn-fg); background: var(--warn-bg); }
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 14px;
  background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 14px; max-width: calc(100vw - 32px); }
.toast .link-btn { font-weight: 600; }
.st.geen_reactie { background: var(--st-grey-bg); color: var(--st-grey-fg); }
.kbd-table { width: 100%; border-collapse: collapse; }
.kbd-table td { padding: 6px 4px; border-bottom: 1px solid var(--border); }
.kbd-table td:first-child { width: 42%; white-space: nowrap; }
kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--panel); font: 12px ui-monospace, Menlo, monospace; text-align: center; }

/* Kleinere schermen: rechterpaneel klapt in */
@media (max-width: 1279px) {
  .ticket:not(.ctx-open) { grid-template-columns: 36px minmax(0, 1fr) 220px; }
  .ticket:not(.ctx-open) .context-body { display: none; }
  .ticket:not(.ctx-open) .context-toggle { float: none; margin: 8px 4px; }
  .ticket.ctx-open { grid-template-columns: 300px minmax(0, 1fr) 220px; }
  .app { grid-template-columns: 52px 196px minmax(0, 1fr); }
  .tickets th:nth-child(6), .tickets td:nth-child(6) { display: none; }
}
.dispute-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.deadline { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.deadline.urgent { color: var(--danger-fg); background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius-sm); padding: 3px 8px; align-self: flex-start; }
.reden-bron { display: inline-block; margin: 2px 0 4px; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; }
.reden-bron.shopify { background: var(--st-open-bg); color: var(--st-open-fg); }
.reden-bron.ai { background: var(--st-hand-bg); color: var(--st-hand-fg); }

/* Chargebacks: rode rijen en labels (kleuren per thema: --cb-row, --cb-row-threat, --danger-*) */
.view .cnt.danger { background: var(--danger-bg); color: var(--danger-fg); border: 1px solid var(--danger-border); border-radius: 9px; padding: 0 7px; font-weight: 700; min-width: 22px; text-align: center; }
.view .cnt.danger:empty, .view .cnt.danger.zero { background: transparent; border-color: transparent; color: var(--muted); font-weight: 400; }
.cb-view .ic { color: var(--danger-fg); }
.tickets tbody tr.cb-dispute { background: var(--cb-row); box-shadow: inset 3px 0 0 var(--danger-fg); }
.tickets tbody tr.cb-threat { background: var(--cb-row-threat); box-shadow: inset 3px 0 0 var(--danger-border); }
.tickets tbody tr.cb-dispute:hover, .tickets tbody tr.cb-threat:hover { background: var(--hover); }
.tickets td .st + .st { margin-top: 4px; }
.tickets td.status-cell { white-space: normal; }
.tickets td.status-cell .st { display: flex; width: max-content; max-width: 100%; }
.st.chargeback { background: var(--danger-bg); color: var(--danger-fg); border: 1px solid var(--danger-border); }
.st.dreiging { background: transparent; color: var(--danger-fg); border: 1px solid var(--danger-border); }
.cb-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 0 10px; border-radius: var(--radius); background: var(--danger-bg); color: var(--danger-fg); border: 1px solid var(--danger-border); font-weight: 500; }
.cb-bar .ic { flex: none; width: 18px; height: 18px; }
.cb-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cb-lines .sub { font-weight: 400; font-size: 12px; }
.cb-bar .btn.danger { flex: none; border-color: var(--danger-fg); }

/* Follow-ups (oranje) */
.view .cnt.warn { background: var(--st-hand-bg); color: var(--st-hand-fg); border-radius: 9px; padding: 0 7px; font-weight: 700; min-width: 22px; text-align: center; }
.view .cnt.warn.zero { background: transparent; color: var(--muted); font-weight: 400; }
.fu-view .ic { color: var(--st-hand-fg); }
.st.followup { background: var(--st-hand-bg); color: var(--st-hand-fg); }
.fu-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 0 10px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-border); font-weight: 500; }
.fu-bar .ic { flex: none; width: 18px; height: 18px; }
.fu-box { border-color: var(--warn-border); border-left-color: var(--st-hand-fg); }
.fu-box label { display: block; margin: 6px 0; font-weight: 600; }
.fu-box textarea { margin-top: 4px; font-weight: 400; }

/* Wacht te lang op antwoord, en hint "aangepast in Shopify" */
.st.shopifyhint { background: var(--st-wacht-bg); color: var(--st-wacht-fg); }
.hint-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 0 10px; border-radius: var(--radius); background: var(--st-wacht-bg); color: var(--st-wacht-fg); font-weight: 500; }
.hint-bar .ic { flex: none; width: 18px; height: 18px; }

/* American Express: opvallend label (wit op #016fd0 = contrast 5.0, WCAG AA in elk thema) */
.amex { display: inline-block; background: #016fd0; color: #ffffff; font-weight: 800; font-size: 12.5px; letter-spacing: .06em; line-height: 18px; padding: 1px 8px; border-radius: var(--radius-sm); vertical-align: 1px; white-space: nowrap; cursor: help; }
h2 .amex { font-size: 13px; }
.tickets td.order-cell { white-space: normal; }
.ctx-card.amex-card { border-left: 4px solid #016fd0; }

/* Open: label "Concept klaar" (groen) en filter Alle / Controleren / Concept klaar */
.st.concept { background: var(--st-open-bg); color: var(--st-open-fg); }
.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.segmented button { border: 0; border-right: 1px solid var(--border); background: var(--card); color: var(--muted); padding: 4px 10px; font-size: 12px; font-weight: 500; }
.segmented button:last-child { border-right: 0; }
.segmented button:hover { background: var(--hover); color: var(--text); }
.segmented button[aria-checked="true"] { background: var(--selected); color: var(--text); font-weight: 600; }

/* Zijbalk: inklapbaar "Meer" (Wacht op klant, Gesloten, Geen klant) */
.view.more { color: var(--muted); }
.view.more:hover { color: var(--text); }
.view.more .arrow { width: 14px; height: 14px; transition: transform .12s; }
.view.more.expanded .arrow { transform: rotate(90deg); }
.view-sub { margin: 0; padding-left: 14px; }

/* Taal van de app: snelkeuze en kaarten */
.lang-btn #nav-lang-code { font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.lang-pop { bottom: 52px; }
.lang-code { display: inline-grid; place-items: center; min-width: 28px; height: 20px; border: 1px solid var(--border); border-radius: 3px; font-size: 11px; font-weight: 700; }
.lang-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 220px)); }
.lang-card { flex-direction: row; align-items: center; gap: 10px; }

/* Verstuurvenster: vinkje "Uitzondering, hier niet van leren" */
.check-line { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--muted); cursor: pointer; }
.check-line input { margin: 0; }

/* Leren */
.leren-intro { max-width: 760px; margin: -6px 0 14px; }
.leren-analyse { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
#leren-analyse-result { margin-bottom: 10px; min-height: 1em; }
.voorstel { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 12px; }
.voorstel.besloten { opacity: .85; }
.voorstel-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.voorstel-uitleg { margin: 6px 0 8px; }
.diff-wrap { display: grid; gap: 6px; margin-bottom: 8px; }
.diff { margin: 0; padding: 8px 10px; border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.45; border: 1px solid; }
.diff.del { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger-fg) 45%, transparent); }
.diff.add { background: color-mix(in srgb, var(--accent) 14%, var(--card)); color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.diff.ctx { background: transparent; color: var(--muted); border-style: dashed; border-color: var(--border); }
.diff-edit { width: 100%; box-sizing: border-box; font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--accent); background: var(--input); color: var(--text); }
.voorstel-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.leren-tickets { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.status-pill { font-size: 11px; font-weight: 600; border-radius: 10px; padding: 1px 8px; border: 1px solid var(--border); color: var(--muted); }
.status-pill.goedgekeurd { color: var(--ok-fg); border-color: currentColor; }
.status-pill.afgewezen, .status-pill.verouderd { color: var(--danger-fg); border-color: currentColor; }
.leren-details { margin-top: 10px; }
.leren-details summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.leren-git { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }
.leren-git > li { margin-bottom: 6px; }
.sop-verschil { margin: 4px 0 8px; padding: 6px 8px; border-radius: 6px; background: var(--bg-2, rgba(127,127,127,.08)); font-family: ui-monospace, Menlo, monospace; white-space: pre-wrap; overflow-x: auto; }
.sop-verschil .erbij { color: var(--ok-fg); }
.sop-verschil .eraf { color: var(--danger-fg); text-decoration: line-through; }
.table-wrap { overflow-x: auto; }
.leren-tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.leren-tbl th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); padding: 6px 8px; white-space: nowrap; }
.leren-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.leren-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.leren-tbl td.slecht { color: var(--danger-fg); font-weight: 600; }
.trend { display: inline-flex; align-items: flex-end; gap: 2px; height: 22px; vertical-align: middle; }
.trend .bar { width: 7px; background: var(--accent); border-radius: 2px 2px 0 0; }
.trend .bar.leeg { background: var(--border); }
.leren-lijst { margin: 6px 0 0; padding-left: 20px; }
.leren-lijst li { margin: 3px 0; }
.leren-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.leren-chips .chip { cursor: default; }

/* Kortingscode */
.korting-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 10px; padding: 1px 9px; font-size: 12px; border: 1px solid var(--border); color: var(--muted); }
.korting-chip.auto { color: var(--ok-fg); border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
.korting-chip .ic { width: 13px; height: 13px; }
.confirm-korting { margin: -4px 0 10px; color: var(--ok-fg); font-weight: 600; }
.korting-item { padding: 6px 0; border-top: 1px solid var(--border); }
.korting-item:first-child { border-top: 0; }
.korting-item > div:first-child { display: flex; align-items: center; gap: 6px; }
.korting-code { font-size: 14px; font-weight: 700; letter-spacing: .03em; }

/* Store credit via Herschrijven met instructie: venster in het herschrijfvak en codes in het rechterpaneel */
.rw-actie { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--danger-fg); border-radius: 8px; background: var(--card); }
.rw-actie p { margin: 0; }
.rw-actie-bedrag input { width: 8em; font-variant-numeric: tabular-nums; }
.rw-actie-warn { color: var(--muted); }
.rw-actie-warn.bad, .korting-item .bad { color: var(--danger-fg); font-weight: 600; }
.korting-item.niet-verstuurd { border-left: 3px solid var(--danger-fg); padding-left: 8px; }
.korting-item .btn.small { margin: 4px 0; }
.korting-item .badge { font-size: 11px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }

/* Meldingen van "Nu ophalen": klein, rechtsonder, zelfde stijl als de melding "Ticket gesloten" */
.fetch-toasts { position: fixed; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 81;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.fetch-toast { position: static; transform: none; display: block; padding: 8px 10px 8px 14px; pointer-events: auto; max-width: 100%; }
.fetch-toast.danger { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); }
.fetch-toast-row { display: flex; align-items: center; gap: 8px; }
.fetch-toast-main { all: unset; cursor: pointer; flex: 1; }
.fetch-toast-main:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.fetch-toast-close { font-size: 16px; line-height: 1; color: inherit; }
.fetch-toast-details { margin-top: 6px; display: grid; gap: 2px; opacity: .9; overflow-wrap: anywhere; }
/* Vinkje "Uitzondering" rechts in de balk onder het concept */
/* Vervolgmail: regel boven de editor met het bericht waarop de vervolgmail gaat */
.vervolg-regel { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 5px 9px; border-radius: var(--radius-sm); background: var(--hover); color: var(--muted); }
.vervolg-regel .ic { width: 14px; height: 14px; flex: none; }
.rw-actie-waarde { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0; }
.rw-actie-warn.oranje { color: var(--warn-fg); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius-sm); padding: 4px 8px; }
.composer-bar .send-uitz { margin: 0 0 0 auto; white-space: nowrap; }
/* Tijdens het ophalen draait het icoon in de knop */
#btn-fetch.busy .ic { animation: fetch-spin .9s linear infinite; }
@keyframes fetch-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #btn-fetch.busy .ic { animation-duration: 2.5s; } }

/* Weergave Verzonden */
.sent-table .via-cell .label { margin: 0 4px 3px 0; display: inline-block; }
.label.via-app { background: var(--st-open-bg); color: var(--st-open-fg); }
.label.via-mail { background: var(--st-grey-bg); color: var(--st-grey-fg); }
.label.test { background: var(--warn-bg); color: var(--warn-fg); }
.label.code { background: var(--st-wacht-bg); color: var(--st-wacht-fg); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sent-table tr.is-test td { opacity: .7; }
.sent-table tr.kopie-fout td { background: var(--danger-bg); }
.sent-table tr.kopie-fout td:first-child { box-shadow: inset 3px 0 0 var(--danger-fg); }
.sent-table .kopie-melding { margin-top: 4px; color: var(--danger-fg); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Bericht geopend vanuit Verzonden: kort gemarkeerd */
.msg.flash { animation: msg-flash 2.2s ease-out; }
@keyframes msg-flash { 0%, 35% { box-shadow: 0 0 0 3px var(--focus); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .msg.flash { animation: none; box-shadow: 0 0 0 3px var(--focus); } }
.sent-table th { padding: 7px 8px; }
.sent-table th:nth-child(1) { width: 128px; }
.sent-table th:nth-child(2) { width: 140px; }
.sent-table th:nth-child(3) { width: 19%; }
.sent-table th:nth-child(4) { width: auto; }
.sent-table th:nth-child(5) { width: 90px; }
.sent-table th:nth-child(6) { width: 190px; }
.sent-table td { overflow: hidden; text-overflow: ellipsis; }
.sent-table td > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sent-table td .kopie-melding { white-space: normal; }

/* Ingeplande mails (versturen binnen de werktijden van de winkel) */
.plan-bar { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--st-wacht-fg); border-radius: var(--radius); background: var(--card); }
.plan-bar.danger { border-left-color: var(--danger-fg); background: var(--danger-bg); color: var(--danger-fg); }
.plan-bar .plan-body { flex: 1; display: grid; gap: 6px; }
.plan-bar .plan-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.plan-bar .plan-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.st.ingepland { background: var(--st-wacht-bg); color: var(--st-wacht-fg); }
.confirm-plan { font-weight: 600; }
.confirm-plan.muted { font-weight: 400; text-decoration: line-through; }
.time-pair input[type="time"] { width: 7.5em; }

/* Reactietijden (analysepagina) */
.reactie-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.reactie-doel input { width: 5em; }
.reactie h3 { margin: 18px 0 6px; font-size: 13px; }
.reactie-grafiek-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.reactie-grafiek-kop h3 { margin: 0; }
/* Kosten Claude: compact (hoofdscherm) en details */
.kosten-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.kosten-kop-acties { display: flex; align-items: center; gap: 8px; }
.kosten-kaarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.kosten-kaart { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; background: var(--card); min-width: 0; }
.kosten-groot { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.kosten-onder { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 8px; align-items: stretch; }
.kosten-grafiek { border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; background: var(--card); min-width: 0; }
.kosten-grafiek-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kosten-chart { height: 72px; }
.kosten-voet { margin: 6px 0 0; }
.kosten-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
#kosten-dagen td.num, .kosten-split td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kosten-details .card { margin-top: 12px; }
@media (max-width: 900px) { .kosten-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kosten-onder { grid-template-columns: 1fr; } }
.admin-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.admin-form input { flex: 1 1 260px; min-width: 0; }
.reactie-chart { display: flex; align-items: stretch; gap: 3px; height: 120px; padding: 6px 0; overflow-x: auto; }
.reactie-chart .col { flex: 1 0 14px; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 14px; }
.reactie-chart .bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.reactie-chart .bar { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; }
.reactie-chart .bar.leeg { background: var(--border); }
.reactie-chart .lbl { font-size: 10px; color: var(--muted); }
.reactie-chart .col.met-vgl .bar-wrap { position: relative; justify-content: center; }
.reactie-chart .col.met-vgl .bar:not(.vgl) { position: relative; width: 70%; }
.reactie-chart .bar.vgl { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; background: color-mix(in srgb, var(--st-wacht-fg) 22%, transparent); border: 1px dashed var(--st-wacht-fg); border-bottom: 0; }
.reactie-chart .bar.negatief { background: var(--danger-fg); }
.grafiek-legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--muted); grid-column: 1 / -1; }
.grafiek-legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; border-radius: 2px; background: var(--accent); }
.grafiek-legenda .vgl::before { background: color-mix(in srgb, var(--st-wacht-fg) 22%, transparent); border: 1px dashed var(--st-wacht-fg); }
.reactie-langste { margin: 0; padding-left: 20px; display: grid; gap: 4px; }

/* Adreswijziging: WhatsApp-bericht voor de leverancier */
.st.adres-open { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-border); }
h2 .st.adres-open { font-size: 12px; vertical-align: 2px; }
.adres-box { padding: 10px 12px; margin: 0 0 10px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--warn-border); }
.adres-box.done { border-color: var(--border); }
.adres-box.danger { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); }
.adres-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.adres-head .ic { flex: none; width: 18px; height: 18px; }
.adres-done { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--st-open-fg); font-weight: 600; font-size: 12.5px; }
.adres-done .ic { width: 16px; height: 16px; }
.adres-checks { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.adres-check { padding: 5px 9px; border-radius: var(--radius-sm); font-weight: 500; }
.adres-check.info { padding: 0; font-weight: 400; }
.adres-check.ok { background: var(--st-open-bg); color: var(--st-open-fg); }
.adres-check.warn { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-border); }
.adres-check.warn.strong { border-width: 2px; font-weight: 700; }
.adres-check.danger { background: var(--danger-bg); color: var(--danger-fg); border: 1px solid var(--danger-border); }
.adres-check .amex { margin-right: 6px; }
#d-adres-bericht { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; margin-top: 3px; }
.adres-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
a.btn { text-decoration: none; }
a.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.lev-row .winkels { margin-top: 2px; }
.lev-shops { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.lev-shops label { display: inline-flex; align-items: center; gap: 5px; font-weight: 400; color: var(--text); font-size: 13px; margin: 0; }

/* =========================================================================
   COMMAND CENTER: MODULES EN INSTELLINGEN
   ========================================================================= */
/* Elke module (en Instellingen) vult de twee kolommen naast de navigatiebalk; alleen de getoonde is zichtbaar */
.module { display: contents; }
.module[hidden] { display: none !important; }
.rail-modules { display: contents; }
/* Naam van de app bovenaan de navigatiebalk (initialen; de volledige naam als tooltip) */
.rail-app { position: relative; display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 8px; border-radius: var(--radius); background: var(--selected); color: var(--link); font-size: 12px; font-weight: 700; letter-spacing: .02em; cursor: default; user-select: none; }
.rail-app[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: 44px; top: 50%; transform: translateY(-50%); z-index: 50;
  background: var(--text); color: var(--bg); font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none;
}
.settings-panes { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.form-deel[hidden] { display: none; }
.kbd-inline .kbd-table { max-width: 640px; }
.alg-medewerkers { display: grid; gap: 8px; max-width: 420px; }
.alg-medewerkers textarea { font: inherit; }
#alg-testmodus-herstart { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Herschrijven: twijfel of je nu een code wilt (één regel, twee knoppen); schakelaar store credit in het dreigingsblok */
.rw-vraag { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-left-color: var(--accent); }
.tegoed-schakelaar { margin-top: 6px; font-weight: 600; }
.tegoed-klaar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.tegoed-box .bad { color: var(--danger-fg); font-weight: 600; }

/* Leverancier (Slack): verzoeken aan de leverancier in het ticket */
.lev-box { padding: 8px 10px; margin: 0 0 10px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); }
.lev-verzoek { padding: 8px 0; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.lev-verzoek:first-child { border-top: 0; }
.lev-verzoek-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lev-st-ter_goedkeuring, .lev-st-geen_kanaal, .lev-st-vraag, .lev-st-afgewezen { background: var(--warn-bg); color: var(--warn-fg); }
.lev-st-mislukt, .lev-st-geblokkeerd { background: var(--danger-bg); color: var(--danger-fg); }
.lev-st-verstuurd, .lev-st-voorbeeld { background: var(--selected); color: var(--link); }
.lev-st-bevestigd, .st.lev-bevestigd { background: var(--st-concept-bg, var(--selected)); color: var(--st-concept-fg, var(--link)); }
.lev-fraude { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--danger-bg); color: var(--danger-fg); border: 1px solid var(--danger-border); font-weight: 600; }
.lev-fraude.amex-groot { font-size: 14px; border-width: 2px; }
.lev-controles summary { cursor: pointer; color: var(--muted); }
.lev-controles ul { margin: 4px 0 0; padding-left: 18px; }
.lev-hoofdreden { font-weight: 600; }
.lev-bericht { width: 100%; font-family: var(--mono, ui-monospace, monospace); font-size: 12px; white-space: pre-wrap; margin: 4px 0 0; }
.lev-reacties { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lev-reactie { padding: 4px 8px; border-left: 3px solid var(--border); background: var(--panel); border-radius: var(--radius-sm); }
.lev-reactie.bevestiging { border-left-color: var(--accent); }
.lev-reactie.afwijzing, .lev-reactie.vraag, .lev-reactie.buiten { border-left-color: var(--warn-border, orange); }
.lev-checklist { display: grid; gap: 2px; }
/* Instellingen → Leveranciers en Integraties */
.kanaal-kiezer { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lev-shop { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lev-type { margin-top: 10px; }
.lev-sjabloon { width: 100%; font-family: var(--mono, ui-monospace, monospace); font-size: 12px; }
.slack-kanalen { display: grid; gap: 10px; margin-top: 10px; }

/* Facturen (module Leveranciers) en de Factuurcontrole in het ticket */
.facturen-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.facturen-upload { display: inline-flex; gap: 6px; align-items: center; }
.levmod-rij.nieuw td { font-weight: 600; }
.factuur-st-afwijking, .factuur-st-dubbel, .factuur-st-fout { background: var(--danger-bg); color: var(--danger-fg); }
.factuur-st-onzeker { background: var(--warn-bg); color: var(--warn-fg); }
.factuur-st-gecontroleerd, .factuur-st-gecorrigeerd { background: var(--st-concept-bg, var(--selected)); color: var(--st-concept-fg, var(--link)); }
.factuur-st-nieuw { background: var(--selected); color: var(--link); }
.factuur-regels td.ok { color: var(--accent); font-weight: 700; }
.factuur-regels td.bad, .bad { color: var(--danger-fg); }
.factuur-regels tr.factuur-fout td { background: color-mix(in srgb, var(--danger-bg) 35%, transparent); }
.mapping { display: grid; gap: 6px; margin-bottom: 14px; }
.mapping-tbl select { font-size: 12px; max-width: 140px; }
.lev-dagen { display: flex; gap: 10px; flex-wrap: wrap; }

/* Factuur: tabblad, kopregel en kolommen zelf kiezen */
#factuur-keuze-card > summary { cursor: pointer; list-style: revert; }
#factuur-keuze-card > summary h2 { display: inline; }
.keuze-rij { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
.keuze-rij select { max-width: 100%; }
.keuze-tbl select { min-width: 110px; }
.keuze-tbl .keuze-kop th { font-weight: 600; white-space: normal; }
.keuze-tbl td { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* Kosten per webshop */
.kosten-ws-tbl th[scope="row"] { text-align: left; font-weight: 500; white-space: nowrap; }
.kosten-ws-cel { display: block; width: 100%; text-align: right; color: inherit; padding: 2px 4px; border-radius: 6px; }
.kosten-ws-cel:hover, .kosten-ws-cel.actief { background: var(--hover); text-decoration: none; }
.kosten-ws-niet th, .kosten-ws-niet td { color: var(--muted); }
.kosten-ws-totaal th, .kosten-ws-totaal td { font-weight: 600; border-top: 1px solid var(--border); }
.kosten-ws-detail { margin-top: 12px; }
.kosten-ws-detail h3 { font-size: 14px; margin: 0 0 6px; }

/* Factuur: controle-overzicht */
.factuur-samenvatting { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; align-items: stretch; }
.factuur-statusbalk { flex: 1 1 320px; display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: 10px; border: 1px solid var(--border); }
.factuur-statusbalk .ic { width: 28px; height: 28px; flex: none; }
.factuur-statusbalk .groot { font-size: 20px; font-weight: 700; }
.factuur-statusbalk.alles_klopt, .factuur-statusbalk.klaar { background: color-mix(in srgb, var(--ok-fg) 14%, transparent); border-color: var(--ok-fg); }
.factuur-statusbalk.controleren, .factuur-statusbalk.bekijken { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-fg); }
.factuur-tellers { flex: 2 1 420px; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.factuur-teller { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.factuur-teller .groot { font-size: 20px; font-weight: 700; }
.factuur-teller.ok .groot { color: var(--ok-fg); }
.factuur-teller.bad .groot { color: var(--danger-fg); }
.factuur-teller.warn .groot { color: var(--warn-fg); }
.factuur-controle-kop { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.factuur-zoek { min-width: 240px; flex: 0 1 320px; }
.factuur-controle td { vertical-align: top; }
.factuur-rij { cursor: pointer; }
.factuur-rij:hover, .factuur-rij.open { background: var(--hover); }
.factuur-rij.afgehandeld { opacity: .75; }
.factuur-icoon { font-weight: 700; font-size: 16px; text-align: center; }
.factuur-icoon.ok { color: var(--ok-fg); }
.factuur-icoon.bad { color: var(--danger-fg); }
.factuur-icoon.warn { color: var(--warn-fg); }
.factuur-artikelen { margin: 0; padding-left: 14px; }
.factuur-artikelen li.weg { text-decoration: line-through; text-decoration-color: var(--danger-fg); }
.factuur-controle .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.factuur-controle .btn.gecontroleerd { color: var(--ok-fg); border-color: var(--ok-fg); }
.factuur-detail-rij > td { background: var(--hover); }
.factuur-detail { padding: 8px 4px 12px; cursor: default; }
.factuur-detail h3 { font-size: 14px; margin: 8px 0 6px; }
.factuur-tijdlijn { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); }
.factuur-tijdlijn li { position: relative; padding: 3px 0 3px 10px; }
.factuur-tijdlijn li::before { content: ''; position: absolute; left: -20px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.factuur-tijdlijn li.t-reactie::before, .factuur-tijdlijn li.t-slack::before { background: var(--link); }
.factuur-tijdlijn li.t-factuur::before { background: var(--warn-fg); }
.factuur-tijdlijn li.wijziging::before { background: var(--danger-fg); }
.factuur-tijdlijn .t-op { display: inline-block; min-width: 110px; }
.factuur-acties textarea { width: 100%; }
.factuur-reden { flex: 1 1 260px; min-width: 200px; }

/* Profit */
.profit-kop { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.profit-acties { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.profit-tabs { margin: 10px 0; flex-wrap: wrap; }
.profit-statusbalk { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 8px; }
.profit-statusbalk.klaar, .profit-statusbalk.dicht { border-color: var(--ok-fg); background: color-mix(in srgb, var(--ok-fg) 12%, transparent); }
.profit-statusbalk.open { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-fg); }
.profit-todo { margin: 0 0 10px; padding-left: 18px; }
.profit-todo li.bad { color: var(--danger-fg); }
.profit-todo li.warn { color: var(--warn-fg); }
/* Mediabuyer-instellingen: stip bij een rij met een wijziging die nog niet is opgeslagen */
.mb-stip { color: var(--warn-fg); margin-right: 6px; }
.profit-tbl th, .profit-tbl td { white-space: nowrap; }
.profit-tbl .info { color: var(--muted); }
.profit-cel { cursor: pointer; }
.profit-cel:hover, .profit-cel.gekozen { background: var(--hover); }
.profit-cel.gekozen { outline: 2px solid var(--focus); outline-offset: -2px; }
.profit-cel.voorlopig { font-style: italic; }
.profit-leeg { font-size: 12px; color: var(--muted); }
.profit-leeg.st-fout, .profit-teken.bad { color: var(--danger-fg); }
.profit-leeg.st-niet_gekoppeld, .profit-leeg.st-ontbreekt, .profit-leeg.st-regel_ontbreekt { color: var(--warn-fg); }
.profit-teken { font-size: 11px; color: var(--muted); }
.profit-totaal th, .profit-totaal td { font-weight: 600; border-top: 1px solid var(--border); }
.profit-maand th, .profit-maand td { color: var(--muted); }
.profit-detailkaart { margin-top: 12px; }
.profit-invoer { width: 110px; }
.profit-velden { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.profit-veld { display: flex; flex-direction: column; gap: 4px; }
.profit-lijst .actions { margin: 4px 0; }
.profit-grafiek { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.profit-staven { display: flex; align-items: flex-end; gap: 4px; height: 90px; border-bottom: 1px solid var(--border); }
.profit-week-staaf { flex: 1; display: flex; align-items: flex-end; gap: 1px; height: 100%; }
.profit-week-staaf .staaf { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; }
.profit-week-staaf .staaf.omzet { background: color-mix(in srgb, var(--link) 35%, transparent); }
.profit-week-staaf .staaf.winst { background: var(--ok-fg); }
.profit-week-staaf .staaf.winst.verlies { background: var(--danger-fg); }

/* =========================================================================
   DATUMKIEZER (public/shared/datumkiezer.js), zoals in Shopify Analytics
   ========================================================================= */
.dk { position: relative; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dk-knop { max-width: 100%; }
.dk-tekst { white-space: nowrap; }
.dk-scope { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.dk-vs { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 8px; border: 1px dashed var(--border); border-radius: var(--radius-sm); font-size: 12px; color: var(--muted); white-space: nowrap; }
.dk-vs-wis { width: 22px; height: 22px; }
.dk-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: max-content; max-width: calc(100vw - 16px);
  background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.dk-pop.dk-rechts { left: auto; right: 0; }
.dk-lijf { display: flex; }
.dk-snel { display: flex; flex-direction: column; gap: 2px; width: 190px; padding: 8px; border-right: 1px solid var(--border); max-height: 470px; overflow-y: auto; }
.dk-groep { display: flex; flex-direction: column; gap: 1px; padding: 4px 0; }
.dk-groep + .dk-groep { border-top: 1px solid var(--border); }
.dk-groep-kop { padding: 2px 8px; }
.dk-snel-k { text-align: left; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); }
.dk-snel-k:hover { background: var(--hover); }
.dk-snel-k[aria-pressed="true"] { background: var(--selected); font-weight: 600; }
.dk-kw { display: flex; align-items: center; gap: 2px; padding-left: 8px; }
.dk-kw > span { width: 38px; }
.dk-kw .dk-snel-k { padding: 4px 6px; text-align: center; }
.dk-rechts-deel { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-width: 0; }
.dk-velden { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dk-invoer { width: 140px; }
.dk-invoer[aria-invalid="true"] { border-color: var(--danger-fg); background: var(--danger-bg); }
.dk-tijd { font: inherit; color: var(--text); background: var(--input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; width: 140px; }
.dk-klok[aria-pressed="true"] { background: var(--selected); color: var(--text); }
.dk-pijl { display: inline-grid; place-items: center; }
.dk-fout { font-size: 12px; color: var(--danger-fg); }
.dk-kal { display: flex; align-items: flex-start; gap: 18px; }
.dk-nav { flex: none; margin-top: -3px; }
.dk-maand-naam { text-align: center; font-weight: 600; margin-bottom: 6px; text-transform: capitalize; }
.dk-maand table { border-collapse: separate; border-spacing: 0 2px; }
.dk-maand th { width: 34px; font-size: 11px; font-weight: 500; color: var(--muted); padding-bottom: 4px; text-transform: capitalize; }
.dk-maand td { padding: 0; text-align: center; }
/* Dagen: start en einde als donkere bolletjes, de dagen ertussen lichter; de vergelijkingsperiode in een eigen kleur */
.dk-dag {
  position: relative; width: 34px; height: 32px; border: 0; background: transparent; color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums;
}
.dk-dag::before { content: ""; position: absolute; inset: 1px 3px; border-radius: 50%; z-index: -1; }
.dk-dag:hover:not(:disabled)::before { background: var(--hover); box-shadow: inset 0 0 0 1px var(--muted); }
.dk-dag { isolation: isolate; line-height: 26px; padding: 3px 0; background-clip: content-box !important; }
.dk-dag.in { background: color-mix(in srgb, var(--text) 13%, transparent); }
.dk-dag.start { border-radius: 16px 0 0 16px; }
.dk-dag.eind { border-radius: 0 16px 16px 0; }
.dk-dag.start.eind { border-radius: 16px; }
.dk-dag.start::before, .dk-dag.eind::before { background: var(--text); box-shadow: none; }
.dk-dag.start, .dk-dag.eind { color: var(--bg); font-weight: 600; }
.dk-dag.vin:not(.in) { background: color-mix(in srgb, var(--st-wacht-fg) 18%, transparent); }
.dk-dag.vin { box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--st-wacht-fg) 70%, transparent); }
.dk-dag.vstart:not(.start):not(.eind)::before, .dk-dag.veind:not(.start):not(.eind)::before { background: var(--st-wacht-fg); }
.dk-dag.vstart:not(.start):not(.eind), .dk-dag.veind:not(.start):not(.eind) { color: var(--bg); font-weight: 600; }
.dk-dag.vandaag:not(.start):not(.eind) { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.dk-dag:disabled { color: var(--muted); opacity: .4; cursor: default; }
.dk-dag:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 16px; }
.dk-v { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.dk-v-regel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dk-v-aan { display: inline-flex; align-items: center; gap: 6px; }
.dk-v-uitleg { display: flex; align-items: center; gap: 6px; }
.dk-v-stip { width: 10px; height: 10px; border-radius: 50%; background: var(--st-wacht-fg); flex: none; }
.dk-info { display: inline-grid; place-items: center; color: var(--muted); cursor: help; }
.dk-voet { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.dk-ruimte { flex: 1; }
.dk-herstel { min-height: 26px; padding: 3px 8px; }
/* Verschil met de vergelijkingsperiode (groen beter, rood slechter) */
.dk-verschil { font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dk-verschil.beter { color: var(--ok-fg); }
.dk-verschil.slechter { color: var(--danger-fg); }
.dk-geen-vergelijking { font-size: 12px; color: var(--muted); font-style: italic; }
/* Smal scherm: één maand, snelkeuzes als rij bovenaan, venster over de volle breedte */
@media (max-width: 640px) {
  .dk-pop { position: fixed; top: 8px; left: 8px; right: 8px; max-height: calc(100vh - 16px); overflow-y: auto; width: auto; }
  .dk-lijf { flex-direction: column; }
  .dk-snel { flex-direction: row; flex-wrap: wrap; width: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--border); }
  .dk-groep { flex-direction: row; flex-wrap: wrap; padding: 0; }
  .dk-groep + .dk-groep { border-top: 0; }
  .dk-kal .dk-maand + .dk-maand { display: none; }
  .dk-kal { justify-content: space-between; gap: 4px; }
  .dk-invoer, .dk-tijd { width: 120px; }
}
/* Plekken van de datumkiezer */
.leren-periode, .levmod-werkbalk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
#lijst-datum { display: inline-flex; }
.profit-chart { height: 110px; }
.profit-ov-tbl td .dk-verschil { display: inline-block; }
.profit-ov-tbl td.voorlopig > div:first-child::after { content: " *"; color: var(--muted); }
.profit-vgl th, .profit-vgl td { font-size: 12px; }
.dk-v .segmented { align-self: flex-start; }

/* =========================================================================
   PROFIT PER DAG (dagoverzicht, zijpaneel, verschilanalyse)
   ========================================================================= */
.dv-tbl th .dv-sort { border: 0; background: none; color: inherit; font: inherit; font-weight: 600; padding: 0; cursor: pointer; }
.dv-tbl th[aria-sort="ascending"] .dv-sort::after { content: " ▲"; font-size: 9px; }
.dv-tbl th[aria-sort="descending"] .dv-sort::after { content: " ▼"; font-size: 9px; }
.dv-tbl tbody th { white-space: nowrap; }
.dv-dag { font-weight: 600; }
.dv-uit { width: 22px; height: 22px; vertical-align: middle; }
.dv-cel .dk-verschil { font-size: 11px; }
.dv-mark { margin-left: 2px; font-size: 9px; font-weight: 700; }
.dv-mark-werkelijk { color: var(--ok-fg); }
.dv-mark-berekend { color: var(--muted); font-style: italic; }
.dv-mark-schatting { color: var(--warn-fg); }
.dv-mark-handmatig { color: var(--link); }
.dv-mark-ontbreekt { color: var(--danger-fg); }
.dv-cel.dv-ontbreekt > span:first-child { color: var(--warn-fg); font-size: 12px; }
.dv-cel.dv-hoog { background: var(--warn-bg); }
tr.dv-verlies > th, tr.dv-verlies > td { background: color-mix(in srgb, var(--danger-bg) 70%, transparent); }
tr.dv-onvolledig > th:first-child { box-shadow: inset 3px 0 0 var(--warn-border); }
tr.dv-sub > th, tr.dv-sub > td { font-size: 12px; color: var(--muted); }
tr.dv-sub > th { padding-left: 28px; }
.dv-legenda { margin-top: 6px; }
/* Zijpaneel rechts */
.dv-paneel { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); z-index: 55; overflow-y: auto; padding: 14px 16px;
  background: var(--panel); border-left: 1px solid var(--border); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.dv-paneel-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dv-paneel-kop h2 { margin: 0; }
.dv-paneel-kop h2::first-letter { text-transform: uppercase; }
.dv-paneel-winkel h3 { margin: 10px 0 4px; }
.dv-groep h4 { display: flex; justify-content: space-between; margin: 10px 0 4px; }
.dv-posten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dv-posten li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 4px 6px; border-radius: var(--radius-sm); background: var(--card); font-size: 12px; }
.dv-posten li .dv-post-ref { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-posten li .dv-post-bron { grid-column: 1 / -1; }
.dv-analyse .dv-posten li { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; }
/* Analyse */
.dv-analyse { margin-top: 14px; }
.dv-analyse-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dv-analyse-kop h2 { margin: 0; }
.dv-ab { display: flex; gap: 18px; flex-wrap: wrap; margin: 8px 0; font-size: 12px; }
.dv-p-b { background: var(--accent); color: var(--on-accent); }
.dv-p-a { background: color-mix(in srgb, var(--st-wacht-fg) 30%, transparent); color: var(--text); }
.dv-samenvatting { font-size: 15px; font-weight: 600; margin: 8px 0; line-height: 1.5; }
.dv-info { background: var(--card); color: var(--muted); border-color: var(--border); }
.dv-label-onv { margin-left: 6px; background: var(--warn-bg); color: var(--warn-fg); }
.dv-posten-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 4px 16px; }
.dv-waterval-wrap { overflow-x: auto; }
.dv-waterval { width: 100%; min-width: 520px; height: 240px; display: block; }
.dv-wv-totaal { fill: var(--muted); }
.dv-wv-plus { fill: var(--ok-fg); }
.dv-wv-min { fill: var(--danger-fg); }
.dv-wv-onv { fill-opacity: .45; stroke: var(--warn-fg); stroke-dasharray: 4 3; }
.dv-wv-nul { stroke: var(--border); }
.dv-wv-verbind { stroke: var(--muted); stroke-dasharray: 2 2; }
.dv-wv-bedrag { font-size: 11px; fill: var(--text); }
.dv-wv-naam { font-size: 11px; fill: var(--muted); }
@media (max-width: 640px) { .dv-paneel { width: 100vw; } }
/* Verwachte inkoop: eigen kleur (geen werkelijk bedrag); inkoopcellen klikbaar; de pagina Inkoop */
.dv-mark-verwacht { color: var(--st-wacht-fg); }
.dv-cel.dv-verwacht > span:first-child { color: var(--st-wacht-fg); font-style: italic; }
.dv-cel.dv-klik { cursor: pointer; }
.dv-cel.dv-klik:hover { background: var(--hover); }
.dv-verwacht { white-space: nowrap; }
.ik-sectie h2 { margin-bottom: 4px; }
.ik-dagen { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ik-dag { white-space: nowrap; }
.ik-wacht { width: 64px; margin-top: 8px; }
tr.warn > td { background: color-mix(in srgb, var(--warn-bg) 60%, transparent); }
td.warn { color: var(--warn-fg); font-weight: 600; }
/* Integraties: advertenties */
.ad-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.ad-platform { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--card); }
.ad-platform h3 { margin-top: 0; }
.ad-velden { display: grid; gap: 6px; margin: 8px 0; }
.ad-app-rij { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.ad-app-rij .ad-velden { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ad-app-rij .ad-veld { grid-template-columns: 90px minmax(0, 1fr); }
.ad-veld { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 8px; }
.ad-plak { min-width: 320px; flex: 1; }
.ad-koppel td { vertical-align: top; }
.ad-regel { display: flex; gap: 4px; margin-top: 4px; }
.ad-pct { width: 52px; }
.ad-pat { width: 120px; }

/* Bevestigingsvenster: regeleinden in de tekst tonen (bijv. het overzicht vóór het opslaan van een eerdere ingangsdatum) */
#cf-text { white-space: pre-line; }

/* Profit: dagen na vandaag neutraal ("nog niet"), vandaag "dag loopt nog", tijdzone van de adspend onder de kolomkop */
tr.profit-toekomst th, tr.profit-toekomst td { color: var(--muted); }
tr.profit-toekomst .profit-leeg.st-toekomst { color: var(--muted); }
.profit-loopt-label { color: var(--accent, var(--muted)); font-weight: 500; }
.profit-tz { font-weight: 400; text-transform: none; letter-spacing: 0; }
.profit-afsluiten { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 360px; text-align: right; }
.dv-platform-dag { margin-top: 12px; }

/* Factuurcontrole: kop per bestelling (met "Waarom?"), de stappen en de vraag over een leverancierscode */
tr.factuur-order-kop td { background: var(--surface-2, var(--hover)); padding-top: 10px; }
tr.factuur-order-kop.afwijkingen td:first-child { box-shadow: inset 3px 0 0 var(--danger-fg); }
tr.factuur-order-kop.controleren td:first-child { box-shadow: inset 3px 0 0 var(--warn-border, var(--warn-fg)); }
tr.factuur-waarom td { background: var(--hover); }
tr.factuur-waarom ol { margin: 4px 0; padding-left: 18px; }
.factuur-code-vraag { margin-top: 6px; }

/* Factuurcontrole tegen de afspraken: bronnen per bestelling, bewijs toevoegen, de twee bronnen bij een tegenspraak en de
   tijdlijn in vier stroken */
.factuur-bronnen { font-weight: 400; margin-left: 6px; }
.factuur-order-acties { justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.factuur-bewijs { display: grid; gap: 8px; padding: 6px 0; }
.factuur-bewijs-velden { display: flex; flex-wrap: wrap; gap: 8px; }
.factuur-bewijs-veld { display: grid; gap: 2px; }
.factuur-bewijs textarea { width: 100%; }
.factuur-bronpunten ul { margin: 4px 0; padding-left: 16px; }
.factuur-whatsapp { margin-top: 8px; grid-column: 1 / -1; flex-basis: 100%; }
ol.factuur-tijdlijn > li.factuur-strook { list-style: none; margin-bottom: 8px; }
ol.factuur-tijdlijn > li.factuur-strook > ol { margin: 2px 0 0; padding-left: 16px; }
tr.factuur-order-kop.tegenspraak td:first-child, tr.factuur-order-kop.open_verzoek td:first-child { box-shadow: inset 3px 0 0 var(--warn-border, var(--warn-fg)); }

/* Laatst opgehaald: per mail wat er bij het ophalen mee is gebeurd */
.ophaal-dialog { width: min(1100px, 96vw); max-height: 88vh; display: flex; flex-direction: column; }
.ophaal-keuze { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#ophaal-inhoud { overflow: auto; min-height: 0; }
.ophaal-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.ophaal-chip { border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; font-size: 12px; }
.ophaal-chip.nieuw_ticket, .ophaal-chip.toegevoegd { color: var(--ok-fg); }
.ophaal-chip.fout, .ophaal-chip.geen_concept { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); }
.ophaal-winkels { margin: 4px 0 8px; }
.ophaal-tabel table.tickets { table-layout: auto; }
.ophaal-tabel th { padding: 7px 8px; }
.ophaal-tabel td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; padding: 6px 8px; }
.ophaal-tabel td.date { white-space: nowrap; }
.ophaal-tabel td:last-child { white-space: nowrap; }
.ophaal-tabel .ophaal-van { min-width: 180px; max-width: 240px; }
#btn-ophaalronde { white-space: nowrap; flex-shrink: 0; }
.ophaal-tabel tr.ophaal-fout td, .ophaal-tabel tr.ophaal-geen_concept td { color: var(--danger-fg); }
.filter-melding { display: flex; align-items: center; gap: 8px; margin: 0 16px 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.filter-melding .btn { margin-left: auto; }

/* Profit Per dag: vrij bereik, weken in het bereik, weken om af te sluiten, groepering en slotje */
.profit-statusbalk.bereik { background: var(--card); }
.profit-weken-bereik { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.profit-weken-bereik ul { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0; padding: 0; }
.profit-weken-bereik li { display: inline-flex; align-items: center; gap: 6px; }
.profit-weken-open { padding: 8px 14px; margin-bottom: 10px; }
.profit-weken-open summary { cursor: pointer; }
.profit-weken { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.profit-weken li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.profit-weken li.warn > span { color: var(--warn-fg); }
.profit-groep { margin: 0 0 8px; }
.profit-slot { font-size: 11px; }
tr.profit-dicht th { color: var(--muted); }
details.profit-weken-bereik { display: block; }
details.profit-weken-bereik summary { cursor: pointer; color: var(--muted); }
details.profit-weken-bereik ul { margin-top: 6px; }

/* Advertenties: geschiedenis laden; Profit: niet geladen, mislukt en onvolledige totalen */
.ad-historie { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; display: grid; gap: 4px; }
.ad-historie progress, .profit-laden-balk progress { width: 160px; vertical-align: middle; margin-right: 6px; }
.profit-laden-balk { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.profit-laden { padding: 1px 8px; font-size: 11px; margin-left: 4px; }
.profit-onvolledig { display: inline-block; text-align: right; }
.profit-reden { max-width: 220px; white-space: normal; text-align: right; }

/* Weekend licht gemarkeerd (ook de vaste datumkolom) */
.profit-tbl tr.profit-weekend > td, .profit-tbl tr.profit-weekend > th { background: color-mix(in srgb, var(--text) 4%, var(--bg)); }
/* Klein markeringsteken bij een ontbrekend of onvolledig bedrag; de reden staat in de tooltip */
.profit-markering { cursor: help; }
.profit-mark { color: var(--warn-fg); font-weight: 700; font-size: 10px; margin-left: 2px; }
#profit-groep-hint { margin-left: 8px; }
.profit-todo-blok { margin: 0 0 10px; } .profit-todo-blok summary { cursor: pointer; color: var(--muted); }

/* ===== Profit → Per dag: werkbalk, kaarten, grafiek, filters, tabel (virtueel), zijpaneel ===== */
.pd .pd-balk { position: sticky; top: -16px; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -16px -20px 8px; padding: 10px 20px 8px; background: var(--bg); border-bottom: 1px solid var(--border); }
.pd .pd-titel { font-size: 17px; margin: 0 6px 0 0; white-space: nowrap; }
.pd .profit-tabs { margin: 0; }
.pd .pd-periode { display: inline-flex; align-items: center; gap: 2px; }
.pd-ruimte-flex { flex: 1; }
.pd-menu-plek { position: relative; }
.pd-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 260px; max-height: 70vh; overflow: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 12px; display: grid; gap: 8px; }
.pd-menu-groep { display: grid; gap: 4px; }
.pd-eigen { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pd-eigen li { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: var(--radius-sm); cursor: grab; }
.pd-eigen li:hover { background: var(--hover); }
.pd-eigen li.pd-sleept { opacity: .5; }
.pd-greep { color: var(--muted); font-size: 11px; letter-spacing: -2px; }
#pd-leeg[aria-pressed="true"] { background: var(--selected); }
.pd-aandacht { color: var(--warn-fg); }
.pd-afsluitbalk { padding: 6px 12px; margin-bottom: 8px; }
/* Kaarten */
.pd-kaarten { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.pd-kaart { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; min-width: 0; }
.pd-kaart-getal { font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-kaart.pd-plus .pd-kaart-getal { color: var(--ok-fg); }
.pd-kaart.pd-min .pd-kaart-getal { color: var(--danger-fg); }
.pd-kaart-voorlopig { white-space: normal; }
@media (max-width: 1100px) { .pd-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Grafiek */
.pd-grafiek-blok { margin-bottom: 6px; }
.pd-grafiek-blok > summary { cursor: pointer; color: var(--muted); }
.pd-grafiek-vlak { position: relative; }
.pd-svg { display: block; width: 100%; height: 160px; user-select: none; }
.pd-as { stroke: var(--border); stroke-width: 1; }
.pd-as-nul { stroke: var(--muted); stroke-width: 1; opacity: .6; }
.pd-as-tekst { fill: var(--muted); font-size: 10px; }
.pd-staaf { fill: var(--accent); opacity: .55; }
.pd-l-adspend { fill: none; stroke: var(--warn-fg); stroke-width: 1.6; }
.pd-l-winst { fill: none; stroke: var(--ok-fg); stroke-width: 1.8; }
.pd-l-vomzet { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: .8; }
.pd-l-vwinst { fill: none; stroke: var(--ok-fg); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: .7; }
.pd-hover { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 2; }
.pd-selectie { fill: var(--accent); opacity: .12; }
.pd-vlak { fill: transparent; cursor: crosshair; }
.pd-tip { position: absolute; top: 4px; z-index: 5; pointer-events: none; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px 8px; font-size: 12px; white-space: nowrap; }
.pd-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; }
.pd-lg { display: inline-block; width: 14px; height: 3px; vertical-align: middle; }
.pd-lg-staaf { height: 9px; background: var(--accent); opacity: .55; }
.pd-lg-adspend { background: var(--warn-fg); }
.pd-lg-winst { background: var(--ok-fg); }
.pd-lg-v { border-top: 2px dashed var(--accent); height: 0; }
/* Snelfilters */
.pd-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.pd-chip { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.pd-chip[aria-pressed="true"] { background: var(--selected); border-color: var(--accent); }
.pd-chip:disabled { opacity: .45; cursor: default; }
.pd-chip-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.pd-ga { width: 130px; padding: 3px 8px; font-size: 12px; }
/* Tabel: eigen scrollvak met vaste kop, datumkolom links, Winst e.v. rechts en de totaalrij onderaan */
.pd-vak { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
table.pd-tabel { table-layout: fixed; width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; font-variant-numeric: tabular-nums; }
.pd-tabel th, .pd-tabel td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--border); background: var(--bg); padding: 0 8px; }
.pd-tabel.pd-dagen tbody tr:not(.pd-ruimte) > * { height: 28px; line-height: 27px; }
.pd-tabel.pd-dagen.pd-ruim tbody tr:not(.pd-ruimte) > * { height: 36px; line-height: 35px; }
.pd-tabel.pd-groepen tbody > tr > * { padding-top: 4px; padding-bottom: 4px; white-space: normal; }
.pd-tabel thead th { position: sticky; top: 0; z-index: 4; white-space: normal; vertical-align: bottom; line-height: 1.2; padding: 6px 8px; font-size: 11px; }
.pd-tabel tbody th, .pd-tabel tfoot th, .pd-tabel thead th:first-child { position: sticky; left: 0; z-index: 3; text-align: left; font-weight: 500; color: var(--text); }
.pd-tabel thead th:first-child { z-index: 6; }
.pd-tabel .pd-vast { position: sticky; z-index: 2; }
.pd-tabel thead .pd-vast { z-index: 5; }
.pd-tabel tr > .pd-vast:not(.pd-vast ~ .pd-vast) { border-left: 1px solid var(--border); }
.pd-tabel tfoot tr.profit-plak > * { position: sticky; z-index: 4; background: var(--card); line-height: 1.3; padding-top: 5px; padding-bottom: 5px; }
.pd-tabel tfoot tr.profit-plak > th { left: 0; z-index: 7; }
.pd-tabel tfoot tr.profit-plak > .pd-vast { z-index: 6; }
.pd-tabel tfoot tr.profit-totaal > * { border-top: 2px solid var(--border); font-weight: 600; }
.pd-tabel tr.pd-ruimte > td { padding: 0; border: 0; background: transparent; }
.pd-tabel tr.profit-weekend > * { background: color-mix(in srgb, var(--text) 4%, var(--bg)); }
.pd-tabel tr.pd-maandrij > * { background: var(--panel, var(--card)); font-weight: 600; }
.pd-tabel tr.pd-flits > * { background: var(--sel-bg) !important; transition: background .6s; }
.pd-tabel td.pd-plus { color: var(--ok-fg); }
.pd-tabel td.pd-min { color: var(--danger-fg); }
.pd-tabel td.pd-nul { color: var(--muted); }
.pd-tabel td.pd-klik { cursor: pointer; }
.pd-tabel td.pd-klik:hover { outline: 1px solid var(--border); outline-offset: -1px; }
.pd-tabel td.gekozen { outline: 2px solid var(--focus); outline-offset: -2px; }
.pd-klap { all: unset; cursor: pointer; font-weight: 600; }
.pd-klap:focus-visible { outline: 2px solid var(--focus); }
.pd-loopt { color: var(--accent); font-size: 10px; }
.pd-sub { margin-left: 1px; }
.pd-leeg { padding: 16px; text-align: center; }
.pd-voet { margin-top: 6px; }
/* Zijpaneel */
.pd-paneel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); z-index: 60; background: var(--card); border-left: 1px solid var(--border); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.pd-paneel-kop { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.pd-paneel-kop h2 { margin: 0; font-size: 15px; }
#pd-paneel-inhoud { overflow: auto; padding: 12px 16px; display: grid; gap: 10px; align-content: start; }
.pd-punt { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; display: grid; gap: 4px; }
.pd-punt.bad { border-left: 3px solid var(--danger-fg); }
.pd-punt.warn { border-left: 3px solid var(--warn-fg); }
.pd-punt-kop { display: flex; justify-content: space-between; gap: 8px; }
.pd-paneel-sub { font-size: 13px; margin: 8px 0 0; }
.pd-tabel .profit-mark, .pd-tabel sup { line-height: 0; vertical-align: super; font-size: 9px; }

/* Instellingen → Webshops → Advertenties: kaart per webshop, logins, venster Koppelen */
#settings-nav .view.sub { padding-left: 26px; font-size: 13px; }
.ad-overzicht { display: grid; gap: 6px; }
.ad-tellers { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ad-teller { display: flex; align-items: baseline; gap: 6px; }
.ad-melding { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ad-winkel { display: grid; gap: 8px; }
.ad-winkel-kop, .ad-rij-kop, .ad-k-hoofd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ad-winkel-kop h2 { margin: 0; }
.ad-ruimte { flex: 1; }
.ad-rij { border-top: 1px solid var(--border); padding-top: 8px; display: grid; gap: 6px; }
.ad-koppeling, .ad-login { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; display: grid; gap: 3px; background: var(--card); }
.ad-koppeling.bad { border-left: 3px solid var(--danger-fg); }
.ad-koppeling.ok { border-left: 3px solid var(--ok-fg); }
.ad-badge { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); }
.ad-badge.ok { color: var(--ok-fg); border-color: var(--ok-fg); }
.ad-badge.bad { color: var(--danger-fg); border-color: var(--danger-border); background: var(--danger-bg); }
.ad-status { font-size: 13px; }
.ad-laden-vak { border: 1px dashed var(--border); border-radius: var(--radius); padding: 6px 10px; }
.ad-logins { display: grid; gap: 8px; }
.ad-instellingen > summary { cursor: pointer; }
.ad-wijzigingen ul, .ad-logboek ul { margin: 4px 0 0; padding-left: 18px; }
.ok-tekst { color: var(--ok-fg); }
/* Venster Koppelen */
.dialog.ad-wizard { width: min(720px, 94vw); max-height: 88vh; overflow: auto; }
.ad-stappen { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 12px; counter-reset: stap; }
.ad-stappen li { flex: 1; padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 12px; color: var(--muted); counter-increment: stap; }
.ad-stappen li::before { content: counter(stap) ". "; }
.ad-stappen li.nu { color: var(--text); border-color: var(--accent); font-weight: 600; }
.ad-stappen li.klaar { color: var(--ok-fg); }
.ad-wiz-stap { display: grid; gap: 8px; }
.ad-keuze { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.ad-keuze:hover { background: var(--hover); }
.ad-keuze.grijs { opacity: .6; cursor: default; justify-content: space-between; }
.ad-nieuwe-login { display: grid; gap: 6px; padding: 8px; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.ad-gedeeld { display: grid; gap: 6px; }
.ad-gedeeld .ad-regel { display: inline-flex; }
/* Leverancier (Slack): melding bovenaan het ticket, de regel met leverancier en kanaal, "zelf geregeld" */
.lev-meldingen { display: grid; gap: 6px; margin: 0 0 10px; }
.lev-melding { align-items: center; }
.lev-melding .btn { flex: none; margin-left: auto; }
.lev-regel { margin: 0 0 6px; }
.lev-zelf { margin-top: 6px; }
.lev-zelf summary { cursor: pointer; }
.lev-zelf label { display: grid; gap: 2px; margin: 4px 0; }
.lev-zelf label.check-row { display: flex; gap: 6px; }
.lev-meldingen .alert { margin: 0; }
/* Filter "Verzoeken niet verstuurd" boven de lijst Open */
.lev-open { margin: 0 0 10px; padding: 10px 12px; }
.lev-open-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.lev-open-kop .btn { margin-left: auto; }
.lev-open .clickable { cursor: pointer; }
/* Factuurcontrole: samenvatting in gewone taal (per situatie een kleur), klikbare tegels, kaarten "Klantverzoek loopt nog" */
.factuur-sam { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; }
.factuur-sam-lijnen { display: grid; gap: 4px; flex: 1; }
.factuur-sam-regel { text-align: left; border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius); padding: 6px 10px; background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
.factuur-sam-regel.groen { border-left-color: var(--ok, #1f9d55); }
.factuur-sam-regel.geel { border-left-color: #d4a017; background: var(--warn-bg); }
.factuur-sam-regel.oranje { border-left-color: #e8770e; }
.factuur-sam-regel.rood { border-left-color: var(--danger-fg, #c0392b); background: var(--danger-bg); }
button.factuur-teller { cursor: pointer; font: inherit; color: inherit; text-align: left; }
.factuur-kv { border: 1px solid var(--border); border-left: 4px solid #d4a017; border-radius: var(--radius); padding: 10px 12px; margin: 8px 0; }
.factuur-kv.afgehandeld { border-left-color: var(--ok, #1f9d55); opacity: .85; }
.factuur-kv-kop { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; margin-bottom: 6px; }
.factuur-kv-kop .st { margin-left: auto; }
.factuur-kv-feiten { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0 0 6px; }
.factuur-kv-feiten dt { color: var(--muted); }
.factuur-kv-feiten dd { margin: 0; }
.factuur-kv-gevolg { padding: 5px 8px; border-radius: var(--radius); margin: 4px 0 6px; }
.factuur-kv-gevolg.geel { background: var(--warn-bg); color: var(--warn-fg); }
.factuur-kv-gevolg.rood { background: var(--danger-bg); color: var(--danger-fg); }
.st.open-verzoek { background: var(--warn-bg); color: var(--warn-fg); }
.factuur-bron-naast { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.factuur-bron-kolom ul { margin: 2px 0; padding-left: 16px; }
.factuur-bron-actie { margin-top: 3px; font-weight: 600; }
.factuur-km.afwijking { border-color: var(--danger-border); }
.factuur-hint { color: var(--muted); max-width: 220px; }
@media (max-width: 700px) { .factuur-bron-naast { grid-template-columns: 1fr; } .factuur-sam { flex-direction: column; } }
/* Store credit: de bestellingen in het venster en de knoppen bij een rode [STORE CREDIT CODE] */
.rw-actie-orders { display: grid; gap: 4px; margin: 6px 0; }
.rw-actie-order { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px; }
.rw-actie-order ul { margin: 2px 0 0; padding-left: 16px; }
.tegoed-fix { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tegoed-zelf summary { cursor: pointer; }
.tegoed-zelf input { margin-left: 4px; }
/* Artikelkeuze (gedeeld): compact, per bestelling inklapbaar, per artikel een vakje en bij meer stuks een teller */
.artikelkeuze { display: grid; gap: 4px; margin: 4px 0; }
.artikelkeuze-kop { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.artikelkeuze-order { border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 8px; }
.artikelkeuze-order summary { cursor: pointer; }
.artikelkeuze-artikel { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; padding: 2px 0 2px 22px; font-size: .92em; }
.artikelkeuze-artikel.grijs { opacity: .6; }
.artikelkeuze-teller { width: 3.6em; }
.artikelkeuze-sam { font-weight: 600; }

/* Inlogscherm (alleen online, public/login.html) */
.login-pagina { flex-direction: row; align-items: flex-start; justify-content: center; overflow: auto; padding: 12vh 16px 16px; }
.login-kaart { width: 100%; max-width: 380px; }
.login-kaart h1 { margin-bottom: 14px; }
.login-stap label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--muted); margin: 10px 0; }
.login-stap input { font-size: 14px; }
.login-stap .btn { margin-top: 6px; width: 100%; justify-content: center; }
.login-qr { display: block; width: 180px; height: 180px; margin: 8px auto; background: #fff; padding: 6px; border-radius: var(--radius); }
.login-stap code { word-break: break-all; }
/* Ingelogd (online): wie, en uitloggen, onderaan de navigatie */
.nav-gebruiker { font-size: 12px; color: var(--muted); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }