/* The Dernetz brand (kit 04, Dionis 2026-10-28): forest green, warm ivory, champagne, and bronze on light grounds.
   Loaded last in <head>, after Bootstrap, the dark theme and base.html's own styles, so Bootstrap's primary colour,
   links, focus rings and the shell (sidebar, tabs, top bar) take the brand. Status colours (success, warning, danger)
   keep their meaning. Light values here; [data-theme="dark"] redefines the same tokens below. */

:root {
  --dz-forest: #0b3026;
  --dz-forest-deep: #071f18;
  --dz-forest-soft: #16463a;
  --dz-ivory: #f4ede0;
  --dz-champagne: #d7c298;
  --dz-bronze: #8a6636;
  --dz-ground: #faf7f1;          /* the page behind white cards */
  --dz-link-brand: #1f6b55;      /* 6.4:1 on white */
  --dz-accent: var(--dz-forest);
  --dz-accent-hover: var(--dz-forest-soft);
  --dz-accent-text: var(--dz-ivory);
  --dz-focus: rgba(11, 48, 38, 0.22);
  --accent-primary: var(--dz-link-brand);  /* the phone bar and pages that read the older token */

  --bs-primary: var(--dz-forest);
  --bs-primary-rgb: 11, 48, 38;
  --bs-primary-text-emphasis: var(--dz-forest);
  --bs-primary-bg-subtle: #e6eee9;
  --bs-primary-border-subtle: #b8cbc1;
  --bs-link-color: var(--dz-link-brand);
  --bs-link-color-rgb: 31, 107, 85;
  --bs-link-hover-color: var(--dz-forest);
  --bs-link-hover-color-rgb: 11, 48, 38;
  --bs-focus-ring-color: var(--dz-focus);
}
/* The ivory ground on the page only: Bootstrap paints inputs with --bs-body-bg, and they stay white */
body { background-color: var(--dz-ground); }

[data-theme="dark"] {
  --dz-bg: #061813;
  --dz-surface: #0c261f;
  --dz-raised: #123329;
  --dz-line: #1f463a;
  --dz-text: #ece5d6;
  --dz-muted: #a3b1a8;
  --dz-link: var(--dz-champagne);
  --dz-accent: var(--dz-champagne);
  --dz-accent-hover: #e6d7b3;
  --dz-accent-text: var(--dz-forest);
  --dz-focus: rgba(215, 194, 152, 0.3);
  --accent-primary: var(--dz-champagne);
  --bs-primary: var(--dz-champagne);
  --bs-primary-rgb: 215, 194, 152;
  --bs-primary-text-emphasis: var(--dz-champagne);
  --bs-primary-bg-subtle: #1c3a30;
  --bs-primary-border-subtle: #3a5a4c;
  --bs-link-color-rgb: 215, 194, 152;
  --bs-link-hover-color: #e6d7b3;
  --bs-link-hover-color-rgb: 230, 215, 179;
  --bs-emphasis-color: #f7f2e8;
  --bs-heading-color: var(--dz-ivory);
}

/* Bootstrap parts whose colours are compiled in rather than read from --bs-primary */
.btn-primary {
  --bs-btn-color: var(--dz-accent-text);
  --bs-btn-bg: var(--dz-accent);
  --bs-btn-border-color: var(--dz-accent);
  --bs-btn-hover-color: var(--dz-accent-text);
  --bs-btn-hover-bg: var(--dz-accent-hover);
  --bs-btn-hover-border-color: var(--dz-accent-hover);
  --bs-btn-active-color: var(--dz-accent-text);
  --bs-btn-active-bg: var(--dz-accent-hover);
  --bs-btn-active-border-color: var(--dz-accent-hover);
  --bs-btn-disabled-color: var(--dz-accent-text);
  --bs-btn-disabled-bg: var(--dz-accent);
  --bs-btn-disabled-border-color: var(--dz-accent);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--dz-accent);
  --bs-btn-border-color: var(--dz-accent);
  --bs-btn-hover-color: var(--dz-accent-text);
  --bs-btn-hover-bg: var(--dz-accent);
  --bs-btn-hover-border-color: var(--dz-accent);
  --bs-btn-active-color: var(--dz-accent-text);
  --bs-btn-active-bg: var(--dz-accent);
  --bs-btn-active-border-color: var(--dz-accent);
  --bs-btn-disabled-color: var(--dz-accent);
  --bs-btn-disabled-border-color: var(--dz-accent);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--dz-accent); --bs-nav-pills-link-active-color: var(--dz-accent-text); }
.nav { --bs-nav-link-color: var(--bs-link-color); --bs-nav-link-hover-color: var(--bs-link-hover-color); }
.pagination {
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-active-bg: var(--dz-accent);
  --bs-pagination-active-border-color: var(--dz-accent);
  --bs-pagination-active-color: var(--dz-accent-text);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--dz-focus);
}
.dropdown-menu { --bs-dropdown-link-active-bg: var(--dz-accent); --bs-dropdown-link-active-color: var(--dz-accent-text); }
.list-group {
  --bs-list-group-active-bg: var(--dz-accent);
  --bs-list-group-active-border-color: var(--dz-accent);
  --bs-list-group-active-color: var(--dz-accent-text);
}
.progress, .progress-stacked { --bs-progress-bar-bg: var(--dz-accent); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--dz-forest-soft);
  box-shadow: 0 0 0 0.25rem var(--dz-focus);
}
[data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { border-color: var(--dz-champagne); }
.form-check-input:checked { background-color: var(--dz-accent); border-color: var(--dz-accent); }

/* The sidebar: forest, the monogram on top, champagne for where you are */
.brand-new-menu, .sidebar-flyout, #mobileMenuBtn { background: var(--dz-forest); }
.brand-new-menu .sidebar-logo {
  background: var(--dz-forest-deep);
  border-bottom-color: rgba(215, 194, 152, 0.18);
  color: var(--dz-champagne);
}
.brand-new-menu .sidebar-logo { position: relative; }
.brand-new-menu .sidebar-logo img { display: block; width: 30px; height: 30px; flex-shrink: 0; }
.sidebar-toggle-btn { color: #b9c4bc; }
/* Collapsed, the 56px square shows the monogram; the pin button covers it only while pointed at or focused */
.brand-new-menu:not(.is-expanded) .sidebar-toggle-btn {
  position: absolute;
  inset: 10px 8px;
  width: auto;
  height: auto;
  margin: 0;
  opacity: 0;
  background: var(--dz-forest-soft);
  color: var(--dz-ivory);
}
.brand-new-menu:not(.is-expanded) .sidebar-logo:hover .sidebar-toggle-btn,
.brand-new-menu:not(.is-expanded) .sidebar-toggle-btn:focus-visible { opacity: 1; }
.sidebar-logo .sidebar-logo-label { color: var(--dz-ivory); letter-spacing: 0.02em; }
.sidebar-icon-btn { color: #b9c4bc; }
.sidebar-icon-btn:hover, .sidebar-group:hover .sidebar-icon-btn, .flyout-link:hover,
.sidebar-toggle-btn:hover, #mobileMenuBtn:hover { background: var(--dz-forest-soft); color: var(--dz-ivory); }
.sidebar-icon-btn.active { background: var(--dz-champagne); color: var(--dz-forest); }
.sidebar-divider, .sidebar-flyout::-webkit-scrollbar-thumb { background: rgba(215, 194, 152, 0.18); }
.sidebar-flyout, .flyout-header, .sidebar-bottom { border-color: rgba(215, 194, 152, 0.18); }
.flyout-link .flyout-badge { background: var(--dz-champagne); color: var(--dz-forest); }
.sidebar-icon-btn[data-tooltip]::after { background: var(--dz-forest-deep); color: var(--dz-ivory); }

/* Tabs, breadcrumbs and the top bar */
.tab-item:hover { background: var(--bs-primary-bg-subtle); border-color: var(--dz-forest-soft); }
.tab-item.active { border-color: var(--dz-forest-soft); box-shadow: 0 -2px 8px rgba(11, 48, 38, 0.12); }
.tab-icon, .tab-new-btn, .breadcrumb-item a { color: var(--bs-link-color); }
.tab-new-btn:hover { background: var(--dz-accent); border-color: var(--dz-accent); color: var(--dz-accent-text); }
.topbar { border-bottom-color: rgba(11, 48, 38, 0.1); }
.joji-global-thinking span { background: var(--dz-champagne); }