/* ════════════════════════════════════════════════════════════════
   infinite-list — ذيل القوائم الطويلة ومفتاح طريقة العرض
   مكوّنا InfiniteScrollSentinel و ListModeToggle في المكتبة المشتركة.
   ⭐ بمتغيّرات الثيم المشتركة بين التطبيقين (ثلاثيّات HSL) فيأخذ كلٌّ هويّته،
      والوضع الداكن صنفٌ على <html> يبدّل المتغيّرات نفسها.
   ════════════════════════════════════════════════════════════════ */

.isl { min-height: 2.5rem; padding-block: .25rem .75rem; }

/* ── اللودر: صفوف وهمية بشكل صفوف الجدول ── */
.isl-skeleton { display: flex; flex-direction: column; }

.isl-row {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, .8fr) 5.5rem;
    align-items: center;
    gap: 1rem;
    min-height: 3.5rem;
    padding-inline: 1rem;
    border-bottom: 1px solid hsl(var(--border) / .6);
    opacity: 0;
    animation: isl-in .35s ease-out forwards;
    animation-delay: var(--isl-delay, 0ms);
}

.isl-bar, .isl-pill {
    display: block;
    height: .7rem;
    border-radius: 999px;
    background-color: hsl(var(--muted));
    background-image: linear-gradient(90deg, transparent 0%, hsl(var(--card) / .8) 50%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 45% 100%;
    animation: isl-shimmer 1.3s ease-in-out infinite;
    animation-delay: var(--isl-delay, 0ms);
}

.isl-bar--xs { width: 60%; }
.isl-bar--lg { width: 88%; height: .8rem; }
.isl-bar--md { width: 70%; }
.isl-bar--sm { width: 55%; }
.isl-pill { height: 1.4rem; width: 100%; background-color: hsl(var(--primary) / .14); }

[dir="rtl"] .isl-bar, [dir="rtl"] .isl-pill { animation-name: isl-shimmer-rtl; }

.isl-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding-top: .75rem;
    font-size: .8125rem;
    color: hsl(var(--muted-foreground));
}

.isl-dots { display: inline-flex; gap: .25rem; }
.isl-dots i {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: hsl(var(--primary));
    animation: isl-dot 1s ease-in-out infinite;
}
.isl-dots i:nth-child(2) { animation-delay: .15s; }
.isl-dots i:nth-child(3) { animation-delay: .3s; }

/* ── الاحتياط: عرض المزيد ── */
.isl-more {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .5rem auto 0;
    padding: .5rem 1rem;
    border: 1px solid hsl(var(--border));
    border-radius: 999px;
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.isl-more:hover { border-color: hsl(var(--primary) / .5); color: hsl(var(--primary)); }
.isl-more svg { width: 1rem; height: 1rem; }

/* ── النهاية ── */
.isl-end {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem 0;
    font-size: .8125rem;
    color: hsl(var(--muted-foreground));
}
.isl-end-line { flex: 1; height: 1px; background: hsl(var(--border)); }
.isl-end-text { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.isl-end-text svg { width: .95rem; height: .95rem; color: hsl(var(--success)); }

/* ── مفتاح طريقة العرض ── */
.lmt {
    display: inline-flex;
    flex-shrink: 0;
    padding: .2rem;
    gap: .15rem;
    border: 1px solid hsl(var(--border));
    border-radius: .6rem;
    background: hsl(var(--muted) / .6);
}
.lmt-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 0;
    padding: .3rem .65rem;
    border: 0;
    border-radius: .45rem;
    background: transparent;
    color: hsl(var(--muted-foreground));
    font: inherit;
    font-size: .8125rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, color .15s, box-shadow .15s;
}
.lmt-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.lmt-btn:hover { color: hsl(var(--foreground)); }
.lmt-btn.is-active {
    background: hsl(var(--card));
    color: hsl(var(--primary));
    box-shadow: 0 1px 2px hsl(var(--foreground) / .12);
    font-weight: 600;
}

/* الجوّال: أيقونتان بلا نصّ فلا يزاحم المفتاح العدّاد، وصفّ اللودر بعرض البطاقة */
@media (max-width: 480px) {
    .lmt-label { display: none; }
    .lmt-btn { padding: .35rem .5rem; }
    .isl-row { grid-template-columns: minmax(0, 1fr) 5rem; min-height: 4.25rem; }
    .isl-row .isl-bar--xs, .isl-row .isl-bar--md, .isl-row .isl-bar--sm { display: none; }
}

/* ── قائمة محمّلة كلّها تُعرض جزءاً جزءاً (LocalListView في OnlineOrdering) ──
   الشريط: المعروض من الكل · العدد في كل مرّة · مفتاح الوضع. والذيل: «عرض المزيد» و«طيّ».
   ⭐ scroll-margin-top: الترويسة الثابتة أعلى الصفحة تغطّي أوّل القائمة حين يُمرَّر إليه. */
.llv { scroll-margin-top: 6rem; }

.llv-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
    padding-bottom: .75rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid hsl(var(--border));
    font-size: .8125rem;
    color: hsl(var(--muted-foreground));
}
.llv-range { font-variant-numeric: tabular-nums; }
.llv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.llv-size { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.llv-size select {
    height: 2.1rem;
    min-height: 0;
    padding: 0 .5rem;
    border: 1px solid hsl(var(--border));
    border-radius: .5rem;
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.llv-size select:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 1px; }

.llv-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding-top: .5rem;
}
.llv-foot .isl-end { align-self: stretch; }
.llv-collapse {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 0;
    padding: .35rem .75rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: hsl(var(--muted-foreground));
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
}
.llv-collapse:hover { color: hsl(var(--primary)); }
.llv-collapse svg { width: .95rem; height: .95rem; }
.llv .llv-pages { padding-inline: 0; padding-bottom: 0; }

@keyframes isl-in { to { opacity: 1; } }
@keyframes isl-shimmer { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@keyframes isl-shimmer-rtl { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes isl-dot { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-.25rem); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .isl-row, .isl-bar, .isl-pill, .isl-dots i { animation: none; opacity: 1; }
}