/* ═══════════════════════════════════════════
   متجر الدائرة — الأنماط الرئيسية
   (مبنية على أساس تكافل مع إضافات Store)
   ═══════════════════════════════════════════ */

/* ═══ CSS Variables ═══ */
:root {
    --purple-main: #6c5ce7;
    --purple-light: #a29bfe;
    --purple-dark: #4834d4;
    --purple-muted: #5f27cd;
    --purple-hover: #7d5fff;
    --purple-disabled: #686de0;
}

/* ═══ Base ═══ */
body {
    font-family: 'Cairo', sans-serif;
}

.bi {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}

a:hover { text-decoration: none; }
.cursor-pointer { cursor: pointer; }

/* ═══ Main Section ═══ */
@media screen {
    .main-section {
        min-height: calc(100vh - 82px - 104px);
    }
}

@media print {
    a { text-decoration: none !important; }
    .dont-print { display: none !important; }
}

@media screen and (max-width: 480px) {
    .hide-in-phone { display: none; }
}

/* ═══ Number Input Arrows Remove ═══ */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
input[type=number] {
    appearance: none;
    -moz-appearance: textfield;
}

/* ═══ Scrollbar ═══ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #888; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* ═══ Pagination ═══ */
.page-link:focus {
    background-color: white;
    box-shadow: none;
}

/* ═══ Offcanvas ═══ */
#firstOffcanvas li {
    border-left: 0;
    border-right: 0;
    border-color: #ffffff93;
    font-size: 1.05rem;
}
#firstOffcanvas a { text-decoration: none; }

/* ═══ Social Media Icons ═══ */
.social a {
    font-size: 23px;
    font-weight: bold;
    color: var(--purple-main);
    margin: 0px 2px 2px;
    text-decoration: none;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 1.7em;
    border: 3px solid var(--purple-main);
    transition: all .2s ease-in-out;
    border-radius: 50%;
    text-align: center;
}
.social a:hover {
    background-color: var(--purple-main);
    color: white;
    border-radius: 4px;
}

/* ═══ Tables ═══ */
/*
 * overflow: visible إلزامي — البديل overflow-x: auto يقصّ القوائم المنسدلة
 * الخارجة من الجدول (المواصفة تُجبر المحور الثاني على auto أيضاً).
 *
 * ❌ لا تُعِد white-space: nowrap هنا:
 *    خلية نصّية طويلة (اسم عميل مثلاً) تمنع الالتفاف فتمدّد الجدول خارج
 *    الشاشة وتُنتج تمريراً أفقياً للصفحة كلها — على كل العروض لا الموبايل
 *    فقط. الالتفاف هو السلوك الصحيح، والاستثناءات محدّدة أدناه.
 */
.table-responsive {
    overflow: visible;
}

/*
 * الاستثناءات: عناصر يكسرها الالتفاف بصرياً — أزرار الإجراءات، الشارات،
 * الأرقام والتواريخ. هذي قصيرة أصلاً فلا تسبب فيضاً.
 */
.table-responsive .btn-group,
.table-responsive .btn-group-vertical,
.table-responsive .badge,
.table-responsive .font-monospace,
.table-responsive .text-nowrap,
.table-responsive .nowrap-cell {
    white-space: nowrap;
}

/* احتياط بسيط: رفع z-index لقوائم البوتستراب المنسدلة */
.dropdown-menu.show {
    z-index: 1060;
}
.thead-tr-th tr th {
    background-color: var(--purple-main) !important;
    color: white !important;
}
td, th {
    text-align: center !important;
    vertical-align: middle !important;
}
.td-width-75-150 {
    min-width: 75px;
    max-width: 150px;
    white-space: normal;
}
.td-width-200-300 {
    min-width: 200px;
    max-width: 300px;
    white-space: normal;
}
.table-layer {
    z-index: 2;
    opacity: 0.4;
}

/* ═══ Scroll To Top ═══ */
/* ⚠ قاعدة #scroll-top الموروثة من متجر الدائرة حُذفت هنا عمداً.
   محدِّدها id (1,0,0) كان يغلب .scroll-top (0,1,0) فيفرض bottom:25px
   و z-index:100 — أي تحت شريط التبويبات (1040) — و opacity:.5.
   النتيجة: زرٌّ باهت مدفون خلف الشريط لا يُرى ولا يُضغط.
   التعريف الوحيد الآن في .scroll-top بالأسفل. */

/* ═══ Dashboard Nav Icons ═══ */
.main-page-nav-icon-col {
    min-height: 100px;
    text-align: center;
    border: dotted 2px var(--purple-main);
}
.main-page-nav-icon-col a { font-size: 20px; }

/* ═══ Toastr ═══ */
.toast-success .toast-progress { background-color: white; opacity: 1 !important; }
.toast-success {
    text-align: right;
    font-weight: bold;
    font-size: 16px;
    background-color: var(--purple-dark) !important;
    margin-top: 45px !important;
}
.toast-error .toast-progress { background-color: white; opacity: 1 !important; }
.toast-error {
    text-align: right;
    font-weight: bold;
    font-size: 16px;
    width: 340px !important;
    margin-top: 45px !important;
}
.toast-info .toast-progress { background-color: white; opacity: 1 !important; }
.toast-info {
    text-align: right;
    font-weight: bold;
    font-size: 16px;
    width: 340px !important;
    margin-top: 45px !important;
}

/* ═══ Form Floating Label Fix ═══ */
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
    background-color: transparent;
}

/* ═══ Transforms ═══ */
.rotate-180 { transform: rotate(180deg); }
.flip-horizontal { transform: scaleX(-1); }
.text-break { word-break: break-word; }

/* ═══ Theme Transition ═══ */
.theme-transition {
    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}
.bs-theme-box {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
}

/* ═══════════════════════════════════════════
   Purple Color System
   ═══════════════════════════════════════════ */

/* Text */
.text-purple { color: var(--purple-main) !important; }
.text-purple-light { color: var(--purple-light) !important; }
.text-purple-dark { color: var(--purple-dark) !important; }
.text-purple-muted { color: var(--purple-muted) !important; }
.text-purple-hover { transition: color 0.2s ease-in-out; }
.text-purple-hover:hover { color: var(--purple-hover) !important; }
.text-purple-first span { color: var(--purple-main) !important; }
.text-purple-last span { color: var(--purple-main) !important; }

/* Background */
.bg-purple { background-color: var(--purple-main) !important; transition: background 0.3s ease; }
.bg-purple-light { background-color: var(--purple-light) !important; }
.bg-purple-dark { background-color: var(--purple-dark) !important; }
.bg-purple-dark-hover:hover { background-color: var(--purple-dark) !important; color: white; transition: background 0.3s ease; }
.bg-p { background-color: var(--bs-body-bg); }

/* Border */
.border-purple { border-color: var(--purple-main) !important; }
.border-purple-dark { border-color: var(--purple-dark) !important; }

/* Buttons */
.btn-purple { color: #fff; background-color: var(--purple-main); border-color: var(--purple-main); }
.btn-purple:hover { color: #fff; background-color: var(--purple-hover); border-color: var(--purple-hover); }
.btn-purple:disabled, .btn-purple.disabled { color: #fff; background-color: var(--purple-disabled); border-color: var(--purple-disabled); }

.btn-purple-gradient {
    color: #fff;
    background: linear-gradient(45deg, var(--purple-main), var(--purple-hover));
    border: 1px solid transparent;
}
.btn-purple-gradient:hover {
    color: #fff;
    background: linear-gradient(45deg, var(--purple-hover), var(--purple-main));
}
.btn-purple-gradient-dark {
    color: #fff;
    background: linear-gradient(45deg, var(--purple-dark), var(--purple-hover));
    border: 1px solid transparent;
}
.btn-purple-gradient-dark:hover {
    color: #fff;
    background: linear-gradient(45deg, var(--purple-hover), var(--purple-dark));
}

.btn-outline-purple {
    color: var(--purple-main);
    border: 1px solid var(--purple-main);
    background-color: transparent;
    transition: background 0.3s ease;
}
.btn-outline-purple:hover {
    color: #fff;
    background-color: var(--purple-dark);
    border-color: var(--purple-dark);
}
.btn-outline-purple:focus { box-shadow: 0 0 0 0.2rem rgba(108, 92, 231, 0.5); }

/* Gradient BG */
.bg-purple-gradient { background: linear-gradient(45deg, var(--purple-main), var(--purple-light)) !important; }
.bg-purple-gradient-dark { background: linear-gradient(45deg, var(--purple-main), var(--purple-dark)) !important; }

/* Link */
.link-purple { color: var(--purple-main) !important; }
.link-purple:hover { color: var(--purple-hover) !important; }

/* Nav Selected */
.nav-selected {
    background: linear-gradient(45deg, var(--purple-hover), var(--purple-dark));
    color: white;
}

/* ═══════════════════════════════════════════
   Print Receipts
   ═══════════════════════════════════════════ */
@media print {
    @page { margin: 10mm; }
    body { direction: rtl; font-family: 'Cairo', sans-serif; }
}

@page receipt-a5 {
    size: A5 landscape;
    margin: 8mm;
}
@page receipt-a4 {
    size: A4 portrait;
    margin: 10mm;
}

.print-receipt-a5 { page: receipt-a5; }
.print-receipt-a4 { page: receipt-a4; }

.receipt-container {
    font-family: 'Cairo', sans-serif;
    direction: rtl;
    padding: 15px;
}
.receipt-header {
    text-align: center;
    border-bottom: 2px solid var(--purple-main);
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.receipt-logo { max-height: 60px; margin-bottom: 8px; }
.receipt-body { font-size: 14px; }
.receipt-footer {
    margin-top: 30px;
    border-top: 1px dashed #ccc;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
}

/* ═══ Placeholder / Loading ═══ */
.placeholder-glow .placeholder {
    background-color: var(--purple-light);
    opacity: 0.3;
}

/* ═══ Loading Navigate Indicator ═══ */
.loading-navigate { color: var(--purple-light); }


/* ═══ Searchable Dropdown — أضف هذا لنهاية public/css/main.css ═══ */

.search-dropdown {
    position: absolute;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    z-index: 1055;
    border-radius: 8px;
    margin-top: 2px;
    box-shadow: 0 8px 25px rgba(0,0,0,.15);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
}
.search-dropdown .dropdown-item {
    padding: 8px 14px;
    font-weight: 600;
    border-bottom: 1px solid var(--bs-border-color, #f0f0f0);
    color: var(--bs-body-color, #212529);
    cursor: pointer;
}
.search-dropdown .dropdown-item:hover,
.search-dropdown .dropdown-item:focus {
    background: var(--bs-primary-bg-subtle, #e8e0ff);
    color: var(--bs-emphasis-color, #000);
}
.search-dropdown .dropdown-item:last-child { border-bottom: none; }
.search-dropdown .dropdown-item.text-muted-item {
    color: var(--bs-secondary-color, #6c757d) !important;
    font-style: italic;
}

/* فلتر بحث فوق الجداول */
.filter-search-wrap { position: relative; }
.filter-search-wrap .search-dropdown { font-size: .85rem; }

/* شريط نسبة الإنجاز */
.form-range::-webkit-slider-runnable-track {
    background: #d1d5db;
    border-radius: 5px;
    height: 8px;
}
.form-range::-moz-range-track {
    background: #d1d5db;
    border-radius: 5px;
    height: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   Circle Store — Store-specific additions
   ═══════════════════════════════════════════════════════════════ */

/* ═══ Shape ═══ */
:root {
    --r:    18px;
    --r-sm: 11px;
    --shadow-sm: 0 4px 22px rgba(108, 92, 231, .10);
    --shadow-md: 0 8px 42px rgba(108, 92, 231, .18);
}

/* ═══ Dark mode overrides ═══ */
[data-bs-theme="dark"] {
    --bs-body-bg: #14142a;
    --bs-body-color: #e4e4e8;
    --bs-tertiary-bg: #1b1b38;
    --bs-border-color: #2d2d52;
}

[data-bs-theme="dark"] .public-header { background: #1b1b38 !important; border-bottom-color: var(--purple-dark) !important; }
[data-bs-theme="dark"] .circle-card { background: #20203d; border-color: #2d2d52; }

/* ═══ Public header ═══ */
.public-header {
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(12px);
    border-bottom: 2px solid var(--purple-main);
    padding: .4rem 0;
    z-index: 1030;
}
.public-header .brand { display: inline-flex; align-items: center; }
.public-header .nav-link {
    color: var(--bs-body-color);
    font-weight: 600;
    border-radius: var(--r-sm);
    transition: all .2s;
}
.public-header .nav-link:hover { color: var(--purple-main); }
.public-header .nav-link.active {
    background: linear-gradient(45deg, var(--purple-main), var(--purple-hover));
    color: white;
}
.mobile-menu { padding: .5rem 0; border-top: 1px solid var(--bs-border-color); }
.mobile-menu a { color: var(--bs-body-color); }
.mobile-menu a:hover { background: var(--bs-tertiary-bg); color: var(--purple-main); }

/* ═══ Cards ═══ */
.circle-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    transition: transform .25s, box-shadow .25s;
    overflow: hidden;
}

/* استثناء: البطاقات التي تحوي جدولاً نتركها مكشوفة كي لا تُقصّ القوائم المنسدلة */
.circle-card:has(.table-responsive),
.circle-card:has(table) {
    overflow: visible;
}
.circle-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.circle-card .card-img { width: 100%; height: 200px; object-fit: cover; }

/* ═══ Category chip ═══ */
.category-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    padding: .4rem 1rem; border-radius: 50px;
    font-weight: 600; font-size: .9rem;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: all .2s;
}
.category-chip:hover, .category-chip.active {
    background: var(--purple-main); color: white; border-color: var(--purple-main);
}

/* ═══ Tabs ═══ */
.circle-tabs {
    display: flex; gap: .3rem;
    border-bottom: 2px solid var(--bs-border-color);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}
.circle-tab {
    padding: .75rem 1.2rem;
    font-weight: 700;
    color: var(--bs-body-color);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all .2s;
    white-space: nowrap;
    background: none; border-top: none; border-left: none; border-right: none;
}
.circle-tab:hover { color: var(--purple-main); }
.circle-tab.active {
    color: var(--purple-main);
    border-bottom-color: var(--purple-main);
}

/* ═══ Price display ═══ */
.price-tag {
    font-size: 1.4rem; font-weight: 900;
    color: var(--purple-dark);
}
.price-tag .old { font-size: .95rem; text-decoration: line-through; color: var(--bs-secondary-color); font-weight: 500; margin-left: .5rem; }

/* ═══ Version card ═══ */
.version-card {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--r-sm);
    padding: 1rem;
    margin-bottom: 1rem;
}
.version-card.is-latest {
    border-color: var(--purple-main);
    box-shadow: 0 0 0 2px rgba(108,92,231,.15);
}

/* ═══ YouTube responsive embed ═══ */
.yt-embed {
    position: relative; padding-bottom: 56.25%; height: 0;
    border-radius: var(--r-sm); overflow: hidden;
    background: #000;
}
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ═══ Empty state ═══ */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--bs-secondary-color);
}
.empty-state i { font-size: 4rem; margin-bottom: 1rem; opacity: .4; }

/* ═══ Admin KPI cards ═══ */
.kpi-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--r-sm);
    padding: 1.5rem;
    display: flex; align-items: center; gap: 1rem;
    transition: transform .2s, box-shadow .2s;
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.kpi-card .kpi-icon {
    width: 56px; height: 56px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--purple-light), var(--purple-main));
    color: white;
    flex-shrink: 0;
}
.kpi-card .kpi-value { font-size: 1.8rem; font-weight: 900; color: var(--purple-dark); line-height: 1; }
.kpi-card .kpi-label { font-size: .88rem; color: var(--bs-secondary-color); margin-top: .3rem; }

/* ═══ Utilities ═══ */
[x-cloak] { display: none !important; }
.min-h-40 { min-height: 40vh; }
.object-fit-cover { object-fit: cover; }

/* ═══ Responsive tweaks ═══ */
/* ⚠ screen إلزامية: بدونها تنطبق القاعدة على وسيط الطباعة أيضاً
   (A4 ≈ 794px CSS < 576px؟ لا — لكن الاتفاقية موحّدة لكل query عرضي) */
@media screen and (max-width: 576px) {
    .kpi-card { padding: 1rem; }
    .kpi-card .kpi-icon { width: 44px; height: 44px; font-size: 1.2rem; }
    .kpi-card .kpi-value { font-size: 1.4rem; }
}


/* ═══════════════════════════════════════════════════════════════
   Admin Dashboard — Quick-access Cards
   ═══════════════════════════════════════════════════════════════ */

.admin-quick-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--r);
    padding: 1.5rem 1.2rem;
    text-align: center;
    color: var(--bs-body-color);
    transition: transform .25s, box-shadow .25s, border-color .25s;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.admin-quick-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(108,92,231,.18);
    border-color: var(--purple-main);
}
.admin-quick-card .quick-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.7rem;
    margin-bottom: .9rem;
    background: linear-gradient(135deg, var(--purple-light), var(--purple-main));
    transition: transform .3s;
}
.admin-quick-card:hover .quick-icon {
    transform: scale(1.1) rotate(-5deg);
}
.admin-quick-card .quick-icon.bg-purple   { background: linear-gradient(135deg, var(--purple-light), var(--purple-main)); }
.admin-quick-card .quick-icon.bg-primary  { background: linear-gradient(135deg, #5dade2, #2980b9); }
.admin-quick-card .quick-icon.bg-success  { background: linear-gradient(135deg, #58d68d, #27ae60); }
.admin-quick-card .quick-icon.bg-warning  { background: linear-gradient(135deg, #f5b041, #e67e22); }
.admin-quick-card .quick-icon.bg-info     { background: linear-gradient(135deg, #5dade2, #3498db); }
.admin-quick-card .quick-icon.bg-danger   { background: linear-gradient(135deg, #ec7063, #c0392b); }


/* ═══════════════════════════════════════════════════════════════
   Dropdowns fix — ضمان الظهور فوق كل شي
   ═══════════════════════════════════════════════════════════════ */
.dropdown-menu {
    z-index: 1060;  /* فوق الـ offcanvas والـ table-responsive */
    box-shadow: 0 8px 25px rgba(0,0,0,.12);
    border-radius: var(--r-sm);
    padding: .4rem;
}
.dropdown-menu .dropdown-item {
    border-radius: 8px;
    padding: .5rem .8rem;
    font-weight: 500;
}
.dropdown-menu .dropdown-item:hover {
    background-color: rgba(108,92,231,.08);
    color: var(--purple-dark);
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: var(--purple-main);
    color: white;
}


/* ═══════════════════════════════════════════════════════════════
   Mobile menu — active state
   ═══════════════════════════════════════════════════════════════ */
.mobile-menu {
    padding: .5rem 0;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}
.mobile-menu .mobile-link {
    display: block;
    padding: .7rem 1rem;
    margin: .15rem .5rem;
    border-radius: var(--r-sm);
    color: var(--bs-body-color);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: all .2s ease;
}
.mobile-menu .mobile-link:hover {
    background: rgba(108,92,231,.08);
    color: var(--purple-main);
}
.mobile-menu .mobile-link.active {
    background: linear-gradient(45deg, var(--purple-main), var(--purple-hover));
    color: white;
    box-shadow: 0 3px 10px rgba(108,92,231,.3);
}


/* ═══════════════════════════════════════════════════════════════
   Print Styles — للإيصال والصفحات القابلة للطباعة
   ═══════════════════════════════════════════════════════════════ */
@media print {
    /* إخفاء العناصر غير الضرورية */
    .public-header,
    .mobile-menu,
    #scroll-top,
    .no-print,
    nav.breadcrumb,
    .alert.alert-warning,         /* تنبيه "احفظ هذا الرابط" */
    button,
    .btn,
    a.btn { display: none !important; }

    /* إعادة ضبط الخلفية والظلال */
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt;
    }

    .circle-card {
        background: white !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }

    /* إزالة gradient من رأس الإيصال */
    .receipt-hero {
        background: white !important;
        color: black !important;
        border: 2px solid var(--purple-main) !important;
    }
    .receipt-hero i {
        color: var(--purple-main) !important;
    }

    .container, .container-fluid {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* تكبير الخطوط لقابلية القراءة */
    h1, h2, h3, h4, h5, h6 { color: black !important; }
    .text-purple-dark { color: var(--purple-dark) !important; }

    /* إزالة الحواف المستديرة الكبيرة */
    .circle-card { border-radius: 8px !important; }

    /* الجداول */
    table {
        border-collapse: collapse !important;
        width: 100% !important;
    }
    table td, table th {
        padding: 6px 10px !important;
        border-bottom: 1px solid #ddd !important;
    }

    /* تجنب قطع الصفوف بين الصفحات */
    tr, .border-bottom { page-break-inside: avoid; }

    @page {
        margin: 1.5cm;
        size: A4;
    }
}


/* ═══════════════════════════════════════════════════════════════
   Responsive Tables — T1a
   ───────────────────────────────────────────────────────────────
   السبب الجذري للفيض الأفقي في جداول الأدمن هو القاعدة أعلاه:

       .table-responsive { white-space: nowrap; overflow: visible; }

   الـ `overflow: visible` إلزامي ويحمي القوائم المنسدلة داخل الجداول،
   ولا يمكن استبداله بـ `overflow-x: auto` لأن المواصفة تُجبر المحور
   الثاني على `auto` أيضاً فتُقصّ القوائم من جديد.
   ⇒ الحل ليس إعادة التمرير، بل إلغاء الحاجة إليه:
      رفع `nowrap` تحت lg حتى تلتف الخلايا وينكمش عرض الجدول طبيعياً.

   ⚠ `screen` إلزامية في كل query عرضي هنا:
   في وسيط الطباعة يُقاس `max-width` على صندوق الصفحة (A4 ≈ 794px CSS)
   فبدونها تنطبق قواعد الموبايل على المطبوعات وتتعارض مع كتلة الطباعة.
   ═══════════════════════════════════════════════════════════════ */

/*
 * حزام أمان: لا يفيض أي جدول أفقياً مهما طال محتوى خلية.
 * word-break يكسر الكلمات الطويلة جداً (روابط، بريد بلا مسافات) بدل
 * أن تمدّد العمود، و table-layout يمنع عموداً واحداً من ابتلاع العرض.
 */
.table-responsive > .table {
    width: 100%;
    max-width: 100%;
}

.table-responsive > .table td,
.table-responsive > .table th {
    /* break-word لا anywhere: الأخير يكسر داخل الكلمات القصيرة أيضاً
       فيقطّع «Circle-OMR Online» حرفاً حرفاً بلا داعٍ */
    overflow-wrap: break-word;
}

@media screen and (max-width: 991.98px) {

    /* تكثيف الخلايا لاستعادة مساحة أفقية */
    .table-responsive > .table { font-size: .875rem; }
    .table-responsive > .table > :not(caption) > * > * {
        padding-inline: .45rem;
        padding-block: .55rem;
    }

    /* أزرار الإجراءات: تقليل الحشو مع إبقائها قابلة للمس */
    .table-responsive .btn-group-sm > .btn,
    .table-responsive .btn-sm {
        padding-inline: .45rem;
        min-height: 34px;
    }

    /* منع الصور المصغّرة من فرض عرض زائد */
    .table-responsive img { max-width: 44px; height: auto; }

    /* الترقيم: يلتف بدل أن يفيض (المجال 576-991px هو المتضرّر —
       تحت 576px يعرض Bootstrap نسخة السابق/التالي المبسّطة أصلاً) */
    .pagination { flex-wrap: wrap; justify-content: center; row-gap: .35rem; }
    .pagination .page-link { padding: .35rem .6rem; font-size: .85rem; }
}

/* ───────────────────────────────────────────────────────────────
   أعمدة ثانوية قابلة للإخفاء.
   تُوضع على الـ <th> و <td> المتقابلين معاً، وإلا انزاح الجدول.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 991.98px) {
    .col-hide-lg { display: none !important; }
}
@media screen and (max-width: 767.98px) {
    .col-hide-md { display: none !important; }
}
@media screen and (max-width: 575.98px) {
    .col-hide-sm { display: none !important; }
}

/* ───────────────────────────────────────────────────────────────
   بطاقات KPI — المجال 576→767px كان يعرض بطاقات بحجم ديسكتوب
   كامل داخل عمودين ضيقين. كتلة التصغير الموجودة تبدأ من 576px فقط.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 767.98px) {
    .kpi-card { padding: 1.1rem; gap: .75rem; }
    .kpi-card .kpi-icon { width: 46px; height: 46px; font-size: 1.25rem; border-radius: 12px; }
    .kpi-card .kpi-value { font-size: 1.45rem; }
    .kpi-card .kpi-label { font-size: .8rem; }

    /* الرفع عند hover بلا فائدة على اللمس ويسبب اهتزازاً */
    .kpi-card:hover { transform: none; box-shadow: none; }
}


/* ═══════════════════════════════════════════════════════════════
   بطاقات مكدّسة للجداول — T1b
   ───────────────────────────────────────────────────────────────
   جدول بـ8 أعمدة على 390px يعطي ~70px لكل عمود، فينكسر النص
   حرفاً حرفاً ويصير غير مقروء حتى بلا فيض أفقي.
   الحل: تحت 768px يتحوّل كل صف إلى بطاقة، وكل خلية سطر
   «العنوان: القيمة» عبر data-label.

   يُفعَّل بإضافة .table-stack على الـ <table> ووضع data-label
   على كل <td> مطابقاً لنص الـ <th>.

   ⚠ لا overflow: hidden على الصف — القوائم المنسدلة داخل
     .btn-group تُقصّ. التدوير عبر أول/آخر خلية بدلاً منه.
   ═══════════════════════════════════════════════════════════════ */

@media screen and (max-width: 767.98px) {

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

    .table-stack > thead {
        display: none;
    }

    .table-stack > tbody > tr {
        background: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color);
        border-radius: var(--r-sm);
        box-shadow: var(--shadow-sm);
        margin-bottom: .75rem;
        padding: .25rem 0;
    }

    /* تدوير الزوايا بلا overflow: hidden حفاظاً على القوائم المنسدلة */
    .table-stack > tbody > tr > td:first-child {
        border-start-start-radius: var(--r-sm);
        border-start-end-radius: var(--r-sm);
    }
    .table-stack > tbody > tr > td:last-child {
        border-end-start-radius: var(--r-sm);
        border-end-end-radius: var(--r-sm);
        border-bottom: 0;
    }

    /* الخلية = سطر «العنوان : القيمة».
       specificity أعلى + !important لتجاوز td,th{text-align:center!important} */
    .table-stack > tbody > tr > td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        text-align: end !important;
        border: 0;
        border-bottom: 1px dashed var(--bs-border-color);
        padding: .5rem .85rem !important;
        min-height: 42px;
    }

    .table-stack > tbody > tr > td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: .8rem;
        color: var(--bs-secondary-color);
        text-align: start;
        flex: 0 0 35%;
        max-width: 35%;
    }

    /* خلية بلا عنوان (أزرار، محتوى ممتد) تأخذ العرض كاملاً */
    .table-stack > tbody > tr > td:not([data-label])::before {
        content: none;
    }

    .table-stack > tbody > tr > td.cell-actions {
        justify-content: flex-start;
        background: var(--bs-tertiary-bg);
        border-bottom: 0;
    }
    .table-stack > tbody > tr > td.cell-actions::before {
        content: none;
    }

    /* صفوف النماذج الممتدة (colspan) — بلا عنوان وبلا حشو جانبي */
    .table-stack > tbody > tr > td.cell-full {
        display: block;
        padding: 0 !important;
        border-bottom: 0;
    }
    .table-stack > tbody > tr > td.cell-full::before {
        content: none;
    }

    /* الحالة الفارغة تبقى سطراً واحداً مركزياً */
    .table-stack > tbody > tr > td.cell-empty {
        display: block;
        text-align: center !important;
    }
    .table-stack > tbody > tr > td.cell-empty::before {
        content: none;
    }

    /* داخل البطاقة مساحة كافية — لا داعي لكسر التواريخ والأرقام */
    .table-stack > tbody > tr > td small,
    .table-stack > tbody > tr > td .font-monospace {
        white-space: nowrap;
    }

    /* البطاقة تتسع للكل — نُلغي إخفاء الأعمدة داخلها */
    .table-stack > tbody .col-hide-lg,
    .table-stack > tbody .col-hide-md,
    .table-stack > tbody .col-hide-sm {
        display: flex !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   تمرير عمودي داخل الجدول
   ───────────────────────────────────────────────────────────────
   ⚠ تُستعمل فقط على الجداول التي لا تحوي قوائم منسدلة في صفوفها.
   السبب: overflow-y: auto يُجبر المحور الأفقي على auto أيضاً (المواصفة
   لا تسمح بمحور مقصوص وآخر مرئي)، فيصير الحاوي صندوق تمرير يقصّ أي
   عنصر مطلق يخرج منه — أي القوائم المنسدلة.

   آمنة حالياً في: الاشتراكات · البرامج · العملاء · الصرفيات
   ❌ لا تستعملها في: الطلبات · الرسائل (فيهما dropdown داخل الصفوف)
   ═══════════════════════════════════════════════════════════════ */

@media screen and (min-width: 768px) {

    .table-scroll {
        max-height: var(--table-max-h, 62vh);
        overflow-y: auto;
    }

    /* رأس ثابت أثناء التمرير — بلا هذا يضيع سياق الأعمدة */
    .table-scroll > .table > thead th {
        position: sticky;
        top: 0;
        z-index: 3;
    }

    /* شريط تمرير أنحف داخل الجدول تمييزاً له عن تمرير الصفحة */
    .table-scroll::-webkit-scrollbar { width: 10px; }
    .table-scroll::-webkit-scrollbar-thumb {
        background: var(--purple-light);
        border-radius: 6px;
    }
    .table-scroll::-webkit-scrollbar-thumb:hover { background: var(--purple-main); }
    .table-scroll::-webkit-scrollbar-track { background: transparent; }
}

/* على الموبايل الوضع بطاقات مكدّسة — تمرير داخلي فوق تمرير الصفحة مزعج */
@media screen and (max-width: 767.98px) {
    .table-scroll {
        max-height: none;
        overflow-y: visible;
    }
}

/* شريط أدوات أسفل الجدول: عدد العناصر + الترقيم */
.table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--bs-border-color);
}
.table-toolbar .pagination { margin-bottom: 0; }


/* ═══════════════════════════════════════════════════════════════
   موني — ما يضيفه التطبيق فوق الملف الموروث (§20)
   ───────────────────────────────────────────────────────────────
   الملف أعلاه منسوخ من المشروع الشقيق وهو التعريف الوحيد لـ
   .circle-card و .kpi-card و .table-stack و .table-scroll و
   .table-toolbar و .empty-state و .circle-tabs و .col-hide-* و
   .cell-* و .category-chip و .btn-purple* و .text-purple* وتجاوزات
   toastr. كل مرحلة لاحقة تُلحق هنا ولا تكتب فوقه أبداً.

   كتلتا :root في §20.1 معرّفتان أصلاً في أعلى هذا الملف بنفس القيم
   بالضبط (الألوان البنفسجية الست + --r و --r-sm و --shadow-sm و
   --shadow-md) — تكرارهما هنا بلا فائدة فتُركتا كما هي.
   ═══════════════════════════════════════════════════════════════ */

/* ── §20.3 الوضع الداكن ── */
[data-bs-theme="dark"]{--bs-body-bg:#14142a;--bs-body-color:#e4e4e8;--bs-tertiary-bg:#1b1b38;--bs-border-color:#2d2d52}
[data-bs-theme="dark"] .circle-card { background:#20203d; border-color:#2d2d52; }
[data-bs-theme="dark"] .text-purple { color: var(--purple-light) !important; }
[data-bs-theme="dark"] .kpi-card .kpi-value { color: var(--purple-light); }
[data-bs-theme="dark"] .mony-nav-item.active { color: var(--purple-light); border-right-color: var(--purple-light); }

/* ── تصحيح موروث: كان معرّفاً داخل مكوّن فيغيب صامتاً في بقية الصفحات ── */
.bg-purple-soft { background: rgba(108,92,231,.1); }

/* ── أرقام ثنائية الاتجاه ── */
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; font-feature-settings:"tnum"; }
.cur { font-weight:600; opacity:.85; }
td .num, th .num, .kpi-value .num { white-space: nowrap; }

/* ── بطاقة KPI ثنائية العملة ── */
.kpi-card .kpi-sub { font-size:1rem; font-weight:700; color: var(--bs-secondary-color); line-height:1.2; }
.kpi-card .kpi-combined { margin-top:.35rem; font-size:.75rem; font-weight:600; color: var(--purple-main);
                          display:flex; align-items:center; gap:.25rem; }
@media screen and (max-width: 575.98px){
    .kpi-card .kpi-value{font-size:1.25rem}.kpi-card .kpi-sub{font-size:.85rem}.kpi-card .kpi-combined{font-size:.68rem}
}

/* ── الشريط العلوي ── */
.mony-topbar { position:sticky; top:0; z-index:1030; display:flex; align-items:center; gap:.5rem;
               padding:.6rem 1rem; background: var(--bs-body-bg);
               border-bottom:1px solid var(--bs-border-color); box-shadow: var(--shadow-sm); }
.mony-topbar .topbar-btn { border:1px solid var(--bs-border-color); background:transparent;
                           border-radius: var(--r-sm); width:38px; height:38px; color: var(--purple-main); }
.mony-topbar .topbar-badge { position:absolute; top:-4px; inset-inline-start:100%; transform:translateX(50%); font-size:.65rem; }
/* ⚠ z-index أعلى من شريط التبويبات (1040) لا أدنى منه، وإلا دُفن الزرّ خلفه
   على الهاتف فبدا معطّلاً. و display:flex مع التوسيط شرطٌ لظهور السهم أصلاً:
   main.js يبدّل display بين none و flex، وبلا توسيط ينزوي الأيقونة في الزاوية. */
.scroll-top { position:fixed; inset-inline-end:1rem; bottom:104px; z-index:1045;
              width:44px; height:44px; border:0; border-radius:50%; color:#fff;
              align-items:center; justify-content:center; font-size:1.15rem; cursor:pointer;
              box-shadow:0 4px 15px rgba(108,92,231,.35);
              background: linear-gradient(45deg, var(--purple-main), var(--purple-hover)); }
.scroll-top:hover { background: linear-gradient(45deg, var(--purple-hover), var(--purple-main)); }
.scroll-top:active { transform: scale(.94); }

/* فوق 768px لا شريط تبويبات، فينزل الزرّ إلى مكانه الطبيعي */
@media screen and (min-width: 768px){ .scroll-top { bottom: 1.5rem; } }

/* ── الشريط الجانبي ── */
.mony-nav-item { display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem; text-decoration:none;
                 color: var(--bs-body-color); font-weight:600; border-bottom:1px solid var(--bs-border-color);
                 transition: background .2s, padding-right .2s, color .2s; }
.mony-nav-item:last-child { border-bottom:0; }
.mony-nav-item i.bi:first-child { font-size:1.15rem; }
.mony-nav-item:hover { background: rgba(108,92,231,.06); color: var(--purple-main); padding-right:1.25rem; }
.mony-nav-item.active { background: linear-gradient(90deg, rgba(108,92,231,.12), rgba(108,92,231,.02));
                        color: var(--purple-main); border-right:3px solid var(--purple-main); font-weight:700; }
.mony-nav-sep { padding:.75rem 1rem .25rem; font-size:.8rem; font-weight:700; color: var(--bs-secondary-color); }
/* ── حاوية الشريط الجانبي ──
   ⚠ الشريط و <main> شقيقان في القالب بلا حاوية أعمدة. فوق 992px يتحوّل
     offcanvas-lg إلى عنصر ساكن عادي بحكم Bootstrap، فيُرسم بعرض الصفحة كاملاً
     فوق المحتوى. position:sticky وحده لا يُخرجه من التدفّق ولا يصنع عمودين —
     لذلك يُثبَّت هنا بـ fixed ويُزاح الباقي بمقدار عرضه. */
.mony-sidebar { background: var(--bs-body-bg); }

.sidebar-brand { display:flex; align-items:center; gap:.6rem; padding:1rem; font-weight:900;
                 font-size:1.15rem; color: var(--purple-main); text-decoration:none;
                 border-bottom:1px solid var(--bs-border-color); }
.sidebar-brand i.bi { font-size:1.4rem; }
.sidebar-nav { display:flex; flex-direction:column; }

@media screen and (min-width: 992px){
    :root { --sidebar-w: 260px; }

    /* الشريط عمود ثابت على حافة البداية (اليمين في RTL) بارتفاع الشاشة */
    .mony-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        width: var(--sidebar-w);
        z-index: 1045;                       /* فوق topbar (1030) ودون المودالات */
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-inline-end: 1px solid var(--bs-border-color);
        box-shadow: var(--shadow-sm);
        visibility: visible;                 /* offcanvas يضع visibility:hidden افتراضياً */
        transform: none;
    }
    .mony-sidebar .offcanvas-body { flex: 1 1 auto; overflow: visible; }

    /* إزاحة كل ما هو خارج الشريط بمقدار عرضه — بلا هذا يركب الشريط على المحتوى */
    .mony-topbar,
    .main-section,
    #mony-offline-banner { margin-inline-start: var(--sidebar-w); }
}

/* ── شريط التبويبات السفلي ── */
@media screen and (max-width: 767.98px){
    .mony-tabbar { position:fixed; inset-inline:0; bottom:0; z-index:1040; display:grid;
                   grid-template-columns:1fr 1fr 76px 1fr 1fr; align-items:center;
                   background: var(--bs-body-bg); border-top:1px solid var(--bs-border-color);
                   box-shadow:0 -4px 22px rgba(108,92,231,.10); padding-bottom: env(safe-area-inset-bottom, 0); }
    .mony-tabbar .tab-link { display:flex; flex-direction:column; align-items:center; justify-content:center;
                             gap:.15rem; min-height:56px; text-decoration:none;
                             color: var(--bs-secondary-color); font-size:.7rem; font-weight:700; }
    .mony-tabbar .tab-link i { font-size:1.25rem; }
    .mony-tabbar .tab-link.active { color: var(--purple-main); }
    .mony-tabbar .tab-fab { width:56px; height:56px; border:0; border-radius:50%; justify-self:center; margin-top:-22px;
                            color:#fff; font-size:1.5rem;
                            background: linear-gradient(45deg, var(--purple-main), var(--purple-hover));
                            box-shadow:0 6px 18px rgba(108,92,231,.45); }
    .mony-tabbar .tab-fab:active { transform: scale(.94); }
    /* ⚠ الشريط 57px + الزرّ الدائري يبرز فوقه ~10px + مساحة الأمان في أجهزة
       آيفون (env) — الرقم الثابت وحده لا يكفي على جهاز فيه شريط منزلي.
       ويأتي بعد .main-section بالملف حتى لا يُدهَس. */
    .main-section.pb-nav { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ── شريط سعر الصرف ── */
.fx-bar .input-group-text { font-weight:700; }
.fx-disclosure { font-size:.75rem; font-weight:600; color: var(--bs-secondary-color); }
@media screen and (min-width: 768px){ .fx-bar.is-sticky { position: sticky; top: 74px; z-index: 1020; } }

/* ── الإدخال السريع ── */
.quick-sheet .modal-content { border-radius: var(--r); overflow:hidden; }
.amount-input { font-size:2.2rem; font-weight:900; text-align:center; letter-spacing:.02em; padding:.5rem .75rem;
                color: var(--purple-dark); font-variant-numeric: tabular-nums; }
[data-bs-theme="dark"] .amount-input { color: var(--purple-light); }
.chip-scroller { display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.35rem;
                 -webkit-overflow-scrolling:touch; scroll-snap-type: x proximity; }
.chip-scroller::-webkit-scrollbar { height:4px; }
.chip-scroller::-webkit-scrollbar-thumb { background: var(--purple-light); border-radius:4px; }
.chip-scroller .category-chip { flex:0 0 auto; scroll-snap-align:start; }
/* على الشاشات الكبيرة الورقة نافذة واسعة مثل «حركة جديدة» — الحقول تتنفّس
   ويصير شريط التصنيفات يعرض أكثر من ثلاث بطاقات بلا تمرير. */
@media screen and (min-width: 768px){
    .quick-sheet .modal-body   { padding: 1.35rem 1.5rem; }
    .quick-sheet .modal-footer { padding: 1rem 1.5rem; }
    .quick-sheet .amount-input { font-size: 3rem; padding: .7rem 1rem; }
    .quick-sheet .chip-scroller { flex-wrap: wrap; overflow-x: visible; }
}

@media screen and (max-width: 767.98px){
    .quick-sheet { position:fixed; inset-inline:0; bottom:0; margin:0; max-width:100%; width:100%; align-items:flex-end !important; }
    .quick-sheet .modal-content { border-start-start-radius: var(--r); border-start-end-radius: var(--r);
                                  border-end-start-radius:0; border-end-end-radius:0; border-bottom:0;
                                  padding-bottom: env(safe-area-inset-bottom, 0); animation: sheet-up .22s ease-out; }
    .quick-sheet .modal-body { max-height:62vh; overflow-y:auto; }
    .amount-input { font-size:2.6rem; }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ── منتقي التصنيف المشترك (components/category-picker) ──
   الشكوى الأصلية: عشرون تصنيفاً في .chip-scroller أفقي واحد؛ على 360px
   تُرى ثلاث شرائح والباقي خلف سحبٍ أعمى. الحلّ التفاف رأسي بسقف، لأن
   التمرير الرأسي هو الحركة الطبيعية على الهاتف وأنت ترى ما تحتك.
   ⚠ .chip-scroller ما زالت مستعملة في تقرير الشهر (شريط 12 شهراً) — لا
     تحذفها. */
.category-picker .picker-search .form-control,
.category-picker .picker-search .btn,
.category-picker .picker-search .input-group-text { min-height: 40px; }

.category-picker .picker-chips {
    display: flex; flex-wrap: wrap; gap: .5rem;
    /* السقف يمنع الورقة من أن تصير عموداً لا نهاية له، و overscroll
       محصور حتى لا يبتلع هذا الصندوقُ تمريرَ .quick-sheet .modal-body
       (max-height:62vh; overflow-y:auto) فوقه. */
    max-height: 13rem; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: .2rem;
}
.category-picker .picker-chips::-webkit-scrollbar { width: 4px; }
.category-picker .picker-chips::-webkit-scrollbar-thumb { background: var(--purple-light); border-radius: 4px; }

.category-picker .picker-cell { display: inline-flex; }
/* هدف لمسٍ حقيقي — الحشوة وحدها تعطي ~34px وهو أقلّ من الحدّ المقبول */
.category-picker .category-chip { min-height: 40px; }

/* الشريحة المعروضة لأنها المختارة لا لأنها نتيجة بحث: خطٌّ متقطّع + كلمة
   صريحة، حتى لا تُقرأ نتيجةً مطابِقة فيظنّ المستخدم أن بحثه أصاب. */
.category-picker .picker-cell.is-pinned .category-chip {
    outline: 2px dashed var(--purple-main);
    outline-offset: 2px;
}
.category-picker .picker-cell.is-pinned .category-chip::after {
    content: "المختار";
    font-size: .7rem; font-weight: 700; opacity: .85;
    margin-inline-start: .35rem;
}

@media screen and (min-width: 768px){
    .category-picker .picker-chips { max-height: 17rem; }
}

/* ── صف التذكير ── */
.reminder-row { display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem; border-bottom:1px solid var(--bs-border-color); }
.reminder-row:last-child { border-bottom:0; }
.reminder-icon { width:40px; height:40px; border-radius:12px; flex-shrink:0; color:#fff;
                 display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
@media screen and (max-width: 767.98px){ .reminder-row { flex-wrap: wrap; } }

/* ── مخططات ── */
.mony-chart { max-width:100%; }
.chart-wrap { position: relative; }

/* ── أدوات صغيرة مستعملة في القوالب ── */
.min-w-0      { min-width: 0; }
.nowrap-cell  { white-space: nowrap; }
/* ── منطقة المحتوى ──
   ⚠ padding-inline ليس تجميلاً: صفوف بوتستراب (.row) تحمل هوامش سالبة بمقدار
     نصف الـ gutter (‏g-3 ⇒ ‑8px لكل جهة). صفٌّ بلا حاوية تمتصّها يخرج 8px عن
     الحافة فيولد شريط تمرير أفقي في الصفحة كلها. الحاوية في كل شاشة هي الحلّ
     الأساس، وهذا الحشو شبكة أمان لأي صفّ يُضاف لاحقاً خارجها. */
/* ⚠ padding-top لا padding-block: الاختصار يعيد ضبط padding-bottom أيضاً،
   وهذه القاعدة تأتي بعد .pb-nav في الملف وبنفس الأولوية — فكانت تدهس
   الـ 92px التي تُبعد المحتوى عن شريط التبويبات، فتختفي آخر الحقول تحته. */
.main-section { padding-top: 1rem; padding-inline: .5rem; padding-bottom: 1rem; }

/* ⚠ لا تضع overflow-x هنا إطلاقاً — لا clip ولا hidden.
   جُرّب overflow-x:clip على html/body فأوقف التمرير الرأسي كلياً: تنصّ
   المواصفة على أنّ المحور الآخر إذا كان visible تحوّل هو أيضاً إلى clip،
   فصار scrollY صفراً دائماً على صفحة طولها 10 آلاف بكسل — الصفحة لا تنزل
   وزرّ «أعلى الصفحة» لا يظهر أبداً لأنّ شرطه scrollY > 300.
   و overflow-x:hidden بديلٌ سيّئ أيضاً: ينشئ حاوية تمرير تكسر
   position:sticky وتقصّ القوائم المنسدلة.
   العلاج الحقيقي ليس هنا: كل شاشة ملفوفة بـ .container تمتصّ هوامش
   .row السالبة، و .main-section تحمل padding-inline كشبكة أمان. */
html, body { max-width: 100%; }

/* ── مساحات اللمس على الجوال ──
   أزرار الأوامر في الصفوف هي btn-sm (‏≈30×31px) وزر القائمة المنسدلة المشقوق
   ‏22px عرضاً — أصغر من أن تُصاب بالإبهام. نكبّرها تحت 768px فقط حتى تبقى
   كثافة سطح المكتب كما هي. */
@media screen and (max-width: 767.98px){
    /* min-* لا يُقلّص شيئاً: الأزرار النصية أعرض أصلاً فلا تتأثر، والأزرار
       الأيقونية وحدها هي التي تكبر إلى مربّع قابل للّمس. */
    .main-section .btn { min-height: 40px; min-width: 40px; }
    .main-section .btn-group > .dropdown-toggle-split { min-width: 34px; }
}
.month-stepper{ position: relative; }
.amount-pad   { display: block; }

/* ── Alpine ── */
[x-cloak] { display: none !important; }

/* ── إتاحة ── */
:focus-visible { outline:2px solid var(--purple-main); outline-offset:2px; border-radius:4px; }
[data-bs-theme="dark"] :focus-visible { outline-color: var(--purple-light); }
.btn-check:focus-visible + .btn { box-shadow:0 0 0 .2rem rgba(108,92,231,.5); }
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
    .circle-card:hover, .kpi-card:hover { transform:none; }
    .quick-sheet .modal-content { animation:none; }
}

/* ── خطوط ذاتية الاستضافة تُحمّل من public/css/fonts.css ── */
body { font-family:'Cairo', system-ui, -apple-system, sans-serif; }

/* ═══════════════════════════════════════════════════════════════
   موني — إضافات المرحلة 2 (تُلحق ولا تستبدل شيئاً أعلاه)
   ═══════════════════════════════════════════════════════════════ */

/* ── رموز التصميم — §20.1 ── */
:root{--purple-main:#6c5ce7;--purple-light:#a29bfe;--purple-dark:#4834d4;--purple-muted:#5f27cd;--purple-hover:#7d5fff;--purple-disabled:#686de0}
:root{--r:18px;--r-sm:11px;--shadow-sm:0 4px 22px rgba(108,92,231,.10);--shadow-md:0 8px 42px rgba(108,92,231,.18)}

/* ── بلاطة الأيقونة — تعريف مستقل: شاشة الدخول تستعملها خارج .kpi-card ── */
.kpi-icon { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;
            font-size:1.6rem; color:#fff; flex-shrink:0;
            background: linear-gradient(135deg, var(--purple-light), var(--purple-main)); }

/* ── أرقام ثنائية الاتجاه — §20.4 ── */
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; font-feature-settings:"tnum"; }
.cur { font-weight:600; opacity:.85; }
td .num, th .num, .kpi-value .num { white-space: nowrap; }

/* ═══ المرحلة 9 — رأس المجموعة اللاصق في الخطّ الزمني للتذكيرات ═══ */
.reminder-group-header {
    position: sticky; top: 0; z-index: 2;
    padding: .6rem 1rem; font-weight: 700;
    background: rgba(108,92,231,.10);
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: var(--r) var(--r) 0 0;
}
[data-bs-theme="dark"] .reminder-group-header { background: rgba(108,92,231,.20); }
/* بلاطة‑التبويب زرٌّ فعلاً، فتحتاج مؤشّراً وبداية سطر عربية */
.kpi-card[aria-pressed] { cursor: pointer; text-align: start; }
@media screen and (max-width: 767.98px) {
    .reminder-group-header { border-radius: 8px 8px 0 0; }
}

/* ═══════════════════════════════════════════════════════════════
   حاوية القوائم المنسدلة — .dropdown-host
   ───────────────────────────────────────────────────────────────
   العطل المُبلَّغ عنه: قائمة صفٍّ تُفتح فتظهر مبتورة أو «تحت نهاية
   قسمها». السبب المقيس — لا المُخمَّن — أنّ .circle-card تحمل
   overflow: hidden لتقصّ زواياها المدوّرة، فتقصّ معها كل
   .dropdown-menu مطلقةٍ تخرج من حدودها. بطاقة التذكيرات كانت تفقد
   من ٣٦٢px ارتفاعَ قائمتها: ٣٤٩px عند 375px عرضاً و٣٤٢px عند 1440px
   — أي لا يبقى ظاهراً غير شريط ٢٠px.
   الاستثناءان القديمان (:has(table) و :has(.table-responsive))
   يُنقذان الجداول وحدها؛ صفوف التذكيرات ‎.reminder-row‎ ليست جدولاً
   فوقعت خارج الحماية.

   ⚠ لماذا لا Popper ولا data-bs-boundary:
     الاثنان يحسبان الموضع فقط، والقصّ يقع بعدهما في مرحلة الرسم على
     كل ما خرج من صندوق السلف — فمهما أُحسن الموضع يبقى المقصوص
     مقصوصاً. ولماذا لا strategy: fixed كذلك: ‎.circle-card:hover‎
     تضع transform، والعنصر ذو الـ transform يصير الكتلة الحاوية لكل
     position: fixed داخله فيعود القصّ من حيث أتى عند أول تمرير فأرة.
   ⇒ العلاج الوحيد الصامد رفع القصّ عن الحاوية نفسها.

   ⚠ التدوير لا يضيع: رأس المجموعة يحمل border-radius بنفسه،
     والصفوف شفّافة الخلفية فلا شيء يتسرّب من الزوايا.
   ⚠ ولا يعود التمرير الأفقي: body ما زالت overflow-x: clip، وPopper
     يحصر القائمة داخل إطار النافذة بعدما لم تعد البطاقة سلفاً قاصّاً.

   .dropdown-host عقدٌ صريح في القوالب يفحصه DropdownMarkupTest،
   و :has(.dropdown-menu) شبكة أمان لحاويةٍ يُنسى وسمها لاحقاً.
   ═══════════════════════════════════════════════════════════════ */
.dropdown-host,
.circle-card.dropdown-host,
.circle-card:has(.dropdown-menu) {
    overflow: visible;
}


/* ═══════════════════════════════════════════════════════════════
   جولة كثافة الجوال — قياسات 360/375/414 (2026-08-16)
   ───────────────────────────────────────────────────────────────
   بلاغ المستخدم: «العناصر في صفحة الموبايل لا تظهر بقياسات صحيحة
   والكلام محشور». الهاتف هو الجهاز الأساسي لهذا التطبيق لا حالة
   استثنائية، فكل رقم أدناه مقيسٌ من المتصفّح على العرض المذكور لا
   مُقدَّر بالنظر.

   ⚠ كل شيء هنا محصور في max-width: 767.98px عمداً: كثافة سطح المكتب
     ليست موضع الشكوى ولا يجوز أن تتحرّك.
   ⚠ لا تحذف .main-section .btn{min-height:40px;min-width:40px} أعلاه —
     هذه الكتلة تبني فوقه ولا تستبدله.
   ═══════════════════════════════════════════════════════════════ */

/* رأس الشاشة: عنوانٌ وأزراره. تعريف واحد بدل سلسلة الأدوات المكرّرة في
   ثماني شاشات — والأهم أنه يملك row-gap خاصّاً به، فـ .gap-2 من بوتستراب
   تُصرَّح !important وتمنع أي زيادة للفجوة الرأسية عند الالتفاف. */
.screen-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

/* رابط «عرض كل الحركات» أسفل بطاقة: نصٌّ عاري ارتفاعه 21px على الهاتف. */
.card-more-link { display: inline-flex; align-items: center; gap: .35rem; }

/* صفّ أدوات الدفع (الإشعارات + الإعدادات): شارة الحالة وثلاثة أزرار. */
.push-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* صفّ شريط سعر الصرف: تسمية + حقل + أسعار سريعة + زرّ التثبيت + إفصاح. */
.fx-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

@media screen and (max-width: 767.98px) {

    /* ── 1) بلاطة KPI: الأيقونة فوق النص لا بجنبه ──
       على 375px يعطي col-6 بطاقةً داخلية بعرض 155px. الأيقونة (46px)
       والفجوة (12px) والحشوان (2×17.6px) تلتهم 93px فلا يبقى للنص إلا
       61px — بينما «16,773,154 د.ع» يحتاج 104px و«−4,570,007 د.ع مجموعاً»
       يحتاج 126px. النتيجة المقيسة: تجاوز 37→69px يخرج الرقم عن البطاقة.
       التكديس يعيد للنص عرض البطاقة كاملاً (≈128px) بلا تصغير أي خط —
       والقاعدة «دع الأشياء تلتف بفجوات صحيحة قبل أن تصغّر الخط». */
    .kpi-card {
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
        padding: .85rem;
    }
    /* العرض صريح فلا يمدّده align-items: stretch إلى عرض البطاقة كلها */
    .kpi-card .kpi-icon { width: 40px; height: 40px; font-size: 1.1rem; border-radius: 11px; }

    /* السطر الموحّد صفٌّ مرن (display:flex) — بلا wrap يخرج الرقم الطويل
       من البطاقة بدل أن ينزل سطراً. */
    .kpi-card .kpi-combined { flex-wrap: wrap; font-size: .78rem; }

    /* ── 2) مبدّل الشهر ──
       أبناؤه الثلاثة: زرّ السابق (40px) + كتلة الشهر ومنتقيه (195px) +
       مجموعة «هذا الشهر/التالي» (95px) وفجوتان (16px) = 346px داخل صندوق
       حشو عرضه 317px. الطفل الثالث يُدفع 27.5px خارج الصندوق ويقصّه
       overflow:hidden الموروث من .circle-card، ونص «هذا الشهر» يلتفّ على
       سطرين داخل زرّ مصمَّم لسطر واحد (52px ارتفاعاً بعرض 50.7px).
       الحل: الشهر ومنتقيه سطرٌ كامل فوق، وأزرار التنقّل سطرٌ تحته. */
    .month-stepper { flex-wrap: wrap; row-gap: .5rem; }
    .month-stepper > :nth-child(2) {
        order: -1;                 /* الشهر أولاً بصرياً وإن جاء ثانياً في DOM */
        flex: 1 0 100%;
        justify-content: center;
        text-align: center;
    }
    /* «هذا الشهر» و«هذي السنة» لا يلتفّان بعد اليوم */
    .month-stepper .btn { white-space: nowrap; }

    /* ── 3) خطوط تحت 12px في المحتوى ──
       .table-responsive تصغّر الجدول إلى .875rem تحت 992px، فيهبط .badge
       (نسبته .75em) إلى 10.5px — واسم التصنيف نصٌّ يُقرأ لا زخرفة. داخل
       بطاقات .table-stack مساحةٌ فائضة أصلاً فلا ثمن للتكبير. */
    .main-section .table .badge { font-size: .78rem; padding: .35em .6em; }

    /* ── 4) الحقول: مساحة لمس ──
       .form-control-sm يقيس 31px و.form-control العادي 38px — كلاهما دون
       حدّ الـ40px الذي فُرض على الأزرار سابقاً. min-height وحده يكفي:
       لا يُقلّص حقلاً أطول (textarea) ولا يمسّ العرض. */
    .main-section .form-control,
    .main-section .form-select { min-height: 40px; }
    /* لواحق مجموعة الإدخال ترتفع معها وإلا انكسرت محاذاة «1$ = … د.ع» */
    .main-section .input-group-sm > .input-group-text { min-height: 40px; }

    /* ── 5) رؤوس الشاشات ──
       العنوان (24.5px) وصفّ أزراره (40px) ينزلان سطرين على الهاتف بفجوة
       8px بالضبط فيقرآن ككتلة واحدة مضغوطة. */
    .screen-head { row-gap: .75rem; }
    /* mb-1 = 4px: مقبولة حين يقف الزرّ بجنب العنوان على الشاشة الواسعة،
       أما هنا فصفّ الأزرار يلتصق بالفقرة التي تليه. الأداة مُصرَّحة
       !important فلا سبيل لتجاوزها إلا بمثلها. */
    .screen-head.mb-1 { margin-bottom: .75rem !important; }

    /* ── 6) شريط سعر الصرف ──
       بعد رفع الحقل إلى 40px صار سطراه متلاصقين على 8px. */
    .fx-row { row-gap: .625rem; }

    /* ── 7) صفّ أدوات الدفع ──
       أربع أدوات بعرض 107→151px داخل 302px ⇒ سطران حتماً، والشكوى ليست
       الالتفاف بل التلاصق: شارةٌ بارتفاع 23px محشورة بين أزرار 40px
       وفجوةٌ 8px بالضبط بين السطرين. */
    .push-actions { gap: .625rem; }
    .push-actions .badge {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding-inline: .7rem;
        font-size: .78rem;
        /* flex-shrink الافتراضي يضغط الشارة إلى 146px فينكسر «مفعّلة على
           هذا الجهاز» سطرين داخل وسمٍ لسطر. نزولها سطراً كاملاً أنظف. */
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* ── 7ب) زرّان متلاصقان على 4px ──
       .gap-1 تعطي 4px بين هدفين قياس كلٍّ منهما 40px — والإبهام أعرض من
       الفجوة فيصيب الاثنين. الأداة مُصرَّحة !important فلا تُتجاوز إلا
       بمثلها، و:has يحصر القاعدة في الصفوف التي فيها زرّان فعلاً فلا
       تنتفخ فجوات الأيقونات والنصوص. */
    .main-section .d-flex.gap-1:has(> .btn + .btn) { gap: .5rem !important; }

    /* ── 8) رابط «عرض كل الحركات» ── 21px ارتفاعاً: أصغر من الإبهام. */
    .card-more-link { min-height: 40px; padding-inline: .75rem; }

    /* ── 9) شريط أدوات الجدول ──
       الحشو .75rem مع منتقي حجم الصفحة الذي صار 40px يجعل الصفّ خانقاً. */
    .table-toolbar { padding: .85rem; row-gap: .85rem; }

    /* ── 10) البطاقتان الوحيدتان اللتان تأخذان نصف حشو جارتهما ──
       كل بطاقة في التطبيق تحمل p-3 (16px) إلا اثنتين: مبدّل الشهر يحمل p-2
       وشريط الصرف يحمل p-2 p-md-3 — أي أنّ الهاتف، وهو الجهاز الأساس هنا،
       يأخذ 8px بينما سطح المكتب يأخذ 16px. المقيس على 360px: 8/8/8/8 داخل
       بطاقتين عرضهما 312px بينما كل جارٍ لهما 16. وهاتان بالذات هما ما
       سمّاه البلاغ: «مبدّل الشهر وشريط سعر الصرف والكلام يكاد يلمس الحواف».

       ⚠ .p-2 داخل المُحدِّد متعمَّدة: لو رُفعت الأداة من القالب يوماً سقطت
         هذه القاعدة معها بدل أن تفرض حشواً على قالب غيّر رأيه.
       ⚠ !important لا مفرّ منها — أدوات بوتستراب مُصرَّحة بها، والتخصيص
         الأعلى (‏.main-section .x.p-2‎) هو ما يحسم بينهما. */
    .main-section .month-stepper.p-2,
    .main-section .fx-bar.p-2 { padding: .85rem !important; }

    /* ── 11) شريط التبويبات ──
       تبويبات الإعدادات الأربعة مجموعها 350.6px داخل 320px، فيُقصّ «الدفع»
       بمقدار 31px خلف تمرير أفقي لا يظهر له أثر بصري — والمستخدم يقرأ ثلاثة
       تبويبات ويحسب أن لا رابع. خفض الحشو الأفقي من 1.2rem إلى .8rem يوفّر
       51.2px فتدخل الأربعة كاملة، بلا تصغير خط وبلا مساس بالارتفاع (يبقى
       51px لأن الحشو الرأسي لم يُلمس). */
    .circle-tab { padding-inline: .8rem; }

    /* ── 12) ترقيم الصفحات ──
       نسخة الجوال (.d-sm-none) زرّان نصّيان ارتفاعهما 33.2px — دون حدّ الـ
       40px المفروض أعلاه، لأن .page-link ليست .btn فلم تشملها تلك القاعدة.
       flex لا block: min-height وحدها ترفع الصندوق وتترك النصّ ملتصقاً
       بأعلاه. */
    .main-section .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
    }

    /* ── 13) شريط الأدوات ملتصقٌ بالبطاقة فوقه ──
       الفجوة المقيسة صفرٌ بالضبط: حدّ البطاقة السفلي وحدّ الشريط العلوي على
       السطر نفسه فيُقرآن خطّاً مضاعفاً، وصفّ «عرض 10/25/50» يبدو ذيلاً
       للجدول وهو كتلة تفاعلية مستقلة. الفجوة تفصلهما، والحدّ العلوي يصير
       بعدها فاصلاً فوق فاصل. */
    .table-toolbar { margin-top: .75rem; border-top: 0; }

    /* ── 14) بطاقات أشهر الراتب ──
       على 360px يعطي col-6 محتوى بعرض 118px. رأس البطاقة صفٌّ بلا التفاف:
       «كانون الثاني» يحتاج 87.6px والشارة «وصل يوم 5» 73.3px، فينسحق الاسم
       إلى 42.1px ويلتفّ سطرين (24px ⇒ 48px). أربعة أشهر من اثني عشر تصيبها
       العلّة على 360 و375 و414 — وهذا حرفياً «الكلام محشور» في البلاغ.
       الالتفاف يعيد للاسم سطراً كاملاً بلا تصغير خط.

       وصفّ الزرّين: «تسجيل» يحتاج 72px وزرّ النسخ 40px والفجوة 8px = 120px
       داخل 118px، فينضغط الأول إلى 70px ويلتفّ نصّه سطرين داخل زرٍّ لسطر
       واحد (52px ارتفاعاً). white-space: nowrap يمنع الانضغاط فيقع الالتفاف
       على الصفّ لا على النصّ — وهي القاعدة نفسها: التفافٌ بفجوة صحيحة قبل
       تصغير أي شيء.

       ⚠ row-gap مُصرَّحة: ‎.gap-1‎ أداةٌ !important، وتخصيصها مساوٍ فيحسم
         ترتيب المصدر — وmain.css يُحمَّل بعد بوتستراب. */
    .month-card-head { flex-wrap: wrap; row-gap: .35rem !important; }
    .month-card-actions { flex-wrap: wrap; }
    .month-card-actions > .btn { white-space: nowrap; }
}


/* ═══════════════════════════════════════════════════════════════
   عمود «إجراءات» المفقود في دفتر الحركات — قياس 2026-08-16
   ───────────────────────────────────────────────────────────────
   البلاغ: زرّ التعديل وقائمة الصفّ لا يمكن الوصول إليهما على الشاشات
   المتوسطة. السبب المقيس: جدول الحركات أعرض من بطاقته، وفي RTL يفيض
   الفائض نحو بداية السطر — أي إلى يسار الصفحة — و ‎html, body‎ تحملان
   ‏overflow-x: clip‎ فلا يظهر شريط تمرير ولا أي أثر بصري. العمود لا
   يُقصّ ولا يُخفى: هو مرسومٌ خارج الصفحة ولا سبيل إليه.

   ⚠ ليست من أثر رفع القصّ عن ‎.dropdown-host‎: قيس الفيض بالورقة قبل
     ذلك التعديل وبعده فكان متطابقاً بالبايت.

   المقيس قبل الإصلاح (عرض البطاقة ← عرض الجدول ⇒ الفائض):
       768px   696 ←  860  ⇒ 164   |  1024px  716 ← 1212 ⇒ 496
       992px   692 ← 1212  ⇒ 520   |  1200px  892 ← 1212 ⇒ 320
       1440px 1132 ← 1212  ⇒  80   |  1920px 1296 ← 1294 ⇒ يسع
   وتحت 768px لا عطل: ‎.table-stack‎ تطوي الصفوف إلى بطاقات.

   والمقيس بعد الإصلاح (السعة الفائضة = بطاقة ناقص أصغر عرض ممكن):
       768→991  ‏78.1px‎  |  992  ‏74.8px‎  |  1024 ‏106.8px‎
       1200    ‏207.5px‎  |  1400 ‏195.6px‎  |  1600+ ‏276.7px‎
   ولا فيض ولا تمرير أفقي عند أيّ عرض، وحافة عمود الإجراءات موجبة دائماً.

   ⚠ أرقام «بعد» مقيسة على ورقةٍ محتواها أثقل من العيّنة أعلاه بنحو 60px
     (‏أسماء تصنيفات وجهات أطول‎)، فهي الحدّ الأدنى للسعة لا متوسّطها.

   ثلاثة أسباب مستقلّة، ولكلٍّ علاجه أدناه:

   ①  الجدول الوحيد في التطبيق بلا حاوية ‎.table-responsive‎ (الدخل
      والتصنيفات والتقارير كلها تحملها)، ففاتته قاعدتا
      ‎width/max-width: 100%‎ و ‎overflow-wrap: break-word‎ وكتلة تكثيف
      الخلايا تحت 992px. العلاج في القالب لا هنا.
      ⚠ ولا يعود التمرير الأفقي: ‎.table-responsive‎ في هذا الملف
        ‏overflow: visible‎ لا ‏auto‎ — بوتستراب مُبطَلة عمداً حمايةً
        للقوائم المنسدلة، والاختبار DropdownMarkupTest يحرس ذلك.

   ②  ‎min-width‎ أرضيةٌ لا تتنازل: عمودا «العنوان» و«ملاحظة» يفرضان
      400px مجتمعين، فيصير أصغر عرض ممكن للجدول 1212px مهما ضاقت
      البطاقة. ‎width‎ في تخطيط الجدول التلقائي رغبةٌ لا أرضية: تُمنح
      كاملةً متى اتّسعت البطاقة وتتنازل عند الضيق. المقيس بعد التبديل:
      العمود يبقى 200px من 1200px فصاعداً وينزل إلى 141px عند 992px
      بدل أن يدفع العمود الأخير خارج الصفحة.

   ③  مجال 992→1400px هو الأسوأ لأنّ ‎.mony-sidebar‎ تظهر عند 992px
      وتأخذ 260px، فمساحة المحتوى عند 1024px (‏716px‎) أضيق منها عند
      768px (‏696px+‎) — بينما ‎.col-hide-lg‎ تتوقّف عن الإخفاء فوق
      991.98px وتكثيف الخلايا يتوقّف معها. أي أنّ الشاشة تتّسع
      والمساحة تضيق، والقواعد تتصرّف كأنّ العكس هو الحاصل.
      العلاج: ‎.table-wide‎ أدناه تمدّ الحمايتين إلى نهاية المجال.
   ═══════════════════════════════════════════════════════════════ */

/* ── ② أرضية العمودين ──
   ‎min-width: 0‎ إلزامية: التعريف الموروث أعلى الملف يفرض 200px،
   والتخصيص هنا مساوٍ له فيحسم ترتيب المصدر — لكن ‎width‎ وحدها لا تُلغي
   ‎min-width‎، فلا بدّ من خفض الأرضية صراحةً.
   ⚠ لا أثر على البطاقات المكدّسة: كتلة ‎.table-stack‎ تحت 768px تفرض
     ‎width: 100%‎ بتخصيص أعلى (‏.table-stack > tbody > tr > td‎). */
.td-width-200-300 {
    min-width: 0;
    width: 200px;
}

/* ═══════════════════════════════════════════════════════════════
   ③ .table-wide — جدولٌ أعمدته أكثر ممّا تحمله مساحة المحتوى
   ───────────────────────────────────────────────────────────────
   يُوضع على الـ <table> وحده، ولا يُعمَّم: دفتر الحركات هو الجدول الوحيد
   بعشرة أعمدة، وهو وحده المُبلَّغ عنه. تعميم الحدّين على ‎.col-hide-*‎
   يغيّر ما يراه المستخدم في الدخل والتصنيفات والتقارير أيضاً — وذلك
   قرار أولويّات أعمدة لكل شاشة على حدة، لا أثرٌ جانبي لإصلاح عطل.
   ⚠ لم تُقس تلك الشاشات هنا: العلاجان ① و② لا يضيّقان شيئاً (كلاهما
     يرفع قيداً)، فلا يمكن أن يُدخلاها في فيضٍ لم تكن فيه — لكن نفيَ
     الفيض عنها أصلاً يحتاج قياساً مستقلاً.

   ⚠ لا شيء من هذا ينزل تحت 768px: هناك تطوي ‎.table-stack‎ الصفوف إلى
     بطاقات وتُعيد إظهار كل الأعمدة (‏display: flex !important‎). الحدّ
     مكتوبٌ في الـ query لا متروكاً لحسبة تخصيص صامتة.
   ⚠ ‎screen‎ إلزامية: في وسيط الطباعة يُقاس ‎max-width‎ على صندوق A4
     (‏≈794px‎) فتنطبق قواعد الشاشات الضيّقة على المطبوعات.
   ═══════════════════════════════════════════════════════════════ */

/* أ) تكثيف الخلايا في مجال الشريط الجانبي.
   الكتلة الموروثة تكثّف تحت 992px حيث لا شريط جانبي؛ وهذا المجال أحوج
   منها لأنّ الشريط يقتطع 260px. الحدّ الأعلى 1600px هو حيث تتوقّف
   ‎.container‎ عن النموّ (‏1296px‎ ثابتة) فتنتهي حاجة التكثيف.
   ⚠ أزرار الصفّ خارج التكثيف عمداً: تصغيرها يخالف حدّ مساحة اللمس،
     والعمود المُنقَذ هو عمودها هي. */
@media screen and (min-width: 992px) and (max-width: 1599.98px) {
    .table-responsive > .table.table-wide { font-size: .875rem; }
    .table-responsive > .table.table-wide > :not(caption) > * > * {
        padding-inline: .45rem;
        padding-block: .55rem;
    }
}

/* ب) الأعمدة الثانوية تبقى مخفيّة حتى تتّسع البطاقة فعلاً.
   القاعدتان الموروثتان تُخفيان ‎.col-hide-lg‎ حتى 991.98px و ‎.col-hide-md‎
   حتى 767.98px، وتتوقّفان عند حدّ الشريط الجانبي بالضبط — أي عند بداية
   أضيق مساحة محتوى في التطبيق. هاتان تكملان المشوار بلا فجوة.

   الحدّان مقيسان لا مُقدَّران: بعشرة أعمدة مكثَّفة يحتاج الجدول بطاقةً
   بنحو 1020px، ولا تتوفّر قبل 1400px عرضاً للنافذة (‏البطاقة 1100px‎).
   وبين 1200 و1400 تكفي سبعة أعمدة، فيعود «الشهر المحسوب عليه» عند 1200.

   ⚠ ‎.col-hide-md‎ تنزل إلى 768px لا إلى 992px، وهذا مقيسٌ لا محافظة
     زائدة: العلاجان ① و② وحدهما يُدخلان الجدول في مجال 768→992 بفارق
     2.7px فقط (‏بطاقة 696px وأصغر عرض ممكن 693.3px‎) — وفارقٌ بهذا الحجم
     يبتلعه اسمُ تصنيفٍ أطول بحرفين، أي أنّه صدفةٌ لا سعة. إخفاء «الشهر»
     هناك يرفع الفارق إلى 78.1px. */
@media screen and (min-width: 992px) and (max-width: 1399.98px) {
    .table-wide .col-hide-lg { display: none !important; }
}
@media screen and (min-width: 768px) and (max-width: 1199.98px) {
    .table-wide .col-hide-md { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   بانر تثبيت التطبيق — يُرسَم من layouts/app.blade.php على كل شاشة
   ───────────────────────────────────────────────────────────────
   ⚠ z-index 1041 لا 1039: شريط التبويبات 1040، وبانرٌ تحته يظهر نصفه
     مقصوصاً خلفه على كل هاتف.
   ⚠ bottom يحسب ارتفاع شريط التبويبات + منطقة الأمان: وضعه على 0 يدفنه
     تحت الشريط تماماً على الأجهزة ذات الحافة السفلية.
   ═══════════════════════════════════════════════════════════════ */
.mony-install-banner {
    position: fixed; inset-inline: .5rem; z-index: 1041;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .75rem 1rem; border-radius: var(--r);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--shadow-md);
}
.mony-install-banner .install-banner-icon { font-size: 1.5rem; color: var(--purple-main); flex-shrink: 0; }

/* ⚠ حجز مكان البانر شرطٌ لا تجميل: البانر position:fixed بخلفية غير شفّافة،
     و .main-section.pb-nav تحجز 96px وحدها لشريط التبويبات — فكل ما بين 76px
     و 76px+ارتفاع البانر من أسفل الصفحة كان مغطّى ولا يستقبل نقرة. وأسفل كل
     نموذج إعدادات يجلس زرّ «حفظ» بالضبط في هذا الشريط، فكان لا يُضغط إطلاقاً
     ما دام البانر معروضاً.
   ⚠ --install-banner-h يصل مقيساً من القالب (راجع sync() في layouts/app):
     النصّ يلتفّ سطرين أو ثلاثة حسب عرض الشاشة، وأي رقم ثابت هنا تخمين يخطئ.
     القيمة الاحتياطية 160px تكفي حالة الثلاثة أسطر على 360px إن لم يعمل JS. */
html.has-install-banner .main-section.pb-nav {
    padding-bottom: calc(96px + var(--install-banner-h, 160px) + env(safe-area-inset-bottom, 0px));
}

/* البانر يزيح زرّ «أعلى الصفحة» بدل أن يجلس الزرّ فوق نصّه.
   الصنف يضعه sync() على <html> ويرفعه معه حين يُرفض البانر.
   ⚠ يُشتقّ من ارتفاع البانر نفسه ويحمل env() مثله: الرقم الثابت 190px كان
     أقصر من بانرٍ بثلاثة أسطر (‏≈159px فوق 76px‎) فيرتفع الزرّ داخل صندوق
     البانر ويرسم فوقه بحكم z-index الأعلى — عكس ما تقوله القاعدة تماماً. */
html.has-install-banner .scroll-top {
    bottom: calc(76px + var(--install-banner-h, 160px) + .75rem + env(safe-area-inset-bottom, 0px));
}

/* ⚠ screen إلزامية: في وسيط الطباعة يُقاس max-width على صندوق A4 (‏≈794px‎)
     فتنطبق قواعد الشاشات الضيّقة على المطبوعات. */
@media screen and (min-width: 768px) {
    /* فوق 768px لا شريط تبويبات، والبانر يلزم جهة البداية حتى لا يصطدم
       بزرّ «أعلى الصفحة» المثبَّت على جهة النهاية. */
    .mony-install-banner { inset-inline: 1.5rem auto; bottom: 1.5rem; max-width: 460px; }
    html.has-install-banner .scroll-top { bottom: 1.5rem; }
    /* الزرّ جهة النهاية لا يصطدم بالبانر هنا، لكن البانر ما زال يغطّي أسفل
       عمود المحتوى — الحجز مطلوب على سطح المكتب أيضاً. */
    html.has-install-banner .main-section {
        padding-bottom: calc(1.5rem + var(--install-banner-h, 90px) + 1rem);
    }
}

/* ⚠ إزاحة البانر عن عمود الشريط الجانبي — هذا كان يبتلع نقرة «ثبّت الآن».
     الشريط عند 992px فما فوق: position:fixed، inset-inline-start:0، عرض
     --sidebar-w، inset-block:0 (بارتفاع الشاشة كامل)، z-index:1045 —
     والبانر يبدأ من inset-inline-start:1.5rem بـ z-index:1041، أي **تحت**
     الشريط بالضبط. وفي RTL حافة البداية هي اليمين، وأزرار البانر تلتفّ إلى
     تلك الجهة، فكانت النقرة تصل إلى الشريط لا إلى الزر: البانر يُرى ولا يُنقر.
   ⚠ لماذا لا margin-inline-start مثل .mony-topbar و .main-section: العنصر
     position:fixed، وموضعه من inset لا من الهامش — الهامش يزيح الصندوق دون
     أن يغيّر نقطة التثبيت فيبقى فوق الشريط.
   ⚠ ولماذا 992px لا 768px: --sidebar-w لا يُعرَّف إلا داخل استعلام الشريط،
     وبين المقاسين لا شريط أصلاً — ولهذا كان العطل يظهر على الشاشات الكبيرة
     وحدها بينما يعمل الزر على الهاتف. */
@media screen and (min-width: 992px) {
    .mony-install-banner { inset-inline-start: calc(var(--sidebar-w) + 1.5rem); }
}

/* الصنف يبقى على <html> في الطباعة بينما البانر مخفيّ — بلا هذا يُطبع فراغ
   بارتفاع البانر أسفل كل صفحة. */
@media print {
    .mony-install-banner { display: none !important; }
    html.has-install-banner .main-section,
    html.has-install-banner .main-section.pb-nav { padding-bottom: 1rem; }
}