/* 
 * Form Styles - Consolidated
 * This file organizes all form-related styles using a class-based approach to 
 * avoid specificity conflicts and provide clear distinctions between form types.
 */

/* ===== Base Form Components ===== */

/* Form Inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="time"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="color"],
textarea,
select {
    background-color: var(--layer-background);
    color: inherit;
    border: none;
    padding-block: 1rem;
    font-family: inherit;
    font-size: var(--font-size-body-large);
    width: 100%;
    
    &.outlined {
        border-radius: var(--radius-small);
        border: 1px solid var(--outline);
        padding: var(--inline-space) var(--block-space);
    }
}

/* Custom checkbox styling */
input[type="checkbox"] {
    background-color: var(--layer-background);
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 2px solid var(--outline-variant);
    border-radius: var(--radius-x-small);
    appearance: none;
    position: relative;
    vertical-align: middle;
}
   
input[type="checkbox"]:checked {
    background: var(--primary);
    border-color: var(--primary);
}
   
input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--on-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
   
input[type="checkbox"]:hover {
    border-color: var(--outline);
}
input[type="file"] {
    padding: var(--size-1);
    border: 1px solid var(--outline);
    border-radius: var(--radius-small);
    display: flex;
    align-items: center;
  }
  
  input[type="file"]::file-selector-button {
    background-color: var(--layer-widget);
    color: var(--on-layer-background);
    border: none;
    padding: 0.75rem 1rem;
    margin-right: 1rem;
    border-radius: var(--radius-full);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  input[type="file"]::file-selector-button:hover {
    background-color: var(--layer-widget);
  }
  
/* Select Input */
.input-select,
.form-select {
    background: var(--layer-background);
    padding: var(--inline-space) var(--inline-space);
    border-radius: var(--radius-small);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    &.outlined {
        border: 1px solid var(--outline);
        border-radius: var(--radius-medium);
        padding: var(--inline-space) var(--block-space);
    }
}

/* ===== Form Control Elements ===== */

.form-label {
    display: block;
    margin-bottom: var(--inline-space);
    font-weight: var(--font-weight-5);
    color: var(--on-layer-background);
}

.form-control {
    margin-bottom: var(--block-space);
}
.button_to {
    pointer-events: auto;
    position: relative;
}

.form-input {
    border-radius: var(--radius-medium);
    border: 1px solid var(--outline) !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: var(--on-layer-background);
    display: block;
    font-size: var(--font-size-body-large);
    line-height: var(--font-lineheight-2);
    padding: 1rem;
    transition:
        border-color 0.15s ease-in-out 0s,
        box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}

.form-textarea {
    border-radius: var(--radius-medium);
    border: 1px solid var(--outline) !important;
    display: block;
    min-height: 100px;
    width: 100%;
    padding: var(--inline-space);
        background: var(--layer-background);
    color: var(--on-layer-background);
}

.supporting-text {
    font-size: var(--font-size-body-small);
    color: var(--outline);
    padding: 0 var(--inline-space);
    display: block;
}

/* ===== Form Layout Types ===== */

/* Standard Form - Default layout for most forms */
.standard-form {
    display: flex;
    flex-direction: column;
    gap: var(--size-3);
    width: 100%;
    
    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--size-2);
        margin-top: var(--size-3);
        padding-top: var(--size-3);
        border-top: 1px solid var(--outline-variant);
    }
}

/* Boost Form - Compact form for quick actions */
.xboost-form {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--size-2);
    width: 400px;
    /* flex-direction: row; */
    padding: var(--size-2);
    /* background: var(--layer-background); */
    background: red;
    border-radius: var(--radius-full);
    
    input, textarea {
        flex: 1;
        min-height: auto; 
        background: transparent;
        padding: var(--size-2);
    }
    
    .form-actions {
        display: flex;
        justify-content: flex-end;
    }
    
    button {
        flex-shrink: 0;
    }
}

/* Composer Form - For rich text editing */
.composer-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    
    trix-editor {
        min-height: 24px;
        height: fit-content;
        max-height: 40vh;
        overflow-y: auto;
        overflow-x: hidden;
        resize: none;
        transition: height 0.1s ease-out;
        border: 1px solid var(--outline-variant);
        border-radius: var(--radius-small);
        padding: var(--size-2);
        
        &.full-height {
            height: 100%;
            max-height: 100%;
        }
    }
    
    .form-actions {
        display: flex;
        justify-content: flex-end;
        padding-top: var(--size-2);
    }
}

/* Modal Form - For forms in dialogs */
.modal-form {
    display: flex;
    flex-direction: column;
    gap: var(--size-3);
    min-height: 200px;
    
    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--size-2);
        margin-top: auto;
        padding-top: var(--size-3);
        border-top: 1px solid var(--outline-variant);
    }
}

/* ===== Specialized Form Components ===== */

/* Floating placeholder */
.floating-placeholder {
    position: relative;
    margin-block: var(--size-1);
    width: 100%;
    
    label {
        transition: transform 0.2s cubic-bezier(0.2, 1.3, 0.7, 1);
        position: absolute;
        top: 1rem;
        left: 0.5em;
        transform-origin: 0 0;
        visibility: hidden;
        font-weight: normal;
        pointer-events: none;
        color: var(--on-layer-widget);
        text-align: left;
        
        &:hover {
            cursor: text;
        }
    }
    input {
        border-radius: var(--radius-small);
        padding-inline: var(--inline-space);
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        border: 1px solid var(--outline) !important;
        background: var(--layer-background);
        color: var(--on-layer-background);
        width: 100%;
        &:not(:placeholder-shown) {
            padding-top: 1.6rem !important;
            padding-bottom: 0.4rem !important;
            + label {
                transform: scale(0.8) translate(0.2rem, -0.75rem);
                visibility: visible;
            }
        }
        
        &:focus {
            border-color: var(--primary) !important;
            outline: none;
            
            + label {
                transform: scale(0.8) translate(0.2rem, -0.75rem);
                visibility: visible;
                color: var(--primary);
            }
        }
    }
}

/* ===== Form Validation & Errors ===== */

.error-banner {
    background: var(--error-container);
    padding: var(--inline-space);
    border-radius: var(--inline-space-half);
    color: var(--on-error-container);
    margin-bottom: var(--size-3);
}

.error_explanation {
    background-color: var(--error-container);
    padding: var(--inline-space) var(--block-space);
    border-radius: var(--inline-space);
    color: var(--on-error-container);
    margin-bottom: var(--size-3);
    ul {
        color: var(--on-error-container);
        margin: 0 0 var(--size-3) 0;
        padding-left: var(--size-4);
    }
}

input.validation-error,
textarea.validation-error,
select.validation-error {
    border: 1px solid var(--error) !important;
}

.validation-error {
    border: 1px solid var(--error) !important;
}

/* Field validation message */
.field-error {
    color: var(--error);
    font-size: var(--font-size-body-small);
    margin-top: var(--size-1);
}