/* Self-hosted Inter (SIL OFL, see fonts/OFL.txt). Never load fonts from Google Fonts. */
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/*
  Tokens without a MudBlazor palette slot: light in :root, dark in .pp-dark (the class MainLayout puts on the shell; D61).
  Keep in sync with PoultryPlanTheme and PoultryPlanTheme.Dark. A colour appears nowhere else in this file, so every rule
  below follows the mode by itself (guarded by AppCssThemeTests).
*/
:root {
  --pp-accent-text: #383A0F;
  --pp-chip-text: #383A0F;
  --pp-soft-accent: #E7E8CF;
  --pp-panel: #F3F5EC;
  --pp-diff: var(--mud-palette-background);
  --pp-strong-border: var(--mud-palette-secondary);
  --pp-shadow: rgba(20, 23, 15, 0.08);
  --pp-ask-shadow: rgba(20, 23, 15, 0.06);
  --pp-secondary-muted-text: #C9CCB8;
  --pp-secondary-accent-text: #D9DB7A;
}

/* The approved dark palette (§20.1): the strong accents get a 1px accent border, chips get light olive text. */
.pp-dark {
  color-scheme: dark;
  --pp-accent-text: #C9CC3A;
  --pp-chip-text: #D9DB7A;
  --pp-soft-accent: #2F3212;
  --pp-panel: #23271C;
  --pp-diff: var(--pp-panel);
  --pp-strong-border: var(--mud-palette-primary);
  --pp-shadow: rgba(0, 0, 0, 0.4);
  --pp-ask-shadow: rgba(0, 0, 0, 0.35);
  --pp-secondary-muted-text: #C9CCB8;
  --pp-secondary-accent-text: #D9DB7A;
}

html, body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  background: var(--mud-palette-background);
  color: var(--mud-palette-text-primary);
}

a { color: var(--pp-accent-text); }

/* Pill-shaped buttons (ARCHITECTURE.md §20.1). */
.mud-button-root { border-radius: 100px; }

.pp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Top bar (approved design: Main.dc.html / Chat.dc.html) */
.pp-appbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 64px;
  box-sizing: border-box;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--mud-palette-surface);
  border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pp-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mud-palette-text-primary);
  text-decoration: none;
  white-space: nowrap;
}

.pp-logo:hover { color: var(--mud-palette-text-primary); }

.pp-logo-img { height: 22px; width: auto; display: block; flex-shrink: 0; }

/* Two logo files, one per mode: the shell's .pp-dark class decides which one shows. */
.pp-logo-dark { display: none; }

.pp-dark .pp-logo-light { display: none; }

.pp-dark .pp-logo-dark { display: block; }

.pp-logo-sub { font-size: 14px; font-weight: 500; color: var(--mud-palette-text-secondary); }

.pp-nav { display: flex; align-items: center; gap: 6px; margin-left: 12px; }

.pp-nav-item {
  padding: 8px 16px;
  border-radius: 100px;
  color: var(--mud-palette-text-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
}

.pp-nav-item:hover { background: var(--pp-soft-accent); color: var(--mud-palette-text-primary); }

.pp-nav-item.active,
.pp-nav-item.active:hover {
  background: var(--mud-palette-primary);
  color: var(--mud-palette-primary-text);
  font-weight: 600;
}

.pp-appbar-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* The avatar and the compact menu button (.pp-nav-toggle, below) share one round box, so they cannot drift apart. */
.pp-avatar,
.pp-nav-toggle {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 100px;
  border: 1px solid var(--mud-palette-lines-default);
  background: var(--pp-panel);
  color: var(--pp-chip-text);
  cursor: pointer;
}

.pp-avatar { font: 600 13px "Inter", system-ui, sans-serif; }

.pp-user-menu-name {
  padding: 10px 16px 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mud-palette-text-primary);
  white-space: nowrap;
}

.pp-logout { margin: 0; }

.pp-logout button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  font: 400 14px "Inter", system-ui, sans-serif;
  text-align: left;
  color: var(--mud-palette-text-primary);
  cursor: pointer;
}

.pp-logout button:hover { background: var(--pp-soft-accent); }

.pp-page { max-width: 1100px; margin: 0 auto; padding: 24px 32px 48px; }

/* Start page (ARCHITECTURE.md §20.3; approved design: Main.dc.html) */
.pp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  margin: 16px 0 28px;
}

.pp-welcome {
  padding: 5px 14px;
  border-radius: 100px;
  border: 1px solid var(--mud-palette-lines-default);
  background: var(--mud-palette-surface);
  color: var(--mud-palette-text-secondary);
  font-size: 13px;
  font-weight: 500;
}

.pp-hero-title {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.pp-ask {
  width: 100%;
  max-width: 760px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.pp-ask-card {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 14px 14px 20px;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 18px;
  box-shadow: 0 2px 8px var(--pp-ask-shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.pp-ask-input {
  border: none;
  outline: none;
  resize: none;
  padding: 4px 0;
  background: transparent;
  font: 400 16px "Inter", system-ui, sans-serif;
  line-height: 1.5;
  color: var(--mud-palette-text-primary);
}

.pp-ask-input::placeholder { color: var(--mud-palette-text-secondary); opacity: 1; }

.pp-ask-actions { display: flex; justify-content: flex-end; }

.pp-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.pp-suggestion {
  padding: 7px 14px;
  border-radius: 100px;
  border: 1px solid var(--mud-palette-lines-default);
  background: var(--mud-palette-surface);
  color: var(--pp-chip-text);
  font: 400 13px "Inter", system-ui, sans-serif;
  cursor: pointer;
}

.pp-suggestion:hover { background: var(--pp-panel); }

.pp-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.pp-kpi {
  padding: 18px 20px;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pp-kpi-label { font-size: 13px; color: var(--mud-palette-text-secondary); }

.pp-kpi-value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }

.pp-kpi-bar { height: 6px; border-radius: 100px; background: var(--pp-panel); overflow: hidden; }

.pp-kpi-bar-fill { height: 6px; background: var(--mud-palette-primary); }

.pp-kpi-caption { font-size: 12px; color: var(--mud-palette-text-secondary); }

.pp-start-cards { display: flex; gap: 16px; }

.pp-start-card {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  padding: 20px 22px;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  line-height: 1.25;
}

.pp-start-card-title { margin: 0; font-size: 16px; font-weight: 600; }

.pp-start-empty { margin: 0; font-size: 14px; }

.pp-conversation-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: var(--mud-palette-text-primary);
  font-size: 14px;
}

.pp-conversation-row:hover .pp-conversation-title { text-decoration: underline; }

.pp-conversation-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pp-start-muted { flex-shrink: 0; color: var(--mud-palette-text-secondary); }

.pp-activity-row { display: flex; gap: 14px; font-size: 14px; }

.pp-activity-time { width: 44px; flex-shrink: 0; color: var(--mud-palette-text-secondary); }

.pp-muted { color: var(--mud-palette-text-secondary); }

.pp-notice {
  display: inline-block;
  margin-top: 16px;
  background: var(--pp-soft-accent);
  border-radius: 12px;
  padding: 10px 14px;
}

/* Chat (ARCHITECTURE.md §20.4; approved design: Chat.dc.html) */
.pp-page:has(.pp-chat) { max-width: none; padding: 0; }

.pp-chat { display: flex; height: calc(100vh - 64px); }

.pp-chat-sessions {
  width: 260px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 20px 16px;
  background: var(--pp-panel);
  border-right: 1px solid var(--mud-palette-lines-default);
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

.pp-new-chat,
.pp-new-chat:hover {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 44px;
  margin-bottom: 14px;
  border: 1px solid var(--pp-strong-border);
  border-radius: 100px;
  background: var(--mud-palette-secondary);
  color: var(--mud-palette-secondary-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.pp-session-group { padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--mud-palette-text-secondary); }

.pp-session-group ~ .pp-session-group { padding-top: 12px; }

.pp-session {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 10px;
}

.pp-session:hover,
.pp-session:focus-within { background: var(--pp-soft-accent); }

.pp-session-link,
.pp-session-link:hover {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  color: var(--mud-palette-text-primary);
  font-size: 14px;
  text-decoration: none;
}

.pp-session-active { background: var(--pp-soft-accent); }

.pp-session-active .pp-session-link { font-weight: 500; }

.pp-session-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Delete (D31): shown on hover and keyboard focus; always on touch widths (see the 900px media query). */
.pp-session-delete {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-right: 6px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background: transparent;
  color: var(--mud-palette-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
}

.pp-session:hover .pp-session-delete,
.pp-session:focus-within .pp-session-delete { opacity: 1; }

.pp-session-delete:hover { background: var(--mud-palette-surface); color: var(--mud-palette-error); }

.pp-session-delete .mud-icon-root { font-size: 18px; }

.pp-session-confirm {
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 10px;
  background: var(--mud-palette-surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--mud-palette-text-primary);
  font-size: 13px;
  line-height: 1.4;
}

.pp-session-confirm-actions { display: flex; gap: 6px; }

.pp-confirm-delete,
.pp-confirm-cancel {
  padding: 5px 12px;
  border-radius: 100px;
  font: 600 12px "Inter", system-ui, sans-serif;
  line-height: normal;
  cursor: pointer;
}

.pp-confirm-delete {
  border: 1px solid var(--mud-palette-error);
  background: var(--mud-palette-error);
  color: var(--mud-palette-error-text);
}

.pp-confirm-cancel {
  border: 1px solid var(--mud-palette-lines-default);
  background: var(--mud-palette-surface);
  color: var(--pp-chip-text);
}

.pp-chat-main {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pp-chat-toolbar { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.pp-toolbar-label { font-size: 13px; color: var(--mud-palette-text-secondary); }

.pp-model-chip {
  padding: 5px 12px;
  border: none;
  border-radius: 100px;
  background: var(--pp-soft-accent);
  color: var(--pp-chip-text);
  font: 600 12px "Inter", system-ui, sans-serif;
  line-height: normal;
  cursor: pointer;
}

.pp-chip-outlined {
  padding: 5px 12px;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 100px;
  background: var(--mud-palette-surface);
  color: var(--pp-chip-text);
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

/* Connector chips (approved design: Chat.dc.html toolbar): one outlined pill, muted when off, "✓" and accent text when on. */
.pp-tools-label { margin-left: 12px; }

.pp-connector-chip {
  padding: 5px 12px;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 100px;
  background: var(--mud-palette-surface);
  color: var(--mud-palette-text-secondary);
  font: 500 12px "Inter", system-ui, sans-serif;
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
}

.pp-connector-chip-on { color: var(--pp-chip-text); }

.pp-connector-chip[aria-disabled="true"] { cursor: progress; }

/* D93: the Internet chip with a model that cannot search: greyed, not clickable. */
.pp-connector-chip.pp-connector-chip-unavailable { opacity: 0.5; cursor: not-allowed; }

/* D93: Bronnen under an answer (shared by chat and the agent run page). */
.pp-web-sources { align-self: flex-start; max-width: 100%; font-size: 13px; }

.pp-sources-title { margin: 8px 0 4px; font: 600 13px "Inter", system-ui, sans-serif; color: var(--mud-palette-text-secondary); }

.pp-sources { margin: 0; padding-left: 18px; }

.pp-sources a { overflow-wrap: anywhere; }

.pp-searched-for { margin-top: 6px; color: var(--mud-palette-text-secondary); }

.pp-searched-for summary { cursor: pointer; }

.pp-searched-for ul { margin: 4px 0 0; padding-left: 18px; }

.pp-search-suggestions { display: block; width: 100%; max-width: 640px; height: 90px; margin-top: 8px; border: 0; background: transparent; }

.pp-tool-activity { align-self: flex-start; max-width: 100%; }

.pp-tool-activity summary { cursor: pointer; list-style: none; }

.pp-tool-activity summary::-webkit-details-marker { display: none; }

.pp-details-cue { color: var(--pp-accent-text); font-weight: 500; }

.pp-tool-calls { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0 16px; padding: 0; list-style: none; }

.pp-tool-call { overflow-wrap: anywhere; color: var(--mud-palette-text-secondary); font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

.pp-chat-turns {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pp-chat-empty { margin: auto; text-align: center; color: var(--mud-palette-text-secondary); }

.pp-turn { display: flex; flex-direction: column; gap: 14px; }

.pp-bubble-user {
  align-self: flex-end;
  max-width: 560px;
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: 16px 16px 4px 16px;
  background: var(--pp-soft-accent);
  color: var(--mud-palette-text-primary);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.pp-answer-text {
  align-self: flex-start;
  max-width: 680px;
  box-sizing: border-box;
  padding: 14px 18px;
  border-radius: 16px 16px 16px 4px;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.pp-markdown p { margin: 0 0 8px; }
.pp-markdown p:last-child { margin-bottom: 0; }
.pp-markdown h1, .pp-markdown h2, .pp-markdown h3,
.pp-markdown h4, .pp-markdown h5, .pp-markdown h6 { font-size: 1rem; font-weight: 700; margin: 12px 0 6px; }
.pp-markdown > :first-child { margin-top: 0; }
.pp-markdown ul, .pp-markdown ol { margin: 0 0 8px; padding-left: 20px; }
.pp-markdown code { background: var(--pp-panel); border-radius: 4px; font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; }
.pp-markdown pre { margin: 0 0 8px; padding: 10px 12px; background: var(--pp-panel); border-radius: 10px; overflow-x: auto; }
.pp-markdown pre code { padding: 0; background: none; border-radius: 0; }
.pp-markdown table { border-collapse: collapse; margin: 0 0 8px; }
.pp-markdown th, .pp-markdown td { border: 1px solid var(--mud-palette-lines-default); padding: 6px 10px; text-align: left; }
.pp-markdown th { font-weight: 600; color: var(--mud-palette-text-secondary); }
.pp-markdown blockquote { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); }
.pp-markdown a { color: var(--pp-accent-text); text-decoration: underline; }

.pp-step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mud-palette-text-secondary); }

.pp-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 100px; background: var(--mud-palette-primary); }

.pp-notice-line {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--pp-soft-accent);
  color: var(--pp-chip-text);
  font-size: 13px;
}

.pp-cost { margin-top: -8px; font-size: 12px; color: var(--mud-palette-text-secondary); }

.pp-error { margin: 0; color: var(--mud-palette-error); }

.pp-composer {
  margin-top: auto;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px 12px 12px 20px;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pp-composer-input {
  flex-grow: 1;
  min-width: 0;
  padding: 0;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font: 400 15px "Inter", system-ui, sans-serif;
  line-height: 1.4;
  color: var(--mud-palette-text-primary);
}

.pp-composer-input::placeholder { color: var(--mud-palette-text-secondary); opacity: 1; }

.pp-round-button {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pp-round-button .mud-icon-root { font-size: 20px; }

.pp-send { background: var(--mud-palette-primary); }

.pp-send .mud-icon-root { color: var(--mud-palette-primary-text); }

.pp-send:disabled { opacity: 0.45; cursor: default; }

.pp-stop { background: var(--mud-palette-secondary); }

.pp-stop .mud-icon-root { color: var(--mud-palette-secondary-text); }

/* Admin pages (ARCHITECTURE.md D30; approved look: Main.dc.html). The usage bar reuses .pp-kpi-bar. */
.pp-admin-title { margin: 8px 0 4px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }

/* FocusOnNavigate focuses the page title for screen readers; it is not a control, so it shows no focus ring. */
.pp-admin-title:focus { outline: none; }

.pp-budget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px;
  margin-top: 16px;
}

/* .pp-admin-card is the same white card for admin content that is not a budget (e.g. the Modellen table). */
.pp-budget,
.pp-admin-card {
  box-sizing: border-box;
  padding: 18px 20px;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pp-budget-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.pp-budget-usage { font-size: 14px; }

.pp-budget-warning .pp-budget-usage { color: var(--pp-accent-text); font-weight: 600; }

.pp-budget-blocked .pp-budget-usage { color: var(--mud-palette-error); font-weight: 600; }

.pp-budget-blocked .pp-kpi-bar-fill { background: var(--mud-palette-error); }

.pp-budget-edit { display: flex; gap: 10px; align-items: center; margin-top: 4px; }

.pp-admin-card { margin-top: 16px; overflow-x: auto; }

.pp-models th { font-size: 13px; font-weight: 600; color: var(--mud-palette-text-secondary); white-space: nowrap; }

.pp-models td { font-size: 14px; }

.pp-model-name { font-weight: 600; }

.pp-default-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--pp-soft-accent);
  color: var(--pp-chip-text);
  font-size: 12px;
  font-weight: 600;
}

/* Beheer → Connectors (ARCHITECTURE.md D38). Status chips reuse the pill shape of .pp-default-badge. */
.pp-status {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 100px;
  background: var(--mud-palette-surface);
  color: var(--mud-palette-text-secondary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pp-status-ok { border-color: transparent; background: var(--pp-soft-accent); color: var(--pp-chip-text); }

.pp-status-error { border-color: var(--mud-palette-error); color: var(--mud-palette-error); }

.pp-connector-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px;
}

.pp-connector-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* A button row directly on a Beheer page (not inside a card) keeps its distance from the text above and the cards below. */
.pp-page-actions { margin: 16px 0; }

.pp-connector-heading { margin: 8px 0 0; font-size: 16px; font-weight: 600; }

.pp-connector-accounts { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }

@media (max-width: 900px) {
  .pp-appbar { padding: 0 16px; gap: 12px; }
  .pp-logo-sub { display: none; }
  .pp-chat { flex-direction: column; height: auto; min-height: calc(100vh - 64px); }
  .pp-chat-sessions { width: auto; max-height: 180px; border-right: none; border-bottom: 1px solid var(--mud-palette-lines-default); }
  .pp-chat-main { flex: 1 0 auto; padding: 16px; }
  .pp-session-delete { opacity: 1; }
  .pp-hero-title { font-size: 32px; }
  .pp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-start-cards { flex-direction: column; }
  .pp-start-card { flex: 0 0 auto; }
}

@media (max-width: 600px) {
  .pp-logo-img { height: 18px; }
  .pp-kpis { grid-template-columns: minmax(0, 1fr); }
}

/* Navigation: Beheer pill with its menu, and the compact menu button at 900px or narrower (ARCHITECTURE.md §20.2) */
button.pp-nav-item {
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.pp-nav-compact { display: none; }

/* The box is shared with .pp-avatar (top of this file). */
.pp-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .pp-nav { display: none; }
  .pp-nav-compact { display: block; margin-left: auto; }
  .pp-nav-compact + .pp-appbar-end { margin-left: 0; }
}

.pp-tool-review { margin-top: 6px; font-size: 13px; }

.pp-tool-review summary { cursor: pointer; color: var(--pp-accent-text); }

.pp-tool-review-label { margin: 8px 0 2px; font-weight: 600; }

.pp-tool-review-text { margin: 0; }

.pp-tool-review-schema { margin: 0; padding: 8px 10px; max-height: 240px; overflow: auto; border-radius: 8px; background: var(--pp-panel); font-size: 12px; }
/* Beheer → Veiligheidsregels (D46): pill choices for the rule type and connector. */
.pp-safety-form { display: flex; flex-direction: column; gap: 12px; }

.pp-choices { display: flex; flex-wrap: wrap; gap: 8px; }

.pp-choice {
  padding: 6px 14px;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 100px;
  background: var(--mud-palette-surface);
  color: var(--mud-palette-text-primary);
  font: 500 13px "Inter", system-ui, sans-serif;
  cursor: pointer;
}

.pp-choice-on { border-color: transparent; background: var(--pp-soft-accent); color: var(--pp-chip-text); font-weight: 600; }

.pp-choice:disabled { cursor: default; opacity: 0.6; }

.pp-safety-empty { margin: 0; font-size: 14px; }

/* Beheer → Connectors: the Schrijven toestaan switch (D46). */
.pp-connector-writes { display: flex; flex-direction: column; gap: 2px; }

.pp-connector-writes-help { margin: 0; font-size: 13px; }
.pp-stdio-variable { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pp-stdio-variable .pp-stdio-variable-name { flex: 1 1 200px; }
.pp-stdio-variable .pp-stdio-variable-value { flex: 2 1 280px; }
.pp-stdio-equals { font-weight: 600; }
.pp-connector-subheading { font-size: 1rem; margin: 16px 0 4px; }

/* Beheer → Connectors: HTTP connectors (D63–D68). Colours only through tokens (D61). */
.pp-http-connector .pp-http-description,
.pp-http-connector .pp-http-meta,
.pp-http-connector .pp-http-endpoint { margin: 0; font-size: 13px; overflow-wrap: anywhere; }

.pp-http-key { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.pp-http-key .pp-http-key-missing { flex: 1 1 100%; margin: 0; font-size: 13px; }

.pp-http-key .pp-http-key-input { flex: 1 1 280px; }

.pp-http-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--pp-panel);
  font-size: 14px;
}

.pp-http-confirm-text { flex: 1 1 280px; }

.pp-http-oauth { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.pp-add-oauth { display: flex; flex-direction: column; gap: 12px; }

.pp-add-oauth-advanced { display: flex; flex-direction: column; gap: 12px; }

.pp-add-redirect { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.pp-add-redirect .pp-add-redirect-url { flex: 1 1 320px; min-width: 0; padding: 8px 10px; border: 1px solid var(--pp-strong-border); border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 13px; }

.pp-add-redirect .pp-add-redirect-help { flex: 1 1 100%; margin: 0; font-size: 13px; }

.pp-connector-add { display: flex; flex-direction: column; gap: 12px; }

.pp-tool-groups { display: flex; flex-direction: column; gap: 8px; }

.pp-tool-group { padding: 8px 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; }

.pp-tool-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.pp-tool-group-name { font-weight: 600; }

.pp-tool-group-switch { margin-left: auto; }

.pp-tool-group-details { font-size: 14px; }

.pp-tool-group-details summary { cursor: pointer; color: var(--pp-accent-text); font-size: 13px; }

.pp-tool-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--mud-palette-lines-default);
}

.pp-tool-row-name { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }

.pp-tool-row-description { display: block; font-size: 12px; }
.pp-tool-name-unofferable { display: block; font-size: 12px; }

.pp-tool-switches { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

.pp-tool-role-hint { margin: 0; font-size: 13px; }

.pp-tool-irreversible-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }

.pp-tool-irreversible-hint { font-size: 12px; }

/* Approval card (§20.4, approved design Chat.dc.html). */
.pp-approval {
  align-self: flex-start;
  width: 100%;
  max-width: 560px;
  box-sizing: border-box;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--mud-palette-surface);
  border: 1.5px solid var(--mud-palette-primary);
  box-shadow: 0 2px 10px var(--pp-shadow);
  overflow-wrap: anywhere;
}

.pp-approval-focused { box-shadow: 0 0 0 3px var(--pp-soft-accent), 0 2px 10px var(--pp-shadow); }

.pp-approval-body { display: flex; flex-direction: column; gap: 10px; }

.pp-approval-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.pp-approval-title { font-size: 16px; font-weight: 700; }

.pp-approval-connector {
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--pp-soft-accent);
  color: var(--pp-chip-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pp-approval-action,
.pp-approval-money,
.pp-approval-meta { font-size: 13px; color: var(--mud-palette-text-secondary); }

.pp-diff {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--pp-diff);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.pp-diff-old { color: var(--mud-palette-error); text-decoration: line-through; }

.pp-diff-arrow,
.pp-diff-note { color: var(--mud-palette-text-secondary); }

.pp-diff-new { font-weight: 700; }

.pp-diff .pp-approval-money { margin-left: auto; font-size: 14px; }

.pp-approval-irreversible { margin: 0; font-size: 13px; font-weight: 600; color: var(--mud-palette-error); }

.pp-approval-reason { margin: 0; font-size: 14px; }

.pp-approval-reason-label { display: block; font-size: 12px; color: var(--mud-palette-text-secondary); }

.pp-approval-summary { font-size: 13px; }

.pp-approval-summary summary { cursor: pointer; color: var(--pp-accent-text); }

/* The call approval card (D66, D67): the arguments as readable fields, the exact JSON on demand. Tokens only (D61). */
.pp-approval-arguments { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }

.pp-approval-argument-list {
  display: grid;
  grid-template-columns: minmax(80px, max-content) 1fr;
  gap: 4px 12px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--pp-diff);
}

.pp-approval-argument-list dt {
  color: var(--mud-palette-text-secondary);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.pp-approval-argument-list dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.pp-approval-no-arguments { margin: 0; font-size: 13px; }

.pp-approval-json { font-size: 13px; }

.pp-approval-json summary { cursor: pointer; color: var(--pp-accent-text); }

.pp-approval-json-text {
  margin: 6px 0 0;
  padding: 8px 10px;
  max-height: 320px;
  overflow: auto;
  border-radius: 8px;
  background: var(--pp-panel);
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pp-approval-summary-text {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--pp-panel);
  font-size: 12px;
  white-space: pre-wrap;
}

.pp-approval-outcome { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 14px; }

.pp-approval-decide { display: flex; flex-direction: column; gap: 10px; }

.pp-approval-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.pp-approval-buttons .mud-button-root { height: 44px; padding: 0 22px; }

.pp-approval-error { margin: 0; font-size: 14px; color: var(--mud-palette-error); }

.pp-approval-busy,
.pp-approval-waiting,
.pp-approval-gone { margin: 0; font-size: 13px; color: var(--mud-palette-text-secondary); }

/* Platform notes under a turn (D43): what the model sees about approval outcomes. */
.pp-platform-notes { align-self: flex-start; max-width: 100%; }

.pp-platform-notes summary { cursor: pointer; list-style: none; }

.pp-platform-notes summary::-webkit-details-marker { display: none; }

.pp-platform-note { overflow-wrap: anywhere; font-size: 12px; color: var(--mud-palette-text-secondary); }

/* /approvals (D47): pill tabs, the focused card, and the history rows. */
.pp-tabs { display: flex; gap: 6px; margin: 16px 0; }

.pp-tab {
  padding: 8px 16px;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 100px;
  background: var(--mud-palette-surface);
  color: var(--mud-palette-text-primary);
  font: 500 14px "Inter", system-ui, sans-serif;
  cursor: pointer;
}

.pp-tab-active { border-color: transparent; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); font-weight: 600; }

.pp-approvals-focus { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }

.pp-approvals-list { display: flex; flex-direction: column; gap: 16px; }

.pp-approvals-history { display: flex; flex-direction: column; }

.pp-approvals-empty { margin: 0; font-size: 14px; }

.pp-approval-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--mud-palette-lines-default);
  color: var(--mud-palette-text-primary);
  font-size: 14px;
  text-decoration: none;
}

.pp-approval-row:hover .pp-approval-row-action { text-decoration: underline; }

.pp-approval-row-when { margin-left: auto; }

/* The deep-olive "Goedkeuringen (n)" pill (§20.2, D48). */
.pp-approvals-pill,
.pp-approvals-pill:hover {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--pp-strong-border);
  border-radius: 100px;
  background: var(--mud-palette-secondary);
  color: var(--mud-palette-secondary-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.pp-approvals-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 100px;
  background: var(--mud-palette-primary);
  color: var(--mud-palette-primary-text);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 600px) {
  .pp-approvals-pill-label { display: none; }
}

/* The deep-olive KPI card ("Wacht op jou", Main.dc.html, D48). */
.pp-kpi-dark { background: var(--mud-palette-secondary); border-color: var(--pp-strong-border); color: var(--mud-palette-secondary-text); }

.pp-kpi-dark .pp-kpi-label { color: var(--pp-secondary-muted-text); }

.pp-kpi-link { font-size: 12px; font-weight: 600; color: var(--pp-accent-text); }

.pp-kpi-dark .pp-kpi-link { color: var(--pp-secondary-accent-text); }

/* Notification bell (D47) and the light/dark toggle beside it (D61) share one round box. */
.pp-bell,
.pp-theme-toggle {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 100px;
  border: 1px solid var(--mud-palette-lines-default);
  background: var(--mud-palette-surface);
  color: var(--pp-chip-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pp-bell-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 100px;
  background: var(--mud-palette-primary);
  color: var(--mud-palette-primary-text);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-notifications { width: 340px; max-width: calc(100vw - 32px); }

.pp-notifications-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pp-notifications-title { font-weight: 600; }

.pp-mark-all { border: none; background: none; color: var(--pp-accent-text); font: 600 13px "Inter", system-ui, sans-serif; cursor: pointer; }

.pp-notification {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--mud-palette-lines-default);
  background: var(--mud-palette-surface);
  color: var(--mud-palette-text-primary);
  font: 400 14px "Inter", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}

.pp-notification:hover { background: var(--pp-panel); }

.pp-notification-unread .pp-notification-title { font-weight: 600; }

.pp-notification-time { font-size: 12px; color: var(--mud-palette-text-secondary); }

.pp-notifications-empty { margin: 0; padding: 14px; }

/* Agents (D54): the list, the agent page and the run page. Theme tokens only; strong accents in deep olive (D48). */
.pp-agents-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.pp-agents,
.pp-agent-pause { margin-top: 16px; }

.pp-agent-pause-help,
.pp-agent-help { margin: 0; font-size: 13px; }

.pp-agents-empty,
.pp-agent-runs-empty { margin: 0; font-size: 14px; }

.pp-agent-link { color: var(--pp-accent-text); font-weight: 600; text-decoration: none; }

.pp-agent-link:hover { text-decoration: underline; }

.pp-agent-last-run { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }

.pp-status-active { border-color: transparent; background: var(--pp-soft-accent); color: var(--pp-chip-text); }

.pp-status-waiting { border-color: transparent; background: var(--mud-palette-secondary); color: var(--mud-palette-secondary-text); }

/* D71: in dark mode the deep-olive Secondary controls (Stop, Afwijzing bevestigen, the waiting chip) carry the 1px accent ring of the strong
   accents (D48), so they stand out from the dark page (WCAG 1.4.11). Light mode is untouched: these rules exist only under .pp-dark. */
.pp-dark .mud-button-filled-secondary,
.pp-dark .mud-button-filled-secondary:hover,
.pp-dark .mud-button-filled-secondary:focus-visible { box-shadow: inset 0 0 0 1px var(--pp-strong-border); }

.pp-dark .pp-stop { box-shadow: inset 0 0 0 1px var(--pp-strong-border); }

.pp-dark .pp-status-waiting { border-color: var(--pp-strong-border); }

.pp-agent-page { display: flex; flex-direction: column; gap: 16px; max-width: 960px; }

.pp-back-link { align-self: flex-start; color: var(--pp-accent-text); font-size: 14px; text-decoration: none; }

.pp-back-link:hover { text-decoration: underline; }

.pp-agent-head,
.pp-run-head { display: flex; flex-direction: column; gap: 6px; }

.pp-agent-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; color: var(--mud-palette-text-secondary); }

.pp-agent-field { display: flex; flex-direction: column; gap: 6px; }

.pp-agent-field-label { font-size: 13px; font-weight: 600; color: var(--mud-palette-text-secondary); }

.pp-agent-limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; }

.pp-agent-version summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 14px; }

.pp-agent-version-title { font-weight: 600; }

.pp-agent-version-summary { margin: 6px 0 0; font-size: 13px; color: var(--mud-palette-text-secondary); }

.pp-agent-version-instructions { margin: 6px 0 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }

.pp-run-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--mud-palette-lines-default);
  color: var(--mud-palette-text-primary);
  font-size: 14px;
  text-decoration: none;
}

.pp-run-row:hover .pp-run-row-when { text-decoration: underline; }

.pp-run-row-when { flex-shrink: 0; }

.pp-run-row-reason { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mud-palette-text-secondary); }

.pp-run-row-cost { flex-shrink: 0; color: var(--mud-palette-text-secondary); }

.pp-run-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.pp-run-meta { font-size: 14px; }

.pp-run-stop { align-self: flex-start; }

.pp-run-steps { display: flex; flex-direction: column; gap: 14px; }

.pp-run-step { gap: 10px; }

.pp-run-note { align-self: flex-start; overflow-wrap: anywhere; }

/* Jobs (D60): the list, the job page, the execution history and Nu uitvoeren. Theme tokens only; strong accents in deep olive (D48). */
.pp-jobs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.pp-jobs { margin-top: 16px; }

.pp-jobs-empty,
.pp-job-history-empty { margin: 0; font-size: 14px; }

.pp-job-link,
.pp-job-run-link { color: var(--pp-accent-text); font-weight: 600; text-decoration: none; }

.pp-job-link:hover,
.pp-job-run-link:hover { text-decoration: underline; }

.pp-job-outcome { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

.pp-job-page { display: flex; flex-direction: column; gap: 16px; max-width: 960px; }

.pp-job-head { display: flex; flex-direction: column; gap: 6px; }

.pp-job-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; color: var(--mud-palette-text-secondary); }

.pp-job-field { display: flex; flex-direction: column; gap: 6px; }

.pp-job-field-label { font-size: 13px; font-weight: 600; color: var(--mud-palette-text-secondary); }

.pp-job-help { margin: 0; font-size: 13px; }

/* Our own 24-hour time choice: hour and minute side by side (MudSelect puts the hook class on its input control). */
.pp-job-time-row { display: flex; flex-wrap: wrap; gap: 12px; }

.pp-job-time-row > .mud-select { flex: 0 1 120px; min-width: 96px; }

.pp-job-field > .mud-select:has(.pp-job-month-day) { max-width: 200px; }

.pp-job-reason,
.pp-job-retry { margin: 4px 0 0; font-size: 13px; color: var(--mud-palette-text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }

.pp-job-runs { display: flex; flex-wrap: wrap; gap: 8px; }

.pp-job-run-now-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Phase 7d — Beheer → Analyse and the start page cost chart (D74). Colours only through tokens (D61). */
.pp-analytics-periods { margin: 12px 0 4px; }

.pp-analytics-summary { margin: 12px 0 0; font-size: 15px; font-weight: 600; }

.pp-analytics-empty { margin: 12px 0 0; font-size: 14px; }

.pp-cost-help { margin: 0; font-size: 13px; }

.pp-cost-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }

.pp-cost-grid .pp-cost-breakdown { margin-top: 0; }

.pp-cost-name { min-width: 140px; overflow-wrap: anywhere; }

.pp-cost-number { text-align: right; white-space: nowrap; }

.pp-cost-bar { height: 4px; margin-top: 4px; border-radius: 100px; background: var(--pp-panel); overflow: hidden; }

.pp-cost-bar-fill { height: 4px; background: var(--mud-palette-primary); }

.pp-chart { margin: 0; }

.pp-chart-columns { display: flex; align-items: stretch; gap: 3px; height: 160px; }

.pp-chart-column { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }

.pp-chart-track { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; border-radius: 4px; background: var(--pp-panel); overflow: hidden; }

.pp-chart-fill { width: 100%; border-radius: 4px 4px 0 0; background: var(--mud-palette-primary); }

.pp-chart-label { font-size: 11px; line-height: 1; color: var(--mud-palette-text-secondary); white-space: nowrap; }

.pp-chart-label-hidden { visibility: hidden; }

@media (max-width: 900px) {
  .pp-cost-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Phase 7d — Beheer → Logboek (D74). */
.pp-log-filters { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

.pp-log-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.pp-log-filter-label { min-width: 90px; font-size: 13px; font-weight: 600; color: var(--mud-palette-text-secondary); }

.pp-log-filter > .mud-select { flex: 0 1 360px; }

.pp-log-time { white-space: nowrap; }

.pp-log-reason { overflow-wrap: anywhere; }

.pp-log-paging { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Phase 7d — Beheer → Rechten (D74). */
.pp-roles { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }

.pp-roles .pp-role { margin-top: 0; }

.pp-role-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; }

.pp-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--pp-soft-accent); color: var(--pp-chip-text); font-size: 13px; font-weight: 400; }

.pp-role-unsaved,
.pp-role-admin-note { margin: 0; font-size: 13px; }

.pp-role-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }

.pp-role-group { min-width: 0; margin: 0; padding: 8px 12px 10px; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; }

.pp-role-group-title { padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }

.pp-role-permission { display: flex; flex-direction: column; }

.pp-role-code { margin: -8px 0 4px 58px; font-size: 11px; overflow-wrap: anywhere; }

/* Phase 7d — Beheer → Instellingen and the workspace name in the user menu (D74). */
.pp-settings { display: flex; flex-direction: column; gap: 16px; max-width: 960px; margin-top: 16px; }

.pp-settings .pp-admin-card { margin-top: 0; }

.pp-settings-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }

.pp-settings-row > .mud-input-control { flex: 1 1 280px; }

.pp-settings-help { margin: 0; font-size: 13px; }

.pp-settings-pages { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }

.pp-settings-page-link { color: var(--pp-accent-text); font-weight: 600; text-decoration: none; }

.pp-settings-page-link:hover { text-decoration: underline; }

.pp-settings-page-description { display: block; font-size: 13px; color: var(--mud-palette-text-secondary); }

.pp-user-menu-workspace { max-width: 260px; padding: 0 16px 8px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Phase 7d — the start page overview (D74): this month's costs, pending approvals, next jobs, latest agent runs. */
.pp-start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }

.pp-start-card-wide { grid-column: 1 / -1; }

.pp-start-grid .pp-kpi-link,
.pp-start-log-link { margin-top: auto; }

.pp-start-costs .pp-chart-columns { height: 120px; }

.pp-start-costs-caption { font-size: 13px; }

.pp-start-run .pp-status { flex-shrink: 0; }

@media (max-width: 900px) {
  .pp-start-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Collapsible Beheer section (AdminCollapsible): the header row is one button; .pp-card-title is the shared card-title style. */
.pp-card-title { font-size: 1rem; font-weight: 700; margin: 0; }

.pp-collapsible-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pp-collapsible-toggle:focus-visible { outline: 2px solid var(--pp-accent-text); outline-offset: 2px; border-radius: 6px; }

.pp-collapsible-chevron { display: inline-block; width: 1em; text-align: center; }

.pp-collapsible-chevron::before { content: "\25B8"; }

.pp-collapsible-toggle[aria-expanded="true"] .pp-collapsible-chevron::before { content: "\25BE"; }

.pp-collapsible-meta { color: var(--mud-palette-text-secondary); font-size: 13px; font-weight: 400; }

.pp-collapsible-name { overflow-wrap: anywhere; }

.pp-collapsible-grow { flex: 1; }

/* The body replaces the card's own flex column (.pp-admin-card), so it carries the same 10px rhythm; [hidden] must come after and win. */
.pp-collapsible-body { display: flex; flex-direction: column; gap: 10px; }

.pp-collapsible-body[hidden] { display: none; }

/* Beheer → Connectoren: the Internet zoeken card (D93). */
.pp-websearch-switches { margin-bottom: 4px; }

.pp-websearch-form { max-width: 360px; }

/* Sign-in and activation (spec §6.3, approved mockups): a centred card without navigation, rendered as static forms. */
.pp-account {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  box-sizing: border-box;
}

.pp-account-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 22px; }

.pp-account-card {
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;
  padding: 26px;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 16px;
  background: var(--mud-palette-surface);
  box-shadow: 0 2px 8px var(--pp-ask-shadow);
}

.pp-account-title { margin: 0 0 4px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }

.pp-account-title:focus { outline: none; }

.pp-account-lead { margin: 0 0 18px; color: var(--mud-palette-text-secondary); line-height: 1.45; }

.pp-account-form { display: flex; flex-direction: column; }

.pp-account-label { display: block; margin: 12px 0 6px; font-size: 13px; font-weight: 500; }

.pp-account-input {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 10px;
  background: var(--mud-palette-surface);
  color: var(--mud-palette-text-primary);
  font: inherit;
}

.pp-account-input:focus { outline: 2px solid var(--mud-palette-primary); outline-offset: 0; border-color: transparent; }

.pp-account-input-code { text-align: center; letter-spacing: 0.4em; font-size: 18px; font-weight: 600; }

.pp-account-hint { margin-top: 6px; font-size: 12px; color: var(--mud-palette-text-secondary); }

.pp-account-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; }

.pp-account-check input { width: 16px; height: 16px; accent-color: var(--pp-accent-text); }

.pp-account-submit {
  height: 40px;
  margin-top: 18px;
  border: 0;
  border-radius: 100px;
  background: var(--mud-palette-primary);
  color: var(--mud-palette-primary-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* "Naar het platform" stays disabled until "Ik heb de herstelcodes bewaard" is checked (a required checkbox; no script needed). */
.pp-account-form:invalid .pp-account-submit { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.pp-account-foot { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--mud-palette-text-secondary); }

.pp-account-foot a { font-weight: 500; text-underline-offset: 2px; }

.pp-account-error {
  margin-bottom: 4px;
  padding: 10px 12px;
  border: 1px solid var(--mud-palette-error);
  border-radius: 10px;
  color: var(--mud-palette-error);
  font-size: 13px;
}

.pp-account-steps { display: flex; gap: 6px; margin-bottom: 16px; }

.pp-account-step { flex: 1; height: 4px; border-radius: 4px; background: var(--pp-panel); }

.pp-account-step-on { background: var(--mud-palette-primary); }

.pp-account-step-label { margin-bottom: 4px; font-size: 12px; color: var(--mud-palette-text-secondary); }

/* The QR code keeps its own black on white in both modes, so every authenticator app can read it. */
.pp-account-qr { width: 168px; height: 168px; margin: 6px auto 10px; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; overflow: hidden; }

.pp-account-qr svg { display: block; width: 100%; height: 100%; }

.pp-account-key {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--pp-panel);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-align: center;
  overflow-wrap: anywhere;
}

.pp-account-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 12px;
  border-radius: 10px;
  background: var(--pp-panel);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
}

.pp-account-code-actions { display: flex; gap: 8px; margin-top: 10px; }

.pp-account-ghost {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 100px;
  background: var(--pp-panel);
  color: var(--pp-accent-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

/* Beheer → Gebruikers (phase 8a, spec §6.4): the status chips reuse the pill shape of .pp-status, with existing tokens only. */
.pp-users-toolbar { display: flex; justify-content: flex-end; margin: 12px 0; }

.pp-users-table { margin-top: 4px; }

.pp-user-who { display: flex; flex-direction: column; gap: 2px; }

.pp-user-email { font-size: 12px; color: var(--mud-palette-text-secondary); }

.pp-user-last { white-space: nowrap; }

.pp-user-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

.pp-user-status {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 100px;
  background: var(--mud-palette-surface);
  color: var(--mud-palette-text-secondary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pp-user-status-active { border-color: transparent; background: var(--pp-soft-accent); color: var(--pp-chip-text); }

.pp-user-status-invited { color: var(--mud-palette-text-primary); }

.pp-user-status-expired { border-color: var(--mud-palette-error); color: var(--mud-palette-error); }

.pp-user-status-off { background: var(--pp-panel); }

.pp-users-note { margin: 12px 0 0; font-size: 13px; }

.pp-user-role-select { min-width: 190px; }

.pp-dialog-form { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }

.pp-dialog-error { margin: 12px 0 0; }

.pp-activation-box { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0; }

.pp-activation-url { flex: 1; min-width: 0; }

.pp-activation-copy { height: 56px; }

.pp-activation-warning {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--pp-soft-accent);
  color: var(--pp-chip-text);
  font-size: 13px;
}

.pp-impact { margin: 8px 0 12px; padding-left: 20px; }

.pp-job-disabled-reason { color: var(--mud-palette-error); font-size: 12px; font-weight: 600; }