/*
 * Application-wide styles, loaded by templates/base.html.twig for every page.
 * Bootstrap 5 comes from the CDN before this file, so anything here is either
 * a layout piece Bootstrap has no utility for (the sidebar) or a named class
 * replacing a style attribute that was repeated across templates.
 */

:root {
    --sidebar-width: 240px;
    --topbar-height: 56px;
}

/* Sidebar ---------------------------------------------------------------- */

.sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sidebar-main {
    margin-left: var(--sidebar-width);
}

.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.65);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
}

.sidebar .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar .nav-link.active {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.15);
    font-weight: 500;
}

/* The "Menu" / "Tools" group captions above each nav list. */
.sidebar-heading {
    letter-spacing: .06em;
    font-size: .7rem;
}

/* The mobile top bar and backdrop only exist below the `lg` breakpoint;
   above it the sidebar is a permanent fixed column as before. */
.app-topbar,
.sidebar-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    .app-topbar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--topbar-height);
        padding: 0 0.75rem;
        /* Above the sidebar so the burger stays clickable while the
           sidebar is slid out over the content. */
        z-index: 1046;
    }

    .app-topbar .app-topbar-toggle {
        color: #fff;
        border: 0;
        background: transparent;
        padding: 0.25rem 0.5rem;
        line-height: 1;
    }

    .sidebar {
        top: var(--topbar-height);
        height: calc(100vh - var(--topbar-height));
        min-height: 0;
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform 0.25s ease-in-out;
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        top: var(--topbar-height);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1044;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease-in-out, visibility 0.25s;
    }

    .sidebar-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    .sidebar-main {
        margin-left: 0;
        /* Not padding: the container carries Bootstrap's `p-4`, whose
           !important would win. */
        margin-top: var(--topbar-height);
    }

    body.sidebar-locked {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar-backdrop {
        transition: none;
    }
}

/* Logo ------------------------------------------------------------------- */

.app-logo-sm {
    max-height: 36px;
}

.app-logo-lg {
    max-height: 72px;
}

/* Tables and forms ------------------------------------------------------- */

/* A header cell that should shrink to its content: a percentage width beats
   the table's own auto layout, and 1% is as small as that gets. */
.col-shrink {
    width: 1%;
}

/* Spinner overlaid on the right-hand end of a form control while the field
   loads its options. */
.field-spinner {
    top: 50%;
    right: 2rem;
    margin-top: -0.5rem;
}

/* SMART panels ----------------------------------------------------------- */

/* Stacked SMART panels (drawers/modals) sit the identity and usage
   tables one above the other, so their label columns need a shared
   width to line up. The screener page floats them side by side and
   is left to size its labels to content. */
.smart-stacked .smart-metric-label {
    width: 11rem;
}

/* Per-attribute health dot. The colour is data-driven and stays an inline
   style on the element built by _smart_render_js.html.twig. */
.smart-status-dot {
    width: 11px;
    height: 11px;
}