/* ══════════════════════════════════════════════════════════════
   CLiQ Design System — Workstation & Application Components

   Principles:
   - CRM-flat: clean data layouts, no decorative animations
   - Dense data, clean chrome (Bloomberg data + Stripe navigation)
   - Monospace for codes/numbers, sans-serif for labels/text
   - Color only for status — everything else is neutral
   - Consistent spacing: 4px base unit
   ══════════════════════════════════════════════════════════════ */

/* ── Typography tokens ── */
:root {
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    --font-sans: 'DM Sans', system-ui, sans-serif;
    --font-display: 'Space Grotesk', system-ui, sans-serif;

    /* Type scale */
    --text-2xs: 0.625rem;   /* 10px — badges, micro labels */
    --text-xs: 0.6875rem;   /* 11px — uppercase labels (Stripe-style) */
    --text-sm: 0.8125rem;   /* 13px — secondary text, table cells */
    --text-base: 0.875rem;  /* 14px — body text, form inputs */
    --text-md: 1rem;        /* 16px — section headers */
    --text-lg: 1.25rem;     /* 20px — page titles */
    --text-xl: 1.5rem;      /* 24px — hero elements */

    /* Status colors */
    --status-success: 34 197 94;    /* green-500 */
    --status-warning: 245 158 11;   /* amber-500 */
    --status-danger: 239 68 68;     /* red-500 */
    --status-info: 59 130 246;      /* blue-500 */
    --status-neutral: 107 114 128;  /* gray-500 */
    --status-ai: 139 92 246;        /* violet-500 */

    /* Confidence thresholds */
    --conf-high: var(--status-success);
    --conf-mid: var(--status-warning);
    --conf-low: var(--status-danger);

    /* Spacing scale (4px base) */
    --sp-1: 0.25rem;   /* 4px */
    --sp-2: 0.5rem;    /* 8px */
    --sp-3: 0.75rem;   /* 12px */
    --sp-4: 1rem;      /* 16px */
    --sp-5: 1.25rem;   /* 20px */
    --sp-6: 1.5rem;    /* 24px */
    --sp-8: 2rem;      /* 32px */

    /* Workstation layout */
    --ws-sidebar-w: 320px;
    --ws-evidence-w: 340px;
    --ws-nav-h: 56px;
}

/* ── Workstation Layout ── */
.ws-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.ws-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    margin-top: var(--ws-nav-h);
}

.ws-sidebar {
    width: var(--ws-sidebar-w);
    min-width: var(--ws-sidebar-w);
    border-right: 1px solid rgb(var(--c-border));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgb(var(--c-bg));
}

.ws-main {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgb(var(--c-bg));
}

.ws-evidence {
    width: var(--ws-evidence-w);
    min-width: var(--ws-evidence-w);
    border-left: 1px solid rgb(var(--c-border));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgb(var(--c-bg));
}

/* Responsive: collapse to stacked on small screens */
@media (max-width: 1024px) {
    .ws-body { flex-direction: column; }
    .ws-sidebar, .ws-evidence {
        width: 100%;
        min-width: 100%;
        max-height: 40vh;
        border-right: none;
        border-left: none;
        border-bottom: 1px solid rgb(var(--c-border));
    }
}

/* ── Panel Tabs ── */
.ws-tabs {
    display: flex;
    border-bottom: 1px solid rgb(var(--c-border));
    background: rgb(var(--c-surface));
    flex-shrink: 0;
}

.ws-tab {
    flex: 1;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    color: rgb(var(--c-muted));
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    user-select: none;
}

.ws-tab:hover {
    color: rgb(var(--c-fg));
}

.ws-tab.active {
    color: rgb(var(--c-accent));
    border-bottom-color: rgb(var(--c-accent));
}

.ws-tab-panel {
    display: none;
    flex: 1;
    overflow-y: auto;
}

.ws-tab-panel.active {
    display: flex;
    flex-direction: column;
}

/* ── Section Headers (Stripe-style uppercase label) ── */
.ws-section-label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(var(--c-muted));
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid rgb(var(--c-border) / 0.5);
    flex-shrink: 0;
}

/* ── Label-Value Pairs (Stripe pattern) ── */
.ws-field {
    padding: var(--sp-2) var(--sp-4);
}

.ws-field-label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(var(--c-muted));
    margin-bottom: var(--sp-1);
}

.ws-field-value {
    font-size: var(--text-base);
    color: rgb(var(--c-fg));
    line-height: 1.4;
}

.ws-field-value.mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
}

/* ── Form Inputs (consistent across all pages) ── */
.ws-input {
    width: 100%;
    background: rgb(var(--c-bg));
    border: 1px solid rgb(var(--c-border));
    border-radius: 6px;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--text-base);
    color: rgb(var(--c-fg));
    transition: border-color 0.15s;
    outline: none;
    font-family: inherit;
}

.ws-input:focus {
    border-color: rgb(var(--c-accent));
}

.ws-input::placeholder {
    color: rgb(var(--c-muted) / 0.6);
}

textarea.ws-input {
    resize: vertical;
    min-height: 60px;
}

select.ws-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

/* ── Buttons ── */
.ws-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.15s, background-color 0.15s;
    border: none;
    outline: none;
    user-select: none;
}

.ws-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ws-btn-primary {
    background: rgb(var(--c-accent));
    color: #fff;
}

.ws-btn-primary:hover:not(:disabled) {
    opacity: 0.9;
}

.ws-btn-primary.gated {
    background: rgb(var(--status-warning) / 0.15);
    color: rgb(var(--status-warning));
    cursor: not-allowed;
}

.ws-btn-primary.confirmed {
    background: rgb(var(--status-success) / 0.15);
    color: rgb(var(--status-success));
    cursor: default;
}

.ws-btn-ghost {
    background: transparent;
    color: rgb(var(--c-muted));
    border: 1px solid rgb(var(--c-border));
}

.ws-btn-ghost:hover:not(:disabled) {
    color: rgb(var(--c-fg));
    border-color: rgb(var(--c-muted) / 0.5);
}

.ws-btn-sm {
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--text-xs);
}

/* ── Status Badges ── */
.ws-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
}

.ws-badge-success {
    background: rgb(var(--status-success) / 0.12);
    color: rgb(var(--status-success));
}

.ws-badge-warning {
    background: rgb(var(--status-warning) / 0.12);
    color: rgb(var(--status-warning));
}

.ws-badge-danger {
    background: rgb(var(--status-danger) / 0.12);
    color: rgb(var(--status-danger));
}

.ws-badge-info {
    background: rgb(var(--status-info) / 0.12);
    color: rgb(var(--status-info));
}

.ws-badge-neutral {
    background: rgb(var(--status-neutral) / 0.12);
    color: rgb(var(--status-neutral));
}

/* ── Status Dots (inline, for tables/lists) ── */
.ws-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.ws-dot-success { background: rgb(var(--status-success)); }
.ws-dot-warning { background: rgb(var(--status-warning)); }
.ws-dot-danger { background: rgb(var(--status-danger)); }
.ws-dot-info { background: rgb(var(--status-info)); }
.ws-dot-neutral { background: rgb(var(--status-neutral)); }

/* ── Confidence Display ── */
.ws-confidence {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
}

.ws-confidence-high { color: rgb(var(--conf-high)); }
.ws-confidence-mid { color: rgb(var(--conf-mid)); }
.ws-confidence-low { color: rgb(var(--conf-low)); }

.ws-confidence-bar {
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background: rgb(var(--c-border));
    overflow: hidden;
}

.ws-confidence-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ── HS Code Display (prominent, monospace) ── */
.ws-hs-code {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgb(var(--c-accent));
}

.ws-hs-code-sm {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgb(var(--c-accent));
}

/* ── Verdict Strip (top bar of results) ── */
.ws-verdict {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-6);
    border-bottom: 1px solid rgb(var(--c-border));
    background: rgb(var(--c-surface));
    flex-wrap: wrap;
}

.ws-verdict-hs {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: rgb(var(--c-accent));
}

.ws-verdict-duty {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 4px;
    background: rgb(var(--status-success) / 0.1);
    color: rgb(var(--status-success));
}

/* ── Collapsible Sections (Figma-style) ── */
.ws-collapse {
    border-bottom: 1px solid rgb(var(--c-border) / 0.5);
}

.ws-collapse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.1s;
}

.ws-collapse-header:hover {
    background: rgb(var(--c-surface));
}

.ws-collapse-title {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(var(--c-muted));
}

.ws-collapse-icon {
    width: 16px;
    height: 16px;
    color: rgb(var(--c-muted));
    transition: transform 0.15s;
}

.ws-collapse.open .ws-collapse-icon {
    transform: rotate(180deg);
}

.ws-collapse-body {
    display: none;
    padding: 0 var(--sp-4) var(--sp-4);
}

.ws-collapse.open .ws-collapse-body {
    display: block;
}

/* ── History List ── */
.ws-history-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
    border-bottom: 1px solid rgb(var(--c-border) / 0.3);
    transition: background-color 0.1s;
}

.ws-history-item:hover {
    background: rgb(var(--c-surface));
}

.ws-history-item.selected {
    background: rgb(var(--c-accent) / 0.06);
    border-left: 2px solid rgb(var(--c-accent));
}

.ws-history-hs {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgb(var(--c-accent));
    min-width: 90px;
}

.ws-history-desc {
    font-size: var(--text-sm);
    color: rgb(var(--c-fg));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.ws-history-meta {
    font-size: var(--text-2xs);
    color: rgb(var(--c-muted));
    white-space: nowrap;
}

/* ── Warning Cards ── */
.ws-warning {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: 6px;
    margin-bottom: var(--sp-2);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.ws-warning-critical {
    background: rgb(var(--status-danger) / 0.06);
    border: 1px solid rgb(var(--status-danger) / 0.15);
    color: rgb(var(--status-danger));
}

.ws-warning-action {
    background: rgb(var(--status-warning) / 0.06);
    border: 1px solid rgb(var(--status-warning) / 0.15);
    color: rgb(var(--status-warning));
}

.ws-warning-info {
    background: rgb(var(--status-info) / 0.06);
    border: 1px solid rgb(var(--status-info) / 0.15);
    color: rgb(var(--status-info));
}

/* ── Warning Acknowledgement ── */
.ws-warnings-hint {
    font-size: var(--text-sm);
    color: rgb(var(--c-fg) / 0.5);
    margin-bottom: var(--sp-2);
}
.ws-warning-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-bottom: 1px solid rgb(var(--c-border) / 0.3);
    background: rgb(var(--status-warning) / 0.04);
    border-radius: 6px;
    margin-bottom: var(--sp-1);
    transition: background 0.2s, opacity 0.2s;
}
.ws-warning-item:last-child { border-bottom: none; }
.ws-warning-item.acknowledged {
    background: rgb(var(--status-success) / 0.04);
    opacity: 0.7;
}
.ws-warning-text {
    flex: 1;
    font-size: var(--text-sm);
    color: rgb(var(--status-warning));
    line-height: 1.5;
}
.ws-warning-item.acknowledged .ws-warning-text {
    color: rgb(var(--status-success));
}
.ws-warning-ack-btn {
    flex-shrink: 0;
    font-size: var(--text-2xs);
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid rgb(var(--status-warning) / 0.3);
    background: transparent;
    color: rgb(var(--status-warning));
    cursor: pointer;
    transition: all 0.15s;
}
.ws-warning-ack-btn:hover:not(.acked) {
    background: rgb(var(--status-warning) / 0.1);
}
.ws-warning-ack-btn.acked {
    border-color: rgb(var(--status-success) / 0.3);
    background: rgb(var(--status-success) / 0.1);
    color: rgb(var(--status-success));
    cursor: default;
    pointer-events: none;
}
.ws-gate-hint {
    text-align: center;
    font-size: var(--text-sm);
    color: rgb(var(--status-warning));
    padding: var(--sp-2) 0;
}

/* ── Alternative Path Selection ── */
.ws-alt-sublabel {
    font-size: var(--text-sm);
    color: rgb(var(--c-fg) / 0.5);
    margin-bottom: var(--sp-2);
}
.ws-alt-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-3);
    border: 1px solid rgb(var(--c-border) / 0.4);
    border-radius: 6px;
    background: rgb(var(--c-bg-elevated) / 0.5);
    transition: border-color 0.15s, background 0.15s;
}
.ws-alt-card.selected {
    border-color: rgb(var(--c-accent));
    background: rgb(var(--c-accent) / 0.06);
}
.ws-alt-trigger {
    font-size: var(--text-sm);
    color: rgb(var(--c-fg) / 0.6);
    font-style: italic;
}
.ws-alt-then {
    font-size: var(--text-sm);
    color: rgb(var(--c-fg));
}
.ws-alt-reasoning {
    font-size: var(--text-2xs);
    color: rgb(var(--c-fg) / 0.45);
    line-height: 1.4;
}
.ws-alt-select-btn {
    align-self: flex-end;
    font-size: var(--text-2xs);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid rgb(var(--c-accent) / 0.3);
    background: transparent;
    color: rgb(var(--c-accent));
    cursor: pointer;
    transition: all 0.15s;
}
.ws-alt-select-btn:hover:not(.selected-switch) {
    background: rgb(var(--c-accent) / 0.1);
}
.ws-alt-select-btn.selected-switch {
    background: rgb(var(--c-accent) / 0.15);
    border-color: rgb(var(--c-accent));
    cursor: default;
    pointer-events: none;
}

/* ── Confidence Factor Chips ── */
.ws-conf-factor {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    line-height: 1.5;
    padding: 2px 0;
}
.ws-conf-factor-positive { color: rgb(var(--status-success)); }
.ws-conf-factor-negative { color: rgb(var(--status-danger)); }

/* ── Reasoning Steps (Evidence panel) ── */
.ws-reason-step {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: rgb(var(--c-fg) / 0.85);
}

.ws-reason-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.ws-reason-tool {
    display: inline-block;
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgb(var(--status-warning) / 0.12);
    color: rgb(var(--status-warning));
    font-family: var(--font-mono);
}

/* ── Empty States ── */
.ws-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8);
    text-align: center;
    color: rgb(var(--c-muted));
    flex: 1;
}

.ws-empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--sp-4);
    opacity: 0.3;
}

.ws-empty-title {
    font-size: var(--text-md);
    font-weight: 600;
    margin-bottom: var(--sp-2);
    color: rgb(var(--c-fg) / 0.5);
}

.ws-empty-desc {
    font-size: var(--text-sm);
    max-width: 280px;
}

/* ── SSE Stream Progress ── */
.ws-stream {
    padding: var(--sp-4);
}

.ws-stream-step {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    font-size: var(--text-sm);
    color: rgb(var(--c-fg) / 0.7);
    animation: ws-fade-in 0.2s ease;
}

@keyframes ws-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.ws-stream-thinking {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    color: rgb(var(--c-accent));
    padding: var(--sp-2) 0;
}

.ws-stream-thinking::after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgb(var(--c-accent));
    animation: ws-pulse 1s ease-in-out infinite;
}

@keyframes ws-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* ── Hierarchy Display ── */
.ws-hierarchy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-2) 0;
}

.ws-hierarchy-level {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    border-left: 2px solid rgb(var(--c-border));
}

.ws-hierarchy-level.active {
    border-left-color: rgb(var(--c-accent));
    background: rgb(var(--c-accent) / 0.04);
}

.ws-hierarchy-code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgb(var(--c-accent));
    min-width: 70px;
}

.ws-hierarchy-desc {
    font-size: var(--text-sm);
    color: rgb(var(--c-fg) / 0.8);
}

/* ── Dividers ── */
.ws-divider {
    height: 1px;
    background: rgb(var(--c-border) / 0.5);
    margin: var(--sp-2) 0;
}

/* ── Light mode overrides ── */
html.light .ws-sidebar,
html.light .ws-evidence {
    background: rgb(var(--c-bg));
}

html.light .ws-history-item:hover,
html.light .ws-collapse-header:hover {
    background: rgb(var(--c-surface));
}

html.light .ws-history-item.selected {
    background: rgb(var(--c-accent) / 0.04);
}