/* BBH Materialanforderung - central, accessible light/dark theme.
   Loaded AFTER site.css. Keep UI colors here, not in inline styles.
   Logo and compact layouts from site.css remain unchanged. */
:root {
  color-scheme: light;
  --ui-page: #f2f6f9;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f0f7fa;
  --ui-surface-alt: #e5f1f6;
  --ui-surface-raised: #ffffff;
  --ui-text: #173343;
  --ui-heading: #15384c;
  --ui-muted: #506b78;
  --ui-subtle: #56717e;
  --ui-border: #c3d7e1;
  --ui-border-strong: #92b0c1;
  --ui-input: #ffffff;
  --ui-input-text: #173343;
  --ui-input-border: #9eb9c8;
  --ui-placeholder: #5b7482;
  --ui-button: #ffffff;
  --ui-button-text: #214457;
  --ui-button-hover: #e2eff5;
  --ui-button-border: #abc5d1;
  --ui-primary: #006b96;
  --ui-primary-hover: #005274;
  --ui-primary-text: #ffffff;
  --ui-link: #075b7c;
  --ui-nav: #143d56;
  --ui-nav-text: #f3fbff;
  --ui-nav-hover: #275772;
  --ui-nav-active: #ecf8fc;
  --ui-nav-active-text: #123c54;
  --ui-row-alt: #f2f8fb;
  --ui-row-hover: #e0f1f8;
  --ui-table-fixed: #ffffff;
  --ui-info-bg: #e4f4fa;
  --ui-info-text: #145774;
  --ui-info-border: #96c8da;
  --ui-success-bg: #e3f5eb;
  --ui-success-text: #165d3e;
  --ui-success-border: #9fd0b6;
  --ui-warn-bg: #fff2d6;
  --ui-warn-text: #75500d;
  --ui-warn-border: #dfc07d;
  --ui-danger-bg: #fff0f0;
  --ui-danger-text: #892c35;
  --ui-danger-border: #e2afb4;
  --ui-neutral-bg: #ebf0f3;
  --ui-neutral-text: #435967;
  --ui-focus: #0087b8;
  --ui-overlay: rgb(6 21 33 / .62);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ui-page: #111e28;
  --ui-surface: #1d2d39;
  --ui-surface-soft: #253b49;
  --ui-surface-alt: #2c4655;
  --ui-surface-raised: #243744;
  --ui-text: #eef5f8;
  --ui-heading: #f6fbfe;
  --ui-muted: #b7cbd5;
  --ui-subtle: #c2d2db;
  --ui-border: #526b7a;
  --ui-border-strong: #7594a4;
  --ui-input: #142630;
  --ui-input-text: #f1f7fa;
  --ui-input-border: #718f9e;
  --ui-placeholder: #b2c5cf;
  --ui-button: #2a4250;
  --ui-button-text: #edf7fb;
  --ui-button-hover: #365668;
  --ui-button-border: #718e9d;
  --ui-primary: #006e98;
  --ui-primary-hover: #00577b;
  --ui-primary-text: #ffffff;
  --ui-link: #8bdcff;
  --ui-nav: #0b2637;
  --ui-nav-text: #e7f7ff;
  --ui-nav-hover: #294d62;
  --ui-nav-active: #31596b;
  --ui-nav-active-text: #ffffff;
  --ui-row-alt: #263b48;
  --ui-row-hover: #365362;
  --ui-table-fixed: #20323e;
  --ui-info-bg: #204356;
  --ui-info-text: #d7effb;
  --ui-info-border: #5b889b;
  --ui-success-bg: #173f35;
  --ui-success-text: #c9f4dd;
  --ui-success-border: #598d75;
  --ui-warn-bg: #47391f;
  --ui-warn-text: #ffebb7;
  --ui-warn-border: #967342;
  --ui-danger-bg: #4a2932;
  --ui-danger-text: #ffdbe0;
  --ui-danger-border: #a16570;
  --ui-neutral-bg: #344450;
  --ui-neutral-text: #e0eaf0;
  --ui-focus: #62cfff;
  --ui-overlay: rgb(0 9 16 / .73);
}
/* Global foundations and readable secondary text. */
:root, :root body { background-color: var(--ui-page); color: var(--ui-text); }
:root h1, :root h2, :root h3, :root .brand b,
:root .classic-section-title h2, :root .detail-overview strong { color: var(--ui-heading); }
:root a, :root .link { color: var(--ui-link); }
:root .muted, :root .tiny, :root .heading p,
:root .classic-content .heading p, :root .classic-section-title .muted,
:root .draft-state, :root .detail-overview small,
:root .data-table td small, :root .brand small,
:root .user-name small, :root .auth-card p, :root .modal p,
:root .brand-mini span, :root .brand-mini .brand-login-text small,
:root .admin-note, :root .page-loading { color: var(--ui-muted); }
:root .brand-mini, :root .brand-mini .brand-login-text { color: var(--ui-heading); }
:root label, :root .checkline, :root .password-option { color: var(--ui-text); }
:root .must-change, :root .admin-users .must-change { color: var(--ui-warn-text); }
:root .draft-state.is-warning { color: var(--ui-danger-text); }
:root .user-name { color: var(--ui-text); }
:root .topbar, :root .panel, :root .auth-card,
:root .modal, :root .kpi { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); }
:root .modal-admin { background: var(--ui-surface-raised); color: var(--ui-text); }
:root .modal-admin h2 { color: var(--ui-heading); }
:root .modal-admin .modal-overline { color: var(--ui-link); }
:root .modal-admin .modal-divider { background: var(--ui-border); }
:root .modal-mask { background: var(--ui-overlay); }
:root .auth-wrap { background: var(--ui-page); }
:root[data-theme="light"] .auth-wrap { background-image: linear-gradient(130deg, #e2f2f9 0%, #f7fbfd 65%, #ecf5f9 100%); }
:root[data-theme="dark"] .auth-wrap { background-image: linear-gradient(130deg, #122b3a 0%, #111e28 65%, #182c39 100%); }
:root .auth-card p, :root .modal p { color: var(--ui-muted); }
:root .password-help, :root .sidebar-help { background: var(--ui-info-bg); color: var(--ui-info-text); border-color: var(--ui-info-border); }
:root .sidebar-help b { color: var(--ui-info-text); }
:root .sidebar { background: var(--ui-surface-soft); border-color: var(--ui-border); }
:root .side-nav { color: var(--ui-text); }
:root .side-nav:hover, :root .side-nav.active { background: var(--ui-surface-alt); color: var(--ui-heading); }
:root .side-label { color: var(--ui-muted); }
:root .kpi span, :root .kpi small { color: var(--ui-muted); }
:root .kpi strong { color: var(--ui-heading); }
:root .kpi:hover { background: var(--ui-surface-soft); border-color: var(--ui-border-strong); }
:root .detail-overview { border-color: var(--ui-border); }
:root .header-logo-shell { background: #eef4f7; border: 1px solid #d4e2ea; }
:root[data-theme="dark"] .header-logo-shell { background: #eef4f7; border-color: #c7d7df; }
/* The original BBH logo contains a dark H; a light backing keeps it visible
   on the dark header and login card without changing the supplied logo image. */
:root[data-theme="dark"] .logo-window {
  background-color: #e8f2f6;
  border-radius: 4px;
}
/* Native controls, autofill, search, quantities and disabled states. */
:root input:not([type="checkbox"]), :root select, :root textarea {
  background: var(--ui-input); color: var(--ui-input-text); border-color: var(--ui-input-border);
}
:root input::placeholder, :root textarea::placeholder { color: var(--ui-placeholder); opacity: 1; }
:root select option { background: var(--ui-input); color: var(--ui-input-text); }
:root input[type="checkbox"] { accent-color: var(--ui-primary); }
:root input:focus-visible, :root select:focus-visible, :root textarea:focus-visible,
:root button:focus-visible, :root a:focus-visible {
  outline: 2px solid var(--ui-focus); outline-offset: 2px;
}
:root input:focus, :root select:focus, :root textarea:focus {
  border-color: var(--ui-focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-focus) 29%, transparent);
}
:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] input:-webkit-autofill:hover,
:root[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ui-input-text);
  -webkit-box-shadow: 0 0 0 1000px var(--ui-input) inset;
  caret-color: var(--ui-input-text);
}
:root .btn { background: var(--ui-button); border-color: var(--ui-button-border); color: var(--ui-button-text); }
:root .btn:hover { background: var(--ui-button-hover); border-color: var(--ui-border-strong); color: var(--ui-button-text); }
:root .btn.outline { background: transparent; color: var(--ui-button-text); border-color: var(--ui-button-border); }
:root .btn.outline:hover { background: var(--ui-button-hover); }
:root .btn.primary, :root .btn.primary:visited {
  background: var(--ui-primary); border-color: var(--ui-primary); color: var(--ui-primary-text);
}
:root .btn.primary:hover { background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); color: var(--ui-primary-text); }
:root .btn.danger-outline { color: var(--ui-danger-text); border-color: var(--ui-danger-border); }
/* Inactive controls remain legible but visibly different from actionable ones. */
:root .btn:disabled, :root .btn[disabled],
:root .btn.primary:disabled, :root .btn.primary[disabled] {
  opacity: 1;
  background: var(--ui-surface-alt);
  border-color: var(--ui-border);
  color: var(--ui-muted);
  cursor: not-allowed;
}
:root select:disabled, :root input:disabled {
  opacity: 1;
  color: var(--ui-muted);
  background: var(--ui-surface-soft);
}

:root .icon-button { color: var(--ui-text); }
:root .icon-button:hover { background: var(--ui-button-hover); color: var(--ui-heading); }
:root .tab, :root .tab span { color: var(--ui-muted); }
:root .tab:hover { background: var(--ui-surface-soft); color: var(--ui-heading); }
:root .tab.selected { background: var(--ui-surface-alt); color: var(--ui-heading); }
:root .tab.selected span { color: var(--ui-text); }
:root .count, :root .nav-count { background: var(--ui-surface-alt); color: var(--ui-heading); }
/* Classic BBH navigation and compact section headers. */
:root .classic-nav { background: var(--ui-nav); border-color: var(--ui-nav); }
:root .classic-tab { color: var(--ui-nav-text); }
:root .classic-tab:hover { background: var(--ui-nav-hover); color: var(--ui-nav-text); }
:root .classic-tab.active { background: var(--ui-nav-active); color: var(--ui-nav-active-text); border-bottom-color: #00a3e1; }
:root .classic-tab.active .nav-count { background: var(--ui-nav); color: var(--ui-nav-text); }
:root .classic-section-title { background: var(--ui-surface-soft); border-color: var(--ui-border); }
/* Grids, tables, alternating rows and the frozen last article column. */
:root .data-table th, :root .classic-table th {
  background: var(--ui-surface-alt); color: var(--ui-heading); border-color: var(--ui-border);
}
:root .data-table td, :root .classic-table td { color: var(--ui-text); border-color: var(--ui-border); }
:root .data-table b, :root .classic-table b,
:root .data-table strong, :root .classic-table strong { color: var(--ui-heading); }
:root .data-table .empty, :root .classic-table .empty { color: var(--ui-muted); }
:root .classic-table tr:nth-child(even), :root .data-table tbody tr:nth-child(even) { background: var(--ui-row-alt); }
:root .classic-table tbody tr:hover, :root .data-table tbody tr:hover { background: var(--ui-row-hover); }
:root .articles-table th:last-child { background: var(--ui-surface-alt); }
:root .articles-table td:last-child { background: var(--ui-table-fixed); border-color: var(--ui-border); }
:root .articles-table tbody tr:nth-child(even) td:last-child { background: var(--ui-row-alt); }
:root .articles-table tbody tr:hover td:last-child { background: var(--ui-row-hover); }
:root .classic-table .add-plus { background: var(--ui-info-bg); color: var(--ui-info-text); border-color: var(--ui-info-border); }
:root .classic-table .add-plus:hover { background: var(--ui-surface-alt); }
:root .cart-row, :root .article-row { border-color: var(--ui-border); }
:root .secret code, :root .modal-admin .secret code {
  background: var(--ui-input); color: var(--ui-input-text); border-color: var(--ui-border-strong);
}
/* Every status chip and notice has BOTH a readable background and text color. */
:root .pill { background: var(--ui-neutral-bg); color: var(--ui-neutral-text); }
:root .pill.open { background: var(--ui-info-bg); color: var(--ui-info-text); }
:root .pill.partial, :root .pill.block { background: var(--ui-warn-bg); color: var(--ui-warn-text); }
:root .pill.done { background: var(--ui-success-bg); color: var(--ui-success-text); }
:root .pill.archive { background: var(--ui-neutral-bg); color: var(--ui-neutral-text); }
:root .alert { background: var(--ui-info-bg); color: var(--ui-info-text); border-color: var(--ui-info-border); }
:root .alert.danger { background: var(--ui-danger-bg); color: var(--ui-danger-text); border-color: var(--ui-danger-border); }
:root .alert.success { background: var(--ui-success-bg); color: var(--ui-success-text); border-color: var(--ui-success-border); }
:root .alert a { color: var(--ui-link); text-decoration: underline; }
:root .alert.success a { color: var(--ui-success-text); }
:root .alert.danger a { color: var(--ui-danger-text); }
:root .toast { background: #123f53; color: #fff; }
:root .toast.error { background: #873d3d; color: #fff; }
/* The Laufzettel stays paper-white even while the surrounding UI is dark. */
:root .sheet, :root[data-theme="dark"] .sheet { background: #fff; color: #162f3d; }
:root .sheet h1, :root .sheet h2, :root .sheet strong,
:root .sheet .print-header strong { color: #17465e; }
:root .sheet .print-meta dt, :root .sheet .print-table small { color: #4b6370; }
:root .sheet .print-table th { background: #e8f1f5; color: #183d51; }
:root .sheet .print-table td { background: #fff; color: #162f3d; }
:root .sheet .print-table th, :root .sheet .print-table td { border-color: #b9c9d1; }
@media print {
  :root, :root body, :root .sheet { background: #fff !important; color: #000 !important; }
  :root .sheet h1, :root .sheet h2, :root .sheet strong,
  :root .sheet .print-header strong, :root .sheet .print-meta dt,
  :root .sheet .print-table td, :root .sheet .print-table th,
  :root .sheet .print-table small { color: #000 !important; }
  :root .sheet .print-table th { background: #edf1f4 !important; }
  :root .sheet .print-actions { display: none !important; }
}
/* At phone widths the title must not cover the theme and logout controls. */
@media (max-width: 550px) {
  :root .brand > span:not(.logo-window) { display: none; }
  :root .bar-inner { gap: 7px; }
  :root .user-actions { flex-wrap: nowrap; gap: 3px; }
  :root .user-actions .btn.small { padding: 6px 7px; }
}