/* SSHMon – Oberfläche
   Nüchterne Leitstand-Farbwelt: Schiefer, Petrol als Akzent. Statusfarben sind die einzigen kräftigen Farben,
   damit Warnungen und Alarme sofort ins Auge fallen. */

:root,
[data-bs-theme="light"] {
    --sm-bg: #f1f3f5;
    --sm-surface: #ffffff;
    --sm-surface-2: #f6f8f9;
    --sm-ink: #1a232b;
    --sm-muted: #627080;
    --sm-line: #dfe4e8;
    --sm-accent: #0f6e84;
    --sm-accent-hover: #0b5a6c;
    --sm-accent-ink: #ffffff;
    --sm-accent-soft: #e0eff2;
    --sm-sidebar: #141c23;
    --sm-sidebar-ink: #c3ccd4;
    --sm-sidebar-active: #22303b;
    --sm-shadow: 0 1px 2px rgba(20, 28, 35, .06), 0 2px 8px rgba(20, 28, 35, .05);

    /* Status: OK, Warnung, Alarm, Unbekannt, Quittiert */
    --sm-ok: #2e8a55;
    --sm-warn: #c27c0e;
    --sm-alarm: #c8352b;
    --sm-unknown: #7d878b;
    --sm-ack: #5b62b5;

    --bs-body-bg: var(--sm-bg);
    --bs-body-color: var(--sm-ink);
    --bs-primary: var(--sm-accent);
    --bs-primary-rgb: 15, 110, 132;
    --bs-link-color: var(--sm-accent);
    --bs-link-color-rgb: 15, 110, 132;
    --bs-link-hover-color: var(--sm-accent-hover);
    --bs-border-color: var(--sm-line);
    --bs-font-sans-serif: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

[data-bs-theme="dark"] {
    --sm-bg: #10161b;
    --sm-surface: #182027;
    --sm-surface-2: #1e2830;
    --sm-ink: #e2e8ec;
    --sm-muted: #93a1ad;
    --sm-line: #2a3640;
    --sm-accent: #3fb0c9;
    --sm-accent-hover: #63c3d8;
    --sm-accent-ink: #0b1216;
    --sm-accent-soft: #163640;
    --sm-sidebar: #0b1014;
    --sm-sidebar-active: #1b2731;
    --sm-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --sm-ok: #4fb67b;
    --sm-warn: #e0a33a;
    --sm-alarm: #ef6b5f;
    --sm-unknown: #98a3a7;
    --sm-ack: #8f95e0;
    --bs-body-bg: var(--sm-bg);
    --bs-body-color: var(--sm-ink);
    --bs-primary: var(--sm-accent);
    --bs-primary-rgb: 63, 176, 201;
    --bs-link-color: var(--sm-accent);
    --bs-link-color-rgb: 63, 176, 201;
    --bs-link-hover-color: var(--sm-accent-hover);
    --bs-border-color: var(--sm-line);
}

body { background: var(--sm-bg); color: var(--sm-ink); font-size: .95rem; }

.btn-primary {
    --bs-btn-bg: var(--sm-accent);
    --bs-btn-border-color: var(--sm-accent);
    --bs-btn-color: var(--sm-accent-ink);
    --bs-btn-hover-bg: var(--sm-accent-hover);
    --bs-btn-hover-border-color: var(--sm-accent-hover);
    --bs-btn-hover-color: var(--sm-accent-ink);
    --bs-btn-active-bg: var(--sm-accent-hover);
    --bs-btn-active-border-color: var(--sm-accent-hover);
    --bs-btn-active-color: var(--sm-accent-ink);
    --bs-btn-disabled-bg: var(--sm-accent);
    --bs-btn-disabled-border-color: var(--sm-accent);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--sm-accent);
    --bs-btn-border-color: var(--sm-accent);
    --bs-btn-hover-bg: var(--sm-accent);
    --bs-btn-hover-border-color: var(--sm-accent);
    --bs-btn-hover-color: var(--sm-accent-ink);
    --bs-btn-active-bg: var(--sm-accent);
    --bs-btn-active-border-color: var(--sm-accent);
    --bs-btn-disabled-color: var(--sm-accent);
    --bs-btn-disabled-border-color: var(--sm-accent);
}

.btn-icon {
    border: 0;
    background: transparent;
    color: var(--sm-muted);
    font-size: 1.2rem;
    padding: .35rem .55rem;
    border-radius: .5rem;
}

.btn-icon:hover { background: var(--sm-surface-2); color: var(--sm-ink); }

/* Eingabefelder heben sich im hellen Modus weiß vom grauen Hintergrund ab */
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select { background-color: var(--sm-surface); }

.form-check-input:checked { background-color: var(--sm-accent); border-color: var(--sm-accent); }
.form-check-input:focus { border-color: var(--sm-accent); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--sm-accent) 25%, transparent); }

/* ---------- Grundgerüst ---------- */

.sm-shell { display: flex; min-height: 100vh; }

.sm-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--sm-sidebar);
    color: var(--sm-sidebar-ink);
    --bs-offcanvas-bg: var(--sm-sidebar);
    --bs-offcanvas-width: 260px;
}

@media (min-width: 992px) {
    .sm-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        /* offcanvas-lg setzt ab lg den Hintergrund transparent */
        background-color: var(--sm-sidebar) !important;
    }
}

.sm-brand { display: flex; align-items: center; gap: .65rem; padding: 1.25rem 1.25rem 1rem; color: #fff; }

.sm-brand-mark {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .6rem;
    background: #0f6e84;
    color: #fff;
    font-size: 1.15rem;
}

.sm-brand-name { font-weight: 650; font-size: 1.15rem; letter-spacing: .01em; }

.sm-nav { display: flex; flex-direction: column; padding: .25rem .75rem 1.5rem; gap: 2px; }

.sm-nav-heading {
    margin: 1.1rem .6rem .35rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #7d8c98;
}

.sm-nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .7rem;
    border-radius: .5rem;
    color: var(--sm-sidebar-ink);
    text-decoration: none;
    font-weight: 500;
}

.sm-nav-link i { font-size: 1.05rem; opacity: .85; }
.sm-nav-link:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.sm-nav-link.active { background: var(--sm-sidebar-active); color: #fff; box-shadow: inset 3px 0 0 #3fb0c9; }

.sm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.sm-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1.5rem;
    background: color-mix(in srgb, var(--sm-bg) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sm-line);
}

.sm-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.sm-user { display: flex; align-items: center; gap: .5rem; border: 0; color: var(--sm-ink); }

.sm-avatar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--sm-accent-soft);
    color: var(--sm-accent);
    font-weight: 700;
    font-size: .75rem;
}

.sm-content { padding: 1.5rem; flex: 1; }

.sm-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    color: var(--sm-muted);
    font-size: .8rem;
    border-top: 1px solid var(--sm-line);
}

/* ---------- Seitenkopf ---------- */

.sm-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.sm-title { font-size: 1.6rem; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.sm-subtitle { margin: .2rem 0 0; color: var(--sm-muted); }
.sm-page-actions { display: flex; gap: .5rem; }
.sm-page-actions form { display: inline; }

.sm-back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: .6rem;
    padding: .35rem .85rem .35rem .65rem;
    border-radius: 2rem;
    color: var(--sm-accent);
    background: color-mix(in srgb, var(--sm-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--sm-accent) 30%, transparent);
}

.sm-back:hover, .sm-back:focus-visible { color: var(--sm-accent-ink); background: var(--sm-accent); }
/* mehrere Rücksprünge nebeneinander (Übersicht ganz links) */
.sm-backs { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Panels, Formulare, Tabellen ---------- */

.sm-panel {
    background: var(--sm-surface);
    border: 1px solid var(--sm-line);
    border-radius: .85rem;
    box-shadow: var(--sm-shadow);
    padding: 1.25rem 1.35rem;
}

.sm-panel-title { font-size: 1.02rem; font-weight: 650; margin: 0 0 1rem; display: flex; align-items: center; gap: .5rem; }
.sm-panel-title i { color: var(--sm-accent); }

.sm-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; align-items: start; }
.sm-grid-form { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.sm-span-2 { grid-column: 1 / -1; }
.sm-narrow { max-width: 720px; }
.sm-inline-form { margin-top: 1rem; }

.sm-table { --bs-table-bg: transparent; margin-bottom: 0; }
.sm-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sm-muted); font-weight: 600; }
.sm-table td, .sm-table th { padding: .7rem 1rem; }
.sm-row-muted td { opacity: .55; }
.sm-ua { max-width: 320px; }

.sm-dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin-bottom: 1.25rem; }
.sm-dl dt { color: var(--sm-muted); font-weight: 500; }
.sm-dl dd { margin: 0; }

.sm-role {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 1rem;
    font-size: .78rem;
    font-weight: 600;
    background: var(--sm-surface-2);
    border: 1px solid var(--sm-line);
}

.sm-role-admin { background: var(--sm-accent-soft); border-color: color-mix(in srgb, var(--sm-accent) 35%, transparent); color: var(--sm-accent); }

.sm-otp { display: flex; flex-direction: column; gap: .25rem; }
.sm-otp-value { font-size: 1.15rem; letter-spacing: .06em; user-select: all; }

.sm-empty-state { text-align: center; padding: 3rem 1rem; color: var(--sm-muted); }
.sm-empty-state i { font-size: 2.5rem; color: var(--sm-accent); display: block; margin-bottom: .75rem; }
.sm-empty-state h2 { font-size: 1.15rem; color: var(--sm-ink); }

.sm-filterbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; align-items: center; }
.sm-filter-select { width: auto; min-width: 200px; background-color: var(--sm-surface); }
.sm-filter-input { width: auto; background-color: var(--sm-surface); }

.sm-settings-nav { position: sticky; top: 5rem; }
.sm-settings-nav a { display: block; padding: .4rem .75rem; border-radius: .45rem; color: var(--sm-ink); text-decoration: none; }
.sm-settings-nav a:hover { background: var(--sm-surface-2); }
.sm-savebar { position: sticky; bottom: 0; padding: .75rem 0; background: linear-gradient(transparent, var(--sm-bg) 35%); z-index: 5; }
.sm-testmail-input { max-width: 320px; }

.sm-mono { font-family: var(--bs-font-monospace); font-size: .82rem; }
.sm-audit-changes { max-width: 520px; white-space: pre-wrap; word-break: break-word; color: var(--sm-muted); font-size: .8rem; margin: 0; }

/* ---------- Status (Grundlage für Dashboard und Prüfungen) ---------- */

.sm-status { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--st); }
.sm-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--st); display: inline-block; }
.status-ok { --st: var(--sm-ok); }
.status-warning { --st: var(--sm-warn); }
.status-alarm { --st: var(--sm-alarm); }
.status-unknown { --st: var(--sm-unknown); }
.status-acknowledged { --st: var(--sm-ack); }

/* ---------- Anmeldung ---------- */

.sm-guest {
    min-height: 100vh;
    background: radial-gradient(1200px 600px at 10% -10%, var(--sm-accent-soft), transparent 60%), var(--sm-bg);
}

.sm-guest-main { max-width: 460px; margin: 0 auto; padding: 8vh 1rem 2rem; }
.sm-guest-main:has(.sm-auth-card-wide) { max-width: 560px; }
.sm-guest-brand { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: 1.5rem; }
.sm-guest-brand .sm-brand-name { color: var(--sm-ink); font-size: 1.4rem; }
.sm-guest-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; color: var(--sm-muted); font-size: .78rem; margin-top: 1.5rem; }
.sm-lang-switch { display: inline-flex; gap: .25rem; margin: 0; }
.sm-lang-switch button { border: 0; background: none; color: var(--sm-muted); font-size: .78rem; padding: .1rem .35rem; border-radius: .3rem; }
.sm-lang-switch button[aria-pressed="true"] { color: var(--sm-ink); font-weight: 650; background: var(--sm-surface); }

.sm-auth-card {
    background: var(--sm-surface);
    border: 1px solid var(--sm-line);
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(20, 28, 35, .08);
    padding: 2rem;
}

.sm-auth-title { font-size: 1.45rem; font-weight: 650; margin: 0 0 .25rem; }
.sm-auth-lead { color: var(--sm-muted); margin-bottom: 1.5rem; }
.sm-auth-hint { color: var(--sm-muted); font-size: .82rem; margin: 1.25rem 0 0; }
.sm-code-input { font-size: 1.4rem; letter-spacing: .25em; text-align: center; font-variant-numeric: tabular-nums; }
.sm-steps { padding-left: 1.2rem; margin-bottom: 1.25rem; }
.sm-steps li { margin-bottom: .75rem; }
.sm-qr-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .75rem; }
.sm-qr { width: 200px; height: 200px; background: #fff; border-radius: .5rem; border: 1px solid var(--sm-line); padding: .25rem; }
.sm-secret { color: var(--sm-ink); display: inline-block; margin-top: .25rem; font-size: .95rem; letter-spacing: .05em; word-break: break-all; }
.sm-codes { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }

.sm-codes code {
    display: block;
    padding: .55rem .75rem;
    text-align: center;
    font-size: 1.05rem;
    letter-spacing: .08em;
    background: var(--sm-surface-2);
    border: 1px dashed var(--sm-line);
    border-radius: .5rem;
    color: var(--sm-ink);
}

/* ---------- Fehlerseiten ---------- */

.sm-error { text-align: center; padding: 3rem 1rem; }
.sm-error-code { font-size: 4rem; font-weight: 750; color: var(--sm-accent); line-height: 1; margin-bottom: .5rem; font-variant-numeric: tabular-nums; }

/* ---------- Kleine Bildschirme (bis Tablet) ---------- */

@media (max-width: 991.98px) {
    .sm-grid-form { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .sm-content { padding: 1rem; }
    .sm-topbar { padding: .6rem 1rem; }
    .sm-footer { flex-direction: column; }
    .sm-grid-2 { grid-template-columns: 1fr; }
    .sm-filter-select { min-width: 0; flex: 1 1 100%; }
}

@media print {
    .no-print, .sm-sidebar, .sm-topbar, .sm-footer { display: none !important; }
    .sm-content { padding: 0; }
    .sm-panel { box-shadow: none; }
}

/* ---------- Betrieb: Datensicherung, System ---------- */

.sm-code { background: var(--sm-surface-2); border: 1px solid var(--sm-line); border-radius: .45rem; padding: .6rem .8rem; font-size: .8rem; white-space: pre-wrap; }
.sm-checks { list-style: none; margin: 0; padding: 0; }
.sm-checks li { display: grid; grid-template-columns: 1.4rem 1fr; column-gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--sm-line); }
.sm-checks li:last-child { border-bottom: 0; }
.sm-checks i { grid-row: span 2; padding-top: .1rem; }
.sm-check-label { font-weight: 600; font-size: .9rem; }
.sm-check-detail { font-size: .8rem; color: var(--sm-muted); word-break: break-word; }
.sm-check-detail:empty { display: none; }
.sm-changelog { border-bottom: 1px solid var(--sm-line); padding: .5rem 0; }
.sm-changelog:last-child { border-bottom: 0; }
.sm-changelog summary { font-weight: 600; cursor: pointer; }
.sm-changelog ul { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .9rem; }

/* ---------- Monitoring: Systeme, Prüfungen, Übersicht ---------- */

.status-pending { --st: var(--sm-unknown); }
.status-offline { --st: #94a3b8; }
.sm-status.small { font-size: .8rem; font-weight: 600; }
.sm-scroll { max-height: 420px; overflow-y: auto; }
.sm-meter-cell { min-width: 140px; }
.sm-meter { height: .45rem; background: var(--sm-surface-2); border: 1px solid var(--sm-line); border-radius: 1rem; overflow: hidden; }
.sm-meter-fill { display: block; height: 100%; background: var(--st, var(--sm-ok)); }

.sm-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.sm-count {
    display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border-radius: .75rem;
    background: var(--sm-surface); border: 1px solid var(--sm-line); border-left: .35rem solid var(--st); box-shadow: var(--sm-shadow);
    color: var(--sm-ink); text-decoration: none;
}
.sm-count:hover { border-color: var(--st); color: var(--sm-ink); }
.sm-count-value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: var(--st); }
.sm-count-label { font-size: .82rem; color: var(--sm-muted); }
.sm-count.is-zero .sm-count-value { color: var(--sm-muted); }

.sm-problem { display: grid; grid-template-columns: auto 1fr auto; gap: .25rem 1rem; align-items: center; padding: .7rem 1rem; border-top: 1px solid var(--sm-line); }
.sm-problem:first-child { border-top: 0; }
.sm-problem-title { font-weight: 600; }
.sm-problem-text { grid-column: 2 / 4; color: var(--sm-muted); font-size: .85rem; }

.sm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.sm-tile {
    display: block; padding: .7rem .85rem; border-radius: .6rem; text-decoration: none; color: var(--sm-ink);
    background: var(--sm-surface); border: 1px solid var(--sm-line); border-top: .3rem solid var(--st);
}
.sm-tile:hover { color: var(--sm-ink); box-shadow: var(--sm-shadow); }
.sm-tile-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-tile-meta { font-size: .78rem; color: var(--sm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-check-help { color: var(--sm-muted); font-size: .8rem; }

/* ---------- Monitor-Modus (BL-044) ---------- */

.sm-live-state { margin-left: .5rem; color: var(--sm-warn); font-weight: 600; }
.sm-monitor-body { background: var(--sm-bg); min-height: 100vh; }
.sm-monitor-bar {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: .75rem 1.5rem; border-bottom: 1px solid var(--sm-line); background: var(--sm-surface);
}
.sm-monitor-name { font-weight: 700; font-size: 1.25rem; }
.sm-monitor-clock { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sm-monitor-meta { color: var(--sm-muted); }
.sm-monitor-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.sm-monitor { padding: 1.25rem 1.5rem; font-size: 1.05rem; }
.sm-monitor .sm-count { padding: 1.1rem 1.25rem; }
.sm-monitor .sm-count-value { font-size: 2.6rem; }
.sm-monitor .sm-count-label { font-size: 1rem; }
.sm-monitor .sm-problem-title { font-size: 1.1rem; }
.sm-monitor .sm-tiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sm-monitor .sm-tile-name { font-size: 1.05rem; }
@media (min-width: 2400px) {
    .sm-monitor { font-size: 1.35rem; }
    .sm-monitor .sm-count-value { font-size: 3.6rem; }
    .sm-monitor .sm-tiles { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* Füllstand in 1-%-Schritten (CSP erlaubt keine Inline-Styles) */
.sm-w-0 { width: 0%; }
.sm-w-1 { width: 1%; }
.sm-w-2 { width: 2%; }
.sm-w-3 { width: 3%; }
.sm-w-4 { width: 4%; }
.sm-w-5 { width: 5%; }
.sm-w-6 { width: 6%; }
.sm-w-7 { width: 7%; }
.sm-w-8 { width: 8%; }
.sm-w-9 { width: 9%; }
.sm-w-10 { width: 10%; }
.sm-w-11 { width: 11%; }
.sm-w-12 { width: 12%; }
.sm-w-13 { width: 13%; }
.sm-w-14 { width: 14%; }
.sm-w-15 { width: 15%; }
.sm-w-16 { width: 16%; }
.sm-w-17 { width: 17%; }
.sm-w-18 { width: 18%; }
.sm-w-19 { width: 19%; }
.sm-w-20 { width: 20%; }
.sm-w-21 { width: 21%; }
.sm-w-22 { width: 22%; }
.sm-w-23 { width: 23%; }
.sm-w-24 { width: 24%; }
.sm-w-25 { width: 25%; }
.sm-w-26 { width: 26%; }
.sm-w-27 { width: 27%; }
.sm-w-28 { width: 28%; }
.sm-w-29 { width: 29%; }
.sm-w-30 { width: 30%; }
.sm-w-31 { width: 31%; }
.sm-w-32 { width: 32%; }
.sm-w-33 { width: 33%; }
.sm-w-34 { width: 34%; }
.sm-w-35 { width: 35%; }
.sm-w-36 { width: 36%; }
.sm-w-37 { width: 37%; }
.sm-w-38 { width: 38%; }
.sm-w-39 { width: 39%; }
.sm-w-40 { width: 40%; }
.sm-w-41 { width: 41%; }
.sm-w-42 { width: 42%; }
.sm-w-43 { width: 43%; }
.sm-w-44 { width: 44%; }
.sm-w-45 { width: 45%; }
.sm-w-46 { width: 46%; }
.sm-w-47 { width: 47%; }
.sm-w-48 { width: 48%; }
.sm-w-49 { width: 49%; }
.sm-w-50 { width: 50%; }
.sm-w-51 { width: 51%; }
.sm-w-52 { width: 52%; }
.sm-w-53 { width: 53%; }
.sm-w-54 { width: 54%; }
.sm-w-55 { width: 55%; }
.sm-w-56 { width: 56%; }
.sm-w-57 { width: 57%; }
.sm-w-58 { width: 58%; }
.sm-w-59 { width: 59%; }
.sm-w-60 { width: 60%; }
.sm-w-61 { width: 61%; }
.sm-w-62 { width: 62%; }
.sm-w-63 { width: 63%; }
.sm-w-64 { width: 64%; }
.sm-w-65 { width: 65%; }
.sm-w-66 { width: 66%; }
.sm-w-67 { width: 67%; }
.sm-w-68 { width: 68%; }
.sm-w-69 { width: 69%; }
.sm-w-70 { width: 70%; }
.sm-w-71 { width: 71%; }
.sm-w-72 { width: 72%; }
.sm-w-73 { width: 73%; }
.sm-w-74 { width: 74%; }
.sm-w-75 { width: 75%; }
.sm-w-76 { width: 76%; }
.sm-w-77 { width: 77%; }
.sm-w-78 { width: 78%; }
.sm-w-79 { width: 79%; }
.sm-w-80 { width: 80%; }
.sm-w-81 { width: 81%; }
.sm-w-82 { width: 82%; }
.sm-w-83 { width: 83%; }
.sm-w-84 { width: 84%; }
.sm-w-85 { width: 85%; }
.sm-w-86 { width: 86%; }
.sm-w-87 { width: 87%; }
.sm-w-88 { width: 88%; }
.sm-w-89 { width: 89%; }
.sm-w-90 { width: 90%; }
.sm-w-91 { width: 91%; }
.sm-w-92 { width: 92%; }
.sm-w-93 { width: 93%; }
.sm-w-94 { width: 94%; }
.sm-w-95 { width: 95%; }
.sm-w-96 { width: 96%; }
.sm-w-97 { width: 97%; }
.sm-w-98 { width: 98%; }
.sm-w-99 { width: 99%; }
.sm-w-100 { width: 100%; }
.sm-break { overflow-wrap: anywhere; min-width: 12rem; }
.sm-filter { max-width: 18rem; }
.sm-scroll-tall { max-height: 70vh; overflow-y: auto; }
.sm-col-check { width: 2.5rem; }
.sm-origin { margin-top: .15rem; line-height: 1.6; }
.sm-origin .badge { font-weight: 500; font-size: .7rem; }
.sm-badge-origin { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.sm-badge-manual { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); }
.sm-metrics th { white-space: nowrap; text-transform: none; letter-spacing: 0; }
.sm-metrics-sep td { background: var(--bs-tertiary-bg); font-weight: 600; }
.sm-col-check { width: 2.5rem; }
.sm-support a { color: inherit; }
.sm-guest-foot .sm-support { flex-basis: 100%; text-align: center; }

/* Sortierbare Tabellen (0.20.0) */
.sm-table th .sm-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; text-transform: inherit; letter-spacing: inherit; font: inherit; color: inherit; }
.sm-table th .sm-sort:focus-visible { outline: 2px solid var(--sm-accent, #0d6efd); outline-offset: 2px; border-radius: .2rem; }
.sm-table th .sm-sort::after { content: "\2195"; opacity: .35; font-size: .85em; }
.sm-table th[aria-sort="ascending"] .sm-sort::after { content: "\2191"; opacity: .9; }
.sm-table th[aria-sort="descending"] .sm-sort::after { content: "\2193"; opacity: .9; }
.sm-table th[aria-sort="ascending"], .sm-table th[aria-sort="descending"] { color: var(--sm-text, inherit); }

/* Suche im Dashboard */
.sm-dash-search { position: relative; }
.sm-dash-search .bi-search { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--sm-muted); pointer-events: none; }
.sm-dash-search input { padding-left: 2.1rem; min-width: 16rem; background-color: var(--sm-surface); }
@media (max-width: 767.98px) {
    .sm-dash-search { flex: 1 1 100%; }
    .sm-dash-search input { min-width: 0; width: 100%; }
}

/* Einrichtung: Code-Blöcke mit Kopierknopf (0.22.0) */
.sm-code-wrap { position: relative; margin-bottom: .75rem; }
.sm-code { background: var(--sm-surface-2, #f3f5f7); border: 1px solid var(--sm-border, #e3e8ec); border-radius: .5rem; padding: .85rem 1rem; padding-right: 7rem; font-size: .8rem; max-height: 28rem; overflow: auto; white-space: pre; margin: 0; }
[data-bs-theme="dark"] .sm-code { background: #0f161d; border-color: #2a343d; }
.sm-copy { position: absolute; top: .5rem; right: .5rem; z-index: 1; background: var(--sm-surface, #fff); }
.sm-setup-dl dt { margin-top: .5rem; }
.sm-setup-dl dd { margin-bottom: .25rem; }