/*
 * App shell extensions — only what the Neo Elite kit does not provide: the topbar title and page
 * actions, the compact client switcher, section tabs and the sidebar footer. Tokens only.
 */

/* ---- Contrast ---------------------------------------------------------------------------- */

/* Secondary text comes from brand.css (WCAG AA on the tinted page and on glass). `.text-secondary`
   follows the theme's secondary text colour in both schemes (the kit's secondary *brand* grey is too
   dim on the dark surfaces). */

.text-secondary {
    --bs-secondary-rgb: var(--bs-secondary-color-rgb);
}

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

/* Long titles (dossier names) ellipsize instead of pushing the account menu out: the kit sets
   flex-shrink: 0 on every topbar child. */
.ui-topbar > .pv-topbar-heading,
.pv-topbar-heading {
    display: flex;
    flex: 1 1 0;
    align-items: baseline;
    gap: 0.75rem;
    min-width: 0;
}

.pv-topbar-title {
    flex: 0 1 auto;
    margin: 0;
    overflow: hidden;
    color: var(--bs-emphasis-color);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Muted one-liner, desktop only: it is context, never required to use the page */
.pv-topbar-subtitle {
    display: none;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 1200px) {
    .pv-topbar-subtitle {
        display: block;
    }
}

.pv-topbar-break {
    display: none;
}

/* Page actions (teleported by <x-ui.page-header>): natural width, never wrapping on desktop */
.pv-topbar-actions:empty {
    display: none;
}

.pv-topbar-actions-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.pv-topbar-actions-inner > .btn,
.pv-topbar-actions-inner > .dropdown > .btn {
    white-space: nowrap;
}

/* Page filters (teleported by <x-ui.topbar-tools>) take the room between the title and the client
   and actions; the title keeps its natural width and ellipsizes only when the row is full. */
.pv-topbar-tools {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    min-width: 0;
}

.pv-topbar-tools:empty {
    display: none;
}

.pv-topbar:has(> .pv-topbar-tools:not(:empty)) > .pv-topbar-heading {
    flex: 0 1 auto;
}

.pv-topbar:has(> .pv-topbar-tools:not(:empty)) .pv-topbar-subtitle {
    display: none;
}

.pv-topbar-tools > .pv-topbar-tools-inner {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* Controls keep their width (zero specificity: page rules such as a field width may shrink) */
:where(.pv-topbar-tools-inner) > * {
    flex-shrink: 0;
}

/* The search field gives way first when the row is full */
.pv-topbar-tools-inner > .pv-search {
    flex: 1 1000 14rem;
    width: auto;
    min-width: 10rem;
    max-width: 22rem;
}

/* Compact select (period, client, category) beside the search */
.pv-topbar-field {
    flex: 0 1 11.5rem;
    min-width: 9.5rem;
    margin: 0;
}

.pv-topbar-tools-inner .pv-filter-tabs {
    max-width: none;
    overflow: visible;
}

/* Result count and period, pushed against the client and actions. Shown whole or not at all: when
   the row is full (the search field has given way first) the box shrinks, its text wraps behind a
   zero-width first item onto a second line, and that line is clipped. */
.pv-topbar-meta {
    display: flex;
    flex: 0 1 auto;
    position: relative; /* clips visually-hidden text too */
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    height: 1.25rem;
    margin-inline-start: auto;
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
    line-height: 1.25rem;
    white-space: nowrap;
}

.pv-topbar-meta::before {
    content: "";
    height: 100%;
}

.pv-topbar-meta strong {
    color: var(--bs-emphasis-color);
    font-weight: 600;
}

/* With filters in the row, secondary page actions (export, refresh) keep only their icon until the
   screen is wide; the label stays as their accessible name. */
@media (min-width: 1400px) and (max-width: 1599.98px) {
    .pv-topbar:has(> .pv-topbar-tools:not(:empty)):not(:has(.pv-topbar-tools-wide)) .pv-topbar-actions-inner > .btn-outline-secondary > span:not(.badge, .spinner-border) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.pv-filter-tabs-responsive {
    display: flex;
    min-width: 0;
}

.pv-filter-menu-panel {
    width: min(18rem, calc(100vw - 1rem));
}

.pv-filter-menu > .btn,
.pv-filter-tabs-menu > .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.pv-topbar-account .dropdown-item:not(.active) > .pv-theme-check {
    display: none;
}

.pv-topbar-account > .btn {
    max-width: 12rem;
}

.pv-account-menu {
    --bs-dropdown-min-width: 19rem;
    max-width: calc(100vw - 2rem);
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
}

.pv-account-reveal.collapsing {
    transition: height 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.list-group > .pv-account-reveal {
    overflow: hidden;
    border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
    border-top: 0;
    border-radius: 0 0 var(--bs-list-group-border-radius) var(--bs-list-group-border-radius);
}

.list-group-item:has(+ .pv-account-reveal.collapse:not(.show)) {
    border-radius: 0 0 var(--bs-list-group-border-radius) var(--bs-list-group-border-radius);
}

@media (prefers-reduced-motion: reduce) {
    .pv-account-reveal.collapsing {
        transition: none;
    }
}

/* Medium desktops: the filters would be squeezed beside the title, client and actions, so they take a
   second row of the topbar, which then scrolls away with the page like on phones. Dense filter sets
   (`wide`) keep that row until the screen is wide. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .ui-topbar.pv-topbar:has(> .pv-topbar-tools:not(:empty)) {
        position: relative;
        flex-wrap: wrap;
        row-gap: 0.25rem;
        height: auto;
        min-height: var(--ui-topbar-height);
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .pv-topbar:has(> .pv-topbar-tools:not(:empty)) > .pv-topbar-heading {
        flex: 1 1 0;
    }

    .pv-topbar-tools {
        order: 1;
        flex: 0 0 100%;
    }
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
    .ui-topbar.pv-topbar:has(.pv-topbar-tools-wide) {
        position: relative;
        flex-wrap: wrap;
        row-gap: 0.25rem;
        height: auto;
        min-height: var(--ui-topbar-height);
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .ui-topbar.pv-topbar:has(.pv-topbar-tools-wide) > .pv-topbar-heading {
        flex: 1 1 0;
    }

    .pv-topbar:has(.pv-topbar-tools-wide) > .pv-topbar-tools {
        order: 1;
        flex: 0 0 100%;
    }
}

/*
 * Below lg the page actions are icon-only, so they stay on the first row between the title and
 * help; only the client switcher wraps onto a second row, so it never squeezes the title.
 */
@media (max-width: 991.98px) {
    .ui-topbar.pv-topbar {
        flex-wrap: wrap;
        row-gap: 0;
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
    }

    .pv-topbar-heading {
        order: 1;
    }

    .pv-topbar-actions {
        order: 2;
    }

    .pv-topbar-help {
        order: 3;
    }

    .pv-topbar-account {
        order: 4;
    }

    .pv-topbar-break {
        display: block;
        order: 5;
        flex: 0 0 100%;
        height: 0;
    }

    .pv-topbar-client {
        order: 6;
        min-width: 0;
        margin: 0.25rem 0 0.125rem;
    }

    /* Page filters get their own full row; the topbar then scrolls away with the page instead of
       keeping three rows pinned over a phone screen. */
    .pv-topbar-tools {
        order: 7;
        flex: 0 0 100%;
        margin: 0.25rem 0 0.125rem;
    }

    .ui-topbar.pv-topbar:has(> .pv-topbar-tools:not(:empty)) {
        position: relative;
    }

    .pv-topbar:has(> .pv-topbar-tools:not(:empty)) > .pv-topbar-heading {
        flex: 1 1 0;
    }

    .pv-topbar-tools-inner {
        flex-wrap: wrap;
    }

    .pv-topbar-field,
    .pv-topbar-tools-inner > .pv-search {
        flex: 1 1 10rem;
        max-width: none;
    }

    .pv-topbar-actions-inner {
        gap: 0.25rem;
    }
}

/* ---- Client switcher --------------------------------------------------------------------- */

.pv-client-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    color: var(--bs-body-color);
    font-size: 0.8125rem;
}

.pv-client-chip > i {
    color: var(--bs-secondary-color);
}

.pv-client-name {
    min-width: 0;
    max-width: 11rem;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .pv-client-name {
        max-width: 14rem;
    }
}

/* ---- Section tabs ------------------------------------------------------------------------ */

/* Aligned on the content edges; scrolls sideways on narrow screens instead of wrapping */
.pv-section-tabs {
    flex-shrink: 0;
    padding: 0.5rem 2rem 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.pv-section-tabs::-webkit-scrollbar {
    display: none;
}

.pv-section-tabs .nav-underline {
    min-width: max-content;
}

@media (max-width: 575.98px) {
    .pv-section-tabs {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

/* The content padding above the first block would double the gap under the tabs */
.pv-section-tabs + .ui-content {
    padding-top: 1.25rem;
}

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

/* Offcanvas body is a column so the footer sits at the bottom on mobile as well */
.ui-sidebar > .offcanvas-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.pv-sidebar-footer {
    margin-top: auto;
    padding: 0.5rem 0.75rem 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.pv-sidebar-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 0.5rem 0.625rem 0;
    font-size: 0.75rem;
}

.pv-sidebar-legal a {
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.pv-sidebar-legal a:hover,
.pv-sidebar-legal a:focus-visible {
    color: var(--bs-emphasis-color);
    text-decoration: underline;
}

/* ---- Tom Select dropdown opened upwards (positioned by core.js) --------------------------- */

.pv-select-up {
    box-shadow: var(--bs-box-shadow);
}

/* ---- Toasts ------------------------------------------------------------------------------ */

/* Below the floating topbar so a toast never hides the help button or the account menu */
.pv-toasts {
    top: calc(var(--ui-shell-gap, 0.5rem) + var(--ui-topbar-height, 3.5rem)) !important;
    max-width: 100%;
    pointer-events: none;
}

.pv-toasts > .toast {
    pointer-events: auto;
}

@media (max-width: 991.98px) {
    .pv-toasts {
        top: 6.25rem !important;
        width: 100%;
    }

    .pv-toasts > .toast {
        width: 100%;
    }
}