/* Frontend Improvements - Phase 7
   Loading states, error handling, and UI enhancements */

/* ===== Loading States ===== */

/* HTMX loading spinner */
.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-indicator {
    display: none;
}

/* Loading spinner animation */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.loading-overlay.active {
    display: flex;
}

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.loading-spinner .spinner-border {
    color: #0d6efd;
}

/* Content fade on load */
.content-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ===== Error Handling ===== */

.alert-error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    border-radius: 0.25rem;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
}

.alert-error-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.alert-error-message {
    font-size: 0.95rem;
    line-height: 1.5;
}

.error-details {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-family: monospace;
    font-size: 0.85rem;
    color: #666;
}

/* Network error state */
.network-error {
    display: none;
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
    padding: 1rem;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}

.network-error.active {
    display: block;
}

/* ===== UI Component Library ===== */

/* Parameter controls */
.param-group {
    background: #f8f9fa;
    padding: 1.25rem;
    border-radius: 0.5rem;
    border-left: 4px solid #0d6efd;
}

.param-group label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
    color: #333;
}

.param-group select,
.param-group input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    font-size: 0.95rem;
}

.param-group select:focus,
.param-group input:focus {
    border-color: #0d6efd;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Help text and tooltips */
.help-text {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.25rem;
    display: block;
}

.tooltip-icon {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    background: #e2e3e5;
    border-radius: 50%;
    text-align: center;
    line-height: 1.2;
    color: #666;
    font-weight: bold;
    cursor: help;
    font-size: 0.85rem;
}

.tooltip-icon:hover {
    background: #0d6efd;
    color: white;
}

/* ===== Bokeh Visualization Styling ===== */

.bokeh-container {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.bokeh-container-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e2e3e5;
}

.bokeh-figure {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

/* ===== Data Table Improvements ===== */

.table-container {
    overflow-x: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
}

.bk-root .bk-tab-label {
    padding: 0.75rem 1.5rem;
    font-weight: 500;
}

.bk-root .bk-tab-label.active {
    background-color: #0d6efd;
    color: white;
}

/* Responsive improvements */
.bk-root .bk-data-table {
    font-size: 0.95rem;
}

/* ===== Button Improvements ===== */

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color 0.2s;
}

.btn-download:hover {
    background-color: #218838;
    color: white;
    text-decoration: none;
}

.btn-download svg {
    width: 1rem;
    height: 1rem;
}

/* ===== Accessibility Improvements ===== */

/* Focus states for keyboard navigation */
button:focus,
a:focus,
select:focus,
input:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: white;
    padding: 8px;
    z-index: 100;
}

.skip-to-content:focus {
    top: 0;
}

/* ===== Responsive Design ===== */

@media (max-width: 768px) {
    .param-group {
        margin-bottom: 1rem;
    }

    .bokeh-figure {
        min-height: 250px;
    }

    .loading-overlay {
        background: rgba(255, 255, 255, 0.9);
    }

    .alert-error {
        font-size: 0.9rem;
    }
}

/* ===== Animation ===== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes slideDown {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 500px;
        opacity: 1;
    }
}

.slide-down {
    animation: slideDown 0.3s ease-out;
}

/* HTMX indicator animation */
.spinner-border {
    animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}