/*
 * filter-panel.css — consistent filter/search panel action buttons across all
 * admin listing pages (CRM server-side panels, the new client-side panels, and
 * the restyled legacy panels).
 *
 * The theme renders form-control-sm / form-select-sm ~36px tall, but btn-sm
 * ~30px, so filter buttons looked short and uneven next to the inputs. These
 * rules give every filter-panel button one uniform height/size that matches the
 * inputs — regardless of whether the markup uses btn-sm (CRM pages) or a regular
 * btn (legacy pages) — and standardise the two-button action group (Tìm / Xóa)
 * as equal-width, side-by-side, 20px apart.
 */

/* Uniform filter-panel action buttons, matched to the height of the inputs. */
form[method="get"].row .btn,
.row [data-list-apply],
.row #btnSearch,
.row #btnReset {
    min-height: 38px;
    padding: 0 0.9rem;
    font-size: 0.82rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/*
 * Flex filter panels (crm-filter-form): an alternative to the Bootstrap grid for
 * GET filter forms whose field count doesn't divide evenly into 12 columns
 * (e.g. the Tickets panel: 6 fields + an action button). Fields flex to an even
 * width and wrap cleanly; the action button stays inline at its natural size.
 * This avoids the col-md-2 × 7 = 14-unit overflow that pushed the button onto a
 * crowded second line.
 */
.crm-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.crm-filter-form .crm-filter-field {
    flex: 1 1 170px;
    min-width: 150px;
    max-width: 240px;
}

/*
 * Select filters are enhanced by Select2 (crm-select.js), which replaces the
 * native <select> with a sibling .select2-container that defaults to the full
 * parent width. That full-width box is the actual flex item, so without this it
 * forces every field onto its own row. Size the container like the other fields
 * (width:auto beats Select2's inline pixel width; max-width then caps it).
 */
.crm-filter-form .select2-container {
    flex: 1 1 170px;
    min-width: 150px;
    max-width: 240px;
    width: auto !important;
}

.crm-filter-form .btn {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 1.1rem;
}

/* Phones: fields take the full row, the action button spans full-width. */
@media (max-width: 575.98px) {
    .crm-filter-form .crm-filter-field {
        max-width: none;
        flex-basis: 100%;
    }

    .crm-filter-form .btn {
        width: 100%;
    }
}

/* Two-button action group: side by side, equal size, 20px apart — but only while
 * they actually fit.
 *
 * This group lives in a `col-lg-2`, which is ~162px at a 1024px viewport, while the
 * two buttons need ~277px with their gap. Without `flex-wrap` and a real flex-basis
 * they cannot shrink (`white-space: nowrap` fixes their min-content width), so they
 * overflowed the column — and because nothing between here and `.container-fluid`
 * clips, that overflow pushed the WHOLE PAGE 89px wider than the screen and cut the
 * second button off at the right edge. Measured on /admin/mobileaccount at 1024px.
 *
 * Wrapping is what keeps the page inside the device; the clip in crm-style.css is a
 * net for stray gutters, not a substitute for content that fits. */
.crm-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch;
}

.crm-filter-actions .btn {
    /* A real basis, so they sit side-by-side when the column is wide enough and drop
       onto their own line when it is not. `flex: 1 1 0` could not do that: a zero
       basis with nowrap text leaves min-content as the floor and forces overflow. */
    flex: 1 1 120px;
    width: auto;
    white-space: nowrap;
}

/*
 * Phones: keep the whole filter panel inside the device screen. Stack the two
 * action buttons full-width (instead of squeezing them side-by-side), tighten
 * the gap, and add a little top spacing since the action group has no label to
 * align with the inputs above it.
 */
@media (max-width: 575.98px) {
    .crm-filter-actions {
        flex-direction: column;
        gap: 10px;
        margin-top: 0.25rem;
    }

    .crm-filter-actions .btn {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ============================================================
   The search shell — one container for every listing's search.

   Built by crm-select.js around whatever panel the page already renders, because
   the four shapes in this codebase had four different appearances for the same
   feature: Projects put its filters inside the blue card header, CrmLeads used a
   bare flex form, CrmContacts a naked Bootstrap row sitting straight on the page
   background, and the CRM pages floated a saved-views strip loose above all of it.
   Styling the wrapper rather than each view means a listing added tomorrow
   inherits the treatment without knowing this file exists.
   ============================================================ */
.crm-search-shell {
    /* ONE ROW: caption, fields and the advanced toggle sit side by side rather than the caption
       band stacking above the fields. On a one-field search that halved the height of the block.
       flex-wrap keeps it honest — a panel with many fields still wraps onto further lines, it just
       no longer spends a whole line on a caption. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    padding-right: 14px;
    /* Reduced from 1rem. With no border there is no edge for the gap to hold the table away
       from — it only has to keep the search off the first row. */
    margin-bottom: 8px;
    background: #fff;
    /* NO BORDER, NO SHADOW, by request 2026-09-22, across every listing.
       The shell went in to make 80 differently-shaped filter areas look like one thing; drawing a
       box around it was one way to do that, and sitting the controls on the page is another. The
       container still exists and still owns the layout — one row, one gap, one set of control
       sizes — it just stops announcing itself. Keep the background: a listing whose card is tinted
       would otherwise show through behind the fields. */
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* Kept: a .row panel carries negative gutter margins and would otherwise bleed sideways. */
    overflow: hidden;
}

/* No longer a band across the top — just the leading item of the single row. The tint and the
   bottom rule went with the stacking: both existed to separate two rows that no longer exist. */
.crm-search-shell-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 0 8px 14px;
    flex: 0 0 auto;
}

.crm-search-shell-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .75rem !important;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #526484;
    white-space: nowrap;
}

.crm-search-shell-title .icon {
    font-size: .95rem;
    color: var(--brand-1, #3f74d6);
}

/* Saved views sit next to the caption; the advanced toggle is pushed to the far end. */
.crm-search-shell-head > .crm-saved-views {
    margin-bottom: 0 !important;
    gap: .5rem !important;
}

.crm-search-shell > .crm-search-toggle,
.crm-search-shell-head > .crm-search-toggle {
    margin-left: auto;
    /* 12px under the button, so it is not flush against the shell's bottom edge.

       Matched above it on purpose. The shell is align-items:center, so a bottom margin alone is
       not spacing — it is an offset: the margin box is what gets centred, and the button rides
       6px above the caption and the field beside it. Measured, not assumed. Equal margins centre
       the same way a zero margin does and still buy the 12px. */
    margin-top: 12px;
    margin-bottom: 12px;
    flex: 0 0 auto;
}

/* The right-hand group: "Tìm kiếm nâng cao" and the column picker, on the search row's own line at
   its right edge. admin-column-prefs.js builds it and moves both controls into it.

   One group rather than two loose flex items, because the shell wraps: as soon as the filters fill
   the row, two siblings break onto separate lines. It also covers the shell that has no toggle at
   all — crm-select.js only builds one when the panel has fields left to collapse — where the picker
   would otherwise have nothing carrying it rightwards.

   The 12px top and bottom are on the GROUP now. The shell is align-items:center, so a margin only
   on one side offsets the item within the line instead of spacing it; equal margins centre it and
   leave the row evenly spaced above and below. */
.crm-search-shell > .crm-search-shell-right {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    margin-top: 8px;
    margin-bottom: 8px;
}

/* Inside the group the toggle is no longer a direct child of the shell, so the rule above stops
   applying to it and crm-style.css's standalone margin-bottom would come back and push it off the
   group's centre line. The group owns the spacing now. */
.crm-search-shell-right > .crm-search-toggle {
    margin: 0;
    white-space: nowrap;
}

/* The panel's own spacing utilities (mb-2 / mb-3) would open a gap inside the shell. */
.crm-search-shell > .crm-search-panel {
    /* Both margins, not just the bottom. Views bring their own spacing classes — /admin/member's
       filter row is `row g-2 mb-3 mt-3` — and only mb-3 was ever zeroed here, so mt-3's 16px stayed
       and the row sat 41px from the top against 13px at the bottom. The shell owns this spacing. */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* 12px above and below the fields, matching the right-hand group's margins. The two sides of
       the row are sized by different things — this padding on the left, margins on the group — so
       they have to be given the same number by hand or the row is 8px on one side and 12px on the
       other. With both at 12 a 38px control makes each side exactly 62px tall, which is what lets
       align-items:center leave nothing to centre. */
    padding: 12px 0;
    /* !important on the vertical only, because a view can set padding INLINE and inline wins.
       /admin/member does exactly that — `style="padding: 0 20px"` on its filter row — which zeroed
       the 12px and left the field sitting on the shell's bottom edge with nothing below it. The
       shell exists to give 80 views one spacing, so an inline padding is the thing it has to beat;
       the neighbouring margin-bottom rule is !important for the same reason. Horizontal is left
       alone so a view that really does want side padding keeps it. */
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    flex: 1 1 auto;
    min-width: 0;
}

/* A .row panel carries negative side margins and its columns bring their own gutter
   padding, so it gets the margins zeroed and less side padding of its own — landing
   on the same 16px edge as the header above it. */
.crm-search-shell > .crm-search-panel.row {
    margin-left: 0;
    margin-right: 0;
    /* Bootstrap's row gutter works as a PAIR: the row carries margin-top:-gutter and every column
       carries padding-top:gutter. Zeroing the row's margins above (needed, because views bring
       their own mt-3) breaks the pair and leaves the columns' padding uncompensated — the fields
       ended up 25px from the top against 13px at the bottom. Setting the variable removes both
       halves at once, which is the supported way to do it. */
    --bs-gutter-y: 0;
    padding: 8px 0;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* SECOND PANEL IN THE SHELL. Nine listings render a GET filter form and a _ListSearchPanel box
   with nothing between them, and crm-select.js now merges the two into one shell rather than
   building one each. The second is that page's basic search — a box and an apply button — not a
   second filter grid, so it is sized to its own content instead of taking an equal share of the
   row: left at flex:1 1 auto its col-md-4 input came out a third of half the shell and showed
   about eight characters. */
.crm-search-shell > .crm-search-panel + .crm-search-panel {
    flex: 0 1 auto;
}

.crm-search-shell > .crm-search-panel + .crm-search-panel > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

.crm-search-shell > .crm-search-panel + .crm-search-panel input[type="search"] {
    width: 15rem;
    max-width: 100%;
}

/* A table whose text filter lives in its own card header rather than in the page's search shell.
   /admin/statistic is the case: its shell belongs to the date filter at the top, which drives the
   nine CRM charts as well as these rows, so this box is marked data-no-shell and given a width
   here — a col-md-auto around a bare input otherwise collapses to the browser's 20-character
   default. Colour is left to the theme: .card-header is bg-info in the markup but the theme
   repaints it pale with dark text, so anything tuned for a dark band would be wrong. */
.card-header .crm-header-search {
    min-width: 16rem;
}

/* One control height across every shape, so a row of inputs, selects and buttons
   reads as a single band instead of three sizes stacked next to each other. */
/* 34px, down from 38px. One height across every shape is still the rule — the point of it is that
   a row of inputs, selects and buttons reads as one band — but a filter bar is not a form and does
   not need form-sized controls. */
.crm-search-shell .form-control,
.crm-search-shell .form-select,
.crm-search-shell .btn {
    min-height: 34px;
}

.crm-search-shell .form-control,
.crm-search-shell .form-select {
    border-radius: 8px;
}

.crm-search-shell .btn {
    border-radius: 8px;
    font-weight: 600;
}

/* Checkbox filters sit mid-height against the inputs beside them rather than
   hanging off the top of their column (the mt-1 the views use is a guess at it). */
.crm-search-shell .form-check {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-height: 38px;
    margin: 0;
    padding: 0;
}

.crm-search-shell .form-check .form-check-input {
    margin: 0;
    float: none;
    flex: 0 0 auto;
}

.crm-search-shell .form-check .form-check-label {
    margin: 0;
    color: #526484;
}

@media (max-width: 575.98px) {
    .crm-search-shell-head {
        padding: 9px 12px;
    }

    .crm-search-shell > .crm-search-panel {
        padding: 12px;
    }

    .crm-search-shell > .crm-search-panel.row {
        padding: 12px 4px;
    }
}

/* The plain-table enhancer (admin-table-sort-filter.js) moves its basic box and advanced
   toggle into this header when a shell exists, so its own bar's ms-auto no longer applies
   to the right element. Push the last control to the end here instead. */
.crm-search-shell-head > .btn:last-child,
.crm-search-shell-head > .crm-search-toggle {
    margin-left: auto;
}

.crm-search-shell-head > input[type="search"] {
    max-width: 18rem;
}

/* ---------------------------------------------------------------------------
   DataTables toolbar: "Hiển thị N dữ liệu" on the left, search + Cột on the
   right. admin-column-prefs.js builds this group and moves both into it.

   The search box needs containing or it runs UNDER the Cột button. The theme
   styles the DataTables search input as a form control —
   `div.dataTables_filter input { display:block; width:100% }`, dashlite.css:2174
   — and that 100% resolves against the filter div while the "Tìm kiếm:" label
   text still sits on the same line ahead of it. The content is therefore always
   wider than the box, the overflow spills rightwards, and a flex `gap` cannot
   help because gap measures between BORDER boxes, not between ink.

   Making the label a flex row puts the caption and the input in the same
   formatting context, so the input can shrink to what is actually left.
   --------------------------------------------------------------------------- */
.crm-toolbar-right > .dataTables_filter {
    float: none;
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
}

.crm-toolbar-right > .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    white-space: nowrap;
}

/* flex-basis rather than width: it asks for a comfortable box and gives it back
   on a narrow screen instead of pushing Cột off the row. min-width:0 is what
   actually lets it shrink — a flex item refuses to go below its content width
   without it. */
.crm-toolbar-right > .dataTables_filter input {
    width: auto;
    flex: 0 1 16rem;
    min-width: 0;
    margin: 0;
}

.crm-toolbar-right > .crm-column-prefs {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   ONE SIZE FOR EVERY CONTROL ON THE SEARCH ROW.

   Four controls, four different sources, four different sizes: the field is the
   theme's .form-control (~38px), "Xóa Lọc" a .btn the views write themselves,
   "Tìm kiếm nâng cao" is crm-select.js's own button (.5rem/.85rem padding at
   .9375rem), and "Cột" a .btn-sm from admin-column-prefs.js (~30px). Side by
   side on one line that reads as three different toolbars.

   Height is fixed rather than min-height: a min only lifts the short ones, and
   .btn-sm's smaller font still left "Cột" visibly lighter than its neighbour.
   inline-flex + centre is what keeps the label centred once the height stops
   coming from the padding.

   Margins go to zero and the spacing comes from the shell's column-gap and the
   group's gap, so there is exactly one number controlling the distance between
   any two controls instead of each element bringing its own.
   --------------------------------------------------------------------------- */
.crm-search-shell .crm-search-panel .form-control,
.crm-search-shell .crm-search-panel .form-select,
.crm-search-shell .crm-search-panel .btn,
.crm-search-shell-right > .crm-search-toggle,
.crm-search-shell-right > .crm-column-prefs > .btn {
    height: 38px;
    min-height: 38px;
    padding: 0 .9rem;
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    border-radius: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The field is the one that should not be centred — its text starts at the left
   like any input, and a centred placeholder reads as a button. */
.crm-search-shell .crm-search-panel .form-control,
.crm-search-shell .crm-search-panel .form-select {
    justify-content: flex-start;
    font-weight: 400;
}

/* Select2 swaps the <select> for a sibling container, so the rule above never
   reaches it. Match the height there too or the enhanced dropdowns sit short. */
.crm-search-shell .crm-search-panel .select2-container .select2-selection--single {
    height: 38px;
    display: flex;
    align-items: center;
}

/* The icons inside the two right-hand buttons carried their own spacing (&nbsp;
   in one, a gap in the other). One rule so both read the same. */
.crm-search-shell-right > .crm-search-toggle,
.crm-search-shell-right > .crm-column-prefs > .btn {
    gap: .5rem;
}