/* Printometer – Marken-Styles auf Bootstrap 5 (CDN, siehe base.php).
   Tokens aus dem Brand-Paket V1 (printometer-brand.zip).
   Kernregeln: Magenta max. 1 Element pro Ansicht (primäre Aktion);
   Cyan/Gelb NUR für Skalen/Diagramme/Logo; Status = Ampelfarben;
   Zahlen/IDs/Messwerte in IBM Plex Mono mit Tabellenziffern. */

/* ---------- Schriften ---------- */
@font-face {
	font-family: "Archivo";
	src: url("/assets/fonts/Archivo-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("/assets/fonts/IBMPlexMono-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ---------- Design-Tokens (Hell + Dunkel) ---------- */
:root {
	--pm-paper: #FAF7F9;
	--pm-surface: #FFFFFF;
	--pm-line: #E9DFE5;
	--pm-ink: #1D1D1B;
	--pm-muted: #766E73;
	--pm-magenta: #E6007E;
	--pm-magenta-deep: #C4006C;
	--pm-cyan: #009EE0;      /* nur Skalen/Diagramme/Logo */
	--pm-yellow: #FFD900;    /* nur Skalen/Diagramme/Logo */
	--pm-ok: #1E8A4C;
	--pm-error: #C93A2E;
	--pm-font: "Archivo", "Segoe UI", system-ui, sans-serif;
	--pm-font-mono: "IBM Plex Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
	:root {
		--pm-paper: #191519;
		--pm-surface: #221D22;
		--pm-line: #382F37;
		--pm-ink: #F4EFF2;
		--pm-muted: #A79DA4;
		--pm-magenta: #FF4FA0;
		--pm-magenta-deep: #FF77B5;
		--pm-cyan: #2FB7EA;
	}
}

/* ---------- Bootstrap-Mapping ---------- */
body {
	background-color: var(--pm-paper);
	color: var(--pm-ink);
	font-family: var(--pm-font);
}
h1, h2, h3, h4, h5, h6, .navbar-brand {
	font-family: var(--pm-font);
	font-weight: 600;
	color: var(--pm-ink);
}

/* Primäre Aktion = das eine Magenta-Element pro Ansicht */
.btn-primary {
	--bs-btn-bg: var(--pm-magenta);
	--bs-btn-border-color: var(--pm-magenta);
	--bs-btn-hover-bg: var(--pm-magenta-deep);
	--bs-btn-hover-border-color: var(--pm-magenta-deep);
	--bs-btn-active-bg: var(--pm-magenta-deep);
	--bs-btn-active-border-color: var(--pm-magenta-deep);
	--bs-btn-focus-shadow-rgb: 230, 0, 126;
}
.btn-outline-primary {
	--bs-btn-color: var(--pm-magenta);
	--bs-btn-border-color: var(--pm-magenta);
	--bs-btn-hover-bg: var(--pm-magenta);
	--bs-btn-hover-border-color: var(--pm-magenta);
	--bs-btn-active-bg: var(--pm-magenta-deep);
	--bs-btn-active-border-color: var(--pm-magenta-deep);
	--bs-btn-focus-shadow-rgb: 230, 0, 126;
}
/* Sekundär-Buttons neutral in Ink/Line statt Bootstrap-Grau */
.btn-outline-secondary {
	--bs-btn-color: var(--pm-ink);
	--bs-btn-border-color: var(--pm-line);
	--bs-btn-hover-bg: var(--pm-surface);
	--bs-btn-hover-color: var(--pm-ink);
	--bs-btn-hover-border-color: var(--pm-muted);
}

/* Links: Ink mit Unterstreichung – Magenta bleibt der Aktion vorbehalten */
a {
	color: var(--pm-ink);
	text-decoration-color: var(--pm-muted);
	text-underline-offset: 2px;
}
a:hover { color: var(--pm-magenta-deep); }

/* Flächen: Navbar, Karten, Tabellen, Formulare, Footer */
.navbar, .bg-body-tertiary {
	background-color: var(--pm-surface) !important;
	border-color: var(--pm-line) !important;
}
.card, .modal-content, .dropdown-menu, .list-group-item {
	background-color: var(--pm-surface);
	border-color: var(--pm-line);
	color: var(--pm-ink);
}
.table {
	--bs-table-bg: var(--pm-surface);
	--bs-table-color: var(--pm-ink);
	--bs-table-border-color: var(--pm-line);
}
.form-control, .form-select {
	background-color: var(--pm-surface);
	border-color: var(--pm-line);
	color: var(--pm-ink);
}
.form-control:focus, .form-select:focus {
	background-color: var(--pm-surface);
	color: var(--pm-ink);
	border-color: var(--pm-magenta);
	box-shadow: 0 0 0 .25rem rgba(230, 0, 126, .15);
}
.form-check-input:checked {
	background-color: var(--pm-magenta);
	border-color: var(--pm-magenta);
}
.form-label { color: var(--pm-ink); }
.form-text, .text-muted { color: var(--pm-muted) !important; }
footer, .border-top, .border-bottom { border-color: var(--pm-line) !important; }

/* Status: Ampelfarben, getrennt von der Marke */
.alert-success { --bs-alert-color: #fff; --bs-alert-bg: var(--pm-ok); --bs-alert-border-color: var(--pm-ok); }
.alert-danger  { --bs-alert-color: #fff; --bs-alert-bg: var(--pm-error); --bs-alert-border-color: var(--pm-error); }
.text-success  { color: var(--pm-ok) !important; }
.text-danger   { color: var(--pm-error) !important; }

/* Zahlen, IDs, Messwerte: Plex Mono mit Tabellenziffern */
.pm-num, code, kbd, samp, pre {
	font-family: var(--pm-font-mono);
	font-variant-numeric: tabular-nums;
}

/* Lange Jobnamen in Tabellen kappen (Volltext im title-Attribut) */
.pm-jobname { max-width: 280px; }

/* Schmale Spalte für den +/−-Aufklapp-Button der Modus-Detailzeilen. */
.pm-toggle-col { width: 2rem; }
.pm-matmode-toggle {
	color: var(--pm-muted);
	font-family: var(--pm-font-mono);
	font-size: 1.1rem;
	line-height: 1;
}
.pm-matmode-toggle:hover { color: var(--pm-magenta, #E6007E); }
/* Detailzeilen dezent absetzen. */
.pm-matmode-detail > td { background: var(--pm-surface-alt, rgba(0, 0, 0, .02)); }

/* Rechtsseiten (Impressum/AGB/Datenschutz): <address> nicht kursiv, luftiger Zeilenabstand. */
.pm-legal address { font-style: normal; line-height: 1.7; }
.pm-legal h2 { margin-top: 1.5rem; }

/* Hervorgehobener, gut lesbarer Schlüssel/Token (z. B. Collector-API-Key).
   Eigene kontrastreiche Box statt Bootstraps rosa code-Farbe auf farbigem Alert. */
.pm-key {
	display: inline-block;
	background: var(--pm-surface);
	color: var(--pm-ink);
	border: 1px solid var(--pm-line);
	border-radius: var(--radius, 8px);
	padding: .5rem .75rem;
	font-family: var(--pm-font-mono);
	font-size: 1.05rem;
	letter-spacing: .02em;
	word-break: break-all;
	line-height: 1.4;
}

/* Logo in der Navbar: Icon + Wortmarke (immer klein, das o in Magenta) */
.navbar-brand img { height: 28px; display: block; }
.pm-wordmark {
	font-weight: 640;
	font-size: 1.25rem;
	letter-spacing: -0.01em;
	text-transform: lowercase;
	color: var(--pm-ink);
}
.pm-wordmark .pm-o { color: var(--pm-magenta); }
.navbar-brand { text-decoration: none; }