/* The Dashboard sidebar.
 *
 * Same markup and the same visual language as Case Tracker's and Papers'.
 * Copied rather than shared because these are separate deployments with no
 * build step between them; the cost is that a change here has to be made in
 * each, and the alternative was a runtime dependency between three apps.
 *
 * PLAIN CSS, NOT TAILWIND, AND INLINE SVG, NOT AN ICON FONT. These five pages
 * do all load Tailwind, so that part would have worked -- but only one of them
 * loads Font Awesome, and icon-font markup on the other four would render as
 * labels with blank gaps and nothing in the markup to explain why. That
 * happened in Papers a week ago. Inline SVG cannot fail that way.
 *
 * LAYOUT. Fixed panel, left margin on the body, rather than rebuilding five
 * pages as flex rows. Three of them are dark and centred (the launcher and the
 * two profile screens), two are light and top-aligned; margin is the one
 * property none of them sets, so this leaves every page's own layout alone.
 *
 * The panel is #0f172a, which is also the launcher's background -- the
 * right-hand border is what separates them there, and is load-bearing on that
 * page rather than decoration.
 */

:root {
    --ct-sidebar-width: 15rem;
}

body.ct-has-sidebar {
    /* margin, not padding: two pages set their padding with Tailwind
     * utilities, whose class specificity would beat a bare element rule. */
    margin-left: var(--ct-sidebar-width);
}

.ct-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--ct-sidebar-width);
    background: #0f172a;
    border-right: 1px solid #1e293b;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 40;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

.ct-sidebar__brand {
    padding: 1.4rem 1.25rem 1rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.ct-sidebar__brand span {
    color: #3b82f6;
}

.ct-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0 0.6rem;
    flex-grow: 1;
}

.ct-sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    border-radius: 0.5rem;
    color: #cbd5e1;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}

.ct-sidebar__link:hover {
    background: #1e293b;
    color: #fff;
}

.ct-sidebar__link svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.ct-sidebar__link--current {
    background: rgba(37, 99, 235, 0.12);
    border-right: 3px solid #3b82f6;
    color: #60a5fa;
    font-weight: 600;
}

/* Logout sits apart: it ends the session rather than navigating, and putting
 * it in the same run of links invites a mis-click on the way to Settings. */
.ct-sidebar__footer {
    padding: 0.6rem;
    border-top: 1px solid #1e293b;
    margin-top: auto;
}

.ct-sidebar__link--logout {
    color: #fca5a5;
}

.ct-sidebar__link--logout:hover {
    background: #7f1d1d;
    color: #fff;
}

/* Narrow screens: the sidebar becomes an ordinary block at the top of the
 * document rather than a fixed overlay sitting on top of the content. */
@media (max-width: 820px) {
    body.ct-has-sidebar {
        margin-left: 0;
    }

    .ct-sidebar {
        position: static;
        width: 100%;
        bottom: auto;
        border-right: 0;
        border-bottom: 1px solid #1e293b;
    }

    .ct-sidebar__nav {
        flex-direction: row;
        flex-wrap: wrap;
        padding-bottom: 0.6rem;
    }

    .ct-sidebar__footer {
        border-top: 0;
        margin-top: 0;
    }
}

/* View switching on the entry page (see views.js).
 *
 * !important, and a class rather than the `hidden` attribute, because the
 * elements being hidden carry Tailwind display utilities: the entry header and
 * the form are both `flex`. `.flex { display: flex }` and the browser's
 * `[hidden] { display: none }` have equal specificity, and Tailwind's
 * stylesheet comes later, so it wins -- setting el.hidden on them did nothing
 * at all and both views rendered on top of each other.
 */
.ct-view-hidden {
    display: none !important;
}