/* public/schermen/tracker/instellingen.css — scherm "instellingen" van de producttracker (ontwerp 22-10-2026, bord 05). Alles onder .tt; kleuren alleen uit de huid-variabelen (nooit een hexwaarde). */
.tt .in{display:flex;flex-direction:column;gap:14px}
.tt .in-kopbalk{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.tt .in .paginakop .k{white-space:normal;overflow:visible}
.tt .in-kolommen{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.tt .in-kol{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:1360px){.tt .in-kolommen{grid-template-columns:minmax(0,1fr)}}
.tt .in-uitleg{margin:4px 0 10px}

/* rijen: één raster per soort */
.tt .in-kop,.tt .in-rij{display:grid;gap:8px;align-items:center;padding:0 2px}
.tt .in-kop{padding-top:8px;padding-bottom:8px;border-bottom:1px solid var(--rand);font-size:12px;color:var(--grijs);font-weight:500}
.tt .in-rij{padding-top:6px;padding-bottom:6px;border-top:1px solid var(--rand2);font-size:13px}
.tt .in-kop+.in-rij{border-top:0}
.tt .in-kop .r,.tt .in-rij .r{text-align:right}
.tt .in-tak{grid-template-columns:38px minmax(0,1fr) 96px 96px 160px}
.tt .in-diep{grid-template-columns:minmax(0,1fr) 78px 160px 28px}
.tt .in-code{grid-template-columns:48px minmax(0,1fr) minmax(0,110px)}
.tt .in-rij.in-code{align-items:start;padding-top:9px;padding-bottom:9px}
.tt .in-rij .r .k{font-size:11.5px;line-height:1.2}
.tt .in-naam{min-width:0;line-height:1.3;overflow-wrap:anywhere}
.tt .in-tak .r{white-space:nowrap}
.tt .in-tak.uit .in-naam{color:var(--grijs)}
.tt .in-leeg{padding:12px 2px}
.tt .in-schak{border:0;cursor:pointer;min-width:34px;justify-content:center;font-family:inherit}
.tt .in-schak:hover{filter:brightness(.96)}

/* segmentbediening 1 / 2 bij ruimte / 1–4 */
.tt .in-seg{display:inline-flex;border:1px solid var(--rand);border-radius:8px;overflow:hidden;background:var(--vlak);white-space:nowrap}
.tt .in-seg button{border:0;border-right:1px solid var(--rand);background:transparent;padding:0 7px;min-height:24px;font:inherit;font-size:11.5px;color:var(--tekst);cursor:pointer}
.tt .in-seg button:last-child{border-right:0}
.tt .in-seg button.aan{background:var(--blauw-900);color:var(--wit);font-weight:500}
.tt .in-seg button:not(.aan):hover:not(:disabled){background:var(--grijs-100)}
.tt .in-seg.uit{opacity:.45}

/* categorieën dieper volgen */
.tt .in-diepkop{margin-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tt .in-diepkop>.k{flex:1 1 220px}
.tt .in-kies{position:relative;flex:1 1 220px;min-width:200px}
.tt .in-kies .veld{width:100%}
.tt .in-resultaten{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);max-height:260px;overflow:auto;background:var(--vlak);border:1px solid var(--rand);border-radius:10px;box-shadow:0 12px 32px rgba(17,24,39,.14);display:flex;flex-direction:column}
.tt .in-resultaten[hidden]{display:none}
.tt .in-resultaten button{border:0;background:transparent;text-align:left;padding:8px 12px;font:inherit;font-size:13px;color:var(--tekst);cursor:pointer}
.tt .in-resultaten button:hover{background:var(--blauw-100)}
.tt .in-diepkop .knop{min-height:32px}
.tt .in-slot{margin-top:10px}

/* extensie */
.tt .in-knoppen{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.tt .in-knoppen .knop{min-height:32px}
.tt .in-sleutel{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.tt .in-kopie{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tt .in-kopie code{flex:1 1 220px;min-width:0;background:var(--bg);border:1px solid var(--rand);border-radius:8px;padding:8px 10px;font-family:ui-monospace,Menlo,monospace;font-size:12px;word-break:break-all;user-select:all}