/* ============================================================
   PosDevice — تحسينات متجاوبة حسب نوع الجهاز
   data-device = mobile | tablet | desktop
   ============================================================ */

/* ============ أساس عام ============ */
html[data-device] { -webkit-tap-highlight-color: transparent; }

/* عناصر أكبر للمس */
html[data-device='mobile'] body,
html[data-device='tablet'] body {
    --tap-size: 12px;
}

/* ============ تليفون (mobile) ============ */
/* شاشة الدخول: بطاقة واحدة (الشعار مدمج + النموذج) — إخفاء البطاقة الترويجية الثقيلة */
html[data-device='mobile'] .login-screen,
html[data-device='mobile'] .relative.z-10 {
    padding-left: 14px !important;
    padding-right: 14px !important;
    align-items: flex-start;
}

html[data-device='mobile'] .brand-card {
    display: none !important;
}

html[data-device='mobile'] .w-full.max-w-5xl {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
}

/* على الموبايل: نموذج الدخول يأتي أولاً مهما كان ترتيب DOM */
html[data-device='mobile'] .w-full.max-w-5xl .login-card {
    order: -1;
}

html[data-device='mobile'] .w-full.max-w-5xl .brand-card {
    order: 2;
}

/* على الموبايل: المحتوى يبدأ من الأعلى لضمان ظهور النموذج دون تمرير طويل */
html[data-device='mobile'] .relative.z-10 {
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* حقل كلمة السر: إظهاره مع حقول الاسم في نفس مستوى الارتفاع */
html[data-device='mobile'] .login-card {
    justify-content: flex-start !important;
}

/* بطاقة الدخول على الموبايل: بدون حشوة كبيرة */
html[data-device='mobile'] .login-card {
    border-radius: 20px !important;
    padding: 1.25rem !important;
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
}

/* أداء الموبايل: تعطيل التأثيرات الثقيلة */
html[data-device='mobile'] .login-card,
html[data-device='mobile'] .brand-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-device='mobile'] .floating-orb,
html[data-device='mobile'] .login-bg::after {
    display: none !important;
}

html[data-device='mobile'] .login-bg::before {
    background-image: none !important;
}

html[data-device='mobile'] .login-bg {
    background: linear-gradient(160deg, #07111f 0%, #0a1a33 50%, #0d2350 100%) !important;
}

html[data-device='mobile'] .fade-up,
html[data-device='mobile'] .fade-up-delay-1,
html[data-device='mobile'] .fade-up-delay-2,
html[data-device='mobile'] .fade-up-delay-3 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* الحشو العام للوحة الإدارة */
html[data-device='mobile'] main.flex-1.mr-64 {
    padding: 12px !important;
}

html[data-device='mobile'] .fi-sidebar {
    width: 260px !important;
}

/* بطاقات Filament على الموبايل */
html[data-device='mobile'] .fi-section,
html[data-device='mobile'] .fi-wi,
html[data-device='mobile'] .fi-card {
    border-radius: 14px;
}

/* ============ تابلت (tablet) ============ */
html[data-device='tablet'] .login-card,
html[data-device='tablet'] .brand-card {
    border-radius: 22px;
}

html[data-device='tablet'] main.flex-1.mr-64 {
    padding: 18px !important;
}

html[data-device='tablet'] .login-input {
    font-size: 16px;
}

/* ============ القائمة الجانبية: drawer على الأجهزة الصغيرة ============ */
html[data-device='mobile'] .admin-sidebar,
html[data-device='tablet'] .admin-sidebar {
    width: 260px !important;
    transform: translateX(100%);
    transition: transform .28s ease;
    box-shadow: -12px 0 40px rgba(0,0,0,0.25);
}

html[data-device='mobile'] body.sidebar-open .admin-sidebar,
html[data-device='tablet'] body.sidebar-open .admin-sidebar {
    transform: translateX(0);
}

html[data-device='mobile'] main.flex-1.mr-64,
html[data-device='tablet'] main.flex-1.mr-64 {
    margin-inline-end: 0 !important;
    margin-right: 0 !important;
    width: 100%;
}
html[data-device='desktop'] main.flex-1.mr-64 {
    margin-right: 16rem !important;
}

/* صفحة نقطة البيع: ملء الشاشة ولفّ الشبكة */
html[data-device='mobile'] main.flex-1.mr-64.h-screen,
html[data-device='tablet'] main.flex-1.mr-64.h-screen {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
}

html[data-device='mobile'] .pos-mobile-hamburger,
html[data-device='tablet'] .pos-mobile-hamburger {
    display: inline-flex !important;
}

html[data-device='mobile'] .admin-sidebar::before,
html[data-device='tablet'] .admin-sidebar::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: -1;
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
}

html[data-device='mobile'] body.sidebar-open .admin-sidebar::before,
html[data-device='tablet'] body.sidebar-open .admin-sidebar::before {
    opacity: 1;
    pointer-events: auto;
}

html[data-device='mobile'] .pos-topbar-actions,
html[data-device='tablet'] .pos-topbar-actions {
    display: flex !important;
    align-items: center;
}

/* ============ كل الأجهزة اللمسية ============ */
html[data-device='mobile'] button,
html[data-device='tablet'] button,
html[data-device='mobile'] a.fi-link,
html[data-device='tablet'] a.fi-link,
html[data-device='mobile'] input,
html[data-device='tablet'] input,
html[data-device='mobile'] select,
html[data-device='tablet'] select {
    min-height: 40px;
}

/* ============ جداول Filament على الموبايل: تبويب أفقي بدل تكسير ============ */
html[data-device='mobile'] .fi-ta-content,
html[data-device='mobile'] table.filament-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
html[data-device='mobile'] table.filament-table {
    white-space: nowrap;
}

/* صندوق الأدوات (أزرار الإجراءات) على الموبايل: يبقى مرئياً وقابلاً للتمرير */
html[data-device='mobile'] .fi-ta-actions,
html[data-device='mobile'] .fi-ac-actions,
html[data-device='mobile'] .fi-ta-header {
    flex-wrap: wrap;
    gap: 8px;
}

/* منع اقتراب زراير المزامنة/الخروج من الحافة */
html[data-device='mobile'] .pos-toolbar,
html[data-device='mobile'] .fi-topbar {
    padding-inline: 8px;
}

/* النوافذ المنبثقة على الموبايل: تملأ الشاشة */
html[data-device='mobile'] .fi-modal-window,
html[data-device='mobile'] [role='dialog'] > div {
    max-width: 100% !important;
    margin: 8px !important;
    border-radius: 16px !important;
}

/* ============ تجربة أفضل للأزرار الصغيرة في الشبكات ============ */
html[data-device='mobile'] .fi-icon-btn,
html[data-device='tablet'] .fi-icon-btn {
    width: 40px;
    height: 40px;
}

/* إخفاء عناصر لا فائدة منها على الموبايل لتقليل الفوضى */
@media (max-width: 480px) {
    html[data-device='mobile'] .hidden-sm {
        display: none !important;
    }
}

/* ============ نقطة البيع: لوحة المنتجات تملأ العرض وباتجاه RTL ============ */
.pos-pane {
    margin-right: 0 !important;
    margin-inline-end: 0 !important;
    width: 100%;
}
.pos-products-grid {
    direction: rtl !important;
}