/* -------------------------------------------------------------------------
   Graph Visualization Styles (JointJS / Topobus Specific)
   Note: Main application layout and theme are handled by classic.css
------------------------------------------------------------------------- */

/* Performance: constant link visibility state */
.joint-type-standard-link {
    pointer-events: none;
}

/* Performance: hide links during pan/zoom/drag for maximum fluidity */
.is-panning .joint-type-standard-link,
.is-zooming .joint-type-standard-link,
.is-large-graph.is-dragging .joint-type-standard-link {
    display: none !important;
}

/* SMART LOD: Hide text only when zoomed out far (flicker-free) */
.zoom-far [joint-selector="name"],
.zoom-far [joint-selector="address"],
.zoom-far [joint-selector="label"] {
    display: none !important;
}

/* Graph loading: hide graph content until layout is ready */
#graph-view.graph-loading #paper-container,
#graph-view.graph-loading #minimap-wrap {
    visibility: hidden;
}

/* Rendering hints for smoother interaction */
.is-panning #paper-container {
    text-rendering: optimizeSpeed;
    shape-rendering: optimizeSpeed;
}

:root {
    /* Graph-specific font override */
    --font-device: var(--font-mono);
}

/* Graph Container handled by index.html structure but we ensure full size */
#graph-view {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#paper-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* Plain background for readability (all themes). */
    background: var(--bg-white);
}

#paper-scroll {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: transparent;
    z-index: 1;
    touch-action: none;
}

#paper {
    position: relative;
    min-width: 100%;
    min-height: 100%;
    cursor: grab;
    touch-action: none;
}

/* Graph dimming (CSS-based for large graphs) */
#paper.dim-unselected .joint-element,
#paper.dim-unselected .joint-link {
    opacity: 0.18;
}

#paper.dim-unselected .joint-element.is-highlighted,
#paper.dim-unselected .joint-link.is-highlighted {
    opacity: 1;
}

#paper.dim-unselected .joint-link:not(.is-highlighted) {
    opacity: 0;
    pointer-events: none;
}

/* Minimap */
#minimap-wrap {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 220px;
    z-index: 3;
    background: #fffef9;
    border-radius: 12px;
    border: 1px solid #e1d4b5;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    padding: 0.6rem;
}

.minimap-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #55606a;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

#minimap {
    width: 100%;
    height: 140px;
    display: block;
    background: #f7f2e7;
    border-radius: 8px;
}

/* Composite View Styles */
.composite-main {
    fill: #f4f0e6;
    stroke: #e1d4b5;
    stroke-width: 2px;
    stroke-dasharray: 5, 5;
}

.composite-middle {
    fill: #fff;
    stroke: #e1d4b5;
    stroke-width: 1px;
}

.composite-ga {
    fill: var(--object-fill);
    stroke: var(--object-border);
    stroke-width: 1px;
    rx: 4px;
    ry: 4px;
}

.composite-object {
    fill: #fff;
    stroke: var(--accent);
    stroke-width: 1px;
    rx: 2px;
    ry: 2px;
}

.composite-label-main {
    font-size: 14px;
    font-weight: bold;
    fill: #1f2a2e;
    text-transform: uppercase;
}

.composite-label-middle {
    font-size: 12px;
    font-weight: bold;
    fill: #55606a;
}

.composite-label-ga {
    font-size: 11px;
    font-weight: 600;
    fill: #1f2a2e;
}

.composite-label-obj {
    font-size: 10px;
    fill: #55606a;
}