/* The site chrome: header, page bar, sidebar, filter bar and their phone layouts.
   Loaded last by base.html, so it is the one place these components are styled;
   the Dash iframes have the matching layer in dash_ui.css. Colours and sizes come
   from static/css/tokens.css — add a token there rather than a new literal. */

/* Tokens (colours, sizes, the legacy aliases): static/css/tokens.css */

body {
    color: var(--ctm-ink);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:focus-visible {
    outline: 2px solid var(--ctm-brand);
    outline-offset: 2px;
}

/* ------------------------------------------------------------ bootstrap -- */
/* Bootstrap 5.3 reads its colours from these variables: pointed at the tokens,
   every stock component (links, .btn-primary, form focus, switches, pagination,
   badges, nav pills) carries the brand without a per-page override. */

:root,
[data-bs-theme="light"] {
    --bs-primary: var(--ctm-brand);
    --bs-primary-rgb: 111, 66, 193;
    --bs-primary-text-emphasis: var(--ctm-brand-600);
    --bs-primary-bg-subtle: var(--ctm-brand-50);
    --bs-primary-border-subtle: var(--ctm-brand-100);
    --bs-link-color: var(--ctm-brand);
    --bs-link-color-rgb: 111, 66, 193;
    --bs-link-hover-color: var(--ctm-brand-600);
    --bs-link-hover-color-rgb: 90, 53, 156;
    --bs-body-color: var(--ctm-ink);
    --bs-body-color-rgb: 31, 35, 40;
    --bs-secondary-color: var(--ctm-ink-3);
    --bs-tertiary-color: var(--ctm-ink-4);
    --bs-border-color: var(--ctm-line);
    --bs-border-color-translucent: rgba(16, 24, 40, 0.1);
    --bs-focus-ring-color: var(--ctm-brand-ring);
    --bs-form-valid-color: var(--ctm-success);
    --bs-highlight-bg: var(--ctm-brand-100);
}

a {
    color: var(--ctm-brand);
}

a:hover {
    color: var(--ctm-brand-600);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ctm-brand);
    box-shadow: 0 0 0 3px var(--ctm-brand-ring);
}

.form-check-input:checked {
    background-color: var(--ctm-brand);
    border-color: var(--ctm-brand);
}

.form-check-input:focus {
    border-color: var(--ctm-brand);
    box-shadow: 0 0 0 3px var(--ctm-brand-ring);
}

.pagination {
    --bs-pagination-color: var(--ctm-brand);
    --bs-pagination-hover-color: var(--ctm-brand-600);
    --bs-pagination-focus-color: var(--ctm-brand-600);
    --bs-pagination-focus-box-shadow: 0 0 0 3px var(--ctm-brand-ring);
    --bs-pagination-active-bg: var(--ctm-brand);
    --bs-pagination-active-border-color: var(--ctm-brand);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ctm-brand);
}

.nav {
    --bs-nav-link-color: var(--ctm-brand);
    --bs-nav-link-hover-color: var(--ctm-brand-600);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--ctm-brand);
}

.badge.bg-primary,
.text-bg-primary {
    background-color: var(--ctm-brand) !important;
}

.text-primary {
    color: var(--ctm-brand) !important;
}

/* --------------------------------------------------------------- buttons -- */
/* One button system. Every action is one of four:
     primary   .btn-primary / .btn-purple-sm  filled brand: the one thing a view is for
                                              (Update, Save, Sign in). A primary that
                                              has nothing to act on yet is the same
                                              button, faded — never a grey slab.
     secondary .btn-secondary / .btn-outline-secondary / .btn-download
                                              white with a neutral border: the other
                                              actions beside it.
     ghost     .btn-ghost / .btn-link         text only: reset, cancel, show more.
     danger    .btn-danger / .btn-outline-danger
                                              destructive, and only that.
   There is no grey filled button: Bootstrap's .btn-secondary is drawn as the
   secondary outline here. */

.btn-primary {
    --bs-btn-color: var(--ctm-surface);
    --bs-btn-bg: var(--ctm-brand);
    --bs-btn-border-color: var(--ctm-brand);
    --bs-btn-hover-color: var(--ctm-surface);
    --bs-btn-hover-bg: var(--ctm-brand-600);
    --bs-btn-hover-border-color: var(--ctm-brand-600);
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
    --bs-btn-active-color: var(--ctm-surface);
    --bs-btn-active-bg: var(--ctm-brand-600);
    --bs-btn-active-border-color: var(--ctm-brand-600);
    --bs-btn-disabled-color: var(--ctm-surface);
    --bs-btn-disabled-bg: var(--ctm-brand);
    --bs-btn-disabled-border-color: var(--ctm-brand);
    --bs-btn-font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--ctm-brand);
    --bs-btn-border-color: var(--ctm-brand);
    --bs-btn-hover-color: var(--ctm-surface);
    --bs-btn-hover-bg: var(--ctm-brand);
    --bs-btn-hover-border-color: var(--ctm-brand);
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
    --bs-btn-active-color: var(--ctm-surface);
    --bs-btn-active-bg: var(--ctm-brand-600);
    --bs-btn-active-border-color: var(--ctm-brand-600);
    --bs-btn-disabled-color: var(--ctm-brand);
    --bs-btn-disabled-border-color: var(--ctm-brand);
}

.btn-secondary,
.btn-outline-secondary {
    --bs-btn-color: var(--ctm-ink-2);
    --bs-btn-bg: var(--ctm-surface);
    --bs-btn-border-color: var(--ctm-line-strong);
    --bs-btn-hover-color: var(--ctm-ink);
    --bs-btn-hover-bg: var(--ctm-hover);
    --bs-btn-hover-border-color: var(--ctm-ink-4);
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
    --bs-btn-active-color: var(--ctm-ink);
    --bs-btn-active-bg: var(--ctm-hover);
    --bs-btn-active-border-color: var(--ctm-ink-4);
    --bs-btn-disabled-color: var(--ctm-ink-4);
    --bs-btn-disabled-bg: var(--ctm-surface);
    --bs-btn-disabled-border-color: var(--ctm-line);
}

.btn-link {
    --bs-btn-color: var(--ctm-brand);
    --bs-btn-hover-color: var(--ctm-brand-600);
    --bs-btn-active-color: var(--ctm-brand-600);
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px var(--ctm-brand-ring);
}

/* A primary with nothing to act on yet (a Save before any change): the same
   button, faded, so it still reads as the save — not a disabled grey slab. */
.btn-primary:disabled,
.btn-primary.disabled,
.btn-purple-sm:disabled,
.btn-purple-sm.disabled {
    color: var(--ctm-surface);
    background-color: var(--ctm-brand);
    border-color: var(--ctm-brand);
    opacity: 0.45;
    cursor: not-allowed;
}

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

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--ctm-header-bg);
    color: var(--ctm-ink);
    border-bottom: 1px solid var(--ctm-line-strong);
    padding: 0 20px;
}

.header-container {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 !important;
}

.branding {
    display: flex;
    align-items: center;
    min-width: 0;
}

.branding-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ctm-ink) !important;
    text-decoration: none;
}

.branding-logo-wrap {
    display: inline-block;
    line-height: 0;
}

.branding-logo {
    display: block;
    height: 40px;
    width: auto;
}

header .custom-navbar {
    padding: 0;
    height: 52px;
    flex-wrap: nowrap;
}

header .navbar-nav {
    gap: 4px;
    align-items: stretch;
    height: 52px;
}

header .navbar-nav .nav-item {
    display: flex;
}

header .navbar-nav .product-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 12px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ctm-ink);
    text-decoration: none;
    border-radius: 0;
    transition: color 0.15s ease;
}

header .navbar-nav .product-nav-link:hover {
    color: var(--ctm-brand);
    background: none;
}

/* The active product is purple, icon and code: no underline as well. */
header .navbar-nav .product-nav-link.active {
    color: var(--ctm-brand);
}

.product-nav-icon {
    height: 34px;
    width: auto;
}


.login {
    font-size: 14px;
    font-weight: 500;
    color: var(--ctm-brand);
    text-decoration: none;
    padding: 7px 14px;
    border: 1px solid var(--ctm-brand);
    border-radius: var(--ctm-radius);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.login:hover,
.login:focus-visible {
    background-color: var(--ctm-brand-50);
    color: var(--ctm-brand);
    border-color: var(--ctm-brand);
    text-decoration: none;
}

/* The one call to action, everywhere a page asks for one (the landing page, the
   Contact): the app's primary button, solid brand, the shared radius. */
.ctm-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--button-text-color);
    background-color: var(--ctm-brand);
    border: 1px solid var(--ctm-brand);
    border-radius: var(--ctm-radius);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ctm-cta:hover,
.ctm-cta:focus-visible {
    color: var(--button-text-color);
    background-color: var(--ctm-brand-600);
    border-color: var(--ctm-brand-600);
    text-decoration: none;
}

.ctm-cta > span {
    transition: transform 0.15s ease;
}

.ctm-cta:hover > span {
    transform: translateX(3px);
}

.ctm-cta-lg {
    padding: 15px 26px;
    font-size: 15px;
}

/* The signed-out header: Contact, Sign in. */
.public-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.public-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--ctm-ink-2);
    text-decoration: none;
}

.public-link:hover,
.public-link:focus-visible {
    color: var(--ctm-brand);
    text-decoration: none;
}

/* Account menu: initials in a circle, the details in the menu. */
.user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 16px;
    padding: 2px;
    border: 0;
    background: none;
    border-radius: 999px;
    color: var(--ctm-ink-4);
}

.user-menu::after {
    margin-left: 0;
    vertical-align: middle;
    transition: color 0.15s ease;
}

.user-menu:hover,
.user-menu[aria-expanded="true"] {
    color: var(--ctm-ink-2);
}

.user-menu:hover .user-avatar,
.user-menu[aria-expanded="true"] .user-avatar {
    background: var(--ctm-brand-600);
    box-shadow: 0 0 0 3px var(--ctm-brand-100);
}

.user-menu:focus-visible {
    outline: none;
}

.user-menu:focus-visible .user-avatar {
    box-shadow: 0 0 0 3px var(--ctm-brand-100), 0 0 0 4px var(--ctm-brand);
}

/* Initials in a solid brand circle: the account button, apart from the hexagon
   product icons beside it. */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ctm-brand);
    color: var(--button-text-color);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    user-select: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.user-avatar-lg {
    width: 40px;
    height: 40px;
    font-size: 15px;
    flex: none;
}

/* Unread release notes: a small dot on the avatar's shoulder. */
.user-menu-dot {
    position: absolute;
    top: 0;
    left: 27px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--ctm-danger);
    border: 2px solid var(--header-bg-color);
}

.dropdown-menu {
    border: 1px solid var(--ctm-line);
    border-radius: var(--ctm-radius-lg);
    box-shadow: var(--ctm-shadow-md);
    padding: 6px;
    font-size: 14px;
}

.dropdown-item {
    border-radius: var(--ctm-radius);
    padding: 6px 10px;
    color: var(--ctm-ink-2);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--ctm-hover);
    color: var(--ctm-ink);
}

.dropdown-divider {
    margin: 6px 0;
    border-top-color: var(--ctm-line);
}

.user-dropdown {
    min-width: 260px;
}

.user-dropdown-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 4px;
}

.user-dropdown-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-dropdown-name {
    font-weight: 600;
    color: var(--ctm-ink);
}

.user-dropdown-email {
    font-size: 12.5px;
    color: var(--ctm-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown-badge {
    background: var(--ctm-brand);
    font-weight: 600;
}

/* A menu link that opens a new tab (API Documentation). */
.menu-external {
    margin-left: 4px;
    font-size: 0.85em;
    color: var(--ctm-ink-4);
}

/* The phone menu. */
@media (max-width: 767.98px) {
    header {
        padding: 0 12px;
    }

    .custom-navbar .navbar-toggler {
        position: static !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid var(--ctm-line-strong);
        border-radius: var(--ctm-radius);
        background: var(--ctm-surface) !important;
        z-index: 2001;
    }

    .custom-navbar .navbar-toggler-icon {
        width: 20px;
        height: 20px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath stroke='%23444c56' stroke-linecap='round' stroke-width='2' d='M4 7h16M4 12h16M4 17h16'/%3e%3c/svg%3e") !important;
    }

    header .custom-navbar .navbar-collapse.show {
        position: fixed !important;
        top: var(--ctm-header-h);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2000 !important;
        background: var(--ctm-surface) !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow-y: auto;
        padding: 8px 12px 32px;
    }

    header .navbar-nav,
    header .custom-navbar .navbar-collapse.show .navbar-nav {
        position: static !important;
        height: auto !important;
        width: 100%;
        padding: 0 !important;
        text-align: left;
        background: none !important;
        gap: 0;
        overflow: visible;
    }

    header .custom-navbar .navbar-collapse.show .navbar-nav .nav-item {
        width: 100%;
    }

    header .custom-navbar .navbar-collapse.show .dropdown-divider {
        margin: 8px 0;
    }

    header .custom-navbar .navbar-collapse.show .navbar-nav .nav-item:first-child {
        margin-top: 0 !important;
    }

    header .navbar-nav .product-nav-link,
    .navbar-nav .nav-item .nav-link {
        height: auto;
        width: 100%;
        padding: 12px 8px !important;
        font-size: 16px;
        font-weight: 500;
        color: var(--ctm-ink-2);
        border-radius: var(--ctm-radius);
    }

    header .navbar-nav .product-nav-link.active {
        background: var(--ctm-brand-50);
    }

    .product-nav-icon {
        height: 32px;
    }

    .branding-logo {
        height: 36px;
    }
}

/* -------------------------------------------------------------- page bar -- */
/* The row under the header on every app page: sidebar toggle, where you are,
   the data date, and the filter-bar toggle. */

.hamburger-header {
    margin-top: var(--ctm-header-h) !important;
    min-height: var(--ctm-pagebar-h);
    padding: 0 16px !important;
    display: flex;
    align-items: center;
    background: var(--ctm-surface) !important;
    border-bottom: 1px solid var(--ctm-line) !important;
}

.hamburger-header > .d-flex {
    width: 100%;
    min-height: calc(var(--ctm-pagebar-h) - 1px);
    gap: 12px !important;
}

.pagebar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    flex: none;
    border: 1px solid transparent;
    border-radius: var(--ctm-radius);
    background: none;
    color: var(--ctm-ink-3);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pagebar-icon-btn:hover {
    background: var(--ctm-hover);
    color: var(--ctm-ink);
}

.pagebar-icon-btn svg {
    width: 18px;
    height: 18px;
}

/* The page title: screen readers only on a computer (the sidebar marks the page),
   shown on a phone (ui.css's phone block). */
.pagebar-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pagebar-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--ctm-ink-3);
    white-space: nowrap;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ctm-canvas);
    border: 1px solid var(--ctm-line);
}

.pagebar-meta-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ctm-success);
}

.pagebar-meta.is-as-of .pagebar-meta-dot {
    background: var(--ctm-warning-strong);
}

.pagebar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

#filterBarToggle-wrap {
    display: none;
}

body.has-filter-bar #filterBarToggle-wrap {
    display: inline-flex;
}

.pagebar-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--ctm-line-strong);
    border-radius: var(--ctm-radius);
    background: var(--ctm-surface);
    color: var(--ctm-ink-2);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.pagebar-filter-btn:hover {
    border-color: var(--ctm-ink-4);
    color: var(--ctm-ink);
}

.pagebar-filter-btn[aria-expanded="true"] {
    background: var(--ctm-brand-50);
    border-color: var(--ctm-brand-100);
    color: var(--ctm-brand);
}

.pagebar-filter-btn svg {
    width: 14px;
    height: 14px;
}

/* The page's explanation, under the page bar rather than below the fold. */
.page-intro {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 12px;
    padding: 10px 14px;
    background: var(--ctm-surface);
    border: 1px solid var(--ctm-line);
    border-radius: var(--ctm-radius-lg);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ctm-ink-2);
}

.page-intro-icon {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--ctm-brand);
}

.page-intro-text {
    min-width: 0;
}

.page-intro-text.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-intro-more {
    flex: none;
    border: 0;
    background: none;
    padding: 0;
    color: var(--ctm-brand);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.page-intro-more[hidden] {
    display: none;
}

/* The source line at the foot of each page. */
.page-source {
    padding: 10px 4px 0;
    font-size: 12px;
    color: var(--ctm-ink-3);
    text-align: right;
}

.page-source-label {
    font-weight: 600;
    color: var(--ctm-ink-2);
}

/* --------------------------------------------------------------- sidebar -- */

.app-sidebar {
    width: var(--ctm-sidebar-w) !important;
    background: var(--ctm-surface) !important;
    border-right: 1px solid var(--ctm-line) !important;
}

.app-sidebar.collapsed {
    width: 0 !important;
}

.app-sidebar .sidebar-menu {
    padding: 10px 10px 48px !important;
    margin: 0;
}

.sidebar-search {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ctm-surface);
    padding: 2px 0 8px;
    list-style: none;
}

.sidebar-search-box {
    position: relative;
}

.sidebar-search-box svg {
    position: absolute;
    left: 9px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    color: var(--ctm-ink-4);
    pointer-events: none;
}

.sidebar-search input {
    width: 100%;
    height: 32px;
    padding: 0 30px 0 30px;
    font-size: 13px;
    color: var(--ctm-ink);
    background: var(--ctm-canvas);
    border: 1px solid var(--ctm-line);
    border-radius: var(--ctm-radius);
    outline: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.sidebar-search input::placeholder {
    color: var(--ctm-ink-4);
}

.sidebar-search input:focus {
    background: var(--ctm-surface);
    border-color: var(--ctm-brand);
    box-shadow: 0 0 0 3px var(--ctm-brand-ring);
}

.sidebar-search kbd {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    padding: 1px 6px;
    font-family: inherit;
    font-size: 11px;
    color: var(--ctm-ink-3);
    background: var(--ctm-surface);
    border: 1px solid var(--ctm-line-strong);
    border-radius: 4px;
    box-shadow: none;
    pointer-events: none;
}

.sidebar-search input:focus ~ kbd,
.sidebar-search input:not(:placeholder-shown) ~ kbd {
    display: none;
}

.sidebar-empty {
    padding: 8px 10px;
    font-size: 13px;
    color: var(--ctm-ink-3);
    list-style: none;
}

.sidebar-menu a.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px 5px 12px !important;
    margin: 1px 0;
    border-radius: var(--ctm-radius);
    font-size: 13.5px !important;
    font-weight: 400;
    line-height: 1.35;
    color: var(--ctm-ink-2) !important;
    text-decoration: none !important;
}

.sidebar-menu a.sidebar-link:hover {
    background: var(--ctm-hover) !important;
    color: var(--ctm-ink) !important;
}

.sidebar-menu a.sidebar-link.is-active,
.sidebar-menu a.sidebar-link-bold {
    background: var(--ctm-brand-50) !important;
    color: var(--ctm-brand) !important;
    font-weight: 600 !important;
}

.sidebar-menu a.sidebar-link.is-active::before,
.sidebar-menu a.sidebar-link-bold::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: var(--ctm-brand);
}

.sidebar-group {
    list-style: none;
    margin-top: 10px;
}

.sidebar-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 10px 6px 12px;
    border: 0;
    border-radius: var(--ctm-radius);
    background: none;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ctm-ink-3);
    text-align: left;
}

.sidebar-group-toggle:hover {
    color: var(--ctm-ink);
    background: var(--ctm-hover);
}

.sidebar-group-count {
    margin-left: auto;
    margin-right: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ctm-ink-4);
}

.sidebar-group-toggle[aria-expanded="true"] .sidebar-group-count {
    display: none;
}

.sidebar-group-chevron {
    width: 14px;
    height: 14px;
    flex: none;
    transition: transform 0.15s ease;
}

.sidebar-group-toggle[aria-expanded="false"] .sidebar-group-chevron {
    transform: rotate(-90deg);
}

.sidebar-group-links {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
}

.sidebar-group-toggle[aria-expanded="false"] + .sidebar-group-links {
    display: none;
}

/* While searching every group is open and only the matches show. */
.sidebar-menu.is-searching .sidebar-group-toggle[aria-expanded="false"] + .sidebar-group-links {
    display: block;
}

.sidebar-menu.is-searching .sidebar-group-count {
    display: none;
}

.sidebar-menu .is-filtered-out {
    display: none !important;
}

.sidebar-link mark {
    padding: 0;
    background: var(--ctm-brand-100);
    color: inherit;
    border-radius: 2px;
}

/* ------------------------------------------------------------ filter bar -- */

.app-filter-bar {
    background: var(--ctm-surface) !important;
    border-bottom: 1px solid var(--ctm-line) !important;
    padding: 8px 16px !important;
}

.app-filter-bar.filters-collapsed {
    padding: 0 !important;
    border-bottom: none !important;
}

.app-filter-bar .d-flex {
    gap: 8px;
}

.app-filter-bar form#filter-form > .d-flex,
.app-filter-bar form#filter-form > .d-flex > .d-flex {
    row-gap: 8px !important;
    column-gap: 8px !important;
}

/* A label and its control read as one field: tight to its control, clear of
   the field before it. */
.app-filter-bar .filter-label,
.app-filter-bar .form-label,
.app-filter-bar label.filter-label {
    margin: 0 -2px 0 8px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--ctm-ink-3) !important;
    white-space: nowrap;
    line-height: 1;
}

.app-filter-bar .filter-field {
    display: inline-flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-left: 6px;
}

.app-filter-bar .filter-field > .filter-label,
.app-filter-bar .filter-field > .form-label {
    margin: 0 !important;
}

.app-filter-bar .filter-sep {
    width: 1px;
    height: 20px;
    background: var(--ctm-line);
    margin: 0 4px;
    flex: none;
}

/* Every control is the same box: 32px, one border, one radius. */
.app-filter-bar .form-select.form-select-sm,
.app-filter-bar .form-control.form-control-sm,
.app-filter-bar #month-start,
.app-filter-bar #month-end,
.app-filter-bar #as-of-date-picker {
    height: var(--ctm-control-h) !important;
    min-height: var(--ctm-control-h);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 13.5px !important;
    color: var(--ctm-ink) !important;
    background-color: var(--ctm-surface);
    border: 1px solid var(--ctm-line-strong) !important;
    border-radius: var(--ctm-radius) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-filter-bar .form-select.form-select-sm {
    padding-left: 10px !important;
    padding-right: 28px !important;
    background-position: right 8px center;
    background-size: 12px 10px;
}

.app-filter-bar select[name="unit"],
.app-filter-bar select[name="period"],
.app-filter-bar select[name="region_or_country"],
.app-filter-bar select[name="ttf_price_unit"] {
    width: auto !important;
    min-width: 96px !important;
    max-width: none !important;
    flex-shrink: 0;
}

.app-filter-bar .form-select.form-select-sm:hover,
.app-filter-bar .form-control.form-control-sm:hover,
.app-filter-bar #month-start:hover,
.app-filter-bar #month-end:hover,
.app-filter-bar #as-of-date-picker:hover {
    border-color: var(--ctm-ink-4) !important;
}

.app-filter-bar .form-select.form-select-sm:focus,
.app-filter-bar .form-control.form-control-sm:focus,
.app-filter-bar #month-start:focus,
.app-filter-bar #month-end:focus,
.app-filter-bar #as-of-date-picker:focus {
    border-color: var(--ctm-brand) !important;
    box-shadow: 0 0 0 3px var(--ctm-brand-ring) !important;
}

/* The month pickers and the as-of picker are buttons that open a calendar:
   show it. */
.app-filter-bar #month-start,
.app-filter-bar #month-end,
.app-filter-bar #as-of-date-picker {
    padding-left: 28px !important;
    padding-right: 8px !important;
    text-align: left !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='5' width='18' height='16' rx='2'/%3e%3cpath d='M16 3v4M8 3v4M3 11h18'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left 8px center;
    background-size: 14px 14px;
}

.app-filter-bar #month-start,
.app-filter-bar #month-end {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    padding-left: 30px !important;
}

.app-filter-bar #as-of-date-picker {
    width: 116px !important;
    min-width: 116px !important;
}

.app-filter-bar .date-range-container .mx-1 {
    margin: 0 2px !important;
    color: var(--ctm-ink-4);
}

/* Choices.js multi-selects (regions, vessels, statuses): the same box, and the
   chips quiet — a tinted label, not a filled purple pill. */
.app-filter-bar .choices__inner {
    min-height: var(--ctm-control-h) !important;
    padding: 2px 6px !important;
    font-size: 13.5px !important;
    background: var(--ctm-surface) !important;
    border: 1px solid var(--ctm-line-strong) !important;
    border-radius: var(--ctm-radius) !important;
}

.app-filter-bar .choices.is-focused .choices__inner,
.app-filter-bar .choices.is-open .choices__inner {
    border-color: var(--ctm-brand) !important;
    box-shadow: 0 0 0 3px var(--ctm-brand-ring);
}

.app-filter-bar .choices__list--multiple .choices__item {
    margin: 2px 4px 2px 0 !important;
    padding: 2px 4px 2px 8px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 18px;
    color: var(--ctm-brand-600) !important;
    background: var(--ctm-brand-50) !important;
    border: 1px solid var(--ctm-brand-100) !important;
    border-radius: 4px !important;
}

.app-filter-bar .choices[data-type*="select-multiple"] .choices__button {
    margin-left: 6px !important;
    padding-left: 10px !important;
    border-left: 1px solid var(--ctm-brand-100) !important;
    opacity: 0.6;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a359c' stroke-width='2.5' stroke-linecap='round'%3e%3cpath d='M6 6l12 12M18 6L6 18'/%3e%3c/svg%3e") !important;
    background-size: 9px !important;
}

.app-filter-bar .choices__list--dropdown,
.app-filter-bar .choices__list[aria-expanded] {
    border: 1px solid var(--ctm-line) !important;
    border-radius: var(--ctm-radius-lg) !important;
    box-shadow: var(--ctm-shadow-md);
    font-size: 13.5px;
}

.app-filter-bar .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: var(--ctm-hover) !important;
}

.app-filter-bar .choices__input {
    background: transparent !important;
    font-size: 13.5px !important;
}

/* Switches: brand when on, the same size everywhere. */
.app-filter-bar .form-check.form-switch {
    display: inline-flex;
    align-items: center;
    min-height: var(--ctm-control-h);
    margin: 0;
    padding-left: 2.4em;
}

.app-filter-bar .form-switch .form-check-input {
    width: 2.1em;
    height: 1.15em;
    margin-top: 0;
    cursor: pointer;
    border-color: var(--ctm-line-strong);
    box-shadow: none;
}

.app-filter-bar .form-switch .form-check-input:checked {
    background-color: var(--ctm-brand);
    border-color: var(--ctm-brand);
}

.app-filter-bar .form-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--ctm-brand-ring);
    border-color: var(--ctm-brand);
}

/* Button groups (Import / Export, run-rate, groupings): one segmented control,
   the same look as the view switcher inside the pages. */
.app-filter-bar .btn-group {
    padding: 2px;
    gap: 2px;
    background: var(--ctm-hover);
    border: 1px solid var(--ctm-line);
    border-radius: calc(var(--ctm-radius) + 2px);
    height: var(--ctm-control-h);
    align-items: stretch;
}

.app-filter-bar .btn-group > .btn,
.app-filter-bar .btn-group > .btn-check + .btn {
    display: inline-flex;
    align-items: center;
    padding: 0 10px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ctm-ink-3) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--ctm-radius) !important;
    box-shadow: none !important;
}

.app-filter-bar .btn-group > .btn:hover {
    color: var(--ctm-ink) !important;
}

.app-filter-bar .btn-group > .btn.active,
.app-filter-bar .btn-group > .btn-check:checked + .btn {
    color: var(--ctm-ink) !important;
    background: var(--ctm-surface) !important;
    box-shadow: var(--ctm-shadow-sm), 0 0 0 1px var(--ctm-line) !important;
}

/* Dropdown-button selectors (the region / grouping pickers). */
.app-filter-bar .dropdown > .btn.btn-outline-secondary {
    height: var(--ctm-control-h);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    font-size: 13.5px;
    color: var(--ctm-ink);
    background: var(--ctm-surface);
    border: 1px solid var(--ctm-line-strong);
    border-radius: var(--ctm-radius);
}

.app-filter-bar .dropdown > .btn.btn-outline-secondary:hover,
.app-filter-bar .dropdown > .btn.btn-outline-secondary.show {
    color: var(--ctm-ink);
    background: var(--ctm-surface);
    border-color: var(--ctm-ink-4);
}

/* noUiSlider ranges (vessel speed): a thin brand track. */
.app-filter-bar .noUi-target {
    height: 4px;
    border: 0;
    border-radius: 4px;
    background: var(--ctm-line);
    box-shadow: none;
}

.app-filter-bar .noUi-connect {
    background: var(--ctm-brand);
}

.app-filter-bar .noUi-horizontal .noUi-handle {
    width: 16px !important;
    height: 16px !important;
    right: -8px !important;
    top: -6px !important;
    border: 2px solid var(--ctm-brand) !important;
    border-radius: 50% !important;
    background: var(--ctm-surface) !important;
    box-shadow: var(--ctm-shadow-sm) !important;
    cursor: grab;
}

.app-filter-bar .noUi-handle::before,
.app-filter-bar .noUi-handle::after {
    display: none !important;
}

/* The manage-cases cog: an icon button the height of the controls. */
.app-filter-bar .case-manage-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: var(--ctm-control-h);
    height: var(--ctm-control-h);
    padding: 0 !important;
    color: var(--ctm-ink-3);
    background: var(--ctm-surface);
    border: 1px solid var(--ctm-line-strong);
    border-radius: var(--ctm-radius);
}

.app-filter-bar .case-manage-btn:hover {
    color: var(--ctm-brand);
    border-color: var(--ctm-brand);
    background: var(--ctm-surface);
}

.app-filter-bar .case-manage-btn svg {
    width: 15px;
    height: 15px;
}

/* Actions: Update is the page's one filled button; Reset is a text button. */
.app-filter-bar .filter-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}

.app-filter-bar .btn-purple-sm,
.btn-primary-ctm {
    position: relative;
    height: var(--ctm-control-h);
    padding: 0 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ctm-surface);
    background: var(--ctm-brand);
    border: 1px solid var(--ctm-brand);
    border-radius: var(--ctm-radius);
    box-shadow: var(--ctm-shadow-sm);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.app-filter-bar .btn-purple-sm:hover {
    background: var(--ctm-brand-600);
    border-color: var(--ctm-brand-600);
}

/* Update is grey while the filters on screen are the ones the page shows
   (base_app.html), and the brand purple once one of them differs — it goes
   grey again when the change is undone or applied. Grey is a state, not a
   disabled button: it can still be pressed. */
.app-filter-bar .btn-purple-sm.is-idle {
    color: var(--ctm-ink-4);
    background: var(--ctm-surface);
    border-color: var(--ctm-line);
    box-shadow: none;
}

.app-filter-bar .btn-purple-sm.is-idle:hover {
    color: var(--ctm-ink-3);
    background: var(--ctm-hover);
    border-color: var(--ctm-line-strong);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    height: var(--ctm-control-h);
    padding: 0 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ctm-ink-3);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--ctm-radius);
    text-decoration: none;
}

.btn-ghost:hover {
    color: var(--ctm-ink);
    background: var(--ctm-hover);
}

/* Phone: the filter bar is a sheet that slides up over the page. */
.filter-sheet-head,
.filter-sheet-backdrop {
    display: none;
}

@media (max-width: 768px) {
    .app-filter-bar.filters-expanded {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 1600;
        max-height: 85vh;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        border: 0 !important;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -12px 32px rgba(16, 24, 40, 0.18);
        flex: none !important;
    }

    .app-filter-bar.filters-expanded .filter-sheet-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 -16px 12px;
        padding: 14px 16px 12px;
        background: var(--ctm-surface);
        border-bottom: 1px solid var(--ctm-line);
        font-size: 16px;
        font-weight: 600;
    }

    .filter-sheet-head::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 50%;
        width: 36px;
        height: 4px;
        margin-left: -18px;
        border-radius: 4px;
        background: var(--ctm-line-strong);
    }

    .filter-sheet-close {
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 50%;
        background: var(--ctm-hover);
        color: var(--ctm-ink-2);
        font-size: 20px;
        line-height: 1;
    }

    /* The content column is transformed and paint-contained (sidebar_app.html,
       for the sidebar transition), which would trap the fixed sheet inside it
       and under the backdrop. */
    body.filter-sheet-open .app-content,
    body.filter-sheet-open .app-main-content,
    body.filter-sheet-open .app-container {
        transform: none !important;
        contain: none !important;
        will-change: auto !important;
    }

    body.filter-sheet-open .filter-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1550;
        background: rgba(16, 24, 40, 0.38);
    }

    /* Inside the sheet each field is a full-width row: label above, control
       below. */
    .app-filter-bar.filters-expanded form#filter-form,
    .app-filter-bar.filters-expanded form#filter-form .d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100%;
    }

    .app-filter-bar.filters-expanded .filter-field {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        margin-left: 0;
        gap: 6px !important;
    }

    .app-filter-bar.filters-expanded .filter-label,
    .app-filter-bar.filters-expanded .form-label {
        margin: 10px 0 0 !important;
        font-size: 12px !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .app-filter-bar.filters-expanded select,
    .app-filter-bar.filters-expanded .form-select,
    .app-filter-bar.filters-expanded .choices,
    .app-filter-bar.filters-expanded .dropdown > .btn,
    .app-filter-bar.filters-expanded .date-range-container input[type="text"],
    .app-filter-bar.filters-expanded #as-of-date-picker {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 40px !important;
        font-size: 15px !important;
    }

    .app-filter-bar.filters-expanded form#filter-form .date-range-container {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* Manage Cases is in the account menu; the sheet keeps to the filters. */
    .app-filter-bar.filters-expanded .case-manage-btn,
    .app-filter-bar.filters-expanded .case-manage-btn + .tt-text {
        display: none !important;
    }

    .app-filter-bar.filters-expanded .date-range-container input[type="text"],
    .app-filter-bar.filters-expanded #month-start,
    .app-filter-bar.filters-expanded #month-end {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .app-filter-bar.filters-expanded .tt {
        width: 100%;
    }

    .app-filter-bar.filters-expanded .btn-group {
        width: 100%;
        height: 40px;
    }

    .app-filter-bar.filters-expanded .btn-group > .btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .app-filter-bar.filters-expanded .filter-actions {
        position: sticky;
        bottom: calc(-16px - env(safe-area-inset-bottom, 0px));
        flex-direction: row !important;
        margin: 12px -16px -16px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--ctm-surface);
        border-left: 0;
        border-top: 1px solid var(--ctm-line);
    }

    .app-filter-bar.filters-expanded .filter-actions .tt:first-child {
        flex: 1 1 auto;
    }

    .app-filter-bar.filters-expanded .filter-actions .btn-purple-sm {
        width: 100%;
        height: 44px;
        font-size: 15px;
    }

    .app-filter-bar.filters-expanded .filter-actions .btn-ghost {
        height: 44px;
        width: auto;
    }

    /* The page bar on a phone: the title gets the room, the date sits under
       it. */
    .hamburger-header {
        padding: 6px 12px !important;
    }

    .hamburger-header > .d-flex {
        flex-wrap: nowrap !important;
    }

    .pagebar-title {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        clip: auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 15px;
        font-weight: 600;
        color: var(--ctm-ink);
    }

    .pagebar-meta {
        padding: 2px 7px;
        font-size: 11.5px;
    }

    .pagebar-meta-label {
        display: none;
    }

    .page-intro {
        margin: 0 0 8px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .pagebar-meta {
        display: none;
    }
}

/* ------------------------------------------------------------ content -- */
/* The page's content sits on white, as the iframe inside it does
   (dash_ui.css); the canvas grey is the gutter round cards on other pages. */
.app-content,
.app-main-content {
    background: var(--ctm-surface);
}

main.container-fluid:has(> .app-container),
main.container-fluid:has(> .hamburger-header) {
    background: var(--ctm-surface);
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.app-main-content {
    padding: 12px 20px 16px !important;
}

@media (max-width: 768px) {
    .app-main-content {
        padding: 10px 10px 14px !important;
    }
}

/* Shipping's bar: its page filters first, then the shared row ending in Update. */
.app-filter-bar form#filter-form > .nav-row-main {
    order: 2;
}

/* ------------------------------------------------- filter bar: plain set --
   The research-tool register rather than the app one: labels in ink at the
   reading size, 4px corners, choices as an outlined button group with the
   chosen one filled, Reset as a quiet outlined button. Later in the file than
   the rules above, so these win at equal specificity. */
.app-filter-bar {
    --ctm-radius: 4px;
    --ctm-control-h: 28px; /* about 7px above and below 14px text */
}

.app-filter-bar .choices__inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.app-filter-bar .filter-label,
.app-filter-bar .form-label,
.app-filter-bar label.filter-label {
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: var(--ctm-ink) !important;
}

.app-filter-bar .form-select.form-select-sm,
.app-filter-bar .form-control.form-control-sm,
.app-filter-bar #month-start,
.app-filter-bar #month-end,
.app-filter-bar #as-of-date-picker,
.app-filter-bar .choices__inner,
.app-filter-bar .choices__input,
.app-filter-bar .dropdown > .btn.btn-outline-secondary {
    font-size: 14px !important;
}

.app-filter-bar .choices__list--multiple .choices__item {
    border-radius: 3px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

.app-filter-bar .btn-group {
    padding: 0;
    gap: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.app-filter-bar .btn-group > .btn,
.app-filter-bar .btn-group > .btn-check + .btn {
    padding: 0 12px !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: var(--ctm-ink-2) !important;
    background: var(--ctm-surface) !important;
    border: 1px solid var(--ctm-line-strong) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.app-filter-bar .btn-group > .btn:not(:first-child),
.app-filter-bar .btn-group > .btn-check + .btn:not(:first-of-type) {
    margin-left: -1px !important;
}

.app-filter-bar .btn-group > :is(.btn, .btn-check + .btn):first-of-type {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.app-filter-bar .btn-group > :is(.btn, .btn-check + .btn):last-child {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.app-filter-bar .btn-group > .btn:hover {
    color: var(--ctm-ink) !important;
    background: var(--ctm-hover) !important;
}

.app-filter-bar .btn-group > .btn.active,
.app-filter-bar .btn-group > .btn-check:checked + .btn,
.app-filter-bar .btn-group > .btn.active:hover,
.app-filter-bar .btn-group > .btn-check:checked + .btn:hover {
    position: relative;
    z-index: 1;
    color: var(--button-text-color) !important;
    background: var(--ctm-brand) !important;
    border-color: var(--ctm-brand) !important;
}

.app-filter-bar .btn-purple-sm {
    border-radius: 4px;
    font-weight: 500;
    box-shadow: none;
}

.app-filter-bar .btn-ghost {
    color: var(--ctm-ink-2);
    background: var(--ctm-surface);
    border: 1px solid var(--ctm-line-strong);
    border-radius: 4px;
    font-weight: 400;
}

.app-filter-bar .btn-ghost:hover {
    color: var(--ctm-ink);
    background: var(--ctm-surface);
    border-color: var(--ctm-ink-4);
}

@media (max-width: 768px) {
    .app-filter-bar.filters-expanded .filter-label,
    .app-filter-bar.filters-expanded .form-label {
        font-size: 13.5px !important;
        text-transform: none;
        letter-spacing: 0;
    }
}

/* ------------------------------------------- sidebar: section headings --
   A section's name reads as a heading, not as one more link: dark ink, bold,
   small capitals, a hairline rule above each section after the first; the
   links under it stay regular weight in the lighter ink. */
.sidebar-group {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--ctm-line);
}

.sidebar-search + .sidebar-group,
.sidebar-menu > li:not(.sidebar-group):not(.sidebar-search) + .sidebar-group {
    margin-top: 10px;
}

.sidebar-group-toggle {
    padding: 8px 10px 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ctm-ink);
}

.sidebar-group-toggle:hover {
    color: var(--ctm-brand);
    background: none;
}

.sidebar-group-chevron,
.sidebar-group-count {
    color: var(--ctm-ink-4);
}

.sidebar-menu a.sidebar-link:not(.is-active) {
    color: var(--ctm-ink-2) !important;
}

/* The first section (Overview) opens the list: no rule above it. */
.sidebar-menu > .sidebar-group:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* ------------------------------------------------------------ filter toggle --
   The page bar's button says what it will do ("Hide filters" / "Show filters"),
   and stands out while the filters are hidden: it is the way back. */
.pagebar-filter-btn,
.pagebar-filter-btn[aria-expanded="true"] {
    color: var(--ctm-ink-2);
    background: var(--ctm-surface);
    border-color: var(--ctm-line-strong);
}

.pagebar-filter-btn:hover {
    color: var(--ctm-ink);
    border-color: var(--ctm-ink-4);
}

/* Hidden filters: the button is the way back, so it stands out. */
.pagebar-filter-btn[aria-expanded="false"] {
    color: var(--ctm-brand);
    background: var(--ctm-brand-50);
    border-color: var(--ctm-brand-100);
}

.pagebar-filter-caret {
    width: 13px !important;
    height: 13px !important;
    transition: transform 0.15s ease;
}

.pagebar-filter-btn[aria-expanded="false"] .pagebar-filter-caret {
    transform: rotate(180deg);
}

/* ---------------------------------------------------------- empty state -- */
/* "Nothing here (yet)" on a Django page: base/partials/empty_state.html, the
   twin of the Dash empty state (dash_apps/shared_utils/empty_states.py). A quiet
   ink, a dashed hairline, no brand colour and no Bootstrap blue. */
.ctm-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 40px 24px;
    margin: 8px 0;
    text-align: center;
    background: var(--ctm-surface);
    border: 1px dashed var(--ctm-line-strong);
    border-radius: var(--ctm-radius-lg);
}

.ctm-empty-state-mark {
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
    fill: none;
    stroke: var(--ctm-ink-4);
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.ctm-empty-state-reason {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ctm-ink-2);
}

.ctm-empty-state-action {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ctm-ink-3);
}

/* Any Bootstrap info / primary / light alert left in a template reads as the
   house notice — neutral canvas, hairline, ink — never the Bootstrap blue box. */
.alert-info,
.alert-primary,
.alert-light,
.alert-secondary {
    --bs-alert-color: var(--ctm-ink-2);
    --bs-alert-bg: var(--ctm-surface);
    --bs-alert-border-color: var(--ctm-line);
    --bs-alert-link-color: var(--ctm-brand);
    border-radius: var(--ctm-radius-lg);
}

.badge.bg-info,
.text-bg-info {
    color: var(--ctm-brand-600) !important;
    background-color: var(--ctm-brand-100) !important;
}