/* KI-erstellt (Claude, 28.09.2026): Umstellung auf Sedna.UI, Phase A + Phase B.
   Diese Datei enthält die Kachel-/Arbeitsflächen-Regeln (".monitor-*"), die ausschließlich von
   Pages/Home.razor und dem zugehörigen JavaScript (wwwroot/index.html, window.overwatchLayout)
   gebraucht werden - ursprünglich wörtlich aus der früheren wwwroot/css/app.css übernommen
   (siehe die stillgelegte Kopie unter wwwroot/css/vor-sedna/app.css). Struktur (Grid/Flex/Maße)
   ist unverändert Bootstrap-frei geblieben (diese Klassen waren nie Bootstrap-Klassen). Phase B
   (28.09.2026) hat aus Home.razor entfernte Bootstrap-Klassen (d-flex, form-check, alert usw.)
   durch Sedna.UI-Klassen ersetzt und dafür hier ".monitor-alert-actions" ergänzt.
   Die fünf "--ow-tile-*"-Variablen, von denen die Kachelhöhen-Rechnung in Home.razor abhängt,
   stehen weiterhin in css/app.css - hier nur gelesen, nicht neu gesetzt (siehe deren
   Kopfkommentar dort).

   FARBEN (Korrekturrunde 1, 28.09.2026): Alle Regeln verwenden jetzt entweder die vorhandenen
   "--ow-*"-Variablen aus css/app.css (die Frank/H8 parallel auf Sedna-Tokens umstellt) oder
   direkt Sednas eigene, in beiden Modi AA-geprüfte semantische Tokens (--danger-*, --warn-*,
   --go-*, --info-*, --muted, --fg-soft, --border, --border-hover, --bg, --bg-elevated,
   --surface-soft, --on-solid) - keine erfundenen Werte, alle aus Sedna.UI.css nachgeschlagen.
   Wo kein Sedna-Token exakt zur bisherigen Deckkraft passte, wurde "color-mix(in srgb, var(...)
   X%, transparent)" verwendet, um die Abstufung zu erhalten, statt einen neuen Festwert zu
   erfinden. Zwei bewusste Ausnahmen bleiben fest verdrahtet, weil sie NICHT die themefähige
   Seitenoberfläche sind, sondern die immer-dunkle Livebild-/Screenshot-Fläche einer Kachel
   (mit Frank/Korrekturrunde 1 abgestimmt): ".monitor-tile-body" (Hintergrund hinter dem
   Livebild) und ".monitor-tile-overlay" (Verdunklung darüber, z. B. bei Ladezustand/Fehler).
   Beide sind unten an ihrer jeweiligen Regel einzeln kommentiert. */

.monitor-shell {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr);
    min-height: calc(100vh - 9rem);
}

.monitor-clients,
.monitor-board {
    min-height: 0;
}

.monitor-clients {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

/* KI-erstellt (Claude, 28.09.2026, Korrekturrunde 3): Gegenstück zum Wechsel von "panel-card" auf
   Sednas eigenen Baustein "card" in Pages/Home.razor (Befund 2). Sednas ".card" bringt selbst weder
   Innenpolster noch eine Höhenregel mit - dafür ist der Katalog-Baustein ".card-body" gedacht. Damit
   der Kopf (Überschrift/Filter/Knöpfe) stehen bleibt und nur die Baumliste darunter für sich rollt
   (bisheriges Verhalten, siehe ".monitor-client-list" weiter unten), muss ".card-body" hier selbst
   zur Flex-Spalte werden - ohne diese Regel wäre ".monitor-clients" (der äußere Rahmen) zwar noch
   eine Flex-Spalte, aber sein einziges Kind ("card-body") würde diese Eigenschaft nicht an die
   Baumliste weiterreichen. */
.monitor-clients > .card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.monitor-clients-header,
.monitor-board-header {
    align-items: end;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.monitor-clients-header h1,
.monitor-board-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0.2rem 0 0;
}

.monitor-clients-header-compact {
    margin-bottom: 0.75rem;
}

.monitor-copy {
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

/* Auch von Rechnerliste.razor und Einstellungen.razor als allgemeine Beschriftungsklasse
   mitbenutzt (Stand der Bestandsaufnahme vor der Umstellung) - beim Anfassen dieser Klasse in
   Phase B beide Seiten mitprüfen. */
.monitor-client-filter-label {
    color: var(--ow-text-muted);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

.monitor-client-filter {
    margin-bottom: 0.85rem;
}

.monitor-client-actions {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 0.85rem;
}

.monitor-client-actions .btn {
    white-space: nowrap;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
}

.monitor-client-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 0;
    overflow: auto;
    padding-right: 0.15rem;
}

.monitor-client-tree-event,
.monitor-client-tree-machine,
.monitor-client-tree-agents,
.monitor-client-tree-pages {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    /* Absicherung für das Kürzen langer Texte weiter unten: In ineinander
       geschachtelten Flex-Bereichen – und das sind diese Ebenen des Baums –
       weigert sich ein Element von Haus aus, unter die Breite seines Inhalts
       zu schrumpfen. Ohne diese Zeile würde das "..."-Kürzen der Zeilen
       darunter wirkungslos bleiben, weil die Ebene darüber schon zu breit ist. */
    min-width: 0;
}

.monitor-client-tree-event {
    /* Grüner Rahmenakzent, aus dem vorhandenen "--ow-online"-Token gemischt statt als eigener
       Farbcode - rein dekorativ (kein Text/Hintergrund-Kontrastfall), deshalb unbedenklich. */
    border-left: 2px solid color-mix(in srgb, var(--ow-online) 40%, transparent);
    padding-left: 0.5rem;
}

.monitor-client-tree-machine,
.monitor-client-tree-agents,
.monitor-client-tree-pages {
    border-left: 1px solid var(--ow-border);
    margin-left: 0.7rem;
    padding-left: 0.5rem;
}

.monitor-client-tree-row {
    align-items: center;
    background: var(--surface-soft);
    border: 1px solid var(--ow-border);
    border-radius: var(--ow-r-sm);
    color: var(--ow-text);
    display: grid;
    font-size: 0.82rem;
    font-weight: 700;
    gap: 0.4rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    line-height: 1.25;
    min-width: 0;
    padding: 0.32rem 0.4rem;
}

.monitor-client-tree-row-machine {
    /* Etwas blasser als die übergeordnete Zeile ".monitor-client-tree-row" - color-mix
       verdünnt dafür den gleichen Sedna-Token, statt einen eigenen Alpha-Wert zu erfinden. */
    background: color-mix(in srgb, var(--surface-soft) 60%, transparent);
    color: var(--fg-soft);
    font-weight: 650;
    margin-top: 0.1rem;
}

.monitor-client-tree-page {
    color: var(--ow-text-muted);
    font-size: 0.78rem;
    line-height: 1.25;
    overflow: hidden;
    padding: 0.1rem 0 0.1rem 0.2rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================================
   MERKZEILE vom 10.09.2026 – die folgenden Regeln sind derzeit ungenutzt.
   Betroffen ist alles von ".monitor-client-tree-apps" bis einschließlich
   ".monitor-client-tree-app-state-missing".
   Grund: Der Abschnitt im Markup, der diese Klassen benutzt hat (die Liste der
   installierten Programme je Rechner in "Pages/Home.razor"), wurde an diesem
   Tag stillgelegt. Die Regeln bleiben bewusst unverändert stehen – weder
   gelöscht noch auskommentiert –, damit ein Zurückschalten nur das Entfernen
   eines Kommentars im Markup kostet und niemand die Gestaltung neu bauen muss.
   Nicht betroffen: die Detailseite "Pages/AgentDetail.razor". Sie zeigt
   dieselben Informationen, verwendet dafür aber ihre eigenen Klassen
   ("status-pill-*", siehe css/seiten.css) und funktioniert unabhängig weiter.
   ========================================================================= */
.monitor-client-tree-apps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.15rem 0 0 0.65rem;
    max-width: calc(100% - 0.65rem);
    min-width: 0;
}

.monitor-client-tree-app,
.monitor-client-tree-app-empty {
    align-items: center;
    color: var(--ow-text-muted);
    display: flex;
    font-size: 0.72rem;
    gap: 0.45rem;
    justify-content: space-between;
    line-height: 1.25;
    min-width: 0;
}

.monitor-client-tree-app {
    background: var(--surface-soft);
    border: 1px solid var(--ow-border);
    border-radius: var(--ow-r-sm);
    max-width: 18rem;
    padding: 0.15rem 0.25rem 0.15rem 0.4rem;
}

.monitor-client-tree-app-name {
    flex: 1 1 auto;
    max-width: 11rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitor-client-tree-app-state {
    border-radius: var(--ow-r-pill);
    flex: 0 0 auto;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.08rem 0.4rem;
}

.monitor-client-tree-app-state-running {
    background: var(--go-bg);
    color: var(--go-fg);
}

.monitor-client-tree-app-state-installed {
    background: var(--warn-bg);
    color: var(--warn-fg);
}

.monitor-client-tree-app-state-missing {
    background: var(--danger-bg);
    color: var(--danger-fg);
}

.monitor-client-tree-text {
    align-items: baseline;
    display: flex;
    gap: 0.25rem;
    min-width: 0;
    overflow: hidden;
}

.monitor-client-tree-title,
.monitor-client-tree-detail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitor-client-tree-title {
    color: var(--ow-text);
}

.monitor-client-tree-detail {
    color: var(--ow-text-muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.monitor-client-tree-icon {
    align-items: center;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--ow-text-muted);
    display: inline-flex;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    justify-content: center;
    line-height: 1;
    min-width: 1.35rem;
    padding: 0.12rem 0.18rem;
}

.monitor-client-tree-count {
    background: var(--surface-soft);
    border-radius: var(--ow-r-pill);
    color: var(--ow-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.08rem 0.42rem;
    white-space: nowrap;
}

.monitor-client-item {
    background: var(--ow-surface-2);
    border: 1px solid var(--ow-border-strong);
    border-radius: var(--ow-r-md);
    color: var(--ow-text);
    padding: 0.7rem 0.8rem;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
}

.monitor-client-item:hover,
.monitor-client-item:focus {
    background: var(--ow-surface-3);
    border-color: var(--border-hover);
}

.monitor-client-item-active {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ow-accent) 12%, transparent),
        color-mix(in srgb, var(--ow-accent) 5%, transparent));
    border-color: var(--ow-accent-ring);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ow-accent) 25%, transparent);
}

.monitor-client-line {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    justify-content: space-between;
}

.monitor-client-name {
    /* Der Name steht zusammen mit dem grünen Statuspunkt in einer Zeile
       (.monitor-client-line). Ohne die folgenden vier Zeilen würde ein langer
       Name nicht selbst schrumpfen, sondern den Punkt nach rechts aus der
       Spalte hinausdrücken – der Punkt wäre dann schlicht nicht mehr zu sehen.
       flex: 1 1 auto = der Name füllt den freien Platz und gibt ihn auch wieder
       her; min-width: 0 hebt die eingebaute Weigerung auf, unter die Textbreite
       zu schrumpfen; overflow/text-overflow kürzen ihn dann mit "...". */
    flex: 1 1 auto;
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitor-client-dot {
    /* box-sizing: border-box, damit der Ring bei "offline" (siehe unten) den Rahmen INNEN
       abzieht und der Punkt optisch gleich groß bleibt wie der gefüllte "online"-Punkt. */
    border-radius: var(--ow-r-pill);
    box-sizing: border-box;
    display: inline-block;
    flex: 0 0 auto;
    height: 0.7rem;
    position: relative;
    width: 0.7rem;
}

.monitor-client-dot-online {
    background: var(--ow-online);
    box-shadow: 0 0 0 3px var(--ow-online-soft);
}

/* KI-erstellt (Claude, 28.09.2026, Korrekturrunde 1): "offline" unterscheidet sich jetzt nicht
   mehr nur über die Farbe, sondern auch über die Form - ein hohler Ring statt eines gefüllten
   Punkts. So bleibt der Zustand auch bei Farbfehlsichtigkeit oder in einem Schwarzweiß-
   Screenshot erkennbar (Design-Vorgabe: Status nie nur Farbe). */
.monitor-client-dot-offline {
    background: transparent;
    border: 2px solid var(--ow-offline);
}

.monitor-client-id,
.monitor-client-meta {
    color: var(--ow-text-muted);
    font-size: 0.78rem;
    margin-top: 0.22rem;
}

/* NEU (Claude, 28.09.2026, Phase B): Ergänzung zu Sednas ".alert" für die Live-Verbindungs-
   Fehlermeldung mit "Erneut versuchen"-Knopf (Home.razor). Sednas ".alert" ist selbst bereits
   eine Flex-Zeile mit Abstand (siehe Sedna.UI.css); hier kommt nur das Umbrechen hinzu, damit
   Meldungstext und Knopf auf schmalen Bildschirmen (Handy) nicht aus der Zeile laufen, sondern
   der Knopf in eine eigene Zeile rutscht. Der Knopf selbst wird über die vorhandene Sedna-
   Klasse "sedna-push" an den rechten Rand geschoben (siehe Bauanleitung/Katalog), dafür ist
   hier nichts weiter nötig. */
.monitor-alert-actions {
    flex-wrap: wrap;
}

.monitor-action-status {
    border: 1px solid color-mix(in srgb, var(--go-solid) 35%, transparent);
    border-radius: var(--ow-r-md);
    font-size: 0.88rem;
    margin: -0.2rem 0 0.75rem;
    padding: 0.65rem 0.8rem;
}

.monitor-action-status-ok {
    background: var(--ow-online-soft);
    color: var(--go-fg);
}

.monitor-action-status-error {
    background: var(--danger-bg);
    border-color: color-mix(in srgb, var(--danger-solid) 38%, transparent);
    color: var(--danger-fg);
}

.monitor-board {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.monitor-board-scroll {
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
    overscroll-behavior: contain;
    overflow: auto;
}

.monitor-canvas {
    background-color: var(--bg);
    background-image:
        linear-gradient(color-mix(in srgb, var(--ow-accent) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--ow-accent) 5%, transparent) 1px, transparent 1px);
    background-size: 20px 20px;
    border: 1px solid var(--ow-border);
    border-radius: var(--ow-r-lg);
    min-height: 1100px;
    position: relative;
    width: 100%;
}

.monitor-empty-state {
    left: 1rem;
    max-width: 26rem;
    position: absolute;
    top: 1rem;
}

.monitor-tile {
    background: linear-gradient(180deg, var(--ow-surface), var(--ow-surface-2));
    border: 1px solid var(--ow-border-strong);
    border-radius: var(--ow-r-lg);
    box-sizing: border-box;
    box-shadow: var(--ow-shadow-md);
    cursor: move;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    touch-action: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    user-select: none;
}

.monitor-tile:hover {
    border-color: var(--border-hover);
}

.monitor-tile-selected {
    border-color: var(--ow-accent);
    box-shadow: inset 0 0 0 1px var(--ow-accent), var(--ow-shadow-lg);
}

.monitor-tile-offline,
.monitor-tile-offline.monitor-tile-selected {
    border-color: var(--danger-solid);
    box-shadow: inset 0 0 0 1px var(--danger-solid), 0 0 0 1px color-mix(in srgb, var(--danger-solid) 32%, transparent), var(--ow-shadow-lg);
}

/* Feste Höhe statt inhaltsabhängiger Höhe, damit C# (Home.razor) die Kachelhöhe aus der Breite
   berechnen kann - siehe Kopfkommentar der "--ow-tile-*"-Variablen in css/app.css. */
.monitor-tile-header {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    gap: 0.75rem;
    height: var(--ow-tile-header-h);
    justify-content: space-between;
    padding: 0 4.5rem 0 var(--ow-tile-inset);
    position: relative;
}

.monitor-tile-header > div:first-child {
    min-width: 0;
    overflow: hidden;
}

.monitor-tile-header-actions {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.3rem;
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
}

.monitor-tile-header-actions .status-pill {
    font-size: 0.68rem;
    padding: 0.24rem 0.5rem;
}

.monitor-tile-title {
    font-size: 0.74rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitor-tile-subtitle {
    align-items: center;
    color: var(--ow-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.72rem;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.monitor-tile-close {
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--ow-text-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 0.2rem 0.35rem;
    transition: background 0.12s ease, color 0.12s ease;
}

.monitor-tile-menu-trigger {
    background: var(--surface-soft);
    border: 1px solid var(--ow-border-strong);
    border-radius: 7px;
    color: var(--fg-soft);
    font-size: 0.72rem;
    line-height: 1;
    padding: 0.35rem 0.5rem;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.monitor-tile-touch-drag {
    display: none;
}

.monitor-tile-menu-trigger:hover,
.monitor-tile-menu-trigger:focus {
    background: var(--ow-accent-soft);
    border-color: var(--ow-accent-ring);
    color: var(--ow-text);
}

.monitor-tile-menu-trigger:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.monitor-tile-close:hover,
.monitor-tile-close:focus {
    background: var(--danger-bg-hover);
    color: var(--danger-fg);
}

.monitor-tile-body {
    /* Bewusst fester, sehr dunkler Wert statt Theme-Token (mit Frank/Korrekturrunde 1
       abgestimmt): Das ist die Fläche hinter dem Live-Screenshot vom fremden Rechner - sie
       ist immer dunkel, unabhängig vom Hell/Dunkel-Modus dieser App, weil sonst ein noch
       ladendes/fehlerhaftes Bild in einem hellen Rahmen "aufblitzen" würde. */
    background: #05070a;
    border: var(--ow-tile-body-border) solid var(--ow-border);
    border-radius: var(--ow-r-md);
    box-sizing: border-box;
    flex: 1 1 auto;
    margin: 0 var(--ow-tile-inset) var(--ow-tile-inset);
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.monitor-tile-image {
    display: block;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    width: 100%;
}

.monitor-tile-overlay {
    /* Ebenfalls bewusst fest (siehe Begründung bei ".monitor-tile-body" direkt darüber): Diese
       Verdunklung liegt über dem immer-dunklen Livebild, nicht über der Seitenfläche - Text
       darauf bleibt deshalb über "--on-solid" theme-unabhängig hell statt über "--fg" (das im
       hellen Modus dunkel würde und auf diesem dunklen Grund unlesbar wäre). */
    align-items: center;
    background: rgba(9, 12, 17, 0.86);
    color: var(--on-solid);
    display: flex;
    font-size: 0.95rem;
    font-weight: 600;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: absolute;
    text-align: center;
}

.monitor-tile-stamp {
    /* Sitzt wie ".monitor-tile-overlay" direkt auf dem immer-dunklen Livebild, nicht auf der
       Seitenfläche - Hintergrund bleibt deshalb ein einfacher heller Schleier, Text bewusst
       über "--on-solid" theme-unabhängig hell (Begründung siehe ".monitor-tile-overlay"). */
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--ow-r-pill);
    color: var(--on-solid);
    font-size: 0.72rem;
    padding: 0.12rem 0.48rem;
}

.monitor-tile-footer {
    align-items: center;
    box-sizing: border-box;
    color: var(--fg-soft);
    display: flex;
    flex: 0 0 auto;
    font-size: 0.76rem;
    gap: 0.5rem;
    height: var(--ow-tile-footer-h);
    line-height: 1.35;
    min-width: 0;
    padding: 0 var(--ow-tile-inset);
}

.monitor-tile-footer-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitor-tile-footer-offline {
    /* --danger-solid + --on-solid: laut Sedna.UI.css bewusst so kombiniertes Tokenpaar,
       in beiden Modi mit 4,61:1 gegen Weiß AA-geprüft (Kommentar dort bei "--danger-solid"). */
    background: var(--danger-solid);
    color: var(--on-solid);
}

.monitor-tile-resize {
    background: color-mix(in srgb, var(--ow-accent) 85%, transparent);
    border: 1px solid color-mix(in srgb, var(--on-solid) 85%, transparent);
    border-radius: 5px;
    cursor: nwse-resize;
    flex: 0 0 auto;
    height: 0.95rem;
    position: static;
    touch-action: none;
    transition: background 0.12s ease, transform 0.08s ease;
    width: 0.95rem;
}

.monitor-tile-resize:hover {
    background: var(--ow-accent-2);
}

/* Die acht Anfasser zum Größenziehen (seit Version 1.4.0). Liegen vollständig innerhalb der
   Kachel, weil diese "overflow: hidden" trägt. */
.monitor-tile-handle {
    display: none;
    position: absolute;
    touch-action: none;
    z-index: 3;
}

/* Nur am Zeigegerät mit Maus. Auf Fingergeräten bleibt es beim großen
   Fuß-Griff, der dort eigens vergrößert und beschriftet ist. */
@media (hover: hover) and (pointer: fine) {
    .monitor-tile-handle {
        display: block;
    }
}

.monitor-tile-handle-n,
.monitor-tile-handle-s {
    cursor: ns-resize;
    height: 8px;
    left: 14px;
    right: 14px;
}

.monitor-tile-handle-w,
.monitor-tile-handle-e {
    bottom: 14px;
    cursor: ew-resize;
    top: 14px;
    width: 8px;
}

.monitor-tile-handle-nw,
.monitor-tile-handle-ne,
.monitor-tile-handle-sw,
.monitor-tile-handle-se {
    height: 14px;
    width: 14px;
}

.monitor-tile-handle-n { top: 0; }
.monitor-tile-handle-s { bottom: 0; }
.monitor-tile-handle-w { left: 0; }
.monitor-tile-handle-e { right: 0; }

.monitor-tile-handle-nw {
    cursor: nwse-resize;
    left: 0;
    top: 0;
}

.monitor-tile-handle-se {
    bottom: 0;
    cursor: nwse-resize;
    right: 0;
}

.monitor-tile-handle-ne {
    cursor: nesw-resize;
    right: 0;
    top: 0;
}

.monitor-tile-handle-sw {
    bottom: 0;
    cursor: nesw-resize;
    left: 0;
}

.monitor-context-backdrop {
    background: transparent;
    border: 0;
    inset: 0;
    padding: 0;
    position: fixed;
    z-index: 1990;
}

.monitor-context-menu,
.monitor-context-submenu {
    /* Fast deckende, leicht durchsichtige Variante der themefähigen "erhabenen" Fläche - der
       Rest-Durchblick trägt den "backdrop-filter: blur" darunter, der sonst wirkungslos wäre. */
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--ow-border-strong);
    border-radius: var(--ow-r-md);
    box-shadow: var(--ow-shadow-lg);
    color: var(--ow-text);
    min-width: 13rem;
    padding: 0.25rem;
}

.monitor-context-menu {
    position: fixed;
    z-index: 2000;
}

.monitor-context-submenu-host {
    position: relative;
}

.monitor-context-submenu {
    display: none;
    left: calc(100% + 0.35rem);
    position: absolute;
    top: -0.35rem;
}

.monitor-context-submenu-host:hover > .monitor-context-submenu,
.monitor-context-submenu-host:focus-within > .monitor-context-submenu {
    display: block;
}

.monitor-context-submenu-tall {
    min-width: 7.5rem;
}

.monitor-context-submenu-tall .monitor-context-item {
    white-space: nowrap;
}

.monitor-context-item {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ow-r-sm);
    color: inherit;
    display: flex;
    gap: 0.35rem;
    justify-content: flex-start;
    line-height: 1.2;
    min-height: 1.7rem;
    padding: 0.18rem 0.6rem;
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease;
    width: 100%;
    white-space: nowrap;
}

.monitor-context-item:hover,
.monitor-context-item:focus,
.monitor-context-item-active {
    background: var(--ow-accent-soft);
    border-color: var(--ow-accent-ring);
    outline: 0;
}

.monitor-context-item:disabled {
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.62;
}

.monitor-context-item-with-arrow {
    justify-content: space-between;
}

.monitor-context-check {
    display: inline-block;
    min-width: 1rem;
}

.monitor-context-separator {
    background: var(--ow-border-strong);
    height: 1px;
    margin: 0.35rem 0.45rem;
}

/* ===== Verengte Bildschirme (unterhalb 1199.98px) =====
   Die Menüspalte liegt in der neuen, Sedna-basierten Kopfzeile/Sidebar nicht mehr über dem
   Board - dafür ist jetzt Sednas eigene Sidebar/Bottombar-Mechanik zuständig (siehe
   Layout/MainLayout.razor). Übrig bleiben hier nur die reinen Kachel-/Arbeitsflächen-Anpassungen. */
@media (max-width: 1199.98px) {
    .monitor-shell {
        grid-template-columns: 1fr;
    }

    .monitor-canvas {
        min-height: min(900px, calc(100dvh - 9rem));
        min-width: 0;
        width: 100%;
    }

    .monitor-context-submenu {
        left: auto;
        right: calc(100% + 0.35rem);
    }

    /* Größter Einzelgewinn an Breite: Diese drei Ebenen des Baums sind
       ineinander verschachtelt, ihre Einrückung wirkt also dreifach
       übereinander. Jeder eingesparte Millimeter zählt hier dreimal. */
    .monitor-client-tree-machine,
    .monitor-client-tree-agents,
    .monitor-client-tree-pages {
        margin-left: 0.45rem;
        padding-left: 0.35rem;
    }

    .monitor-client-tree-row {
        font-size: 0.78rem;
        padding: 0.28rem 0.35rem;
    }

    .monitor-client-tree-icon {
        font-size: 0.54rem;
        min-width: 1.2rem;
    }

    .monitor-client-tree-page {
        font-size: 0.74rem;
    }

    .monitor-client-item {
        padding: 0.55rem 0.6rem;
    }

    .monitor-client-name {
        font-size: 0.85rem;
    }

    .monitor-clients-header h1 {
        font-size: 1.05rem;
    }
}

@media (max-width: 767.98px) {
    .monitor-clients-header,
    .monitor-board-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .monitor-board-header > div {
        width: 100%;
    }

    .monitor-client-actions {
        grid-template-columns: 1fr;
    }

    .monitor-client-actions .btn {
        min-height: 2.5rem;
    }

    .monitor-board-scroll {
        border-radius: var(--ow-r-lg);
        max-width: 100%;
        width: 100%;
    }

    .monitor-canvas {
        min-width: 0;
    }

    .monitor-board {
        padding: 0.75rem;
    }

    .monitor-board-scroll {
        min-height: 24rem;
    }
}

/* =====================================================================
   Fingerbedienung: Gegengewicht zur Kompaktierung oben - alles, was mit dem
   Finger getroffen wird, darf nicht unter das übliche Fingermaß von rund
   2,75rem (~44 Punkte) rutschen.
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
    .monitor-tile {
        touch-action: pan-y;
    }

    .monitor-client-item {
        min-height: 2.75rem;
    }

    .monitor-tile-header-actions {
        display: inline-flex;
        gap: 0.45rem;
    }

    .monitor-tile-header-actions .status-pill {
        align-self: center;
        justify-self: start;
    }

    .monitor-tile-touch-drag {
        background: var(--ow-accent-soft);
        border: 1px solid var(--ow-accent-ring);
        border-radius: var(--ow-r-md);
        color: var(--ow-accent-2);
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: 0.85rem;
        font-weight: 700;
        min-height: 2.75rem;
        padding: 0.65rem 0.8rem;
        touch-action: none;
    }

    .monitor-tile-menu-trigger,
    .monitor-tile-close {
        min-height: 2.75rem;
        min-width: 2.75rem;
    }

    .monitor-tile-resize {
        border-radius: var(--ow-r-md);
        height: 1.7rem;
        touch-action: none;
        width: 2.8rem;
    }

    .monitor-tile-resize::after {
        /* Wie ".btn-primary" in Sedna.UI.css: heller Text auf der akzentfarbenen Fläche
           über das theme-unabhängige "--on-solid", nicht über das seitenflächenabhängige
           "--fg". */
        color: var(--on-solid);
        content: "Größe";
        display: grid;
        font-size: 0.6rem;
        font-weight: 800;
        height: 100%;
        place-items: center;
        width: 100%;
    }
}