/* tracks: opmaak één op één naar SugarWOD (zie Projects/SugarWod 2.0/referentie/dashboard/01-programmeren.md). */
/* Drie kolommen: lijst ±1/4, formulier 5/12, Best Practices 1/3 */
.trk { display: flex; gap: 20px; align-items: flex-start; }
.trk-l { flex: 0 0 calc((100% - 40px) * 3 / 12); min-width: 0; }
.trk-m { flex: 0 0 calc((100% - 40px) * 5 / 12); min-width: 0; }
.trk-r { flex: 1 1 0; min-width: 0; }
@media (max-width: 900px) { .trk { flex-direction: column; } .trk > div { flex: 1 1 auto; width: 100%; } }

.trk-h { font-size: 18px; font-weight: 700; color: #616161; margin: 0 0 12px; }

/* Lijst met tracks */
.trk-filters { display: flex; gap: 6px; margin-bottom: 10px; }
.trk-filters .btn, .trk-filters .btn:hover { background: #e0e0e0; border: 0; color: #616161; font-size: 11px; border-radius: 3px; padding: 2px 8px; }
.trk-filters .btn b { font-weight: 700; }
.trk-filters .btn .fa { font-size: 10px; }
.trk-list { overflow-x: auto; }
.trk-list table.dt td a { cursor: pointer; }
.trk-list table.dt td a:hover { color: #2296F3; }
.trk-label { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.4; padding: 1px 8px; border-radius: 3px; }
.trk-label.on { background: #dff0d8; color: #3c763d; }
.trk-label.off { background: #eeeeee; color: #9e9e9e; }

/* Formulier */
.trk-namerow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.trk-namerow label { margin: 0; }
/* Veldlabels (Name, Type, Description, ...) in normaal gewicht, niet vet */
#trk-form .form-group > label:not(.radio), #trk-form .trk-namerow label { font-weight: 400; font-size: 13px; color: #616161; }
.trk-act { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #616161; }
.trk-switch { position: relative; display: inline-block; width: 46px; height: 24px; border-radius: 12px; background: #bdbdbd; cursor: pointer; transition: background .15s; outline: none; }
.trk-switch .knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
.trk-switch .fa { position: absolute; left: 7px; top: 5px; font-size: 13px; color: #fff; opacity: 0; transition: opacity .15s; }
.trk-switch.on { background: #2296F3; }
.trk-switch.on .knob { left: 24px; }
.trk-switch.on .fa { opacity: 1; }
.trk-switch.dis { cursor: default; opacity: .6; }
.trk-switch:focus-visible { box-shadow: 0 0 0 3px rgba(34,150,243,.3); }
.trk-sub { margin: 0 0 6px 22px; }
.trk-muted { color: #9e9e9e; margin-left: 3px; }
/* "See examples": eigen regel onder de uitleg, blauw met gestippelde onderstreping */
.help .trk-exlink { display: table; margin-top: 3px; font-size: 12px; color: #2296F3; font-style: normal; font-weight: 500; text-decoration: none; border-bottom: 1px dashed #2296F3; }
.help .trk-exlink:hover { color: #2296F3; text-decoration: none; }
.trk-custom { margin-left: 22px; }

/* Best Practices */
.trk-bp { font-size: 12px; line-height: 1.6; }
.trk-hc { font-style: italic; margin: 14px 0 6px; }
.trk-ext { display: block; color: #e91e8c; margin: 4px 0; }
.trk-ext:hover { color: #c2185b; }
.trk-ext .fa { margin-right: 5px; }

/* See examples (venster) */
.trk-ex { display: flex; gap: 20px; }
.trk-ex-col { flex: 1; min-width: 0; }
.trk-ex-col h4 { margin: 0 0 6px; }
.trk-ex-card { border: 1px solid #e7eaec; border-radius: 3px; }
.trk-ex-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid #eeeeee; }
.trk-ex-row:last-child { border-bottom: 0; }
.trk-tag { display: inline-block; font-size: 10px; font-weight: 700; color: #fff; padding: 1px 5px; border-radius: 3px; margin-left: 4px; }
.trk-tag.rx { background: #2296F3; }
.trk-tag.sc { background: #9e9e9e; }
@media (max-width: 600px) { .trk-ex { flex-direction: column; } }