TSUMUGI 1.0.1__py3-none-any.whl

TSUMUGI/web/app/css/app.css

@@ -0,0 +1,1129 @@
+/* ======================================================== */
+/* Main */
+/* ======================================================== */
+
+html,
+body {
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    max-width: 1500px;
+    font-size: 18px;
+    font-family: "Lato", "Arial", "Helvetica", sans-serif;
+    color: #333;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+}
+
+/* Inherit font settings for form elements */
+button,
+input,
+select {
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+}
+
+a {
+    color: #ff8c00;
+    text-decoration: none;
+}
+
+.main-container {
+    background-color: white;
+    width: 90%;
+    max-width: 1500px;
+    box-sizing: border-box;
+    padding-bottom: 50px;
+    margin: 30px auto;
+    border-radius: 20px;
+}
+
+.header-container {
+    text-align: center;
+    box-sizing: border-box;
+}
+
+.body-container {
+    height: calc(100% - 60px);
+    max-height: 800px;
+    box-sizing: border-box;
+    align-items: stretch;
+    display: flex;
+    position: relative;
+}
+
+/* ======================================================== */
+/* control-panel-container */
+/* ======================================================== */
+/* Left panel */
+.left-control-panel-container {
+    flex: 1;
+    min-width: 120px;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    background-color: white;
+}
+
+/* Right panel */
+.right-control-panel-container {
+    flex: 1;
+    min-width: 120px;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    background-color: white;
+}
+
+/* Panel toggle buttons */
+.panel-toggle-button {
+    position: absolute;
+    top: -28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: 2px solid #aaa;
+    background-color: #fff;
+    color: #333;
+    cursor: pointer;
+    z-index: 1200;
+    transition:
+        background-color 0.2s ease,
+        color 0.2s ease,
+        transform 0.2s ease;
+}
+
+.panel-toggle-button:hover {
+    background-color: #ffeddc;
+    color: #d65f00;
+}
+
+.panel-toggle-button i {
+    pointer-events: none;
+    transition: transform 0.2s ease;
+}
+
+.panel-toggle-button.collapsed i {
+    transform: rotate(180deg);
+}
+
+.left-panel-toggle {
+    left: 10px;
+}
+
+.right-panel-toggle {
+    right: 10px;
+}
+
+.body-container.left-panel-hidden .left-control-panel-container {
+    display: none;
+}
+
+.body-container.right-panel-hidden .right-control-panel-container {
+    display: none;
+}
+
+.panel-section {
+    margin: 0 auto;
+    background-color: #fff;
+    padding-bottom: 10px;
+    border-radius: 10px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.panel-section:first-child {
+    border-top: none;
+    margin-top: 0;
+}
+
+.right-control-panel-container .boxed-section {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.panel-title {
+    text-align: center;
+    margin-bottom: 15px;
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+/* ======================================================== */
+/* cy-container */
+/* ======================================================== */
+
+.cy-container {
+    flex: 3;
+    padding: 10px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid #aaa;
+    border-radius: 10px;
+    min-width: 0;
+    /* allow shrinking back after expanding */
+    position: relative;
+}
+
+.cy {
+    width: 100%;
+    flex: 1;
+    min-height: 0;
+    position: relative;
+}
+
+.subnetwork-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10;
+}
+
+.subnetwork-frame {
+    position: absolute;
+    border: 2px dashed rgba(60, 60, 60, 0.55);
+    border-radius: 14px;
+    background: rgba(255, 255, 255, 0.03);
+    box-shadow:
+        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
+        0 4px 12px rgba(0, 0, 0, 0.08);
+    pointer-events: none;
+    cursor: default;
+}
+
+.subnetwork-frame__label {
+    position: absolute;
+    top: -18px;
+    left: 0;
+    padding: 2px 8px;
+    border-radius: 8px;
+    background: rgba(0, 0, 0, 0.65);
+    color: #fff;
+    font-size: 12px;
+    pointer-events: auto;
+    cursor: move;
+}
+
+/* ======================================================== */
+/* slider-container */
+/* ======================================================== */
+
+.slider-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 15px;
+}
+
+.control-label {
+    margin-right: 10px;
+    justify-content: left;
+}
+
+.slider-element {
+    margin: 20px auto 10px auto;
+    width: 80%;
+}
+
+.slider-container select.exporter {
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    padding: 8px 12px;
+}
+
+.slider-value {
+    display: inline-block;
+    width: 25px;
+    text-align: center;
+}
+
+.label-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: nowrap;
+    text-align: center;
+}
+
+.input-row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 6px;
+}
+
+.numeric-inputs {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.range-input {
+    width: 64px;
+    padding: 4px 6px;
+    font-size: 12px;
+    text-align: center;
+    border: 1px solid #d0d0d0;
+    border-radius: 6px;
+    background-color: #fff;
+}
+
+.range-separator {
+    font-size: 12px;
+    color: #666;
+}
+
+/* SVG */
+.phenotype-scale-container {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 3fr 1fr;
+}
+
+.phenotype-scale-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    grid-column: 2;
+    width: 90%;
+    margin: 0 auto;
+}
+
+.color-scale-container,
+.edge-scale-container {
+    width: 50%;
+    height: auto;
+    text-align: center;
+    margin: 10px auto 0;
+}
+
+.phenotype-scale-wrapper .color-scale-container,
+.phenotype-scale-wrapper .edge-scale-container {
+    width: 50%;
+    margin: 10px 0 0;
+}
+
+.color-scale-container svg,
+.edge-scale-container svg {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+.scale-label {
+    margin-top: 5px;
+}
+
+/* ======================================================== */
+/* search-container */
+/* ======================================================== */
+
+/* Search container styling */
+.search-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin: 8px 0;
+    width: 100%;
+}
+
+.search-container i {
+    position: absolute;
+    left: 10px;
+    color: #999;
+    z-index: 1;
+}
+
+/* Input style */
+#gene-search,
+#phenotype-search {
+    width: 100%;
+    padding: 10px 10px 10px 35px;
+    font-size: 14px;
+    border: 2px solid #ccc;
+    border-radius: 5px;
+    outline: none;
+    box-sizing: border-box;
+}
+
+/* Input focus */
+#gene-search:focus,
+#phenotype-search:focus {
+    border-color: #999;
+}
+
+/* Search button */
+#search-button {
+    margin-top: 8px;
+    padding: 6px 12px;
+    font-size: 14px;
+    border: none;
+    border-radius: 6px;
+    background-color: #ccc;
+    cursor: pointer;
+}
+
+/* ======================================================== */
+/* Selected Phenotype Tags */
+/* ======================================================== */
+
+.selected-phenotypes {
+    margin-top: 10px;
+    max-width: 100%;
+}
+
+.selected-phenotype-tag {
+    display: inline-flex;
+    align-items: center;
+    background-color: white;
+    border: 1px solid #ccc;
+    border-radius: 16px;
+    padding: 4px 8px;
+    margin: 2px;
+    font-size: 12px;
+    color: #555;
+}
+
+.selected-phenotype-tag .phenotype-text {
+    margin-right: 6px;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.selected-phenotype-tag .remove-btn {
+    background: none;
+    border: none;
+    color: #666;
+    font-size: 14px;
+    font-weight: bold;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+.selected-phenotype-tag .remove-btn:hover {
+    background-color: #666;
+    color: white;
+}
+
+/* Suggestions list */
+ul.suggestions {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    list-style: none;
+    margin: 4px 0 0 0;
+    padding: 0;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    max-height: 30vh;
+    overflow-y: auto;
+    background-color: white;
+    z-index: 1000;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Suggestion items */
+ul.suggestions li {
+    padding: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+ul.suggestions li:hover {
+    background-color: #ffebd8;
+}
+
+/* ======================================================== */
+/* boxed-section */
+/* ======================================================== */
+
+.boxed-section {
+    border: 2px solid #aaa;
+    border-radius: 10px;
+    padding: 10px;
+    margin-bottom: 20px;
+    position: relative;
+    background-color: #fff;
+}
+
+/* Title-style label overlay */
+.boxed-section>span {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    padding: 2px 10px;
+    white-space: nowrap;
+    max-width: 90%;
+    text-align: center;
+    font-size: clamp(12px, 1.3vw, 16px);
+    line-height: 1.1;
+}
+
+.boxed-section form {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.boxed-section form.two-column-options {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    column-gap: 16px;
+    row-gap: 8px;
+    align-items: start;
+    padding-left: 8px;
+}
+
+.boxed-section form.two-column-options .option-column {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: flex-start;
+}
+
+.boxed-section.align-center {
+    /* Keep the content left-aligned */
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    text-align: left;
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 20px;
+}
+
+/* Rounded checkbox styling */
+.round-checkbox {
+    position: relative;
+    margin: 8px 0;
+}
+
+.round-checkbox input[type="checkbox"] {
+    display: none;
+}
+
+.round-checkbox input[type="checkbox"]+label {
+    position: relative;
+    padding-left: 35px;
+    line-height: 24px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.round-checkbox input[type="checkbox"]+label:before {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    content: "";
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #fff;
+    border: 2px solid #aaa;
+    box-sizing: border-box;
+}
+
+/* Highlight in yellow only when checked */
+.round-checkbox input[type="checkbox"]:checked+label:before {
+    background-color: #ff8c00;
+}
+
+.round-checkbox input[type="checkbox"]:checked+label:after {
+    display: block;
+    position: absolute;
+    content: "";
+    width: 12px;
+    height: 5px;
+    border-bottom: 3px solid #333;
+    border-left: 3px solid #333;
+    transform: rotate(-45deg);
+    top: 8px;
+    left: 6px;
+}
+
+/* ======================================================== */
+/* Exporter */
+/* ======================================================== */
+.exporter {
+    border: 2px solid #aaa;
+    background-color: #fff;
+    border-radius: 10px;
+    padding: 12px 20px;
+    margin-top: 10px;
+    cursor: pointer;
+}
+
+.exporter-group {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    margin-top: 10px;
+}
+
+.mobile-exporter {
+    display: none;
+}
+
+/* ======================================================== */
+/* Custom styles for noUiSlider */
+/* ======================================================== */
+
+.noUi-handle {
+    border-radius: 20%;
+    box-shadow: none;
+    outline: none;
+    border: 3px solid #888;
+}
+
+.noUi-horizontal {
+    height: 10px;
+}
+
+.noUi-connect {
+    background-color: #aaa;
+}
+
+/* ======================================================== */
+/* Resources Section */
+/* ======================================================== */
+
+.resources-container {
+    max-width: 800px;
+    margin: 30px auto 40px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px;
+    justify-content: center;
+}
+
+.resource-section {
+    flex: 1;
+    min-width: 280px;
+    text-align: center;
+}
+
+.resource-section h3 {
+    margin-bottom: 15px;
+    font-size: 1.1em;
+    color: #555;
+    font-weight: normal;
+}
+
+.resource-buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    justify-content: center;
+}
+
+.resource-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    color: #555;
+    padding: 10px 16px;
+    border: 2px solid #ccc;
+    border-radius: 10px;
+    text-decoration: none;
+    font-size: 0.95em;
+    transition: all 0.2s ease;
+}
+
+.resource-btn:hover {
+    color: #333;
+    border-color: #ff7800;
+    background-color: rgba(255, 120, 0, 0.05);
+}
+
+.resource-btn i {
+    margin-right: 6px;
+    font-size: 0.9em;
+}
+
+/* ======================================================== */
+/* Footer styling */
+/* ======================================================== */
+
+footer {
+    margin: 20px 0 10px;
+    padding: 20px;
+    color: #666;
+    font-size: 0.9em;
+    text-align: center;
+}
+
+footer p {
+    margin: 5px 0 0;
+}
+
+footer i {
+    margin-right: 8px;
+}
+
+footer a {
+    color: #666;
+    font-size: 1em;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+footer a:hover {
+    text-decoration: underline;
+}
+
+/* ======================================================== */
+/* Mobile-friendly design */
+/* ======================================================== */
+/* Hide the icon by default */
+button.menu-toggle-icon {
+    display: none;
+    background-color: transparent;
+    border: none;
+}
+
+#close-panel {
+    display: none;
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    font-size: 24px;
+    border: none;
+    background: none;
+    color: #333;
+    cursor: pointer;
+    z-index: 2000;
+}
+
+@media (max-width: 600px) {
+    h1 {
+        font-size: 1em;
+        margin: 0 auto;
+        text-align: center;
+        padding-left: 40px;
+        max-width: 90%;
+    }
+
+    #close-panel.active {
+        display: block;
+    }
+
+    .menu-toggle {
+        position: absolute;
+        left: 20px;
+        top: 20px;
+    }
+
+    button.menu-toggle-icon,
+    .close-button {
+        display: block;
+        font-size: 20px;
+        cursor: pointer;
+        position: absolute;
+        left: 20px;
+        top: 20px;
+        z-index: 2000;
+    }
+
+    button.menu-toggle-icon.hidden {
+        display: none;
+    }
+
+    .close-button.active {
+        display: block;
+        z-index: 2000;
+    }
+
+    .body-container {
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* Consolidated styling for panel containers */
+    .left-control-panel-container {
+        position: fixed;
+        top: 0;
+        left: -100%;
+        height: 100%;
+        width: 80%;
+        max-width: 300px;
+        background-color: #fff;
+        z-index: 999;
+        overflow-y: auto;
+        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
+        padding: 80px 10px 20px 10px;
+        transition: left 0.3s ease;
+    }
+
+    /* Move the right panel inside the left panel */
+    .right-control-panel-container {
+        position: static;
+        width: 100%;
+        padding: 10px;
+        box-shadow: none;
+        border-top: 2px solid #aaa;
+        margin-top: 20px;
+    }
+
+    .left-control-panel-container.active {
+        left: 0;
+    }
+
+    /* Keep the right panel visible */
+    .body-container {
+        flex-direction: column;
+    }
+
+    .cy-container {
+        margin: 20px 0;
+        width: 90%;
+        height: 400px;
+        /* Fixed height so Cytoscape can initialize properly */
+        min-height: 400px;
+        /* Also set the minimum height */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .phenotype-scale-container {
+        width: 90%;
+        margin: 0 auto;
+        display: flex;
+        justify-content: center;
+    }
+
+    .phenotype-scale-wrapper {
+        width: 90%;
+        gap: 12px;
+    }
+
+    .cy {
+        width: 100%;
+        flex: 1;
+        min-height: 0;
+    }
+
+    .resources-container {
+        flex-direction: column;
+        gap: 20px;
+        margin-bottom: 30px;
+    }
+
+    .resource-section {
+        min-width: auto;
+    }
+
+    .resource-buttons {
+        flex-direction: column;
+    }
+
+    .mobile-exporter {
+        display: flex;
+        gap: 10px;
+        justify-content: center;
+        align-items: center;
+        margin: 12px 0;
+        flex-wrap: wrap;
+    }
+
+    .panel-toggle-button {
+        display: none;
+    }
+}
+
+/* ======================================================== */
+/* Cytoscape Tooltip Styles */
+/* ======================================================== */
+.cy-tooltip {
+    position: absolute;
+    --cy-tooltip-phenotypes-max: 120px;
+    --cy-tooltip-diseases-max: 90px;
+    --cy-tooltip-modules-max: 160px;
+    --cy-tooltip-height: 220px;
+    padding: 10px 10px 18px 14px;
+    min-width: 220px;
+    min-height: 140px;
+    box-sizing: border-box;
+    overflow: hidden;
+    overscroll-behavior: contain;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    background: #fff;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    cursor: move;
+    user-select: text;
+}
+
+.cy-tooltip__section {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding-right: 6px;
+    /* leave space for scrollbar */
+}
+
+.cy-tooltip__section--phenotypes {
+    max-height: var(--cy-tooltip-phenotypes-max);
+}
+
+.cy-tooltip__section--diseases {
+    max-height: var(--cy-tooltip-diseases-max);
+}
+
+.cy-tooltip__section--modules {
+    max-height: var(--cy-tooltip-modules-max);
+}
+
+.cy-tooltip__section-title {
+    margin-bottom: 4px;
+    line-height: 1.3;
+}
+
+.cy-tooltip__section-body {
+    line-height: 1.4;
+}
+
+.cy-tooltip__header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.cy-tooltip__copy {
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+    z-index: 1001;
+}
+
+.cy-tooltip__copy-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #888;
+    padding: 2px 5px;
+}
+
+.cy-tooltip__resize-handle {
+    position: absolute;
+    left: 6px;
+    bottom: 6px;
+    width: 16px;
+    height: 16px;
+    background: #fff;
+    border: 1px solid #bbb;
+    border-radius: 6px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
+    cursor: sw-resize;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    touch-action: none;
+}
+
+.cy-tooltip__resize-handle::before {
+    content: "";
+    width: 8px;
+    height: 8px;
+    border-left: 2px solid #999;
+    border-bottom: 2px solid #999;
+    transform: translate(-1px, 1px);
+}
+
+/* ======================================================== */
+/* Info Tooltip Styles for Network Pages */
+/* ======================================================== */
+.info-tooltip-container {
+    position: relative;
+    display: inline-block;
+    margin-left: 4px;
+    z-index: 1;
+}
+
+.info-tooltip-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: #555;
+    color: white;
+    font-size: 12px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.info-tooltip-icon:hover {
+    background-color: #333;
+}
+
+.info-tooltip-content {
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    bottom: 25px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #333;
+    color: white;
+    text-align: left;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 1.4;
+    z-index: 12000;
+    transition:
+        opacity 0.3s ease,
+        visibility 0.3s ease;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    max-width: 300px;
+    white-space: normal;
+}
+
+.info-tooltip-content::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-top-color: #333;
+}
+
+.info-tooltip-container:hover .info-tooltip-content,
+.info-tooltip-container.active .info-tooltip-content {
+    visibility: visible;
+    opacity: 1;
+}
+
+.info-tooltip-content a {
+    color: #4fc3f7;
+    text-decoration: underline;
+}
+
+.info-tooltip-content a:hover {
+    color: #81d4fa;
+}
+/* ======================================================== */
+/* Cy controls (recenter / arrange) */
+/* ======================================================== */
+.cy-controls {
+    position: absolute;
+    right: 16px;
+    bottom: 20px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    z-index: 1200;
+}
+
+.control-group {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.recenter-button {
+    position: static;
+    bottom: auto;
+    right: auto;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 2px solid #aaa;
+    background-color: #fff;
+    color: #333;
+    cursor: pointer;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    transition: background-color 0.2s, transform 0.2s;
+}
+
+.recenter-button:hover {
+    background-color: #f0f0f0;
+    transform: scale(1.05);
+}
+
+/* ======================================================== */
+/* No Nodes Message */
+/* ======================================================== */
+.no-nodes-message {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 20px 40px;
+    border-radius: 8px;
+    border: 1px solid #ccc;
+    font-size: 18px;
+    color: #555;
+    z-index: 50;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+    pointer-events: none;
+}
+/* ======================================================== */
+/* Subnetwork Frame Borders (Drag Handles) */
+/* ======================================================== */
+.subnetwork-frame__border {
+    position: absolute;
+    pointer-events: auto;
+    cursor: move;
+    z-index: 11; /* Above frame content if any */
+}
+.subnetwork-frame__border--top { top: -5px; left: -5px; right: -5px; height: 10px; }
+.subnetwork-frame__border--bottom { bottom: -5px; left: -5px; right: -5px; height: 10px; }
+.subnetwork-frame__border--left { top: -5px; bottom: -5px; left: -5px; width: 10px; }
+.subnetwork-frame__border--right { top: -5px; bottom: -5px; right: -5px; width: 10px; }