/* ============================================================================
   PathoMap Dashboard - Custom Styling (LIGHT MODE)
   Modern, professional design with light theme and colorful accents
   ============================================================================ */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* Root Variables - Light Mode */
:root {
    --primary-color: #0d6efd;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    --light-bg: #ffffff;
    --card-bg: #ffffff;
    --border-color: #dee2e6;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --hover-bg: #f8f9fa;
    --accent-blue: #0d6efd;
    --accent-green: #198754;
    --accent-red: #dc3545;
}

/* Global Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background: #f8f9fa !important;
    color: var(--text-primary) !important;
    overflow-x: hidden;
}

/* Remove gradient text for light mode */
.text-gradient {
    color: var(--primary-color);
}

/* Card Enhancements */
.card {
    background: var(--card-bg) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

.card-body {
    padding: 1.5rem !important;
}

/* Border Colors for Cards */
.border-primary {
    border-color: var(--primary-color) !important;
    border-width: 3px !important;
}

.border-success {
    border-color: var(--success-color) !important;
    border-width: 3px !important;
}

.border-danger {
    border-color: var(--danger-color) !important;
    border-width: 3px !important;
}

.border-warning {
    border-color: var(--warning-color) !important;
    border-width: 3px !important;
}

/* Shadow Effects */
.shadow-sm {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Dropdown Styling */
.Select-control {
    background-color: #ffffff !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease;
}

.Select-control:hover {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.Select-menu-outer {
    background-color: #ffffff !important;
    border: 2px solid var(--accent-blue) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.Select-option {
    background-color: #ffffff !important;
    color: var(--text-primary) !important;
    padding: 12px 15px !important;
    transition: all 0.2s ease;
}

.Select-option:hover {
    background: var(--accent-blue) !important;
    color: white !important;
}

.Select-option.is-selected {
    background: var(--primary-color) !important;
    color: white !important;
}

.Select-value-label {
    color: var(--text-primary) !important;
}

.Select-placeholder {
    color: var(--text-secondary) !important;
}

/* Button Enhancements */
.btn {
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border: none !important;
}

.btn-warning {
    background: var(--warning-color) !important;
    color: #212529 !important;
}

.btn-success {
    background: var(--success-color) !important;
    color: white !important;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Data Table Custom Styling */
.dash-table-container {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.dash-spreadsheet {
    font-family: 'JetBrains Mono', monospace !important;
}

.dash-spreadsheet-container {
    max-height: 600px;
    overflow-y: auto;
}

/* Custom Scrollbar for Light Mode */
.dash-spreadsheet-container::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.dash-spreadsheet-container::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 5px;
}

.dash-spreadsheet-container::-webkit-scrollbar-thumb {
    background: var(--accent-blue);
    border-radius: 5px;
}

.dash-spreadsheet-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Plotly Graph Container */
.js-plotly-plot {
    border-radius: 12px;
    overflow: hidden;
}

/* Graph Cards with Light Background */
.card:has(.js-plotly-plot) {
    background: #ffffff !important;
}

/* Summary Cards Animation */
.card-body h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* Info Icons */
.fas, .far, .fab {
    margin-right: 8px;
}

/* Labels */
label {
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
    display: block;
}

/* HR Divider */
hr {
    border-color: var(--border-color) !important;
    opacity: 0.5 !important;
    margin: 2rem 0 !important;
}

/* Footer */
footer {
    border-top: 1px solid var(--border-color);
    padding-top: 2rem;
    margin-top: 3rem;
}

footer a {
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--accent-blue) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .card-body h2 {
        font-size: 2rem;
    }
    
    .display-4 {
        font-size: 2.5rem !important;
    }
    
    .btn {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* Loading Animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading {
    animation: pulse 2s ease-in-out infinite;
}

/* Tooltip Styling - fixed to the viewport so long values (e.g. the AI
   explanation) are never clipped by the scrolling table container. The
   position is kept in sync with the hovered cell by assets/datatable-tooltip.js. */
.dash-table-tooltip {
    background-color: #1f2937 !important;
    color: white !important;
    border: 1px solid #374151 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    max-width: min(480px, 90vw) !important;
    max-height: min(60vh, 400px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    position: fixed !important;
    left: 0;
    top: 0;
    z-index: 999999 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    pointer-events: none !important;
}

/* A transform on the results card would become the containing block for the
   fixed-positioned tooltip and break its viewport placement, so disable the
   hover lift inside the results area only. */
#results-section .card:hover,
#results-section .card:focus-within {
    transform: none !important;
}

/* Table Cell - Normal pointer, click-to-copy with JavaScript */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    cursor: pointer !important;
    position: relative !important;
}

/* Highlight Effect on Hover */
.dash-spreadsheet td:hover {
    background-color: rgba(13, 110, 253, 0.12) !important;
    cursor: pointer !important;
}

/* Active state (clicking) - Visual feedback for copy */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td:active {
    background-color: rgba(34, 197, 94, 0.2) !important;
}

/* Copy success flash animation */
@keyframes copySuccess {
    0% { background-color: rgba(34, 197, 94, 0.4); }
    100% { background-color: transparent; }
}

.cell-copied {
    animation: copySuccess 0.6s ease;
}

/* Header Styling */
h1, h2, h3 {
    font-weight: 700 !important;
}

/* Metric Cards Color Classes */
.text-primary {
    color: var(--primary-color) !important;
}

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

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

.text-warning {
    color: #856404 !important;  /* Darker warning for readability */
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .card-body h2 {
        font-size: 2rem;
    }
    
    .display-4 {
        font-size: 2.5rem !important;
    }
    
    .btn {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* Loading Animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading {
    animation: pulse 2s ease-in-out infinite;
}

/* Background for Body */
.container-fluid {
    background-color: #f8f9fa;
}

/* White Cards */
.bg-white {
    background-color: #ffffff !important;
}

/* Restyle Dash's version badge into a subtle PathoMap footer badge.
   Text is overridden to PathoMap's version by assets/version-badge.js. */
.dash-debug-menu__version {
    display: inline-block !important;
    visibility: visible !important;
    padding: 2px 10px !important;
    margin: 6px !important;
    border-radius: 10px !important;
    background: rgba(13, 110, 253, 0.08) !important;
    color: var(--primary-color) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}
.dash-debug-menu__version span {
    color: var(--primary-color) !important;
}

/* Keep Dash's automatic upgrade prompts hidden */
.dash-debug-menu__upgrade-tooltip,
.dash-debug-menu__upgrade-button {
    display: none !important;
}

/* ============================================================================
   Bottom status bar (independent of Dash's dev-tools debug menu)
   ============================================================================ */
body {
    padding-bottom: 46px;
}

.pathomap-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    background: #11223e;
    color: #e2e8f0;
    border-top: 2px solid var(--accent-blue);
    padding: 8px 18px;
    font-size: 12.5px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18);
}

.pathomap-bottom-bar .bar-sep {
    opacity: 0.35;
    user-select: none;
}

.pathomap-bottom-bar .bar-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.pathomap-bottom-bar .fas,
.pathomap-bottom-bar .far {
    margin-right: 5px;
    opacity: 0.85;
}

.pathomap-bottom-bar .bar-version {
    color: #7dd3fc;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.pathomap-bottom-bar code {
    color: #7dd3fc;
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 6px;
    border-radius: 6px;
}

/* Print Styles */
@media print {
    .btn, .Select, footer {
        display: none !important;
    }
    
    .card {
        break-inside: avoid;
    }
}
/* End of Custom Light Mode CSS */