:root{
  --accent:#6b46c1; --accent-600:#5a39a6; --text:#222; --muted:#666;
  --border:#dcdcdc; --bg:#fff; --radius:6px; --fs:14px; --h:36px;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;color:var(--text);background:var(--bg)}
/* Centrera top-menyn men behåll loggan till vänster */
header{
  display:grid;
  grid-template-columns: 1fr auto 1fr;  /* vänster-spacer | NAV | höger-spacer */
  align-items:center;
  gap:16px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  background:#fff;
}

header > strong{            /* "Massflöden" kvar till vänster */
  justify-self:start;
}

header > nav{               /* NAV i mitten */
  justify-self:center;
}

/* Mobil: lägg nav under loggan och gör den scrollbar i sidled om den blir lång */
@media (max-width: 720px){
  header{
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  header > nav{
    justify-self:start;
    overflow-x:auto;
    white-space:nowrap;
  }
}
nav a{margin-right:12px;text-decoration:none;color:#333;padding:6px 10px;border-radius:6px}
nav a.active, nav a:hover{background:var(--accent);color:#fff}
main{padding:16px;max-width:1100px;margin:0 auto}
table{width:100%;border-collapse:collapse;margin:12px 0}
th,td{border:1px solid var(--border);padding:8px;text-align:left;font-size:var(--fs)}
th{background:#f7f7fb}
label{display:block;margin:8px 0;font-size:var(--fs)}
input,select{height:var(--h);padding:0 8px;border:1px solid var(--border);border-radius:6px;width:100%;font-size:var(--fs)}
fieldset{border:1px solid var(--border);border-radius:6px;padding:8px;margin:12px 0}
legend{padding:0 6px;color:#555}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{display:inline-block;padding:8px 12px;background:var(--accent);color:#fff;border-radius:8px;border:none;cursor:pointer}
.btn.secondary{background:#eee;color:#333}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.muted{color:var(--muted);font-size:13px}

/* Gör åtgärdsknappar i tabeller på samma rad */
td.actions{white-space:nowrap}
td.actions .btn{display:inline-block;margin-right:6px}
td.actions form{display:inline;margin:0}