/* Frontier Performance — Custom Styles
   Supplements Tailwind CSS utility classes. */

/* Smooth transitions for dark mode */
html {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Scrollbar styling for tab bar */
.overflow-x-auto::-webkit-scrollbar {
    height: 0;
}

/* Chart container defaults */
.plotly-chart-container {
    width: 100%;
    min-height: 300px;
}

/* Loading spinner for HTMX requests */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-flex;
}

.htmx-request.htmx-indicator {
    display: inline-flex;
}

/* Pulse animation for live data */
@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

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

/* KPI card hover lift */
.kpi-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Twin color utilities */
.twin-a-text { color: #06b6d4; }
.twin-b-text { color: #f97316; }
.twin-a-bg { background-color: rgba(6, 182, 212, 0.1); }
.twin-b-bg { background-color: rgba(249, 115, 22, 0.1); }
.twin-a-border { border-color: #06b6d4; }
.twin-b-border { border-color: #f97316; }

/* HR zone bar styles */
.zone-bar {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
}

.zone-bar > div {
    transition: width 0.3s ease;
}

/* Tab transition */
#tab-panel {
    transition: opacity 0.15s ease;
}

/* Table hover rows */
table tbody tr {
    transition: background-color 0.1s ease;
}

/* Collapsible sections */
details summary {
    list-style: none;
}

details summary::-webkit-details-marker {
    display: none;
}

/* Status badges */
.status-optimal { color: #22c55e; }
.status-normal { color: #3b82f6; }
.status-borderline { color: #eab308; }
.status-high, .status-low { color: #ef4444; }

/* Chart container responsive sizing */
@media (max-width: 768px) {
    .plotly-chart-container {
        min-height: 220px;
    }
}

/* File input styling */
input[type="file"]::file-selector-button {
    cursor: pointer;
}