/* FLO ERP premium SaaS UI layer */
:root{
  color-scheme:light;
  --erp-font:"DM Sans",Inter,Segoe UI,Arial,sans-serif;
  --erp-mono:"DM Mono","SFMono-Regular",Consolas,monospace;
  --erp-bg:#F7F8FB;
  --erp-bg-2:#EEF2F7;
  --erp-shell:#0C1220;
  --erp-shell-2:#111827;
  --erp-surface:#FFFFFF;
  --erp-surface-2:#F8FAFC;
  --erp-surface-3:#F1F5F9;
  --erp-text:#111827;
  --erp-heading:#0F172A;
  --erp-muted:#64748B;
  --erp-subtle:#94A3B8;
  --erp-border:#DDE3EC;
  --erp-border-soft:#E7ECF3;
  --erp-primary:#0F766E;
  --erp-primary-2:#0D9488;
  --erp-primary-soft:#E6F7F3;
  --erp-accent:#2563EB;
  --erp-accent-soft:#EAF1FF;
  --erp-success:#059669;
  --erp-success-soft:#DCFCE7;
  --erp-warning:#B45309;
  --erp-warning-soft:#FEF3C7;
  --erp-danger:#DC2626;
  --erp-danger-soft:#FEE2E2;
  --erp-shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --erp-shadow:0 14px 34px rgba(15,23,42,.08);
  --erp-shadow-lg:0 24px 70px rgba(15,23,42,.14);
  --erp-radius:8px;
  --erp-sidebar:280px;
  --erp-sidebar-collapsed:84px;
  --erp-topbar:72px;
  --erp-ease:cubic-bezier(.16,1,.3,1);
  --erp-ease-spring:cubic-bezier(.2,.8,.2,1);
  --erp-motion-fast:160ms;
  --erp-motion:240ms;
  --erp-motion-slow:320ms;
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --erp-bg:#0B1020;
  --erp-bg-2:#101827;
  --erp-shell:#070B14;
  --erp-shell-2:#0D1322;
  --erp-surface:#111827;
  --erp-surface-2:#151F2E;
  --erp-surface-3:#1E293B;
  --erp-text:#E5E7EB;
  --erp-heading:#F8FAFC;
  --erp-muted:#9CA3AF;
  --erp-subtle:#64748B;
  --erp-border:#263244;
  --erp-border-soft:#1F2937;
  --erp-primary:#2DD4BF;
  --erp-primary-2:#5EEAD4;
  --erp-primary-soft:rgba(45,212,191,.12);
  --erp-accent:#60A5FA;
  --erp-accent-soft:rgba(96,165,250,.14);
  --erp-success-soft:rgba(5,150,105,.18);
  --erp-warning-soft:rgba(180,83,9,.18);
  --erp-danger-soft:rgba(220,38,38,.18);
  --erp-shadow-sm:0 1px 2px rgba(0,0,0,.28);
  --erp-shadow:0 16px 36px rgba(0,0,0,.28);
  --erp-shadow-lg:0 28px 80px rgba(0,0,0,.42);
}

*{letter-spacing:0!important}
html{
  background:var(--erp-bg);
  overflow-x:hidden;
}
body{
  min-height:100vh;
  overflow-x:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72) 0,rgba(255,255,255,0) 280px),
    radial-gradient(circle at 40% -20%,rgba(37,99,235,.08),transparent 36%),
    var(--erp-bg)!important;
  color:var(--erp-text)!important;
  font-family:var(--erp-font)!important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
:root[data-theme="dark"] body{
  background:
    linear-gradient(180deg,rgba(30,41,59,.42) 0,rgba(30,41,59,0) 300px),
    var(--erp-bg)!important;
}

body.erp-loading::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;
  height:3px;
  background:linear-gradient(90deg,var(--erp-primary),var(--erp-accent),var(--erp-primary-2));
  background-size:220% 100%;
  animation:erpLoad 1.05s linear infinite;
}
@keyframes erpLoad{0%{background-position:0 0}100%{background-position:220% 0}}

body.erp-route-leave .main,
body.erp-route-leave .page,
body.erp-route-leave main{
  opacity:0;
  transform:translateY(8px);
  transition:opacity var(--erp-motion-fast) var(--erp-ease),transform var(--erp-motion-fast) var(--erp-ease);
}

.hidden{display:none!important}

/* Shell */
.app{
  display:grid!important;
  grid-template-columns:var(--erp-sidebar) minmax(0,1fr)!important;
  min-height:100vh!important;
  background:transparent!important;
  transition:grid-template-columns var(--erp-motion) var(--erp-ease);
}
body.erp-sidebar-collapsed .app{
  grid-template-columns:var(--erp-sidebar-collapsed) minmax(0,1fr)!important;
}
.side{
  position:sticky!important;
  top:0!important;
  z-index:30;
  height:100vh!important;
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  padding:18px 14px!important;
  overflow:hidden auto;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 260px),
    var(--erp-shell)!important;
  border-right:1px solid rgba(148,163,184,.18)!important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.03);
  transition:width var(--erp-motion) var(--erp-ease),padding var(--erp-motion) var(--erp-ease),transform var(--erp-motion) var(--erp-ease);
}
.side-brand{
  min-height:56px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:10px;
  padding:4px 6px 16px!important;
  border-bottom:1px solid rgba(148,163,184,.16)!important;
}
.side-title{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0;
  color:#fff!important;
  font-size:20px!important;
  font-weight:900!important;
  line-height:1.1;
}
.side-title::before{
  content:"";
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:8px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0)),
    linear-gradient(135deg,var(--erp-primary),var(--erp-accent));
  box-shadow:0 14px 34px rgba(15,118,110,.28);
  transition:transform var(--erp-motion) var(--erp-ease),box-shadow var(--erp-motion) var(--erp-ease);
}
.side-title:hover::before{transform:scale(1.04);box-shadow:0 18px 38px rgba(15,118,110,.34)}
.side-sub{
  grid-column:1 / -1;
  margin-left:44px;
  color:rgba(226,232,240,.58)!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.2;
  text-transform:uppercase;
}
.erp-side-collapse{
  width:34px;
  height:34px;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(226,232,240,.14);
  border-radius:8px;
  background:rgba(255,255,255,.06);
  color:#fff;
}
.erp-side-collapse span,
.erp-shell-toggle span{
  display:block;
  width:15px;
  height:2px;
  margin:2px 0;
  border-radius:999px;
  background:currentColor;
}
.erp-side-collapse:hover{background:rgba(255,255,255,.11)}
.erp-side-collapse:active,.erp-shell-toggle:active{transform:scale(.94)}
body.erp-sidebar-collapsed .side{
  padding-left:12px!important;
  padding-right:12px!important;
}
body.erp-sidebar-collapsed .side-brand{
  grid-template-columns:1fr;
  justify-items:center;
  padding-left:0!important;
  padding-right:0!important;
}
body.erp-sidebar-collapsed .side-title{
  width:44px;
  justify-content:center!important;
  font-size:0!important;
}
body.erp-sidebar-collapsed .side-title::before{
  flex-basis:36px;
  width:36px;
  height:36px;
}
body.erp-sidebar-collapsed .side-sub,
body.erp-sidebar-collapsed .side-foot div{
  display:none!important;
}

.nav{
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
}
.nav a,.nav button{
  position:relative;
  min-height:42px!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:9px 10px!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:rgba(226,232,240,.72)!important;
  font-size:13px!important;
  font-weight:800!important;
  text-align:left!important;
  text-decoration:none!important;
  white-space:nowrap;
  transition:background var(--erp-motion-fast) var(--erp-ease),color var(--erp-motion-fast) var(--erp-ease),transform var(--erp-motion-fast) var(--erp-ease),box-shadow var(--erp-motion-fast) var(--erp-ease);
}
.nav a::before,.nav button::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:999px;
  background:var(--erp-primary);
  opacity:0;
  transform:scaleY(.3);
  transition:opacity var(--erp-motion-fast) var(--erp-ease),transform var(--erp-motion-fast) var(--erp-ease);
}
.nav a:hover,.nav button:hover{
  transform:translateX(2px);
  background:rgba(255,255,255,.07)!important;
  color:#fff!important;
}
.nav a.on,.nav button.on{
  background:#FFFFFF!important;
  color:#10231F!important;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.nav a.on::before,.nav button.on::before{
  opacity:1;
  transform:scaleY(1);
}
.ico{
  flex:0 0 26px;
  width:26px!important;
  height:26px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.10)!important;
  color:rgba(255,255,255,.9)!important;
  font-family:var(--erp-mono)!important;
  font-size:10px!important;
  font-weight:900!important;
}
.nav a.on .ico,.nav button.on .ico{
  background:var(--erp-primary-soft)!important;
  color:var(--erp-primary)!important;
}
body.erp-sidebar-collapsed .nav a,
body.erp-sidebar-collapsed .nav button{
  justify-content:center!important;
  padding:9px!important;
  font-size:0!important;
}
body.erp-sidebar-collapsed .nav a:hover,
body.erp-sidebar-collapsed .nav button:hover{
  transform:none;
}
body.erp-sidebar-collapsed .ico{
  width:32px!important;
  height:32px!important;
}
.side-foot{
  margin-top:auto!important;
  padding:14px 6px 4px!important;
  border-top:1px solid rgba(148,163,184,.16)!important;
  color:rgba(226,232,240,.68)!important;
  font-size:12px!important;
}
.side-foot .btn{
  width:100%!important;
  margin-top:10px!important;
}
body.erp-sidebar-collapsed .side-foot .btn{
  min-width:0;
  padding:0!important;
  font-size:0!important;
}
body.erp-sidebar-collapsed .side-foot .btn::before{
  content:"Out";
  font-size:11px;
}

.main{
  width:100%!important;
  max-width:1520px!important;
  min-width:0;
  margin:0 auto!important;
  padding:22px 28px 42px!important;
  animation:erpPageIn var(--erp-motion-slow) var(--erp-ease) both;
}
@keyframes erpPageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.top{
  min-height:var(--erp-topbar);
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center!important;
  gap:14px!important;
  margin-bottom:22px!important;
  padding:14px 16px!important;
  border:1px solid var(--erp-border-soft)!important;
  border-radius:8px!important;
  background:#FFFFFF!important;
  box-shadow:var(--erp-shadow-sm)!important;
  backdrop-filter:blur(14px);
}
:root[data-theme="dark"] .top{
  background:rgba(17,24,39,.82)!important;
}
.top > div:first-of-type{
  min-width:0;
}
.h1,#pageTitle{
  color:var(--erp-heading)!important;
  font-size:25px!important;
  font-weight:900!important;
  line-height:1.15!important;
}
.who{
  margin-top:5px;
  color:var(--erp-muted)!important;
  font-size:13px!important;
  font-weight:750!important;
}
.erp-shell-toggle,.erp-theme-toggle,.erp-icon-btn{
  width:40px;
  height:40px;
  display:inline-grid;
  place-items:center;
  border:1px solid var(--erp-border)!important;
  border-radius:8px!important;
  background:var(--erp-surface)!important;
  color:var(--erp-text)!important;
  box-shadow:var(--erp-shadow-sm)!important;
}
.erp-shell-toggle:hover,.erp-theme-toggle:hover,.erp-icon-btn:hover{
  border-color:var(--erp-primary)!important;
  color:var(--erp-primary)!important;
  transform:translateY(-1px);
  box-shadow:var(--erp-shadow)!important;
}
.erp-top-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
}
.erp-theme-toggle{
  width:auto;
  min-width:82px;
  padding:0 12px;
  gap:8px;
  font-weight:850;
}
.erp-theme-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--erp-primary),var(--erp-accent));
  box-shadow:0 0 0 3px var(--erp-primary-soft);
}
.erp-user-chip{
  min-height:36px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border:1px solid var(--erp-border-soft);
  border-radius:8px;
  background:var(--erp-surface-2);
  color:var(--erp-muted);
  font-size:12px;
  font-weight:850;
}
.erp-user-chip::before{
  content:"";
  width:18px;
  height:18px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--erp-primary),var(--erp-accent));
}

/* Components */
.card,.stat,.module,.product,.cart-row,.login-box,.denied-box,.erp-kpi,.erp-chart{
  min-width:0;
  border:1px solid var(--erp-border-soft)!important;
  border-radius:8px!important;
  background:var(--erp-surface)!important;
  box-shadow:var(--erp-shadow-sm)!important;
  transition:transform var(--erp-motion) var(--erp-ease),box-shadow var(--erp-motion) var(--erp-ease),border-color var(--erp-motion) var(--erp-ease),background var(--erp-motion) var(--erp-ease);
}
.card,.orders{
  padding:16px!important;
}
.card:hover,.module:hover,.product:hover{
  border-color:rgba(15,118,110,.42)!important;
  transform:translateY(-2px);
  box-shadow:var(--erp-shadow)!important;
}
.card-title,.section-title,.cart-title,.module-name{
  color:var(--erp-heading)!important;
  font-size:15px!important;
  font-weight:900!important;
}
.muted{color:var(--erp-muted)!important}
.grid,.layout,.filters,.modules,.products,.erp-chart-grid,.erp-kpi-grid{
  min-width:0;
}
.grid > *,.layout > *,.filters > *,.modules > *,.products > *,.erp-chart-grid > *,.erp-kpi-grid > *{
  min-width:0;
}
.grid{
  gap:14px!important;
}
.stat{
  min-height:112px;
  position:relative;
  overflow:hidden;
  padding:16px!important;
}
.stat,.erp-kpi,.module,.card,.erp-chart{
  animation:erpCardIn var(--erp-motion-slow) var(--erp-ease) both;
  animation-delay:var(--erp-stagger,0ms);
}
@keyframes erpCardIn{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.stat::after{
  content:"";
  position:absolute;
  right:14px;
  top:14px;
  width:34px;
  height:34px;
  border-radius:8px;
  background:linear-gradient(135deg,var(--erp-primary-soft),var(--erp-accent-soft));
  transition:transform var(--erp-motion) var(--erp-ease),opacity var(--erp-motion) var(--erp-ease);
}
.stat:hover::after,.erp-kpi:hover::after{transform:scale(1.12);opacity:.9}
.stat-label,.erp-kpi-label,.product-meta,.field label,.table th{
  color:var(--erp-muted)!important;
  font-size:11px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
}
.stat-num,.erp-kpi-value,.price,.sum-line strong,.mono{
  color:var(--erp-heading)!important;
  font-family:var(--erp-mono)!important;
  font-weight:900!important;
}
.stat-num{font-size:28px!important}

.modules{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;
  gap:12px!important;
}
.module{
  min-height:92px;
  display:block!important;
  padding:16px!important;
  color:var(--erp-text)!important;
  text-decoration:none!important;
}
.module-head{
  display:flex;
  align-items:center;
  gap:10px;
}
.module-path{
  margin-top:10px;
  color:var(--erp-muted)!important;
  font-size:12px!important;
  font-weight:800!important;
}

.btn,button.btn{
  height:40px!important;
  border:1px solid transparent!important;
  border-radius:8px!important;
  padding:0 14px!important;
  background:var(--erp-primary)!important;
  color:#fff!important;
  box-shadow:0 10px 20px rgba(15,118,110,.16)!important;
  font-weight:900!important;
  position:relative;
  overflow:hidden;
  transition:background var(--erp-motion-fast) var(--erp-ease),border-color var(--erp-motion-fast) var(--erp-ease),color var(--erp-motion-fast) var(--erp-ease),box-shadow var(--erp-motion-fast) var(--erp-ease),transform var(--erp-motion-fast) var(--erp-ease);
}
.btn:hover,button.btn:hover{
  background:var(--erp-primary-2)!important;
  transform:translateY(-1px);
  box-shadow:var(--erp-shadow)!important;
}
.btn:active,button.btn:active{
  transform:translateY(0) scale(.985);
}
.btn.erp-button-loading,button.erp-button-loading{
  color:transparent!important;
  pointer-events:none;
}
.btn.erp-button-loading::after,button.erp-button-loading::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.42);
  border-top-color:#fff;
  animation:erpSpin .72s linear infinite;
}
@keyframes erpSpin{to{transform:rotate(360deg)}}
.btn.secondary,button.btn.secondary{
  background:var(--erp-surface)!important;
  color:var(--erp-text)!important;
  border-color:var(--erp-border)!important;
  box-shadow:var(--erp-shadow-sm)!important;
}
.btn.secondary:hover,button.btn.secondary:hover{
  border-color:var(--erp-primary)!important;
  color:var(--erp-primary)!important;
}
.btn.ghost,button.btn.ghost{
  background:var(--erp-surface-2)!important;
  color:var(--erp-text)!important;
  border-color:var(--erp-border-soft)!important;
  box-shadow:none!important;
}
.btn.ok{background:var(--erp-success)!important}
.btn.danger{background:var(--erp-danger)!important}
.btn:disabled,button:disabled{
  opacity:.48!important;
  cursor:not-allowed!important;
  transform:none!important;
}

.field{min-width:0}
.field input,.field select,.field textarea,
.toolbar input,.toolbar select,
input,select,textarea{
  min-height:40px;
  border:1px solid var(--erp-border)!important;
  border-radius:8px!important;
  background:var(--erp-surface)!important;
  color:var(--erp-text)!important;
  outline:none!important;
  box-shadow:none!important;
}
.field textarea,textarea{
  min-height:96px;
  padding:10px 12px!important;
}
.field input:focus,.field select:focus,.field textarea:focus,
.toolbar input:focus,.toolbar select:focus,
input:focus,select:focus,textarea:focus{
  border-color:var(--erp-primary)!important;
  box-shadow:0 0 0 3px var(--erp-primary-soft)!important;
}
.toolbar,.filters{
  gap:12px!important;
}
.toolbar{
  border-bottom-color:var(--erp-border-soft)!important;
}

.tabs{
  width:max-content;
  max-width:100%;
  display:flex!important;
  gap:4px!important;
  padding:4px!important;
  border:1px solid var(--erp-border-soft)!important;
  border-radius:8px!important;
  background:var(--erp-surface-2)!important;
}
.tabs button{
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:var(--erp-muted)!important;
  box-shadow:none!important;
}
.tabs button.on{
  background:var(--erp-surface)!important;
  color:var(--erp-heading)!important;
  box-shadow:var(--erp-shadow-sm)!important;
}

/* Tables */
.table-wrap{
  max-width:100%;
  overflow-x:auto;
  border:1px solid var(--erp-border-soft)!important;
  border-radius:8px!important;
  background:var(--erp-surface)!important;
}
.table{
  width:100%!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
@media(min-width:981px){
  .table{min-width:0!important}
}
.table th,.table td{
  padding:12px 12px!important;
  border-bottom:1px solid var(--erp-border-soft)!important;
  color:var(--erp-text)!important;
  font-size:13px!important;
  vertical-align:middle!important;
}
.table th{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--erp-surface-2)!important;
  color:var(--erp-muted)!important;
  white-space:nowrap;
}
.table tbody tr:hover td{
  background:var(--erp-surface-2)!important;
}
.table tbody tr{
  transition:opacity var(--erp-motion) var(--erp-ease),transform var(--erp-motion) var(--erp-ease),background var(--erp-motion-fast) var(--erp-ease);
}
.table tbody tr.erp-row-enter{
  animation:erpRowIn var(--erp-motion) var(--erp-ease) both;
  animation-delay:var(--erp-stagger,0ms);
}
@keyframes erpRowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.table tbody tr:last-child td{
  border-bottom:0!important;
}
.erp-table-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border:1px solid var(--erp-border-soft);
  border-bottom:0;
  border-radius:8px 8px 0 0;
  background:var(--erp-surface);
}
.erp-table-tools + .table-wrap{
  border-radius:0 0 8px 8px!important;
}
.erp-table-search{
  width:min(340px,100%);
  height:36px;
  padding:0 11px;
  font-weight:800;
  transition:border-color var(--erp-motion-fast) var(--erp-ease),box-shadow var(--erp-motion-fast) var(--erp-ease),transform var(--erp-motion-fast) var(--erp-ease);
}
.erp-table-search:focus{transform:translateY(-1px)}
.erp-table-pager{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--erp-muted);
  font-size:12px;
  font-weight:850;
}
.erp-table-pager button{
  height:30px!important;
  min-width:58px;
  border:1px solid var(--erp-border)!important;
  border-radius:8px!important;
  background:var(--erp-surface)!important;
  color:var(--erp-text)!important;
  box-shadow:none!important;
  font-size:12px!important;
}
.erp-sortable{cursor:pointer;transition:color var(--erp-motion-fast) var(--erp-ease),background var(--erp-motion-fast) var(--erp-ease)}
.erp-sortable::after{
  content:"  \2195";
  color:var(--erp-subtle);
  font-size:10px;
  display:inline-block;
  transition:transform var(--erp-motion-fast) var(--erp-ease),color var(--erp-motion-fast) var(--erp-ease);
}
.erp-sortable.erp-sort-asc::after{content:"  \2191";color:var(--erp-primary);transform:translateY(-1px)}
.erp-sortable.erp-sort-desc::after{content:"  \2193";color:var(--erp-primary);transform:translateY(1px)}

/* POS and commerce surfaces */
.products{
  gap:12px!important;
}
.product{
  min-height:150px!important;
  padding:14px!important;
}
.product-name{
  color:var(--erp-heading)!important;
  font-size:15px!important;
  font-weight:900!important;
}
.product-bottom{
  align-items:flex-end!important;
}
.cart{
  top:18px!important;
}
.cart-head,.summary{
  border-color:var(--erp-border-soft)!important;
}
.cart-row{
  background:var(--erp-surface-2)!important;
}
.qty button,.actions button,.remove{
  border-radius:8px!important;
}

/* Status */
.pill{
  display:inline-flex!important;
  align-items:center!important;
  gap:4px;
  border-radius:999px!important;
  padding:4px 9px!important;
  background:var(--erp-accent-soft)!important;
  color:var(--erp-accent)!important;
  font-size:11px!important;
  font-weight:900!important;
}
.pill.paid,.pill.accepted,.pill.active,.pill.present,.pill.converted,.pill.qualified{
  background:var(--erp-success-soft)!important;
  color:var(--erp-success)!important;
}
.pill.unpaid,.pill.sent,.pill.late{
  background:var(--erp-warning-soft)!important;
  color:var(--erp-warning)!important;
}
.pill.cancelled,.pill.refunded,.pill.inactive,.pill.absent,.pill.lost{
  background:var(--erp-danger-soft)!important;
  color:var(--erp-danger)!important;
}

/* Feedback */
.toast{
  border-radius:8px!important;
  background:var(--erp-shell)!important;
  color:#fff!important;
  box-shadow:var(--erp-shadow-lg)!important;
}
.erp-toast-stack{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  display:grid;
  gap:10px;
  width:min(360px,calc(100vw - 36px));
}
.erp-toast{
  padding:12px 14px;
  border-radius:8px;
  background:var(--erp-shell);
  color:#fff;
  box-shadow:var(--erp-shadow-lg);
  font-size:13px;
  font-weight:850;
  line-height:1.45;
  opacity:0;
  transform:translateY(10px) scale(.98);
  transition:opacity var(--erp-motion) var(--erp-ease),transform var(--erp-motion) var(--erp-ease);
}
.erp-toast.on{opacity:1;transform:translateY(0) scale(1)}
.erp-toast.success::before{
  content:"";
  width:8px;
  height:8px;
  display:inline-block;
  margin-right:8px;
  border-radius:50%;
  background:#fff;
  animation:erpSuccessPulse .7s var(--erp-ease) both;
}
@keyframes erpSuccessPulse{0%{transform:scale(.4);opacity:.3}70%{transform:scale(1.35);opacity:1}100%{transform:scale(1);opacity:1}}
.erp-toast.success{background:var(--erp-success)}
.erp-toast.error{background:var(--erp-danger)}
.erp-toast.warning{background:var(--erp-warning)}
.erp-empty{
  min-height:94px;
  display:grid;
  place-items:center;
  padding:24px;
  color:var(--erp-muted);
  text-align:center;
  font-weight:850;
}
.erp-skeleton{
  border-radius:8px;
  background:linear-gradient(90deg,var(--erp-surface-3),var(--erp-surface-2),var(--erp-surface-3));
  background-size:200% 100%;
  animation:erpSkeleton 1.2s ease-in-out infinite;
}
@keyframes erpSkeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}
.error{
  color:var(--erp-danger)!important;
  font-weight:850!important;
}

/* Modal */
.erp-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:9998;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(15,23,42,.54);
  backdrop-filter:blur(8px);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--erp-motion) var(--erp-ease);
}
.erp-modal-backdrop.on{opacity:1;pointer-events:auto}
.erp-modal{
  width:min(440px,100%);
  padding:18px;
  border:1px solid var(--erp-border-soft);
  border-radius:8px;
  background:var(--erp-surface);
  box-shadow:var(--erp-shadow-lg);
  opacity:0;
  transform:translateY(10px) scale(.96);
  transition:opacity var(--erp-motion) var(--erp-ease),transform var(--erp-motion) var(--erp-ease);
}
.erp-modal-backdrop.on .erp-modal{opacity:1;transform:translateY(0) scale(1)}
.erp-modal h3{
  margin-bottom:8px;
  color:var(--erp-heading);
  font-size:18px;
}
.erp-modal p{
  color:var(--erp-muted);
  font-size:14px;
  line-height:1.55;
}
.erp-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px;
}

/* Executive dashboard */
.erp-dashboard-hero{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:16px;
  align-items:stretch;
  margin-bottom:16px;
  animation:erpCardIn var(--erp-motion-slow) var(--erp-ease) both;
}
.erp-hero-copy,.erp-health-card{
  min-width:0;
  border:1px solid var(--erp-border-soft);
  border-radius:8px;
  background:var(--erp-surface);
  box-shadow:var(--erp-shadow);
}
.erp-hero-copy{
  padding:24px;
  overflow:hidden;
  position:relative;
}
.erp-hero-copy::after{
  content:"";
  position:absolute;
  right:-76px;
  bottom:-94px;
  width:220px;
  height:220px;
  border-radius:999px;
  border:46px solid var(--erp-primary-soft);
  opacity:.82;
}
.erp-hero-kicker{
  margin-bottom:10px;
  color:var(--erp-primary);
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
}
.erp-hero-copy h2{
  max-width:760px;
  color:var(--erp-heading);
  font-size:32px;
  font-weight:950;
  line-height:1.05;
}
.erp-hero-copy p{
  max-width:680px;
  margin-top:10px;
  color:var(--erp-muted);
  font-size:14px;
  font-weight:750;
  line-height:1.6;
}
.erp-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:20px;
}
.erp-hero-btn{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border:1px solid var(--erp-border-soft);
  border-radius:8px;
  background:var(--erp-surface);
  color:var(--erp-heading);
  font-size:13px;
  font-weight:900;
  text-decoration:none;
  transition:transform var(--erp-motion-fast) var(--erp-ease),box-shadow var(--erp-motion-fast) var(--erp-ease),border-color var(--erp-motion-fast) var(--erp-ease);
}
.erp-hero-btn.primary{
  border-color:var(--erp-primary);
  background:var(--erp-primary);
  color:#fff;
}
.erp-hero-btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--erp-shadow-sm);
}
.erp-dashboard-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:16px;
  align-items:start;
}
.erp-dashboard-main{min-width:0}
.erp-dashboard-side{
  position:sticky;
  top:92px;
  display:grid;
  gap:14px;
}
.erp-health-card{
  padding:18px;
  display:grid;
  align-content:space-between;
  gap:18px;
}
.erp-health-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--erp-muted);
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
}
.erp-health-top b{
  color:var(--erp-heading);
  font-family:var(--erp-mono);
  font-size:30px;
}
.erp-health-meter{
  height:12px;
  overflow:hidden;
  border-radius:999px;
  background:var(--erp-surface-3);
}
.erp-health-meter span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--erp-primary),var(--erp-accent));
  animation:erpBarDraw 700ms var(--erp-ease) both;
}
.erp-health-card.warning .erp-health-meter span{background:linear-gradient(90deg,var(--erp-warning),var(--erp-primary))}
.erp-health-card.danger .erp-health-meter span{background:linear-gradient(90deg,var(--erp-danger),var(--erp-warning))}
.erp-health-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.erp-health-grid div{
  min-width:0;
  padding:10px;
  border-radius:8px;
  background:var(--erp-surface-2);
}
.erp-health-grid b{
  display:block;
  overflow:hidden;
  color:var(--erp-heading);
  font-size:14px;
  font-weight:950;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.erp-health-grid span{
  display:block;
  margin-top:3px;
  color:var(--erp-muted);
  font-size:11px;
  font-weight:850;
}
.erp-kpi-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.erp-kpi{
  padding:16px!important;
  position:relative;
  overflow:hidden;
}
.erp-kpi::after{
  content:"";
  position:absolute;
  right:14px;
  top:14px;
  width:28px;
  height:28px;
  border-radius:999px;
  background:var(--erp-primary-soft);
  opacity:.72;
}
.erp-kpi-value{
  margin-top:8px;
  font-size:24px!important;
}
.erp-kpi-note{
  margin-top:6px;
  color:var(--erp-muted);
  font-size:12px;
  font-weight:800;
  animation:erpTrendIn var(--erp-motion-slow) var(--erp-ease) both;
}
@keyframes erpTrendIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
.erp-chart-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:14px;
  margin-bottom:16px;
}
.erp-command-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:14px;
  margin-bottom:16px;
}
.erp-ops-card{
  margin-bottom:0!important;
}
.erp-action-grid,.erp-alert-list{
  display:grid;
  gap:10px;
}
.erp-action-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.erp-action,.erp-alert{
  min-width:0;
  display:grid;
  gap:4px;
  padding:12px;
  border:1px solid var(--erp-border-soft);
  border-radius:8px;
  background:var(--erp-surface-2);
  color:var(--erp-text);
  text-decoration:none;
  transition:transform var(--erp-motion) var(--erp-ease),border-color var(--erp-motion) var(--erp-ease),box-shadow var(--erp-motion) var(--erp-ease),background var(--erp-motion) var(--erp-ease);
}
.erp-action em{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--erp-primary-soft);
  color:var(--erp-primary);
  font-family:var(--erp-mono);
  font-size:10px;
  font-style:normal;
  font-weight:950;
}
.erp-action:hover,.erp-alert:hover{
  transform:translateY(-2px);
  border-color:rgba(15,118,110,.42);
  box-shadow:var(--erp-shadow-sm);
  background:var(--erp-surface);
}
.erp-action b,.erp-alert b{
  color:var(--erp-heading);
  font-size:13px;
  font-weight:900;
}
.erp-action span,.erp-alert span{
  color:var(--erp-muted);
  font-size:12px;
  font-weight:750;
  line-height:1.45;
}
.erp-alert{
  position:relative;
  padding-left:34px;
}
.erp-alert::before{
  content:"";
  position:absolute;
  left:13px;
  top:17px;
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--erp-accent);
  box-shadow:0 0 0 4px var(--erp-accent-soft);
}
.erp-alert.success::before{background:var(--erp-success);box-shadow:0 0 0 4px var(--erp-success-soft)}
.erp-alert.warning::before{background:var(--erp-warning);box-shadow:0 0 0 4px var(--erp-warning-soft)}
.erp-alert.danger::before{background:var(--erp-danger);box-shadow:0 0 0 4px var(--erp-danger-soft)}
.erp-side-title{
  margin-bottom:10px;
  color:var(--erp-muted);
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
}
.erp-plan-name{
  color:var(--erp-heading);
  font-size:14px;
  font-weight:950;
}
.erp-plan-price{
  margin-top:4px;
  color:var(--erp-heading);
  font-family:var(--erp-mono);
  font-size:24px;
  font-weight:950;
}
.erp-plan-meta{
  margin-top:6px;
  color:var(--erp-muted);
  font-size:12px;
  font-weight:800;
}
.erp-plan-tags,.erp-feature-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}
.erp-plan-tags span,.erp-feature-list span{
  display:inline-flex;
  min-height:26px;
  align-items:center;
  padding:0 9px;
  border-radius:999px;
  background:var(--erp-surface-3);
  color:var(--erp-muted);
  font-size:11px;
  font-weight:850;
}
.erp-side-link{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  margin-top:14px;
  border-radius:8px;
  background:var(--erp-heading);
  color:var(--erp-surface);
  font-size:12px;
  font-weight:950;
  text-decoration:none;
  transition:transform var(--erp-motion-fast) var(--erp-ease),opacity var(--erp-motion-fast) var(--erp-ease);
}
.erp-side-link:hover{transform:translateY(-1px);opacity:.92}
.erp-timeline{
  display:grid;
  gap:8px;
}
.erp-timeline a{
  position:relative;
  display:grid;
  gap:3px;
  padding:0 0 11px 18px;
  color:var(--erp-text);
  text-decoration:none;
}
.erp-timeline a:not(:last-child){
  border-bottom:1px solid var(--erp-border-soft);
}
.erp-timeline a::before{
  content:"";
  position:absolute;
  left:0;
  top:5px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--erp-primary);
  box-shadow:0 0 0 4px var(--erp-primary-soft);
}
.erp-timeline b{
  color:var(--erp-heading);
  font-size:12px;
  font-weight:950;
}
.erp-timeline span{
  color:var(--erp-muted);
  font-size:12px;
  font-weight:760;
}
.erp-chart{
  padding:16px!important;
}
.erp-chart-title{
  margin-bottom:12px;
  color:var(--erp-heading);
  font-size:15px;
  font-weight:900;
}
.erp-bars{display:grid;gap:10px}
.erp-bar-row{
  display:grid;
  grid-template-columns:100px 1fr 82px;
  gap:10px;
  align-items:center;
  color:var(--erp-muted);
  font-size:12px;
  font-weight:850;
}
.erp-bar-track{
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:var(--erp-surface-3);
}
.erp-bar-fill{
  height:100%;
  display:block;
  border-radius:999px;
  background:linear-gradient(90deg,var(--erp-primary),var(--erp-accent));
  transform-origin:left center;
  animation:erpBarDraw 680ms var(--erp-ease) both;
}
@keyframes erpBarDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.erp-motion-staged > *{
  animation:erpCardIn var(--erp-motion-slow) var(--erp-ease) both;
  animation-delay:var(--erp-stagger,0ms);
}

body.erp-loading .main::before{
  content:"";
  display:block;
  height:76px;
  margin-bottom:16px;
  border-radius:8px;
  background:linear-gradient(90deg,var(--erp-surface-3),var(--erp-surface-2),var(--erp-surface-3));
  background-size:200% 100%;
  animation:erpSkeleton 1.1s ease-in-out infinite;
}

/* Login and access states */
.login,.denied{
  height:100vh!important;
  min-height:100vh!important;
  overflow:hidden!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0)),
    var(--erp-shell)!important;
}
.login-box,.denied-box{
  max-width:390px!important;
  padding:28px!important;
}
.logo{
  color:var(--erp-heading)!important;
  font-weight:900!important;
}
.sub{
  color:var(--erp-muted)!important;
}

/* Mobile */
.erp-nav-backdrop{
  position:fixed;
  inset:0;
  z-index:25;
  display:none;
  background:rgba(15,23,42,.5);
  backdrop-filter:blur(4px);
}
body.erp-mobile-nav-open .erp-nav-backdrop{
  display:block;
}
@media(max-width:1180px){
  .erp-dashboard-hero,.erp-dashboard-layout{grid-template-columns:1fr}
  .erp-dashboard-side{position:static;grid-template-columns:repeat(3,minmax(0,1fr))}
  .erp-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .erp-chart-grid{grid-template-columns:1fr}
  .erp-command-grid{grid-template-columns:1fr}
}
@media(max-width:980px){
  .app{
    grid-template-columns:1fr!important;
  }
  body.erp-sidebar-collapsed .app{
    grid-template-columns:1fr!important;
  }
  .side{
    position:fixed!important;
    left:0;
    top:0;
    width:min(320px,calc(100vw - 34px));
    transform:translateX(-105%);
    transition:transform .22s ease;
  }
  body.erp-mobile-nav-open .side{
    transform:translateX(0);
  }
  body.erp-sidebar-collapsed .side{
    width:min(320px,calc(100vw - 34px));
  }
  body.erp-sidebar-collapsed .side-title{
    width:auto;
    justify-content:flex-start!important;
    font-size:20px!important;
  }
  body.erp-sidebar-collapsed .side-sub,
  body.erp-sidebar-collapsed .side-foot div{
    display:block!important;
  }
  body.erp-sidebar-collapsed .nav a,
  body.erp-sidebar-collapsed .nav button{
    justify-content:flex-start!important;
    font-size:13px!important;
    padding:9px 10px!important;
  }
  body.erp-sidebar-collapsed .side-foot .btn{
    font-size:13px!important;
    padding:0 14px!important;
  }
  body.erp-sidebar-collapsed .side-foot .btn::before{
    content:"";
    display:none;
  }
  .main{
    padding:14px 14px 34px!important;
  }
  .top{
    position:sticky;
    top:10px;
    z-index:20;
    grid-template-columns:auto minmax(0,1fr);
    padding:12px!important;
  }
  .erp-top-actions{
    grid-column:1 / -1;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .erp-user-chip{
    display:none;
  }
  .layout,.filters{
    grid-template-columns:1fr!important;
  }
  .erp-table-tools{
    align-items:stretch;
    flex-direction:column;
  }
  .erp-table-search{
    width:100%;
  }
  .cart{
    position:static!important;
  }
}
@media(max-width:640px){
  .grid,.erp-kpi-grid,.modules{
    grid-template-columns:1fr!important;
  }
  .erp-dashboard-side,.erp-health-grid{
    grid-template-columns:1fr!important;
  }
  .erp-hero-copy{
    padding:18px!important;
  }
  .erp-hero-copy h2{
    font-size:25px!important;
  }
  .erp-hero-actions{
    align-items:stretch;
    flex-direction:column;
  }
  .erp-hero-btn{
    width:100%;
  }
  .erp-action-grid{grid-template-columns:1fr}
  .products{
    grid-template-columns:repeat(auto-fill,minmax(148px,1fr))!important;
  }
  .h1,#pageTitle{
    font-size:22px!important;
  }
  .stat-num,.erp-kpi-value{
    font-size:22px!important;
  }
  .erp-bar-row{
    grid-template-columns:1fr;
  }
  .checkout{
    grid-template-columns:1fr!important;
  }
}

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