/* مكتبتي — مظهر بسيط، mobile-first، RTL. */

:root {
    --bg: #0b1020;
    --surface: #131a2e;
    --surface-2: #1b2440;
    --border: #273156;
    --text: #eef2ff;
    --text-dim: #9aa5c7;
    --accent: #38bdf8;
    --accent-ink: #04202c;
    --good: #34d399;
    --warn: #fbbf24;
    --danger: #fb7185;
    --admin: #c4b5fd;

    /* مشتقّات: خلفية خفيفة وحدّ من نفس اللون الدلالي — بتتبع الثيم لوحدها */
    --accent-tint: color-mix(in srgb, var(--accent) 14%, transparent);
    --accent-line: color-mix(in srgb, var(--accent) 32%, transparent);
    --good-tint: color-mix(in srgb, var(--good) 13%, transparent);
    --good-line: color-mix(in srgb, var(--good) 32%, transparent);
    --warn-tint: color-mix(in srgb, var(--warn) 13%, transparent);
    --warn-line: color-mix(in srgb, var(--warn) 32%, transparent);
    --danger-tint: color-mix(in srgb, var(--danger) 14%, transparent);
    --danger-line: color-mix(in srgb, var(--danger) 36%, transparent);
    --admin-tint: color-mix(in srgb, var(--admin) 18%, transparent);
    --admin-line: color-mix(in srgb, var(--admin) 40%, transparent);
    --neutral-tint: rgba(148, 163, 184, 0.18);
    /* زرار "جهّز مكتبتك" (E19) — تدرّج من التنبيه للخطر عشان يلفت العين، ونص غامق عليه */
    --setup-from: var(--warn);
    --setup-to: color-mix(in srgb, var(--warn) 55%, var(--danger));
    --setup-ink: #1c1100;

    /* ظلال وتغطية وتمييز الصف — ألوان مش دلالية بس لازم تتغيّر مع الثيم */
    --hover: rgba(255, 255, 255, 0.02);
    --shadow: rgba(0, 0, 0, 0.35);
    --shadow-strong: rgba(0, 0, 0, 0.5);
    --overlay: rgba(3, 6, 18, 0.7);

    color-scheme: dark;
    --radius: 14px;
    --side-w: 240px;
    --side-w-collapsed: 64px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* الثيم الفاتح (E12-S01) — بيتختار بـ data-theme="light" على <html>؛ الغامق هو الافتراضي.
   الألوان الدلالية متختارة من جديد للسطح الفاتح، مش منقولة: الـ accent / warn / good بتوع
   الغامق مابيعدّوش 4.5:1 كنص على أبيض. الأرقام متراجعة بسكربت تباين (شوف E12-S01). */
:root[data-theme="light"] {
    --bg: #f3f5fa;
    --surface: #ffffff;
    --surface-2: #e9edf6;
    --border: #cfd6e6;
    --text: #0f172a;
    --text-dim: #4a556f;
    --accent: #0369a1;
    --accent-ink: #ffffff;
    --good: #047857;
    --warn: #92400e;
    --danger: #be123c;
    --admin: #6d28d9;
    --neutral-tint: rgba(71, 85, 105, 0.14);
    --setup-ink: #ffffff;

    --hover: rgba(15, 23, 42, 0.04);
    --shadow: rgba(15, 23, 42, 0.14);
    --shadow-strong: rgba(15, 23, 42, 0.24);
    --overlay: rgba(15, 23, 42, 0.45);

    color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", Tahoma, "Cairo", "Noto Kufi Arabic", system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

#app {
    min-height: 100%;
}

a { color: var(--accent); }

h1, h2, h3 { margin: 0 0 0.5rem 0; }

button, input, select, textarea { font-family: inherit; }

.page {
    padding: calc(1rem + var(--safe-top)) 1rem calc(1.25rem + var(--safe-bottom));
    max-width: 640px;
    margin: 0 auto;
    min-height: 100vh;
}

/* الشاشات اللي فيها جداول (زي المكتبات) بتاخد عرض أكبر */
.page:has(.page-wide) { max-width: 1120px; }

.page-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.muted { color: var(--text-dim); }
.small { font-size: 0.82rem; }
.center { text-align: center; }

.stack { display: flex; flex-direction: column; gap: 0.6rem; }
.row { display: flex; align-items: center; gap: 0.6rem; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    border-radius: 10px;
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
}

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

.btn.ghost {
    background: transparent;
}

.btn.block { width: 100%; }
.btn.sm { padding: 0.4rem 0.7rem; font-size: 0.85rem; }

.field { display: flex; flex-direction: column; gap: 0.3rem; }

.field label { font-size: 0.85rem; color: var(--text-dim); }

input[type=text], input[type=number], input[type=date], input[type=search],
input[type=url], input[type=password], input[type=email], select, textarea {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    width: 100%;
}

/* نص مكتوب بلغة غير لغة الواجهة (E14-S08): عنوان كتاب عربي في واجهة إنجليزية، أو اسم لاتيني في
   واجهة عربية — الحقل بياخد اتجاهه ومحاذاته من أول حرف فيه، زي dir="auto". الحقول اللي عليها
   dir صريح (إيميل، ISBN، slug) بتفضل زي ما هي. */
:is(input[type=text], input[type=search], textarea):not([dir]) {
    unicode-bidi: plaintext;
    text-align: start;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* حقل فيه خطأ تحقّق — الإطار + الرسالة تحته */
input.invalid, select.invalid, textarea.invalid {
    border-color: var(--danger);
}

input.invalid:focus, select.invalid:focus, textarea.invalid:focus {
    outline-color: var(--danger);
}

.field-error { font-size: 0.8rem; color: var(--danger); }
.field-hint { font-size: 0.8rem; color: var(--text-dim); }
.field-hint.warn { color: var(--warn); }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge.available { background: var(--good-tint); color: var(--good); }
.badge.lent-out { background: var(--warn-tint); color: var(--warn); }
.badge.borrowed-in { background: var(--accent-tint); color: var(--accent); }
.badge.overdue { background: var(--danger-tint); color: var(--danger); }
/* مدير النظام — صلاحية على المنصة، بلون مختلف عن كل أدوار المكتبة (E11-S01) */
.badge.admin { background: var(--admin-tint); color: var(--admin); border: 1px solid var(--admin-line); }
.badge.custom-role { background: var(--neutral-tint); color: var(--text); }

.alert {
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.alert.error { background: var(--danger-tint); color: var(--danger); border: 1px solid var(--danger-line); }
.alert.info { background: var(--accent-tint); color: var(--accent); border: 1px solid var(--accent-line); }
.alert.success { background: var(--good-tint); color: var(--good); border: 1px solid var(--good-line); }
.alert.warn { background: var(--warn-tint); color: var(--warn); border: 1px solid var(--warn-line); }

.alert-source { opacity: 0.75; font-size: 0.85em; margin-inline-start: 0.35rem; }

/* المكتبة التجريبية (E15-S03): سطر فوق كل صفحة، والأزرار بتنزل تحته على الموبايل */
.sandbox-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; }

/* ===== شاشة البداية (قبل ما Blazor يشتغل) ===== */

.boot-splash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--bg);
    color: var(--text);
}

.boot-splash-mark { font-size: 3rem; }
.boot-splash-title { font-size: 1.4rem; font-weight: 700; }

.loading-progress {
    position: relative;
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    margin-top: 0.5rem;
}

.loading-progress circle {
    fill: none;
    stroke: var(--border);
    stroke-width: 0.5rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--accent);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    inset: auto 0 -2rem 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "بيحمّل...");
}

/* ===== أخطاء Blazor ===== */

#blazor-error-ui {
    color-scheme: dark;
    background: #7f1d1d;
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; left: 0.75rem; top: 0.5rem; }
#blazor-error-ui .reload { color: #fff; text-decoration: underline; margin-inline-start: 0.5rem; }

.blazor-error-boundary {
    background: #7f1d1d;
    padding: 1rem;
    border-radius: var(--radius);
    color: #fff;
}

.blazor-error-boundary::after { content: "حصل خطأ. جرّب تاني."; }

/* ===== الشريط الجانبي ===== */

/* في بداية اتجاه القراءة: يمين في العربي، شمال في الإنجليزي. */
.side-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: var(--side-w);
    padding: calc(0.75rem + var(--safe-top)) 0.6rem calc(0.75rem + var(--safe-bottom));
    background: var(--surface);
    border-inline-end: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 20;
    transition: width 0.18s ease;
}

.app-main {
    margin-inline-start: var(--side-w);
    transition: margin-inline-start 0.18s ease;
}

.side-nav-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.45rem 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
}

.side-nav-logo { font-size: 1.5rem; line-height: 1; }
.side-nav-title { font-weight: 700; font-size: 1.1rem; flex: 1; }

.side-nav-toggle {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-dim);
    border-radius: 8px;
    width: 1.9rem;
    height: 1.9rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.side-nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.side-nav-bottom { margin-top: auto; }

/* زرار الثيم (E12-S02) عنصر في القائمة زي اللينكات — نفس الشكل بالظبط */
.side-nav-btn { width: 100%; background: none; border: 0; font: inherit; cursor: pointer; text-align: start; }

.side-nav-links :is(a, .side-nav-btn) {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.65rem;
    border-radius: 10px;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.95rem;
    white-space: nowrap;
}

.side-nav-links :is(a, .side-nav-btn):hover { background: var(--surface-2); color: var(--text); }

.side-nav-links :is(a, .side-nav-btn).active {
    background: var(--accent-tint);
    color: var(--accent);
    font-weight: 600;
}

.side-nav-icon { font-size: 1.2rem; width: 1.6rem; text-align: center; flex: none; }

/* ----- القائمة متعددة المستويات (E12-S06) -----
   مفتوحة: عنوان المجموعة بيفتح ويقفل صفحاتها تحته بمسافة وخط. على الـ rail (مصغّرة أو تحت
   900px): أيقونة المجموعة بتطلّع صفحاتها في قائمة طايرة جنب الشريط (hover / focus — اللمس
   بيدّي focus للزرار). */
.nav-group-children {
    display: none;
    flex-direction: column;
    gap: 0.15rem;
    margin-inline-start: 1.4rem;
    padding-inline-start: 0.4rem;
    border-inline-start: 1px solid var(--border);
}

.nav-group.open .nav-group-children { display: flex; }
.side-nav-links .nav-group-children a { padding: 0.45rem 0.6rem; font-size: 0.9rem; }
.nav-flyout-title { display: none; }

.nav-chevron { font-size: 0.8rem; transition: transform 0.15s ease; }
.nav-group:not(.open) .nav-chevron { transform: rotate(-90deg); }
[dir="rtl"] .nav-group:not(.open) .nav-chevron { transform: rotate(90deg); }

/* مجموعة مقفولة فيها الصفحة الحالية: العنوان نفسه بيتعلّم */
.side-nav-links .nav-group.holds-active:not(.open) > .nav-group-head { color: var(--accent); font-weight: 600; }

.side-nav.collapsed .nav-group { position: relative; }
.side-nav.collapsed .nav-group.open .nav-group-children { display: none; }
.side-nav.collapsed .nav-group-children {
    position: absolute;
    top: 0;
    inset-inline-start: calc(100% + 0.3rem);
    min-width: 13rem;
    margin: 0;
    padding: 0.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    box-shadow: 0 12px 32px var(--shadow-strong);
    z-index: 30;
}
/* جسر بين الأيقونة والقائمة عشان الماوس مايقعش في الفراغ */
.side-nav.collapsed .nav-group-children::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: -0.5rem; width: 0.5rem; }
.side-nav.collapsed .nav-group:is(:hover, :focus-within) > .nav-group-children { display: flex; }
.side-nav.collapsed .side-nav-links .nav-group-children a { justify-content: flex-start; padding-inline: 0.6rem; }
.side-nav.collapsed .nav-flyout-title { display: block; padding: 0.3rem 0.5rem; font-size: 0.75rem; color: var(--text-dim); }
.side-nav.collapsed .nav-group.holds-active > .nav-group-head { background: var(--accent-tint); color: var(--accent); }

.side-nav-user {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.35rem 0.1rem;
    border-top: 1px solid var(--border);
}

.side-nav-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex: none;
    object-fit: cover;
}

.side-nav-user-text { min-width: 0; }
.side-nav-user-name { font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-nav-user-tenant { color: var(--text-dim); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-nav-user-tenant.problem { color: var(--warn); }

/* ----- الحالة المصغّرة: أيقونات بس + tooltip ----- */

.side-nav.collapsed { width: var(--side-w-collapsed); }
.side-nav.collapsed ~ .app-main { margin-inline-start: var(--side-w-collapsed); }

.side-nav.collapsed .side-nav-label { display: none; }
.side-nav.collapsed .side-nav-brand { flex-direction: column; padding-inline: 0; }
.side-nav.collapsed .side-nav-links :is(a, .side-nav-btn) { justify-content: center; padding-inline: 0; }
.side-nav.collapsed .side-nav-user { justify-content: center; padding-inline: 0; }

.side-nav.collapsed .side-nav-links :is(a, .side-nav-btn)[data-label]:hover::after,
.side-nav.collapsed .side-nav-user[data-label]:hover::after {
    content: attr(data-label);
    position: absolute;
    inset-inline-start: calc(100% + 0.6rem);
    top: 50%;
    transform: translateY(-50%);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 14px var(--shadow);
}

/* الموبايل: دايمًا rail، والزرار مالوش لازمة */
@media (max-width: 899px) {
    .side-nav { width: var(--side-w-collapsed); }
    .app-main { margin-inline-start: var(--side-w-collapsed); }
    .side-nav .side-nav-label { display: none; }
    .side-nav .side-nav-brand { flex-direction: column; padding-inline: 0; }
    .side-nav .side-nav-links :is(a, .side-nav-btn) { justify-content: center; padding-inline: 0; }
    .side-nav .side-nav-user { justify-content: center; padding-inline: 0; }
    .side-nav-toggle { display: none; }
    .page { padding-inline: 0.75rem; }

    /* نفس القائمة الطايرة بتاعة الـ rail المصغّر (E12-S06) */
    .side-nav .nav-group { position: relative; }
    .side-nav .nav-group.open .nav-group-children { display: none; }
    .side-nav .nav-group-children {
        position: absolute;
        top: 0;
        inset-inline-start: calc(100% + 0.3rem);
        min-width: 13rem;
        margin: 0;
        padding: 0.35rem;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface-2);
        box-shadow: 0 12px 32px var(--shadow-strong);
        z-index: 30;
    }
    .side-nav .nav-group-children::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: -0.5rem; width: 0.5rem; }
    .side-nav .nav-group:is(:hover, :focus-within) > .nav-group-children { display: flex; }
    .side-nav .side-nav-links .nav-group-children a { justify-content: flex-start; padding-inline: 0.6rem; }
    .side-nav .nav-flyout-title { display: block; padding: 0.3rem 0.5rem; font-size: 0.75rem; color: var(--text-dim); }
    .side-nav .nav-group.holds-active > .nav-group-head { background: var(--accent-tint); color: var(--accent); }
}

/* ===== الماسح ===== */

.scanner-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 62vh;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}

.scanner-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scanner-reticle {
    position: absolute;
    inset: 38% 8%;
    border: 2px solid var(--accent);
    border-radius: 12px;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.scanner-hint {
    position: absolute;
    bottom: 0.75rem;
    inset-inline: 0.75rem;
    text-align: center;
    color: #fff;
    font-size: 0.82rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    pointer-events: none;
}

.scanner-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 0.9rem;
    padding: 1.5rem;
    text-align: center;
}

/* ===== قوائم ===== */

.list-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
}

.list-row:last-child { border-bottom: none; }

.list-row-title { font-weight: 600; }
.list-row-sub { color: var(--text-dim); font-size: 0.82rem; }

.spinner {
    width: 1.4rem;
    height: 1.4rem;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ===== عناوين وتبويبات ===== */

.section-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.25rem; }
.text { color: var(--text); }
.nowrap { white-space: nowrap; }

.tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.tabs .tab {
    padding: 0.6rem 0.9rem;
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    font-size: 0.92rem;
}

.tabs .tab:hover { color: var(--text); }
.tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* تبويبات الإعدادات (E12-S05): كانت بتتقص على الديسكتوب — الصفحة كانت 640px في تبويب و 1120px
   في تبويب تاني، والصف بيتمرّر من غير شريط ظاهر، فتبويبات المنصة الأخيرة (المستخدمين، الطلبات)
   ماكانتش بتبان. دلوقتي: عرض واحد لكل صفحات الإعدادات (الصف مايتحركش من تبويب لتبويب)، المحتوى
   الضيق (الحساب، النظام…) فاضل 640px، والصف بيلف لسطر تاني على الديسكتوب بدل ما يستخبى.
   تحت 900px بيفضل صف واحد بيتمرّر (E12-S04) — بشريط رفيع باين عشان يبان إن فيه باقي. */
.page:has(.settings-tabs) { max-width: 1120px; }
.page:has(.settings-tabs):not(:has(.page-wide)) > :not(.page-title, .settings-tabs, .sandbox-banner) { max-width: 640px; }
.tabs.settings-tabs { scrollbar-width: thin; }

@media (min-width: 900px) {
    .tabs.settings-tabs { flex-wrap: wrap; overflow-x: visible; }
}

.page-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.page-header p { margin: 0; }

.back-link { display: inline-block; margin-bottom: 0.75rem; text-decoration: none; }

/* ===== فلاتر ===== */

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.filters .field { min-width: 11rem; }
.filters .field.grow { flex: 1 1 16rem; }

/* ===== جداول ===== */

.table-card { padding: 0; overflow: hidden; }
.table-wrap { overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table th {
    text-align: start;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--text-dim);
    background: var(--surface-2);
    padding: 0.65rem 0.9rem;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.data-table td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--hover); }
.stale, .data-table tr.stale { opacity: 0.5; transition: opacity 0.15s; }

/* رسالة طلب التواصل (E13-S06) — نص من زائر: السطور زي ما اتكتبت، والكلمة الطويلة ماتكسرش الكارت */
.request-message { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.data-table .num { text-align: center; font-variant-numeric: tabular-nums; }
.data-table a.list-row-title { color: var(--text); text-decoration: none; }
.data-table a.list-row-title:hover { color: var(--accent); }

.data-table .name-col { min-width: 11rem; }
.data-table .slug { white-space: nowrap; }
.data-table .slug .badge { margin-inline-start: 0.35rem; }

.row-actions { display: flex; gap: 0.35rem; justify-content: flex-end; flex-wrap: nowrap; }
.actions-col { text-align: end; }

/* ===== ترقيم الصفحات ===== */

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
}

.table-card .pager { border-top: 1px solid var(--border); }
.pager-page { color: var(--text-dim); white-space: nowrap; }

/* ===== نوافذ الحوار ===== */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 50;
}

.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 100%;
    max-width: 460px;
    /* dvh: الارتفاع الفعلي والشريط بتاع المتصفح ظاهر. الجسم هو اللي بيتسحب (تحت)، فالعنوان
       والأزرار بيفضلوا ظاهرين مهما المحتوى طال (E12-S04). */
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem - var(--safe-top) - var(--safe-bottom));
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px var(--shadow-strong);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border);
}

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

.modal-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.1rem;
    cursor: pointer;
}

.modal-body { padding: 1rem; overflow-y: auto; min-height: 0; }
.modal-header, .modal-footer { flex: 0 0 auto; }
.modal-close { min-width: 44px; min-height: 44px; }
.modal-body .alert { margin-bottom: 0; }

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
    border-top: 1px solid var(--border);
}

/* ===== إحصائيات وتفاصيل ===== */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.stat-grid .card { margin-bottom: 0; }
.stat-value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* تواريخ وأرقام جوه نص عربي — من غير عزل الـ bidi بتتقلب (16-10-2026) */
.ltr { direction: ltr; unicode-bidi: isolate; }

.stat-label { color: var(--text-dim); font-size: 0.82rem; }

.details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.6rem 1.25rem;
    margin: 0;
}

.details dt { color: var(--text-dim); font-size: 0.85rem; }
.details dd { margin: 0; }

/* ===== خطة المكتبة وحدودها (E13-S12) ===== */

/* عدّاد نص دايرة (UsageGauge). اللون على القوس بس — الأرقام بلون النص. الخلفية درجة أفتح من
   نفس لون القوس، فالحالة بتتقري على العدّاد كله. اللون العادي لون الرسوم (--viz-1) مش الـ accent. */
.gauge-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1rem; }

.gauge { --gauge: var(--viz-1); display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center; }
.gauge.near { --gauge: var(--warn); }
.gauge.full { --gauge: var(--danger); }
.gauge svg { width: 100%; max-width: 9rem; height: auto; display: block; overflow: visible; }
/* في الجدول العدّاد بمقاس ثابت — على الموبايل الجدول بيتسحب أفقي بدل ما العدّادات تتعصر */
.gauge.compact { min-width: 6.5rem; }
.gauge.compact svg { width: 5.5rem; }
.gauge.compact .gauge-note { white-space: nowrap; }
.gauge-track, .gauge-fill { fill: none; stroke-width: 8; stroke-linecap: round; }
.gauge-track { stroke: color-mix(in srgb, var(--gauge) 20%, transparent); }
.gauge-fill { stroke: var(--gauge); }
.gauge-value { fill: var(--text); font-size: 17px; font-weight: 700; direction: ltr; unicode-bidi: isolate; }
.gauge-open { font-size: 1.6rem; line-height: 2.2rem; color: var(--text-dim); }
.gauge-label { font-size: 0.9rem; }
.gauge-count { font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.gauge.near .gauge-note { color: var(--warn); }
.gauge.full .gauge-note { color: var(--danger); }
.consumption-table td { vertical-align: middle; }

.plan-current-name { font-size: 1.2rem; }

.plan-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.plan-cards .card { margin-bottom: 0; }
.plan-card.current { border-color: var(--accent-line); }
.branch-link { margin-inline-end: 0.6rem; }
.plan-limits { margin: 0; padding-inline-start: 1.1rem; font-size: 0.9rem; }

/* حقلين جنب بعض في النوافذ — عمود واحد على الشاشات الضيقة */
.field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; }


/* ===== صفحات الدخول (PlainLayout) ===== */

.auth-page {
    /* الباقي من الارتفاع لسطر الحقوق تحت (.auth-footer) عشان الصفحة ماتتسحبش من غير داعي */
    min-height: calc(100vh - 3rem - var(--safe-bottom));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(1rem + var(--safe-top)) 1rem 1.25rem;
}

.auth-footer {
    height: calc(3rem + var(--safe-bottom));
    padding: 0 1rem var(--safe-bottom);
    text-align: center;
    color: var(--text-dim);
    font-size: 0.82rem;
}

/* زرار الثيم في ركن صفحات ما قبل الدخول — على اليسار الفعلي، زي القائمة الجانبية */
.theme-toggle.corner {
    position: fixed;
    top: calc(0.75rem + var(--safe-top));
    left: 0.75rem;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 1.15rem;
    cursor: pointer;
}
.theme-toggle.corner:hover { background: var(--surface-2); }

/* اختيار اللغة (E14-S02): في الركن جنب زرار الثيم، وصف في قائمة المستخدم و"المزيد" */
.lang-picker { display: inline-flex; align-items: center; gap: 0.4rem; }
.lang-picker select { width: auto; min-width: 0; padding: 0.35rem 0.6rem; font-size: 0.9rem; }
.lang-picker.corner {
    position: fixed;
    top: calc(0.75rem + var(--safe-top));
    left: 4rem;
    height: 44px;
}
.lang-picker.corner .lang-picker-icon { display: none; }
.lang-picker.menu { display: flex; padding: 0.35rem 0.5rem; }
.lang-picker.menu select { flex: 1; }
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.auth-card {
    width: 100%;
    max-width: 24rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-brand { text-align: center; }
.auth-logo { font-size: 2.5rem; display: block; }
.auth-title { font-size: 1.3rem; font-weight: 700; margin: 0.35rem 0 0.25rem; }
.auth-brand p { margin: 0; }

.divider { border: none; border-top: 1px solid var(--border); margin: 0.25rem 0; }

.link-btn {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    padding: 0;
    font-size: inherit;
}

/* أزرار المزوّدين — كل واحد بلونه المعروف عشان يتعرف من أول نظرة */
.btn.provider {
    width: 100%;
    justify-content: flex-start;
    gap: 0.75rem;
    text-decoration: none;
    padding: 0.7rem 0.9rem;
}

.provider-mark {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex: none;
    background: #fff;
    color: #111;
    direction: ltr;
}

.btn.provider.google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.btn.provider.google .provider-mark { background: #4285f4; color: #fff; }
.btn.provider.facebook { background: #1877f2; color: #fff; border-color: #1877f2; }
.btn.provider.facebook .provider-mark { background: #fff; color: #1877f2; }
.btn.provider.linkedin { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.btn.provider.linkedin .provider-mark { background: #fff; color: #0a66c2; }
.btn.provider.github { background: #24292f; color: #fff; border-color: #424a53; }
.btn.provider.github .provider-mark { background: #fff; color: #24292f; }
.btn.provider.dev { background: var(--surface-2); color: var(--text); }

/* شاشة اختيار المكتبة — آخر مكتبة اشتغل عليها الجهاز متعلّمة بحدود مش بلون الزرار كله،
   عشان الدور/السبب الرمادي يفضل مقروء */
.btn.tenant-choice { justify-content: space-between; gap: 0.75rem; }
.btn.tenant-choice.last { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* ===== كارت المستخدم + قائمته في الشريط الجانبي ===== */

.side-nav-user-wrap { position: relative; margin-top: 0.25rem; }

/* الكارت بقى زرار (بيفتح القائمة) — بنشيل شكل الزرار الافتراضي */
button.side-nav-user {
    width: 100%;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    text-align: start;
    font: inherit;
}

button.side-nav-user:hover { background: var(--surface-2); }

.side-nav-menu {
    position: absolute;
    bottom: calc(100% + 0.4rem);
    inset-inline-start: 0.5rem;
    inset-inline-end: 0.5rem;
    min-width: 12rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.35rem;
    box-shadow: 0 12px 32px var(--shadow-strong);
    z-index: 20;
}

/* على الـ rail المقفول القائمة بتطلع جنب الشريط مش جواه */
.side-nav.collapsed .side-nav-menu {
    inset-inline-start: calc(100% + 0.4rem);
    inset-inline-end: auto;
    width: 14rem;
}

.side-nav-menu-title {
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-nav-menu-sep { border-top: 1px solid var(--border); margin: 0.35rem 0; }

.side-nav-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: none;
    border: none;
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    font: inherit;
    text-align: start;
}

.side-nav-menu-item:hover:not(:disabled) { background: var(--surface); }
.side-nav-menu-item:disabled { color: var(--text-dim); cursor: default; }

/* ===== جدول الأعضاء ===== */

.member-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
    flex: none;
}

/* ===== الأدوار والصلاحيات (E11) ===== */

.side-nav-user-admin { margin-top: 0.2rem; font-size: 0.75rem; }
.side-nav.collapsed .side-nav-user-admin { display: none; }

.tab.admin-tab .badge { font-size: 0.65rem; margin-inline-start: 0.25rem; padding: 0.05rem 0.4rem; }

.perm-matrix th.center, .perm-matrix td.center { text-align: center; }
.perm-matrix .perm-yes { color: var(--good); font-weight: 700; }
.perm-matrix .perm-no { color: var(--text-dim); }
.perm-matrix .perm-group-row td {
    background: var(--surface-2);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-dim);
}
.perm-matrix .center-actions { justify-content: center; margin-top: 0.3rem; }

.perm-group {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem 0.65rem;
    margin: 0 0 0.6rem;
}
.perm-group legend { font-size: 0.8rem; color: var(--text-dim); padding: 0 0.35rem; }
.perm-check { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; cursor: pointer; }
.perm-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }

.member-avatar.lg { width: 3.5rem; height: 3.5rem; }

/* ===== القراءات والملاحظات على صفحة الكتاب (E07-S05) ===== */
.stars { display: inline-flex; gap: 0.15rem; direction: ltr; }
.stars .star { background: none; border: none; padding: 0.1rem; font-size: 1.5rem; line-height: 1; color: var(--border); cursor: pointer; }
.stars .star.on { color: var(--warn); }
.stars.readonly .star { cursor: default; font-size: 1rem; padding: 0; }
.note-content { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.note-content.quote { border-inline-start: 3px solid var(--accent); padding-inline-start: 0.75rem; font-style: italic; }

/* ===== ملصقات الباركود (E04-S06) — فرخ A4 بـ 3×8 ملصقات 63.5×33.9 مم (زي Avery L7159) ===== */
.label-sheet-wrap { overflow-x: auto; background: #fff; border-radius: var(--radius); padding: 4mm; }
.label-sheet {
    display: grid;
    grid-template-columns: repeat(3, 63.5mm);
    grid-auto-rows: 33.9mm;
    column-gap: 2.5mm;
    width: max-content;
    direction: ltr;
    color: #000;
}
.label {
    box-sizing: border-box;
    padding: 2mm 3mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6mm;
    overflow: hidden;
    outline: 1px dashed #c7cbe0;
}
/* 82% عشان الهامش الأبيض حوالين الباركود (quiet zone) يبقى ~8 مم من كل ناحية — Code128 محتاج ~10 خطوط */
.label svg { width: 82%; height: 14mm; display: block; margin: 0 auto; }
.label-number { font-family: ui-monospace, monospace; font-size: 10pt; font-weight: 700; text-align: center; letter-spacing: 0.04em; }
.label-title { font-size: 7.5pt; direction: rtl; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media print {
    @page { size: A4; margin: 12.5mm 7mm 12mm; }
    body { background: #fff !important; }
    .side-nav, .no-print, #blazor-error-ui { display: none !important; }
    .app-main { margin: 0 !important; }
    .page { max-width: none; padding: 0; min-height: 0; }
    .label-sheet-wrap { padding: 0; overflow: visible; border-radius: 0; }
    .label { outline: none; }
}

/* ===== الرسوم البيانية (E07-S06) — سلسلة واحدة بلون واحد. #3987e5 اتجرّب على سطح
   الكروت الغامق (#131a2e): جوه نطاق الإضاءة، وتباين ≥ 3:1. الـ accent نفسه (#38bdf8)
   فاتح زيادة كعلامة بيانات. النص عمره ما بيلبس لون البيانات. ===== */
:root { --viz-1: #3987e5; --viz-1-hover: #5b9ef0; }
:root[data-theme="light"] { --viz-1: #2563eb; --viz-1-hover: #1d4ed8; }
.viz-card { margin: 0 0 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 0.9rem 0.6rem; }
.viz-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4rem; }
.viz-empty { padding: 1.5rem 0; text-align: center; }
.viz-plot { position: relative; }
.viz-plot svg { width: 100%; height: auto; display: block; overflow: visible; }
.viz-grid { stroke: var(--border); stroke-width: 1; }
.viz-axis { stroke: var(--text-dim); stroke-width: 1; opacity: 0.5; }
.viz-tick { fill: var(--text-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.viz-value { fill: var(--text); font-size: 14px; font-weight: 600; }
.viz-bar { fill: var(--viz-1); }
.viz-bar.hover { fill: var(--viz-1-hover); }
.viz-hit { fill: transparent; cursor: default; outline: none; }
.viz-hit:focus-visible { stroke: var(--text-dim); stroke-width: 1; }
.viz-tooltip {
    position: absolute; transform: translateX(-50%);
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
    padding: 0.3rem 0.55rem; font-size: 0.85rem; white-space: nowrap; pointer-events: none; z-index: 2;
}
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.85rem; }
.stat-tile .stat-label { color: var(--text-dim); font-size: 0.82rem; }
.stat-tile .stat-value { font-size: 1.5rem; font-weight: 600; margin-top: 0.15rem; }
.stat-tile .stat-sub { color: var(--text-dim); font-size: 0.8rem; }
.hbars { display: grid; gap: 0.45rem; }
.hbar-row { display: grid; grid-template-columns: minmax(6rem, 34%) 1fr; align-items: center; gap: 0.6rem; }
.hbar-label { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { display: flex; align-items: center; gap: 0.4rem; }
.hbar-fill { height: 14px; background: var(--viz-1); border-radius: 4px 0 0 4px; min-width: 2px; }
.hbar-value { font-size: 0.85rem; font-variant-numeric: tabular-nums; }
/* تقدّم القراءة (E07-S13): شريط بيتملي من اليمين (RTL) بلون الرسوم، والرقم مكتوب جنبه دايمًا */
.read-progress { display: grid; gap: 0.3rem; }
.read-progress-text { font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.read-progress-track { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text-dim) 22%, transparent); overflow: hidden; }
.read-progress-fill { display: block; height: 100%; background: var(--viz-1); border-radius: 4px; }
.reading-now { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem; margin-bottom: 0.6rem; }
.reading-now-item { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0; color: inherit; text-decoration: none; min-width: 0; }
.reading-now-item:hover { border-color: var(--accent); }
.reading-now-body { flex: 1; min-width: 0; display: grid; gap: 0.25rem; }
.reading-now-title { font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* على الموبايل الـ SVG بيتصغّر لحوالي 0.6 — نكبّر نص المحاور عشان يفضل مقروء (~11px) */
@media (max-width: 600px) {
    .viz-tick { font-size: 18px; }
    .viz-value { font-size: 19px; }
    /* 12 اسم شهر بالخط ده بيلزقوا في بعض — كل تاني شهر، وآخر شهر دايمًا ظاهر */
    .viz-tick.minor { display: none; }
}

/* ===== الصفحة الرئيسية (E07-S07) ===== */
.home-actions { margin-bottom: 1rem; gap: 0.5rem; }
a.stat-tile { color: inherit; text-decoration: none; }
a.stat-tile:hover { border-color: var(--accent); }
.shelf { margin-bottom: 1.25rem; }
.shelf-title { font-size: 1.05rem; margin: 0 0 0.5rem; }
.shelf-row { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.4rem; scroll-snap-type: x proximity; }
/* العرض ثابت على عرض الغلاف (E07-S10): من غير min-width: 0 عنصر الـ flex مابيصغرش عن أطول
   سطر جواه، وسطر المؤلف nowrap — فعنوان أو مؤلف طويل كان بيعرّض الكارت كله ويبعد اللي جنبه. */
.shelf-book { flex: 0 0 104px; width: 104px; min-width: 0; color: inherit; text-decoration: none; scroll-snap-align: start; }
.shelf-book-title { font-size: 0.85rem; font-weight: 600; margin-top: 0.35rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.shelf-book-sub, .shelf-book-meta { font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf-book:hover .book-cover { border-color: var(--accent); }
/* تلات أعداد في صف واحد حتى على الموبايل — من غير واحد يتيم تحت */
.home-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-tiles .stat-tile { padding: 0.6rem 0.65rem; }
.home-tiles .stat-value { font-size: 1.3rem; }

/* ===== الإعارات المتأخرة (E06-S06) — لون "خطر" + أيقونة/كلمة، مش لون لوحده ===== */
.overdue-card { border-inline-start: 3px solid var(--danger); }
.overdue-text, .stat-tile .stat-sub.overdue-text { color: var(--danger); }
.filter-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.filter-chips .btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* القيم المعزولة (تواريخ، أرقام، slugs) قصيرة — متتكسرش في نص السطر (2026- / 09-19) */
bdi.ltr { white-space: nowrap; }

/* ===== الطبعة على النسخة (E03-S11) ===== */
.edition-fields { border: 1px dashed var(--border); border-radius: 10px; padding: 0.5rem 0.75rem; }
.edition-fields > summary { cursor: pointer; color: var(--text-dim); }

/* ===== غلاف الكتاب (E03-S10) — نسبة 2:3 في كل المقاسات ===== */
.book-cover { flex: 0 0 auto; border-radius: 8px; object-fit: cover; display: block; background: var(--surface-2); border: 1px solid var(--border); }
/* غلاف بديل (E07-S11): نفس مقاس الغلاف الحقيقي، بأول حرف من العنوان، ولون من العنوان نفسه
   (--cover-hue من BookCover.razor) — صف كتب من غير أغلفة مايبقاش صف مربعات رمادي زي بعض.
   الدرجة بس هي اللي جاية من الكود؛ الإضاءة والتشبّع هنا عشان الثيم يقدر يغيّرهم. */
.book-cover.placeholder {
    display: flex; align-items: center; justify-content: center; font-weight: 700; line-height: 1; user-select: none;
    background: linear-gradient(160deg, hsl(var(--cover-hue, 220) 38% 30%), hsl(var(--cover-hue, 220) 42% 20%));
    border-color: hsl(var(--cover-hue, 220) 40% 42%);
    color: hsl(var(--cover-hue, 220) 70% 90%);
    box-shadow: inset -5px 0 0 hsl(var(--cover-hue, 220) 40% 16% / 0.55); /* الكعب على اليمين — الكتاب العربي */
}
.book-cover.sm { width: 40px; height: 60px; border-radius: 5px; font-size: 1.1rem; }
.book-cover.md { width: 104px; height: 156px; font-size: 2.4rem; }
.book-cover.lg { width: 96px; height: 144px; font-size: 2.2rem; }
.book-head { display: flex; gap: 0.9rem; align-items: flex-start; }
.cover-edit { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; width: 96px; }
.cover-edit .btn { justify-content: center; padding-inline: 0.3rem; }
.cover-pick { cursor: pointer; }
.cover-pick input[type="file"] { display: none; }
.cover-pick.disabled { opacity: 0.6; pointer-events: none; }
.spinner.sm { display: inline-block; width: 0.9rem; height: 0.9rem; border-width: 2px; vertical-align: middle; }
.list-row .book-cover.sm { margin-inline-end: 0.2rem; }
/* .list-row بيصفّر الحشو الجانبي — جوه كارت (نتايج البحث) لازم يرجع */
.card.list-row { padding: 0.7rem 0.9rem; }

/* ===== صفحة الترحيب بعد التسجيل (E18-S05) ===== */
.welcome { max-width: 640px; margin: 0 auto; }
.welcome-head { text-align: center; margin-bottom: 1.25rem; }
.welcome-icon { font-size: 2.6rem; }
.welcome-choices { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.welcome-choice { margin: 0; display: flex; align-items: center; gap: 0.9rem; color: inherit; text-decoration: none; padding: 1rem; }
.welcome-choice:hover, .welcome-choice:focus-visible { border-color: var(--accent); }
.welcome-choice.recommended { border-color: var(--accent-line); background: var(--accent-tint); }
.welcome-choice-icon { font-size: 2rem; }
.welcome-choice-title { display: block; font-weight: 700; font-size: 1.05rem; }
.welcome-choice-hint { display: block; font-size: 0.85rem; color: var(--text-dim); margin: 0.15rem 0 0.3rem; }

/* ===== تجهيز المكتبة (E19) ===== */
.setup-cta {
    display: flex; width: 100%; gap: 0.75rem; justify-content: flex-start; text-align: start;
    margin-bottom: 0.75rem; padding: 0.85rem 1rem;
    background: linear-gradient(120deg, var(--setup-from), var(--setup-to));
    border-color: var(--setup-from); color: var(--setup-ink);
    box-shadow: 0 4px 14px var(--shadow);
}
.setup-cta:hover { filter: brightness(1.05); }
.setup-cta-icon { font-size: 1.5rem; }
.setup-cta-title { display: block; font-weight: 700; font-size: 1.02rem; }
.setup-cta-hint { display: block; font-size: 0.82rem; opacity: 0.85; margin-top: 0.15rem; }
.setup-more { border-color: var(--warn-line); background: var(--warn-tint); color: var(--text); }
.setup-banner { display: flex; gap: 0.6rem; align-items: flex-start; }
.setup-banner a { color: inherit; font-weight: 600; }
.setup-search { position: relative; }
.setup-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.75rem; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.4rem 0.25rem 0.7rem;
    border-radius: 999px; background: var(--accent-tint); border: 1px solid var(--accent-line); font-size: 0.85rem;
}
.filter-chip button { background: none; border: none; color: inherit; cursor: pointer; font-size: 0.9rem; padding: 0 0.25rem; }
.facet-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.facet-list .btn .facet-count { color: var(--text-dim); font-size: 0.78rem; }
.setup-finish {
    position: sticky; bottom: calc(0.5rem + var(--safe-bottom)); z-index: 5;
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: space-between;
    margin-top: 1rem; border-color: var(--good-line); box-shadow: 0 6px 18px var(--shadow-strong);
}

/* شبكة كتب بالأغلفة — "كتبي" (عرض الشبكة) وتجهيز المكتبة */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.book-tile {
    position: relative; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0;
    padding: 0.5rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
    color: inherit; text-decoration: none; text-align: start; font: inherit; cursor: pointer;
    transition: opacity 0.25s, transform 0.25s, border-color 0.15s;
}
.book-tile:hover, .book-tile:focus-visible { border-color: var(--accent); }
.book-tile.selected { border-color: var(--accent); background: var(--accent-tint); }
.book-tile .book-cover { width: 100%; height: auto; aspect-ratio: 2 / 3; font-size: 2.6rem; }
.book-tile-title { font-size: 0.88rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.book-tile-sub { font-size: 0.76rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-tile-check { position: absolute; top: 0.9rem; inset-inline-start: 0.9rem; width: 1.3rem; height: 1.3rem; }
.book-tile-badge {
    position: absolute; inset: 0.5rem 0.5rem auto 0.5rem; aspect-ratio: 2 / 3; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 2.6rem;
    background: color-mix(in srgb, var(--good) 70%, transparent); color: var(--setup-ink);
}
.book-tile.added { opacity: 0; transform: scale(0.92); pointer-events: none; }
.book-tile.busy { pointer-events: none; }
.book-tile.failed { border-color: var(--danger); }
.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.view-toggle .btn { border: none; border-radius: 0; }
.view-toggle .btn.active { background: var(--accent); color: var(--accent-ink); }

@media (max-width: 599px) {
    .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
    /* فوق الشريط السفلي (60px)، ومن غير ما الكيبورد يرفعه */
    .setup-finish { bottom: calc(0.5rem + 60px + var(--safe-bottom)); }
    .kb-open .setup-finish { position: static; }
}
/* ===== مغادرة المكتبة (E20) ===== */
.danger-title { color: var(--danger); }
.badge.neutral { background: var(--neutral-tint); color: var(--text-dim); }
.danger-zone { border-color: var(--danger-line); background: var(--danger-tint); }
.leave-accounts { margin: 0; padding-inline-start: 1.25rem; }
.leave-accounts li { margin-block: 0.25rem; }
.leave-steps { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.leave-steps li { display: flex; align-items: center; gap: 0.4rem; color: var(--text-dim); }
.leave-steps li.current { color: var(--text); font-weight: 600; }
.leave-step-number {
    display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    border: 1px solid var(--border); font-size: 0.85rem;
}
.leave-steps li.current .leave-step-number { background: var(--danger); border-color: var(--danger); color: var(--surface); }
.leave-steps li.done .leave-step-number { background: var(--good-tint); border-color: var(--good); }
.leave-reasons { border: 0; margin: 0; padding: 0; }
.reason-bars { display: grid; gap: 0.35rem; }
.reason-bar { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr auto; align-items: center; gap: 0.5rem; }
.reason-bar-track { height: 0.6rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.reason-bar-fill { height: 100%; background: var(--viz-1); }

@media (prefers-reduced-motion: reduce) {
    .book-tile { transition: none; }
}

/* ===== الموبايل والتابلت (E12-S04) ===== */

/* عمودين على التابلت بس (600–899px): هناك المحتوى واخد العرض كله جنب الـ rail. من 900px
   العمود الواحد (640px) هو التصميم. */
.two-up { display: block; }

/* الشريط السفلي و"المزيد" — مخفيين من 600px وطالع */
.bottom-nav, .bottom-sheet-backdrop { display: none; }

/* العرض كان inline على كل checkbox (width:auto) — وده كان بيغلب مقاس اللمس تحت */
input[type="checkbox"], input[type="radio"] { width: auto; }

/* ===== التعديل الجماعي ونقل النسخ بين الرفوف ===== */
.list-row.selected, .card.list-row.selected { background: var(--accent-tint); }
.card.list-row.selected { border-color: var(--accent-line); }
.list-row.selectable { cursor: pointer; }
.list-row.draggable { cursor: grab; }
.btn.drop-target { outline: 2px dashed var(--accent); outline-offset: 2px; background: var(--accent-tint); }
.move-bar { align-items: center; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); }
.move-bar select { width: auto; max-width: 100%; }
.bulk-bar { align-items: center; position: sticky; top: calc(var(--safe-top) + 0.25rem); z-index: 5; }
/* السحب بالماوس بس — على اللمس التلميح عن الضغط */
.touch-hint { display: none; }
@media (pointer: coarse) {
    .drag-hint { display: none; }
    .touch-hint { display: inline; }
}

/* ===== رسم الكتب في الصفحة الرئيسية (BookGraph) ===== */
.graph-card { margin-bottom: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 0.85rem 0.6rem; }
.graph-head { margin-bottom: 0.5rem; gap: 0.5rem; }
.graph-head select { width: auto; }
.graph-canvas { position: relative; height: 340px; border-radius: 10px; background: var(--bg); overflow: hidden; touch-action: pan-y; }
.graph-surface { display: block; width: 100%; height: 100%; cursor: grab; }
.graph-foot { margin-top: 0.4rem; }
.graph-list { margin-top: 0.4rem; }
.graph-list details { margin: 0.25rem 0; }
.graph-list ul { margin: 0.25rem 0; padding-inline-start: 1.25rem; }
.graph-list li { margin: 0.15rem 0; }
.graph-card.expanded {
    position: fixed; inset: 0; z-index: 60; margin: 0; border-radius: 0; border: none;
    display: flex; flex-direction: column;
    padding: calc(var(--safe-top) + 0.6rem) 0.85rem calc(var(--safe-bottom) + 0.6rem);
}
.graph-card.expanded .graph-canvas { flex: 1; height: auto; touch-action: none; }
html.graph-open, html.graph-open body { overflow: hidden; }
@media (min-width: 900px) { .graph-canvas { height: 420px; } }

/* أهداف اللمس 44px على شاشات اللمس والشاشات الصغيرة — الماوس على الديسكتوب بيفضل بكثافته */
@media (pointer: coarse), (max-width: 899px) {
    .btn, .btn.sm, .tab, .pager button, .side-nav-toggle, .side-nav-menu-item { min-height: 44px; }
    .btn.sm { min-width: 44px; }
    .perm-check { min-height: 44px; display: flex; align-items: center; gap: 0.6rem; }
    input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; flex: 0 0 auto; }
    .side-nav-toggle { min-width: 44px; }
}

@media (min-width: 600px) and (max-width: 899px) {
    .page { max-width: none; }
    .two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-items: start; }
    .two-up > .card { margin-bottom: 0; }
    /* الرسمتين جنب بعض محتاجين عرض أكبر عشان أسماء الشهور ماتلزقش */
    .two-up.wide { display: block; }
}

@media (min-width: 760px) and (max-width: 899px) {
    .two-up.wide { display: grid; }
}

@media (max-width: 599px) {
    .side-nav { display: none; }
    .app-main { margin-inline-start: 0; }
    /* آخر صف والـ pager مايبقوش تحت الشريط */
    .page { padding-bottom: calc(1.25rem + 60px + var(--safe-bottom)); }

    .bottom-nav {
        display: flex;
        position: fixed;
        inset: auto 0 0 0;
        z-index: 40;
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding-bottom: var(--safe-bottom);
    }

    .bottom-nav :is(a, button) {
        flex: 1 1 0;
        min-width: 0;
        min-height: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        padding: 0.3rem 0.15rem;
        border: 0;
        border-top: 3px solid transparent;
        background: none;
        color: var(--text-dim);
        font: inherit;
        font-size: 0.72rem;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
    }

    .bottom-nav-icon { font-size: 1.25rem; line-height: 1; }

    /* الصفحة الحالية: خط فوقها + خط تقيل، مش اللون لوحده */
    .bottom-nav :is(a, button).active { color: var(--accent); font-weight: 700; border-top-color: var(--accent); }

    /* الكيبورد مفتوح: الشريط يختفي والحشو يرجع عادي */
    .kb-open .bottom-nav { display: none; }
    .kb-open .page { padding-bottom: calc(1.25rem + var(--safe-bottom)); }

    .bottom-sheet-backdrop {
        display: flex;
        align-items: flex-end;
        position: fixed;
        inset: 0;
        z-index: 50;
        background: var(--overlay);
    }

    .bottom-sheet {
        width: 100%;
        max-height: calc(100dvh - 3rem - var(--safe-top));
        overflow-y: auto;
        background: var(--surface);
        border-top: 1px solid var(--border);
        border-radius: var(--radius) var(--radius) 0 0;
        padding: 0.75rem 0.75rem calc(0.75rem + var(--safe-bottom));
        box-shadow: 0 -12px 32px var(--shadow-strong);
    }

    .bottom-sheet-user { display: flex; align-items: center; gap: 0.7rem; padding: 0.25rem 0.25rem 0.75rem; }
    .bottom-sheet .side-nav-links { margin-bottom: 0.5rem; }
    .bottom-sheet .side-nav-menu-item { width: 100%; }
}

@media print {
    .bottom-nav, .bottom-sheet-backdrop { display: none !important; }
}