/*
 * Copyright (c) Electric Paper Informationssysteme GmbH. Alle Rechte vorbehalten.
 * Nutzung nur im Rahmen der vertraglichen Vereinbarungen.
 */

/**
 * photo-upload.css: Geteilte Foto-Upload-Komponente (Dropzone → Crop-Dialog → Vorschau)
 * Version: 2.0
 *
 * Visuell modelliert nach dem Foto-Abschnitt in add-candidate-dialog.css
 * (~Z.417-502), aber unter dem neutralen Namensraum ".epi-photo-upload"
 * für die Wiederverwendung in allen Foto-Upload-Kontexten.
 *
 * Der Zuschnitt läuft in einem nativen <dialog> (großes Bild, mobiltauglich,
 * WCAG-konform über showModal()), nicht mehr inline im Widget.
 *
 * Design-Tokens (--c-*, --radius-*) mit denselben Fallbacks wie in
 * add-candidate-dialog.css. Kein color-mix() durch rgba ersetzen.
 */

/* =============================================================
 *  1. Wrapper
 * ============================================================= */
.epi-photo-upload {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* =============================================================
 *  2. Schritt: Dateiauswahl (Dropzone)
 * ============================================================= */
.epi-photo-upload__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 16px;
    border: 2px dashed var(--c-outline, #B0CCCD);
    border-radius: var(--radius-s, 12px);
    background: var(--c-surface, #ffffff);
    cursor: pointer;
    transition: border-color 200ms ease, background 200ms ease;
    text-align: center;
    color: var(--c-text-secondary, #3F5252);
    font-size: 0.9rem;
}

.epi-photo-upload__dropzone i {
    font-size: 1.5rem;
    color: var(--c-primary, #008B8F);
}

.epi-photo-upload__dropzone:hover,
.epi-photo-upload__dropzone--active {
    border-color: var(--c-primary, #008B8F);
    background: var(--c-hover, rgba(0, 139, 143, 0.05));
}

.epi-photo-upload__dropzone small {
    color: var(--c-text-secondary, #3F5252);
    opacity: 0.8;
}

/* Sichtbarer Fokus-Ring, wenn der (versteckte) Datei-Input per Tastatur
 * fokussiert wird, damit Tastaturnutzer die Dropzone erkennen. */
.epi-photo-upload__dropzone:focus-within {
    outline: 2px solid var(--c-primary, #008B8F);
    outline-offset: 2px;
}

/* Datei-Input im Label: visuell verborgen, aber per Klick auf das Label
 * weiterhin auslösbar (kein display:none, damit Fokus/Klick erhalten bleibt). */
.epi-photo-upload__picker {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================================
 *  3. Crop-Dialog (nativ, modal, an document.body angehängt)
 * ============================================================= */
.epi-photo-upload__dialog {
    width: min(94vw, 560px);
    max-height: 92vh;
    padding: 0;
    border: none;
    border-radius: var(--radius-l, 24px);
    background: var(--c-bg, #F5FAFA);
    box-shadow: var(--shadow-card, 0 8px 32px rgba(0, 0, 0, 0.25));
}

.epi-photo-upload__dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.epi-photo-upload__dialog[open] {
    display: flex;
    animation: epi-photo-upload-slide-up 300ms var(--ease-std, cubic-bezier(0.2, 0, 0, 1)) forwards;
}

@keyframes epi-photo-upload-slide-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.epi-photo-upload__dialog-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-height: 92vh;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}

/* Kopfbereich bleedet bis an den Dialograhmen (negiert das Padding von
 * .epi-photo-upload__dialog-inner), analog .epi-add-candidate-header. */
.epi-photo-upload__dialog-title {
    margin: -20px -20px 0 -20px;
    padding: clamp(16px, 3vw, 24px) clamp(20px, 4vw, 32px);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--c-text, #17282A);
    background: var(--c-surface-dim, #EAF5F5);
    border-radius: var(--radius-l, 24px) var(--radius-l, 24px) 0 0;
}

/* Großes Bild, flexible Höhe, kein horizontales Scrollen auf kleinen Screens. */
.epi-photo-upload__crop-container {
    width: 100%;
    max-height: min(70vh, 75vw * 4 / 3);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--radius-s, 12px);
    background: var(--c-surface-dim, #EAF5F5);
}

.epi-photo-upload__crop-container .epi-photo-upload__crop-image {
    display: block;
    max-width: 100%;
}

/* Cropper.js Overrides für den einheitlichen Look (analog image-upload.css) */
.epi-photo-upload__crop-container .cropper-view-box {
    border-radius: var(--radius-s, 12px);
    outline-color: var(--c-primary, #008B8F);
}

.epi-photo-upload__crop-container .cropper-line,
.epi-photo-upload__crop-container .cropper-point {
    background-color: var(--c-primary, #008B8F);
}

.epi-photo-upload__crop-container .cropper-modal {
    background-color: rgba(0, 0, 0, 0.55);
}

/* Fußbereich bleedet ebenfalls bis an den Dialograhmen, analog
 * .epi-add-candidate-footer. */
.epi-photo-upload__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin: 0 -20px -20px -20px;
    padding: clamp(12px, 2vw, 20px) clamp(20px, 4vw, 32px);
    background: var(--c-surface-dim, #EAF5F5);
    border-radius: 0 0 var(--radius-l, 24px) var(--radius-l, 24px);
}

.epi-photo-upload__cancel,
.epi-photo-upload__confirm {
    min-height: 44px;
    padding: 10px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    transition: background 200ms ease, box-shadow 200ms ease;
}

.epi-photo-upload__cancel {
    background: transparent;
    color: var(--c-primary, #008B8F);
    border: 1.5px solid var(--c-outline, #B0CCCD);
}

.epi-photo-upload__cancel:hover {
    background: var(--c-hover, rgba(0, 139, 143, 0.08));
}

.epi-photo-upload__confirm {
    background: var(--c-primary, #008B8F);
    color: var(--c-on-primary, #ffffff);
}

.epi-photo-upload__confirm:hover {
    box-shadow: 0 2px 8px rgba(0, 139, 143, 0.25);
}

/* Sichtbare Fokus-Ringe (WCAG): kein outline:none ohne Ersatz. */
.epi-photo-upload__cancel:focus-visible,
.epi-photo-upload__confirm:focus-visible,
.epi-photo-upload__reset:focus-visible {
    outline: 2px solid var(--c-primary, #008B8F);
    outline-offset: 2px;
}

/* =============================================================
 *  4. Schritt: Vorschau (bestätigtes Foto)
 * ============================================================= */
.epi-photo-upload__preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Bug-Fix: display:flex oben übersteuert sonst das [hidden]-Attribut,
 * wodurch die (leere) Vorschau immer sichtbar wäre. */
.epi-photo-upload__preview[hidden] {
    display: none;
}

.epi-photo-upload__preview-image {
    width: 150px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-m, 20px);
    box-shadow: var(--shadow-card, 0 2px 8px rgba(0, 0, 0, 0.12));
    background: var(--c-surface-dim, #EAF5F5);
}

.epi-photo-upload__reset {
    min-height: 44px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    background: transparent;
    border: none;
    border-radius: var(--radius-full, 9999px);
    color: var(--c-primary, #008B8F);
    cursor: pointer;
    transition: background 200ms ease;
}

.epi-photo-upload__reset:hover {
    background: var(--c-hover, rgba(0, 139, 143, 0.08));
}

/* =============================================================
 *  5. Fehlermeldung
 * ============================================================= */
.epi-photo-upload__error {
    font-size: 0.85rem;
    color: var(--c-error, #92150D);
    padding: 6px 10px;
    background: rgba(146, 21, 13, 0.06);
    border-radius: var(--radius-s, 12px);
}

/* =============================================================
 *  6. Reduzierte Bewegung
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
    .epi-photo-upload__dropzone,
    .epi-photo-upload__cancel,
    .epi-photo-upload__confirm,
    .epi-photo-upload__reset {
        transition: none;
    }

    .epi-photo-upload__dialog[open] {
        animation: none;
    }
}

/* =============================================================
 *  7. Mobile
 * ============================================================= */
@media (max-width: 480px) {
    .epi-photo-upload__dialog-inner {
        padding: 16px;
    }

    .epi-photo-upload__dialog-title {
        margin: -16px -16px 0 -16px;
    }

    .epi-photo-upload__actions {
        flex-direction: column-reverse;
        margin: 0 -16px -16px -16px;
    }

    .epi-photo-upload__cancel,
    .epi-photo-upload__confirm {
        width: 100%;
    }
}