/* Custom Dark Theme Styles for SFP */
:root {
    --bg-darker: #050505;
    --bg-dark: #0d0d0d;
    --bg-secondary: #1a1a1a;
    --text-light: #e0e0e0;
    --text-muted: #888888;
    --accent-red: #c00000;
    --accent-red-hover: #a00000;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-light);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Utilities */
.bg-darker { background-color: var(--bg-darker) !important; }
.bg-dark { background-color: var(--bg-dark) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.text-danger { color: var(--accent-red) !important; }
.btn-danger { background-color: var(--accent-red); border-color: var(--accent-red); }
.btn-danger:hover { background-color: var(--accent-red-hover); border-color: var(--accent-red-hover); }

/* Override Bootstrap's default dark text so it's readable on our dark background */
body, .modal-body, .modal-body p, .modal-body small,
.modal-footer, .card, .card-body, .card-footer,
.breadcrumb-item, .breadcrumb-item a, .breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before,
.form-label, label, small, p { color: var(--text-light); }
.text-muted, .modal-body .text-muted, small.text-muted { color: var(--text-muted) !important; }

/* Modals */
.modal-content { background-color: var(--bg-secondary); color: var(--text-light); border-color: #333; }
.modal-header, .modal-footer { border-color: #333 !important; }

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--bg-dark);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Sidebar and Navigation */
.hover-white:hover {
    color: #fff !important;
}
.tracking-wide {
    letter-spacing: 0.1em;
}

/* File Browser Grid */
.cursor-pointer {
    cursor: pointer;
}
.hover-card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.hover-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

/* Checkbox specific */
.item-checkbox {
    width: 1.2rem;
    height: 1.2rem;
    background-color: var(--bg-dark);
}
.item-checkbox:checked {
    background-color: var(--accent-red);
    border-color: var(--accent-red);
}

/* Upload Dropzone */
.upload-dropzone {
    border: 2px dashed #444;
    border-radius: 8px;
    padding: 3rem;
    text-align: center;
    background: var(--bg-secondary);
    transition: background 0.3s, border-color 0.3s;
}
.upload-dropzone.dragover {
    background: #2a2a2a;
    border-color: var(--accent-red);
}

/* Fix folder titles missing text-light class */
.item-card .card-title {
    color: var(--text-light) !important;
}

/* Fix breadcrumb divider color */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--text-muted);
}
.breadcrumb-item.active {
    color: var(--accent-red) !important;
}

/* Preview Modal */
#previewModal .modal-content {
    background-color: transparent;
    border: none;
}
#previewContainer img, #previewContainer video {
    max-height: 85vh;
    max-width: 100%;
    object-fit: contain;
}

/* Fix modal backgrounds for dark theme */
.modal-content {
    background-color: var(--bg-secondary);
    color: var(--text-light);
}
.modal-header, .modal-footer {
    border-color: #333;
}
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}