/* ──────────────────────────────────────────────────────────────────
   Shared dropzone — wraps an <input type="file"> with a drag-drop
   surface and a selected-files preview. Progressively enhances: if
   JS fails the inner <input> still works as a plain file picker, so
   the form submit path is never blocked.

   Rendered by dropzone() helper in UIComponents.php, activated by
   /assets/js/modules/dropzone.js on DOMContentLoaded.
   ────────────────────────────────────────────────────────────────── */

.dropzone {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dropzone-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 140px;
    padding: 1.5rem;
    border: 2px dashed var(--border, #E5E7EB);
    border-radius: 0.5rem;
    background: var(--gray-50, #F9FAFB);
    color: var(--text-muted, #6B7280);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.dropzone-area:hover {
    border-color: var(--primary, #193153);
    color: var(--primary, #193153);
}
.dropzone-area:focus-visible {
    outline: 2px solid var(--primary, #193153);
    outline-offset: 2px;
}
.dropzone--active .dropzone-area,
.dropzone-area.is-dragover {
    border-color: var(--primary, #193153);
    background-color: #E8EDF4;
    color: var(--primary, #193153);
}
.dropzone--disabled .dropzone-area {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

.dropzone-area svg { opacity: 0.6; }
.dropzone--active .dropzone-area svg { opacity: 1; }

.dropzone-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text, #1F2937);
}
.dropzone-label .dropzone-or {
    color: var(--text-muted, #6B7280);
    font-weight: 400;
    margin: 0 0.15rem;
}
.dropzone-label .dropzone-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--primary, #193153);
    font-weight: 600;
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.dropzone-hint {
    font-size: 0.8rem;
    color: var(--text-muted, #6B7280);
    max-width: 480px;
}

.dropzone-input {
    /* keep it focusable but visually hidden — area handles UX */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Selected files list */
.dropzone-files {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.dropzone-file {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 0.375rem;
    background: #fff;
    font-size: 0.875rem;
}
.dropzone-file-icon {
    color: var(--text-muted, #6B7280);
    flex-shrink: 0;
    display: inline-flex;
}
.dropzone-file-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.dropzone-file-name {
    font-weight: 500;
    color: var(--text, #1F2937);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dropzone-file-size {
    font-size: 0.75rem;
    color: var(--text-muted, #6B7280);
}
.dropzone-file-remove {
    background: none;
    border: 0;
    padding: 0.25rem;
    color: var(--text-muted, #6B7280);
    cursor: pointer;
    border-radius: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, color 0.15s;
}
.dropzone-file-remove:hover {
    background: var(--danger-50, #FEE2E2);
    color: var(--danger, #B91C1C);
}
.dropzone-file--error {
    border-color: var(--danger, #B91C1C);
    background: var(--danger-50, #FEE2E2);
}
.dropzone-file--error .dropzone-file-size {
    color: var(--danger, #B91C1C);
}

.dropzone-error {
    font-size: 0.85rem;
    color: var(--danger, #B91C1C);
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background: var(--danger-50, #FEE2E2);
    border: 1px solid var(--danger, #B91C1C);
}

/* ── Thumbnails preview ───────────────────────────────────────────
   Grid of tiles, each showing an image thumbnail (async-filled via
   FileReader) or the mime icon fallback for non-image files. Used for
   ticket attachments etc. where the user wants to see the picture. */

.dropzone--preview-thumbnails .dropzone-files:not(.hidden) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}
.dropzone-thumb {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
}
.dropzone-thumb-media {
    width: 100%;
    height: 160px;
    background: var(--gray-50, #F9FAFB);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.dropzone-thumb-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #fff;
}
.dropzone-thumb-fallback {
    color: var(--text-muted, #6B7280);
}
.dropzone-thumb-fallback svg { width: 48px; height: 48px; }
.dropzone-thumb-meta {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border, #E5E7EB);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}
.dropzone-thumb-remove {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    background: rgba(255, 255, 255, 0.95);
    border: 0;
    border-radius: 0.25rem;
    padding: 0.25rem;
    color: var(--text, #1F2937);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, color 0.15s;
}
.dropzone-thumb-remove:hover {
    background: var(--danger, #B91C1C);
    color: #fff;
}