/* ════════════════════════════════════════════════════════════
   🔧 جراحة لونية شاملة (Surgical Color Fix 2026)
   — تضمن توافقاً تاماً مع الوضع المضيء والداكن باستخدام المتغيرات
   ════════════════════════════════════════════════════════════ */

/* ── 0. تحميل خط الأيقونات محلياً لعدم إظهار النصوص الإنجليزية ── */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block; /* يخفي النص الإنجليزي فوراً حتى يتم تحميل الخط */
  src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ── 1. توحيد البطاقات والحاويات لتعمل بالمتغيرات ── */
.modal,
.modal-content,
.overlay .modal,
.glass-card,
.search-card,
.feature-card,
.auth-form,
.chat-bubble,
.message-input-container,
.profile-menu,
.transactions-list,
.empty-state,
.user-card,
.stat-card,
.ai-chat-input-wrapper,
.ai-chat-inline-section,
.chat-start-notice,
.scroll-container,
.panel,
.modal-body,
.skeleton-card {
  background: var(--bg-card) !important;
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
}

/* ── 2. نصوص الترويسات والعناوين ── */
h1, h2, h3, h4, h5, h6,
.section-title,
.section-subtitle {
  color: var(--text-primary) !important;
}

p, span:not(.material-symbols-outlined), label,
.text-primary, .text-secondary, .text-hint,
.header-greeting, .profile-email, .color-hint {
  color: var(--text-main) !important;
}

/* ── 3. الإشعارات والتنبيهات ── */
#notifications-modal .modal,
.notifications-modal .modal {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

#notifications-modal .modal-header,
.notifications-modal .modal-header {
  border-bottom: 1px solid var(--border-subtle) !important;
}

#notifications-list .notif-item-card,
#notifications-list .notification-item {
  background: var(--bg-container) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
  padding: 12px !important;
  border-radius: 12px !important;
}

#notifications-list .empty-state {
  background: transparent !important;
  color: var(--text-secondary) !important;
}

/* ── 4. تعديل الحساب (edit-profile-modal) ── */
#edit-profile-modal .modal {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

#edit-profile-modal .modal-header,
#edit-profile-modal label,
#edit-profile-modal h3,
#edit-profile-modal h4 {
  color: var(--text-primary) !important;
}

#edit-profile-modal .input-field,
#edit-profile-modal select.input-field {
  background: var(--bg-surface-elevated) !important;
  border: 1.5px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

#edit-profile-modal .input-field::placeholder {
  color: var(--text-secondary) !important;
  opacity: 0.6 !important;
}

#edit-profile-modal select.input-field option {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* ── 5. سجل التحويلات والمحفظة ── */
#screen-wallet .transactions-list .transaction-item,
#screen-wallet .transactions-list .transaction-item-card {
  background: var(--bg-container) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
  padding: 12px !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
}

#screen-wallet .section-title,
#screen-wallet .section-subtitle {
  color: var(--text-primary) !important;
}

/* ── 6. الـ Toast ── */
.toast,
#toast {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-modal) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ── 7. كروت إحصائيات الحساب وقوائم الحساب ── */
.profile-menu-item {
  color: var(--text-primary) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

.profile-menu-item .text-main,
.profile-menu-item span {
  color: var(--text-primary) !important;
}

/* ── 8. تباين أزرار الإغلاق ── */
.modal-header .btn-icon,
#close-notifications-modal,
#close-edit-profile-modal,
#close-rating-modal {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  cursor: pointer !important;
}

html:not([data-theme="light"]) .modal-header .btn-icon,
html:not([data-theme="light"]) #close-notifications-modal {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ── 9. الـ Overlays والـ Backdrop ── */
.overlay:not(.hidden) {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 10000 !important;
}

.overlay:not(.hidden) .modal {
  display: block !important;
  position: relative !important;
  margin: 8vh auto !important;
  width: calc(100% - 32px) !important;
  max-width: 440px !important;
  padding: 24px !important;
  border-radius: 24px !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-modal) !important;
}


/* ── 20. Master Surgical Color & Typography Enforcement (100% Compliance) ── */
:root, [data-theme="dark"], body, html {
  --color-primary: #10B981 !important;
  --color-primary-light: #34D89E !important;
  --color-primary-dim: #34D89E !important;
  --color-primary-bg: rgba(16, 185, 129, 0.15) !important;
  --color-secondary: #FFA94D !important;
  --color-secondary-light: #FFA94D !important;
  --bg-page: #0A1F1A !important;
  --bg-body: #0A1F1A !important;
  --bg-card: rgba(16, 185, 129, 0.05) !important;
  --bg-container: rgba(16, 185, 129, 0.08) !important;
  --text-primary: #F8FAFC !important;
  --text-secondary: #9CA3AF !important;
  --border-color: rgba(52, 216, 158, 0.15) !important;
  --border-subtle: rgba(52, 216, 158, 0.1) !important;
}

/* Strict Typography Enforcement */
body, .app-header, .bottom-nav, .modal, .card, .btn, .input-field, .toast, .empty-state, h1, h2, h3, h4, h5, h6, p, span:not(.material-symbols-outlined), label, a {
  font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif !important;
}

/* Numbers, Prices, Distances, OTP, Barcodes, Badges */
.new-price, .old-price, .stock-count, .distance-badge, .badge, .amount-btn, .phone-input, .otp-input, code, .price, .number, [class*="price"], [class*="distance"], [class*="number"] {
  font-family: 'JetBrains Mono', monospace !important;
}

/* ── البند 1: أزرار الطلب والدردشة ── */
.btn-primary, .order-btn, button[class*="order"], a[class*="order"], .product-quick-btn {
  background: #10B981 !important;
  color: #FFFFFF !important;
  border: 1.5px solid #10B981 !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25) !important;
  border-radius: 12px !important;
}
.btn-primary:hover, .order-btn:hover, button[class*="order"]:hover, a[class*="order"]:hover, .product-quick-btn:hover {
  background: #34D89E !important;
  border-color: #34D89E !important;
  color: #0A1F1A !important;
}

.btn-secondary, .chat-btn, button[class*="chat"], a[class*="chat"] {
  background: transparent !important;
  color: #10B981 !important;
  border: 1.5px solid #10B981 !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}
.btn-secondary:hover, .chat-btn:hover, button[class*="chat"]:hover, a[class*="chat"]:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34D89E !important;
  border-color: #34D89E !important;
}

/* ── البند 2: شارة العرض (Ribbon أمبر) ── */
.offer-badge, [title*="عرض"], [title*="لحق"], .badge-offer, .discount-badge {
  background: #FFA94D !important;
  color: #0A1F1A !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 0 12px 0 12px !important;
  max-width: 20% !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  box-shadow: 0 2px 8px rgba(255, 169, 77, 0.3) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  z-index: 5 !important;
}

/* ── البند 4: تنسيق السعر (Typography) ── */
.new-price, .current-price, .price-now {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: #34D89E !important;
}
.old-price, .original-price, .price-before {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: #6B7280 !important;
  text-decoration: line-through !important;
  margin-inline-start: 6px !important;
}

/* ── البند 5: وزن الصيدلية بصرياً ── */
.storefront-icon, .pharmacy-logo, .pharmacy-card .material-symbols-outlined, .medicine-card .material-symbols-outlined {
  font-size: 28px !important;
  color: #10B981 !important;
  transform: scale(1.3) !important;
  margin-inline-end: 8px !important;
  display: inline-block !important;
}
.pharmacy-name, .store-name, .order-ph-name {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 600 !important;
  color: #F8FAFC !important;
  font-size: 15px !important;
}

/* ── البند 6: تسمية الرصيد ⭐ ── */
#real-wallet-amount, .wallet-amount {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  color: #34D89E !important;
}
.wallet-label, #wallet-header-btn span[style*="font-size: 10px"], #wallet-header-btn span[style*="font-size: 9px"] {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 11px !important;
  color: #9CA3AF !important;
  font-weight: 600 !important;
}

/* ── البند 7: تصادم الهيدر في الطلبات النشطة ── */
.app-section, #screen-orders, #screen-home .section-header {
  padding-top: 24px !important;
  margin-top: 16px !important;
}
.header-greeting {
  margin-bottom: 12px !important;
}
#active-orders-container, .active-orders-section {
  clear: both !important;
  margin-top: 20px !important;
}
.section-header .btn, .section-header button {
  white-space: nowrap !important;
  overflow: visible !important;
  max-width: none !important;
}

/* ── البند 8: تدرج منطقتك الحالية وإزالة الأزرق ── */
.location-banner, .current-location, [class*="location-banner"], .location-header {
  background: linear-gradient(135deg, #10B981 0%, #34D89E 100%) !important;
  color: #0A1F1A !important;
}
.location-banner *, .current-location *, [class*="location-banner"] * {
  color: #0A1F1A !important;
}

/* ── البند 9: أيقونة الاتجاهات في بطاقات الصيدليات ── */
.map-btn, [id^="directions-btn-"], a[href*="maps/dir"], button[class*="direction"], a[class*="direction"] {
  background: #FFA94D !important;
  color: #0A1F1A !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 12px rgba(255, 169, 77, 0.25) !important;
}
.map-btn *, [id^="directions-btn-"] *, a[href*="maps/dir"] *, button[class*="direction"] *, a[class*="direction"] * {
  color: #0A1F1A !important;
}
.map-btn:hover, [id^="directions-btn-"]:hover, a[href*="maps/dir"]:hover {
  background: #34D89E !important;
  color: #0A1F1A !important;
}

/* ── البند 10: أيقونة الصندوق في الحالة الفارغة ── */
.empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px 20px !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.empty-state .icon, .empty-state .material-symbols-outlined, .empty-state img {
  font-size: 56px !important;
  color: #34D89E !important;
  opacity: 0.6 !important;
  margin-bottom: 16px !important;
  display: block !important;
}
.empty-state h3, .empty-state h4 {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  color: #F8FAFC !important;
  font-size: 18px !important;
  margin: 0 0 8px 0 !important;
}
.empty-state p {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 14px !important;
  color: #9CA3AF !important;
  margin: 0 !important;
  max-width: 280px !important;
  line-height: 1.6 !important;
}

/* ── البند 11: Typography المسافة واسم الصيدلية ── */
.distance-badge, .pharmacy-distance, [class*="distance"] {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: #9CA3AF !important;
}

/* ── البند 12: توحيد نظام المصادقة والمودالات (إزالة أي أزرق/بنفسجي/وردي) ── */
.modal, .modal-content, .auth-card, .auth-form {
  background: #0A1F1A !important;
  color: #F8FAFC !important;
  border: 1px solid rgba(52, 216, 158, 0.2) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}
.modal-header {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  color: #FFFFFF !important;
  border-radius: 24px 24px 0 0 !important;
  padding: 18px 24px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.modal-header * {
  color: #FFFFFF !important;
}

.auth-form .input-field, .modal .input-field, input, select, textarea {
  background: #0D221C !important; /* خلفية داكنة صلبة تمنع فرض اللون الأبيض من المتصفح أو تداخل الألوان */
  border: 1.5px solid rgba(52, 216, 158, 0.2) !important;
  color: #FFFFFF !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 15px !important;
  transition: all 0.2s ease !important;
}
.auth-form .input-field:focus, .modal .input-field:focus, input:focus, select:focus, textarea:focus {
  border-color: #34D89E !important;
  background: #0A1F1A !important;
  box-shadow: 0 0 0 3px rgba(52, 216, 158, 0.2) !important;
  outline: none !important;
  color: #FFFFFF !important;
}

/* حل مشكلة الملء التلقائي (Browser Autofill) باللون الأبيض */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
  -webkit-text-fill-color: #0A1F1A !important;
  -webkit-box-shadow: 0 0 0 1000px #34D89E inset !important;
  box-shadow: 0 0 0 1000px #34D89E inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

.auth-tabs, .auth-toggle-container {
  display: flex !important;
  background: rgba(16, 185, 129, 0.08) !important;
  border-radius: 16px !important;
  padding: 6px !important;
  border: 1px solid rgba(52, 216, 158, 0.15) !important;
  margin-bottom: 20px !important;
  gap: 6px !important;
}
.auth-tab, .auth-toggle-btn {
  flex: 1 !important;
  border-radius: 12px !important;
  padding: 12px !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border: none !important;
  cursor: pointer !important;
  background: transparent !important;
  color: #9CA3AF !important;
  transition: all 0.2s ease !important;
}
.auth-tab.active, .auth-toggle-btn.active {
  background: #10B981 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}
.auth-tab:hover:not(.active), .auth-toggle-btn:hover:not(.active) {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #F8FAFC !important;
}

/* إزالة أي لون أزرق أو بنفسجي أو وردي من الشارات والأزرار */
.badge-blue, .badge-purple, .badge-pink, [class*="blue"], [class*="purple"], [class*="pink"], [style*="#0ea5e9"], [style*="#006c49"] {
  background: rgba(255, 169, 77, 0.15) !important;
  color: #FFA94D !important;
  border-color: rgba(255, 169, 77, 0.3) !important;
}

/* ── البند 2 (تكملة): شارة العرض لأي عنصر يحمل نار أو خصم ── */
[title*="خص"], [title*="🔥"], [style*="#FFA94D"] {
  background: #FFA94D !important;
  color: #0A1F1A !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 0 12px 0 12px !important;
  box-shadow: 0 2px 8px rgba(255, 169, 77, 0.3) !important;
}

/* ── البند 3: ضبط وتحديث بطاقة البحث السريع (بدون لمس HTML) ── */
.search-card {
  background: rgba(16, 185, 129, 0.05) !important;
  border: 1px solid rgba(52, 216, 158, 0.15) !important;
  border-radius: 20px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}
.search-card h3 {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #F8FAFC !important;
  margin: 0 0 12px 0 !important;
}
.search-wrapper input#medicine-search, .search-input {
  background: rgba(10, 31, 26, 0.8) !important;
  border: 1.5px solid rgba(52, 216, 158, 0.25) !important;
  color: #F8FAFC !important;
  border-radius: 14px !important;
  height: 52px !important;
  padding-inline-start: 44px !important;
  padding-inline-end: 88px !important;
  font-weight: 600 !important;
}
.search-wrapper input#medicine-search:focus, .search-input:focus {
  border-color: #34D89E !important;
  box-shadow: 0 0 0 3px rgba(52, 216, 158, 0.2) !important;
}
.search-wrapper .search-icon {
  color: #10B981 !important;
  font-size: 22px !important;
  right: 14px !important;
}
#voice-search-btn, #barcode-search-btn {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10B981 !important;
  border: none !important;
  border-radius: 10px !important;
  width: 34px !important;
  height: 34px !important;
}
#voice-search-btn:hover, #barcode-search-btn:hover {
  background: #10B981 !important;
  color: #0A1F1A !important;
}

/* ── البند 8: إزالة التدرج السماوي/الأزرق من بطاقة مواعيد أدويتي ── */
.glass-card, [style*="rgba(8, 145, 178"] {
  background: rgba(16, 185, 129, 0.05) !important;
  border: 1px solid rgba(52, 216, 158, 0.15) !important;
}

#forgot-password-link {
  color: #FFA94D !important;
  background: rgba(255, 169, 77, 0.1) !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  display: inline-block !important;
}
#forgot-password-link:hover {
  background: rgba(255, 169, 77, 0.2) !important;
  color: #FFFFFF !important;
}