/* ==========================================================================
   Central ICT Club Bangladesh
   Olympiad styles. Covers the public registration form, the participant status
   card, and the small extras the admin panel needs on top of the shared table
   and toolbar. Everything here leans on the tokens in style.css, so colours,
   radii, and shadows stay in step with the rest of the site.
   ========================================================================== */

/* ----- Public: the registration card and its field grid ----- */
.olym-wrap {
    max-width: 760px;
    margin: 0 auto;
}

.olym-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    padding: clamp(22px, 4vw, 40px);
}

/* a small banner that names the olympiad the person is signing up for */
.olym-event {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--grad-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 18px;
    margin-bottom: 24px;
}

.olym-event__icon {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--blue-600);
    box-shadow: var(--sh-sm);
}

.olym-event__icon svg { width: 22px; height: 22px; }
.olym-event__label { font-size: 13px; color: var(--slate-500); }
.olym-event__name { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

/* two columns on a roomy screen, one column once it gets tight */
.olym-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
}

.olym-grid .field--wide { grid-column: 1 / -1; }

@media (max-width: 640px) {
    .olym-grid { grid-template-columns: 1fr; }
}

/* the success panel that shows the assigned olympiad id */
.olym-result {
    text-align: center;
    padding: clamp(24px, 5vw, 44px) clamp(18px, 4vw, 32px);
}

.olym-result__check {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: rgba(22, 163, 93, 0.12);
    color: var(--green-600);
}

.olym-result__check svg { width: 34px; height: 34px; }
.olym-result__title { font-family: var(--font-display); font-size: clamp(22px, 4vw, 28px); color: var(--ink); margin: 0 0 6px; }
.olym-result__lead { color: var(--slate-500); margin: 0 0 22px; }

.olym-id {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 34px;
    border-radius: var(--r-md);
    background: var(--grad-brand);
    color: var(--white);
    box-shadow: var(--sh-green);
}

.olym-id__label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.olym-id__value { font-family: var(--font-display); font-size: clamp(28px, 6vw, 40px); font-weight: 800; letter-spacing: 0.04em; }
.olym-result__note { color: var(--slate-500); font-size: 14px; margin: 22px 0 0; }
.olym-result__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }

/* ----- Public: the status lookup result ----- */
.olym-status-card {
    margin-top: 26px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    overflow: hidden;
}

.olym-status-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 22px clamp(18px, 4vw, 30px);
    background: var(--grad-soft);
    border-bottom: 1px solid var(--line);
}

.olym-status-card__name { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); }
.olym-status-card__id { color: var(--blue-600); font-weight: 600; font-size: 14px; }

.olym-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
}

.olym-rows__item { background: var(--white); padding: 16px clamp(18px, 4vw, 30px); }
.olym-rows__label { display: block; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate-400); margin-bottom: 4px; }
.olym-rows__value { color: var(--ink); font-weight: 500; }

/* the certificate cell stacks the download button over its number */
.olym-rows__value--cert { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.olym-cert-btn { padding: 8px 16px; font-size: 14px; line-height: 1.2; }
.olym-cert-no { font-size: 12px; letter-spacing: 0.04em; color: var(--slate-400); }

@media (max-width: 560px) {
    .olym-rows { grid-template-columns: 1fr; }
    .olym-cert-btn { width: 100%; }
}

.olym-status-card__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 20px clamp(18px, 4vw, 30px);
    border-top: 1px solid var(--line);
}

.olym-status-card__hint { color: var(--slate-500); font-size: 14px; margin: 0; }

/* ----- Admin: summary chips reuse the stat card, this is only the spacing ----- */
.olym-admin-summary { margin-bottom: 22px; }

/* ----- Admin: a plain accessible modal for add and for marking payment ----- */
.olym-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 26, 51, 0.55);
    z-index: 60;
}

.olym-modal.is-open { display: flex; }

.olym-modal__panel {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--white);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    padding: clamp(20px, 4vw, 32px);
}

.olym-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.olym-modal__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); }
.olym-modal__sub { color: var(--slate-500); font-size: 14px; margin-top: 4px; }

.olym-modal__close {
    flex: none;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--slate-500);
    cursor: pointer;
}

.olym-modal__close:hover { color: var(--ink); border-color: var(--slate-400); }
.olym-modal__close svg { width: 18px; height: 18px; }

.olym-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.olym-modal__grid .field--wide { grid-column: 1 / -1; }

/* a plain checkbox row for the bulk certificate options */
.olym-check { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--ink); font-size: 14px; }
.olym-check input { width: 16px; height: 16px; flex: none; cursor: pointer; }

@media (max-width: 520px) {
    .olym-modal__grid { grid-template-columns: 1fr; }
}

.olym-modal__foot {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 22px;
}

.olym-modal__status { margin: 14px 0 0; font-size: 14px; min-height: 18px; }
.olym-modal__status.is-error { color: #b42318; }
.olym-modal__status.is-ok { color: var(--green-600); }

/* ----- Public: language switch (Bengali / English) ----- */
.olym-langbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 18px;
}

.olym-lang {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--white);
    box-shadow: var(--sh-sm);
}

.olym-lang button {
    border: 0;
    background: transparent;
    padding: 7px 16px;
    border-radius: var(--r-pill);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--slate-500);
    cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.olym-lang button:hover { color: var(--ink); }
.olym-lang button.is-active { background: var(--grad-brand); color: var(--white); }

/* ----------------------------------------------------------------------------
   Olympiad landing grid. One card per olympiad event, each opening its own
   roster, so two olympiads never share a single table. The card echoes the
   summary stats so an organiser reads the size of an olympiad before drilling
   in. Cards and back link sit on the light admin canvas.
   ---------------------------------------------------------------------------- */
.olym-event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
}
.olym-event-state {
    grid-column: 1 / -1;
    padding: 40px 0;
    text-align: center;
    color: #5b6472;
    font-size: 15px;
}
.olym-event-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.olym-event-card:hover {
    border-color: var(--green-400);
    box-shadow: 0 14px 30px rgba(11, 35, 66, 0.08);
    transform: translateY(-2px);
}
.olym-event-card__title {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
    line-height: 1.25;
}
.olym-event-card__meta {
    font-size: 13px;
    color: #6b7480;
    margin: 0 0 18px;
}
.olym-event-card__stats {
    display: flex;
    gap: 20px;
    margin-bottom: 18px;
}
.olym-event-card__num {
    font-size: 22px;
    font-weight: 700;
    color: var(--green-600);
    line-height: 1.1;
}
.olym-event-card__label {
    display: block;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a929c;
    margin-top: 3px;
}
.olym-event-card__link {
    font-size: 14px;
    font-weight: 600;
    color: var(--green-600);
}
.olym-event-card:hover .olym-event-card__link {
    color: var(--green-500);
}

.olym-back {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--green-600);
    text-decoration: none;
    margin-bottom: 10px;
}
.olym-back:hover { color: var(--green-500); }

@media (max-width: 520px) {
    .olym-event-grid { grid-template-columns: 1fr; }
    .olym-event-card__stats { gap: 16px; }
}

/* ===== Certificate tab inside one olympiad ===== */
/* The two views, roster and certificates, sit on a simple underline tab bar */
.olym-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--line);
    margin: 4px 0 26px;
}

.olym-tab {
    appearance: none;
    border: 0;
    background: none;
    padding: 12px 18px;
    margin-bottom: -1px;
    font: 600 15px/1 var(--font-display, inherit);
    color: #5b6472;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .18s var(--ease, ease), border-color .18s var(--ease, ease);
}

.olym-tab:hover { color: var(--ink); }

.olym-tab.is-active {
    color: var(--green-600);
    border-bottom-color: var(--green-600);
}

/* The generate block */
.olym-cert-panel { margin-bottom: 26px; }

.olym-cert-note {
    margin: 0 0 22px;
    color: #5b6472;
    font-size: 14px;
}

.olym-cert-sub {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}

/* Inputs sit in a grid that folds down on narrow screens */
.olym-cert-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.olym-cert-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.olym-cert-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.olym-cert-msg {
    font-size: 14px;
    font-weight: 600;
    color: #5b6472;
}

.olym-cert-msg.is-ok { color: var(--green-600); }
.olym-cert-msg.is-bad { color: #c0392b; }

.olym-cert-hint {
    margin: 12px 0 0;
    color: #7a828f;
    font-size: 13px;
    line-height: 1.5;
}

.olym-cert-rule {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 26px 0;
}

.olym-cert-listtitle {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}

/* Row actions in the certificate table */
.olym-cert-act {
    appearance: none;
    border: 0;
    background: none;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--green-600);
    transition: opacity .15s var(--ease, ease);
}

.olym-cert-act:hover { opacity: .7; }
.olym-cert-act--bad { color: #c0392b; }
.olym-cert-act--muted { color: #7a828f; }

.olym-cert-type {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    background: var(--mist, #eef3f9);
    color: #45506a;
}

.olym-cert-type--achievement { background: #fff3d6; color: #8a6400; }
.olym-cert-type--volunteer { background: #e4f3ff; color: #1f6fa8; }

/* A revoked certificate is dimmed so it reads as inactive at a glance */
.olym-cert-gone { color: #9aa2ae; }
.olym-cert-gone .olym-cert-type { opacity: .6; }

@media (max-width: 720px) {
    .olym-cert-grid,
    .olym-cert-grid--two { grid-template-columns: 1fr; }
}

/* ----- Admin: clickable participant name in the roster ----- */
.olym-name-btn {
    display: block;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.olym-name-btn:hover .table__name { text-decoration: underline; color: var(--blue-600); }
.olym-name-btn:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; border-radius: var(--r-sm); }

/* the status cell carries the payment pill and the approval pill side by side */
.olym-status-cell { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ----- Admin: participant detail popup ----- */
.olym-detail {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.55);
}
.olym-detail__card {
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 36px);
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}
.olym-detail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px clamp(16px, 4vw, 24px);
    background: var(--grad-soft);
    border-bottom: 1px solid var(--line);
}
.olym-detail__title { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); margin: 0; word-break: break-word; }
.olym-detail__close {
    flex: none;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--slate-500);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.olym-detail__close:hover { color: var(--ink); }
.olym-detail__body { padding: 8px clamp(16px, 4vw, 24px); overflow-y: auto; }
.olym-detail__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.olym-detail__row:last-child { border-bottom: 0; }
.olym-detail__label { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate-400); }
.olym-detail__value { color: var(--ink); font-weight: 500; text-align: right; word-break: break-word; }
.olym-detail__foot {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px clamp(16px, 4vw, 24px);
    border-top: 1px solid var(--line);
}
.olym-detail__note { color: var(--slate-500); font-size: 14px; margin: 0; }
.olym-detail__loading { color: var(--slate-500); padding: 14px 0; margin: 0; }
.olym-detail__error { color: #b42318; padding: 14px 0; margin: 0; }

@media (max-width: 400px) {
    .olym-detail__row { justify-content: flex-start; }
    .olym-detail__value { text-align: left; }
    .olym-detail__foot .btn { width: 100%; text-align: center; }
}