/* =============================================================================
   Bow-Tie SVG Component Styles — v3 (Tapering Bands + Thin Barriers)
   VERSION: 2026-02-13-v3
   ============================================================================= */

/* Container scoped (NO html/body rules — we share the NiceGUI document) */
[data-bowtie-id] {
    width: 100%;
    position: relative;  /* anchor for tooltip overlay */
}

[data-bowtie-id] svg {
    display: block;
    width: 100%;
}

/* -------------------------------------------------------------------------
   Hover effects — cause / consequence boxes
   ------------------------------------------------------------------------- */
.bowtie-box {
    cursor: pointer;
    transition: filter 0.12s ease;
}

.bowtie-box:hover {
    filter: brightness(1.06) drop-shadow(0 0 4px rgba(49, 130, 206, 0.3));
}

.bowtie-box.consequence:hover {
    filter: brightness(1.06) drop-shadow(0 0 4px rgba(229, 62, 62, 0.3));
}

/* -------------------------------------------------------------------------
   Hover effects — top event (hazard node)
   ------------------------------------------------------------------------- */
.bowtie-top-event {
    cursor: pointer;
    transition: filter 0.12s ease;
}

.bowtie-top-event:hover {
    filter: brightness(1.08) drop-shadow(0 0 6px rgba(214, 158, 46, 0.4));
}

/* -------------------------------------------------------------------------
   Hover effects — control barriers
   ------------------------------------------------------------------------- */
.bowtie-control {
    cursor: pointer;
    transition: transform 0.1s ease, filter 0.12s ease;
}

.bowtie-control:hover {
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.5));
}

/* -------------------------------------------------------------------------
   Selection glow (applied via JS class toggle)
   ------------------------------------------------------------------------- */
.bowtie-box.selected {
    filter: drop-shadow(0 0 8px rgba(214, 158, 46, 0.7));
}

.bowtie-top-event.selected {
    filter: drop-shadow(0 0 10px rgba(214, 158, 46, 0.8));
}

.bowtie-control.selected {
    filter: drop-shadow(0 0 6px rgba(214, 158, 46, 0.7));
}

/* -------------------------------------------------------------------------
   Text styling — match app brand fonts
   ------------------------------------------------------------------------- */
.bowtie-text {
    font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, sans-serif;
    pointer-events: none;  /* Text should not block clicks on parent element */
}

.bowtie-title-text {
    font-family: 'Playfair Display', Georgia, serif;
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   Tooltip (HTML overlay positioned by JS)
   ------------------------------------------------------------------------- */
.bowtie-tooltip {
    position: absolute;
    z-index: 100;
    pointer-events: none;
    background: #1E293B;
    color: #F1F5F9;
    border-radius: 10px;
    padding: 12px 16px;
    width: 260px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    border: 1px solid #E2E8F0;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    transition: opacity 0.12s ease;
}

.bowtie-tooltip-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.bowtie-tooltip-row {
    opacity: 0.8;
}

.bowtie-tooltip-row strong {
    opacity: 1;
}