/* =====================================================================
   RoleCards.css — پنجره‌ی «نقش کاربر»: سه کارت گرافیکی (کاربر / ادمین / کارمند) + نشان نقش‌ها در جدول
   ---------------------------------------------------------------------
   مودال شیشه‌ای تیره است؛ کارت‌ها هم شیشه‌ای‌اند و هر نقش یک رنگ تاکیدی دارد که در پالت فیروزه‌ای/آبی پنل می‌نشیند:
     کاربر = فیروزه‌ای ، ادمین = آبی ، کارمند = زمردی.
   انیمیشن‌ها: ورود پلکانی، شناور بودن آیکن، حلقه‌ی چرخان، حاشیه‌ی نورانیِ گردان و جرقه‌ها روی کارتِ انتخاب‌شده.
   با prefers-reduced-motion همه‌ی انیمیشن‌ها خاموش می‌شود.
   ===================================================================== */

/* مودال: عرض کافی برای سه کارت کنار هم */
.modal-box.role-modal {
    width: min(960px, 96vw);
    max-width: 960px;
}

.role-modal .rc-intro {
    margin: 0 0 20px;
    text-align: center;
    color: #cfe6f3;
    line-height: 1.9;
}

/* سه ستون هم‌عرض: یکی چپ، یکی وسط، یکی راست */
.rc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.rc {
    --a: #22d3ee;
    --b: #0e7490;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 34px 18px 26px;
    text-align: center;
    color: #eaf7ff;
    cursor: pointer;
    overflow: hidden;
    background: linear-gradient(165deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
    border: 1.5px solid rgba(255, 255, 255, .22);
    border-radius: 26px;
    box-shadow: 0 10px 30px rgba(0, 10, 30, .35);
    transition: transform .4s cubic-bezier(.2, .9, .3, 1.25), box-shadow .35s, border-color .35s;
    animation: rcIn .65s cubic-bezier(.2, .9, .3, 1.2) both;
    animation-delay: calc(var(--i, 0) * 120ms);
}

.rc-user { --a: #22d3ee; --b: #0e7490; }
.rc-admin { --a: #60a5fa; --b: #1d4ed8; }
.rc-staff { --a: #34d399; --b: #047857; }
.rc-custom { --a: #a5b4fc; --b: #4338ca; }

/* input واقعی پنهان است ولی با کیبورد (جهت‌ها/Tab) کار می‌کند */
.rc input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.rc:has(input:focus-visible) {
    outline: 3px solid var(--a);
    outline-offset: 3px;
}

.rc:has(input:disabled) {
    cursor: progress;
}

/* حاشیه‌ی نورانیِ در حال چرخش (فقط کارت انتخاب‌شده) */
.rc::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: -70%;
    background: conic-gradient(from 0deg, transparent 0 52%, var(--a) 72%, #ffffff 86%, var(--b) 94%, transparent 100%);
    opacity: 0;
    transition: opacity .45s;
    animation: rcSpin 5s linear infinite;
}

.rc::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 2px;
    border-radius: 24px;
    background: transparent;
    transition: background .45s;
}

.rc:hover {
    transform: translateY(-6px);
    border-color: var(--a);
    box-shadow: 0 18px 40px rgba(0, 10, 30, .45);
}

.rc.is-selected {
    transform: translateY(-8px) scale(1.025);
    border-color: transparent;
    box-shadow: 0 20px 50px color-mix(in srgb, var(--a) 42%, transparent);
}

.rc.is-selected::before {
    opacity: 1;
}

.rc.is-selected::after {
    background:
        radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--a) 30%, transparent), transparent 72%),
        linear-gradient(165deg, #0a2d58, #064a73);
}

/* ---------- آیکن و حلقه‌ها ---------- */
.rc-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    margin-bottom: 6px;
    transition: transform .4s cubic-bezier(.2, .9, .3, 1.4);
}

.rc:hover .rc-stage {
    transform: scale(1.08) rotate(-5deg);
}

.rc-ring {
    position: absolute;
    inset: 0;
    border: 2px dashed color-mix(in srgb, var(--a) 75%, transparent);
    border-radius: 50%;
    opacity: .55;
    animation: rcRing 16s linear infinite;
}

.rc.is-selected .rc-ring {
    border-style: solid;
    opacity: 1;
    animation-duration: 7s;
}

.rc-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    color: #fff;
    background: linear-gradient(135deg, var(--a), var(--b));
    border-radius: 50%;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--b) 60%, transparent), inset 0 2px 6px rgba(255, 255, 255, .45);
    animation: rcFloat 4.2s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -.9s);
}

.rc-icon svg {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}

.rc.is-selected .rc-icon {
    animation: rcFloat 3s ease-in-out infinite, rcPulse 2.2s ease-out infinite;
}

/* جرقه‌ها */
.rc-spark {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--a);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 10px var(--a);
}

.rc-spark-1 { top: 4px; inset-inline-start: 10px; }
.rc-spark-2 { top: 14px; inset-inline-end: 2px; width: 6px; height: 6px; animation-delay: .5s !important; }
.rc-spark-3 { bottom: 6px; inset-inline-start: 2px; width: 5px; height: 5px; animation-delay: 1s !important; }
.rc-spark-4 { bottom: 2px; inset-inline-end: 14px; animation-delay: 1.5s !important; }

.rc.is-selected .rc-spark {
    animation: rcTwinkle 2.4s ease-in-out infinite;
}

/* ---------- متن ---------- */
.rc-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rc-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: .2px;
}

.rc.is-selected .rc-title {
    background: linear-gradient(90deg, #ffffff, var(--a));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.rc-desc {
    font-size: .88rem;
    line-height: 1.85;
    color: #b9d6e8;
}

/* ---------- نشان انتخاب و «نقش فعلی» ---------- */
.rc-check {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #fff;
    background: linear-gradient(135deg, var(--a), var(--b));
    border-radius: 50%;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--a) 55%, transparent);
    transform: scale(0) rotate(-120deg);
    transition: transform .45s cubic-bezier(.2, 1.5, .4, 1);
}

.rc-check svg {
    width: 17px;
    height: 17px;
}

.rc.is-selected .rc-check {
    transform: scale(1) rotate(0);
}

.rc-current {
    position: absolute;
    top: 16px;
    inset-inline-start: 14px;
    padding: 3px 11px;
    font-size: .72rem;
    font-weight: 700;
    color: #e8f6ff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
}

/* ---------- یادداشت مخصوص «کارمند» ---------- */
.rc-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 12px 16px;
    font-size: .9rem;
    color: #d1fae5;
    background: rgba(52, 211, 153, .14);
    border: 1px solid rgba(52, 211, 153, .45);
    border-radius: 14px;
    animation: rcNote .4s ease-out both;
}

.rc-note svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: #34d399;
}

.rc-note a {
    margin-inline-start: auto;
    font-weight: 700;
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- نشان نقش در جدول کاربران ---------- */
.admin-root .up-badge.role-badge {
    color: #fff;
    font-weight: 700;
    border: 0;
}

.admin-root .up-badge.role-badge + .up-badge.role-badge {
    margin-inline-start: 4px;
}

.admin-root .up-badge.role-badge-user { background: linear-gradient(135deg, #0891b2, #0e7490); }
.admin-root .up-badge.role-badge-admin { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.admin-root .up-badge.role-badge-staff { background: linear-gradient(135deg, #059669, #047857); }
.admin-root .up-badge.role-badge-custom { background: linear-gradient(135deg, #6366f1, #4338ca); }

/* ---------- انیمیشن‌ها ---------- */
@keyframes rcIn {
    from { opacity: 0; transform: translateY(30px) scale(.92); }
    to { opacity: 1; transform: none; }
}

@keyframes rcSpin { to { transform: rotate(360deg); } }
@keyframes rcRing { to { transform: rotate(360deg); } }

@keyframes rcFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes rcPulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--a) 65%, transparent), 0 12px 26px color-mix(in srgb, var(--b) 60%, transparent); }
    100% { box-shadow: 0 0 0 26px transparent, 0 12px 26px color-mix(in srgb, var(--b) 60%, transparent); }
}

@keyframes rcTwinkle {
    0%, 100% { opacity: 0; transform: scale(.3); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes rcNote {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

/* ---------- موبایل و تبلت ---------- */
@media (max-width: 760px) {
    .rc-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* هر کارت افقی می‌شود: آیکن کنار متن */
    .rc {
        flex-direction: row;
        gap: 14px;
        padding: 18px 16px;
        text-align: start;
    }

    .rc-stage {
        flex: 0 0 auto;
        width: 76px;
        height: 76px;
        margin: 0;
    }

    .rc-icon {
        width: 56px;
        height: 56px;
    }

    .rc-icon svg {
        width: 28px;
        height: 28px;
    }

    .rc-text {
        flex: 1;
        min-width: 0;
        padding-top: 14px;
    }

    .rc-title { font-size: 1.15rem; }
    .rc-check { top: 10px; width: 28px; height: 28px; }
    .rc-current { top: 12px; inset-inline-start: auto; inset-inline-end: 48px; }
    .rc.is-selected { transform: translateY(-3px) scale(1.01); }
}

@media (prefers-reduced-motion: reduce) {
    .rc,
    .rc::before,
    .rc-ring,
    .rc-icon,
    .rc-spark,
    .rc-check,
    .rc-note {
        animation: none !important;
        transition: none !important;
    }

    .rc.is-selected .rc-spark { opacity: 1; }
}