/**
 * Miracle Group Manager — public.css
 *
 * Styles all frontend member-facing components.
 * Theme-agnostic — uses CSS custom properties so it works
 * with Kadence, Astra, GeneratePress, or any other theme.
 *
 * Sections:
 *   1.  CSS Variables
 *   2.  Wrapper and Layout
 *   3.  Cards
 *   4.  Badges
 *   5.  Buttons
 *   6.  Agenda Board
 *   7.  Item Rows
 *   8.  Dashboard
 *   9.  My Assignment
 *   10. Minutes and Treasury
 *   11. Announcements
 *   12. Messages
 *   13. Empty States
 *   14. Responsive
 *
 * File location: miracle_plugin/public/assets/public.css
 */

/* ─────────────────────────────────────────────────────────────────────────
   1. CSS VARIABLES
   These control the color scheme. Change these to rebrand for another group.
   ───────────────────────────────────────────────────────────────────────── */
:root {
    --miracle-blue:        #1B4F8A;
    --miracle-blue-mid:    #2E75B6;
    --miracle-blue-light:  #D6E4F0;
    --miracle-gold:        #C9A84C;
    --miracle-gold-light:  #FEF9EE;
    --miracle-green:       #27AE60;
    --miracle-green-light: #EAF7EF;
    --miracle-yellow:      #F39C12;
    --miracle-yellow-light:#FFF8E7;
    --miracle-red:         #C0392B;
    --miracle-red-light:   #FDECEA;
    --miracle-gray-dark:   #1A1A1A;
    --miracle-gray-mid:    #666666;
    --miracle-gray-light:  #F5F5F5;
    --miracle-gray-border: #DDDDDD;
    --miracle-white:       #FFFFFF;
    --miracle-radius:      6px;
    --miracle-shadow:      0 1px 4px rgba(0,0,0,0.10);
    --miracle-shadow-md:   0 2px 8px rgba(0,0,0,0.12);
    --miracle-transition:  all 0.2s ease;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. WRAPPER AND LAYOUT
   ───────────────────────────────────────────────────────────────────────── */
.miracle-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
    font-family: inherit;
    color: var(--miracle-gray-dark);
    line-height: 1.6;
}

.miracle-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. CARDS
   ───────────────────────────────────────────────────────────────────────── */
.miracle-card {
    background: var(--miracle-white);
    border: 1px solid var(--miracle-gray-border);
    border-radius: var(--miracle-radius);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--miracle-shadow);
}

.miracle-card h3 {
    margin: 0 0 16px 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--miracle-blue);
    border-bottom: 2px solid var(--miracle-gold);
    padding-bottom: 10px;
}

.miracle-officer-card {
    border-left: 4px solid var(--miracle-blue-mid);
    background: var(--miracle-blue-light);
}

/* ─────────────────────────────────────────────────────────────────────────
   4. BADGES
   Small color-coded labels used throughout the interface.
   ───────────────────────────────────────────────────────────────────────── */
.miracle-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* Status badges */
.miracle-badge--available {
    background: var(--miracle-green-light);
    color: var(--miracle-green);
    border: 1px solid var(--miracle-green);
}

.miracle-badge--claimed {
    background: var(--miracle-yellow-light);
    color: var(--miracle-yellow);
    border: 1px solid var(--miracle-yellow);
}

.miracle-badge--presented {
    background: var(--miracle-blue-light);
    color: var(--miracle-blue-mid);
    border: 1px solid var(--miracle-blue-mid);
}

/* Item type badges */
.miracle-badge--consider {
    background: var(--miracle-green-light);
    color: var(--miracle-green);
}

.miracle-badge--discuss {
    background: var(--miracle-yellow-light);
    color: var(--miracle-yellow);
}

.miracle-badge--review {
    background: var(--miracle-gray-light);
    color: var(--miracle-gray-mid);
}

/* PDF badge */
.miracle-badge--pdf {
    background: var(--miracle-blue-light);
    color: var(--miracle-blue-mid);
}

/* Committee badge */
.miracle-badge--committee {
    background: var(--miracle-gold-light);
    color: var(--miracle-gold);
    border: 1px solid var(--miracle-gold);
}

/* Urgent badge */
.miracle-urgent-badge {
    display: inline-block;
    background: var(--miracle-red);
    color: var(--miracle-white);
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

/* Mine tag */
.miracle-mine-tag {
    display: inline-block;
    background: var(--miracle-blue);
    color: var(--miracle-white);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. BUTTONS
   ───────────────────────────────────────────────────────────────────────── */
.miracle-btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: var(--miracle-radius);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--miracle-transition);
    line-height: 1.4;
    text-align: center;
}

.miracle-btn--primary {
    background: var(--miracle-blue);
    color: var(--miracle-white) !important;
    border-color: var(--miracle-blue);
}

.miracle-btn--primary:hover {
    background: var(--miracle-blue-mid);
    border-color: var(--miracle-blue-mid);
    color: var(--miracle-white) !important;
    text-decoration: none;
}

.miracle-btn--secondary {
    background: var(--miracle-blue-mid);
    color: var(--miracle-white) !important;
    border-color: var(--miracle-blue-mid);
}

.miracle-btn--secondary:hover {
    background: var(--miracle-blue);
    border-color: var(--miracle-blue);
    color: var(--miracle-white) !important;
    text-decoration: none;
}

.miracle-btn--outline {
    background: transparent;
    color: var(--miracle-blue) !important;
    border-color: var(--miracle-blue);
}

.miracle-btn--outline:hover {
    background: var(--miracle-blue-light);
    text-decoration: none;
}

.miracle-btn--claim {
    background: var(--miracle-green);
    color: var(--miracle-white) !important;
    border-color: var(--miracle-green);
}

.miracle-btn--claim:hover {
    background: #219150;
    border-color: #219150;
    color: var(--miracle-white) !important;
    text-decoration: none;
}

.miracle-btn--disabled,
.miracle-btn:disabled {
    background: var(--miracle-gray-light);
    color: var(--miracle-gray-mid) !important;
    border-color: var(--miracle-gray-border);
    cursor: not-allowed;
    opacity: 0.7;
}

.miracle-btn--officer {
    background: transparent;
    color: var(--miracle-gray-mid) !important;
    border-color: var(--miracle-gray-border);
    padding: 8px 12px;
    font-size: 16px;
}

.miracle-btn--officer:hover {
    background: var(--miracle-gray-light);
    color: var(--miracle-blue) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. AGENDA BOARD
   ───────────────────────────────────────────────────────────────────────── */
.miracle-board-header {
    background: var(--miracle-blue);
    color: var(--miracle-white);
    padding: 20px 24px;
    border-radius: var(--miracle-radius);
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.miracle-board-stats {
    display: flex;
    gap: 24px;
}

.miracle-stat {
    font-size: 14px;
    opacity: 0.9;
}

.miracle-stat strong {
    font-size: 22px;
    font-weight: 700;
    display: block;
}

.miracle-user-claim-notice {
    background: rgba(255,255,255,0.15);
    padding: 8px 16px;
    border-radius: var(--miracle-radius);
    font-size: 14px;
}

.miracle-user-claim-notice a {
    color: var(--miracle-white);
    text-decoration: underline;
    margin-left: 8px;
}

/* Filter bar */
.miracle-filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.miracle-filter-btn {
    padding: 6px 16px;
    border: 1px solid var(--miracle-gray-border);
    background: var(--miracle-white);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--miracle-transition);
    color: var(--miracle-gray-dark);
}

.miracle-filter-btn:hover,
.miracle-filter-btn.active {
    background: var(--miracle-blue);
    color: var(--miracle-white);
    border-color: var(--miracle-blue);
}

/* ─────────────────────────────────────────────────────────────────────────
   7. ITEM ROWS
   Used in Agenda Board, Minutes, and Treasury lists.
   ───────────────────────────────────────────────────────────────────────── */
.miracle-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.miracle-item-row {
    background: var(--miracle-white);
    border: 1px solid var(--miracle-gray-border);
    border-radius: var(--miracle-radius);
    padding: 16px 20px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    transition: var(--miracle-transition);
    box-shadow: var(--miracle-shadow);
}

.miracle-item-row:hover {
    border-color: var(--miracle-blue-mid);
    box-shadow: var(--miracle-shadow-md);
}

/* Highlighted row for user's own claimed item */
.miracle-item-row.is-mine {
    border-left: 4px solid var(--miracle-blue);
    background: var(--miracle-blue-light);
}

/* Faded row for presented items */
.miracle-item-row.presented {
    opacity: 0.6;
}

.miracle-item-badges {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 90px;
}

.miracle-item-info {
    min-width: 0; /* Prevents overflow */
}

.miracle-item-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--miracle-gray-dark);
    margin-bottom: 4px;
    line-height: 1.4;
}

.miracle-item-meta {
    font-size: 13px;
    color: var(--miracle-gray-mid);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Committee + item type pills in the meta row — same style, side by side */
.miracle-item-meta .miracle-meta-pill {
    display: inline-block;
    background: var(--miracle-gray-light);
    color: var(--miracle-gray-mid);
    border: 1px solid var(--miracle-gray-border);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Status color variants on the single page */
.miracle-meta-pill--available {
    background: var(--miracle-green-light);
    color: var(--miracle-green);
    border-color: var(--miracle-green);
}

.miracle-meta-pill--claimed {
    background: var(--miracle-yellow-light);
    color: var(--miracle-yellow);
    border-color: var(--miracle-yellow);
}

.miracle-meta-pill--presented {
    background: var(--miracle-blue-light);
    color: var(--miracle-blue-mid);
    border-color: var(--miracle-blue-mid);
}

/* Item title link — inherits title color, underlines on hover only */
.miracle-item-link {
    color: var(--miracle-gray-dark);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}

.miracle-item-link:hover {
    color: var(--miracle-blue);
    text-decoration: underline;
}

.miracle-item-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    min-width: 140px;
}

/* Text labels for non-claimable items */
.miracle-review-label,
.miracle-presented-label,
.miracle-taken-label {
    font-size: 12px;
    color: var(--miracle-gray-mid);
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────
   8. DASHBOARD
   ───────────────────────────────────────────────────────────────────────── */
.miracle-welcome-banner {
    background: linear-gradient(135deg, var(--miracle-blue) 0%, var(--miracle-blue-mid) 100%);
    color: var(--miracle-white);
    padding: 28px 32px;
    border-radius: var(--miracle-radius);
    margin-bottom: 24px;
}

.miracle-welcome-banner h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--miracle-white);
}

.miracle-assembly-date {
    font-size: 14px;
    opacity: 0.85;
    margin: 0;
}

.miracle-assembly-date strong {
    font-weight: 700;
}

/* Claimed item in dashboard */
.miracle-claimed-item {
    padding: 4px 0;
}

.miracle-item-header {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.miracle-claimed-item h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--miracle-blue);
}

/* Progress indicators */
.miracle-progress-indicators {
    display: flex;
    gap: 16px;
    margin: 12px 0 16px 0;
    flex-wrap: wrap;
}

.miracle-indicator {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.miracle-indicator.complete {
    color: var(--miracle-green);
    font-weight: 600;
}

.miracle-indicator.incomplete {
    color: var(--miracle-gray-mid);
}

/* No assignment state */
.miracle-no-assignment {
    text-align: center;
    padding: 24px 0;
}

.miracle-no-assignment p {
    color: var(--miracle-gray-mid);
    margin-bottom: 16px;
}

/* Quick links */
.miracle-quick-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.miracle-quick-links li {
    border-bottom: 1px solid var(--miracle-gray-border);
    padding: 0;
}

.miracle-quick-links li:last-child {
    border-bottom: none;
}

/* Thin rule separating navigation links from account links */
.miracle-quick-links-divider {
    border-bottom: 1px solid var(--miracle-gray-border);
    margin: 4px 0;
    padding: 0 !important;
    height: 0;
}

.miracle-quick-links a {
    display: block;
    padding: 10px 0;
    color: var(--miracle-blue);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: var(--miracle-transition);
}

.miracle-quick-links a:hover {
    color: var(--miracle-gold);
    padding-left: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   9. MY ASSIGNMENT PAGE
   ───────────────────────────────────────────────────────────────────────── */
.miracle-assignment-header {
    margin-bottom: 24px;
}

.miracle-assignment-badges {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.miracle-assignment-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--miracle-blue);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.miracle-assignment-meta {
    font-size: 13px;
    color: var(--miracle-gray-mid);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.miracle-background-content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--miracle-gray-dark);
}

.miracle-background-content p {
    margin-bottom: 16px;
}

/* Notes textarea */
.miracle-notes-instructions {
    font-size: 13px;
    color: var(--miracle-gray-mid);
    margin-bottom: 12px;
    font-style: italic;
}

.miracle-notes-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--miracle-gray-border);
    border-radius: var(--miracle-radius);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 0.2s;
    box-sizing: border-box;
    color: var(--miracle-gray-dark);
    background: var(--miracle-white);
}

.miracle-notes-textarea:focus {
    outline: none;
    border-color: var(--miracle-blue-mid);
    box-shadow: 0 0 0 3px rgba(46, 117, 182, 0.15);
}

.miracle-notes-form,
.miracle-feedback-form {
    margin-top: 8px;
}

.miracle-notes-form button,
.miracle-feedback-form button {
    margin-top: 12px;
}

.miracle-unsaved-indicator {
    font-size: 12px;
    color: var(--miracle-yellow);
    font-style: italic;
}

/* Save notice */
.miracle-save-notice {
    background: var(--miracle-green-light);
    color: var(--miracle-green);
    border: 1px solid var(--miracle-green);
    padding: 10px 16px;
    border-radius: var(--miracle-radius);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* Back link */
.miracle-back-link {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--miracle-gray-border);
}

.miracle-back-link a {
    color: var(--miracle-blue);
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
}

.miracle-back-link a:hover {
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────
   10. MINUTES AND TREASURY
   ───────────────────────────────────────────────────────────────────────── */

/* Treasury balance banner */
.miracle-balance-banner {
    background: linear-gradient(135deg, var(--miracle-blue) 0%, var(--miracle-blue-mid) 100%);
    color: var(--miracle-white);
    padding: 20px 28px;
    border-radius: var(--miracle-radius);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.miracle-balance-label {
    font-size: 14px;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.miracle-balance-amount {
    font-size: 32px;
    font-weight: 700;
}

/* Treasury figures inline */
.miracle-treasury-figures {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 13px;
}

.miracle-treasury-figures .positive { color: var(--miracle-green); font-weight: 600; }
.miracle-treasury-figures .negative { color: var(--miracle-red); font-weight: 600; }
.miracle-treasury-figures .total    { color: var(--miracle-blue); font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────────────
   11. ANNOUNCEMENTS
   ───────────────────────────────────────────────────────────────────────── */
.miracle-announcements {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.miracle-announcement {
    background: var(--miracle-white);
    border: 1px solid var(--miracle-gray-border);
    border-left: 4px solid var(--miracle-blue-mid);
    padding: 16px 20px;
    border-radius: var(--miracle-radius);
}

.miracle-announcement--urgent {
    border-left-color: var(--miracle-red);
    background: var(--miracle-red-light);
}

.miracle-announcement-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--miracle-blue);
}

.miracle-announcement--urgent .miracle-announcement-title {
    color: var(--miracle-red);
}

.miracle-announcement-content {
    font-size: 14px;
    color: var(--miracle-gray-dark);
    line-height: 1.6;
}

.miracle-announcement-content p:last-child {
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   12. MESSAGES
   The floating success/error message shown after AJAX actions.
   ───────────────────────────────────────────────────────────────────────── */
.miracle-message {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 14px 28px;
    border-radius: var(--miracle-radius);
    font-size: 15px;
    font-weight: 600;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    max-width: 480px;
    text-align: center;
    width: 90%;
}

.miracle-message--success {
    background: var(--miracle-green);
    color: var(--miracle-white);
}

.miracle-message--error {
    background: var(--miracle-red);
    color: var(--miracle-white);
}

/* ─────────────────────────────────────────────────────────────────────────
   13. EMPTY STATES AND UTILITY
   ───────────────────────────────────────────────────────────────────────── */
.miracle-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--miracle-gray-mid);
    background: var(--miracle-gray-light);
    border-radius: var(--miracle-radius);
    border: 1px dashed var(--miracle-gray-border);
}

.miracle-empty-state p {
    font-size: 15px;
    margin: 0;
}

/* Login prompt */
.miracle-login-prompt {
    padding: 48px 24px;
    text-align: center;
}

.miracle-login-prompt .miracle-card {
    max-width: 400px;
    margin: 0 auto;
}

.miracle-login-prompt h3 {
    color: var(--miracle-blue);
}

/* ─────────────────────────────────────────────────────────────────────────
   14. RESPONSIVE
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    .miracle-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .miracle-board-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .miracle-board-stats {
        gap: 16px;
    }

    .miracle-item-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .miracle-item-badges {
        flex-direction: row;
        flex-wrap: wrap;
        min-width: unset;
    }

    .miracle-item-actions {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        min-width: unset;
    }

    .miracle-balance-banner {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .miracle-balance-amount {
        font-size: 28px;
    }

    .miracle-filter-bar {
        gap: 6px;
    }

    .miracle-filter-btn {
        font-size: 12px;
        padding: 5px 12px;
    }

    .miracle-welcome-banner {
        padding: 20px;
    }

    .miracle-welcome-banner h2 {
        font-size: 20px;
    }

    .miracle-treasury-figures {
        gap: 10px;
    }

    .miracle-message {
        bottom: 12px;
        font-size: 14px;
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {

    .miracle-wrap {
        padding: 0 12px;
    }

    .miracle-card {
        padding: 16px;
    }

    .miracle-item-row {
        padding: 12px;
    }

    .miracle-btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    .miracle-assignment-header h2 {
        font-size: 18px;
    }
    .miracle-assignment-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--miracle-gray-border);
    flex-wrap: wrap;
}
}
/* ─────────────────────────────────────────────────────────────────────────
   15. SINGLE AGENDA ITEM PAGE
   ───────────────────────────────────────────────────────────────────────── */

.miracle-single-item {
    padding-top: 16px;
    padding-bottom: 48px;
}

.miracle-single-back {
    margin-bottom: 20px;
}

.miracle-single-back a {
    font-size: 14px;
    color: var(--miracle-blue);
    text-decoration: none;
    font-weight: 500;
}

.miracle-single-back a:hover {
    text-decoration: underline;
}

.miracle-single-header {
    margin-bottom: 28px;
}

/* All pills identical — border, background, font */
.miracle-single-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 1rem;
    margin-bottom: 20px;
}

.miracle-single-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--miracle-blue);
    line-height: 1.3;
    margin: 0 0 10px 0;
}

.miracle-single-content {
    font-size: 15px;
    line-height: 1.75;
    color: var(--miracle-gray-dark);
}

.miracle-single-content p {
    margin-bottom: 16px;
}

.miracle-single-content p:last-child {
    margin-bottom: 0;
}

.miracle-single-content h2,
.miracle-single-content h3 {
    color: var(--miracle-blue);
    margin: 24px 0 10px 0;
}

.miracle-single-content ul,
.miracle-single-content ol {
    padding-left: 22px;
    margin-bottom: 16px;
}

.miracle-single-content li {
    margin-bottom: 8px;
}

/* Actions section */
.miracle-single-actions {
    margin-top: 8px;
}

/* Buttons on one line */
.miracle-single-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

/* Disclaimer / note text below the buttons */
.miracle-single-claim-note {
    font-size: 13px;
    color: var(--miracle-gray-mid);
    margin: 0;
    line-height: 1.5;
}

.miracle-single-claim-note a {
    color: var(--miracle-blue);
}

.miracle-single-review-note,
.miracle-single-taken-note,
.miracle-single-presented-note {
    background: var(--miracle-gray-light);
    border-left: 4px solid var(--miracle-gray-border);
    padding: 14px 18px;
    border-radius: var(--miracle-radius);
    font-size: 14px;
    color: var(--miracle-gray-mid);
    margin-top: 12px;
}

.miracle-single-review-note strong {
    display: block;
    color: var(--miracle-gray-dark);
    margin-bottom: 4px;
}

.miracle-single-review-note p {
    margin: 0;
}

/* Item title link on the board */
.miracle-item-link {
    color: var(--miracle-gray-dark);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}

.miracle-item-link:hover {
    color: var(--miracle-blue);
    text-decoration: underline;
}
/* Minutes & GSR Report expand panels */
.miracle-minutes-detail,
.miracle-gsr-detail {
    background: #f8fbfe;
    border: 1px solid #D6E4F0;
    border-top: none;
    border-radius: 0 0 6px 6px;
    margin-bottom: 12px;
}
.miracle-minutes-detail-inner {
    padding: 20px 24px;
}
.miracle-minutes-detail-inner h4 {
    color: #1B4F8A;
    border-bottom: 2px solid #D6E4F0;
    padding-bottom: 6px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.miracle-motion-item {
    padding: 10px 14px;
    border-left: 3px solid #D6E4F0;
    margin-bottom: 8px;
    background: #fff;
    border-radius: 0 4px 4px 0;
}
.miracle-motion-title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}
.miracle-motion-outcome {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 400;
}
.miracle-motion-vote {
    margin-left: 6px;
    font-size: 12px;
    color: #888;
}
.miracle-motion-meta {
    font-size: 12px;
    color: #888;
    margin-top: 3px;
    font-style: italic;
}
.miracle-motion-notes {
    font-size: 13px;
    color: #555;
    margin-top: 6px;
    line-height: 1.6;
}
/* Motion pills on minutes list */
.miracle-minutes-motions {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.miracle-motion-pill {
    display: inline-block;
    font-size: 11px;
    background: #eef4ff;
    border: 1px solid #c3d9f0;
    color: #1B4F8A;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.miracle-motion-pill--more {
    background: #f0f0f0;
    border-color: #ddd;
    color: #888;
}