/*
 * File: photo-picker.css
 * Version: mmdb-0.8.18-claude
 * Munich Musicians DB - Photo Picker and Upload Styles
 * Image selection, upload areas, and photo management components
 */

/* Aufbau nach Prototyp "Edit Profile" (2026-08-29): 140px-Quadrat links,
   rechts Titel + Hinweis + Knopfreihe + Bildnachweis. Das Quadrat ist
   weiterhin Klick- und Dropziel; die Knoepfe stehen in der Infospalte
   (.photo-picker-actions) und folgen theme.css 5.1 unveraendert. */
.imm-photo-picker {
    display: flex;
    gap: 24px;
    /* stretch: das Foto-Quadrat waechst mit der Hoehe der Infospalte mit
       (User 2026-08-29: "darf groesser sein, so dass es den Bereich in der
       Hoehe ausfuellt") - die Breite folgt per aspect-ratio. */
    align-items: stretch;
    flex-wrap: wrap;
    margin: 0 0 26px;
    padding: 0 0 26px;
    border-bottom: 1px solid var(--mmdb-line);
}

.photo-container {
    position: relative;
    /* Quadrat in Spaltenhoehe (User 2026-08-29: "fuellt den Bereich in der
       Hoehe aus"): die Groesse setzt ein ResizeObserver in den Pickern -
       CSS allein kann die gestreckte Flex-Hoehe nicht in die Breite
       zurueckspielen (aspect-ratio wird bei der Hauptachsen-Berechnung
       ignoriert, im Harness belegt). 140px ist der Fallback ohne JS. */
    width: 140px;
    height: 140px;
    flex: none;
    display: flex;
    transition: width .15s ease, height .15s ease;
}

/* Photo Display Mode */
.photo-display-mode {
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.photo-display-mode img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Event- und Spielstaetten-BILDER sind nicht quadratisch (Profil-/Bandfotos
   schon, die werden auf 1080x1080 beschnitten). Diese Picker setzen deshalb
   .photo-container-natural (bm-event-form.js / bm-venue-form.js): KEIN
   erzwungenes Quadrat, das Bild steht im natuerlichen Seitenverhaeltnis,
   der Container schmiegt sich an (User 2026-08-29: "Event Foto: Nein.
   Nicht behoben."). Nur der leere Upload-Zustand bleibt das 140px-Quadrat. */
.photo-container.photo-container-natural {
    width: auto;
    height: auto;
    max-width: min(420px, 100%);
    align-self: flex-start;
}

.photo-container-natural .photo-display-mode {
    width: auto;
    height: auto;
}

.photo-container-natural .photo-display-mode img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 340px;
    object-fit: contain;
}

/* Upload Mode: das leere Quadrat */
.upload-mode {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px dashed var(--mmdb-line-input);
    border-radius: 10px;
    background: var(--mmdb-card-sub);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s ease, background .2s ease;
}

.upload-mode:hover {
    border-color: var(--mmdb-accent);
    background: var(--mmdb-info-bg);
}

.upload-mode.drag-over {
    border-color: var(--mmdb-accent);
    background: var(--mmdb-accent-soft);
    border-style: solid;
}

.upload-icon {
    font-size: 2rem;
    color: var(--mmdb-ink-muted);
}

/* Infospalte rechts */
.photo-picker-info {
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.photo-picker-title {
    font-family: var(--mmdb-font-head);
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mmdb-ink);
}

.photo-picker-hint {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--mmdb-neutral);
}

.photo-picker-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Progress and Messages */
.photo-progress {
    text-align: left;
    margin: 4px 0 0;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--mmdb-neutral-bg);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill {
    height: 100%;
    background: var(--mmdb-accent);
    width: 0;
    animation: progress-fill 2s ease-in-out infinite;
}

@keyframes progress-fill {
    0%, 100% { width: 30%; }
    50% { width: 70%; }
}

.photo-message {
    margin-top: 10px;
    text-align: center;
}