/* SANR (Satisfies Annual Notice Requirement) — shared control chrome. #9565 / #9891 / #9687.

   Not CSS-isolated, for the same reason as tracker-popovers.css: the year chip and the hover
   tooltip are rendered by three unrelated components — the notice-details tile
   (Components/NoticeTabs/NoticeConfigureTab.razor), the create-notice modal
   (Pages/Plans/PlanNotices.razor) and the bulk-import card
   (Components/Forms/ImportConfigurationForm.razor). Isolation would scope them to whichever
   component declared them and leave the other two unstyled.

   Values transcribed from the blessed mockup (Notices/notice-detail.html) via
   sanr-mockup-source-spec.md. Do NOT retune by eye — re-extract from the mockup instead.

   Layout that is specific to one host (the 5-across tile row, the modal's column widths) stays
   in that host's own scoped file — only genuinely shared chrome belongs here. */

/* year chip — inline pill inside the control's label, one element toggled via [hidden] */
.annual-year-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    color: #6b4fbb;
    background-color: #f0ebff;
    border: 1px solid #e6dcff;
    border-radius: 999px;
    text-transform: none;
    letter-spacing: normal;
}

    .annual-year-chip[hidden] {
        display: none;
    }

.annual-year-chip-sep {
    color: #b9a8e8;
}

.annual-year-chip-edit {
    border: none;
    background: transparent;
    color: #7c5cdb;
    font-size: 10px;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
}

    .annual-year-chip-edit:hover {
        color: #4a3ba3;
    }

/* custom hover tooltip (dark bubble + arrow) — replaces the native title attribute */
.annual-info-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.annual-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 240px;
    padding: 8px 10px;
    background-color: #1d1d1f;
    color: #fff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s, visibility .15s, transform .15s;
    z-index: 20;
    pointer-events: none;
}

    .annual-tooltip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #1d1d1f;
    }

.annual-info-wrap:hover .annual-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}