/* Shared filter panel for the Title Search and Customer Search grids - responsive layout.
   Purely presentational: every control keeps its original id, name and handler. */

.tsf {
    box-sizing: border-box;
    padding: 6px 8px 0;
    color: #263746;
}

    .tsf *,
    .tsf *::before,
    .tsf *::after {
        box-sizing: border-box;
    }

.tsf-panel {
    padding: 8px 10px;
    border: 1px solid #c9d2dc;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(38, 55, 70, .06);
}

.tsf-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 10px;
}

    .tsf-row + .tsf-row {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #dde3e8;
    }

/* ---- fields ------------------------------------------------------------ */

.tsf-field {
    display: flex;
    flex: 1 1 190px;
    flex-direction: column;
    min-width: 0;
}

.tsf-field--wide {
    flex: 2 1 260px;
}

.tsf-field--compact {
    flex: 0 1 178px;
    min-width: 150px;
}

.tsf-field > label,
.tsf-caption {
    margin: 0 0 3px;
    color: #5b6b7b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 14px;
    text-transform: uppercase;
    white-space: nowrap;
}

.tsf .form-control,
.tsf .k-widget {
    width: 100%;
    max-width: 100%;
}

.tsf .form-control {
    height: 30px;
    padding: 4px 8px;
    border-color: #c9d2dc;
    border-radius: 3px;
    font-size: 12px;
    line-height: 20px;
}

    .tsf .form-control:focus {
        border-color: #7fb1e0;
        box-shadow: 0 0 0 2px rgba(127, 177, 224, .28);
    }

/* Keep Kendo widgets on the same 30px baseline as the plain inputs.
   Kendo copies the helper's inline height onto the generated wrapper, so these
   single-line widgets are pinned explicitly. Grids are never matched. */
.tsf .k-widget.k-autocomplete,
.tsf .k-widget.k-combobox,
.tsf .k-widget.k-dropdown,
.tsf .k-widget.k-datepicker,
.tsf .k-widget.k-numerictextbox {
    height: 30px !important;
}

.tsf .k-widget .k-dropdown-wrap,
.tsf .k-widget .k-picker-wrap,
.tsf .k-widget .k-numeric-wrap {
    height: 30px !important;
}

.tsf .k-widget .k-input,
.tsf .k-autocomplete .k-input,
.tsf input.k-textbox {
    height: 28px !important;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 12px;
    line-height: 28px;
}

.tsf .k-widget .k-select {
    height: 28px;
    line-height: 28px;
}

/* comparison operator + value pair (Rate, Cl.Bal) */
.tsf-combo {
    display: flex;
    min-width: 0;
}

    .tsf-combo .tsf-op {
        flex: 0 0 58px;
        width: 58px;
        padding-right: 2px;
        padding-left: 6px;
        border-radius: 3px 0 0 3px;
        font-weight: 700;
    }

    .tsf-combo .form-control + .form-control {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: -1px;
        border-radius: 0 3px 3px 0;
    }

/* ---- radio option sets ------------------------------------------------- */

.tsf-optionset {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 4px 10px 5px;
    border: 1px solid #c9d2dc;
    border-radius: 4px;
    background: #f4f7fa;
}

.tsf-optiongroup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
    min-width: 0;
}

    .tsf-optiongroup > .tsf-caption {
        flex: 0 0 44px;
        margin: 0;
    }

.tsf-opt {
    display: inline-flex;
    align-items: center;
    margin: 0;
    color: #263746;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    white-space: nowrap;
    cursor: pointer;
}

    .tsf-opt input[type="radio"] {
        margin: 0 5px 0 0;
        vertical-align: middle;
    }

/* ---- checkbox pill ----------------------------------------------------- */

.tsf-check {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: 30px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid #c9d2dc;
    border-radius: 4px;
    background: #f4f7fa;
    color: #263746;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    white-space: nowrap;
    cursor: pointer;
}

    .tsf-check input[type="checkbox"] {
        margin: 0 6px 0 0;
        vertical-align: middle;
    }

/* ---- actions ----------------------------------------------------------- */

.tsf-actions {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.tsf-actions--secondary {
    flex: 0 1 auto;
}

.tsf .tsf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: #6b7885;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease;
}

    .tsf .tsf-btn:hover,
    .tsf .tsf-btn:focus {
        background-color: #5a6673;
        color: #fff;
        text-decoration: none;
    }

.tsf .tsf-btn--primary {
    background-color: #2f74b5;
}

    .tsf .tsf-btn--primary:hover,
    .tsf .tsf-btn--primary:focus {
        background-color: #275f96;
    }

.tsf .tsf-btn--warn {
    background-color: #e08b2d;
}

    .tsf .tsf-btn--warn:hover,
    .tsf .tsf-btn--warn:focus {
        background-color: #c4761f;
    }

.tsf .tsf-btn--ghost {
    border-color: #c9d2dc;
    background-color: #fff;
    color: #263746;
}

    .tsf .tsf-btn--ghost:hover,
    .tsf .tsf-btn--ghost:focus {
        background-color: #eef2f6;
        color: #263746;
    }

.tsf .tsf-btn--icon {
    width: 30px;
    padding: 0;
    border-color: #2e7d32;
    background-color: #eaf5ea;
    color: #2e7d32;
}

    .tsf .tsf-btn--icon:hover,
    .tsf .tsf-btn--icon:focus {
        background-color: #d8ecd9;
        color: #1f5c22;
    }

    .tsf .tsf-btn--icon .fa {
        font-size: 15px;
    }

/* The Qty block is shown/hidden from script (display:inline-block / none),
   so its flex layout lives on an inner wrapper instead.
   flex-shrink is 0 so the cluster (caption + input + the two buttons) never
   gets squeezed narrower than its content when the row runs out of room -
   letting it shrink caused the buttons to collapse on top of each other.
   It wraps onto its own line instead, via the wrap already set on .tsf-actions. */
#ChangeQtyBlock {
    flex: 0 0 auto;
}

.tsf-qty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border: 1px solid #f0d3a5;
    border-radius: 4px;
    background: #fdf6ea;
}

    .tsf-qty > .tsf-caption {
        margin: 0;
    }

    .tsf-qty .k-numerictextbox {
        width: 74px !important;
    }

/* ---- status strip ------------------------------------------------------ */

/* Flex column so the whitespace between the labels forms no line box: the strip
   collapses to nothing until a filter summary is actually written into it. */
.tsf-status {
    display: flex;
    flex-direction: column;
    padding: 0 2px;
    color: #1f5c22;
    font-size: 12px;
    line-height: 18px;
    word-break: break-word;
}

    .tsf-status > label {
        margin: 5px 0 0;
        font-weight: 400;
    }

        .tsf-status > label:empty {
            display: none;
        }

/* ---- breakpoints ------------------------------------------------------- */

@media (max-width: 1199px) {
    .tsf-field--wide {
        flex: 1 1 240px;
    }

    .tsf-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 991px) {
    .tsf-optionset {
        flex: 1 1 100%;
    }

    .tsf-field {
        flex: 1 1 45%;
    }

    .tsf-field--wide {
        flex: 1 1 100%;
    }
}

@media (max-width: 767px) {
    .tsf {
        padding: 4px 6px 0;
    }

    .tsf-panel {
        padding: 8px;
    }

    .tsf-field,
    .tsf-field--compact {
        flex: 1 1 100%;
        min-width: 0;
    }

    .tsf-optiongroup {
        flex: 1 1 100%;
    }

    .tsf .tsf-btn {
        flex: 1 1 auto;
        height: 34px;
        line-height: 32px;
    }

    .tsf .tsf-btn--icon {
        flex: 0 0 34px;
        width: 34px;
    }

    .tsf-check {
        flex: 1 1 100%;
        height: 34px;
    }
}

/* ---- advanced filter dialog -------------------------------------------- */

.title-search-page .overlayGREdit1 {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.title-search-page .popUpUpdateGR1 {
    box-sizing: border-box;
    width: 80%;
    max-width: 1180px;
    margin: 30px auto;
}

.tsf-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -8px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dde3e8;
}

.tsf-dialog-title {
    margin: 0;
    color: #263746;
    font-size: 15px;
    font-weight: 700;
}

.tsf-dialog-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 1px solid #c9d2dc;
    border-radius: 4px;
    background: #fff;
    color: #5b6b7b;
    font-size: 15px;
    font-weight: 700;
    line-height: 26px;
    cursor: pointer;
}

    .tsf-dialog-close:hover {
        background: #eef2f6;
        color: #263746;
    }

.tsf-dialog-body {
    max-height: calc(100vh - 190px);
    padding-right: 4px;
    overflow-y: auto;
}

.tsf-dialog-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #dde3e8;
}

@media (max-width: 991px) {
    .title-search-page .popUpUpdateGR1 {
        width: 94%;
        margin: 16px auto;
        padding: 14px;
    }

    .tsf-dialog-body {
        max-height: calc(100vh - 150px);
    }
}

@media (max-width: 767px) {
    .title-search-page .popUpUpdateGR1 {
        width: 97%;
        margin: 8px auto;
        padding: 10px;
    }

    .tsf-dialog-foot .tsf-btn {
        flex: 1 1 auto;
    }
}

/* Dialog body: turn the legacy col-lg label/field pairs into a real column grid
   so a label and its control always share a row and never orphan on wrapping. */
.tsf-dialog-body.tsf {
    padding: 0 4px 0 0;
}

.tsf-dialog-body .row.form-group {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 104px minmax(0, 1fr) 104px minmax(0, 1fr);
    align-items: center;
    gap: 8px 10px;
    margin: 0 0 10px;
}

    /* Bootstrap's .row clearfix pseudo-elements would otherwise become grid items
   and push every label/control one cell to the right. */
    .tsf-dialog-body .row.form-group::before,
    .tsf-dialog-body .row.form-group::after {
        display: none;
    }

    .tsf-dialog-body .row.form-group > [class*="col-lg-"] {
        float: none;
        width: auto;
        min-width: 0;
        padding: 0;
    }

    .tsf-dialog-body .row.form-group > .col-lg-1 {
        color: #5b6b7b;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .3px;
        text-transform: uppercase;
    }

        .tsf-dialog-body .row.form-group > .col-lg-1 label {
            margin: 0;
            font-weight: 700;
        }

    /* The wide BookName / Publisher controls take the room of a whole pair. */
    .tsf-dialog-body .row.form-group > .col-lg-7 {
        grid-column: span 3;
    }

    .tsf-dialog-body .row.form-group > .tsf-checkgroup {
        grid-column: span 2;
    }

@media (max-width: 1199px) {
    .tsf-dialog-body .row.form-group {
        grid-template-columns: 104px minmax(0, 1fr) 104px minmax(0, 1fr);
    }

        .tsf-dialog-body .row.form-group > .col-lg-7 {
            grid-column: auto;
        }
}

@media (max-width: 767px) {
    .tsf-dialog-body .row.form-group {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        margin-bottom: 10px;
    }

        .tsf-dialog-body .row.form-group > .col-lg-7,
        .tsf-dialog-body .row.form-group > .tsf-checkgroup {
            grid-column: auto;
        }

        .tsf-dialog-body .row.form-group > .col-lg-1 {
            margin-top: 4px;
        }
}

.tsf-checkgroup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

/* ---- gap between the filter panel and the grid ------------------------- */

.search-grid-page #GridId1 {
    margin-top: 8px;
}