/* ===== منتقل‌شده از CSS اسکوپ‌شده‌ی Blazor: AdminLayout.razor.css =====
   اکنون سراسری است؛ برای حفظ همان اولویت قبلی (specificity) انتخاب‌گرها ایمن‌سازی شده‌اند. */
.page.admin-root {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* پس‌زمینه تصویری، فقط مخصوص پنل ادمین */
    background-image: url(/ShahrzadLashAcademy/Images/background.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.admin-root main {
    flex: 1;
    min-width: 0;   /* بدون این، جدول/محتوای عریض کل صفحه را از عرض موبایل بیرون می‌برد */
}

.admin-root .content {
    border-radius: 20px;
    margin: 1rem 1.5rem;
    padding: 1.5rem !important;
    box-shadow: 0 14px 40px rgba(0, 10, 30, .30), inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* سایدبار شیشه‌ای؛ رنگ‌ها از تصویر پس‌زمینه برداشته شده‌اند */
.admin-root .sidebar {
    background:
        radial-gradient(120% 35% at 50% 0%, rgba(255, 255, 255, .16), transparent 65%),
        linear-gradient(180deg, rgba(2, 26, 64, .72) 0%, rgba(5, 61, 103, .55) 55%, rgba(14, 116, 144, .50) 100%);
    border-inline-end: 1px solid rgba(255, 255, 255, .16);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .08), 0 10px 40px rgba(0, 10, 30, .45);
}
/* نوار بالا: شیشه‌ی روشن */
.admin-root .top-row {
    background-color: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 18px;
    margin: .75rem 1.5rem 0;
    box-shadow: 0 8px 26px rgba(0, 10, 30, .26), inset 0 1px 0 rgba(255, 255, 255, .8);
    justify-content: space-between;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .admin-root .top-row a, .admin-root .top-row .btn-link {
        white-space: nowrap;
        text-decoration: none;
    }

        .admin-root .top-row a:hover, .admin-root .top-row .btn-link:hover {
            text-decoration: underline;
        }

.admin-root .admin-panel-title {
    font-weight: 700;
    color: #053d67;
}

/* ===== جدید: عکس گرد + پیام خوش‌آمد ===== */
.admin-root .admin-welcome {
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* عکس گرد؛ اگر عکس لود نشود حرف اول نام دیده می‌شود */
.admin-root .admin-avatar {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #cffafe;
    border: 2px solid #0e7490;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .28), 0 4px 12px rgba(14, 116, 144, .35);
}

    .admin-root .admin-avatar img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

.admin-root .admin-avatar-initial {
    font-weight: 700;
    color: #0e7490;
}
/* ===== پایان بخش جدید ===== */

/* دکمه‌ی خروج کنار پیام خوش‌آمد */
.admin-root .admin-logout-form {
    margin: 0;
    margin-inline-start: .5rem;
}

.admin-root .admin-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: #b91c1c;
    background: rgba(255, 255, 255, .7);
    border: 1.5px solid rgba(254, 202, 202, .95);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    .admin-root .admin-logout-btn svg {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
    }

    .admin-root .admin-logout-btn:hover {
        color: #fff;
        background: #dc2626;
        border-color: #dc2626;
        box-shadow: 0 4px 12px rgba(220, 38, 38, .3);
    }

    .admin-root .admin-logout-btn:focus-visible {
        outline: 2px solid #dc2626;
        outline-offset: 2px;
    }

.admin-root .admin-back-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    white-space: nowrap;
    color: #0e7490;
    font-weight: 600;
    padding: .38rem .95rem;
    border-radius: 999px;
    background: rgba(14, 116, 144, .10);
    border: 1px solid rgba(14, 116, 144, .22);
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

    .admin-root .admin-back-link:hover {
        background: rgba(14, 116, 144, .18);
        box-shadow: 0 4px 14px rgba(14, 116, 144, .25);
        transform: translateY(-1px);
    }

.admin-root .admin-back-ico {
    display: none;            /* فقط در موبایل */
    width: 1.15rem;
    height: 1.15rem;
}

/* اگر مرورگر backdrop-filter را پشتیبانی نکند، پس‌زمینه‌ها مات‌تر می‌شوند */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .admin-root .top-row {
        background-color: rgba(255, 255, 255, .95);
    }

    .admin-root .sidebar {
        background: linear-gradient(180deg, #021a40 0%, #053d67 55%, #07577b 100%);
    }
}

/* =====================================================================
   موبایل (مثلاً Galaxy S22 با عرض CSS = 360 پیکسل)
   ===================================================================== */
@media (max-width: 640.98px) {
    .page.admin-root {
        min-height: 100vh;
        min-height: 100dvh;          /* ارتفاع واقعیِ دیده‌شده (با نوار آدرس مرورگر موبایل) */
        width: 100%;
        max-width: 100%;
        overflow-x: clip;             /* هیچ چیز نباید صفحه را افقی بزرگ‌تر کند؛ clip برخلاف hidden جلوی sticky را نمی‌گیرد */
        isolation: isolate;
        /* background-attachment: fixed در مرورگرهای موبایل کند و پرش‌دار است ← تصویر در یک لایه‌ی fixed جدا می‌آید */
        background-image: none;
    }

    .page.admin-root::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: #04204a url(/ShahrzadLashAcademy/Images/background.webp) center / cover no-repeat;
    }

    /* نوار برگر همیشه بالای صفحه می‌ماند تا منو در هر جای صفحه در دسترس باشد
       (z-index کمتر از مودال‌ها که 1050 است) */
    .admin-root .sidebar {
        position: sticky;
        top: 0;
        z-index: 1040;
        /* هنگام اسکرول، محتوای صفحه نباید از زیر نوار برگر دیده شود ← زمینه‌ی مات */
        background: linear-gradient(135deg, #021a40 0%, #053d67 60%, #07577b 100%);
        border-inline-end: 0;
        box-shadow: 0 4px 18px rgba(0, 10, 30, .45);
    }

    .admin-root .top-row {
        height: auto;
        min-height: 3.1rem;
        margin: .5rem .5rem 0;
        padding: .35rem .6rem;
        gap: .5rem;
        border-radius: 16px;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .admin-root .admin-welcome {
        flex: 1 1 auto;
        min-width: 0;                 /* تا نام بلند با «…» کوتاه شود و عرض را نترکاند */
        gap: .5rem;
    }

    .admin-root .admin-avatar {
        width: 2.25rem;
        height: 2.25rem;
    }

    .admin-root .admin-panel-title {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        font-size: .9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-root .admin-logout-form {
        flex: 0 0 auto;
        margin-inline-start: 0;
    }

    /* در موبایل فقط آیکون خروج و آیکون بازگشت به سایت (اهداف لمسی حداقل 40 پیکسل) */
    .admin-root .admin-logout-btn span,
    .admin-root .admin-back-text {
        display: none;
    }

    .admin-root .admin-logout-btn,
    .admin-root .admin-back-link {
        justify-content: center;
        min-width: 2.5rem;
        min-height: 2.5rem;
        padding: .4rem;
    }

    .admin-root .admin-back-ico {
        display: block;
    }

    .admin-root .content {
        margin: .5rem;
        padding: .75rem !important;
        border-radius: 16px;
        min-width: 0;
        max-width: 100%;
    }
}

@media (min-width: 641px) {
    .page.admin-root {
        flex-direction: row;
    }

    /* سایدبار شناور و شیشه‌ای */
    .admin-root .sidebar {
        width: 250px;
        height: calc(100vh - 1.5rem);
        margin: .75rem;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 22px;
        overflow: hidden;
        position: sticky;
        top: .75rem;
        /* بلور فقط در دسکتاپ؛ در موبایل منوی fixed را خراب می‌کند */
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        backdrop-filter: blur(18px) saturate(140%);
    }

    .admin-root .top-row {
        position: sticky;
        top: .75rem;
        z-index: 5;
    }

    .admin-root .top-row, .admin-root article {
        padding-inline-end: 2rem !important;
        padding-inline-start: 1.5rem !important;
    }
}