/* ================================================================
   دؤوي — نظام الألوان الموحد 2026 (Unified Theme Override)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ── Default / Dark Emerald Theme Design Tokens ── */
  --bg-primary:          #0A1F1A;
  --bg-surface:          #0F2921;
  --bg-surface-elevated: #14332A;

  --accent-primary:      #10B981;
  --accent-secondary:    #34D89E;
  --alert-amber:         #FFA94D;
  --status-error:        #F87171;

  --text-primary:        #F5F5F5 !important;
  --text-secondary:      #9CA3AF;
  --text-muted:          #6B7280;

  --color-primary:        #10B981 !important;
  --color-primary-light:  #34D89E !important;
  --color-primary-dim:    #34D89E !important;
  --color-primary-bg:     rgba(16, 185, 129, 0.10) !important;
  --color-secondary:      #34D89E !important;
  --color-secondary-light:#34D89E !important;
  --color-error:          #F87171 !important;
  --color-warning:        #FFA94D !important;
  --color-success:        #10B981 !important;

  --bg-page:              #0A1F1A !important;
  --bg-card:              #0F2921 !important;
  --bg-container:         #14332A !important;
  --bg-container-low:     #0F2921 !important;
  --bg-container-high:    #1A3D33 !important;
  --bg-body:              #0A1F1A !important;
  --bg-header:            rgba(10, 31, 26, 0.92) !important;

  --text-on-primary:      #FFFFFF !important;
  --text-hint:            #6B7280 !important;
  --text-main:            #F5F5F5 !important;

  --border-color:         rgba(52, 216, 158, 0.15) !important;
  --border-subtle:        rgba(52, 216, 158, 0.08) !important;

  --shadow-card:    0 4px 24px -4px rgba(16, 185, 129, 0.10) !important;
  --shadow-modal:   0 20px 60px -8px rgba(0, 0, 0, 0.5) !important;
  --shadow-btn:     0 4px 14px rgba(16, 185, 129, 0.20) !important;

  --font-body:     'IBM Plex Sans Arabic', 'Inter', sans-serif !important;
  --font-headline: 'IBM Plex Sans Arabic', 'Inter', sans-serif !important;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  --glass-bg-light:      rgba(15, 41, 33, 0.85) !important;
  --glass-bg-mid:        rgba(15, 41, 33, 0.65) !important;
  --glass-bg-dark:       rgba(10, 31, 26, 0.50) !important;
  --glass-border:        rgba(52, 216, 158, 0.12) !important;
  --glass-border-mid:    rgba(52, 216, 158, 0.06) !important;
  --glass-shadow:        0 8px 32px rgba(0, 0, 0, 0.30) !important;
  --glass-shadow-hover:  0 16px 48px rgba(16, 185, 129, 0.18) !important;
}

html[data-theme="light"] {
  /* ── Light Emerald Theme Design Tokens (Perfect contrast & readability) ── */
  --bg-primary:          #F4FAF7 !important;
  --bg-surface:          #FFFFFF !important;
  --bg-surface-elevated: #F0F7F4 !important;

  --accent-primary:      #10B981 !important;
  --accent-secondary:    #059669 !important;
  --alert-amber:         #D97706 !important;
  --status-error:        #EF4444 !important;

  --text-primary:        #111827 !important;
  --text-secondary:      #4B5563 !important;
  --text-muted:          #6B7280 !important;

  --color-primary:        #10B981 !important;
  --color-primary-light:  #059669 !important;
  --color-primary-dim:    #059669 !important;
  --color-primary-bg:     rgba(16, 185, 129, 0.06) !important;
  --color-secondary:      #059669 !important;
  --color-secondary-light:#059669 !important;
  --color-error:          #EF4444 !important;
  --color-warning:         #D97706 !important;
  --color-success:        #10B981 !important;

  --bg-page:              #F4FAF7 !important;
  --bg-card:              #FFFFFF !important;
  --bg-container:         #F0F7F4 !important;
  --bg-container-low:     #FFFFFF !important;
  --bg-container-high:    #E6F4EA !important;
  --bg-body:              #F4FAF7 !important;
  --bg-header:            rgba(255, 255, 255, 0.96) !important;

  --text-on-primary:      #FFFFFF !important;
  --text-hint:            #6B7280 !important;
  --text-main:            #111827 !important;

  --border-color:         rgba(16, 185, 129, 0.18) !important;
  --border-subtle:        rgba(16, 185, 129, 0.08) !important;

  --shadow-card:    0 4px 24px -4px rgba(16, 185, 129, 0.06) !important;
  --shadow-modal:   0 20px 60px -8px rgba(0, 0, 0, 0.12) !important;
  --shadow-btn:     0 4px 14px rgba(16, 185, 129, 0.15) !important;

  --glass-bg-light:      rgba(255, 255, 255, 0.92) !important;
  --glass-bg-mid:        rgba(255, 255, 255, 0.75) !important;
  --glass-bg-dark:       rgba(240, 247, 244, 0.70) !important;
  --glass-border:        rgba(16, 185, 129, 0.15) !important;
  --glass-border-mid:    rgba(16, 185, 129, 0.08) !important;
  --glass-shadow:        0 8px 32px rgba(16, 185, 129, 0.05) !important;
  --glass-shadow-hover:  0 16px 48px rgba(16, 185, 129, 0.10) !important;
}

body {
  font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif !important;
  background: var(--bg-page) !important;
  color: var(--text-primary) !important;
  -webkit-font-smoothing: antialiased;
}

/* ── 2. Natural Bouncing Scroll Physics ── */
html, body {
  overflow: hidden !important;
  overscroll-behavior-y: none !important;
}

.app-main, .modal, .scroll-container, .panel, .modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain !important;
}

.app-section {
  overflow-y: visible !important;
}

/* ── 3. Buttons ── */
.btn-primary {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: var(--shadow-btn) !important;
}
.btn-primary:hover {
  background: var(--color-primary-light) !important;
}

.btn-secondary {
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 1.5px solid var(--color-primary) !important;
  box-shadow: none !important;
}
.btn-secondary:hover {
  background: var(--color-primary-bg) !important;
  color: var(--color-primary) !important;
}

/* ── 4. Cards & Modals ── */
.app-section, .modal, .modal-body, .glass-card, .search-card, .feature-card, 
.order-card, .pharmacy-card, .product-card, .category-card, .profile-menu, 
.profile-menu-item, .report-card, .stat-card {
  background: var(--bg-card) !important;
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

/* ── 5. Elevated container items ── */
.transaction-item-card, .notif-item-card {
  background: var(--bg-container) !important;
  background-color: var(--bg-container) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
  color: var(--text-primary) !important;
}
.transaction-item-card *, .notif-item-card * {
  color: var(--text-primary) !important;
}
.transaction-item-card .material-symbols-outlined, 
.notif-item-card .material-symbols-outlined {
  color: inherit !important;
}

.text-hint, .text-secondary, .timeline-desc, 
[style*="color: var(--text-hint)"], 
[style*="color: var(--text-secondary)"] {
  color: var(--text-secondary) !important;
}


/* ============================================================
   ══ 50. PROFILE MENU & SETTINGS READABILITY OVERRIDES ══
   يضمن التناسق التام والوضوح العالي في شاشة حسابي بالوضعين المضيء والمظلم
   ============================================================ */

.profile-menu {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 24px !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.profile-menu-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  transform: none !important;
}

.profile-menu-item:last-child {
  border-bottom: none !important;
}

.profile-menu-item:hover {
  background: var(--color-primary-bg) !important;
  transform: scale(0.99) !important;
  box-shadow: none !important;
}

.profile-menu-item span {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

.profile-menu-item .arrow {
  color: var(--text-secondary) !important;
}

/* تحسين شكل القوائم المنسدلة للثيم والخيارات */
.profile-menu-item select {
  background: var(--bg-container) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 10px !important;
  padding: 6px 12px !important;
  font-weight: 700 !important;
  outline: none !important;
  font-family: inherit !important;
  cursor: pointer !important;
  font-size: 13px !important;
}

.profile-menu-item select option {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* ============================================================
   ══ 60. PHARMACY DASHBOARD CUSTOM THEME OVERRIDES (HIGH CONTRAST LIGHT MODE) ══
   يصحح الألوان غير الواضحة ويوفر تباينًا فائقًا باستخدام الثيم المضيء المعتمد
   ============================================================ */

/* 1. تفعيل السكرول الكامل لواجهة الصيدلية بالاعتماد على سكرول المتصفح الرئيسي فقط */
html.pharmacy-body, body.pharmacy-body {
  overflow: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: auto !important;
  height: auto !important;
  min-height: 100vh !important;
}

.pharmacy-body .dashboard {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

.pharmacy-body .dashboard-main {
  overflow: visible !important;
  height: auto !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

.pharmacy-body .panel, 
.pharmacy-body .orders-panel, 
.pharmacy-body .inventory-panel, 
.pharmacy-body .content-panel {
  overflow: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  flex: none !important; /* إلغاء التمدد القسري للسماح للوحة بالنمو الطبيعي */
}

/* 2. فرض الثيم المضيء لواجهة الصيدلية بالكامل */
html[data-theme="light"].pharmacy-body, [data-theme="light"] .pharmacy-body {
  /* نسخ متغيرات الثيم المضيء لضمان وضوحها 100% */
  --bg-primary:          #F4FAF7 !important;
  --bg-surface:          #FFFFFF !important;
  --bg-surface-elevated: #F0F7F4 !important;

  --accent-primary:      #10B981 !important;
  --accent-secondary:    #059669 !important;
  --alert-amber:         #D97706 !important;
  --status-error:        #EF4444 !important;

  --text-primary:        #111827 !important;
  --text-secondary:      #4B5563 !important;
  --text-muted:          #6B7280 !important;

  --color-primary:        #10B981 !important;
  --color-primary-light:  #059669 !important;
  --color-primary-dim:    #059669 !important;
  --color-primary-bg:     rgba(16, 185, 129, 0.06) !important;
  --color-secondary:      #059669 !important;
  --color-secondary-light:#059669 !important;
  --color-error:          #EF4444 !important;
  --color-warning:         #D97706 !important;
  --color-success:        #10B981 !important;

  --bg-page:              #F4FAF7 !important;
  --bg-card:              #FFFFFF !important;
  --bg-container:         #F0F7F4 !important;
  --bg-container-low:     #FFFFFF !important;
  --bg-container-high:    #E6F4EA !important;
  --bg-body:              #F4FAF7 !important;
  --bg-header:            rgba(255, 255, 255, 0.96) !important;

  --text-on-primary:      #FFFFFF !important;
  --text-hint:            #6B7280 !important;
  --text-main:            #111827 !important;

  --border-color:         rgba(16, 185, 129, 0.18) !important;
  --border-subtle:        rgba(16, 185, 129, 0.08) !important;

  --shadow-card:    0 4px 24px -4px rgba(16, 185, 129, 0.06) !important;
  --shadow-modal:   0 20px 60px -8px rgba(0, 0, 0, 0.12) !important;
  --shadow-btn:     0 4px 14px rgba(16, 185, 129, 0.15) !important;

  --glass-bg-light:      rgba(255, 255, 255, 0.92) !important;
  --glass-bg-mid:        rgba(255, 255, 255, 0.75) !important;
  --glass-bg-dark:       rgba(240, 247, 244, 0.70) !important;
  --glass-border:        rgba(16, 185, 129, 0.15) !important;
  --glass-border-mid:    rgba(16, 185, 129, 0.08) !important;
  --glass-shadow:        0 8px 32px rgba(16, 185, 129, 0.05) !important;
  --glass-shadow-hover:  0 16px 48px rgba(16, 185, 129, 0.10) !important;
}

/* 3. الخلفية العامة لصفحة الصيدلية تسجيل الدخول واللوحة */
.pharmacy-body, 
.pharmacy-body body, 
.pharmacy-body .pharmacy-auth, 
.pharmacy-body #pharmacy-auth,
.pharmacy-body .dashboard-main,
.pharmacy-body .main-content {
  background-color: #F4FAF7 !important;
  background: #F4FAF7 !important;
  color: #111827 !important;
}

/* 4. كرت تسجيل الدخول */
.pharmacy-body .auth-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  box-shadow: 0 20px 50px rgba(16, 185, 129, 0.08) !important;
  color: #111827 !important;
}

.pharmacy-body .auth-card h2, 
.pharmacy-body .auth-card .input-label {
  color: #111827 !important;
}

/* 5. الشريط الجانبي (Sidebar) */
.pharmacy-body .sidebar {
  background: #FFFFFF !important;
  border-left: 1px solid rgba(16, 185, 129, 0.15) !important;
  box-shadow: -4px 0 24px rgba(16, 185, 129, 0.05) !important;
}

.pharmacy-body .sidebar-brand {
  border-bottom: 1px solid rgba(16, 185, 129, 0.15) !important;
}

.pharmacy-body .brand-name {
  color: #10B981 !important;
}

.pharmacy-body .brand-sub {
  color: #4B5563 !important;
}

.pharmacy-body .sidebar-btn {
  color: #4B5563 !important;
}

.pharmacy-body .sidebar-btn:hover {
  background: rgba(16, 185, 129, 0.05) !important;
  color: #10B981 !important;
}

.pharmacy-body .sidebar-btn.active {
  background: #10B981 !important;
  color: #FFFFFF !important;
  border: 1px solid #10B981 !important;
}

.pharmacy-body .sidebar-badge {
  background: #FFA94D !important;
  color: #0A1F1A !important;
}

/* 6. كروت الإحصائيات والأقسام */
.pharmacy-body .stat-card, 
.pharmacy-body .report-card, 
.pharmacy-body .panel, 
.pharmacy-body .orders-panel, 
.pharmacy-body .content-panel, 
.pharmacy-body .inventory-panel, 
.pharmacy-body .card,
.pharmacy-body .glass {
  background: #FFFFFF !important;
  border: 1px solid rgba(16, 185, 129, 0.15) !important;
  color: #111827 !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.04) !important;
}

.pharmacy-body .stat-card h3, 
.pharmacy-body .report-card h3,
.pharmacy-body .report-label {
  color: #4B5563 !important;
}

.pharmacy-body .stat-value, 
.pharmacy-body .report-value,
.pharmacy-body .stat-card p, 
.pharmacy-body .report-card p {
  color: #10B981 !important;
}

/* 7. الهيدر والشرائح */
.pharmacy-body .dashboard-header {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.15) !important;
}

.pharmacy-body .stat-chip {
  background: #F0F7F4 !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  color: #111827 !important;
}

.pharmacy-body .stat-chip-green {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
}

.pharmacy-body .stat-chip-blue, 
.pharmacy-body .stat-chip-indigo {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.18) !important;
}

.pharmacy-body .stat-chip-red, 
.pharmacy-body .stat-chip-error {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #EF4444 !important;
  border-color: rgba(239, 68, 68, 0.18) !important;
}

#frozen-chip {
  background: rgba(255, 169, 77, 0.1) !important;
  color: #FFA94D !important;
  border-color: rgba(255, 169, 77, 0.2) !important;
}

/* 8. الجداول والمخزون */
.pharmacy-body .inventory-table-wrapper {
  border: 1px solid rgba(16, 185, 129, 0.15) !important;
}

.pharmacy-body .inventory-table {
  background: #FFFFFF !important;
  color: #111827 !important;
}

.pharmacy-body .inventory-table th {
  background: #F0F7F4 !important;
  color: #059669 !important;
  border-bottom: 2px solid rgba(16, 185, 129, 0.2) !important;
}

.pharmacy-body .inventory-table td {
  border-bottom: 1px solid rgba(16, 185, 129, 0.08) !important;
  color: #111827 !important;
}

.pharmacy-body .inventory-table tr:hover {
  background: #F4FAF7 !important;
}

/* 9. المحادثات والدردشة */
.pharmacy-body .chat-layout {
  background: #FFFFFF !important;
}

.pharmacy-body .chat-list {
  background: #F0F7F4 !important;
  border-left: 1px solid rgba(16, 185, 129, 0.15) !important;
}

.pharmacy-body .chat-conversation-item {
  border-bottom: 1px solid rgba(16, 185, 129, 0.08) !important;
  color: #111827 !important;
}

.pharmacy-body .chat-conversation-item:hover {
  background: #F4FAF7 !important;
}

.pharmacy-body .chat-conversation-item.active {
  background: rgba(16, 185, 129, 0.1) !important;
  border-right: 4px solid #10B981 !important;
}

.pharmacy-body .chat-active-header,
.pharmacy-body .chat-active-input-bar {
  background: #F0F7F4 !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.15) !important;
  border-top: 1px solid rgba(16, 185, 129, 0.15) !important;
}

.pharmacy-body .chat-active-messages {
  background: #FFFFFF !important;
}

.pharmacy-body .chat-bubble.sent {
  background: #10B981 !important;
  color: #FFFFFF !important;
}

.pharmacy-body .chat-bubble.received {
  background: #F0F7F4 !important;
  color: #111827 !important;
}

/* 10. الأزرار والمودالات والمدخلات */
.pharmacy-body .btn-primary, 
.pharmacy-body button[id*="confirm"], 
.pharmacy-body button[id*="save"], 
.pharmacy-body button[id*="add-medicine"] {
  background: #10B981 !important;
  color: #FFFFFF !important;
}

.pharmacy-body .btn-primary:hover {
  background: #059669 !important;
}

.pharmacy-body .modal, 
.pharmacy-body .modal-content {
  background: #FFFFFF !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  color: #111827 !important;
}

.pharmacy-body .input-field, 
.pharmacy-body select, 
.pharmacy-body textarea {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(16, 185, 129, 0.2) !important;
  color: #111827 !important;
}

.pharmacy-body .input-field:focus,
.pharmacy-body select:focus,
.pharmacy-body textarea:focus {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}