/*
 * WeloPOS Custom Theme
 * هوية جديدة عصرية لنظام نقاط البيع
 * تحسينات الأداء والمظهر
 */

/* ============================================
   CSS Variables - متغيرات الألوان الأساسية
   ============================================ */
:root {
  /* الألوان الأساسية - هوية جديدة */
  --welo-primary: #6366f1;
  --welo-primary-dark: #4f46e5;
  --welo-primary-light: #818cf8;
  
  /* ألوان ثانوية */
  --welo-secondary: #0ea5e9;
  --welo-accent: #f59e0b;
  
  /* ألوان الحالات */
  --welo-success: #10b981;
  --welo-success-light: #34d399;
  --welo-warning: #f59e0b;
  --welo-warning-light: #fbbf24;
  --welo-danger: #ef4444;
  --welo-danger-light: #f87171;
  --welo-info: #06b6d4;
  
  /* الخلفيات */
  --welo-bg-main: #f1f5f9;
  --welo-bg-card: #ffffff;
  --welo-bg-sidebar: linear-gradient(180deg, #1e1b4b 0%, #312e81 100%);
  --welo-bg-header: #ffffff;
  
  /* النصوص */
  --welo-text-primary: #1e293b;
  --welo-text-secondary: #64748b;
  --welo-text-light: #94a3b8;
  --welo-text-white: #ffffff;
  
  /* الحدود */
  --welo-border-color: #e2e8f0;
  --welo-border-radius: 12px;
  --welo-border-radius-lg: 16px;
  --welo-border-radius-xl: 24px;
  
  /* الظلال */
  --welo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --welo-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --welo-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --welo-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* الانتقالات */
  --welo-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --welo-transition-fast: all 0.15s ease;
}

/* ============================================
   تحسينات الأداء - GPU Acceleration
   ============================================ */
.main-sidebar,
.main-header,
.content-wrapper,
.box,
.btn,
.product-card,
.pos-product-list .product-box {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* تقليل إعادة الرسم */
* {
  box-sizing: border-box;
}

/* ============================================
   الخلفية الرئيسية
   ============================================ */
body {
  background: var(--welo-bg-main) !important;
  color: var(--welo-text-primary);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.content-wrapper {
  background: var(--welo-bg-main) !important;
}

/* ============================================
   Sidebar - الشريط الجانبي
   ============================================ */
.main-sidebar {
  background: var(--welo-bg-sidebar) !important;
  box-shadow: var(--welo-shadow-xl) !important;
  border-right: none !important;
}

.skin-blue .main-sidebar,
.skin-purple .main-sidebar,
.skin-green .main-sidebar,
.skin-red .main-sidebar,
.skin-primary .main-sidebar {
  background: var(--welo-bg-sidebar) !important;
}

/* Logo */
.main-sidebar .logo,
.main-header .logo {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.main-header .logo span,
.main-sidebar .logo {
  color: var(--welo-text-white) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  letter-spacing: -0.5px;
}

/* قائمة Sidebar */
.sidebar-menu > li > a {
  color: rgba(255, 255, 255, 0.8) !important;
  border-radius: var(--welo-border-radius) !important;
  margin: 4px 12px !important;
  padding: 12px 16px !important;
  transition: var(--welo-transition) !important;
  font-weight: 500 !important;
}

.sidebar-menu > li > a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--welo-text-white) !important;
  transform: translateX(4px);
}

.sidebar-menu > li.active > a {
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--welo-text-white) !important;
  border-left: 3px solid var(--welo-primary-light) !important;
  font-weight: 600 !important;
}

.sidebar-menu li.header {
  color: rgba(255, 255, 255, 0.5) !important;
  background: transparent !important;
  text-transform: uppercase;
  font-size: 11px !important;
  letter-spacing: 1px;
  padding: 20px 24px 8px !important;
}

/* Treeview */
.treeview-menu {
  background: rgba(0, 0, 0, 0.1) !important;
  border-radius: 0 0 var(--welo-border-radius) var(--welo-border-radius) !important;
  margin: 0 12px !important;
  padding: 8px 0 !important;
}

.treeview-menu > li > a {
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 10px 16px 10px 32px !important;
  transition: var(--welo-transition-fast) !important;
}

.treeview-menu > li > a:hover,
.treeview-menu > li.active > a {
  color: var(--welo-text-white) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ============================================
   Header - الشريط العلوي
   ============================================ */
.main-header {
  background: var(--welo-bg-header) !important;
  box-shadow: var(--welo-shadow) !important;
  border: none !important;
}

.main-header .navbar {
  background: var(--welo-bg-header) !important;
  border: none !important;
}

.skin-blue .main-header .navbar,
.skin-purple .main-header .navbar,
.skin-green .main-header .navbar {
  background: var(--welo-bg-header) !important;
}

.main-header .navbar .nav > li > a {
  color: var(--welo-text-secondary) !important;
  transition: var(--welo-transition-fast) !important;
}

.main-header .navbar .nav > li > a:hover {
  background: var(--welo-bg-main) !important;
  color: var(--welo-primary) !important;
  border-radius: var(--welo-border-radius) !important;
}

.main-header .sidebar-toggle {
  color: var(--welo-text-secondary) !important;
}

.main-header .sidebar-toggle:hover {
  background: var(--welo-bg-main) !important;
  color: var(--welo-primary) !important;
}

/* ============================================
   Buttons - الأزرار
   ============================================ */
.btn {
  border-radius: var(--welo-border-radius) !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  transition: var(--welo-transition) !important;
  border: none !important;
  box-shadow: var(--welo-shadow-sm) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--welo-shadow) !important;
}

.btn:active {
  transform: translateY(0) !important;
}

/* Primary Button */
.btn-primary {
  background: linear-gradient(135deg, var(--welo-primary) 0%, var(--welo-primary-dark) 100%) !important;
  color: var(--welo-text-white) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, var(--welo-primary-dark) 0%, #4338ca 100%) !important;
  color: var(--welo-text-white) !important;
}

/* Success Button */
.btn-success {
  background: linear-gradient(135deg, var(--welo-success) 0%, #059669 100%) !important;
  color: var(--welo-text-white) !important;
}

.btn-success:hover,
.btn-success:focus {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

/* Danger Button */
.btn-danger {
  background: linear-gradient(135deg, var(--welo-danger) 0%, #dc2626 100%) !important;
  color: var(--welo-text-white) !important;
}

.btn-danger:hover,
.btn-danger:focus {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
}

/* Warning Button */
.btn-warning {
  background: linear-gradient(135deg, var(--welo-warning) 0%, #d97706 100%) !important;
  color: var(--welo-text-white) !important;
}

.btn-warning:hover,
.btn-warning:focus {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
}

/* Info Button */
.btn-info {
  background: linear-gradient(135deg, var(--welo-info) 0%, #0891b2 100%) !important;
  color: var(--welo-text-white) !important;
}

.btn-info:hover,
.btn-info:focus {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
}

/* Default Button */
.btn-default {
  background: var(--welo-bg-card) !important;
  color: var(--welo-text-primary) !important;
  border: 1px solid var(--welo-border-color) !important;
}

.btn-default:hover {
  background: var(--welo-bg-main) !important;
  border-color: var(--welo-primary) !important;
  color: var(--welo-primary) !important;
}

/* أزرار صغيرة */
.btn-xs, .btn-sm {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

/* أزرار كبيرة */
.btn-lg {
  padding: 14px 28px !important;
  font-size: 16px !important;
  border-radius: var(--welo-border-radius-lg) !important;
}

/* ============================================
   Cards & Boxes - البطاقات والصناديق
   ============================================ */
.box {
  background: var(--welo-bg-card) !important;
  border: none !important;
  border-radius: var(--welo-border-radius-lg) !important;
  box-shadow: var(--welo-shadow) !important;
  overflow: visible;
  transition: var(--welo-transition) !important;
}

.box:hover {
  box-shadow: var(--welo-shadow-lg) !important;
}

.box-header {
  background: transparent !important;
  border-bottom: 1px solid var(--welo-border-color) !important;
  padding: 20px 24px !important;
}

.box-header .box-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--welo-text-primary) !important;
}

.box-body {
  padding: 24px !important;
}

.box-footer {
  background: var(--welo-bg-main) !important;
  border-top: 1px solid var(--welo-border-color) !important;
  padding: 16px 24px !important;
}

/* Info Boxes */
.info-box {
  background: var(--welo-bg-card) !important;
  border-radius: var(--welo-border-radius-lg) !important;
  box-shadow: var(--welo-shadow) !important;
  border: none !important;
  transition: var(--welo-transition) !important;
}

.info-box:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--welo-shadow-xl) !important;
}

.info-box-icon {
  border-radius: var(--welo-border-radius-lg) !important;
  background: linear-gradient(135deg, var(--welo-primary) 0%, var(--welo-primary-dark) 100%) !important;
}

.info-box-new-style {
  border-radius: var(--welo-border-radius-lg) !important;
}

.info-box-new-style .info-box-icon {
  background: linear-gradient(135deg, var(--welo-primary-light) 0%, var(--welo-primary) 100%) !important;
  border-radius: 50% !important;
}

/* ============================================
   Forms - النماذج
   ============================================ */
.form-control {
  border: 2px solid var(--welo-border-color) !important;
  border-radius: var(--welo-border-radius) !important;
  padding: 10px 16px !important;
  height: auto !important;
  min-height: 44px !important;
  transition: var(--welo-transition-fast) !important;
  font-size: 14px !important;
  background: var(--welo-bg-card) !important;
}

.form-control:focus {
  border-color: var(--welo-primary) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: var(--welo-text-light) !important;
}

/* Select2 */
.select2-container--default .select2-selection--single {
  border: 2px solid var(--welo-border-color) !important;
  border-radius: var(--welo-border-radius) !important;
  height: 44px !important;
  padding: 6px 12px !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--welo-primary) !important;
}

.select2-dropdown {
  border: 2px solid var(--welo-border-color) !important;
  border-radius: var(--welo-border-radius) !important;
  box-shadow: var(--welo-shadow-lg) !important;
  background-color: #ffffff !important;
}

/* Ensure dropdown text is always readable (dark on light background) */
select.form-control,
select.form-control option,
select.form-control optgroup,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-dropdown .select2-results__option {
  color: #1e293b !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--welo-primary) !important;
  color: #ffffff !important;
}

/* Labels */
label {
  font-weight: 600 !important;
  color: var(--welo-text-primary) !important;
  margin-bottom: 8px !important;
}

/* ============================================
   Tables - الجداول
   ============================================ */
.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table > thead > tr > th {
  background: var(--welo-bg-main) !important;
  color: var(--welo-text-secondary) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  padding: 16px !important;
  border: none !important;
}

.table > tbody > tr > td {
  padding: 16px !important;
  vertical-align: middle !important;
  border-top: 1px solid var(--welo-border-color) !important;
}

.table > tbody > tr:hover {
  background: rgba(99, 102, 241, 0.04) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(0, 0, 0, 0.02) !important;
}

/* DataTables */
.dataTables_wrapper {
  padding: 0 !important;
}

.dataTables_filter input {
  border: 2px solid var(--welo-border-color) !important;
  border-radius: var(--welo-border-radius) !important;
  padding: 8px 16px !important;
}

.dataTables_length select {
  border: 2px solid var(--welo-border-color) !important;
  border-radius: var(--welo-border-radius) !important;
  padding: 6px 12px !important;
}

.paginate_button {
  border-radius: var(--welo-border-radius) !important;
  margin: 0 2px !important;
}

.paginate_button.current {
  background: var(--welo-primary) !important;
  color: var(--welo-text-white) !important;
  border: none !important;
}

/* ============================================
   POS - نقطة البيع
   ============================================ */
/* حاوية POS الرئيسية */
.pos-content {
  background: var(--welo-bg-main) !important;
}

/* بطاقات المنتجات */
.pos-product-list .product-box,
.product_box,
.product-card {
  background: var(--welo-bg-card) !important;
  border: 2px solid var(--welo-border-color) !important;
  border-radius: var(--welo-border-radius-lg) !important;
  padding: 12px !important;
  transition: var(--welo-transition) !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

.pos-product-list .product-box:hover,
.product_box:hover,
.product-card:hover {
  border-color: var(--welo-primary) !important;
  transform: scale(1.03) !important;
  box-shadow: var(--welo-shadow-lg) !important;
}

.pos-product-list .product-box:active,
.product_box:active {
  transform: scale(0.98) !important;
}

/* صورة المنتج */
.pos-product-list .product-box img,
.product_box img {
  border-radius: var(--welo-border-radius) !important;
  object-fit: cover !important;
}

/* اسم المنتج */
.pos-product-list .product-box .product-name,
.product_box .product-name {
  font-weight: 600 !important;
  color: var(--welo-text-primary) !important;
  font-size: 13px !important;
  margin-top: 8px !important;
}

/* سعر المنتج */
.pos-product-list .product-box .product-price,
.product_box .product-price {
  color: var(--welo-primary) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* قائمة السلة */
.pos-cart,
.cart-table {
  background: var(--welo-bg-card) !important;
  border-radius: var(--welo-border-radius-lg) !important;
}

.pos-cart-item,
.cart-row {
  background: var(--welo-bg-main) !important;
  border-radius: var(--welo-border-radius) !important;
  margin-bottom: 8px !important;
  padding: 12px !important;
  transition: var(--welo-transition-fast) !important;
}

.pos-cart-item:hover,
.cart-row:hover {
  background: rgba(99, 102, 241, 0.08) !important;
}

/* قسم المجموع */
.pos-totals,
.total-section {
  background: linear-gradient(135deg, var(--welo-primary) 0%, var(--welo-primary-dark) 100%) !important;
  color: var(--welo-text-white) !important;
  border-radius: var(--welo-border-radius-xl) !important;
  padding: 24px !important;
  margin-top: 16px !important;
}

.pos-totals .total-label {
  opacity: 0.9;
}

.pos-totals .total-amount {
  font-size: 28px !important;
  font-weight: 700 !important;
}

/* أزرار POS */
.pos-actions .btn,
.pos-form-actions .btn {
  min-height: 56px !important;
  font-size: 15px !important;
  border-radius: var(--welo-border-radius-lg) !important;
  margin: 4px !important;
}

/* زر الدفع */
.btn-pay,
.pos-actions .btn-success {
  background: linear-gradient(135deg, var(--welo-success) 0%, #059669 100%) !important;
  font-size: 18px !important;
  min-height: 64px !important;
}

/* زر التعليق */
.btn-suspend,
.pos-actions .btn-warning {
  background: linear-gradient(135deg, var(--welo-warning) 0%, #d97706 100%) !important;
}

/* زر الإلغاء */
.btn-cancel,
.pos-actions .btn-danger {
  background: linear-gradient(135deg, var(--welo-danger) 0%, #dc2626 100%) !important;
}

/* بحث المنتجات */
#search_product,
.pos-search-input {
  border-radius: var(--welo-border-radius-lg) !important;
  padding: 16px 20px !important;
  font-size: 16px !important;
  border: 2px solid var(--welo-border-color) !important;
  background: var(--welo-bg-card) !important;
}

#search_product:focus,
.pos-search-input:focus {
  border-color: var(--welo-primary) !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important;
}

/* اختيار الفئات */
.pos-category-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 12px 0 !important;
}

.pos-category-item,
.category-item {
  background: var(--welo-bg-card) !important;
  border: 2px solid var(--welo-border-color) !important;
  border-radius: var(--welo-border-radius) !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
  transition: var(--welo-transition-fast) !important;
  font-weight: 500 !important;
}

.pos-category-item:hover,
.category-item:hover {
  border-color: var(--welo-primary) !important;
  color: var(--welo-primary) !important;
}

.pos-category-item.active,
.category-item.active {
  background: var(--welo-primary) !important;
  color: var(--welo-text-white) !important;
  border-color: var(--welo-primary) !important;
}

/* ============================================
   Modals - النوافذ المنبثقة
   ============================================ */
.modal-content {
  border: none !important;
  border-radius: var(--welo-border-radius-xl) !important;
  box-shadow: var(--welo-shadow-xl) !important;
  overflow: hidden !important;
}

.modal-header {
  background: var(--welo-bg-card) !important;
  border-bottom: 1px solid var(--welo-border-color) !important;
  padding: 20px 24px !important;
}

.modal-title {
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--welo-text-primary) !important;
}

.modal-body {
  padding: 24px !important;
}

.modal-footer {
  background: var(--welo-bg-main) !important;
  border-top: 1px solid var(--welo-border-color) !important;
  padding: 16px 24px !important;
}

/* ============================================
   Alerts & Labels - التنبيهات والتصنيفات
   ============================================ */
.alert {
  border: none !important;
  border-radius: var(--welo-border-radius) !important;
  padding: 16px 20px !important;
}

.alert-success {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #065f46 !important;
  border-left: 4px solid var(--welo-success) !important;
}

.alert-danger, .alert-error {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #991b1b !important;
  border-left: 4px solid var(--welo-danger) !important;
}

.alert-warning {
  background: rgba(245, 158, 11, 0.1) !important;
  color: #92400e !important;
  border-left: 4px solid var(--welo-warning) !important;
}

.alert-info {
  background: rgba(6, 182, 212, 0.1) !important;
  color: #0e7490 !important;
  border-left: 4px solid var(--welo-info) !important;
}

/* Labels */
.label {
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

.label-primary {
  background: var(--welo-primary) !important;
}

.label-success {
  background: var(--welo-success) !important;
}

.label-danger {
  background: var(--welo-danger) !important;
}

.label-warning {
  background: var(--welo-warning) !important;
  color: #fff !important;
}

.label-info {
  background: var(--welo-info) !important;
}

/* ============================================
   Badges - الشارات
   ============================================ */
.badge {
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-weight: 600 !important;
}

/* ============================================
   Dropdowns - القوائم المنسدلة
   ============================================ */
.dropdown-menu {
  border: none !important;
  border-radius: var(--welo-border-radius) !important;
  box-shadow: var(--welo-shadow-xl) !important;
  padding: 8px !important;
}

.dropdown-menu > li > a {
  padding: 10px 16px !important;
  border-radius: 8px !important;
  transition: var(--welo-transition-fast) !important;
}

.dropdown-menu > li > a:hover {
  background: var(--welo-bg-main) !important;
  color: var(--welo-primary) !important;
}

/* ============================================
   Tabs - التبويبات
   ============================================ */
.nav-tabs {
  border-bottom: 2px solid var(--welo-border-color) !important;
}

.nav-tabs > li > a {
  border: none !important;
  border-radius: var(--welo-border-radius) var(--welo-border-radius) 0 0 !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  color: var(--welo-text-secondary) !important;
  transition: var(--welo-transition-fast) !important;
}

.nav-tabs > li > a:hover {
  background: var(--welo-bg-main) !important;
  color: var(--welo-primary) !important;
}

.nav-tabs > li.active > a {
  background: var(--welo-primary) !important;
  color: var(--welo-text-white) !important;
}

/* ============================================
   Progress Bars - أشرطة التقدم
   ============================================ */
.progress {
  border-radius: var(--welo-border-radius) !important;
  height: 8px !important;
  background: var(--welo-bg-main) !important;
  overflow: hidden !important;
}

.progress-bar {
  border-radius: var(--welo-border-radius) !important;
}

/* ============================================
   Pagination - ترقيم الصفحات
   ============================================ */
.pagination > li > a {
  border: none !important;
  border-radius: var(--welo-border-radius) !important;
  margin: 0 2px !important;
  padding: 8px 14px !important;
  color: var(--welo-text-secondary) !important;
  transition: var(--welo-transition-fast) !important;
}

.pagination > li > a:hover {
  background: var(--welo-bg-main) !important;
  color: var(--welo-primary) !important;
}

.pagination > .active > a {
  background: var(--welo-primary) !important;
  color: var(--welo-text-white) !important;
}

/* ============================================
   Scrollbar - شريط التمرير
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--welo-bg-main);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--welo-text-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--welo-text-secondary);
}

/* ============================================
   RTL Support - دعم العربية
   ============================================ */
[dir="rtl"] .sidebar-menu > li > a:hover {
  transform: translateX(-4px);
}

[dir="rtl"] .sidebar-menu > li.active > a {
  border-left: none !important;
  border-right: 3px solid var(--welo-primary-light) !important;
}

/* ============================================
   Animations - الحركات
   ============================================ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.fadeIn {
  animation: fadeIn 0.3s ease;
}

/* تأثير النبض للأزرار المهمة */
.btn-pay:hover,
.btn-success.btn-lg:hover {
  animation: pulse 0.3s ease;
}

/* ============================================
   Responsive - التجاوب
   ============================================ */
@media (max-width: 768px) {
  .box {
    border-radius: var(--welo-border-radius) !important;
    margin-bottom: 16px !important;
  }
  
  .box-body {
    padding: 16px !important;
  }
  
  .btn {
    padding: 12px 16px !important;
  }
  
  .pos-product-list .product-box {
    border-radius: var(--welo-border-radius) !important;
  }
  
  .pos-totals {
    border-radius: var(--welo-border-radius-lg) !important;
    padding: 16px !important;
  }
}

/* ============================================
   Print Styles - طباعة
   ============================================ */
@media print {
  .main-sidebar,
  .main-header,
  .no-print {
    display: none !important;
  }
  
  .content-wrapper {
    margin: 0 !important;
    background: white !important;
  }
}

/* ============================================
   تحسينات إضافية للأداء
   ============================================ */
/* تقليل الحركات للأجهزة منخفضة الأداء */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* تأخير تحميل الخطوط */
.sidebar-menu,
.box-title,
label,
.btn {
  font-display: swap;
}

/* تحسين الصور */
img {
  content-visibility: auto;
}

/* تحسين التمرير */
.main-sidebar,
.table-responsive,
.pos-product-list {
  overflow-y: visible;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ──────────────────────────────────────────────────────────────────────────
   زر «تسجيل» في الشريط العلوي.
   كان يعتمد على tw-bg-white مع tw-text-blue-700، وهذا الأخير غير مبني في
   public/css/tailwind/app.css إطلاقاً، فكان الزر أبيض على أبيض بلا نص ظاهر.
   اللون هنا صريح ولا يعتمد على بناء Tailwind.
   ────────────────────────────────────────────────────────────────────────── */
.welo-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--welo-accent, #f59e0b);
    color: #1b2a4e !important;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    padding: 10px 20px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.welo-nav-cta:hover,
.welo-nav-cta:focus {
    background: var(--welo-warning-light, #fbbf24);
    color: #1b2a4e !important;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
}

@media (max-width: 767px) {
    .welo-nav-cta { font-size: 13px; padding: 8px 14px; }
}

/* أزرار الوحدات في الشريط العلوي — بجوار نقطة البيع، بنفس مظهرها */
.welo-header-module {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .14);
    color: #fff !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    transition: background .18s ease;
}

.welo-header-module:hover,
.welo-header-module:focus {
    background: rgba(255, 255, 255, .24);
    color: #fff !important;
    text-decoration: none;
}

@media (max-width: 767px) {
    .welo-header-module-text { display: none; }
    .welo-header-module { padding: 6px 9px; }
}

/* نقطة البيع: زر «التجار» (فلتر بضاعة تاجر البوتيك) بجوار الأصناف والعلامات */
.welo-pos-tenant-btn { background: linear-gradient(90deg, #f59e0b, #ea580c); }
.welo-pos-tenant-btn:hover { background: linear-gradient(90deg, #d97706, #c2410c); }
.welo-pos-tenant-title { color: #c2410c; }
.product_tenant.tenant-selected .tw-dw-card { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, .35); }

/* بطاقات الباقات (/pricing و/subscription): ألوانها أصناف Tailwind اعتباطية
   كُتبت بعد بناء app.css فلم تُبنَ أبداً. السعر كان tw-text-transparent +
   bg-clip-text بلا تدرّج = نص غير مرئي، وزر «التسجيل والاشتراك» نصه أبيض
   على خلفية بيضاء. */
.tw-from-\[\#fde68a\].tw-to-\[\#fbbf24\] { background-image: linear-gradient(to right, #fde68a, #fbbf24); }
.tw-text-\[\#1e3a8a\] { color: #1e3a8a !important; }
.tw-text-\[\#fde68a\] { color: #fde68a; }
.hover\:tw-bg-\[\#fde68a\]:hover { background-color: #fde68a !important; }
.price_card .tw-text-white\/70 { color: rgba(255, 255, 255, .7); -webkit-text-fill-color: rgba(255, 255, 255, .7); }
.price_card .tw-text-white\/80 { color: rgba(255, 255, 255, .8); }
.price_card .tw-text-white\/90 { color: rgba(255, 255, 255, .9); }
.price_card .tw-bg-white\/10 { background-color: rgba(255, 255, 255, .1); }
.price_card .tw-border-white\/10 { border-color: rgba(255, 255, 255, .1); }

/* رأس الصفحات العامة (الدخول/التسجيل/الأسعار) على الجوال: الروابط الستة
   كانت فوق الشعار وتتجاوز عرض الشاشة (424 بكسل على 390). تنزل تحت الشعار
   وتلتف في أسطر. */
@media (max-width: 767px) {
    .welo-auth-nav {
        position: static !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 14px !important;
        padding: 62px 12px 6px;
        max-width: 100%;
    }
    .welo-auth-nav > a { white-space: nowrap; }
}
@media (max-width: 767px) {
    .right-col > .row > .welo-auth-nav { padding-top: 0; margin: -24px 0 18px; }
}

/* تبويبات البوتيك (Bootstrap 4: الرابط نفسه .active لا الـ li) كانت تُرسم بنص
   بنفسجي باهت على خلفية بنفسجية فلا يُقرأ التبويب الحالي. */
.nav-tabs > li > a.nav-link.active,
.nav-tabs > li > a.nav-link.active:hover,
.nav-tabs > li > a.nav-link.active:focus {
  background: var(--welo-primary) !important;
  color: var(--welo-text-white) !important;
}
.nav-tabs > li > a.nav-link.active i { color: inherit !important; }
/* شارات Bootstrap 4 (bg-success/bg-secondary) غير معرّفة في سمة Bootstrap 3:
   «نشط» و«غير نشط» في قائمة التجار كانتا بالرمادي نفسه. */
.badge.bg-success { background-color: #16a34a !important; color: #fff !important; }
.badge.bg-secondary { background-color: #94a3b8 !important; color: #fff !important; }
.badge.bg-danger { background-color: #dc2626 !important; color: #fff !important; }
.badge.bg-warning { background-color: #f59e0b !important; color: #fff !important; }
.badge.bg-info { background-color: #0ea5e9 !important; color: #fff !important; }

/* صفحة الدخول بالعربية: أيقونة العين كانت على يمين الحقل فوق النص المكتوب. */
html[lang="ar"] #show_hide_icon { right: auto !important; left: 10px !important; }
html[lang="ar"] #show_hide_icon ~ input#password,
html[lang="ar"] input#password { padding-left: 42px !important; }

/* =====================================================================
   توحيد الواجهة (مهمة الفيديو ٢ — ب٢/ب٣) — 2026-10-18
   طبقة أخيرة فوق ما سبق: قياسات واحدة للخانات والأزرار، لا تداخل، أيقونات
   بمحاذاة النص، نوافذ منبثقة بترتيب واحد، وجوال بلا تمرير أفقي. CSS فقط —
   لا منطق ولا حقول ولا مسارات.
   ===================================================================== */
:root {
  --ui-h: 40px;          /* ارتفاع الخانة والقائمة والزر العادي على الكمبيوتر */
  --ui-h-sm: 32px;
  --ui-h-lg: 48px;
  --ui-h-touch: 44px;    /* الحد الأدنى على الجوال */
  --ui-radius: 10px;
  --ui-border: #cbd5e1;
  --ui-gap: 8px;
}

/* ---------- الخانات: ارتفاع واحد للنص والرقم والتاريخ والقائمة و Select2 ---------- */
.form-control:not(textarea):not([multiple]):not([type=file]),
.input-group .form-control:not(textarea):not([multiple]) {
  height: var(--ui-h) !important;
  min-height: var(--ui-h) !important;
  padding: 0 12px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  line-height: calc(var(--ui-h) - 2px) !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
textarea.form-control { border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius) !important; min-height: 80px !important; padding: 8px 12px !important; }
select.form-control:not([multiple]) { padding-top: 0 !important; padding-bottom: 0 !important; }
.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single {
  height: var(--ui-h) !important;
  min-height: var(--ui-h) !important;
  padding: 0 10px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  display: flex !important;
  align-items: center !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal !important; padding-inline: 4px 22px !important; width: 100%;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--ui-h) - 2px) !important; top: 0 !important; }
.select2-container--default .select2-selection--multiple { min-height: var(--ui-h) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius) !important; }
.select2-container { width: 100% !important; max-width: 100%; }

/* input-group: الأيقونة والخانة بنفس الارتفاع، والزوايا في الجهة الصحيحة بالعربي */
.input-group { display: flex !important; align-items: stretch; width: 100%; flex-wrap: nowrap; }
.input-group > .form-control, .input-group > .select2-container { flex: 1 1 auto; width: 1% !important; min-width: 0; }
.input-group-addon, .input-group-btn > .btn, .input-group-btn > .tw-dw-btn {
  height: var(--ui-h) !important;
  min-height: var(--ui-h) !important;
  min-width: var(--ui-h);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 10px !important;
  border: 1px solid var(--ui-border) !important;
  background: #f8fafc !important;
  color: #475569 !important;
  width: auto !important;
}
.input-group-btn { display: flex; width: auto !important; }
.input-group-btn > .btn { box-shadow: none !important; transform: none !important; }
[dir=rtl] .input-group > :first-child:not(:last-child),
[dir=rtl] .input-group > :first-child:not(:last-child) > .btn,
html[lang=ar] .input-group > :first-child:not(:last-child) { border-radius: 0 var(--ui-radius) var(--ui-radius) 0 !important; }
[dir=rtl] .input-group > :last-child:not(:first-child),
[dir=rtl] .input-group > :last-child:not(:first-child) > .btn,
html[lang=ar] .input-group > :last-child:not(:first-child) { border-radius: var(--ui-radius) 0 0 var(--ui-radius) !important; }
.input-group > :not(:first-child):not(:last-child) { border-radius: 0 !important; }
.input-group > .select2-container:last-child .select2-selection { border-radius: var(--ui-radius) 0 0 var(--ui-radius) !important; }
.input-group > .select2-container:first-child .select2-selection { border-radius: 0 var(--ui-radius) var(--ui-radius) 0 !important; }
.input-group-addon + .form-control, .form-control + .input-group-addon, .input-group-addon + .select2-container .select2-selection { border-inline-start-width: 0 !important; }

/* التسميات فوق الخانة بنفس المسافة؛ inline-block حتى تبقى أيقونة ⓘ بجانب التسمية لا تحتها */
.form-group > label:not(:has(input, select, textarea)), .form-group > .control-label { display: inline-block; max-width: 100%; margin: 0 0 6px !important; line-height: 1.4; }
.form-group { margin-bottom: 16px; }
.help-block { margin-top: 4px; font-size: 12px; }

/* ---------- الأزرار: ثلاثة أحجام فقط للنظامين (.btn و daisyUI tw-dw-btn) ---------- */
.btn, .tw-dw-btn {
  min-height: var(--ui-h) !important;
  height: auto;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  border-radius: var(--ui-radius) !important;
  white-space: nowrap;
  transform: none !important;
}
.btn:hover, .btn:active, .tw-dw-btn:hover { transform: none !important; }
.btn-sm, .btn-xs, .tw-dw-btn-sm, .tw-dw-btn-xs {
  min-height: var(--ui-h-sm) !important;
  height: var(--ui-h-sm) !important;
  padding: 0 12px !important;
  font-size: 13px !important;
}
.btn-lg, .tw-dw-btn-lg {
  min-height: var(--ui-h-lg) !important;
  padding: 0 24px !important;
  font-size: 15px !important;
}
.btn-block, .tw-w-full.tw-dw-btn { width: 100%; }
.btn > i, .btn > svg, .tw-dw-btn > i, .tw-dw-btn > svg { flex: 0 0 auto; width: 16px; height: 16px; font-size: 14px; line-height: 1; margin: 0 !important; }
/* حفظ الإعدادات كان أحمر (tw-dw-btn-error) — الحفظ بلون Welo الأساسي */
form .tw-dw-btn-error[type=submit] { background: linear-gradient(135deg, var(--welo-primary) 0%, var(--welo-primary-dark) 100%) !important; border-color: var(--welo-primary-dark) !important; color: #fff !important; }
.tw-dw-btn-group > .tw-dw-btn, .btn-group > .btn { border-radius: 0 !important; }
.btn-group > .btn:first-child, .tw-dw-btn-group > .tw-dw-btn:first-child { border-start-start-radius: var(--ui-radius) !important; border-end-start-radius: var(--ui-radius) !important; }
.btn-group > .btn:last-child, .btn-group > .dropdown-toggle:last-child { border-start-end-radius: var(--ui-radius) !important; border-end-end-radius: var(--ui-radius) !important; }

/* ---------- الأيقونات: حجم واحد ومحاذاة رأسية مع النص ---------- */
.side-bar .tw-size-5, aside .tw-size-5, .sidebar svg { width: 20px !important; height: 20px !important; flex: 0 0 20px; }
.side-bar a, aside a { align-items: center; }
td .btn i, td .tw-dw-btn i, td .tw-dw-btn svg { width: 14px; height: 14px; font-size: 13px; }
.box-title i, .page-title i, h3 > i, h4 > i { vertical-align: middle; }

/* ---------- الجداول وأدوات DataTables ---------- */
.dataTables_wrapper .dt-buttons, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { display: flex; align-items: center; gap: var(--ui-gap); flex-wrap: wrap; margin-bottom: 10px; }
.dataTables_wrapper .dt-buttons .tw-dw-btn, .dataTables_wrapper .dt-buttons .btn { min-height: 34px !important; height: 34px !important; padding: 0 12px !important; font-size: 13px !important; }
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { height: 36px !important; min-height: 36px !important; line-height: 34px !important; border-radius: var(--ui-radius) !important; border: 1px solid var(--ui-border) !important; padding: 0 10px !important; }
.dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_length label { display: flex; align-items: center; gap: 6px; margin: 0 !important; font-weight: 500 !important; white-space: nowrap; }
table.dataTable td .btn-group > .dropdown-toggle, table.dataTable td .tw-dw-btn.dropdown-toggle { min-height: 32px !important; height: 32px !important; }
.table > thead > tr > th { vertical-align: middle; white-space: nowrap; }
.table > tbody > tr > td { vertical-align: middle; }

/* ---------- الصفحة ---------- */
.content-header, .page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.content-header > h1 { margin: 0; }
/* البطاقات في الصف بنفس الارتفاع (لوحات البوتيك والتأجير والرئيسية) */
.row-eq-height, .boutique-stats .row, .stats-row { display: flex; flex-wrap: wrap; }
.small-box, .info-box, .stat-card { height: calc(100% - 16px); }

/* تبويبات البوتيك/التأجير في سطر واحد: «فتح نقطة البيع» كان يلتف لسطر ثانٍ فارغ تقريباً */
.boutique-nav .nav-tabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: thin; }
.boutique-nav .nav-tabs .nav-link { padding: 8px 12px !important; font-size: 13px !important; white-space: nowrap; }
.boutique-nav { margin-bottom: 16px !important; }

/* ---------- النوافذ المنبثقة: رأس وتذييل واحد، والحفظ في المكان نفسه ---------- */
.modal-content { border-radius: 14px !important; overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px !important; border-bottom: 1px solid #e2e8f0 !important; }
.modal-header .close { order: 2; margin: 0 !important; opacity: .6; font-size: 24px; }
.modal-header .modal-title { order: 1; font-size: 17px; font-weight: 700; margin: 0; }
.modal-footer { display: flex !important; flex-wrap: wrap; gap: var(--ui-gap); justify-content: flex-start; padding: 12px 18px !important; border-top: 1px solid #e2e8f0 !important; }
.modal-footer > * { margin: 0 !important; }
.modal-footer [type=submit], .modal-footer .btn-primary, .modal-footer .tw-dw-btn-primary { order: -1; }

/* ---------- زر واتساب العائم: لا يغطي أزراراً داخل لوحة التحكم ---------- */
body:not(.lockscreen) .whatsapp-float-btn { width: 44px !important; height: 44px !important; bottom: 14px !important; left: 14px !important; right: auto !important; opacity: .92; }
body:not(.lockscreen) .whatsapp-float-btn .whatsapp-float-label { display: none !important; }
body:not(.lockscreen) .whatsapp-float-btn svg { width: 22px; height: 22px; }
.content-wrapper { padding-bottom: 72px; }

/* ---------- الجوال ---------- */
@media (max-width: 767px) {
  :root { --ui-h: var(--ui-h-touch); }
  .wrapper { overflow-x: clip; max-width: 100vw; }
  .content { padding: 12px !important; }
  .content-wrapper { min-width: 0; }
  .btn, .tw-dw-btn { min-height: var(--ui-h-touch) !important; }
  .btn-sm, .btn-xs, .tw-dw-btn-sm, .tw-dw-btn-xs { min-height: 40px !important; height: 40px !important; }
  .form-control, .select2-selection__rendered { font-size: 16px !important; } /* بلا تكبير تلقائي في iOS */
  /* الجداول تتمرّر داخل صندوقها، مع ظل يدل على وجود المزيد */
  .table-responsive, .dataTables_scrollBody, .box-body > .table-responsive {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    background: linear-gradient(to left, #fff 30%, rgba(255,255,255,0)), linear-gradient(to left, rgba(255,255,255,0), #fff 70%) 100% 0,
                radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.18), rgba(15,23,42,0)), radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.18), rgba(15,23,42,0)) 100% 0;
    background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll;
  }
  .box-body, .tw-dw-card-body { overflow-x: auto; }
  .dataTables_wrapper .dt-buttons { width: 100%; }
  .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_filter input { width: 100% !important; }
  .content-header, .page-header { flex-direction: column; align-items: stretch; }
  .content-header .btn, .page-header .btn, .box-tools .btn, .box-tools .tw-dw-btn { width: 100%; }
  .modal-dialog { margin: 8px !important; width: auto !important; }
  .modal-footer > .btn, .modal-footer > .tw-dw-btn { flex: 1 1 auto; }
  /* بطاقات الأرقام: اثنتان في الصف بلا قطع */
  .small-box .inner h3, .info-box-number { font-size: 20px !important; white-space: nowrap; }
  .boutique-nav .nav-tabs { padding-bottom: 4px; }
  /* الشريط العلوي لا يطلع عن الشاشة */
  header .tw-flex, .main-header .tw-flex { flex-wrap: wrap; row-gap: 6px; }
}

/* صناديق ملوّنة (box bg-orange/bg-…): السمة تجعل .box أبيض و bg-* يجعل النص أبيض،
   فملخص نافذة الدفع (العناصر، المستحق، المدفوع، الباقي) كان أبيض على أبيض. */
.box.bg-orange, .box.bg-yellow, .box.bg-aqua, .box.bg-green, .box.bg-red, .box.bg-blue, .box.bg-purple, .box.bg-navy, .box.bg-maroon, .box.bg-teal {
  background: #fff7ed !important; color: #7c2d12 !important; border: 1px solid #fed7aa !important;
}
.box.bg-orange strong, .box.bg-orange .lead, .box.bg-yellow .lead, .box.bg-aqua .lead, .box.bg-green .lead { color: #431407 !important; }
.box.bg-orange hr { border-color: #fed7aa !important; }

/* رأس الصندوق: زر «إضافة» (box-tools) كان مطلقاً فوق العنوان «كل الوحدات» بالعربي */
.box-header, .tw-dw-card-header { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.box-header > .box-title { margin: 0 !important; flex: 1 1 auto; }
.box-header > .box-tools, .box-header .box-tools.pull-right, .box-header .box-tools.pull-left { position: static !important; float: none !important; display: flex; gap: 8px; flex-wrap: wrap; margin: 0 !important; transform: none !important; }
.content-header { padding-top: 12px; }
.content-header > h1 > small { display: inline-block; margin-inline-start: 8px; font-size: 13px; color: #64748b; }

/* شريط التأجير في قسم .content مستقل، و AdminLTE يعطي كل .content ارتفاعاً أدنى
   250px: فراغ أبيض كبير تحت التبويبات في 22 شاشة تأجير. */
section.content[style*="padding-bottom: 0"], section.content[style*="padding-bottom:0"] { min-height: 0 !important; padding-bottom: 0 !important; }

/* تنبيهات مقروءة: نص داكن على خلفية فاتحة (التنبيه البرتقالي كان نصاً فاتحاً على برتقالي) */
.alert-warning, .callout-warning, .callout.callout-warning { background: #fffbeb !important; border: 1px solid #fcd34d !important; border-inline-start: 4px solid #f59e0b !important; color: #78350f !important; }
.alert-warning *, .callout-warning * { color: #78350f !important; }
.alert-info, .callout-info { background: #eff6ff !important; border: 1px solid #bfdbfe !important; border-inline-start: 4px solid #3b82f6 !important; color: #1e3a8a !important; }
.alert-info *, .callout-info * { color: #1e3a8a !important; }
.alert-danger { background: #fef2f2 !important; border: 1px solid #fecaca !important; border-inline-start: 4px solid #ef4444 !important; color: #7f1d1d !important; }
.alert-success { background: #ecfdf5 !important; border: 1px solid #a7f3d0 !important; border-inline-start: 4px solid #10b981 !important; color: #064e3b !important; }
input[type=date].form-control, input[type=datetime-local].form-control, input[type=time].form-control { height: var(--ui-h) !important; padding-top: 0 !important; padding-bottom: 0 !important; }

/* الرئيسية على الجوال: بطاقات الأرقام اثنتان في الصف (كانت 8 بطاقات تحت بعضها) */
@media (max-width: 639px) {
  .tw-grid.tw-grid-cols-1.sm\:tw-grid-cols-2.xl\:tw-grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .tw-grid.sm\:tw-grid-cols-2.xl\:tw-grid-cols-4 > div > div { padding: 12px !important; }
  .tw-grid.sm\:tw-grid-cols-2.xl\:tw-grid-cols-4 .tw-text-xl, .tw-grid.sm\:tw-grid-cols-2.xl\:tw-grid-cols-4 .tw-text-2xl { font-size: 16px !important; }
  .tw-grid.sm\:tw-grid-cols-2.xl\:tw-grid-cols-4 .tw-text-sm { font-size: 12px !important; }
  .tw-grid.sm\:tw-grid-cols-2.xl\:tw-grid-cols-4 .tw-size-10, .tw-grid.sm\:tw-grid-cols-2.xl\:tw-grid-cols-4 .tw-size-12 { width: 34px !important; height: 34px !important; }
  /* الأيقونة فوق النص: بجانبه لم يبقَ للمبلغ إلا ~100px فكان يُقصّ «…500» */
  .tw-grid.sm\:tw-grid-cols-2.xl\:tw-grid-cols-4 > div > div > .tw-flex { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
  .tw-grid.sm\:tw-grid-cols-2.xl\:tw-grid-cols-4 .tw-truncate { overflow: visible !important; text-overflow: clip !important; white-space: normal !important; }
  .tw-grid.sm\:tw-grid-cols-2.xl\:tw-grid-cols-4 .tw-font-mono { font-size: 15px !important; white-space: nowrap !important; letter-spacing: -.02em; }
}

/* نقطة البيع على الجوال: البحث بعرض كافٍ، والسلة لا تختفي خلف شريط الدفع */
@media (max-width: 767px) {
  body.lockscreen #pos_table, body.lockscreen .pos_product_div { font-size: 14px; }
  body.lockscreen .input-group-addon, body.lockscreen .input-group-btn > .btn { min-width: 44px !important; width: 44px !important; padding: 0 !important; flex: 0 0 44px; }
  body.lockscreen .input-group-btn { flex: 0 0 auto; }
  body.lockscreen #search_product { font-size: 16px !important; }
  body.lockscreen .pos-form-actions { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; padding-bottom: env(safe-area-inset-bottom); }
  body.lockscreen .pos-form-actions .tw-dw-btn, body.lockscreen .pos-form-actions button { min-height: 44px; }
  body.lockscreen form#add_pos_sell_form { padding-bottom: 190px; }
  body.lockscreen .content { min-height: 0 !important; }
}

/* جداول البيانات: الأعمدة النصية كانت تُعصر فيلتف اسم المنتج كلمةً في كل سطر.
   الحد الأدنى للخانات على الجوال فقط (الجدول يتمرّر هناك داخل صندوقه)؛ على الحاسب كان يدفع الجدول خارج الصندوق */
@media (max-width: 991px) {
  table.dataTable > tbody > tr > td { min-width: 84px; }
  table.dataTable > tbody > tr > td:first-child, table.dataTable > tbody > tr > td:has(> input[type=checkbox]),
  table.dataTable > tbody > tr > td:has(> img) { min-width: 0; }
}
#product_table > tbody > tr > td:nth-child(4), table.dataTable td.product_name { min-width: 150px; }
.dataTables_wrapper .dataTables_length { margin-inline-end: 12px; }
.dataTables_wrapper > .row:first-child, .dataTables_wrapper .tw-flex:first-child { row-gap: 8px; }
@media (max-width: 767px) {
  table.dataTable td .btn-group > .dropdown-toggle, table.dataTable td .tw-dw-btn.dropdown-toggle,
  .dataTables_wrapper .dt-buttons .tw-dw-btn, .dataTables_wrapper .dt-buttons .btn { min-height: 40px !important; height: 40px !important; }
  .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { height: 44px !important; min-height: 44px !important; }
  .dataTables_paginate .pagination > li > a { min-width: 40px; min-height: 40px; display: inline-flex !important; align-items: center; justify-content: center; }
}

/* شريط أدوات الجداول: عمود «عرض N» (col-sm-1) أضيق من القائمة فكانت تركب فوق أزرار التصدير */
@media (min-width: 768px) {
  .dataTables_wrapper > .row.margin-bottom-20 { display: flex; flex-wrap: nowrap; align-items: center; }
  .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-1 { flex: 0 0 auto; width: auto; }
  .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-8 { flex: 1 1 auto; width: auto; min-width: 0; }
  .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-3 { flex: 0 0 auto; }
}
/* الجوال: تبويبات البوتيك وزر القائمة بارتفاع لمس 44 */
@media (max-width: 767px) {
  .boutique-nav .nav-tabs .nav-link { min-height: 44px; display: flex; align-items: center; }
  .small-view-button { min-width: 44px; min-height: 44px; }
}
/* أزرار «إضافة/تحميل» العائمة (pull-right) قبل الجدول كانت تركب فوق «عرض N» */
.dataTables_wrapper { clear: both; }
/* حقل «مدة الدفع» (رقم + وحدة) عائم بلا clearfix فكان العنوان التالي يركب عليه في الجوال */
.multi-input::after { content: ""; display: table; clear: both; }
/* الجوال: أزرار الأيقونة المربعة (تعديل/حذف) بعرض ٤٠ على الأقل، وأزرار التقويم بارتفاع ٤٠ */
@media (max-width: 767px) {
  .btn.btn-xs, .btn.btn-sm { min-width: 40px; }
  .fc .fc-button { min-height: 40px; }
}

/* ===================== مهمة الفيديو ٣ — الجولة الثانية ===================== */

/* أ١: صفوف النماذج الطويلة flex بدل float — اختلاف ارتفاع خانة واحدة كان يعلّق الـ float ويترك فراغاً */
form .row:has(> [class*="col-"] > .form-group), .modal-body .row:has(> [class*="col-"] > .form-group), .box-body > .row:has(> [class*="col-"] > .form-group) { display: flex; flex-wrap: wrap; }
form .row:has(> [class*="col-"] > .form-group)::before, form .row:has(> [class*="col-"] > .form-group)::after,
.modal-body .row:has(> [class*="col-"] > .form-group)::before, .modal-body .row:has(> [class*="col-"] > .form-group)::after,
.box-body > .row:has(> [class*="col-"] > .form-group)::before, .box-body > .row:has(> [class*="col-"] > .form-group)::after { display: none; }
/* clearfix القالب يفترض حقولاً ظاهرة بعينها، فإذا خُفي حقل ترك فجوة: نتجاهله فتنساب الحقول ثلاثاً في الصف
   (العمود العريض col-12 ينزل لسطره وحده تلقائياً) */
form .row:has(> [class*="col-"] > .form-group) > .clearfix, .modal-body .row:has(> [class*="col-"] > .form-group) > .clearfix, .box-body > .row:has(> [class*="col-"] > .form-group) > .clearfix { display: none; }
/* عمود بلا عرض عند هذا المقاس يأخذ السطر كله كما في float (أولوية صفر حتى تغلبه عروض Bootstrap) */
:where(form .row:has(> [class*="col-"] > .form-group) > [class*="col-"], .modal-body .row:has(> [class*="col-"] > .form-group) > [class*="col-"], .box-body > .row:has(> [class*="col-"] > .form-group) > [class*="col-"]) { width: 100%; }

/* أ١: رفع الملفات — أزرار بنفس الارتفاع والشكل */
.file-input .btn, .file-input .file-caption, .file-input .form-control, .welo-file-btn { min-height: var(--ui-h) !important; height: var(--ui-h) !important; display: inline-flex !important; align-items: center; gap: 6px; }
.file-input .input-group-btn { display: flex; }
.welo-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.welo-file-btn { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: #fff; padding: 0 14px; font-weight: 600; color: #1e293b; cursor: pointer; }
.welo-file-btn:hover { background: #f8fafc; }
.welo-file-name { color: #64748b; font-size: 13px; overflow-wrap: anywhere; }
input[type=file].welo-file-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; overflow: hidden; }

/* أ٤: القوائم الفرعية — الأيقونة في عمود ثابت والنص بعدها */
.sidebar-menu-child-item { align-items: center; gap: 10px; }
.sidebar-menu-child-item > i, .sidebar-menu-child-item > svg, .sidebar-menu-child-item > img { flex: 0 0 18px; width: 18px; text-align: center; }

/* أ٣: نقطة البيع على الجوال — الخصم/الضريبة/الشحن شبكة أعمدة متساوية: التسمية فوق والرقم تحت */
@media (max-width: 767px) {
  .pos_form_totals table, .pos_form_totals tbody { display: block; width: 100%; }
  .pos_form_totals tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; padding: 8px 0; border-top: 1px solid #eef2f7; }
  .pos_form_totals td { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 6px; text-align: center; border: 0 !important; padding: 4px !important; width: auto !important; float: none !important; }
  .pos_form_totals td.hide { display: none !important; }
  .pos_form_totals td b { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 4px; font-size: 13px !important; line-height: 1.3; width: 100%; }
  .pos_form_totals td span[id], .pos_form_totals td .price_total, .pos_form_totals td .total_quantity { font-size: 16px !important; font-weight: 700; white-space: nowrap; }
  .pos_form_totals td > b > span[id] { flex-basis: 100%; }
  .pos_form_totals .table > tbody > tr > td { border: 0 !important; }
  .pos_form_totals .table > tbody > tr:first-child { border-top: 0; }
  /* التسمية سطر واحد: ⓘ تلميح للمرور بالفأرة لا يعمل باللمس، فيُخفى هنا */
  .pos_form_totals td b { white-space: nowrap; font-size: 12px !important; }
  .pos_form_totals td > span:not([id]) { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 6px; width: 100%; }
  .pos_form_totals td > b > span[id] { white-space: nowrap; }
  .pos_form_totals td .fa-info-circle, .pos_form_totals td [data-toggle="popover"] { display: none !important; }
  #search_product { padding-inline: 10px !important; }
}

/* ===== مهمة ٣ — الفحص بالعين: إصلاحات عامة ===== */

/* ترقيم الجداول: الـ li صار «زراً» فارغاً (حدود DataTables) والرابط طافٍ خارجه ← ثلاث دوائر فارغة */
.dataTables_paginate .pagination > li.paginate_button { padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; min-width: 0 !important; box-shadow: none !important; display: inline-block; }
.dataTables_paginate .pagination > li > a { float: none !important; display: inline-flex; align-items: center; justify-content: center; }
.dataTables_paginate .pagination > li.disabled > a { opacity: .45; }

/* أسهم الترتيب: مثبّتة يميناً فتركب على العنوان العربي — نقلها لليسار وحجز مكانها */
html[lang=ar] table.dataTable thead > tr > th.sorting, html[lang=ar] table.dataTable thead > tr > th.sorting_asc, html[lang=ar] table.dataTable thead > tr > th.sorting_desc { padding-left: 26px !important; padding-right: 12px !important; }
html[lang=ar] table.dataTable thead > tr > th.sorting::before, html[lang=ar] table.dataTable thead > tr > th.sorting::after,
html[lang=ar] table.dataTable thead > tr > th.sorting_asc::before, html[lang=ar] table.dataTable thead > tr > th.sorting_asc::after,
html[lang=ar] table.dataTable thead > tr > th.sorting_desc::before, html[lang=ar] table.dataTable thead > tr > th.sorting_desc::after { right: auto !important; left: 8px !important; }
table.dataTable thead > tr > th { vertical-align: middle !important; }

/* الرموز (BC-000001، RC-…، BK-…) والمبالغ «ر.ع. 14.000» لا تنكسر — welo-ui.js يضع الصنف */
.welo-nowrap, .display_currency, td .display_currency { white-space: nowrap !important; }

/* بطاقات info-box بلا أيقونة: المحتوى بلا هامش الـ 90px المحجوز للأيقونة (كان يعصر الرقم والتسمية) */
.info-box-content:first-child { margin: 0 !important; padding: 12px 16px !important; }
.info-box-text { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
/* الملوّنة: بطاقة بيضاء بحافة لون (هوية Welo) بدل نص أبيض على أبيض */
.info-box.bg-aqua, .info-box.bg-yellow, .info-box.bg-green, .info-box.bg-blue, .info-box.bg-red, .info-box.bg-purple, .info-box.bg-orange { color: #1e293b !important; border-inline-start: 4px solid var(--tile, #0040c1) !important; }
.info-box.bg-aqua { --tile: #06b6d4; } .info-box.bg-yellow { --tile: #f59e0b; } .info-box.bg-green { --tile: #10b981; }
.info-box.bg-blue { --tile: #0040c1; } .info-box.bg-red { --tile: #ef4444; } .info-box.bg-purple { --tile: #6366f1; } .info-box.bg-orange { --tile: #f97316; }
.info-box[class*="bg-"] .info-box-number, .info-box[class*="bg-"] .info-box-text { color: inherit !important; }

/* زر واتساب داخل الشريط العلوي (بدل العائم): بنفس شكل أزرار الشريط */
.welo-header-wa { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #fff !important; font-size: 20px; text-decoration: none !important; }
.welo-header-wa:hover, .welo-header-wa:focus { background: #25D366; color: #fff !important; }

/* الشريط العلوي: أيقونة معلومات الباقة كانت تطفو في منتصف الشريط — تلتصق بزر القائمة */
.welo-topbar-row { align-items: center !important; }
.welo-topbar-row > .fa-info-circle { margin-inline-end: auto; align-self: center; opacity: .85; font-size: 16px; }
@media (max-width: 767px) {
  /* سطر واحد على الجوال: كان زر المستخدم ينزل وحده لسطر ثانٍ */
  .welo-topbar-row { gap: 8px !important; }
  .welo-topbar-row > .fa-info-circle { display: none; }   /* تلميح بالمرور بالفأرة لا يعمل باللمس */
  .welo-topbar-actions { flex-wrap: nowrap !important; gap: 6px !important; }
  .welo-topbar-actions > * { flex-shrink: 0; }
  .welo-topbar-row .small-view-button { height: 40px !important; min-height: 40px !important; width: 40px !important; min-width: 40px !important; }
}

/* وحدتا البوتيك والتأجير تستعملان صناديق Bootstrap 4 (.card) داخل لوحة Bootstrap 3 فلم يكن لها أي تنسيق:
   أزرار الحفظ ملتصقة بحافة البطاقة على الحاسب، وخارجها على الجوال */
.content .card { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); margin-bottom: 20px; min-width: 0; }
.content .card-header { padding: 14px 18px; border-bottom: 1px solid #eef2f7; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: transparent; }
.content .card-title { margin: 0; font-size: 16px; font-weight: 700; }
.content .card-body { padding: 18px; }
.content .card-footer { padding: 14px 18px; border-top: 1px solid #eef2f7; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #f8fafc; border-radius: 0 0 14px 14px; }
@media (max-width: 767px) {
  .content .card-body, .content .card-header, .content .card-footer { padding: 14px; }
  .content .card-footer > .btn, .content .card-footer > a.btn { flex: 1 1 auto; }
}

/* شريط أقسام التأجير: كان أزراراً بأربعة ألوان (أخضر/سماوي/بنفسجي/برتقالي) تلتف على الجوال ثلاثة أسطر.
   الآن تبويبات موحّدة بهوية Welo، والنشط بالأزرق، وسطر واحد يتمرّر على الجوال */
.welo-module-tabs .btn-group { display: flex; flex-wrap: wrap; gap: 6px; }
.welo-module-tabs .btn-group > .btn { float: none; flex: 0 0 auto; margin: 0 !important; border-radius: 10px !important; background: #fff !important; color: #334155 !important; border: 1px solid #e2e8f0 !important; box-shadow: none !important; font-weight: 600; }
.welo-module-tabs .btn-group > .btn:hover { background: #f1f5f9 !important; }
.welo-module-tabs .btn-group > .btn.active { background: #0040c1 !important; color: #fff !important; border-color: #0040c1 !important; }
.welo-module-tabs .btn-group > .btn-success { background: #eef4ff !important; color: #0040c1 !important; border-color: #c7d7fe !important; }
@media (max-width: 767px) {
  .welo-module-tabs .btn-group { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
}

/* ألوان الأزرار — هوية واحدة: الأساسي بتدرّج نيلي→أزرق كأزرار «إضافة» في النظام وشريطه الأزرق.
   كان tw-dw-btn-primary بنفسجياً كهربائياً (#4a00ff)، وأزرار الحفظ الثانوية أرجوانية وقرمزية */
.tw-dw-btn.tw-dw-btn-primary, .btn.btn-primary:not(.btn-outline-primary):not(.input-group-btn > .btn) { background: linear-gradient(to right, #4f46e5, #3b82f6) !important; border: 0 !important; color: #fff !important; }
.tw-dw-btn.tw-dw-btn-primary:hover, .btn.btn-primary:not(.btn-outline-primary):not(.input-group-btn > .btn):hover { background: linear-gradient(to right, #4338ca, #2563eb) !important; }
.tw-dw-btn.bg-purple, .tw-dw-btn.bg-maroon, .tw-dw-btn.tw-dw-btn-warning.submit_product_form { background: #fff !important; color: #0040c1 !important; border: 1px solid #c7d7fe !important; }
.tw-dw-btn.bg-purple:hover, .tw-dw-btn.bg-maroon:hover, .tw-dw-btn.tw-dw-btn-warning.submit_product_form:hover { background: #eef4ff !important; }
/* أزرار الأصناف/العلامات/التجار في نقطة البيع: نفس التدرّج ونص أبيض (قاعدة label العامة كانت تجعله داكناً) */
label.tw-text-white, label.tw-text-white * { color: #fff !important; }
#product_category_div label[for]:not(.tw-dw-drawer-overlay), #product_brand_div label[for]:not(.tw-dw-drawer-overlay), .welo-pos-tenant-btn { background: linear-gradient(to right, #4f46e5, #3b82f6) !important; }
.welo-pos-tenant-btn:hover { background: linear-gradient(to right, #4338ca, #2563eb) !important; }

/* بطاقات الأرقام small-box (لوحتا البوتيك والتأجير): كانت ألواناً كثيرة متدرّجة ورقماً داكناً على لون وأيقونة كبيرة تحته.
   الآن بطاقة بيضاء بحافة ولون الحالة، والرقم مقروء، والأيقونة خلفية خفيفة لا تلمس الرقم */
.small-box.bg-aqua, .info-box.bg-aqua { --tile: #06b6d4; } .small-box.bg-green { --tile: #10b981; } .small-box.bg-red { --tile: #ef4444; }
.small-box.bg-yellow { --tile: #f59e0b; } .small-box.bg-purple { --tile: #6366f1; } .small-box.bg-maroon { --tile: #be185d; }
.small-box.bg-teal { --tile: #14b8a6; } .small-box.bg-blue { --tile: #0040c1; } .small-box.bg-navy { --tile: #1e3a8a; } .small-box.bg-orange { --tile: #f97316; }
.small-box[class*="bg-"] { background: #fff !important; color: #1e293b !important; border: 1px solid #e2e8f0 !important; border-inline-start: 4px solid var(--tile, #0040c1) !important; border-radius: 14px !important; overflow: hidden; box-shadow: 0 1px 3px rgba(15, 23, 42, .06) !important; }
.small-box[class*="bg-"] .inner h3 { color: #0f172a !important; white-space: nowrap; position: relative; z-index: 1; }
.small-box[class*="bg-"] .inner p { color: #475569 !important; position: relative; z-index: 1; }
.small-box[class*="bg-"] .icon { color: var(--tile, #0040c1) !important; opacity: .13 !important; font-size: 58px !important; top: 14px !important; }
.small-box[class*="bg-"] .icon > i { font-size: 58px !important; }
.small-box[class*="bg-"] .small-box-footer { background: #f8fafc !important; color: #0040c1 !important; border-top: 1px solid #eef2f7; }
.page-title-icon, .page-title-icon i { color: #fff !important; }

/* info-box بأيقونة (بطاقات الأرفف): أيقونة 48 بلون الحالة بدل كتلة 90px موحّدة اللون كانت تعصر الاسم والرمز */
.info-box:has(> .info-box-icon) { display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 0 !important; }
.info-box > .info-box-icon { float: none !important; flex: 0 0 48px; width: 48px !important; height: 48px !important; line-height: 48px !important; font-size: 20px !important; border-radius: 12px !important; display: flex !important; align-items: center; justify-content: center; }
.info-box > .info-box-icon + .info-box-content { margin: 0 !important; padding: 0 !important; min-width: 0; flex: 1 1 auto; }
.info-box > .info-box-icon.bg-green { background: #10b981 !important; } .info-box > .info-box-icon.bg-blue { background: #0040c1 !important; }
.info-box > .info-box-icon.bg-red { background: #ef4444 !important; } .info-box > .info-box-icon.bg-yellow { background: #f59e0b !important; }
.info-box > .info-box-icon.bg-aqua { background: #06b6d4 !important; }
.info-box > .info-box-icon + .info-box-content .info-box-text { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* صفحة الاشتراك: بطاقات الباقات بنص أبيض — خلفية زرقاء بهوية Welo بدل الصندوق الأبيض */
.welo-plans { background: linear-gradient(135deg, #0040c1 0%, #1e3a8a 100%); border-radius: 16px; padding: 24px !important; }
.welo-plans h3[class*="tw-bg-clip-text"] { -webkit-text-fill-color: transparent; }

/* رقم الواتساب في التسجيل (intl-tel-input): حشوة .form-control العامة ألغت المسافة المحجوزة للعلم و+968 فتراكبت مع النص */
.iti { width: 100%; }
.iti.iti--separate-dial-code input.form-control[type="tel"]:not([multiple]), .iti.iti--separate-dial-code input[type="tel"]:not([multiple]):not(textarea) { padding-left: 124px !important; }
.iti.iti--allow-dropdown:not(.iti--separate-dial-code) input.form-control[type="tel"]:not([multiple]) { padding-left: 52px !important; }
/* label يلفّ الخانة نفسها (صفحة الدخول tw-dw-form-control) يبقى بعرض السطر */
.form-group > label:has(input, select, textarea) { display: block; width: 100%; }
.form-group > label.tw-dw-form-control { display: flex !important; flex-direction: column; }

/* بطاقات الباقات: «ر.ع. 11.000 / شهر» سطر واحد (كانت «شهر» تنزل وحدها) */
h3[class*="tw-bg-clip-text"] > span[dir=auto] { white-space: nowrap; }
h3[class*="tw-bg-clip-text"] { font-size: clamp(1.25rem, 1.9vw, 1.875rem) !important; }

/* إعدادات النشاط على الجوال: قائمة الأقسام العمودية (col-xs-2) كانت ~100px فتُقصّ التسميات وتركب على النموذج —
   تصير شريطاً أفقياً يتمرّر فوق النموذج، والنموذج بعرض الشاشة */
@media (max-width: 767px) {
  .pos-tab-container .pos-tab-menu, .pos-tab-container .pos-tab { width: 100% !important; float: none !important; }
  .pos-tab-container .pos-tab-menu { margin-bottom: 12px; padding: 0 !important; }
  .pos-tab-container .pos-tab-menu .list-group { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 4px; margin: 0; scrollbar-width: thin; }
  .pos-tab-container .pos-tab-menu .list-group-item { flex: 0 0 auto; white-space: nowrap; border-radius: 10px !important; margin: 0 !important; min-height: 44px; display: flex; align-items: center; }
}

/* تقويم الحجوزات (FullCalendar): أزرار بهوية Welo بدل الرمادي الداكن الافتراضي */
.fc .fc-button-primary { background: #fff !important; color: #334155 !important; border: 1px solid #e2e8f0 !important; box-shadow: none !important; text-transform: none; }
.fc .fc-button-primary:hover { background: #f1f5f9 !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background: #0040c1 !important; color: #fff !important; border-color: #0040c1 !important; }
.fc .fc-button-primary:disabled { opacity: .5; }
/* الجوال: أسماء الأيام كانت ملتصقة («الجمعةالخميس…»)، والعنوان ينكسر، وشريط الأدوات بمستويات مختلفة */
@media (max-width: 767px) {
  .fc .fc-toolbar.fc-header-toolbar { flex-wrap: wrap; gap: 8px; align-items: center; }
  .fc .fc-toolbar-chunk { display: flex; align-items: center; gap: 6px; }
  .fc .fc-toolbar-title { font-size: 18px !important; white-space: nowrap; }
  .fc .fc-col-header-cell-cushion { display: block; font-size: 10px; padding: 4px 1px !important; overflow: hidden; white-space: nowrap; }
  .fc .fc-daygrid-event { font-size: 10px; }
  .fc .fc-daygrid-event .fc-event-title { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
}

/* أصناف Bootstrap 4 التي تستعملها وحدتا البوتيك والتأجير داخل لوحة Bootstrap 3 (لم تكن معرّفة):
   تنبيه «d-none» كان يظهر صندوقاً أحمر فارغاً في نافذة الإضافة السريعة */
.d-none { display: none !important; }
.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
@media (min-width: 768px) { .d-md-block { display: block !important; } .d-md-none { display: none !important; } }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.flex-wrap { flex-wrap: wrap !important; }

/* نافذة جهة الاتصال: صفوفها تخلط col-md-3 وcol-md-4 فتبقى خانات فارغة؛ على الحاسب كل الخانات ربع السطر فتنساب أربعاً بلا فراغ */
@media (min-width: 992px) {
  :is(#contact_add_form, #quick_add_contact, form[id^="contact_"]) .row > .col-md-3,
  :is(#contact_add_form, #quick_add_contact, form[id^="contact_"]) .row > .col-md-4 { width: 25%; }
}
.modal-body > p:first-child, .modal-body > .help-block:first-child { margin-bottom: 12px; }
/* ملخص تقرير المخزون (جدول أرقام كبيرة بلا DataTables): على الجوال يتمرّر داخل صندوقه بدل أن يُقصّ الرقم */
@media (max-width: 767px) {
  .box-body:has(> table.table.no-border) { overflow-x: auto; }
  .box-body > table.table.no-border h3 { font-size: 18px; white-space: nowrap; }
}
/* المشتريات: «العنوان:» فارغ تحت المورد قبل اختياره (كان يبدو تسميةً بلا خانة فوق «الفرع») */
strong:has(+ #supplier_address_div:empty) { display: none; }
@media (max-width: 767px) {
  /* سطور النتيجة («مبلغ الخصم: 0.000») كانت ملتصقة بتسمية الخانة التالية */
  .row > [class*="col-md-"]:has(> b + .display_currency) { margin-bottom: 16px; }
  /* الخصم والضريبة في المشتريات جدول خانات بأعمدة ضيقة — على الجوال خانة في كل سطر */
  table.table:has(> tbody > tr > td > .form-group) > tbody > tr,
  table.table:has(> tbody > tr > td > .form-group) > tbody > tr > td { display: block; width: 100% !important; border: 0 !important; padding-inline: 0 !important; }
}
/* نقطة البيع على الجوال: تسميات الإجراءات الثانوية (مسودة، عرض سعر، بيع الائتمان…) كانت تنكسر سطرين */
@media (max-width: 767px) {
  body.lockscreen .pos-form-actions .tw-flex-col.tw-items-center.tw-justify-center { white-space: nowrap; font-size: 11px !important; flex: 1 1 0; min-width: 0; }
}
/* col-12 (Bootstrap 4) بلا تعريف في لوحة Bootstrap 3: لا حشوة فكانت بطاقات البوتيك ملتصقة بحافة الشاشة */
.row > .col-12 { position: relative; width: 100%; padding-left: 15px; padding-right: 15px; float: none; }
.boutique-nav { margin-left: 15px !important; margin-right: 15px !important; }
.row:has(> .col-5, > .col-7) { display: flex; flex-wrap: wrap; }
.row > .col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; padding-left: 15px; padding-right: 15px; }
.row > .col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; padding-left: 15px; padding-right: 15px; }
/* خانة الكمية في سلة نقطة البيع (بين زرّي − و+): حشوة 12px وmin-width:0 تركت للرقم 0px على الجوال فلا يُرى
   (أبلغت عنه جلسة www-19 أثناء فحص شكوى ربوع ضلع) */
#pos_table .input-group > input.pos_quantity, #pos_table input.input_quantity { padding: 0 4px !important; min-width: 48px !important; text-align: center; }
@media (max-width: 767px) {
  /* ملخص تقرير المخزون داخل غلاف Tailwind (لا .box-body): يتمرّر بدل قصّ «الربح المحتمل» */
  div:has(> table.table.no-border) { overflow-x: auto; }
  div > table.table.no-border h3 { font-size: 18px; white-space: nowrap; }
  /* سلة نقطة البيع: بعد توسيع خانة الكمية قُصّ عمود المجموع — زرّا −/+ أضيق داخل الجدول */
  body.lockscreen #pos_table .input-group-btn > .btn { min-width: 32px !important; width: 32px !important; flex: 0 0 32px !important; }
  body.lockscreen #pos_table td { padding-left: 4px !important; padding-right: 4px !important; }
  body.lockscreen #pos_table .display_currency, body.lockscreen #pos_table .pos_line_total_text { white-space: nowrap; }
}

/* ===== مهمة ٣ — الجولة الثانية من الفحص بالعين ===== */
/* «ر.ع.» فوق الرقم في خلايا المبالغ والمجاميع (final_total/payment_due وتذييل الجداول) */
td [data-orig-value], tfoot td span, tfoot td .display_currency, td .final_total, td .payment_due, td .total_paid { white-space: nowrap; }
/* ساعة نقطة البيع: «PM 06:32 18/10/2026» — الوقت والتاريخ بترتيبهما */
.curr_datetime { direction: ltr; unicode-bidi: isolate; display: inline-block; }
/* تبويبات التأجير: «منتجات التأجير» زر btn-primary فبدا نشطاً دائماً بجانب النشط الحقيقي */
.welo-module-tabs .btn-group > .btn.btn-primary:not(.active), .welo-module-tabs .btn-group > .btn.btn-info:not(.active), .welo-module-tabs .btn-group > .btn.btn-warning:not(.active), .welo-module-tabs .btn-group > .btn.btn-secondary:not(.active) { background: #fff !important; color: #334155 !important; border: 1px solid #e2e8f0 !important; }
.welo-module-tabs .btn-group > .btn.active { background: #0040c1 !important; color: #fff !important; border-color: #0040c1 !important; }
/* بطاقات الأرقام: الأيقونة الخلفية أصغر وأخفت فلا تمسّ التسمية */
.small-box[class*="bg-"] .icon, .small-box[class*="bg-"] .icon > i { font-size: 42px !important; opacity: .1 !important; }
.small-box[class*="bg-"] .inner { padding-inline-end: 56px; }
/* التقويم: اسم الحجز يُختصر بنقاط بدل أن ينكسر حرفاً حرفاً في خانة اليوم الضيقة */
@media (max-width: 767px) {
  .fc .fc-daygrid-event .fc-event-title { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
  /* جداول داخل بطاقات Bootstrap 4 (تفاصيل التسوية…): تتمرّر داخل البطاقة بدل أن تخرج منها */
  .content .card-body:has(> table, > .table-responsive) { overflow-x: auto; }
}
/* رمز الدولة في رقم الواتساب: نص أبيض على رمادي كان غير مقروء */
.iti__selected-dial-code { color: #334155 !important; }
.iti--separate-dial-code .iti__selected-flag { background: #f1f5f9 !important; height: 100%; }
.iti__flag-container { height: 100%; }
@media (max-width: 767px) {
  /* سلة نقطة البيع: صورة المنتج المصغّرة في السطر كانت تدفع عمود الحذف (✕) خارج الحافة — الاسم يكفي هنا */
  body.lockscreen #pos_table td img { display: none !important; }
  body.lockscreen #pos_table td:first-child { max-width: 120px; font-size: 13px; overflow-wrap: anywhere; }
  body.lockscreen #pos_table { width: 100% !important; table-layout: auto; }
}
/* الصفحات العامة: زر واتساب العائم كان يغطي نص شريط الكوكيز وزر «أوافق» — يرتفع فوقه ما دام الشريط ظاهراً */
body:not(.lockscreen):has(#cookie-consent-banner) .whatsapp-float-btn { bottom: 96px !important; }
@media (max-width: 767px) { body:not(.lockscreen):has(#cookie-consent-banner) .whatsapp-float-btn { bottom: 200px !important; } }
/* قائمة المستخدم في الشريط العلوي (tw-right-0) تنفتح يساراً خارج الشاشة في RTL على الجوال («البي…»، «تس…») */
html[lang=ar] .welo-topbar-row details.tw-dw-dropdown > ul.tw-right-0 { right: auto !important; left: 0 !important; transform-origin: top left; }

/* لون واجهة الشركة (theme_color): «black» و«blue» بلا أصناف في Tailwind المبني مسبقاً — فالشريط العلوي وبانر
   الرئيسية بلا خلفية: «مرحباً …» أبيض على رمادي فاتح، وأيقونات الشريط باهتة (ربوع ضلع وشركتان أخريان على black) */
.tw-bg-black-700 { background-color: #334155; } .tw-bg-black-800 { background-color: #1e293b; }
.tw-from-black-800 { --tw-gradient-from: #1e293b var(--tw-gradient-from-position); --tw-gradient-to: rgba(30, 41, 59, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tw-to-black-900 { --tw-gradient-to: #0f172a var(--tw-gradient-to-position); }
.tw-bg-blue-700 { background-color: #1d4ed8; } .tw-bg-blue-800 { background-color: #1e40af; }
.tw-from-blue-800 { --tw-gradient-from: #1e40af var(--tw-gradient-from-position); --tw-gradient-to: rgba(30, 64, 175, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.tw-to-blue-900 { --tw-gradient-to: #1e3a8a var(--tw-gradient-to-position); }

/* نافذة الدفع (مهمة ٤، أثناء التصوير): في لوحة الملخّص الضيقة كان «ر.ع.» في سطر والرقم في سطر، ويتراكب «ر.ع. 55.000» */
#modal_payment .lead.text-bold { white-space: nowrap; display: inline-block; font-size: 17px; }