/* ==========================================================================
   FABRIK CUSTOM STYLES
   Location: media/com_fabrik/css/custom.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL LIST VIEW FIXES (Applies to all screen sizes)
   -------------------------------------------------------------------------- */

/* Multi-select and Checkbox cell alignment in List Views */
.fabrik_row .fb_el_fabrikcheckbox,
.fabrik_row [class*="fabrik_element___chk"] {
    vertical-align: middle !important;
    white-space: normal !important;
    line-height: 1.3 !important;
}

.fabrik_row .fb_el_fabrikcheckbox span,
.fabrik_row [class*="fabrik_element___chk"] span {
    display: inline-block;
    vertical-align: middle;
}


/* --------------------------------------------------------------------------
   2. MOBILE RESPONSIVE FORM LAYOUTS (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* Force labels above form controls */
    .fabrikForm .control-group,
    .fabrikForm .fb_el {
        display: block !important;
    }

    .fabrikForm .control-label,
    .fabrikForm .fabrikLabel {
        width: 100% !important;
        text-align: left !important;
        float: none !important;
        margin-bottom: 4px !important;
    }

    .fabrikForm .controls,
    .fabrikForm .fabrikControls {
        width: 100% !important;
        margin-left: 0 !important;
        float: none !important;
    }

    /* Standard inputs & textareas (Full width + iOS zoom prevention) */
    .fabrikForm input[type="text"],
    .fabrikForm input[type="email"],
    .fabrikForm input[type="number"],
    .fabrikForm textarea,
    .fabrikForm select {
        font-size: 16px !important; /* Prevents auto-zoom on iOS */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Modals, Popups & Date Pickers */
    .fabrikForm .fabrikWindow,
    .fabrik_date_calendar {
        max-width: 90vw !important;
        left: 5vw !important;
    }

    .fabrikForm .datepicker_container input {
        width: 100% !important;
    }

    /* File uploaders */
    .fabrikForm .fabrikSubElementContainer .plupload_container {
        width: 100% !important;
    }

    /* Form Action Buttons (Full-width stacked) */
    .fabrikForm .fabrikActions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }

    .fabrikForm .fabrikActions .btn,
    .fabrikForm .fabrikActions button,
    .fabrikForm .fabrikActions input[type="submit"] {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
    }
}


/* --------------------------------------------------------------------------
   3. NARROW MOBILE STACKING FOR RADIOS & CHECKBOXES (< 576px)
   Change 575.98px to 479.98px if you want it to kick in even later.
   -------------------------------------------------------------------------- */
@media (max-width: 479.98px) {

    .fabrikForm .fabrikSubElementContainer {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .fabrikForm .fabrikSubElementContainer label {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 0 !important;
        padding: 6px 0 !important;
        cursor: pointer;
    }

    .fabrikForm .fabrikSubElementContainer input[type="radio"],
    .fabrikForm .fabrikSubElementContainer input[type="checkbox"] {
        margin-right: 10px !important;
        margin-top: 0 !important;
        flex-shrink: 0;
    }
}