/* ScadaLink Central UI – global styles. Loaded from Host App.razor as
   `_content/ScadaLink.CentralUI/css/site.css`. */

.sidebar {
    min-width: 220px;
    max-width: 220px;
    height: 100vh;
    background: var(--card);
    border-right: 1px solid var(--rule-strong);
}

/* Keep the sidebar pinned to the viewport on lg+ so it stays visible even
   when the main content scrolls past 100vh. The wrapper is the flex child
   of MainLayout; align-self prevents the flex row from stretching it. */
@media (min-width: 992px) {
    #sidebar-collapse {
        position: sticky;
        top: 0;
        height: 100vh;
        align-self: flex-start;
        z-index: 1020;
    }
}

.sidebar .nav-link {
    color: var(--ink-soft);
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
}

.sidebar .nav-link:hover {
    color: var(--ink);
    background-color: var(--paper);
}

.sidebar .nav-link.active {
    color: var(--accent-deep);
    background-color: var(--paper);
    font-weight: 600;
    /* Left accent so active state isn't carried by color alone. */
    border-left: 3px solid var(--accent);
    padding-left: calc(1rem - 3px);
}

/* Collapsible section header — a full-width button styled as an uppercase
   eyebrow with a leading expand/collapse chevron. */
.sidebar .nav-section-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: var(--ink-faint);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.75rem 1rem 0.25rem;
    margin-top: 0.5rem;
}

.sidebar .nav-section-toggle:hover {
    color: var(--ink);
}

.sidebar .nav-section-toggle .bi {
    font-size: 0.8rem;
    line-height: 1;
}

.sidebar .brand {
    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 1rem;
    border-bottom: 1px solid var(--rule);
}

/* The single accent glyph in the brand mark. */
.sidebar .brand .mark {
    color: var(--accent);
}

/* When the sidebar is collapsed under <lg viewports the Bootstrap collapse
   container removes the fixed width; restore full width on mobile. */
@media (max-width: 991.98px) {
    .sidebar {
        min-width: 100%;
        max-width: 100%;
        height: auto;
    }
}

#reconnect-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5);
}

#reconnect-modal .modal-content {
    max-width: 400px;
    padding: 2rem;
    text-align: center;
    background: var(--bs-white);
    border-radius: 0.5rem;
}

/* Script editor modal — the tabbed Trigger/Code/Parameters/Return content is
   substantial, so the dialog fills most of the viewport. Pairs with
   .modal-dialog-scrollable so the body scrolls within the fixed height. */
.modal-dialog.script-editor-modal {
    max-width: 96vw;
    width: 96vw;
    height: calc(100vh - 2rem);
}

.modal-dialog.script-editor-modal .modal-content {
    height: 100%;
}