:root { --fg: #1d1d1f; --muted: #6b6b70; --bg: #fafafa; --card: #fff; --line: #e3e3e8; --accent: #2557d6; --danger: #c62828; --ok: #1a7f37; --soon: #ffe08a; }
/* Dark colours: from the system setting unless the theme button chose light, or chosen with it (theme.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --fg: #ececf0; --muted: #9a9aa3; --bg: #141416; --card: #1d1d21; --line: #2e2e34; --accent: #7aa2ff; --danger: #ff6b6b; --ok: #4ade80; --soon: #6b5200; }
}
:root[data-theme="dark"] { --fg: #ececf0; --muted: #9a9aa3; --bg: #141416; --card: #1d1d21; --line: #2e2e34; --accent: #7aa2ff; --danger: #ff6b6b; --ok: #4ade80; --soon: #6b5200; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; color: var(--fg); background: var(--bg); }
a { color: var(--accent); }
[hidden] { display: none !important; }
.top { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.brand { font-weight: 600; margin-right: auto; }
a.brand { color: inherit; text-decoration: none; }
.top nav { display: flex; gap: 16px; align-items: center; min-width: 0; }
/* A long username in "Log out <name>" is cut off with "…" so the header still fits on a phone; the tooltip has it all.
   Only the name shrinks, so "Log out" / "abmelden" stays readable on whichever side of the name the language puts it. */
.top nav > * { flex-shrink: 0; }
.top .logout { flex-shrink: 1; min-width: 0; }
.top .logout button { display: flex; align-items: baseline; gap: 0.3em; max-width: 100%; white-space: nowrap; }
.top .logout .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* The language switch names the other language; on phones its short code (and tighter spacing) keeps
   the header on one line with "Log out" / "abmelden" readable. Screen readers get the name (aria-label). */
.language .short { display: none; }
@media (max-width: 480px) {
  .top { gap: 10px; padding: 12px; }
  .top nav { gap: 10px; }
  .language .full { display: none; }
  .language .short { display: inline; }
}
.theme-toggle svg { display: none; }
:root[data-theme="auto"] .theme-auto, :root[data-theme="light"] .theme-light, :root[data-theme="dark"] .theme-dark { display: block; }
main { max-width: 860px; margin: 24px auto; padding: 0 16px; }
/* Long single words (German compounds, file names with underscores) wrap instead of widening the page. */
main { overflow-wrap: break-word; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
button, .button { display: inline-block; font: inherit; padding: 6px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); cursor: pointer; text-decoration: none; }
button[type=submit], .button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { color: var(--danger); }
button.link { border: 0; background: none; color: var(--accent); padding: 0; }
form.inline { display: inline; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
form div { margin-bottom: 12px; }
label { display: block; font-weight: 500; }
input[type=text], input[type=password], input[type=number], textarea, select { width: 100%; max-width: 480px; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); }
input[type=file] { display: block; width: 100%; padding: 32px 16px; border: 2px dashed var(--line); border-radius: 8px; background: var(--card); }
progress { width: 100%; max-width: 480px; }
.muted, .helptext { color: var(--muted); font-size: .9em; }
.eyebrow { margin: 0; color: var(--muted); font-size: .9em; }
.eyebrow + h1 { margin-top: 2px; }
.errorlist { color: var(--danger); list-style: none; padding: 0; margin: 4px 0; }
.messages { list-style: none; padding: 0; }
.messages li { padding: 8px 12px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); }
/* A checkbox comes before its label on one line, its help text below them. */
form div:has(> input[type=checkbox]) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
form div:has(> input[type=checkbox]) > input { order: -1; margin: 0; }
/* A long label wraps next to the box instead of moving below it on narrow screens. */
form div:has(> input[type=checkbox]) > label { flex: 1 1 0; min-width: 0; }
form div:has(> input[type=checkbox]) > .helptext { order: 1; flex-basis: 100%; }
form div:has(> input:disabled) > label, button:disabled { opacity: .55; }
button:disabled { cursor: not-allowed; }
.status-active { color: var(--ok); font-weight: 500; }
.status-inactive { color: var(--danger); font-weight: 500; }
/* An expiry date with one day or less left, marked like a highlighter (also where it wraps onto two lines). */
.expires-soon { background: var(--soon); color: var(--fg); border-radius: 4px; padding: 1px 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.note { padding: 12px; background: var(--card); border-left: 3px solid var(--accent); }
.link-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* The link field keeps a readable width; on phones the buttons move below it. */
.link-row input { flex: 1 1 14em; min-width: 0; max-width: none; }
/* A dashboard row's link buttons sit side by side where the table has room (their column asks for
   the width of both, in either language), else one below the other instead of widening the table. */
.link-buttons { display: flex; flex-wrap: wrap; gap: 6px 8px; }
td:has(> .link-buttons) { width: 18.5em; }
.link-row .button, .link-buttons > * { white-space: nowrap; }
.add-files { margin-top: 24px; }