/* ═══════════════════════════════════════════════════════════════
   PREMIUM HEADER v3 – 3D Glossy Icons & Glassmorphism
   Modern macOS/iOS inspired header with depth & vibrant colors
   ═══════════════════════════════════════════════════════════════ */

/* ── Topbar Glass Effect ────────────────────────────────────── */
.ui-modern .admin-topbar.erp-topbar-v2,
.admin-topbar.erp-topbar-v2 {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 4px 24px rgba(15, 23, 42, 0.08),
    0 1px 3px rgba(15, 23, 42, 0.06) !important;
  position: relative !important;
  z-index: 1050 !important;
}

.ui-modern .admin-topbar .tw-px-5 > .tw-flex {
  min-height: 56px;
  align-items: center !important;
}

/* ── Business Name ──────────────────────────────────────────── */
.ui-modern .admin-topbar .topbar-group-left .tw-text-slate-700 {
  background: linear-gradient(135deg, #1e3a8a, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════
   3D GLOSSY ICON BUTTONS – Each with unique color
   NO pseudo-elements – using inset box-shadow for gloss
   ═══════════════════════════════════════════════════════════════ */

/* Reset ALL topbar buttons */
.ui-modern .admin-topbar .admin-topbar-btn,
.ui-modern .admin-topbar .admin-topbar-lang,
.ui-modern .admin-topbar .notifications-menu > a,
.ui-modern .admin-topbar .admin-topbar-pos,
.ui-modern .admin-topbar .admin-topbar-service--repair {
  position: relative !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 8px 14px !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.01em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer;
}

/* ── 1. Menu / Sidebar Toggle – Deep Violet ─────────────── */
.ui-modern .admin-topbar .small-view-button,
.ui-modern .admin-topbar .side-bar-collapse {
  background: linear-gradient(145deg, #8b5cf6, #6d28d9) !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 15px rgba(109, 40, 217, 0.4),
    0 2px 4px rgba(109, 40, 217, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}
.ui-modern .admin-topbar .small-view-button:hover,
.ui-modern .admin-topbar .side-bar-collapse:hover {
  background: linear-gradient(145deg, #a78bfa, #7c3aed) !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow:
    0 8px 25px rgba(109, 40, 217, 0.5),
    0 3px 6px rgba(109, 40, 217, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}

/* ── 2. Quick Access – Amber/Gold 3D ────────────────────── */
.ui-modern .admin-topbar .topbar-quick-actions-toggle {
  background: linear-gradient(145deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 15px rgba(217, 119, 6, 0.4),
    0 2px 4px rgba(217, 119, 6, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}
.ui-modern .admin-topbar .topbar-quick-actions-toggle:hover {
  background: linear-gradient(145deg, #fbbf24, #f59e0b) !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow:
    0 8px 25px rgba(217, 119, 6, 0.5),
    0 3px 6px rgba(217, 119, 6, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}

/* ── 3. POS Button – Emerald Green 3D ───────────────────── */
.ui-modern .admin-topbar .admin-topbar-pos {
  background: linear-gradient(145deg, #10b981, #059669) !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 15px rgba(5, 150, 105, 0.4),
    0 2px 4px rgba(5, 150, 105, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}
.ui-modern .admin-topbar .admin-topbar-pos:hover,
.ui-modern .admin-topbar .admin-topbar-pos:focus {
  background: linear-gradient(145deg, #34d399, #10b981) !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow:
    0 8px 25px rgba(5, 150, 105, 0.5),
    0 3px 6px rgba(5, 150, 105, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}

/* ── 4. Repair Button – Warm Orange 3D ──────────────────── */
.ui-modern .admin-topbar .admin-topbar-service--repair {
  background: linear-gradient(145deg, #f97316, #ea580c) !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 15px rgba(234, 88, 12, 0.4),
    0 2px 4px rgba(234, 88, 12, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}
.ui-modern .admin-topbar .admin-topbar-service--repair:hover,
.ui-modern .admin-topbar .admin-topbar-service--repair:focus {
  background: linear-gradient(145deg, #fb923c, #f97316) !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow:
    0 8px 25px rgba(234, 88, 12, 0.5),
    0 3px 6px rgba(234, 88, 12, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}

/* ── 5. Language Switcher – Sky Blue 3D ─────────────────── */
.ui-modern .admin-topbar .admin-topbar-lang {
  background: linear-gradient(145deg, #0ea5e9, #0284c7) !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 15px rgba(2, 132, 199, 0.4),
    0 2px 4px rgba(2, 132, 199, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}
.ui-modern .admin-topbar .admin-topbar-lang:hover,
.ui-modern .admin-topbar .admin-topbar-lang:focus {
  background: linear-gradient(145deg, #38bdf8, #0ea5e9) !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow:
    0 8px 25px rgba(2, 132, 199, 0.5),
    0 3px 6px rgba(2, 132, 199, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}

/* 3D Flag icon inside language button */
.ui-modern .admin-topbar .admin-topbar-lang .lang-flag-3d {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  width: 26px;
  height: 20px;
  border-radius: 5px;
  font-size: 18px;
  line-height: 1;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

/* Arabic flag – Saudi Arabia */
.ui-modern .admin-topbar .lang-flag-3d--ar {
  background: linear-gradient(180deg, #006c35 0%, #004d25 100%);
  border: 1px solid rgba(0, 77, 37, 0.5);
}

/* English flag – United Kingdom / USA */
.ui-modern .admin-topbar .lang-flag-3d--en {
  background: linear-gradient(180deg, #c8102e 0%, #00247d 50%, #c8102e 100%);
  border: 1px solid rgba(0, 36, 125, 0.5);
}

/* Generic flag for other languages */
.ui-modern .admin-topbar .lang-flag-3d--other {
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  border: 1px solid rgba(102, 126, 234, 0.5);
}

/* Flag in dropdown options */
.ui-modern .admin-topbar .admin-topbar-lang-options .lang-flag-option {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px;
  height: 20px;
  border-radius: 4px;
  font-size: 18px;
  line-height: 1;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  overflow: hidden;
}

.ui-modern .admin-topbar .admin-topbar-lang-options .lang-flag-option--ar {
  background: linear-gradient(180deg, #006c35 0%, #004d25 100%);
  border: 1px solid #004d25;
}

.ui-modern .admin-topbar .admin-topbar-lang-options .lang-flag-option--en {
  background: linear-gradient(180deg, #c8102e 0%, #00247d 50%, #c8102e 100%);
  border: 1px solid #00247d;
}

.ui-modern .admin-topbar .admin-topbar-lang-options .lang-flag-option--other {
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  border: 1px solid #764ba2;
}

/* ── 6. Notifications – Rose/Pink 3D ────────────────────── */
.ui-modern .admin-topbar .notifications-menu > a {
  background: linear-gradient(145deg, #f43f5e, #e11d48) !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 15px rgba(225, 29, 72, 0.4),
    0 2px 4px rgba(225, 29, 72, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}
.ui-modern .admin-topbar .notifications-menu > a:hover {
  background: linear-gradient(145deg, #fb7185, #f43f5e) !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow:
    0 8px 25px rgba(225, 29, 72, 0.5),
    0 3px 6px rgba(225, 29, 72, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}

/* Notification badge */
.ui-modern .admin-topbar .notifications-menu .label-warning {
  position: absolute !important;
  top: -5px !important;
  inset-inline-end: -5px !important;
  min-width: 19px !important;
  height: 19px !important;
  padding: 0 5px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  line-height: 19px !important;
  text-align: center !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, #fbbf24, #f59e0b) !important;
  color: #78350f !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5) !important;
  z-index: 5 !important;
  animation: notif-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

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

/* ── 7. User/Profile Button – Indigo/Purple 3D ──────────── */
.ui-modern .admin-topbar .topbar-group-right > details:last-of-type > summary {
  background: linear-gradient(145deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 15px rgba(79, 70, 229, 0.4),
    0 2px 4px rgba(79, 70, 229, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}
.ui-modern .admin-topbar .topbar-group-right > details:last-of-type > summary:hover {
  background: linear-gradient(145deg, #818cf8, #6366f1) !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow:
    0 8px 25px rgba(79, 70, 229, 0.5),
    0 3px 6px rgba(79, 70, 229, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}

/* ── Icon sizing inside buttons ─────────────────────────── */
.ui-modern .admin-topbar .admin-topbar-btn svg,
.ui-modern .admin-topbar .admin-topbar-btn i,
.ui-modern .admin-topbar .admin-topbar-lang svg,
.ui-modern .admin-topbar .admin-topbar-lang i,
.ui-modern .admin-topbar .notifications-menu svg,
.ui-modern .admin-topbar .notifications-menu i {
  width: 18px !important;
  height: 18px !important;
  font-size: 16px !important;
  color: currentColor !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)) !important;
}

.ui-modern .admin-topbar .admin-topbar-btn > span:not(.tw-sr-only):not(.label),
.ui-modern .admin-topbar .admin-topbar-pos > span:not(.tw-sr-only),
.ui-modern .admin-topbar .topbar-quick-actions-toggle > span {
  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* ═══════════════════════════════════════════════════════════════
   Z-INDEX STACKING – Ensure dropdowns appear above content
   ═══════════════════════════════════════════════════════════════ */

/* When a details dropdown is open, raise it above siblings */
.ui-modern .admin-topbar details[open],
.admin-topbar details[open] {
  z-index: 9999 !important;
}

/* Notification dropdown (Bootstrap) */
.ui-modern .admin-topbar .notifications-menu.open,
.admin-topbar .notifications-menu.open,
.ui-modern .admin-topbar .notifications-menu,
.admin-topbar .notifications-menu {
  position: relative !important;
}
.ui-modern .admin-topbar .notifications-menu.open,
.admin-topbar .notifications-menu.open {
  z-index: 9999 !important;
}

/* Topbar button group needs to allow overflow */
.ui-modern .admin-topbar .topbar-group-right,
.admin-topbar .topbar-group-right {
  position: relative;
  z-index: 10;
}

/* ═══════════════════════════════════════════════════════════════
   DROPDOWN MENUS – Glassmorphism Style
   ═══════════════════════════════════════════════════════════════ */
.ui-modern .admin-topbar .topbar-quick-actions-menu,
.admin-topbar .topbar-quick-actions-menu,
.ui-modern .admin-topbar .admin-topbar-lang-options,
.admin-topbar .admin-topbar-lang-options,
.ui-modern .admin-topbar .topbar-group-right details > ul,
.admin-topbar .topbar-group-right details > ul,
.ui-modern .admin-topbar .notifications-menu .dropdown-menu,
.admin-topbar .notifications-menu .dropdown-menu {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 16px !important;
  box-shadow:
    0 20px 50px rgba(15, 23, 42, 0.2),
    0 8px 16px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  padding: 8px !important;
  z-index: 99999 !important;
  position: absolute !important;
  animation: dropdown-appear 0.25s cubic-bezier(0.2, 0, 0, 1.2) !important;
}

@keyframes dropdown-appear {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Dropdown menu items */
.ui-modern .admin-topbar .topbar-quick-actions-menu a,
.ui-modern .admin-topbar .topbar-quick-actions-menu button,
.ui-modern .admin-topbar .admin-topbar-lang-options a,
.ui-modern .admin-topbar .topbar-group-right details ul a {
  border-radius: 10px !important;
  padding: 8px 12px !important;
  transition: all 0.2s ease !important;
  font-weight: 600 !important;
}

.ui-modern .admin-topbar .topbar-quick-actions-menu a:hover,
.ui-modern .admin-topbar .topbar-quick-actions-menu button:hover,
.ui-modern .admin-topbar .admin-topbar-lang-options a:hover,
.ui-modern .admin-topbar .topbar-group-right details ul a:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(14, 165, 233, 0.08)) !important;
  transform: translateX(-3px) !important;
}

[dir="rtl"] .ui-modern .admin-topbar .topbar-quick-actions-menu a:hover,
[dir="rtl"] .ui-modern .admin-topbar .topbar-quick-actions-menu button:hover,
[dir="rtl"] .ui-modern .admin-topbar .admin-topbar-lang-options a:hover,
[dir="rtl"] .ui-modern .admin-topbar .topbar-group-right details ul a:hover {
  transform: translateX(3px) !important;
}

/* Dropdown section headers */
.ui-modern .admin-topbar .topbar-quick-actions-section {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #94a3b8 !important;
  padding: 8px 12px 4px !important;
  margin-top: 4px !important;
}

/* Dropdown icons - colorful */
.ui-modern .admin-topbar .topbar-quick-actions-menu i,
.ui-modern .admin-topbar .topbar-quick-actions-menu svg {
  filter: none !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 14px !important;
}

.ui-modern .admin-topbar .topbar-quick-actions-menu .fa-cart-plus { color: #10b981 !important; }
.ui-modern .admin-topbar .topbar-quick-actions-menu .fa-sack-dollar { color: #f59e0b !important; }
.ui-modern .admin-topbar .topbar-quick-actions-menu .fa-wrench { color: #f97316 !important; }
.ui-modern .admin-topbar .topbar-quick-actions-menu .fa-eye { color: #6366f1 !important; }
.ui-modern .admin-topbar .topbar-quick-actions-menu .fa-calendar-alt { color: #0ea5e9 !important; }

/* ═══════════════════════════════════════════════════════════════
   DATETIME BAR – Premium Gradient Strip
   ═══════════════════════════════════════════════════════════════ */
.ui-modern .admin-datetime-bar,
.admin-datetime-bar {
  background: linear-gradient(
    90deg,
    #0f172a 0%,
    #1e3a8a 25%,
    #6d28d9 50%,
    #db2777 75%,
    #f97316 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: datetime-gradient 8s ease infinite !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 6px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-bottom: none !important;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
}

@keyframes datetime-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Shimmer overlay on datetime bar */
.ui-modern .admin-datetime-bar::before,
.admin-datetime-bar::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  ) !important;
  animation: datetime-shimmer 4s ease-in-out infinite !important;
  pointer-events: none !important;
}

@keyframes datetime-shimmer {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

.ui-modern .admin-datetime-bar i,
.admin-datetime-bar i {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.85rem !important;
  animation: clock-pulse 2s ease-in-out infinite !important;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
}

@keyframes clock-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.08); }
}

.ui-modern .admin-datetime-bar #erp-live-clock,
.admin-datetime-bar #erp-live-clock {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Business name in datetime bar */
.ui-modern .admin-datetime-bar > span:last-child,
.admin-datetime-bar > span:last-child {
  margin-inline-start: auto !important;
  opacity: 0.85 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  background: rgba(255, 255, 255, 0.12);
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   ACTIVE / OPEN STATE for dropdown details
   ═══════════════════════════════════════════════════════════════ */
.ui-modern .admin-topbar details[open] > summary {
  transform: translateY(-1px) !important;
}

/* Datetime bar must not block dropdowns */
.admin-datetime-bar {
  position: relative !important;
  z-index: 1040 !important;
}

/*
 * Do not create a stacking context here. AJAX modals live inside this
 * container while Bootstrap appends their backdrop to <body>; z-index: 1
 * would therefore place the backdrop above the modal and block all inputs.
 * The header already owns its own z-index, so no content z-index is needed.
 */
#scrollable-container {
  position: relative;
  z-index: auto;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ui-modern .admin-topbar .admin-topbar-btn,
  .ui-modern .admin-topbar .admin-topbar-lang,
  .ui-modern .admin-topbar .admin-topbar-pos,
  .ui-modern .admin-topbar .admin-topbar-service--repair {
    padding: 6px 10px !important;
    border-radius: 12px !important;
  }

  .ui-modern .admin-topbar .admin-topbar-btn svg,
  .ui-modern .admin-topbar .admin-topbar-btn i {
    width: 16px !important;
    height: 16px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .ui-modern .admin-topbar .admin-topbar-btn,
  .ui-modern .admin-topbar .admin-topbar-lang {
    padding: 5px 8px !important;
    border-radius: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PRINT – Hide all of this
   ═══════════════════════════════════════════════════════════════ */
@media print {
  .admin-topbar,
  .admin-datetime-bar {
    display: none !important;
  }
}