/* DZM Upload Plus – Multi-Upload Styling */

#dzm-upload-plus {
    margin-top: 1rem;
}

/* Slot-Container */
#dzm-upload-slots {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Einzelner Slot */
.dzm-upload-slot {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.75rem;
    background: #fafafa;
    transition: border-color 0.15s;
}

.dzm-upload-slot:hover {
    border-color: #adb5bd;
}

/* Slot Header: Label + Remove-Button */
.dzm-slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.dzm-slot-header strong {
    font-size: 0.9rem;
}

/* Slot Body */
.dzm-slot-body {
}

.dzm-slot-uploads {
    flex: 1;
    min-width: 0;
}

/* Mengenregler + Close im Header – gleiche Hoehe, komfortable Touchflaeche */
.dzm-slot-header-actions {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.dzm-qty-counter {
    flex-wrap: nowrap;
    width: auto;
    border: 1px solid #dee2e6;
    /* Nutzt $niu-input-border-radius – beim Uebertrag in SCSS ersetzen */
    border-radius: 0.375rem;
    overflow: hidden;
}

.dzm-qty-counter .btn {
    padding: 0.4rem 0.65rem;
    font-size: 0.8rem;
    line-height: 1;
    border: none;
    border-radius: 0;
    min-width: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Nutzt $fontMuted – beim Uebertrag in SCSS ersetzen */
    color: #6c757d;
    transition: all .3s ease-in-out;
}

.dzm-qty-counter .btn:hover {
    /* Nutzt $gray-muted – beim Uebertrag in SCSS ersetzen */
    background-color: #f5f7fa;
    color: #212529;
}

.dzm-qty-counter .dzm-slot-qty-input {
    text-align: center;
    padding: 0.4rem 0.25rem;
    width: 2.5rem;
    min-width: 2.5rem;
    border: none;
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-radius: 0;
    height: auto;
    font-size: 0.85rem;
    line-height: 1;
    /* Spinner-Pfeile in Number-Input ausblenden */
    -moz-appearance: textfield;
}

.dzm-qty-counter .dzm-slot-qty-input::-webkit-inner-spin-button,
.dzm-qty-counter .dzm-slot-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Close-Button: gleiche Hoehe wie Qty-Counter */
.dzm-remove-slot.btn {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    /* Nutzt $niu-input-border-radius – beim Uebertrag in SCSS ersetzen */
    border-radius: 0.375rem;
    transition: all .3s ease-in-out;
}

/* Upload-Status */
.dzm-upload-status {
    display: block;
    word-break: break-all;
}

/* ============================================================
   Fileinput-Plugin – kompakt und clean
   ============================================================ */

/* Grundreset: kein Margin */
.dzm-upload-slot .file-input {
    margin-bottom: 0;
}

/* Caption-Feld kompakter */
.dzm-upload-slot .file-caption {
    height: auto;
}

/* Preview: kompakt, nur Thumbnails nach Dateiauswahl.
   Die eingebaute Drop-Zone ist deaktiviert (dropZoneEnabled: false),
   Drag&Drop laeuft ueber eigene Events auf der Input-Group. */
.dzm-upload-slot .file-preview {
    margin: 0;
    padding: 0;
    border: none;
}

/* Drop-Zone des Plugins ist deaktiviert – verstecken */
.dzm-upload-slot .file-preview .file-drop-zone {
    display: none;
}

/* Thumbnails kompakt */
.dzm-upload-slot .file-preview .file-preview-thumbnails {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
}

.dzm-upload-slot .file-preview .file-preview-frame {
    margin: 0;
    padding: 0.25rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    box-shadow: none;
}

.dzm-upload-slot .file-preview .kv-file-content img {
    max-width: 60px;
    max-height: 60px;
    object-fit: cover;
}

/* "Done"-Text, Progress und Footer im Preview ausblenden */
.dzm-upload-slot .file-preview .file-upload-indicator,
.dzm-upload-slot .file-preview .file-thumb-progress,
.dzm-upload-slot .file-preview .file-thumbnail-footer {
    display: none !important;
}

/* Close/Remove-Button im fileinput ausblenden */
.dzm-upload-slot .fileinput-remove,
.dzm-upload-slot .fileinput-cancel,
.dzm-upload-slot .kv-fileinput-caption .close,
.dzm-upload-slot .file-caption-icon {
    display: none !important;
}
.dzm-upload-slot .file-input-ajax .fileinput-remove {
    display: none !important;
}
.dzm-upload-slot .file-input-new .fileinput-remove,
.dzm-upload-slot .file-input-new .close {
    display: none !important;
}


.dzm-upload-slot .file-caption-name {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    height: auto;
}

/* Input-Group kompakt (nur fileinput, nicht Qty-Counter) */
.dzm-upload-slot .file-input .input-group {
    border: 1px dashed #ced4da;
    border-radius: 0.375rem;
    overflow: hidden;
    transition: border-color 0.15s, background-color 0.15s;
}

.dzm-upload-slot .file-input .input-group:hover {
    border-color: #adb5bd;
    background-color: #f8f9fa;
}

/* Drag-over Effekt auf der Input-Group (eigene Drop-Zone) */
.dzm-upload-slot .file-input .input-group.dzm-drag-over {
    border-color: var(--primary, #0d6efd);
    background-color: #e8f0fe;
}

/* Caption-Input rahmenlos (Border kommt von input-group) */
.dzm-upload-slot .file-caption .form-control {
    border: none;
    box-shadow: none;
    background: transparent;
    font-size: 0.85rem;
    padding: 0.375rem 0.5rem;
}

/* Browse-Button: in die Input-Group integriert */
.dzm-upload-slot .btn-file {
    border: none;
    border-left: 1px solid #dee2e6;
    border-radius: 0;
    font-size: 0.85rem;
    padding: 0.375rem 0.75rem;
}

/* Erlaubte Dateitypen unter dem Input */
.dzm-slot-schema small.text-muted {
    font-size: 0.78rem;
}

/* ============================================================
   Aktions-Buttons
   ============================================================ */

.dzm-upload-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* btn-block Verhalten in Flexbox */
.dzm-upload-actions .btn-block {
    flex: 1;
}

/* Messages */
#dzm-upload-messages .alert {
    margin-bottom: 0;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 575.98px) {
    .dzm-slot-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .dzm-upload-actions {
        flex-direction: column;
    }

    .dzm-upload-actions .btn-block {
        width: 100%;
    }
}