/* Gedeelde opmaak voor de calculatorpagina's (BMI, eGFR, CHA2DS2-VASc). Alles hangt onder .calc-* zodat style.css niet wordt geraakt. */
.calc-layout{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1em 1.5em; align-items: start; margin: 0.75em 0 70px;}
.calc-layout [hidden]{display: none !important;}
.calc-invoer fieldset{border: solid 3px rgb(43, 155, 225); border-radius: 3px; padding: 6px 12px 10px; margin: 0 0 0.8em; min-width: 0;}
.calc-invoer legend{font-weight: bold; padding: 0 6px; line-height: 17px;} /* vaste hoogte: de rand loopt door het midden van de legend */
.calc-invoer legend sub, .calc-invoer legend sup{line-height: 0;} /* subscripts (CHA2DS2) maken de legend anders hoger */
.calc-invoer label{display: inline; font-weight: normal; line-height: inherit;}
.calc-invoer input[type="number"]{width: 80px; padding: 4px; font: inherit;}
.calc-veld{margin: 5px 0;}
.calc-label{display: inline-block; min-width: 140px;}
.calc-hint{color: #6a737c; font-size: 0.9em;}
.calc-keuzes{display: flex; flex-wrap: wrap; gap: 4px;}
.calc-keuzes label{display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid #c8ccd1; border-radius: 3px; cursor: pointer; background: #fff;}
.calc-keuzes input{margin: 0;}
.calc-keuzes label:has(input:checked){background: #e6f3fc; border-color: rgb(43, 155, 225);}
.calc-keuzes.lijst{flex-direction: column; align-items: stretch;}
.calc-keuzes.lijst label{justify-content: space-between;}
.calc-punten{font-weight: bold; color: #0077cc; min-width: 1.5em; text-align: right;}
.calc-fout{color: #b00020;}

.calc-resultaat{position: sticky; top: 60px; margin-top: 7px;} /* gelijk met de bovenrand van het linker fieldset (legend 17px / 2 - rand) */
.calc-kaart{border: solid 3px rgb(43, 155, 225); border-radius: 3px; padding: 8px 12px; background: #fff; margin-bottom: 0.8em;}
.calc-kaart h5{margin: 0 0 6px;}
.calc-groot{font-size: 2em; font-weight: bold; line-height: 1.1;}
.calc-leeg{color: #6a737c;}
.calc-kopie textarea{width: 100%; box-sizing: border-box; height: 4.5em; font: inherit; font-size: 0.9em; padding: 4px;}

/* Kleurschaal met markering (zie resources/script/calculator-ui.js) */
.calc-schaal{position: relative; margin: 22px 0 4px;}
.calc-schaal-balk{display: flex; height: 16px; border-radius: 3px; overflow: hidden;}
.calc-schaal-balk > span{height: 100%;}
.calc-schaal-labels{display: flex; font-size: 0.75em; color: #6a737c;}
.calc-schaal-labels > span{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 2px; text-align: center;}
.calc-schaal-wijzer{position: absolute; top: -20px; transform: translateX(-50%); font-weight: bold; font-size: 0.85em; white-space: nowrap; transition: left 0.3s;}
.calc-schaal-wijzer::after{content: ""; position: absolute; left: 50%; top: 16px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #303030;}

/* Risicokleuren (volgorde laag -> hoog) */
.risico-onder{background: #cfe3f5;} .risico-0{background: #dff0d8;} .risico-1{background: #fff5a8;} .risico-2{background: #fbbb75;} .risico-3{background: #f06a43; color: #fff;} .risico-4{background: #b20e16; color: #fff;}
.calc-matrix{border-collapse: collapse; width: 100%; font-size: 0.9em;}
.calc-matrix th, .calc-matrix td{border: 2px solid #fff; padding: 5px 6px; text-align: left;}
.calc-matrix th{background: #eef2f5; font-weight: bold;}
.calc-matrix td.actief{outline: 3px solid #303030; outline-offset: -3px; font-weight: bold;}
.calc-matrix td.actief::before{content: "▶ ";}

@media only screen and (max-width: 810px){
  .calc-layout{grid-template-columns: minmax(0, 1fr);}
  .calc-resultaat{position: static;}
}

/* Overzichtspagina calculators */
.calc-overzicht{display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 0.6em 0 30px;}
.calc-overzicht a{display: block; border: solid 3px rgb(43, 155, 225); border-radius: 3px; padding: 10px 12px; text-decoration: none; background: #fff;}
.calc-overzicht a:hover{background: #e6f3fc;}
.calc-overzicht b{display: block; color: #0077cc; margin-bottom: 4px;}
.calc-overzicht span{color: #6a737c; font-size: 0.9em;}