/* ============================================================
   BrainSkillHub — مكوّنات الصفحات
   تكملة لنظام التصميم في brainskill.css (لا تُكرَّر الرموز هنا).
   ============================================================ */

/* ---------- روابط التخطي وإمكانية الوصول ---------- */
/* رابط تخطّي المحتوى.
   كان مخفيّاً بـ ‎translateY(-200%)‎ فوق حافة الصفحة، وهذا يخفيه بصرياً فقط:
   عند سحب الشاشة للأسفل (السحب المطّاطي أو السحب للتحديث على الجوّال) تنكشف
   المساحة فوق المستند فيظهر الرابط كزرّ أبيض غريب في الأعلى.
   البديل قصّه إلى بكسل واحد — يبقى قابلاً للتركيز بلوحة المفاتيح (بخلاف
   display:none أو visibility:hidden) ولا يمكن كشفه بالتمرير إطلاقاً. */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    z-index: 200;
    padding: .6rem 1.2rem;
    background: var(--bs-white);
    color: var(--bs-blue-700);
    font-weight: 700;
    border-radius: 0 0 var(--bs-radius) var(--bs-radius);
    box-shadow: var(--bs-shadow);
}

.site-nav__form { display: inline-flex; margin-inline-start: .35rem; }

/* ---------- الرأس: أزرار داخل شريط التنقّل ---------- */
.site-nav .btn { padding-block: .32rem; }

/* ---------- البطل ---------- */
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .28rem .9rem;
    margin-bottom: 1rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--bs-azure-200);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

.hero__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 2.2rem;
    margin-top: 2.6rem;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.hero__metric strong {
    display: block;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--bs-white);
}

.hero__metric span { font-size: .88rem; color: rgba(255, 255, 255, .72); }

/* ---------- عناوين الأقسام ---------- */
.section-head { max-width: 62ch; margin-bottom: 2rem; }
.section-head p { color: var(--bs-gray-500); margin-bottom: 0; }

.section-head__kicker {
    display: block;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-blue-600);
    margin-bottom: .35rem;
}

/* ---------- الحالة الفارغة ---------- */
.empty-state {
    display: grid;
    place-items: center;
    gap: .6rem;
    padding: clamp(2.5rem, 8vw, 4.5rem) 1.5rem;
    text-align: center;
    background: var(--bs-white);
    border: 1px dashed var(--bs-gray-300);
    border-radius: var(--bs-radius-lg);
    color: var(--bs-gray-500);
}

.empty-state__icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: var(--bs-radius-lg);
    background: var(--bs-logo-gradient);
    color: var(--bs-white);
}

/* ---------- شريط الأدوات (بحث + فلاتر) ---------- */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.6rem;
}

.toolbar .form-control,
.toolbar .form-select { width: auto; min-width: 220px; flex: 1 1 220px; }

.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }

.chip {
    padding: .34rem .95rem;
    font-size: .87rem;
    font-weight: 700;
    color: var(--bs-gray-700);
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-300);
    border-radius: 999px;
    transition: all var(--bs-transition);
}

.chip:hover { color: var(--bs-blue-700); border-color: var(--bs-blue-600); }

.chip.is-active {
    color: var(--bs-white);
    background: var(--bs-logo-gradient);
    border-color: transparent;
    box-shadow: var(--bs-shadow-blue);
}

/* ---------- صفحة تفاصيل التطبيق ---------- */
.app-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin-top: 1.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.app-hero__meta dt { font-size: .8rem; color: rgba(255, 255, 255, .66); }
.app-hero__meta dd { margin: 0; font-weight: 700; color: var(--bs-white); }

.demo-frame {
    width: 100%;
    height: min(72vh, 760px);
    border: 0;
    border-radius: var(--bs-radius-lg);
    background: var(--bs-white);
    box-shadow: var(--bs-shadow-lg);
}

.demo-shell {
    border: 1px solid var(--bs-gray-200);
    border-radius: var(--bs-radius-xl);
    background: var(--bs-gray-50);
    padding: .55rem;
    overflow: hidden;
}

.demo-shell__bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem .7rem;
}

.demo-shell__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bs-gray-300); }

/* ---------- الخط الزمني للإصدارات ---------- */
.timeline { position: relative; padding-inline-start: 1.7rem; }

.timeline::before {
    content: '';
    position: absolute;
    inset-block: .5rem;
    inset-inline-start: 6px;
    width: 2px;
    background: linear-gradient(180deg, var(--bs-blue-600), var(--bs-gray-200));
}

.timeline__item { position: relative; padding-bottom: 1.5rem; }

.timeline__item::before {
    content: '';
    position: absolute;
    inset-block-start: .55rem;
    inset-inline-start: -1.7rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bs-white);
    border: 3px solid var(--bs-blue-600);
}

.timeline__item--security::before { border-color: var(--bs-danger); }
.timeline__item--fixed::before { border-color: var(--bs-warning); }
.timeline__head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .25rem; }
.timeline__version { font-weight: 800; font-size: 1.05rem; }

/* ---------- لوحة التحكم: كتلة المستخدم في الشريط الجانبي ---------- */
.admin-sidebar__user {
    margin-top: 1.5rem;
    padding: 1rem .8rem 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.admin-sidebar__name { font-weight: 700; color: var(--bs-white); font-size: .95rem; }

.admin-sidebar__role {
    font-size: .8rem;
    color: var(--bs-azure-300);
    margin-bottom: .8rem;
}

/* ---------- لوحة التحكم: الشريط العلوي على الشاشات الصغيرة ---------- */
/* مخفيّ تماماً على سطح المكتب: هناك الشريط الجانبي ظاهر دائماً ويحمل الهوية. */
.admin-topbar { display: none; }

.admin-sidebar-toggle { display: none; }

.admin-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(4, 16, 46, .5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

@media (max-width: 992px) {
    .admin-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;

        /* لاصق أسفل حافة الشاشة العليا. أقلّ من الطبقة السوداء (80) عمداً
           حتى تغطّيه هي أيضاً عند فتح الدرج. */
        position: sticky;
        inset-block-start: 0;
        z-index: 70;

        /* يمتدّ من حافة إلى حافة رغم الحشو الجانبي لـ .admin-main. */
        margin-inline: calc(-1 * clamp(1rem, 3vw, 2.2rem));
        margin-block-end: 1.2rem;
        padding: .55rem clamp(1rem, 3vw, 2.2rem);
        padding-block-start: calc(.55rem + env(safe-area-inset-top));

        background: var(--bs-black);
        border-block-end: 1px solid rgba(255, 255, 255, .12);
    }

    .admin-topbar .bs-logo img { width: 30px; height: 30px; }

    /* الحشو العلوي انتقل إلى الشريط نفسه. */
    .admin-main { padding-block-start: 0; }

    .admin-sidebar-toggle { display: inline-flex; align-items: center; gap: .4rem; flex: none; }

    /* مساحة أمان أسفل الصفحة على الهواتف ذات شريط الإيماءات. */
    .admin-main { padding-block-end: calc(3rem + env(safe-area-inset-bottom)); }
}

@media (min-width: 993px) {
    .admin-backdrop { display: none !important; }
}

/* ---------- لوحة التحكم: رأس الصفحة ---------- */
.admin-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.admin-header p { color: var(--bs-gray-500); margin-bottom: 0; }

/* عنوان بحجم ثابت 1.75rem كان يلتفّ على ثلاثة أسطر في أسماء التطبيقات الطويلة. */
.admin-header h1 { font-size: clamp(1.35rem, 4.5vw, 1.75rem); overflow-wrap: anywhere; }

/* أزرار الرأس تملأ العرض على الهواتف بدل أن تتراصّ متلاصقة بأحجام متفاوتة. */
@media (max-width: 560px) {
    .admin-header { align-items: stretch; }
    .admin-header .cluster { width: 100%; }
    .admin-header .cluster > .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- جداول تتحوّل إلى بطاقات على الهاتف ---------- */
/* جدول بسبعة أعمدة لا يتّسع في 390px، فكان .table-wrap يمرّره أفقياً ويُخفي
   عمود الإجراءات كاملاً خارج الشاشة — يفتح المستخدم القائمة على هاتفه فلا يجد
   زرّ «تحرير» أصلاً. تحت 700px يصير كل صفّ بطاقة رأسية، ويُقرأ اسم كل حقل من
   السمة data-label بدل ترويسة الجدول المخفيّة. */
@media (max-width: 700px) {
    .table--stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .table--stack,
    .table--stack tbody,
    .table--stack tr,
    .table--stack td {
        display: block;
        width: 100%;
    }

    .table--stack tr {
        padding: .55rem 0;
        border-bottom: 1px solid var(--bs-gray-200);
    }

    .table--stack tbody tr:last-child { border-bottom: none; }
    .table--stack tbody tr:hover { background: transparent; }

    .table--stack td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .4rem 1rem;
        border-bottom: none;
        white-space: normal;
        text-align: start;
    }

    .table--stack td::before {
        content: attr(data-label);
        flex: none;
        font-weight: 800;
        color: var(--bs-gray-700);
    }

    /* خلية بلا عنوان (الإجراءات) تأخذ السطر كاملاً بأزرار مريحة للّمس. */
    .table--stack td:not([data-label])::before { content: none; }

    .table--stack td:not([data-label]) {
        justify-content: stretch;
        gap: .5rem;
        padding-top: .6rem;
    }

    .table--stack td:not([data-label]) > .btn { flex: 1 1 auto; justify-content: center; }

    /* لم يعد هناك ما يتمرّر أفقياً بعد التحوّل إلى بطاقات. */
    .table-wrap:has(.table--stack) { overflow-x: visible; }
}

/* ---------- التبويبات ---------- */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    border-bottom: 2px solid var(--bs-gray-200);
    margin-bottom: 1.6rem;
}

.tabs button {
    padding: .65rem 1.15rem;
    font: inherit;
    font-weight: 700;
    font-size: .93rem;
    color: var(--bs-gray-500);
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color var(--bs-transition), border-color var(--bs-transition);
}

.tabs button:hover { color: var(--bs-blue-700); }

.tabs button.is-active {
    color: var(--bs-blue-700);
    border-bottom-color: var(--bs-blue-600);
}

.tab-panel[hidden] { display: none; }

/* ---------- عرض الرموز السرّية ---------- */
.token-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.2rem;
    background: var(--bs-navy-950);
    color: var(--bs-azure-200);
    border-radius: var(--bs-radius);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 1.1rem;
    letter-spacing: .12em;
    direction: ltr;
    word-break: break-all;
}

.token-box .btn { letter-spacing: normal; }

/* min-width الافتراضية لعنصر flex هي auto، فسلسلة طويلة بلا فواصل تفرض عرضاً
   أكبر من الحاوية وتتسرّب خارج الشاشة. الصفر يسمح للكسر بالعمل فعلاً. */
.token-box__value { flex: 1 1 auto; min-width: 0; }

/* المفتاح 43 محرفاً بحجم 1.1rem وتباعد .12em يملأ ثلاثة أسطر على الهاتف
   ويدفع زرّ «نسخ» خارج الشاشة. يُصغَّر ويُشدّ تباعده على الشاشات الضيّقة. */
@media (max-width: 560px) {
    .token-box {
        font-size: .9rem;
        letter-spacing: .02em;
        padding: .8rem .9rem;
        gap: .55rem;
    }

    /* القيمة تأخذ سطراً كاملاً، والزرّ يهبط تحتها بعرض مريح للّمس. */
    .token-box__value { flex: 1 1 100%; }
}

/* ---------- الترقيم ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1.5rem; }

.pagination a,
.pagination span {
    min-width: 38px;
    padding: .35rem .7rem;
    text-align: center;
    font-size: .9rem;
    font-weight: 700;
    color: var(--bs-gray-700);
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-200);
    border-radius: var(--bs-radius-sm);
}

.pagination a:hover { color: var(--bs-blue-700); border-color: var(--bs-blue-600); }

.pagination .is-current {
    color: var(--bs-white);
    background: var(--bs-logo-gradient);
    border-color: transparent;
}

/* ---------- تفاصيل قابلة للطي ---------- */
details.detail-block {
    border: 1px solid var(--bs-gray-200);
    border-radius: var(--bs-radius);
    background: var(--bs-white);
    padding: .8rem 1.1rem;
    margin-bottom: .7rem;
}

details.detail-block > summary { cursor: pointer; font-weight: 700; }

details.detail-block pre {
    margin: .8rem 0 0;
    padding: .9rem;
    overflow-x: auto;
    background: var(--bs-gray-50);
    border-radius: var(--bs-radius-sm);
    font-size: .84rem;
    direction: ltr;
    text-align: left;
}

/* ---------- شاشة الدخول ---------- */
.auth-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(2rem, 5vw, 3.5rem);
}

.auth-brand__content { position: relative; z-index: 1; max-width: 44ch; }
.auth-brand h2 { color: var(--bs-white); }
.auth-brand p { color: rgba(255, 255, 255, .82); }

.auth-panel {
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 5vw, 3rem);
    background: var(--bs-white);
}

.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 { font-size: 1.75rem; }

.auth-brand__contact {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    font-size: .86rem;
    color: rgba(255, 255, 255, .7);
}

@media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand { min-height: 220px; }
    .auth-brand__contact { display: none; }
}

/* ---------- صفحة الخطأ ---------- */
.error-page {
    display: grid;
    place-items: center;
    min-height: 70vh;
    text-align: center;
}

.error-page__code {
    font-size: clamp(4rem, 16vw, 9rem);
    font-weight: 800;
    line-height: 1;
    background: var(--bs-logo-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- التنبيهات في اللوحة ---------- */
.notif {
    display: flex;
    gap: .9rem;
    padding: 1rem 1.2rem;
    border-inline-start: 4px solid var(--bs-gray-300);
    border-bottom: 1px solid var(--bs-gray-200);
    background: var(--bs-white);
}

.notif:last-child { border-bottom: 0; }
.notif.is-unread { background: #F5FAFF; }
.notif--warning { border-inline-start-color: var(--bs-warning); }
.notif--danger { border-inline-start-color: var(--bs-danger); }
.notif--success { border-inline-start-color: var(--bs-success); }
.notif--info { border-inline-start-color: var(--bs-azure-400); }
.notif__title { font-weight: 700; margin-bottom: .15rem; }
.notif__body { font-size: .9rem; color: var(--bs-gray-500); margin: 0; }
.notif__time { font-size: .8rem; color: var(--bs-gray-500); white-space: nowrap; }

/* ---------- مساعدات ---------- */
.w-auto { width: auto; }
.flex-1 { flex: 1; }
.gap-sm { gap: .5rem; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.text-end { text-align: end; }
.nowrap { white-space: nowrap; }
.fw-bold { font-weight: 800; }
.fs-sm { font-size: .87rem; }

.copy-hint {
    font-size: .8rem;
    color: var(--bs-success);
    opacity: 0;
    transition: opacity var(--bs-transition);
}

.copy-hint.is-visible { opacity: 1; }
/* ---------- تنبيهات لوحة الإدارة الحية ---------- */
.admin-toasts {
    position: fixed;
    inset-inline-end: 1.25rem;
    inset-block-end: 1.25rem;
    z-index: 1100;
    display: grid;
    gap: .65rem;
    width: min(360px, calc(100vw - 2rem));
    pointer-events: none;
}

.admin-toast {
    display: grid;
    gap: .25rem;
    padding: .9rem 1rem;
    color: var(--bs-navy, #071c42);
    background: color-mix(in srgb, white 94%, var(--bs-accent, #27b7ea));
    border: 1px solid color-mix(in srgb, var(--bs-accent, #27b7ea) 35%, white);
    border-radius: .85rem;
    box-shadow: 0 14px 34px rgba(7, 28, 66, .2);
    text-decoration: none;
    pointer-events: auto;
    animation: admin-toast-in .22s ease-out;
}

.admin-toast--danger { border-color: color-mix(in srgb, var(--bs-danger, #d52b3e) 55%, white); }
.admin-toast--warning { border-color: color-mix(in srgb, var(--bs-warning, #c98d00) 55%, white); }
.admin-toast strong { font-size: .9rem; }
.admin-toast span { color: var(--bs-gray-600, #53627c); font-size: .82rem; line-height: 1.5; }
.admin-toast.is-leaving { opacity: 0; transform: translateY(.5rem); transition: opacity .22s, transform .22s; }
@keyframes admin-toast-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .admin-toast { animation: none; } }

/* Marketplace: the browser display is informational; the server owns the
   authoritative snapshot saved in PurchaseRequest. */
.marketplace-total {
    display: grid;
    gap: .25rem;
    margin-top: .75rem;
    padding: .7rem .8rem;
    border: 1px solid color-mix(in srgb, var(--bs-primary) 20%, white);
    border-radius: .7rem;
    background: color-mix(in srgb, var(--bs-surface) 72%, white);
    font-size: .82rem;
}
.marketplace-total strong { padding-top: .25rem; border-top: 1px solid color-mix(in srgb, var(--bs-primary) 14%, white); color: var(--bs-primary); }