/* ═══════════════════════════════════════════════════════════════════
   ERP THEME — Shopify Editions Winter 2024 inspired
   ═══════════════════════════════════════════════════════════════════
   Light: Lavender-blue tones (#e6ebf4 base), soft purple accents
   Dark: Deep purple-black (#06040d base), lavender text, mono font feel
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* Glass */
  --erp-glass:          rgba(220, 227, 254, 0.5);
  --erp-glass-strong:   rgba(255, 255, 255, 0.82);
  --erp-glass-border:   rgba(61, 82, 160, 0.08);
  --erp-glass-shadow:   0 1px 3px rgba(61, 82, 160, 0.05), 0 4px 24px rgba(61, 82, 160, 0.03);
  --erp-glass-blur:     20px;

  /* Surfaces — from screenshot palette */
  --erp-bg:             #ffffff;    /* Cards, panels                      */
  --erp-bg-page:        #dce3fe;    /* Page background — lighter blue     */
  --erp-bg-muted:       #d0d8f2;    /* Hover, zebra — slightly darker     */
  --erp-bg-accent:      #ADBBDA;    /* Stronger muted — light blue-gray   */

  /* Text — deep blue navy */
  --erp-text:           #2a2d45;    /* Primary headings — dark navy       */
  --erp-text-medium:    #3D52A0;    /* Body text — uses primary blue      */
  --erp-text-secondary: #8697C4;    /* Labels — muted blue-gray           */
  --erp-text-tertiary:  #ADBBDA;    /* Placeholder — light blue-gray      */
  --erp-text-faint:     #d0d5e4;    /* Barely visible                     */

  /* Borders — blue-tinted grays */
  --erp-border:         #ADBBDA;    /* Default borders — light blue-gray  */
  --erp-border-strong:  #8697C4;    /* Hover borders — muted blue-gray    */
  --erp-border-row:     #d8def5;    /* Table row separators               */

  /* Primary — deep blue from screenshot */
  --erp-primary:        #3D52A0;    /* Buttons — deep blue                */
  --erp-primary-fg:     #ffffff;    /* Text on primary                    */
  --erp-primary-hover:  #324690;    /* Hover — slightly darker            */
  --erp-primary-ring:   rgba(112, 145, 230, 0.3);
  --erp-primary-light:  #dce2fa;    /* Light blue tint                    */

  /* Semantic: Success */
  --erp-success-bg:     #ecfdf5;
  --erp-success-bg-solid:#10b981;
  --erp-success-bg-dark:#059669;
  --erp-success-border: #a7f3d0;
  --erp-success-text:   #047857;
  --erp-success-icon:   #10b981;
  --erp-success-light:  #34d399;

  /* Semantic: Warning */
  --erp-warning-bg:     #fffbeb;
  --erp-warning-bg-solid:#f59e0b;
  --erp-warning-bg-dark:#d97706;
  --erp-warning-border: #fde68a;
  --erp-warning-text:   #b45309;
  --erp-warning-icon:   #f59e0b;

  /* Semantic: Danger */
  --erp-danger-bg:      #fef2f2;
  --erp-danger-bg-solid:#ef4444;
  --erp-danger-bg-dark: #dc2626;
  --erp-danger-border:  #fecaca;
  --erp-danger-text:    #b91c1c;
  --erp-danger-icon:    #ef4444;
  --erp-danger-light:   #f87171;
  --erp-danger-strong:  #991b1b;

  /* Semantic: Info — uses theme blue */
  --erp-info-bg:        #edf0fa;
  --erp-info-bg-mid:    #dce2f5;
  --erp-info-bg-solid:  #7091E6;
  --erp-info-bg-dark:   #3D52A0;
  --erp-info-border:    #ADBBDA;
  --erp-info-text:      #3D52A0;
  --erp-info-icon:      #3b82f6;
  --erp-info-light:     #60a5fa;

  /* Semantic: Accent — blue from palette */
  --erp-accent-bg:      #dce2fa;
  --erp-accent-bg-mid:  #e0d5f5;
  --erp-accent-border:  #ADBBDA;
  --erp-accent-text:    #3D52A0;
  --erp-accent-icon:    #7091E6;
  --erp-accent-light:   #8697C4;

  /* Scrollbar */
  --erp-scrollbar:      #dde2ed;
  --erp-scrollbar-hover:#b5bdd0;

  /* Shadows */
  --erp-shadow-sm:      0 1px 2px 0 rgba(39, 41, 59, 0.04);
  --erp-shadow-lg:      0 4px 12px 0 rgba(39, 41, 59, 0.06);
  --erp-shadow-xl:      0 8px 24px 0 rgba(39, 41, 59, 0.08);

  /* Overlay */
  --erp-overlay:        rgba(39, 41, 59, 0.5);

  /* Gradient */
  --erp-gradient-from:  #ffffff;
}


/* ═══════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════ */
html.dark {
  /* Glass — lighter dark blue */
  --erp-glass:          rgba(22, 27, 50, 0.55);
  --erp-glass-strong:   rgba(26, 32, 56, 0.85);
  --erp-glass-border:   rgba(112, 145, 230, 0.1);
  --erp-glass-shadow:   0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 24px rgba(0, 0, 0, 0.15);
  --erp-glass-blur:     24px;

  /* Surfaces — lighter navy (not pitch black) */
  --erp-bg:             #1a2038;    /* Cards — medium navy                */
  --erp-bg-page:        #121828;    /* Page background — dark navy        */
  --erp-bg-muted:       #222a45;    /* Hover states                       */
  --erp-bg-accent:      #2c355a;    /* Selected, stronger                 */

  /* Text */
  --erp-text:           #e0e6f8;    /* Primary text                       */
  --erp-text-medium:    #b8c4e0;    /* Body text                          */
  --erp-text-secondary: #8697C4;    /* Labels                             */
  --erp-text-tertiary:  #5a6890;    /* Placeholder                        */
  --erp-text-faint:     #354060;    /* Barely visible                     */

  /* Borders — more visible */
  --erp-border:         #2c355a;    /* Default borders                    */
  --erp-border-strong:  #3a4570;    /* Hover borders                      */
  --erp-border-row:     #222a45;    /* Row separators                     */

  /* Primary — #7091E6 (medium blue from palette, pops on dark) */
  --erp-primary:        #7091E6;    /* Medium blue — vibrant on dark      */
  --erp-primary-fg:     #121828;    /* Dark text on blue buttons          */
  --erp-primary-hover:  #8aa4ee;    /* Lighter on hover                   */
  --erp-primary-ring:   rgba(112, 145, 230, 0.25);
  --erp-primary-light:  rgba(61, 82, 160, 0.15);

  /* Semantic: Success */
  --erp-success-bg:     rgba(16, 185, 129, 0.1);
  --erp-success-bg-solid:#10b981;
  --erp-success-bg-dark:#059669;
  --erp-success-border: rgba(16, 185, 129, 0.2);
  --erp-success-text:   #6ee7b7;
  --erp-success-icon:   #34d399;
  --erp-success-light:  #34d399;

  /* Semantic: Warning */
  --erp-warning-bg:     rgba(245, 158, 11, 0.1);
  --erp-warning-bg-solid:#f59e0b;
  --erp-warning-bg-dark:#d97706;
  --erp-warning-border: rgba(245, 158, 11, 0.2);
  --erp-warning-text:   #fcd34d;
  --erp-warning-icon:   #fbbf24;

  /* Semantic: Danger */
  --erp-danger-bg:      rgba(239, 68, 68, 0.1);
  --erp-danger-bg-solid:#ef4444;
  --erp-danger-bg-dark: #dc2626;
  --erp-danger-border:  rgba(239, 68, 68, 0.2);
  --erp-danger-text:    #fca5a5;
  --erp-danger-icon:    #f87171;
  --erp-danger-light:   #f87171;
  --erp-danger-strong:  #fca5a5;

  /* Semantic: Info — uses palette blues */
  --erp-info-bg:        rgba(112, 145, 230, 0.1);
  --erp-info-bg-mid:    rgba(112, 145, 230, 0.15);
  --erp-info-bg-solid:  #7091E6;
  --erp-info-bg-dark:   #3D52A0;
  --erp-info-border:    rgba(112, 145, 230, 0.2);
  --erp-info-text:      #ADBBDA;
  --erp-info-icon:      #7091E6;
  --erp-info-light:     #7091E6;

  /* Semantic: Accent — palette blues */
  --erp-accent-bg:      rgba(112, 145, 230, 0.08);
  --erp-accent-bg-mid:  rgba(112, 145, 230, 0.12);
  --erp-accent-border:  rgba(112, 145, 230, 0.18);
  --erp-accent-text:    #ADBBDA;
  --erp-accent-icon:    #7091E6;
  --erp-accent-light:   #8697C4;

  /* Scrollbar */
  --erp-scrollbar:      #354060;
  --erp-scrollbar-hover:#3D52A0;

  /* Shadows — softer since bg is lighter */
  --erp-shadow-sm:      0 1px 2px 0 rgba(0, 0, 0, 0.25);
  --erp-shadow-lg:      0 4px 12px 0 rgba(0, 0, 0, 0.3);
  --erp-shadow-xl:      0 8px 24px 0 rgba(0, 0, 0, 0.4);

  /* Overlay */
  --erp-overlay:        rgba(18, 24, 40, 0.8);

  /* Gradient */
  --erp-gradient-from:  #1a2038;

  color-scheme: dark;
}


/* ═══════════════════════════════════════════════════════════════════
   DARK MODE — Tailwind class overrides
   ═══════════════════════════════════════════════════════════════════ */
html.dark body { background-color: var(--erp-bg-page); color: var(--erp-text); }

/* Backgrounds */
html.dark .bg-white     { background-color: var(--erp-bg) !important; }
html.dark .bg-zinc-50   { background-color: var(--erp-bg-page) !important; }
html.dark .bg-zinc-100  { background-color: var(--erp-bg-muted) !important; }
html.dark .bg-zinc-200  { background-color: var(--erp-bg-accent) !important; }
html.dark .bg-zinc-900  { background-color: var(--erp-primary) !important; }
html.dark .bg-transparent { background-color: transparent !important; }

/* Text */
html.dark .text-zinc-900 { color: var(--erp-text) !important; }
html.dark .text-zinc-800 { color: var(--erp-text) !important; }
html.dark .text-zinc-700 { color: var(--erp-text-medium) !important; }
html.dark .text-zinc-600 { color: var(--erp-text-secondary) !important; }
html.dark .text-zinc-500 { color: var(--erp-text-secondary) !important; }
html.dark .text-zinc-400 { color: var(--erp-text-tertiary) !important; }
html.dark .text-zinc-300 { color: var(--erp-text-faint) !important; }
html.dark .text-white    { color: var(--erp-primary-fg) !important; }

/* Borders */
html.dark .border-zinc-100    { border-color: var(--erp-border-row) !important; }
html.dark .border-zinc-200    { border-color: var(--erp-border) !important; }
html.dark .border-zinc-300    { border-color: var(--erp-border-strong) !important; }
html.dark .border-zinc-700    { border-color: var(--erp-border-strong) !important; }
html.dark .border-zinc-900    { border-color: var(--erp-primary) !important; }
html.dark .border-white       { border-color: var(--erp-bg) !important; }
html.dark .border-transparent { border-color: transparent !important; }
html.dark .border-dashed      { border-color: var(--erp-border-strong) !important; }

/* Dividers */
html.dark .divide-zinc-100 > * + * { border-color: var(--erp-border-row) !important; }
html.dark .divide-zinc-200 > * + * { border-color: var(--erp-border) !important; }

/* Hover */
html.dark .hover\:bg-zinc-50:hover  { background-color: var(--erp-bg-muted) !important; }
html.dark .hover\:bg-zinc-100:hover { background-color: var(--erp-bg-accent) !important; }
html.dark .hover\:bg-zinc-200:hover { background-color: var(--erp-bg-accent) !important; }
html.dark .hover\:bg-zinc-800:hover { background-color: var(--erp-primary-hover) !important; }
html.dark .hover\:text-zinc-600:hover { color: var(--erp-text-secondary) !important; }
html.dark .hover\:text-zinc-700:hover { color: var(--erp-text-medium) !important; }
html.dark .hover\:text-zinc-900:hover { color: var(--erp-text) !important; }
html.dark .hover\:border-zinc-300:hover { border-color: var(--erp-border-strong) !important; }
html.dark .hover\:border-zinc-400:hover { border-color: var(--erp-border-strong) !important; }

/* Focus / ring */
html.dark .ring-zinc-200              { --tw-ring-color: var(--erp-border) !important; }
html.dark .ring-zinc-900              { --tw-ring-color: var(--erp-primary) !important; }
html.dark .focus\:ring-zinc-900:focus { --tw-ring-color: var(--erp-primary) !important; }

/* Shadows */
html.dark .shadow-sm  { box-shadow: var(--erp-shadow-sm) !important; }
html.dark .shadow-lg  { box-shadow: var(--erp-shadow-lg) !important; }
html.dark .shadow-xl  { box-shadow: var(--erp-shadow-xl) !important; }

/* Semantic colors — Success */
html.dark .bg-emerald-50  { background-color: var(--erp-success-bg) !important; }
html.dark .bg-emerald-100 { background-color: var(--erp-success-bg) !important; }
html.dark .bg-emerald-200 { background-color: rgba(16, 185, 129, 0.2) !important; }
html.dark .bg-emerald-500 { background-color: var(--erp-success-bg-solid) !important; }
html.dark .bg-emerald-600 { background-color: var(--erp-success-bg-dark) !important; }
html.dark .bg-emerald-700 { background-color: var(--erp-success-bg-dark) !important; }
html.dark .text-emerald-400 { color: var(--erp-success-light) !important; }
html.dark .text-emerald-500 { color: var(--erp-success-icon) !important; }
html.dark .text-emerald-600 { color: var(--erp-success-icon) !important; }
html.dark .text-emerald-700 { color: var(--erp-success-text) !important; }
html.dark .text-emerald-800 { color: var(--erp-success-text) !important; }
html.dark .text-emerald-900 { color: var(--erp-success-text) !important; }
html.dark .border-emerald-200 { border-color: var(--erp-success-border) !important; }
html.dark .border-emerald-400 { border-color: var(--erp-success-icon) !important; }
html.dark .hover\:bg-emerald-700:hover { background-color: var(--erp-success-bg-dark) !important; }

/* Warning */
html.dark .bg-amber-50  { background-color: var(--erp-warning-bg) !important; }
html.dark .bg-amber-100 { background-color: var(--erp-warning-bg) !important; }
html.dark .bg-amber-500 { background-color: var(--erp-warning-bg-solid) !important; }
html.dark .bg-amber-600 { background-color: var(--erp-warning-bg-dark) !important; }
html.dark .text-amber-500 { color: var(--erp-warning-icon) !important; }
html.dark .text-amber-600 { color: var(--erp-warning-text) !important; }
html.dark .text-amber-700 { color: var(--erp-warning-text) !important; }
html.dark .text-amber-900 { color: var(--erp-warning-text) !important; }
html.dark .border-amber-200 { border-color: var(--erp-warning-border) !important; }

/* Danger */
html.dark .bg-red-50   { background-color: var(--erp-danger-bg) !important; }
html.dark .bg-red-100  { background-color: var(--erp-danger-bg) !important; }
html.dark .bg-red-500  { background-color: var(--erp-danger-bg-solid) !important; }
html.dark .bg-red-600  { background-color: var(--erp-danger-bg-dark) !important; }
html.dark .text-red-400 { color: var(--erp-danger-light) !important; }
html.dark .text-red-500 { color: var(--erp-danger-icon) !important; }
html.dark .text-red-600 { color: var(--erp-danger-icon) !important; }
html.dark .text-red-700 { color: var(--erp-danger-text) !important; }
html.dark .text-red-900 { color: var(--erp-danger-strong) !important; }
html.dark .border-red-200  { border-color: var(--erp-danger-border) !important; }
html.dark .hover\:bg-red-50:hover  { background-color: var(--erp-danger-bg) !important; }
html.dark .hover\:bg-red-600:hover { background-color: var(--erp-danger-bg-dark) !important; }
html.dark .hover\:text-red-500:hover { color: var(--erp-danger-icon) !important; }
html.dark .hover\:text-red-600:hover { color: var(--erp-danger-icon) !important; }

/* Info / Blue */
html.dark .bg-blue-50   { background-color: var(--erp-info-bg) !important; }
html.dark .bg-blue-100  { background-color: var(--erp-info-bg-mid) !important; }
html.dark .bg-blue-500  { background-color: var(--erp-info-bg-solid) !important; }
html.dark .bg-blue-600  { background-color: var(--erp-info-bg-dark) !important; }
html.dark .text-blue-500 { color: var(--erp-info-icon) !important; }
html.dark .text-blue-600 { color: var(--erp-info-icon) !important; }
html.dark .text-blue-700 { color: var(--erp-info-text) !important; }
html.dark .border-blue-200 { border-color: var(--erp-info-border) !important; }

/* Purple / Accent */
html.dark .bg-purple-50  { background-color: var(--erp-accent-bg) !important; }
html.dark .bg-purple-100 { background-color: var(--erp-accent-bg-mid) !important; }
html.dark .text-purple-500 { color: var(--erp-accent-icon) !important; }
html.dark .text-purple-600 { color: var(--erp-accent-icon) !important; }
html.dark .text-purple-700 { color: var(--erp-accent-text) !important; }
html.dark .border-purple-200 { border-color: var(--erp-accent-border) !important; }

/* Form inputs */
html.dark input, html.dark select, html.dark textarea {
  background-color: var(--erp-bg) !important; color: var(--erp-text) !important; border-color: var(--erp-border) !important;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: var(--erp-text-tertiary) !important; }
html.dark input:focus, html.dark select:focus, html.dark textarea:focus {
  border-color: var(--erp-primary) !important;
  box-shadow: 0 0 0 2px var(--erp-primary-ring), inset 0 1px 2px rgba(0,0,0,0.1) !important;
}
html.dark input[type="checkbox"], html.dark input[type="radio"] { background-color: var(--erp-bg-muted) !important; border-color: var(--erp-border-strong) !important; }
html.dark input[type="checkbox"]:checked, html.dark input[type="radio"]:checked { background-color: var(--erp-primary) !important; border-color: var(--erp-primary) !important; }
html.dark input[type="range"] { background-color: var(--erp-bg-accent) !important; accent-color: var(--erp-primary) !important; }

/* Gradients */
html.dark .bg-gradient-to-r { --tw-gradient-from: var(--erp-gradient-from) !important; --tw-gradient-via: var(--erp-gradient-from) !important; }
html.dark .bg-gradient-to-l { --tw-gradient-from: var(--erp-gradient-from) !important; --tw-gradient-via: var(--erp-gradient-from) !important; }
html.dark .from-white       { --tw-gradient-from: var(--erp-bg) !important; }
html.dark .from-zinc-900    { --tw-gradient-from: var(--erp-primary) !important; }

/* Overlays & Modals */
html.dark .erp-overlay        { background: var(--erp-overlay); }
html.dark .erp-modal-backdrop { background: var(--erp-overlay); }
html.dark .erp-command-palette { background: var(--erp-overlay); }
html.dark .erp-modal-content {
  background-color: var(--erp-bg) !important;
  border-color: var(--erp-border-strong) !important;
  box-shadow: 0 0 0 1px var(--erp-border-strong), 0 16px 48px rgba(0, 0, 0, 0.4) !important;
}
html.dark .erp-command-palette > div > div {
  background-color: var(--erp-bg) !important;
  border-color: var(--erp-border-strong) !important;
  box-shadow: 0 0 0 1px var(--erp-border-strong), 0 16px 48px rgba(0, 0, 0, 0.4) !important;
}

/* Skeleton, misc */
html.dark .animate-pulse .bg-zinc-200 { background-color: var(--erp-bg-accent) !important; }
html.dark .animate-pulse .bg-zinc-100 { background-color: var(--erp-bg-muted) !important; }
html.dark .accent-zinc-900 { accent-color: var(--erp-primary) !important; }
html.dark kbd { background-color: var(--erp-bg-muted) !important; border-color: var(--erp-border) !important; color: var(--erp-text-tertiary) !important; }
html.dark code { background-color: var(--erp-bg-muted) !important; color: var(--erp-text-secondary) !important; }
html.dark button.bg-zinc-900[class*="rounded-full"] { background-color: var(--erp-primary) !important; }
html.dark .w-px.bg-zinc-900, html.dark .h-0\.5.bg-zinc-900, html.dark .h-px.bg-zinc-900 { background-color: var(--erp-primary) !important; }
html.dark .wizard-circle { background-color: var(--erp-primary) !important; color: var(--erp-primary-fg) !important; }
html.dark .border-b-2.border-zinc-900 { border-color: var(--erp-primary) !important; }
html.dark .border-2.border-zinc-900 { border-color: var(--erp-primary) !important; }


/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE — Primary color overrides
   bg-zinc-900 → dark navy (#27293b) — already matches!
   But we need focus rings, checkboxes, flatpickr etc. to use vars
   ═══════════════════════════════════════════════════════════════════ */
.bg-zinc-900 { background-color: var(--erp-primary) !important; }
.bg-zinc-800 { background-color: var(--erp-primary-hover) !important; }
.hover\:bg-zinc-800:hover { background-color: var(--erp-primary-hover) !important; }
.border-zinc-900 { border-color: var(--erp-primary) !important; }
.border-b-2.border-zinc-900 { border-color: var(--erp-primary) !important; }
.border-2.border-zinc-900 { border-color: var(--erp-primary) !important; }
.ring-zinc-900 { --tw-ring-color: var(--erp-primary) !important; }
.focus\:ring-zinc-900:focus { --tw-ring-color: var(--erp-primary) !important; }
.accent-zinc-900 { accent-color: var(--erp-primary) !important; }
input[type="checkbox"].text-zinc-900, input[type="radio"].text-zinc-900 { color: var(--erp-primary) !important; accent-color: var(--erp-primary); }
input[type="checkbox"]:checked, input[type="radio"]:checked { background-color: var(--erp-primary) !important; border-color: var(--erp-primary) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--erp-primary) !important; box-shadow: 0 0 0 2px var(--erp-primary-ring), inset 0 1px 2px rgba(0,0,0,0.04) !important; }
input[type="range"] { accent-color: var(--erp-primary) !important; }
button.bg-zinc-900[class*="rounded-full"] { background-color: var(--erp-primary) !important; }
.wizard-circle { background-color: var(--erp-primary) !important; }
.w-px.bg-zinc-900, .h-0\.5.bg-zinc-900, .h-px.bg-zinc-900 { background-color: var(--erp-primary) !important; }
.from-zinc-900 { --tw-gradient-from: var(--erp-primary) !important; }
.bg-zinc-900.rounded-full { background-color: var(--erp-primary) !important; }

/* Tinted button shadow — blue glow matching #3D52A0 */
.bg-zinc-900[class*="rounded"] {
  box-shadow: 0 1px 3px rgba(61, 82, 160, 0.25), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}
.bg-zinc-900[class*="rounded"]:hover {
  box-shadow: 0 4px 14px rgba(61, 82, 160, 0.3), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}
.erp-sidebar a.bg-zinc-900 { box-shadow: 0 1px 6px rgba(112, 145, 230, 0.2) !important; }

/* Flatpickr */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--erp-primary) !important; border-color: var(--erp-primary) !important; color: var(--erp-primary-fg) !important;
}
.flatpickr-day.today { border-color: var(--erp-primary) !important; }
.flatpickr-day.inRange { background: var(--erp-primary-light) !important; border-color: var(--erp-primary-light) !important; box-shadow: -5px 0 0 var(--erp-primary-light), 5px 0 0 var(--erp-primary-light) !important; }

.otp-box:focus { --tw-ring-color: var(--erp-primary) !important; border-color: var(--erp-primary) !important; }
.border-dashed:hover { border-color: var(--erp-primary) !important; }
.bg-zinc-900.text-white.text-xs.font-medium[class*="rounded-full"] { background-color: var(--erp-primary) !important; }