/**
 * ZippyEdit Universal Dropzone Styles
 * Include this CSS file in any tool that needs drag-and-drop file upload functionality
 * with inventory integration.
 *
 * Usage: <link rel="stylesheet" href="../../shared/dropzone.css">
 *
 * Required HTML structure:
 * <div class="zippy-dropzone" id="dropZone">
 *     <button class="zippy-dropzone-insert-btn">&#8592; Insert from Inventory</button>
 *     <div class="zippy-dropzone-icon">...</div>
 *     <h2 class="zippy-dropzone-title">Drop your file here</h2>
 *     <p class="zippy-dropzone-subtitle">or click to browse</p>
 * </div>
 */

/* Main Dropzone Container */
.zippy-dropzone {
    position: relative;
    border: 3px dashed #ccc;
    border-radius: 12px;
    padding: 60px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fafafa;
    width: 100%;
}

.zippy-dropzone:hover {
    border-color: #667eea;
    background: #f0f4ff;
}

/* Drag-over states - support both class names for compatibility */
.zippy-dropzone.dragging,
.zippy-dropzone.dragover {
    border-color: #667eea;
    background: #e8edff;
    transform: scale(1.02);
}

/* Dropzone Icon */
.zippy-dropzone-icon {
    font-size: 64px;
    margin-bottom: 15px;
    line-height: 1;
}

/* Dropzone Title */
.zippy-dropzone-title {
    color: #667eea;
    margin-bottom: 10px;
    font-size: 1.5em;
    font-weight: 600;
}

/* Dropzone Subtitle */
.zippy-dropzone-subtitle {
    color: #6c757d;
    font-size: 1em;
    margin: 0;
}

.zippy-dropzone-hint {
    color: #999;
    font-size: 0.9em;
    margin-top: 10px;
}

/* Insert from Inventory Button */
.zippy-dropzone-insert-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid #4a5568;
    border-radius: 8px;
    color: #a0aec0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    transition: all 0.2s;
    z-index: 10;
    white-space: nowrap;
    font-family: inherit;
}

.zippy-dropzone-insert-btn:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: white;
    transform: scale(1.1);
}

/* Inventory Save Button (for action area) */
.zippy-btn-inventory {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #a0aec0;
    border: 2px solid #4a5568;
    padding: 15px 40px;
    border-radius: 10px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
}

.zippy-btn-inventory:hover:not(:disabled) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
}

.zippy-btn-inventory:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Success state for inventory button */
.zippy-btn-inventory.success {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: white !important;
}

/* ================================================
   LEGACY CLASS SUPPORT
   These maintain backward compatibility with existing tools
   ================================================ */

/* Legacy: .inventory-insert-btn (same as .zippy-dropzone-insert-btn) */
.inventory-insert-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid #4a5568;
    border-radius: 8px;
    color: #a0aec0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    transition: all 0.2s;
    z-index: 10;
    white-space: nowrap;
    font-family: inherit;
}

.inventory-insert-btn:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: white;
    transform: scale(1.1);
}

/* Legacy: .btn-inventory (same as .zippy-btn-inventory) */
.btn-inventory {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #a0aec0;
    border: 2px solid #4a5568;
}

.btn-inventory:hover:not(:disabled) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
}

/* Legacy: .drop-zone support */
.drop-zone {
    position: relative;
}

.drop-zone.dragging,
.drop-zone.dragover {
    border-color: #667eea !important;
    background: #e8edff !important;
}

/* Legacy: .upload-area support */
.upload-area {
    position: relative;
}

.upload-area.dragging,
.upload-area.dragover {
    border-color: #667eea !important;
    background: #e8edff !important;
}

/* Legacy: .upload-section support */
.upload-section {
    position: relative;
}

.upload-section.dragging,
.upload-section.dragover {
    border-color: #667eea !important;
    background: #e8edff !important;
}

/* ================================================
   FILE TYPE SPECIFIC COLORS (optional)
   Add these classes to the dropzone for colored borders
   ================================================ */

.zippy-dropzone[data-accept="image"] {
    --dropzone-color: #22c55e;
}

.zippy-dropzone[data-accept="video"] {
    --dropzone-color: #3b82f6;
}

.zippy-dropzone[data-accept="audio"] {
    --dropzone-color: #a855f7;
}

.zippy-dropzone[data-accept="image"]:hover,
.zippy-dropzone[data-accept="image"].dragging {
    border-color: var(--dropzone-color, #667eea);
}

.zippy-dropzone[data-accept="video"]:hover,
.zippy-dropzone[data-accept="video"].dragging {
    border-color: var(--dropzone-color, #667eea);
}

.zippy-dropzone[data-accept="audio"]:hover,
.zippy-dropzone[data-accept="audio"].dragging {
    border-color: var(--dropzone-color, #667eea);
}