/* DTFM 2.0 theme — Bootstrap 5.3, matched to the admin (django-unfold).
 *
 * Loaded AFTER bootstrap.min.css. It sets Bootstrap's CSS variables, plus a
 * small set of our own tokens, once per theme; every other stylesheet uses the
 * tokens and never a colour of its own. That is what keeps light and dark whole:
 * a hex code written for one theme is the colour that breaks in the other — the
 * white cards and black tables on a navy page this file replaced.
 *
 * The look is the admin's, so the two read as one product:
 *   - ONE SURFACE. Page, sidebar, top bar and cards share the background and are
 *     told apart by 1px borders, not by shades. Fills are kept for the few things
 *     that need to stand out: hover, a table head, the active menu item.
 *   - Tailwind's `gray` scale, which is Unfold's default `base` palette, and its
 *     blue-600 as primary (UNFOLD["COLORS"]["primary"] in settings/base.py).
 *   - Status colours are tints: a pale fill with dark text in light, a 15% fill
 *     with light text in dark — the `--tone-*` pairs below.
 */

/* --- Inter, self-hosted ---------------------------------------------------
 * Not from Google Fonts: LG München I ruled that CDN-delivered Google Fonts leak
 * the visitor's IP and breach the GDPR (ADR-0023). Four weights, latin subset.
 */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.da03732a27e1.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-500.51205681a1ba.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.2ede57db1a3a.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-700.8ca0a5155296.woff2") format("woff2"); }


/* --- Shared by both themes ------------------------------------------------ */
:root,
[data-bs-theme] {
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --gray-950: #030712;

  --bs-body-font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bs-font-monospace: "Cascadia Mono", Consolas, ui-monospace, "SF Mono", monospace;
  --bs-body-font-size: .875rem;

  /* 6px controls, 8px cards: the admin's radii. */
  --bs-border-radius: .375rem;
  --bs-border-radius-sm: .25rem;
  --bs-border-radius-lg: .5rem;
  --bs-border-radius-xl: .75rem;
  --radius-card: .5rem;

  --shadow-pop: 0 10px 30px -10px rgba(0, 0, 0, .35);
}


/* --- Light ---------------------------------------------------------------- */
[data-bs-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --surface: #FFFFFF;                 /* page, sidebar, top bar, cards */
  --surface-muted: var(--gray-50);    /* table head, section strip, inset areas */
  --surface-hover: var(--gray-100);
  --surface-active: var(--gray-100);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);   /* inputs */

  /* Text */
  --text: var(--gray-700);
  --text-strong: var(--gray-900);
  --text-muted: var(--gray-500);
  --text-subtle: var(--gray-400);

  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --primary-text: #2563EB;
  --primary-rgb: 37, 99, 235;

  /* Tones: background / text */
  --tone-gray-bg: var(--gray-100);   --tone-gray-fg: var(--gray-600);
  --tone-blue-bg: #DBEAFE;           --tone-blue-fg: #1D4ED8;
  --tone-green-bg: #DCFCE7;          --tone-green-fg: #15803D;
  --tone-amber-bg: #FEF3C7;          --tone-amber-fg: #B45309;
  --tone-red-bg: #FEE2E2;            --tone-red-fg: #B91C1C;
  --tone-orange-bg: #FFEDD5;         --tone-orange-fg: #C2410C;
  --tone-teal-bg: #CCFBF1;           --tone-teal-fg: #0F766E;
  --tone-indigo-bg: #E0E7FF;         --tone-indigo-fg: #4338CA;
  --tone-sky-bg: #E0F2FE;            --tone-sky-fg: #0369A1;

  /* Plant semantics: warm is Vorlauf, cool is Rücklauf. */
  --flow: #DC2626;
  --return: #2563EB;
  --gas: #B45309;

  /* Bootstrap */
  --bs-body-bg: var(--surface);
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: var(--text);
  --bs-body-color-rgb: 55, 65, 81;
  --bs-emphasis-color: var(--text-strong);
  --bs-emphasis-color-rgb: 17, 24, 39;
  --bs-secondary-color: var(--text-muted);
  --bs-secondary-color-rgb: 107, 114, 128;
  --bs-tertiary-color: var(--text-subtle);
  --bs-secondary-bg: var(--surface);
  --bs-secondary-bg-rgb: 255, 255, 255;
  --bs-tertiary-bg: var(--surface-muted);
  --bs-tertiary-bg-rgb: 249, 250, 251;
  --bs-border-color: var(--border);
  --bs-border-color-translucent: rgba(17, 24, 39, .08);
  --bs-secondary-rgb: 107, 114, 128;
  --bs-heading-color: var(--text-strong);

  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--primary-rgb);
  --bs-primary-text-emphasis: var(--primary-hover);
  --bs-primary-bg-subtle: var(--tone-blue-bg);
  --bs-primary-border-subtle: #BFDBFE;
  --bs-success-rgb: 22, 163, 74;
  --bs-success-text-emphasis: var(--tone-green-fg);
  --bs-warning-rgb: 217, 119, 6;
  --bs-warning-text-emphasis: var(--tone-amber-fg);
  --bs-danger-rgb: 220, 38, 38;
  --bs-danger-text-emphasis: var(--tone-red-fg);
  --bs-info-bg-subtle: var(--tone-sky-bg);
  --bs-info-border-subtle: #BAE6FD;
  --bs-secondary-bg-subtle: var(--gray-100);

  --bs-link-color: var(--primary-text);
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: var(--primary-hover);
  --bs-link-hover-color-rgb: 29, 78, 216;
}


/* --- Dark ----------------------------------------------------------------- */
[data-bs-theme="dark"] {
  color-scheme: dark;

  --surface: var(--gray-900);
  --surface-muted: rgba(31, 41, 55, .5);   /* gray-800 at 50%, as the admin */
  --surface-hover: rgba(31, 41, 55, .8);
  --surface-active: var(--gray-800);
  --border: var(--gray-800);
  --border-strong: var(--gray-700);

  --text: var(--gray-300);
  --text-strong: #FFFFFF;
  --text-muted: var(--gray-400);
  --text-subtle: var(--gray-500);

  --primary: #2563EB;
  --primary-hover: #3B82F6;
  --primary-text: #60A5FA;
  --primary-rgb: 59, 130, 246;

  --tone-gray-bg: rgba(156, 163, 175, .14);  --tone-gray-fg: var(--gray-400);
  --tone-blue-bg: rgba(59, 130, 246, .15);   --tone-blue-fg: #60A5FA;
  --tone-green-bg: rgba(34, 197, 94, .15);   --tone-green-fg: #4ADE80;
  --tone-amber-bg: rgba(245, 158, 11, .15);  --tone-amber-fg: #FBBF24;
  --tone-red-bg: rgba(239, 68, 68, .15);     --tone-red-fg: #F87171;
  --tone-orange-bg: rgba(249, 115, 22, .15); --tone-orange-fg: #FB923C;
  --tone-teal-bg: rgba(20, 184, 166, .15);   --tone-teal-fg: #2DD4BF;
  --tone-indigo-bg: rgba(99, 102, 241, .18); --tone-indigo-fg: #A5B4FC;
  --tone-sky-bg: rgba(14, 165, 233, .15);    --tone-sky-fg: #38BDF8;

  --flow: #F87171;
  --return: #60A5FA;
  --gas: #FBBF24;

  --bs-body-bg: var(--surface);
  --bs-body-bg-rgb: 17, 24, 39;
  --bs-body-color: var(--text);
  --bs-body-color-rgb: 209, 213, 219;
  --bs-emphasis-color: var(--text-strong);
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: var(--text-muted);
  --bs-secondary-color-rgb: 156, 163, 175;
  --bs-tertiary-color: var(--text-subtle);
  --bs-secondary-bg: var(--surface);
  --bs-secondary-bg-rgb: 17, 24, 39;
  --bs-tertiary-bg: #161E2B;               /* surface-muted, solid */
  --bs-tertiary-bg-rgb: 22, 30, 43;
  --bs-border-color: var(--border);
  --bs-border-color-translucent: rgba(255, 255, 255, .08);
  --bs-secondary-rgb: 156, 163, 175;
  --bs-heading-color: var(--text-strong);

  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--primary-rgb);
  --bs-primary-text-emphasis: var(--primary-text);
  --bs-primary-bg-subtle: var(--tone-blue-bg);
  --bs-primary-border-subtle: rgba(59, 130, 246, .3);
  --bs-success-rgb: 34, 197, 94;
  --bs-success-text-emphasis: var(--tone-green-fg);
  --bs-warning-rgb: 245, 158, 11;
  --bs-warning-text-emphasis: var(--tone-amber-fg);
  --bs-danger-rgb: 239, 68, 68;
  --bs-danger-text-emphasis: var(--tone-red-fg);
  --bs-info-bg-subtle: var(--tone-sky-bg);
  --bs-info-border-subtle: rgba(14, 165, 233, .3);
  --bs-secondary-bg-subtle: var(--gray-800);

  --bs-link-color: var(--primary-text);
  --bs-link-color-rgb: 96, 165, 250;
  --bs-link-hover-color: #93C5FD;
  --bs-link-hover-color-rgb: 147, 197, 253;
}


/* Older names still used here and there; they follow the tokens. */
:root,
[data-bs-theme] {
  --brand: var(--primary);
  --brand-text: var(--primary-text);
  --panel-bg: var(--surface);
  --sidebar-bg: var(--surface);
  --sev-critical: var(--tone-red-fg);
  --sev-major: var(--tone-amber-fg);
  --sev-minor: #EAB308;
  --sev-warning: var(--tone-sky-fg);
  --sev-indeterminate: var(--text-subtle);
}


/* --- Components ------------------------------------------------------------
 * Only what the variables cannot reach: Bootstrap compiles a few colours into
 * its rules (buttons, form focus), and the admin's quieter defaults differ from
 * Bootstrap's in a handful of places.
 */

body {
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; }
h2, .h2 { font-size: 1.125rem; font-weight: 600; }
h3, .h3 { font-size: 1rem; font-weight: 600; }

/* Links: coloured, underlined on hover only, as in the admin. */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a.btn:hover, .nav-link:hover, .dropdown-item:hover { text-decoration: none; }
.link-secondary { color: var(--text) !important; }
.link-secondary:hover { color: var(--primary-text) !important; }

code { color: var(--text-strong); }

/* Cards and panels: the same surface as the page, outlined. */
.card,
.panel {
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--border);
  --bs-card-cap-bg: var(--surface-muted);
  --bs-card-border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: none;
}
.panel { overflow: hidden; }
.card.shadow-sm, .card.shadow { box-shadow: none !important; }

/* Tables: no fill of their own, a quiet head, row rules. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: var(--surface-hover);
  --bs-table-hover-color: var(--text);
  --bs-table-striped-bg: var(--surface-muted);
  margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: .75rem 1rem; }
.table > thead > tr > th {
  background: var(--surface-muted);
  color: var(--text-strong);
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.table > tbody > tr:last-child > * { border-bottom: 0; }

/* Forms */
.form-control,
.form-select {
  background-color: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.form-control::placeholder { color: var(--text-subtle); }
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .2);
}
.form-control:disabled, .form-select:disabled { background-color: var(--surface-muted); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-range::-webkit-slider-thumb { background: var(--primary); }
.form-range::-moz-range-thumb { background: var(--primary); }
.form-range::-webkit-slider-runnable-track { background: var(--surface-active); }
.form-range::-moz-range-track { background: var(--surface-active); }
.input-group-text { background: var(--surface-muted); border-color: var(--border-strong); color: var(--text-muted); }
.form-text { color: var(--text-muted); }

/* Buttons: Bootstrap compiles its colours in, so they are set again here. */
.btn { font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-bg: var(--primary-hover);
  --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: var(--primary-rgb);
}
.btn-outline-secondary,
.btn-light,
.btn-secondary {
  --bs-btn-color: var(--text-strong);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text-strong);
  --bs-btn-hover-bg: var(--surface-hover);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text-strong);
  --bs-btn-active-bg: var(--surface-active);
  --bs-btn-active-border-color: var(--border-strong);
  --bs-btn-disabled-color: var(--text-subtle);
  --bs-btn-disabled-bg: var(--surface);
  --bs-btn-disabled-border-color: var(--border);
  --bs-btn-focus-shadow-rgb: var(--primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--primary-text);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--primary-hover);
  --bs-btn-active-border-color: var(--primary-hover);
}
.btn-outline-danger {
  --bs-btn-color: var(--tone-red-fg);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-bg: var(--tone-red-bg);
  --bs-btn-hover-border-color: var(--tone-red-fg);
  --bs-btn-hover-color: var(--tone-red-fg);
}
.btn-link { --bs-btn-color: var(--primary-text); --bs-btn-hover-color: var(--primary-hover); text-decoration: none; }

/* Pop-ups: the surface again, lifted by a border and a shadow. */
.modal {
  --bs-modal-bg: var(--surface);
  --bs-modal-border-color: var(--border);
  --bs-modal-header-border-color: var(--border);
  --bs-modal-footer-border-color: var(--border);
  --bs-modal-border-radius: var(--radius-card);
  --bs-modal-color: var(--text);
}
.modal-content { box-shadow: var(--shadow-pop); }
.modal-backdrop { --bs-backdrop-bg: #030712; --bs-backdrop-opacity: .6; }
.offcanvas { --bs-offcanvas-bg: var(--surface); --bs-offcanvas-border-color: var(--border); --bs-offcanvas-color: var(--text); }
.dropdown-menu {
  --bs-dropdown-font-size: .875rem;
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-bg: var(--surface-hover);
  --bs-dropdown-link-hover-color: var(--text-strong);
  --bs-dropdown-link-active-bg: var(--surface-active);
  --bs-dropdown-link-active-color: var(--primary-text);
  box-shadow: var(--shadow-pop);
}
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.nav-pills { --bs-nav-pills-link-active-bg: var(--surface-active); --bs-nav-pills-link-active-color: var(--primary-text); }
.nav-tabs { --bs-nav-tabs-border-color: var(--border); --bs-nav-tabs-link-active-bg: var(--surface); --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--surface); }

.alert { border-radius: var(--radius-card); }
.badge.bg-body-secondary { background: var(--tone-gray-bg) !important; color: var(--tone-gray-fg) !important; }
.text-bg-secondary { background: var(--tone-gray-bg) !important; color: var(--tone-gray-fg) !important; }

/* Bootstrap sizes controls at 1rem; the admin, and the rest of the page, at
   .875rem. */
.form-control, .form-select { font-size: .875rem; }
.btn { --bs-btn-font-size: .875rem; }
.btn-sm { --bs-btn-font-size: .8125rem; }