/* =============================================================================
   HATFIELD.AI DESIGN SYSTEM - Master CSS Override File
   Version: 1.1.0
   Date: 2025-12-13

   Place this file in your assets/ folder.
   Dash automatically loads all CSS files from assets/.

   This file implements the Hatfield.ai design system across all components.

   CHANGES IN v1.1.0:
   - Updated page/section headers to Option B (light blue tint + underline)
   - Added vibrant status color coding classes (12 statuses)
   - Status text now bold (600) for better scannability
   ============================================================================= */

/* =============================================================================
   1. TYPOGRAPHY - Google Fonts Import
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;700&display=swap');

/* =============================================================================
   2. TOOLTIP STYLING
   ============================================================================= */
.tooltip-inner {
    text-align: left;
    background-color: #1a1a2e;
    color: #FFFFFF;
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: #1a1a2e;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: #1a1a2e;
}

/* =============================================================================
   3. TAB NAVIGATION - Hatfield.ai Style (Option A: Dark Blue Active)
   ============================================================================= */
.nav-tabs {
    border-bottom: 2px solid #E5E7EB;
    gap: 4px;
}

.nav-tabs .nav-link {
    color: #6B7280;
    background-color: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 12px 24px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
    background-color: #E5E7EB;
    color: #1a1a2e;
    border-color: #D1D5DB;
}

.nav-tabs .nav-link.active {
    background-color: #0E3D9F !important;
    color: #FFFFFF !important;
    font-weight: 600;
    border: 1px solid #0E3D9F !important;
    border-bottom: none !important;
    box-shadow: 0 -2px 8px rgba(14, 61, 159, 0.15);
}

.nav-tabs .nav-link:focus {
    box-shadow: none;
}

.tab-content {
    border: 1px solid #E5E7EB;
    border-top: 2px solid #0E3D9F;
    border-radius: 0 0 8px 8px;
    padding: 20px;
    background-color: #FFFFFF;
}

/* =============================================================================
   4. BUTTON STYLING - 4-Type System
   ============================================================================= */

/* Primary Button */
.btn-primary,
.btn-hatfield {
    background-color: #4C73FF !important;
    border-color: #4C73FF !important;
    color: #FFFFFF !important;
    font-weight: 600;
    border-radius: 7px;
    transition: all 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-hatfield:hover {
    background-color: #3D5FE0 !important;
    border-color: #3D5FE0 !important;
    box-shadow: none;
}

/* Success Button */
.btn-success {
    background-color: #22C55E !important;
    border-color: #22C55E !important;
    color: #FFFFFF !important;
    font-weight: 600;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #16A34A !important;
    border-color: #16A34A !important;
}

/* Secondary Button (Outline Style) */
.btn-secondary {
    background-color: transparent !important;
    border: 1px solid #D1D5DB !important;
    color: #374151 !important;
    font-weight: 500;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #EFF6FF !important;
    border-color: #9CA3AF !important;
    color: #1a1a2e !important;
}

/* Danger Button */
.btn-danger {
    background-color: #DC2626 !important;
    border-color: #DC2626 !important;
    color: #FFFFFF !important;
    font-weight: 600;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #B91C1C !important;
    border-color: #B91C1C !important;
}

/* Warning Button */
.btn-warning {
    background-color: #F59E0B !important;
    border-color: #F59E0B !important;
    color: #FFFFFF !important;
    font-weight: 600;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #F97316 !important;
    border-color: #F97316 !important;
}

/* Info Button */
.btn-info {
    background-color: #3B82F6 !important;
    border-color: #3B82F6 !important;
    color: #FFFFFF !important;
    font-weight: 600;
}

.btn-info:hover,
.btn-info:focus {
    background-color: #2563EB !important;
    border-color: #2563EB !important;
}

/* =============================================================================
   5. TABLE STYLING - Light Header with Blue Underline
   ============================================================================= */

/* Dash DataTable Header Override */
.dash-table-container .dash-header {
    background-color: #EFF6FF !important;
    color: #374151 !important;
}

.dash-table-container th {
    background-color: #EFF6FF !important;
    color: #374151 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid #4C73FF !important;
    border-top: none !important;
    padding: 12px 10px !important;
}

/* Table Body Styling */
.dash-table-container td {
    border-bottom: 1px solid #E6E6E6 !important;
    padding: 10px !important;
    font-size: 12px;
}

/* Alternating Row Colors */
.dash-table-container tr:nth-child(odd) td {
    background-color: #FAFBFC !important;
}

.dash-table-container tr:nth-child(even) td {
    background-color: #FFFFFF !important;
}

/* Row Hover Effect */
.dash-table-container tr:hover td {
    background-color: #EFF6FF !important;
}

/* Bootstrap Table Override */
.table thead th {
    background-color: #EFF6FF !important;
    color: #374151 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    border-bottom: 2px solid #4C73FF !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #FAFBFC !important;
}

.table-hover tbody tr:hover {
    background-color: #EFF6FF !important;
}

/* =============================================================================
   6. STAT CARD STYLING
   ============================================================================= */

/* Override stat value colors to be neutral by default */
.surv-stat-value {
    font-size: 28px !important;
    font-weight: 700 !important;
}

/* Neutral color for non-status stats */
.surv-stat-neutral {
    color: #1a1a2e !important;
}

/* Status Colors - Use these for status-indicating stats */
.surv-stat-blue {
    color: #1a1a2e !important;  /* Changed to neutral - use for totals/counts */
}

.surv-stat-green {
    color: #22C55E !important;  /* Success/Pass */
}

.surv-stat-red {
    color: #DC2626 !important;  /* Danger/Rejected/Critical */
}

.surv-stat-gold,
.surv-stat-warning {
    color: #F59E0B !important;  /* Warning/Risk Accepted */
}

.surv-stat-purple {
    color: #7C3AED !important;  /* Purple accent if needed */
}

.surv-stat-gray {
    color: #6B7280 !important;  /* Pending/Muted */
}

/* Stat Card Container */
.surv-stat-card {
    background: #FFFFFF;
    border: 1px solid #DDE2EB;
    border-radius: 8px;
    padding: 16px 20px;
    text-align: center;
    min-width: 120px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Stat Card Label */
.surv-stat-title {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #6B7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
}

/* =============================================================================
   7. ALERT STYLING
   ============================================================================= */

.alert-success,
.alert-message.alert-success {
    background-color: #D1FAE5 !important;
    border: 1px solid #A7F3D0 !important;
    color: #10B981 !important;
    border-radius: 8px;
}

.alert-danger,
.alert-error,
.alert-message.alert-error {
    background-color: #FEE2E2 !important;
    border: 1px solid #FECACA !important;
    color: #DC2626 !important;
    border-radius: 8px;
}

.alert-warning {
    background-color: #FEF3C7 !important;
    border: 1px solid #FDE68A !important;
    color: #F97316 !important;
    border-radius: 8px;
}

.alert-info {
    background-color: #DBEAFE !important;
    border: 1px solid #BFDBFE !important;
    color: #1E40AF !important;
    border-radius: 8px;
}

/* =============================================================================
   8. BADGE STYLING - Pill Shape with Tinted Backgrounds
   ============================================================================= */

.badge {
    font-weight: 600 !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.badge.bg-success,
.badge-success {
    background-color: #D1FAE5 !important;
    color: #10B981 !important;
}

.badge.bg-danger,
.badge-danger {
    background-color: #FEE2E2 !important;
    color: #DC2626 !important;
}

.badge.bg-warning,
.badge-warning {
    background-color: #FEF3C7 !important;
    color: #F97316 !important;
}

.badge.bg-info,
.badge-info {
    background-color: #DBEAFE !important;
    color: #1E40AF !important;
}

.badge.bg-secondary,
.badge-secondary {
    background-color: #F3F4F6 !important;
    color: #374151 !important;
}

.badge.bg-primary,
.badge-primary {
    background-color: #DBEAFE !important;
    color: #1E40AF !important;
}

/* =============================================================================
   9. FORM STYLING
   ============================================================================= */

/* Form Labels */
.form-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #6B7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    margin-bottom: 5px !important;
}

/* Form Inputs */
.form-control,
.form-select {
    border: 1px solid #DDE2EB !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    padding: 8px 11px !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #4C73FF !important;
    box-shadow: 0 0 0 3px rgba(76, 115, 255, 0.15) !important;
}

/* Dropdown styling for Dash components */
.Select-control {
    border: 1px solid #DDE2EB !important;
    border-radius: 6px !important;
}

.Select.is-focused > .Select-control {
    border-color: #4C73FF !important;
    box-shadow: 0 0 0 3px rgba(76, 115, 255, 0.15) !important;
}

/* =============================================================================
   10. CARD STYLING
   ============================================================================= */

.card {
    border: 1px solid #DDE2EB !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.card-header {
    background-color: #F8FAFC !important;
    border-bottom: 1px solid #DDE2EB !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* =============================================================================
   11. PROGRESS BAR STYLING
   ============================================================================= */

.progress {
    background-color: #E5E7EB !important;
    border-radius: 4px !important;
}

.progress-bar {
    background-color: #4C73FF !important;
}

.progress-bar.bg-success {
    background-color: #22C55E !important;
}

.progress-bar.bg-danger {
    background-color: #DC2626 !important;
}

.progress-bar.bg-warning {
    background-color: #F59E0B !important;
}

/* =============================================================================
   12. UPLOAD AREA STYLING
   ============================================================================= */

.upload-area {
    border: 2px dashed #DDE2EB !important;
    border-radius: 8px !important;
    background-color: #F8FAFC !important;
    transition: all 0.2s ease !important;
}

.upload-area:hover {
    border-color: #4C73FF !important;
    background-color: #EFF6FF !important;
}

.upload-area.has-file {
    border-color: #22C55E !important;
    background-color: #F0FDF4 !important;
}

/* =============================================================================
   13. LOADING SPINNER OVERRIDE
   ============================================================================= */

._dash-loading-callback {
    color: #4C73FF !important;
}

.dash-spinner {
    border-color: #4C73FF !important;
    border-right-color: transparent !important;
}

/* =============================================================================
   14. RAG STATUS COLORS (Risk Assessment)
   ============================================================================= */

.rag-critical,
.rag-red {
    background-color: #FEE2E2 !important;
    color: #DC2626 !important;
}

.rag-high {
    background-color: #FEF3C7 !important;
    color: #F97316 !important;
}

.rag-moderate,
.rag-gold {
    background-color: #DBEAFE !important;
    color: #1E40AF !important;
}

.rag-low,
.rag-green {
    background-color: #D1FAE5 !important;
    color: #10B981 !important;
}

.rag-purple {
    background-color: #EDE9FE !important;
    color: #5B21B6 !important;
}

/* =============================================================================
   15. TEXT COLOR UTILITIES
   ============================================================================= */

.text-primary {
    color: #0E3D9F !important;
}

.text-success {
    color: #22C55E !important;
}

.text-danger {
    color: #DC2626 !important;
}

.text-warning {
    color: #F59E0B !important;
}

.text-info {
    color: #3B82F6 !important;
}

.text-muted {
    color: #6B7280 !important;
}

/* =============================================================================
   16. BORDER COLOR UTILITIES
   ============================================================================= */

.border-primary {
    border-color: #4C73FF !important;
}

.border-success {
    border-color: #22C55E !important;
}

.border-danger {
    border-color: #DC2626 !important;
}

.border-warning {
    border-color: #F59E0B !important;
}

/* =============================================================================
   17. BACKGROUND COLOR UTILITIES
   ============================================================================= */

.bg-primary {
    background-color: #4C73FF !important;
}

.bg-success {
    background-color: #22C55E !important;
}

.bg-danger {
    background-color: #DC2626 !important;
}

.bg-warning {
    background-color: #F59E0B !important;
}

.bg-info {
    background-color: #3B82F6 !important;
}

.bg-light {
    background-color: #EFF6FF !important;
}

/* =============================================================================
   18. MODAL STYLING
   ============================================================================= */

.modal-header {
    background-color: #F8FAFC;
    border-bottom: 1px solid #DDE2EB;
}

.modal-footer {
    background-color: #F8FAFC;
    border-top: 1px solid #DDE2EB;
}

.modal-content {
    border: 1px solid #DDE2EB;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* =============================================================================
   19. DROPDOWN MENU STYLING
   ============================================================================= */

.dropdown-menu {
    border: 1px solid #DDE2EB;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #EFF6FF;
    color: #0E3D9F;
}

.dropdown-item.active {
    background-color: #4C73FF;
    color: #FFFFFF;
}

/* =============================================================================
   20. FILTER AREA STYLING
   ============================================================================= */

.surv-filters {
    background-color: #EFF6FF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
}

.surv-filter-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #6B7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* =============================================================================
   21. DETAIL TABS STYLING (Intelligence Panel)
   ============================================================================= */

.detail-tabs .nav-tabs .nav-link {
    font-size: 11px;
    padding: 8px 16px;
}

.detail-tab-content {
    padding: 16px 0;
}

/* =============================================================================
   22. SECTION/PAGE HEADERS - Option B (Light Blue Tint + Underline)
   ============================================================================= */

/* Page Title - Primary heading for each page */
.page-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    margin-bottom: 20px !important;
    padding: 12px 16px !important;
    background-color: #EFF6FF !important;
    border-bottom: 2px solid #4C73FF !important;
    border-radius: 6px 6px 0 0 !important;
}

/* Section Title - Secondary headings within pages */
.section-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    margin-bottom: 16px !important;
    padding: 10px 14px !important;
    background-color: #EFF6FF !important;
    border-bottom: 2px solid #4C73FF !important;
    border-radius: 4px 4px 0 0 !important;
}

/* Page Subtitle - Descriptive text under titles */
.page-subtitle {
    font-size: 13px !important;
    color: #6B7280 !important;
    margin-bottom: 24px !important;
}

/* Dashboard Header - Alternative class for dashboard-specific headers */
.dashboard-header {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    padding: 12px 16px !important;
    background-color: #EFF6FF !important;
    border-bottom: 2px solid #4C73FF !important;
    border-radius: 6px 6px 0 0 !important;
    margin-bottom: 16px !important;
}

/* Card Header Override - Apply same styling to card headers */
.card-header.styled-header {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    padding: 10px 14px !important;
    background-color: #EFF6FF !important;
    border-bottom: 2px solid #4C73FF !important;
}

/* =============================================================================
   23. RESULTS PANEL STYLING
   ============================================================================= */

.results-panel {
    background: #F8FAFC;
    border: 1px solid #DDE2EB;
    border-radius: 8px;
    padding: 24px;
}

.result-outcome {
    font-size: 24px;
    font-weight: 700;
    padding: 16px 24px;
    border-radius: 8px;
    text-align: center;
}

.result-pass {
    background: #D1FAE5;
    color: #10B981;
}

.result-fail {
    background: #FEE2E2;
    color: #DC2626;
}

/* =============================================================================
   24. SETTINGS SECTION STYLING
   ============================================================================= */

.settings-section {
    background: #F8FAFC;
    border: 1px solid #DDE2EB;
    border-radius: 8px;
    padding: 20px;
}

.settings-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    border-bottom: 2px solid #4C73FF;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.settings-input:focus {
    border-color: #4C73FF;
    box-shadow: 0 0 0 3px rgba(76, 115, 255, 0.15);
}

/* =============================================================================
   25. STATUS TEXT COLOR CODING - Vibrant Colors, Bold (v1.1.0)

   Usage: Apply these classes to status text elements
   Example: <span class="status-fail">Fail</span>
            <span class="status-pass">Pass</span>
   ============================================================================= */

/* --- RED STATUS: Fail, High --- */
.status-fail,
.status-high {
    color: #DC2626 !important;
    font-weight: 600 !important;
}

/* --- AMBER/ORANGE STATUS: Risk Accepted, Moderate --- */
.status-risk-accepted,
.status-moderate {
    color: #F97316 !important;
    font-weight: 600 !important;
}

/* --- GREEN STATUS: Pass, Low --- */
.status-pass,
.status-low {
    color: #10B981 !important;
    font-weight: 600 !important;
}

/* --- GREY STATUS: Pending --- */
.status-pending {
    color: #6B7280 !important;
    font-weight: 600 !important;
}

/* --- PURPLE STATUS: Critical --- */
.status-critical {
    color: #8B5CF6 !important;
    font-weight: 600 !important;
}

/* --- BLUE STATUS: Submitted, Completed --- */
.status-submitted,
.status-completed {
    color: #0EA5E9 !important;
    font-weight: 600 !important;
}

/* =============================================================================
   26. STATUS BADGE VARIANTS - With Background Tints (Optional)

   Usage: For status badges with background colors
   Example: <span class="status-badge status-badge-fail">Fail</span>
   ============================================================================= */

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-badge-fail,
.status-badge-fail-rejected,
.status-badge-high {
    background-color: #FEE2E2 !important;
    color: #DC2626 !important;
}

.status-badge-risk-accepted,
.status-badge-moderate {
    background-color: #FEF3C7 !important;
    color: #F97316 !important;
}

.status-badge-pass,
.status-badge-low {
    background-color: #D1FAE5 !important;
    color: #10B981 !important;
}

.status-badge-pending {
    background-color: #F3F4F6 !important;
    color: #6B7280 !important;
}

.status-badge-critical {
    background-color: #EDE9FE !important;
    color: #8B5CF6 !important;
}

.status-badge-submitted,
.status-badge-completed {
    background-color: #E0F2FE !important;
    color: #0EA5E9 !important;
}

/* =============================================================================
   27. DATA TABLE STATUS CELL STYLING

   These styles apply to table cells containing status values.
   Works with Dash DataTable conditional styling.
   ============================================================================= */

/* Red statuses in tables */
td[data-status="Fail"],
td[data-status="High"] {
    color: #DC2626 !important;
    font-weight: 600 !important;
}

/* Amber statuses in tables */
td[data-status="Risk Accepted"],
td[data-status="Moderate"] {
    color: #F97316 !important;
    font-weight: 600 !important;
}

/* Green statuses in tables */
td[data-status="Pass"],
td[data-status="Low"] {
    color: #10B981 !important;
    font-weight: 600 !important;
}

/* Grey statuses in tables */
td[data-status="Pending"] {
    color: #6B7280 !important;
    font-weight: 600 !important;
}

/* Purple statuses in tables */
td[data-status="Critical"] {
    color: #8B5CF6 !important;
    font-weight: 600 !important;
}

/* Blue statuses in tables */
td[data-status="Submitted"],
td[data-status="Completed"] {
    color: #0EA5E9 !important;
    font-weight: 600 !important;
}

/* =============================================================================
   END OF HATFIELD.AI DESIGN SYSTEM CSS
   ============================================================================= */