/* c:\mynewapp\frontend-pwa\css\theme.css — v5.0 Professional Overhaul */


/* ═══════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES — Design Tokens
   ═══════════════════════════════════════════════════════ */
:root.light-theme {
  /* Core Colors */
  --bg-color:         #f1f5f9 !important;
  --bg-secondary:     #ffffff !important;
  --surface:          #ffffff !important;
  --surface-color:    #ffffff !important;
  --surface-hover:    rgba(241, 245, 249, 0.98) !important;
  --border:           rgba(0, 0, 0, 0.08) !important;
  --border-color:     rgba(0, 0, 0, 0.08) !important;
  --border-highlight: rgba(0, 0, 0, 0.15) !important;
  --glass-bg:         rgba(255, 255, 255, 0.9) !important;
  --glass-border:     rgba(0, 0, 0, 0.08) !important;
  --glass-border-hover: rgba(0, 0, 0, 0.15) !important;

  /* Page specific variable overrides */
  --bg-dark:          #f1f5f9 !important;
  --panel-bg:         #ffffff !important;
  --grn-primary:      #2563eb !important;
  --grn-hover:        #1d4ed8 !important;

  /* Text */
  --text-primary:     #000000 !important;
  --text-secondary:   #1e293b !important;
  --text-muted:       #475569 !important;
  --text-main:        #000000 !important;

  /* Brand Accents — Sleek Light Palette */
  --primary-accent:   #2563eb;   /* Deep Blue */
  --primary-glow:     rgba(37, 99, 235, 0.15);
  --success-color:    #059669;   /* Emerald Deep */
  --success-glow:     rgba(5, 150, 105, 0.15);
  --warning-color:    #d97706;   /* Amber Deep */
  --warning-glow:     rgba(217, 119, 6, 0.15);
  --danger-color:     #dc2626;   /* Red Deep */
  --danger-glow:      rgba(220, 38, 38, 0.15);
  --purple-color:     #7c3aed;   /* Purple Deep */
  --purple-glow:      rgba(124, 58, 237, 0.15);
  --pink-color:       #db2777;   /* Pink Deep */
  --pink-glow:        rgba(219, 39, 119, 0.15);

  /* Shadows */
  --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md:        0 8px 32px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255,255,255,0.8) inset;
  --shadow-lg:        0 20px 60px rgba(0, 0, 0, 0.12);
}

/* Light Theme Elements Helper Styling rules */
:root.light-theme body,
:root.light-theme p,
:root.light-theme td,
:root.light-theme th,
:root.light-theme tr,
:root.light-theme label,
:root.light-theme .panel-title,
:root.light-theme .kpi-title,
:root.light-theme .tot-lbl,
:root.light-theme .list-title,
:root.light-theme .list-sub,
:root.light-theme .sidebar-text,
:root.light-theme .header-company-name-top,
:root.light-theme .header-page-title,
:root.light-theme #header-user-name,
:root.light-theme #header-clock,
:root.light-theme #header-user-role,
:root.light-theme .brand-text h1,
:root.light-theme .brand-text p,
:root.light-theme h1,
:root.light-theme h2,
:root.light-theme h3,
:root.light-theme h4,
:root.light-theme h5,
:root.light-theme h6 {
  color: #000000 !important;
  text-shadow: none !important;
}

/* Header widgets override in Light Mode */
:root.light-theme .user-info {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
:root.light-theme #header-user-name {
  color: #000000 !important;
}
:root.light-theme #header-user-role {
  color: #1e3a8a !important; /* Dark Blue */
}
:root.light-theme .clock-container {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
:root.light-theme #header-clock {
  color: #059669 !important; /* High contrast green */
  text-shadow: none !important;
}
:root.light-theme #header-date-mini {
  color: #475569 !important;
}
:root.light-theme #online-users-badge {
  background: rgba(5, 150, 105, 0.1) !important;
  border-color: rgba(5, 150, 105, 0.2) !important;
}
:root.light-theme #online-users-badge span {
  color: #047857 !important;
}
:root.light-theme #online-users-count {
  color: #000000 !important;
}
:root.light-theme #global-exchange-rate-box {
  background: rgba(217, 119, 6, 0.1) !important;
  border-color: rgba(217, 119, 6, 0.2) !important;
}
:root.light-theme #global-exchange-rate-box span {
  color: #b45309 !important;
}
:root.light-theme #global-exchange-rate-val {
  color: #000000 !important;
}
:root.light-theme .islamic-ticker-container {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

:root.light-theme .ambient-bg {
  background: radial-gradient(circle at 50% 50%, #f8fafc 0%, #cbd5e1 100%) !important;
}
:root.light-theme .glass-panel,
:root.light-theme .panel,
:root.light-theme .neo-card,
:root.light-theme .editor-left,
:root.light-theme .info-card,
:root.light-theme .recent-receipts-card,
:root.light-theme .premium-card,
:root.light-theme .action-card,
:root.light-theme .action-row,
:root.light-theme .admin-actions-row,
:root.light-theme .operations-actions-row,
:root.light-theme div[style*="background: rgba(30, 41, 59, 0.4)"],
:root.light-theme div[style*="background: rgba(15, 23, 42, 0.65)"] {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #000000 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05) !important;
}
:root.light-theme td, :root.light-theme th, :root.light-theme tr {
  border-color: rgba(0, 0, 0, 0.08) !important;
}
:root.light-theme input, :root.light-theme select, :root.light-theme select option, :root.light-theme textarea,
:root.light-theme .v-input,
:root.light-theme .wh-select,
:root.light-theme .qty-input,
:root.light-theme .ctrl-input {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
}
:root.light-theme .h-label,
:root.light-theme .form-label,
:root.light-theme .setting-title,
:root.light-theme .tot-lbl,
:root.light-theme .lbl {
  color: #334155 !important;
  text-shadow: none !important;
}
:root.light-theme .tot-val,
:root.light-theme .val {
  color: #0f172a !important;
}
:root.light-theme input::placeholder {
  color: #64748b !important;
}
/* Choices.js Light Theme Overrides */
:root.light-theme .choices__inner {
  background-color: #ffffff !important;
  border-color: rgba(0,0,0,0.18) !important;
  color: #000000 !important;
}
:root.light-theme .choices__inner .choices__item,
:root.light-theme .choices__inner .choices__item--selectable {
  color: #0f172a !important;
}
:root.light-theme .choices__list--dropdown {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: rgba(0,0,0,0.1) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}
:root.light-theme .choices__list--dropdown .choices__item--selectable {
  color: #1e293b !important;
}
:root.light-theme .choices__item--selectable.is-highlighted,
:root.light-theme .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #e2e8f0 !important;
  color: #000000 !important;
}
:root.light-theme .choices__input {
  color: #000000 !important;
  background-color: transparent !important;
}
:root.light-theme .choices[data-type*="select-one"]::after {
  border-color: #000000 transparent transparent transparent !important;
}
:root.light-theme .choices.is-open[data-type*="select-one"]::after {
  border-color: transparent transparent #000000 transparent !important;
}
:root.light-theme .choices__input::placeholder {
  color: #64748b !important;
}
:root.light-theme .quick-action-btn,
:root.light-theme .quick-action-btn.qa-purple {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  color: #000000 !important;
}
:root.light-theme .quick-action-btn:hover {
  background: #e2e8f0 !important;
  color: #000000 !important;
}
:root.light-theme .list-item {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #000000 !important;
}

/* Vibrant Light Mode Header Glow Colors */
:root.light-theme .premium-header {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
:root.light-theme .premium-header.header-theme-dashboard { --glow-color: rgba(99, 102, 241, 0.8); }
:root.light-theme .premium-header.header-theme-sales { --glow-color: rgba(16, 185, 129, 0.8); }
:root.light-theme .premium-header.header-theme-purchase { --glow-color: rgba(168, 85, 247, 0.8); }
:root.light-theme .premium-header.header-theme-inventory { --glow-color: rgba(245, 158, 11, 0.8); }
:root.light-theme .premium-header.header-theme-masterdata { --glow-color: rgba(217, 70, 239, 0.8); }
:root.light-theme .premium-header.header-theme-reports { --glow-color: rgba(20, 184, 166, 0.8); }
:root.light-theme .premium-header.header-theme-alarm { --glow-color: rgba(239, 68, 68, 0.8); }
:root.light-theme .premium-header.header-theme-settings { --glow-color: rgba(100, 116, 139, 0.8); }
:root.light-theme .premium-header.header-theme-audit { --glow-color: rgba(244, 114, 182, 0.8); }

/* Light Theme Header Controls Glassmorphism */
:root.light-theme .user-info,
:root.light-theme .clock-container,
:root.light-theme #online-users-badge,
:root.light-theme #global-exchange-rate-box,
:root.light-theme .icon-btn,
:root.light-theme .fullscreen-toggle-btn,
:root.light-theme .theme-toggle-btn,
:root.light-theme .back-arrow-btn {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}

:root.light-theme .icon-btn:hover,
:root.light-theme .fullscreen-toggle-btn:hover,
:root.light-theme .theme-toggle-btn:hover,
:root.light-theme .back-arrow-btn:hover,
:root.light-theme .user-info:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
}

:root.light-theme #header-user-name,
:root.light-theme #header-clock,
:root.light-theme .fullscreen-toggle-btn,
:root.light-theme .theme-toggle-btn,
:root.light-theme .back-arrow-btn {
    color: #0f172a !important;
    text-shadow: none !important;
}

:root.light-theme #header-user-role,
:root.light-theme #header-date-mini {
    color: #334155 !important;
    text-shadow: none !important;
}

:root.light-theme #online-users-badge span,
:root.light-theme #online-users-count {
    color: #047857 !important;
    text-shadow: none !important;
}
:root.light-theme #global-exchange-rate-box span,
:root.light-theme #global-exchange-rate-val {
    color: #b45309 !important;
    text-shadow: none !important;
}

:root.light-theme .global-sidebar {
  background: #ffffff !important;
  border-left: 2.5px solid #000000 !important; /* Bold border */
  box-shadow: -4px 0 25px rgba(0,0,0,0.08) !important;
}
:root.light-theme .sidebar-header {
  border-bottom: 2px solid #000000 !important;
}
:root.light-theme .sidebar-logo-text {
  color: #000000 !important;
  font-weight: 900 !important;
}
:root.light-theme .sidebar-item {
  color: #000000 !important; /* Deep black text */
  transition: all 0.2s ease !important;
}
:root.light-theme .sidebar-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #000000 !important;
}
:root.light-theme .sidebar-item.active {
  background: rgba(37, 99, 235, 0.08) !important;
  color: #2563eb !important;
  border-right: 4px solid #2563eb !important;
}
:root.light-theme .sidebar-text {
  color: #000000 !important; /* Bold black text */
  font-weight: 800 !important; /* Thick bold */
  font-size: 19px !important; /* Increased font size by 1 step */
}
:root.light-theme .sidebar-item.active .sidebar-text {
  color: #2563eb !important;
}

/* Light Mode Deeper Icon Colors for High Contrast */
:root.light-theme .sidebar-item[onclick*="settings.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="settings.php"] .sidebar-icon { color: #65a30d !important; } /* Deeper lime */

:root.light-theme .sidebar-item[onclick*="dashboard-pro.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="dashboard-pro.php"] .sidebar-icon { color: #0891b2 !important; } /* Deeper cyan */

:root.light-theme .sidebar-item[onclick*="direct-sales.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="direct-sales.php"] .sidebar-icon { color: #059669 !important; } /* Deeper emerald */

:root.light-theme .sidebar-item[onclick*="purchase.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="purchase.php"] .sidebar-icon { color: #ea580c !important; } /* Deeper orange */

:root.light-theme .sidebar-item[onclick*="inventory-report.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="inventory-report.php"] .sidebar-icon { color: #6d28d9 !important; } /* Deeper purple */

:root.light-theme .sidebar-item[onclick*="vouchers-hub.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="vouchers-hub.php"] .sidebar-icon { color: #d97706 !important; } /* Deeper amber */

:root.light-theme .sidebar-item[onclick*="master-data.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="master-data.php"] .sidebar-icon { color: #db2777 !important; } /* Deeper pink */

:root.light-theme .sidebar-item[onclick*="analytics.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="analytics.php"] .sidebar-icon { color: #0284c7 !important; } /* Deeper sky blue */

:root.light-theme .sidebar-item[onclick*="alarm.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="alarm.php"] .sidebar-icon { color: #dc2626 !important; } /* Deeper red */

:root.light-theme .sidebar-item[onclick*="audit-log.php"] .sidebar-icon,
:root.light-theme .sidebar-item[data-href="audit-log.php"] .sidebar-icon { color: #1e293b !important; } /* Dark slate */

/* Sidebar Hover scale increase */
.sidebar-item:hover .sidebar-icon {
  transform: translateY(-50%) scale(1.3) !important;
}

:root {
  /* Core Colors */
  --bg-color:         #1E293B;
  --bg-secondary:     #0f172a;
  --surface-color:    rgba(15, 23, 42, 0.75);
  --surface-hover:    rgba(30, 41, 59, 0.9);

  /* Text */
  --text-primary:     #f8fafc;
  --text-secondary:   #94a3b8;
  --text-muted:       #64748b;

  /* Brand Accents — Cyberpunk Neon Palette */
  --primary-accent:   #3B82F6;   /* Electric Blue */
  --primary-glow:     rgba(59, 130, 246, 0.3);
  --success-color:    #10B981;   /* Emerald */
  --success-glow:     rgba(16, 185, 129, 0.3);
  --warning-color:    #f59e0b;   /* Amber */
  --warning-glow:     rgba(245, 158, 11, 0.3);
  --danger-color:     #ef4444;   /* Red */
  --danger-glow:      rgba(239, 68, 68, 0.3);
  --purple-color:     #a855f7;   /* Purple */
  --purple-glow:      rgba(168, 85, 247, 0.3);
  --pink-color:       #ec4899;   /* Pink */
  --pink-glow:        rgba(236, 72, 153, 0.3);

  /* Glassmorphism */
  --glass-bg:         rgba(10, 17, 40, 0.7);
  --glass-border:     rgba(34, 211, 238, 0.1);
  --glass-border-hover: rgba(34, 211, 238, 0.3);
  --glass-blur:       16px;

  /* Shadows */
  --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:        0 8px 32px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-lg:        0 20px 60px rgba(0, 0, 0, 0.8);
  --shadow-neon:      0 0 20px var(--primary-glow), 0 0 40px rgba(34, 211, 238, 0.1);

  /* Layout */
  --border-radius:    16px;
  --border-radius-sm: 10px;
  --border-radius-lg: 24px;

  /* Typography */
  --font-base:        'Tajawal', 'Inter', system-ui, sans-serif;
  --font-size:        15px;
  --font-size-sm:     13px;
  --font-size-lg:     18px;

  /* Sidebar dimensions */
  --sb-collapsed:     64px;
  --sb-expanded:      252px;
  --sb-bg:            rgba(2, 5, 16, 0.98);
  --sb-border:        rgba(34, 211, 238, 0.15);
  --sb-item-h:        54px;

  /* Transitions */
  --transition-fast:  all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-med:   all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Background Gradients */
  --bg-grad-1: rgba(34, 211, 238, 0.05);
  --bg-grad-2: rgba(168, 85, 247, 0.05);
  --bg-grad-3: rgba(16, 185, 129, 0.04);
}

/* ── Light Mode Override ── */
:root.light-theme, [data-theme="light"] {
  --bg-color:       #f8fafc;
  --bg-secondary:   #f1f5f9;
  --surface-color:  rgba(255, 255, 255, 0.95);
  --surface-hover:  rgba(241, 245, 249, 0.95);
  
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  
  --primary-accent: #2563eb;
  --primary-glow:   rgba(37, 99, 235, 0.15);
  --success-color:  #059669;
  --success-glow:   rgba(5, 150, 105, 0.15);
  --warning-color:  #d97706;
  --warning-glow:   rgba(217, 119, 6, 0.15);
  --danger-color:   #dc2626;
  --danger-glow:    rgba(220, 38, 38, 0.15);
  --purple-color:   #7c3aed;
  --purple-glow:    rgba(124, 58, 237, 0.15);
  --pink-color:     #db2777;
  --pink-glow:      rgba(219, 39, 119, 0.15);

  --glass-bg:       rgba(255, 255, 255, 0.85);
  --glass-border:   rgba(15, 23, 42, 0.08);
  --glass-border-hover: rgba(15, 23, 42, 0.15);
  
  --shadow-sm:      0 2px 5px rgba(15, 23, 42, 0.05);
  --shadow-md:      0 8px 25px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255,255,255,0.6) inset;
  --shadow-lg:      0 20px 40px rgba(15, 23, 42, 0.08);
  --shadow-neon:    0 0 15px var(--primary-glow), 0 0 25px rgba(37, 99, 235, 0.05);
  
  --sb-bg:          #ffffff;
  --sb-border:      rgba(15, 23, 42, 0.08);

  --bg-grad-1:      rgba(37, 99, 235, 0.04);
  --bg-grad-2:      rgba(124, 58, 237, 0.04);
  --bg-grad-3:      rgba(5, 150, 105, 0.03);
}

/* ═══════════════════════════════════════════════════════
   GLOBAL RESET & BASE STYLES
   ═══════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Tajawal', 'Inter', system-ui, -apple-system, sans-serif;
}

/* عناصر النماذج تحتاج تصريحاً صريحاً في بعض المتصفحات */
input, select, textarea, button {
  font-family: 'Tajawal', 'Inter', system-ui, -apple-system, sans-serif;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-base);
  font-size: var(--font-size);
  line-height: 1.6;
  background-color: var(--bg-color);
  color: var(--text-primary);
  direction: rtl;
  min-height: 100vh;
  /* Allow natural scrolling — NO overflow:hidden */
  overflow-x: hidden;
  /* Animated background */
  background-image:
    radial-gradient(ellipse at 20% 20%, var(--bg-grad-1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, var(--bg-grad-2) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 0%, var(--bg-grad-3) 0%, transparent 40%);
  background-attachment: fixed;
  margin: 0 !important;
  padding: 0 !important;
}

/* Prevent pull-to-refresh while keeping scroll */
body {
  overscroll-behavior-y: contain;
}

/* ── Body when sidebar is present ── */
body.has-sidebar {
  padding-right: var(--sb-collapsed);
  transition: padding-right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

body.has-sidebar.sidebar-open {
  padding-right: var(--sb-expanded);
}

/* ── Page Wrapper for inner scrollable pages ── */
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content {
  flex: 1;
  padding: 20px 24px;
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════
   SELECT & FORM ELEMENT FIXES
   ═══════════════════════════════════════════════════════ */
select option {
  background-color: #0a1128;
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════
   GLASSMORPHISM UTILITIES
   ═══════════════════════════════════════════════════════ */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  position: relative;
  transition: var(--transition-med);
}

.glass-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   CUSTOM SCROLLBAR — WebKit
   ═══════════════════════════════════════════════════════ */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: rgba(2, 5, 16, 0.5); }
::-webkit-scrollbar-thumb        { background: rgba(34, 211, 238, 0.4); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(34, 211, 238, 0.7); }
::-webkit-scrollbar-corner       { background: transparent; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE MEDIA QUERIES — Base Layout
   ═══════════════════════════════════════════════════════ */
@media screen and (min-width: 768px) {
  body { --font-size: 15px; }
  .page-content { padding: 28px 36px; }
}

@media screen and (min-width: 1200px) {
  .page-content { padding: 32px 48px; }
}

/* ═══════════════════════════════════════════════════════
   GLOBAL ANIMATION KEYFRAMES
   ═══════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes neonPulse {
  0%, 100% { box-shadow: var(--shadow-md); }
  50%       { box-shadow: var(--shadow-md), 0 0 30px var(--primary-glow); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-10deg) scale(0.9); }
  to   { opacity: 1; transform: rotate(0)      scale(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

/* ═══════════════════════════════════════════════════════
   UTILITY ANIMATION CLASSES
   ═══════════════════════════════════════════════════════ */
.animate-fade-in-up    { animation: fadeInUp    0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-fade-in-down  { animation: fadeInDown  0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-fade-in-right { animation: fadeInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.pulse-glow            { animation: neonPulse   3s ease-in-out infinite; }

/* Stagger helpers */
.stagger-1  { animation-delay: 0.05s; }
.stagger-2  { animation-delay: 0.10s; }
.stagger-3  { animation-delay: 0.15s; }
.stagger-4  { animation-delay: 0.20s; }
.stagger-5  { animation-delay: 0.25s; }
.stagger-6  { animation-delay: 0.30s; }

/* ═══════════════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════════════ */
@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }
    body > *:not(#print-area) {
        display: none !important;
    }
    #print-area {
        display: block !important;
        width: 100%;
        background: #fff;
        color: #000;
        margin: 0;
        padding: 0;
    }
    .print-page {
        page-break-after: always;
        background: #fff;
        color: #000;
        box-sizing: border-box;
    }
    .modal-overlay, .toast-container, .quick-add-box { 
        display: none !important; 
    }
}

/* ═══════════════════════════════════════════════════════
   GLOBAL INTERACTION EFFECTS (Hover/Active Zoom)
   ═══════════════════════════════════════════════════════ */
.btn, .btn-primary, .btn-success, .btn-secondary, .btn-ghost, .btn-action, .numpad-btn, .action-tab {
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn:hover:not(:disabled), .btn-primary:hover:not(:disabled), .btn-success:hover:not(:disabled), .btn-secondary:hover:not(:disabled), .btn-action:hover:not(:disabled), .action-tab:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.25);
    z-index: 10;
}
.btn:active:not(:disabled), .btn-primary:active:not(:disabled), .btn-success:active:not(:disabled), .btn-secondary:active:not(:disabled), .btn-action:active:not(:disabled), .action-tab:active, .numpad-btn:active {
    transform: scale(0.95) !important;
}
/* Ensure icon-only buttons have a smooth interaction */
.btn-icon, .modal-close, .back-arrow-btn {
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-icon:hover:not(:disabled), .modal-close:hover, .back-arrow-btn:hover {
    transform: scale(1.1);
}
.btn-icon:active:not(:disabled), .modal-close:active, .back-arrow-btn:active {
    transform: scale(0.9) !important;
}


/* =========================================================
   PREMIUM OVERHAUL INJECTED CSS
   ========================================================= */
/* Ambient Animated Background Orbs */
.ambient-bg {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    overflow: hidden; z-index: -1; pointer-events: none;
    background: radial-gradient(circle at 50% 50%, #0c0812 0%, #000000 100%);
}

.orb {
    position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.15;
    animation: floatOrb 20s infinite alternate ease-in-out;
}

.orb-1 { width: 500px; height: 500px; background: var(--primary-accent); top: -5%; right: -5%; }
.orb-2 { width: 450px; height: 450px; background: var(--theme-pink); bottom: -10%; left: -5%; animation-delay: -7s; }
.orb-3 { width: 600px; height: 600px; background: var(--theme-blue); top: 30%; left: 30%; animation-duration: 25s; opacity: 0.1; }

@keyframes floatOrb {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-30px, 30px) scale(0.9); }
    100% { transform: translate(0, 0) scale(1); }
}

/* ═══════════════════════════════════════════════════════
   UNIFIED PREMIUM HEADER - Standardized Across All Pages
   ═══════════════════════════════════════════════════════ */
.premium-header {
    --glow-color: rgba(99, 102, 241, 0.65); /* لون الوهج الافتراضي */
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important; /* نفس انحناء بطاقات الأرصدة */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255,255,255,0.03) !important;
    
    position: relative !important;
    overflow: hidden !important;
    z-index: 10 !important;
    
    /* توحيد الهوامش */
    margin-top: 20px !important;
    margin-bottom: 25px !important;
    width: 100%;
    height: 110px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    box-sizing: border-box;
    flex-shrink: 0;
    
    /* إضافة الانتقال السلس للمؤثرات */
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    animation: slideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* تأثير التحليق ملغى بناءً على طلبك - الترويسة ثابتة تماماً */

/* الطبقة العلوية المضيئة الثابتة */
.premium-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--glow-color, rgba(255,255,255,0.5)), transparent);
    opacity: 0.5;
}

/* توهج خلفي ناعم ثابت */
.premium-header::after {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 60%; height: 100%;
    background: radial-gradient(ellipse at top, var(--glow-color, rgba(255,255,255,0.15)) 0%, transparent 70%);
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
}

@keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

/* --- Page-Specific Header Color Themes (Glows only, keeping premium 0.45 transparent background) --- */
.premium-header.header-theme-dashboard { --glow-color: rgba(99, 102, 241, 0.65); }
.premium-header.header-theme-sales { --glow-color: rgba(16, 185, 129, 0.65); }
.premium-header.header-theme-purchase { --glow-color: rgba(168, 85, 247, 0.65); }
.premium-header.header-theme-inventory { --glow-color: rgba(245, 158, 11, 0.65); }
.premium-header.header-theme-masterdata { --glow-color: rgba(217, 70, 239, 0.65); }
.premium-header.header-theme-reports { --glow-color: rgba(20, 184, 166, 0.65); }
.premium-header.header-theme-alarm { --glow-color: rgba(239, 68, 68, 0.65); }
.premium-header.header-theme-settings { --glow-color: rgba(100, 116, 139, 0.65); }
.premium-header.header-theme-audit { --glow-color: rgba(244, 114, 182, 0.65); }

/* Responsive Header */
@media (max-width: 768px) {
    .premium-header {
        height: auto !important;
        flex-direction: column;
        gap: 12px;
    }
}

.header-brand { display: flex; align-items: center; gap: 12px; }
.brand-icon {
    width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(135deg, #38bdf8, #818cf8);
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    box-shadow: 0 6px 15px rgba(56, 189, 248, 0.4), inset 0 2px 5px rgba(255,255,255,0.3); border: 1px solid rgba(255,255,255,0.2);
}
.brand-text h1 { margin: 0; font-size: 1.1rem; font-weight: 900; color: #fff; letter-spacing: 0.5px; text-shadow: 0 2px 5px rgba(255,255,255,0.1); }
.brand-text p { margin: 0; font-size: 0.75rem; color: #94a3b8; font-weight: 500; }

/* --- Global Reset for Header Alignment --- */
.pos-wrapper, .dash-main, .hub-container, .settings-container, .audit-container, .alarm-main {
    padding-top: 0px !important;
}

/* ==========================================================================
   6 SPECIAL STRATEGIC THEMES (Imperial, Emerald, Cyber, Crystal, Papyrus, Slate)
   ========================================================================== */

/* 1. Theme Imperial (Default Sovereign Dark) */
:root.theme-imperial {
  --bg-color:         #060913 !important;
  --bg-secondary:     #0f1424 !important;
  --surface-color:    rgba(15, 20, 36, 0.75) !important;
  --surface-hover:    rgba(30, 41, 59, 0.9) !important;
  --text-primary:     #f1f5f9 !important;
  --text-secondary:   #94a3b8 !important;
  --primary-accent:   #38bdf8 !important;
  --primary-glow:     rgba(56, 189, 248, 0.3) !important;
  --glass-bg:         rgba(15, 20, 36, 0.7) !important;
  --glass-border:     rgba(56, 189, 248, 0.1) !important;
  --sb-bg:            rgba(6, 9, 19, 0.98) !important;
  --sb-border:        rgba(56, 189, 248, 0.15) !important;
  --bg-grad-1:        rgba(56, 189, 248, 0.05) !important;
  --bg-grad-2:        rgba(129, 140, 248, 0.05) !important;
  --bg-grad-3:        rgba(15, 20, 36, 0.04) !important;
}
:root.theme-imperial .ambient-bg {
  background: radial-gradient(circle at 50% 50%, #060913 0%, #030712 100%) !important;
}

/* 2. Theme Emerald (Accounting Shield) */
:root.theme-emerald {
  --bg-color:         #050c08 !important;
  --bg-secondary:     #0c1a12 !important;
  --surface-color:    rgba(12, 26, 18, 0.75) !important;
  --surface-hover:    rgba(27, 56, 39, 0.9) !important;
  --text-primary:     #e6f4ea !important;
  --text-secondary:   #a3d9c9 !important;
  --primary-accent:   #34d399 !important;
  --primary-glow:     rgba(52, 211, 153, 0.3) !important;
  --glass-bg:         rgba(12, 26, 18, 0.7) !important;
  --glass-border:     rgba(52, 211, 153, 0.1) !important;
  --sb-bg:            rgba(5, 12, 8, 0.98) !important;
  --sb-border:        rgba(52, 211, 153, 0.15) !important;
  --bg-grad-1:        rgba(52, 211, 153, 0.05) !important;
  --bg-grad-2:        rgba(5, 150, 105, 0.05) !important;
  --bg-grad-3:        rgba(12, 26, 18, 0.04) !important;
}
:root.theme-emerald .ambient-bg {
  background: radial-gradient(circle at 50% 50%, #0c1a12 0%, #050c08 100%) !important;
}

/* 3. Theme Cyber (Cyber Obsidian) */
:root.theme-cyber {
  --bg-color:         #000000 !important;
  --bg-secondary:     #080808 !important;
  --surface-color:    rgba(8, 8, 8, 0.85) !important;
  --surface-hover:    rgba(24, 24, 24, 0.9) !important;
  --text-primary:     #00ffcc !important;
  --text-secondary:   #ffffff !important;
  --primary-accent:   #ff00ff !important;
  --primary-glow:     rgba(255, 0, 255, 0.4) !important;
  --glass-bg:         rgba(8, 8, 8, 0.8) !important;
  --glass-border:     #00ffcc !important;
  --glass-border-hover: #ff00ff !important;
  --sb-bg:            #000000 !important;
  --sb-border:        #00ffcc !important;
  --bg-grad-1:        rgba(255, 0, 255, 0.05) !important;
  --bg-grad-2:        rgba(0, 255, 204, 0.05) !important;
  --bg-grad-3:        #000000 !important;
}
:root.theme-cyber .ambient-bg {
  background: #000000 !important;
}

/* 4. Theme Crystal (Ice Crystal) */
:root.theme-crystal {
  --bg-color:         #f0f4f8 !important;
  --bg-secondary:     #ffffff !important;
  --surface-color:    rgba(255, 255, 255, 0.95) !important;
  --surface-hover:    rgba(240, 244, 248, 0.95) !important;
  --text-primary:     #1e293b !important;
  --text-secondary:   #475569 !important;
  --primary-accent:   #0284c7 !important;
  --primary-glow:     rgba(2, 132, 199, 0.15) !important;
  --glass-bg:         rgba(255, 255, 255, 0.85) !important;
  --glass-border:     rgba(2, 132, 199, 0.15) !important;
  --sb-bg:            #ffffff !important;
  --sb-border:        rgba(2, 132, 199, 0.15) !important;
  --bg-grad-1:        rgba(2, 132, 199, 0.04) !important;
  --bg-grad-2:        rgba(14, 165, 233, 0.04) !important;
  --bg-grad-3:        rgba(255, 255, 255, 0.3) !important;
}
:root.theme-crystal body,
:root.theme-crystal p,
:root.theme-crystal td,
:root.theme-crystal th,
:root.theme-crystal tr,
:root.theme-crystal label,
:root.theme-crystal h1,
:root.theme-crystal h2,
:root.theme-crystal h3,
:root.theme-crystal h4,
:root.theme-crystal h5,
:root.theme-crystal h6,
:root.theme-crystal .brand-text h1,
:root.theme-crystal .brand-text p,
:root.theme-crystal .sidebar-text,
:root.theme-crystal .header-company-name-top,
:root.theme-crystal .header-page-title,
:root.theme-crystal #header-user-name,
:root.theme-crystal #header-clock,
:root.theme-crystal #header-user-role,
:root.theme-crystal .kpi-val,
:root.theme-crystal .kpi-title,
:root.theme-crystal .list-sub,
:root.theme-crystal .list-title,
:root.theme-crystal .tot-lbl,
:root.theme-crystal .tot-val,
:root.theme-crystal .val,
:root.theme-crystal .lbl {
  color: #1e293b !important;
  text-shadow: none !important;
}

/* 5. Theme Papyrus (Desert Papyrus) */
:root.theme-papyrus {
  --bg-color:         #f7f2e8 !important;
  --bg-secondary:     #eee6d5 !important;
  --surface-color:    rgba(238, 230, 213, 0.95) !important;
  --surface-hover:    rgba(212, 197, 169, 0.95) !important;
  --text-primary:     #2e1f10 !important;
  --text-secondary:   #4a3728 !important;
  --primary-accent:   #85581A !important;
  --primary-glow:     rgba(133, 88, 26, 0.2) !important;
  --glass-bg:         rgba(238, 230, 213, 0.9) !important;
  --glass-border:     rgba(133, 88, 26, 0.15) !important;
  --sb-bg:            #eee6d5 !important;
  --sb-border:        rgba(133, 88, 26, 0.15) !important;
  --bg-grad-1:        rgba(133, 88, 26, 0.04) !important;
  --bg-grad-2:        rgba(74, 55, 40, 0.04) !important;
  --bg-grad-3:        rgba(238, 230, 213, 0.3) !important;
}
:root.theme-papyrus .ambient-bg {
  background: radial-gradient(circle at 50% 50%, #f7f2e8 0%, #e6dec3 100%) !important;
}
:root.theme-papyrus body,
:root.theme-papyrus p,
:root.theme-papyrus td,
:root.theme-papyrus th,
:root.theme-papyrus tr,
:root.theme-papyrus label,
:root.theme-papyrus h1,
:root.theme-papyrus h2,
:root.theme-papyrus h3,
:root.theme-papyrus h4,
:root.theme-papyrus h5,
:root.theme-papyrus h6,
:root.theme-papyrus .brand-text h1,
:root.theme-papyrus .brand-text p,
:root.theme-papyrus .sidebar-text,
:root.theme-papyrus .header-company-name-top,
:root.theme-papyrus .header-page-title,
:root.theme-papyrus #header-user-name,
:root.theme-papyrus #header-clock,
:root.theme-papyrus #header-user-role,
:root.theme-papyrus .kpi-val,
:root.theme-papyrus .kpi-title,
:root.theme-papyrus .list-sub,
:root.theme-papyrus .list-title,
:root.theme-papyrus .tot-lbl,
:root.theme-papyrus .tot-val,
:root.theme-papyrus .val,
:root.theme-papyrus .lbl {
  color: #2e1f10 !important;
  text-shadow: none !important;
}

/* 6. Theme Slate (Muted Slate) */
:root.theme-slate {
  --bg-color:         #1e293b !important;
  --bg-secondary:     #334155 !important;
  --surface-color:    rgba(51, 65, 85, 0.85) !important;
  --surface-hover:    rgba(71, 85, 105, 0.95) !important;
  --text-primary:     #f8fafc !important;
  --text-secondary:   #cbd5e1 !important;
  --primary-accent:   #38bdf8 !important;
  --primary-glow:     rgba(56, 189, 248, 0.3) !important;
  --glass-bg:         rgba(51, 65, 85, 0.8) !important;
  --glass-border:     rgba(71, 85, 105, 0.15) !important;
  --sb-bg:            #1e293b !important;
  --sb-border:        rgba(71, 85, 105, 0.15) !important;
  --bg-grad-1:        rgba(56, 189, 248, 0.05) !important;
  --bg-grad-2:        rgba(51, 65, 85, 0.05) !important;
  --bg-grad-3:        rgba(51, 65, 85, 0.4) !important;
}

/* ==========================================================================
   🔍 TYPOGRAPHY ENHANCEMENT FOR BETTER READABILITY (BUTTONS +2px, INNER REPORTS +4px)
   ========================================================================== */

/* 1. Enlarge all buttons by 2px (2 degrees) globally */
button,
.btn,
.theme-btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-filter,
.btn-reset,
.curr-btn,
.action-card,
.report-card,
.numpad-btn,
.quick-action-btn {
    font-size: 16px !important;
}

/* 2. Specific button size overrides */
.btn-primary, .btn-secondary {
    font-size: 1.3rem !important; /* was 1.2rem */
}
.numpad-btn {
    font-size: 2.0rem !important; /* was 1.8rem */
}
.theme-btn {
    font-size: 13px !important; /* was 11px */
}
.action-card {
    font-size: 0.92rem !important; /* was 0.8rem */
}

/* 3. Enlarge all fonts in inner report pages by 4px (4 degrees) */
html.inner-report-page body {
    font-size: 19px !important; /* was 15px */
}
html.inner-report-page td {
    font-size: 17px !important; /* was 13px */
}
html.inner-report-page th {
    font-size: 17px !important; /* was 13px */
}
html.inner-report-page p {
    font-size: 19px !important; /* was 15px */
}
html.inner-report-page label {
    font-size: 17px !important; /* was 13px */
}
html.inner-report-page input,
html.inner-report-page select,
html.inner-report-page textarea {
    font-size: 18px !important; /* was 14px */
}
html.inner-report-page h1 { font-size: 30px !important; }
html.inner-report-page h2 { font-size: 24px !important; }
html.inner-report-page h3 { font-size: 20px !important; }
html.inner-report-page h4 { font-size: 18px !important; }

/* Scale metrics cards inside report pages */
html.inner-report-page .kpi-val,
html.inner-report-page .metric-value {
    font-size: 32px !important;
}

/* Scale badges inside report pages */
html.inner-report-page .badge-percent,
html.inner-report-page .badge-negative {
    font-size: 16px !important; /* was 12px */
}
html.inner-report-page .badge-category {
    font-size: 15px !important; /* was 11px */
}

/* Buttons inside the inner report page get +4px instead of +2px */
html.inner-report-page button,
html.inner-report-page .btn,
html.inner-report-page .theme-btn,
html.inner-report-page .btn-primary,
html.inner-report-page .btn-secondary,
html.inner-report-page .btn-success,
html.inner-report-page .btn-filter,
html.inner-report-page .btn-reset,
html.inner-report-page .curr-btn,
html.inner-report-page .quick-action-btn {
    font-size: 18px !important; /* standard button default 14px + 4px */
}

/* 4. Enlarge all fonts in inventory hub page (inventory-report.php) and general report portals (analytics.php) by 2px (2 degrees) */
html.inventory-hub-page body, html.hub-report-page body {
    font-size: 17px !important; /* was 15px */
}
html.inventory-hub-page td, html.hub-report-page td {
    font-size: 15px !important; /* was 13px */
}
html.inventory-hub-page th, html.hub-report-page th {
    font-size: 15px !important; /* was 13px */
}
html.inventory-hub-page p, html.hub-report-page p {
    font-size: 17px !important; /* was 15px */
}
html.inventory-hub-page label, html.hub-report-page label {
    font-size: 15px !important; /* was 13px */
}
html.inventory-hub-page input, html.hub-report-page input,
html.inventory-hub-page select, html.hub-report-page select,
html.inventory-hub-page textarea, html.hub-report-page textarea {
    font-size: 16px !important; /* was 14px */
}
html.inventory-hub-page h1, html.hub-report-page h1 { font-size: 28px !important; }
html.inventory-hub-page h2, html.hub-report-page h2 { font-size: 22px !important; }
html.inventory-hub-page h3, html.hub-report-page h3 { font-size: 18px !important; }
html.inventory-hub-page h4, html.hub-report-page h4 { font-size: 16px !important; }

/* Scale metrics cards inside inventory hub page */
html.inventory-hub-page .kpi-val, html.hub-report-page .kpi-val,
html.inventory-hub-page .metric-value, html.hub-report-page .metric-value {
    font-size: 30px !important;
}

/* Scale badges inside inventory hub page */
html.inventory-hub-page .badge-percent, html.hub-report-page .badge-percent,
html.inventory-hub-page .badge-negative, html.hub-report-page .badge-negative {
    font-size: 14px !important; /* was 12px */
}
html.inventory-hub-page .badge-category, html.hub-report-page .badge-category {
    font-size: 13px !important; /* was 11px */
}