/**
 * Mobile kit — shared building blocks for list/library pages (mobile review slice 3).
 *
 *   .lib-header          components/_library_header.html.twig   title + actions, icon-only secondaries on phones
 *   .bulk-bar            components/_bulk_bar.html.twig         selection bar; fixed bottom sheet below lg
 *   .mobile-select-all   components/_mobile_select_all.html.twig proxy for a desktop-only select-all checkbox
 *   .filters-disclosure  components/_filters_disclosure.html.twig "Filters (n)" toggle below sm
 *   .action-sheet        js/universal-components/mobile-kit.js   bottom sheet built from existing row menus
 *
 * Plain unlayered CSS on purpose: unlayered .btn beats Tailwind utilities, so
 * these rules must be unlayered too. Visibility of .bulk-bar is still toggled
 * with the Tailwind `hidden` class by page JS, so .bulk-bar itself never sets
 * `display` — only its children do.
 */

/* ===========================================
   LIBRARY HEADER
   =========================================== */
.lib-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.lib-header__text {
    flex: 1 1 16rem;
    min-width: 0;
}

.lib-header__subtitle {
    color: var(--et-on-surface-variant, var(--text-secondary));
    margin: 0;
}

.lib-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.lib-header__actions .btn-badge-wrap {
    position: relative;
    display: inline-flex;
}

.lib-header__badge {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 9999px;
    background: var(--color-danger);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.25rem;
    text-align: center;
    pointer-events: none;
}

@media (max-width: 639.98px) {
    .lib-header .lib-title {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    /* Secondary actions collapse to 44px icon buttons; the primary
       (.btn-primary) keeps its label. aria-label on each button carries the
       accessible name. */
    .lib-header__actions .btn:not(.btn-primary) .btn-label {
        display: none;
    }

    .lib-header__actions .btn:not(.btn-primary):has(.btn-label) {
        min-width: 44px;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* ===========================================
   BULK BAR
   =========================================== */
.bulk-bar {
    background-color: var(--et-info-container);
    border: var(--ghost-border);
    border-radius: var(--component-radius-lg, 0.5rem);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.bulk-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.bulk-bar__summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--et-on-surface);
}

.bulk-bar__clear {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-info);
    font-size: 0.875rem;
    cursor: pointer;
}

.bulk-bar__clear:hover {
    text-decoration: underline;
}

.bulk-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Wrapper for a button + its menu (Organize / Share / Export). */
.bulk-bar__group {
    position: relative;
}

@media (max-width: 1023.98px) {
    /* Bottom sheet: always visible while a selection exists, wherever the
       selected row is on the page. */
    .bulk-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-sticky, 1020);
        margin: 0;
        border-radius: 1rem 1rem 0 0;
        border-width: 1px 0 0;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
        animation: bulk-bar-rise 0.2s ease-out;
    }

    .bulk-bar__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
    }

    .bulk-bar__summary {
        justify-content: space-between;
    }

    .bulk-bar__clear {
        min-height: 44px;
        padding: 0 0.25rem;
    }

    .bulk-bar__actions {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        margin-left: 0;
    }

    .bulk-bar__actions > .btn,
    .bulk-bar__group > .btn {
        width: 100%;
    }

    /* Menus open as a sheet above the bar. --bulk-bar-h is kept current by
       mobile-kit.js; the fallback covers a two-row bar. */
    .bulk-bar__menu {
        position: fixed !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        top: auto !important;
        bottom: calc(var(--bulk-bar-h, 8rem) + 0.5rem) !important;
        width: auto !important;
        max-height: 60dvh;
        overflow-y: auto;
        margin: 0 !important;
    }

    /* Keep the last rows of the page reachable above the fixed bar. */
    html:has(.bulk-bar:not(.hidden)) .main-content-v3 {
        padding-bottom: calc(var(--bulk-bar-h, 8rem) + 1.5rem);
    }
}

@keyframes bulk-bar-rise {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ===========================================
   MOBILE SELECT-ALL (proxy for a desktop <thead> checkbox)
   =========================================== */
.mobile-select-all {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0 1rem;
    border-bottom: 1px solid var(--bg-tertiary, #e5e7eb);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--et-on-surface);
    cursor: pointer;
    user-select: none;
}

@media (min-width: 1024px) {
    .mobile-select-all {
        display: none;
    }
}

/* ===========================================
   FILTERS DISCLOSURE
   =========================================== */
.filters-disclosure .filters-disclosure__toggle {
    display: none;
}

.filters-disclosure__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 9999px;
    background: var(--goal-red, var(--color-primary));
    color: #fff;
    font-size: 0.75rem;
    line-height: 1;
}

.filters-disclosure__chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.filters-disclosure.is-open .filters-disclosure__chevron {
    transform: rotate(180deg);
}

@media (max-width: 639.98px) {
    .filters-disclosure .filters-disclosure__toggle {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .filters-disclosure:not(.is-open) .filters-disclosure__body {
        display: none;
    }

    .filters-disclosure.is-open .filters-disclosure__body {
        margin-top: 0.75rem;
    }
}

/* Filter controls: one column on phones (a fixed 2-up grid truncated select
   labels at 390px), as many 10rem columns as fit on tablets, a wrapping row on
   desktop. Width of each control stays with the page's own classes. */
.filters-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    gap: 0.75rem;
    align-items: center;
}

.filters-row > label,
.filters-row > .filters-row__full {
    grid-column: 1 / -1;
}

@media (min-width: 1024px) {
    .filters-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem 1rem;
    }

    /* Controls share the row: unlayered .form-select { width: 100% } beats
       Tailwind's lg:w-auto, so size them by flex instead. Checkbox labels
       keep their natural width. */
    .filters-row > * {
        flex: 1 1 12rem;
        min-width: 0;
    }

    .filters-row > label,
    .filters-row > .filters-row__full {
        flex: 0 0 auto;
    }
}

/* Min – max pair (e.g. RPE): label, select, dash, select on one line that
   never overflows its cell. */
.range-filter {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
}

.range-filter > span {
    font-size: 0.875rem;
    color: var(--et-on-surface-variant, var(--text-secondary));
    white-space: nowrap;
}

.range-filter > select {
    min-width: 0;
}

@media (min-width: 1024px) {
    .range-filter {
        display: flex;
    }
}

/* ===========================================
   ACTION SHEET (built by mobile-kit.js)
   =========================================== */
.action-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: var(--z-modal-backdrop, 9000);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.action-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal, 9010);
    display: flex;
    flex-direction: column;
    max-height: 75vh;
    max-height: 75dvh;
    background: var(--bg-elevated, #fff);
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0.2s ease;
}

.action-sheet.is-open {
    transform: translateY(0);
    visibility: visible;
}

.action-sheet-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.action-sheet__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem 0.5rem 1rem;
    border-bottom: 1px solid var(--bg-tertiary, #e5e7eb);
}

.action-sheet__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-sheet__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 9999px;
    background: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
}

.action-sheet__body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem 0;
}

.action-sheet__group-label {
    padding: 0.75rem 1.25rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.action-sheet__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1.25rem;
    border: none;
    background: none;
    text-align: left;
    font-size: 1rem;
    color: var(--text-primary);
    cursor: pointer;
}

.action-sheet__item:active,
.action-sheet__item:focus-visible {
    background: var(--bg-secondary);
}

.action-sheet__item i {
    width: 1.25rem;
    text-align: center;
    color: var(--text-muted);
}

.action-sheet__item--danger,
.action-sheet__item--danger i {
    color: var(--color-danger);
}

@media (max-width: 768px) {
    html:has(.action-sheet.is-open) {
        overflow: hidden;
    }
}

/* ===========================================
   INBOX ROW (plans + drills inbox, _inbox_row.html.twig)
   Phones: the body takes the full width beside the checkbox and the actions
   drop to their own row with labels (was ~90px for the title at 360px).
   =========================================== */
.inbox-row__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 640px) {
    .inbox-row__label {
        display: inline;
    }
}

@media (max-width: 639.98px) {
    /* Body fills what's left beside the checkbox (+ thumbnail); the
       full-width actions row below forces the wrap. */
    .inbox-row__body {
        flex: 1 1 0;
    }

    .inbox-row__title {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .inbox-row__actions {
        width: 100%;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }

    .inbox-row__actions .btn {
        width: 100%;
    }
}

/* ===========================================
   FORM FOOTER (settings pages: Save / Reset + status)
   Phones: status under full-width buttons, pinned to the bottom of the
   screen — the non-wrapping row overflowed ("Reset to Factory Defaults").
   =========================================== */
.form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.form-footer__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

@media (max-width: 639.98px) {
    .form-footer {
        position: sticky;
        bottom: 0;
        z-index: 6;
        flex-direction: column;
        align-items: stretch;
        margin: 0 -1rem;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        background: var(--et-surface-container-lowest, #fff);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    }

    .form-footer__actions {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }

    .form-footer__actions .btn {
        width: 100%;
    }

    .form-footer__actions [hidden] {
        display: none;
    }
}

/* ===========================================
   LINES ROW (plan builder Lines & Games + /plans/settings)
   Below md: label on its own row, then a 6rem Color beside the numbers —
   grid-cols-4 left the Color input ~44–60px wide. From md up: one row of
   label | 6rem Color | numbers (md:grid-cols-12 squeezed Color to ~56px in
   the half-width settings columns once Tailwind variants began winning).
   =========================================== */
@media (min-width: 768px) {
    .lines-row {
        grid-template-columns: 4.5rem 6rem minmax(0, 1fr);
    }

    .lines-row > * {
        grid-column: auto;
    }
}

@media (max-width: 767.98px) {
    .lines-row {
        grid-template-columns: 6rem minmax(0, 1fr);
    }

    .lines-row > label {
        grid-column: 1 / -1;
    }

    .lines-row > input {
        grid-column: auto;
    }
}

/* ===========================================
   VIDEO PICKER (pages/drills/_video_picker_modal — drill add + playbook edit)
   On phones the modal is already a scrolling bottom sheet; the four nested
   max-h-48 scroll boxes just trapped touch scrolling.
   =========================================== */
@media (max-width: 640px) {
    #d6-video-picker-modal .overflow-y-auto.max-h-48 {
        max-height: none;
        overflow-y: visible;
    }
}

/* ===========================================
   GLOBAL LEFTOVERS (mobile review §3, slice 7b)
   =========================================== */

/* Tab strips (.nav-tabs, components.css) had no wrap and no overflow, so 4+
   tabs ran off the screen: scroll them instead, with 44px tabs. */
@media (max-width: 767.98px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: var(--space-sm, 0.5rem);
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-tab {
        flex-shrink: 0;
        white-space: nowrap;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding-left: var(--space-md, 1rem);
        padding-right: var(--space-md, 1rem);
    }
}

/* Segmented .btn-group: overflow:hidden clipped extra segments; span the
   width and scroll if it still doesn't fit. */
@media (max-width: 639.98px) {
    .btn-group {
        display: flex;
        width: 100%;
        overflow-x: auto;
    }

    .btn-group .btn {
        flex: 1 0 auto;
        min-height: 44px;
    }

    /* 12px table text was too small to read; 14px. */
    .data-table {
        font-size: var(--text-sm, 0.875rem);
    }
}

/* Upgrade lock tooltip (components/upgrade_prompt, style 'tooltip'): also
   opens on tap/focus, and wraps instead of running off the screen edge. */
.upgrade-tip:focus .upgrade-tip__bubble,
.upgrade-tip:focus-within .upgrade-tip__bubble {
    opacity: 1;
    visibility: visible;
}

.upgrade-tip__bubble {
    white-space: normal;
    width: max-content;
    max-width: min(16rem, 80vw);
    text-align: center;
}

.upgrade-tip {
    min-width: 24px;
    min-height: 24px;
    justify-content: center;
}