/* Events — themed to match item_detail.css + elections timeline */
/* فرض: فونت‌ها از قبل global لود می‌شوند. رنگ‌ها از item_detail.css الهام گرفته‌اند. */
@font-face {
    font-family: 'Yekan';
    src: url(/static/fonts/YekanNewFaceD2-Regular.ttf) format('truetype');

}

@font-face {
    font-family: 'Yekan-bold';
    src: url(/static/fonts/YekanNewFaceD2-Bold.ttf) format('truetype');
}

:root {
    --gold-color: #ffc20a;
    --outbox-color: #141f23;
    --inbox-color: #031014;
    --textbox-color: #273438;
    --imagebox-color: #031014;
    --plus-color: #22c55e;
    --danger-color: #83153b;
    --warn-color: #ffd36c;
    --active-color: #3b82f6;
    --link-color: #a5ffe9;
    --muted: #9fb1b8;
    --border: rgba(255, 255, 255, .08);

    /* Timeline geometry (فشرده برای 500px) */
    --tl-line-w: 2px;
    --tl-anchor-y: 1.15rem;
    --tl-center-bias: -1px;
    --tl-dot-bias: 2px;
    --tl-dot: 16px;
    --tl-branch: 16px; /* کوتاه‌تر از نسخه انتخابات */
    --tl-gap: 0px;
    --tl-side-pad: 4px; /* جمع‌وجور برای ظرف 500px */
}

:root {
    --app-bg: #0c1518;
    --outbox-color: #0f1b1f; /* card/page bg */
    --inbox-color: #0b1214; /* inner card bg */
    --imagebox-color: #0a1013;
    --border: rgba(255, 255, 255, .08);

    --text: #e6fbf6;
    --text-muted: #cfe7e3;


}

html,
body {
    font-family: 'Yekan', sans-serif;
    margin: 0;
    padding: 0;
    /*background: var(--outbox-color);*/
    color: aliceblue;
    scroll-behavior: smooth;

}

.events-page .page-container {
    width: 100%;
    max-width: 500px;
    margin: 16px auto 40px;
    direction: rtl;
}

/* === Event scope badge (سراسری/باشگاهی) === */
.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.2;
    vertical-align: middle;
    margin-inline-start: .5rem;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
}

.badge--scope {
    /* می‌توانی رنگ ویژه بدهی؛ فعلاً مینیمال تا با تم موجود ست شود */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
}


/* پوسته کلی */
.events-wrap {
    width: 100%;
    background: var(--outbox-color);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: .9rem 1rem;
}

.e-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .8rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: .5rem
}

.e-title {
    font-size: 1.35rem;
    color: #e6fbf6;
    margin: 0
}

.badge {
    background: rgba(165, 255, 233, .08);
    border: 1px solid rgba(165, 255, 233, .25);
    padding: .2rem .5rem;
    border-radius: .5rem;
    font-size: .85rem;
    color: #cfe7ee
}

.badge.warn {
    background: rgba(255, 211, 108, .1);
    border-color: rgba(255, 211, 108, .45);
    color: var(--warn-color)
}

.meta-box {
    margin: .8rem 0 1rem;
    padding: .8rem 1rem;
    background: var(--inbox-color);
    border: 1px solid var(--border);
    border-radius: .9rem;
    display: grid;
    gap: .6rem
}

.meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    background: #071b23;
    border: 1px solid var(--border);
    border-radius: .6rem;
    padding: .5rem .6rem
}

.meta-row .label {
    color: var(--muted);
    font-size: .9rem
}

.meta-row .value {
    font-weight: 700;
    color: #e6fbf6
}

/* دکمه‌ها */
.btn {
    border-radius: .6rem;
    padding: .45rem .75rem;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.btn-primary {
    background: var(--plus-color);
    color: #071316
}

.btn-ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--link-color)
}

.btn-warn {
    background: rgba(255, 211, 108, .14);
    border-color: rgba(255, 211, 108, .45);
    color: var(--warn-color)
}

.btn-danger {
    background: var(--danger-color);
    color: #fff
}

/* ====== Alternating Vertical Timeline (از elections.css، فشرده‌سازی شده برای 500px) ====== */
.e-timeline.e-tl-alt {
    position: relative;
    margin: 1.2rem 0 1.6rem;
    padding: 0 var(--tl-side-pad);
    border: none;
}

/* خط مرکزی */
.e-timeline.e-tl-alt::before {
    content: "";
    position: absolute;
    right: calc(50% + var(--tl-center-bias));
    top: 0;
    bottom: 0;
    width: var(--tl-line-w);
    z-index: 1;
    background: var(--border);
}

/* کارت هر گام */
.e-timeline.e-tl-alt .tl-step {
    position: relative;
    width: calc(50% - (var(--tl-gap) + var(--tl-branch)));
    margin: 0 0 1rem;
    background: var(--outbox-color);
    border: 1px solid var(--border);
    border-radius: .8rem;
    padding: .7rem .8rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

/* راست/چپ alternating */
.e-timeline.e-tl-alt .tl-step:nth-child(odd) {
    margin-left: auto;
    text-align: right;
}

.e-timeline.e-tl-alt .tl-step:nth-child(even) {
    margin-right: auto;
    text-align: left;
}

/* چراغ و شاخه اتصال */
.e-timeline.e-tl-alt .tl-step::before {
    content: "";
    position: absolute;
    top: .6rem;
    width: var(--tl-dot);
    height: var(--tl-dot);
    border-radius: 50%;
    background: #2d3741;
    border: 2px solid #5b6b70;
    transition: all .25s ease;
    z-index: 2;
}

.e-timeline.e-tl-alt .tl-step:nth-child(odd)::before {
    right: calc(100% + var(--tl-branch) - (var(--tl-dot) / 2 - var(--tl-line-w) / 2) - var(--tl-dot-bias));
}

.e-timeline.e-tl-alt .tl-step:nth-child(odd)::after {
    content: "";
    position: absolute;
    top: var(--tl-anchor-y);
    right: 100%;
    width: var(--tl-branch);
    height: var(--tl-line-w);
    background: var(--border);
}

.e-timeline.e-tl-alt .tl-step:nth-child(even)::before {
    left: calc(100% + var(--tl-branch) - (var(--tl-dot) / 2 - var(--tl-line-w) / 2) - var(--tl-dot-bias));
}

.e-timeline.e-tl-alt .tl-step:nth-child(even)::after {
    content: "";
    position: absolute;
    top: var(--tl-anchor-y);
    left: 100%;
    width: var(--tl-branch);
    height: var(--tl-line-w);
    background: var(--border);
}

/* حالت‌ها — رنگ چراغ + قاب کارت + رنگ شاخه */
.e-timeline.e-tl-alt .tl-step.is-done::before {
    background: var(--plus-color);
    border-color: var(--plus-color);
}

.e-timeline.e-tl-alt .tl-step.is-current:not(.is-await)::before {
    background: var(--active-color);
    border-color: var(--active-color);
    --pulse-color: var(--active-color);
    animation: tlPulseColor 1.6s ease-in-out infinite;
}

.e-timeline.e-tl-alt .tl-step.is-next::before,
.e-timeline.e-tl-alt .tl-step.is-await::before {
    background: var(--warn-color);
    border-color: var(--warn-color);
    --pulse-color: var(--warn-color);
    animation: tlPulseColor 1.8s ease-in-out infinite;
}

.e-timeline.e-tl-alt .tl-step.is-locked::before {
    background: #243036;
    border-color: #54656b;
}

/* قاب کارت‌ها به تفکیک حالت */
.e-timeline.e-tl-alt .tl-step {
    border: 1px solid var(--border);
}

.e-timeline.e-tl-alt .tl-step.is-done {
    border-color: rgba(34, 197, 94, .55);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, .12);
}

.e-timeline.e-tl-alt .tl-step.is-current:not(.is-await) {
    border-color: rgba(59, 130, 246, .55);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .12);
}

.e-timeline.e-tl-alt .tl-step.is-next,
.e-timeline.e-tl-alt .tl-step.is-await {
    border-color: rgba(255, 211, 108, .55);
    box-shadow: 0 0 0 2px rgba(255, 211, 108, .12);
}

.e-timeline.e-tl-alt .tl-step.is-locked {
    border-color: rgba(255, 255, 255, .08);
    box-shadow: none;
}

/* رنگ شاخه بر اساس حالت */
.e-timeline.e-tl-alt .tl-step.is-done::after {
    background: rgba(34, 197, 94, .55);
}

.e-timeline.e-tl-alt .tl-step.is-current:not(.is-await)::after {
    background: rgba(59, 130, 246, .55);
}

.e-timeline.e-tl-alt .tl-step.is-next::after,
.e-timeline.e-tl-alt .tl-step.is-await::after {
    background: rgba(255, 211, 108, .55);
}

/* انیمیشن پالس */
@keyframes tlPulseColor {
    0%, 100% {
        box-shadow: 0 0 6px var(--pulse-color);
    }
    50% {
        box-shadow: 0 0 14px var(--pulse-color);
    }
}

/* داخل کارت (summary, kpi, meta, actions) */
.e-timeline.e-tl-alt .tl-step > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
    margin: 0 0 .35rem;
}

.e-timeline.e-tl-alt .tl-step > summary::-webkit-details-marker {
    display: none;
}

.step-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: .4rem;
    font-weight: 700;
    color: #0a1a1f;
    background: #a3f1d8;
}

.kpi {
    margin-inline-start: .4rem;
    color: var(--muted);
    font-size: .85rem;
}

.tl-meta {
    color: var(--muted);
    font-size: .9rem;
}

/* پیام کوچک/اخطار + دکمه‌ها داخل کارت */
.tl-note {
    color: var(--muted);
    font-size: .9rem;
    margin-top: .35rem;
}

.tl-alert.is-error {
    background: #3b1021;
    color: #ffd6e7;
    border: 1px solid rgba(255, 255, 255, .08);
    padding: .4rem .55rem;
    border-radius: .5rem;
    margin-top: .4rem;
}

.tl-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .45rem;
    margin-top: .6rem;
}


/* === Events: Dark Inputs (sitewide) === */
.events-page input[type="text"],
.events-page input[type="number"],
.events-page input[type="email"],
.events-page input[type="tel"],
.events-page input[type="password"],
.events-page input[type="search"],
.events-page input[type="url"],
.events-page input[type="datetime-local"],
.events-page input[type="date"],
.events-page textarea,
.events-page select {
    background: var(--outbox-color);
    font-family: Yekan, sans-serif;
    color: #e6f1f3;
    border: 1px solid #22333a;
    border-radius: 10px;
}

.events-page input::placeholder,
.events-page textarea::placeholder {
    color: #8aa0a9;
    opacity: 1;
}

.events-page input:focus,
.events-page textarea:focus,
.events-page select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
}

/* تایمر */
.e-timer {
    font-weight: 600;
    letter-spacing: .3px;
}

.e-timer[data-state="before"] {
    opacity: .95;
}

.e-timer[data-state="running"] {
    opacity: 1;
}

.e-timer[data-state="done"] {
    opacity: .85;
}

/* === Registrants (ثبت‌نام‌کنندگان) === */
.registrants {
    margin-top: 1.4rem; /* فاصله واضح‌تر بعد از دکمه ثبت‌نام دستی */
    padding-top: .2rem; /* کمی نفس کشیدن برای تیتر داخل کارت */
}

.registrants .section-title {
    font-family: 'Yekan-bold', sans-serif;
    font-size: 1rem;
    color: #e6fbf6;
    margin: 0 0 .7rem 0; /* کمی فاصله بیشتر تا اولین کارت/باکس */
}


.reg-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.reg-card {
    background: var(--inbox-color);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    text-align: center;
}

/* چیپ‌های وضعیت حضور در کارت ثبت‌نام (registrations.html) */
.reg-att-choices {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
    flex-wrap: nowrap;
}

.reg-att-choices .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, .18);
    color: var(--text-muted);
    white-space: nowrap;
    max-width: 100%;
}

.reg-att-choices .badge.success {
    border-color: rgba(34, 197, 94, .55);
}

.reg-att-choices .badge.danger {
    border-color: rgba(239, 68, 68, .6);
}

.reg-att-choices .badge.warn {
    border-color: rgba(255, 211, 108, .6);
}

/* رادیوها قایم شوند؛ فقط چیپ دیده شود */
.reg-att-choices input[type="radio"] {
    display: none;
}

/* حالت انتخاب‌شده: پس‌زمینه رنگی و متن تیره/سفید */
.reg-att-choices .badge.is-active,
.reg-att-choices .badge:has(> input:checked) {
    filter: saturate(1.1);
}

.reg-att-choices .badge.success.is-active,
.reg-att-choices .badge.success:has(> input:checked) {
    background: var(--plus-color);
    border-color: var(--plus-color);
    color: #071316;
}

.reg-att-choices .badge.danger.is-active,
.reg-att-choices .badge.danger:has(> input:checked) {
    background: var(--danger-color);
    border-color: var(--danger-color);
    color: #ffffff;
}

.reg-att-choices .badge.warn.is-active,
.reg-att-choices .badge.warn:has(> input:checked) {
    background: var(--warn-color);
    border-color: var(--warn-color);
    color: #3b2a00;
}

.reg-avatar {
    width: 100%;
    max-width: 96px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    margin: 0 auto 8px auto;
    overflow: hidden;
    background: var(--imagebox-color);
    display: flex;
    align-items: center;
    justify-content: center;
}


.reg-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}


.reg-name {
    font-family: 'Yekan-bold', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #e6fbf6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================
   Events – DARK THEME (500px)
   ========================= */

/* ---- CSS Variables (dark palette) ---- */

/* =============== Attendance Page =============== */
.att-page {
    background: var(--app-bg);
    min-height: 100dvh;
    padding: 16px 0;
    display: flex;
    justify-content: center;
}

.att-container {
    width: 100%;
    max-width: 500px; /* ⬅️ fix width */
    background: var(--outbox-color);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

.att-container .page-title {
    margin: 0 0 .75rem 0;
    font-size: 1.05rem;
    color: var(--text);
    text-align: right;
}

/* -------- Toolbar -------- */
.att-toolbar {
    display: flex;
    gap: .5rem;
    margin: .5rem 0 .9rem;
    flex-wrap: wrap;
}

/* -------- Grid (3 cols on 500px) -------- */
.att-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

/* -------- Cards -------- */
.att-card {
    background: var(--inbox-color);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    text-align: center;
}

.att-card__avatar {
    width: 100%;
    max-width: 96px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    margin: 0 auto 8px auto;
    overflow: hidden;
    background: var(--imagebox-color);
    display: flex;
    align-items: center;
    justify-content: center;
}


.att-card__avatar .att-avatar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 360px) {
    .att-card__avatar {
        max-width: 80px; /* فقط سقف بگذار، height ثابت نده */
        aspect-ratio: 1 / 1;
    }
}


.att-card__name {
    font-family: 'Yekan', 'Yekan-bold', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: .35rem;
}

/* -------- Choices (Badges) -------- */
.att-card__choices {
    display: grid;
    grid-template-columns: 1fr; /* هر گزینه یک ردیف */
    gap: .25rem;
    justify-items: stretch; /* پر کردن تمام عرض کارت */
    align-items: stretch;
}

/* base badge: dark (all look muted by default) */

.att-card__choices .badge {
    background: var(--inbox-color);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 999px;
    padding: .25rem .5rem;
    font-size: .85rem;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;

    /* یکنواخت و بدون سرریز */
    display: block; /* هر گزینه یک ردیف کامل */
    width: 100%; /* هم‌اندازهٔ عرض کارت */
    max-width: 100%; /* جلوگیری از سرریز افقی */
    min-width: 0; /* اجازهٔ جمع‌شدن در Grid */
    box-sizing: border-box; /* padding/border داخل 100% حساب بشه */
    margin: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* give each variant only a tinted border in idle state */
.att-card__choices .badge.success {
    border-color: rgba(34, 197, 94, .45);
}

.att-card__choices .badge.warn {
    border-color: rgba(255, 211, 108, .45);
}

.att-card__choices .badge.danger {
    border-color: rgba(239, 68, 68, .45);
}

/* hide radios */
.att-card__choices label input[type="radio"] {
    display: none;
}

/* ACTIVE = only the selected one becomes colored bg
   modern browsers via :has(), fallback via .is-active class set by JS */
.att-card__choices .badge.is-active,
.att-card__choices .badge:has(> input:checked) {
    color: #071316;
    filter: saturate(1.1);
}

.att-card__choices .badge.success.is-active,
.att-card__choices .badge.success:has(> input:checked) {
    background: var(--plus-color);
    border-color: var(--plus-color);
}

.att-card__choices .badge.warn.is-active,
.att-card__choices .badge.warn:has(> input:checked) {
    background: var(--warn-color);
    border-color: var(--warn-color);
}

.att-card__choices .badge.danger.is-active,
.att-card__choices .badge.danger:has(> input:checked) {
    background: var(--danger-color);
    border-color: var(--danger-color);
    color: #fff; /* کنتراست استاندارد روی قرمز تیره */
}


/* -------- Modal (dark) -------- */
.modal[hidden] {
    display: none;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.modal-content,
.modal-card {
    position: relative;
    z-index: 51;
    width: min(500px, 92vw);
    margin: 10vh auto 0;
    background: var(--outbox-color);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    color: var(--text);
}


.modal-title {
    margin: 0 0 .5rem 0;
    font-size: 1rem;
}

.modal-kpis {
    margin: 0 0 .75rem 0;
    color: #d2f4ee;
}

/* لیست اسامی در مودال تأیید ثبت‌نام دستی */
.modal-names {
    margin-top: .5rem;
    padding-top: .4rem;
    border-top: 1px solid var(--border);
}

.modal-names-title {
    font-size: .9rem;
    color: var(--muted);
    margin: 0 0 .4rem 0;
}

.modal-names-list {
    max-height: 220px; /* ارتفاع محدود + اسکرول عمودی */
    overflow-y: auto;
    background: var(--inbox-color);
    border-radius: .75rem;
    border: 1px solid var(--border);
    padding: .35rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

/* هر ردیف نام */
.modal-name-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .86rem;
    color: var(--text);
}

.modal-name-index {
    color: var(--muted);
    font-size: .8rem;
    min-width: 2.2rem; /* مثل "۱ ـ" */
}

.modal-name-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

/* -------- Buttons (dark-friendly) -------- */
.btn, .att-toolbar button, .badge, .modal-title {
    font-family: 'Yekan', 'Yekan-bold', sans-serif;
    letter-spacing: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .45rem .8rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #0a1417;
    color: var(--text);
    transition: background-color .15s ease, border-color .15s ease, filter .15s ease;
}

.btn:hover {
    filter: brightness(1.05);
}

.btn-primary {
    background: #0d2228;
    border-color: rgba(255, 255, 255, .12);
}

.btn-pill {
    background: #10171a;
    border-color: rgba(255, 255, 255, .12);
    border-radius: 999px;
}

.btn-success {
    background: var(--plus-color);
    color: #071316;
    border-color: var(--plus-color);
}

/* دکمه‌های پهن برای اکشن‌های مهم (ثبت‌نام / حذف) */
.btn-wide {
    min-width: 220px;
    padding-inline: 1.3rem;
}

@media (max-width: 480px) {
    .btn-wide {
        width: 100%;
    }
}

/* دکمه انتخاب نوجوان در فرم ثبت‌نام دستی */
.btn-profile-picker {
    min-width: 8rem; /* کمی عریض‌تر */
    min-height: 1rem; /* ارتفاع بیشتر نسبت به دکمه‌های عادی */
    padding: 0 .9rem; /* padding عمودی رو با min-height کنترل می‌کنیم */
    border-radius: 2rem; /* کاملاً کپسولی */
    background: #0e5be9; /* آبی روشن */
    color: #ffffff; /* متن تیره روی پس‌زمینه آبی */
    border-color: transparent; /* بدون کادر خاکستری */
    font-size: 3.9rem; /* + بزرگ‌تر و چشم‌گیرتر */
    font-family: 'Yekan-bold', sans-serif;
}

/* --- Event reward/penalty pills next to countdown --- */
.event-reward-wrap {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: .5rem;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .9rem;
    line-height: 1.4;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset;
}

.pill-reward {
    background: rgba(0, 200, 120, .12);
}

.pill-penalty {
    background: rgba(255, 160, 0, .12);
}

.pill-icon {
    display: inline-block;
    font-size: 1rem;
    transform: translateY(1px);
}

.pill-text {
    white-space: nowrap;
}

.pill-sub {
    margin-inline-start: .35rem;
    opacity: .85;
    font-size: .85em;
}

.inline-form {
    display: inline-block;
}

/* داخل meta-row، فرم‌های inline تمام‌عرض شوند تا دکمه‌های پهن خوب بنشینند */
.meta-row .value .inline-form {
    display: block;
    width: 100%;
}

.mr-2 {
    margin-inline-end: .5rem;
}

/* ========== Events — responsive helpers & footer-safe (v2025-09-30) ========== */

/* فضای امن پایین صفحه وقتی فوتر ثابت داریم */
:root {
    --footer-height: 60px;
}

html:has(.footer-nav) body,
body:has(.footer-nav) {
    padding-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom) + 12px);
}

/* دکمه‌ها و اکشن‌ها در موبایل */
@media (max-width: 720px) {
    .btn {
        min-height: 44px;
    }

    .actions, .tl-actions, .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }
}

/* جدول‌های عریض: قاب اسکرول افقی امن در موبایل */
.e-table-wrap {
    overflow-x: auto;
}

.events-table {
    min-width: 720px;
}

@media (max-width: 900px) {
    .events-table {
        min-width: 680px;
    }
}

/* گرید کارت‌های حضور و غیاب */
.att-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* گرید کارت‌های حضور و غیاب */
@media (max-width: 1000px) {
    .att-page .att-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* ثابت: ۳ ستون */
    }
}


@media (max-width: 560px) {
    .att-page .att-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* موبایل هم ۳ ستون */
        gap: 8px; /* کمی فشرده‌تر برای گوشی‌های خیلی باریک */
    }
}


/* مودال‌ها در موبایل */
.modal {
    max-width: min(520px, 95vw);
    width: 95vw;
}

/* Utility helpers (جایگزین inline-styleها) */
.block {
    display: block;
}

.hidden {
    display: none !important;
}

.flex-1 {
    flex: 1;
}

.fw-400 {
    font-weight: 400;
}

.mb-035 {
    margin-bottom: .35rem;
}

.mt-04 {
    margin-top: .4rem;
}

.mt-05 {
    margin-top: .5rem;
}

.my-05 {
    margin: .5rem 0;
}

.fs-085 {
    font-size: .85em;
}

.w-120 {
    width: 120px;
}

/* جدول‌ها و متن‌ها در کارت: نشکنند/له نشن */
.events-table td, .meta-box {
    word-break: break-word;
}

/* ================================
   Council Approval Portal (responsive)
   ================================ */

.events-page {
    background: var(--app-bg);
    min-height: 100dvh;
}

/* KPIs + sections */
.vp-kpis {
    display: grid;
    gap: .5rem;
}

.vp-section-title {
    font-weight: 700;
    margin: .2rem 0 .5rem;
    color: #e6fbf6;
}

/* Responsive list/grid of voters */
.vp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

/* خود باکس تاشو */
.vp-row {
    background: var(--inbox-color);
    border: 1px solid var(--border);
    border-radius: .9rem;
    overflow: hidden; /* جزئیات درون قاب بماند */
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* حالت hover در حالت بسته/باز */
.vp-row:hover {
    border-color: rgba(165, 255, 233, .35);
    background-color: #0b171c;
}

/* هدر کلیک‌پذیر ردیف (برای دکمه‌ی باکس) */
.vp-row-head {
    font-family: Yekan, sans-serif;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    cursor: pointer;
    width: 100%;
    background: transparent;
    border: none;
    color: inherit;
    text-align: inherit;
}

/* فلش کوچک سمت چپ برای باز/بسته بودن */
.vp-row-head::after {
    content: "›";
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-inline-start: .25rem;
    transform: rotate(90deg);
    transition: transform .18s ease, color .18s ease, opacity .18s ease;
    opacity: .75;
}

/* وقتی باکس باز است، فلش رو بچرخون */
.vp-row.is-open .vp-row-head::after {
    transform: rotate(-90deg);
    color: #a5ffe9;
    opacity: 1;
}

/* خلاصه‌ی هدر (آواتار + نام + badgeها) */
.vp-row-summary {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
}

/* آواتار گرد کوچک در هدر */
.vp-row-avatar {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--imagebox-color);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vp-row-avatar .vp-avatar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* بخش متن: نام + زیرنویس */
.vp-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.vp-row-title {
    font-weight: 700;
    font-size: .95rem;
    color: #e6fbf6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vp-row-sub {
    font-size: .8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ستون badgeها (Waive / جایزه فعال) */
.vp-row-badges {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    align-items: flex-end;
}

/* کمی جمع‌وجورترکن badgeها در این هدر */
.vp-row-badges .badge {
    font-size: .8rem;
    padding: .15rem .45rem;
}

/* حالت خیلی باریک موبایل: آواتار کوچک‌تر، نام روی دوخط */
@media (max-width: 360px) {
    .vp-row-avatar {
        width: 50px;
        height: 50px;
    }

    .vp-row-title {
        font-size: .9rem;
    }

    .vp-row-sub {
        max-width: 100%;
        white-space: normal;
    }
}


/* جزئیات رأی داخل خود باکس */
.vp-row-detail {
    border-top: 1px solid var(--border);
    padding: .6rem .75rem .7rem;
    background: rgba(4, 18, 22, .9);
}

/* حالت باز: قاب کمی هایلایت شود */
.vp-row.is-open {
    border-color: rgba(165, 255, 233, .35);
    box-shadow: 0 0 0 2px rgba(165, 255, 233, .12);
}

/* متن‌ها */
.vp-reason-text {
    margin: 0 0 .35rem 0;
    color: #e6f1f3;
    overflow-wrap: anywhere;
}

.vp-reason-meta {
    color: var(--text-muted);
    font-size: .88rem;
}


.vp-name {
    color: #dff5ef;
    font-weight: 700;
}

/* vote badges */
.vp-badges {
    display: flex;
    gap: .35rem;
    align-items: center;
}

/* Unified size for all vote status chips */
.vp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px; /* ارتفاع یکسان */
    width: 6.5em; /* عرض یکسان برای «رد»، «تأیید»، «بدون رأی» */
    padding: 0 .6rem; /* فقط افقی؛ ارتفاع را height تعیین می‌کند */
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: .9rem;
    line-height: 1;
    white-space: nowrap;
}

.vp-badge.ok {
    background: rgba(34, 197, 94, .14);
    border-color: rgba(34, 197, 94, .45);
    color: #9ef0bd;
}

.vp-badge.no {
    background: rgba(234, 114, 114, .14);
    border-color: rgba(234, 114, 114, .45);
    color: #ffc8c8;
}

.vp-badge.pending {
    background: rgba(255, 255, 255, .06);
    color: #cfe7ee;
}

/* actions + inputs */
.vp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .6rem;
}

.vp-actions .btn {
    flex: 1 1 0;
    min-width: 0;
}

/* هر دو دکمه هم‌عرض */

.vp-textarea {
    width: 100%;
    min-height: 84px;
    background: var(--outbox-color);
    color: #e6f1f3; /* ⬅️ پرانتز اضافه حذف شد */
    border: 1px solid #22333a;
    border-radius: 10px;
    padding: .5rem .6rem;
    display: block;
    max-width: 100%;
    box-sizing: border-box; /* ⬅️ جلوگیری از سرریز افقی */
}

.vp-muted {
    color: var(--text-muted);
    font-size: .9rem;
}

/* spacing helper to replace inline style */
.mt-06 {
    margin-top: .6rem;
}

/* --- small tweaks for very narrow screens (<= 360px) --- */
@media (max-width: 360px) {
    .vp-row {
        padding: .45rem .5rem;
    }

    .vp-badge {
        height: 24px;
        width: 5.8em; /* کمی کوچک‌تر برای عرض‌های خیلی کم */
        padding: 0 .5rem;
        font-size: .85rem;
    }
}


/* ================================
   Council Approval Portal — responsive fixes
   ================================ */

/* جلوگیری از اسکرول افقی در همه حالت‌ها */
html, body {
    overflow-x: hidden;
}

/* همه‌ی ابعاد با padding/ border حساب شوند تا سرریز ندهند */
.events-page, .events-page * {
    box-sizing: border-box;
}

/* گاتر کناری برای ظرف 500px و کوچکتر */
.events-page .page-container {
    padding-inline: 12px;
}

/* کارت اصلی هرگز از ظرف بیرون نزند */
.events-page .events-wrap {
    max-width: 100%;
    overflow-x: hidden;
}

/* هدر و تیتر در عرض کم نشکنند/سرریز ندهند */
.e-head, .meta-box, .vp-row {
    max-width: 100%;
}

.e-title {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ردیف رأی: نام قابل جمع شدن، بج‌ها ثابت */
.vp-row {
    gap: .5rem;
}

.vp-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vp-badges {
    flex: 0 0 auto;
}

/* دکمه‌ها و بج‌ها از عرض بیرون نزنند */
.btn, .badge {
    max-width: 100%;
}

/* اگر جایی جدول عمومی وارد شد، روی این صفحه مجبورش نکن به min-width */
.events-page .events-table {
    min-width: 0;
}

/* هدر در موبایل جمع شود، دکمه بازگشت تمام عرض شود */
@media (max-width: 420px) {
    .e-head {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }

    .e-head .btn {
        width: 100%;
    }
}

/* ظریف‌کاری برای عرض‌های خیلی کم */
@media (max-width: 360px) {
    .vp-row {
        padding: .45rem .5rem;
    }

    .vp-badge {
        height: 24px;
        width: 5.8em; /* کمی کوچک‌تر برای عرض‌های خیلی کم */
        padding: 0 .5rem;
        font-size: .85rem;
    }
}


/* === Force danger button to be red & equal look to success (override) === */
.btn-danger {
    background: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
    color: #fff !important;
}

.btn-danger:hover {
    filter: brightness(1.05);
}

/* ===============================
   Event Submit (responsive scoped)
   =============================== */

/* ظرف صفحه: هیچ اسکرول افقی نداشته باشد */
html, body {
    overflow-x: hidden;
}

.events-page, .events-page * {
    box-sizing: border-box;
}

.event-submit {
    padding-inline: 12px;
}

.event-submit .events-wrap {
    max-width: 100%;
    overflow-x: hidden;
}

/* هدر جمع‌وجور و انعطاف‌پذیر */
.event-submit .e-head {
    gap: .6rem;
}

@media (max-width: 480px) {
    .event-submit .e-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .event-submit .e-head .badge {
        margin-inline-start: 0;
    }
}

/* فرم‌های اصلی */
.es-form {
    display: grid;
    gap: .8rem;
}

/* هر کارت بخش (مالک/زمان‌بندی/هزینه/جایزه/جریمه) */
.event-submit .card {
    background: var(--inbox-color);
    border: 1px solid var(--border);
    border-radius: .9rem;
    padding: .8rem 1rem;
    display: grid;
    gap: .7rem;

}

.event-submit .group-title {
    margin: 0 0 .3rem 0;
    font-weight: 700;
    color: #e6fbf6;
}

/* سطرهای meta-row: در موبایل ستونی، در عرض‌های بالاتر دو ستونه */
.event-submit .meta-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    background: #0a2d36;
    border: 1px solid var(--border);
    border-radius: .6rem;
    padding: .6rem .65rem;
}

.event-submit .meta-row .label {
    color: var(--muted);
    font-size: .9rem;
}

.event-submit .meta-row .value {
    display: grid;
    gap: .45rem;
}

@media (min-width: 640px) {
    .event-submit .meta-row {
        grid-template-columns: 180px 1fr; /* لیبل | مقدار */
        align-items: center;
    }
}

/* فرم‌روهای ساده (label + field) */
.event-submit .form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: .4rem;
}

.event-submit .form-row > label {
    color: var(--muted);
    font-size: .9rem;
}

@media (min-width: 640px) {
    .event-submit .form-row {
        grid-template-columns: 180px 1fr; /* لیبل | مقدار */
        align-items: center;
    }
}

/* انتخاب مالک (btn-group) */
.event-submit .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.event-submit .btn-group .btn {
    min-height: 40px;
}

/* جستجو/انتخاب‌ها */
.event-submit .input,
.event-submit input[type="text"],
.event-submit input[type="time"],
.event-submit select,
.event-submit textarea {
    width: 100%;
    max-width: 100%;
}

/* استک تاریخ/ساعت: ردیف‌ها نشکنند و اسکرول ندن */
.event-submit .stack {
    display: grid;
    gap: .45rem;
}

.event-submit .stack .row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.event-submit .stack .row .input {
    flex: 1 1 180px;
    min-width: 180px;
}

.event-submit .stack .row .btn {
    flex: 0 0 auto;
}

/* راهنمای متنی */
.event-submit .muted {
    color: var(--text-muted);
    font-size: .9rem;
}

/* اکشن‌های پایانی */
.event-submit .tl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.event-submit .tl-actions .btn {
    flex: 1 1 0;
    min-width: 180px;
}

/* فواصل */
.event-submit hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: .6rem 0;
}

/* جلوگیری از سرریز متن‌ها */
.event-submit .events-wrap,
.event-submit .meta-box,
.event-submit .meta-row,
.event-submit .form-row {
    max-width: 100%;
    word-break: break-word;
}

/* باکس نتایج جستجوی پروفایل (اگر استفاده می‌شود) */
.event-submit #profileResults.list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: .6rem;
    padding: .4rem;
    background: var(--outbox-color);
}

/* ===== Tickbox (fancy checkbox) ===== */
.tickbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--inbox-color);
    border: 1px solid var(--border);
    border-radius: .8rem;
    padding: .6rem .7rem;
    cursor: pointer;
    user-select: none;
}

.tickbox input[type="checkbox"] {
    /* کل باکس کلیک‌پذیر باشد */
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.tickbox-icon {
    width: 20px;
    height: 20px;
    border-radius: .4rem;
    border: 1px solid #2a4248;
    background: #0a2024;
    display: inline-block;
    position: relative;
}

.tickbox-icon::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .9rem;
    color: #062326;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .12s ease, transform .12s ease;
}

.tickbox-title {
    font-weight: 700;
    color: #d6f5f1;
}

/* حالتِ انتخاب‌شده */
.tickbox input[type="checkbox"]:checked + .tickbox-icon {
    background: var(--plus-color); /* فیروزه‌ای */
    border-color: var(--plus-color);
}

.tickbox input[type="checkbox"]:checked + .tickbox-icon::after {
    opacity: 1;
    transform: scale(1);
}

.tickbox input[type="checkbox"]:checked ~ .tickbox-title {
    color: #bdf2ea;
}

/* ---- Profile picker (انتخاب نوجوان) ---- */
.profile-picker-body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.profile-search-input {
    width: 100%;
    margin-bottom: .25rem;
}

.profile-list {
    max-height: 320px;
    overflow-y: auto;
    border-radius: .75rem;
    background: var(--inbox-color);
    padding: .25rem;
    border: 1px solid var(--border);
}

/* ردیف هر پروفایل */
.profile-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .45rem;
    border-radius: .6rem;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.profile-item:hover {
    background: rgba(255, 255, 255, .04);
}

.profile-item.is-selected {
    background: rgba(0, 255, 200, .08);
    box-shadow: 0 0 0 1px rgba(165, 255, 233, .45);
}

/* آواتار در لیست انتخاب */
.profile-item-avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--imagebox-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-item-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* متن پروفایل */
.profile-item-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .05rem;
}

.profile-item-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-item-sub {
    font-size: .78rem;
    color: var(--text-muted);
}

/* خلاصهٔ انتخاب‌ها (چیپ‌ها) */
.chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-bottom: .4rem;
}

.chip {
    background: var(--imagebox-color);
    border-radius: 999px;
    padding: .1rem .55rem;
    font-size: .8rem;
    color: var(--text);
}

.chip-count {
    background: transparent;
    border: 1px dashed var(--border);
}

/* Profile picker: لیست نوجوان‌ها (حدوداً ۵ ردیف + اسکرول) */
#profile-picker-list {
    max-height: 260px; /* تقریبا ۵ ردیف در موبایل/دسکتاپ فشرده */
    overflow-y: auto;
    padding: 4px 0;
}

/* چک‌باکس‌های pill برای وضعیت جایزه */
.checkbox {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}

.checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
}

.checkbox-pill {
    position: relative;
}

.checkbox-pill-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .3rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .03);
    color: var(--text-muted);
    font-size: .9rem;
    min-width: 9rem;
    text-align: center;
}

.checkbox-pill input[type="checkbox"]:checked + .checkbox-pill-label {
    background: rgba(239, 68, 68, .24);
    border-color: rgba(239, 68, 68, .7);
    color: #ffe4e6;
}

/* === Button loading spinner (الهام گرفته از section_read / standalone.css) === */

.btn[disabled] {
    opacity: .7;
    cursor: default;
}

.btn-spinner {
    width: 1.1em;
    height: 1.1em;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    animation: btn-spin .8s linear infinite;
}

.btn-label {
    display: inline-block;
}

.btn-loading .btn-spinner {
    display: inline-block;
}

.btn-loading .btn-label {
    opacity: .85;
}

/* پیش‌فرض: اسپینر پنهان است؛ در html با کلاس .hidden گذاشته‌ایم */
.hidden {
    display: none !important;
}

@keyframes btn-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}