/**
 * JTransfer front-end styling (upload, "Mijn transfers", download/password)
 *
 * Deliberately framework-independent: this file styles JTransfer's own
 * `#jtransfer-*` markup directly instead of relying on Bootstrap or UIkit
 * utility classes, so the upload, "Mijn transfers" and download pages look
 * correct and consistent whether the active Joomla template loads
 * Bootstrap, UIkit, both, or neither - no template-detection logic and no
 * extra admin setting needed.
 *
 * @copyright   Copyright (c) 2026 Jeroen Moolenschot | Joomill
 * @license     GNU General Public License version 3 or later; see LICENSE
 * @link        https://www.joomill-extensions.com
 */

#jtransfer-upload,
#jtransfer-mytransfers,
#jtransfer-download {
    --jtransfer-color-primary: #2563eb;
    --jtransfer-color-primary-hover: #1d4ed8;
    --jtransfer-color-text: #1f2937;
    --jtransfer-color-text-muted: #6b7280;
    --jtransfer-color-border: #d1d5db;
    --jtransfer-color-surface: #ffffff;
    --jtransfer-color-surface-muted: #f9fafb;
    --jtransfer-color-danger: #dc2626;
    --jtransfer-color-danger-bg: #fef2f2;
    --jtransfer-color-success: #15803d;
    --jtransfer-color-success-bg: #f0fdf4;
    --jtransfer-radius: 0.5rem;

    box-sizing: border-box;
    max-width: 40rem;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--jtransfer-color-surface);
    border: 1px solid var(--jtransfer-color-border);
    border-radius: var(--jtransfer-radius);
    color: var(--jtransfer-color-text);
    font-size: 1rem;
    line-height: 1.5;
}

#jtransfer-upload *,
#jtransfer-mytransfers *,
#jtransfer-download *,
#jtransfer-upload *::before,
#jtransfer-mytransfers *::before,
#jtransfer-download *::before,
#jtransfer-upload *::after,
#jtransfer-mytransfers *::after,
#jtransfer-download *::after {
    box-sizing: inherit;
}

#jtransfer-mytransfers {
    max-width: 60rem;
}

#jtransfer-upload h1,
#jtransfer-mytransfers h1,
#jtransfer-download h1 {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--jtransfer-color-text);
}

/* Dropzone */

#jtransfer-dropzone {
    position: relative;
    padding: 2rem 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
    background: var(--jtransfer-color-surface-muted);
    border: 2px dashed var(--jtransfer-color-border);
    border-radius: var(--jtransfer-radius);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

#jtransfer-dropzone.jtransfer-dropzone-active {
    background: var(--jtransfer-color-danger-bg);
    border-color: var(--jtransfer-color-primary);
}

#jtransfer-dropzone p {
    margin: 0;
    color: var(--jtransfer-color-text-muted);
}

/* 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. */
.jtransfer-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;
}

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

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

/* Form fields */

#jtransfer-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

#jtransfer-fields label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--jtransfer-color-text);
}

#jtransfer-fields input[type="text"],
#jtransfer-fields input[type="email"],
#jtransfer-fields input[type="password"],
#jtransfer-fields input[type="number"],
#jtransfer-fields textarea {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--jtransfer-color-text);
    background: var(--jtransfer-color-surface);
    border: 1px solid var(--jtransfer-color-border);
    border-radius: 0.375rem;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#jtransfer-fields textarea {
    min-height: 5rem;
    resize: vertical;
}

#jtransfer-fields input:focus,
#jtransfer-fields textarea:focus {
    outline: none;
    border-color: var(--jtransfer-color-primary);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
}

#jtransfer-captcha {
    margin-bottom: 1.5rem;
}

/* Submit button */

#jtransfer-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.65rem 1.25rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--jtransfer-color-primary);
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#jtransfer-submit:hover,
#jtransfer-submit:focus-visible {
    background: var(--jtransfer-color-primary-hover);
}

#jtransfer-submit:disabled {
    background: var(--jtransfer-color-text-muted);
    cursor: not-allowed;
}

/* Progress */

#jtransfer-progress {
    margin-top: 1.25rem;
}

#jtransfer-progress-bar {
    display: block;
    width: 100%;
    height: 0.6rem;
    appearance: none;
    border: none;
    border-radius: 999px;
    overflow: hidden;
}

#jtransfer-progress-bar::-webkit-progress-bar {
    background: var(--jtransfer-color-surface-muted);
    border-radius: 999px;
}

#jtransfer-progress-bar::-webkit-progress-value {
    background: var(--jtransfer-color-primary);
    border-radius: 999px;
}

#jtransfer-progress-bar::-moz-progress-bar {
    background: var(--jtransfer-color-primary);
    border-radius: 999px;
}

/* Result / error messages */

#jtransfer-result,
#jtransfer-error {
    padding: 0.85rem 1rem;
    margin-top: 1.25rem;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    word-break: break-word;
}

#jtransfer-result {
    color: var(--jtransfer-color-success);
    background: var(--jtransfer-color-success-bg);
    border: 1px solid rgb(21 128 61 / 0.25);
}

#jtransfer-result-message {
    margin: 0 0 0.5rem;
}

#jtransfer-result-link {
    display: block;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
}

#jtransfer-result-link:hover,
#jtransfer-result-link:focus-visible {
    text-decoration: none;
}

#jtransfer-error {
    color: var(--jtransfer-color-danger);
    background: var(--jtransfer-color-danger-bg);
    border: 1px solid rgb(220 38 38 / 0.25);
}

/* "Mijn transfers" table */

#jtransfer-mytransfers table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

#jtransfer-mytransfers thead th {
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--jtransfer-color-text-muted);
    background: var(--jtransfer-color-surface-muted);
    border-bottom: 2px solid var(--jtransfer-color-border);
}

#jtransfer-mytransfers tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--jtransfer-color-border);
    vertical-align: middle;
    word-break: break-word;
}

#jtransfer-mytransfers tbody tr:hover {
    background: var(--jtransfer-color-surface-muted);
}

#jtransfer-mytransfers tbody tr:last-child td {
    border-bottom: none;
}

#jtransfer-mytransfers tbody td a {
    color: var(--jtransfer-color-danger);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

#jtransfer-mytransfers tbody td a:hover,
#jtransfer-mytransfers tbody td a:focus-visible {
    text-decoration: underline;
}

/* Pagination footer (rendered by Joomla core, shares this scope) */

#jtransfer-mytransfers .pagination,
#jtransfer-mytransfers .pagination__wrapper,
#jtransfer-mytransfers nav[aria-label="Pagination"] {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--jtransfer-color-text-muted);
}

/* Download page: not available / expired / limit reached */

#jtransfer-download-unavailable {
    padding: 0.85rem 1rem;
    color: var(--jtransfer-color-text-muted);
    background: var(--jtransfer-color-surface-muted);
    border: 1px solid var(--jtransfer-color-border);
    border-radius: 0.375rem;
}

#jtransfer-download-unavailable p {
    margin: 0;
}

/* Download page: password gate */

#jtransfer-download-password-form label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--jtransfer-color-text);
}

#jtransfer-download-password-form input[type="password"] {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    margin-bottom: 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--jtransfer-color-text);
    background: var(--jtransfer-color-surface);
    border: 1px solid var(--jtransfer-color-border);
    border-radius: 0.375rem;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#jtransfer-download-password-form input[type="password"]:focus {
    outline: none;
    border-color: var(--jtransfer-color-primary);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
}

#jtransfer-download-password-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.65rem 1.25rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--jtransfer-color-primary);
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#jtransfer-download-password-form button:hover,
#jtransfer-download-password-form button:focus-visible {
    background: var(--jtransfer-color-primary-hover);
}

/* Download page: ready to download */

#jtransfer-download-from,
#jtransfer-download-message,
#jtransfer-download-expires {
    color: var(--jtransfer-color-text-muted);
}

#jtransfer-download-message {
    padding: 0.85rem 1rem;
    color: var(--jtransfer-color-text);
    background: var(--jtransfer-color-surface-muted);
    border-radius: 0.375rem;
    word-break: break-word;
}

#jtransfer-download-filelist {
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

#jtransfer-download-filelist li {
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.35rem;
    background: var(--jtransfer-color-surface);
    border: 1px solid var(--jtransfer-color-border);
    border-radius: 0.25rem;
    font-size: 0.9rem;
    word-break: break-word;
}

#jtransfer-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1.25rem;
    margin-top: 0.5rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--jtransfer-color-primary);
    border: none;
    border-radius: 0.375rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#jtransfer-download-button:hover,
#jtransfer-download-button:focus-visible {
    background: var(--jtransfer-color-primary-hover);
    color: #ffffff;
    text-decoration: none;
}

/* Small screens */

@media (max-width: 40rem) {
    #jtransfer-upload,
    #jtransfer-mytransfers,
    #jtransfer-download {
        margin: 1rem;
        padding: 1.25rem;
    }

    #jtransfer-mytransfers table,
    #jtransfer-mytransfers thead,
    #jtransfer-mytransfers tbody,
    #jtransfer-mytransfers tr {
        display: block;
        width: 100%;
    }

    #jtransfer-mytransfers thead {
        display: none;
    }

    #jtransfer-mytransfers tbody tr {
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--jtransfer-color-border);
    }

    #jtransfer-mytransfers tbody tr:last-child {
        border-bottom: none;
    }

    #jtransfer-mytransfers tbody td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.3rem 0;
        border-bottom: none;
    }

    #jtransfer-mytransfers tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--jtransfer-color-text-muted);
        flex-shrink: 0;
    }
}