/* FileDrop - Custom Styles */

/* Drag and drop overlay */
.drop-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(99, 102, 241, 0.1);
    border: 0.1875rem dashed rgb(99, 102, 241);
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.drop-overlay.active {
    display: flex;
}

/* Upload progress bar */
.upload-progress {
    height: 0.25rem;
    border-radius: 0.125rem;
    background-color: #e5e7eb;
    overflow: hidden;
}

.upload-progress .bar {
    height: 100%;
    background-color: #6366f1;
    transition: width 0.3s ease;
}

/* Upload progress status classes (replace inline hex in upload.js) */
.upload-progress .bar.is-success { background-color: #16a34a; }
.dark .upload-progress .bar.is-success { background-color: #22c55e; }
.upload-progress .bar.is-error { background-color: #dc2626; }
.dark .upload-progress .bar.is-error { background-color: #ef4444; }

/* Toast notification */
.toast-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1);
    animation: slideIn 0.3s ease;
    max-width: 24rem;
}

.toast-info {
    background-color: #eff6ff;
    border: 0.0625rem solid #bfdbfe;
    color: #1e40af;
}

.toast-success {
    background-color: #f0fdf4;
    border: 0.0625rem solid #bbf7d0;
    color: #166534;
}

.toast-error {
    background-color: #fef2f2;
    border: 0.0625rem solid #fecaca;
    color: #991b1b;
}

/* Dark mode toast overrides */
.dark .toast-info {
    background-color: #1e3a5f;
    border-color: #2563eb;
    color: #93c5fd;
}

.dark .toast-success {
    background-color: #14532d;
    border-color: #22c55e;
    color: #86efac;
}

.dark .toast-error {
    background-color: #450a0a;
    border-color: #ef4444;
    color: #fca5a5;
}

/* Toast warning (guardrail trip) */
.toast-warning {
    background-color: #fffbeb;
    border: 0.0625rem solid #fde68a;
    color: #92400e;
}

.dark .toast-warning {
    background-color: #451a03;
    border-color: #f59e0b;
    color: #fcd34d;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* File icon styles */
.file-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* QR code container */
.qr-container {
    background: white;
    padding: 1rem;
    border-radius: 0.75rem;
    display: inline-block;
}

/* Pairing code input */
.code-input {
    width: 3rem;
    height: 3.5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    border-radius: 0.5rem;
}

/* ============================================================
   Drag-to-move state machine styles (W1b)
   Drop targets = folder rows + breadcrumb segments.
   Ring styles are plain-CSS box-shadow equivalents so they apply
   to JS-generated markup without relying on Tailwind ring utilities.
   ============================================================ */

/* Armed while an internal row drag is in progress */
body.is-dragging-rows .file-row[draggable="true"].is-dragged {
    opacity: 0.5;
}

/* Valid drop target (dragenter 0->1) */
.drop-target-active {
    box-shadow: inset 0 0 0 0.125rem #6366f1; /* ring-2 ring-inset ring-primary-500 */
    background-color: rgba(238, 242, 255, 0.6); /* bg-primary-50 */
    transform: scale(1.01);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.dark .drop-target-active {
    background-color: rgba(49, 46, 129, 0.3); /* dark:bg-primary-900/30 */
}

/* Invalid drop target — id is in the dragged set (self/selection) */
.drop-target-denied {
    box-shadow: inset 0 0 0 0.125rem #f87171; /* ring-2 ring-red-400 */
    cursor: not-allowed;
}

.dark .drop-target-denied {
    box-shadow: inset 0 0 0 0.125rem #ef4444; /* dark:ring-red-500 */
}

/* Offscreen drag ghost image built by dashboard.js (setDragImage source) */
.drag-ghost {
    position: fixed;
    top: -62.5rem;
    left: -62.5rem;
    pointer-events: none;
    z-index: -1;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 0.375rem;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 0.1875rem;
}

.dark ::-webkit-scrollbar-thumb {
    background-color: #4b5563;
}