/* Overlay styling follows the "Family Opt-In Flow v2" design (the notification
   digest card): white card, pink icon tile, one row per signup with an unread
   dot and a right-aligned timestamp. */

/* The bar and the overlay below it are both sized to their content rather than
   stretched to the page width -- a one-line notice spanning a full dashboard
   reads as an error banner. align-items keeps them left-aligned as they shrink. */
.opt-in-signups-alert-wrapper {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.opt-in-signups-alert {
    max-width: 100%;
    position: relative;
}

.opt-in-signups-alert-bar {
    align-items: center;
    background: #fff4ec;
    border: 1px solid #f4a484;
    border-radius: 0.75rem;
    color: #344563;
    cursor: pointer;
    display: flex;
    font-family: "Sofia Pro";
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    text-align: left;
    width: auto;
}

.opt-in-signups-alert-bar[aria-expanded="true"] .icon-component svg {
    transform: rotate(180deg);
}

.opt-in-signups-alert-summary {
    font-size: 0.9375rem;
    font-weight: 600;
}

/* Sized to the widest signup row rather than to the bar above it, but never
   wider than the viewport on a narrow screen. */
.opt-in-signups-overlay {
    left: 0;
    max-width: min(30rem, calc(100vw - 2rem));
    min-width: 100%;
    position: absolute;
    top: calc(100% + 0.5rem);
    width: max-content;
    z-index: 20;
}

.opt-in-signups-overlay.hidden {
    display: none;
}

.opt-in-signups-overlay-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(158, 158, 158, 0.15);
    color: #344563;
    font-family: "Sofia Pro";
    overflow: hidden;
}

.opt-in-signups-overlay-header {
    align-items: flex-start;
    border-bottom: 1px solid #edf0f3;
    display: flex;
    gap: 16px;
    padding: 20px 22px 18px;
}

.opt-in-signups-overlay-icon {
    align-items: center;
    background: #ffeef1;
    border-radius: 14px;
    display: flex;
    flex-shrink: 0;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.opt-in-signups-overlay-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* text-align is explicit: static/ai/brand-update.css centers every bare h2,
   which would centre this title over the wider subtitle beneath it. */
.opt-in-signups-overlay-title {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    text-align: left;
}

.opt-in-signups-overlay-subtitle {
    color: #8a97a8;
    font-size: 14px;
    margin: 0;
}

.opt-in-signups-overlay-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.opt-in-signups-overlay-item {
    align-items: center;
    border-bottom: 1px solid #f4f6f8;
    display: flex;
    gap: 12px;
    padding: 13px 22px;
}

.opt-in-signups-overlay-item:hover {
    background: #fef9fa;
}

.opt-in-signups-overlay-dot {
    background: #f4a484;
    border-radius: 50%;
    flex-shrink: 0;
    height: 8px;
    width: 8px;
}

.opt-in-signups-overlay-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.opt-in-signups-overlay-student {
    font-size: 15px;
    font-weight: 500;
}

.opt-in-signups-overlay-meta {
    color: #8a97a8;
    font-size: 13px;
}

.opt-in-signups-overlay-time {
    color: #8a97a8;
    font-size: 13px;
    margin-left: auto;
    padding-left: 12px;
    white-space: nowrap;
}

/* Flex row so the button below is a flex item and can size to its own content.
   As a block-level flex container it would stretch to the card's full width. */
.opt-in-signups-overlay-actions {
    display: flex;
    padding: 16px 22px 20px;
}

/* Navy fill, white text and pill radius come from the shared .primary modifier.
   The button sizes to its own label -- no width cap -- so a longer translation
   of "See my roster" grows the pill instead of squeezing its contents. */
.opt-in-signups-overlay-roster-link.button-component {
    flex: 0 0 auto;
    font-size: 15px;
    gap: 8px;
    padding: 0 16px;
    width: auto;
}

.opt-in-signups-overlay-roster-link.button-component svg {
    height: 14px;
    width: 14px;
}