/* ============================================================================
 * Compliance — shared tooltip + info-icon + matrix-help / Alerts column.
 *
 * Cross-surface helpers any compliance page can drop in:
 *   - ``[data-tooltip]`` + ``.info-help-icon`` for hover bubbles paired
 *     with the small info-circle glyph.
 *   - ``.fw-matrix-item-code-help`` wrapper that keeps tooltip-bearing
 *     column-header codes from wrapping on narrow columns.
 *   - ``.fw-matrix-alerts-col`` / ``.fw-matrix-alert-link`` family for
 *     the rightmost Alerts column on parallel-measures matrices.
 * ==========================================================================*/

/* ════════════════════════════════════════════════════════════════════
 * Reusable tooltip + info-icon helper (compliance-wide).
 *
 * Promoted from data/compliance/cisa/static/cisa.css so any compliance
 * surface — MITRE rail, AWIA narrative, future frameworks, generic
 * matrix headers — can drop a tooltip with no per-framework CSS.
 *
 * USAGE
 * -----
 * 1. Put ``data-tooltip="explainer text"`` on any element you want
 *    a bubble for.  Pair with ``aria-label="…"`` so screen readers
 *    stay in step with the visual.
 *
 *      <span class="fw-csf-chip"
 *            data-tooltip="Detect — surface security events…"
 *            aria-label="Detect — surface security events…">
 *        CSF · DE
 *        <span class="info-help-icon" aria-hidden="true">
 *          {{ ic.icon("info-circle", "w-3 h-3") }}
 *        </span>
 *      </span>
 *
 * 2. The element doing data-tooltip should be ``display: inline-flex``
 *    or similar non-table-cell so ``position: relative`` actually
 *    forms a containing block (``<th>`` cells DON'T — anchor on the
 *    inner span instead).
 *
 * 3. The info-circle icon is optional decoration via
 *    ``.info-help-icon`` — dimmed grey at rest, brand-green on
 *    hover.  Skip it if the host element already cues the tooltip
 *    (e.g. a column header reads as clickable on its own).
 *
 * POSITIONING NOTE
 * ----------------
 * Bubble renders BELOW the host (``top: calc(100% + 8px)``) on
 * purpose: many compliance surfaces nest the host inside an
 * ``overflow: hidden`` wrapper (the matrix table, for example),
 * which clips bubbles popping above.  Below pops into the parent's
 * body area where there's vertical room.  Override per-callsite
 * with ``data-tooltip-pos="above"`` if a specific surface wants the
 * other direction (rule below).
 *
 * z-index: 100 — sits above row content, badges, grade chips.
 * ════════════════════════════════════════════════════════════════════ */

[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    /* Wide enough for two lines of compliance copy. */
    max-width: 280px;
    width: max-content;
    padding: 7px 10px;
    background: var(--cp-gray-900);
    color: var(--fg-on-dark);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    /* Hidden until hover/focus.  ``visibility`` keeps focus + hit-
     * testing sane while ``opacity`` animates in. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.12s ease-out,
        visibility 0.12s ease-out;
    z-index: 100;
}
[data-tooltip]::before {
    /* Caret pointing up at the host. */
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--cp-gray-900);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.12s ease-out,
        visibility 0.12s ease-out;
    z-index: 100;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

/* Optional opt-in: pop above instead of below.  Use on hosts inside
 * containers WITHOUT ``overflow: hidden`` clipping (e.g. a stand-
 * alone widget). */
[data-tooltip][data-tooltip-pos="above"]::after {
    top: auto;
    bottom: calc(100% + 8px);
}
[data-tooltip][data-tooltip-pos="above"]::before {
    top: auto;
    bottom: 100%;
    border-bottom-color: transparent;
    border-top-color: var(--cp-gray-900);
}

/* Decorative info-circle glyph paired with [data-tooltip]. Sits
 * dimmed at rest and goes brand-green on hover/focus of the host
 * tooltip target.  Use ``aria-hidden="true"`` since the explainer
 * text itself is on aria-label. */
.info-help-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
    color: var(--cp-gray-500, var(--fg-4));
    opacity: 0.7;
    transition:
        color 0.12s,
        opacity 0.12s;
}
[data-tooltip]:hover .info-help-icon,
[data-tooltip]:focus-visible .info-help-icon {
    color: var(--color-brand-green);
    opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════
 * Matrix item-code "help" wrapper + Alerts column — shared across
 * compliance frameworks.  Originally authored inside CISA's static
 * folder; promoted here so AWIA / future parallel-measures matrices
 * can use the same Jinja pattern (info icon + tooltip + deep-linked
 * count pill) without duplicating styles.
 * ════════════════════════════════════════════════════════════════════ */

/* Inline-flex wrapper around an item-code <span> when the column
 * header carries a tooltip.  Keeps the code text and the trailing
 * .info-help-icon visually grouped (small gap, vertical centre).
 * ``cursor: help`` advertises that the header is hoverable.
 * ``white-space: nowrap`` on the wrapper keeps codes like "RRA-A"
 * from wrapping mid-token when the info-icon nudges them past the
 * column's preferred width — the table cell grows instead. */
.fw-matrix-item-code-help {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: help;
    white-space: nowrap;
}

/* Alerts column (rightmost in the Tenants matrix) — fixed narrow
 * width, centred header text, tabular numerals on the cells so
 * single- vs three-digit counts line up. */
.fw-matrix-alerts-col {
    width: 5.5rem;
    text-align: center;
}
.fw-matrix-cell-alerts {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Pill rendering for the deep-linked alert count.  Tone is red
 * (--cp-red-* tokens) because firing alerts read as alarm, not
 * success — earlier green iterations were misleading. */
.fw-matrix-alert-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--cp-red-bg);
    color: var(--danger-deep-fg);
    border: 1px solid var(--cp-red-border);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.12s,
        border-color 0.12s,
        color 0.12s,
        transform 0.12s,
        box-shadow 0.12s;
}
.fw-matrix-alert-link:hover,
.fw-matrix-alert-link:focus-visible {
    background: var(--cp-red);
    border-color: var(--cp-red);
    color: var(--fg-on-dark);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 1px 4px rgba(220, 38, 38, 0.3);
}
.fw-matrix-alert-link:focus-visible {
    outline: 2px solid var(--cp-red);
    outline-offset: 2px;
}
.fw-matrix-alert-link-glyph {
    display: inline-flex;
    align-items: center;
    color: currentColor;
    opacity: 0.65;
    transition: opacity 0.12s;
}
.fw-matrix-alert-link:hover .fw-matrix-alert-link-glyph,
.fw-matrix-alert-link:focus-visible .fw-matrix-alert-link-glyph {
    opacity: 1;
}