-gebaseerde
super-admin-schermen (data-label op elke | , gebruikersverzoek 2026-07-21). */
@media (max-width: 760px) {
.sa-table-wrap { overflow-x: visible; }
/* min-width: 0 (heraudit 2026-09-05): zonder reset blijft de kaartweergave de desktop-
min-width van 560px houden en knipt .admin-content (overflow-x: hidden) de rechterkant —
juist de waardekolom — af op alle 14 sa-table-pagina's; zelfde fix als Sets.razor.css. */
.sa-table, .sa-table thead, .sa-table tbody, .sa-table tr { display: block; width: 100%; min-width: 0; }
.sa-table thead { display: none; }
.sa-table tr {
border: 1px solid var(--bd2);
border-radius: 10px;
margin-bottom: 8px;
padding: 4px 0;
}
.sa-table td {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-bottom: none;
}
.sa-table td[data-label]::before {
content: attr(data-label);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--mut);
flex: none;
}
.sa-table td.sa-actions-cell {
justify-content: flex-start;
max-width: none;
}
}
/* ---- Paginering (patroon globale .table-footer + .prj-pager, Projecten.razor.css) ---- */
.sa-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 4px 0;
}
.sa-pager {
display: flex;
align-items: center;
gap: 8px;
}
/* Geen eigen padding/font-size/line-height meer (spacing-audit 2026-09-13, precedent
Schades.razor.css .schd-pager): de override drukte deze ‹/›-knoppen naar 4px/10px padding
en had de font-size nooit meegekregen van de leesbaarheidsaudit 2026-08-23 (stond nog op
het oude 15px), waardoor ze zowel krapper als groter tekstueel oogden dan elke andere
.btn-secondary. */
@media (max-width: 560px) {
.sa-footer { flex-wrap: wrap; }
}
/* ---- Dialoog (patroon Categorieen.razor: role=dialog + aria-modal + focus + Escape) ---- */
.sa-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 80;
padding: 20px;
}
.sa-dialog {
background: var(--card);
border-radius: 14px;
padding: 24px;
max-width: 460px;
width: 100%;
max-height: calc(100vh - 40px);
overflow-y: auto;
box-shadow: var(--shadow-overlay, 0 24px 60px rgba(0, 0, 0, 0.3));
display: flex;
flex-direction: column;
gap: 12px;
}
.sa-dialog-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 6px;
}
/* ---- Plan-CRUD-formulier (SuperAdminLicenties.razor) ---- */
.sa-checkbox-row {
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
}
.sa-field-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
/* ---- Afhankelijkheden (SuperAdminAfhankelijkheden.razor) ---- */
.sa-deps-panel {
padding: 18px 20px;
margin-bottom: 14px;
}
.sa-deps-panel-title {
font-size: 15.5px;
font-weight: 700;
margin: 0 0 12px;
}
.sa-deps-panel-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* Geaccepteerde advisory: markering via een linker rand i.p.v. opacity (heraudit 2026-09-05) —
opacity .65 dimde tekst én link tot ≈4,7:1 (AAA vraagt 7:1); de status staat toch al
tekstueel in de "geaccepteerd"-pil, dus een kleur-onafhankelijke rand volstaat. */
.sa-deps-advisory-accepted {
border-left: 3px solid var(--bd2);
padding-left: 8px;
}
.sa-deps-accept-form {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
flex-wrap: wrap;
}
.sa-deps-accept-form .field {
min-width: 240px;
height: var(--control-height);
}
/* Verticale veldenstack voor formulieren met lange labels (bv. SuperAdminStickerPrijzen.razor) —
een 3-koloms grid knijpt lange NL-labels ("Basisbedrag per bestelling (€)") stuk. */
.sa-field-stack {
display: flex;
flex-direction: column;
gap: 16px;
}
.sa-field-stack label {
display: flex;
flex-direction: column;
gap: 6px;
}
.sa-field-stack label > span {
font-size: 15px;
font-weight: 700;
}
.sa-module-edit-grid {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 320px;
overflow-y: auto;
padding-right: 4px;
}
.sa-module-edit-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 150px;
gap: 8px;
align-items: center;
}
.sa-module-edit-row:has(.sa-module-edit-price) {
grid-template-columns: minmax(0, 1fr) 150px 110px;
}
.sa-module-edit-label {
font-size: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 560px) {
.sa-field-grid {
grid-template-columns: 1fr;
}
.sa-module-edit-row,
.sa-module-edit-row:has(.sa-module-edit-price) {
grid-template-columns: 1fr;
}
}
/* .sa-toast is vervallen (heraudit 2026-09-05): de super-admin-pagina's gebruiken nu de globale
.toast/.toast-hide uit tokens.css (fixed, met toastIn/toastOut) — de inline variant schoof de
pagina-inhoud omlaag bij verschijnen en verdween abrupt. */
|