/* ========================
   1. Brand Primitives
   ======================== */
:root {
    --brand: #0b3b4e; /* Primary brand color */
    --brand-600: #0a3344; /* Darker hover state */
    --brand-50: #e7f3f7; /* Very light tint for backgrounds */
    --brand-25: rgba(11, 59, 78, 0.25); /* Focus ring glow */
    --text: #1f2937; /* Neutral dark text */
    --muted: #6c757d; /* Secondary text */
    --border: #dee2e6; /* Light border */
    --danger: #dc3545; /* Error red */
}

/* ========================
   2. Global Helpers
   ======================== */
body {
    color: var(--text);
}

.custom-brand-color {
    color: var(--brand) !important;
}

/* Replaces inline styles for Header/Footer */
.bg-brand {
    background-color: var(--brand) !important;
}

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

/* ========================
   3. Bootstrap Overrides
   (Makes inputs glow Teal instead of Blue)
   ======================== */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.25rem var(--brand-25);
}

/* Keep invalid styles Red */
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* ========================
   4. Buttons
   ======================== */
.btn-custom-brand {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
    transition: all 0.2s ease-in-out;
}

.btn-custom-brand:hover,
.btn-custom-brand:focus {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

.btn-custom-brand:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.25rem var(--brand-25);
}

/* ========================
   5. File Upload Drop Zone
   ======================== */
.file-upload-zone {
    border: 2px dashed var(--brand);
    border-radius: 0.5rem;
    background-color: #f8fafc;
    transition: all 0.2s ease;
    cursor: pointer;
    padding: 1.5rem;
    text-align: center;
    position: relative;
}

.file-upload-zone:hover {
    background-color: #fff;
    border-color: var(--brand-600);
}

/* This class is added via JS when dragging */
.file-upload-zone.drag-over {
    background-color: var(--brand-50);
    border-color: var(--brand);
    transform: scale(1.02); /* Slight pop effect */
}

/* ========================
   6. Utilities & Errors
   ======================== */
/* Matches HTML ID */
#fileErrorText {
    font-weight: 500;
}