/* ============================================================================
   TrafficPortal3 filter panel
   ----------------------------------------------------------------------------
   The collapsible filter card that sits above the results on converted pages:
   card, head row, summary chips, control sizing, and the zoom steps that keep
   the panel from eating vertical space on a narrow window.

   Scope: the tp-filter-* names are NEW and used only by pages converted from TP2
   iframes. They deliberately do NOT reuse .filter-option-container or
   .input-filter-boxes -- those two are defined in ~25 places across the app
   (mostly scoped .razor.css, plus a few global <style> blocks), so redefining
   them here would land underneath all of them and could silently restyle any
   legacy page that uses the class without defining it.

   Legacy pages keep their own copies until they are rewritten. PaymentHistory.razor
   still carries its own equivalent rules; switching it over to these names is a
   separate, deliberate change with its own visual check.

   Colours come from tokens.css -- nothing here hard-codes a brand value.
   ============================================================================ */

.tp-filter-card {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--tp-card);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius-card);
    box-shadow: var(--tp-shadow);
    padding: 12px 18px 16px;
    margin: 0 0 22px;
}

/* ---- Head row: title, chips, collapse toggle ---- */

.tp-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tp-filter-card.tp-collapsed .tp-filter-head {
    margin-bottom: 0;
}

.tp-filter-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tp-brand);
    white-space: nowrap;
}

.tp-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    margin: 0 14px;
}

.tp-chip {
    display: inline-flex;
    align-items: center;
    background: var(--tp-brand-tint);
    color: var(--tp-brand);
    border: 1px solid var(--tp-brand-tint-2);
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.tp-chip-muted {
    background: var(--tp-line-soft);
    color: var(--tp-ink-soft);
    border-color: var(--tp-line);
}

.tp-filter-collapse-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--tp-brand);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

    .tp-filter-collapse-btn:hover {
        color: var(--tp-brand-dark);
    }

    .tp-filter-collapse-btn i {
        display: inline-flex;
    }

/* ---- The control row ---- */

.tp-filter-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 10px;
}

/* Syncfusion's outline inputs default taller than the buttons beside them. */
.tp-filter-controls .e-input-group,
.tp-filter-controls .e-float-input.e-input-group,
.tp-filter-controls .e-date-wrapper,
.tp-filter-controls .e-ddl.e-input-group {
    height: 34px !important;
    min-height: 34px !important;
    align-items: center !important;
}

.tp-filter-controls .e-input-group .e-input,
.tp-filter-controls .e-input-group input.e-input {
    height: 34px !important;
    line-height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Center the resting placeholder label in the compact outlined inputs. Only the resting label is
   targeted (:not(.e-label-top)) so the floated-up position on focus, or when a value is present,
   stays exactly where Syncfusion puts it. */
.tp-filter-controls .e-float-input .e-float-text:not(.e-label-top),
.tp-filter-controls .e-float-input.e-control-wrapper .e-float-text:not(.e-label-top) {
    top: 50% !important;
    transform: translateY(-50%) !important;
    line-height: 1 !important;
}

/* One width for every control in the row, whatever its own Width attribute says. Syncfusion writes
   Width onto the wrapper as an inline style, so this needs !important to win -- the same trick
   .input-filter-boxes uses on the legacy pages. Keeping it here means a page can't drift by setting a
   different Width on one field. */
.tp-filter-input {
    /* Four to a row: a quarter of the row less its share of the three 10px gaps, never wider than the
       210px the panel was designed at. The min-width is the floor: once four of them no longer fit
       the row, the flex wrap drops to three, then two, then one, at whatever screen width that
       happens to be. No breakpoint needed. */
    width: calc(25% - 7.5px) !important;
    min-width: 170px;
    max-width: 210px;
    margin-top: 0 !important;
}

/* A row of yes/no toggles. Checkboxes rather than two-item dropdowns: one click, no list to open, and
   it is what TP2 had. Same height as the inputs so the row they land on lines up with the buttons,
   and they wrap on their own when the row gets narrow. */
.tp-filter-checks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 22px;
    min-height: 34px;
    padding: 0 4px;
}

    .tp-filter-checks .e-checkbox-wrapper .e-label {
        font-size: 13px;
        color: var(--tp-ink);
    }

/* For a field where a full-width control would look absurd, e.g. a row count. */
.tp-filter-input.tp-filter-input-sm {
    width: 120px !important;
}

.tp-filter-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* The filter panel's own pair of buttons. Taller (36px) and more rounded than the general tp-btn,
   because they are the panel's primary action rather than a control in a row. */
.tp-filter-apply {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 22px;
    font-family: var(--tp-font-family);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    border-radius: 9px;
    border: 1px solid var(--tp-brand);
    background-color: var(--tp-brand);
    color: var(--tp-on-brand);
    cursor: pointer;
    box-shadow: 0 1px 2px var(--tp-brand-shadow);
    transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

    .tp-filter-apply:hover:not(:disabled) {
        background-color: var(--tp-brand-dark);
        box-shadow: 0 3px 8px var(--tp-brand-shadow-hover);
    }

    .tp-filter-apply:active:not(:disabled) {
        transform: translateY(1px);
    }

    .tp-filter-apply:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    .tp-filter-apply:focus-visible {
        outline: 2px solid var(--tp-brand);
        outline-offset: 2px;
    }

/* Secondary action: reads as a link, not a second button competing with Filter. */
.tp-filter-clear {
    height: 36px;
    padding: 0 16px;
    font-family: var(--tp-font-family);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    border: none;
    border-radius: 9px;
    background-color: transparent;
    color: var(--tp-brand);
    cursor: pointer;
    transition: background-color .15s ease;
}

    .tp-filter-clear:hover:not(:disabled) {
        background-color: var(--tp-brand-tint);
    }

    .tp-filter-clear:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    .tp-filter-clear:focus-visible {
        outline: 2px solid var(--tp-brand);
        outline-offset: 2px;
    }

.tp-filter-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--tp-danger-tint);
    border: 1px solid var(--tp-danger-line);
    color: var(--tp-danger);
    font-size: 13px;
}

/* ---- Size steps ----
   Scales the whole panel -- labels, inputs, buttons, padding -- together like a browser zoom, so a
   narrower window reclaims vertical space instead of wrapping the filters into a tall block. Nudge
   these down for a smaller panel, up toward 1 for a larger one. The last step carries on below 768px:
   once the results become cards the controls keep this size and simply wrap. */

@media (min-width: 769px) and (max-width: 1500px) {
    .tp-filter-card { zoom: 0.93; }
}

@media (min-width: 769px) and (max-width: 1300px) {
    .tp-filter-card { zoom: 0.86; }
}

@media (max-width: 1100px) {
    .tp-filter-card { zoom: 0.75; }
}

@media (max-width: 768px) {
    /* A tall pinned filter block wastes scarce vertical space once the results become cards. */
    .tp-filter-card {
        position: static;
    }
}

/* On a phone two to a row leaves each control too narrow to read, so they take the full width. */
@media (max-width: 400px) {
    .tp-filter-controls .tp-filter-input {
        width: 100% !important;
        max-width: none;
    }
}

/* The From/To calendar popup. Syncfusion renders it at body level with the picker's CssClass on it,
   so the width, floor and cap meant for the input would land on the popup too and leave the calendar
   spilling out of its own box, shadow and all. The box shrink-wraps the calendar instead, as the
   prepayment pages do, and the calendar itself keeps Syncfusion's default size. */
.e-datepicker.e-popup-wrapper.tp-filter-input {
    width: fit-content !important;
    min-width: 0;
    max-width: calc(100vw - 32px);
}