/* =========================
   ALL Upload Related Styles
   DevExtreme dxFileUploader
========================= */

/* Root */
.dx-fileuploader {
    width: 100%;
    position: relative;
    font-family: inherit;
}

    /* ===== 검은 포커스 박스 제거 ===== */

    .dx-fileuploader *,
    .dx-fileuploader *:focus,
    .dx-fileuploader *:active,
    .dx-fileuploader *:visited {
        outline: none !important;
        box-shadow: none !important;
    }

/* DevExtreme Focus 제거 */
.dx-state-focused,
.dx-state-active {
    outline: none !important;
    box-shadow: none !important;
}

/* Wrapper */
.dx-fileuploader-wrapper {
    border: 2px dashed #d4d4d8;
    border-radius: 1rem;
    background: #fafafa;
    padding: 1.25rem;
    transition: all .2s ease;
    outline: none !important;
    box-shadow: none !important;
}

    .dx-fileuploader-wrapper:hover {
        border-color: #fb923c;
        background: #fff7ed;
    }

/* Drag 상태 */
.dx-fileuploader-dragover {
    border-color: #f97316 !important;
    background: #fff7ed !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Input Wrapper */
.dx-fileuploader-input-wrapper {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    outline: none !important;
    box-shadow: none !important;
}

/* Hidden Input */
.dx-fileuploader-input {
    cursor: pointer;
    outline: none !important;
    box-shadow: none !important;
}

/* Button */
.dx-fileuploader-button {
    background: #fb923c !important;
    color: #fff !important;
    border: none !important;
    border-radius: .85rem !important;
    padding: .7rem 1.2rem !important;
    font-weight: 600 !important;
    transition: all .15s ease;
    box-shadow: none !important;
    outline: none !important;
}

    .dx-fileuploader-button:hover {
        background: #f97316 !important;
    }

    .dx-fileuploader-button:active {
        transform: scale(.98);
        outline: none !important;
        box-shadow: none !important;
    }

    .dx-fileuploader-button:focus,
    .dx-fileuploader-button.dx-state-focused {
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
    }

/* Label Text */
.dx-fileuploader-input-label {
    color: #737373;
    font-size: .92rem;
}

/* Files Container */
.dx-fileuploader-files-container {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* File Item */
.dx-fileuploader-file-container {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: .9rem 1rem;
    transition: all .15s ease;
    outline: none !important;
    box-shadow: none !important;
}

    .dx-fileuploader-file-container:hover {
        border-color: #fdba74;
        box-shadow: 0 2px 10px rgba(0,0,0,.04);
    }

    .dx-fileuploader-file-container:focus,
    .dx-fileuploader-file-container.dx-state-focused {
        outline: none !important;
        box-shadow: none !important;
        border-color: #fdba74;
    }

/* File Info */
.dx-fileuploader-file-info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

/* File Name */
.dx-fileuploader-file-name {
    font-size: .93rem;
    font-weight: 600;
    color: #262626;
    word-break: break-all;
}

/* File Size */
.dx-fileuploader-file-size {
    font-size: .8rem;
    color: #9ca3af;
}

/* Status Message */
.dx-fileuploader-status-message {
    font-size: .8rem;
    margin-top: .35rem;
    color: #737373;
}

/* Upload Pending */
.dx-fileuploader-upload-pending {
    color: #f59e0b;
}

/* Uploaded */
.dx-fileuploader-uploaded {
    color: #10b981;
}

/* Upload Failed */
.dx-fileuploader-fail {
    color: #ef4444;
}

/* Upload Progress */
.dx-fileuploader-progress {
    margin-top: .6rem;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: #e5e7eb;
}

/* Progress Value */
.dx-fileuploader-progress-value {
    background: linear-gradient(90deg, #fb923c, #f97316);
    border-radius: 999px;
    transition: width .2s ease;
}

/* File Status */
.dx-fileuploader-file-status-message {
    font-size: .8rem;
    color: #737373;
}

/* Icons */
.dx-fileuploader .dx-icon-upload {
    color: #fb923c;
}

.dx-fileuploader .dx-icon-close {
    color: #9ca3af;
}

    .dx-fileuploader .dx-icon-close:hover {
        color: #ef4444;
    }

/* Remove / Upload Buttons */
.dx-fileuploader-cancel-button,
.dx-fileuploader-upload-button {
    border-radius: .7rem !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Uploaded Image Preview */
.upload-preview {
    width: 100%;
    margin-top: 1rem;
    border-radius: 1rem;
    overflow: hidden;
    background: #fafafa;
    border: 1px solid #e5e7eb;
}

    .upload-preview img {
        width: 100%;
        display: block;
        object-fit: cover;
    }

/* Drop Zone */
.upload-dropzone {
    border: 2px dashed #d4d4d8;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    background: #fafafa;
    transition: all .2s ease;
    outline: none !important;
    box-shadow: none !important;
}

    .upload-dropzone.dragover {
        border-color: #f97316;
        background: #fff7ed;
    }

/* Empty Text */
.upload-empty-text {
    color: #9ca3af;
    font-size: .9rem;
}

/* Error Text */
.upload-error {
    margin-top: .5rem;
    color: #ef4444;
    font-size: .82rem;
}

/* Success Text */
.upload-success {
    margin-top: .5rem;
    color: #10b981;
    font-size: .82rem;
}

/* Skeleton */
.upload-skeleton {
    height: 180px;
    border-radius: 1rem;
    background: linear-gradient( 90deg, #f3f4f6 25%, #e5e7eb 37%, #f3f4f6 63% );
    background-size: 400% 100%;
    animation: uploadSkeleton 1.4s ease infinite;
}

@keyframes uploadSkeleton {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

/* Mobile */
@media (max-width: 640px) {

    .dx-fileuploader-wrapper {
        padding: 1rem;
    }

    .dx-fileuploader-input-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .dx-fileuploader-button {
        width: 100%;
    }

    .upload-dropzone {
        padding: 1.5rem 1rem;
    }
}

/* 검은색 포커스 박스 강제 제거 */
.dx-fileuploader .dx-fileuploader-input-container .dx-fileuploader-input {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* 추가로 인풋 요소가 포함된 컨테이너 자체의 포커스 스타일도 방지 */
.dx-fileuploader-input-container {
    outline: none !important;
    box-shadow: none !important;
}