/* ERP Design Tokens v1 — single source of truth for shared typography, design and colors.
 * Brand/background/card colors come from Settings -> site_config.json via validated server variables.
 * Change the semantic colors below to update every view (admin, employee, customer, developer).
 * Green/red/orange communicate status and intentionally do NOT follow the brand hue.
 */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');
:root {
  color-scheme: dark;
  --erp-font: 'Cairo', Tahoma, system-ui, sans-serif;
  --erp-primary: var(--erp-config-primary, #3b82f6);
  --erp-background: var(--erp-config-background, #0f0f12);
  --erp-surface: var(--erp-config-surface, #18181b);
  --erp-on-primary: var(--erp-config-on-primary, #ffffff);
  --site-primary: var(--erp-primary);
  --erp-radius: 14px;
  --erp-radius-sm: 10px;
  --erp-radius-lg: 18px;
  --erp-sidebar-width: 288px;
  --erp-white: #ffffff;
  --erp-black: #000000;
  --erp-foreground: #e5e7eb;
  --erp-muted: #9ca3af;
  --erp-muted-subtle: #64748b;
  --erp-surface-hover: color-mix(in srgb,var(--erp-surface) 80%,#64748b 20%);
  --erp-surface-sunken: color-mix(in srgb,var(--erp-background) 83%,#000000 17%);
  --erp-sidebar-bg: color-mix(in srgb,var(--erp-background) 58%,#182d52 42%);
  --erp-border: color-mix(in srgb,var(--erp-surface) 65%,#94a3b8 35%);
  --erp-border-strong: color-mix(in srgb,var(--erp-surface) 49%,#94a3b8 51%);
  --erp-primary-wash: color-mix(in srgb,var(--erp-primary) 40%,transparent);
  --erp-secondary: #8b5cf6;
  --erp-success: #10b981;
  --erp-success-bg: #065f46;
  --erp-success-foreground: #a7f3d0;
  --erp-danger: #ef4444;
  --erp-danger-bg: #7f1d1d;
  --erp-danger-foreground: #fecaca;
  --erp-warning: #f59e0b;
  --erp-warning-bg: #78350f;
  --erp-info-bg: #1e3a8a;
  --erp-shadow-color: #0003;
  --erp-shadow: 0 12px 34px var(--erp-shadow-16);
  --erp-overlay: color-mix(in srgb,var(--erp-black) 60%,transparent);
  --erp-sidebar-glass: color-mix(in srgb,var(--erp-sidebar-bg) 86%,transparent);
  --erp-border-wash: color-mix(in srgb,var(--erp-border) 50%,transparent);
  --erp-shadow-5: color-mix(in srgb,var(--erp-black) 5%,transparent);
  --erp-shadow-6: color-mix(in srgb,var(--erp-black) 6%,transparent);
  --erp-shadow-8: color-mix(in srgb,var(--erp-black) 8%,transparent);
  --erp-shadow-12: color-mix(in srgb,var(--erp-black) 12%,transparent);
  --erp-shadow-16: color-mix(in srgb,var(--erp-black) 16%,transparent);
  --erp-shadow-22: color-mix(in srgb,var(--erp-black) 22%,transparent);
  --erp-shadow-30: color-mix(in srgb,var(--erp-black) 30%,transparent);
  --erp-shadow-38: color-mix(in srgb,var(--erp-black) 38%,transparent);
  --erp-white-tint-14: color-mix(in srgb,var(--erp-white) 14%,transparent);
  --erp-white-tint-24: color-mix(in srgb,var(--erp-white) 24%,transparent);
  --erp-white-tint-35: color-mix(in srgb,var(--erp-white) 35%,transparent);
  --erp-border-tint-7: color-mix(in srgb,var(--erp-border) 7%,transparent);
  --erp-border-tint-16: color-mix(in srgb,var(--erp-border) 16%,transparent);
  --erp-surface-90: color-mix(in srgb,var(--erp-surface) 90%,transparent);
  --erp-success-tint-12: color-mix(in srgb,var(--erp-success) 12%,transparent);
  --erp-primary-tint-5: color-mix(in srgb,var(--erp-primary) 5%,transparent);
  --erp-primary-tint-8: color-mix(in srgb,var(--erp-primary) 8%,transparent);
  --erp-primary-tint-12: color-mix(in srgb,var(--erp-primary) 12%,transparent);
  --erp-primary-tint-14: color-mix(in srgb,var(--erp-primary) 14%,transparent);
  --erp-primary-tint-15: color-mix(in srgb,var(--erp-primary) 15%,transparent);
  --erp-primary-tint-16: color-mix(in srgb,var(--erp-primary) 16%,transparent);
  --erp-primary-tint-25: color-mix(in srgb,var(--erp-primary) 25%,transparent);
}
/* Unified typography: icons, code and dynamic content retain their own font. */
html,body,body :where(button,input,select,textarea,option,a,table,th,td,h1,h2,h3,h4,h5,h6,label,p,summary,dialog) {
  font-family:var(--erp-font) !important;
}
body { background-color:var(--erp-background); color:var(--erp-foreground); line-height:1.6; }
body :where(h1,h2,h3,h4,h5,h6){line-height:1.4;font-weight:700;letter-spacing:normal;}
body :where(.card,.erp-card,.card-dark,.cart-card,.erp-export-box,.erp-export-modal .erp-export-box){
  border-radius:var(--erp-radius-lg);border-color:var(--erp-border);background-color:var(--erp-surface);box-shadow:0 8px 22px var(--erp-shadow-12);
}
body :where(input:not([type=checkbox]):not([type=radio]),select,textarea){
  background-color:var(--erp-surface-hover);color:var(--erp-foreground);border:1px solid var(--erp-border-strong);border-radius:var(--erp-radius-sm);
}
body :where(input,select,textarea):focus-visible { outline:2px solid var(--erp-primary); outline-offset:2px; }
body :where(button,.btn,.btn-primary,.erp-btn){border-radius:var(--erp-radius-sm);}
body :where(.btn-primary,.erp-btn,.erp-install-btn,.erp-lang-switch a.active){background-color:var(--erp-primary);color:var(--erp-on-primary);}
body :where(table){color:inherit;border-collapse:collapse;}
body :where(th){background-color:var(--erp-surface-hover);color:var(--erp-foreground);}
body :where(td){border-color:var(--erp-border);}
body :where(.erp-unified-sidebar,#erpAdminSidebar,#erpDeveloperSidebar){background-color:var(--erp-sidebar-bg);color:var(--erp-foreground);}
body :where(.erp-sidebar-brand,.erp-sidebar-footer){border-color:var(--erp-border);}
body :where(.erp-sidebar-nav a.active){background-color:var(--erp-primary-tint-16);color:var(--erp-primary);}
body :where(.erp-sidebar-nav a:hover){background-color:var(--erp-surface-hover);}
body :where(.erp-notification-permission,.erp-push-toast,.erp-lang-switch,.erp-notification-bell,.erp-sidebar-toggle){background-color:var(--erp-sidebar-bg);color:var(--erp-foreground);}
body :where(.erp-notification-permission [data-enable],.erp-install-btn){background-color:var(--erp-primary);color:var(--erp-on-primary);}
/* Match brand-colored Tailwind and Bootstrap utilities to the SAME identity token.
 * Explicit semantic success/error/warning styles are intentionally not recolored. */
body :where(.bg-blue-400,.bg-blue-500,.bg-blue-600,.bg-blue-700,.bg-indigo-500,.bg-indigo-600,.bg-indigo-700,.bg-primary){background-color:var(--erp-primary) !important;color:var(--erp-on-primary);}
body :where(.text-blue-300,.text-blue-400,.text-blue-500,.text-blue-600,.text-indigo-400,.text-indigo-500,.text-primary){color:var(--erp-primary) !important;}
body :where(.border-blue-400,.border-blue-500,.border-blue-600,.border-indigo-500){border-color:var(--erp-primary) !important;}
body :where(.hover\:bg-blue-600:hover,.hover\:bg-blue-700:hover,.hover\:bg-indigo-700:hover){background-color:color-mix(in srgb,var(--erp-primary) 86%,var(--erp-black)) !important;}
body :where(.focus\:ring-blue-500:focus,.focus\:border-blue-500:focus){--tw-ring-color:var(--erp-primary);border-color:var(--erp-primary) !important;}
@media (max-width:640px){ body :where(.card,.erp-card,.card-dark){border-radius:var(--erp-radius);} }
/* Utility class overrides keep Tailwind-generated fills synchronized with store settings. */
body.bg-gray-950,body.bg-slate-950,body.bg-zinc-950,body.bg-black { background-color:var(--erp-background) !important; }
body :where(.bg-gray-900,.bg-slate-900,.bg-zinc-900,.bg-gray-800,.bg-slate-800,.bg-zinc-800){background-color:var(--erp-surface-hover);}
body :where(.bg-blue-100,.bg-blue-900,.bg-indigo-900){background-color:var(--erp-primary-tint-16);}
body :where(.text-gray-300,.text-slate-300,.text-gray-200,.text-slate-200){color:var(--erp-foreground);}
body :where(.text-gray-400,.text-gray-500,.text-slate-400,.text-slate-500){color:var(--erp-muted);}
body :where(.border-gray-700,.border-gray-800,.border-slate-700,.border-slate-800){border-color:var(--erp-border);}
/* Ensure readable captions on bright user-selected brand colors. */
body :where(.btn-primary,.erp-btn,.erp-install-btn,.erp-lang-switch a.active,.bg-blue-400,.bg-blue-500,.bg-blue-600,.bg-blue-700,.bg-indigo-500,.bg-indigo-600,.bg-indigo-700){color:var(--erp-on-primary) !important;}
body [style*="background: var(--erp-primary)"],body [style*="background:var(--erp-primary)"],body [style*="background-color: var(--erp-primary)"],body [style*="background-color:var(--erp-primary)"]{color:var(--erp-on-primary) !important;}

/* Brand-only legacy orange utilities. Warning/late/overtime status orange is preserved. */
body :where(.hover\:text-orange-400:hover,.hover\:text-orange-500:hover){color:var(--erp-primary)!important}
body :where(.hover\:bg-orange-700:hover,.hover\:bg-orange-600:hover){background-color:color-mix(in srgb,var(--erp-primary) 88%,var(--erp-black))!important}