/* public/schermen/tracker/database.css — scherm "database" van de producttracker (ontwerp 22-10-2026, bord 04). Alles onder .tt; kleuren alleen uit de huid-variabelen (nooit een hexwaarde). */
.tt .db{display:flex;flex-direction:column;gap:14px}
.tt .db-kop{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.tt .db .paginakop{min-width:0;flex:1 1 420px}
.tt .db .paginakop .k{white-space:normal;overflow:visible}
.tt .db-acties{display:flex;gap:8px;align-items:center}
.tt .db-zoek{min-width:340px;color:var(--tekst)}
.tt .db-zoek::placeholder{color:var(--grijs)}

/* filterrij */
.tt .db-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tt .db-filters .sel,.tt .db-filters .sub{min-height:32px;font-family:inherit}
.tt .db-filters .sub .chip,.tt .db-sel .chip{padding:1px 6px}
.tt .db-ruim{flex:1}
.tt .db-sortlabel{color:var(--grijs);font-weight:400;min-height:32px;font-family:inherit}
.tt .db-popwrap{position:relative;display:inline-block}
.tt td.db-popwrap,.tt div.db-popwrap{display:block}
.tt .db-pop{position:absolute;z-index:30;top:calc(100% + 6px);left:0;max-width:92vw;background:var(--vlak);border:1px solid var(--rand);border-radius:12px;box-shadow:0 12px 32px rgba(17,24,39,.14);padding:14px 16px;display:flex;flex-direction:column;gap:8px;text-align:left;font-size:13px;white-space:normal}
.tt .db-rij .db-pop{left:auto;right:0}
.tt .db-pop .pk{font-weight:600;font-size:14px}
.tt .db-optie{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;border-radius:var(--r2);padding:7px 10px;font:inherit;font-size:13px;color:var(--tekst);cursor:pointer}
.tt .db-optie:hover{background:var(--grijs-100)}
.tt .db-optie.aan{background:var(--blauw-100);color:var(--blauw-900);font-weight:600}
.tt .db-lijstje{display:flex;flex-direction:column;max-height:260px;overflow:auto}
.tt .db-boomrij{display:flex;align-items:center;gap:4px}
.tt .db-boomrij .db-optie{flex:1;min-width:0}
.tt .db-boomrij .knop.link{min-height:30px;padding:0 10px;font-size:15px}
.tt .db-kruimel{min-height:20px;display:flex;align-items:center;gap:8px}
.tt .db-pad{padding:6px 10px}
.tt .db-vink{display:flex;align-items:center;gap:8px;padding:4px 2px;cursor:pointer}
.tt .db-actief{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:2px 0}
.tt .db-nieuw{display:flex;gap:6px;align-items:center;border-top:1px solid var(--rand);padding-top:10px;margin-top:2px}
.tt .db-nieuw .veld{flex:1;min-width:0;min-height:32px;padding:4px 8px}
.tt .db-nieuw .knop{min-height:32px;padding:0 10px}

/* tabel: één raster per rij, de kolommen komen uit --db-kol (kolommenkiezer) */
.tt .db-groep{border:1px solid var(--rand);border-radius:12px;background:var(--vlak)}
.tt .db-thead,.tt .db-rij{display:grid;grid-template-columns:var(--db-kol);gap:6px;align-items:center;padding:0 10px}
.tt .db-thead{padding-top:8px;padding-bottom:8px;border-bottom:1px solid var(--rand);font-size:12px;color:var(--grijs);font-weight:500;line-height:1.25;align-items:end}
.tt .db-thead .r,.tt .db-rij .r{text-align:right;font-variant-numeric:tabular-nums}
.tt .db-thead .r .db-sorteer{justify-content:flex-end}
.tt .db-sorteer{display:inline-flex;align-items:center;gap:3px;border:0;background:transparent;padding:0;font:inherit;font-size:12px;font-weight:500;color:var(--grijs);cursor:pointer;text-align:inherit;line-height:1.25}
.tt .db-sorteer:hover,.tt .db-sorteer.aan{color:var(--blauw-900)}
.tt .db-sorteer i{font-style:normal;font-size:9px}
.tt .db-rij{padding-top:10px;padding-bottom:10px;border-top:1px solid var(--rand2);font-size:13px;cursor:pointer}
.tt .db-thead+.db-rij{border-top:0}
.tt .db-rij:hover{background:var(--grijs-100)}
.tt .db-rij.eigen{background:var(--blauw-100)}
.tt .db-rij .r{white-space:normal}
.tt .db-rij .r .chip{margin-left:2px;padding:1px 6px;white-space:nowrap}
.tt .db-rij .r .chip.neutraal{margin-left:0}
.tt .db-foto{width:36px;height:36px;border-radius:8px;background:var(--bg);border:1px solid var(--rand);display:flex;align-items:center;justify-content:center;color:var(--grijs);flex:none;overflow:hidden}
.tt .db-product{min-width:0}
.tt .db-titel{font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tt .db-titel a{color:var(--tekst)}
.tt .db-titel a:hover{color:var(--blauw-900)}
.tt .db-titel .chip{vertical-align:middle;padding:1px 6px;font-weight:500}
.tt .db-meta{margin-top:1px;line-height:1.4}
.tt .db-bol{font-size:12px}
.tt .db-cat{line-height:1.35;min-width:0}
.tt .db-cat .k{font-size:12px}
.tt .db-leeg{padding:34px 20px;text-align:center;color:var(--grijs)}
.tt .db-voet{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 14px;border-top:1px solid var(--rand2);color:var(--grijs)}
.tt .db-pag{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tt .db-pag .knop{min-height:28px;padding:0 8px}
.tt .db-pag .knop:disabled{opacity:.5}
.tt .db-per{min-height:28px;padding:0 8px;font-family:inherit}
.tt [data-db-tabel].bezig{opacity:.55;transition:opacity .15s}
.tt .db-regels{display:flex;flex-direction:column;gap:6px}
.tt .db-cat{display:block}
.tt .db-cat-naam{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}