/* Modern Dashboard Styles for HydroScope */
/* Theme colors (--primary-color, --secondary-color, --accent-color) are overridden per-theme in app_factory.py */

:root {
    --primary-color: #1b2b4d;  /* space_cadet - Dark navy blue */
    --secondary-color: #367196;  /* ucla_blue - Medium blue */
    --success-color: #214e34;  /* cal_poly_green - Green */
    --warning-color: #f18f01;  /* carrot_orange - Orange */
    --danger-color: #fb3640;  /* imperial_red - Red */
    --light-color: #f8f9fa;
    --dark-color: #0b111e;  /* space_cadet_dark - Very dark blue */
    --border-radius: 0.5rem;
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --box-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --transition: all 0.15s ease-in-out;
    
    /* Additional theme colors */
    --accent-color: #ff7f6a;  /* salmon - Accent color */
    --teal-color: #4ecdc4;  /* robin_egg - Teal accent */
    --purple-color: #af4d98;  /* fandango - Purple accent */
    --steel-blue: #3f88c5;  /* steel_blue - Medium blue */
    --grid-color: #e2e8f0;  /* gridColor - Light gray for grid lines */
}

/* Global Styles */
body {
    font-family: 'Ubuntu', 'Segoe UI', 'Roboto', 'Oxygen', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    color: #212529;
}

/* Navbar Styling */
.navbar {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
    box-shadow: var(--box-shadow-lg);
    border-bottom: none;
    height: 60px; /* Fixed height instead of min-height to prevent expansion */
    min-height: 60px;
    max-height: 60px; /* Prevent navbar from growing */
    display: flex;
    align-items: center;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    z-index: 1050; /* Above sidebar (1045) to ensure navbar stays on top */
    overflow: visible; /* Allow dropdown menus to overflow navbar */
}

.navbar .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    transition: var(--transition);
}

.navbar .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
    color: white;
}

.navbar-brand {
    color: white !important;
    font-weight: 600;
}

/* Ensure navbar content doesn't overflow and maintains fixed height */
.navbar .container-fluid,
.navbar .container {
    height: 100%;
    display: flex;
    align-items: center;
    overflow: visible; /* Allow dropdown menus to overflow navbar */
}

.navbar .d-flex {
    height: 100%;
    align-items: center;
    flex-wrap: nowrap; /* Prevent wrapping that could increase height */
}

/* Sidebar Styling */
.offcanvas {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    border-right: 1px solid #dee2e6;
}

/* Hide the offcanvas header - not needed for this sidebar */
#sidebar .offcanvas-header,
.offcanvas-header {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Also hide the close button if it exists */
#sidebar .btn-close,
.offcanvas-header .btn-close {
    display: none !important;
}

/* Card Styling */
.card {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    background: white;
    margin-bottom: 1rem;
}

/* Ensure summary cards respect Bootstrap grid and don't overlap */
#results-container .row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    display: flex;
    flex-wrap: wrap;
}

#results-container .row > [class*="col-"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    box-sizing: border-box;
}

#results-container .card {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    word-wrap: break-word;
}

/* Ensure card content doesn't cause overflow */
#results-container .card-body {
    overflow-wrap: break-word;
    word-break: break-word;
}

.card:hover {
    box-shadow: var(--box-shadow-lg);
    /* Removed translateY transform to avoid creating a new stacking context that could interfere with overlays */
}

.card-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
    font-weight: 600;
    color: #495057;
}

.card-body {
    padding: 1.25rem;
}

/* Button Styling */
.btn {
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: var(--transition);
    border: none;
    padding: 0.5rem 1rem;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--box-shadow);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--steel-blue) 100%);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
}

.btn-success {
    background: linear-gradient(135deg, var(--success-color) 0%, var(--teal-color) 100%);
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--accent-color) 100%);
    color: #212529;
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger-color) 0%, var(--purple-color) 100%);
}

.btn-info {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--steel-blue) 100%);
    color: white;
}

/* Form Controls */
.form-control, .form-select {
    border-radius: var(--border-radius);
    border: 1px solid #ced4da;
    transition: var(--transition);
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(27, 43, 77, 0.25);
}

/* Dropdown Styling */
.Select-control {
    border-radius: var(--border-radius);
    border: 1px solid #ced4da;
    transition: var(--transition);
}

.Select-control:hover {
    border-color: var(--primary-color);
}

.Select-control.is-focused {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(27, 43, 77, 0.25);
}

/* Date Picker Styling */
.DateInput_input {
    border-radius: var(--border-radius);
    border: 1px solid #ced4da;
    padding: 0.375rem 0.75rem;
    transition: var(--transition);
}

.DateInput_input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(27, 43, 77, 0.25);
}

/* Overlay Components Layering Fix -------------------------------------------------
   Ensures that all overlay components (dropdown menus, date pickers, Bootstrap
   dropdowns, tooltips, etc.) always render on top of surrounding cards and
   layout elements inside the sidebar and main content. This provides a single,
   robust solution for every popup instead of handling each component type
   individually.
-------------------------------------------------------------------------------*/
/* Dash / React-Select dropdown menu */
.Select-menu,
.Select-menu-outer,
.Select__menu,
.Select__menu-list {
    z-index: 2000 !important;
}

/* Dash DatePicker / DateRangePicker pop-up */
.DateRangePicker_picker {
    z-index: 2000 !important;
}

/* Generic Bootstrap dropdown menu */
.dropdown-menu {
    z-index: 2000 !important;
}

/* Navbar dropdown menu - ensure it appears above all content */
.navbar .dropdown-menu {
    z-index: 2050 !important; /* Higher than navbar (1050) and other dropdowns (2000) */
    position: absolute !important;
}

/* Ensure dropdown toggle button and menu container are positioned correctly */
.navbar .dropdown,
.navbar #user-menu-container {
    position: relative;
    z-index: 2051; /* Slightly higher than dropdown menu */
}

/* Ensure tooltip overlays are also above other components */
.tooltip,
.popover {
    z-index: 2000 !important;
}


/* Slider Styling */
.rc-slider {
    margin: 1rem 0;
}

.rc-slider-track {
    background-color: var(--primary-color);
}

.rc-slider-handle {
    border: 2px solid var(--primary-color);
    background-color: white;
    box-shadow: var(--box-shadow);
}

.rc-slider-handle:hover {
    transform: scale(1.1);
}

/* Alert Styling */
.alert {
    border-radius: var(--border-radius);
    border: none;
    box-shadow: var(--box-shadow);
}

.alert-info {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    color: #0c5460;
}

.alert-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
}

.alert-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
}

.alert-danger {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
}

/* Tab Styling */
.nav-tabs {
    border-bottom: 2px solid #dee2e6;
}

.nav-tabs .nav-link {
    border: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    color: #6c757d;
    font-weight: 500;
    transition: var(--transition);
    margin-right: 0.25rem;
}

.nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--primary-color);
    background-color: rgba(27, 43, 77, 0.1);
}

.nav-tabs .nav-link.active {
    color: var(--primary-color);
    background-color: white;
    border-bottom: 2px solid var(--primary-color);
}

/* Loading Spinner */
._dash-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

/* Results Container */
#results-container {
    min-height: 600px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 1rem;
    width: 100%;
}

/* Ensure main content takes full width */
.dashboard-content {
    width: 100%;
}

/* Override Bootstrap grid to allow full width */
.container-fluid {
    max-width: none !important;
    width: 100% !important;
}

.container-fluid .row .col {
    flex: 1 1 auto;
    max-width: none;
}

/* Ensure results container uses full available width */
#results-container {
    width: 100%;
    max-width: 100%; /* Prevent container from exceeding viewport */
    transition: margin-left 0.3s ease-in-out;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Simple sidebar behavior - positioned below navbar */
.offcanvas.show {
    position: fixed !important;
    top: 60px;
    left: 0;
    width: 400px !important;
    height: calc(100vh - 60px);
    z-index: 1045;
    transform: translateX(0) !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

/* Remove backdrop */
.offcanvas-backdrop {
    display: none !important;
}

/* Main content container - add padding for fixed navbar */
#main-content-container {
    padding-top: 80px;
}

/* Main content styling */
#main-content {
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
    margin-left: 0;
    width: 100%;
}

/* Navbar always stays full-width */
#navbar {
    width: 100% !important;
    margin-left: 0 !important;
}

/* Footer container */
#footer-container {
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
    margin-left: 0;
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Force page scrolling when sidebar is open */
html, body {
    overflow-y: scroll !important;
    height: auto !important;
}

/* Ensure the page can scroll even with fixed sidebar */
body {
    position: relative !important;
}

/* Ensure content can scroll */
.container-fluid, .row, #results-container {
    overflow: visible !important;
}

/* Dashboard content wrapper - account for fixed navbar */
#dashboard-content {
    overflow: visible !important;
    padding-top: 0; /* Navbar is fixed, main-content has padding-top */
}



/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.empty-state i {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Footer Styling */
footer {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-top: 1px solid #dee2e6;
    padding: 1rem 0;
    margin-top: 2rem;
}

/* Large screens (>= 1200px): Sidebar displaces content */
@media (min-width: 1200px) {
    .offcanvas {
        width: 400px !important;
    }
    
    body:has(#sidebar.show) #main-content,
    body:has(#sidebar.show) #footer-container,
    body.sidebar-open #main-content,
    body.sidebar-open #footer-container {
        margin-left: 400px !important;
        width: calc(100% - 400px) !important;
        max-width: calc(100% - 400px) !important;
    }
}

/* Medium screens (768px - 1199px): Sidebar overlays content */
@media (min-width: 768px) and (max-width: 1199px) {
    .offcanvas.show {
        width: 350px !important;
    }
    
    /* Sidebar overlays - content stays full width */
    body:has(#sidebar.show) #main-content,
    body:has(#sidebar.show) #footer-container,
    body.sidebar-open #main-content,
    body.sidebar-open #footer-container {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    #results-container .row > [class*="col-"] {
        margin-bottom: 1rem;
    }
}

/* Small screens (< 768px) */
@media (max-width: 767px) {
    .navbar-title {
        display: none !important;
    }
    
    .user-menu-username {
        display: none !important;
    }
    
    .user-menu-icon {
        margin-right: 0 !important;
    }
    
    .navbar-brand {
        font-size: 1.25rem;
    }
    
    .offcanvas {
        width: 100% !important;
    }
    
    .offcanvas.show {
        top: 60px !important;
        height: calc(100vh - 60px) !important;
    }
    
    #main-content,
    #footer-container {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .btn {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
    
    #results-container {
        padding: 1rem;
        margin-top: 1rem;
    }
    
    #results-container .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    
    #results-container .row > [class*="col-"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-bottom: 1rem;
    }
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Icon Styling */
.fas, .far, .fab {
    transition: var(--transition);
}

.btn:hover .fas,
.btn:hover .far,
.btn:hover .fab {
    transform: scale(1.1);
}

/* Status Indicators */
.status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.status-indicator.success {
    background-color: var(--success-color);
}

.status-indicator.warning {
    background-color: var(--warning-color);
}

.status-indicator.danger {
    background-color: var(--danger-color);
}

.status-indicator.info {
    background-color: var(--primary-color);
}

/* Tooltip Styling */
.tooltip {
    font-size: 0.875rem;
}

.tooltip-inner {
    background-color: var(--dark-color);
    border-radius: var(--border-radius);
    padding: 0.5rem 0.75rem;
}

/* Progress Bar Styling */
.progress {
    border-radius: var(--border-radius);
    background-color: #e9ecef;
    height: 0.5rem;
}

.progress-bar {
    background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
    border-radius: var(--border-radius);
    transition: width 0.5s ease-out !important;
}

/* Badge Styling */
.badge {
    border-radius: var(--border-radius);
    font-weight: 500;
    padding: 0.375rem 0.75rem;
}

/* Table Styling */
.table {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.table thead th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #495057;
}

.table-hover tbody tr:hover {
    background-color: rgba(27, 43, 77, 0.05);
}

/* Modal Styling */
.modal-content {
    border-radius: var(--border-radius);
    border: none;
    box-shadow: var(--box-shadow-lg);
}

.modal-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.modal-footer {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-top: 1px solid #dee2e6;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}