/* Montserrat (SIL Open Font License, see fonts/OFL.txt), self-hosted to avoid requests to Google servers. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* mesics corporate design tokens. */
:root {
    --mesics-orange: #f16522;         /* brand orange: accents, borders, focus rings (not for text: 3.2:1 on white) */
    --mesics-orange-strong: #c94e16;  /* button background, AA contrast with white text (4.6:1) */
    --mesics-orange-deep: #b84712;    /* links and hover states (5.3:1 on white) */
    --mesics-grey: #5b5e5e;           /* logo grey, secondary text */
    --mesics-anthracite: #484a4a;
    --mesics-ink: #2f3234;            /* body text */
    --mesics-sand: #f4f3f1;           /* light surfaces */
    --mesics-line: #e4e2de;           /* borders */

    /* The one keyboard focus ring (buttons, close button, inputs, selects, checkboxes, range thumb): a white gap, then
       solid brand orange. Opaque on purpose: the ring is the focus indicator and needs 3:1 against the white page
       (WCAG 2.1 1.4.11) — #f16522 has 3.17:1; the earlier 45 % orange had 1.68:1, Bootstrap's own blue 1.41:1. */
    --mesics-focus-ring: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--mesics-orange);

    /* Focus colour on the dark sidebar, where #f16522 has only 2.81:1 against the anthracite. #f6955f has 3.99:1 against
       #484a4a, 5.77:1 against #2f3234 (the gradient's ends), 3.19:1 on a hovered entry (#575858) and 3.39:1 on the
       active entry (#664f43, 18 % orange on anthracite). Not for light backgrounds (2.24:1 on white). */
    --mesics-orange-light: #f6955f;

    --bs-body-font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    --bs-body-color: var(--mesics-ink);
    --bs-link-color: var(--mesics-orange-deep);
    --bs-link-color-rgb: 184, 71, 18;
    --bs-link-hover-color: var(--mesics-ink);
    --bs-link-hover-color-rgb: 47, 50, 52;
}

html, body {
    font-family: var(--bs-body-font-family);
    color: var(--mesics-ink);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--mesics-ink);
}

a, .btn-link {
    color: var(--mesics-orange-deep);
}

/* Buttons through Bootstrap 5.3's --bs-btn-* variables: .btn reads them in every state (hover, active, disabled,
   keyboard focus). Setting colours directly would lose against selectors such as .btn:first-child:active, and the
   button would flash Bootstrap blue while pressed.
   Every variant used in a Razor file is either branded here or listed with its reason in ButtonStyleTests.
   Contrast (WCAG 2.1 AA, text 4.5:1; white = page and panel background):
     btn-primary          normal/disabled white on #c94e16 4.58, hover/active/focus white on #b84712 5.32
     btn-outline-primary  normal #b84712 on white 5.32 (on --mesics-sand 4.80), hover/active/focus white on #b84712 5.32
     btn-outline-secondary normal #5b5e5e on white 6.55, hover/active/focus white on #484a4a 8.92
     btn-danger           (Bootstrap) white on #dc3545 4.53, hover #bb2d3b 5.91, active #b02a37 6.50
     btn-outline-danger   (Bootstrap) #dc3545 on white 4.53, hover/active/focus white on #dc3545 4.53
   Disabled buttons are additionally dimmed by Bootstrap (opacity 0.65); inactive controls are exempt from 1.4.3. */
.btn {
    /* Brand focus ring for every button, shown on keyboard focus (:focus-visible). It reaches every variant, the
       red danger buttons included: Bootstrap's variant classes only set --bs-btn-focus-shadow-rgb, which this value
       does not read (ButtonStyleTests checks the vendored file for it). */
    --bs-btn-focus-box-shadow: var(--mesics-focus-ring);
}

.btn-primary {
    --bs-btn-font-weight: 600;
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--mesics-orange-strong);
    --bs-btn-border-color: var(--mesics-orange-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mesics-orange-deep);
    --bs-btn-hover-border-color: var(--mesics-orange-deep);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--mesics-orange-deep);
    --bs-btn-active-border-color: var(--mesics-orange-deep);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--mesics-orange-strong);
    --bs-btn-disabled-border-color: var(--mesics-orange-strong);
}

/* Branded here, in one place, rather than swapped for another variant where it is used (#13): it marks a secondary
   action that still belongs to the main flow ("Filter anwenden", "Suchen", "Weitere laden"), next to btn-primary for
   the main action and btn-outline-secondary for leaving or cancelling. Text and border in the deep orange, because
   #c94e16 as text on the sand surface would fall below 4.5:1; hovered, pressed and focused it looks like a hovered
   btn-primary. */
.btn-outline-primary {
    --bs-btn-color: var(--mesics-orange-deep);
    --bs-btn-border-color: var(--mesics-orange-deep);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mesics-orange-deep);
    --bs-btn-hover-border-color: var(--mesics-orange-deep);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--mesics-orange-deep);
    --bs-btn-active-border-color: var(--mesics-orange-deep);
    --bs-btn-disabled-color: var(--mesics-orange-deep);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--mesics-orange-deep);
}

.btn-outline-secondary {
    --bs-btn-color: var(--mesics-grey);
    --bs-btn-border-color: var(--mesics-grey);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mesics-anthracite);
    --bs-btn-hover-border-color: var(--mesics-anthracite);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--mesics-anthracite);
    --bs-btn-active-border-color: var(--mesics-anthracite);
    --bs-btn-disabled-color: var(--mesics-grey);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--mesics-grey);
}

/* Focus of the form controls in the brand colour instead of Bootstrap blue (#86b7fe border, 25 % blue ring). A field
   with a validation error (.is-invalid) keeps Bootstrap's red focus: its selector is more specific, on purpose. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--mesics-orange);
    box-shadow: var(--mesics-focus-ring);
}

.form-check-input:checked {
    background-color: var(--mesics-orange-strong);
    border-color: var(--mesics-orange-strong);
}

/* An unchecked switch shows its knob in the focus border colour while focused; Bootstrap draws it light blue.
   :not(:checked) because a checked switch keeps its white knob. */
.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f16522'/%3e%3c/svg%3e");
}

/* Range slider (typo tolerance of the customer search): thumb in the button orange instead of Bootstrap blue,
   3.86:1 against the grey track (#e9ecef) and 4.58:1 against white; pressed in the deep orange (4.49:1 against the
   track). A disabled slider keeps Bootstrap's grey thumb (more specific selector). The webkit and moz pseudo-elements
   need rules of their own: a selector list with a pseudo-element the browser does not know is dropped entirely. */
.form-range::-webkit-slider-thumb {
    background-color: var(--mesics-orange-strong);
}

.form-range::-webkit-slider-thumb:active {
    background-color: var(--mesics-orange-deep);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: var(--mesics-focus-ring);
}

.form-range::-moz-range-thumb {
    background-color: var(--mesics-orange-strong);
}

.form-range::-moz-range-thumb:active {
    background-color: var(--mesics-orange-deep);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: var(--mesics-focus-ring);
}

/* Close button of the detail panel: Bootstrap reads its focus ring from this variable (otherwise blue). The black
   icon at Bootstrap's opacity 0.5 has 3.95:1 on white. */
.btn-close {
    --bs-btn-close-focus-shadow: var(--mesics-focus-ring);
}

/* 5.3 gives .nav-link a keyboard focus ring in Bootstrap blue, as a box-shadow. The sidebar uses an outline in the
   brand colour instead: the active entry already carries a box-shadow (its orange edge, NavMenu.razor.css), which
   would otherwise hide the ring exactly on the entry most likely to have focus. The same rule serves the tab buttons
   of TabSet (.nav-tabs on white): solid #f16522, 3.17:1 against white. The sidebar is dark and takes the light variant
   (see --mesics-orange-light). */
.nav-link:focus-visible {
  outline: 2px solid var(--mesics-orange);
  outline-offset: -2px;
  box-shadow: none;
}

.sidebar .nav-link:focus-visible {
  outline-color: var(--mesics-orange-light);
}

/* Customer cards use the body colour (5.1 used #495057; 5.3 would use the lighter secondary colour via
   --bs-list-group-action-color). Darker on purpose. */
.list-group {
  --bs-list-group-action-color: var(--bs-body-color);
}

/* Card with orange top edge, used e.g. for the login form. */
.mesics-card {
    background: #fff;
    border: 1px solid var(--mesics-line);
    border-top: 4px solid var(--mesics-orange);
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 4px 16px rgba(47, 50, 52, 0.06);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Detail overlay (Components/Shared/DetailPanel.razor). Own implementation instead of Bootstrap's offcanvas/modal:
   those are driven by Bootstrap's JavaScript, which we don't load — it would change DOM that Blazor owns (show
   classes, a backdrop appended to body, body styles). z-index values are explicit here, so the confirmation dialog
   can be layered above the panel on purpose. */
.detail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1070;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

.detail-backdrop.is-open {
    opacity: 1;
}

.detail-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 40rem;
    max-height: 85vh;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
    outline: 0;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

.detail-panel.is-open {
    opacity: 1;
    transform: none;
}

/* Stays put while the body scrolls. */
.detail-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--mesics-line);
}

.detail-panel-body {
    padding: 1.25rem;
    overflow-y: auto;
}

/* Phones: edge to edge, full height. */
@media (max-width: 575.98px) {
    .detail-backdrop {
        padding: 0;
    }

    .detail-panel {
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
}

/* The page behind the overlay must not scroll along (class set by js/detailPanel.js). */
body.detail-panel-open {
    overflow: hidden;
}

/* The confirmation belongs above the panel; both values are ours, not Bootstrap's layering. */
.modal-backdrop {
    z-index: 1080;
}

.modal {
    z-index: 1085;
}

@media (prefers-reduced-motion: reduce) {
    .detail-backdrop,
    .detail-panel {
        transition: none;
    }
}

/* Rows that open a detail panel: pointer, keyboard focusable (see DataListView). */
.selectable-row {
    cursor: pointer;
}

/* Loading skeletons (Components/Shared): match the height of the real controls to avoid layout shift. */
.skeleton-search,
.skeleton-field {
    height: calc(1.5em + 0.75rem + 2px);
}