/* ============================================================
   دؤوي — تنسيق لوحة تحكم الصيدلية (Desktop Dashboard)
   ============================================================ */

/* =========================================================
   Android/Xiaomi Chrome Fixes & Optimizations
   ========================================================= */
html, body {
  min-height: 100vh;
  min-height: 100dvh;
}
button, a, .nav-btn, .btn {
  touch-action: manipulation; /* Removes 300ms tap delay */
  -webkit-tap-highlight-color: transparent !important;
}
input, textarea, select {
  font-size: 16px !important; /* Prevents auto-zoom on mobile Chrome */
}

/* ── صفحة تسجيل الدخول ──────────────────────────────────── */
.pharmacy-auth {
  height: 100dvh;
  max-height: 100dvh;
  position: absolute;
  top: 0; left: 0; width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-lg);
  padding: 40px var(--space-lg);
  /* Elegant glassmorphism background replacing the harsh green */
  background: linear-gradient(160deg, #0D2820 0%, #e0f2fe 100%);
}

[data-theme="dark"] .pharmacy-auth {
  background: linear-gradient(160deg, #0A1F1A 0%, #1e293b 100%);
}

.auth-brand { text-align: center; color: var(--color-primary); margin-bottom: 8px; }
.auth-brand .brand-logo { font-size: 64px; margin-bottom: var(--space-md); }
.auth-brand h1 { font-family: var(--font-headline); font-size: 40px; font-weight: 800; background: linear-gradient(135deg, var(--color-primary) 0%, #10B981 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.auth-brand p  { color: var(--text-secondary); margin-top: 4px; font-size: 16px; font-weight: 500; }

.auth-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  gap:           var(--space-lg);
}
.auth-card h2 { font-family: var(--font-headline); font-size: 22px; text-align: center; }

/* ── تخطيط لوحة التحكم ───────────────────────────────────── */
.dashboard {
  display:    grid;
  grid-template-columns: 260px 1fr;
  min-height: 100dvh;
}

/* ── الشريط الجانبي ──────────────────────────────────────── */
.sidebar {
  background:     #0d1f17;
  display:        flex;
  flex-direction: column;
  padding:        var(--space-lg) var(--space-md);
  gap:            var(--space-md);
  position:       sticky;
  top:            0;
  height:         100dvh;
  overflow-y:     auto;
}

.sidebar-brand {
  display:     flex;
  align-items: center;
  gap:         var(--space-sm);
  padding:     var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}
.brand-icon  { font-size: 32px; }
.brand-name  { font-family: var(--font-headline); font-size: 20px; font-weight: 700; color: white; }
.brand-sub   { font-size: 12px; color: rgba(255,255,255,0.5); }

.sidebar-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }

.sidebar-btn {
  display:       flex;
  align-items:   center;
  gap:           var(--space-sm);
  padding:       12px var(--space-md);
  border:        none;
  border-radius: var(--radius-md);
  background:    transparent;
  color:         rgba(255,255,255,0.6);
  font-family:   var(--font-body);
  font-size:     14px;
  cursor:        pointer;
  transition:    all var(--transition);
  width:         100%;
  text-align:    start;
}
.sidebar-btn:hover { background: rgba(255,255,255,0.08); color: white; }
.sidebar-btn.active {
  background: var(--color-primary);
  color:      white;
}
.sidebar-btn .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }

.sidebar-badge {
  margin-inline-start: auto;
  background: var(--color-error);
  color:      white;
  font-size:  11px;
  font-weight: 700;
  min-width:  20px;
  height:     20px;
  border-radius: 10px;
  display:    flex;
  align-items: center;
  justify-content: center;
  padding:    0 5px;
}

.sidebar-footer { border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--space-md); display: flex; flex-direction: column; gap: 8px; }

.sidebar-status {
  display:     flex;
  align-items: center;
  gap:         var(--space-sm);
  color:       rgba(255,255,255,0.7);
  font-size:   13px;
  padding:     var(--space-sm) var(--space-md);
}
.status-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    var(--color-success);
  box-shadow:    0 0 8px var(--color-success);
  animation:     pulse 2s infinite;
}
.status-dot.closed { background: var(--color-error); box-shadow: 0 0 8px var(--color-error); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

.logout-btn { color: rgba(255,100,100,0.7) !important; }
.logout-btn:hover { background: rgba(248,113,113,0.2) !important; color: #ff8080 !important; }

/* ── المحتوى الرئيسي ─────────────────────────────────────── */
.dashboard-main {
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  min-width:      0;
}

.dashboard-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         var(--space-md) var(--space-xl);
  background:      var(--bg-card);
  border-bottom:   1px solid var(--border-subtle);
  position:        sticky;
  top:             0;
  z-index:         40;
  gap:             var(--space-md);
}

.header-stats { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.stat-chip {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       8px 14px;
  background:    var(--bg-container);
  border-radius: var(--radius-full);
  font-size:     13px;
  font-weight:   500;
  color:         var(--text-secondary);
}
.stat-chip .material-symbols-outlined { font-size: 16px; }
.stat-chip-green { background: rgba(16,185,129,0.12); color: #065f46; }
.stat-chip-blue  { background: rgba(52,216,158,0.1);   color: var(--color-secondary); }

.header-actions { display: flex; align-items: center; gap: var(--space-sm); }
.header-time    { font-size: 13px; font-weight: 600; color: var(--text-hint); font-family: monospace; }

/* ── اللوحات ─────────────────────────────────────────────── */
.panel {
  flex:      1;
  padding:   var(--space-xl);
  overflow-y: auto;
  display:   flex;
  flex-direction: column;
  gap:       var(--space-lg);
}

.panel-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}
.panel-header h2 { font-family: var(--font-headline); font-size: 22px; font-weight: 700; }

.panel-filters { display: flex; gap: var(--space-sm); }

/* ── شبكة الطلبات ────────────────────────────────────────── */
.orders-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap:                   var(--space-lg);
  align-content:         start;
}

.order-ph-card {
  background:    var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-card);
  padding:       var(--space-lg);
  cursor:        pointer;
  transition:    all var(--transition);
  border-top:    3px solid var(--border-subtle);
  position:      relative;
  overflow:      hidden;
}
.order-ph-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.12); transform: translateY(-2px); }
.order-ph-card.pending   { border-top-color: var(--color-warning); }
.order-ph-card.confirmed { border-top-color: var(--color-secondary); }
.order-ph-card.preparing { border-top-color: var(--color-primary-light); }
.order-ph-card.ready     { border-top-color: var(--color-primary); }

.order-ph-new-badge {
  position:   absolute;
  top:        0;
  inset-inline-start: 0;
  background: var(--color-error);
  color:      white;
  font-size:  10px;
  font-weight: 700;
  padding:    3px 10px;
  border-radius: 0 0 var(--radius-md) 0;
}

.order-ph-header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  margin-bottom:   var(--space-md);
}
.order-ph-patient { font-size: 17px; font-weight: 700; }
.order-ph-time    { font-size: 12px; color: var(--text-hint); }

.order-ph-prescription {
  background:    var(--bg-container-low);
  border-radius: var(--radius-md);
  padding:       var(--space-md);
  margin-bottom: var(--space-md);
  font-size:     13px;
  color:         var(--text-secondary);
  max-height:    80px;
  overflow:      hidden;
  position:      relative;
}
.order-ph-prescription::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  height:     30px;
  background: linear-gradient(transparent, var(--bg-container-low));
}
.order-ph-prescription-label { font-size: 11px; font-weight: 600; color: var(--color-secondary); margin-bottom: 4px; }

.order-ph-footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}
.order-ph-distance { font-size: 12px; color: var(--text-hint); display: flex; align-items: center; gap: 4px; }

/* ── بطاقة تفاصيل الطلب (Modal) ─────────────────────────── */
.order-detail-modal { max-width: 560px; }
.order-modal-content { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-lg); }

.order-section-title { font-size: 12px; font-weight: 700; color: var(--text-hint); text-transform: uppercase; letter-spacing: 0.05em; }

.prescription-image-preview {
  width:         100%;
  max-height:    200px;
  object-fit:    contain;
  border-radius: var(--radius-md);
  border:        1px solid var(--border-subtle);
  background:    var(--bg-container);
}

.ocr-result-box {
  background:    var(--bg-container);
  border-radius: var(--radius-md);
  padding:       var(--space-md);
  font-size:     14px;
  line-height:   1.7;
  max-height:    120px;
  overflow-y:    auto;
  border:        1px solid var(--border-subtle);
  white-space:   pre-wrap;
}

.availability-btns {
  display: flex;
  gap:     var(--space-sm);
}
.avail-btn {
  flex:          1;
  padding:       10px;
  border:        2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size:     14px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all var(--transition);
  background:    var(--bg-card);
}
.avail-btn.available    { border-color: var(--color-success); color: var(--color-success); }
.avail-btn.available:hover { background: var(--color-success); color: white; }
.avail-btn.unavailable  { border-color: var(--color-error); color: var(--color-error); }
.avail-btn.unavailable:hover { background: var(--color-error); color: white; }

.order-modal-actions {
  display:         flex;
  justify-content: flex-end;
  align-items:     center;
  gap:             var(--space-sm);
  border-top:      1px solid var(--border-subtle);
  padding-top:     var(--space-lg);
}

/* ── الخريطة ─────────────────────────────────────────────── */
.map-container {
  height:        calc(100dvh - 180px);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  border:        1px solid var(--border-subtle);
  background:    var(--bg-container);
}

/* ── المخزون ─────────────────────────────────────────────── */
.inventory-search { margin-bottom: var(--space-md); }
.inventory-search .input-field { max-width: 360px; }

.stock-alerts { display: flex; flex-direction: column; gap: var(--space-sm); }
.stock-alert-item {
  display:       flex;
  align-items:   center;
  gap:           var(--space-md);
  padding:       var(--space-sm) var(--space-md);
  background:    rgba(245,158,11,0.1);
  border-radius: var(--radius-md);
  border:        1px solid rgba(245,158,11,0.3);
  font-size:     13px;
}
.stock-alert-item.critical { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.3); }

.inventory-table-wrapper { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }
.inventory-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.inventory-table th {
  background:  var(--bg-container);
  padding:     12px var(--space-md);
  text-align:  start;
  font-size:   12px;
  font-weight: 700;
  color:       var(--text-hint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.inventory-table td {
  padding:     14px var(--space-md);
  border-top:  1px solid var(--border-subtle);
  vertical-align: middle;
}
.inventory-table tr:hover td { background: var(--bg-container-low); }
.stock-low   { color: var(--color-error); font-weight: 700; }
.stock-ok    { color: var(--color-success); font-weight: 600; }
.stock-mid   { color: var(--color-warning); font-weight: 600; }

/* ── الدردشة ─────────────────────────────────────────────── */
.chat-layout {
  display:     grid;
  grid-template-columns: 280px 1fr;
  gap:         0;
  height:      calc(100dvh - 180px);
  border:      1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow:    hidden;
}
.chat-list { border-inline-end: 1px solid var(--border-subtle); overflow-y: auto; }
.chat-list-header { padding: var(--space-md) var(--space-lg); font-weight: 700; font-size: 15px; background: var(--bg-container); border-bottom: 1px solid var(--border-subtle); }
.chat-conversation-item {
  padding:   var(--space-md) var(--space-lg);
  cursor:    pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition);
}
.chat-conversation-item:hover { background: var(--bg-container-low); }
.chat-conversation-item.active { background: var(--color-primary-bg); }
.chat-patient-name { font-weight: 600; font-size: 14px; }
.chat-last-msg     { font-size: 12px; color: var(--text-hint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-window { display: flex; flex-direction: column; min-height: 0; overflow: hidden; height: 100%; min-width: 0; }
.chat-empty  { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-hint); gap: var(--space-md); }

.chat-messages, .panel { flex: 1; overflow-y: auto; padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.chat-bubble { max-width: 70%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; }
.chat-bubble.sent     { background: var(--color-primary); color: white; align-self: flex-start; border-bottom-right-radius: 4px; }
.chat-bubble.received { background: var(--bg-container); color: var(--text-primary); align-self: flex-end; border-bottom-left-radius: 4px; }

.chat-input-bar { display: flex; gap: var(--space-sm); padding: var(--space-md); border-top: 1px solid var(--border-subtle); }
.chat-input-bar .input-field { flex: 1; border-radius: var(--radius-full); }

/* ── التقارير ────────────────────────────────────────────── */
.reports-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.report-card {
  background:    var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-card);
  padding:       var(--space-xl);
  text-align:    center;
  display:       flex;
  flex-direction: column;
  gap:           var(--space-sm);
  transition:    all var(--transition);
}
.report-card:hover { box-shadow: 0 8px 32px rgba(16,185,129,0.12); transform: translateY(-2px); }
.report-icon  { font-size: 40px; }
.report-value { font-family: var(--font-headline); font-size: 32px; font-weight: 700; color: var(--color-primary); }
.report-label { font-size: 13px; color: var(--text-hint); }

.chart-placeholder { background: var(--bg-card); border-radius: var(--radius-xl); height: 200px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .dashboard { grid-template-columns: 220px 1fr; }
  .reports-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .dashboard { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  
  .chat-layout {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 100px);
  }
  .chat-list {
    flex: 0 0 200px;
    border-inline-end: none;
    border-bottom: 1px solid var(--border-subtle);
  }
  .chat-window {
    flex: 1;
    min-height: 0;
  }
}

/* ── محادثة الصيدلية النشطة (Active Chat Box) ────────────────── */
.chat-active-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.chat-active-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-card);
}
.active-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-secondary), #10B981);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}
#active-chat-patient-name {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}
.chat-active-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
  background: var(--bg-container-low);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.chat-active-input-bar {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-card);
  align-items: center;
}
.chat-active-input-bar .input-field {
  flex: 1;
  border-radius: var(--radius-full) !important;
}

/* فقاعات رسائل الصيدلية */
.pharmacy-msg-bubble {
  max-width: 65%;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  word-break: break-word;
  animation: messageSlideIn 0.25s cubic-bezier(0.1, 0.8, 0.2, 1);
  text-align: right;
}
.pharmacy-msg-bubble.sender {
  background: #10B981 !important; /* أزرق للصيدلية */
  color: white !important;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.pharmacy-msg-bubble.receiver {
  background: var(--color-primary) !important; /* أخضر للمريض */
  border: none !important;
  color: white !important;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.pharmacy-msg-time {
  display: block;
  font-size: 10px;
  margin-top: 6px;
  opacity: 0.8;
  text-align: left;
}

/* وميض تنبيه الرسائل */
@keyframes blink-animation {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
.blink-alert {
  animation: blink-animation 1s infinite alternate;
  box-shadow: 0 0 8px var(--color-error);
}

/* ============================================================
   دؤوي — Pharmacy Glass Upgrade v4.0
   Glassmorphism for Dashboard Panels
   ============================================================ */

/* ── Pharmacy Auth Screen — Upgraded ──────────────────────── */
.pharmacy-auth {
  background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%) !important;
}

.auth-brand {
  color: var(--color-primary) !important;
}

.auth-card {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.06),
              0 1px 0 rgba(255,255,255,1) inset !important;
  border-radius: 24px !important;
}

/* ── Sidebar Upgrade ─────────────────────────────────────── */
.sidebar {
  background: linear-gradient(180deg, #0a1a14 0%, #0d2218 50%, #091520 100%) !important;
  border-right: 1px solid rgba(8, 145, 178, 0.15) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.20) !important;
}

.sidebar-btn {
  border-radius: 14px !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.sidebar-btn.active,
.sidebar-btn:hover {
  background: linear-gradient(135deg,
    rgba(8, 145, 178, 0.2) 0%,
    rgba(16, 185, 129, 0.15) 100%) !important;
  color: white !important;
  border: 1px solid rgba(8, 145, 178, 0.25) !important;
}

.sidebar-btn:active {
  transform: scale(0.95) !important;
  transition-duration: 0.1s !important;
}

/* ── Main Dashboard Area ─────────────────────────────────── */
.main-content {
  background: linear-gradient(160deg,
    #f0fdf8 0%,
    #0D2820 40%,
    #0F2921 100%) !important;
}

/* ── Stats Cards — Gradient Glass ─────────────────────────── */
.stat-card,
.report-card {
  background: rgba(255, 255, 255, 0.80) !important;


  border: 1px solid rgba(255, 255, 255, 0.50) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px rgba(16, 185, 129, 0.08),
              0 1px 0 rgba(255,255,255,0.6) inset !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  overflow: hidden !important;
  position: relative !important;
}

.stat-card::before,
.report-card::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  background: radial-gradient(circle,
    rgba(8, 145, 178, 0.06) 0%,
    transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

.stat-card:hover,
.report-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 36px rgba(16, 185, 129, 0.15),
              0 1px 0 rgba(255,255,255,0.8) inset !important;
  border-color: rgba(8, 145, 178, 0.25) !important;
}

/* ── Orders Panel / Content Panels ────────────────────────── */
.orders-panel,
.panel,
.content-panel,
.inventory-panel {
  background: rgba(255, 255, 255, 0.80) !important;


  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px rgba(16, 185, 129, 0.06) !important;
}

/* ── Order Cards (Pharmacy side) ──────────────────────────── */
.order-item,
.order-card-ph {
  background: rgba(255, 255, 255, 0.85) !important;


  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.06) !important;
  transition: all 0.2s ease !important;
}

.order-item:hover,
.order-card-ph:hover {
  transform: translateX(-2px) !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.10) !important;
  border-color: rgba(8, 145, 178, 0.25) !important;
}

/* ── Header Top Bar (Pharmacy) ─────────────────────────────── */
.dashboard-header,
.top-bar,
.main-header {
  background: rgba(255, 255, 255, 0.88) !important;


  border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 2px 16px rgba(16, 185, 129, 0.05) !important;
}

/* ── Modals (Pharmacy side) ────────────────────────────────── */
#add-medicine-modal .modal,
#edit-medicine-modal .modal {
  background: rgba(255, 255, 255, 0.92) !important;


  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 24px !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.15) !important;
}

/* ── Inventory Table ─────────────────────────────────────────*/
.inventory-table-wrapper {
  background: rgba(255, 255, 255, 0.75) !important;


  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

table thead {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.06) 0%,
    rgba(8, 145, 178, 0.04) 100%) !important;
}

/* ── Toast Upgrade (Pharmacy) ─────────────────────────────── */
#toast-container .toast,
.toast {
  background: rgba(255, 255, 255, 0.92) !important;


  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
  font-weight: 600 !important;
  color: #0A1F1A !important;
}

/* ── Button Upgrades ──────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, #059669 100%) !important;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.30) !important;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.btn-primary:hover {
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.40) !important;
  transform: translateY(-1px) !important;
}
.btn-primary:active {
  transform: scale(0.94) !important;
  transition-duration: 0.08s !important;
}

/* ── Dark Mode for Pharmacy ───────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .main-content {
    background: linear-gradient(160deg, #0a1410 0%, #0D2820 60%, #0A1F1A 100%) !important;
  }

  .stat-card,
  .orders-panel,
  .panel {
    background: rgba(15, 23, 42, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }
}


.dashboard-main, .panel { min-width: 0 !important; }

/* ══════════════════════════════════════════════════════════
   🩺 SURGICAL FIX — واجهة الصيدلي (جراحي دقيق)
   إصلاح الألوان، التباين، أزرار الإغلاق والحذف
══════════════════════════════════════════════════════════ */

/* ── 1. الشريط الجانبي — ألوان ثابتة دائماً ───────────── */
.sidebar {
  background: #0d1f17 !important;
  color: rgba(255,255,255,0.85) !important;
}

.sidebar-btn {
  color: rgba(255,255,255,0.6) !important;
}

.sidebar-btn:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}

.sidebar-btn.active {
  background: var(--color-primary, #10B981) !important;
  color: #ffffff !important;
}

/* ── 2. هيدر لوحة التحكم — وضع مضيء وداكن ─────────────── */
.dashboard-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.12) !important;
}

@media (prefers-color-scheme: dark) {
  .dashboard-header {
    background: #1e293b !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
  }
}

[data-theme="dark"] .dashboard-header {
  background: #1e293b !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* ── 3. Stat Chips — تباين واضح في كلا الوضعين ────────── */
.stat-chip {
  background: #F1F5F9 !important;
  color: #374151 !important;
  font-weight: 600 !important;
}

.stat-chip .material-symbols-outlined {
  color: #6B7280 !important;
}

.stat-chip-green {
  background: rgba(16, 185, 129, 0.10) !important;
  color: #065f46 !important;
}

.stat-chip-green .material-symbols-outlined {
  color: #059669 !important;
}

.stat-chip-blue {
  background: rgba(37, 99, 235, 0.10) !important;
  color: #1d4ed8 !important;
}

.stat-chip-red {
  background: rgba(239, 68, 68, 0.10) !important;
  color: #F87171 !important;
}

[data-theme="dark"] .stat-chip {
  background: rgba(255,255,255,0.08) !important;
  color: #e2e8f0 !important;
}
@media (prefers-color-scheme: dark) {
  .stat-chip {
    background: rgba(255,255,255,0.08) !important;
    color: #e2e8f0 !important;
  }
}

/* ── 4. أزرار الإغلاق والحذف — واضحة في كلا الوضعين ───── */

/* زر الإغلاق العام */
.btn-icon,
button[title="إغلاق"],
button[aria-label="إغلاق"],
.close-btn,
[id$="-close"],
[id^="close-"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: none !important;
  cursor: pointer !important;
  background: rgba(0,0,0,0.06) !important;
  color: #374151 !important;
  transition: all 0.2s ease !important;
}

.btn-icon:hover,
.close-btn:hover {
  background: rgba(0,0,0,0.12) !important;
  transform: scale(1.08) !important;
}

/* وضع داكن — أزرار الإغلاق */
[data-theme="dark"] .btn-icon,
[data-theme="dark"] .close-btn,
[data-theme="dark"] [id^="close-"] {
  background: rgba(255,255,255,0.10) !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .btn-icon:hover {
  background: rgba(255,255,255,0.18) !important;
}

/* زر الحذف — دائماً أحمر واضح */
.btn-danger,
button[title="حذف"],
[id*="delete"],
[id*="remove"],
.delete-btn {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #F87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  border-radius: 8px !important;
}

.btn-danger:hover,
.delete-btn:hover {
  background: #F87171 !important;
  color: #ffffff !important;
  border-color: #F87171 !important;
}

/* ── 5. الدردشة — فقاعات واضحة ─────────────────────────── */
.pharmacy-msg-bubble.sender {
  background: #10B981 !important;
  color: #ffffff !important;
}

.pharmacy-msg-bubble.receiver {
  background: #10B981 !important;
  color: #ffffff !important;
}

/* نافذة دردشة مريض — وضع داكن */
[data-theme="dark"] .chat-active-messages,
[data-theme="dark"] .chat-messages {
  background: #0A1F1A !important;
}

[data-theme="dark"] .chat-active-header,
[data-theme="dark"] .chat-active-input-bar,
[data-theme="dark"] .chat-input-bar {
  background: #1e293b !important;
  border-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .chat-list-header {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .chat-conversation-item {
  border-color: rgba(255,255,255,0.04) !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .chat-conversation-item:hover {
  background: rgba(255,255,255,0.04) !important;
}

[data-theme="dark"] .chat-conversation-item.active {
  background: rgba(16, 185, 129, 0.15) !important;
}

/* ── 6. الـ Modal في الصيدلي ────────────────────────────── */
.modal,
.overlay .modal {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(16, 185, 129, 0.15) !important;
}

[data-theme="dark"] .modal,
[data-theme="dark"] .overlay .modal {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

[data-theme="dark"] .modal h2,
[data-theme="dark"] .modal h3,
[data-theme="dark"] .modal h4,
[data-theme="dark"] .modal p,
[data-theme="dark"] .modal span,
[data-theme="dark"] .modal label {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .modal-header {
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* ── 7. حقول الإدخال في الصيدلي ─────────────────────────── */
.input-field {
  background: #F9FAFB !important;
  border: 1.5px solid #E5E7EB !important;
  color: #111827 !important;
  border-radius: 10px !important;
}

.input-field:focus {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.10) !important;
  background: #ffffff !important;
}

.input-field::placeholder {
  color: #9CA3AF !important;
}

[data-theme="dark"] .input-field {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #f1f5f9 !important;
}

[data-theme="dark"] .input-field:focus {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
  background: rgba(255,255,255,0.09) !important;
}

[data-theme="dark"] .input-field::placeholder {
  color: #64748b !important;
}

/* ── 8. لوحة الطلبات — وضع داكن ────────────────────────── */
[data-theme="dark"] .order-ph-card {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .order-ph-card:hover {
  background: #273548 !important;
}

[data-theme="dark"] .order-ph-patient {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .order-ph-time {
  color: #94a3b8 !important;
}

[data-theme="dark"] .order-ph-prescription {
  background: rgba(255,255,255,0.04) !important;
  color: #cbd5e1 !important;
}

/* ── 9. جدول المخزون — وضع داكن ─────────────────────────── */
[data-theme="dark"] .inventory-table-wrapper {
  background: #1e293b !important;
  border-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .inventory-table th {
  background: rgba(255,255,255,0.04) !important;
  color: #94a3b8 !important;
}

[data-theme="dark"] .inventory-table td {
  color: #f1f5f9 !important;
  border-top-color: rgba(255,255,255,0.04) !important;
}

[data-theme="dark"] .inventory-table tr:hover td {
  background: rgba(255,255,255,0.03) !important;
}

/* ── 10. Toast في الصيدلي — واضح دائماً ─────────────────── */
.toast,
#toast-container .toast {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
  font-weight: 600 !important;
  border-radius: 14px !important;
}

/* ── 11. تقرير الأرقام — واضح ───────────────────────────── */
[data-theme="dark"] .report-card {
  background: #1e293b !important;
  color: #f1f5f9 !important;
}

[data-theme="dark"] .report-label {
  color: #94a3b8 !important;
}

[data-theme="dark"] .report-value {
  color: #34D89E !important;
}

/* ── 12. Filter buttons الصيدلي — واضحة ────────────────── */
.filter-btn {
  background: #F3F4F6 !important;
  border: 1.5px solid #E5E7EB !important;
  color: #374151 !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  padding: 6px 16px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.filter-btn:hover {
  border-color: #10B981 !important;
  color: #10B981 !important;
}

.filter-btn.active {
  background: #10B981 !important;
  border-color: #10B981 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25) !important;
}

[data-theme="dark"] .filter-btn {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .filter-btn.active {
  background: #10B981 !important;
  border-color: #10B981 !important;
  color: #ffffff !important;
}



/* ============================================================
   ══ 2026 DASHBOARD PRO MAX UPGRADE ══
   Stripe / Airbnb Enterprise Aesthetics | Glass Panels
   ============================================================ */

.sidebar {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  border-left: 1px solid rgba(203, 213, 225, 0.5) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.02) !important;
}

[data-theme="dark"] .sidebar {
  background: rgba(15, 23, 42, 0.88) !important;
  border-left-color: rgba(255, 255, 255, 0.08) !important;
}

.sidebar-btn {
  border-radius: 14px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin: 4px 12px !important;
  width: calc(100% - 24px) !important;
}

.sidebar-btn:hover {
  background: rgba(13, 148, 136, 0.08) !important;
  transform: translateX(-4px);
}

.sidebar-btn.active {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.25) !important;
}

/* ── Enterprise Tables ── */
.inventory-table, table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

.inventory-table th, table th {
  background: var(--bg-container-low) !important;
  padding: 14px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  border-bottom: 2px solid var(--border-color) !important;
}

.inventory-table td, table td {
  padding: 16px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  transition: background 0.2s !important;
}

.inventory-table tr:hover td, table tr:hover td {
  background: rgba(13, 148, 136, 0.04) !important;
}

[data-theme="dark"] .inventory-table tr:hover td {
  background: rgba(20, 184, 166, 0.08) !important;
}