/* Atelier-dashboards 'Cijfers' en 'Verloop' (ad-*), afgeleid van het KISS-dashboard; licht en donker thema, goud als accent. */
.ad-dashboard { padding: 16px; background: #f4f4f1; min-height: 100%; font-size: 13px; color: #1f2937; }
[data-bs-theme='dark'] .ad-dashboard { background: #1c1c1c; color: #e6e6e6; }
.ad-loading { padding: 40px; text-align: center; color: #6B7280; }
.ad-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06); padding: 16px; min-width: 0; }
[data-bs-theme='dark'] .ad-card { background: #262626; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.ad-card-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ad-sub { font-weight: 400; font-size: 12px; opacity: .7; }
.ad-muted { opacity: .65; }
.ad-good { color: #059669; }
.ad-bad { color: #DC2626; }
.ad-right { margin-left: auto; font-size: 12px; }
.ad-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.ad-filter-label { font-weight: 600; }
.ad-year { width: 110px; }
.ad-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.ad-kpi { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; }
.ad-kpi-icon { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; background-repeat: no-repeat; background-position: center; background-size: 22px; }
.ad-kpi-body { flex: 1; min-width: 0; }
.ad-kpi-title { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; opacity: .7; margin-bottom: 4px; }
.ad-kpi-value { font-size: 24px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ad-kpi-trend { font-size: 12px; margin-top: 4px; font-weight: 500; }
.ad-icon-revenue { background-color: #FBF4E3; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8873e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 17 9 11 13 15 21 7'/><polyline points='14 7 21 7 21 14'/></svg>"); }
.ad-icon-month { background-color: #EFF6FF; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E88E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>"); }
.ad-icon-paid { background-color: #ECFDF5; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343A047' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); }
.ad-icon-open { background-color: #FEF2F2; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>"); }
.ad-icon-print { background-color: #EFF6FF; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230099FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2 3 7v10l9 5 9-5V7z'/><path d='M3 7l9 5 9-5'/><line x1='12' y1='12' x2='12' y2='22'/></svg>"); }
[data-bs-theme='dark'] .ad-kpi-icon { filter: saturate(.8); }
.ad-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.ad-col-2 { grid-column: span 2; }
.ad-col-3 { grid-column: span 3; }
.ad-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 220px; align-items: end; padding-top: 18px; }
.ad-chart-col { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; min-width: 0; }
.ad-chart-col.ad-future { opacity: .45; }
.ad-bars { display: flex; align-items: flex-end; gap: 3px; height: 160px; width: 100%; justify-content: center; }
.ad-bar { width: 38%; max-width: 22px; border-radius: 3px 3px 0 0; min-height: 1px; transition: height .2s; }
.ad-bar-cur { background: #c9a961; }
.ad-bar-prev { background: rgba(128,128,128,.35); }
.ad-bar-green { background: #43A047; }
.ad-chart-val { font-size: 10px; opacity: .75; margin-top: 4px; font-variant-numeric: tabular-nums; height: 14px; }
.ad-chart-label { font-size: 11px; opacity: .8; white-space: nowrap; }
.ad-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin: 0 2px; }
.ad-swatch-cur { background: #c9a961; }
.ad-swatch-prev { background: rgba(128,128,128,.35); }
.ad-swatch-green { background: #43A047; }
.ad-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(128,128,128,.4); vertical-align: middle; margin-right: 6px; }
table.ad-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.ad-table th { text-align: left; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid rgba(128,128,128,.35); white-space: nowrap; }
table.ad-table td { padding: 5px 8px; border-bottom: 1px solid rgba(128,128,128,.15); vertical-align: top; }
table.ad-table td.num, table.ad-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.ad-table tr.ad-total td { font-weight: 600; border-top: 2px solid rgba(128,128,128,.35); }
table.ad-table tr.ad-row-bad td { background: rgba(220,38,38,.10); }
table.ad-table a { color: inherit; text-decoration: underline; text-decoration-color: rgba(128,128,128,.5); }
table.ad-table a:hover { color: #a8873e; }
.ad-scroll { max-height: 440px; overflow: auto; }
.ad-scroll table.ad-table thead th { position: sticky; top: 0; background: #fff; }
[data-bs-theme='dark'] .ad-scroll table.ad-table thead th { background: #262626; }
.ad-bar-inline { display: inline-block; width: 60px; height: 6px; background: rgba(128,128,128,.2); border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.ad-bar-inline > span { display: block; height: 100%; background: #c9a961; }
/* Pijplijn */
.ad-pipeline { display: flex; align-items: flex-end; gap: 4px; padding-top: 10px; }
.ad-stage { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.ad-stage-bar-wrap { height: 120px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.ad-stage-bar { width: 60%; max-width: 44px; min-height: 2px; border-radius: 4px 4px 0 0; }
.ad-stage-count { font-size: 18px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
.ad-stage-label { font-size: 11px; opacity: .8; text-align: center; white-space: nowrap; }
.ad-stage-amount { font-size: 10px; opacity: .6; font-variant-numeric: tabular-nums; height: 14px; }
.ad-stage-arrow { align-self: center; opacity: .35; font-size: 18px; padding-bottom: 40px; }
@media (max-width: 1200px) { .ad-kpi-row { grid-template-columns: repeat(2, 1fr); } .ad-row { grid-template-columns: 1fr; } .ad-col-2, .ad-col-3 { grid-column: span 1; } .ad-stage-label { white-space: normal; } }