/*
 * Metrini-stijl voor PowerDNS-Admin v2026.08.1 (AdminLTE 4.1 / Bootstrap 5.3).
 * Geladen via de PDA-instelling custom_css = "css/metrini-pda.css" (Settings > Basic),
 * bestand in /opt/powerdns-admin/powerdnsadmin/static/custom/. Leegmaken van de instelling = standaard terug.
 *
 * Doel: compacter (minder witruimte, kleinere letters) en de Metrini-accentkleur, in de sobere terminalstijl
 * van git.metrini.nl. Alleen kleuren/maten; geen layout- of gedragswijzigingen.
 * Licht/donker blijft werken: alles leunt op Bootstrap-variabelen, donker via [data-bs-theme="dark"].
 */

@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dm-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dm-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ---------------------------------------------------------------------------------- */
:root {
  --metrini-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --metrini-accent: #1a7f37;            /* 5.1:1 op wit */
  --metrini-accent-rgb: 26, 127, 55;
  --metrini-accent-hover: #116329;
  --metrini-accent-contrast: #ffffff;
  --metrini-accent-ring: rgba(26, 127, 55, 0.25);
}
[data-bs-theme="dark"] {
  --metrini-accent: #57ab5a;            /* terminalgroen, ~6:1 op donker */
  --metrini-accent-rgb: 87, 171, 90;
  --metrini-accent-hover: #6bc46d;
  --metrini-accent-contrast: #0c0f12;
  --metrini-accent-ring: rgba(87, 171, 90, 0.3);
}

/* ---- Compacter: één knop. Bootstrap en AdminLTE rekenen in rem, dus alles schaalt mee. ----- */
html { font-size: 14px; }

.app-content-header { padding: 0.6rem 0.5rem; }
.app-content-header h3 { font-size: 1.35rem; }
.card { --bs-card-spacer-y: 0.75rem; --bs-card-spacer-x: 0.85rem; --bs-card-cap-padding-y: 0.5rem; }
.card { margin-bottom: 0.85rem; }
.table > :not(caption) > * > * { padding: 0.3rem 0.5rem; }
.form-control, .form-select { padding-top: 0.3rem; padding-bottom: 0.3rem; }
.small-box > .inner { padding: 8px; }
.small-box h3 { font-size: 1.8rem; margin-bottom: 0.2rem; }
.app-footer { padding: 0.5rem 1rem; font-size: 0.85rem; }

/* ---- Accentkleur ----------------------------------------------------------------------------- */
:root, [data-bs-theme="dark"] {
  --bs-primary: var(--metrini-accent);
  --bs-primary-rgb: var(--metrini-accent-rgb);
  --bs-link-color: var(--metrini-accent);
  --bs-link-color-rgb: var(--metrini-accent-rgb);
  --bs-link-hover-color: var(--metrini-accent-hover);
}
.btn-primary {
  --bs-btn-color: var(--metrini-accent-contrast);
  --bs-btn-bg: var(--metrini-accent);
  --bs-btn-border-color: var(--metrini-accent);
  --bs-btn-hover-color: var(--metrini-accent-contrast);
  --bs-btn-hover-bg: var(--metrini-accent-hover);
  --bs-btn-hover-border-color: var(--metrini-accent-hover);
  --bs-btn-active-color: var(--metrini-accent-contrast);
  --bs-btn-active-bg: var(--metrini-accent-hover);
  --bs-btn-active-border-color: var(--metrini-accent-hover);
  --bs-btn-disabled-bg: var(--metrini-accent);
  --bs-btn-disabled-border-color: var(--metrini-accent);
  --bs-btn-focus-shadow-rgb: var(--metrini-accent-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--metrini-accent);
  --bs-btn-border-color: var(--metrini-accent);
  --bs-btn-hover-bg: var(--metrini-accent);
  --bs-btn-hover-border-color: var(--metrini-accent);
  --bs-btn-hover-color: var(--metrini-accent-contrast);
  --bs-btn-active-bg: var(--metrini-accent-hover);
  --bs-btn-active-border-color: var(--metrini-accent-hover);
}
.card-primary { --lte-card-variant-bg: var(--metrini-accent); }
.form-control:focus, .form-select:focus {
  border-color: var(--metrini-accent);
  box-shadow: 0 0 0 0.2rem var(--metrini-accent-ring);
}
.form-check-input:checked { background-color: var(--metrini-accent); border-color: var(--metrini-accent); }
.page-link { --bs-pagination-active-bg: var(--metrini-accent); --bs-pagination-active-border-color: var(--metrini-accent); }
.app-sidebar .sidebar-menu .nav-link.active {
  --lte-sidebar-menu-active-bg: var(--metrini-accent);
  --lte-sidebar-menu-active-color: var(--metrini-accent-contrast);
}

/* ---- Terminaltypografie: alleen merk en koppen (lopende tekst blijft proportioneel) --------- */
.sidebar-brand .brand-text,
.app-content-header h3,
.login-box .card-header a,
.card-title {
  font-family: var(--metrini-mono);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Loginpagina: prompt boven de titel, net als git.metrini.nl */
.login-box .card-header a::before {
  content: "\2192\00a0dnsmanager.online";
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--bs-secondary-color);
  letter-spacing: 0.04em;
}
.login-box .card-header a { color: var(--bs-body-color); text-decoration: none; }