/*
   This CSS file styles the dropzone area and related elements
   used for file uploads, providing visual feedback and a user-friendly interface.
*/

/* Styles for the dropzone container */
.dropzone {
    border: 2px dashed #999;       /* Creates a dashed border to indicate a drop area */
    border-radius: 5px;            /* Rounds the corners of the dropzone for a smoother look */
    padding: 2rem;                 /* Adds padding to space out the content inside the dropzone */
    text-align: center;            /* Centers any text or elements inside the dropzone */
    transition: border-color 0.3s ease; /* Smooth transition for border color changes on events */
    position: relative;            /* Sets relative positioning to properly position child elements */
    cursor: pointer;               /* Changes cursor to pointer to indicate clickable area */
}

/* Styles for the text inside the dropzone that instructs the user */
.dropzone-file-text {
    display: flex;                /* Ensures the text spans the full width available */
    margin-bottom: 0;              /* Removes bottom margin to keep spacing consistent */
}

/* Styles applied to the dropzone when a file is dragged over it */
.dropzone.drag-over {
    border-color: #333;            /* Darkens the border to indicate an active drag-over state */
}

/* Styles for a container that lists uploaded files */
.file-list-container {
    border: 1px solid #ddd;        /* Adds a light border to distinguish the file list area */
    max-height: 220px;             /* Restricts the maximum height to prevent overflow */
}

/*
 * Styles for the file input element inside the dropzone.
 * This makes the input cover the entire drop area while remaining invisible.
 * This allows users to click anywhere in the dropzone to open the file dialog.
 */
.dropzone input[type="file"] {
    position: absolute;            /* Positions the input absolutely within the dropzone */
    top: 0;                        /* Aligns the input to the top edge */
    left: 0;                       /* Aligns the input to the left edge */
    width: 100%;                   /* Ensures the input covers the full width of the dropzone */
    height: 100%;                  /* Ensures the input covers the full height of the dropzone */
    opacity: 0;                    /* Makes the input invisible to the user */
}