:root {
    color-scheme: dark;
    --tifs-bg: #061421;
    --tifs-bg-raised: #081b2b;
    --tifs-surface: #091c2d;
    --tifs-surface-hover: #0d2940;
    --tifs-surface-strong: #103653;
    /* Tints a row that belongs to a different scope than its list (sub-equipment rows).
       Deliberately weaker than --tifs-surface-hover so hover still reads on top of it. */
    --tifs-surface-nested: rgba(55, 169, 255, 0.07);
    --tifs-primary: #37a9ff;
    --tifs-primary-soft: rgba(55, 169, 255, 0.14);
    --tifs-secondary: #8ed2ff;
    --tifs-success: #20d06b;
    --tifs-warning: #ff9f1c;
    --tifs-error: #ef4d5a;
    --tifs-text: #eef7ff;
    --tifs-text-muted: #9db8cc;
    --tifs-border: rgba(92, 177, 238, 0.28);
    --tifs-border-strong: rgba(92, 177, 238, 0.48);
    --tifs-radius-sm: 6px;
    --tifs-radius: 10px;
    --tifs-radius-lg: 16px;
    --tifs-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
    --tifs-content-max: 1600px;
    --tifs-focus: 0 0 0 3px rgba(55, 169, 255, 0.32);
    --tifs-blue: var(--tifs-primary);
    --tifs-muted: var(--tifs-text-muted);
    --tifs-line: var(--tifs-border);
    --tifs-line-strong: var(--tifs-border-strong);
    --tifs-panel: var(--tifs-surface);
    --tifs-panel-strong: var(--tifs-bg-raised);
    --tifs-ok: var(--tifs-success);
    --tifs-orange: var(--tifs-warning);
    --tifs-danger: var(--tifs-error);
}

.tifs-theme-light {
    color-scheme: light;
    --tifs-bg: #f3f7fa;
    --tifs-bg-raised: #e9f0f5;
    --tifs-surface: #ffffff;
    --tifs-surface-hover: #edf5fa;
    --tifs-surface-strong: #dbeaf3;
    --tifs-surface-nested: rgba(7, 95, 154, 0.06);
    --tifs-primary: #075f9a;
    --tifs-primary-soft: rgba(7, 95, 154, 0.12);
    --tifs-secondary: #246a96;
    --tifs-success: #08783e;
    --tifs-warning: #965900;
    --tifs-error: #b4232f;
    --tifs-text: #102a3b;
    --tifs-text-muted: #435f72;
    --tifs-border: rgba(28, 74, 104, 0.28);
    --tifs-border-strong: rgba(28, 74, 104, 0.50);
    --tifs-shadow: 0 16px 40px rgba(18, 55, 80, 0.16);
    --tifs-focus: 0 0 0 3px rgba(7, 95, 154, 0.28);
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--tifs-bg);
    color: var(--tifs-text);
    font-family: "Segoe UI", Arial, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: var(--tifs-primary);
}

:focus-visible {
    outline: 2px solid var(--tifs-primary);
    outline-offset: 2px;
}

.mud-paper,
.mud-card {
    background-image: none;
}

.mud-table-container {
    border-radius: var(--tifs-radius);
}

.mud-table-root .mud-table-head .mud-table-cell {
    color: var(--tifs-text-muted);
    font-weight: 700;
    letter-spacing: .02em;
}

.mud-button-root,
.mud-input-root,
.mud-paper,
.mud-chip {
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

/* Below MudBlazor's Sm threshold a table drops its header and turns every cell into a
   flex row of label and value (.mud-sm-table .mud-table-cell { display:flex }). That row
   does not wrap, so the column has to be at least as wide as label plus value side by
   side -- and the table sits in a container with overflow-x:auto. One value that cannot
   break (an activity name is nowrap, an id has no spaces) therefore does not shorten
   itself, it widens the whole list and the user scrolls sideways to read the labels.
   Measured on a 375px viewport: table 415px in a 346px container.

   Letting the row wrap drops the column requirement to the widest single item, which is
   what a card layout wants anyway: value under label when it does not fit beside it.
   min-width:0 lets each item shrink on its line instead of holding its content width.

   NOT solved with table-layout:fixed on the small-device table. It removes the pressure
   just as well (measured), but the column then splits evenly between label and value:
   the label wraps mid-word and the value is cut off while space sits unused next to it. */
@media (max-width: 960px) {
    .mud-sm-table .mud-table-cell,
    .mud-xs-table .mud-table-cell {
        flex-wrap: wrap;
    }

    .mud-sm-table .mud-table-cell > *,
    .mud-xs-table .mud-table-cell > * {
        min-width: 0;
    }
}

.tifs-density-comfortable .mud-table-cell { padding-top: .9rem; padding-bottom: .9rem; }
.tifs-density-comfortable .mud-input-control { margin-block: .2rem; }
.tifs-density-comfortable .mud-nav-link { min-height: 46px; }

/* Compact is an application density, not just MudTable's Dense flag. These shared
   rules also reach dialogs/popovers because the preference class wraps the providers. */
.tifs-density-compact .mud-table-cell { padding-top: .35rem; padding-bottom: .35rem; }
.tifs-density-compact .mud-input-control { margin-block: 0; }
.tifs-density-compact .mud-nav-link { min-height: 36px; }
.tifs-density-compact .mud-button-root:not(.mud-icon-button) { min-height: 34px; }
.tifs-density-compact .mud-card-header,
.tifs-density-compact .mud-card-content { padding-top: .65rem; padding-bottom: .65rem; }

.tifs-shell-breadcrumbs {
    margin: 0 0 .75rem;
    padding: 0 !important;
    color: var(--tifs-text-muted);
}

.tifs-reduce-motion *,
.tifs-reduce-motion *::before,
.tifs-reduce-motion *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.tifs-account-menu {
    position: relative;
    min-width: 0;
    color: inherit;
}

.tifs-account-trigger {
    display: flex;
    min-height: 48px;
    max-width: min(320px, 34vw);
    padding: .35rem .7rem;
    gap: .55rem;
    align-items: center;
    color: inherit;
    border: 1px solid rgba(232, 245, 255, .22);
    border-radius: var(--tifs-radius-sm);
    background: transparent;
    cursor: pointer;
    font: inherit;
    transition: background .15s ease, border-color .15s ease;
}

/* Faengt den Klick neben dem offenen Menue ab -- dasselbe Mittel wie beim
   Workspace-Umschalter, der sich deshalb schon immer korrekt schloss. */
.tifs-account-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1390;
}

.tifs-account-trigger:hover,
.tifs-account-trigger:focus-visible,
.tifs-account-menu.is-open > .tifs-account-trigger {
    background: rgba(232, 245, 255, .12);
    border-color: rgba(232, 245, 255, .48);
}

.tifs-account-trigger:focus-visible {
    outline: 2px solid rgba(232, 245, 255, .78);
    outline-offset: 2px;
}

.tifs-account-avatar {
    display: inline-grid;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    place-items: center;
    color: #fff;
    background: var(--mud-palette-primary);
    border-radius: 50%;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.tifs-account-avatar-large {
    width: 38px;
    height: 38px;
}

.tifs-account-trigger-copy {
    display: grid;
    min-width: 0;
    gap: .05rem;
    text-align: left;
}

.tifs-account-trigger-name,
.tifs-account-trigger-context {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tifs-account-trigger-name { font-size: .86rem; font-weight: 800; }
.tifs-account-trigger-context { font-size: .7rem; opacity: .72; }

.tifs-account-caret {
    flex: 0 0 auto;
    transition: transform .15s ease;
}

.tifs-account-menu.is-open .tifs-account-caret { transform: rotate(180deg); }

.tifs-account-popover {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    z-index: 1400;
    width: min(320px, calc(100vw - 1rem));
    overflow: hidden;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--tifs-radius);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
}

.tifs-account-menu-header {
    display: flex;
    gap: .7rem;
    padding: .9rem 1rem .75rem;
    align-items: center;
}

.tifs-account-menu-identity { display: grid; min-width: 0; gap: .15rem; }
.tifs-account-menu-identity strong,
.tifs-account-menu-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tifs-account-menu-identity strong { font-size: .88rem; }
.tifs-account-menu-identity span { color: var(--mud-palette-text-secondary); font-size: .74rem; }

.tifs-account-menu-divider { border-top: 1px solid var(--mud-palette-lines-default); }
.tifs-account-menu-actions { display: grid; padding: .4rem; gap: .15rem; }

.tifs-account-action {
    display: flex;
    min-height: 44px;
    padding: .6rem .7rem;
    gap: .7rem;
    align-items: center;
    color: var(--mud-palette-text-primary);
    border-radius: calc(var(--tifs-radius-sm) - 2px);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.tifs-account-action:hover,
.tifs-account-action:focus-visible {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    outline: none;
}

.tifs-account-action .mud-icon-root,
.tifs-appbar .tifs-account-popover .tifs-account-action .mud-icon-root { color: currentColor !important; }
.tifs-account-action-logout { color: var(--mud-palette-error); }

.tifs-loading-state,
.tifs-loading-indicator {
    min-height: 12rem;
    padding: 2rem;
}

.tifs-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.tifs-page-heading {
    display: grid;
    gap: .3rem;
    min-width: 0;
}

.tifs-page-heading h1 {
    margin: 0;
    letter-spacing: -.025em;
}

.tifs-page-eyebrow {
    color: var(--tifs-primary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tifs-breadcrumbs {
    padding: 0;
}

.tifs-page-context {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .35rem;
}

.tifs-page-actions,
.tifs-table-toolbar-actions,
.tifs-table-toolbar-leading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
}

.tifs-state-panel {
    display: grid;
    place-items: center;
    gap: .5rem;
    min-height: 14rem;
    padding: 2rem;
    text-align: center;
    border-color: var(--tifs-border);
}

.tifs-state-panel.is-error {
    border-color: rgba(239, 77, 90, .48);
}

.tifs-state-panel.is-success {
    border-color: rgba(32, 208, 107, .42);
}

.tifs-status-chip {
    font-weight: 700;
}

.tifs-table-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .8rem;
    margin-bottom: .8rem;
    border-color: var(--tifs-border);
}

.tifs-table-search {
    width: min(100%, 340px);
}

/* The explorer fills whatever height its host gives it and splits that space itself:
   toolbar and pager keep their natural height, the table body takes the rest and is the
   only thing that scrolls. This replaces per-page "height: calc(100vh - Npx)" guesses,
   which had to be re-guessed for every page whose header was a different size -- and were
   wrong often enough that the pager ended up below the fold. */
.tifs-data-explorer {
    display: flex;
    flex-direction: column;
    /* Grows into the space its host page has left over. The floor keeps the table usable on
       a short viewport; below it the page frame starts scrolling instead of squeezing the
       list down to a row and a half. */
    flex: 1 1 auto;
    min-width: 0;
    min-height: 18rem;
    overflow: hidden;
    border-color: var(--tifs-border);
}

.tifs-data-explorer > .mud-table {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTable has no "fill the available space" mode: its Height parameter writes an inline
   height onto the container, so the inline value has to be neutralised before flex can
   take over. Height is still passed in, because FixedHeader only sticks the header when
   the table is in scrolling mode. */
.tifs-data-explorer .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto;
}

.tifs-data-explorer .mud-table-pagination {
    flex: 0 0 auto;
}

.tifs-data-explorer .tifs-table-toolbar {
    margin: 0;
    border-width: 0 0 1px;
    border-radius: 0;
}

.tifs-data-explorer-table {
    min-width: 0;
}

.tifs-data-explorer-preset { min-width: 150px; }

.tifs-data-explorer-empty {
    display: grid;
    min-height: 12rem;
    padding: 1.5rem;
    place-items: center;
    align-content: center;
    gap: .4rem;
    text-align: center;
}

.tifs-muted,
.tifs-muted.mud-typography {
    color: var(--tifs-text-muted);
}

.tifs-reconnect-modal {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: none;
    padding: 1.25rem;
    place-items: end center;
    background: rgba(2, 10, 18, .62);
    backdrop-filter: blur(4px);
}

.tifs-reconnect-modal.components-reconnect-show,
.tifs-reconnect-modal.components-reconnect-failed,
.tifs-reconnect-modal.components-reconnect-rejected {
    display: grid;
}

.tifs-reconnect-panel {
    width: min(100%, 720px);
    padding: 1rem 1.15rem;
    border: 1px solid var(--tifs-border-strong);
    border-radius: var(--tifs-radius-lg) !important;
    box-shadow: var(--tifs-shadow);
}

.tifs-reconnect-state {
    display: none;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
}

.components-reconnect-show .tifs-reconnect-state.is-reconnecting,
.components-reconnect-failed .tifs-reconnect-state.is-failed,
.components-reconnect-rejected .tifs-reconnect-state.is-rejected {
    display: grid;
}

/* Eigene Klasse statt einer der drei oben: die setzt und entfernt Blazor, und eine abgelaufene
   Anmeldung ist ohnehin etwas anderes als eine abgerissene Verbindung. Gesetzt wird sie in
   tifs-connection.js, wenn die Auffrischungsanfrage mit 401 antwortet. */
.tifs-reconnect-modal.tifs-session-expired {
    display: grid;
}

.tifs-session-expired .tifs-reconnect-state.is-expired {
    display: grid;
}

/* Die abgelaufene Anmeldung schlaegt jede gleichzeitig angezeigte Verbindungsmeldung: neu
   verbinden hilft nicht, wenn das Cookie weg ist. Vier Klassen, damit die Regel die drei
   Blazor-Regeln darueber sicher ueberstimmt. */
.tifs-reconnect-modal.tifs-session-expired .tifs-reconnect-state:not(.is-expired) {
    display: none;
}

.tifs-reconnect-action {
    min-height: 38px;
    padding: .55rem .9rem;
    color: #fff;
    font: inherit;
    font-weight: 800;
    background: linear-gradient(90deg, #168ce1, #38adff);
    border: 0;
    border-radius: var(--tifs-radius-sm);
    cursor: pointer;
}

.tifs-reconnect-action:hover { background: linear-gradient(90deg, #1677bd, #37a9ff); }

/* Blazors Fehleranzeige -- ein anderer Fall als das Reconnect-Modal darueber. Dort ist die
   Verbindung weg, hier die Anwendung: eine unbehandelte Ausnahme reisst den Circuit ab, und
   ohne dieses Element passiert sichtbar gar nichts, die Seite reagiert einfach nicht mehr.
   Das Markup gehoert in die Host-Seite und nicht in eine Komponente: wenn es gebraucht wird,
   ist der Circuit tot und eine Komponente kann sich nicht mehr rendern.

   Blazor blendet das Element ueber ein inline gesetztes display:block ein. Die Aufteilung
   liegt deshalb im inneren Element -- ein Grid oder Flex hier wuerde ueberschrieben.

   Feste Farben statt Themenvariablen, wie bei .tifs-login-error: der Balken muss in beiden
   Themen als Fehler lesbar sein, und er erscheint in einem Moment, in dem der Zustand der
   Anwendung nicht mehr feststeht. */
#blazor-error-ui {
    display: none;
    position: fixed;
    z-index: 10001; /* ueber dem Reconnect-Modal: der Anwendungsfehler ist die aeltere Nachricht */
    inset: auto 0 0 0;
    padding: .85rem 1.15rem;
    color: #fff;
    background: linear-gradient(180deg, #7a1d27, #55131b);
    border-top: 3px solid #ef4d5a;
    box-shadow: 0 -6px 18px rgba(2, 10, 18, .45);
}

.tifs-error-ui-inner {
    display: flex;
    max-width: 1180px;
    margin: 0 auto;
    gap: 1rem;
    align-items: center;
}

.tifs-error-ui-copy { flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.tifs-error-ui-copy strong { display: block; }

.tifs-error-ui-action {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 44px;
    padding: .55rem 1rem;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    background: linear-gradient(90deg, #168ce1, #38adff);
    border-radius: var(--tifs-radius-sm);
}

.tifs-error-ui-action:hover { background: linear-gradient(90deg, #1677bd, #37a9ff); }

.tifs-error-ui-dismiss {
    display: inline-flex;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: #ffd5d9;
    cursor: pointer;
}

.tifs-mono {
    font-family: "Cascadia Mono", Consolas, monospace;
}

.tifs-inbox-views {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.tifs-inbox-view {
    min-height: 52px;
    justify-content: flex-start;
    border-radius: var(--tifs-radius-md) !important;
    font-weight: 800;
}

.tifs-inbox-filters {
    padding: 1rem;
    border-radius: var(--tifs-radius-lg) !important;
}

.tifs-inbox-statuses {
    flex-wrap: wrap;
}

.tifs-message-detail {
    min-height: 28rem;
}

.tifs-progress-comparison {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
}

.tifs-progress-value {
    padding: 1.25rem;
    text-align: center;
    border-radius: var(--tifs-radius-md) !important;
}

.tifs-progress-value.is-new {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.tifs-message-feedback,
.tifs-audit-outcome {
    padding: 1rem;
    border-radius: var(--tifs-radius-md) !important;
}

.tifs-detail-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 .75rem;
    align-items: center;
    min-height: 58px;
    padding: .65rem .75rem;
    border: 1px solid var(--tifs-border);
    border-radius: var(--tifs-radius-sm);
}

.tifs-detail-field > .mud-icon-root {
    grid-row: 1 / 3;
}

.tifs-workpackage-context {
    padding: 1rem;
    border-radius: var(--tifs-radius-lg) !important;
}

.tifs-workpackage-sections {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.tifs-workpackage-section {
    min-height: 48px;
    justify-content: flex-start;
    border-radius: var(--tifs-radius-md) !important;
    font-weight: 800;
}

.tifs-upload-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: .45rem .85rem;
    gap: .45rem;
    color: var(--mud-palette-primary);
    font-weight: 700;
    border: 1px solid currentColor;
    border-radius: var(--tifs-radius-sm);
    cursor: pointer;
    overflow: hidden;
}

.tifs-upload-button:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.tifs-upload-button:focus-within {
    outline: 3px solid color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    outline-offset: 2px;
}

.tifs-upload-button.is-disabled {
    opacity: .55;
    pointer-events: none;
}

.tifs-upload-button input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    inset: auto;
    opacity: 0;
}

@media (max-width: 760px) {
    .tifs-inbox-views {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tifs-progress-comparison {
        grid-template-columns: 1fr;
    }

    .tifs-progress-comparison > .mud-icon-root {
        transform: rotate(90deg);
        justify-self: center;
    }

    .tifs-workpackage-sections {
        grid-template-columns: 1fr;
    }

    .tifs-account-trigger { max-width: 220px; }

    .tifs-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .tifs-page-actions > * {
        flex: 1 1 auto;
    }

    .tifs-table-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .tifs-table-search {
        width: 100%;
    }

    .tifs-reconnect-state {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .tifs-reconnect-state .tifs-reconnect-action {
        grid-column: 1 / -1;
    }

    /* Auf dem Handy nebeneinander waere der Text zwei Zeichen breit. Der Neu-laden-Knopf
       bekommt die volle Breite, das Schliessen-Kreuz wandert in die Kopfzeile. */
    .tifs-error-ui-inner {
        flex-wrap: wrap;
    }

    .tifs-error-ui-copy { flex: 1 1 100%; order: 2; }
    .tifs-error-ui-action { flex: 1 1 100%; order: 3; }
    .tifs-error-ui-dismiss { margin-left: auto; order: 1; }
}