:root {
    --transition-speed: 0.3s;
}

body {
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

.card,
.modal-content,
.alert,
.form-control,
.btn {
    transition: background-color var(--transition-speed), 
                border-color var(--transition-speed), 
                color var(--transition-speed);
}

.drop-zone {
    border: 2px dashed #ccc;
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    background: #f8f9fa;
    transition: all var(--transition-speed);
    cursor: pointer;
}

.drop-zone.dragover {
    background: #e9ecef;
    border-color: #0d6efd;
}

.directory-tree {
    background: #fff;
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    transition: all var(--transition-speed);
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}

.toast-container {
    z-index: 1050;
}

.modal {
    z-index: 1060;
}

/* Dark mode styles */
[data-bs-theme="dark"] {
    --bs-body-bg: #1a1d20;
    --bs-body-color: #dee2e6;
    --bs-border-color: #495057;
}

[data-bs-theme="dark"] body {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .card {
    background-color: #212529;
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .modal-content {
    background-color: #212529;
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .form-control {
    background-color: #2b3035;
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-control:focus {
    background-color: #2b3035;
    border-color: #0d6efd;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-select {
    background-color: #2b3035;
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .drop-zone {
    background: #212529;
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .drop-zone.dragover {
    background: #2b3035;
    border-color: #0d6efd;
}

[data-bs-theme="dark"] .directory-tree {
    background: #212529;
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .table {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table th {
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .alert {
    background-color: #212529;
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .alert-info {
    background-color: #032830;
    border-color: #087990;
    color: #6edff6;
}

[data-bs-theme="dark"] .alert-success {
    background-color: #051b11;
    border-color: #0f5132;
    color: #75b798;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: #2c0b0e;
    border-color: #842029;
    color: #ea868f;
}

[data-bs-theme="dark"] .alert-warning {
    background-color: #332701;
    border-color: #997404;
    color: #ffda6a;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    color: #dee2e6;
    border-color: #495057;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
    color: #fff;
    background-color: #495057;
    border-color: #495057;
}