/* wwwroot/css/mz-theme.css — what MudTheme can't carry.
   Cycles IQ: the design session's file (brand/mz-theme.css) word for word; the app's additions are in one block at the end.
   Load after MudBlazor.min.css. Colors come from --mud-palette-*,
   so light/dark follow MudThemeProvider automatically. */
:root {
  --mz-accent-tint: #c4d9f9;  --mz-accent-deep: #002f6e;
  --mz-ochre-deep: #9a6500;   --mz-ochre-tint: #f6e6cb;
  --mz-chart-price: #37474f;
  --mz-chart-1: #1364ce; --mz-chart-2: #c48d25;
  --mz-chart-3: #6a3fb5; --mz-chart-4: #0e8a7a;
  --mz-heat: #b71c1c,#d32f2f,#e57373,#f2b8b8,#eae9e9,#b6dfc6,#66bb8a,#2e9e5b,#1b6e3c;
}
html.mz-dark {
  --mz-accent-tint: #17325c;  --mz-accent-deep: #cfe0fb;
  --mz-ochre-deep: #e8b95c;   --mz-ochre-tint: #2e2410;
  --mz-chart-price: #b0bec5;
}

.mz-num  { font-variant-numeric: tabular-nums; }
.mz-up   { color: var(--mud-palette-success); }
.mz-down { color: var(--mud-palette-error); }

.mz-appbar { border-bottom: 1px solid var(--mud-palette-divider); }
.mz-brand  { font-size: 15px; font-weight: 400; letter-spacing: -.02em; }
.mz-brand b { font-weight: 800; }

/* Phase chips: stage encoded as fill */
.mz-chip-outline { background: transparent !important; color: var(--mud-palette-primary) !important;
                   border: 1px solid var(--mud-palette-primary); }
.mz-chip-tint    { background: var(--mz-accent-tint) !important; color: var(--mz-accent-deep) !important; }
.mz-chip-neutral { background: var(--mud-palette-background-gray) !important;
                   color: var(--mud-palette-text-primary) !important; }
.mz-chip-solid   { background: var(--mud-palette-primary) !important;
                   color: var(--mud-palette-primary-text) !important; }

/* MudAlert as brand banner: tinted fill + 1 px frame + 4 px left rule */
.mz-alert { border: 1px solid currentColor; border-left-width: 4px; }
.mz-alert.mud-alert-text-warning { background: var(--mz-ochre-tint); color: var(--mz-ochre-deep); }

/* Flat surfaces */
.mud-dialog { box-shadow: none; border: 1px solid var(--mud-palette-lines-default); }
.mud-table-head .mud-table-cell { background: var(--mud-palette-background-gray);
                                  color: var(--mud-palette-text-secondary); font-weight: 600; }

/* wwwroot/js/mz.js */
/* window.mzSetDark = d => document.documentElement.classList.toggle('mz-dark', d); */


/* ---- Cycles IQ additions (docs/ui-ux/deviations.md, 5); the handoff's rules above stay as they are ---- */

/* Archivo from the app itself (owner, 2026-10-02): static, hinted files, sharper on Windows than Google Fonts'
   unhinted variable font. Same font, version 2.001; how they were made: docs/ui-ux/deviations.md, 6. Licence: OFL.txt */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/archivo/Archivo-400.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/archivo/Archivo-500.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/archivo/Archivo-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/archivo/Archivo-800.woff2") format("woff2"); }

/* the axis grey, and the heatmap steps one by one (--mz-heat above is a list, which CSS cannot index);
   values from the brand guidelines, light and dark */
:root {
  --mz-axis: #9b9797;
  --mz-heat-1: #b71c1c; --mz-heat-2: #d32f2f; --mz-heat-3: #e57373; --mz-heat-4: #f2b8b8; --mz-heat-5: #eae9e9;
  --mz-heat-6: #b6dfc6; --mz-heat-7: #66bb8a; --mz-heat-8: #2e9e5b; --mz-heat-9: #1b6e3c;
}
html.mz-dark {
  --mz-axis: #bab6b6;
  --mz-heat-1: #7f1d1d; --mz-heat-2: #b71c1c; --mz-heat-3: #d9534f; --mz-heat-4: #5a2626; --mz-heat-5: #26262a;
  --mz-heat-6: #1f4a30; --mz-heat-7: #2e9e5b; --mz-heat-8: #4cc57a; --mz-heat-9: #7fe0a3;
}

/* heatmap cells: each step with a text colour that reads on it (at least 4.5 : 1) */
.mz-heat-1 { background: var(--mz-heat-1); } .mz-heat-2 { background: var(--mz-heat-2); } .mz-heat-3 { background: var(--mz-heat-3); }
.mz-heat-4 { background: var(--mz-heat-4); } .mz-heat-5 { background: var(--mz-heat-5); } .mz-heat-6 { background: var(--mz-heat-6); }
.mz-heat-7 { background: var(--mz-heat-7); } .mz-heat-8 { background: var(--mz-heat-8); } .mz-heat-9 { background: var(--mz-heat-9); }
.mz-heat-1, .mz-heat-2, .mz-heat-9 { color: #ffffff; }
.mz-heat-3, .mz-heat-4, .mz-heat-5, .mz-heat-6, .mz-heat-7, .mz-heat-8 { color: #201e1d; }
html.mz-dark .mz-heat-1, html.mz-dark .mz-heat-2 { color: #ffffff; }
html.mz-dark .mz-heat-3, html.mz-dark .mz-heat-7, html.mz-dark .mz-heat-8, html.mz-dark .mz-heat-9 { color: #121212; }
html.mz-dark .mz-heat-4, html.mz-dark .mz-heat-5, html.mz-dark .mz-heat-6 { color: #eceae7; }
/* the mildest steps of a score (30 to 49) as a half tint of step 4 or 6 */
.mz-heat-4-soft { background: color-mix(in srgb, var(--mz-heat-4) 50%, transparent); }
.mz-heat-6-soft { background: color-mix(in srgb, var(--mz-heat-6) 50%, transparent); }

/* readability on light grounds: ochre as text is 2.9 : 1 on white, ochre deep on the ochre tint 4.0 : 1.
   Warning banners keep the tint, the frame and an ochre-deep icon, with ink text; warning-coloured text uses ochre deep. */
html:not(.mz-dark) .mz-alert.mud-alert-text-warning { color: var(--mud-palette-text-primary); border-color: var(--mz-ochre-deep); }
html:not(.mz-dark) .mz-alert.mud-alert-text-warning .mud-alert-icon { color: var(--mz-ochre-deep); }
html:not(.mz-dark) .mud-warning-text, html:not(.mz-dark) .mud-tertiary-text { color: var(--mz-ochre-deep) !important; }
html:not(.mz-dark) .mud-chip-text.mud-chip-color-warning, html:not(.mz-dark) .mud-chip-outlined.mud-chip-color-warning,
html:not(.mz-dark) .mud-button-text-warning, html:not(.mz-dark) .mud-button-outlined-warning { color: var(--mz-ochre-deep); }

/* readability on the dark ground: message text takes the guidelines' light shades (MzTheme.cs, the *Darken lines);
   the banner's frame, which follows the text colour, keeps the colour of its severity as the handoff draws it */
html.mz-dark .mz-alert.mud-alert-text-info    { border-color: var(--mud-palette-info); }
html.mz-dark .mz-alert.mud-alert-text-success { border-color: var(--mud-palette-success); }
html.mz-dark .mz-alert.mud-alert-text-warning { border-color: var(--mud-palette-warning); }
html.mz-dark .mz-alert.mud-alert-text-error   { border-color: var(--mud-palette-error); }

/* figures line up in every table (part B 11: "Zahlen tabular-nums") */
.mud-table-cell, .mud-simple-table td { font-variant-numeric: tabular-nums; }

/* the grey table head above ("Fläche #eae9e9 — Tabellenkopf") also on tables with FixedHeader, where MudBlazor's
   sticky rule paints the head cells in the surface colour and wins over the handoff's shorter selector */
.mud-table-sticky-header * .mud-table-root .mud-table-head .mud-table-cell { background-color: var(--mud-palette-background-gray); }