/* CAT-traject: overzicht CAT-begeleider en popup beoordeling gespreksverslag (alleen binnen .cat-modern) */

.cat-modern { font-family: 'Inter', Arial, sans-serif; color: #1c2433; font-size: 13px; line-height: 1.5; }
.cat-modern a { color: #0b4a96; }
.cat-modern a:hover { color: #163e77; }
.cat-modern h1.cat-titel { margin: 0; font-size: 24px; font-weight: 700; color: #163e77; }
.cat-modern .cat-subtitel { color: #4a5568; }
.cat-modern .cat-muted { color: #4a5568; font-size: 12px; }

/* Kop */
.cat-modern .cat-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cat-modern .cat-kop-tekst { display: flex; flex-direction: column; gap: 2px; }
.cat-modern .cat-intro { margin: 0 0 16px; color: #2d3748; }

/* Statuslabels */
.cat-pill { display: inline; font-weight: 600; font-size: 12px; white-space: nowrap; color: #4a5568; }
.cat-pill-ok { color: #1f6b41; }
.cat-pill-wacht { color: #b45f06; }
.cat-pill-nee { color: #a11a1a; }
.cat-pill-info { color: #163e77; }

/* Voortgangsstappen */
.cat-modern .cat-stappen { background: #ffffff; border: 1px solid #dfe4ec; border-radius: 4px; padding: 16px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cat-modern .cat-stap { display: flex; flex-direction: column; gap: 6px; }
.cat-modern .cat-stap-balk { height: 6px; border-radius: 3px; background: #dfe4ec; }
.cat-modern .cat-stap-naam { font-size: 12px; color: #4a5568; }
.cat-modern .cat-stap-status { font-size: 13px; font-weight: 600; color: #5b6576; }
.cat-modern .cat-stap-ok .cat-stap-balk { background: #1f7a4a; }
.cat-modern .cat-stap-ok .cat-stap-status { color: #1f6b41; }
.cat-modern .cat-stap-wacht .cat-stap-balk { background: #b45f06; }
.cat-modern .cat-stap-wacht .cat-stap-status { color: #8a4500; }
.cat-modern .cat-stap-nee .cat-stap-balk { background: #c53030; }
.cat-modern .cat-stap-nee .cat-stap-status { color: #a11a1a; }
.cat-modern .cat-stap-info .cat-stap-balk { background: #4477cd; }
.cat-modern .cat-stap-info .cat-stap-status { color: #163e77; }

/* Actie vereist */
.cat-modern .cat-actie { background: #fff6e8; border: 1px solid #dfe4ec; border-radius: 4px; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; color: #5c2e00; }
.cat-modern .cat-actie-tekst { display: flex; gap: 12px; align-items: flex-start; }
.cat-modern .cat-actie strong { font-size: 14px; display: block; }

/* Knoppen: standaard input.button van de applicatie */
.cat-modern .cat-actie input.button { min-width: 140px; }

/* Layout: inhoud + zijkolom; zijkolom schuift op smalle schermen (tablet staand) onder de inhoud */
.cat-modern .cat-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.cat-modern .cat-main { flex: 999 1 520px; min-width: 0; }
.cat-modern .cat-aside { flex: 1 0 300px; min-width: 0; }

/* Betrokkenen in de zijkolom: label boven de gegevens */
.cat-modern .cat-aside .table-form > tbody > tr > th, .cat-modern .cat-aside .table-form > tbody > tr > td { display: block; width: auto !important; padding-left: 0; padding-right: 0; }
.cat-modern .cat-aside .table-form > colgroup, .cat-modern .cat-aside .table-form > col { display: none; }
.cat-modern .cat-aside .table-form > tbody > tr > th { padding-top: 10px; font-weight: 600; color: #163e77; }
.cat-modern .cat-aside table.cattraject-gegevens { width: 100%; }
.cat-modern .cat-aside table.cattraject-gegevens td:nth-child(1) { width: 90px; color: #4a5568; }
.cat-modern .cat-aside table.cattraject-gegevens td { word-break: break-word; }

/* Fieldsets als kaarten */
.cat-modern fieldset { border: 1px solid #dfe4ec !important; border-radius: 4px; background: #ffffff; padding: 0 20px 14px !important; margin: 0 0 16px !important; box-sizing: border-box; min-width: 0; }
.cat-modern fieldset > legend { float: left; width: 100%; box-sizing: border-box; padding: 14px 0 10px; margin: 0 0 10px; border-bottom: 1px solid #eef1f5; font-size: 15px; font-weight: 600; color: #163e77; }
.cat-modern fieldset > legend img { display: none; }
.cat-modern fieldset > legend + * { clear: both; }
.cat-modern .table-form th, .cat-modern .table-form .form-title { color: #4a5568; font-weight: 500; }
.cat-modern .table-form td { padding-top: 4px; padding-bottom: 4px; }
.cat-modern .table-form table, .cat-modern table.smarttable { border-collapse: collapse; }

/* Kaart gespreksverslag */
.cat-modern .cat-kaart-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cat-modern .cat-feedback { margin: 0 0 12px; padding: 12px 14px; border-radius: 4px; background: #f8fafc; border: 1px solid #eef1f5; }
.cat-modern .cat-feedback-titel { font-weight: 600; margin-bottom: 4px; }
.cat-modern .cat-historie { border-top: 1px solid #eef1f5; padding-top: 10px; }
.cat-modern .cat-historie summary { cursor: pointer; font-weight: 600; color: #0b4a96; }
.cat-modern .cat-tabel-wrap { overflow-x: auto; margin-top: 10px; }
.cat-modern table.cat-tabel { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 520px; }
.cat-modern table.cat-tabel th { text-align: left; padding: 8px 10px; border-bottom: 1px solid #dfe4ec; font-weight: 600; color: #4a5568; }
.cat-modern table.cat-tabel td { padding: 8px 10px; border-bottom: 1px solid #eef1f5; vertical-align: top; }
.cat-modern table.cat-tabel tr:last-child td { border-bottom: 0; }

/* Popup beoordeling gespreksverslag */
.cat-popup .cat-popup-kop { padding: 0 0 10px; margin-bottom: 16px; border-bottom: 1px solid #dfe4ec; }
.cat-popup .cat-popup-kop h1 { margin: 0; font-size: 16px; font-weight: 700; color: #163e77; }
.cat-popup fieldset > legend { display: none; }
.cat-popup fieldset { padding-top: 14px !important; }
.cat-popup .cat-keuze { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.cat-popup .cat-keuze label.cat-keuze-kaart { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid #dfe4ec; border-radius: 4px; cursor: pointer; font-weight: 600; background: #ffffff; }
.cat-popup .cat-keuze label.cat-keuze-kaart input { width: 18px; height: 18px; margin: 0; }
.cat-popup .cat-keuze label.cat-keuze-ja.cat-gekozen { border-color: #1f6b41; background: #f1f9f4; }
.cat-popup .cat-keuze label.cat-keuze-nee.cat-gekozen { border-color: #a11a1a; background: #fdf3f3; }
.cat-popup textarea { width: 100% !important; box-sizing: border-box; padding: 10px 12px; border: 1px solid #b9c4d4; border-radius: 6px; font-family: inherit; font-size: 13px; font-weight: normal !important; }
.cat-popup .table-form tr, .cat-popup .table-form th, .cat-popup .table-form td { display: block; width: auto !important; padding-left: 0; padding-right: 0; }
.cat-popup .table-form th label { font-weight: 600; color: #163e77; font-size: 14px; }
.cat-popup details.cat-feedback summary { list-style-position: inside; }
.cat-popup table.cat-regels { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.cat-popup table.cat-regels th { width: 140px; text-align: left; vertical-align: top; font-weight: 500; color: #4a5568; padding: 4px 10px 4px 0; }
.cat-popup table.cat-regels td { vertical-align: top; padding: 4px 0; }

/* Melding (bijv. foutpagina), midden in de pagina */
.cat-modern .cat-melding { max-width: 560px; margin: 40px auto; text-align: center; }
.cat-modern .cat-melding-icoon { font-size: 36px; color: #b45f06; margin-bottom: 12px; }
.cat-modern .cat-melding h1.cat-titel { font-size: 20px; margin-bottom: 10px; }
.cat-modern .cat-melding p { margin: 0; color: #2d3748; }