/* VZVZ Color Scheme Variables */
:root {
    --vzvz-primary: #0054a6;    /* Primary blue from VZVZ */
    --vzvz-secondary: #008bcb;  /* Secondary blue */
    --vzvz-accent: #e75113;     /* Orange accent */
    --vzvz-light: #e6f2fa;      /* Light blue background */
    --vzvz-dark: #002f5d;       /* Dark blue */
    --vzvz-text: #333333;       /* Main text color */
    --vzvz-grey: #f3f3f3;       /* Light grey */
}

/* Override Bootstrap theme with VZVZ colors */
[data-bs-theme=dark] {
    --bs-primary: var(--vzvz-primary);
    --bs-primary-rgb: 0, 84, 166;
    --bs-secondary: var(--vzvz-secondary);
    --bs-secondary-rgb: 0, 139, 203;
    --bs-success: #28a745;
    --bs-info: var(--vzvz-secondary);
    --bs-warning: #ffc107;
    --bs-danger: var(--vzvz-accent);
    --bs-danger-rgb: 231, 81, 19;
    --bs-body-color: #f8f9fa;
    --bs-body-bg: #212529;
    --bs-body-color-rgb: 248, 249, 250;
    --bs-body-bg-rgb: 33, 37, 41;
}

/* Custom VZVZ Styles */
.navbar {
    background-color: var(--vzvz-primary) !important;
}

.card-header.bg-primary {
    background-color: var(--vzvz-primary) !important;
}

.btn-primary {
    background-color: var(--vzvz-primary);
    border-color: var(--vzvz-primary);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--vzvz-dark);
    border-color: var(--vzvz-dark);
}

.btn-success {
    background-color: var(--vzvz-accent);
    border-color: var(--vzvz-accent);
}

.btn-success:hover, .btn-success:focus {
    background-color: #c94610;
    border-color: #c94610;
}

.text-primary {
    color: var(--vzvz-primary) !important;
}

/* Upload Area Styles */
.upload-area {
    border: 2px dashed var(--vzvz-secondary);
    border-radius: 5px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-area:hover, .upload-area.dragover {
    border-color: var(--vzvz-accent);
    background-color: rgba(231, 81, 19, 0.05);
}

/* Progress and Result Containers */
#uploadProgressContainer {
    margin: 2rem 0;
}

#resultContainer {
    margin-top: 2rem;
}

.progress-bar {
    background-color: var(--vzvz-secondary);
}

.tab-pane {
    min-height: 200px;
    white-space: pre-wrap;
}

.nav-tabs .nav-link.active {
    color: var(--vzvz-dark);
    border-color: #dee2e6 #dee2e6 #fff;
}

.badge.bg-info {
    background-color: var(--vzvz-secondary) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .upload-area {
        padding: 1rem;
    }
}