/* ═══════════════════════════════════════════════════════════
   Toolbar — the search / filter / action strip above a data view.

   The existing .tn-filter-bar (feedback.css) stacks every control into a
   vertical column on mobile, which pushes the actual data off-screen
   before the user has seen a single row. This is the phone-first
   alternative: search stays full-width and prominent, filters become a
   horizontally-scrollable chip row (or collapse behind one "Filter"
   button that opens a sheet), and actions sit on their own row.

   Composition — use only the parts a screen needs:
     <div class="tn-toolbar">
       <div class="tn-toolbar-row">
         <div class="tn-toolbar-search">
           <i class="bi bi-search"></i>
           <input class="tn-toolbar-search-input" placeholder="Sök artikel…">
           <button class="tn-toolbar-search-clear"><i class="bi bi-x"></i></button>
         </div>
         <button class="tn-filter-trigger">
           <i class="bi bi-sliders"></i> Filter
           <span class="tn-filter-trigger-count">2</span>
         </button>
       </div>
       <div class="tn-filter-scroll">…tn-chip buttons…</div>
       <div class="tn-toolbar-meta">
         <span class="tn-toolbar-count">142 artiklar</span>
         <div class="tn-toolbar-actions">…tn-btn…</div>
       </div>
     </div>
   ═══════════════════════════════════════════════════════════ */

.tn-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--tn-space-sm);
    margin-bottom: var(--tn-space-md);
}

.tn-toolbar-row {
    display: flex;
    align-items: center;
    gap: var(--tn-space-sm);
}

/* ── Search — the one control that should never be hidden or shrunk.
   Takes all remaining width so it stays the obvious primary affordance. ── */
.tn-toolbar-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.tn-toolbar-search > .bi {
    position: absolute;
    left: 12px;
    color: var(--tn-text-muted);
    font-size: 1rem;
    pointer-events: none;
}

.tn-toolbar-search-input {
    width: 100%;
    /* 16px on phones stops iOS Safari zooming the viewport on focus —
       the reason this isn't simply var(--tn-font-size-base). */
    font-size: max(16px, var(--tn-font-size-base));
    font-family: inherit;
    min-height: var(--tn-touch-target);
    padding: 0 38px 0 36px;
    background: var(--tn-bg-card);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius);
    color: var(--tn-text-primary);
    transition: border-color var(--tn-transition), box-shadow var(--tn-transition);
}

.tn-toolbar-search-input::placeholder {
    color: var(--tn-text-muted);
}

.tn-toolbar-search-input:focus {
    outline: none;
    border-color: var(--tn-accent);
    box-shadow: 0 0 0 3px rgba(var(--tn-accent-rgb), 0.1);
}

.tn-toolbar-search-clear {
    position: absolute;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--tn-text-muted);
    cursor: pointer;
    transition: background var(--tn-transition), color var(--tn-transition);
}

.tn-toolbar-search-clear:hover {
    background: var(--tn-bg-hover);
    color: var(--tn-text-primary);
}

/* ── Filter trigger — opens a filter sheet. Carries a count so the user
   can see filters are active without opening it. ── */
.tn-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: var(--tn-touch-target);
    padding: 0 var(--tn-space-md);
    background: var(--tn-bg-card);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius);
    color: var(--tn-text-primary);
    font-family: inherit;
    font-size: var(--tn-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--tn-transition);
}

.tn-filter-trigger:hover {
    background: var(--tn-bg-hover);
    border-color: var(--tn-text-secondary);
}

.tn-filter-trigger.is-active {
    border-color: var(--tn-accent);
    color: var(--tn-accent);
    background: var(--tn-accent-light);
}

.tn-filter-trigger-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--tn-accent);
    color: var(--tn-accent-contrast, #fff);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   Inline filter panel — search on top, everything else disclosed below.

   The alternative to .tn-filter-sheet, for the ScanEasy case: a toolbar
   with more filters than fit a row. Instead of a permanently-tall bar
   (which buries the data) or a sheet (which covers it), the extra filters
   collapse into a panel that pushes content down only while it's open.

   Sheet vs panel: a sheet suits a phone, where a panel would push the
   first row well below the fold; a panel suits desktop, where the user
   can see filters and results at once and tune them against each other.
   Ship both and switch at the breakpoint if a screen needs it.

     <div class="tn-toolbar">
       <div class="tn-toolbar-row">
         <div class="tn-toolbar-search">…</div>
         <button class="tn-filter-trigger" aria-expanded="false">
           <i class="bi bi-sliders"></i> Filter
           <span class="tn-filter-trigger-count">2</span>
           <i class="bi bi-chevron-down tn-filter-trigger-chevron"></i>
         </button>
       </div>
       <div class="tn-filter-panel is-open">
         <div class="tn-filter-panel-grid">…tn-form-group…</div>
         <div class="tn-filter-panel-foot">…Rensa / Visa…</div>
       </div>
     </div>
   ═══════════════════════════════════════════════════════════ */
.tn-filter-trigger-chevron {
    font-size: 0.8em;
    transition: transform var(--tn-transition);
}

.tn-filter-trigger[aria-expanded="true"] .tn-filter-trigger-chevron,
.tn-filter-trigger.is-open .tn-filter-trigger-chevron {
    transform: rotate(180deg);
}

.tn-filter-panel {
    display: none;
    padding: var(--tn-space-md);
    background: var(--tn-bg-card);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius-lg);
}

.tn-filter-panel.is-open {
    display: block;
    animation: tnPanelDrop 0.16s ease;
}

@keyframes tnPanelDrop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Auto-fit so the panel is one row on a wide screen and stacks as it
   narrows — no per-screen column count to maintain. */
.tn-filter-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--tn-space-md);
}

.tn-filter-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tn-space-md);
    flex-wrap: wrap;
    margin-top: var(--tn-space-md);
    padding-top: var(--tn-space-md);
    border-top: 1px solid var(--tn-border-light);
}

/* Summary of what's currently applied, so the user can close the panel and
   still know what's filtering the list underneath. */
.tn-filter-panel-summary {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-secondary);
}

@media (max-width: 640px) {
    .tn-filter-panel-grid {
        grid-template-columns: 1fr;
    }

    .tn-filter-panel-foot .tn-btn {
        flex: 1;
        min-height: var(--tn-touch-target);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tn-filter-panel.is-open {
        animation: none;
    }
}

/* ── Filter chip row — scrolls sideways instead of wrapping into a tall
   block that buries the data. Deliberately a scroller, not a wrap: it
   keeps the toolbar exactly one row tall no matter how many filters. ── */
.tn-filter-scroll {
    display: flex;
    align-items: center;
    gap: var(--tn-space-sm);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Let chips reach the screen edge when the page has a gutter, so the
       row visibly continues rather than looking clipped mid-chip. */
    padding-bottom: 2px;
}

.tn-filter-scroll::-webkit-scrollbar {
    display: none;
}

.tn-filter-scroll > * {
    flex-shrink: 0;
}

/* ── Meta row — result count on the left, actions on the right ── */
.tn-toolbar-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tn-space-md);
    flex-wrap: wrap;
}

.tn-toolbar-count {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-secondary);
}

.tn-toolbar-count strong {
    color: var(--tn-text-primary);
    font-weight: 700;
}

.tn-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--tn-space-sm);
    flex-wrap: wrap;
}

/* ── Phones ── */
@media (max-width: 640px) {
    /* Search gets its own row — sharing with the filter button leaves it
       too narrow to read a placeholder in. */
    .tn-toolbar-row {
        flex-wrap: wrap;
    }

    .tn-toolbar-search {
        flex: 1 1 100%;
    }

    .tn-filter-trigger {
        flex: 1;
        justify-content: center;
    }

    /* Bleeding the rail through the page gutter reads nicely — the chips run
       off the screen edge instead of stopping at a margin — but a negative
       inline margin makes the element WIDER THAN ITS PARENT, and a scroller's
       own overflow clips its content, not its own box. Unless an ancestor
       clips horizontally, that surplus becomes page-level sideways scroll
       (measured: 11px past a 370px viewport).

       So it is opt-in, and only safe where a container actually clips.
       .tn-page (layout.css) does; a bare <body> does not. */
    .tn-filter-scroll--bleed {
        margin-inline: calc(var(--tn-page-pad-x) * -1);
        padding-inline: var(--tn-page-pad-x);
    }

    /* Filter chips are a primary control on a phone, but .tn-chip sizes from
       em padding on a small font and lands at ~22px — half the 44px minimum,
       and the surrounding buttons already honour it, so the rail reads as
       undersized next to them. Only chips in this rail are lifted; a chip used
       as an inline tag elsewhere is not a tap target and shouldn't grow. */
    .tn-filter-scroll .tn-chip {
        min-height: var(--tn-touch-target);
        padding-inline: var(--tn-space-md);
    }

    .tn-toolbar-meta {
        gap: var(--tn-space-sm);
    }

    .tn-toolbar-actions {
        width: 100%;
    }

    .tn-toolbar-actions .tn-btn {
        flex: 1;
        min-height: var(--tn-touch-target);
    }
}

/* ═══════════════════════════════════════════════════════════
   Filter sheet — the panel the trigger opens.

   On desktop it's a dropdown-style card under the trigger; on mobile it
   docks to the bottom as a sheet (same language as the modal), because a
   filter panel is a task you complete and dismiss, not a page you visit.
   Toggle .is-open on .tn-filter-sheet.
   ═══════════════════════════════════════════════════════════ */
.tn-filter-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--tn-z-panel);
    background: rgba(0, 0, 0, 0.4);
}

.tn-filter-sheet-backdrop.is-open {
    display: block;
}

.tn-filter-sheet {
    display: none;
    position: fixed;
    z-index: calc(var(--tn-z-panel) + 1);
    background: var(--tn-bg-card);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius-lg);
    box-shadow: var(--tn-shadow-lg);
    width: min(360px, calc(100vw - 2 * var(--tn-page-pad-x)));
    max-height: 80vh;
    overflow-y: auto;
}

.tn-filter-sheet.is-open {
    display: block;
}

.tn-filter-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tn-space-md);
    padding: var(--tn-space-md);
    border-bottom: 1px solid var(--tn-border);
}

.tn-filter-sheet-title {
    margin: 0;
    font-size: var(--tn-font-size-lg);
    font-weight: 700;
}

.tn-filter-sheet-body {
    padding: var(--tn-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--tn-space-md);
}

.tn-filter-sheet-footer {
    display: flex;
    gap: var(--tn-space-sm);
    padding: var(--tn-space-md);
    border-top: 1px solid var(--tn-border);
}

.tn-filter-sheet-footer .tn-btn {
    flex: 1;
}

@media (max-width: 640px) {
    .tn-filter-sheet {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: 85dvh;
        border: none;
        border-radius: var(--tn-radius-xl) var(--tn-radius-xl) 0 0;
        display: none;
        flex-direction: column;
        animation: tnSheetUp 0.24s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .tn-filter-sheet.is-open {
        display: flex;
    }

    .tn-filter-sheet-header {
        position: relative;
        flex-shrink: 0;
        padding-top: 26px;
    }

    /* Grab handle, matching the modal sheet */
    .tn-filter-sheet-header::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: var(--tn-border);
    }

    .tn-filter-sheet-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .tn-filter-sheet-footer {
        flex-shrink: 0;
        padding-bottom: calc(var(--tn-space-md) + env(safe-area-inset-bottom, 0px));
    }

    .tn-filter-sheet-footer .tn-btn {
        min-height: var(--tn-touch-target);
    }
}

/* Declared here as well as in modal.css: every file in this system has to
   stand alone, and a product may vendor toolbar.css without modal.css.
   Identical definition — duplicate keyframes of the same name are
   harmless, the last one parsed wins and they're the same. */
@keyframes tnSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .tn-filter-sheet {
        animation: none;
    }
}