/* =============================================================================
   SearchGrid.css
   -----------------------------------------------------------------------------
   Generic, reusable responsive form layout that replaces legacy
   <table>-based "label / value / label / value" search and entry forms.

   Class summary (all generic - reuse on any similar form):
     .search-grid          - 4-column CSS-grid container (label,value,label,value)
     .field-label        - left-aligned label cell
     .field-value        - value cell; flex container for input + adornments
     .field-value-inline - value cell variant when it holds an inline group
                           (e.g., checkbox + label + checkbox)
     .row-group          - display:contents wrapper; lets a runat="server"
                           DIV act as a "row" so code-behind .Visible toggles
                           still work without breaking the grid flow
     .full-row           - any cell that spans the entire grid width
     .form-actions       - centred row of action buttons (Search/Reset/Refine)
     .help-link          - small inline help (?) icon link
     .inline-label       - secondary label text shown beside another control

   Responsive behaviour:
     >= 981px  - 4 columns: [label | value | label | value]
     <= 980px  - 2 columns: [label | value] (label/value pairs stack vertically)
     <= 600px  - 1 column : labels sit above their values (phone-friendly)
   ============================================================================= */


/* ---------- 1. Container ------------------------------------------------- */
.search-grid {
    display: grid;
    grid-template-columns: minmax(160px, 140px) minmax(0, 1fr) minmax(160px, 140px) minmax(0, 1fr);
    gap: 2px 1px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    color: #1f2937;
}

    .search-grid *,
    .search-grid *::before,
    .search-grid *::after {
        box-sizing: inherit;
        max-width:100%;
    }


    /* ---------- 2. Label cell ------------------------------------------------ */
    .search-grid .field-label {
        font-size: 13px;
        font-weight: 500;
        color: #4b5563;
        line-height: 1.6;
        padding-top: 6px; /* aligns with input baseline on desktop */
        word-break: break-word;
        min-width: 0;
    }

        /* Required-field indicator (red asterisk) */
        .search-grid .field-label .req-star,
        .search-grid .field-label .required-marker {
            color: #c53030;
            font-weight: 600;
            margin-left: 2px;
        }


    /* ---------- 3. Value cell ------------------------------------------------ */
    .search-grid .field-value {
        font-size: 13px;
        color: #1f2937;
        min-width: 0; /* lets children shrink below content size  */
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        /*gap: 6px;*/
        padding-top: 2px;
    }

    /* Inline group of small controls (checkbox + label + checkbox, etc.) */
    .search-grid .field-value-inline {
        gap: 6px 6px;
    }

    .search-grid .field-value-inline .inline-label {
        color: #4b5563;
        font-weight: 500;
        margin-left: 6px;
    }

    /* Most form controls inside a value cell should grow to fill space.
   Telerik controls render as wrapper DIVs/TABLEs; cover both. */
    .search-grid .field-value > input[type="text"],
    .search-grid .field-value > input[type="search"],
    .search-grid .field-value > input[type="email"],
    .search-grid .field-value > input[type="number"],
    .search-grid .field-value > input[type="password"],
    .search-grid .field-value > input[type="tel"],
    .search-grid .field-value > input[type="url"],
    .search-grid .field-value > input[type="date"],
    .search-grid .field-value > select,
    .search-grid .field-value > textarea {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Check-boxes and radios stay their natural size, vertically centred */
    .search-grid .field-value > input[type="checkbox"],
    .search-grid .field-value > input[type="radio"] {
        margin: 6px 0px;
        flex: 0 0 auto;
    }

    /* Telerik wrapper widgets: never overflow the cell */
    .search-grid .field-value .RadComboBox,
    .search-grid .field-value .RadInput,
    .search-grid .field-value .rcbInputCell,
    .search-grid .field-value .riSingle {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Validators (CustomValidator/RequiredFieldValidator render inline spans) */
    .search-grid .field-value > span[id*="Validator"],
    .search-grid .field-value > .validator-msg {
        flex: 1 1 100%; /* drop validator text to its own line     */
        color: #c53030;
        font-size: 12px;
        margin-top: 2px;
    }

    /* -----------3.1 Field Help Text--------------------------------------------*/
    .search-grid .field-help {
        font-size: 12px;
        color: #7c8aa3;
        line-height: 1.0;
        margin-top: 0px;
        display: flex;
        flex-wrap: wrap;
    }

    /* ---------- 4. Row group wrapper ----------------------------------------- */
    /* Use on any DIV that wraps a logical "row" of label/value pairs but must
   keep them flowing as direct grid items (e.g., a runat="server" wrapper
   you toggle from code-behind). display:contents makes the wrapper layout-
   transparent while preserving the server-side hide/show behaviour. */
    .search-grid .row-group {
        display: contents;
    }


    /* ---------- 5. Full-row & action bar ------------------------------------- */
    .search-grid .full-row {
        grid-column: 1 / -1;
    }

.form-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px 0 4px;
    margin-top: 4px;
    border-top: 1px solid #eef0f3;
}


/* ---------- 6. Help link / icon ----------------------------------------- */
.help-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 4px;
    padding: 2px;
    transition: background-color 0.15s ease;
    flex: 0 0 auto;
}

    .help-link:hover {
        background: #eef4fb;
    }

    .help-link img {
        display: block;
        border: 0;
        max-height: 16px;
        max-width: 16px;
    }


/* =============================================================================
   7. RESPONSIVE BREAKPOINTS
   ============================================================================= */

/* ---------- <= 980px: collapse 4 columns to 2 ---------------------------- */
@media (max-width: 980px) {
    .search-grid {
        grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
        gap: 8px 14px;
    }

        /* Free inputs of any inline pixel widths set via control properties
       (e.g. <usr:textbox width="218">) so they reflow to the cell width. */
        .search-grid .field-value > input[type="text"],
        .search-grid .field-value > input[type="search"],
        .search-grid .field-value > input[type="email"],
        .search-grid .field-value > input[type="number"],
        .search-grid .field-value > input[type="password"],
        .search-grid .field-value > select,
        .search-grid .field-value > textarea,
        .search-grid .field-value .RadComboBox,
        .search-grid .field-value .RadInput {
            width: 100% !important;
            max-width: 100%;
        }
}


/* ---------- <= 600px: stack label above value (phone) -------------------- */
@media (max-width: 600px) {
    .search-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }

        /* Label sits flush above its value, slight separator above each pair  */
        .search-grid .field-label {
            padding-top: 12px;
            padding-bottom: 0;
            font-weight: 600!important;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            color: #6b7280;
        }

        .search-grid > .field-label:first-child,
        .search-grid .row-group > .field-label:first-child {
            padding-top: 0;
        }

        .search-grid .field-value {
            padding-top: 4px;
            padding-bottom: 6px;
            border-bottom: 1px dashed #eef0f3;
        }

    /* Action buttons stretch full width and stack vertically */
    .form-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .form-actions > * {
            width: 100%;
            text-align: center;
        }
}


/* ---------- <= 380px: ultra-narrow phones -------------------------------- */
@media (max-width: 380px) {
    .search-grid .field-value-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

        .search-grid .field-value-inline .inline-label {
            margin-left: 0;
        }
}

/* ============================ END FormGrid.css ============================== */