/**
 * Data Timeline CSS
 *
 * ARCHITECTURE: Styles for the bin-level clinical data density timeline.
 * WHY .dt-* prefix: Mirrors .ht-* convention from hospitalization-timeline.css.
 *     Avoids collision with sol-* layout variables and ht-* problem timeline.
 * TRADEOFF: Flat namespace (no nesting) for browser compat, even though it's verbose.
 */

/* ── Container ─────────────────────────────────────────────── */

.sol-data-timeline-panel {
    background: var(--sol-bg-secondary);
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-md);
    overflow: hidden;
}

.dt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sol-space-sm) var(--sol-space-md);
    border-bottom: 1px solid var(--sol-border-subtle);
    min-height: 40px;
}

.dt-header .sol-panel-title {
    display: flex;
    align-items: center;
    gap: var(--sol-space-xs);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sol-text-primary);
    margin: 0;
    white-space: nowrap;
}

.dt-header .sol-panel-title svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}

.dt-body {
    position: relative;
    min-height: 160px;
    padding: var(--sol-space-sm);
}


/* ── SVG Viewport ──────────────────────────────────────────── */

.dt-svg {
    width: 100%;
    min-height: 150px;
    display: block;
    overflow: visible;
}


/* ── Lane Labels (left sidebar) ────────────────────────────── */

.dt-lane-label {
    font-size: 0.6875rem;
    font-weight: 500;
    fill: var(--sol-text-secondary);
    dominant-baseline: middle;
    text-anchor: end;
    user-select: none;
}


/* ── Bins ──────────────────────────────────────────────────── */

.dt-bin {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.dt-bin:hover {
    opacity: 0.85;
}

.dt-bin-rect {
    stroke: var(--sol-bg-secondary);
    stroke-width: 0.5;
    rx: 1;
    ry: 1;
}

.dt-bin--selected .dt-bin-rect {
    stroke: var(--sol-accent);
    stroke-width: 1.5;
}

/* Empty bin (count=0, no missing range) — dim placeholder */
.dt-bin-rect--empty {
    fill: var(--sol-bg-tertiary);
    opacity: 0.3;
}


/* ── Severity Colors ───────────────────────────────────────── */

.dt-sev-routine {
    fill: var(--sol-stable);
}

.dt-sev-notable {
    fill: var(--sol-warning);
}

.dt-sev-critical {
    fill: var(--sol-critical);
}

/* Fallback for unknown/missing severity */
.dt-sev-default {
    fill: var(--sol-text-muted);
}


/* ── Coverage Gap Overlays ─────────────────────────────────── */

.dt-gap-overlay {
    pointer-events: none;
    opacity: 0.45;
}

.dt-gap-icon {
    font-size: 0.625rem;
    fill: var(--sol-text-secondary);
    text-anchor: middle;
    dominant-baseline: middle;
}


/* ── Tooltip ───────────────────────────────────────────────── */

.dt-tooltip {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    background: var(--sol-bg-elevated);
    border: 1px solid var(--sol-border-strong);
    border-radius: var(--sol-radius-sm);
    padding: var(--sol-space-sm) var(--sol-space-md);
    font-size: 0.75rem;
    color: var(--sol-text-primary);
    line-height: 1.5;
    white-space: nowrap;
    box-shadow: var(--sol-shadow-lg);
    opacity: 0;
    transition: opacity 0.1s ease;
    max-width: 280px;
}

.dt-tooltip--visible {
    opacity: 1;
}

.dt-tooltip-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--sol-text-primary);
}

.dt-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: var(--sol-space-md);
}

.dt-tooltip-label {
    color: var(--sol-text-secondary);
}

.dt-tooltip-value {
    font-weight: 500;
}

.dt-tooltip-severity {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--sol-border-subtle);
    font-weight: 600;
}

.dt-tooltip-severity--routine { color: var(--sol-stable); }
.dt-tooltip-severity--notable { color: var(--sol-warning); }
.dt-tooltip-severity--critical { color: var(--sol-critical); }


/* ── Loading / Error / Empty States ────────────────────────── */

.dt-loading,
.dt-error,
.dt-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    font-size: 0.8125rem;
    color: var(--sol-text-muted);
}

.dt-loading::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--sol-border);
    border-top-color: var(--sol-accent);
    border-radius: 50%;
    animation: dt-spin 0.8s linear infinite;
    margin-right: var(--sol-space-sm);
}

@keyframes dt-spin {
    to { transform: rotate(360deg); }
}

.dt-error {
    color: var(--sol-critical);
}


/* ── Zoom Controls ─────────────────────────────────────────── */

.dt-zoom-controls {
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
}

.dt-scale-group {
    display: flex;
    gap: 1px;
    background: var(--sol-border-subtle);
    border-radius: var(--sol-radius-sm);
    overflow: hidden;
}

.dt-scale-btn {
    border: none;
    background: var(--sol-bg-tertiary);
    color: var(--sol-text-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 3px 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1.3;
    font-family: inherit;
}

.dt-scale-btn:hover {
    background: var(--sol-bg-hover);
    color: var(--sol-text-primary);
}

.dt-scale-btn[aria-pressed="true"] {
    background: var(--sol-accent);
    color: #fff;
}

.dt-scale-btn:focus-visible {
    outline: 2px solid var(--sol-accent);
    outline-offset: -2px;
    z-index: 1;
}

.dt-nav-group {
    display: flex;
    gap: 2px;
}

.dt-nav-btn {
    border: 1px solid var(--sol-border-subtle);
    background: var(--sol-bg-tertiary);
    color: var(--sol-text-secondary);
    font-size: 0.75rem;
    width: 26px;
    height: 26px;
    border-radius: var(--sol-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    font-family: inherit;
    padding: 0;
    line-height: 1;
}

.dt-nav-btn:hover {
    background: var(--sol-bg-hover);
    color: var(--sol-text-primary);
}

.dt-nav-btn:focus-visible {
    outline: 2px solid var(--sol-accent);
    outline-offset: -1px;
}

.dt-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


/* ── Time Axis Labels ──────────────────────────────────────── */

.dt-axis-label {
    font-size: 0.625rem;
    fill: var(--sol-text-muted);
    user-select: none;
}

.dt-axis-line {
    stroke: var(--sol-border-subtle);
    stroke-width: 0.5;
}


/* ── SVG Pattern Definitions (referenced by renderer defs) ── */

/* Hatch patterns are defined in SVG <defs> by the renderer,
   but we style the overlay rects that use them here */

.dt-gap-no-source,
.dt-gap-source-down {
    fill: url(#dt-hatch-diagonal);
}

.dt-gap-permission {
    fill: url(#dt-hatch-horizontal);
}

.dt-gap-unknown {
    stroke: var(--sol-text-muted);
    stroke-dasharray: 3 2;
    fill: none;
}


/* ── Reduced Motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .dt-loading::before {
        animation: none;
    }
    .dt-bin,
    .dt-tooltip,
    .dt-scale-btn,
    .dt-nav-btn {
        transition: none;
    }
}


/* ── Mobile (collapse lane labels to abbreviations) ────────── */

@media (max-width: 768px) {
    .dt-zoom-controls {
        flex-wrap: wrap;
        gap: 2px;
    }

    .dt-scale-btn {
        font-size: 0.625rem;
        padding: 2px 5px;
    }

    .dt-nav-btn {
        width: 22px;
        height: 22px;
        font-size: 0.6875rem;
    }

    .dt-lane-label {
        font-size: 0.5625rem;
    }

    .dt-tooltip {
        font-size: 0.6875rem;
        max-width: 220px;
    }
}