/* Cockpit D: presentatielaag. Laadt als laatste. Navy, goud alleen als accent, cream. */
:root{--d-navy:#0E2A4A;--d-ink:#182F47;--d-soft:#5A6878;--d-gold:#A88947;--d-line:#E2DED3;--d-ok:#146957;--d-warn:#84580B;--d-bad:#A33536;--d-muted:#8A94A0}
html{font-size:16px}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;line-height:1.5;color:var(--d-ink);overflow-x:hidden}

/* D1 breedte */
.app-content-area{width:min(1100px,100% - 32px);max-width:1100px;margin-inline:auto;padding-inline:0;box-sizing:border-box}
.app-content-area .ca-scope,.app-content-area .cb-scope{max-width:100%;width:100%;margin:0;padding-bottom:3rem}
.app-topbar{padding-inline:max(16px,calc((100% - 1100px)/2))}
@media(max-width:767px){.app-topbar{padding-inline:16px}}

/* D2 vijf maten, ook in oudere schermen en op mobiel. */
body *{font-size:inherit!important}
body{font-size:16px!important}
body h1,body #topbar-title,body .pagina-titel{font-size:28px!important}
body h2,body .kaart-titel{font-size:20px!important}
body h3,body h4,body h5,body h6,body .ca-card-title,body .cb-row-name{font-size:18px!important}
body small,body label,body th,body dt,body figcaption,body .ca-muted,body .veld-label,body .veld-hint,body .cp-chart-label,body .cp-chart-legend,body .sidebar-account-label{font-size:13px!important}
.app-content-area h1,#topbar-title,.pagina-titel{font-size:28px;line-height:1.25;font-weight:700;color:var(--d-navy);text-transform:none;letter-spacing:0}
.app-content-area h2,.app-content-area .kaart-titel{font-size:20px;line-height:1.3;font-weight:600;color:var(--d-navy);text-transform:none;letter-spacing:0}
.app-content-area h3,.app-content-area h4,.ca-card-title,.cb-row-name,.cb-kpi strong{font-size:16px;line-height:1.4;font-weight:600;color:var(--d-navy);text-transform:none;letter-spacing:0}
.ca-scope .ca-muted,.ca-metrics span,.cb-stat,.cb-kpi span,.cb-facts dt,.ca-meta,.ca-dl dt,.veld-label,.veld-hint,.app-content-area small,.cb-term-nums,.ca-filters label,.cc-search-filter .veld-label,.sidebar-account-label,.zoekterm-context,.zoekterm-metrics dt,.technical-grid strong,.campaign-settings-list dt{font-size:13px;font-weight:400;color:var(--d-soft);text-transform:none;letter-spacing:0}
.ca-lead,.cb-lead{font-size:16px;color:var(--d-soft)}
.ca-scope .ca-card-title{margin:0}
.ca-scope h1,.cb-scope h1{font-size:28px}
.ca-scope h2,.cb-scope h2{font-size:20px}

/* D3 geen uppercase eigen labels */
.tabel thead th,.zoektermen-tabel th,.knop,.status-label,.zoekterm-metrics dt,.login-logo,.knop--negatief,.knop--keyword,.knop--negeren,.cb-ctable th,.cb-table th{text-transform:none;letter-spacing:0}
.cb-ctable th,.cb-table th,.ca-actietabel th{font-size:13px;font-weight:400;color:var(--d-soft)}

/* D4 rijen in plaats van kaarten */
.cb-row,.cb-kpi,.kaart,.account-blok,.panel,.zoekterm-rij{background:transparent;border:0;border-top:1px solid var(--d-line);border-radius:0;box-shadow:none;padding:.9rem 0}
.cb-list{gap:0}
.cb-kpis{gap:0 1.5rem}
.cb-kpi{padding:.6rem 0}
.zoekterm-rij{border-left:0}
.ca-card{background:#FFFEFB;border:1px solid var(--d-line);border-radius:10px;box-shadow:none}
.ca-card:hover{border-color:var(--d-gold)}
.ca-scope ul.ca-list,.cb-scope ul.cb-cards{gap:.75rem}

/* D5 cijfers */
.cb-ctable,.cb-table,.tabel,.zoektermen-tabel,.ca-actietabel,.ca-metrics,.cb-kpis,.cb-facts,.cb-term-nums{font-variant-numeric:tabular-nums}
@media(min-width:761px){
  .cb-ctable{table-layout:auto!important;width:100%}
  .cb-ctable th,.cb-ctable td{overflow-wrap:normal;word-break:normal;padding-inline:.35rem}
  .cb-ctable th{white-space:nowrap}
  .cb-ctable td:first-child{max-width:180px}
  .cb-ctable td[data-label="Trend"]{white-space:nowrap}
  .cb-ctable td:not(:first-child):not([data-label="Status"]):not([data-label="Trend"]),.cb-ctable th:not(:first-child):not(:nth-child(2)):not(:nth-child(9)){text-align:right}
  .cb-ctable td[data-label="Trend"]{white-space:normal}
  .cb-table th,.cb-table td{text-align:right}.cb-table th:first-child,.cb-table td:first-child{text-align:left}
}

/* D6 status: stip plus tekst */
.status-badge{display:inline-flex;align-items:center;gap:.45rem;padding:0;background:none;border:0;border-radius:0;font-size:14px;font-weight:400;color:var(--d-ink);text-transform:none}
.status-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--d-muted);flex:none}
.status-badge--success::before{background:var(--d-ok)}
.status-badge--warning::before{background:#B7791F}
.status-badge--danger::before{background:var(--d-bad)}
.status-badge--info::before{background:var(--d-navy)}
.status-badge svg{display:none}
.status-label{background:none!important;padding:0;font-size:14px;font-weight:400;color:var(--d-ink)}
.status-label::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.45rem;background:var(--d-muted)}
.status-label--active::before,.status-label--keyword::before{background:var(--d-ok)}
.status-label--paused::before{background:#B7791F}
.status-label--removed::before,.status-label--negatief::before{background:var(--d-bad)}

/* D7 knoppen */
.ca-btn,.cb-btn,.knop,.preview-button{min-height:2.5rem;padding:.4rem 1.1rem;border-radius:6px;font:inherit;font-size:15px;font-weight:600;text-transform:none;letter-spacing:0;box-shadow:none;border:1px solid var(--d-navy);background:transparent;color:var(--d-navy)!important;transition:background .15s,color .15s,border-color .15s}
.ca-btn:hover,.cb-btn:hover,.knop:hover,.preview-button:hover{background:#EEF1F5;box-shadow:none}
.ca-btn--primary,.cb-btn--primary,.knop--primair,.knop--keyword,.preview-button--primary{background:var(--d-navy);color:#fff!important;border-color:var(--d-navy)}
.ca-btn--primary:hover,.cb-btn--primary:hover,.knop--primair:hover,.knop--keyword:hover,.preview-button--primary:hover{background:#244363}
.ca-btn--quiet,.knop--secundair,.knop--negeren,.preview-button--secondary{border-color:var(--d-navy);color:var(--d-navy)!important;background:transparent}
.knop--negatief{background:transparent;color:var(--d-bad)!important;border-color:var(--d-bad)}
.knop--negatief:hover{background:#FAEAE6}
.ca-card .ca-actions>a.ca-btn:not(.ca-btn--primary):not(.ca-btn--quiet){border-color:transparent;padding-inline:.4rem;text-decoration:underline;text-underline-offset:2px}
.ca-actions{gap:.5rem}

/* D8 goud alleen accent, nooit titels */
.ca-scope a,.cb-scope a{color:var(--d-navy)}
.app-content-area h1 a,.app-content-area h2 a,.ca-card-title a,.cb-row-name{color:var(--d-navy)}
.login-logo{font-size:13px!important;color:var(--d-navy);letter-spacing:0;text-transform:none}
.account-tab{font-size:13px!important;padding-inline:4px;word-break:normal;overflow-wrap:normal}
.ca-scope details.ca-disc>summary,.cb-scope details>summary{color:var(--d-navy)}

/* focus en hover */
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--d-gold);outline-offset:2px}
.cb-ctable tbody tr:hover,.ca-rows>li:hover{background:rgba(168,137,71,.06)}
.cb-pills a,.cb-tabs a{transition:color .15s,background .15s}

/* grafiek */
.cp-chart{position:relative;margin:1.25rem 0;min-height:220px;max-width:100%;display:flex;flex-direction:column}
.cp-chart .cp-chart-svg{width:100%;height:180px;flex:none;display:block}
.cp-chart-legend{display:flex;flex-wrap:wrap;gap:.25rem 1rem;font-size:13px;color:var(--d-soft);margin:0 0 .35rem}
.cp-chart-label{font-size:13px;fill:var(--d-soft);color:var(--d-soft)}
.cp-chart-cost{stroke:var(--d-navy);color:var(--d-navy);fill:none;stroke-width:2}
.cp-chart-conversions{stroke:var(--d-gold);color:var(--d-gold);fill:none;stroke-width:2;stroke-dasharray:none}
.cp-chart-goal{stroke:var(--d-soft);stroke-dasharray:4 3;fill:none}
.cp-spark{display:inline-block;vertical-align:middle;margin-right:.5rem;width:90px;height:24px}
.cp-spark svg{width:100%;height:100%}
.cp-chart-grid{stroke:var(--d-line);stroke-width:1}
.cp-chart-execution{stroke:var(--d-soft);stroke-width:1}
.cp-chart-legend i{display:inline-block;width:20px;margin-right:6px;vertical-align:middle;border-top:2px solid currentColor}
.cp-chart-legend .cp-chart-conversions{border-top-style:solid;border-top-color:var(--d-gold)}
.cp-chart-legend .cp-chart-goal{border-top-style:dashed;border-top-color:var(--d-soft)}
.cp-chart-legend .cp-chart-goal{color:var(--d-soft)}
.cp-chart figcaption{color:var(--d-soft)}
.cp-chart-tooltip{position:absolute;left:8px;right:8px;bottom:22px;padding:.4rem .6rem;border-left:2px solid var(--d-gold);background:var(--cream,#FAF8F3);overflow-wrap:anywhere;pointer-events:none}
.cp-chart-tooltip[hidden]{display:none}
.app-content-area td[data-label="Kosten"],.app-content-area td[data-label="Klikken"],.app-content-area td[data-label="Conversies"],.app-content-area td[data-label="CPL"],.app-content-area td[data-label="Dagbudget"],.app-content-area td[data-label="Doel"]{text-align:right}

/* D9 mobiel */
img,svg,video{max-width:100%}
.tabel-wrapper,.zoektermen-tabel-scroll,.table-scroll{overflow-x:visible}
@media(max-width:760px){
  .app-content-area table{display:block;width:100%;min-width:0!important}
  .app-content-area table thead{display:none}
  .app-content-area table tbody,.app-content-area table tr{display:block;width:100%}
  .app-content-area table tr{padding:.6rem 0;border-top:1px solid var(--d-line)}
  .app-content-area table td{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border:0!important;padding:.2rem 0!important;width:100%!important;text-align:right}
  .app-content-area table td::before{content:attr(data-label);color:var(--d-soft);font-size:13px;text-align:left;flex:none;max-width:45%}
  .app-content-area table td:not([data-label])::before{content:none}
  .app-content-area table td:not([data-label]){justify-content:flex-start;text-align:left}
  .zoektermen-filterbalk,.cb-bar,.veld-rij,.formulier-acties{flex-direction:column;align-items:stretch}
  .zoekterm-rij,.inst-layout,.settings-main-grid{grid-template-columns:1fr!important}
  .ca-btn,.cb-btn,.knop{flex:1 1 auto}
  .cb-tabs{overflow-x:visible;flex-wrap:wrap}
  .cb-tabs a{white-space:normal}
  .app-content-area *{min-width:0;overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Tabel Campagnes: eigen horizontale scroll onder 1000px, mobiel blijft gestapeld */
.campagne-zoektermen > .pagina-kop{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
.meetbron-account,.meetbron-account form,.meetbron-account .veld-rij,.meetbron-account .veld{min-width:0!important;max-width:100%;box-sizing:border-box}
.meetbron-account .veld-rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.meetbron-account .veld{display:block!important;width:100%!important}
.meetbron-account select{display:block;box-sizing:border-box;width:100%!important;max-width:100%!important;min-width:0!important}
.meetbron-account form{display:block!important}
.meetbron-account button{max-width:100%;white-space:normal}
#koppelingen,#koppelingen .kopp-lijst{min-width:0!important;max-width:100%;box-sizing:border-box}
#koppelingen .knop{white-space:normal!important;max-width:100%;min-width:0!important;box-sizing:border-box;overflow-wrap:anywhere}
@media(max-width:760px){.meetbron-account .veld-rij{grid-template-columns:1fr}.meetbron-account{display:block!important;width:100%}.meetbron-account form{margin-top:12px}}
.cb-ctable-scroll{max-width:100%}
@media(min-width:761px) and (max-width:999px){.cb-ctable-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.cb-ctable-scroll .cb-ctable{min-width:880px}.cb-ctable-scroll .cb-ctable th,.cb-ctable-scroll .cb-ctable td{white-space:nowrap}}
.cb-term-head{border-top:0!important;color:var(--d-soft);font-size:13px}
.cb-term-head .cb-term-nums{font-size:13px}
@media(max-width:1080px){.cb-term-head{display:none}}
.kopp-lijst{display:grid;gap:1rem;padding:1rem}.kopp-rij{border-top:1px solid var(--d-line);padding-top:.8rem;display:grid;gap:.6rem}.kopp-rij form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:end}.kopp-rij .veld-select{min-width:220px;max-width:100%}
.ca-organisch ul{list-style:none;padding:0}