/* ===================================================
   EBRS app shell — top bar, left navigation, content
   canvas. Loaded on every back-office page through the
   base head fragment, after tokens.css/components.css.
   Semantic design tokens only.
   ===================================================

   Layout dimensions (sidebar width, top bar height) are literal px: they are shell
   geometry, not steps on the 4px spacing scale, and inventing spacing tokens for them
   would put page-layout decisions in the token file. */

/* ── Canvas ────────────────────────────────────────── */
/* Selectors here are deliberately one step more specific than the legacy shell rules in
   common.css and style.css: page templates re-link those files after this one, so an
   equal-specificity rule would lose on source order. */
body main {
    background-color: var(--ebrs-color-canvas);
}

/* The shell row IS a Bootstrap .row: the rail is .col-auto and the content .col. The gutter
   is set through Bootstrap's own --bs-gutter-x rather than a hand-rolled flex gap, so the
   columns keep their normal padding contract. */
.row.app-shell {
    --bs-gutter-x: var(--ebrs-space-md);
    align-items: flex-start;
    padding: var(--ebrs-space-md) var(--ebrs-space-xs) var(--ebrs-space-2xl);
    margin: 0;
}

.app-shell__content {
    min-width: 0; /* without this a wide table stretches the column and squeezes the rail */
    padding: 0;
    background-color: transparent;
}

/* ── Top bar ───────────────────────────────────────── */
/* Structure is Bootstrap's: .navbar.navbar-expand.navbar-light.sticky-top with .navbar-brand,
   .navbar-nav/.nav-link. Everything below is a token override scoped to this navbar — never a
   bare .navbar/.nav-link rule, which would repaint every navbar and plugin dropdown in the app. */
.ebrs-topbar {
    padding: 0 var(--ebrs-space-xs);
    min-height: 56px;
    background-color: var(--ebrs-color-surface);
    border-bottom: 1px solid var(--ebrs-color-border);
    box-shadow: var(--ebrs-shadow-xs);
}

.ebrs-topbar .navbar-brand {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    margin-right: var(--ebrs-space-md);
}

.ebrs-topbar .navbar-brand img {
    height: 34px;
    width: auto;
}

.ebrs-topbar .navbar-nav {
    flex: 0 0 auto;
    gap: var(--ebrs-space-2xs);
    align-items: center;
}

/* dashboard.css:236 puts an unscoped `.nav-item + .nav-item { border-left: … }` on every
   nav item in the app — a global Bootstrap-class override predating this file. Adopting the
   real .navbar-nav markup inherits it, so it is cancelled here rather than avoided by
   dropping the semantic <li> wrappers. */
.ebrs-topbar .nav-item + .nav-item {
    border-left: none;
    padding: 0;
}

.ebrs-topbar .nav-link {
    padding: var(--ebrs-space-2xs) var(--ebrs-space-sm);
    border-radius: var(--ebrs-radius-sm);
    font-size: var(--ebrs-font-size-md);
    font-weight: var(--ebrs-font-weight-medium);
    color: var(--ebrs-color-fg-muted);
    white-space: nowrap;
    transition: background-color var(--ebrs-transition-fast), color var(--ebrs-transition-fast);
}

.ebrs-topbar .nav-link:hover,
.ebrs-topbar .nav-link:focus {
    background-color: var(--ebrs-color-accent-subtle);
    color: var(--ebrs-color-accent-emphasis);
}

.ebrs-topbar__actions {
    flex: 1 1 0;
    justify-content: flex-end;
    gap: var(--ebrs-space-xs);
}

/* The bell is an icon-only control: size it as a real target rather than a bare glyph. */
.ebrs-topbar .custom-bell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ebrs-control-height-md);
    height: var(--ebrs-control-height-md);
    border-radius: var(--ebrs-radius-sm);
    color: var(--ebrs-color-fg-muted);
    transition: background-color var(--ebrs-transition-fast), color var(--ebrs-transition-fast);
}

.ebrs-topbar .custom-bell-icon:hover {
    background-color: var(--ebrs-color-accent-subtle);
    color: var(--ebrs-color-accent-emphasis);
}

.ebrs-topbar .custom-bell-icon .fa-bell {
    font-size: var(--ebrs-font-size-lg);
    margin-top: 0;
}

/* ── Notifications ─────────────────────────────────── */
.ebrs-topbar #notificationDropdown.dropdown-menu {
    width: 320px;
    max-width: calc(100vw - var(--ebrs-space-md));
    padding: var(--ebrs-space-2xs) !important;
    border: 1px solid var(--ebrs-color-border);
    border-radius: var(--ebrs-radius-lg);
    box-shadow: var(--ebrs-shadow-lg);
}

.ebrs-topbar #notificationDropdown .dropdown-header {
    padding: var(--ebrs-space-2xs) var(--ebrs-space-xs);
    font-size: var(--ebrs-font-size-2xs);
    font-weight: var(--ebrs-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ebrs-tracking-wide);
    color: var(--ebrs-color-fg-muted);
}

.ebrs-topbar #notificationDropdown .dropdown-item {
    gap: var(--ebrs-space-xs);
    padding: var(--ebrs-space-xs);
    border-radius: var(--ebrs-radius-sm);
    font-size: var(--ebrs-font-size-sm);
    color: var(--ebrs-color-fg);
    white-space: normal;
}

.ebrs-topbar #notificationDropdown .dropdown-item:hover {
    background-color: var(--ebrs-color-accent-subtle);
}

/* .bg-danger paints Bootstrap's own red with !important; the unread count wears the
   flag-derived danger token instead, scoped so no other badge in the app changes.
   Corner-anchored, not centred on the glyph: the markup previously used
   `top-0 start-50 translate-middle-x`, which parked the count on top of the bell. */
.ebrs-topbar .badge.bg-danger {
    background-color: var(--ebrs-color-danger) !important;
    font-size: var(--ebrs-font-size-2xs);
    font-weight: var(--ebrs-font-weight-semibold);
}

/* Scoped through #notificationIcon because common.css:1639 lifts this badge with
   `margin-top: -1.2rem; margin-left: 7px` by id — a bare class rule loses to it and the count
   keeps floating above the bell. */
.ebrs-topbar #notificationIcon .badge.ebrs-topbar__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    left: auto;
    margin: 0;
    min-width: 16px;
    padding: 0 var(--ebrs-space-3xs);
    font-size: var(--ebrs-font-size-2xs);
    line-height: 16px;
    text-align: center;
    border: 1px solid var(--ebrs-color-surface);
}

/* ── Sidebar rail ──────────────────────────────────── */
.app-shell__rail {
    width: 248px; /* .col-auto already gives flex: 0 0 auto — only the width is ours */
    position: sticky;
    top: 72px; /* clears the sticky top bar */
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    background-color: var(--ebrs-color-surface);
    border: 1px solid var(--ebrs-color-border);
    border-radius: var(--ebrs-radius-md);
    box-shadow: var(--ebrs-shadow-xs);
}

.app-shell__rail .left-wrapper {
    padding: var(--ebrs-space-xs);
    border-top: none;
}

.app-shell__rail .left-wrapper > .row {
    margin: 0;
    padding: 0;
}

.app-shell__rail .left-menu {
    padding: 0;
    margin: 0;
}

/* ── Navigation items ──────────────────────────────── */
.left-menu .left-link {
    width: 100%;
    padding: var(--ebrs-space-xs) var(--ebrs-space-sm);
    border-radius: var(--ebrs-radius-sm);
    font-size: var(--ebrs-font-size-md);
    font-weight: var(--ebrs-font-weight-medium);
    line-height: var(--ebrs-line-tight);
    color: var(--ebrs-color-fg);
    text-align: left;
    transition: background-color var(--ebrs-transition-fast), color var(--ebrs-transition-fast);
}

.left-menu .left-link i {
    width: 16px;
    flex-shrink: 0;
    font-size: var(--ebrs-font-size-md);
    color: var(--ebrs-color-fg-subtle);
    transition: color var(--ebrs-transition-fast);
}

.left-menu .left-link:hover,
.left-menu .left-link:focus {
    background-color: var(--ebrs-color-accent-subtle);
    color: var(--ebrs-color-accent-emphasis);
}

.left-menu .left-link:hover i,
.left-menu .left-link:focus i {
    color: var(--ebrs-color-accent);
}

/* The active item is marked by the server-rendered class on the <li>; the anchor inside it
   carries the state so the tint spans the whole row. */
.left-menu > li.active > a.left-link,
.left-menu > li.active > a.left-link:hover {
    background-color: var(--ebrs-color-accent-subtle);
    color: var(--ebrs-color-accent-emphasis);
    font-weight: var(--ebrs-font-weight-semibold);
}

.left-menu > li.active > a.left-link i {
    color: var(--ebrs-color-accent);
}

/* Nested groups read as a branch of their parent: one guide rule, one indent step. */
.left-menu .btn-toggle-nav {
    position: relative;
    margin: var(--ebrs-space-3xs) 0 var(--ebrs-space-2xs);
    padding: 0 0 0 var(--ebrs-space-md);
    border-left: 1px solid var(--ebrs-color-border);
}

.left-menu .btn-toggle-nav .left-link {
    font-weight: var(--ebrs-font-weight-regular);
    color: var(--ebrs-color-fg-muted);
}

.left-menu .btn-toggle-nav > li.active > a.left-link {
    color: var(--ebrs-color-accent-emphasis);
    font-weight: var(--ebrs-font-weight-semibold);
}

/* Group toggles carry a caret that follows their own expanded state. It replaces the inline
   SVG caret in common.css, and keys off aria-expanded exactly as that rule did — Bootstrap's
   collapse maintains the attribute, and obrs.js sets it on the active group at render. */
.left-menu .btn-toggle::after {
    content: "\f054"; /* fa-chevron-right */
    font-family: "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
    width: auto;
    line-height: var(--ebrs-line-tight);
    margin-left: auto;
    font-size: var(--ebrs-font-size-2xs);
    color: var(--ebrs-color-fg-subtle);
    transform-origin: center;
    transition: transform var(--ebrs-transition-fast);
}

.left-menu .btn-toggle[aria-expanded="true"]::after {
    transform: rotate(90deg);
}

/* ── Company entry ─────────────────────────────────── */
/* A row in "My companies": the entity's name, and the roles the signed-in user holds in it.
   Replaces a stack that put anonymous coloured squares above the name and truncated the name
   server-side at a fixed length regardless of how wide the rail actually is. */
.app-shell__company {
    display: flex;
    flex-direction: column;
    gap: var(--ebrs-space-3xs);
    /* Claims the space the caret does not, and min-width:0 is what allows the name below to
       ellipsize — a flex item defaults to min-width:auto and would refuse to shrink. */
    flex: 1;
    min-width: 0;
}

.app-shell__company-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-size: var(--ebrs-font-size-sm);
    font-weight: var(--ebrs-font-weight-medium);
    line-height: var(--ebrs-line-tight);
    color: var(--ebrs-color-accent);
}

/* The roles the signed-in user holds at this company. A user can hold different roles at
   different companies, so these are what tell two otherwise identical rail entries apart.
   Wrapping rather than scrolling: two or three short role names, and a company with several
   should grow the row rather than hide the extras. */
.app-shell__company-roles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ebrs-space-2xs);
    min-width: 0;
}

/* Same subtle-background/saturated-text treatment as .ebrs-badge in components.css, at the smaller
   scale the rail needs. Not .ebrs-badge itself: that is pill-radius and roomier padding, which at
   three-to-a-row inside a nav item reads as clutter rather than as structure. */
.app-shell__role {
    padding: 1px var(--ebrs-space-2xs);
    border-radius: var(--ebrs-radius-sm);
    font-size: var(--ebrs-font-size-xs);
    font-weight: var(--ebrs-font-weight-semibold);
    line-height: var(--ebrs-line-tight);
    white-space: nowrap;
    background: var(--ebrs-color-surface-raised);
    color: var(--ebrs-color-fg-muted);
}

/* Which colour belongs to which role is presentation, so the mapping lives here rather than in a
   ternary in sidebar.html. The attribute values are the role LABELS from RoleType, which is what
   CraShortBean.roles holds — not the enum constant names. An unlisted role keeps the neutral
   treatment above, so a new RoleType renders correctly without touching this file. */
.app-shell__role[data-role="Company Admin"] {
    background: var(--ebrs-color-info-subtle);
    color: var(--ebrs-color-info);
}

.app-shell__role[data-role="Reviewer"] {
    background: var(--ebrs-color-success-subtle);
    color: var(--ebrs-color-success);
}

.app-shell__role[data-role="Approver"] {
    background: var(--ebrs-color-warning-subtle);
    color: var(--ebrs-color-warning);
}

.app-shell__role[data-role="Submitter"] {
    background: var(--ebrs-color-accent-subtle);
    color: var(--ebrs-color-accent-emphasis);
}

/* Each destination carries its own icon. They were all one grey dot, which gave a reader
   fifteen identical rows and no way to find anything by shape. Fixed width so the labels
   line up in a column regardless of how wide each glyph is. */
.app-shell__nav-icon {
    width: 1rem;
    flex-shrink: 0;
    text-align: center;
    font-size: var(--ebrs-font-size-xs);
}

/* ── Mobile navigation toggle ──────────────────────── */
/* Bootstrap's .navbar-toggler + .navbar-toggler-icon; this only places it and tokenises the
   surface, since the toggler sits outside a navbar (layouts without a rail must not render it). */
.app-shell__nav-toggle {
    margin: var(--ebrs-space-sm) 0 0 var(--ebrs-space-sm);
    background-color: var(--ebrs-color-surface);
    border-color: var(--ebrs-color-border-strong);
    border-radius: var(--ebrs-radius-sm);
}

.app-shell__nav-toggle:hover {
    background-color: var(--ebrs-color-accent-subtle);
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 991.98px) {
    .row.app-shell {
        --bs-gutter-x: var(--ebrs-space-sm);
        padding: var(--ebrs-space-sm) var(--ebrs-space-3xs) var(--ebrs-space-xl);
    }

    /* `.navbar-expand` forces flex-wrap: nowrap — correct for a bar that never collapses, but
       it overflows once brand + nav + account no longer fit. Wrapping is restored here rather
       than switching to `.navbar-expand-lg`, which would hide the links behind a second
       toggler and put two hamburgers in the bar. */
    .ebrs-topbar {
        flex-wrap: wrap;
        row-gap: var(--ebrs-space-2xs);
    }

    /* The rail becomes a full-width panel the toggler opens. The content column must be told
       to take a full row too: `.col` has flex-basis 0, so a 100%-wide rail plus a 0-basis
       column still "fits" one line — the column would render at zero width and spill its
       content past the viewport instead of wrapping under the rail. */
    .app-shell__rail {
        width: 100%;
        position: static;
        max-height: none;
    }

    .app-shell__content {
        flex: 0 0 100%;
        width: 100%;
    }
}