/**
 * MISAC.filterform — misac.filterform.css
 *
 * Filter bar styles used by both MISAC.report and MISAC.table.
 * Requires misac.css (--m-* design tokens) to be loaded first.
 *
 * Include this file on any page that uses MISAC.filterform.build().
 * misac.report.css already @imports this file.
 */

/* ── Filter bar ─────────────────────────────────────────────────────────── */

.mrpt-filter-bar {
    display:       flex;
    align-items:   flex-end;
    gap:           12px;
    padding:       10px 16px;
    background:    var(--m-surface);
    border-bottom: 1px solid var(--m-border);
    flex-shrink:   0;
    flex-wrap:     wrap;
}

.mrpt-filters {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
    flex:      1;
}

.mrpt-filter {
    display:        flex;
    flex-direction: row;
    gap:            4px;
    min-width:      120px;
}

.mrpt-filter-label {
    font-size:      11px;
    font-weight:    600;
    color:          var(--m-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin:0;
    padding-top:7px;
}

.mrpt-filter-input,
.mrpt-filter-select {
    height:        30px;
    padding:       0 8px;
    font-size:     12px;
    font-family:   var(--m-font);
    color:         var(--m-text);
    background:    var(--m-input-bg);
    border:        1px solid var(--m-input-border);
    border-radius: var(--m-radius-sm);
    outline:       none;
    transition:    border-color 0.15s, box-shadow 0.15s;
    min-width:     110px;
}

.mrpt-filter-input:focus,
.mrpt-filter-select:focus {
    border-color: var(--m-input-focus-border);
    box-shadow:   0 0 0 3px var(--m-input-focus-ring);
}

/* ── Toggle control ─────────────────────────────────────────────────────── */

.mrpt-toggle {
    display:       flex;
    border:        1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    overflow:      hidden;
    height:        30px;
}

.mrpt-toggle-btn {
    padding:      0 10px;
    border:       none;
    border-right: 1px solid var(--m-border);
    background:   var(--m-bg-subtle);
    color:        var(--m-text-secondary);
    font-size:    12px;
    font-family:  var(--m-font);
    cursor:       pointer;
    transition:   background 0.12s, color 0.12s;
    white-space:  nowrap;
}

.mrpt-toggle-btn:last-child {
    border-right: none;
}

.mrpt-toggle-btn.is-active {
    background: var(--m-accent);
    color:      var(--m-text-on-accent);
}

.mrpt-toggle-btn:not(.is-active):hover {
    background: var(--m-border-light);
}

/* ── Chip control ───────────────────────────────────────────────────────── */

.mrpt-chip-group {
    display:   flex;
    flex-wrap: wrap;
    gap:       4px;
}

.mrpt-chip {
    padding:       2px 10px;
    border:        1px solid var(--m-border);
    border-radius: 99px;
    background:    transparent;
    color:         var(--m-text-secondary);
    font-size:     11px;
    font-family:   var(--m-font);
    cursor:        pointer;
    transition:    background 0.12s, color 0.12s, border-color 0.12s;
    white-space:   nowrap;
    height:        24px;
}

.mrpt-chip.is-active {
    background:   var(--m-accent-bg);
    border-color: var(--m-accent);
    color:        var(--m-accent-text);
    font-weight:  600;
}

.mrpt-chip:not(.is-active):hover {
    background:   var(--m-bg-subtle);
    border-color: var(--m-border-light);
}

/* ── Searchable select control ──────────────────────────────────────────── */

.mrpt-sselect {
    position:  relative;
    min-width: 130px;
}

.mrpt-sselect-trigger {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             6px;
    width:           100%;
    height:          30px;
    padding:         0 8px;
    font-size:       12px;
    font-family:     var(--m-font);
    color:           var(--m-text);
    background:      var(--m-input-bg);
    border:          1px solid var(--m-input-border);
    border-radius:   var(--m-radius-sm);
    cursor:          pointer;
    text-align:      left;
    outline:         none;
    transition:      border-color 0.15s, box-shadow 0.15s;
    white-space:     nowrap;
    overflow:        hidden;
}

.mrpt-sselect-trigger:focus,
.mrpt-sselect-trigger:hover {
    border-color: var(--m-input-focus-border);
}

.mrpt-sselect-trigger:disabled {
    opacity: 0.6;
    cursor:  default;
}

.mrpt-sselect-label {
    flex:          1;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.mrpt-sselect-filled .mrpt-sselect-label {
    color: var(--m-text);
}

.mrpt-sselect-arrow {
    font-size:   9px;
    opacity:     0.5;
    flex-shrink: 0;
    transition:  transform 0.15s;
}

.mrpt-sselect-panel {
    display:       none;
    position:      absolute;
    top:           calc(100% + 3px);
    left:          0;
    min-width:     100%;
    z-index:       9999;
    background:    var(--m-surface);
    border:        1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    box-shadow:    0 4px 12px rgba(0,0,0,.12);
    overflow:      hidden;
}

.mrpt-sselect-panel.is-open {
    display: block;
}

.mrpt-sselect-search {
    display:       block;
    width:         100%;
    box-sizing:    border-box;
    padding:       6px 10px;
    border:        none;
    border-bottom: 1px solid var(--m-border-light);
    font-size:     12px;
    font-family:   var(--m-font);
    color:         var(--m-text);
    background:    var(--m-input-bg);
    outline:       none;
}

.mrpt-sselect-search:focus {
    background: var(--m-bg-subtle);
}

.mrpt-sselect-list {
    list-style: none;
    margin:     0;
    padding:    4px 0;
    max-height: 220px;
    overflow-y: auto;
}

.mrpt-sselect-item {
    padding:       6px 12px;
    font-size:     12px;
    font-family:   var(--m-font);
    color:         var(--m-text);
    cursor:        pointer;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.mrpt-sselect-item:hover {
    background: var(--m-accent-bg);
    color:      var(--m-accent-text);
}

.mrpt-sselect-item.is-active {
    background:  var(--m-accent-bg);
    color:       var(--m-accent-text);
    font-weight: 600;
}

.mrpt-sselect-empty,
.mrpt-sselect-loading {
    padding:    8px 12px;
    font-size:  12px;
    color:      var(--m-text-muted);
    font-style: italic;
}

/* ── Multi-select extras ─────────────────────────────────────────────────── */

/* checkbox indicator */
.mrpt-sselect-cb {
    display:        inline-block;
    width:          13px;
    height:         13px;
    border:         1.5px solid var(--m-border);
    border-radius:  3px;
    margin-right:   7px;
    flex-shrink:    0;
    vertical-align: middle;
    position:       relative;
    top:            -1px;
    background:     var(--m-input-bg);
    transition:     background 0.1s, border-color 0.1s;
}

.mrpt-sselect-item.is-active .mrpt-sselect-cb {
    background:   var(--m-accent);
    border-color: var(--m-accent);
}

.mrpt-sselect-item.is-active .mrpt-sselect-cb::after {
    content:     '';
    display:     block;
    width:       3px;
    height:      7px;
    border:      2px solid #fff;
    border-top:  none;
    border-left: none;
    transform:   rotate(45deg);
    position:    absolute;
    top:         0px;
    left:        3px;
}

/* footer (Clear / Done) */
.mrpt-sselect-footer {
    display:         flex;
    justify-content: flex-end;
    gap:             6px;
    padding:         6px 8px;
    border-top:      1px solid var(--m-border-light);
    background:      var(--m-bg-subtle);
}

.mrpt-sselect-foot-btn {
    height:        26px;
    padding:       0 10px;
    font-size:     11px;
    font-family:   var(--m-font);
    border:        1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    background:    var(--m-surface);
    color:         var(--m-text);
    cursor:        pointer;
    transition:    background 0.12s;
}

.mrpt-sselect-foot-btn:hover {
    background: var(--m-border-light);
}

.mrpt-sselect-foot-done {
    background:   var(--m-accent);
    color:        var(--m-text-on-accent);
    border-color: var(--m-accent);
}

.mrpt-sselect-foot-done:hover {
    opacity: 0.9;
}

/* ── Apply button ───────────────────────────────────────────────────────── */

.mrpt-apply-btn {
    height:        26px;
    padding:       0 14px;
    background:    var(--m-accent);
    color:         var(--m-text-on-accent);
    border:        none;
    border-radius: var(--m-radius-sm);
    font-size:     13px;
    font-family:   var(--m-font);
    font-weight:   600;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    gap:           6px;
    transition:    background 0.15s;
    flex-shrink:   0;
    align-self:    flex-end;
}

.mrpt-apply-btn:hover {
    background: var(--m-accent-hover);
}

/* ── Toggle button (all screen sizes) ──────────────────────────────────── */

.mrpt-filter-toggle {
    display:       flex;
    align-items:   center;
    gap:           6px;
    height:        30px;
    padding:       0 10px;
    background:    var(--m-bg-subtle);
    color:         var(--m-text-secondary);
    border:        1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    font-size:     12px;
    font-family:   var(--m-font);
    font-weight:   600;
    cursor:        pointer;
    white-space:   nowrap;
    flex-shrink:   0;
    align-self:    center;
    transition:    background 0.12s, color 0.12s;
}

.mrpt-filter-toggle:hover {
    background:   var(--m-accent-bg);
    color:        var(--m-accent-text);
    border-color: var(--m-accent);
}

.mrpt-filter-arrow {
    font-size:  9px;
    opacity:    0.6;
    transition: transform 0.2s;
}

.mrpt-filter-bar:not(.is-collapsed) .mrpt-filter-arrow {
    transform: rotate(180deg);
}

/* Collapsed state: hide filters and apply button */
.mrpt-filter-bar.is-collapsed .mrpt-filters,
.mrpt-filter-bar.is-collapsed .mrpt-apply-btn {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive: mobile layout (≤ 640px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

    .mrpt-filter-bar {
        padding:        6px 10px;
        gap:            8px;
        flex-direction: column;
    }

    /* Mobile toggle — full-width, accent-colored */
    .mrpt-filter-toggle {
        width:      100%;
        height:     auto;
        padding:    8px 12px;
        background: var(--m-accent-bg);
        color:      var(--m-accent-text);
        border:     1px solid var(--m-accent);
        font-size:  14px;
        gap:        8px;
    }

    .mrpt-filter-toggle:hover {
        opacity: 0.9;
    }

    .mrpt-filter-arrow {
        margin-left: auto;
    }

    .mrpt-filters {
        gap: 8px;
    }

    /* Two filters per row; single filter takes full row */
    .mrpt-filter {
        flex:      1;
        min-width: calc(50% - 4px);
    }

    .mrpt-filter-input,
    .mrpt-filter-select {
        height:    38px;
        width:     100%;
        min-width: 0;
        /* 16px prevents iOS auto-zoom on focus */
        font-size: 16px;
    }

    .mrpt-sselect {
        min-width: 0;
        width:     100%;
    }

    .mrpt-sselect-trigger {
        height:    38px;
        font-size: 16px;
        width:     100%;
    }

    .mrpt-sselect-search {
        font-size: 16px;
        padding:   8px 12px;
    }

    .mrpt-sselect-item {
        font-size: 14px;
        padding:   10px 14px;
    }

    .mrpt-apply-btn {
        height:          40px;
        width:           100%;
        justify-content: center;
        font-size:       14px;
    }

    /* Toggle / chip controls */
    .mrpt-toggle-btn {
        min-height: 38px;
        padding:    0 12px;
    }

    .mrpt-chip {
        height:    32px;
        font-size: 12px;
        padding:   0 12px;
    }
}