/* Resume Formatter Layout Styles */
/* Grid systems, spacing, responsive design */

/* Ensure font inheritance for all elements in the block */
#dynamicButtonContainer, #dynamicButtonContainer * {
    font-family: inherit !important;
}

/* Button group for resume actions */
#resume-action-group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.resume-action {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.dropdown-group {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.or-text {
    align-self: center;
    font-weight: bold;
    margin: 0 5px;
}

/* Upload interface layout */
.upload-interface {
    margin: 20px 0;
}

.upload-row {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
}

.upload-row .btn {
    flex-shrink: 0;
    min-width: 120px;
}

/* Responsive layout for the resume action buttons */
#dynamicButtonContainer {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

/* Desktop: row order */
@media (min-width: 768px) {
    #dynamicButtonContainer {
        flex-direction: row;
        align-items: flex-start;
    }
    .action-upload {
        order: 1;
        flex-basis: 180px;
        min-width: 180px;
    }
    .action-or-upload {
        order: 2;
    }
    .action-default {
        order: 3;
    }
    .action-or-default {
        order: 4;
    }
    .action-dropdown {
        order: 5;
    }
    .action-format {
        order: 6;
    }
    
    /* Upload interface desktop layout */
    .upload-row {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 15px;
        flex-wrap: wrap;
    }
    
    .upload-row .btn {
        flex-shrink: 0;
        min-width: 120px;
        width: auto;
    }
    
    .filename-display {
        flex: 1;
        min-width: 150px;
        max-width: 300px;
        order: 2;
    }
    
    .upload-row #chooseFileButton {
        order: 1;
    }
    
    .upload-row #formatResumeButton {
        order: 3;
    }
}

/* Mobile: column order and responsive stacking */
@media (max-width: 767px) {
    #dynamicButtonContainer {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .action-default {
        order: 1;
        margin-bottom: 8px;
    }
    .action-or-default {
        order: 2;
        align-self: center;
        margin-bottom: 8px;
    }
    .action-dropdown {
        order: 3;
        margin-bottom: 8px;
    }
    .action-format {
        order: 4;
        margin-bottom: 8px;
    }
    .action-or-upload {
        order: 5;
        align-self: center;
        margin-bottom: 8px;
    }
    .action-upload {
        order: 6;
        margin-bottom: 0;
    }
}

/* Responsive stacking for button container on mobile */
@media (max-width: 600px) {
    #dynamicButtonContainer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    #dynamicButtonContainer > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
        text-align: center;
    }
    #dynamicButtonContainer select {
        width: 100% !important;
    }
    
    /* Resume action group mobile layout */
    #resume-action-group {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 0;
    }
    .resume-action {
        margin-bottom: 16px;
    }
    .or-text {
        margin: 0 0 8px 0;
        align-self: flex-start;
    }
    .dropdown-group {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    /* Upload interface mobile layout */
    .upload-row {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .upload-row .btn {
        width: 100%;
        min-width: 100%;
        text-align: center;
        padding: 12px 16px;
        font-size: 16px;
    }
    
    .filename-display {
        width: 100%;
        text-align: center;
        padding: 12px;
        font-size: 16px;
        order: 2;
    }
    
    .upload-row #chooseFileButton {
        order: 1;
    }
    
    .upload-row #formatResumeButton {
        order: 3;
    }
}