/* One stylesheet for all pages. Colors, spacing and fonts are defined as
   variables here, and all building blocks use only these variables. */
:root {
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-size: 15px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --radius: 6px;
  --content-width: 1100px;

  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #1d2330;
  --muted: #5d6677;
  --border: #dde1e8;
  --accent: #2f5bd3;
  --accent-text: #ffffff;
  --danger: #c0352b;
  --danger-text: #ffffff;

  --pending-bg: #fff4d6;  --pending-fg: #7a5200;
  --approved-bg: #dff5e4; --approved-fg: #17602c;
  --revoked-bg: #fbe1df;  --revoked-fg: #8c1f17;
  --open-bg: #e1eafd;     --open-fg: #1f3f99;
  --closed-bg: #eceef2;   --closed-fg: #4a5160;

  --ok-bg: #dff5e4;   --ok-fg: #17602c;
  --err-bg: #fbe1df;  --err-fg: #8c1f17;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171d;
    --surface: #1c2028;
    --text: #e6e9ef;
    --muted: #9aa3b3;
    --border: #2e3440;
    --accent: #6f93ff;
    --accent-text: #0d1117;
    --danger: #ef6b60;
    --danger-text: #0d1117;
    --pending-bg: #3b3115;  --pending-fg: #f2cf73;
    --approved-bg: #173323; --approved-fg: #8fe0a6;
    --revoked-bg: #3d1d1b;  --revoked-fg: #f3a39b;
    --open-bg: #1b2747;     --open-fg: #a8c0ff;
    --closed-bg: #2a2e37;   --closed-fg: #b3b9c6;
    --ok-bg: #173323;  --ok-fg: #8fe0a6;
    --err-bg: #3d1d1b; --err-fg: #f3a39b;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}
a { color: var(--accent); }
h1 { font-size: 1.5rem; margin: 0 0 var(--space-3); }
h2 { font-size: 1.15rem; margin: var(--space-4) 0 var(--space-2); }
code, pre, .mono { font-family: var(--font-mono); font-size: 0.9em; }
.muted { color: var(--muted); }

/* Layout: header with navigation, content below */
.header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.header-inner, .content {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-3);
}
.header-inner { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.brand { font-weight: 600; color: var(--text); text-decoration: none; }
.nav { display: flex; gap: var(--space-3); flex: 1; }
.nav a { color: var(--muted); text-decoration: none; padding: var(--space-1) 0; border-bottom: 2px solid transparent; }
.nav a.active { color: var(--text); border-bottom-color: var(--accent); }
.user { display: flex; align-items: center; gap: var(--space-2); color: var(--muted); }

/* Cards and stats */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.stat { text-decoration: none; color: inherit; }
.stat .value { font-size: 2rem; font-weight: 600; }
.stat .label { color: var(--muted); }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 0.9em; }
tr:last-child td { border-bottom: 0; }
td.actions { white-space: nowrap; }
dl.props { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: 0; }
dl.props dt { color: var(--muted); }
dl.props dd { margin: 0; word-break: break-all; }

/* Status badges */
.badge { display: inline-block; padding: 0 var(--space-2); border-radius: 999px; font-size: 0.85em; font-weight: 500; }
.badge-pending  { background: var(--pending-bg);  color: var(--pending-fg); }
.badge-approved { background: var(--approved-bg); color: var(--approved-fg); }
.badge-revoked  { background: var(--revoked-bg);  color: var(--revoked-fg); }
.badge-open     { background: var(--open-bg);     color: var(--open-fg); }
.badge-closed   { background: var(--closed-bg);   color: var(--closed-fg); }

/* Buttons and forms */
.btn {
  display: inline-block;
  font: inherit;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-danger  { background: var(--danger); border-color: var(--danger); color: var(--danger-text); }
.btn-large { padding: var(--space-2) var(--space-4); font-size: 1.05rem; }
form.inline { display: inline; }
.form-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: end; }
.form-row label { display: flex; flex-direction: column; gap: var(--space-1); color: var(--muted); font-size: 0.9em; }
input, select {
  font: inherit;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}
label.check { display: flex; gap: var(--space-2); align-items: center; color: var(--text); }

/* Messages */
.msg { padding: var(--space-2) var(--space-3); border-radius: var(--radius); margin-bottom: var(--space-3); }
.msg-ok  { background: var(--ok-bg);  color: var(--ok-fg); }
.msg-err { background: var(--err-bg); color: var(--err-fg); }

/* User text: always as text, never as HTML, with wrapping */
pre.user-text {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin: 0;
  max-height: 60vh;
  overflow: auto;
}

.login { max-width: 380px; margin: var(--space-5) auto; text-align: center; }