/* ============================================================
   Shared page-header utilities — used by any page or sub-page
   that wants a responsive header with a title block + actions
   that collapses gracefully on mobile.

   Usage:
     <div class="page-header">
         <div class="page-header__title-block">
             <h4 class="page-header__title">…</h4>
             <small class="page-header__subtitle">…</small>
         </div>
         <div class="page-header__actions">
             <button class="btn btn-success btn-collapse-label">
                 <i class="fas fa-plus"></i>
                 <span class="btn-collapse-label__text">Add</span>
             </button>
         </div>
     </div>

   Pair with `.active-filter-strip` (+ optional `--with-remove`)
   on a row of active-filter chips below the header.
   ============================================================ */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: .5rem;
}

.page-header__title-block {
    min-width: 0;
    flex: 1 1 auto;
}

.page-header__title {
    margin-bottom: 0;
    font-size: 1.5rem;
    line-height: 1.25;
}

.page-header__subtitle {
    display: block;
    margin-top: .15rem;
    color: var(--bs-secondary-color);
}

.page-header__actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: .5rem;
}

.dashboard-switcher {
    min-width: 0;
}

.dashboard-switcher > * {
    flex: 0 0 auto;
}

.dashboard-switcher .dashboard-tab {
    display: inline-flex;
    align-items: center;
}

.dashboard-selector-shell {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    background: var(--bs-body-bg);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
    padding: 4px 6px;
}

.dashboard-selector-shell:focus-within {
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .12);
}

.dashboard-selector-shell .dashboard-switcher {
    flex: 1 1 auto;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0;
    max-width: 100%;
}

.dashboard-selector-shell .dashboard-switcher::-webkit-scrollbar {
    height: 4px;
}

[data-bs-theme="dark"] .dashboard-selector-shell {
    background: var(--bs-tertiary-bg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}

/* ──── Button with a collapsible label ────────────────────────
   Collapses its label to icon-only below the md breakpoint.
   The icon stays visible; tooltip via `title` preserves a11y.
*/
.btn-collapse-label {
    white-space: nowrap;
}

.btn-collapse-label__text {
    margin-inline-start: .4rem;
}

/* ──── Active filter strip ────────────────────────────────────
   A row of chips that wraps on desktop and becomes a single
   horizontal-scroll row on mobile, with a trailing fade that
   hints at off-screen content.

   Variant: `.active-filter-strip--with-remove` — use when chips
   contain interactive remove (×) buttons. Drops the trailing
   fade so the last × isn't obscured.
*/
.active-filter-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}

.active-filter-strip > * {
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    /* Title shrinks; subtitle disappears */
    .page-header__title {
        font-size: 1.15rem;
    }

    .page-header__subtitle {
        display: none !important;
    }

    .page-header__actions {
        gap: .35rem;
    }

    .page-header__dashboard-selector {
        flex: 1 1 100%;
    }

    .dashboard-switcher {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .25rem;
        gap: .4rem !important;
        max-width: 100%;
        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    }

    .dashboard-switcher > * {
        flex: 0 0 auto;
    }

    .dashboard-switcher .dashboard-tab {
        flex: 0 0 auto;
        max-width: min(78vw, 220px);
    }

    .dashboard-switcher .dashboard-tab span {
        min-width: 0;
        max-width: min(58vw, 160px);
    }

    .dashboard-switcher .dropdown {
        flex: 0 0 auto;
    }

    [dir="rtl"] .dashboard-switcher {
        mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent 100%);
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent 100%);
    }

    .dashboard-switcher::-webkit-scrollbar {
        height: 4px;
    }

    /* Button label collapses to icon-only */
    .btn-collapse-label {
        padding-inline: .55rem;
    }

    .btn-collapse-label__text {
        display: none;
    }

    /* Active filter strip becomes a single horizontal scroll row */
    .active-filter-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .25rem;
        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    }

    [dir="rtl"] .active-filter-strip {
        mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent 100%);
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent 100%);
    }

    .active-filter-strip::-webkit-scrollbar {
        height: 4px;
    }

    /* No fade when chips have ×-remove buttons — keeps the last × tappable */
    .active-filter-strip--with-remove {
        mask-image: none;
        -webkit-mask-image: none;
    }
}