/* Kashiery Owner Panel & POS Luxury Theme - Next-Gen UI */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root {
    --ksh-font: 'Cairo', 'Tajawal', system-ui, -apple-system, sans-serif;
    --ksh-primary: #10b981;
    --ksh-primary-dark: #059669;
    --ksh-accent: #6366f1;
    --ksh-gold: #f59e0b;

    /* POS Terminal v2 palette */
    --ksh-navy-900: #0a1730;
    --ksh-navy-800: #0f2050;
    --ksh-navy-700: #16295f;
    --ksh-blue-700: #1d4ed8;
    --ksh-blue-600: #2f6fed;
    --ksh-blue-500: #3b82f6;
    --ksh-blue-100: #e3ecff;
    --ksh-blue-50: #eef4ff;
    /* درجات فاتحة إضافية بتُستخدم كنصوص/أيقونات فوق خلفيات داكنة (القائمة
       الجانبية، شاشة الكاشير) — لازم تكون متغيرات برضه (مش ألوان ثابتة)
       عشان تستجيب لتخصيص لون النشاط زي باقي عائلة ksh-blue بالظبط. */
    --ksh-blue-tint: #7fa6ff;
    --ksh-blue-tint-soft: #b7c3e8;
    --ksh-blue-border-light: #cddcff;
    /* نفس قيم --ksh-blue-600 و--ksh-primary لكن بصيغة "r, g, b" (بدون
       تغليف rgb()) عشان تُستخدم جوه rgba(...) في الظلال/التوهجات. */
    --ksh-blue-rgb: 47, 111, 237;
    --ksh-primary-rgb: 16, 185, 129;
    --ksh-ink: #0f1b3c;
    --ksh-ink-soft: #5b6a8f;
    --ksh-slate-bg: #f3f5fb;
    --ksh-border: #e6e9f4;
    --ksh-green: #12b76a;
    --ksh-green-bg: #e7faf1;
    --ksh-purple: #7c3aed;
    --ksh-purple-bg: #f2ecff;
    --ksh-teal: #0e9384;
    --ksh-teal-bg: #e4f9f6;
    --ksh-amber: #f59e0b;
    --ksh-red: #e11d48;
    --ksh-shadow-card: 0 1px 2px rgba(15, 27, 60, 0.04), 0 12px 28px -12px rgba(15, 27, 60, 0.12);
    --ksh-shadow-lift: 0 20px 40px -14px rgba(var(--ksh-blue-rgb), 0.28);
    --ksh-radius-lg: 1.1rem;
    --ksh-radius-xl: 1.5rem;
}

/* Glassmorphism & Card Elevation */
.ksh-glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

.dark .ksh-glass-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(51, 65, 85, 0.8);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

/* Gradient Hero Banner */
.ksh-hero-banner {
    /* كانت الدرجات هنا ثابتة (كحلي إلى أخضر Emerald) من غير أي علاقة
       بمتغيرات هوية النشاط، فكانت البطاقة بتفضل بنفس المظهر الافتراضي
       مهما كان اللون المختار. دلوقتي بتستخدم نفس درجات الكحلي المُستخدَمة
       فعلاً في القائمة الجانبية (اللي بتستجيب للون النشاط بالفعل) عشان
       يبقى شكل الشاشة متسق. */
    background: linear-gradient(135deg, var(--ksh-navy-900) 0%, var(--ksh-navy-800) 55%, var(--ksh-navy-700) 100%);
    border-radius: 1.25rem;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 30px -10px rgba(var(--ksh-blue-rgb), 0.25);
}

.ksh-hero-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(var(--ksh-primary-rgb), 0.25) 0%, rgba(0,0,0,0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Luxury Action Pills */
.ksh-quick-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.875rem;
    font-weight: 700;
    font-size: 0.875rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.ksh-quick-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--ksh-primary-rgb), 0.25);
}
.ksh-quick-action-btn svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

/* Odoo 19 POS Styling */
.ksh-pos-wrapper {
    font-family: var(--ksh-font);
}

.ksh-product-card {
    position: relative;
    border-radius: 1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 0.875rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    overflow: hidden;
}

.dark .ksh-product-card {
    background: #1e293b;
    border-color: #334155;
}

.ksh-product-card:hover {
    border-color: var(--ksh-primary);
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -6px rgba(var(--ksh-primary-rgb), 0.18);
}

.ksh-product-card:active {
    transform: scale(0.97);
}

/* Category Filter Tabs */
.ksh-category-pill {
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
}

.dark .ksh-category-pill {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

.ksh-category-pill.active {
    background: var(--ksh-primary);
    color: #ffffff;
    border-color: var(--ksh-primary);
    box-shadow: 0 4px 14px rgba(var(--ksh-primary-rgb), 0.35);
}

/* Cart Terminal Summary */
.ksh-cart-terminal {
    border-radius: 1.25rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.08);
}

.dark .ksh-cart-terminal {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.4);
}

/* Keyframe Animations */
@keyframes kshPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.ksh-animate-pulse {
    animation: kshPulse 2s infinite ease-in-out;
}

/* ==========================================================================
   Dashboard / Settings support classes
   (fixes bare Tailwind utility classes that Filament's compiled CSS does
   not ship, e.g. text-emerald-300, border-gray-200, rounded-2xl, ...)
   ========================================================================== */
.ksh-hero-title { color: #ffffff; font-weight: 900; letter-spacing: -0.01em; font-size: 1.65rem; margin: 0.6rem 0 0.35rem; }
.ksh-hero-sub { color: #cbd5e1; font-weight: 500; font-size: 0.95rem; max-width: 42rem; }
.ksh-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; position: relative; z-index: 1; }
@media (min-width: 768px) { .ksh-hero-title { font-size: 2rem; } }
.ksh-hero-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.85rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 800;
    background: rgba(16, 185, 129, 0.16); color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.ksh-hero-badge--shift {
    background: rgba(245, 158, 11, 0.16); color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.3);
}
.ksh-settings-card {
    border-radius: var(--ksh-radius-xl);
    border: 1px solid var(--ksh-border);
    background: #ffffff;
    padding: 1.75rem;
    box-shadow: var(--ksh-shadow-card);
}
.dark .ksh-settings-card { background: #0f172a; border-color: #1e293b; }
.ksh-settings-card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--ksh-border);
    flex-wrap: wrap;
}
.dark .ksh-settings-card__head { border-color: #1e293b; }
.ksh-settings-card__title {
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 1.15rem; font-weight: 800; color: var(--ksh-ink);
}
.dark .ksh-settings-card__title { color: #f1f5f9; }
.ksh-settings-card__desc { color: var(--ksh-ink-soft); font-size: 0.85rem; margin-top: 0.35rem; font-weight: 500; }
.ksh-settings-card__foot {
    margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--ksh-border);
    display: flex; justify-content: flex-end;
}
.dark .ksh-settings-card__foot { border-color: #1e293b; }

/* ==========================================================================
   POS TERMINAL v2 — Full Luxury Redesign
   Every visual rule below is hand-authored on purpose: this panel has no
   Tailwind/Vite build step wired up, so ad-hoc utility classes in Blade
   views (bg-blue-600, rounded-3xl, grid-cols-4, ...) compile to nothing.
   Only real CSS (this file) and Filament's own .fi-* classes render.
   ========================================================================== */
.ksh-pos {
    position: fixed; inset: 0; z-index: 40;
    display: flex;
    font-family: var(--ksh-font);
    background: var(--ksh-slate-bg);
    color: var(--ksh-ink);
    direction: rtl;
    overflow: hidden;
}
.ksh-pos * { box-sizing: border-box; }
[x-cloak] { display: none !important; }
/* Safety net: any heroicon <svg> with no width/height attributes defaults to the
   browser's 300x150 replaced-element box. Every specific component below sets its
   own icon size and (by appearing later in the file) overrides this default. */
.ksh-pos svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.ksh-pos .ksh-no-scrollbar::-webkit-scrollbar { display: none; }
.ksh-pos .ksh-no-scrollbar { scrollbar-width: none; }

/* ---- Sidebar (right, RTL start) ---- */
.ksh-pos-sidebar {
    width: 17rem; flex-shrink: 0;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 1.5rem 1.25rem;
    background: radial-gradient(120% 140% at 100% 0%, var(--ksh-navy-700) 0%, var(--ksh-navy-800) 45%, var(--ksh-navy-900) 100%);
    box-shadow: -18px 0 40px -20px rgba(10, 23, 48, 0.5);
    z-index: 20;
}
.ksh-pos-brand { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 1.5rem; margin-bottom: 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ksh-pos-brand__mark {
    width: 2.75rem; height: 2.75rem; border-radius: 0.9rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--ksh-blue-500), var(--ksh-blue-700));
    color: #fff; font-weight: 900; font-size: 1.35rem;
    box-shadow: 0 10px 22px -6px rgba(var(--ksh-blue-rgb), 0.6);
}
.ksh-pos-brand__name { font-weight: 900; font-size: 1.15rem; color: #fff; line-height: 1.1; }
.ksh-pos-brand__tag { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.14em; color: var(--ksh-blue-tint); text-transform: uppercase; margin-top: 0.2rem; }

.ksh-pos-nav { display: flex; flex-direction: column; gap: 0.4rem; }
.ksh-pos-nav__item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.65rem 0.75rem; border-radius: 0.9rem;
    font-weight: 700; font-size: 0.875rem;
    color: var(--ksh-blue-tint-soft); text-decoration: none;
    transition: all 0.18s ease;
}
.ksh-pos-nav__item svg {
    width: 1.15rem; height: 1.15rem; flex-shrink: 0; padding: 0.5rem;
    box-sizing: content-box; border-radius: 0.7rem;
    background: rgba(255,255,255,0.06); color: var(--ksh-blue-tint);
    transition: all 0.18s ease;
}
.ksh-pos-nav__item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.ksh-pos-nav__item:hover svg { background: rgba(255,255,255,0.1); }
.ksh-pos-nav__item.is-active {
    background: linear-gradient(135deg, var(--ksh-blue-600), var(--ksh-blue-700));
    color: #fff;
    box-shadow: 0 12px 24px -8px rgba(var(--ksh-blue-rgb), 0.65);
}
.ksh-pos-nav__item.is-active svg { background: rgba(255,255,255,0.18); color: #fff; }

.ksh-pos-sidebar__foot { padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.08); }
.ksh-pos-profile { display: flex; align-items: center; gap: 0.7rem; padding: 0 0.15rem 1rem; }
.ksh-pos-profile__avatar {
    width: 2.5rem; height: 2.5rem; border-radius: 9999px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--ksh-blue-rgb), 0.22); color: var(--ksh-blue-tint);
    font-weight: 900; font-size: 0.9rem;
    border: 2px solid rgba(var(--ksh-blue-rgb), 0.4);
}
.ksh-pos-profile__name { color: #fff; font-weight: 800; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ksh-pos-profile__role { color: var(--ksh-blue-tint); font-size: 0.7rem; font-weight: 600; }
.ksh-pos-logout {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem; border-radius: 0.8rem;
    background: rgba(225, 29, 72, 0.12); color: #fca5b8;
    font-weight: 800; font-size: 0.75rem; border: 1px solid rgba(225, 29, 72, 0.18);
    transition: all 0.18s ease; cursor: pointer;
}
.ksh-pos-logout:hover { background: rgba(225, 29, 72, 0.22); color: #fff; }
.ksh-pos-logout svg { width: 1rem; height: 1rem; }

/* ---- Center catalog column ---- */
.ksh-pos-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--ksh-slate-bg); }

.ksh-pos-header {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.1rem 1.5rem; background: #fff;
    border-bottom: 1px solid var(--ksh-border);
    box-shadow: 0 1px 0 rgba(15,27,60,0.02);
    flex-shrink: 0;
}
.ksh-pos-header__title { font-weight: 900; font-size: 1.1rem; color: var(--ksh-ink); white-space: nowrap; }
.ksh-pos-search { position: relative; flex: 1; max-width: 34rem; }
.ksh-pos-search input {
    width: 100%; padding: 0.75rem 1rem 0.75rem 1rem; padding-right: 2.75rem;
    border-radius: 1rem; border: 1px solid var(--ksh-border);
    background: var(--ksh-slate-bg); font-family: var(--ksh-font);
    font-size: 0.875rem; font-weight: 600; color: var(--ksh-ink);
    outline: none; transition: all 0.18s ease;
}
.ksh-pos-search input:focus { background: #fff; border-color: var(--ksh-blue-500); box-shadow: 0 0 0 4px var(--ksh-blue-50); }
.ksh-pos-search svg { position: absolute; top: 50%; right: 0.95rem; transform: translateY(-50%); width: 1.15rem; height: 1.15rem; color: #94a3b8; pointer-events: none; }

.ksh-pos-header__actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.ksh-pos-icon-btn {
    position: relative; width: 2.75rem; height: 2.75rem; border-radius: 0.9rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--ksh-slate-bg); border: 1px solid var(--ksh-border);
    color: var(--ksh-ink-soft); cursor: pointer; transition: all 0.18s ease;
}
.ksh-pos-icon-btn:hover { background: var(--ksh-blue-50); color: var(--ksh-blue-600); border-color: var(--ksh-blue-border-light); }
.ksh-pos-icon-btn svg { width: 1.25rem; height: 1.25rem; }
.ksh-pos-icon-btn__badge {
    position: absolute; top: -0.3rem; left: -0.3rem;
    min-width: 1.15rem; height: 1.15rem; padding: 0 0.25rem; border-radius: 9999px;
    background: var(--ksh-red); color: #fff; font-size: 0.65rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
}
.ksh-pos-btn-outline {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.1rem; border-radius: 0.9rem;
    background: #fff; border: 1px solid var(--ksh-border);
    font-weight: 800; font-size: 0.8rem; color: var(--ksh-ink);
    cursor: pointer; transition: all 0.18s ease; white-space: nowrap;
}
.ksh-pos-btn-outline:hover { border-color: var(--ksh-blue-500); color: var(--ksh-blue-600); }
.ksh-pos-btn-outline svg { width: 1.05rem; height: 1.05rem; color: var(--ksh-blue-600); }

.ksh-pos-body { flex: 1; overflow-y: auto; padding: 1.5rem; }

.ksh-pos-banner {
    position: relative; overflow: hidden;
    border-radius: var(--ksh-radius-xl);
    padding: 1.75rem 2rem;
    background: linear-gradient(120deg, var(--ksh-navy-900) 0%, var(--ksh-blue-700) 60%, var(--ksh-blue-600) 100%);
    color: #fff; margin-bottom: 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    box-shadow: 0 22px 44px -18px rgba(29, 78, 216, 0.55);
}
.ksh-pos-banner::before, .ksh-pos-banner::after {
    content: ''; position: absolute; border-radius: 9999px; pointer-events: none;
    background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 70%);
}
.ksh-pos-banner::before { width: 22rem; height: 22rem; top: -9rem; left: -6rem; }
.ksh-pos-banner::after { width: 14rem; height: 14rem; bottom: -8rem; left: 8rem; }
.ksh-pos-banner__text { position: relative; z-index: 1; font-size: 1.4rem; font-weight: 900; line-height: 1.5; max-width: 30rem; }
.ksh-pos-banner__icon {
    position: relative; z-index: 1; flex-shrink: 0;
    width: 6rem; height: 6rem; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center; font-size: 2.75rem;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 0 0 10px rgba(255,255,255,0.05);
}

.ksh-pos-categories-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
}
.ksh-pos-cat-arrow {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid var(--ksh-border);
    color: var(--ksh-ink-soft);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.18s ease;
    z-index: 2;
}
.ksh-pos-cat-arrow:hover {
    background: var(--ksh-blue-600);
    color: #fff;
    border-color: var(--ksh-blue-600);
    transform: scale(1.06);
}
.ksh-pos-cat-arrow svg {
    width: 1.15rem;
    height: 1.15rem;
}
.ksh-pos-categories {
    flex: 1;
    display: flex;
    align-items: stretch;
    gap: 0.65rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0.3rem 0.2rem 0.6rem;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.ksh-pos-categories::-webkit-scrollbar {
    height: 4px;
}
.ksh-pos-categories::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.03);
    border-radius: 9999px;
}
.ksh-pos-categories::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
.ksh-pos-categories::-webkit-scrollbar-thumb:hover {
    background: var(--ksh-blue-500);
}
.ksh-pos-category-pill {
    flex-shrink: 0; min-width: 6.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    padding: 0.85rem 1.1rem; border-radius: 1.1rem;
    background: #fff; border: 1px solid var(--ksh-border);
    font-weight: 800; font-size: 0.75rem; color: var(--ksh-ink-soft);
    cursor: pointer; transition: all 0.18s ease;
}
.ksh-pos-category-pill svg {
    width: 1.15rem; height: 1.15rem; padding: 0.45rem; box-sizing: content-box;
    border-radius: 9999px; background: var(--ksh-blue-50); color: var(--ksh-blue-600);
    transition: all 0.18s ease;
}
.ksh-pos-category-pill:hover { border-color: var(--ksh-blue-500); color: var(--ksh-blue-600); }
.ksh-pos-category-pill.is-active {
    background: linear-gradient(135deg, var(--ksh-blue-600), var(--ksh-blue-700));
    border-color: var(--ksh-blue-600); color: #fff;
    box-shadow: 0 14px 26px -10px rgba(var(--ksh-blue-rgb), 0.55);
}
.ksh-pos-category-pill.is-active svg { background: rgba(255,255,255,0.2); color: #fff; }

.ksh-pos-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.ksh-pos-section-head__title { display: flex; align-items: center; gap: 0.55rem; font-weight: 900; font-size: 1rem; color: var(--ksh-ink); }
.ksh-pos-section-head__count { font-size: 0.7rem; font-weight: 800; color: var(--ksh-ink-soft); background: #e7ebf7; padding: 0.15rem 0.6rem; border-radius: 9999px; }

/* شريط الفلاتر — كل شريحة مستقلة وقابلة للتفعيل مع أي شريحة تانية في نفس
   الوقت (الترتيب + متاح بالمخزون)، بدل قائمة منسدلة تحصر الاختيار. */
.ksh-pos-filters { display: flex; align-items: center; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.3rem; margin-bottom: 1rem; }
.ksh-pos-filters__label { flex-shrink: 0; font-size: 0.7rem; font-weight: 800; color: var(--ksh-ink-soft); white-space: nowrap; }
.ksh-pos-filters__sep { flex-shrink: 0; width: 1px; height: 1.4rem; background: var(--ksh-border); margin: 0 0.15rem; }
.ksh-pos-filter-chip {
    flex-shrink: 0; display: flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.85rem; border-radius: 9999px; white-space: nowrap;
    background: #fff; border: 1px solid var(--ksh-border);
    font-weight: 800; font-size: 0.72rem; color: var(--ksh-ink-soft);
    cursor: pointer; transition: all 0.15s ease;
}
.ksh-pos-filter-chip svg { width: 0.95rem; height: 0.95rem; }
.ksh-pos-filter-chip:hover { border-color: var(--ksh-blue-500); color: var(--ksh-blue-600); }
.ksh-pos-filter-chip.is-active {
    background: linear-gradient(135deg, var(--ksh-blue-600), var(--ksh-blue-700));
    border-color: var(--ksh-blue-600); color: #fff;
    box-shadow: 0 10px 20px -8px rgba(var(--ksh-blue-rgb), 0.5);
}

.ksh-pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 1rem; }

.ksh-pos-card {
    position: relative; display: flex; flex-direction: column; justify-content: space-between;
    background: #fff; border: 1px solid var(--ksh-border); border-radius: 1.35rem;
    padding: 0.95rem; box-shadow: var(--ksh-shadow-card);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ksh-pos-card:hover { transform: translateY(-4px); border-color: var(--ksh-blue-border-light); box-shadow: var(--ksh-shadow-lift); }
.ksh-pos-card:active { transform: translateY(-1px) scale(0.98); }
.ksh-pos-card__add:active, .ksh-pos-confirm-btn:active, .ksh-pos-category-pill:active, .ksh-pos-pay-tile:active { transform: scale(0.95); }
.ksh-pos-card__top { display: flex; align-items: center; justify-content: space-between; }
.ksh-pos-card__fav { color: #cbd5e1; cursor: pointer; transition: color 0.15s ease; }
.ksh-pos-card__fav:hover { color: var(--ksh-red); }
.ksh-pos-card__fav svg { width: 1.15rem; height: 1.15rem; }
.ksh-pos-card__stock { font-size: 0.62rem; font-weight: 800; padding: 0.2rem 0.55rem; border-radius: 9999px; }
.ksh-pos-card__stock--ok { background: var(--ksh-green-bg); color: #067a45; }
.ksh-pos-card__stock--low { background: #fef3c7; color: #92400e; }
.ksh-pos-card__stock--out { background: #fee2e2; color: #b91c1c; }
.ksh-pos-card__thumb { height: 6.5rem; display: flex; align-items: center; justify-content: center; margin: 0.5rem 0; }
.ksh-pos-card__thumb img { max-height: 100%; max-width: 100%; object-fit: contain; }
.ksh-pos-card__thumb-fallback {
    width: 4.25rem; height: 4.25rem; border-radius: 9999px;
    background: radial-gradient(120% 120% at 30% 20%, var(--ksh-blue-50) 0%, var(--ksh-blue-100) 100%);
    color: var(--ksh-blue-600); display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(var(--ksh-blue-rgb), 0.12);
}
.ksh-pos-card__thumb-fallback svg { width: 1.85rem; height: 1.85rem; }
.ksh-pos-card__body { text-align: center; }
.ksh-pos-card__name {
    font-weight: 800; font-size: 0.83rem; color: var(--ksh-ink); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.3rem;
}
.ksh-pos-card__sku { font-size: 0.68rem; color: #9aa5c3; font-weight: 600; margin-top: 0.15rem; }
.ksh-pos-card__foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 0.75rem; padding-top: 0.65rem; border-top: 1px dashed var(--ksh-border);
}
.ksh-pos-card__price { font-weight: 900; font-size: 0.9rem; color: var(--ksh-ink); }
.ksh-pos-card__price small { font-weight: 600; font-size: 0.68rem; color: #94a3b8; }
.ksh-pos-card__add {
    width: 2.3rem; height: 2.3rem; border-radius: 0.75rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--ksh-blue-50); color: var(--ksh-blue-600);
    font-weight: 900; font-size: 1.2rem; border: none; cursor: pointer;
    transition: all 0.18s ease;
}
.ksh-pos-card__add:hover { background: var(--ksh-blue-600); color: #fff; box-shadow: 0 8px 18px -6px rgba(var(--ksh-blue-rgb), 0.55); }
.ksh-pos-card__add:disabled { opacity: 0.4; cursor: not-allowed; }

.ksh-pos-empty {
    grid-column: 1 / -1; text-align: center; padding: 3.5rem 1rem;
    background: #fff; border: 1px dashed var(--ksh-border); border-radius: var(--ksh-radius-xl);
    color: #9aa5c3;
}
.ksh-pos-empty svg { width: 3rem; height: 3rem; margin: 0 auto 0.75rem; opacity: 0.4; }

/* ---- Cart panel (left) ---- */
.ksh-pos-cart {
    width: 24.5rem; flex-shrink: 0; z-index: 20;
    display: flex; flex-direction: column;
    background: #fff; border-left: 1px solid var(--ksh-border);
    box-shadow: 18px 0 40px -24px rgba(15, 27, 60, 0.25);
    padding: 1.25rem; gap: 0.9rem; overflow-y: auto;
}

.ksh-pos-cart__banner {
    border-radius: var(--ksh-radius-lg);
    padding: 1.1rem 1.25rem;
    background: linear-gradient(120deg, var(--ksh-blue-700), var(--ksh-blue-600));
    color: #fff; box-shadow: 0 18px 34px -14px rgba(29, 78, 216, 0.5);
    flex-shrink: 0;
}
.ksh-pos-cart__banner-top { display: flex; align-items: center; justify-content: space-between; }
.ksh-pos-cart__title { display: flex; align-items: center; gap: 0.5rem; font-weight: 900; font-size: 1.05rem; }
.ksh-pos-cart__badge {
    min-width: 1.5rem; height: 1.5rem; padding: 0 0.35rem; border-radius: 9999px;
    background: #fff; color: var(--ksh-blue-700); font-weight: 900; font-size: 0.78rem;
    display: flex; align-items: center; justify-content: center;
}
.ksh-pos-cart__clear { color: rgba(255,255,255,0.8); cursor: pointer; background: none; border: none; padding: 0.2rem; }
.ksh-pos-cart__clear:hover { color: #fff; }
.ksh-pos-cart__clear svg, .ksh-pos-cart__title svg { width: 1.3rem; height: 1.3rem; }
.ksh-pos-cart__meta { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.2); font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.85); display: flex; flex-direction: column; gap: 0.3rem; }
.ksh-pos-cart__meta-row { display: flex; align-items: center; justify-content: space-between; }
.ksh-pos-cart__meta-row strong { color: #fff; font-weight: 800; font-family: 'Courier New', monospace; }

/* ---- زر اختيار/ربط العميل — دايمًا ظاهر جوه بانر السلة (اقتباس من Odoo POS) ---- */
.ksh-pos-cart__customer {
    width: 100%; margin-top: 0.7rem; padding: 0.6rem 0.75rem; border-radius: 0.85rem;
    background: rgba(255,255,255,0.12); border: 1px dashed rgba(255,255,255,0.35);
    display: flex; align-items: center; gap: 0.65rem; cursor: pointer;
    transition: all 0.18s ease; text-align: start;
}
.ksh-pos-cart__customer:hover { background: rgba(255,255,255,0.2); }
.ksh-pos-cart__customer--selected { border-style: solid; background: rgba(255,255,255,0.16); }
.ksh-pos-cart__customer-avatar {
    flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 9999px;
    background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center;
}
.ksh-pos-cart__customer-avatar svg { width: 1.1rem; height: 1.1rem; color: #fff; }
.ksh-pos-cart__customer-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ksh-pos-cart__customer-info strong { font-size: 0.78rem; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ksh-pos-cart__customer-info span { font-size: 0.66rem; font-weight: 600; color: rgba(255,255,255,0.75); }
.ksh-pos-cart__customer-clear {
    flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.75);
}
.ksh-pos-cart__customer-clear:hover { background: rgba(255,255,255,0.2); color: #fff; }
.ksh-pos-cart__customer-clear svg { width: 0.9rem; height: 0.9rem; }

.ksh-pos-cart__items { flex: 1; min-height: 4rem; max-height: 23rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; padding-inline-end: 0.25rem; }
.ksh-cart-line {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 1.05rem 0.9rem; min-height: 4.25rem; border-radius: 1.1rem;
    background: var(--ksh-slate-bg); border: 1px solid var(--ksh-border);
    transition: border-color 0.15s ease;
}
.ksh-cart-line:hover { border-color: var(--ksh-blue-border-light); }
.ksh-cart-line__info { flex: 1; min-width: 0; }
.ksh-cart-line__name { font-weight: 800; font-size: 0.78rem; color: var(--ksh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ksh-cart-line__price { font-size: 0.7rem; font-weight: 700; color: #94a3b8; margin-top: 0.1rem; }
.ksh-cart-line__stepper { display: flex; align-items: center; gap: 0.15rem; background: #fff; border: 1px solid var(--ksh-border); border-radius: 0.75rem; padding: 0.15rem; }
.ksh-cart-line__stepper button {
    width: 1.5rem; height: 1.5rem; border-radius: 0.5rem; border: none; background: transparent;
    color: var(--ksh-ink); font-weight: 900; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ksh-cart-line__stepper button:hover { background: var(--ksh-blue-50); color: var(--ksh-blue-600); }
.ksh-cart-line__stepper span { width: 1.4rem; text-align: center; font-weight: 900; font-size: 0.78rem; }
.ksh-cart-line__remove { color: var(--ksh-red); background: none; border: none; cursor: pointer; padding: 0.2rem; flex-shrink: 0; opacity: 0.75; }
.ksh-cart-line__remove:hover { opacity: 1; }
.ksh-cart-line__remove svg { width: 1.05rem; height: 1.05rem; }

.ksh-pos-cart__empty { padding: 2.5rem 0.5rem; text-align: center; color: #9aa5c3; font-size: 0.78rem; }
.ksh-pos-cart__empty svg { width: 2.5rem; height: 2.5rem; margin: 0 auto 0.5rem; opacity: 0.4; }

.ksh-pos-note-toggle { background: none; border: none; color: var(--ksh-blue-600); font-weight: 800; font-size: 0.75rem; cursor: pointer; padding: 0; }
.ksh-pos-note-input {
    width: 100%; margin-top: 0.5rem; border-radius: 0.7rem; border: 1px solid var(--ksh-border);
    background: var(--ksh-slate-bg); font-size: 0.78rem; padding: 0.55rem 0.75rem; font-family: var(--ksh-font);
}

.ksh-pos-summary { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.75rem; border-top: 1px dashed var(--ksh-border); font-size: 0.78rem; font-weight: 600; color: var(--ksh-ink-soft); }
.ksh-pos-summary__row { display: flex; align-items: center; justify-content: space-between; }
.ksh-pos-summary__row strong { color: var(--ksh-ink); font-weight: 800; }
.ksh-pos-discount { position: relative; width: 6.5rem; }
.ksh-pos-discount input {
    width: 100%; padding: 0.4rem 1.7rem 0.4rem 0.5rem; border-radius: 0.6rem; border: 1px solid var(--ksh-border);
    font-size: 0.75rem; font-weight: 700; text-align: left; font-family: var(--ksh-font);
}
.ksh-pos-discount span { position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 0.62rem; color: #94a3b8; }

.ksh-pos-grand-total {
    display: flex; align-items: center; justify-content: space-between;
    border-radius: var(--ksh-radius-lg); padding: 1rem 1.25rem;
    background: linear-gradient(120deg, var(--ksh-navy-900), var(--ksh-navy-700));
    color: #fff; box-shadow: 0 18px 32px -14px rgba(10, 23, 48, 0.5);
}
.ksh-pos-grand-total__label { font-weight: 800; font-size: 0.85rem; color: var(--ksh-blue-tint-soft); }
.ksh-pos-grand-total__value { font-weight: 900; font-size: 1.35rem; }
.ksh-pos-grand-total__value small { font-size: 0.68rem; font-weight: 600; color: var(--ksh-blue-tint-soft); }

.ksh-pos-confirm-btn {
    width: 100%; padding: 1rem; border-radius: var(--ksh-radius-lg); border: none; cursor: pointer;
    background: linear-gradient(120deg, var(--ksh-blue-600), var(--ksh-blue-700));
    color: #fff; font-weight: 900; font-size: 0.9rem;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    box-shadow: var(--ksh-shadow-lift);
    transition: all 0.18s ease;
}
.ksh-pos-confirm-btn:hover { transform: translateY(-2px); }
.ksh-pos-confirm-btn svg { width: 1.2rem; height: 1.2rem; }
.ksh-pos-confirm-btn:disabled {
    background: #cbd5e1; color: #64748b; cursor: not-allowed; box-shadow: none; transform: none;
}
.ksh-pos-confirm-hint {
    display: flex; align-items: center; gap: 0.4rem; text-align: center; justify-content: center;
    margin-top: -0.4rem; padding: 0.5rem 0.75rem; border-radius: 0.7rem;
    background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
    font-size: 0.7rem; font-weight: 700; line-height: 1.5;
}

.ksh-pos-secondary-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.ksh-pos-secondary-btn {
    padding: 0.65rem 0.4rem; border-radius: 0.85rem; border: 1px solid var(--ksh-border); background: #fff;
    font-weight: 800; font-size: 0.66rem; cursor: pointer; transition: all 0.18s ease;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; color: var(--ksh-ink);
    line-height: 1.2; text-align: center;
}
.ksh-pos-secondary-btn svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.ksh-pos-secondary-btn:hover { border-color: var(--ksh-blue-500); color: var(--ksh-blue-600); }
.ksh-pos-secondary-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ksh-pos-secondary-btn:disabled:hover { border-color: var(--ksh-border); color: var(--ksh-ink); }
.ksh-pos-secondary-btn--danger { color: var(--ksh-red); }
.ksh-pos-secondary-btn--danger:hover { border-color: var(--ksh-red); color: var(--ksh-red); }

.ksh-pos-payments { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.2rem, 1fr)); gap: 0.5rem; }
.ksh-pos-pay-tile {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 0.6rem 0.3rem; border-radius: 0.85rem; border: 1.5px solid transparent; cursor: pointer;
    font-size: 0.65rem; font-weight: 800; transition: all 0.18s ease; background: none;
}
.ksh-pos-pay-tile svg { width: 1.15rem; height: 1.15rem; }
.ksh-pos-pay-tile--cash { background: var(--ksh-green-bg); color: #067a45; }
.ksh-pos-pay-tile--card { background: var(--ksh-blue-50); color: var(--ksh-blue-700); }
.ksh-pos-pay-tile--wallet { background: var(--ksh-purple-bg); color: var(--ksh-purple); }
.ksh-pos-pay-tile--bank_transfer { background: var(--ksh-teal-bg); color: var(--ksh-teal); }
.ksh-pos-pay-tile--instapay { background: #ede9fe; color: #6d28d9; }
.ksh-pos-pay-tile--credit { background: #fff7ed; color: #c2410c; }
.ksh-pos-pay-tile.is-active { border-color: currentColor; box-shadow: 0 8px 18px -8px rgba(15,27,60,0.25); transform: translateY(-1px); }

.ksh-pos-due-tile {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.75rem 1rem; border-radius: var(--ksh-radius-lg);
    background: var(--ksh-blue-50); border: 1px solid var(--ksh-blue-border-light);
}
.ksh-pos-due-tile__label { font-size: 0.7rem; font-weight: 800; color: var(--ksh-blue-700); }
.ksh-pos-due-tile__value { font-weight: 900; font-size: 1.05rem; color: var(--ksh-ink); }
.ksh-pos-due-tile svg { width: 1.4rem; height: 1.4rem; color: var(--ksh-blue-600); }

@media (max-width: 1280px) {
    .ksh-pos-sidebar { width: 5.5rem; padding: 1.25rem 0.75rem; }
    .ksh-pos-brand__name, .ksh-pos-brand__tag, .ksh-pos-nav__item span, .ksh-pos-profile__name, .ksh-pos-profile__role, .ksh-pos-logout span { display: none; }
    .ksh-pos-brand { justify-content: center; }
    .ksh-pos-nav__item { justify-content: center; padding: 0.85rem; }
    .ksh-pos-profile { justify-content: center; }
    .ksh-pos-logout { padding: 0.7rem 0; }
    .ksh-pos-cart { width: 21rem; }
}

/* ---- Modern, light scrollbars — applied panel-wide ---- */
.ksh-pos ::-webkit-scrollbar,
.fi-sidebar-nav::-webkit-scrollbar,
.fi-main::-webkit-scrollbar,
.ksh-modal-card::-webkit-scrollbar {
    width: 6px; height: 6px;
}
.ksh-pos ::-webkit-scrollbar-track,
.fi-sidebar-nav::-webkit-scrollbar-track,
.fi-main::-webkit-scrollbar-track,
.ksh-modal-card::-webkit-scrollbar-track { background: transparent; }
.ksh-pos ::-webkit-scrollbar-thumb,
.fi-sidebar-nav::-webkit-scrollbar-thumb,
.fi-main::-webkit-scrollbar-thumb,
.ksh-modal-card::-webkit-scrollbar-thumb {
    background: rgba(15, 27, 60, 0.14); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box;
}
.ksh-pos ::-webkit-scrollbar-thumb:hover,
.fi-sidebar-nav::-webkit-scrollbar-thumb:hover,
.fi-main::-webkit-scrollbar-thumb:hover,
.ksh-modal-card::-webkit-scrollbar-thumb:hover { background: rgba(15, 27, 60, 0.28); background-clip: padding-box; }
.ksh-pos, .fi-sidebar-nav, .fi-main, .ksh-modal-card { scrollbar-width: thin; scrollbar-color: rgba(15,27,60,0.16) transparent; }

/* ---- Shift status (sidebar) ---- */
.ksh-pos-shift-info {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 0.8rem; margin-bottom: 0.6rem; border-radius: 0.9rem;
    background: rgba(18, 183, 106, 0.12); border: 1px solid rgba(18, 183, 106, 0.25);
}
.ksh-pos-shift-info__dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--ksh-green); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(18,183,106,0.2); }
.ksh-pos-shift-info div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ksh-pos-shift-info strong { color: #d1fae5; font-size: 0.78rem; font-weight: 800; }
.ksh-pos-shift-info small { color: var(--ksh-blue-tint); font-size: 0.65rem; font-weight: 600; }
.ksh-pos-shift-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-bottom: 0.85rem; }
.ksh-pos-shift-actions__btn {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 0.55rem 0.3rem; border-radius: 0.8rem; cursor: pointer; text-align: center;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    color: var(--ksh-blue-tint-soft); font-size: 0.62rem; font-weight: 800; transition: all 0.18s ease;
}
.ksh-pos-shift-actions__btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.ksh-pos-shift-actions__btn svg { width: 1.1rem; height: 1.1rem; color: var(--ksh-blue-tint); }

/* ---- Shift open gate (full-screen) ---- */
.ksh-shift-gate { align-items: center; justify-content: center; padding: 2rem; }
.ksh-shift-gate__card {
    width: 100%; max-width: 26rem; text-align: center;
    background: #fff; border-radius: var(--ksh-radius-xl); padding: 2.5rem 2rem;
    box-shadow: var(--ksh-shadow-card); border: 1px solid var(--ksh-border);
}
.ksh-shift-gate__icon {
    width: 4rem; height: 4rem; margin: 0 auto 1.25rem; border-radius: 9999px;
    background: linear-gradient(135deg, var(--ksh-blue-50), var(--ksh-blue-100));
    color: var(--ksh-blue-600); display: flex; align-items: center; justify-content: center;
}
.ksh-shift-gate__icon svg { width: 2rem; height: 2rem; }
.ksh-shift-gate__card h2 { font-size: 1.3rem; font-weight: 900; color: var(--ksh-ink); margin-bottom: 0.5rem; }
.ksh-shift-gate__card p { font-size: 0.83rem; color: var(--ksh-ink-soft); font-weight: 500; line-height: 1.7; margin-bottom: 1.5rem; }
.ksh-shift-gate__card label { display: block; text-align: right; font-size: 0.75rem; font-weight: 800; color: var(--ksh-ink); margin-bottom: 0.45rem; }
.ksh-shift-gate__input { position: relative; margin-bottom: 1.25rem; }
.ksh-shift-gate__input input {
    width: 100%; padding: 0.85rem 3rem 0.85rem 1rem; border-radius: 0.9rem; border: 1px solid var(--ksh-border);
    background: var(--ksh-slate-bg); font-family: var(--ksh-font); font-weight: 800; font-size: 1rem; color: var(--ksh-ink);
    text-align: center; outline: none; transition: all 0.18s ease;
}
.ksh-shift-gate__input input:focus { background: #fff; border-color: var(--ksh-blue-500); box-shadow: 0 0 0 4px var(--ksh-blue-50); }
.ksh-shift-gate__input span { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 0.75rem; font-weight: 700; color: #94a3b8; }

/* ---- Modal system (shared: customer / close-shift / held-orders) ---- */
.ksh-modal-overlay {
    position: fixed; inset: 0; z-index: 60; background: rgba(10, 23, 48, 0.55);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.ksh-modal-card {
    width: 100%; max-width: 26rem; max-height: 85vh; overflow-y: auto;
    background: #fff; border-radius: var(--ksh-radius-xl); padding: 1.5rem;
    box-shadow: 0 30px 60px -20px rgba(10, 23, 48, 0.4);
    font-family: var(--ksh-font); direction: rtl;
}
.ksh-modal-card--wide { max-width: 32rem; }
.ksh-modal-card__title { font-weight: 900; font-size: 1.05rem; color: var(--ksh-ink); margin-bottom: 1rem; }
.ksh-modal-card__label { display: block; font-size: 0.75rem; font-weight: 800; color: var(--ksh-ink); margin-bottom: 0.45rem; }
.ksh-modal-card__input {
    width: 100%; padding: 0.7rem 1rem; border-radius: 0.8rem; border: 1px solid var(--ksh-border);
    font-family: var(--ksh-font); font-size: 0.85rem;
}

/* ---- Shift stats mini-table (inside close-shift modal) ---- */
.ksh-shift-stats { background: var(--ksh-slate-bg); border-radius: 1rem; padding: 0.9rem 1rem; margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ksh-shift-stats__row { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; font-weight: 600; color: var(--ksh-ink-soft); }
.ksh-shift-stats__row strong { color: var(--ksh-ink); font-weight: 800; }
.ksh-shift-stats__row--highlight { padding-top: 0.5rem; margin-top: 0.15rem; border-top: 1px dashed var(--ksh-border); }
.ksh-shift-stats__row--highlight strong { color: var(--ksh-blue-700); font-size: 0.9rem; }

/* ---- Held orders list ---- */
.ksh-held-list { display: flex; flex-direction: column; gap: 0.6rem; max-height: 22rem; overflow-y: auto; }
.ksh-held-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 0.9rem; border-radius: 1rem;
    background: var(--ksh-slate-bg); border: 1px solid var(--ksh-border);
}
.ksh-held-row__number { font-weight: 800; font-size: 0.82rem; color: var(--ksh-ink); font-family: 'Courier New', monospace; }
.ksh-held-row__meta { font-size: 0.7rem; color: #94a3b8; font-weight: 600; margin-top: 0.1rem; }
.ksh-held-row__total { font-weight: 900; font-size: 0.85rem; color: var(--ksh-blue-700); flex: 1; text-align: left; }

/* ==========================================================================
   PANEL-WIDE LUXURY THEME
   Reskins Filament's own chrome (.fi-* classes) so every screen in the
   Owner panel — not just the custom pages — matches the POS design
   language. These are real Filament-rendered elements with real compiled
   CSS already, so plain selector overrides here take effect (this
   stylesheet loads after Filament's via the STYLES_AFTER render hook).
   ========================================================================== */
.fi-body { font-family: var(--ksh-font) !important; }

.fi-main-ctn { background: var(--ksh-slate-bg); }

/* Sidebar */
.fi-sidebar {
    background: radial-gradient(120% 140% at 100% 0%, var(--ksh-navy-700) 0%, var(--ksh-navy-800) 45%, var(--ksh-navy-900) 100%) !important;
    border: none !important;
}
.fi-sidebar-header {
    background: transparent !important; box-shadow: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.fi-sidebar-header .fi-logo,
.fi-sidebar-header a { color: #fff !important; }
.fi-sidebar-nav-groups .fi-sidebar-group-label,
.fi-sidebar-nav-group-label { color: var(--ksh-blue-tint) !important; opacity: 0.85; font-weight: 800 !important; }
.fi-sidebar-item-button { border-radius: 0.85rem !important; }
.fi-sidebar-item-label { color: var(--ksh-blue-tint-soft) !important; font-weight: 700 !important; }
.fi-sidebar-item-icon { color: var(--ksh-blue-tint) !important; }
.fi-sidebar-item-button:hover { background: rgba(255,255,255,0.07) !important; }
.fi-sidebar-item-button:hover .fi-sidebar-item-label { color: #fff !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item-button.fi-active {
    background: linear-gradient(135deg, var(--ksh-blue-600), var(--ksh-blue-700)) !important;
    box-shadow: 0 12px 24px -8px rgba(var(--ksh-blue-rgb), 0.55);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: #fff !important; }
.fi-sidebar-item-icon {
    padding: 0.4rem; box-sizing: content-box; border-radius: 0.6rem;
    background: rgba(255,255,255,0.06);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-icon { background: rgba(255,255,255,0.18); }

/* Topbar */
.fi-topbar nav {
    background: #fff !important; border-bottom: 1px solid var(--ksh-border) !important; box-shadow: 0 1px 0 rgba(15,27,60,0.02) !important;
}

/* Stat / widget cards */
.fi-wi-stats-overview-stat {
    border-radius: var(--ksh-radius-lg) !important;
    box-shadow: var(--ksh-shadow-card) !important;
    border: 1px solid var(--ksh-border) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.fi-wi-stats-overview-stat:hover { transform: translateY(-2px); box-shadow: var(--ksh-shadow-lift) !important; }
.fi-wi-stats-overview-stat-value { color: var(--ksh-ink) !important; font-weight: 900 !important; }
.fi-wi-stats-overview-stat-icon {
    padding: 0.5rem; box-sizing: content-box; border-radius: 0.7rem;
    background: var(--ksh-blue-50); color: var(--ksh-blue-600) !important;
}

/* Sections / cards */
.fi-section {
    border-radius: var(--ksh-radius-lg) !important;
    box-shadow: var(--ksh-shadow-card) !important;
}
.fi-section-header-icon {
    padding: 0.5rem; box-sizing: content-box; border-radius: 0.7rem; background: var(--ksh-blue-50);
}

/* Buttons */
.fi-btn { border-radius: 0.75rem !important; font-weight: 800 !important; }
.fi-btn-color-primary { box-shadow: 0 10px 20px -8px rgba(var(--ksh-primary-rgb), 0.45); }

/* Badges */
.fi-badge { font-weight: 800 !important; border-radius: 9999px !important; }

/* Tables */
.fi-ta-content { border-radius: var(--ksh-radius-lg); overflow: hidden; }
.fi-ta-header-cell-label { text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.7rem !important; color: var(--ksh-ink-soft) !important; }
.fi-ta-row:hover { background: var(--ksh-blue-50) !important; }

/* Page header */
.fi-header-heading { color: var(--ksh-ink) !important; font-weight: 900 !important; }

/* ==========================================================================
   POS v3 additions — variants, per-line discount, split payment, refunds
   ========================================================================== */

/* Cart line: variant tag + per-line discount */
.ksh-cart-line__variant {
    display: block; font-size: 0.65rem; font-weight: 700; color: var(--ksh-purple);
    background: var(--ksh-purple-bg); border-radius: 0.4rem; padding: 0.1rem 0.4rem;
    margin-top: 0.2rem; width: fit-content;
}
.ksh-cart-line__discount-tag { color: var(--ksh-red); font-weight: 800; margin-inline-start: 0.3rem; }
.ksh-cart-line__discount-toggle {
    background: none; border: none; padding: 0; margin-top: 0.35rem; cursor: pointer;
    display: flex; align-items: center; gap: 0.25rem; color: var(--ksh-ink-soft);
    font-size: 0.65rem; font-weight: 700;
}
.ksh-cart-line__discount-toggle:hover { color: var(--ksh-blue-600); }
.ksh-cart-line__discount-toggle svg { width: 0.8rem; height: 0.8rem; }
.ksh-cart-line__discount-input { position: relative; margin-top: 0.4rem; max-width: 8rem; }
.ksh-cart-line__discount-input input {
    width: 100%; padding: 0.4rem 1.6rem 0.4rem 0.5rem; border-radius: 0.55rem;
    border: 1px solid var(--ksh-border); font-size: 0.72rem; font-weight: 700; font-family: var(--ksh-font);
}
.ksh-cart-line__discount-input span { position: absolute; left: 0.4rem; top: 50%; transform: translateY(-50%); font-size: 0.6rem; color: #94a3b8; }

/* Split payment lines */
.ksh-payment-lines { display: flex; flex-direction: column; gap: 0.45rem; }
.ksh-payment-line {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.7rem; border-radius: 0.85rem;
    background: var(--ksh-slate-bg); border: 1px solid var(--ksh-border);
}
.ksh-payment-line__method { font-size: 0.75rem; font-weight: 800; color: var(--ksh-ink); flex-shrink: 0; }
.ksh-payment-line__amount { position: relative; flex: 1; }
.ksh-payment-line__amount input {
    width: 100%; padding: 0.4rem 2.2rem 0.4rem 0.5rem; border-radius: 0.55rem;
    border: 1px solid var(--ksh-border); font-size: 0.75rem; font-weight: 800; font-family: var(--ksh-font);
    text-align: left; background: #fff;
}
.ksh-payment-line__amount span { position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 0.62rem; color: #94a3b8; }

.ksh-pos-due-tile--warn { background: #fff7ed; border-color: #fed7aa; }
.ksh-pos-due-tile--warn .ksh-pos-due-tile__label { color: #c2410c; }

/* Toggle group (cash movement type) */
.ksh-toggle-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.ksh-toggle-group__btn {
    padding: 0.6rem 0.3rem; border-radius: 0.7rem; border: 1px solid var(--ksh-border);
    background: #fff; font-size: 0.68rem; font-weight: 800; color: var(--ksh-ink-soft);
    cursor: pointer; transition: all 0.18s ease;
}
.ksh-toggle-group__btn.is-active { background: var(--ksh-blue-600); border-color: var(--ksh-blue-600); color: #fff; }

/* Variant picker options */
.ksh-variant-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ksh-variant-options__btn {
    padding: 0.5rem 1.1rem; border-radius: 0.7rem; border: 1.5px solid var(--ksh-border);
    background: #fff; font-weight: 800; font-size: 0.8rem; color: var(--ksh-ink);
    cursor: pointer; transition: all 0.18s ease; font-family: var(--ksh-font);
}
.ksh-variant-options__btn.is-active { background: var(--ksh-blue-600); border-color: var(--ksh-blue-600); color: #fff; }

/* Customer search + selection */
.ksh-selected-customer {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.85rem 1rem; border-radius: 0.9rem; margin-bottom: 0.5rem;
    background: var(--ksh-blue-50); border: 1px solid var(--ksh-blue-border-light);
}
.ksh-selected-customer strong { display: block; font-size: 0.85rem; color: var(--ksh-ink); }
.ksh-selected-customer small { color: var(--ksh-ink-soft); font-size: 0.72rem; }
.ksh-customer-results { display: flex; flex-direction: column; gap: 0.4rem; max-height: 12rem; overflow-y: auto; margin-bottom: 0.75rem; }
.ksh-customer-results__row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.6rem 0.85rem; border-radius: 0.7rem; border: 1px solid var(--ksh-border);
    background: var(--ksh-slate-bg); font-family: var(--ksh-font); font-weight: 700; font-size: 0.8rem;
    color: var(--ksh-ink); cursor: pointer; transition: all 0.15s ease;
}
.ksh-customer-results__row:hover { border-color: var(--ksh-blue-500); background: var(--ksh-blue-50); }
.ksh-customer-results__row small { color: #94a3b8; font-weight: 600; }
.ksh-customer-results__empty { font-size: 0.75rem; color: #94a3b8; padding: 0.5rem 0.1rem; margin-bottom: 0.5rem; }
.ksh-modal-divider {
    display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0 0.75rem;
    font-size: 0.68rem; font-weight: 800; color: #94a3b8;
}
.ksh-modal-divider::before, .ksh-modal-divider::after { content: ''; flex: 1; height: 1px; background: var(--ksh-border); }

/* Credit sale banner */
.ksh-credit-banner {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.85rem 1rem; border-radius: var(--ksh-radius-lg);
    background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
    font-size: 0.75rem; font-weight: 700; line-height: 1.6;
}

/* ---- Business Settings > "التكاملات" tab — ربط رقم واتساب خاص بالنشاط ---- */
.k-wa-integration { display: flex; flex-direction: column; gap: 1rem; max-width: 30rem; }
.k-wa-integration__intro p {
    font-size: 0.8rem; color: var(--ksh-ink-soft); line-height: 1.8; margin: 0;
}

.k-wa-status {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.85rem 1rem; border-radius: var(--ksh-radius-lg);
    border: 1px solid var(--ksh-border); background: var(--ksh-slate-bg);
}
.k-wa-status strong { display: block; font-size: 0.82rem; color: var(--ksh-ink); font-weight: 800; }
.k-wa-status span { font-size: 0.72rem; color: var(--ksh-ink-soft); }
.k-wa-status__dot {
    flex-shrink: 0; width: 0.6rem; height: 0.6rem; border-radius: 9999px;
    background: #94a3b8;
}
.k-wa-status--open { background: var(--ksh-green-bg); border-color: rgba(18, 183, 106, 0.25); }
.k-wa-status--open .k-wa-status__dot { background: var(--ksh-green); box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.15); }
.k-wa-status--connecting { background: #fffbeb; border-color: rgba(245, 158, 11, 0.3); }
.k-wa-status--connecting .k-wa-status__dot { background: var(--ksh-amber); animation: ksh-wa-pulse 1.4s ease-in-out infinite; }
.k-wa-status--off .k-wa-status__dot { background: #94a3b8; }
@keyframes ksh-wa-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.k-wa-connecting { display: flex; flex-direction: column; gap: 0.9rem; align-items: center; text-align: center; }
.k-wa-qr {
    background: #fff; padding: 0.75rem; border-radius: var(--ksh-radius-lg);
    border: 1px solid var(--ksh-border); box-shadow: var(--ksh-shadow-card);
}
.k-wa-qr img { display: block; width: 190px; height: 190px; }
.k-wa-steps {
    text-align: start; font-size: 0.75rem; color: var(--ksh-ink-soft); line-height: 2;
    padding-inline-start: 1.25rem; margin: 0;
}

.k-wa-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.k-wa-btn {
    display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
    padding: 0.65rem 1.2rem; border-radius: 9999px; border: none;
    background: linear-gradient(120deg, var(--ksh-primary), var(--ksh-primary-dark));
    color: #fff; font-weight: 800; font-size: 0.78rem; font-family: var(--ksh-font);
    transition: all 0.18s ease;
}
.k-wa-btn:hover { transform: translateY(-1px); box-shadow: var(--ksh-shadow-lift); }
.k-wa-btn--outline {
    background: #fff; color: var(--ksh-ink); border: 1px solid var(--ksh-border); box-shadow: none;
}
.k-wa-btn--outline:hover { border-color: var(--ksh-red); color: var(--ksh-red); transform: none; box-shadow: none; }

/* ---- Business Settings > "الهوية البصرية" — بطاقات اختيار نمط الألوان المُولَّدة ---- */
.k-palette-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.9rem; margin: 0.25rem 0 1.25rem; }
.k-palette-card {
    position: relative;
    display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem;
    padding: 0.85rem; border-radius: var(--ksh-radius-xl);
    background: #fff; border: 1.5px solid var(--ksh-border); cursor: pointer;
    font-family: var(--ksh-font); transition: all 0.2s var(--ksh-ease, ease);
    text-align: start;
}
.k-palette-card:hover { border-color: var(--ksh-blue-500); box-shadow: var(--ksh-shadow-lift); transform: translateY(-3px); }
.k-palette-card.is-selected { border-color: var(--ksh-blue-600); box-shadow: 0 0 0 3px var(--ksh-blue-50), var(--ksh-shadow-lift); }
.k-palette-card__check {
    position: absolute; top: 0.6rem; left: 0.6rem; z-index: 1;
    width: 1.5rem; height: 1.5rem; border-radius: 9999px;
    background: var(--ksh-blue-600); color: #fff; font-size: 0.75rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
}

/* معاينة مصغّرة حقيقية (قائمة جانبية + بطاقة + زر) جوه كل كارت نمط —
   الفرق بين الأنماط لازم يبان بالعين هنا نفسه، مش بس في اسم النمط. */
.k-palette-card__mock {
    display: flex; height: 4.5rem; border-radius: 0.7rem; overflow: hidden;
    border: 1px solid var(--ksh-border); box-shadow: inset 0 0 0 1px rgba(0,0,0,.02);
}
.k-palette-card__mock-sidebar {
    width: 34%; flex-shrink: 0; display: flex; flex-direction: column;
    justify-content: center; gap: 0.3rem; padding: 0 0.4rem;
}
.k-palette-card__mock-line { display: block; height: 0.3rem; border-radius: 9999px; background: rgba(255,255,255,.3); }
.k-palette-card__mock-line--active { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.15); }
.k-palette-card__mock-main { flex: 1; background: #f3f5fb; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.3rem; justify-content: center; }
.k-palette-card__mock-card { display: block; height: 1.1rem; border-radius: 0.35rem; background: #fff; border: 1px solid var(--ksh-border); }
.k-palette-card__mock-btn { display: block; height: 0.85rem; width: 70%; border-radius: 9999px; }

.k-palette-card__label { font-size: 0.8rem; font-weight: 800; color: var(--ksh-ink); }
.k-palette-card__swatches { display: flex; gap: 0.35rem; }
.k-palette-card__swatch {
    width: 1.3rem; height: 1.3rem; border-radius: 9999px; border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--ksh-border);
}

/* ---- معاينة حيّة أكبر (بتتحدّث مع أي تغيير في اللونين، مش بس عند اختيار نمط) ---- */
.k-brand-preview { margin: 0.5rem 0 1rem; }
.k-brand-preview__label { font-size: 0.75rem; font-weight: 800; color: var(--ksh-ink-soft); margin-bottom: 0.5rem; }
.k-brand-preview__frame {
    display: flex; border-radius: var(--ksh-radius-xl); overflow: hidden;
    box-shadow: var(--ksh-shadow-lift); border: 1px solid var(--ksh-border); height: 11rem;
}
.k-brand-preview__sidebar {
    width: 30%; flex-shrink: 0; padding: 1rem 0.85rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.k-brand-preview__brand { display: block; width: 60%; height: 0.6rem; border-radius: 9999px; background: rgba(255,255,255,.9); margin-bottom: 0.4rem; }
.k-brand-preview__nav-item { display: block; height: 0.55rem; border-radius: 9999px; background: rgba(255,255,255,.22); }
.k-brand-preview__nav-item--active { background: var(--ksh-blue-600); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.k-brand-preview__main { flex: 1; background: #f3f5fb; padding: 1rem; display: flex; flex-direction: column; gap: 0.65rem; }
.k-brand-preview__card {
    background: #fff; border: 1px solid var(--ksh-border); border-radius: 0.85rem;
    padding: 0.7rem 0.85rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.k-brand-preview__card-line { display: block; height: 0.45rem; border-radius: 9999px; background: #e2e8f0; }
.k-brand-preview__btn {
    align-self: flex-start; padding: 0.55rem 1.4rem; border: none; border-radius: 9999px;
    color: #fff; font-weight: 800; font-size: 0.8rem; font-family: var(--ksh-font); cursor: default;
    box-shadow: var(--ksh-shadow-lift);
}
.ksh-credit-banner svg { width: 1.3rem; height: 1.3rem; color: #ea580c; flex-shrink: 0; }

/* ==========================================================================
   مصفوفة الأدوار والصلاحيات (RolesMatrix) — بديل شاشة تعديل الصلاحيات
   لعضو واحد بس: كل الأدوار كأعمدة مقابل كل الصلاحيات كصفوف، بألوان الهوية
   المُختارة من صاحب النشاط نفسها (متغيرات ksh-blue و ksh-primary).
   ========================================================================== */
.k-matrix__intro p { font-size: 0.8rem; color: var(--ksh-ink-soft); line-height: 1.9; margin: 0 0 1.1rem; }

.k-matrix__scroll {
    overflow: auto; max-height: 75vh; border-radius: var(--ksh-radius-xl);
    border: 1px solid var(--ksh-border); box-shadow: var(--ksh-shadow-card); background: #fff;
}
.k-matrix__table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--ksh-font); }

.k-matrix__table thead th {
    position: sticky; top: 0; z-index: 3; background: #fff;
    padding: 1rem 1.1rem; border-bottom: 2px solid var(--ksh-border);
    text-align: center; white-space: nowrap;
}
.k-matrix__perm-col {
    position: sticky; right: 0; z-index: 2; background: #fff;
    text-align: start !important; min-width: 15rem; padding-inline-start: 1.1rem !important;
    font-size: 0.8rem; font-weight: 700; color: var(--ksh-ink);
    box-shadow: -1px 0 0 var(--ksh-border);
}
thead .k-matrix__perm-col { z-index: 4; }

.k-matrix__role-badge {
    display: inline-flex; padding: 0.4rem 1.1rem; border-radius: 9999px;
    font-size: 0.74rem; font-weight: 800; color: #fff; white-space: nowrap;
    background: linear-gradient(120deg, var(--ksh-blue-600), var(--ksh-primary));
    box-shadow: var(--ksh-shadow-card);
}

.k-matrix__group-row td {
    background: var(--ksh-blue-50); padding: 0.65rem 1.1rem;
    border-top: 1px solid var(--ksh-border); border-bottom: 1px solid var(--ksh-border);
    position: sticky; right: 0;
}
.k-matrix__group-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 800; color: var(--ksh-blue-700); }
.k-matrix__group-icon { width: 1.05rem; height: 1.05rem; }

.k-matrix__table tbody tr:not(.k-matrix__group-row) td { border-bottom: 1px solid var(--ksh-border); }
.k-matrix__table tbody tr:not(.k-matrix__group-row):hover td { background: #fafbff; }
.k-matrix__table td { padding: 0.6rem 1.1rem; font-size: 0.78rem; color: var(--ksh-ink); }
.k-matrix__cell { text-align: center; }

.k-matrix__check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 9999px; border: none;
    transition: all 0.15s ease;
}
.k-matrix__check-icon { width: 1.05rem; height: 1.05rem; }
.k-matrix__check.is-on { background: var(--ksh-green-bg); color: var(--ksh-green); }
.k-matrix__check.is-off { background: #f1f5f9; color: #94a3b8; }
.k-matrix__check--locked { background: var(--ksh-blue-50); color: var(--ksh-blue-600); cursor: default; }
button.k-matrix__check { cursor: pointer; }
button.k-matrix__check:hover { transform: scale(1.15); box-shadow: var(--ksh-shadow-card); }
button.k-matrix__check.is-on:hover { background: #fecaca; color: #dc2626; }
button.k-matrix__check.is-off:hover { background: var(--ksh-green-bg); color: var(--ksh-green); }

/* ---- شاشة صلاحيات العضو الفردي — بنفس لغة تصميم مصفوفة الأدوار
   (عناوين مجموعات مُلوَّنة بلون هوية النشاط) بدل تبويبات منفصلة ---- */
.k-perm-scroll { max-height: 65vh; overflow-y: auto; padding-inline-end: 0.25rem; }
.k-perm-group.fi-section { border-radius: var(--ksh-radius-lg) !important; overflow: hidden; margin-bottom: 0.85rem; border-color: var(--ksh-border) !important; }
.k-perm-group .fi-section-header { background: var(--ksh-blue-50) !important; }
.k-perm-group .fi-section-header-heading { color: var(--ksh-blue-700) !important; font-weight: 800 !important; }
.k-perm-group .fi-section-header-icon { color: var(--ksh-blue-600) !important; }

/* ---- معاينة حية لقالب الفاتورة (A4 + الإيصال الحراري) في تبويب "إعدادات
   الفواتير والطباعة" — كل قالب جوه iframe معزول تمامًا (srcdoc) عن تصميم
   لوحة التحكم، ومُصغَّر بـtransform:scale() عشان يبان كبطاقة معاينة. ---- */
.k-invoice-preview { margin: 0.75rem 0 0.5rem; }
.k-invoice-preview__label { font-size: 0.8rem; font-weight: 800; color: var(--ksh-ink-soft); margin-bottom: 0.6rem; }
.k-invoice-preview__row { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.k-invoice-preview__col-title { font-size: 0.72rem; font-weight: 700; color: var(--ksh-ink-soft); margin-bottom: 0.4rem; }
.k-invoice-preview__frame {
    border-radius: var(--ksh-radius-lg); overflow: hidden; border: 1px solid var(--ksh-border);
    background: #f9fafb; box-shadow: var(--ksh-shadow-card);
}
.k-invoice-preview__frame--a4 { width: 260px; height: 360px; }
.k-invoice-preview__frame--receipt { width: 210px; height: 360px; }
.k-invoice-preview__iframe { border: none; pointer-events: none; background: #fff; }
.k-invoice-preview__iframe--a4 { width: 850px; height: 1180px; transform: scale(0.306); transform-origin: top right; }
.k-invoice-preview__iframe--receipt { width: 332px; height: 1180px; transform: scale(0.633); transform-origin: top right; }

/* ---- سجل الأنشطة (الصندوق الأسود) — بطاقة نشاط بدل صف جدول تقني ---- */
.k-activity-intro {
    display: flex; align-items: center; gap: 0.75rem;
    background: linear-gradient(135deg, var(--ksh-slate-bg), #fff);
    border: 1px solid var(--ksh-border); border-radius: var(--ksh-radius-lg);
    padding: 0.9rem 1.1rem; margin-bottom: 1.25rem;
}
.k-activity-intro p { font-size: 0.82rem; color: var(--ksh-ink-soft); line-height: 1.8; margin: 0; }

.k-activity-item {
    display: flex; align-items: flex-start; gap: 0.85rem;
    padding: 0.95rem 1.1rem; border-radius: var(--ksh-radius-lg);
    background: #fff; border: 1px solid var(--ksh-border);
    margin-bottom: 0.65rem; transition: all 0.18s ease;
    border-inline-start: 4px solid var(--ksh-border);
}
.k-activity-item:hover { box-shadow: var(--ksh-shadow-card); transform: translateY(-1px); }
.k-activity-item__icon {
    width: 2.5rem; height: 2.5rem; border-radius: 9999px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.k-activity-item__icon-svg { width: 1.25rem; height: 1.25rem; }
.k-activity-item__body { min-width: 0; flex: 1; }
.k-activity-item__sentence { margin: 0 0 0.25rem; font-weight: 700; font-size: 0.9rem; color: var(--ksh-ink); line-height: 1.7; }
.k-activity-item__time { font-size: 0.72rem; font-weight: 600; color: var(--ksh-ink-soft); }

.k-activity-item--danger { border-inline-start-color: var(--ksh-red); }
.k-activity-item--danger .k-activity-item__icon { background: #fee2e2; color: #b91c1c; }
.k-activity-item--warning { border-inline-start-color: var(--ksh-amber); }
.k-activity-item--warning .k-activity-item__icon { background: #fef3c7; color: #92400e; }
.k-activity-item--success { border-inline-start-color: var(--ksh-green); }
.k-activity-item--success .k-activity-item__icon { background: var(--ksh-green-bg); color: #067a45; }
.k-activity-item--info { border-inline-start-color: var(--ksh-blue-600); }
.k-activity-item--info .k-activity-item__icon { background: var(--ksh-blue-50); color: var(--ksh-blue-600); }
.k-activity-item--gray { border-inline-start-color: #cbd5e1; }
.k-activity-item--gray .k-activity-item__icon { background: #f1f5f9; color: #64748b; }

/* ---- مركز النسخ الاحتياطية ---- */
.k-backup-intro {
    display: flex; align-items: flex-start; gap: 0.9rem;
    background: linear-gradient(135deg, var(--ksh-navy-900), var(--ksh-navy-800));
    border-radius: var(--ksh-radius-lg); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem;
    box-shadow: var(--ksh-shadow-card);
}
.k-backup-intro__icon {
    width: 2.75rem; height: 2.75rem; border-radius: 9999px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.1);
}
.k-backup-intro__icon-svg { width: 1.4rem; height: 1.4rem; color: #fff; }
.k-backup-intro__title { margin: 0 0 0.3rem; font-weight: 800; font-size: 0.9rem; color: #fff; }
.k-backup-intro__desc { margin: 0; font-size: 0.78rem; color: rgba(255,255,255,0.75); line-height: 1.8; }
.k-backup-intro__desc strong { color: #fff; }

/* ---- نوافذ تأكيد الإجراءات ذات السبب الإلزامي (إلغاء/حذف/...) ---- */
.k-reasoned-modal.fi-modal-window { border-radius: var(--ksh-radius-xl) !important; overflow: hidden; }
.k-reasoned-modal .fi-modal-icon { box-shadow: var(--ksh-shadow-card); }

/* ==========================================================================
   NEXT-GEN LUXURY SELECTION & BULK ACTIONS TOOLBAR & MODALS & NOTIFICATIONS
   ========================================================================== */

/* 1. Floating & Glassmorphic Bulk Selection Bar in Tables */
.fi-ta-selection-indicator,
div[class*="selection-indicator"],
.fi-ta-header-toolbar div:has(.fi-ta-bulk-actions) {
    background: linear-gradient(135deg, rgba(10, 23, 48, 0.95) 0%, rgba(22, 41, 95, 0.95) 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(127, 166, 255, 0.25) !important;
    box-shadow: 0 12px 32px -8px rgba(10, 23, 48, 0.35), 0 0 20px rgba(47, 111, 237, 0.15) !important;
    border-radius: 1.25rem !important;
    padding: 0.85rem 1.4rem !important;
    color: #ffffff !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fi-ta-selection-indicator .fi-ta-selection-indicator-label,
.fi-ta-selection-indicator span {
    font-weight: 800 !important;
    font-size: 0.92rem !important;
    letter-spacing: -0.01em !important;
    color: #ffffff !important;
}

/* Select All Checkbox Styling */
.fi-ta-header-cell input[type="checkbox"],
.fi-ta-record-checkbox input[type="checkbox"],
.fi-ta-table input[type="checkbox"] {
    width: 1.25rem !important;
    height: 1.25rem !important;
    border-radius: 0.375rem !important;
    border: 2px solid var(--ksh-blue-500, #3b82f6) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.fi-ta-header-cell input[type="checkbox"]:checked,
.fi-ta-record-checkbox input[type="checkbox"]:checked,
.fi-ta-table input[type="checkbox"]:checked {
    background-color: var(--ksh-blue-600, #2f6fed) !important;
    border-color: var(--ksh-blue-600, #2f6fed) !important;
    box-shadow: 0 0 10px rgba(47, 111, 237, 0.4) !important;
}

/* Bulk Action Dropdown & Buttons */
.fi-ta-bulk-actions .fi-btn,
.fi-ta-bulk-action-button {
    border-radius: 0.875rem !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    padding: 0.6rem 1.1rem !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.fi-ta-bulk-actions .fi-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

/* 2. Luxury Glassmorphic Modal Windows (Confirmation & Warning Popups) */
.fi-modal-window,
.k-reasoned-modal.fi-modal-window,
.ksh-luxury-modal {
    border-radius: 1.75rem !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 25px 60px -15px rgba(15, 27, 60, 0.25), 0 0 30px rgba(16, 185, 129, 0.08) !important;
    overflow: hidden !important;
}

.dark .fi-modal-window,
.dark .k-reasoned-modal.fi-modal-window {
    background: rgba(15, 23, 42, 0.96) !important;
    border-color: rgba(51, 65, 85, 0.8) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6) !important;
}

.fi-modal-header {
    padding: 1.75rem 1.75rem 1.25rem !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
}

.dark .fi-modal-header {
    border-bottom-color: rgba(51, 65, 85, 0.6) !important;
}

.fi-modal-heading {
    font-weight: 800 !important;
    font-size: 1.25rem !important;
    letter-spacing: -0.01em !important;
    color: var(--ksh-ink, #0f1b3c) !important;
}

.dark .fi-modal-heading {
    color: #ffffff !important;
}

.fi-modal-description {
    font-size: 0.92rem !important;
    line-height: 1.7 !important;
    color: var(--ksh-ink-soft, #5b6a8f) !important;
    margin-top: 0.5rem !important;
}

.dark .fi-modal-description {
    color: #94a3b8 !important;
}

.fi-modal-icon {
    width: 3.5rem !important;
    height: 3.5rem !important;
    border-radius: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1) !important;
}

.fi-modal-footer {
    padding: 1.25rem 1.75rem 1.75rem !important;
    background: rgba(248, 250, 252, 0.7) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.6) !important;
}

.dark .fi-modal-footer {
    background: rgba(30, 41, 59, 0.7) !important;
    border-top-color: rgba(51, 65, 85, 0.6) !important;
}

/* 3. Luxury Notifications & Floating Toast Alerts */
.fi-no-notification {
    border-radius: 1.25rem !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 20px 40px -10px rgba(15, 27, 60, 0.18), 0 0 15px rgba(0, 0, 0, 0.05) !important;
    padding: 1.1rem 1.4rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fi-no-notification-title {
    font-weight: 800 !important;
    font-size: 0.95rem !important;
}

.fi-no-notification-body {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    margin-top: 0.25rem !important;
}

/* 4. Luxury Auth & Login Experience (Desktop & Mobile) */
.fi-simple-layout {
    background: radial-gradient(120% 120% at 50% 10%, #f8fafc 0%, #edf2f7 50%, #e2e8f0 100%) !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dark .fi-simple-layout {
    background: radial-gradient(120% 120% at 50% 10%, #0f172a 0%, #090e1a 50%, #020617 100%) !important;
}

.fi-simple-main {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
    padding: 2.25rem !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.dark .fi-simple-main {
    background: rgba(15, 23, 42, 0.88) !important;
    border: 1px solid rgba(51, 65, 85, 0.7) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

.fi-simple-header a:has(.fi-logo),
.fi-simple-header .fi-logo-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.fi-simple-header img.fi-logo {
    margin-inline: auto !important;
    margin-bottom: 0.75rem !important;
    max-height: 2.75rem !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.03)) !important;
    transition: transform 0.3s ease !important;
}

.fi-simple-header img.fi-logo.hidden,
.fi-simple-header .hidden.fi-logo,
.fi-simple-header .dark\:hidden.dark,
.fi-simple-header .hidden:not(.dark) {
    display: none !important;
}

.fi-simple-header img.fi-logo:hover {
    transform: scale(1.03) !important;
}

.fi-simple-header .fi-simple-header-heading {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #0f172a !important;
}

.dark .fi-simple-header .fi-simple-header-heading {
    color: #f8fafc !important;
}

.fi-simple-main .fi-btn-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.4) !important;
    border-radius: 0.875rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fi-simple-main .fi-btn-primary:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: 0 14px 24px -4px rgba(16, 185, 129, 0.5) !important;
    transform: translateY(-1px) !important;
}

.fi-simple-main .fi-btn-primary:active {
    transform: translateY(0) !important;
}

.fi-simple-main .fi-input-wrp {
    border-radius: 0.75rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.fi-simple-main .fi-input-wrp:focus-within {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important;
}