/* --------------------------------------------------------------------------
   Hermes look for PowerDNS-Admin (Bootstrap 5.3 / AdminLTE 4).

   Enable: Settings > Basic > custom_css = hermes/hermes.css
   (served as /static/custom/hermes/hermes.css, loaded after the main bundle
   and after custom/css/custom.css, on the login page too).

   No template is touched. Everything here is Hermes's tokens (vars.css,
   theming.css, glass.css) mapped onto Bootstrap's variables, plus the few
   places AdminLTE hard-codes a colour, a radius or a padding.

   - fonts
   - size: density and type scale
   - tokens, light and dark
   - Bootstrap variables
   - density
   - shell: backdrop, sidebar, topbar, footer
   - surfaces: cards, modals, dropdowns
   - tables
   - buttons, forms, badges, alerts
   - login
   -------------------------------------------------------------------------- */

/* ── fonts ── */

@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/open-sans-v44-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('fonts/open-sans-v44-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-sans-v23-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500 600; font-display: swap; src: url('fonts/ibm-plex-sans-v23-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/ibm-plex-sans-v23-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Source Code Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/source-code-pro-v31-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Source Code Pro'; font-style: normal; font-weight: 500 600; font-display: swap; src: url('fonts/source-code-pro-v31-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Source Code Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/source-code-pro-v31-latin-700.woff2') format('woff2'); }

/* ── size ──
   Two knobs. --h-root-size is the density: Bootstrap and AdminLTE are sized
   in rem, so paddings and controls follow it. --h-font-scale makes the type
   larger or smaller without moving the spacing. Every font size in this file
   is one of the steps below. */

:root {
    --h-root-size: 14px;
    --h-font-scale: 1.08;

    --h-fs-xs: calc(.82rem * var(--h-font-scale));
    --h-fs-sm: calc(.88rem * var(--h-font-scale));
    --h-fs-md: calc(.93rem * var(--h-font-scale));
    --h-fs-base: calc(1rem * var(--h-font-scale));
    --h-fs-lg: calc(1.07rem * var(--h-font-scale));
    --h-fs-xl: calc(1.5rem * var(--h-font-scale));
    --h-fs-xxl: calc(1.8rem * var(--h-font-scale));
}

/* ── tokens ──
   The sidebar carries data-bs-theme="dark" in the markup whatever the page's
   theme is. In Hermes it follows the page, so the light block names it too
   (html[...] .app-sidebar outweighs the bare [data-bs-theme=dark]). */

:root,
[data-bs-theme=light],
html[data-bs-theme=light] .app-sidebar {
    --h-bg: #F4F2EE;
    --h-bg-2: #EBE8E2;
    --h-surface: #FFFFFF;
    --h-surface-2: #FAF9F6;
    --h-surface-3: #F0EEEA;
    --h-surface-4: #E8E5DF;
    --h-border: #E5E2DC;
    --h-border-strong: #D6D2CB;
    --h-text: #0D0C0A;
    --h-text-rgb: 13, 12, 10;
    --h-surface-rgb: 255, 255, 255;
    --h-surface-2-rgb: 250, 249, 246;
    --h-surface-3-rgb: 240, 238, 234;
    --h-text-2: #433F38;
    --h-text-3: #5B564F;
    --h-text-disabled: #B5AFA5;

    --h-accent: oklch(0.38 0.14 260);
    --h-accent-rgb: 11, 61, 139;
    --h-accent-strong: oklch(0.28 0.17 260);
    --h-accent-text: oklch(0.28 0.11 260);
    --h-accent-text-rgb: 2, 36, 94;
    --h-accent-soft: oklch(0.95 0.03 260);
    --h-accent-subtle: oklch(0.975 0.012 260);
    --h-accent-border: oklch(0.70 0.09 260);
    --h-accent-fg: #ffffff;
    --h-complement: oklch(0.55 0.14 80);

    --h-success: oklch(0.58 0.14 150);      --h-success-rgb: 42, 144, 75;
    --h-success-soft: oklch(0.95 0.04 150); --h-success-text: oklch(0.34 0.10 150);
    --h-warn: oklch(0.68 0.15 75);          --h-warn-rgb: 205, 136, 0;
    --h-warn-soft: oklch(0.96 0.05 75);     --h-warn-text: oklch(0.38 0.09 75);
    --h-error: oklch(0.60 0.18 25);         --h-error-rgb: 215, 71, 69;
    --h-error-soft: oklch(0.95 0.05 25);    --h-error-text: oklch(0.36 0.12 25);
    --h-info: oklch(0.58 0.13 235);         --h-info-rgb: 0, 133, 188;
    --h-info-soft: oklch(0.95 0.04 235);    --h-info-text: oklch(0.34 0.10 235);

    /* glass.css: the surface partly see-through, denser for the shell and
       for anything that carries much text */
    --h-glass: color-mix(in srgb, var(--h-surface) 62%, transparent);
    --h-glass-shell: color-mix(in srgb, var(--h-surface) 72%, transparent);
    --h-glass-strong: color-mix(in srgb, var(--h-surface) 82%, transparent);
    --h-glass-line: color-mix(in srgb, var(--h-text) 10%, transparent);
    --h-glass-edge: color-mix(in srgb, #fff 55%, transparent);
    --h-glass-shadow: 0 10px 24px -18px color-mix(in srgb, var(--h-accent) 34%, transparent);
    --h-glass-blur: blur(22px) saturate(170%);
    --h-field-a: color-mix(in oklab, var(--h-accent) 38%, transparent);
    --h-field-b: color-mix(in oklab, var(--h-complement) 30%, transparent);
    --h-row-alt: color-mix(in srgb, var(--h-text) 3.5%, transparent);
    --h-row-hover: color-mix(in srgb, var(--h-accent) 9%, transparent);
}

[data-bs-theme=dark],
html[data-bs-theme=dark] .app-sidebar {
    --h-bg: #0D1014;
    --h-bg-2: #070A0D;
    --h-surface: #15191F;
    --h-surface-2: #1A1F26;
    --h-surface-3: #232931;
    --h-surface-4: #2D343E;
    --h-border: #2A313B;
    --h-border-strong: #3A4250;
    --h-text: #F8F6F2;
    --h-text-rgb: 248, 246, 242;
    --h-surface-rgb: 21, 25, 31;
    --h-surface-2-rgb: 26, 31, 38;
    --h-surface-3-rgb: 35, 41, 49;
    --h-text-2: #C4C0B7;
    --h-text-3: #B9B3A7;
    --h-text-disabled: #4A463F;

    --h-accent: oklch(0.72 0.13 258);
    --h-accent-rgb: 112, 166, 245;
    --h-accent-strong: oklch(0.84 0.16 258);
    --h-accent-text: oklch(0.82 0.12 258);
    --h-accent-text-rgb: 147, 198, 255;
    --h-accent-soft: oklch(0.24 0.05 258);
    --h-accent-subtle: oklch(0.18 0.025 258);
    --h-accent-border: oklch(0.38 0.08 258);
    --h-accent-fg: oklch(0.12 0.04 258);
    --h-complement: oklch(0.73 0.14 80);

    --h-success: oklch(0.74 0.13 150);      --h-success-rgb: 105, 194, 126;
    --h-success-soft: oklch(0.28 0.05 150); --h-success-text: oklch(0.84 0.10 150);
    --h-warn: oklch(0.78 0.14 75);          --h-warn-rgb: 235, 169, 65;
    --h-warn-soft: oklch(0.30 0.05 75);     --h-warn-text: oklch(0.88 0.09 75);
    --h-error: oklch(0.72 0.16 25);         --h-error-rgb: 249, 119, 112;
    --h-error-soft: oklch(0.27 0.06 25);    --h-error-text: oklch(0.84 0.12 25);
    --h-info: oklch(0.75 0.13 235);         --h-info-rgb: 74, 186, 244;
    --h-info-soft: oklch(0.27 0.05 235);    --h-info-text: oklch(0.86 0.10 235);

    --h-glass: color-mix(in srgb, var(--h-surface) 48%, transparent);
    --h-glass-shell: color-mix(in srgb, var(--h-surface) 58%, transparent);
    --h-glass-strong: color-mix(in srgb, var(--h-surface) 74%, transparent);
    --h-glass-line: color-mix(in srgb, #fff 10%, transparent);
    --h-glass-edge: color-mix(in srgb, #fff 12%, transparent);
    --h-glass-shadow: 0 12px 28px -20px rgb(0 0 0 / 55%);
    --h-field-a: color-mix(in oklab, var(--h-accent) 45%, transparent);
    --h-field-b: color-mix(in oklab, var(--h-complement) 32%, transparent);
    --h-row-alt: color-mix(in srgb, #fff 3.5%, transparent);
    --h-row-hover: color-mix(in srgb, var(--h-accent) 14%, transparent);
}

/* ── Bootstrap variables ── */

:root,
[data-bs-theme=light],
[data-bs-theme=dark],
html[data-bs-theme] .app-sidebar {
    --bs-font-sans-serif: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-font-monospace: 'Source Code Pro', ui-monospace, Menlo, Consolas, monospace;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: var(--h-fs-base);
    --bs-body-line-height: 1.45;

    --bs-body-bg: var(--h-surface);
    --bs-body-color: var(--h-text);
    --bs-body-bg-rgb: var(--h-surface-rgb);
    --bs-body-color-rgb: var(--h-text-rgb);
    --bs-emphasis-color: var(--h-text);
    --bs-emphasis-color-rgb: var(--h-text-rgb);
    --bs-secondary-bg-rgb: var(--h-surface-3-rgb);
    --bs-tertiary-bg-rgb: var(--h-surface-2-rgb);
    --bs-secondary-color: var(--h-text-3);
    --bs-tertiary-color: var(--h-text-3);
    --bs-secondary-bg: var(--h-surface-3);
    --bs-tertiary-bg: var(--h-surface-2);
    --bs-heading-color: var(--h-accent-text);
    --bs-border-color: var(--h-border-strong);
    --bs-border-color-translucent: var(--h-glass-line);
    --bs-code-color: var(--h-accent-text);

    --bs-primary: var(--h-accent);          --bs-primary-rgb: var(--h-accent-rgb);
    --bs-success: var(--h-success);         --bs-success-rgb: var(--h-success-rgb);
    --bs-warning: var(--h-warn);            --bs-warning-rgb: var(--h-warn-rgb);
    --bs-danger: var(--h-error);            --bs-danger-rgb: var(--h-error-rgb);
    --bs-info: var(--h-info);               --bs-info-rgb: var(--h-info-rgb);

    --bs-primary-text-emphasis: var(--h-accent-text);
    --bs-primary-bg-subtle: var(--h-accent-soft);
    --bs-primary-border-subtle: var(--h-accent-border);
    --bs-success-text-emphasis: var(--h-success-text);
    --bs-success-bg-subtle: var(--h-success-soft);
    --bs-success-border-subtle: var(--h-success);
    --bs-warning-text-emphasis: var(--h-warn-text);
    --bs-warning-bg-subtle: var(--h-warn-soft);
    --bs-warning-border-subtle: var(--h-warn);
    --bs-danger-text-emphasis: var(--h-error-text);
    --bs-danger-bg-subtle: var(--h-error-soft);
    --bs-danger-border-subtle: var(--h-error);
    --bs-info-text-emphasis: var(--h-info-text);
    --bs-info-bg-subtle: var(--h-info-soft);
    --bs-info-border-subtle: var(--h-info);

    --bs-link-color: var(--h-accent-text);
    --bs-link-color-rgb: var(--h-accent-text-rgb);
    --bs-link-hover-color: var(--h-accent);
    --bs-link-hover-color-rgb: var(--h-accent-rgb);
    --bs-link-decoration: none;

    /* Square corners throughout, as in Hermes. What is round by nature
       (avatars, switches, pills) keeps its own 50% / rounded-pill. */
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;

    --bs-focus-ring-color: color-mix(in srgb, var(--h-accent) 28%, transparent);
    --bs-box-shadow: var(--h-glass-shadow);
    --bs-box-shadow-sm: var(--h-glass-shadow);

    --lte-sidebar-width: 15.5rem;
}

/* ── density ── */

html {
    font-size: var(--h-root-size);
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'IBM Plex Sans', var(--bs-font-sans-serif);
    color: var(--h-accent-text);
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.btn:hover,
.nav-link:hover,
.dropdown-item:hover,
.page-link:hover,
.brand-link:hover {
    text-decoration: none;
}

code, pre, kbd, samp {
    font-family: var(--bs-font-monospace);
}

.app-content-header {
    padding: .75rem .25rem .6rem;
}

.app-content-header h1 {
    font-size: var(--h-fs-xl);
    font-weight: 600;
    letter-spacing: .01em;
}

.breadcrumb {
    font-size: var(--h-fs-xs);
    --bs-breadcrumb-divider-color: var(--h-text-3);
    --bs-breadcrumb-item-active-color: var(--h-text-3);
}

/* ── shell ── */

/* The backdrop: glass.css's slow colour fields, mixed from the accent and
   its complement, fixed behind the whole window. */
body,
body.bg-body-tertiary,
body.bg-body-secondary {
    background-color: var(--h-bg) !important;
    background-image:
        radial-gradient(60rem 42rem at 8% -10%, var(--h-field-a), transparent 68%),
        radial-gradient(52rem 40rem at 104% 12%, var(--h-field-b), transparent 66%),
        radial-gradient(64rem 40rem at 55% 118%, var(--h-field-a), transparent 70%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.app-wrapper,
.app-main,
.app-content {
    background: transparent;
}

body.pda-layout-boxed .app-wrapper {
    box-shadow: none;
}

.app-sidebar,
.app-sidebar.bg-body-secondary {
    background: var(--h-glass-shell) !important;
    -webkit-backdrop-filter: var(--h-glass-blur);
    backdrop-filter: var(--h-glass-blur);
    border-right: 1px solid var(--h-glass-line);
    color: var(--h-text);
    font-family: 'IBM Plex Sans', var(--bs-font-sans-serif);

    --lte-sidebar-color: var(--h-text-2);
    --lte-sidebar-hover-color: var(--h-text);
    --lte-sidebar-hover-bg: var(--h-surface-3);
    --lte-sidebar-active-color: var(--h-text);
    --lte-sidebar-menu-active-color: var(--h-text);
    --lte-sidebar-menu-active-bg: var(--h-surface-3);
    --lte-sidebar-submenu-bg: transparent;
    --lte-sidebar-submenu-color: var(--h-text-2);
    --lte-sidebar-submenu-hover-color: var(--h-text);
    --lte-sidebar-submenu-hover-bg: var(--h-surface-3);
    --lte-sidebar-submenu-active-color: var(--h-text);
    --lte-sidebar-submenu-active-bg: var(--h-surface-3);
    --lte-sidebar-header-color: var(--h-text-3);
}

.sidebar-brand {
    justify-content: flex-start;
    padding: 0 1rem;
    border-bottom: 1px solid var(--h-glass-line);
}

.sidebar-brand .brand-link,
.sidebar-brand .brand-link .brand-text {
    color: var(--h-text);
}

.sidebar-brand .brand-text {
    font-size: var(--h-fs-lg);
    font-weight: 700 !important;
    letter-spacing: .04em;
}

.sidebar-brand .brand-image {
    max-height: 1.75rem;
    box-shadow: none !important;
    opacity: 1 !important;
}

.sidebar-wrapper {
    padding-inline: .5rem;
}

.sidebar-menu .nav-header {
    padding: .75rem .5rem .3rem;
    font-size: var(--h-fs-xs);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sidebar-menu .nav-link {
    padding: .32rem .5rem;
    border: 1px solid transparent;
    border-radius: 0;
    font-size: var(--h-fs-sm);
    font-weight: 500;
}

.sidebar-menu .nav-item > .nav-link {
    margin-bottom: 2px;
}

.sidebar-wrapper .sidebar-menu .nav-link.active {
    border-color: var(--h-border);
}

.sidebar-wrapper .nav-icon {
    min-width: 1.25rem;
    max-width: 1.25rem;
    font-size: var(--h-fs-base);
    color: var(--h-text-3);
}

.sidebar-wrapper .nav-link:hover .nav-icon,
.sidebar-wrapper .nav-link.active .nav-icon {
    color: var(--h-accent);
}

.app-header,
.app-header.bg-body {
    background: var(--h-glass-shell) !important;
    -webkit-backdrop-filter: var(--h-glass-blur);
    backdrop-filter: var(--h-glass-blur);
    border-bottom: 1px solid var(--h-glass-line);
}

.app-header .nav-link {
    color: var(--h-text-2);
}

.app-header .nav-link:hover {
    color: var(--h-accent);
}

.app-footer {
    min-height: 0;
    padding: .5rem 1rem;
    font-size: var(--h-fs-xs);
    background: var(--h-glass-shell);
    border-top: 1px solid var(--h-glass-line);
}

/* ── surfaces ── */

.card {
    --bs-card-bg: var(--h-glass);
    --bs-card-border-color: var(--h-glass-line);
    --bs-card-cap-bg: transparent;
    --bs-card-spacer-x: .85rem;
    --bs-card-spacer-y: .85rem;
    border-radius: 0;
    box-shadow: inset 0 1px 0 var(--h-glass-edge), var(--h-glass-shadow) !important;
    -webkit-backdrop-filter: var(--h-glass-blur);
    backdrop-filter: var(--h-glass-blur);
    margin-bottom: 1rem;
}

.card-header {
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--h-border-strong);
    border-radius: 0;
}

.card-title {
    font-family: 'IBM Plex Sans', var(--bs-font-sans-serif);
    font-size: var(--h-fs-lg);
    font-weight: 600;
    color: var(--h-accent-text);
}

.card-footer {
    padding: .6rem .85rem;
    background: transparent;
    border-top: 1px solid var(--h-glass-line);
}

/* AdminLTE's card variants: the 3px outline and the filled header. */
.card-primary, .card-info {
    --lte-card-variant-bg: var(--h-accent);
    --lte-card-variant-bg-rgb: var(--h-accent-rgb);
    --lte-card-variant-color: var(--h-accent-fg);
}

.card-secondary {
    --lte-card-variant-bg: var(--h-border-strong);
    --lte-card-variant-color: var(--h-text);
}

.card-success { --lte-card-variant-bg: var(--h-success); }
.card-warning { --lte-card-variant-bg: var(--h-warn); }
.card-danger  { --lte-card-variant-bg: var(--h-error); }

.card.card-outline {
    border-top-width: 2px;
}

.small-box,
.info-box,
.callout {
    border-radius: 0;
}

.small-box,
.info-box {
    box-shadow: var(--h-glass-shadow);
}

.small-box .inner {
    padding: .7rem .85rem;
}

.small-box h3 {
    font-size: var(--h-fs-xxl);
    color: inherit;
}

.modal-content {
    --bs-modal-bg: var(--h-surface);
    --bs-modal-border-color: var(--h-border-strong);
    --bs-modal-header-padding: .75rem 1rem;
    --bs-modal-padding: 1rem;
    --bs-modal-footer-border-color: var(--h-border);
    --bs-modal-header-border-color: var(--h-border-strong);
    border-radius: 0;
    box-shadow: 0 16px 32px rgb(0 0 0 / 25%);
}

.modal-backdrop {
    --bs-backdrop-bg: var(--h-bg-2);
    --bs-backdrop-opacity: .6;
}

.dropdown-menu {
    --bs-dropdown-bg: var(--h-surface);
    --bs-dropdown-border-color: var(--h-border-strong);
    --bs-dropdown-link-color: var(--h-text);
    --bs-dropdown-link-hover-bg: var(--h-surface-3);
    --bs-dropdown-link-hover-color: var(--h-text);
    --bs-dropdown-link-active-bg: var(--h-accent);
    --bs-dropdown-link-active-color: var(--h-accent-fg);
    --bs-dropdown-item-padding-y: .3rem;
    border-radius: 0;
    box-shadow: var(--h-glass-shadow);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--h-border-strong);
    --bs-nav-tabs-link-active-bg: var(--h-surface);
    --bs-nav-tabs-link-active-color: var(--h-accent-text);
    --bs-nav-tabs-link-active-border-color: var(--h-border-strong) var(--h-border-strong) var(--h-surface);
    --bs-nav-link-color: var(--h-text-2);
    --bs-nav-link-hover-color: var(--h-accent);
    --bs-nav-link-padding-y: .4rem;
}

.nav-tabs .nav-link.active {
    font-weight: 600;
    box-shadow: inset 0 2px 0 var(--h-accent);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--h-accent);
    --bs-nav-pills-link-active-color: var(--h-accent-fg);
}

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: var(--h-border);
    --bs-list-group-active-bg: var(--h-accent);
    --bs-list-group-active-border-color: var(--h-accent);
    --bs-list-group-active-color: var(--h-accent-fg);
    --bs-list-group-item-padding-y: .4rem;
}

.text-bg-primary {
    color: var(--h-accent-fg) !important;
}

/* ── tables ── */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--h-text);
    --bs-table-border-color: var(--h-border);
    --bs-table-striped-bg: var(--h-row-alt);
    --bs-table-striped-color: var(--h-text);
    --bs-table-hover-bg: var(--h-row-hover);
    --bs-table-hover-color: var(--h-text);
    --bs-table-active-bg: var(--h-accent-soft);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: .4rem .6rem;
    vertical-align: middle;
}

.table-sm > :not(caption) > * > * {
    padding: .25rem .5rem;
}

.table > thead > tr > th {
    font-family: var(--bs-font-sans-serif);
    font-size: var(--h-fs-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--h-accent-text);
    border-bottom: 1px solid var(--h-border-strong);
}

/* Rows are separated by hairlines, not boxed: the grid of .table-bordered
   is what makes these lists look heavier than Hermes's. */
.table-bordered > :not(caption) > * {
    border-width: 0 0 1px;
}

.table-bordered > :not(caption) > * > * {
    border-width: 0;
}

.table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

/* custom.css sets the monospace stack on every cell with !important */
table td {
    font-family: var(--bs-font-monospace) !important;
    font-size: var(--h-fs-md);
}

.table td a {
    font-weight: 600;
}

/* custom.css centres every cell of the zone and record lists */
table.records thead th,
table.records tbody td {
    text-align: left;
}

table.records thead th:last-of-type,
table.records tbody td:last-of-type {
    text-align: right;
}

/* A filled accent button in every row is a wall of colour. In a table the
   primary action is the plain button; it fills on hover. */
.table .btn-primary {
    --bs-btn-color: var(--h-text);
    --bs-btn-bg: var(--h-surface-2);
    --bs-btn-border-color: var(--h-border-strong);
    --bs-btn-hover-color: var(--h-accent-fg);
    --bs-btn-hover-bg: var(--h-accent);
    --bs-btn-hover-border-color: var(--h-accent);
}

/* DataTables' own chrome: length, search, info, paging */
.dataTables_wrapper .row {
    align-items: center;
    row-gap: .4rem;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    padding: .4rem 0;
    font-size: var(--h-fs-sm);
    color: var(--h-text-3);
}

.pagination {
    --bs-pagination-padding-x: .6rem;
    --bs-pagination-padding-y: .25rem;
    --bs-pagination-bg: var(--h-surface-2);
    --bs-pagination-color: var(--h-text);
    --bs-pagination-border-color: var(--h-border-strong);
    --bs-pagination-hover-bg: var(--h-surface-3);
    --bs-pagination-hover-color: var(--h-accent);
    --bs-pagination-hover-border-color: var(--h-border-strong);
    --bs-pagination-focus-bg: var(--h-surface-3);
    --bs-pagination-focus-color: var(--h-accent);
    --bs-pagination-active-bg: var(--h-accent);
    --bs-pagination-active-border-color: var(--h-accent);
    --bs-pagination-active-color: var(--h-accent-fg);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--h-text-disabled);
    --bs-pagination-disabled-border-color: var(--h-border);
    --bs-pagination-border-radius: 0;
    margin-bottom: 0;
}

/* ── buttons ── */

/* custom.css pins .btn to 5px 4px with !important */
.btn {
    --bs-btn-border-radius: 0;
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: var(--h-fs-sm);
    padding: .32rem .7rem !important;
    letter-spacing: .03em;
    border-radius: 0;
}

.btn-sm {
    --bs-btn-font-size: var(--h-fs-xs);
    padding: .2rem .5rem !important;
}

.btn-primary {
    --bs-btn-color: var(--h-accent-fg);
    --bs-btn-bg: var(--h-accent);
    --bs-btn-border-color: var(--h-accent);
    --bs-btn-hover-color: var(--h-accent-fg);
    --bs-btn-hover-bg: var(--h-accent-strong);
    --bs-btn-hover-border-color: var(--h-accent-strong);
    --bs-btn-active-color: var(--h-accent-fg);
    --bs-btn-active-bg: var(--h-accent-strong);
    --bs-btn-active-border-color: var(--h-accent-strong);
    --bs-btn-disabled-color: var(--h-accent-fg);
    --bs-btn-disabled-bg: var(--h-accent);
    --bs-btn-disabled-border-color: var(--h-accent);
    --bs-btn-focus-shadow-rgb: var(--h-accent-rgb);
}

/* Hermes's plain button: a surface with a strong hairline */
.btn-secondary,
.btn-default,
.btn-light,
.btn-outline-secondary {
    --bs-btn-color: var(--h-text);
    --bs-btn-bg: var(--h-surface-2);
    --bs-btn-border-color: var(--h-border-strong);
    --bs-btn-hover-color: var(--h-accent-text);
    --bs-btn-hover-bg: var(--h-accent-soft);
    --bs-btn-hover-border-color: var(--h-accent-border);
    --bs-btn-active-color: var(--h-accent-text);
    --bs-btn-active-bg: var(--h-accent-soft);
    --bs-btn-active-border-color: var(--h-accent-border);
    --bs-btn-disabled-color: var(--h-text-disabled);
    --bs-btn-disabled-bg: var(--h-surface-2);
    --bs-btn-disabled-border-color: var(--h-border);
}

/* Status buttons: soft fill, the status colour as border and text, solid
   on hover - pronounced without a row of saturated blocks. */
.btn-success, .btn-outline-success {
    --h-btn: var(--h-success); --h-btn-soft: var(--h-success-soft); --h-btn-text: var(--h-success-text);
}

.btn-danger, .btn-outline-danger {
    --h-btn: var(--h-error); --h-btn-soft: var(--h-error-soft); --h-btn-text: var(--h-error-text);
}

.btn-warning, .btn-outline-warning {
    --h-btn: var(--h-warn); --h-btn-soft: var(--h-warn-soft); --h-btn-text: var(--h-warn-text);
}

.btn-info, .btn-outline-info {
    --h-btn: var(--h-info); --h-btn-soft: var(--h-info-soft); --h-btn-text: var(--h-info-text);
}

.btn-success, .btn-outline-success,
.btn-danger, .btn-outline-danger,
.btn-warning, .btn-outline-warning,
.btn-info, .btn-outline-info {
    --bs-btn-color: var(--h-btn-text);
    --bs-btn-bg: var(--h-btn-soft);
    --bs-btn-border-color: var(--h-btn);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--h-btn);
    --bs-btn-hover-border-color: var(--h-btn);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--h-btn);
    --bs-btn-active-border-color: var(--h-btn);
    --bs-btn-disabled-color: var(--h-btn-text);
    --bs-btn-disabled-bg: var(--h-btn-soft);
    --bs-btn-disabled-border-color: var(--h-btn);
}

[data-bs-theme=dark] .btn-success, [data-bs-theme=dark] .btn-outline-success,
[data-bs-theme=dark] .btn-danger, [data-bs-theme=dark] .btn-outline-danger,
[data-bs-theme=dark] .btn-warning, [data-bs-theme=dark] .btn-outline-warning,
[data-bs-theme=dark] .btn-info, [data-bs-theme=dark] .btn-outline-info {
    --bs-btn-hover-color: var(--h-bg-2);
    --bs-btn-active-color: var(--h-bg-2);
}

.btn-outline-primary {
    --bs-btn-color: var(--h-accent-text);
    --bs-btn-border-color: var(--h-accent-border);
    --bs-btn-hover-color: var(--h-accent-fg);
    --bs-btn-hover-bg: var(--h-accent);
    --bs-btn-hover-border-color: var(--h-accent);
    --bs-btn-active-color: var(--h-accent-fg);
    --bs-btn-active-bg: var(--h-accent);
    --bs-btn-active-border-color: var(--h-accent);
}

.btn-link {
    --bs-btn-color: var(--h-accent-text);
    --bs-btn-hover-color: var(--h-accent);
}

/* ── forms ── */

.form-control,
.form-select,
.input-group-text {
    padding: .32rem .6rem;
    font-size: var(--h-fs-md);
    color: var(--h-text);
    background-color: var(--h-surface);
    border-color: var(--h-border-strong);
    border-radius: 0;
}

.form-select {
    padding-right: 2rem;
}

.input-group-text {
    background-color: var(--h-surface-3);
    color: var(--h-text-2);
}

.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
    padding-block: .2rem;
    font-size: var(--h-fs-sm);
    border-radius: 0;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--h-accent);
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

.form-control::placeholder {
    color: var(--h-text-3);
    opacity: .75;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--h-surface-3);
    color: var(--h-text-3);
}

.form-label,
.col-form-label {
    margin-bottom: .25rem;
    font-size: var(--h-fs-sm);
    font-weight: 600;
    color: var(--h-text-2);
}

.form-check-input {
    border-color: var(--h-border-strong);
    background-color: var(--h-surface);
}

.form-check-input:not(.form-switch .form-check-input):not([type=radio]) {
    border-radius: 0;
}

.form-check-input:checked {
    background-color: var(--h-accent);
    border-color: var(--h-accent);
}

.form-text,
.help-block {
    font-size: var(--h-fs-xs);
    color: var(--h-text-3);
}

.mb-3 {
    margin-bottom: .8rem !important;
}

/* ── badges, alerts ──
   Hermes's badge: soft fill, 1px border, the status colour as text. */

.badge {
    --bs-badge-padding-x: .5rem;
    --bs-badge-padding-y: .22rem;
    --bs-badge-font-size: var(--h-fs-xs);
    --bs-badge-font-weight: 700;
    --bs-badge-border-radius: 0;
    font-family: 'IBM Plex Sans', var(--bs-font-sans-serif);
    border: 1px solid transparent;
    letter-spacing: .02em;
}

.badge.text-bg-primary, .badge.bg-primary {
    background-color: var(--h-accent-soft) !important;
    color: var(--h-accent-text) !important;
    border-color: var(--h-accent-border);
}

.badge.text-bg-secondary, .badge.bg-secondary, .badge.text-bg-light, .badge.text-bg-dark {
    background-color: var(--h-surface-3) !important;
    color: var(--h-text-2) !important;
    border-color: var(--h-border-strong);
}

.badge.text-bg-success, .badge.bg-success {
    background-color: var(--h-success-soft) !important;
    color: var(--h-success-text) !important;
    border-color: var(--h-success);
}

.badge.text-bg-warning, .badge.bg-warning {
    background-color: var(--h-warn-soft) !important;
    color: var(--h-warn-text) !important;
    border-color: var(--h-warn);
}

.badge.text-bg-danger, .badge.bg-danger {
    background-color: var(--h-error-soft) !important;
    color: var(--h-error-text) !important;
    border-color: var(--h-error);
}

.badge.text-bg-info, .badge.bg-info {
    background-color: var(--h-info-soft) !important;
    color: var(--h-info-text) !important;
    border-color: var(--h-info);
}

/* the DNSSEC state is a .btn.badge: the badge's white text would win over
   the button's own colour */
.btn.badge {
    padding: .22rem .5rem !important;
    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
}

.btn.badge:hover {
    color: var(--bs-btn-hover-color);
    border-color: var(--bs-btn-hover-border-color);
}

.alert {
    --bs-alert-padding-x: .85rem;
    --bs-alert-padding-y: .6rem;
    --bs-alert-border-radius: 0;
}

.alert-info, .alert-primary {
    --bs-alert-bg: var(--h-info-soft);
    --bs-alert-color: var(--h-info-text);
    --bs-alert-border-color: var(--h-info);
}

.alert-success {
    --bs-alert-bg: var(--h-success-soft);
    --bs-alert-color: var(--h-success-text);
    --bs-alert-border-color: var(--h-success);
}

.alert-warning {
    --bs-alert-bg: var(--h-warn-soft);
    --bs-alert-color: var(--h-warn-text);
    --bs-alert-border-color: var(--h-warn);
}

.alert-danger {
    --bs-alert-bg: var(--h-error-soft);
    --bs-alert-color: var(--h-error-text);
    --bs-alert-border-color: var(--h-error);
}

.alert-dismissible .btn-close {
    padding: .8rem .85rem;
}

/* custom.css's JSON view and diff, which assume a white page */
.json-pre {
    margin: .75rem 0;
    padding: .6rem .85rem;
    background-color: var(--h-surface-2);
    border-color: var(--h-border-strong);
    color: var(--h-text);
}

.json-key { color: var(--h-accent-text); }
.json-value { color: var(--h-info-text); }
.json-string { color: var(--h-success-text); }

.diff { font-family: var(--bs-font-monospace); }

.diff-addition {
    background-color: var(--h-success-soft);
    color: var(--h-success-text);
    border-left-color: var(--h-success);
}

.diff-deletion {
    background-color: var(--h-error-soft);
    color: var(--h-error-text);
    border-left-color: var(--h-error);
}

/* ── dashboard v2 ──
   The page brings its own block of #dashboard-v2 rules: rounded card,
   pill tabs, 0.75rem x 1.25rem cells. Same id here, so these win by order. */

#dashboard-v2 .dashboard-v2-card {
    border-color: var(--h-glass-line);
    border-radius: 0;
}

#dashboard-v2 .dashboard-v2-card-header {
    min-height: 0;
    padding: .55rem .85rem;
    border-bottom-color: var(--h-border-strong);
}

#dashboard-v2 .dashboard-v2-card-header .card-title {
    font-size: var(--h-fs-lg);
}

#dashboard-v2 .dashboard-v2-preview-badge {
    border-radius: 0;
    border-color: var(--h-accent-border);
    background: var(--h-accent-soft);
    color: var(--h-accent-text);
}

#dashboard-v2 .dashboard-v2-tabs {
    padding: 0;
    border: 0;
    border-radius: 0;
    gap: .25rem;
}

#dashboard-v2 .dashboard-v2-tabs .nav-link {
    padding: .28rem .65rem;
    border: 1px solid var(--h-border-strong);
    border-radius: 0;
    background: var(--h-surface-2);
    color: var(--h-text);
    font-size: var(--h-fs-sm);
    font-weight: 600;
    box-shadow: none;
}

#dashboard-v2 .dashboard-v2-tabs .nav-link:hover,
#dashboard-v2 .dashboard-v2-tabs .nav-link.active {
    border-color: var(--h-accent-border);
    background: var(--h-accent-soft);
    color: var(--h-accent-text);
    box-shadow: none;
}

#dashboard-v2 .dashboard-v2-zone-option .nav-link.active::before {
    border-color: var(--h-accent);
    background: var(--h-accent);
}

#dashboard-v2 .dashboard-v2-tab-section {
    border-left-color: var(--h-border-strong);
    color: var(--h-text-3);
}

#dashboard-v2 .dashboard-v2-table-toolbar,
#dashboard-v2 .dashboard-v2-table-footer {
    min-height: 0;
    padding: .45rem .85rem;
    border-color: var(--h-border);
}

#dashboard-v2 .dashboard-v2-filter input {
    border-radius: 0;
}

#dashboard-v2 table.records thead th,
#dashboard-v2 table.records tbody td {
    padding: .34rem .85rem;
}

#dashboard-v2 table.records thead th {
    padding-block: .5rem;
    border-bottom-color: var(--h-border-strong);
    color: var(--h-accent-text);
    font-size: var(--h-fs-xs);
    font-weight: 700;
    letter-spacing: .08em;
}

#dashboard-v2 table.records tbody td {
    border-bottom-color: var(--h-border);
    color: var(--h-text-2);
}

#dashboard-v2 table.records tbody tr:nth-child(even) > td {
    background-color: var(--h-row-alt);
}

#dashboard-v2 table.records tbody tr:hover > td {
    background-color: var(--h-row-hover);
    color: var(--h-text);
}

#dashboard-v2 table.records td:first-child a {
    color: var(--h-accent-text);
    font-weight: 700;
}

#dashboard-v2 .dashboard-dnssec-pill {
    border-radius: 0;
    border-color: var(--h-border-strong);
    background: var(--h-surface-3);
    color: var(--h-text-2);
}

#dashboard-v2 .dashboard-dnssec-pill.is-signed {
    border-color: var(--h-success);
    background: var(--h-success-soft);
    color: var(--h-success-text);
}

#dashboard-v2 .dashboard-v2-edit-button,
#dashboard-v2 .dashboard-v2-menu-toggle {
    border-color: var(--h-border-strong);
    background: var(--h-surface-2);
    color: var(--h-text);
}

#dashboard-v2 .dashboard-v2-edit-button:hover,
#dashboard-v2 .dashboard-v2-menu-toggle:hover {
    border-color: var(--h-accent-border);
    background: var(--h-accent-soft);
    color: var(--h-accent-text);
}

#dashboard-v2 .dashboard-v2-table-footer .page-link {
    padding: .22rem .55rem;
}

/* ── login ── */

.login-box,
.register-box {
    width: 26rem;
}

.login-box .card,
.register-box .card {
    --bs-card-bg: var(--h-glass-strong);
}

.login-box .card-header,
.register-box .card-header {
    padding: 1.1rem 1rem .9rem;
}

.login-box .card-header a,
.register-box .card-header a {
    font-family: 'IBM Plex Sans', var(--bs-font-sans-serif);
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--h-accent-text);
    text-decoration: none;
}

.login-card-body,
.register-card-body {
    padding: 1.25rem;
    background: transparent;
    color: var(--h-text-2);
}

/* Where nothing can blur, the surface is simply denser. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root, [data-bs-theme], html[data-bs-theme] .app-sidebar {
        --h-glass: var(--h-surface);
        --h-glass-shell: var(--h-surface);
    }
}

@media (prefers-reduced-transparency: reduce) {
    :root, [data-bs-theme], html[data-bs-theme] .app-sidebar {
        --h-glass: var(--h-surface);
        --h-glass-shell: var(--h-surface);
        --h-glass-strong: var(--h-surface);
    }
}