/* Ensure dialogs, tooltips, and popovers appear above FloatingPanel (z-index 2000).
   MudBlazor 9 computes overlay z-index as calc(--mud-zindex-dialog + 1) and popover
   as calc(--mud-zindex-popover + 1). Do NOT add !important overrides on .mud-overlay
   or .mud-dialog-container — they fight MudBlazor's internal stacking context. */
:root {
    --mud-zindex-dialog:  2100;
    --mud-zindex-popover: 2500;
    --mud-zindex-tooltip: 2500;
}

/* Belt-and-suspenders: MudBlazor 9 may overwrite popover/tooltip z-index via JS
   inline styles; !important on the class rule overrides non-!important inline styles. */
.mud-popover {
    z-index: 2500 !important;
}
.mud-tooltip {
    z-index: 2500 !important;
}

/* MudMainContent handles its own internal scrolling.
   Without this a tiny overflow (~8px from pa-2 bottom padding) shows a spurious scrollbar. */
html, body {
    height: 100%;
    overflow: hidden;
}

/* Move nested MudMenu submenu expand arrow to the left of the label */
.mud-list-item-icon {
    order: -1;
    margin-left: 0 !important;
    margin-right: 8px;
}

/* Allow the app layout to shrink below component defaults on narrow viewports */
html, body, .mud-layout, .mud-main-content, main, .page, .sidebar, .dashboard-canvas {
    min-width: 0 !important;
}

/* Make dialogs adapt to narrow viewports */
.mud-dialog, .mud-dialog-container, .mud-dialog-paper {
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
}



/* ── Port style classes ──────────────────────────────────────────────
   .port-invisible: link attaches correctly but port dot is hidden in view mode.
   .port-fine:      a small tick/dot instead of the default filled circle.
   In edit mode (dashboard-edit-mode), invisible ports are shown faintly
   so users can still drag from them.

   The default blazor-diagrams CSS uses 20px ports with margin:-10px.
   PSTT uses 10px ports, so we override both size and margin here.
   port-fine uses 5px; port-invisible keeps the same size as dot (opacity only). */

.default-node .diagram-port {
    width: 10px;
    height: 10px;
    margin: -5px;
}

.default-node .diagram-port.port-fine {
    width: 5px;
    height: 5px;
    margin: -2.5px;
}

.diagram-port.port-invisible {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.diagram-port.port-fine {
    border-radius: 2px;
}

/* Edit-mode: show invisible ports as translucent; full opacity on hover */
.dashboard-edit-mode .diagram-port.port-invisible {
    opacity: 0.3;
}

.dashboard-edit-mode .diagram-port.port-invisible:hover {
    opacity: 1;
}

/* Primary reference node in multi-selection: orange outer ring to distinguish
   it from other selected nodes (which have the default blue selection border). */
.default-node.selected.primary-node {
    outline: 2px solid var(--mud-palette-warning);
    outline-offset: 3px;
}