/* ============================================================
   Report screens: the card each report form sits in
   Used by every screen that opens a report: Sales, Sales AK, Accounts,
   Purchase, Customer List, My Sales, the user-scoped Sales Reports and
   Stock Reports - one look for all of them, built from the design tokens
   (css/tokens.css):
   - a row of fields sits on the same grid as a filter panel;
   - a row of options (brand category, category, season, format) is one
     line of pills that wraps only when it must;
   - Generate follows the last option, as Search follows the last filter.
   Inputs, selects and buttons are the admin's own (ui-refresh.css).
   ============================================================ */

/* The card's paint is the Cards component's (ui-refresh.css). */
.rpt-card {
    float: none;
    width: 100%;
    margin: 0 0 var(--ui-card-gap);
    padding: var(--ui-space-16) var(--ui-card-inset);
}

.rpt-card > .row,
.rpt-card .row.topbuffer {
    margin: 0;
}

.rpt-card > .row > form,
.rpt-card > form {
    width: 100%;
}

.rpt-card h4,
.rpt-card h3.subheading {
    width: 100%;
    margin: 0 0 var(--ui-space-12);
    padding: 0 0 var(--ui-space-10);
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-ink);
    font-size: var(--ui-fs-md);
    font-weight: var(--ui-fw-bold);
    line-height: var(--ui-lh-snug);
}

/* --- rows of fields: the filter-panel grid ------------------------------- */

.rpt-card form .row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--ui-filter-column), 1fr));
    align-items: end;
    gap: var(--ui-space-12) var(--ui-space-20);
    margin: 0 0 var(--ui-space-12);
}

/* Bootstrap's clearfix pseudo-elements would take grid cells. */
.rpt-card form .row::before,
.rpt-card form .row::after {
    display: none;
    content: none;
}

/* A row that only wraps other rows (Stock Reports) is not a row of its own. */
.rpt-card form .row:has(> .row) {
    display: contents;
}

/* !important: on phones ui-refresh.css pads every column 6px (!important);
   the grid's gap spaces these cells, so that padding only pushed the fields
   in from the captions and pills below them. */
.rpt-card form .row > [class*="col-md"] {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0 !important;
    margin: 0;
}

/* A title placed inside a field row takes the whole row. */
.rpt-card form .row > h4,
.rpt-card form .row > h3.subheading,
.rpt-card form .row > [class*="col-md"]:has(> h4, > h3.subheading) {
    grid-column: 1 / -1;
}

.rpt-card form .form-group {
    margin: 0;
}

.rpt-card form .form-group > [class*="col-md"] {
    float: none;
    width: 100%;
    padding: 0;
}

.rpt-card .select2-container {
    width: 100% !important;
    max-width: 100%;
}

/* --- rows of options: one line of pills, then Generate --------------------- */

.rpt-card form .row:has(.radio-inline, .btn) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-12) var(--ui-space-20);
}

/* The product size-wise reports: their options are captioned groups - Brand
   category, Category, Season, then Run on Flat - on one line from the card's
   left edge, pills level. They used to be two rows of Bootstrap columns whose
   padding indented the pills and scattered the groups. */
.rpt-card form .row.rpt-options {
    align-items: flex-end;
    gap: var(--ui-space-12) var(--ui-space-24);
}

/* A group is its caption over its row of pills. The groups line up at the
   bottom, so Run on Flat (a pill that needs no caption) sits level with the
   Summer / Winter pills beside it, not with the Season caption. */
.rpt-option-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ui-space-6);
}

.rpt-option-group > .ui-field-label {
    margin: 0;
}

.rpt-option-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-8);
}

/* Season and Run on Flat travel together, so when the options wrap, Run on
   Flat stays on the line of the Summer / Winter pills. */
.rpt-option-set {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ui-space-12) var(--ui-space-24);
}

/* A field in an options row keeps a filter column's width. */
.rpt-card form .row:has(.radio-inline, .btn) > [class*="col-md"]:not(:has(.radio-inline, .btn)) {
    flex: 0 0 calc(var(--ui-filter-column) + var(--ui-space-20));
}

.rpt-card form .row > [class*="col-md"]:has(> .radio-inline),
.rpt-card form .form-group:has(> .radio-inline) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-8);
}

.rpt-card label.radio-inline {
    display: inline-flex;
    min-height: var(--ui-control-height-sm);
    margin: 0;
    padding: var(--ui-space-6) var(--ui-space-12);
    align-items: center;
    gap: var(--ui-space-6);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    color: var(--ui-label);
    background: var(--ui-surface);
    font-size: var(--ui-fs-sm);
    font-weight: var(--ui-fw-semibold);
    cursor: pointer;
}

.rpt-card label.radio-inline:hover {
    border-color: var(--ui-border-hover);
    color: var(--ui-ink);
}

/* The chosen option carries the site colour, like the primary button. */
.rpt-card label.radio-inline:has(input:checked) {
    border-color: var(--ui-primary-border);
    color: var(--ui-ink);
    background: var(--ui-branch-wash);
}

.rpt-card label.radio-inline input {
    position: static;
    margin: 0;
}

/* --- phones ------------------------------------------------------------ */

@media (max-width: 560px) {
    .rpt-card {
        padding: var(--ui-space-12);
    }

    .rpt-card form .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rpt-card form .row:has(.radio-inline, .btn) > [class*="col-md"]:not(:has(.radio-inline, .btn)) {
        flex: 1 1 100%;
    }
}