/* =====================================
   INPUT COMPONENT STYLES
   ===================================== */

@layer components{
    /* ============= Form Labels ============= */
    label:not(.slide-toggle){
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--foreground-primary);
        display: inline-block;
        margin-bottom: 4px !important;
    }

    label.noblock{
        display: inline !important;
        margin-right: 8px !important;
        vertical-align: middle !important;
        color: var(--foreground-primary);
        opacity: 0.85;
        font-weight: 400;
    }
    
    /* ============= Input Fields Base ============= */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.select2-search__field),textarea, .swal2-input{
        background: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--input-radius);
        color: var(--foreground-primary);
        font-size: var(--font-size-base);
    }

    /* Input Field Sizing */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.select2-search__field), .swal2-input{
        min-height: 34px;
        padding: 0 12px;
    }

    /* ============= Input Field States ============= */
    /* Input Focus State */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.select2-search__field):focus, textarea:focus, .swal2-input:focus{
        border: 1px solid var(--input-focus-border);
        outline: none;

        box-shadow: 0 0 0 3px var(--ring) !important;
    }

    input[type="checkbox"]{
        margin-top: 10px !important;
    }

    input[type="checkbox"]:after{
        width: 20px;
        height: 20px;
        cursor: pointer;
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--input-radius);
        color: var(--foreground-primary);
    }

    input[type="checkbox"]:hover:after{
        background-color: var(--surface-second);
    }

    input[type="checkbox"]:checked:after{
        cursor: pointer;
        background-color: var(--primary);
        border: 1px solid var(--primary);
        color: var(--color-white);
        background-image: url("/client/images/icon_white_check.svg") !important;
        background-size: 16px 16px;
        background-repeat: no-repeat;
        background-position: center;
    }

    input[type="checkbox"]:checked:hover:after{
        background-color: var(--primary-hover);
    }

    input[type="checkbox"]:disabled:after{
        opacity: 0.7;
        cursor: not-allowed;
    }

    /* ============= WYSIWYG Editor ============= */
    /* WYSIWYG Container */
    .wysiwyg-container{
        background: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--input-radius);
        color: var(--foreground-primary);
        font-size: var(--font-size-base);
        overflow: hidden;
    }

    .wysiwyg-container.wysiwyg-active{
        border: 1px solid var(--input-focus-border);
        box-shadow: 0 0 0 3px var(--ring) !important;
    }

    /* WYSIWYG Toolbar */
    .wysiwyg-toolbar{
        padding: 0px;
        border-color: var(--border);
    }

    /* WYSIWYG Toolbar Icons */
    .wysiwyg-toolbar-icon{
        /* color: var(--foreground-primary); */
        color: transparent !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        position: relative;
    }

    .wysiwyg-toolbar-icon::before{
        position: absolute;
        content: "";
        font-size: 14px;
        color: var(--foreground-primary);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* WYSIWYG Toolbar Icon Hover State */
    .wysiwyg-toolbar-icon:hover{
        background: var(--primary-light);
        /* color: var(--primary); */
        color: transparent;
    }

    .wysiwyg-toolbar-icon:hover::before{
        color: var(--primary);
    }

    /* WYSIWYG Editor Content Area */
    .wysiwyg-editor{
        color: var(--foreground-primary);
        font-size: var(--font-size-base);
        line-height: 1.5;
        padding: 12px;
        overflow: auto;
    }

    /* WYSIWYG Popup */
    .wysiwyg-popup{
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--input-radius);
    }

    .content-preview ul, .content-preview ol{
        list-style: inside;
    }

    /* ============= File Upload Component ============= */
    /* File Uploader Base */
    .qq-uploader{
        background-color: var(--surface-third);
        border: 1px dashed var(--border);
        border-radius: var(--input-radius);
    }

    /* File Uploader Placeholder Text */
    .qq-uploader:before{
        font-size: var(--font-size-base);
        color: var(--foreground-second);
        font-weight: 600;
    }

    /* ============= File Upload List ============= */
    /* Upload List Container */
    .qq-upload-list{
        box-shadow: none;
    }

    /* Individual Upload Item */
    .qq-upload-list li{
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        margin-bottom: 12px;
        background: var(--surface-second);
        color: var(--foreground-primary);
    }


    /* ============= Radio Button Styles ============= */
    .radio-item{
        display: flex !important;
        align-items: center;
        gap: 8px;
        font-size: var(--font-size-base);
        color: var(--foreground-primary);
    }

    input[type="radio"]{
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        cursor: pointer;
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: 50%;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        outline: none;
        position: relative;
        margin-top: -4px !important;
        padding: 0 !important;
    }

    input[type="radio"]::after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        background-color: transparent;
        border-radius: 50%;
        transition: background-color 0.2s;
        border: none;
    }

    input[type="radio"]:hover{
        background-color: var(--surface-second);
    }

    input[type="radio"]:checked{
        background-color: var(--primary);
        border: 1px solid var(--primary);
    }

    input[type="radio"]:checked::after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        background-color: var(--color-white);
        border-radius: 50%;
    }

    .manual-control-wrapper .checkbox-parent {
        display: inline-flex !important;

        align-items: center;
        flex-direction: row-reverse;
        justify-content: start;

        margin-top: 0px !important;
    }
    
    .checkbox-item label, .radio-item label, li input[type="radio"] + label{
        height: auto !important;
        line-height: 30px !important;
        vertical-align: top !important;
        margin-bottom: 0px !important;
        margin-right: 16px !important;
        margin-right: 24px !important;
        margin-left: 0px !important;
        text-wrap: nowrap;
        width: fit-content;
    }

    li > input[type='radio']{
        margin-top: 9px !important;
    }

    .radio-label{
        line-height: 30px !important;
    }

    .ui-dialog .radio-label{
        line-height: auto !important;
    }

    .radio-wrapper{
        /* display: flex !important; */
        height: auto !important;
        line-height: 20px !important;
        vertical-align: top !important;
    }

    .form-control {
        margin-bottom: revert-layer !important;
    }
}