/* =====================================================================
   نظام إدارة قطع الغيار - مركز المصطفى
   التنسيقات الرئيسية - RTL
   ===================================================================== */

:root {
    --brand:        #0d5c63;
    --brand-dark:   #094348;
    --brand-light:  #e6f2f3;
    --accent:       #f2a413;
    --ink:          #1f2937;
    --muted:        #6b7280;
    --line:         #e5e7eb;
    --bg:           #f4f6f8;
    --sidebar-w:    250px;
    --topbar-h:     58px;
}

* { -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 0.95rem;
}

/* ------------------------- الشريط العلوي ------------------------- */
.app-topbar {
    background: linear-gradient(90deg, var(--brand-dark), var(--brand));
    min-height: var(--topbar-h);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    z-index: 1030;
}
.app-topbar .navbar-brand { color: #fff; font-weight: 700; }
.app-topbar .navbar-brand:hover { color: #fff; }
.app-topbar .brand-text { font-size: 1rem; }

/* ------------------------- الهيكل ------------------------- */
.app-shell { display: flex; align-items: stretch; min-height: calc(100vh - var(--topbar-h)); }

.app-sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: #fff;
    border-inline-start: 1px solid var(--line);
    position: sticky;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    justify-content: space-between;
    box-shadow: -2px 0 12px rgba(0, 0, 0, .04);
    overflow: hidden;   /* التمرير يحدث داخل قائمة الروابط نفسها */
}

.app-content { flex: 1 1 auto; min-width: 0; }

/* ------------------------- قائمة التنقل ------------------------- */
.app-sidebar .app-nav {
    flex: 1 1 auto;
    min-height: 0;            /* بدونه لا ينكمش العنصر داخل flex column فيطفح خارج الشريط */
    overflow-y: auto;
    overflow-x: hidden;       /* لا تمرير أفقي إطلاقاً */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.app-sidebar .app-nav::-webkit-scrollbar { width: 6px; }
.app-sidebar .app-nav::-webkit-scrollbar-track { background: transparent; }
.app-sidebar .app-nav::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.app-sidebar .app-nav:hover::-webkit-scrollbar-thumb { background: #94a3b8; }

.app-nav {
    padding: .6rem .5rem;
    gap: .12rem;
    margin: 0;
    width: 100%;
    /* .nav في بوتستراب يستخدم flex-wrap: wrap، ومع flex-column يعني ذلك أن
       العناصر تلتفّ إلى «عمود ثانٍ» عند زيادة عددها عن ارتفاع الشريط.
       nowrap يبقيها عموداً واحداً ويجعل الزيادة تمريراً رأسياً. */
    flex-wrap: nowrap;
}

.app-nav .nav-item {
    width: 100%;
    flex: 0 0 auto;           /* لا تنضغط العناصر عند التمرير */
}

.app-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--ink);
    border-radius: .55rem;
    padding: .5rem .7rem;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .15s, color .15s;
}

.app-nav .nav-link i {
    font-size: 1.05rem;
    color: var(--brand);
    width: 1.25rem;
    flex-shrink: 0;
    text-align: center;
}

.app-nav .nav-link:hover {
    background: var(--brand-light);
    color: var(--brand-dark);
}

.app-nav .nav-link.active {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 2px 6px rgba(13, 92, 99, .25);
}

.app-nav .nav-link.active i { color: #fff; }

/* خط فاصل خفيف قبل أدوات الإدارة */
.app-nav .nav-item.nav-divider {
    border-top: 1px solid var(--line);
    margin: .35rem .4rem;
    padding-top: .35rem;
}

.sidebar-footer {
    flex: 0 0 auto;
    padding: .7rem .9rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.6;
    background: #fff;
}

.app-offcanvas { width: 270px; }
.app-offcanvas .app-nav .nav-link { font-size: .95rem; padding: .6rem .8rem; }

/* ------------------------- ترويسة الصفحة ------------------------- */
.page-title { font-weight: 700; color: var(--brand-dark); }
.page-title i { color: var(--brand); }

/* ------------------------- الكروت ------------------------- */
.card {
    border: 1px solid var(--line);
    border-radius: .8rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
    color: var(--brand-dark);
    border-radius: .8rem .8rem 0 0 !important;
    padding: .75rem 1rem;
}

/* كروت الإحصائيات */
.stat-card { border-radius: .8rem; overflow: hidden; position: relative; background: #fff; }
.stat-card .stat-value { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.stat-card .stat-label { color: var(--muted); font-size: .85rem; font-weight: 600; }
.stat-card .stat-icon {
    position: absolute;
    inset-inline-start: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.4rem;
    opacity: .18;
}
.stat-card.brand  { border-top: 3px solid var(--brand); }
.stat-card.accent { border-top: 3px solid var(--accent); }
.stat-card.green  { border-top: 3px solid #17a673; }
.stat-card.red    { border-top: 3px solid #dc3545; }

/* ------------------------- الجداول ------------------------- */
.table { --bs-table-bg: #fff; margin-bottom: 0; }
.table > thead {
    background: var(--brand-light);
    color: var(--brand-dark);
}
.table > thead th {
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 2px solid #cfe3e5;
    vertical-align: middle;
}
.table > tbody td { vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background-color: #fafcfc; }

.num { font-variant-numeric: tabular-nums; direction: ltr; text-align: center; unicode-bidi: plaintext; }
.barcode-cell { font-family: 'Courier New', monospace; font-weight: 700; letter-spacing: .5px; }

/* ------------------------- النماذج ------------------------- */
.form-label { font-weight: 600; margin-bottom: .3rem; }
.form-control, .form-select { border-radius: .5rem; padding: .5rem .75rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .18rem rgba(13, 92, 99, .15);
}
.form-control-lg, .form-select-lg { font-size: 1rem; }
.required::after { content: ' *'; color: #dc3545; }
input[type="number"] { direction: ltr; text-align: center; }

/* ------------------------- الأزرار ------------------------- */
.btn { border-radius: .5rem; font-weight: 600; }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover, .btn-brand:focus { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-outline-brand { border-color: var(--brand); color: var(--brand); }
.btn-outline-brand:hover { background: var(--brand); color: #fff; }

/* أزرار التحصيل / المبالغ المتبقية - بلون التمييز */
.btn-accent {
    background: var(--accent);
    border-color: var(--accent);
    color: #3a2a05;
}
.btn-accent:hover, .btn-accent:focus {
    background: #d98f0c;
    border-color: #d98f0c;
    color: #2a1e03;
}
.btn-outline-accent {
    border-color: var(--accent);
    color: #9a6605;
    background: #fff;
}
.btn-outline-accent:hover, .btn-outline-accent:focus {
    background: var(--accent);
    border-color: var(--accent);
    color: #3a2a05;
}
.btn-outline-accent:focus {
    box-shadow: 0 0 0 .18rem rgba(242, 164, 19, .25);
}

/* ------------------------- الشارات ------------------------- */
.badge { font-weight: 600; }
.qty-badge { min-width: 3rem; display: inline-block; }
.pay-badge { font-size: .8rem; padding: .35em .6em; }

/* ------------------------- شاشة تسجيل الدخول ------------------------- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-dark), var(--brand) 60%, #14757e);
    padding: 1.25rem;
}
.login-card {
    width: 100%;
    max-width: 420px;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .25);
    overflow: hidden;
}
.login-head { background: var(--brand-dark); color: #fff; padding: 1.6rem 1.25rem; text-align: center; }
.login-head i { font-size: 2.5rem; }
.login-body { padding: 1.5rem; }

/* ------------------------- نقطة البيع (POS) ------------------------- */
.pos-search-wrap { position: relative; }
.pos-results {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .6rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .13);
    max-height: 320px;
    overflow-y: auto;
    z-index: 1050;
    display: none;
}
.pos-results.show { display: block; }
.pos-result-item { padding: .6rem .85rem; cursor: pointer; border-bottom: 1px solid #f1f3f5; }
.pos-result-item:last-child { border-bottom: 0; }
.pos-result-item:hover, .pos-result-item.active { background: var(--brand-light); }
.pos-result-item .r-name { font-weight: 700; }
.pos-result-item .r-meta { font-size: .8rem; color: var(--muted); }

#cartTable input { max-width: 110px; }
.cart-empty { color: var(--muted); padding: 2rem 1rem; text-align: center; }

.totals-box { background: var(--brand-light); border-radius: .7rem; padding: 1rem; }
.totals-box .row-line { display: flex; justify-content: space-between; padding: .3rem 0; font-weight: 600; }
.totals-box .grand { font-size: 1.35rem; font-weight: 800; color: var(--brand-dark); border-top: 2px dashed #b9d5d8; margin-top: .5rem; padding-top: .6rem; }

.pay-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.pay-option input { display: none; }
.pay-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    border: 2px solid var(--line);
    border-radius: .6rem;
    padding: .6rem .3rem;
    cursor: pointer;
    font-weight: 600;
    font-size: .85rem;
    text-align: center;
    transition: all .15s;
}
.pay-option label i { font-size: 1.3rem; color: var(--muted); }
.pay-option input:checked + label { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); }
.pay-option input:checked + label i { color: var(--brand); }

/* زر التحصيل داخل مجموعة الإجراءات: نفس إطار باقي الأزرار
   مع أيقونة ملوّنة لتمييز وظيفته */
.btn-settle i { color: var(--accent); }
.btn-settle:hover i, .btn-settle:focus i { color: inherit; }

/* ------------------------- قوائم الشريط العلوي ------------------------- */
/* تبقى داخل الشاشة ولا تُقص عند الحافة */
.app-topbar .dropdown-menu {
    min-width: 230px;
    max-width: 92vw;
    border: 1px solid var(--line);
    border-radius: .7rem;
    padding: .35rem 0;
}
.app-topbar .dropdown-item {
    padding: .55rem 1rem;
    white-space: nowrap;
}
.app-topbar .dropdown-item:hover { background: var(--brand-light); }
.app-topbar .dropdown-item i { width: 1.2rem; text-align: center; }

/* ------------------------- جرس التنبيهات ------------------------- */
.bell-btn { min-width: 2.3rem; }
.bell-menu { width: 340px; max-width: 92vw; padding: 0; overflow: hidden; }
.bell-list { max-height: 320px; overflow-y: auto; }
.bell-item { padding: .55rem .9rem; border-bottom: 1px solid #f1f3f5; white-space: normal; }
.bell-item:last-child { border-bottom: 0; }
.bell-item:hover { background: var(--brand-light); }

/* أزرار أيام التذكير */
.day-option .btn-check:checked + .btn {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* ------------------------- ترقيم الصفحات ------------------------- */
/* بنفس هوية التطبيق: أزرار منفصلة بحواف دائرية ولون العلامة */
.pagination { gap: .3rem; }

.pagination .page-item:not(:first-child) .page-link { margin-inline-start: 0; }

.pagination .page-link {
    border: 1px solid var(--line);
    border-radius: .5rem !important;
    color: var(--brand-dark);
    font-weight: 600;
    padding: .35rem .7rem;
    min-width: 2.1rem;
    text-align: center;
    transition: background .15s, color .15s, border-color .15s;
}

.pagination .page-link:hover {
    background: var(--brand-light);
    border-color: var(--brand);
    color: var(--brand-dark);
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 .18rem rgba(13, 92, 99, .15);
    z-index: 2;
}

.pagination .page-item.active .page-link {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    background: #f6f8f8;
    border-color: var(--line);
    color: var(--muted);
    opacity: .65;
}

/* شريط التنقل أسفل الجداول */
.card-footer .small-muted .num { font-weight: 700; color: var(--ink); }

/* ------------------------- عمود الإجراءات الثابت ------------------------- */
/* يبقى ظاهراً دائماً حتى لو احتاج الجدول تمريراً أفقياً */
/* في RTL يظهر آخر عمود على يسار الشاشة، لذلك نثبّته بـ inset-inline-end
   (تُترجم إلى left في الاتجاه من اليمين لليسار) */
.table-sticky-actions th:last-child,
.table-sticky-actions td:last-child {
    position: sticky;
    inset-inline-end: 0;
    background: #fff;
    z-index: 2;
    box-shadow: -2px 0 6px rgba(0, 0, 0, .06);
}
.table-sticky-actions thead th:last-child { background: var(--brand-light); z-index: 3; }
.table-sticky-actions tbody tr:hover td:last-child { background: #fafcfc; }
.table-sticky-actions tbody tr.table-danger td:last-child { background: #f8d7da; }

/* ------------------------- نافذة الدفع ------------------------- */
.pay-total-banner {
    background: var(--brand);
    color: #fff;
    border-radius: .7rem;
    padding: .85rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    font-weight: 600;
}

/* ------------------------- تقسيم الدفع ------------------------- */
.split-line {
    border: 1px solid var(--line);
    border-radius: .6rem;
    padding: .5rem .6rem;
    margin-bottom: .45rem;
    background: #fbfcfc;
    transition: border-color .15s, background .15s;
}
.split-line.is-used {
    border-color: var(--brand);
    background: var(--brand-light);
}
.split-line .split-name {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .87rem;
}
.split-line .split-name i { font-size: 1.05rem; color: var(--brand); }
.split-line .split-name {
    cursor: pointer;
    border-radius: .4rem;
    padding: .2rem .3rem;
    transition: background .15s;
}
.split-line .split-name:hover { background: rgba(13, 92, 99, .1); }
.split-line .split-name:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.split-line .split-reference { font-size: .78rem; }
.split-line .split-amount { font-weight: 700; }
.split-summary {
    background: var(--brand-light);
    border-radius: .6rem;
    padding: .75rem;
    font-weight: 600;
}
#singlePayWrap { transition: opacity .15s; }

/* شارة الدفع المقسّم */
.badge-split { background: #6f42c1; color: #fff; }

.pay-breakdown { font-size: .85rem; }
.pay-breakdown li { padding: .15rem 0; }

/* ------------------------- الفاتورة / الطباعة ------------------------- */
.invoice-sheet {
    background: #fff;
    padding: 1.5rem;
    border-radius: .8rem;
    border: 1px solid var(--line);
    max-width: 850px;
    margin: 0 auto;
}
.invoice-header { border-bottom: 3px double var(--brand); padding-bottom: .9rem; margin-bottom: 1rem; }
.invoice-shop-name { font-size: 1.5rem; font-weight: 800; color: var(--brand-dark); }
.invoice-meta div { padding: .15rem 0; }
.invoice-meta .lbl { color: var(--muted); font-weight: 600; }
.invoice-total-row { background: var(--brand-light) !important; font-weight: 800; }

/* الطباعة الحرارية 80mm */
.thermal-sheet {
    width: 76mm;
    margin: 0 auto;
    background: #fff;
    padding: 6px 8px;
    font-size: 12px;
    font-family: 'Cairo', Tahoma, Arial, sans-serif;
}
.thermal-sheet table { width: 100%; border-collapse: collapse; }
.thermal-sheet th, .thermal-sheet td { padding: 2px 1px; font-size: 11px; }
.thermal-sheet .t-center { text-align: center; }
.thermal-sheet .dashed { border-top: 1px dashed #000; margin: 5px 0; }

/* ------------------------- البحث الفوري ------------------------- */
.live-results {
    transition: opacity .15s ease;
}

.live-results.is-loading {
    opacity: .45;
    pointer-events: none;
}

.live-search-busy {
    display: none;
}

form.is-searching .live-search-idle {
    display: none;
}

form.is-searching .live-search-busy {
    display: inline-block;
}

/* ------------------------- ترويسة الطباعة ------------------------- */
/* مخفية على الشاشة، تظهر فقط في الورق */
.print-header { display: none; }

@media print {

    /* ---------- الأساسيات ---------- */
    @page { size: A4; margin: 12mm 10mm; }

    body {
        background: #fff !important;
        font-size: 11pt;
        color: #000;
    }

    /* طباعة الألوان كما هي (الشارات وخلفيات الجداول) */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* ---------- إخفاء كل ما لا يُطبع ---------- */
    .app-topbar,
    .app-sidebar,
    .app-offcanvas,
    .page-head,
    .no-print,
    .modal,
    .modal-backdrop,
    .card-footer,
    .pagination,
    .btn,
    form.d-inline,
    .alert-dismissible .btn-close,
    footer { display: none !important; }

    /* أعمدة الإجراءات لا معنى لها على الورق */
    .table-sticky-actions th:last-child,
    .table-sticky-actions td:last-child { display: none !important; }

    /* ---------- تخطيط الصفحة ---------- */
    .app-shell,
    .app-content { display: block; width: 100%; }

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

    /* ---------- ترويسة الطباعة ---------- */
    .print-header {
        display: block;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 2px solid #000;
    }

    .print-head-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
    }

    .print-shop-name { font-size: 15pt; font-weight: 800; }
    .print-shop-sub  { font-size: 8.5pt; color: #444; }
    .print-doc       { text-align: left; }
    .print-doc-title { font-size: 13pt; font-weight: 800; }

    .print-meta {
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px dashed #999;
        font-size: 9pt;
        display: flex;
        flex-wrap: wrap;
        gap: 4px 16px;
    }
    .print-meta-label { color: #555; }

    /* ---------- الكروت ---------- */
    .card {
        border: 1px solid #bbb !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 8px !important;
    }

    .card-header {
        background: #f0f0f0 !important;
        border-bottom: 1px solid #bbb !important;
        border-radius: 0 !important;
        font-size: 10.5pt;
        padding: 5px 8px !important;
    }

    .card-body { padding: 8px !important; }

    /* كروت الأرقام: أربعة في السطر وبدون ظلال */
    .stat-card { border: 1px solid #ccc !important; }
    .stat-card .stat-icon { display: none !important; }
    .stat-card .stat-label { font-size: 8.5pt; }
    .stat-card .stat-value { font-size: 12pt; }

    /* ---------- الجداول ---------- */
    .table-responsive {
        overflow: visible !important;
        max-height: none !important;
    }

    .table {
        width: 100% !important;
        font-size: 9.5pt;
        border-collapse: collapse !important;
    }

    .table th,
    .table td {
        border: 1px solid #bbb !important;
        padding: 4px 5px !important;
    }

    .table > thead th {
        background: #e8e8e8 !important;
        color: #000 !important;
        font-size: 9.5pt;
    }

    /* تكرار رأس الجدول في كل صفحة */
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
    tr    { page-break-inside: avoid; }

    /* ---------- تفاصيل ---------- */
    .invoice-sheet { border: 0; box-shadow: none; max-width: 100%; padding: 0; border-radius: 0; }
    .badge { border: 1px solid #999; color: #000 !important; background: #fff !important; }
    .alert { border: 1px solid #999 !important; background: #fff !important; color: #000 !important; }
    a[href]::after { content: none !important; }
    a { color: #000 !important; text-decoration: none !important; }

    /* منع قطع الأقسام في منتصفها */
    .row { break-inside: auto; }
    h1, h2, h3, h4, h5, h6 { break-after: avoid; }
}

@media print {
    .thermal-print .invoice-sheet { display: none; }
    @page { margin: 2mm; }
}

/* ------------------------- مساعدات ------------------------- */
.text-brand { color: var(--brand) !important; }
.bg-brand { background: var(--brand) !important; }
.cursor-pointer { cursor: pointer; }
.table-responsive { border-radius: .5rem; }
.small-muted { font-size: .82rem; color: var(--muted); }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty-state i { font-size: 3rem; opacity: .4; display: block; margin-bottom: .75rem; }

/* شريط تمرير أنيق */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #eef1f3; }
::-webkit-scrollbar-thumb { background: #b8c4c6; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #93a3a5; }

@media (max-width: 991.98px) {
    .app-sidebar { display: none !important; }
    .pay-options { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 575.98px) {
    body { font-size: .9rem; }
    .stat-card .stat-value { font-size: 1.25rem; }
    .pay-options { grid-template-columns: repeat(2, 1fr); }
}