/* The app's own styles, on top of the Ridderholt design system. */

/* ---- Sign-in */
.signin { gap: var(--space-5); }
.google-button { display: flex; align-items: center; justify-content: center; gap: var(--space-4); width: 100%; height: 44px; padding: 0 var(--space-5);
  border: 1px solid #747775; border-radius: var(--radius-2); background: #ffffff; color: #1f1f1f; font-weight: var(--weight-medium); }
.google-button:hover { background: #f2f2f2; text-decoration: none; }
.google-mark { flex: none; }
[data-theme="dark"] .google-button { background: #131314; border-color: #8e918f; color: #e3e3e3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .google-button { background: #131314; border-color: #8e918f; color: #e3e3e3; } }

/* ---- Admin */
form.inline { display: inline; }

/* ---- Connecting an assistant (mcpauth's consent page) */
.mcpauth-consent { display: grid; gap: var(--space-3); }
.mcpauth-consent dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.mcpauth-consent dd { margin: 0; }
.mcpauth-note, .mcpauth-warning { padding: var(--space-3) var(--space-4); border-radius: var(--radius-2); font-size: var(--text-sm); }
.mcpauth-note { background: var(--surface-2); }
.mcpauth-warning { background: var(--warn-bg); color: var(--warn-fg); }
.mcpauth-consent form { display: flex; gap: var(--space-3); }
.mcpauth-consent button { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-2); background: var(--surface); color: var(--text);
  font: inherit; font-weight: var(--weight-medium); cursor: pointer; }
.mcpauth-consent button:hover { background: var(--surface-2); }
.mcpauth-consent button[value="allow"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.mcpauth-consent button[value="allow"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ---- The header's customer switcher */
.tenant-switch { display: flex; align-items: center; gap: var(--space-2); flex: 0 1 220px; min-width: 0; margin: 0; }
.tenant-switch select.input { width: 100%; min-width: 0; height: 32px; min-height: 32px; padding-top: 0; padding-bottom: 0; font-weight: var(--weight-medium); }
.tenant-one { color: var(--text-2); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .tenant-switch { flex: 1 1 auto; } }

/* ---- Badges and numbers in a service's colours */
.badge-bad { background: transparent; box-shadow: inset 0 0 0 1px var(--fail-fg); color: var(--fail-fg); }
.stats dd.kind-ok { color: var(--pass-fg); }
.stats dd.kind-warn { color: var(--warn-fg); }
.stats dd.kind-bad { color: var(--fail-fg); }
.stats dd.kind-running { color: var(--accent); }

/* ---- Home */
.home-part { display: grid; gap: var(--space-6); }
.home-list { list-style: none; margin: 0; padding: 0; }
.home-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.home-label { font-weight: var(--weight-medium); }
.home-list .badge { margin-left: 0; }
.home-detail { flex: 1 1 100%; }
@media (min-width: 561px) { .home-detail { flex: 1 1 auto; text-align: right; } }

/* ---- Forms on the portal's own pages */
.form-narrow { max-width: var(--form-max); }
tr.current td { background: var(--surface-2); }

/* ---- A page a service drew */
.service-page { display: grid; gap: var(--space-6); min-width: 0; }
.service-page > * { min-width: 0; }

/* ---- Privacy and Terms */
.legal { max-width: 70ch; }
.legal ul { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-3); }
.legal p { margin: 0; }