/* The events pages (Pages/Events, Components/Events): the guild's dungeons, raids and PvP nights, kept by the Discord
   bot. They lean on the game pages' pieces (pages.css: .wow-stats, .wow-kind, .wow-status, .wow-bar, .wow-history) and
   add the event cards, the roster grouped by class in WoW's class colours, and the roles' colours. */

.wow-status[data-status="set"] { color: #7ef0a3; border-color: rgba(60,207,110,.55); }

/* ---- The list ---- */
.ev-section { margin-bottom: 1.4rem; scroll-margin-top: calc(var(--topbar-h, 56px) + 1rem); }
.ev-none { margin: 0; font-size: .9rem; }
.ev-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; }
.ev-card { display: grid; gap: .45rem; align-content: start; text-decoration: none; color: inherit; border-top: 3px solid var(--kind, var(--accent));
           transition: border-color .15s, transform .15s; }
.ev-card:hover { border-color: var(--accent); border-top-color: var(--kind, var(--accent)); transform: translateY(-1px); }
.ev-card.is-over { opacity: .78; }
.ev-card.is-over:hover { opacity: 1; }
.ev-card-top { display: flex; justify-content: space-between; gap: .5rem; align-items: center; }
.ev-card-name { display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; }
.ev-name { font-family: var(--wow-heading, var(--display)); font-size: 1.12rem; font-weight: 700; color: var(--wow-gold-text, var(--gold)); line-height: 1.2; }
.ev-when { display: flex; align-items: center; gap: .35rem; color: var(--text-2); font-size: .88rem; }
.ev-fill { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: center; font-size: .85rem; color: var(--muted); }
.ev-fill b { color: var(--text); font-variant-numeric: tabular-nums; }
.ev-roles { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; font-size: .82rem; }
.ev-counts { display: inline-flex; flex-wrap: wrap; gap: .25rem .7rem; }
.ev-role { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; white-space: nowrap; }
.ev-role[data-role="tank"] { color: var(--tank); }
.ev-role[data-role="healer"] { color: var(--healer); }
.ev-role[data-role="dps"] { color: var(--dps); }
.ev-waiting { color: #ffc861; }
.ev-card-foot { display: flex; justify-content: space-between; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .84rem; }
.ev-card-foot b { color: var(--text-2); }
.ev-mine { color: #7ef0a3; border-color: rgba(60,207,110,.55); background: rgba(60,207,110,.1); }
.ev-mine[data-signup="pending"] { color: #ffc861; border-color: rgba(255,200,97,.5); background: rgba(255,200,97,.08); }
.ev-link-tip { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1.2rem; }
.ev-link-tip p { margin: 0; }

/* ---- One event ---- */
.ev-facts .wow-stat b { font-size: 1.15rem; overflow-wrap: anywhere; }
.ev-facts .wow-bar { margin-top: .35rem; }
.ev-stat[data-role="tank"] b { color: var(--tank); }
.ev-stat[data-role="healer"] b { color: var(--healer); }
.ev-stat[data-role="dps"] b { color: var(--dps); }
.ev-grid { margin-top: .2rem; }
.ev-grid .wow-stack { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.ev-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .7rem; }
.ev-class { border: 1px solid color-mix(in srgb, var(--class) 40%, var(--line)); border-left: 4px solid var(--class); border-radius: var(--radius-sm, 8px);
            background: color-mix(in srgb, var(--class) 7%, transparent); padding: .55rem .7rem; }
.ev-class h3 { margin: 0 0 .35rem; font-size: .95rem; color: var(--class); display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
               text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.ev-class h3 small { color: var(--muted); font-weight: 600; }
.ev-class ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.ev-class li { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; font-size: .9rem; }
.ev-player { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ev-class .ev-player { color: var(--text); }
.ev-timeline .wow-history li > span { display: inline-flex; gap: .4rem; align-items: baseline; }
.ev-timeline li[data-kind="accepted"] .icon, .ev-timeline li[data-kind="assembled"] .icon { color: #7ef0a3; }
.ev-timeline li[data-kind="declined"] .icon, .ev-timeline li[data-kind="cancelled"] .icon, .ev-timeline li[data-kind="removed"] .icon { color: #ff8a7a; }
.ev-timeline li[data-kind="done"] .icon { color: var(--wow-gold-text, var(--gold)); }
.ev-mine-line { margin: 0 0 .5rem; padding: .5rem .7rem; border-left: 4px solid var(--class, var(--accent)); border-radius: 4px; background: rgba(0,0,0,.2); font-weight: 600; }
.ev-mine-line[data-signup="declined"], .ev-mine-line[data-signup="withdrawn"], .ev-mine-line[data-signup="removed"] { color: var(--muted); font-weight: 500; }
.ev-waiting-people { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .35rem; }
.ev-waiting-people li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .6rem; align-items: baseline; padding: .3rem .5rem;
                        border-left: 3px solid var(--class); background: rgba(0,0,0,.18); border-radius: 4px; font-size: .88rem; }
.ev-waiting-people time { color: var(--muted); font-size: .78rem; }
.ev-class-name { color: var(--class); font-weight: 600; }

@media (max-width: 640px) {
    .ev-list { grid-template-columns: minmax(0, 1fr); }
    .ev-classes { grid-template-columns: minmax(0, 1fr); }
    .ev-waiting-people li { grid-template-columns: minmax(0, 1fr) auto; }
    .ev-waiting-people time { display: none; }
}

/* On a phone, one column: what's yours (and who's waiting) before the roster, the roster before the timeline. */
@media (max-width: 900px) {
    .ev-grid { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
    .ev-grid .wow-stack { display: contents; }
    .ev-yours { order: 1; }
    .ev-waiting-list { order: 2; }
    .ev-roster { order: 3; }
    .ev-timeline { order: 4; }
    .ev-how { order: 5; }
}