/* Title above the form */
div.title {
    position: relative;
    font-size: 18pt;
    color: #4A4A4A;
    font-weight: bolder;
    margin-left: 20px;
    margin-top: 20px;
    padding: 10px;
}

/* Div that contains the invoice upload form*/
div.contains {
    margin-left: 40px;
    font-family: Arial, sans-serif;
    color: #4A4A4A;
}

/* Hides the rest of the attributes in the file upload context that we don't want displayed*/
.file-upload {
    color: transparent;
}

/* This is applied to the span that displays the file name*/
.file-name {
    display: flex;
    font-size: 13pt;
    width: 200px;
    color: #4A4A4A;
    text-align: left;
    white-space: nowrap;
}


/* This controls the style/state of the file input button in its initial state */
.file-upload::before {
    display: inline-block;
    box-sizing: border-box;
    background-color: #4F77B1;
    border-radius: 5px;
    border: 1px solid #4F77B1;
    padding: 5px 10px;
    font-family: Arial, sans-serif;
    font-size: 12pt;
    font-weight: bold;
    color: white;
    -webkit-user-select: none;
    content: 'Choose file';
    cursor: pointer; 
}

/* This controls the style/state of the file input button in its initial state */
.file-upload-bulk::before {
    content: 'Choose files';
}

/* Hover actions for the custom button for file upload */
.file-upload:hover::before {
    background-color: #3A4B64;
}

/* Hides the browser stock button for file input */
.file-upload::-webkit-file-upload-button {
    visibility: hidden;
}

/*Styling for the input boxes on the form*/
.text-fields {
    width: 540px;
    border: 1px solid #4A4A4A;
    border-radius: 5px;
    padding: 5px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-size: 12pt;
    color: #4A4A4A;
    margin: 2px;
}

/*Styles for the text boxes dynamically created in the bulk form*/
.text-fields-direct {
    width: 240px;
    border: 1px solid #4A4A4A;
    border-radius: 5px;
    padding: 5px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-size: 12pt;
    color: #4A4A4A;
    margin: 2px;
}

/*Style for validate or error messages */
.text-fields-error {
    width: 55%;
    border-radius: 5px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-size: 12pt;
    color: #4A4A4A;
    background-color: #FDFCFA;
    margin: 2px;
    border: 2px solid red;
}

/*Style for the labels for the text boxes*/
.field-label {
    font-family: Arial, sans-serif;
    width: 200px;
    font-size: 14pt;
    vertical-align: top;
    margin-right: 10px;
    font-weight: bold;
}

/*Textarea for Description input*/
.text-anonymous textarea {
    height: 75px;
    width: 540px;
    border: 1px solid #4A4A4A;
    border-radius: 10px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-size: 12pt;
    margin: 2px;
}

/* Applies to the Divs around each label/input combo in the form */
.text-anonymous {
    padding: 20px 0;
}

/* Adds space and font color for a spacing div that displays validation messages */
.spacer {
    margin: 10px 0;
    color: red;
}

/*Removes margins for a paragraph */
.spacer p {
    margin: 0;
}

/*Extra emphasis for an error/validation message*/
.greater-danger {
    font-weight: bolder;
}

/* Enhanced success message styling - more prominent and noticeable */
.success-message {
    background-color: #28a745 !important;
    color: white !important;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 5px solid #1e7e34;
    font-weight: bold;
    font-size: 14pt;
    margin: 15px 0;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
    animation: fadeInSuccess 0.5s ease-in;
    position: relative;
    text-align: center;
    display: block;
    width: 100%;
    max-width: 600px;
}

/* Success icon */
.success-message::before {
    content: "✓";
    font-size: 16pt;
    margin-right: 8px;
    font-weight: bold;
}

/* Enhanced error message styling - more prominent and noticeable */
.error-message {
    background-color: #dc3545 !important;
    color: white !important;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 5px solid #c82333;
    font-weight: bold;
    font-size: 14pt;
    margin: 15px 0;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
    animation: fadeInError 0.5s ease-in;
    position: relative;
    text-align: center;
    display: block;
    width: 100%;
    max-width: 600px;
}

/* Error icon */
.error-message::before {
    content: "⚠";
    font-size: 16pt;
    margin-right: 8px;
    font-weight: bold;
}

/* Fade-in animations for messages */
@keyframes fadeInSuccess {
    from {
        opacity: 0;
        transform: translateY(-10px);
        background-color: rgba(40, 167, 69, 0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        background-color: #28a745;
    }
}

@keyframes fadeInError {
    from {
        opacity: 0;
        transform: translateY(-10px);
        background-color: rgba(220, 53, 69, 0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        background-color: #dc3545;
    }
}

/* Enhanced specificity rules to override any conflicting styles */
.spacer .success-message,
div.spacer .success-message,
.upload-div .success-message {
    background-color: #28a745 !important;
    color: white !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border-left: 5px solid #1e7e34 !important;
    font-weight: bold !important;
    font-size: 14pt !important;
    margin: 15px 0 !important;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3) !important;
    text-align: center !important;
    display: block !important;
}

.spacer .error-message,
div.spacer .error-message,
.upload-div .error-message {
    background-color: #dc3545 !important;
    color: white !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border-left: 5px solid #c82333 !important;
    font-weight: bold !important;
    font-size: 14pt !important;
    margin: 15px 0 !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3) !important;
    text-align: center !important;
    display: block !important;
}

/* Legacy success class - kept for backward compatibility but enhanced */
.spacer p .success {
    color: #28a745;
    font-weight: bold;
    margin: 0;
}

/* Legacy success class when used directly */
.success {
    color: #28a745;
    font-weight: bold;
    margin: 0;
}

/*Div that surrounds the form submit button for Vendor*/
.button-div {
    margin: 25px 10px 0 430px;
    left: 65%;
}

/* This applies to placing the Guest form button */
.button-div-guest {
    margin: 25px 10px 0 640px;
}

/* Standardizes the style for submit buttons on invoice submit forms*/
.submit {
    background-color: #4F77B1;
    border-radius: 5px;
    border: 1px solid #4F77B1;
    padding: 5px 30px;
    color: white;
    cursor: pointer;
    font-size: 12pt;
    font-weight: bold;
}

.submit:hover {
    background-color: #3A4B64;
}

/* Style applied to disable at submit button */
.submit-disabled {
    background-color: #4c6167;
    border-radius: 5px;
    border: 1px solid #364549;
    color: white;
    padding: 5px 30px;
    cursor: not-allowed;
    opacity: 0.6;
    font-size: 12pt;
    font-weight: bold;
}

.file-restriction-text {
    font-size:11pt;
    color: #666666;
    font-style: italic;
    margin-top: 5px;
    font-family: Arial, sans-serif;
}