/* Matchpage · login, skeleton en mobiel (≤ 900 px). Bouwt op system.css (Firmtale-designsysteem). */
/* skeleton */
.sk{display:grid;grid-template-columns:var(--sidebar,240px) 1fr;min-height:100vh}
.sk-side{background:var(--bg-sidebar,#fafafa);border-right:1px solid var(--border,#eee);padding:16px;display:grid;gap:10px;align-content:start}
.sk-main{padding:28px;display:grid;gap:16px;align-content:start}
.sk i{display:block;height:14px;border-radius:6px;background:linear-gradient(90deg,#eef0f3 25%,#f6f7f9 37%,#eef0f3 63%);background-size:400% 100%;animation:sk 1.2s ease infinite}
.sk .h{height:26px;width:40%}.sk .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.sk .c{height:150px;border-radius:12px}.sk .t{height:220px;border-radius:12px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
details.adv{margin-top:4px}details.adv summary{font-size:11px;color:var(--fg-3,#6b7280);cursor:pointer}
.nav-btn,.nav-scrim{display:none}
@media (max-width:1000px){
  .sk{grid-template-columns:1fr}.sk-side{display:none}.sk .cards{grid-template-columns:1fr}
  .nav-btn{display:inline-flex}
  .app .sidebar{display:flex!important;position:fixed;left:0;top:0;bottom:0;width:min(280px,84vw);z-index:60;transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.15);height:100%}
  body.nav-open .sidebar{transform:none}
  body.nav-open .nav-scrim{display:block;position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:50}
  .topbar{padding:0 10px;gap:6px;overflow-x:auto}.topbar .crumbs{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .page{padding:16px!important}.page-h{flex-direction:column;align-items:flex-start!important;gap:10px}
  .page-h h1{font-size:20px}
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr!important}
  div[style*="grid-template-columns:1fr 280px"]{grid-template-columns:1fr!important}
  /* tabellen worden kaarten */
  .table thead{display:none}
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table tr{border:1px solid var(--border,#e5e7eb);border-radius:10px;margin:0 0 8px;padding:8px 12px;background:var(--bg,#fff)}
  .table td{border:0!important;padding:3px 0!important;text-align:left!important;max-width:none!important}
  .table td.foot{border:0}
  .tabs{overflow-x:auto;white-space:nowrap}
  .settings{padding:16px!important}.srow{flex-wrap:wrap;gap:8px}.srow .v{flex-wrap:wrap}
  .prow{grid-template-columns:1fr!important}.prow .pmap{display:none}
  .modal{max-width:calc(100vw - 24px)!important}.modal .g2{grid-template-columns:1fr!important}
  .toolbar{flex-wrap:wrap}.toolbar .search{width:100%!important}
}
/* login: gesplitst zoals wireframe 04-inloggen */