/**
 * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
 *
 * WSO2 LLC. licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/**
 * This file contains custom styles for the application that are
 * applied on-top of the default styles shipped with the application.
 */


/**
 * Fix: On mobile viewports, the Save/Cancel buttons in the Personal Info
 * editing sections overlap form fields because the Semantic UI grid columns
 * use fixed `width` props that don't stack on small screens.
 *
 * The edit form has a NESTED grid structure:
 *   Outer grid: label (width:4) + content (width:12)
 *   Inner grid: input (width:10) + buttons (width:6)
 *
 * Both levels must be forced to full-width on mobile. Additionally, the
 * button wrappers (.text-field-actions in legacy, .form-actions-wrapper
 * in newer) use flex-wrap:nowrap which must be overridden.
 */
@media only screen and (max-width: 767px) {

    /*
     * Force ALL grid columns inside edit-segment to stack vertically.
     * This catches both the outer grid (label | content) and the
     * inner nested grid (input | buttons).
     */
    .ui.card.settings-card .main-content .main-content-inner .edit-segment .ui.grid > .row > .column,
    .ui.card.settings-card .main-content .main-content-inner .edit-segment .ui.grid .ui.grid > .row > .column,
    .ui.segment.edit-segment .ui.grid > .row > .column,
    .ui.segment.edit-segment .ui.grid .ui.grid > .row > .column,
    .ui.segment.edit-segment .ui.grid .row > .column {
        width: 100% !important;
        padding-left: 0.5em !important;
        padding-right: 0.5em !important;
    }

    /*
     * Fix button wrappers — both legacy (.text-field-actions) and
     * newer (.form-actions-wrapper) use flex-wrap:nowrap by default,
     * causing buttons to squeeze. Override to wrap and align left.
     */
    .form-actions-wrapper,
    .text-field-actions {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        width: 100% !important;
        margin-top: 8px;
    }

    /* Ensure the inner-list-item columns also stack on mobile */
    .ui.card.settings-card .main-content .main-content-inner .inner-list-item .ui.grid > .column,
    .ui.card.settings-card .main-content .main-content-inner .inner-list-item .ui.grid > .row > .column {
        width: 100% !important;
        padding-left: 1em !important;
        padding-right: 1em !important;
    }

    /* Prevent the first-column label from being too narrow */
    .ui.card.settings-card .main-content .main-content-inner .inner-list-item .first-column {
        padding-left: 1em !important;
        margin-bottom: 4px;
    }

    /* Ensure the last-column (edit icon) aligns properly when stacked */
    .ui.card.settings-card .main-content .main-content-inner .inner-list-item .last-column {
        padding-right: 1em !important;
        text-align: right;
    }

    /* Add spacing between edit-segment form rows */
    .ui.segment.edit-segment .ui.grid > .row {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Also space out the inner nested grid rows */
    .ui.segment.edit-segment .ui.grid .ui.grid > .row {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    /* Reduce edit-segment padding and prevent overflow */
    .ui.segment.edit-segment {
        padding: 1em !important;
        overflow: visible;
    }

    /* Make the inner form grid's row not constrain to 2 columns */
    .ui.segment.edit-segment .ui.grid .ui.grid > .row.p-0 {
        flex-direction: column !important;
    }

    /* Ensure the input field inside the edit form is full width */
    .ui.segment.edit-segment .ui.grid .ui.grid > .row > .column .ui.input,
    .ui.segment.edit-segment .ui.grid .ui.grid > .row > .column input[type="text"],
    .ui.segment.edit-segment .ui.grid .ui.grid > .row > .column .ui.selection.dropdown {
        width: 100% !important;
    }

    /*
     * Fix: Semantic UI .ui.grid has margin-top: -1rem by default.
     * When columns stack on mobile, this negative margin pulls the
     * edit form upward, overlapping the field label above it.
     */
    .ui.form > .ui.grid {
        margin-top: 0 !important;
    }

    /* Make dropdown and multi-value fields full width on mobile */
    .dropdown-field-form .OxygenSelect-root,
    .multi-valued-field-form .OxygenTextField-root,
    .radio-group-field-form .OxygenFormControl-root,
    .checkbox-group-field-form .OxygenFormControl-root,
    .date-picker-field-form .OxygenTextField-root {
        width: 100%;
    }
}