/* Minimal panel styling (ADR-0012: vanilla HTML/CSS, no JS framework). Plain, clean,
   readable on a phone. No external assets, no CDN. */
:root {
    --Ink: #1c2430;
    --Muted: #5b6674;
    --Line: #d9dee5;
    --Accent: #128c7e;
    --Bg: #f4f6f8;
    --Panel: #ffffff;
    --Error: #b3261e;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: var(--Ink);
    background: var(--Bg);
    line-height: 1.5;
}

.Panel {
    max-width: 34rem;
    margin: 0 auto;
    padding: 2rem 1.25rem;
}

.PanelHeader {
    border-bottom: 1px solid var(--Line);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.PanelHeader h1 { font-size: 1.25rem; margin: 0; }

.Session {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--Muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.Notice { color: var(--Muted); }
.Error { color: var(--Error); font-weight: 600; }

.Form { display: grid; gap: 0.5rem; max-width: 22rem; }
.Form label { font-weight: 600; font-size: 0.9rem; }
.Form input {
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--Line);
    border-radius: 0.4rem;
    font-size: 1rem;
}
.Form button {
    margin-top: 0.5rem;
    padding: 0.6rem 0.9rem;
    border: 0;
    border-radius: 0.4rem;
    background: var(--Accent);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}

.RaffleList { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.RaffleItem {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.75rem 1rem;
    background: var(--Panel);
    border: 1px solid var(--Line);
    border-radius: 0.5rem;
}
.RaffleName { font-weight: 600; }
.RaffleId { color: var(--Muted); font-size: 0.85rem; }
.RaffleLink {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

a { color: var(--Accent); }

/* Raffle create/edit form (WP-68). Vanilla HTML/CSS only (ADR-0012). */
.Action {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    background: var(--Accent);
    color: #fff;
    border-radius: 0.4rem;
    text-decoration: none;
}
.ReadOnly { color: var(--Muted); }
.Form textarea {
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--Line);
    border-radius: 0.4rem;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
}
.Tiers {
    border: 1px solid var(--Line);
    border-radius: 0.5rem;
    padding: 0.75rem;
    display: grid;
    gap: 0.5rem;
}
.Tiers legend { font-weight: 600; font-size: 0.9rem; padding: 0 0.4rem; }
.TierRow { display: flex; gap: 0.5rem; }
.TierRow input { flex: 1; min-width: 0; }
.MediaGallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.MediaItem { margin: 0; }
.MediaItem img {
    max-width: 8rem;
    height: auto;
    border: 1px solid var(--Line);
    border-radius: 0.4rem;
    display: block;
}

/* Link to the progress view from the home raffle list (WP-69). */
.RaffleProgressLink {
    margin-left: 1rem;
    white-space: nowrap;
    font-size: 0.9rem;
}

/* Raffle progress view (WP-69): read-only live counts + colored number grid. Vanilla CSS grid
   (ADR-0012), responsive, distinct colors per state, holder name truncated per cell. */
.ProgressSummary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.Metric {
    flex: 1;
    min-width: 6rem;
    padding: 0.75rem;
    background: var(--Panel);
    border: 1px solid var(--Line);
    border-radius: 0.5rem;
    text-align: center;
}
.MetricValue { display: block; font-size: 1.4rem; font-weight: 700; }
.MetricLabel { display: block; color: var(--Muted); font-size: 0.8rem; }

.Grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
    gap: 0.4rem;
}
.Cell {
    padding: 0.4rem 0.2rem;
    border: 1px solid var(--Line);
    border-radius: 0.4rem;
    text-align: center;
    overflow: hidden;
}
.CellNumber { display: block; font-weight: 700; font-size: 0.95rem; }
.CellHolder {
    display: block;
    font-size: 0.7rem;
    color: var(--Muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* AVAILABLE: plain panel. RESERVED: warm fill so the grid reads at a glance. PAID (WP-91): green
   (settled); PAGADO-CON-BONO: blue (paid with the immediate-payment bonus). Each rule is added
   without touching the others. */
.Cell--available { background: var(--Panel); }
.Cell--reserved { background: #fdecea; border-color: #f3b0a8; }
.Cell--reserved .CellHolder { color: #8a2b21; }
.Cell--paid { background: #e6f4ea; border-color: #9fd3ab; }
.Cell--paid .CellHolder { color: #1f6b34; }
.Cell--paid-with-bonus { background: #dcefff; border-color: #9cc7f0; }
.Cell--paid-with-bonus .CellHolder { color: #1c5aa0; }