@import url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.2.8/index.css");

:root {
  --background: oklch(0.9764 0.0013 286.3755);
  --foreground: oklch(0.2593 0.0259 248.858);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2593 0.0259 248.858);
  --primary: oklch(0.4721 0.0927 237.7893);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.948 0.0063 255.4758);
  --muted: oklch(0.948 0.0063 255.4758);
  --muted-foreground: oklch(0.5025 0.0261 254.5164);
  --accent: oklch(0.9175 0.0177 234.5132);
  --accent-foreground: oklch(0.3818 0.0757 237.4085);
  --destructive: oklch(0.5413 0.155 26.0539);
  --border: oklch(0.9046 0.0098 252.8166);
  --input: oklch(0.9046 0.0098 252.8166);
  --ring: oklch(0.5051 0.0989 237.3787);
  --radius: 0.625rem;
  color-scheme: light;
  font-family: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-size: 0.875rem;
  line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

header, main { width: min(960px, calc(100% - 2rem)); margin: 0 auto; }

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 0;
}

.brand { font-weight: 600; color: var(--foreground); text-decoration: none; }
.brand:hover { text-decoration: none; }

nav { display: flex; gap: 0.35rem; align-items: center; }
.organization-switch { display: flex; gap: 0.4rem; align-items: center; }
.organization-switch label { display: flex; gap: 0.4rem; align-items: center; margin: 0; }
.organization-switch select { width: auto; max-width: 14rem; margin: 0; }
@media (max-width: 800px) {
  header { flex-wrap: wrap; gap: 0.75rem; }
  nav { flex-wrap: wrap; }
}
nav a {
  color: var(--foreground);
  border-radius: calc(var(--radius) - 2px);
  padding: 0.4rem 0.7rem;
  text-decoration: none;
}
nav a:hover { background: var(--accent); color: var(--accent-foreground); text-decoration: none; }

h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.4rem; }
h2 { font-size: 1rem; font-weight: 600; margin: 0 0 0.6rem; }
p { color: var(--muted-foreground); }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  box-shadow: 0 1px 2px hsl(210 29% 14% / 0.05);
}
th, td { text-align: left; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted-foreground); font-weight: 500; background: color-mix(in oklch, var(--muted) 55%, white); }
tr:last-child td { border-bottom: 0; }

form.card, .card, fieldset {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 1px 2px hsl(210 29% 14% / 0.05);
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
}
fieldset { border: 1px solid var(--border); }
legend { padding: 0 0.35rem; font-weight: 600; }

label { display: block; margin: 0.7rem 0; }
input[type="text"], input[type="email"], select {
  width: min(24rem, 100%);
  height: 2.25rem;
  margin-top: 0.3rem;
  padding: 0 0.75rem;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 35%, transparent);
}

button, a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding: 0 1rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent;
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
button:hover, a.button:hover { background: color-mix(in oklch, var(--primary) 90%, black); text-decoration: none; }
button.quiet, a.quiet {
  background: var(--card);
  color: var(--foreground);
  border-color: var(--border);
  box-shadow: 0 1px 2px hsl(210 29% 14% / 0.04);
}
button.quiet:hover, a.quiet:hover { background: var(--accent); color: var(--accent-foreground); }

.error { color: var(--destructive); }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.checks {
  max-height: 28rem;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.8rem;
}
.checks table { border: 0; box-shadow: none; border-radius: 0; }
td.ops label, th label { display: flex; align-items: center; gap: 0.35rem; margin: 0; font-weight: 500; }
td.ops .muted, .muted { color: var(--muted-foreground); }

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: color-mix(in oklch, var(--muted) 30%, var(--background));
}
.login-wrap { width: min(28rem, 100%); display: grid; justify-items: center; gap: 1.5rem; }
.login-wrap img { height: 9rem; width: auto; }
.login .card { width: 100%; margin: 0; display: grid; gap: 0.75rem; padding: 1.5rem; }
.login h1 { font-size: 1rem; margin: 0; }
.login .button { width: 100%; height: 2.25rem; }
.login form { display: grid; gap: 0.75rem; margin: 0; }

@media (max-width: 800px) { .grid { grid-template-columns: 1fr; } }