/* ============================================================
   نظام تدبير المكتبة — الأنماط المخصّصة
   اللون الأساس: أخضر بحري ‎#00695C‎ (يميّزه عن تطبيق المدرسة الزيتوني)
   ============================================================ */

:root {
    --brand: #00695C;
    --brand-dark: #004D40;
    --brand-light: #E0F2F1;
    --nav-h: 56px;
    --thead-bg: #37474F;      /* رمادي فحمي: تباينٌ عالٍ بلا قسوة الأسود */
    --thead-fg: #ffffff;
    --ok: #2E7D32;
    --danger: #C62828;
    --warn: #EF6C00;
}

/* الوضع الفاتح إجباراً: على لينكس بثيم داكن يختفي نصّ <option> داخل القوائم */
html {
    color-scheme: light only;
    scrollbar-gutter: stable;
}

body {
    font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", Arial, sans-serif;
    background: #f4f6f8;
    font-size: .95rem;
}

/* ===================== الشريط العلوي (التنقّل كلّه) ===================== */
.topbar {
    background: var(--brand);
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 0 .25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    min-height: var(--nav-h);
}

.topbar .brand {
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
}

.topbar .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .85);
    padding: .5rem .7rem;
    font-size: .92rem;
    border-radius: .3rem;
    white-space: nowrap;
}

.topbar .navbar-nav .nav-link:hover,
.topbar .navbar-nav .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .12); }

/* المجموعة النشِطة تبقى ظاهرةً — تعويض إشارة «أين أنا» التي كانت في الجانبية */
.topbar .navbar-nav .nav-link.active {
    color: #fff;
    font-weight: 600;
    background: rgba(0, 0, 0, .18);
    box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .9);
}

/* ===== مُشغّل المجموعات: أيقوناتٌ تفتح روابط الوحدة في الشريط نفسه ===== */
.navbar-zones { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem; }
.nav-zone { display: none; gap: .1rem; margin: 0; padding: 0; }
.nav-zone-active { display: flex; }

/* مجموعةٌ روابطُها أطولُ من الشريط (النظام: سبعة، والمخزون…) كانت تدفعه
   خارج الشاشة فيُقصّ زرُّ البيع السريع وقائمةُ المستخدم على 1366 وما دونه.
   الروابطُ الآن تلتفّ سطراً ثانياً، والشريطُ يعلو بقدرها (‏--nav-sticky يُقاس في app.js). */
@media (min-width: 992px) {
    .topbar .navbar-collapse { min-width: 0; }
    .topbar .navbar-zones { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
    .topbar .nav-zone-active { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 0; }
}
/* الحاسوبُ المتوسّط: روابطُ أضيقُ حشوةً وخطّاً، فتسع المجموعةُ سطرَها غالباً */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .topbar .navbar-nav .nav-link { padding: .45rem .45rem; font-size: .86rem; }
}

.navbar-launcher {
    display: flex;
    align-items: center;
    gap: .1rem;
    padding: .15rem;
    background: rgba(0, 0, 0, .18);
    border-radius: .4rem;
}

.navbar-launcher .launch-btn {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .75);
    padding: .3rem .45rem;
    border-radius: .3rem;
    line-height: 1;
    font-size: 1rem;
}

.navbar-launcher .launch-btn:hover { color: #fff; background: rgba(255, 255, 255, .15); }

/* المجموعة المفتوحة: أبيضُ ممتلئ ليُعرف مصدرُ الروابط المعروضة */
.navbar-launcher .launch-btn.on {
    color: var(--brand-dark);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.topbar .zone-home { color: rgba(255, 255, 255, .85); padding: .5rem .6rem; border-radius: .3rem; }
.topbar .zone-home:hover, .topbar .zone-home.active { color: #fff; background: rgba(255, 255, 255, .15); }


.topbar .navbar-toggler {
    border-color: rgba(255, 255, 255, .4);
    padding: .2rem .5rem;
}
.topbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.topbar .dropdown-menu {
    font-size: .9rem;
    border: 1px solid #e0e4e8;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    padding: .3rem;
    min-width: 13rem;
}
.topbar .dropdown-item { border-radius: .3rem; padding: .45rem .6rem; }
.topbar .dropdown-item:hover { background: var(--brand-light); color: var(--brand-dark); }
.topbar .dropdown-item.active { background: var(--brand); color: #fff; }
.topbar .dropdown-item .bi { width: 1.2rem; text-align: center; margin-inline-end: .2rem; }

/* نصُّ أزرار الشريط لا يلتفّ («بيع / سريع» على سطرين كان يُعلي الشريطَ كلَّه).
   وعلى الحاسوب المتوسّط (دون 1400) يضيق الشريط: اسمُ المستخدم يُكتفى بأيقونته،
   واسمُ المحلّ يُقصّ — فتبقى الروابطُ في سطرٍ واحد. */
.topbar .btn { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1399.98px) {
    .topbar .user-name { display: none; }
    .topbar .brand .brand-name {
        display: inline-block;
        max-width: 11rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }
}

/* ===================== الشريط على الهاتف =====================
   الاسمُ يُقصّ بنقاطٍ ولا يلتفّ فيُعلي الشريط، وإلى جانبه زرّا البيع السريع
   والقائمة. والقائمةُ لوحةٌ تُمرَّر داخلها: الشريطُ ملتصقٌ بأعلى الشاشة،
   فما طال عنها لا يُبلَغ بتمرير الصفحة. */
@media (max-width: 991.98px) {
    .topbar .container-fluid { flex-wrap: wrap; }
    .topbar .brand {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: .35rem;
        margin-inline-end: .5rem;
    }
    .topbar .brand .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .topbar .navbar-toggler,
    .topbar .mnav-pos {
        width: 44px;
        height: 40px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .topbar .navbar-toggler:focus { box-shadow: 0 0 0 .15rem rgba(255, 255, 255, .5); }
    .topbar .mnav-pos { font-size: 1.15rem; border-radius: .375rem; }
    .topbar .mnav-pos.active { box-shadow: inset 0 -3px 0 var(--brand); }

    .topbar .navbar-collapse {
        background: var(--brand-dark);
        margin: 0 -.5rem;
        padding: .35rem .5rem .75rem;
        max-height: calc(100vh - var(--nav-h));
        max-height: calc(100dvh - var(--nav-h));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

.mnav { display: flex; flex-direction: column; gap: .15rem; }

.mnav-home,
.mnav-group > summary {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 46px;
    padding: .4rem .7rem;
    border-radius: .4rem;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}
.mnav-group > summary { list-style: none; }
.mnav-group > summary::-webkit-details-marker { display: none; }
.mnav-home:hover, .mnav-group > summary:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.mnav-home.active { background: rgba(255, 255, 255, .15); }
.mnav-home .bi, .mnav-group > summary .bi:first-child { font-size: 1.1rem; width: 1.3rem; text-align: center; }

.mnav-chev { opacity: .7; transition: transform .15s; }
.mnav-group[open] > summary { background: rgba(255, 255, 255, .1); }
.mnav-group[open] .mnav-chev { transform: rotate(180deg); }

/* روابطُ المجموعة: عمودان من أهدافٍ يبلغها الإبهام (44 بكسل فما فوق) */
.mnav-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .3rem;
    padding: .4rem .3rem .6rem;
}
.mnav-link {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: .35rem .6rem;
    border-radius: .4rem;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .9);
    font-size: .9rem;
    line-height: 1.25;
    text-decoration: none;
}
.mnav-link:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.mnav-link.active { background: #fff; color: var(--brand-dark); font-weight: 700; }
.mnav-link .bi { flex: 0 0 auto; }

.mnav-user {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
    padding: .6rem .7rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
    color: #fff;
}
.mnav-user .min-w-0 { min-width: 0; }
.mnav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: .4rem;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 1.1rem;
    text-decoration: none;
}
.mnav-icon:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.mnav-out { color: #FFCDD2; }

.content { padding: 1rem 1.25rem 3rem; }

/* ===================== بطاقات وجداول ===================== */
.card { border: 1px solid #e3e6ea; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.card-header { background: #fff; border-bottom: 1px solid #eceff1; font-weight: 600; }

.table > :not(caption) > * > * { padding: .5rem .6rem; }
.table thead th { background: var(--thead-bg); color: var(--thead-fg); font-weight: 600; white-space: nowrap; }

/* ‎.table-light على الرأس يفرض متغيّراته فيغلب اللون العام — نُلغيها هنا وحدها */
.table thead.table-light th { background: var(--thead-bg); color: var(--thead-fg); }
.table-hover tbody tr:hover { background: #F1F8F7; }

/* رأس الجدول يلتصق تحت الشريط العلوي عند التمرير، فتبقى العناوين معروفةً
   في اللوائح الطويلة. الظلّ يفصله عن الصفوف المارّة تحته. */
.table thead th {
    position: sticky;
    top: calc(var(--nav-sticky, var(--nav-h)) - 1px);
    z-index: 3;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .25);
}

/* لوحاتٌ تُمرَّر داخل صندوقها لا مع الصفحة (تقرير المبيعات مثلاً): إزاحة
   شريط التنقّل لا معنى لها هنا فتدفع الرأسَ فوق أوّل صفٍّ من البيانات
   منذ أوّل رسمٍ. الرأس يلتصق بأعلى صندوقه هو، لا أعلى الصفحة. */
.report-mini-scroll thead th {
    top: 0;
}

/* الخليّة أثناء التحرير: تُلغى حشوتها فتملأ الخانةُ عرضَ العمود المتاح كلَّه
   بدل أن تنكمش داخل الحشوة. يُرفع الصنف عند إعادة الرسم فتعود الحشوة. */
td.cell-editing {
    padding: 0 !important;
}

td.cell-editing .form-control,
td.cell-editing .form-select {
    border-radius: 0;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

/* عمودُ الاسم فيه رابطٌ وشارةٌ بجانب النصّ المحرَّر؛ يُخفيان أثناء التحرير
   كي لا يقتطعا من عرض الخانة. */
td.cell-editing > .d-flex > a,
td.cell-editing > .d-flex > .badge {
    display: none;
}

/* رأس جدول الإدخال لا يلتصق: صفحات الإدخال فيها جدولان، ولو التصق رأساهما
   عند الإزاحة نفسها وبنفس z-index لتراكبا أثناء التمرير. الالتصاقُ للّوائح
   الطويلة، وجدولُ الإدخال قصيرٌ وأمام عين من يكتب فيه أصلاً. */
#bulkTable thead th {
    position: static;
}

/* ‎.table-responsive يصنع حاوية تمريرٍ فيلتصق الرأس بها لا بالنافذة.
   على الشاشات الواسعة لا حاجة إلى التمرير الأفقي، فنُطلق الفيض ليعمل الالتصاق؛
   وعلى الضيّقة يبقى التمرير الأفقي وهو الأهمّ هناك. */
@media (min-width: 992px) {
    .table-responsive { overflow: visible; }
}

/* جدولٌ عريض (طاقم العمل): أعمدته أكثر من أن تتّسع لها أوسع شاشة، فإطلاقُ
   الفيض أعلاه يدفع الصفحة كلّها فتُقتطع أطرافها. يُمرَّر داخل صندوقه وحده.
   ومع التمرير الداخلي يلتصق الرأس بأعلى الصندوق لا بأسفل الشريط العلوي،
   وإلّا نزل بمقدار ارتفاع الشريط فوق أوّل صفٍّ وحجبه. */
.table-responsive.wide-grid { overflow-x: auto; }
.wide-grid thead th { top: 0; }

/* ===================== أزرار الأشهر ===================== */
/* عمودان في الجانبية: اثنا عشر زرّاً في عمودٍ واحد يطول فيدفع الجدول،
   وفي ثلاثةٍ يضيق الاسم. كلّ زرٍّ يحمل اسمه وعدّاده على طرفيه. */
.month-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .3rem;
}

.month-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    padding: .25rem .5rem;
    font-size: .8rem;
    text-align: start;
}

.month-btn .badge {
    font-size: .68rem;
    padding: .18em .4em;
}

.bg-brand { background: var(--brand); color: #fff; }

/* إخفاء أسهم حقول الأرقام: تلتهم عرض الخانة وتُنقر سهواً أثناء الإدخال */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* الأرقام تُعزل اتجاهياً.

   money() تفصل الآلاف بمسافة («1 500,00»)، والمسافةُ محرفٌ محايد. في صفحةٍ
   اتجاهُها RTL تُعيد خوارزميةُ Bidi ترتيبَ المقطعين حول المحايد، فيُعرض
   الرقم مقلوباً: «500,00 1». العزلُ مع direction: ltr يُبقي الرقم كما كُتب.

   ‏text-end في نسخة بوتستراب RTL يساوي text-align: left — قيمةٌ فيزيائية،
   فتغييرُ الاتجاه هنا لا يزحزح المحاذاة. */
.num,
.text-money {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

.num { white-space: nowrap; }
/* قيمةٌ رقميّةٌ بجانب لصيقتها («حدّ التنبيه: 0»): الرقمُ ltr فيبدأ من يسار
   خانته الممتدّة، فيلاصق لصيقةَ الخانة التالية ويُقرأ لها. يُردّ إلى جانب لصيقته. */
.d-flex > .flex-grow-1.num { text-align: right; }
.text-money { font-weight: 600; }
.money-pos { color: var(--ok); }
.money-neg { color: var(--danger); }

/* بطاقات الأرقام في لوحة القيادة */
.stat {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: .5rem;
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    gap: .85rem;
    height: 100%;
}
.stat .icon {
    width: 42px; height: 42px; border-radius: .5rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; background: var(--brand-light); color: var(--brand-dark);
    flex: 0 0 42px;
}
.stat .label { font-size: .78rem; color: #607D8B; }
/* العزل الاتجاهي هنا أيضاً: money() تفصل الآلاف بمسافة، والمسافةُ محايدة
   فتقلبها Bidi في صفحةٍ عربية («1 400,00» تُعرض «400,00 1»). الأرقام دون
   الألف لا مسافة فيها فتبدو سليمة — والعطب لا يظهر إلّا مع الآلاف. */
.stat .value {
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}

/* نسخةٌ مضغوطة للقائمة الجانبية: البطاقة الكاملة ارتفاعها ~70 بكسل،
   وهو كثيرٌ في عمودٍ عرضه 320 يعلو فوقه الملخّص والفلاتر. */
.stat.stat-sm {
    padding: .45rem .6rem;
    gap: .55rem;
}

.stat.stat-sm .icon {
    width: 30px; height: 30px; flex: 0 0 30px;
    font-size: .95rem; border-radius: .4rem;
}

.stat.stat-sm .label { font-size: .72rem; line-height: 1.1; }
.stat.stat-sm .value { font-size: 1rem; line-height: 1.2; }

.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

/* ===================== تنبيهات عائمة ===================== */
/* أقصى اليسار من أقصى الأسفل: راسيةً في الزاوية، بعيدةً عن الشريط العلوي
   وعن أزرار الإجراءات في يمين الصفحة. left/bottom فيزيائيّان لا منطقيّان،
   فلا يقفز الموضع لو تغيّر اتجاه الصفحة.

   ‎z-index‎ فوق طبقة النوافذ المنبثقة (1055) فلا تختفي تحتها. والحاوية لا
   تلتقط الفأرة: هي ملتصقةٌ بزاويةٍ فيها ترقيمُ الصفحات، ولولا ذلك لحجبت
   فراغُها ما تحته؛ والالتقاط يعود إلى التنبيه نفسه وحده. */
#toastArea {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: min(420px, 90vw);
    pointer-events: none;
}
#toastArea .alert {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    margin: 0;
    pointer-events: auto;
    /* الحدُّ الملاصق للحافّة يُسوَّى: راسٍ في الزاوية لا واقفٌ قربها */
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    /* تظهر صاعدةً من الأسفل لا هابطةً من الأعلى */
    animation: toast-rise .25s ease-out;
}

@keyframes toast-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===================== شاشة البيع السريع ===================== */
.pos-search-results {
    position: absolute;
    z-index: 1050;
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: #fff;
    border: 1px solid #cfd8dc;
    border-radius: .375rem;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.pos-search-results .item { padding: .5rem .75rem; cursor: pointer; border-bottom: 1px solid #eceff1; }
.pos-search-results .item:hover, .pos-search-results .item.active { background: var(--brand-light); }
.pos-total { font-size: 1.6rem; font-weight: 700; color: var(--brand-dark); font-variant-numeric: tabular-nums; }

/* ===================== لوحة اللمس ===================== */
/* بطاقاتٌ كبيرةٌ تُنقر بالإصبع. المقاس الأدنى 44 بكسل: أصغر منه يُخطئه
   الإصبع على شاشة اللمس فيُضاف منتجٌ غير المقصود. */
.tp-filters { display: flex; flex-direction: column; gap: .3rem; }

.tp-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
}

/* عنوانٌ ثابت العرض أمام كلّ صفّ: الأزرار تبدأ من عمودٍ واحد فتُقرأ الصفوف
   الأربعة سلّماً لا كتلةً متداخلة */
.tp-label {
    flex: 0 0 58px;
    font-size: .72rem;
    color: #78909C;
}

.tp-chip {
    border: 1px solid #cfd8dc;
    background: #fff;
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .78rem;
    cursor: pointer;
}

.tp-chip.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.tp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .5rem;
    max-height: 340px;
    overflow-y: auto;
}

.tp-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .3rem;
    /* ‏98 لا 78: أسوأُ الحالات اسمٌ من سطرين + وسمُ المستوى + سطرُ الثمن
       والمخزون. و<button> لا يعلو لمحتواه في الشبكة كما يعلو <div>، فلا
       يكفي ترك الارتفاع للمحتوى — يُقاس أدناه بأطول ما يقع فيه. */
    min-height: 98px;
    padding: .5rem .6rem;
    border: 1px solid #cfd8dc;
    border-radius: .5rem;
    background: #fff;
    text-align: start;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.tp-item:hover { border-color: var(--brand); background: var(--brand-light); }

/* الوميض يؤكّد وقوع النقرة: شاشةُ اللمس بلا مؤشّرٍ يدلّ عليها */
.tp-item.tp-hit { background: var(--brand); border-color: var(--brand); color: #fff; }
.tp-item.tp-hit .tp-price, .tp-item.tp-hit .tp-stock { color: #fff; }

/* لا انكماشَ لأجزاء البطاقة: البطاقةُ عمودٌ مرن، وأدنى ارتفاعها 78 بكسل.
   واسمٌ من سطرين يجعل المحتوى أطول منها، فكان المرنُ يضغط الأجزاءَ الثلاثة
   ليردّها إلى 78 — فيُقصّ وسمُ المستوى من أسفله (11 بكسل لنصٍّ يطلب 18).
   بمنع الانكماش تعلو البطاقةُ لمحتواها، والصفّ كلُّه معها. */
.tp-name, .tp-tag, .tp-meta { flex-shrink: 0; }

.tp-name {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* المستوى والتمدرس: ما يفرّق كتابين بنفس الاسم، فيظهر ولا يُقصّ */
.tp-tag {
    font-size: .68rem;
    color: var(--brand-dark);
    background: var(--brand-light);
    border-radius: .25rem;
    padding: .05rem .3rem;
    align-self: flex-start;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-item.tp-hit .tp-tag { background: rgba(255, 255, 255, .25); color: #fff; }

.tp-meta { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.tp-price { font-size: .8rem; font-weight: 700; color: var(--brand-dark); font-variant-numeric: tabular-nums; direction: ltr; }
.tp-stock { font-size: .7rem; color: #78909C; font-variant-numeric: tabular-nums; direction: ltr; }

/* المنفَد يُعلَّم ولا يُعطَّل: المنعُ قرارُ التأكيد لا قرارُ الاختيار */
.tp-out { border-style: dashed; opacity: .65; }
.tp-out .tp-stock { color: var(--danger); }

/* أوّلُ المطابقين — هو ما يُضيفه Enter، فيُعلَّم قبل أن يُضاف */
.tp-item.tp-first { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-light); }

/* ===================== مساحة العمل: لوحةٌ ومنتقاة =====================
   عمودان جنباً إلى جنب: اللوحة يميناً (الأوسع) والمنتقاةُ يساراً. لكلّ
   عمودٍ تمريرُه، فالصفحةُ نفسها لا تتمرّد ويبقى الإجمالي في العين.
   ‏--ws-h: ما يُترك لبقيّة الصفحة (الترويسة واللسان وحقول الوثيقة). */
/* المنتقاة عرضٌ محدود واللوحةُ تأخذ الباقي: أسطرُ السلّة لا تحتاج أكثر من
   قدر حقولها، وكلُّ بكسلٍ زائدٍ عندها بطاقةُ منتجٍ أقلّ في اللوحة. والحدّان
   يمنعان طرفيها: أضيقُ من أن تُقرأ حقولُها، أو أعرضُ ممّا تحتاج على شاشةٍ كبيرة. */
.ws-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cart-w, clamp(340px, 31%, 440px));
    gap: 1rem;
    align-items: start;
}

/* الشراء يزيد حقلاً رابعاً («ثمن البيع الجديد»)، فسلّته أعرض قليلاً */
.ws-row-purchase { --cart-w: clamp(380px, 33%, 470px); }

.ws-pick, .ws-cart {
    display: flex;
    flex-direction: column;
    max-height: var(--ws-h, calc(100vh - 300px));
    min-height: 300px;
    margin-bottom: 0;
}

/* حقولُ الوثيقة صارت في إطار المنتقاة لا تحت مساحة العمل، فلا يُترك لها
   طولٌ تحتها: العمودان يأخذان الشاشةَ إلّا الشريطَ والترويسة (واللسانَ في
   صفحات الفواتير) وهامشَ الصفحة. والطولُ الزائد للّوحة — ما يُرى من
   المنتجات بلا تمرير. */
.ws-row { --ws-h: calc(100vh - 175px); }
.ws-tabbed { --ws-h: calc(100vh - 230px); }

/* على الحاسوب يأخذ العمودان الطولَ كلَّه ولو قلّت المنتجات: لوحةٌ بطول
   السلّة، لا لوحةٌ قصيرةٌ إلى جانب إطارٍ طويل */
@media (min-width: 992px) {
    .ws-pick, .ws-cart { height: var(--ws-h); }
}

/* الجسم يتقلّص والشبكة تتمرّد داخله: المصافي تبقى ظاهرةً فوق دائماً */
.ws-pick-body { display: flex; flex-direction: column; overflow: hidden; }
.ws-pick .tp-grid { max-height: none; flex: 1 1 auto; align-content: start; }

.ws-cart-body { flex: 1 1 auto; overflow-y: auto; padding: .5rem; }
.ws-cart-foot { border-top: 1px solid #e3e6ea; background: #fbfcfd; }
.ws-cart-foot .pos-total { font-size: 1.35rem; }

/* السلّة لا تقصر أسطرُها دون سطرين مهما طالت حقولُها تحتها: على شاشةٍ قصيرة
   يتمرّر الإطارُ كلُّه بدل أن تنضغط الأسطرُ إلى لا شيء */
.ws-cart { overflow-y: auto; }
.ws-cart-body { min-height: 150px; }

/* حقولُ الوثيقة في إطار المنتقاة: خاناتٌ صغيرةٌ اثنتان أو ثلاثٌ في السطر كما
   تظهر في الهاتف، والزبونُ والملاحظاتُ وزرُّ الحفظ على السطر كلّه. */
.ws-cart-doc {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px dashed #cfd8dc;
}
.ws-cart-doc .doc-line { gap: .35rem .45rem; }
.ws-cart-doc .doc-line > * { flex: 1 1 110px; }
.ws-cart-doc .doc-line .df-wide { flex: 1 1 100%; }
.ws-cart-doc .doc-line .df-note { flex: 2 1 180px; }

/* لصيقةٌ وخانةٌ في سطر: التخفيض (والشحن في الشراء) */
.cf-inline { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: #607D8B; }
.cf-inline label { white-space: nowrap; }
.cf-inline .form-control { flex: 1 1 0; min-width: 0; max-width: 7rem; }
.ws-cart-doc .doc-line .df-btn { flex: 1 1 120px; min-width: 0; }
.ws-cart-doc .form-label { font-size: .72rem; color: #607D8B; margin-bottom: .1rem; }
.ws-cart-doc .small.text-muted,
.ws-cart-doc .form-text { font-size: .72rem; margin-top: .35rem !important; }

/* سطرُ المنتقاة: بطاقةٌ من سطرين لا صفُّ جدولٍ بسبعة أعمدة — أربعمئة
   بكسل لا تسع سبعة، وحقولُها تصير أضيق من أن تُقرأ أرقامها. */
.cart-line {
    border: 1px solid #e3e6ea;
    border-radius: .4rem;
    padding: .35rem .45rem;
    margin-bottom: .4rem;
    background: #fff;
}

.cart-line.cl-hit { border-color: var(--brand); background: var(--brand-light); }

/* سطرٌ فيه مؤجَّل: يُعلَّم صُفرةً في السلّة قبل الحفظ — وعدٌ لا يُرى ساعةَ
   كتابته يُنسى بعدها، والزبونُ يذكره ولو نسيه دفترُنا. */
.cart-line.cl-pending { border-color: #FFB300; background: #FFFDF6; }
.cl-pend > span { color: #EF6C00; font-weight: 600; }
.cl-pend .form-control { border-color: #FFB300; font-weight: 600; }
.cl-pend .btn { border-color: #FFB300; color: #EF6C00; }
.cl-pend .btn:hover { background: #FFB300; color: #fff; }

/* خانةُ الثمن الحرّ ما دامت فارغة: «حدّد الثمن» يبدأ من يمين الخانة حيث
   تقع العين أوّلاً في صفحةٍ عربية، لا في أقصى يسارها حيث تنتهي الأرقام.
   ‎:placeholder-shown‎ يقصر ذلك على حال الفراغ، فإذا كُتب الرقمُ عاد إلى
   محاذاة الأرقام. و‎[placeholder]‎ يقصره على الخانة الحرّة وحدها.

   وتُطفأ أيقونةُ ‎is-invalid‎ هنا: بوتستراب يرسم علامةً حمراء ويحجز لها
   ‎padding-left‎ بمقدار ‎1.5em + .75rem‎ — نحو ثلث خانةٍ عرضُها سبعون بكسلاً.
   فيبقى للنصّ ثلثاه، و«حدّد الثمن» أطولُ منهما، فينساب تحت الأيقونة. والحدُّ
   الأحمر وحده يكفي علامةً، وهو أظهرُ من أيقونةٍ في خانةٍ بهذا الضيق. */
.cl-price input[placeholder]:placeholder-shown {
    text-align: right;
    font-weight: 600;
    font-size: .74rem;
    background-image: none;
    padding-left: .3rem;
}

.cl-price input[placeholder]:placeholder-shown::placeholder {
    color: var(--danger);
    opacity: .85;
}

/* الناقصُ عن المخزون تحت اسم السلعة: تذكيرٌ يُرى قبل الحفظ لا ردٌّ من الخادم بعده */
.cl-short { color: #D84315; font-weight: 600; }

/* التسويةُ السريعة: زرٌّ نصّيّ لا يزاحم شيئاً حتى يظهر الناقصُ فيُنتبه إليه */
.cl-fixbtn {
    border: 0;
    background: transparent;
    padding: 0 .15rem;
    color: var(--brand-dark);
    font-size: .68rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.cl-fix {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: .3rem 0 .1rem;
    padding: .25rem;
    border: 1px dashed var(--brand);
    border-radius: .3rem;
    background: var(--brand-light);
}

.cl-fix-lbl { font-size: .66rem; color: #546E7A; white-space: nowrap; }
.cl-fix .form-control { width: 4.75rem; padding-inline: .2rem; }
.cl-fix .btn { padding: .1rem .45rem; font-size: .72rem; line-height: 1.3; }

/* خانةُ كمّية التسليم في لائحة الانتظار: سهمان ورقمٌ بينهما، ضيّقةٌ لتسع
   في عمود إجراءاتٍ إلى جانب زرّ «سلّم». */
.dlv-qty { width: 7.25rem; }
.dlv-qty .btn { padding: .05rem .3rem; font-weight: 700; line-height: 1.2; }
.dlv-qty .form-control { padding-inline: .1rem; }

.cl-head { display: flex; align-items: flex-start; gap: .35rem; }

.cl-name { font-size: .82rem; font-weight: 600; line-height: 1.3; flex: 1 1 auto; }

.cl-del {
    border: 0;
    background: transparent;
    color: var(--danger);
    padding: 0 .15rem;
    line-height: 1;
    cursor: pointer;
}

.cl-sub { font-size: .7rem; color: #78909C; margin-bottom: .25rem; }

.cl-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .25rem .35rem; }

.cl-f { flex: 1 1 70px; min-width: 64px; margin: 0; }
.cl-f > span { display: block; font-size: .66rem; color: #78909C; line-height: 1.2; }
.cl-f .form-control { padding-inline: .3rem; }

/* خانتا الكمية والمؤجَّل: سهمٌ عن اليمين وسهمٌ عن اليسار والرقم بينهما. عرضُهما
   مقتصدٌ لأنّ ما يُكتب فيهما رقمٌ أو رقمان، والسهمان يغنيان عن الكتابة أصلاً. */
.cl-qty, .cl-pend { flex: 1 1 104px; min-width: 100px; }
.cl-qty .btn, .cl-pend .btn { padding: .15rem .32rem; font-weight: 700; line-height: 1.2; }
.cl-qty .form-control, .cl-pend .form-control { padding-inline: .05rem; }

/* الثمن أوسعُ من إخوته: أرقامه أطولها (1 250,00) وهو أكثرُها مراجعةً بالعين،
   وما فضل من عرضِ الكمّيتين يذهب إليه. */
.cl-price { flex: 1 1 92px; min-width: 86px; }

.cl-total {
    margin-inline-start: auto;
    align-self: flex-end;
    font-weight: 700;
    font-size: .9rem;
    color: var(--brand-dark);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    padding-bottom: .15rem;
}

/* حقولُ الوثيقة تحت مساحة العمل: سطرٌ واحدٌ لا عمودٌ جانبيّ ولا سطران —
   تُملأ مرّةً بعد الانتقاء، فمكانها آخرُ الطريق لا أوّلُه. تلتفّ من نفسها
   على الشاشة الضيّقة بدل أن تُقصّ. */
.doc-line {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem;
}

.doc-line > * { flex: 1 1 126px; min-width: 0; }
.doc-line .df-wide { flex: 1.5 1 150px; }
.doc-line .df-btn { flex: 0 1 auto; min-width: 118px; }

/* لصيقةٌ من سطرٍ واحد: التفافُها يرفع حقلَها فوق صفّ إخوته */
.doc-fields .form-label {
    margin-bottom: .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* «أرجع له» يُقرأ ولا يُكتب: صندوقٌ بمظهر الحقول ليصطفّ معها */
.df-read {
    background: #fbfcfd;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    padding: .25rem .5rem;
    font-weight: 700;
    text-align: end;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

@media (max-width: 991.98px) {
    .ws-row { grid-template-columns: 1fr; }
    .ws-pick, .ws-cart { max-height: none; }
    .ws-pick .tp-grid { max-height: 46vh; }
    .ws-cart-body { max-height: 50vh; }
}

/* ===================== الهاتف: الصفحاتُ نفسُها ===================== */

/* أزرارُ رأس الصفحة تلتفّ صفوفاً ولا يلتفّ نصُّ الزرّ داخله («وصل / حراري») */
.page-actions { flex-wrap: wrap; justify-content: flex-end; }
.page-actions .btn { white-space: nowrap; }

@media (max-width: 991.98px) {
    /* ‏‎.table-responsive‎ هنا حاويةُ تمريرٍ أفقيّ، فيلتصق الرأسُ بها لا بالنافذة،
       وإزاحةُ الشريط (‎top: nav-h‎) تُنزله فوق أوّل صفٍّ فتحجبه — في كلّ جدول.
       والحاويةُ لا تتمرّر عمودياً، فالرأسُ بإزاحة صفرٍ يبقى في مكانه. */
    .table-responsive thead th { top: 0; }

    .content { padding: .75rem .75rem 3rem; }
}

@media (max-width: 767.98px) {
    /* بحثُ الجداول في ترويسة البطاقة: عرضٌ ثابتٌ (240 بكسل) وسطرٌ لا يلتفّ
       يقصّان آخرَه خارج البطاقة. هنا يلتفّ، والبحثُ يأخذ السطرَ كلَّه. */
    .card-header > form {
        flex-wrap: wrap !important;
        width: 100%;
        margin-inline-start: 0 !important;
    }
    .card-header > form > .input-group { width: 100% !important; }

    /* جداولُ الإدخال المتعدّد: عرضُ كلِّ عمودٍ قدرُ خانته لا ما كُتب له للحاسوب
       (180 بكسل للترتيب مثلاً). فالقصيرُ — اسمٌ وترتيبٌ وحذف — يسع الهاتف كلُّه،
       والطويلُ (الزبائن: سبعةُ أعمدة) يُمرَّر أفقياً بخاناتٍ يُكتب فيها. وكان
       عرضٌ أدنى ثابتٌ (620) يُخرج «الترتيب» و«حذف» عن الشاشة في جدولٍ من ثلاثة. */
    /* العنوانُ سطرٌ واحدٌ لا يلتفّ (بطلبه): «رصيد / افتتاحي» في سطرين يُقرأ
       كلمتين. فيعرض العمودُ بقدر عنوانه إن كان أطولَ من خانته. */
    #bulkTable > thead > tr > th { width: auto !important; white-space: nowrap; font-size: .8rem; }
    #bulkTable .form-control,
    #bulkTable .form-select { min-width: 4.5rem; }
    #bulkTable input[type="text"],
    #bulkTable input[type="email"],
    #bulkTable input[type="tel"],
    #bulkTable input:not([type]) { min-width: 8.5rem; }
    #bulkTable input[type="date"] { min-width: 8.25rem; }
    #bulkTable .form-select { min-width: 6.5rem; }
    #bulkTable .first-field { min-width: 10rem; }

    /* الأعمدةُ الرقمية (الترتيب · المبلغ · حدّ التنبيه) وعمودُ الحذف بقدر خاناتها،
       وما فضل من العرض لأعمدة النصّ — الاسمُ أوّلُها. ‏width: 1% في جدولٍ تلقائيّ
       التوزيع تعني «أضيقَ ما تسعه خانتُه». */
    #bulkTable td:has(> input[type="number"]),
    #bulkTable td:has(> .js-drop),
    #bulkTable td:has(> .btn:only-child),
    #bulkTable td:has(> .form-check-input) { width: 1%; }
    #bulkTable input[type="number"] { min-width: 4.25rem; }
    /* الترتيبُ رقمٌ من خانةٍ أو خانتين: أضيقُ من المبالغ */
    #bulkTable input[name="sort_order[]"] { min-width: 3rem; padding-inline: .25rem; }

    /* جداولُ المرجعيّات (أصناف · وحدات · مقارّ · بنود · أنواع): أعمدةٌ قليلة،
       فتضيق خاناتُها لتسع الهاتف بلا تمرير — الاسمُ أعرضُها */
    #bulkTable.bulk-compact .first-field { min-width: 7.5rem; }
    /* الخدمات: خمسةُ أعمدةٍ منها مربّعُ «عند البيع» — يتنازل الاسمُ عن قليلٍ ليبقى «حذف» ظاهراً */
    #bulkTable.bulk-compact:has(.js-variable) .first-field { min-width: 6.5rem; }
    #bulkTable.bulk-compact input[type="text"]:not(.first-field) { min-width: 5.75rem; }
    #bulkTable.bulk-compact .fld-short { min-width: 3.4rem !important; }
    #bulkTable.bulk-compact input[name="sort_order[]"] { min-width: 2.6rem; }
    #bulkTable.bulk-compact input[type="number"]:not([name="sort_order[]"]) { min-width: 3.75rem; }
    #bulkTable.bulk-compact .form-select { min-width: 4.75rem; padding-inline-end: 1.6rem; }
    #bulkTable.bulk-compact > * > tr > * { padding-inline: .15rem; }
    #bulkTable.bulk-compact .btn-sm.py-0 { min-width: 1.9rem; }

    /* بطاقةُ جدول الإدخال: نصفُ الحشوة الجانبيّة — ستّةَ عشرَ بكسلاً تعود للأعمدة */
    .card-body:has(#bulkTable) { padding-inline: .5rem; }
}

/* الهواتفُ الصغيرة (360): الخانةُ النصّيةُ الثانية أضيق، فيسع المستوياتِ الدراسيّة سطرُها */
@media (max-width: 379.98px) {
    #bulkTable.bulk-compact input[type="text"]:not(.first-field) { min-width: 5.25rem; }
}

/* ===================== جداولُ اللوائح على الهاتف: بطاقات =====================
   ‏‎app.js‎ يكتب عنوانَ العمود في ‎data-label‎ كلِّ خانة ويَسِم الجدول ‎table-stack‎؛
   وهنا وحدها يصير السطرُ بطاقةً: عنوانُها أوّلُ خانة، ثمّ الخاناتُ عمودين،
   عنوانٌ صغيرٌ فوق كلّ قيمة، والأزرارُ في آخرها. الحاسوبُ لا يرى شيئاً من هذا.

   والمحاذاةُ فيزيائيّةٌ (‎right‎) لا منطقيّة: خانةُ الأرقام اتجاهُها ‎ltr‎ (‎.num‎
   تعزل «1 500,00» عن انقلاب Bidi)، فـ«start» فيها يسارٌ وفي جارتها يمين. */
@media (max-width: 767.98px) {
    table.table-stack > thead { display: none; }
    table.table-stack > tbody,
    table.table-stack > tfoot { display: block; }

    table.table-stack > tbody > tr,
    table.table-stack > tfoot > tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .2rem .9rem;
        margin: .5rem;
        padding: .45rem .7rem .5rem;
        border: 1px solid #e3e6ea;
        border-radius: .5rem;
        background: var(--bs-table-bg, #fff);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    }
    table.table-stack > tfoot > tr { background: #F1F8F7; border-color: #cfe3df; }

    table.table-stack > * > tr > td {
        display: block;
        min-width: 0;
        width: auto !important;
        padding: .1rem 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: right !important;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    table.table-stack > * > tr > td::before {
        content: attr(data-label);
        display: block;
        direction: rtl;
        text-align: right;
        font-size: .7rem;
        font-weight: 600;
        line-height: 1.35;
        color: #90A4AE;
    }

    table.table-stack td.stack-title,
    table.table-stack td.stack-actions,
    table.table-stack td.stack-wide,
    table.table-stack td.stack-full { grid-column: 1 / -1; }

    /* سطورُ المجاميع (tfoot): سطرٌ واحدٌ لا بطاقة — العنوانُ يميناً والمبلغُ يساراً */
    table.table-stack > tfoot > tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; margin-top: .25rem; margin-bottom: .25rem; }
    table.table-stack > tfoot > tr > td::before { display: none; }
    table.table-stack > tfoot > tr > td.stack-title { flex: 1 1 auto; border-bottom: 0 !important; margin: 0; padding-bottom: .1rem !important; font-size: .9rem; }
    table.table-stack > tfoot > tr > td.stack-sum { text-align: left !important; font-weight: 700; }
    table.table-stack td.stack-title::before,
    table.table-stack td.stack-actions::before,
    table.table-stack td.stack-full::before { display: none; }

    /* العنوانُ أوّلُ البطاقة والأزرارُ آخرُها أيّاً كان موضعُ عموديهما في الجدول */
    table.table-stack td.stack-title { order: -1; }
    table.table-stack td.stack-actions { order: 99; }

    table.table-stack td.stack-title {
        font-weight: 700;
        font-size: .98rem;
        padding-bottom: .35rem !important;
        margin-bottom: .15rem;
        border-bottom: 1px solid #eef1f3 !important;
    }
    table.table-stack td.stack-actions { text-align: left !important; padding-top: .35rem !important; }
    table.table-stack td.stack-full { text-align: center !important; }
    table.table-stack td.stack-hide,
    table.table-stack td.stack-blank { display: none; }

    /* بطاقةٌ لا صفّ: لا خلفيّةَ مخطّطة ولا تظليلَ عند المرور */
    .table-responsive:has(> table.table-stack) { overflow: visible; }
}

/* اللمس: أزرارُ الأسطر الصغيرة (حذف · طبع) تُكبَّر ليبلغها الإصبع */
@media (pointer: coarse) {
    .table .btn-sm.py-0 { padding-top: .3rem !important; padding-bottom: .3rem !important; min-width: 2.2rem; }
}

/* سفاري الآيفون يُكبّر الصفحةَ عند التركيز في خانةٍ خطُّها دون 16 بكسل، ثمّ
   لا يُرجعها. يُرفع الخطّ هناك وحده — ولا يُمسّ في غيره. */
@supports (-webkit-touch-callout: none) {
    input.form-control, select.form-select, textarea.form-control { font-size: 16px; }
}

.required::after { content: " *"; color: var(--danger); }

@media print {
    .topbar, .no-print { display: none !important; }
    .content { padding: 0; }
}

/* ===== تخطيط بقائمة جانبية — مثل صفحات المال في بوّابة المدرسة =====
   الجانبية عرضٌ ثابت، والمحتوى يملأ ما بقي. تحت 768px يعود العمودان
   واحداً فوق الآخر: الجانبية أوّلاً لأنّ فيها الملخّص والفلاتر. */
@media (min-width: 768px) {
    .fin-sidebar {
        flex: 0 0 var(--sidebar-w, 320px);
        width: var(--sidebar-w, 320px);
        max-width: var(--sidebar-w, 320px);
    }

    .fin-main {
        flex: 1 1 0%;
        min-width: 0;
        max-width: 100%;
    }
}

/* الجداول العريضة داخل المحتوى لا تدفع الصفحة أفقياً */
.fin-main .table-responsive {
    max-width: 100%;
}

/* سطر مجموعٍ في الجانبية: بطاقةُ الأرقام الكاملة ارتفاعها ~70 بكسل،
   وهذا رقمٌ واحدٌ لا يستحقّها. سطرٌ واحدٌ يكفي. */
.stat-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: .4rem;
    padding: .35rem .6rem;
    font-size: .82rem;
}

.stat-line .num { font-weight: 700; font-size: .95rem; }

/* عروضٌ مسمّاة (ثلاثة فأكثر): كلّ خانةٍ تحمل أصناف العروض التي تظهر فيها
   (‎v-basic‎ / ‎v-family‎ / ‎v-edu‎)، وما يظهر في كلّها يحمل ‎v-always‎.
   تُخفى كلّ خانةٍ لا تنتمي إلى العرض الجاري.

   ولا بدّ من ‎data-colview-named‎ على الجدول: «الأساسية» اسمُ عرضٍ في
   الطريقتين، فبدون هذا الحارس كانت هذه القاعدة تطبَّق على جدولَي العرضين
   (الزبائن والموردين) فتُخفي كلّ خانةٍ لا تحمل ‎v-*‎ — وهي كلُّها. */
table[data-colview-named][data-view="basic"] th:not(.v-basic):not(.v-always),
table[data-colview-named][data-view="basic"] td:not(.v-basic):not(.v-always),
table[data-colview-named][data-view="family"] th:not(.v-family):not(.v-always),
table[data-colview-named][data-view="family"] td:not(.v-family):not(.v-always),
table[data-colview-named][data-view="edu"] th:not(.v-edu):not(.v-always),
table[data-colview-named][data-view="edu"] td:not(.v-edu):not(.v-always) {
    display: none;
}

/* عرضا الجدول: أساسية / تكميلية. الأعمدة بلا صنفٍ تظهر في الاثنين. */
table[data-view="basic"] .col-extra,
table[data-view="extra"] .col-basic {
    display: none;
}

/* الزرّ المختار في مبدّل الأعمدة */
.btn-group [data-colview-set].active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* الجدول ذو العرضين يثبّت توزيعه.
   بلا table-layout: fixed تُوزَّع الأعمدة بحسب طول المحتوى، فالعرضُ المكتوب
   اقتراحٌ يُهمَل: عمود العنوان يبقى ضيّقاً لأنّ العناوين قصيرة، ويتّسع
   غيرُه بلا حاجة. مع fixed تُحترم المقاسات كما كُتبت. */
table[data-colview] {
    table-layout: fixed;
}

table[data-colview] td {
    overflow-wrap: anywhere;
}

/* ===================== سحب حدود الأعمدة ===================== */
/* المقبض شريطٌ رفيع على حدّ الترويسة. الحدّ المنطقيّ (inline-end) لا الأيمن:
   في صفحةٍ عربية يقع يساراً وحده، فيبقى بين العمود وجاره في الاتجاهين.

   ‏لا ‎position: relative‎ على الرأس هنا: رأسُ الجدول ملتصقٌ أصلاً
   (‎position: sticky‎ أعلاه) وهو موضَّعٌ فيصلح مرجعاً للمقبض المطلق. وكتابةُ
   ‎relative‎ بنفس الأولوية تغلب ‎sticky‎ لتأخّرها، فتبقى إزاحة ‎top: nav-h‎
   عاملةً على عنصرٍ نسبيّ فينزل الرأس فوق أوّل صفٍّ من البيانات ويحجبه. */

.col-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: 7px;
    cursor: col-resize;
    user-select: none;
    /* فوق نصّ الترويسة كي تلتقطه الفأرة، وتحت أيّ قائمةٍ منسدلة */
    z-index: 2;
}

.col-resizer:hover,
.col-resizer.active {
    background: var(--brand);
    opacity: .35;
}

/* أثناء السحب: لا يُظلَّل نصٌّ ولا يتبدّل المؤشّر فوق بقيّة الصفحة */
body.col-resizing {
    user-select: none;
    cursor: col-resize;
}