/**
 * OPRaaS Audit Form Tools - FIXED Custom Styles
 * Version: 1.5.2-FIXED
 * 
 * FIXES:
 * - Vertical text display issue in file list
 * - File list width constraints
 * - All previous v1.5.2 enhancements maintained
 */

/* ============================================
   HIDE "NO FILES SELECTED" TEXT
   ============================================ */

.gfield_fileupload_rules,
.validation_message,
input[type="file"] + .gfield_description:contains("no files selected"),
.ginput_container_fileupload .validation_message {
    display: none !important;
}

.ginput_container_fileupload input[type="file"] + span,
.gform_fileupload_rules {
    display: none !important;
}

.ginput_container_fileupload *:not(input):not(button):not(label) {
    color: transparent !important;
    font-size: 0 !important;
}

.ginput_container_fileupload input[type="file"],
.ginput_container_fileupload button,
.ginput_container_fileupload .gform_button {
    color: inherit !important;
    font-size: inherit !important;
}

/* ============================================
   FILE UPLOAD ENHANCEMENTS
   ============================================ */

.ginput_container_fileupload {
    position: relative;
    padding: 15px;
    background: #f9f9f9;
    border: 2px dashed #ddd;
    border-radius: 8px;
    margin: 10px 0;
    transition: all 0.3s ease;
    width: 100% !important;
    max-width: 100% !important;
}

.ginput_container_fileupload:hover {
    border-color: #0073aa;
    background: #f0f8ff;
}

.ginput_container_fileupload input[type="file"] {
    cursor: pointer;
    padding: 10px;
    font-size: 14px;
}

/* ============================================
   FILE LIST STYLING - CRITICAL FIX
   ============================================ */

/* Force proper width and layout */
.opraas-file-list {
    margin: 15px 0 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: block !important;
    width: 100% !important;
    min-width: 400px !important;
    max-width: 100% !important;
    clear: both !important;
    box-sizing: border-box !important;
}

/* Individual file item - prevent text wrapping vertically */
.opraas-file-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    margin-bottom: 10px !important;
    background: #f8f9fa !important;
    border: 1px solid #e1e4e8 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
}

.opraas-file-item:hover {
    background: #ffffff !important;
    border-color: #2b3b63 !important;
    box-shadow: 0 2px 4px rgba(43, 59, 99, 0.1) !important;
}

/* Filename - prevent character-by-character wrapping */
.opraas-file-name {
    display: inline-block !important;
    font-size: 14px !important;
    color: #2b3b63 !important;
    font-weight: 500 !important;
    flex: 1 1 auto !important;
    margin-right: 15px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* File size */
.opraas-file-size {
    display: inline-block !important;
    font-size: 13px !important;
    color: #6c757d !important;
    margin-right: 15px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Remove button - styled to match OPRaaS theme */
.opraas-remove-file {
    display: inline-block !important;
    background: #dc3545 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.opraas-remove-file:hover {
    background: #c82333 !important;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3) !important;
    transform: translateY(-1px);
}

.opraas-remove-file:active {
    transform: translateY(0);
}

/* ============================================
   FORM FIELD IMPROVEMENTS
   ============================================ */

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="date"],
.gform_wrapper textarea,
.gform_wrapper select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    transition: border-color 0.3s ease;
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="date"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .ginput_container_fileupload {
        padding: 10px;
    }
    
    .opraas-file-list {
        min-width: 100% !important;
    }
    
    .opraas-file-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    .opraas-file-name {
        margin-right: 0 !important;
        margin-bottom: 4px !important;
        width: 100% !important;
    }
    
    .opraas-file-size {
        margin-right: 0 !important;
        margin-bottom: 4px !important;
    }
    
    .opraas-remove-file {
        align-self: flex-end !important;
        width: 100% !important;
        text-align: center !important;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.opraas-remove-file:focus,
.ginput_container_fileupload input[type="file"]:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

.opraas-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   FORCE PARENT CONTAINERS TO FULL WIDTH
   ============================================ */

.elementor-field-type-upload,
.elementor-field-type-upload .elementor-field-group,
.elementor-field-type-upload .ginput_container_fileupload {
    width: 100% !important;
    max-width: 100% !important;
}