/* public/schermen/artikel/artikel.css — de nieuwe artikelpagina (goedgekeurd ontwerp 14-10, docs/ontwerp/artikel/*.html).
   De stijlregels van de borden, ongewijzigd (de vijf borden hebben exact dezelfde regels), alleen afgeschermd onder .ap zodat ze de rest
   van de app niet raken. Klassen en volgorde zijn die van het ontwerp: de markup in de schermbestanden is dezelfde als in de HTML-bestanden. */
.ap{margin:0;background:#F8F9FA;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#17223A}
.ap a{color:#2864AE}
.ap a:hover{color:#1E4F8C}
.ap .k{font-size:13px;color:#5D6675}
.ap .kaart{background:#fff;border-radius:16px;padding:20px 22px;box-shadow:0 1px 2px rgba(20,30,60,.06);min-width:0}
.ap .tegel{background:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 1px 2px rgba(20,30,60,.06);display:flex;flex-direction:column;gap:3px;min-width:0}
.ap .chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:600}
.ap .up{background:#DCFCE7;color:#166534}
.ap .down{background:#FEE2E2;color:#991B1B}
.ap .neutraal{background:#F1F3F6;color:#17223A}
.ap .warn{background:#FEF3C7;color:#92400E}
.ap .blauw{background:#EAF1FA;color:#2864AE}
.ap .sel{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e3e4e6;border-radius:6px;padding:9px 12px;font-size:13px;color:#17223A;min-height:40px;box-sizing:border-box;text-decoration:none;cursor:pointer}
.ap .tab{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:5px;font-size:13px;color:#5D6675;text-decoration:none;border:0;background:transparent}
.ap .tab.aan{background:#2864AE;color:#fff}
.ap .dtab{padding:10px 4px;font-size:14px;color:#5D6675;text-decoration:none;border-bottom:2px solid transparent}
.ap .dtab.aan{color:#2864AE;border-bottom-color:#2864AE;font-weight:600}
.ap .knop{display:inline-flex;align-items:center;gap:6px;background:#2864AE;color:#fff;border:0;border-radius:5px;padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;min-height:38px}
.ap .knop.wit{background:#2864AE;color:#fff;border:0}   /* actieknoppen zijn vol blauw met witte tekst (Twan 16-10), geen witte of tertiaire varianten */
.ap a.knop,.ap a.knop:hover{color:#fff}
.ap .ikoon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#5D6675}
.ap table{border-collapse:collapse;width:100%;font-size:13px}
.ap th{text-align:right;font-weight:600;color:#5D6675;padding:10px 10px;border-bottom:1px solid #e3e4e6;white-space:nowrap}
.ap th:first-child,.ap td:first-child{text-align:left}
.ap td{text-align:right;padding:11px 10px;border-bottom:1px solid #EEF0F5;white-space:nowrap;vertical-align:top}
.ap .bod{display:inline-block;border:1px solid #e3e4e6;border-radius:5px;padding:3px 8px;min-width:52px;text-align:right;background:#fff}
.ap .voorstel{background:#FFFBEB;border:1px solid #FDE68A;border-radius:8px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;white-space:normal;text-align:left}
.ap .prod{display:flex;align-items:center;gap:10px;min-width:0}
.ap .prod .img{width:40px;height:40px;border-radius:6px;background:#F1F3F6;border:1px solid #e3e4e6;display:flex;align-items:center;justify-content:center;color:#6B7486;flex:none}
.ap .prod .img.l{width:56px;height:56px;border-radius:8px}
.ap .srt{background:transparent;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:3px}
.ap .srt .pijl{font-size:9px;color:#B4BAC6;line-height:1}
.ap .srt.aan{color:#2864AE}
.ap .srt.aan .pijl{color:#2864AE}
.ap .sub{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:13px;color:#5D6675;text-decoration:none;border:1px solid #e3e4e6;background:#fff}
.ap .sub.aan{background:#EAF1FA;color:#2864AE;border-color:#B9CFE9;font-weight:600}
.ap .scrol{overflow-x:auto}
.ap .graf{display:flex;flex-direction:column;gap:4px;background:#fff;border-radius:8px}
.ap .graf .t{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#5D6675}
.ap .leg{display:flex;gap:14px;font-size:11.5px;color:#5D6675;justify-content:center}
.ap .leg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}
.ap .veld{border:1px solid #e3e4e6;border-radius:6px;padding:8px 10px;font-size:13px;min-height:38px;box-sizing:border-box;background:#fff;color:#17223A}
.ap .regel{border:1px solid #e3e4e6;border-radius:10px;background:#fff;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.ap .schak{width:36px;height:20px;border-radius:999px;background:#2864AE;position:relative;flex:none}
.ap .schak::after{content:"";position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:#fff}
.ap .schak.uit{background:#C9CEDB}
.ap .schak.uit::after{right:auto;left:2px}
.ap .lnav{display:flex;flex-direction:column;gap:2px}
.ap .lnav a{padding:9px 12px;border-radius:6px;font-size:13px;color:#17223A;text-decoration:none}
.ap .lnav a.aan{background:#EAF0F8;color:#2864AE;font-weight:600}
.ap .ktegel{background:#fff;border-radius:12px;padding:12px 14px;border:1px solid #e3e4e6;cursor:pointer}
.ap .ktegel.aan{border:2px solid #2864AE}
.ap .vk{background:#fff;border-radius:12px;border:1px solid #e3e4e6;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.ap .vk.p1{border-left:4px solid #991B1B}
.ap .vk.p2{border-left:4px solid #2864AE}
.ap .vk.p0{border-left:4px solid #9A5B00}
.ap .feit{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px;background:#E2E8F2;border-radius:10px;padding:12px 14px}
.ap .feit div div:first-child{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#5D6675;margin-bottom:2px}
.ap .feit div div:last-child{font-size:13px}
.ap .deel{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid #EEF0F5;font-size:13px;flex-wrap:wrap}
.ap .deel input{width:18px;height:18px}
.ap .ring{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none}
.ap .stap{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #EEF0F5;font-size:13px}
.ap .schak{display:inline-block;vertical-align:middle}
.ap td.links{text-align:left}
.ap .sub{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:13px;color:#5D6675;text-decoration:none;border:1px solid #e3e4e6;background:#fff}
.ap .sub.aan{background:#EAF1FA;color:#2864AE;border-color:#B9CFE9;font-weight:600}
.ap .tabel td.links,.ap .tabel th.links{text-align:left}
.ap .ster{color:#F5A623;letter-spacing:1px;font-size:14px}
.ap .ster.rood{color:#991B1B}
.ap .ster.oranje{color:#9A5B00}
.ap .ster.groen{color:#166534}
.ap .arm{border:1px solid #e3e4e6;border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;background:#fff}
.ap .arm.wint{border:2px solid #2864AE}
.ap .waarom{background:#E2E8F2;border-radius:10px;padding:12px 14px;font-size:13px}
.ap .lijst{display:flex;flex-direction:column}
.ap .lijst a,.ap .lijst div.r{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid #EEF0F5;font-size:13px;color:#17223A;text-decoration:none}
.ap .groot{font-size:26px;font-weight:700;letter-spacing:-.5px}
.ap .knop,.ap .sel,.ap .sub{box-sizing:border-box}
.ap a.knop{line-height:1.2}
.ap .kop{font-weight:700;font-size:15px}
.ap .kopie{background:#F1F3F6;border-radius:8px;padding:10px 12px;font-family:ui-monospace,Menlo,monospace;font-size:12px}
.ap{min-width:0}
.ap .ap-laden{color:#5D6675;font-size:13px;padding:18px 4px}
.ap svg text{font-family:inherit}
.ap [data-ap]{cursor:pointer}
.ap th.links{text-align:left}
.ap .chip{white-space:nowrap}
/* De wrappers van het kader zijn geen vormgeving: de afstand van 18 px van het bord geldt tussen alle blokken (kop, tabs, stuurbalk, secties). */
.ap div[data-ap-terug],.ap div[data-ap-kop],.ap div[data-ap-tabs],.ap div[data-ap-stuur]:not([data-waarde]),.ap div[data-ap-inhoud]{display:contents}
/* Tooltip bij hover op een grafiek (zelfde donkere stijl als .spark-tooltip van de app). */
.ap .ap-tip{position:absolute;top:0;left:0;z-index:30;display:none;background:#1c2129;color:#fff;font-size:12px;line-height:1.5;padding:7px 10px;border-radius:8px;box-shadow:0 8px 20px rgba(20,24,31,.25);pointer-events:none;white-space:nowrap}
/* In een halve kolom mag het label van een rekening-regel afbreken, zodat de kolom België zichtbaar blijft. */
.ap #prijs td:first-child{white-space:normal}
.ap svg[data-tip],.ap [data-tip]{cursor:crosshair}   /* alle grafieken hebben dezelfde cursor als de selecteerbare */