/* ---------------------------------------------------------------------------
   JCF shell: sidebar, topbar, page header
   ---------------------------------------------------------------------------
   Loaded after app.min.css. base.html pins the saas skin with a dark sidebar
   and a light topbar; office.css (loaded last) sets the final colour tokens.
--------------------------------------------------------------------------- */

code,
kbd,
samp {
    font-family: var(--theme-font-monospace);
}

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

/* Structure borrowed from the back-office reference: a logo tile, quiet
   capitalised section headings, full-width rows with a gold bar on the
   current page, a count wherever records are waiting, and the signed-in
   person at the foot. Colours stay on the Foundation indigo. */

.sidenav-menu > .logo {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 76px;
    padding: 20px 20px 14px;
    line-height: 1;
}

.sidenav-menu .side-nav {
    padding: 0 0 12px;
}

/* Rows run edge to edge so the gold bar sits on the sidebar's edge. */
.sidenav-menu .side-nav .side-nav-item {
    padding: 0;
}

/* Paces fills an active group's header; only the current page is filled. */
.sidenav-menu .side-nav > .side-nav-item.active > .side-nav-link:not([aria-current="page"]) {
    background: transparent;
}

.sidenav-menu .side-nav .side-nav-title {
    padding: 18px 20px 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.42;
}

.sidenav-menu .side-nav .side-nav-item .side-nav-link {
    gap: 12px;
    min-height: 42px;
    margin: 0;
    padding: 10px 18px 10px 17px;
    border-radius: 0;
    border-inline-start: 3px solid transparent;
    font-size: 13.5px;
    font-weight: 550;
    color: rgba(255, 255, 255, 0.74);
    transition: background-color 0.15s, color 0.15s;
}

.sidenav-menu .side-nav .side-nav-item .side-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.sidenav-menu .side-nav .side-nav-item .side-nav-link .menu-icon .ph {
    font-size: 19px;
}

/* An open group's header is brighter, so the eye finds where it is. */
.sidenav-menu .side-nav .side-nav-item .side-nav-link[aria-expanded="true"] {
    color: #fff;
}

.sidenav-menu .side-nav .side-nav-item .side-nav-link[aria-current="page"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-inline-start-color: var(--jcf-gold);
    box-shadow: none;
}

.sidenav-menu .side-nav .sub-menu {
    gap: 0;
    padding: 0 0 6px;
}

/* Sub-links line up under their group's label, not its icon. */
.sidenav-menu .side-nav .sub-menu .side-nav-item .side-nav-link {
    min-height: 36px;
    padding: 8px 18px 8px 48px;
    font-size: 13px;
    font-weight: 500;
}

.sidenav-menu .side-nav .sub-menu .side-nav-link::before {
    display: none;
}

/* Records waiting on staff. Gold, because it asks for attention. */
.jcf-nav-count {
    margin-inline-start: auto;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: #f3dda9;
    background: rgba(211, 174, 99, 0.2);
}

.jcf-nav-count + .menu-arrow {
    margin-inline-start: 6px;
}

/* An open group shows each link's own count instead. */
.side-nav-link[aria-expanded="true"] > .jcf-nav-count--group {
    display: none;
}

/* The signed-in person, as in the reference. Account actions stay in the
   topbar menu, which is reachable on every screen size. */
.jcf-sidebar-foot {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 11px;
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

.jcf-sidebar-foot .jcf-avatar {
    color: #24243e;
    background: var(--jcf-gold);
    font-weight: 700;
}

.jcf-sidebar-foot__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    line-height: 1.25;
}

.jcf-sidebar-foot__name {
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jcf-sidebar-foot__role {
    font-size: 11px;
    opacity: 0.6;
}

/* Icon rail: no words, so no counts or headings either. */
html[data-sidenav-size="condensed"] .jcf-nav-count,
html[data-sidenav-size="condensed"] .sidenav-menu .side-nav .side-nav-title {
    display: none;
}

/* Phones: the sidebar is off-canvas, so the topbar carries the logo tile.
   Paces shows it below 768px but drops it at 375px and under — most phones —
   with !important; the tile is small enough to keep. */
@media (max-width: 375px) {
    .app-topbar .logo-topbar {
        display: block !important;
        padding: 0 4px 0 0;
    }
}

html[data-sidenav-size="condensed"] .sidenav-menu > .logo {
    justify-content: center;
    min-height: 70px;
    padding: 16px 0;
}

/* --- Topbar ------------------------------------------------------------- */

/* Same colour as the page, slightly translucent so content scrolls under it. */
html[data-skin="saas"][data-topbar-color="light"] {
    --theme-topbar-bg: rgba(242, 246, 251, 0.82);
    --theme-topbar-item-color: #5d6878;
}

html[data-bs-theme="dark"][data-skin="saas"][data-topbar-color="light"] {
    --theme-topbar-bg: rgba(23, 24, 30, 0.82);
    --theme-topbar-item-color: #aab4c2;
}

.app-topbar {
    box-shadow: none;
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
}

.jcf-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    font-size: 20px;
    color: var(--theme-topbar-item-color);
    background: transparent;
    transition: background-color 0.15s, color 0.15s;
}

.jcf-topbar-btn:hover,
.jcf-topbar-btn:focus-visible {
    color: var(--theme-body-color);
    background: var(--jcf-hover-bg);
}

.jcf-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 4px 4px;
    border-radius: 999px;
}

.jcf-user:hover {
    background: var(--jcf-hover-bg);
}

.jcf-user__text {
    flex-direction: column;
    line-height: 1.25;
    text-align: start;
}

.jcf-user__name {
    font-weight: 600;
    color: var(--theme-body-color);
}

.jcf-user__role {
    font-size: 12px;
    color: var(--theme-secondary-color);
}

/* --- Page header -------------------------------------------------------- */

.jcf-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 4px 0 20px;
}

.jcf-page-header__text {
    min-width: 0;
}

.jcf-page-header__title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--theme-body-color);
}

.jcf-page-header__subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--theme-secondary-color);
}

.jcf-page-header__subtitle:empty,
.jcf-page-header__actions:empty {
    display: none;
}

.jcf-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Breadcrumb as a single "‹ Parent" back link.
   Templates list Dashboard › Parent › Current. The first and the current item
   are redundant next to the sidebar and the heading, so both are hidden — and
   on top-level pages (fewer than three items) nothing is left to show. */
.jcf-crumbs {
    margin: 0 0 4px;
    padding: 0;
    font-size: 13px;
}

.jcf-crumbs:not(:has(> li:nth-child(3))),
.jcf-crumbs > li:first-child,
.jcf-crumbs > li.active {
    display: none;
}

.jcf-crumbs > li:nth-child(2)::before {
    content: "\2039";
    padding-inline-end: 6px;
    float: none;
    color: inherit;
}

.jcf-crumbs a {
    color: var(--theme-secondary-color);
}

.jcf-crumbs a:hover {
    color: var(--theme-primary);
}

@media (max-width: 575.98px) {
    .jcf-page-header__actions {
        width: 100%;
    }
}