/* ============================================
   FilePond Custom Styling für KSBAM
   With smooth animations - safe now that JS loop is fixed!
   ============================================ */

/* === Hide original input === */
input[type="file"][data-controller="filepond"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* === Container & Layout === */
.filepond--root {
    font-family: var(--font-primary);
    margin-bottom: 1rem;
}

/* === Panel with smooth transitions === */
.filepond--panel-root {
    background-color: rgba(var(--color-sand-rgb), 0.18);
    border: 2px dashed var(--color-sand);
    border-radius: var(--radius-boxed);
    transition: all 0.3s ease;
}

.filepond--panel-root:hover {
    border-color: var(--color-primary);
    background-color: #fff;
    box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.12);
}

/* === Drag & Drop States === */
.filepond--drop-label {
    color: var(--color-text);
    font-size: 1rem;
}

.filepond--label-action {
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
    transition: color 0.2s ease;
}

.filepond--label-action:hover {
    color: var(--color-secondary);
}

/* Drag over state with smooth transition */
.filepond--drip {
    background: rgba(var(--color-primary-rgb), 0.07);
    border-radius: var(--radius-boxed);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.filepond--root[data-hopper-state="drag-over"] .filepond--drip {
    opacity: 1;
}

.filepond--root[data-hopper-state="drag-over"] .filepond--panel-root {
    border-color: var(--color-primary);
    background-color: rgba(var(--color-primary-rgb), 0.08);
    border-style: solid;
    transform: scale(1.02);
}

/* === Image preview === */
.filepond--image-preview-wrapper {
    border-radius: var(--radius-boxed);
    overflow: hidden;
}

.filepond--image-preview {
    border-radius: var(--radius-boxed);
}

/* === Items (uploaded files) === */
.filepond--item {
    border-radius: var(--radius-boxed);
}

.filepond--item-panel {
    background-color: rgba(var(--color-primary-rgb), 0.12);
    border-radius: var(--radius-boxed);
    transition: background-color 0.3s ease;
}

/* === File action buttons with animations === */
.filepond--file-action-button {
    background-color: rgba(var(--color-primary-rgb), 0.92);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.filepond--file-action-button:hover {
    background-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
    transform: scale(1.1);
}

.filepond--action-process-item {
    background-color: var(--color-primary);
}

.filepond--action-process-item:hover {
    background-color: var(--color-secondary);
}

/* === File status indicators === */
/* FilePond nennt das Element .filepond--load-indicator (ohne "ing"); die Regel
   stand hier bis 15.08.2026 auf einem Klassennamen, den es nie gab. */
.filepond--load-indicator {
    color: var(--color-primary);
}

.filepond--progress-indicator {
    color: var(--color-primary);
}

.filepond--file-status {
    color: var(--color-text);
    font-size: 0.875rem;
}

.filepond--file-info {
    color: var(--color-text);
    font-size: 0.875rem;
}

.filepond--file-info-main {
    color: var(--color-text);
    font-weight: 600;
}

.filepond--file-info-sub {
    color: var(--color-grau);
}

/* === Error state with smooth transition === */
.filepond--panel-root[data-filepond-item-state="error"] {
    border-color: var(--color-beere);
    background-color: rgba(192, 86, 101, 0.05);
    transition: all 0.3s ease;
}

.filepond--file-status[data-filepond-item-state="error"] {
    color: var(--color-beere);
}

/* === Success state with smooth transition === */
.filepond--panel-root[data-filepond-item-state="processing-complete"] {
    border-color: var(--color-primary);
    background-color: rgba(var(--color-primary-rgb), 0.08);
    transition: all 0.3s ease;
}

/* === File loaded successfully state === */
.filepond--item[data-filepond-item-state="idle"] .filepond--panel-root,
.filepond--item[data-filepond-item-state="load-complete"] .filepond--panel-root {
    border-color: var(--color-primary);
    background-color: rgba(var(--color-primary-rgb), 0.05);
}

/* === Visual feedback that file is ready === */
.filepond--item[data-filepond-item-state="idle"]::after {
    content: "✓ Bild bereit";
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: white;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 10;
}

/* === Hide credits === */
.filepond--credits {
    display: none;
}

/* === Circle layout for avatars === */
.filepond--root[data-style-panel-layout~="circle"] {
    width: min(100%, 250px);
    max-width: none;
    height: auto !important;
    aspect-ratio: 1;
    margin: 0 auto;
}

.filepond--root[data-style-panel-layout~="circle"] .filepond--panel-root {
    border-radius: 50%;
    aspect-ratio: 1;
}

.filepond--root[data-style-panel-layout~="circle"] .filepond--drop-label {
    border-radius: 50%;
}

.filepond--root[data-style-panel-layout~="circle"] .filepond--item {
    border-radius: 50%;
}

.filepond--root[data-style-panel-layout~="circle"] .filepond--item-panel {
    border-radius: 50%;
}

/* Beautiful hover effect for circle with scale animation */
.filepond--root[data-style-panel-layout~="circle"] .filepond--panel-root:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.15);
}

/* Projektbild-Uploads im Formular bewusst rechteckig statt Avatar-Kreis */
.ksbam-media-upload .filepond--root {
    width: min(100%, 320px);
    max-width: min(100%, 320px);
    height: auto !important;
    /* Gleiches Verhältnis wie der Zuschnitt (16:9), sonst bleibt ein dunkler Rand
       der Bildvorschau stehen. */
    aspect-ratio: 16 / 9;
    margin: 0;
    border-radius: var(--radius-boxed);
    overflow: hidden;
    background-color: rgba(var(--color-sand-rgb), 0.18);
    box-shadow: var(--bs-box-shadow-sm);
}

.ksbam-media-upload .filepond--root .filepond--panel,
.ksbam-media-upload .filepond--root .filepond--panel-top,
.ksbam-media-upload .filepond--root .filepond--panel-center,
.ksbam-media-upload .filepond--root .filepond--panel-bottom,
.ksbam-media-upload .filepond--root .filepond--panel-root,
.ksbam-media-upload .filepond--root .filepond--drop-label,
.ksbam-media-upload .filepond--root .filepond--item,
.ksbam-media-upload .filepond--root .filepond--item-panel,
.ksbam-media-upload .filepond--root .filepond--list-scroller,
.ksbam-media-upload .filepond--root .filepond--image-preview-wrapper,
.ksbam-media-upload .filepond--root .filepond--image-preview {
    border-radius: var(--radius-boxed) !important;
}

.ksbam-media-upload .filepond--root .filepond--panel,
.ksbam-media-upload .filepond--root .filepond--panel-top,
.ksbam-media-upload .filepond--root .filepond--panel-center,
.ksbam-media-upload .filepond--root .filepond--panel-bottom,
.ksbam-media-upload .filepond--root .filepond--panel-root {
    aspect-ratio: 16 / 9;
    border: 0;
    overflow: hidden;
    background: transparent !important;
    box-shadow: none !important;
}

.ksbam-media-upload .filepond--root .filepond--panel-top,
.ksbam-media-upload .filepond--root .filepond--panel-center,
.ksbam-media-upload .filepond--root .filepond--panel-bottom {
    box-shadow: none !important;
}

.ksbam-media-upload .filepond--root .filepond--panel {
    display: none !important;
}

.ksbam-media-upload .filepond--root .filepond--panel-bottom {
    border-bottom-left-radius: var(--radius-boxed) !important;
    border-bottom-right-radius: var(--radius-boxed) !important;
}

.ksbam-media-upload .filepond--root .filepond--list-scroller {
    overflow: hidden !important;
}

.ksbam-media-upload .filepond--root .filepond--drop-label {
    position: absolute;
    display: grid;
    place-items: center;
    inset: 0;
    overflow: hidden;
}

.ksbam-media-upload .filepond--root .filepond--drop-label::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 2px dashed rgba(var(--color-sand-rgb), 0.9);
    border-radius: calc(var(--radius-boxed) - 10px);
    pointer-events: none;
}

.ksbam-media-upload .filepond--root .filepond--label-action {
    position: relative;
    z-index: 1;
}

.ksbam-media-upload .filepond--root .filepond--label-action::before {
    display: none;
}

.ksbam-media-upload .filepond--root .filepond--panel-root > * {
    border-radius: inherit;
}

@media (max-width: 767.98px) {
    .ksbam-media-upload .filepond--root {
        max-width: 100%;
    }
}

/* === Disabled state === */
.filepond--root[data-disabled] .filepond--panel-root {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: var(--color-hellgrau);
    transition: opacity 0.3s ease;
}

.filepond--root[data-disabled] .filepond--drop-label {
    color: var(--color-grau);
}

/* === Focus state for accessibility === */
.filepond--browser:focus + .filepond--drip {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* === Cropper Dialog im App-Design === */
.crop-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(34, 34, 34, 0.45);
    backdrop-filter: blur(6px);
}

.crop-dialog {
    width: min(100%, 980px);
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-sand);
    border-radius: var(--radius-boxed);
    background: var(--color-weiss);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
}

.crop-dialog-header,
.crop-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    background: rgba(var(--color-sand-rgb), 0.2);
}

.crop-dialog-header {
    border-bottom: 1px solid var(--color-sand);
}

.crop-dialog-header h5 {
    margin: 0;
    color: var(--color-primary);
}

.crop-dialog-close {
    width: 42px;
    height: 42px;
    border: 1px solid var(--color-sand);
    border-radius: 999px;
    background: var(--color-weiss);
    color: var(--color-primary);
    font-size: 1.5rem;
    line-height: 1;
    box-shadow: var(--bs-box-shadow-sm);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.crop-dialog-close:hover {
    background: rgba(var(--color-primary-rgb), 0.08);
    border-color: var(--color-primary);
    color: var(--color-secondary);
}

.crop-dialog-body {
    padding: 1.35rem;
    background: linear-gradient(180deg, rgba(var(--color-sand-rgb), 0.12) 0%, rgba(255, 255, 255, 0.96) 100%);
    overflow: auto;
}

.cropper-container-wrapper {
    min-height: min(62vh, 560px);
    border: 1px solid var(--color-sand);
    border-radius: calc(var(--radius-boxed) - 4px);
    background: rgba(var(--color-sand-rgb), 0.2);
    overflow: hidden;
}

.cropper-image {
    display: block;
    max-width: 100%;
}

.crop-dialog-footer {
    border-top: 1px solid var(--color-sand);
    flex-wrap: wrap;
}

.cropper-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.cropper-tools .btn,
.cropper-confirm,
.cropper-cancel {
    min-width: 44px;
    min-height: 44px;
    border-radius: 999px;
    box-shadow: none !important;
}

.cropper-tools .btn {
    border-color: var(--color-sand) !important;
    background: var(--color-weiss) !important;
    color: var(--color-primary) !important;
}

.cropper-tools .btn:hover,
.cropper-tools .btn:focus {
    border-color: var(--color-primary) !important;
    background: rgba(var(--color-primary-rgb), 0.08) !important;
    color: var(--color-primary) !important;
}

.cropper-cancel {
    border: 1px solid var(--color-sand) !important;
    background: var(--color-weiss) !important;
    color: var(--color-text) !important;
}

.cropper-cancel:hover,
.cropper-cancel:focus {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.cropper-confirm {
    border-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--color-weiss) !important;
}

.cropper-confirm:hover,
.cropper-confirm:focus {
    border-color: var(--color-secondary) !important;
    background: var(--color-secondary) !important;
}

.cropper-view-box {
    outline: 2px solid rgba(var(--color-primary-rgb), 0.45);
    outline-color: rgba(var(--color-primary-rgb), 0.45) !important;
}

.cropper-face {
    background-color: rgba(var(--color-primary-rgb), 0.08);
}

.cropper-line,
.cropper-point {
    background-color: var(--color-primary) !important;
}

@media (max-width: 767.98px) {
    .crop-dialog-overlay {
        padding: 1rem;
    }

    .crop-dialog {
        max-height: calc(100vh - 2rem);
    }

    .crop-dialog-header,
    .crop-dialog-body,
    .crop-dialog-footer {
        padding: 1rem;
    }

    .crop-dialog-footer {
        justify-content: center;
    }
}

/* === Icon styling === */
.filepond--file-action-button svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* === Responsive design === */
@media (max-width: 768px) {
    .filepond-wrapper .filepond--root[data-style-panel-layout~="circle"] {
        width: min(100%, 200px);
    }

    .filepond--drop-label {
        font-size: 0.875rem;
    }
}

/* === Upload animation - Smooth pulse === */
@keyframes filepond-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(149, 43, 98, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(149, 43, 98, 0);
    }
}

.filepond--panel-root[data-filepond-item-state="processing"] {
    animation: filepond-pulse 2s ease-in-out infinite;
}

/* === Wrapper styling === */
.filepond-wrapper {
    text-align: center;
}

.filepond-wrapper .form-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-text);
    font-weight: 600;
    font-size: 1rem;
}

.filepond-wrapper .form-text {
    color: var(--color-grau);
    font-size: 0.875rem;
}

/* === Avatar preview styling with smooth hover === */
.filepond-wrapper img.rounded-circle {
    transition: all 0.3s ease;
}

.filepond-wrapper img.rounded-circle:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(149, 43, 98, 0.2) !important;
}

.filepond-wrapper .bg-secondary.rounded-circle {
    transition: all 0.3s ease;
}

.filepond-wrapper .bg-secondary.rounded-circle:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

/* === Progress indicator smooth animation === */
.filepond--file-wrapper {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Beautiful file info transitions === */
.filepond--file-info,
.filepond--file-status {
    transition: all 0.2s ease;
}

/* === Prevent layout shifts (keep these from before) === */
.filepond--root,
.filepond--panel,
.filepond--item {
    contain: layout;
}