/* =============================================================================
   TUGBOAT — Global Stylesheet
   Intelligence platform dark theme with WCAG AA compliant contrast.
   ============================================================================= */

/* =============================================================================
   TYPOGRAPHY SCALE — WCAG AA on slate-950 (#020617) background
   Contrast ratios verified against both slate-950 and slate-900 (#0f172a).

   Minimum readable text: 11px.
   Minimum contrast: 4.5:1 for normal text, 3:1 for large (18px+ or 14px bold).
   ============================================================================= */

/* Page/section headings — 17:1 contrast */
.t-heading { color: #e2e8f0; }

/* Card titles, form labels, subheadings — 14:1 contrast */
.t-subheading { color: #cbd5e1; }

/* Body text, descriptions, narratives — 14:1 contrast */
.t-body { color: #cbd5e1; }

/* Labels, table headers, metadata — 7.5:1 contrast */
.t-label { color: #94a3b8; }

/* Timestamps, secondary metadata — 7.5:1 contrast */
.t-muted { color: #94a3b8; }

/* Footnotes, helper text — 7.5:1 contrast */
.t-caption { color: #94a3b8; }

/* Disabled/decorative only — NOT for readable text. 4.6:1 on slate-950. */
.t-dim { color: #64748b; }


/* =============================================================================
   BASE FONT
   ============================================================================= */

body {
    font-family: 'JetBrains Mono', monospace;
}


/* =============================================================================
   DARK LEAFLET POPUPS
   ============================================================================= */

.leaflet-popup-content-wrapper {
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 8px;
}
.leaflet-popup-tip { background: #1e293b; }
.leaflet-popup-content a { color: #34d399; }


/* =============================================================================
   SCROLLBAR
   ============================================================================= */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }


/* =============================================================================
   SEVERITY BADGES
   ============================================================================= */

.badge-critical { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.badge-high { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-standard { background: rgba(14, 165, 233, 0.2); color: #38bdf8; border: 1px solid rgba(14, 165, 233, 0.3); }
.badge-low { background: rgba(107, 114, 128, 0.2); color: #9ca3af; border: 1px solid rgba(107, 114, 128, 0.3); }


/* =============================================================================
   THREAT LEVEL BADGES
   ============================================================================= */

.threat-critical { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.threat-high { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.threat-elevated { background: rgba(234, 179, 8, 0.15); color: #facc15; border: 1px solid rgba(234, 179, 8, 0.3); }
.threat-guarded { background: rgba(14, 165, 233, 0.15); color: #38bdf8; border: 1px solid rgba(14, 165, 233, 0.3); }
.threat-low { background: rgba(34, 197, 94, 0.15); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }


/* =============================================================================
   ACTOR STANCE BADGES
   ============================================================================= */

.stance-aggressor { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.stance-defender { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.stance-mediator { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.stance-neutral { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }
.stance-opportunist { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.stance-ally { background: rgba(34, 197, 94, 0.15); color: #4ade80; }


/* =============================================================================
   SOURCE TIER COLORS
   ============================================================================= */

.tier-1 { color: #34d399; }
.tier-2 { color: #60a5fa; }
.tier-3 { color: #fbbf24; }
.tier-4 { color: #f87171; }


/* =============================================================================
   PERSPECTIVE COLORS
   ============================================================================= */

.perspective-western { color: #60a5fa; }
.perspective-us_gov { color: #3b82f6; }
.perspective-israeli { color: #818cf8; }
.perspective-iranian { color: #34d399; }
.perspective-arab { color: #fbbf24; }
.perspective-russian { color: #f87171; }
.perspective-chinese { color: #fb7185; }
.perspective-independent { color: #a78bfa; }


/* =============================================================================
   LIVE INDICATOR PULSE
   ============================================================================= */

@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.live-dot {
    animation: pulse-live 2s ease-in-out infinite;
}


/* =============================================================================
   STATUS BAR SEPARATOR
   ============================================================================= */

.status-sep {
    width: 1px;
    height: 20px;
    background: #334155;
}


/* =============================================================================
   SIGNAL LEVELS (Economic, GovCon, etc.)
   ============================================================================= */

.signal-calm { color: #34d399; }
.signal-watch { color: #facc15; }
.signal-alert { color: #f59e0b; }
.signal-danger { color: #ef4444; }

.signal-bg-calm { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.25); }
.signal-bg-watch { background: rgba(250, 204, 21, 0.1); border-color: rgba(250, 204, 21, 0.25); }
.signal-bg-alert { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.25); }
.signal-bg-danger { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.25); }


/* =============================================================================
   GAUGE (stress, procurement pulse, etc.)
   ============================================================================= */

.stress-gauge {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right,
        #10b981 0%, #10b981 20%,
        #eab308 20%, #eab308 40%,
        #f59e0b 40%, #f59e0b 60%,
        #ef4444 60%, #ef4444 80%,
        #dc2626 80%, #dc2626 100%
    );
    position: relative;
}
.stress-gauge-needle {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 12px;
    background: white;
    border-radius: 1px;
    transform: translateX(-50%);
    box-shadow: 0 0 4px rgba(255,255,255,0.5);
}


/* =============================================================================
   CHART UTILITIES
   ============================================================================= */

.chart-wrap { overflow: hidden; position: relative; }


/* =============================================================================
   DEMAND / CATEGORY LEVEL BADGES
   ============================================================================= */

.demand-high { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.25); }
.demand-moderate { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.25); }
.demand-low { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.25); }
.demand-surge { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.35); }
.demand-elevated { background: rgba(250, 204, 21, 0.15); color: #facc15; border: 1px solid rgba(250, 204, 21, 0.25); }
.demand-normal { background: rgba(107, 114, 128, 0.15); color: #9ca3af; border: 1px solid rgba(107, 114, 128, 0.25); }


/* =============================================================================
   SET-ASIDE BADGES
   ============================================================================= */

.setaside-sba { color: #34d399; background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.2); }
.setaside-sdvosb { color: #38bdf8; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.2); }
.setaside-hubzone { color: #fbbf24; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.2); }
.setaside-open { color: #94a3b8; background: rgba(148, 163, 184, 0.1); border: 1px solid rgba(148, 163, 184, 0.2); }


/* =============================================================================
   PIPELINE STATUS BADGES
   ============================================================================= */

.pipeline-new { color: #94a3b8; background: rgba(148, 163, 184, 0.1); border: 1px solid rgba(148, 163, 184, 0.2); }
.pipeline-reviewing { color: #38bdf8; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.2); }
.pipeline-pursuing { color: #fbbf24; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.2); }
.pipeline-submitted { color: #a78bfa; background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.2); }
.pipeline-nobid { color: #64748b; background: rgba(100, 116, 139, 0.1); border: 1px solid rgba(100, 116, 139, 0.15); }
.pipeline-won { color: #34d399; background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.2); }
.pipeline-lost { color: #f87171; background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.2); }


/* =============================================================================
   METHODOLOGY TOOLTIPS — hover to reveal how a number was computed
   ============================================================================= */

.has-tooltip {
    position: relative;
    cursor: help;
}
.has-tooltip .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    z-index: 50;
    pointer-events: none;
    transition: opacity 0.15s ease;
    text-align: left;
}
.has-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}
/* Arrow pointing down */
.has-tooltip .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #334155;
}
/* Variant: tooltip below the element */
.has-tooltip-below .tooltip-text {
    bottom: auto;
    top: calc(100% + 8px);
}
.has-tooltip-below .tooltip-text::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #334155;
}
/* Keep tooltip on screen when near left/right edge */
.has-tooltip-left .tooltip-text {
    left: 0;
    transform: none;
}
.has-tooltip-left .tooltip-text::after {
    left: 16px;
    transform: none;
}
.has-tooltip-right .tooltip-text {
    left: auto;
    right: 0;
    transform: none;
}
.has-tooltip-right .tooltip-text::after {
    left: auto;
    right: 16px;
    transform: none;
}


/* =============================================================================
   TREND DIRECTION INDICATORS
   ============================================================================= */

.trend-intensifying { color: #f87171; }
.trend-deescalating { color: #4ade80; }
.trend-stable { color: #94a3b8; }

.trend-bg-intensifying { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.25); }
.trend-bg-deescalating { background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.25); }
.trend-bg-stable { background: rgba(148, 163, 184, 0.1); border-color: rgba(148, 163, 184, 0.25); }


/* =============================================================================
   AI ASSESSMENT LABEL
   ============================================================================= */

.ai-assessment-banner {
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.2);
    color: #c084fc;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
}

/* Inline label for LLM-generated narrative sections */
.ai-narrative-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c084fc;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.15);
    padding: 1px 6px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 8px;
}

/* Subtle left border on AI-generated narrative text */
.ai-narrative {
    border-left: 2px solid rgba(168, 85, 247, 0.2);
    padding-left: 12px;
}


/* =============================================================================
   STRESS COMPONENT BREAKDOWN CARDS
   ============================================================================= */

.stress-component {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid #1e293b;
    border-radius: 6px;
    padding: 8px 10px;
}
.stress-component-score {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.stress-component-contribution {
    font-size: 10px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}