/* wp-updater admin-web - light palette shared with the rest of this infra family
   (administratie, spamfilter-web) as of 2026-08-19, swapped from the original dark "terminal"
   theme for consistency and better contrast (muted-on-dark text was too dim in the original).
   Same tokens/values as spamfilter-web's assets/style.css - keep the two in sync if either
   changes, same as any other shared-convention drift across this fleet. */

:root {
  --bg: #FBFAF7;
  --panel: #FFFFFF;
  --code-bg: #F4F2EC;
  --border: #E4E1D8;
  --text: #1B1D22;
  --muted: #6B7078;
  --accent: #3454D1;
  --accent-hover: #2A44AD;
  --error: #B3432B;
  --ok: #2F7D5C;
  --warn: #C77B12;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
}

.sidebar-brand {
  font-family: "SFMono-Regular", Consolas, monospace;
  color: var(--accent);
  padding: 0 1rem 1rem;
  font-size: 0.9rem;
}
.cursor { animation: blink 1s step-start infinite; }
@keyframes blink { 50% { opacity: 0; } }

.sidebar nav { display: flex; flex-direction: column; flex: 1; }
.sidebar nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-left: 2px solid transparent;
}
.sidebar nav a:hover { color: var(--text); background: rgba(0,0,0,0.03); }
.sidebar nav a.active { color: var(--accent); border-left-color: var(--accent); background: rgba(52,84,209,0.08); }

.sidebar-footer {
  padding: 1rem;
  font-size: 0.8rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
}
.sidebar-footer form { margin-top: 0.5rem; }
.sidebar-footer button {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}
.sidebar-footer button:hover { color: var(--text); border-color: var(--muted); }

.main { flex: 1; padding: 2rem; max-width: 1100px; }

h1 { font-size: 1.4rem; margin: 0 0 1rem; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
}

.placeholder-notice {
  color: var(--muted);
  font-size: 0.9rem;
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 1rem;
}

.alert {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.alert-error { background: #FBEAE6; color: var(--error); border: 1px solid #EFC9BE; }
.alert-ok { background: #E9F5EF; color: var(--ok); border: 1px solid #BFE3D0; }

.page-loaded-at { color: var(--muted); font-size: 0.75rem; margin-top: 2rem; }

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-ok { background: #E9F5EF; color: var(--ok); }
.badge-warn { background: #FBF1E1; color: var(--warn); }
.badge-error { background: #FBEAE6; color: var(--error); }
.badge-pending { background: #F1EFE8; color: var(--muted); }

.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
  width: 320px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2rem;
}
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.25rem; }
.form-group input,
.form-group select {
  width: 100%;
  padding: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
}
.btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { background: var(--accent-hover); }
.btn-danger { background: var(--error); }
.btn-danger:hover { background: #8F3320; }
.btn-small { padding: 0.25rem 0.6rem; font-size: 0.8rem; font-weight: 500; }

.inline-form { display: inline-block; margin: 0 0.5rem 0.5rem 0; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th, .data-table td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
.data-table th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }
.data-table tr:last-child td { border-bottom: none; }
.data-table a { color: var(--accent); text-decoration: none; }
.data-table a:hover { text-decoration: underline; }

.key-value-table th { width: 160px; color: var(--muted); font-weight: 500; vertical-align: top; }

.install-command {
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--code-bg);
  border: 1px solid var(--border);
  padding: 1rem;
  border-radius: 6px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.85rem;
}
.panel-highlight { border-color: var(--accent); }
.panel + .panel, .panel-spaced { margin-top: 1.5rem; }