/* Cavallearn — Structural Layout
   Visual tokens in cavallearn.css. This file: grid, resets, Blazor infra. */

/* App grid */
.cl-app {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main";
    grid-template-columns: var(--cl-sidebar-w) 1fr;
    grid-template-rows: var(--cl-navbar-h) 1fr;
    height: 100vh;
    background: var(--cl-navy-dark);
}

.cl-navbar  { grid-area: header; }
.cl-sidebar { grid-area: sidebar; }
.cl-main    {
    grid-area: main;
    padding: 1.5rem;
    overflow-y: auto;
    background: var(--cl-navy-dark);
    /* overflow-y:auto makes .cl-main the scroll container. The grid row "1fr"
       constrains its height to viewport minus navbar. Sticky children stick
       relative to this container's scroll position — top:0 = top of .cl-main's
       content area (inside its padding). */
}

/* Mobile: hide sidebar, show bottom nav */
@media (max-width: 991.98px) {
    .cl-app {
        grid-template-areas:
            "header"
            "main";
        grid-template-columns: 1fr;
    }
    .cl-sidebar { display: none; }
}

/* Sidebar collapse (desktop only — mobile keeps bottom-nav unchanged) */
.cl-app--sidebar-collapsed { grid-template-columns: 56px 1fr; }
.cl-sidebar { transition: width .2s ease; }
/* Toggle uses position:fixed — relative to viewport, sidesteps every container's
   overflow / grid / stacking-context. Lives on the sidebar/main boundary line just
   below the header. */
.cl-sidebar-toggle {
    position: fixed;
    top: calc(var(--cl-navbar-h) + 1rem);
    left: calc(var(--cl-sidebar-w) - 12px);
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--cl-navy); color: var(--cl-gold);
    border: 1px solid var(--cl-glass-border);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .7rem; z-index: 200;
    transition: left .2s ease;
}
.cl-app--sidebar-collapsed .cl-sidebar-toggle { left: calc(56px - 12px); }
@media (max-width: 991.98px) {
    .cl-sidebar-toggle { display: none; }
}
.cl-sidebar--collapsed .cl-nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.cl-sidebar--collapsed .cl-nav-item span { display: none; }
.cl-sidebar--collapsed hr { margin-left: .5rem; margin-right: .5rem; }

/* Annotation tab bar — no horizontal scroll, shrinks on mobile */
.cl-tab-bar {
    display: flex; flex-wrap: nowrap; gap: .35rem;
    overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1rem;
    scrollbar-width: thin;
}
.cl-tab-bar__btn {
    flex: 1 1 0; min-width: 80px; min-height: 44px;
    padding: 8px 12px; font-size: .85rem;
    white-space: nowrap;
}
.cl-tab-bar__dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    margin-left: .4rem; vertical-align: middle;
}
@media (max-width: 600px) {
    .cl-tab-bar__btn {
        min-width: 70px; padding: 6px 10px; font-size: .8rem;
    }
}

/* Blazor error UI */
#blazor-error-ui {
    background: var(--cl-navy); color: var(--cl-warning);
    bottom: 0; box-shadow: 0 -1px 4px rgba(0,0,0,.4);
    display: none; left: 0; padding: .6rem 1.25rem .7rem;
    position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .reload { margin-left: .5rem; color: var(--cl-gold-light); }