/* ==========================================================================
   MVD Announcements — frontend styles
   --------------------------------------------------------------------------
   The shortcode output is intentionally decoration-free (no borders, cards,
   shadows, backgrounds, outer padding or titles). Kadence / the theme is
   expected to provide surrounding decoration. These styles only lay out the
   list itself and the per-item structure.
   ========================================================================== */

.mvd-announcements {
    display: flex;
    flex-direction: column;
}

/* Internal scroll container — only the list scrolls, never the outer wrapper.
   max-height is set inline from the shortcode `max_height` attribute.
   Horizontal padding keeps icons off the left edge and the unread dot off the
   vertical scrollbar. */
.mvd-announcements__scroll {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-left: 20px;
    padding-right: 20px;
}

.mvd-announcement {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0; /* very subtle separator */
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: background 0.15s ease;
}

.mvd-announcement:last-child {
    border-bottom: none;
}

.mvd-announcement:hover,
.mvd-announcement:focus {
    background: #fafafa;
    outline: none;
}

/* Large icon on the left — institutional blue, never black. */
.mvd-announcement__icon {
    font-size: 28px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    flex: 0 0 auto;
    color: #2563eb;
}

.mvd-announcement__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.mvd-announcement__category {
    font-size: 12px;
    color: #9aa3af; /* light gray */
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}

/* Date: fixed-width column on the right so every item's date aligns
   perfectly regardless of title length. */
.mvd-announcement__date {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 1px;
    min-width: 92px;
    font-size: 12px;
    color: #9aa3af;
    text-align: right;
    white-space: nowrap;
}

.mvd-announcement__title {
    font-weight: 700;
    font-size: 15px;
    color: #1a202c;
    line-height: 1.3;
}

.mvd-announcement__desc {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin-top: 3px;
    white-space: pre-line;
    word-break: break-word;
}

/* Unread indicator slot: ALWAYS reserved (fixed width) so the date column
   never shifts when an item is marked read. Only the inner dot is hidden. */
.mvd-announcement__unread {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 3px;
    width: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mvd-announcement__dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e23b3b;
}

/* Read items keep the slot but hide the dot itself. */
.mvd-announcement.is-read .mvd-announcement__dot {
    visibility: hidden;
}

/* ─── Admin list-table status pills ─── */
.mvd-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.mvd-pill--ok {
    background: #e6f4ea;
    color: #1e7e34;
}

.mvd-pill--off {
    background: #f1f1f1;
    color: #6b7280;
}