/* ==========================================================================
   Centropy ERP - Unified Enterprise Design System
   Design Tokens v2.0  (single source of truth for color / type / space / ...)
   ==========================================================================
   Load order:  theme.css  ->  admin.css  ->  module overrides (optional)
   Usage: reference tokens via var(--token) in every stylesheet and inline
   style. Override --color-primary once to rebrand the entire suite.

   Canonical surfaces that consume these tokens:
     - Legacy admin (admin/*.html) via admin.css
     - Admin SPA (admin-spa/src/design/*) via aliased tokens
    ========================================================================== */

/* Local Montserrat - fallback when Google Fonts CDN is unreachable */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Montserrat-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Montserrat-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Montserrat-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Montserrat-Bold.woff2') format('woff2'); }

:root {
  /* ======================================================================
     1. COLOR - Brand & Semantic
     Primary is a neutral enterprise indigo. Red is reserved exclusively
     for danger/error/destructive actions (never for primary actions).
     ====================================================================== */
  --color-primary:         #4f46e5;
  --color-primary-hover:   #4338ca;
  --color-primary-active:  #3730a3;
  --color-primary-light:   #eef2ff;
  --color-primary-lighter: #e0e7ff;
  --color-primary-dark:    #3730a3;
  --color-primary-gradient: linear-gradient(135deg, #4f46e5, #6366f1);
  --color-primary-glow:    0 4px 20px rgba(79, 70, 229, 0.25);
  --color-on-primary:      #ffffff;

  /* Semantic (functional) colors */
  --color-success:       #16a34a;
  --color-success-bg:    #f0fdf4;
  --color-success-border:#bbf7d0;
  --color-warning:       #d97706;
  --color-warning-bg:    #fffbeb;
  --color-warning-border:#fde68a;
  --color-danger:        #dc2626;
  --color-danger-bg:     #fef2f2;
  --color-danger-border: #fecaca;
  --color-info:          #0891b2;
  --color-info-bg:       #ecfeff;
  --color-info-border:   #a5f3fc;
  --color-on-danger:     #ffffff;

  /* Neutral / surface */
  --color-bg:            #f1f5f9;
  --color-surface:       #ffffff;
  --color-surface-2:     #f8fafc;
  --color-surface-hover: #f1f5f9;
  --color-text:          #1e293b;
  --color-text-muted:    #64748b;
  --color-text-light:    #94a3b8;
  --color-border:        #e2e8f0;
  --color-border-light:  #f1f5f9;
  --color-input-bg:      #ffffff;
  --color-overlay:       rgba(15, 23, 42, 0.55);

  /* Brand mark / shell */
  --color-shell-bg:      #1a1a2e;
  --color-shell-text:    #cbd5e1;
  --color-shell-text-2:  #94a3b8;
  --color-shell-hover:   rgba(255, 255, 255, 0.06);
  --color-shell-active:  rgba(79, 70, 229, 0.18);
  --color-shell-border:  rgba(255, 255, 255, 0.08);

  /* Legacy alias kept for backward compatibility */
  --color-primary-old:   #ff0000;

  /* ======================================================================
     2. MODULE ACCENTS - identity color per ERP module (decoration only,
     never used for primary actions or danger states)
     ====================================================================== */
  /* Module accent colours for the sidebar icons. These MUST match the
     centralized MODULE_ACCENTS map in admin/js/module-access.js (which drives
     the content/tab accent via --module-accent) so the sidebar icon and the
     page's tabs/subtabs/buttons share one colour per module. */
  --module-administration: #4f46e5;
  --module-home:           #6366f1;
  --module-financial:      #2563eb;
  --module-banking:        #0d9488;
  --module-sales:          #06b6d4;
  --module-purchasing:     #7c3aed;
  --module-inventory:      #059669;
  --module-business-partners: #0e7490;
  --module-mrp:            #f59e0b;
  --module-production:     #ef4444;
  --module-scm:            #14b8a6;
  --module-projects:       #6366f1;
  --module-service:        #f97316;
  --module-hr:             #ec4899;
  --module-pos:            #16a34a;
  --module-ecommerce:      #8b5cf6;
  --module-mobile:         #d946ef;
  --module-fleet:          #b45309;
  --module-asset:          #0ea5e9;
  --module-analytics:      #ab47bc;

  /* ======================================================================
     3. TYPOGRAPHY - ERP BUSINESS ONE STANDARD
     Font: Tahoma (ERP B1 default). Base content/labels/fields/buttons = 7,
     window title = 9 regular, main menu = 9 bold, messages = 7.
     ====================================================================== */
  --font-family:       Arial, 'Helvetica Neue', Helvetica, sans-serif;
  /* Centropy font standard - exactly three sizes */
  --fs-tab:            14px;  /* main tabs */
  --fs-subtab:         13px;  /* subtabs */
  --fs-body:           13px;  /* content text */
  --fs-chrome:         14px;  /* sidebar, menubar, page titles */
  --font-mono:         'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  --font-size-xs:      8px;
  --font-size-sm:      9px;
  --font-size-md:      10px;
  --font-size-base:    10px;
  --font-size-lg:      11px;
  --font-size-xl:      12px;
  --font-size-2xl:     13px;
  --font-size-3xl:     14px;
  --font-size-4xl:     16px;
  /* Centropy icon palette (Lucide only) */
  --icon-default:      #4f46e5;
  --icon-muted:        #64748b;
  --icon-info:         #2563eb;
  --icon-success:      #16a34a;
  --icon-warning:      #d97706;
  --icon-danger:       #dc2626;
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --line-height:       1.5;
  --line-height-tight: 1.25;
  --letter-spacing-tight:   0;
  --letter-spacing-wide:    0.02em;

  /* ======================================================================
     4. SPACING SCALE
     ====================================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Layout */
  --sidebar-width:        260px;
  --sidebar-collapsed-width: 68px;
--topbar-height:        34px;
--topnav-height:        34px;
--toolbar-height:       34px;
  --container-max:        1600px;
  --container-narrow:     1200px;
  --grid-gutter:          16px;
  --content-pad:          24px;
  --search-max:           280px;
  --avatar-sm:            30px;
  --avatar-md:            38px;
  --notif-width:          360px;

  /* ======================================================================
     5. RADII
     ====================================================================== */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ======================================================================
     6. SHADOWS
     ====================================================================== */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 28px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 20px 48px rgba(15, 23, 42, 0.16);

  /* ======================================================================
     7. BREAKPOINTS  (see shared responsive layer at the foot of admin.css)
     ====================================================================== */
  --bp-sm:   576px;
  --bp-md:   768px;
  --bp-lg:   992px;
  --bp-xl:   1200px;
  --bp-xxl:  1440px;

  /* ======================================================================
     8. Z-INDEX SCALE
     ====================================================================== */
  --z-sidebar:  100;
  --z-topbar:   200;
  --z-sticky:   300;
  --z-dropdown: 1000;
  --z-modal:    5000;
  --z-toast:    9999;

  /* ======================================================================
     9. MOTION
     ====================================================================== */
  --transition-fast: 0.15s ease;
  --transition:      0.2s ease;
  --transition-slow: 0.3s ease;
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   120ms;
  --duration:        200ms;
  --duration-slow:   300ms;

  /* ======================================================================
     10. DATA VISUALIZATION (charts)
     ====================================================================== */
  --chart-1: #4f46e5;
  --chart-2: #10b981;
  --chart-3: #f59e0b;
  --chart-4: #ef4444;
  --chart-5: #8b5cf6;
  --chart-6: #06b6d4;
  --chart-7: #f97316;
  --chart-8: #6366f1;
  --chart-9: #84cc16;
  --chart-10: #ec4899;
  --chart-grid: #f1f5f9;

  /* ======================================================================
     11. STATUS BADGE MAP  (color + icon pairing; never color-only)
     ====================================================================== */
  --status-open-bg:      var(--color-info-bg);
  --status-open-fg:      var(--color-info);
  --status-inprogress-bg: var(--color-primary-light);
  --status-inprogress-fg: var(--color-primary);
  --status-completed-bg: var(--color-success-bg);
  --status-completed-fg: var(--color-success);
  --status-pending-bg:   var(--color-warning-bg);
  --status-pending-fg:   var(--color-warning);
  --status-cancelled-bg: var(--color-surface-2);
  --status-cancelled-fg: var(--color-text-muted);
  --status-overdue-bg:   var(--color-danger-bg);
  --status-overdue-fg:   var(--color-danger);
}

/* ======================================================================
   FOCUS RING - one consistent keyboard affordance everywhere
   ====================================================================== */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ======================================================================
   SELECTION
   ====================================================================== */
::selection {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

/* ======================================================================
   SCROLLBAR
   ====================================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-light); }

/* ======================================================================
   BASE TYPOGRAPHY
   ====================================================================== */
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.45;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ======================================================================
   LEGACY ALIASES - old module CSS used --color-primary / --sidebar-bg etc.
   These aliases keep pre-existing pages working while migrating.
   ====================================================================== */
:root {
  --sidebar-bg:         var(--color-shell-bg);
  --sidebar-text:       var(--color-shell-text);
  --sidebar-text-hover: #ffffff;
  --sidebar-active:     var(--color-shell-active);
  --font:               var(--font-family);
}

/* ======================================================================
   DARK MODE - toggle by adding data-theme="dark" on <html>.
   shell.js handles the toggle + persistence; prefers-color-scheme is used
   as the default when the user has not chosen explicitly.
   ====================================================================== */
html[data-theme="dark"] {
  --color-bg:            #0b1220;
  --color-surface:       #111a2c;
  --color-surface-2:     #1a2540;
  --color-surface-hover: #223049;
  --color-text:          #e2e8f0;
  --color-text-muted:    #94a3b8;
  --color-text-light:    #64748b;
  --color-border:        #26334f;
  --color-border-light:  #1c2740;
  --color-input-bg:      #0f1930;
  --color-primary-light:   rgba(79, 70, 229, 0.18);
  --color-primary-lighter: rgba(79, 70, 229, 0.30);
  --color-success-bg:      rgba(22, 163, 74, 0.14);
  --color-success-border:  rgba(22, 163, 74, 0.35);
  --color-warning-bg:      rgba(217, 119, 6, 0.14);
  --color-warning-border:  rgba(217, 119, 6, 0.35);
  --color-danger-bg:       rgba(220, 38, 38, 0.14);
  --color-danger-border:   rgba(220, 38, 38, 0.35);
  --color-info-bg:         rgba(8, 145, 178, 0.16);
  --color-info-border:     rgba(8, 145, 178, 0.35);
  --color-shell-bg:      #0d1526;
  --color-shell-text:    #cbd5e1;
  --color-shell-text-2:  #94a3b8;
  --color-shell-hover:   rgba(255, 255, 255, 0.08);
  --color-shell-active:  rgba(79, 70, 229, 0.30);
  --color-shell-border:  rgba(255, 255, 255, 0.10);
  --color-on-primary:    #ffffff;
  --color-primary-glow:  0 4px 20px rgba(99, 102, 241, 0.30);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.50);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.55);
  --chart-grid:          #1c2740;
}

/* Smooth theme transition for surfaces (skip when reduced motion is set) */
html[data-theme] body,
html[data-theme] .card,
html[data-theme] .widget,
html[data-theme] .sidebar,
html[data-theme] #moduleTopBar,
html[data-theme] .main-content,
html[data-theme] .tbl-wrap,
html[data-theme] .modal {
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}