/* Die Fachseiten von TraceForm: Protokoll, Arbeitspunkte, Anzüge, 3D-Arbeitsbereich, Teilekatalog,
   Struktur, Montage, Freigabe — dazu die Bühne des Viewers und die Fotoansicht.

   Der Rahmen kommt seit U11 aus der Plattform und wird vor dieser Datei geladen
   (_content/Sada.Platform.UI/sada.css): statische Seiten, Anwendungsrahmen, Formsprache. Die
   Farbmarken (--sada-*) stehen dort.

   Nur, was MudBlazor nicht abdeckt. Farben ausschließlich über die Theme-Variablen. */

/* 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;
}


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

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


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

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

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

/* Die beiden Regler für die Nadeln im Bild: Bündeln und Sichtweite (SADA_HP-Panel). */
.traceform-workspace__pins { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; }
.traceform-workspace__pin { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; color: var(--sada-grey); }
.traceform-workspace__pin b { color: var(--sada-text); font-weight: 600; }
.traceform-workspace__pin input { width: 100%; accent-color: var(--sada-navy); }

/* ── 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(--sada-navy); margin: 16px 0 6px; }
.traceform-protocol__subhead span { font-weight: 400; color: var(--sada-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) ─────────────────────────────────────────────────────────────────────────── */
.sada-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; }
.sada-logs__card { margin-top: 22px; }
.sada-logs__card .sada-card__head h3 { text-transform: none; letter-spacing: 0; gap: 6px; }
.sada-logs__time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sada-logs__source { font-size: 12px; color: var(--sada-grey); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sada-logs__message { max-width: 520px; overflow-wrap: anywhere; }
.sada-logs__row.is-open { background: #f6f9fd; }
.sada-logs__detail td { background: #fafbfd; }
.sada-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; }
.sada-logs__anon { font-size: 12.5px; color: var(--sada-grey); display: inline-flex; gap: 6px; align-items: center; }

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

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

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

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

/* ── Bühne des Viewers (Labor und Arbeitsbereich am Modell) ──────────────────────────────────────────── */
/* ---------- 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;
    }
}

/* Der Rahmen der Plattform deckelt den Inhalt bei 1920 px — richtig für Listen und Masken, falsch
   für den Arbeitsbereich: Auf einem breiten Monitor blieben links und rechts Ränder, und der
   Viewer bekäme sie nicht. Wo der Arbeitsbereich drin ist, wächst der Rahmen mit dem Fenster. */
.mud-container:has(.traceform-workspace) { max-width: none; }

/* 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;
}

/* Über die ganze Breite: alles unter der Kopfzeile gehört dem Modell — auch der Platz des Menüs.

   Mit Rechnerei am Spaltenrand ging das nicht: Der Rahmen zentriert den Inhalt rechts neben einem
   Schubfach fester Breite; ein Ausbruch über 100vw schöbe den Arbeitsbereich unter das Schubfach,
   und die Griffe oben links wären nicht mehr zu treffen (im e2e-Lauf am 21.09.2026 genau so
   passiert). Deshalb legt sich der Arbeitsbereich in dieser Betriebsart fest über die Seite, unter
   die Kopfzeile und über das Menü. Zurück führt derselbe Griff. */
.traceform-workspace--wide {
    position: fixed;
    inset: 48px 0 0 0;
    z-index: 1150;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    background: var(--mud-palette-background, #f3f6fa);
}

/* Ohne Panel gehört die Fläche dem Modell. Das Panel bleibt im DOM (der Viewer darf nicht neu
   erzeugt werden, Regel 6) — es steht nur auf Breite null. */
.traceform-workspace--no-panel {
    grid-template-columns: minmax(0, 1fr);
}

.traceform-workspace--no-panel .traceform-workspace__panel {
    display: none;
}

/* Die beiden Griffe liegen über dem Viewer, oben links — dort verdecken sie nichts Wichtiges. */
.traceform-workspace__layout {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 21;
    display: flex;
    gap: 6px;
}

.traceform-workspace__layout button {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sada-line);
    border-radius: 7px;
    background: rgba(255, 255, 255, .92);
    color: var(--sada-navy);
    cursor: pointer;
}

.traceform-workspace__layout button:hover { border-color: var(--sada-navy); }
.traceform-workspace__layout button.is-on { background: var(--sada-navy); color: #fff; border-color: var(--sada-navy); }

.traceform-workspace__viewer { position: relative; }

/* 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;
    }
}


/* ── Fotos (SADA_HP _DetailFotos, Lightbox) ───────────────────────────────────────────────────────────── */
.sada-photos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.sada-photos--compact .sada-photos__grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.sada-photos__tile { position: relative; padding: 0; border: 1px solid var(--sada-line); border-radius: 8px; overflow: hidden; background: var(--sada-ground); cursor: zoom-in; aspect-ratio: 4 / 3; }
.sada-photos__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.sada-photos__tile:hover img { transform: scale(1.04); }
.sada-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; }
.sada-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(--sada-grey); font-size: 12px; text-align: center; cursor: pointer; background: #fafcfe; padding: 6px;
}
.sada-photos__drop:hover, .sada-photos__drop:focus-within { border-color: var(--sada-accent); color: var(--sada-navy); background: #eef6fd; }
.sada-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. */
.sada-photos__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sada-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(8, 18, 32, .92); display: flex; align-items: center; justify-content: center; outline: none; }
.sada-lightbox figure { margin: 0; max-width: 92vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sada-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); }
.sada-lightbox figcaption { color: #dfe7f0; font-size: 13px; display: flex; gap: 14px; align-items: center; }
.sada-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; }
.sada-lightbox__nav, .sada-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; }
.sada-lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border-radius: 10px; }
.sada-lightbox__nav.prev { left: 16px; }
.sada-lightbox__nav.next { right: 16px; }
.sada-lightbox__close { top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; }

/* ---------- Verwaltung: Benutzer (Handbuch §4.11) ---------- */

.sada-users {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sada-users th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sada-grey);
    padding: 6px 10px;
    border-bottom: 1px solid var(--sada-line);
    white-space: nowrap;
}

.sada-users td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--sada-line);
    vertical-align: middle;
}

.sada-users__row:hover {
    background: var(--sada-ground);
}

/* Die Module nebeneinander, aber umbrechend — auf dem Tablet stehen sie untereinander. */
.sada-users__modules {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
}

.sada-users__actions {
    white-space: nowrap;
    text-align: right;
}

.sada-users__new {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(160px, 1fr) minmax(140px, auto) auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 12px;
    background: var(--sada-ground);
    border: 1px dashed var(--sada-line);
    border-radius: 8px;
}

@media (max-width: 900px) {
    .sada-users__new {
        grid-template-columns: 1fr;
    }
}

/* Das Einmal-Passwort: groß genug zum Abtippen, und es fällt auf. */
.sada-onetime__value {
    display: inline-block;
    margin: 0 8px;
    padding: 2px 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    letter-spacing: .06em;
    background: #fff;
    border: 1px solid var(--sada-line);
    border-radius: 6px;
    user-select: all;
}

/* ---------- Verwaltung: Betrieb (nur SystemAdmin) ---------- */

/* Zwei Spalten, damit Datenbank und Speicher nebeneinander stehen: Bei einer Störung liest man
   beide Zustände gleichzeitig, nicht nacheinander. */
.sada-ops {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    align-items: start;
}

.sada-ops__wide {
    grid-column: 1 / -1;
}

.sada-ops__facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    margin: 0;
    font-size: 13px;
}

.sada-ops__facts dt {
    color: var(--sada-grey);
}

.sada-ops__facts dd {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

.sada-ops__list {
    display: block;
    margin-top: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.sada-ops__counts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-bottom: 12px;
}

.sada-ops__counts div {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--sada-grey);
}

.sada-ops__counts .n {
    font-size: 22px;
    font-weight: 600;
    color: var(--sada-navy);
    line-height: 1.1;
}

.sada-ops__failures {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.sada-ops__failures th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sada-grey);
    padding: 6px 10px;
    border-bottom: 1px solid var(--sada-line);
    white-space: nowrap;
}

.sada-ops__failures td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--sada-line);
    vertical-align: top;
}

/* Eine Ausnahmemeldung ist lang und soll den Rest nicht auseinanderziehen. */
.sada-ops__error {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--sada-grey);
    overflow-wrap: anywhere;
}

/* ---------- Umbenennen und Weglegen (Design, Instanz) ---------- */

/* Die Zeile unter dem Seitenkopf. Auf schmalen Bildschirmen bricht sie um, statt die Knöpfe
   zusammenzuquetschen — sie soll mit dem Daumen bedienbar bleiben. */
.traceform-item-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.traceform-item-actions__name {
    min-width: 220px;
    max-width: 420px;
}

.traceform-item-actions__error {
    flex-basis: 100%;
}

.traceform-designs__pill {
    margin-left: 8px;
    vertical-align: middle;
}

.traceform-designs__rename {
    min-width: 200px;
    max-width: 380px;
}

/* ---------- Startseite: Arbeitsliste ---------- */

.sada-home__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Eine Zeile ist ein Weg: ganze Fläche anklickbar, auf dem Tablet mit dem Daumen zu treffen. */
.sada-home__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 4px 10px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--sada-line);
    color: inherit;
    text-decoration: none;
}

.sada-home__list li:last-child .sada-home__row {
    border-bottom: 0;
}

.sada-home__row:hover {
    background: var(--sada-ground);
}

.sada-home__name {
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

.sada-home__where {
    grid-column: 2;
    font-size: 12px;
    color: var(--sada-grey);
    overflow-wrap: anywhere;
}

.sada-home__when {
    grid-column: 3;
    grid-row: 1 / span 2;
    font-size: 12px;
    color: var(--sada-grey);
    white-space: nowrap;
}

@media (max-width: 600px) {
    /* Schmal zählt der Name, nicht die Uhr. */
    .sada-home__when {
        display: none;
    }
}

/* Prüfaufträge aus dem Schraubenfund (SADA_HP „CREATE BOLT CHECKS") */
.traceform-workspace__bolts { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 2px; }
.traceform-workspace__bolt-note {
    font-size: 11.5px; line-height: 1.45; color: var(--sada-grey);
    padding: 5px 7px; border: 1px solid var(--sada-line); border-radius: 6px; background: var(--sada-ground);
}

/* ---------- Etiketten zum Ausdrucken ---------- */

.traceform-print { padding: 16px; background: #fff; }

.traceform-print__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 14px; font-size: 13px; color: var(--sada-grey);
}

.traceform-print__note { font-size: 13px; color: var(--sada-grey); }

/* Ein Bogen: so viele Etiketten nebeneinander, wie das Papier hergibt. */
.traceform-labels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.traceform-label {
    display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px;
    border: 1px dashed #b9c4d2; border-radius: 6px;
    /* Ein Etikett wird nie über zwei Seiten geklebt. */
    break-inside: avoid;
}

.traceform-label__qr { width: 56px; height: 56px; flex: 0 0 auto; }

.traceform-label__text { display: flex; flex-direction: column; min-width: 0; }

/* Der Code im Klartext: Ein verkratztes Etikett wird abgetippt. */
.traceform-label__code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 700; letter-spacing: .06em; }

.traceform-label__title { font-size: 10.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.traceform-label__where { font-size: 9.5px; color: var(--sada-grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media print {
    /* Was auf Papier landet, soll nicht die Bedienung mitdrucken. */
    .traceform-print__bar { display: none; }
    .traceform-print { padding: 0; }
    .traceform-label { border-color: #cfd8e3; }
}

/* ---------- Suche in der Kopfzeile ---------- */

.traceform-search { position: relative; display: flex; align-items: center; gap: 6px; width: 100%; }

.traceform-search__icon { color: rgba(255, 255, 255, .75); }

.traceform-search__input {
    flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .28); border-radius: 8px;
    background: rgba(255, 255, 255, .12); color: #fff;
}

.traceform-search__input::placeholder { color: rgba(255, 255, 255, .7); }

.traceform-search__input:focus { outline: none; border-color: #fff; background: rgba(255, 255, 255, .2); }

/* Die Trefferliste hängt unter dem Feld und gehört nicht mehr zur dunklen Kopfzeile. */
.traceform-search__list {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
    max-height: 60vh; overflow-y: auto; padding: 4px;
    background: #fff; border: 1px solid var(--sada-line); border-radius: 10px;
    box-shadow: 0 10px 28px rgba(12, 40, 80, .25);
}

.traceform-search__hit {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px;
    width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent;
    font: inherit; font-size: 13px; color: var(--sada-text); text-align: left; cursor: pointer;
}

.traceform-search__hit:hover, .traceform-search__hit:focus-visible { background: var(--sada-ground); }

.traceform-search__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.traceform-search__meta { font-size: 11.5px; color: var(--sada-grey); white-space: nowrap; }

.traceform-search__empty { padding: 8px; font-size: 12.5px; color: var(--sada-grey); }

/* ---------- Parks: Gruppen mit ihren Anlagen ---------- */

.sada-parks__description { margin: 0 0 8px; font-size: 12.5px; color: var(--sada-grey); }

.sada-parks__children { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }

.sada-parks__instances { display: flex; flex-direction: column; }

/* Eine Zeile je Anlage: Name, Balken, Urteil — dieselbe Auskunft wie in der Instanzliste. */
.sada-parks__instance {
    display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; align-items: center; gap: 10px;
    padding: 7px 6px; border-bottom: 1px solid var(--sada-line);
    color: inherit; text-decoration: none; font-size: 13px;
}

.sada-parks__instance:last-child { border-bottom: 0; }

.sada-parks__instance:hover { background: var(--sada-ground); }

.sada-parks__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sada-parks__counts { font-size: 11.5px; white-space: nowrap; }

@media (max-width: 560px) {
    /* Schmal zählt der Name und das Urteil; der Balken weicht. */
    .sada-parks__instance { grid-template-columns: minmax(0, 1fr) auto; }
    .sada-parks__instance > :nth-child(2) { display: none; }
}

/* ---------- Startseite: die Anlagen in drei Ansichten ---------- */

/* Der Umschalter (SADA_HP: die Modusknöpfe des Viewers): drei Felder in einem Rahmen, das aktive
   in Navy. Eine Schaltfläche je Ansicht und kein Ausklappmenü — drei Möglichkeiten verbirgt man
   nicht hinter einem Klick. */
.traceform-views {
    display: inline-flex;
    border: 1px solid var(--sada-line);
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
}

.traceform-views__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    border: 0; border-right: 1px solid var(--sada-line);
    background: transparent; color: var(--sada-grey);
    font: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer;
}

.traceform-views__btn:last-child { border-right: 0; }

.traceform-views__btn:hover { background: var(--sada-ground); color: var(--sada-navy); }

.traceform-views__btn.on { background: var(--sada-navy); color: #fff; }

@media (max-width: 560px) {
    /* Schmal bleibt das Sinnbild; die Beschriftung weicht. */
    .traceform-views__btn span { display: none; }
}

/* Kacheln: dieselbe Rasterbreite wie die Karten der Plattform, damit die Startseite eine Spaltenfamilie hat. */
.traceform-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }

.traceform-tile {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px;
    border: 1px solid var(--sada-line); border-radius: 10px;
    background: #fff; color: inherit; text-decoration: none;
    transition: transform .12s, box-shadow .12s, border-color .12s;
}

.traceform-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(12, 40, 80, .14); border-color: var(--sada-navy-2); }

.traceform-tile--warn { border-left: 3px solid var(--sada-error); }

.traceform-tile__head { display: flex; align-items: center; gap: 9px; }

.traceform-tile__title { min-width: 0; flex: 1; }

.traceform-tile__title strong { display: block; font-size: 14px; color: var(--sada-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.traceform-tile__code { font-family: monospace; font-size: 11px; color: var(--sada-grey); }

.traceform-tile__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--sada-grey); }

.traceform-tile__model { margin-right: auto; }

/* Liste: dieselben Angaben, nur dichter — wer dreißig Designs hat, sucht in Zeilen, nicht in Kacheln. */
.traceform-list { width: 100%; border-collapse: collapse; font-size: 13px; }

.traceform-list th {
    text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--sada-grey); padding: 6px 8px; border-bottom: 1px solid var(--sada-line);
}

.traceform-list td { padding: 7px 8px; border-bottom: 1px solid var(--sada-line); }

.traceform-list tbody tr:last-child td { border-bottom: 0; }

.traceform-list__row { cursor: pointer; }

.traceform-list__row:hover { background: var(--sada-ground); }

.traceform-list__name { display: inline-flex; align-items: center; gap: 7px; }

.traceform-list__state { min-width: 130px; display: flex; align-items: center; gap: 8px; }

.traceform-list .mono { font-family: monospace; font-size: 12px; color: var(--sada-grey); }

.traceform-list .num { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
    /* Schmal zählen Name und Stand. */
    .traceform-list th:nth-child(2), .traceform-list td:nth-child(2),
    .traceform-list th:nth-child(4), .traceform-list td:nth-child(4) { display: none; }
}

/* ---------- Die Landkarte ---------- */

.traceform-map__host { height: 440px; border-radius: 10px; border: 1px solid var(--sada-line); overflow: hidden; background: var(--sada-ground); }

.traceform-map__note { margin: 8px 2px 0; font-size: 12px; color: var(--sada-grey); }

/* Ohne Kartenbild: helles Papier statt grauer Flächen — das Gitter zeichnet Leaflet darauf.
   Zwei Klassen, weil Leaflet sein eigenes Grau auf .leaflet-container setzt und sein Stil später
   geladen wird als dieser hier: Bei gleicher Spezifität gewönne er. */
.sada-map--no-tiles.leaflet-container { background: #fbfcfe; }

/* Die Nadeln bringt die Karte als eigene Elemente mit (kein Bild, das on-prem fehlen könnte).
   Die Farbe kommt je Punkt aus dem Stand seiner Prüfungen. */
.sada-map__pin {
    display: block; width: 100%; height: 100%;
    background: var(--tone, #8a97a8);
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(12, 40, 80, .35);
}

.sada-map__site {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: #fff; color: var(--sada-navy, #0C2850);
    border: 3px solid var(--tone, #8a97a8);
    font: 700 12px/1 system-ui, sans-serif;
    box-shadow: 0 2px 8px rgba(12, 40, 80, .28);
}

.sada-map__marker--selected .sada-map__pin { box-shadow: 0 0 0 3px rgba(58, 160, 230, .45), 0 2px 6px rgba(12, 40, 80, .35); }

/* Leaflet bringt eigene Schriftgrößen mit; hier gilt die der Oberfläche. */
.sada-map .leaflet-container { font: inherit; font-size: 12px; }

.sada-map .leaflet-tooltip { border-radius: 7px; border: 1px solid var(--sada-line); box-shadow: 0 4px 14px rgba(12, 40, 80, .16); }

/* ---------- Verlauf: die Änderungsspur eines Items ---------- */

/* Drei Spalten: wann, was, wer. Neueste oben — eine Spur liest man von oben, nicht von hinten. */
.sada-history__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.sada-history__row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: baseline;
    padding: 6px 2px;
    border-bottom: 1px solid var(--sada-line);
    font-size: 12.5px;
}

.sada-history__row:last-child { border-bottom: 0; }

.sada-history__when { color: var(--sada-grey); white-space: nowrap; font-variant-numeric: tabular-nums; }

.sada-history__what { min-width: 0; overflow-wrap: anywhere; }

.sada-history__what b { color: var(--sada-navy); font-weight: 600; margin-right: 6px; }

/* Der alte Wert tritt zurück, der neue steht da — man liest die Zeile von links nach rechts. */
.sada-history__from { color: var(--sada-grey); text-decoration: line-through; text-decoration-thickness: 1px; }

.sada-history__arrow { color: var(--sada-grey); margin: 0 5px; }

.sada-history__to { font-weight: 600; }

.sada-history__who { color: var(--sada-grey); white-space: nowrap; }

@media (max-width: 560px) {
    /* Schmal zählen was und wer; das Datum rückt über die Zeile. */
    .sada-history__row { grid-template-columns: minmax(0, 1fr) auto; }
    .sada-history__when { grid-column: 1 / -1; font-size: 11.5px; }
}

/* ---------- Werkzeuge: die Anzüge, andersherum gelesen ---------- */

.sada-tools__table td { vertical-align: top; }

/* Ein Werkzeug mit überfälliger Kalibrierung fällt auf, ohne die Zeile zu schreien. */
.sada-tools__row--warn { box-shadow: inset 3px 0 0 var(--sada-error); }
/* Das Bild des Werkzeugtyps (27.09.2026): sein erstes Foto, klein neben dem Namen. */
.sada-tools__type-image { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; vertical-align: middle; margin-right: 6px; }
.sada-tools__type-photos .sada-photos { max-width: 520px; }

.sada-tools__due { display: block; font-size: 11px; color: var(--sada-grey); }

/* Die aufgeklappte Zeile: die Anzüge dieses Werkzeugs, eingerückt auf hellem Grund. */
.sada-tools__detail > td { background: var(--sada-ground); padding: 8px 10px; }

.sada-tools__hint { margin: 0 0 6px; font-size: 12px; color: var(--sada-grey); }

.sada-tools__note { font-size: 12px; color: var(--sada-grey); }

@media (max-width: 760px) {
    /* Schmal zählen Nummer, Anzüge und Kalibrierung. */
    .sada-tools__table th:nth-child(2), .sada-tools__table td:nth-child(2),
    .sada-tools__table th:nth-child(4), .sada-tools__table td:nth-child(4),
    .sada-tools__table th:nth-child(6), .sada-tools__table td:nth-child(6) { display: none; }
}

/* ---------- Protokoll: die Freigabe ---------- */

/* Sie steht über den Linien für den Stift, weil sie mehr sagt: welchen Stand jemand abgezeichnet
   hat — und ob er noch gilt. */
.traceform-protocol__approval {
    margin: 18px 0 10px;
    padding: 10px 14px;
    border: 1px solid var(--sada-line);
    border-left: 3px solid var(--sada-fine);
    border-radius: 8px;
    background: #fbfdfb;
    font-size: 12.5px;
    break-inside: avoid;
}

/* Geändert seit der Freigabe: Der Ausdruck zeigt etwas anderes als das, was abgezeichnet wurde. */
.traceform-protocol__approval--stale { border-left-color: var(--sada-error); background: #fffbfb; }

.traceform-protocol__approval-none { margin: 0; color: var(--sada-grey); }

.traceform-protocol__approval-warn { margin: 8px 0 0; color: #b3261e; font-weight: 600; }

.traceform-protocol__approval .sada-facts { margin: 0; }

@media print {
    /* Der Knopf gehört auf den Bildschirm, nicht aufs Papier. */
    .traceform-protocol__approve, .traceform-protocol__approve-message { display: none !important; }
}

/* ---------- Prüfpläne und Prüfrunden (Handbuch §4.13) ---------- */

/* Der Zustand steht in der Farbe des linken Randes: Wer die Seite überfliegt, sieht zuerst, was
   überfällig ist — nicht, was zuerst angelegt wurde. */
.traceform-inspection__plan { border-left: 3px solid var(--sada-line); }

.traceform-inspection__plan.is-overdue { border-left-color: var(--sada-error); }

.traceform-inspection__plan.is-soon { border-left-color: #b8860b; }

.traceform-inspection__plan.is-running { border-left-color: var(--sada-primary, #1b6ec2); }

.traceform-inspection__plans { display: grid; gap: 14px; }

.traceform-inspection__badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.traceform-inspection__due {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--sada-surface-2, #f2f4f7);
    color: var(--sada-grey);
}

.traceform-inspection__due--overdue { background: #fdecea; color: #b3261e; }

.traceform-inspection__due--soon { background: #fff6e0; color: #8a6100; }

.traceform-inspection__due--running { background: #e8f0fe; color: #1b4f9c; }

.traceform-inspection__due--fulfilled { background: #eef7ee; color: #2e7d32; }

.traceform-inspection__pill-overdue { color: #fff; font-weight: 600; }

.traceform-inspection__facts { margin: 8px 0 0; }

/* Die laufende Runde ist das, woran gerade gearbeitet wird — sie bekommt eine eigene Fläche. */
.traceform-inspection__round--open {
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid var(--sada-line);
    border-radius: 8px;
    background: #fbfcff;
}

.traceform-inspection__round-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* Der Startwert steht sichtbar da: Eine Stichprobe, die niemand nachrechnen kann, ist keine. */
.traceform-inspection__draw { margin: 6px 0; font-size: 12.5px; }

.traceform-inspection__items { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }

.traceform-inspection__item { display: flex; align-items: center; gap: 10px; }

.traceform-inspection__round-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.traceform-inspection__note { max-width: 320px; }

.traceform-inspection__history { margin-top: 12px; }

.traceform-inspection__history summary { cursor: pointer; color: var(--sada-grey); font-size: 13px; }

.traceform-inspection__rounds { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }

.traceform-inspection__round-entry { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }

.traceform-inspection__plan-actions {
    display: flex;
    gap: 14px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--sada-line);
}

.traceform-inspection__commissioned .sada-card__body { display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap; }

.traceform-inspection__commissioned p { margin: 4px 0 0; max-width: 60ch; font-size: 13px; }

.traceform-inspection__commissioned-edit { display: flex; align-items: center; gap: 10px; }

.traceform-inspection__commissioned-input { max-width: 200px; }

.traceform-inspection__new-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

.traceform-inspection__new-grid > * { flex: 1 1 180px; }

.traceform-inspections__row--overdue td:first-child { font-weight: 600; }

@media (max-width: 760px) {
    /* Schmal zählen Anlage, Termin und Stand. */
    .traceform-inspections__table th:nth-child(2), .traceform-inspections__table td:nth-child(2),
    .traceform-inspections__table th:nth-child(3), .traceform-inspections__table td:nth-child(3) { display: none; }
}

.traceform-home__inspection { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }

.traceform-home__inspection > span:nth-child(2) { color: var(--sada-grey); flex: 1 1 auto; }

/* Zugriffsprotokoll einer Freigabe — aufgeklappt unter ihrer Zeile. */
.sada-shares__access > td { background: var(--sada-surface-2, #f7f8fa); padding: 8px 12px; }

.sada-shares__access-table { width: 100%; font-size: 12.5px; }

.sada-shares__access-table th { color: var(--sada-grey); font-weight: 600; text-align: left; }

.sada-shares__access-toggle { font-variant-numeric: tabular-nums; }

/* Mehrfachauswahl in der Arbeitspunkt-Tabelle. */
.sada-wit__bulk {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 14px;
    border-top: 1px solid var(--sada-line);
    background: #f4f8ff;
}

.sada-wit__bulk-label { color: var(--sada-grey); font-size: 13px; }

.sada-wit__check { width: 34px; text-align: center; }

.sada-wit__check input { cursor: pointer; }

.sada-wit__row.is-selected > td { background: #eef4ff; }

/* Prüfrunden im Protokoll: die Ziehung steht als eigene Zeile unter ihrer Runde — sie gehört dazu,
   ist aber keine zweite Runde. */
.traceform-protocol__draw > td {
    padding-top: 0;
    font-size: 11.5px;
    color: var(--sada-grey);
}

.traceform-protocol__rounds tr[data-state="Cancelled"] { color: var(--sada-grey); text-decoration: line-through; }

/* ── Anlagen auf der Design-Seite: aufklappen und einklappen ─────────────────────────────────────
   Eingeklappt bleibt der Kopf mit der Zahl stehen — wer dreißig Anlagen hat, will wissen, dass es
   dreißig sind, aber nicht dreißig Zeilen scrollen, bevor die Befunde kommen. */
.sada-design-overview__instances .sada-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sada-design-overview__instances.is-collapsed .sada-card__body { display: none; }
.sada-design-overview__fold { display: inline-flex; align-items: center; }

/* Der Griff zum Aufklappen steht vor dem 3D-Knopf und ist bewusst schmal. */
.sada-design-overview__expand { display: inline-flex; align-items: center; color: var(--sada-grey); }
.sada-design-overview__expand:hover { color: var(--sada-navy); }

/* Die Sub-Instanzen stehen eingerückt unter ihrer Anlage — als Kacheln, nicht als zweite Liste:
   Ein Rotorblatt ist kein Unterpunkt, sondern ein Ding mit eigenem Code. */
.sada-design-overview__children {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 10px 34px;
    border-bottom: 1px solid var(--sada-line);
}

.sada-design-overview__child {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 9px;
    border: 1px solid var(--sada-line);
    border-radius: 8px;
    background: var(--sada-ground);
    text-decoration: none;
    color: var(--sada-text);
    font-size: 12px;
    line-height: 1.3;
}

.sada-design-overview__child:hover { border-color: var(--sada-navy); }
.sada-design-overview__child small { color: var(--sada-grey); font-size: 10.5px; }

/* Fotos und QR in der Arbeitspunkt-Tabelle (SADA_HP-Spalten "fotos" und "qr"): nur Symbole, in der
   Zeile ist kein Platz für Bilder. Die Vorschau steht in der aufgeklappten Zeile. */
.sada-wit__photos { display: inline-flex; align-items: center; gap: 3px; color: var(--sada-grey); font-variant-numeric: tabular-nums; }
.sada-wit__qr a { color: var(--sada-brand, #1b4a86); display: inline-flex; }
.sada-wit__qr a:hover { color: var(--sada-navy); }
.sada-wit__qr--none { opacity: .25; }
.sada-wit__preview { max-width: 420px; }

/* Ziehen zum Umsortieren innerhalb einer Gruppe: der Greifer nur dort, wo es etwas zu greifen gibt. */
.sada-wit__row--draggable { cursor: grab; }
.sada-wit__row--draggable:active { cursor: grabbing; }
.sada-wit__group-remove { margin-left: 12px; font-size: 12px; }
.sada-wit__group-name { border: 1px solid var(--sada-line); border-radius: 6px; padding: 3px 8px; font-size: 12.5px; min-width: 160px; }

/* Die Gruppen im Protokoll: die Folge ist die Aussage, deshalb darf sie umbrechen statt abzuschneiden. */
.traceform-protocol__groups td:last-child { white-space: normal; }

/* Gruppen im 3D-Arbeitsbereich (AP 6): eine Zeile je Gruppe, die offene hervorgehoben. */
.traceform-workspace__groups { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.traceform-workspace__group { display: flex; align-items: center; gap: 4px; border-radius: 6px; padding: 2px 4px; }
.traceform-workspace__group.is-open { background: #eef4fb; }
.traceform-workspace__group-open { flex: 1; min-width: 0; text-align: left; background: none; border: none; cursor: pointer; padding: 2px 4px; font: inherit; color: inherit; }
.traceform-workspace__group-open b { display: block; font-weight: 600; font-size: 12.5px; }
.traceform-workspace__group-open small { display: block; color: var(--sada-grey); font-size: 11px; }
.traceform-workspace__group-note { color: var(--sada-grey); font-size: 11.5px; margin-top: 4px; }

/* Das Werkzeugverzeichnis (AP 2): Typen mit ihren Stuecken, aufklappbar wie die Liste darueber. */
.sada-tools__register-table .sada-tools__type { cursor: pointer; }
.sada-tools__register-table .sada-tools__type small { display: block; color: var(--sada-grey); font-size: 11.5px; }
.sada-tools__type-form { margin-bottom: 8px; }
.sada-tools__instance-form { margin-bottom: 10px; }
.sada-tools__register-empty { padding: 16px; }
.sada-tightening__range { margin-left: 8px; }

/* Monteursicht (§5.9, AP 9): Kopf, Modell, Fuß — und sonst nichts. Die Knöpfe sind daumengroß,
   weil sie mit Handschuh getroffen werden; die Leiste bleibt unten, wo der Daumen liegt. */
.sada-worker { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; height: calc(100vh - 48px - 32px); }
.sada-worker__head { display: flex; align-items: center; gap: 14px; }
.sada-worker__back { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #eef1f5; color: var(--sada-navy); flex: none; }
.sada-worker__where { flex: 1 1 auto; min-width: 0; }
.sada-worker__step { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #6b7684; }
.sada-worker__title { margin: 0; font-size: 26px; line-height: 1.2; }
.sada-worker__sequence { max-width: 220px; }
.sada-worker__viewer { position: relative; border-radius: 14px; overflow: hidden; background: #0d1117; }
.sada-worker__viewer .sada-viewer-host { width: 100%; height: 100%; }
.sada-worker__instruction { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid #dfe4ea; background: rgba(255,255,255,.94); box-shadow: 0 6px 18px rgba(13,17,23,.12); font-size: 15px; white-space: pre-wrap; }
.sada-worker__message { position: absolute; left: 16px; right: 16px; top: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid #efd9a0; background: #fff3cd; box-shadow: 0 6px 18px rgba(13,17,23,.12); font-size: 14px; cursor: pointer; }
.sada-worker__foot { display: flex; align-items: center; gap: 14px; }
.sada-worker__nav { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 150px; height: 64px; padding: 0 22px; border: 0; border-radius: 14px; background: var(--sada-navy); color: #fff; font-size: 18px; font-weight: 700; cursor: pointer; }
.sada-worker__nav:disabled { background: #dfe4ea; color: #97a1ad; cursor: default; }
.sada-worker__middle { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sada-worker__progress { width: 100%; max-width: 420px; height: 10px; border-radius: 5px; background: #e6eaef; overflow: hidden; }
.sada-worker__progress span { display: block; height: 100%; background: #1e7a45; }
.sada-worker__count { font-size: 13px; color: #6b7684; }
.sada-worker__done, .sada-worker__view { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 28px; border: 0; border-radius: 14px; background: #1e7a45; color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; }
.sada-worker__done.is-done { background: #eef1f5; color: var(--sada-navy); }
.sada-worker__view { background: #eef1f5; color: var(--sada-navy); }
@media (max-width: 700px) {
    .sada-worker__foot { flex-wrap: wrap; }
    .sada-worker__nav { flex: 1 1 40%; min-width: 0; }
    .sada-worker__middle { order: -1; width: 100%; }
    .sada-worker__title { font-size: 20px; }
}

/* Der Viewer bringt seine eigene Bedienung mit — Baum, Modusleiste, Werkzeugleiste, Würfel. In der
   Monteursicht ist sie weg: Wer im Turm steht, stellt nichts ein, er sieht, was zu sehen ist.
   Versteckt wird per CSS, nicht durch Eingriff in den Viewer-DOM — der gehört JavaScript (Regel ⑥). */
.sada-worker__viewer .sada-viewer-modes,
.sada-worker__viewer .sada-viewer-side,
.sada-worker__viewer .sada-viewer-top,
.sada-worker__viewer #cad-viewcube { display: none !important; }


/* Die Modelldateien eines Designs (§7.4): eine Zeile je Datei, Reihenfolge links. Sie erscheint erst
   ab der zweiten — bei einer Datei wäre die Liste eine Aussage über nichts. */
.traceform-workspace__files { display: flex; flex-direction: column; gap: 4px; }
.traceform-workspace__file-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.traceform-workspace__file-order { width: 18px; height: 18px; border-radius: 50%; background: #eef1f5; color: var(--sada-navy); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; }
.traceform-workspace__file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traceform-workspace__file-row.is-off .traceform-workspace__file-name { color: #97a1ad; text-decoration: line-through; }
.traceform-workspace__file-toggle { border: 0; background: none; padding: 0; color: var(--sada-navy); cursor: pointer; display: flex; align-items: center; }
.traceform-workspace__file-toggle:disabled { color: #c3cad3; cursor: default; }

/* Dokumentenbibliothek (§4.17): eine Tabelle, und was überdeckt ist, tritt zurück. */
.sada-docs__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sada-docs__revision { max-width: 160px; }
.sada-docs__toggle { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6b7684; }

/* Eine schlichte Tabelle für Listen, die keine MudTable brauchen: Dokumente, Modelldateien. */
.sada-table { width: 100%; border-collapse: collapse; }
.sada-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--sada-grey); font-weight: 700; padding: 0 10px 6px; }
.sada-table td { padding: 8px 10px; border-top: 1px solid var(--sada-line); vertical-align: top; }
.sada-table th.num, .sada-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sada-table tbody tr:hover > td { background: var(--sada-ground); }
.sada-docs__table tr.is-superseded td { color: #8a94a1; }
.sada-docs__actions { text-align: right; white-space: nowrap; }
.sada-docs__actions > * { vertical-align: middle; margin-left: 10px; }
.traceform-attachment__library { display: flex; align-items: center; gap: 8px; min-width: 0; }
.traceform-item__attach-pick { max-width: 320px; }

/* Eine Sub-Anlage, die von ihrer Rolle abweicht (§4.19): Sie sagt es, statt es zu verschweigen. */
.sada-subinstances__item.is-different { border-color: #efd9a0; background: #fffdf6; }
.sada-subinstances__different { color: #a1791f; }
.sada-instance-overview__swap-pick { max-width: 280px; }
.sada-instance-overview__swap-reason { max-width: 260px; }

/* Symbolwahl (§6.6, AP 8): der kuratierte Satz in zwei Reihen — Sinnbilder oben, Farben darunter. */
.sada-icons { display: flex; flex-direction: column; gap: 6px; }
.sada-icons__row { display: flex; flex-wrap: wrap; gap: 4px; }
.sada-icons__key { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid #dfe4ea; border-radius: 7px; background: #fff; color: var(--sada-navy); cursor: pointer; padding: 0; }
.sada-icons__key.is-on { border-color: var(--sada-navy); box-shadow: inset 0 0 0 1px var(--sada-navy); }
.sada-icons__color { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #dfe4ea; background: #fff; cursor: pointer; padding: 0; }
.sada-icons__color.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sada-navy); }
.sada-wit__group-icons { margin-top: 6px; }

/* Modelldateien eines Designs (§7.4): eine Tabelle, die Hauptdatei zuerst. */
.sada-models__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sada-models__table tr.is-main td { background: #fbfdff; }
.sada-models__actions { text-align: right; white-space: nowrap; }
.sada-models__actions > * { vertical-align: middle; margin-left: 8px; }
.sada-models__placement { color: #6b7684; font-size: 12.5px; }
/* Aufnahmen aus der AR-App (Arbeitspaket Scan §3.2): Die Marke steht neben dem Namen, der Hinweis
   darunter — wer eine abgetastete Hülle für Konstruktion hält, misst an ihr. */
.sada-models__scan { margin-left: 8px; vertical-align: middle; }
.sada-models__capture { font-size: 12px; }
.sada-models__loose { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 9px; border-radius: 7px; background: #fde6e4; color: #b3261e; font-size: 12px; font-weight: 600; }
.sada-models__scan-note em { font-style: normal; font-weight: 600; }

/* Risse im Protokoll (T8): der Befund mit seiner Herkunft in zwei Zeilen, die Linie als Skizze
   unter der Zeile — Vektor, druckbar, aus denselben Punkten wie im Viewer. */
.traceform-protocol__finding { font-size: 12px; white-space: nowrap; }
.traceform-protocol__finding-source { display: block; color: #6b7684; font-size: 11px; }
.traceform-protocol__sketch-row td { padding: 4px 8px 10px; }
.traceform-protocol__sketch svg { display: block; width: 300px; max-width: 100%; height: auto; }
@media print { .traceform-protocol__sketch-row { break-inside: avoid; } }
.traceform-attachment__finding { margin-left: 8px; vertical-align: middle; }
.sada-models__fields .mud-input-control { max-width: 110px; }
.sada-design-settings__facts dt { color: #6b7684; }

/* Die Karte im 3D lässt sich schieben: am Kopf greifen, Doppelklick stellt sie zurück. Die Ebene
   darunter gibt es nur während des Ziehens — sonst käme jede Mausbewegung über dem Viewer im WASM an. */
.sada-models__actions .sada-link-btn:disabled { opacity: .35; cursor: default; text-decoration: none; }
.sada-wcard__grip { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: flex-start; cursor: grab; touch-action: none; user-select: none; }
.sada-wcard.is-dragging { box-shadow: 0 18px 44px rgba(12, 40, 80, .35); }
.sada-wcard.is-dragging .sada-wcard__grip { cursor: grabbing; }
/* Über der Karte (z 20), nicht darunter: Sonst finge die Karte selbst jede Bewegung ab und bliebe liegen. */
.sada-wcard__drag { position: absolute; inset: 0; z-index: 21; cursor: grabbing; }

/* Umwandeln als Werkzeug (§7.5): Viewer links, Panel rechts — dieselbe Aufteilung wie das Labor.
   Der Platzhalter liegt über dem Viewer und wird ausgeblendet, nie entfernt: Der Viewer bleibt
   stehen, sonst verlöre er WebGL-Kontext und Decoder (Regel 6). */
.traceform-convert {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    height: calc(100vh - 48px - 32px);
}

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

.traceform-convert__empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    transition: opacity 120ms ease-in;
}

.traceform-convert__empty--gone {
    opacity: 0;
    pointer-events: none;
}

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

.traceform-convert__file {
    width: 100%;
}

.traceform-convert__download {
    display: block;
    margin-top: 12px;
    text-align: center;
}

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

/* Risserkennung (Arbeitspaket Vision): Foto links, Panel rechts. Der Verlauf liegt als SVG
   ueber dem Bild — dieselbe Groesse, derselbe Zeichenraum, deshalb passen die Pixel des
   Dienstes ohne Umrechnung. */
.traceform-cracks {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}

.traceform-cracks__photo {
    min-height: 320px;
    border-radius: var(--mud-default-borderradius);
    box-shadow: var(--mud-elevation-1);
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.traceform-cracks__frame {
    position: relative;
    line-height: 0;
}

.traceform-cracks__image {
    width: 100%;
    height: auto;
    display: block;
}

.traceform-cracks__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.traceform-cracks__line {
    fill: none;
    stroke: var(--mud-palette-warning);
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}

.traceform-cracks__line--on {
    stroke: var(--mud-palette-error);
    opacity: 1;
}

.traceform-cracks__box {
    fill: none;
    stroke: var(--mud-palette-warning);
    stroke-width: 2;
    stroke-dasharray: 8 6;
    opacity: 0.5;
    vector-effect: non-scaling-stroke;
}

.traceform-cracks__box--on {
    stroke: var(--mud-palette-error);
    opacity: 1;
}

.traceform-cracks__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 320px;
    color: var(--mud-palette-text-secondary);
}

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

.traceform-cracks__file {
    width: 100%;
}

/* Der Kameraknopf ist ein Label um ein verstecktes Dateifeld: Auf dem Tablet oeffnet
   capture die Kamera, am Schreibtisch die Dateiauswahl. */
.traceform-cracks__camera input {
    display: none;
}

.traceform-cracks__item--on {
    background: var(--mud-palette-action-default-hover);
}

@media (max-width: 960px) {
    .traceform-cracks {
        grid-template-columns: 1fr;
    }
}

/* Designseite: Statuskacheln als Filter, Werkzeugleiste, Sammlungen an der Kachel. Die drei
   Ansichten selbst kommen aus <DesignViews> — hier steht nur, was die Seite drumherum baut. */
.sada-designs__states {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sada-designs__state {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--sada-line);
    border-radius: 10px;
    background: #fff;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.sada-designs__state small {
    display: block;
    color: var(--sada-grey);
}

.sada-designs__state.is-empty { opacity: 0.5; }
.sada-designs__state.is-on { border-color: var(--sada-navy-2); box-shadow: 0 0 0 1px var(--sada-navy-2); }
.sada-designs__state.error .mud-icon-root { color: var(--sada-error); }
.sada-designs__state.ongoing .mud-icon-root { color: var(--sada-warn, #b26a00); }
.sada-designs__state.fine .mud-icon-root { color: var(--sada-ok, #1b7f4b); }

.sada-designs__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.sada-designs__search { max-width: 320px; }
.sada-designs__filter { max-width: 220px; }

/* Sammlungen und Menü hängen unter der Kachel, außerhalb ihres Links. */
.sada-designs__extra {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sada-designs__groups {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.sada-designs__x {
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: 0 0 0 4px;
    font: inherit;
}

/* Die Kachel ist seit der Designseite ein Behälter: der Link innen, das Menü daneben. */
.traceform-tile__link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

@media (max-width: 720px) {
    .sada-designs__search,
    .sada-designs__filter { max-width: 100%; flex: 1 1 100%; }
}

/* Die Aufgaben (29.09.2026): je Anlage eine Karte, je Aufgabe eine Zeile — groß genug für den Daumen. */
.sada-tasks__list { list-style: none; margin: 0; padding: 0; }
.sada-tasks__task + .sada-tasks__task { border-top: 1px solid var(--sada-line, #e5e9ef); }
.sada-tasks__link { display: flex; align-items: center; gap: 12px; padding: 12px 4px; color: inherit; text-decoration: none; min-height: 48px; }
.sada-tasks__link:hover { background: var(--sada-hover, #f4f6f9); }
.sada-tasks__link b { flex: 1; }
.sada-tasks__link small { white-space: nowrap; }