/* ── FileDrop – Wrapper ──────────────────────────────────────────────────── */

.oo-filedrop {
    position: relative;
    width: 100%;
}

/* Drag-Over-Overlay: subtiler Ring damit der Nutzer sieht, dass er loslassen kann */
.oo-filedrop--dragover::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--oo-radius-md, 6px);
    border: 2px dashed var(--oo-primary, #3b82f6);
    background: rgba(59, 130, 246, 0.04);
    pointer-events: none;
    z-index: 10;
}

/* ── Datei-Chips ─────────────────────────────────────────────────────────── */

.oo-filedrop--files {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oo-space-2, 0.5rem);
    margin-top: var(--oo-space-2, 0.5rem);
}

.oo-filedrop--files:empty {
    display: none;
}

/* Above-Variante: Abstand nach unten statt oben */
.oo-filedrop > .oo-filedrop--files:first-child {
    margin-top: 0;
    margin-bottom: var(--oo-space-2, 0.5rem);
}

/* ── Einzelner Chip (Datei) ──────────────────────────────────────────────── */

.oo-filedrop--chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem 0.2rem 0.4rem;
    border: var(--oo-border-width, 1px) solid var(--oo-color-border, #d1d5db);
    border-radius: var(--oo-radius-full, 9999px);
    background: var(--oo-color-background-subtle, #f9fafb);
    font-size: var(--oo-font-size-sm, 0.825rem);
    color: var(--oo-color-text, #111827);
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
}

.oo-filedrop--chip-icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    color: var(--oo-color-text-subtle, #6b7280);
}

.oo-filedrop--chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

.oo-filedrop--chip-size {
    color: var(--oo-color-text-muted, #9ca3af);
    flex-shrink: 0;
    font-size: var(--oo-font-size-xs, 0.75rem);
}

.oo-filedrop--chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    color: var(--oo-color-text-subtle, #6b7280);
    transition: background var(--oo-transition), color var(--oo-transition);
    line-height: 1;
}

    .oo-filedrop--chip-remove:hover {
        background: rgba(0, 0, 0, 0.08);
        color: var(--oo-danger, #ef4444);
    }

    .oo-filedrop--chip-remove .oo-svg-icon {
        width: 0.65rem;
        height: 0.65rem;
        fill: currentColor;
    }

/* ── Bild-Thumbnails (analog textbox paste-images) ───────────────────────── */

.oo-filedrop--images {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oo-space-2, 0.5rem);
    margin-top: var(--oo-space-2, 0.5rem);
}

.oo-filedrop--images:empty {
    display: none;
}

.oo-filedrop > .oo-filedrop--images:first-child {
    margin-top: 0;
    margin-bottom: var(--oo-space-2, 0.5rem);
}

.oo-filedrop--image-item {
    position: relative;
    display: inline-flex;
    border: var(--oo-border-width, 1px) solid var(--oo-color-border, #d1d5db);
    border-radius: var(--oo-radius-md, 6px);
    overflow: hidden;
}

    .oo-filedrop--image-item img {
        display: block;
        max-width: 120px;
        max-height: 80px;
        object-fit: contain;
    }

    .oo-filedrop--image-item:hover .oo-filedrop--image-remove {
        opacity: 1;
    }

.oo-filedrop--image-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--oo-radius-sm, 4px);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
    line-height: 1;
}

    .oo-filedrop--image-remove:hover {
        background: rgba(0, 0, 0, 0.8);
    }

    .oo-filedrop--image-remove .oo-svg-icon {
        width: 0.8rem;
        height: 0.8rem;
        fill: currentColor;
    }

/* Abgelehnte Dateien (MaxFileSize überschritten) */
.oo-filedrop--rejected {
    display: flex;
    align-items: center;
    gap: var(--oo-space-2);
    margin-top: var(--oo-space-2);
    padding: var(--oo-space-2) var(--oo-space-3);
    background-color: color-mix(in srgb, var(--oo-color-danger, #dc3545) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--oo-color-danger, #dc3545) 30%, transparent);
    border-radius: var(--oo-radius-md);
    color: var(--oo-color-danger, #dc3545);
    font-size: var(--oo-font-size-sm);
}

/* ── Durchsuchen-Button ──────────────────────────────────────────────────── */

.oo-filedrop--browse {
    position: relative;
    margin-bottom: var(--oo-space-2);
}

/* Verstecktes natives File-Input */
.oo-filedrop--browse-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Gestrichelter Rahmen analog zu .oo-inputfile--inner */
.oo-filedrop--browse-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--oo-space-2);
    padding: var(--oo-space-3);
    border: 2px dashed var(--oo-color-border);
    border-radius: var(--oo-radius-sm);
    background-color: var(--oo-color-surface);
    transition: border-color var(--oo-transition-slow);
    cursor: pointer;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.oo-filedrop--browse:hover .oo-filedrop--browse-inner {
    border-color: var(--oo-color-border-strong);
}

.oo-filedrop--browse-btn {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--oo-primary-on);
    background-color: var(--oo-primary);
    padding: 0.375rem var(--oo-space-3);
    border-radius: var(--oo-radius-sm);
    font-size: var(--oo-font-size-md);
    line-height: 1.5;
    white-space: nowrap;
}

.oo-filedrop--browse-hint {
    color: var(--oo-color-text-subtle);
    font-size: var(--oo-font-size-md);
}

/* ── Spinner (Lade-Indikator) ────────────────────────────────────────────── */

@keyframes oo-filedrop-spin {
    to { transform: rotate(360deg); }
}

.oo-filedrop--spinner {
    display: inline-block;
    flex-shrink: 0;
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid color-mix(in srgb, var(--oo-color-primary, #3b82f6) 30%, transparent);
    border-top-color: var(--oo-color-primary, #3b82f6);
    border-radius: 50%;
    animation: oo-filedrop-spin 0.7s linear infinite;
}

/* Chip im Lade-Zustand: etwas gedimmt */
.oo-filedrop--chip-loading {
    opacity: 0.75;
    cursor: default;
}

/* Bild-Placeholder während des Ladens */
.oo-filedrop--image-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 80px;
    max-width: 120px;
    min-height: 60px;
    max-height: 80px;
    padding: 0.4rem;
    background: var(--oo-color-background-subtle, #f9fafb);
    color: var(--oo-color-text-muted, #9ca3af);
}

.oo-filedrop--image-loading-name {
    font-size: 0.65rem;
    text-align: center;
    word-break: break-all;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}