/* ============================================================================
 * Data Drawer — Collapsible bottom panel for board-dominant workspace
 *
 * ARCHITECTURE: Part of the Virtual Physician Workspace milestone.
 * WHY: When the 2D Problem Space is the active view, clinical data panels
 *   (labs, vitals, meds, timeline, scores) are hidden from the grid and
 *   reparented into this tabbed drawer below the board. The drawer gives
 *   doctors on-demand access to supporting data without leaving the board.
 * TRADEOFF: Extra UI chrome below the board vs. full-screen board with no
 *   data context. Collapsed state (36px tab bar only) minimizes footprint.
 *
 * Uses --term-* tokens from terminal-core.css exclusively.
 * Scoped under .data-drawer-* to avoid specificity conflicts.
 * ========================================================================= */


/* ── Custom Properties ──────────────────────────────────────────────────── */

:root {
    --drawer-height-default: 250px;
    --drawer-height-min: 120px;
    --drawer-height-max: 50vh;
    --drawer-transition: 250ms ease-out;
    --drawer-handle-height: 5px;
}


/* ── Main container ─────────────────────────────────────────────────────── */

.data-drawer {
    display: none;                /* hidden until board mode activates */
    flex-direction: column;
    height: var(--drawer-height, var(--drawer-height-default));
    min-height: var(--drawer-height-min);
    max-height: var(--drawer-height-max);
    background: var(--term-bg-surface, #13120F);
    border-top: 1px solid var(--term-border-default, #2A2720);
    position: relative;
    overflow: hidden;
    transition: height var(--drawer-transition),
                min-height var(--drawer-transition);
}

.data-drawer.dd-visible {
    display: flex;
}

.data-drawer.dd-collapsed {
    height: 36px;
    min-height: 36px;
}


/* ── Resize handle ──────────────────────────────────────────────────────── */
/* WHY: Thin bar at top of drawer. Cursor changes to ns-resize to afford
   dragging. Gold accent line provides visual weight / Art Deco transom. */

.data-drawer-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--drawer-handle-height);
    cursor: ns-resize;
    z-index: 10;
    background: transparent;
    transition: background var(--term-duration-fast, 150ms) ease;
}

.data-drawer-handle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        var(--term-gold-dim, rgba(212, 168, 87, 0.35)),
        transparent
    );
    pointer-events: none;
    transition: opacity var(--term-duration-fast, 150ms) ease;
}

.data-drawer-handle:hover {
    background: var(--term-accent-ghost, rgba(0, 255, 208, 0.05));
}

.data-drawer-handle:hover::after {
    opacity: 1;
}

/* During active drag, make the handle taller for easier grip */
.data-drawer-handle.dd-resizing {
    height: calc(var(--drawer-handle-height) * 2);
    background: var(--term-accent-subtle, rgba(0, 255, 208, 0.10));
}

/* Hide handle when collapsed — nothing to resize */
.data-drawer.dd-collapsed .data-drawer-handle {
    display: none;
}


/* ── Tab bar ────────────────────────────────────────────────────────────── */
/* WHY: Always visible even when collapsed. Compact height (28px) minimizes
   chrome. Contains tabs + optional problem filter + toggle button. */

.data-drawer-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 var(--term-space-sm, 8px);
    height: 36px;
    min-height: 36px;
    flex-shrink: 0;
    background: var(--term-bg-header, #0E0D0B);
    border-bottom: 1px solid var(--term-border-subtle, #1E1C18);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;         /* Firefox */
}

.data-drawer-tabs::-webkit-scrollbar {
    display: none;                 /* Chrome/Safari */
}


/* ── Individual tab button ──────────────────────────────────────────────── */

.drawer-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--term-space-md, 12px);
    height: 28px;
    font-family: var(--term-font-mono, 'JetBrains Mono', monospace);
    font-size: var(--term-text-xs, 0.6875rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--term-tracking-wide, 0.05em);
    color: var(--term-fg-muted, #8A8278);
    background: none;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--term-duration-fast, 150ms) ease,
                background var(--term-duration-fast, 150ms) ease,
                border-color var(--term-duration-fast, 150ms) ease;
    user-select: none;
    position: relative;
}

.drawer-tab:hover {
    color: var(--term-fg-secondary, #A09888);
    background: var(--term-bg-elevated, #1B1A16);
}

.drawer-tab:focus-visible {
    outline: 2px solid var(--term-accent-dim, rgba(0, 255, 208, 0.40));
    outline-offset: -2px;
    color: var(--term-fg-secondary, #A09888);
}

/* Active tab — accent underline + brighter text */
.drawer-tab.dd-active {
    color: var(--term-accent, #00FFD0);
    background: var(--term-bg-surface, #13120F);
    border-color: var(--term-border-subtle, #1E1C18);
    border-bottom-color: transparent;
}

.drawer-tab.dd-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 4px;
    right: 4px;
    height: 2px;
    background: var(--term-accent, #00FFD0);
    border-radius: 1px 1px 0 0;
    box-shadow: var(--term-glow-accent-ghost,
        0 0 4px rgba(0, 255, 208, 0.08),
        0 0 12px rgba(0, 255, 208, 0.03));
}


/* ── Problem filter indicator ───────────────────────────────────────────── */
/* WHY: When a problem is selected on the board, shows "Filtered: AKI" badge
   in the tab bar. Phase 1: visual indicator only. Phase 2: actual filtering. */

.drawer-problem-filter {
    display: none;                 /* hidden when no problem selected */
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 2px 8px;
    height: 22px;
    font-family: var(--term-font-mono, 'JetBrains Mono', monospace);
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--term-tracking-wide, 0.05em);
    color: var(--term-gold, #D4A857);
    background: var(--term-gold-ghost, rgba(212, 168, 87, 0.05));
    border: 1px solid var(--term-gold-dim, rgba(212, 168, 87, 0.35));
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.drawer-problem-filter.dd-filter-active {
    display: inline-flex;
}

.drawer-problem-filter-label {
    color: var(--term-fg-muted, #8A8278);
}


/* ── Toggle (collapse/expand) button ────────────────────────────────────── */

.drawer-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--term-fg-muted, #8A8278);
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--term-duration-fast, 150ms) ease,
                background var(--term-duration-fast, 150ms) ease,
                border-color var(--term-duration-fast, 150ms) ease;
}

.drawer-toggle:hover {
    color: var(--term-fg-secondary, #A09888);
    background: var(--term-bg-elevated, #1B1A16);
    border-color: var(--term-border-subtle, #1E1C18);
}

.drawer-toggle:focus-visible {
    outline: 2px solid var(--term-accent-dim, rgba(0, 255, 208, 0.40));
    outline-offset: -2px;
}

/* Chevron icon rotates 180deg when collapsed */
.drawer-toggle-icon {
    display: block;
    width: 14px;
    height: 14px;
    transition: transform var(--drawer-transition);
}

.data-drawer.dd-collapsed .drawer-toggle-icon {
    transform: rotate(180deg);
}


/* ── Content area ───────────────────────────────────────────────────────── */
/* WHY: Scrollable container below tabs. Holds one reparented panel at a time.
   Overflow hidden when collapsed, smooth height transition. */

.data-drawer-content {
    flex: 1;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--term-border-default, #2A2720) transparent;
    background: var(--term-bg-void, #0C0B0A);
    transition: opacity var(--drawer-transition);
}

.data-drawer-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.data-drawer-content::-webkit-scrollbar-track {
    background: transparent;
}

.data-drawer-content::-webkit-scrollbar-thumb {
    background: var(--term-border-default, #2A2720);
    border-radius: 3px;
}

.data-drawer-content::-webkit-scrollbar-thumb:hover {
    background: var(--term-border-strong, #3A3630);
}

/* When collapsed, content is hidden */
.data-drawer.dd-collapsed .data-drawer-content {
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}


/* ── Tab panels (wrappers for reparented content) ───────────────────────── */

.drawer-tab-panel {
    display: none;
    min-height: 100%;
}

.drawer-tab-panel.dd-panel-active {
    display: block;
}

/* Ensure reparented clinical panels fill the drawer */
.drawer-tab-panel > .sol-clinical-panel {
    border: none;
    border-radius: 0;
    margin: 0;
    min-height: 100%;
}


/* ── Empty state ────────────────────────────────────────────────────────── */

.drawer-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--term-space-sm, 8px);
    padding: var(--term-space-xl, 24px);
    color: var(--term-fg-muted, #8A8278);
    font-family: var(--term-font-mono, 'JetBrains Mono', monospace);
    font-size: var(--term-text-xs, 0.6875rem);
    text-transform: uppercase;
    letter-spacing: var(--term-tracking-wide, 0.05em);
    opacity: 0.6;
}


/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .data-drawer,
    .data-drawer-handle,
    .data-drawer-handle::after,
    .drawer-tab,
    .drawer-toggle,
    .drawer-toggle-icon,
    .data-drawer-content {
        transition: none;
    }
}