/* Nur, was MudBlazor nicht abdeckt. Farben ausschließlich über die Theme-Variablen (--mud-palette-*),
   die MudThemeProvider aus TraceformTheme erzeugt — auch auf den statischen Seiten. */

h1:focus {
    outline: none;
}

/* ---------- Statische Seiten (Anmeldung, Fehler) ---------- */

.traceform-static {
    min-height: 100vh;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-family: var(--mud-typography-default-family);
}

.traceform-static__bar {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 24px;
    background: var(--mud-palette-appbar-background);
}

.traceform-static__brand {
    color: var(--mud-palette-appbar-text);
    font-size: 1.25rem;
    font-weight: 500;
    text-decoration: none;
}

.traceform-static__main {
    display: flex;
    justify-content: center;
    padding: 48px 16px;
}

.traceform-card {
    width: 100%;
    max-width: 26rem;
}

/* HTML-Eingaben im Stil des Themes — MudBlazor-Eingaben posten in statischen Formularen keine Werte. */
.traceform-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.traceform-field label {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.traceform-field input {
    padding: 10px 12px;
    font: inherit;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
}

.traceform-field input:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -1px;
    border-color: var(--mud-palette-primary);
}

.traceform-field .validation-message {
    font-size: 0.8rem;
    color: var(--mud-palette-error);
}

.traceform-button {
    width: 100%;
    padding: 10px 16px;
    font: inherit;
    font-weight: 500;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    border: none;
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
}

.traceform-button:hover {
    background: var(--mud-palette-primary-darken);
}

/* ---------- Anwendung ---------- */

.traceform-logout {
    margin: 0;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2000;
    width: 100%;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    color: var(--mud-palette-error-text);
    background: var(--mud-palette-error);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui .reload {
    color: inherit;
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    cursor: pointer;
}

/* ---------- Viewer-Labor ---------- */

.traceform-viewer-lab {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    /* App-Leiste 48px, Seitenabstand oben und unten */
    height: calc(100vh - 48px - 32px);
}

.traceform-viewer-lab__viewer {
    min-height: 0;
    overflow: hidden;
    border-radius: var(--mud-default-borderradius);
    box-shadow: var(--mud-elevation-1);
}

.traceform-viewer-lab__panel {
    overflow-y: auto;
}

@media (max-width: 960px) {
    .traceform-viewer-lab {
        grid-template-columns: 1fr;
        grid-template-rows: 70vh auto;
        height: auto;
    }
}

/* Arbeitsbereich am Modell (Designs, Instanzen): Viewer links, Panel rechts — wie das Labor */
.traceform-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 16px;
    height: calc(100vh - 48px - 32px);
}

.traceform-workspace__viewer {
    min-height: 0;
    overflow: hidden;
    border-radius: var(--mud-default-borderradius);
    box-shadow: var(--mud-elevation-1);
}

.traceform-workspace__panel {
    overflow-y: auto;
}

/* Visuell versteckt, aber fokussierbar und für Tests setzbar — das Label davor ist der Knopf. */
.traceform-workspace__file {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.traceform-workspace__file:focus-visible + div .traceform-workspace__file-label {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.traceform-workspace__file-label {
    cursor: pointer;
}

.traceform-workspace__file-label.mud-disabled {
    pointer-events: none;
}

@media (max-width: 960px) {
    .traceform-workspace {
        grid-template-columns: 1fr;
        grid-template-rows: 70vh auto;
        height: auto;
    }
}

/* Protokoll einer Instanz: am Bildschirm wie auf Papier, beim Drucken ohne Anwendungsrahmen */
.traceform-protocol {
    max-width: 1100px;
    margin: 0 auto;
    color: #1a1a1a;
}

.traceform-protocol__header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    background: #fff;
    border-top: 4px solid var(--mud-palette-primary);
}

.traceform-protocol__kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: #666;
}

.traceform-protocol__title {
    margin: 4px 0;
    font-size: 1.75rem;
    font-weight: 600;
}

.traceform-protocol__code,
.traceform-protocol__mono {
    font-family: monospace;
    font-size: 0.8125rem;
    color: #555;
}

.traceform-protocol__meta th {
    text-align: left;
    font-weight: 500;
    color: #666;
    padding: 2px 12px 2px 0;
    white-space: nowrap;
}

.traceform-protocol__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 24px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    margin-bottom: 16px;
}

.traceform-protocol__verdict {
    font-weight: 600;
    font-size: 1.125rem;
}

.traceform-protocol__verdict--fine { color: #2e7d32; }
.traceform-protocol__verdict--ongoing { color: #b26a00; }
.traceform-protocol__verdict--error { color: #c62828; }

.traceform-protocol__counts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.traceform-protocol__status {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.traceform-protocol__status--fine { background: #e8f5e9; color: #1b5e20; }
.traceform-protocol__status--ongoing { background: #fff3e0; color: #8a4b00; }
.traceform-protocol__status--error { background: #ffebee; color: #b71c1c; }

.traceform-protocol__table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.875rem;
}

.traceform-protocol__table th {
    text-align: left;
    font-weight: 600;
    padding: 8px;
    border-bottom: 2px solid #333;
}

.traceform-protocol__table td {
    padding: 6px 8px;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: top;
}

.traceform-protocol__group {
    break-inside: avoid;
}

.traceform-protocol__element {
    font-weight: 500;
    background: #fafafa;
}

.traceform-protocol__description {
    color: #666;
    font-size: 0.8125rem;
}

.traceform-protocol__nowrap {
    white-space: nowrap;
}

.traceform-protocol__signature {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 64px;
    break-inside: avoid;
}

.traceform-protocol__signature div {
    border-top: 1px solid #333;
    padding-top: 4px;
    font-size: 0.75rem;
    color: #666;
}

@media (max-width: 700px) {
    .traceform-protocol__header { flex-direction: column; }
    .traceform-protocol__table { display: block; overflow-x: auto; }
}

@media print {
    .mud-appbar,
    .mud-drawer,
    .traceform-protocol__actions,
    .traceform-protocol__no-snapshot,
    #blazor-error-ui {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    .mud-main-content > .mud-container {
        padding: 0 !important;
        max-width: none !important;
    }

    body {
        background: #fff !important;
    }

    .traceform-protocol__header,
    .traceform-protocol__summary {
        padding-left: 0;
        padding-right: 0;
    }

    .traceform-protocol__status,
    .traceform-protocol__element,
    .traceform-protocol__header {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .traceform-protocol__table thead {
        display: table-header-group;
    }
}

.traceform-workspace__workitem--highlighted {
    background: var(--mud-palette-action-default-hover);
    border-radius: var(--mud-default-borderradius);
}

.traceform-protocol__snapshot {
    margin: 0;
    padding: 12px 24px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    break-inside: avoid;
}

.traceform-protocol__snapshot img {
    display: block;
    max-width: 100%;
    max-height: 420px;
    margin: 0 auto;
    object-fit: contain;
}

.traceform-protocol__snapshot figcaption {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #666;
    text-align: center;
}

/* ── Formsprache aus SADA_HP (sada-pages.css): Seitenkopf, Kacheln, Karten, Pillen, Symbole ───────────── */
:root {
    --tf-navy: #0C2850;
    --tf-navy-2: #1b4a86;
    --tf-accent: #3aa0e6;
    --tf-ground: #f3f6fa;
    --tf-line: #e1e7ef;
    --tf-text: #1d2733;
    --tf-grey: #5f6f82;
    --tf-fine: #2e9e5b;
    --tf-ongoing: #f08a24;
    --tf-error: #d63b3b;
    --tf-radius: 12px;
}

.tf-page-head { margin-bottom: 22px; }

.tf-head {
    position: relative;
    overflow: hidden;
    color: #fff;
    border-radius: 18px;
    background: linear-gradient(120deg, var(--tf-navy) 0%, var(--tf-navy-2) 62%, #2a6db3 100%);
    padding: 22px 28px 74px;
    box-shadow: 0 10px 30px rgba(12, 40, 80, .18);
}

.tf-head::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .09;
    background-image: linear-gradient(rgba(255, 255, 255, .7) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .7) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
    -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
}

.tf-head > * { position: relative; z-index: 1; }
.tf-page-head:not(:has(.tf-tiles)) .tf-head { padding-bottom: 22px; }
.tf-head__crumbs { font-size: 12.5px; opacity: .8; margin-bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tf-head__crumbs a { color: #fff; text-decoration: none; }
.tf-head__crumbs a:hover { text-decoration: underline; }
.tf-head__row { display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.tf-head__main { min-width: 0; }
.tf-head__kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; font-weight: 600; }
.tf-head__title { font-size: 30px; font-weight: 700; margin: 2px 0 6px; line-height: 1.15; word-break: break-word; display: flex; align-items: center; gap: 10px; }
.tf-head__meta { display: flex; gap: 8px; flex-wrap: wrap; }
.tf-head__meta > span {
    display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
    background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .18); padding: 3px 10px; border-radius: 999px;
}
.tf-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.tf-btn {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: 8px;
    border: 1px solid transparent; cursor: pointer; text-decoration: none !important; line-height: 1.2; white-space: nowrap; font-family: inherit;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.tf-btn .mud-icon-root { font-size: 18px; }
.tf-btn--light { background: #fff; color: var(--tf-navy) !important; }
.tf-btn--light:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.tf-btn--glass { background: rgba(255, 255, 255, .12); color: #fff !important; border-color: rgba(255, 255, 255, .28); }
.tf-btn--glass:hover { background: rgba(255, 255, 255, .22); }
.tf-btn--danger { background: transparent; color: #ffd4d1 !important; border-color: rgba(255, 160, 150, .45); }
.tf-btn--danger:hover { background: rgba(214, 59, 59, .35); color: #fff !important; }

.tf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: -50px 18px 0; position: relative; z-index: 2; }
.tf-tile {
    background: #fff; border-radius: var(--tf-radius); padding: 14px 16px; box-shadow: 0 6px 22px rgba(12, 40, 80, .09);
    border: 1px solid var(--tf-line); display: flex; gap: 12px; align-items: center; min-width: 0; color: var(--tf-text);
}
.tf-tile--clickable { cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.tf-tile--clickable:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(12, 40, 80, .14); }
.tf-tile--active { border-color: var(--tf-navy); box-shadow: 0 0 0 2px rgba(12, 40, 80, .25), 0 6px 22px rgba(12, 40, 80, .09); }
.tf-tile__icon {
    width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(12, 40, 80, .07); color: var(--tf-navy);
}
.tf-tile--warn .tf-tile__icon { background: rgba(214, 59, 59, .1); color: var(--tf-error); }
.tf-tile--good .tf-tile__icon { background: rgba(46, 158, 91, .1); color: var(--tf-fine); }
.tf-tile__text { min-width: 0; flex: 1; }
.tf-tile__text b { display: block; font-size: 22px; line-height: 1.1; color: var(--tf-navy); font-variant-numeric: tabular-nums; }
.tf-tile--warn .tf-tile__text b { color: var(--tf-error); }
.tf-tile__text small { color: var(--tf-grey); font-size: 12px; }

.tf-bar { height: 5px; border-radius: 3px; background: #e9eef4; overflow: hidden; margin-top: 5px; display: flex; }
.tf-bar i { display: block; height: 100%; }

.tf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 22px; }
.tf-card {
    background: #fff; border-radius: var(--tf-radius); border: 1px solid var(--tf-line); box-shadow: 0 2px 10px rgba(12, 40, 80, .05);
    display: flex; flex-direction: column; min-width: 0; color: var(--tf-text);
}
.tf-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; flex-wrap: wrap; }
.tf-card__head h3 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tf-navy); margin: 0; display: flex; gap: 7px; align-items: center; }
.tf-card__head h3 .n { font-weight: 500; color: var(--tf-grey); letter-spacing: 0; }
.tf-card__body { padding: 0 16px 16px; flex: 1; display: flex; flex-direction: column; }
.tf-empty { color: var(--tf-grey); font-size: 13px; padding: 14px; text-align: center; background: var(--tf-ground); border-radius: 8px; border: 1px dashed var(--tf-line); }

.tf-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.tf-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tf-pill--fine { background: #e3f4ea; color: #1e7a45; }
.tf-pill--ongoing { background: #fff4d6; color: #8a6200; }
.tf-pill--error { background: #fde6e4; color: #b3261e; }
.tf-pill--neutral { background: #eef1f5; color: var(--tf-grey); }

.tf-symbol { display: inline-flex; flex-shrink: 0; line-height: 0; }
.tf-symbol svg { display: block; }

@media (max-width: 760px) {
    .tf-head { padding: 18px 18px 70px; }
    .tf-head__title { font-size: 24px; }
    .tf-tiles { margin: -50px 8px 0; }
}

/* ── Arbeitspunkt-Tabelle (SADA_HP .wit) ─────────────────────────────────────────────────────────────── */
.tf-wit { margin-top: 22px; }
.tf-wit__tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 16px 10px; border-bottom: 1px solid var(--tf-line); }
.tf-wit__search { position: relative; flex: 1 1 240px; min-width: 180px; max-width: 380px; display: flex; align-items: center; }
.tf-wit__search .mud-icon-root { position: absolute; left: 8px; color: var(--tf-grey); }
.tf-wit__search input { width: 100%; font: inherit; font-size: 13px; padding: 6px 10px 6px 32px; border: 1px solid var(--tf-line); border-radius: 8px; background: var(--tf-ground); color: var(--tf-text); }
.tf-wit__search input:focus { outline: none; background: #fff; border-color: var(--tf-accent); box-shadow: 0 0 0 3px rgba(58, 160, 230, .18); }
.tf-wit__select { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--tf-line); border-radius: 8px; background: #fff; color: var(--tf-text); max-width: 190px; }
.tf-wit__chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 16px; border-bottom: 1px solid var(--tf-line); }
.tf-wit__sep { width: 1px; align-self: stretch; background: var(--tf-line); margin: 2px 4px; }
.tf-chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; font-family: inherit; padding: 3px 10px;
    border-radius: 999px; border: 1px solid var(--tf-line); background: #fff; color: var(--tf-grey); cursor: pointer; line-height: 1.5; user-select: none;
}
.tf-chip .n { font-weight: 400; opacity: .7; }
.tf-chip__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tf-chip--on { border-color: var(--tf-navy); background: rgba(12, 40, 80, .07); color: var(--tf-navy); }
.tf-chip--off { opacity: .55; }
.tf-chip--reset { border-style: dashed; }
.tf-wit__scroll { overflow-x: auto; }
.tf-wit table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tf-wit thead th {
    position: sticky; top: 0; background: #fafbfd; z-index: 1; text-align: left; white-space: nowrap; font-size: 11.5px; font-weight: 700;
    color: var(--tf-grey); letter-spacing: .03em; padding: 9px 10px; border-bottom: 1px solid var(--tf-line); user-select: none;
}
.tf-wit thead th.sortable { cursor: pointer; }
.tf-wit thead th.sortable:hover, .tf-wit thead th.active { color: var(--tf-navy); }
.tf-wit thead th .arrow { display: inline-block; width: 12px; opacity: .35; font-size: 10px; }
.tf-wit thead th.active .arrow { opacity: 1; }
.tf-wit tbody td { padding: 8px 10px; border-bottom: 1px solid var(--tf-line); vertical-align: middle; color: var(--tf-text); }
.tf-wit .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tf-wit__row { cursor: pointer; transition: background .1s; }
.tf-wit__row:hover { background: #f6f9fd; }
.tf-wit__row.open { background: #eef4fb; }
.tf-wit__row.archived { opacity: .55; }
.tf-wit__title b { font-weight: 600; }
.tf-wit__title small { display: block; color: var(--tf-grey); font-size: 11.5px; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-wit__key { white-space: nowrap; }
.tf-wit__muted { color: var(--tf-grey); font-size: 12px; }
.tf-wit__none { text-align: center; color: var(--tf-grey); padding: 22px !important; }
.tf-wit__details td { background: #f8fafd; padding: 12px 16px 14px !important; }
.tf-wit__detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 28px; }
.tf-wit__detail-grid dl { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; margin: 0; font-size: 12.5px; }
.tf-wit__detail-grid dt { color: var(--tf-grey); font-weight: 600; }
.tf-wit__detail-grid dd { margin: 0; }
.tf-wit__row-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.tf-btn--outline { background: #fff; color: var(--tf-navy) !important; border-color: var(--tf-line); font-size: 12.5px; padding: 5px 10px; }
.tf-btn--outline:hover { border-color: var(--tf-navy); }
.tf-severity { font-size: 12px; font-weight: 700; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

.tf-list { list-style: none; margin: 0; padding: 0; }
.tf-list li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--tf-line); min-width: 0; }
.tf-list li:first-child { border-top: none; }
.tf-list__icon { width: 34px; height: 34px; border-radius: 8px; background: rgba(12, 40, 80, .06); color: var(--tf-navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tf-list__text { flex: 1; min-width: 0; }
.tf-list__text b { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-list__text a { color: inherit; text-decoration: none; }
.tf-list__text a:hover b { color: var(--tf-navy-2); text-decoration: underline; }
.tf-list__text small { color: var(--tf-grey); font-size: 11.5px; }
.tf-facts { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 13px; margin: 0; }
.tf-facts dt { color: var(--tf-grey); font-weight: 600; }
.tf-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ── Fotos (SADA_HP _DetailFotos, Lightbox) ───────────────────────────────────────────────────────────── */
.tf-photos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.tf-photos--compact .tf-photos__grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.tf-photos__tile { position: relative; padding: 0; border: 1px solid var(--tf-line); border-radius: 8px; overflow: hidden; background: var(--tf-ground); cursor: zoom-in; aspect-ratio: 4 / 3; }
.tf-photos__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.tf-photos__tile:hover img { transform: scale(1.04); }
.tf-photos__more { position: absolute; inset: 0; background: rgba(12, 40, 80, .55); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.tf-photos__drop {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 4 / 3;
    border: 1.5px dashed #b9c6d6; border-radius: 8px; color: var(--tf-grey); font-size: 12px; text-align: center; cursor: pointer; background: #fafcfe; padding: 6px;
}
.tf-photos__drop:hover, .tf-photos__drop:focus-within { border-color: var(--tf-accent); color: var(--tf-navy); background: #eef6fd; }
.tf-photos__drop.busy { cursor: progress; opacity: .8; }
/* Das Feld liegt unsichtbar über der ganzen Fläche: Klick öffnet den Dialog, Ablegen füllt es — ohne JavaScript. */
.tf-photos__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tf-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(8, 18, 32, .92); display: flex; align-items: center; justify-content: center; outline: none; }
.tf-lightbox figure { margin: 0; max-width: 92vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tf-lightbox img { max-width: 92vw; max-height: calc(90vh - 40px); object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.tf-lightbox figcaption { color: #dfe7f0; font-size: 13px; display: flex; gap: 14px; align-items: center; }
.tf-lightbox__delete { background: transparent; border: 1px solid rgba(255, 160, 150, .5); color: #ffd4d1; border-radius: 6px; padding: 3px 10px; cursor: pointer; font: inherit; font-size: 12px; }
.tf-lightbox__nav, .tf-lightbox__close { position: absolute; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; cursor: pointer; font-size: 30px; line-height: 1; }
.tf-lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border-radius: 10px; }
.tf-lightbox__nav.prev { left: 16px; }
.tf-lightbox__nav.next { right: 16px; }
.tf-lightbox__close { top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; }

/* ── Detailseite Arbeitspunkt (SADA_HP workitem-detail.css) ───────────────────────────────────────────── */
.tf-detail { outline: none; }
.tf-detail__position { align-self: center; font-size: 12.5px; opacity: .85; font-variant-numeric: tabular-nums; }
.tf-detail__prev, .tf-detail__next { font-size: 20px; padding: 4px 12px; }
.tf-flow { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 2px 0; }
.tf-flow__step {
    min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; text-decoration: none; color: #fff; background: var(--tf-step-color); opacity: .75;
    border: 2px solid transparent; font-variant-numeric: tabular-nums;
}
.tf-flow__step:hover { opacity: 1; }
.tf-flow__step.current { opacity: 1; border-color: var(--tf-navy); box-shadow: 0 0 0 2px #fff inset; }
.tf-detail__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.tf-detail__main, .tf-detail__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 980px) { .tf-detail__grid { grid-template-columns: 1fr; } }
.tf-hint { background: #e8f3fc; border: 1px solid #c4def3; color: #1b4a86; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; margin: 0; }
.tf-gauge { width: 100%; max-width: 320px; display: block; margin: 0 auto; }
.tf-sketch { width: 100%; max-width: 420px; display: block; }
.tf-ring { width: 84px; height: 84px; flex-shrink: 0; }
.tf-detail__task-body { flex-direction: row; gap: 18px; align-items: center; }
.tf-severity-bar { display: flex; gap: 3px; margin-top: 5px; }
.tf-severity-bar i { flex: 1; height: 5px; border-radius: 3px; }
.tf-severity-scale { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-severity-scale__step, .tf-severity-scale__none {
    font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer;
    border: 2px solid var(--tf-sev, var(--tf-line)); background: #fff; color: var(--tf-text);
}
.tf-severity-scale__step.on { background: var(--tf-sev); color: #fff; }
.tf-severity-scale__none { --tf-sev: #c5ced9; color: var(--tf-grey); }
.tf-severity-scale__none.on { background: #eef1f5; }
.tf-severity-scale button:disabled { cursor: default; opacity: .8; }
.tf-points { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tf-points th { text-align: left; font-size: 11.5px; color: var(--tf-grey); padding: 5px 8px; border-bottom: 1px solid var(--tf-line); }
.tf-points td { padding: 5px 8px; border-bottom: 1px solid var(--tf-line); }
.tf-points .num { text-align: right; font-variant-numeric: tabular-nums; }
.tf-points tr.longest td { background: #fff4d6; }
.tf-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }

/* ── Anzüge einer Schraube (Rev. 4 §10) ─────────────────────────────────────────────────────────────── */
.tf-tightening { margin-top: 16px; }
.tf-chart-host { position: relative; height: 280px; width: 100%; }
.tf-chart-host--small { height: 190px; }
.tf-chart-host .uplot { font-family: inherit; }
.tf-chart-host .u-legend { font-size: 12px; }
.tf-tightening__series { margin-bottom: 10px; }
.tf-tightening__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tf-tightening__table th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--tf-grey); padding: 7px 8px; border-bottom: 1px solid var(--tf-line); white-space: nowrap; }
.tf-tightening__table td { padding: 7px 8px; border-bottom: 1px solid var(--tf-line); vertical-align: top; }
.tf-tightening__table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tf-tightening__row.is-valid { background: #f4f9ff; }
.tf-tightening__warn { color: #b26a00; margin-left: 4px; cursor: help; }
.tf-tightening__finding { display: inline-block; margin-top: 2px; font-size: 12px; color: #b3261e; }
.tf-tightening__curve { margin-top: 12px; border: 1px solid var(--tf-line); border-radius: 10px; padding: 10px; background: #fff; }
.tf-tightening__curve-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tf-tightening__curve-head .grow { flex: 1; }
.tf-tightening__preview { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tf-tightening__record summary, .tf-detail__edit-bolt summary { cursor: pointer; font-weight: 600; color: var(--tf-navy); }
.tf-muted { color: var(--tf-grey); font-size: 12px; }
.tf-link-btn { background: none; border: 0; padding: 0; color: var(--tf-accent); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; }
.tf-savebar {
    position: sticky; bottom: 12px; z-index: 5; margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    background: #0C2850; color: #fff; border-radius: 10px; padding: 8px 12px; box-shadow: 0 8px 24px rgba(12, 40, 80, .3);
}
.tf-savebar > span { flex: 1; font-size: 13px; }
.tf-savebar .mud-button-text { color: #dfe7f0; }
.tf-detail__bolt details summary { cursor: pointer; font-weight: 600; color: var(--tf-navy); font-size: 13px; }

/* ── 3D-Arbeitsbereich: Karte und Filter (SADA_HP cad-workitems) ─────────────────────────────────────── */
.traceform-workspace__viewer { position: relative; }
.tf-wcard {
    position: absolute; right: 14px; bottom: 14px; z-index: 20; width: 336px; max-width: calc(100% - 28px); max-height: calc(100% - 90px); overflow-y: auto;
    background: #fff; border-radius: 12px; border-top: 4px solid var(--tf-wcard-color); box-shadow: 0 12px 34px rgba(12, 40, 80, .25); color: var(--tf-text);
}
.tf-wcard__head { display: flex; gap: 10px; align-items: flex-start; padding: 10px 10px 6px 12px; }
.tf-wcard__title { flex: 1; min-width: 0; }
.tf-wcard__title b { display: block; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.tf-wcard__title small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--tf-grey); font-size: 11.5px; margin-top: 2px; }
.tf-wcard__icon { border: 1px solid var(--tf-line); background: #fff; border-radius: 7px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--tf-navy); flex-shrink: 0; }
.tf-wcard__icon:hover { border-color: var(--tf-navy); }
.tf-wcard__body { padding: 4px 12px 10px; }
.tf-wcard__facts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--tf-grey); }
.tf-wcard__facts b { color: var(--tf-text); font-variant-numeric: tabular-nums; }
.tf-wcard__line { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
.tf-wcard__text { color: var(--tf-grey); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tf-wcard__severity { color: #fff; font-weight: 700; font-size: 11.5px; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.tf-wcard__step { font-weight: 800; font-size: 18px; color: var(--tf-navy); }
.tf-wcard__bolt { display: flex; gap: 10px; align-items: center; }
.tf-wcard__nut {
    width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 12px;
    background: var(--tf-navy); clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.tf-wcard__torque { position: relative; height: 6px; border-radius: 3px; background: #e9eef4; margin-top: 6px; }
.tf-wcard__torque i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--tf-wcard-color); }
.tf-wcard__torque em { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--tf-navy); }
.tf-wcard__meta { font-size: 11.5px; color: var(--tf-grey); margin-top: 6px; }
.tf-wcard__foot { display: flex; gap: 8px; padding: 8px 12px 12px; border-top: 1px solid var(--tf-line); }
.traceform-workspace__filters { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.traceform-workspace__search { font: inherit; font-size: 12.5px; padding: 5px 9px; border: 1px solid var(--tf-line); border-radius: 7px; background: var(--tf-ground); color: var(--tf-text); }
.traceform-workspace__search:focus { outline: none; border-color: var(--tf-accent); background: #fff; }

/* ── Protokoll je Art (SADA_HP Protocol.cshtml) ───────────────────────────────────────────────────────── */
.traceform-protocol__tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.traceform-protocol__tiles > div { border: 1px solid #e0e0e0; border-radius: 8px; padding: 6px 12px; min-width: 110px; background: #fff; }
.traceform-protocol__tiles b { display: block; font-size: 18px; color: #0C2850; font-variant-numeric: tabular-nums; }
.traceform-protocol__tiles span { font-size: 11.5px; color: #666; }
.traceform-protocol__tiles .warn b { color: #c62828; }
.traceform-protocol__section { margin-top: 18px; break-inside: auto; }
.traceform-protocol__section h2 { font-size: 15px; font-weight: 700; color: #0C2850; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.traceform-protocol__section h2 > span { font-size: 12px; font-weight: 400; color: #666; }
.traceform-protocol__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.traceform-protocol__severity { font-weight: 700; font-size: 12.5px; }
.traceform-protocol__note { font-size: 12px; color: #8a4b00; margin: 6px 0 0; }
.traceform-protocol__subhead { font-size: 13px; font-weight: 700; color: var(--tf-navy); margin: 16px 0 6px; }
.traceform-protocol__subhead span { font-weight: 400; color: var(--tf-grey); }
.traceform-protocol__tightenings { font-size: 12px; }
.traceform-protocol__photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.traceform-protocol__photo-grid figure { margin: 0; break-inside: avoid; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; background: #fff; }
.traceform-protocol__photo-grid img { width: 100%; height: 42mm; object-fit: cover; display: block; }
.traceform-protocol__photo-grid figcaption { font-size: 11px; padding: 4px 6px; color: #444; }
.traceform-protocol__checksum { margin-top: 18px; font-size: 10.5px; color: #777; overflow-wrap: anywhere; }
.traceform-protocol__table tbody tr { break-inside: avoid; }

/* ── Protokolle (Rev. 4 §11) ─────────────────────────────────────────────────────────────────────────── */
.tf-nav-badge { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: #d63b3b; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.tf-logs__card { margin-top: 22px; }
.tf-logs__card .tf-card__head h3 { text-transform: none; letter-spacing: 0; gap: 6px; }
.tf-logs__time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tf-logs__source { font-size: 12px; color: var(--tf-grey); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-logs__message { max-width: 520px; overflow-wrap: anywhere; }
.tf-logs__row.is-open { background: #f6f9fd; }
.tf-logs__detail td { background: #fafbfd; }
.tf-logs__pre { margin: 10px 0 0; padding: 10px 12px; background: #0f1b2d; color: #dfe7f1; border-radius: 8px; font-size: 12px; max-height: 320px; overflow: auto; white-space: pre-wrap; }
.tf-logs__anon { font-size: 12.5px; color: var(--tf-grey); display: inline-flex; gap: 6px; align-items: center; }

/* ── Teilekatalog und Stückliste (Rev. 4 §8) ─────────────────────────────────────────────────────────── */
.tf-bom, .tf-parts__list { margin-top: 22px; }
.tf-parts__row.is-archived { opacity: .6; }
.tf-parts__values { font-size: 12.5px; white-space: nowrap; }
.tf-parts__actions { white-space: nowrap; }
.tf-parts__actions .tf-link-btn + .tf-link-btn { margin-left: 10px; }
.tf-parts__sub { font-size: 12px; font-weight: 700; color: var(--tf-navy); text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 6px; }
.tf-bom__select { max-width: 320px; }

/* ── Struktur und Sub-Instanzen (Rev. 4 §6.3) ────────────────────────────────────────────────────────── */
.tf-components__qty { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; border-radius: 6px; background: rgba(12, 40, 80, .08); color: var(--tf-navy); font-size: 12px; font-weight: 700; }
.tf-components__add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tf-components__add input { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--tf-line); border-radius: 8px; }
.tf-components__qty-input { width: 64px; }
.tf-components__role { flex: 1 1 140px; min-width: 120px; }
.tf-subinstances__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.tf-subinstances__item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--tf-line); border-radius: 10px; text-decoration: none; color: var(--tf-text); background: #fff; }
.tf-subinstances__item:hover { border-color: var(--tf-navy); box-shadow: 0 2px 10px rgba(12, 40, 80, .08); }

/* ── Montageanleitung (Rev. 4 §9) ────────────────────────────────────────────────────────────────────── */
.tf-assembly__steps { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 10px; }
.tf-assembly__step { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: start; padding: 14px 16px; }
.tf-assembly__step.is-done { background: #f3faf6; border-color: #cde9d8; }
.tf-assembly__number { width: 36px; height: 36px; border-radius: 50%; background: var(--tf-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.tf-assembly__step.is-done .tf-assembly__number { background: #1e7a45; }
.tf-assembly__title { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 15px; }
.tf-assembly__instruction { margin: 6px 0 4px; white-space: pre-wrap; color: var(--tf-text); font-size: 13.5px; }
.tf-assembly__done-by { font-size: 12.5px; color: #1e7a45; margin-top: 4px; }
.tf-assembly__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.tf-btn--primary { background: var(--tf-navy); color: #fff !important; border-color: var(--tf-navy); font-size: 12.5px; padding: 5px 12px; }
@media (max-width: 600px) { .tf-assembly__step { grid-template-columns: 36px 1fr; } .tf-assembly__actions { grid-column: 2; align-items: flex-start; flex-direction: row; } }

/* ── Öffentliche Freigabe /s/{token} (Rev. 4 §3.6) ───────────────────────────────────────────────────── */
.tf-share { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1280px; }
.tf-share__kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tf-grey); }
.tf-share__title { font-size: 26px; margin: 2px 0 6px; color: var(--tf-navy); }
.tf-share__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--tf-grey); }
.tf-share__viewer { position: relative; width: 100%; height: min(70vh, 640px); border-radius: 12px; overflow: hidden; background: #eef2f7; border: 1px solid var(--tf-line); }
.tf-share__note { font-size: 12px; color: var(--tf-grey); }
.tf-shares__form, .tf-shares__created { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 16px 12px; border-bottom: 1px solid var(--tf-line); }
.tf-shares__created { background: #f3faf6; flex-direction: column; align-items: flex-start; }
.tf-shares__note { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--tf-line); border-radius: 8px; min-width: 180px; }
.tf-shares__link, .tf-shares__secret { width: 100%; font-size: 12.5px; padding: 6px 8px; border: 1px solid #cde9d8; border-radius: 8px; background: #fff; }
.tf-shares__row.is-inactive { opacity: .55; }