/**
 * Filedrop front-end styling (upload, "Mijn transfers", download/password)
 *
 * The upload, "Mijn transfers" and download pages are mostly styled with
 * Bootstrap 5 and UIkit utility/component classes directly in the templates
 * (dual-classed so either framework's own theme colors and button styles
 * apply). This file covers what neither framework provides on its own: a
 * constrained page width for these single-column screens, and the
 * drag-and-drop dropzone (#filedrop-dropzone, #filedrop-file-input,
 * #filedrop-file-list) - kept as custom CSS on purpose, since standard
 * UIkit has no equivalent dropzone/file-picker component to dual-class onto.
 *
 * @copyright   Copyright (c) 2026 Jeroen Moolenschot | Joomill
 * @license     GNU General Public License version 3 or later; see LICENSE
 * @link        https://www.joomill-extensions.com
 */

.filedrop-shell {
    max-width: 40rem;
    margin: 2rem auto;
}

/* "Mijn transfers" is a table, not a form - it needs the extra width. */
.filedrop-shell-wide {
    max-width: 60rem;
    margin: 2rem auto;
}

/* Dropzone */

#filedrop-dropzone {
    position: relative;
    padding: 2rem 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

#filedrop-dropzone.filedrop-dropzone-active {
    background: #fef2f2;
    border-color: #2563eb;
}

#filedrop-dropzone p {
    margin: 0;
    color: #6b7280;
}

/* The real <input type="file"> stays in the DOM (it's what actually opens
   the native file picker, and keeps the field in the normal tab order for
   keyboard users), but is never meant to be seen or clicked directly: the
   whole dropzone is the visible, clickable/droppable surface instead.
   pointer-events: none only removes it from mouse hit-testing - a keyboard
   user tabbing to it and pressing Enter/Space still opens the picker. */
.filedrop-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
}

#filedrop-file-list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

#filedrop-file-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.35rem;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    font-size: 0.85rem;
    word-break: break-word;
}