/* =====================================================================
   AH Global ERP v4.3.0 — Professional UI layer ("React / shadcn" style)
   Loaded LAST on every page. It replaces the visual language of the
   older stacked stylesheets (gradients, shimmer animations, heavy
   uppercase labels) with one calm, consistent design system:
   Inter type, zinc neutrals, one blue accent, 8–12px radii, thin borders.
   Layout/print logic in app.css + bootstrap-erp.css is kept intact.
===================================================================== */

@font-face{
  font-family:"InterVariable";
  src:url("../vendor/inter/InterVariable.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ---------- Design tokens ---------- */
:root,
:root[data-bs-theme="light"]{
  --ui-font:"InterVariable","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ui-page:#f7f7f8;
  --ui-card:#ffffff;
  --ui-fg:#09090b;
  --ui-fg-2:#27272a;
  --ui-muted:#71717a;
  --ui-subtle:#f4f4f5;
  --ui-hover:#f4f4f5;
  --ui-border:#e4e4e7;
  --ui-border-strong:#d4d4d8;
  --ui-input:#e4e4e7;
  --ui-primary:#2563eb;
  --ui-primary-hover:#1d4ed8;
  --ui-primary-rgb:37,99,235;
  --ui-primary-soft:#eff6ff;
  --ui-primary-text:#1d4ed8;
  --ui-ring:rgba(37,99,235,.22);
  --ui-success:#16a34a;--ui-success-soft:#f0fdf4;--ui-success-text:#15803d;--ui-success-border:#bbf7d0;
  --ui-danger:#dc2626;--ui-danger-soft:#fef2f2;--ui-danger-text:#b91c1c;--ui-danger-border:#fecaca;
  --ui-warn:#d97706;--ui-warn-soft:#fffbeb;--ui-warn-text:#b45309;--ui-warn-border:#fde68a;
  --ui-violet-soft:#f5f3ff;--ui-violet-text:#6d28d9;--ui-violet-border:#ddd6fe;
  --ui-sidebar:#fbfbfc;
  --ui-sidebar-border:#ececef;
  --ui-scroll:#d4d4d8;
  --ui-scroll-hover:#a1a1aa;
  --ui-radius-sm:6px;
  --ui-radius:8px;
  --ui-radius-lg:12px;
  --ui-shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --ui-shadow-sm:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04);
  --ui-shadow-lg:0 16px 40px -8px rgba(16,24,40,.18),0 4px 12px -4px rgba(16,24,40,.08);
  --ui-topbar-h:60px;

  /* Map Bootstrap + legacy variables to the tokens so every old rule follows. */
  --bs-font-sans-serif:var(--ui-font);
  --bs-body-font-family:var(--ui-font);
  --bs-body-bg:var(--ui-card);
  --bs-body-color:var(--ui-fg);
  --bs-emphasis-color:var(--ui-fg);
  --bs-heading-color:var(--ui-fg);
  --bs-secondary-color:var(--ui-muted);
  --bs-tertiary-bg:var(--ui-page);
  --bs-secondary-bg:var(--ui-subtle);
  --bs-border-color:var(--ui-border);
  --bs-border-radius:var(--ui-radius);
  --bs-primary:var(--ui-primary);
  --bs-primary-rgb:var(--ui-primary-rgb);
  --bs-link-color:var(--ui-primary);
  --bs-link-color-rgb:var(--ui-primary-rgb);
  --bs-link-hover-color:var(--ui-primary-hover);
  --bs-primary-bg-subtle:var(--ui-primary-soft);
  --bs-primary-text-emphasis:var(--ui-primary-text);
  --bs-primary-border-subtle:#bfdbfe;
  --bs-focus-ring-color:var(--ui-ring);
  --erp-primary:var(--ui-primary);
  --erp-primary-rgb:var(--ui-primary-rgb);
  --erp-page-bg:var(--ui-page);
  --erp-sidebar-w:264px;
  --surface:var(--ui-card);
  --surface-2:var(--ui-page);
  --line:var(--ui-border);
  --text-muted:var(--ui-muted);
}
:root[data-bs-theme="dark"]{
  --ui-page:#09090b;
  --ui-card:#111113;
  --ui-fg:#fafafa;
  --ui-fg-2:#e4e4e7;
  --ui-muted:#a1a1aa;
  --ui-subtle:#18181b;
  --ui-hover:#1c1c20;
  --ui-border:#27272a;
  --ui-border-strong:#3f3f46;
  --ui-input:#2e2e33;
  --ui-primary:#3b82f6;
  --ui-primary-hover:#2563eb;
  --ui-primary-rgb:59,130,246;
  --ui-primary-soft:rgba(59,130,246,.12);
  --ui-primary-text:#93c5fd;
  --ui-ring:rgba(59,130,246,.35);
  --ui-success-soft:rgba(22,163,74,.12);--ui-success-text:#4ade80;--ui-success-border:rgba(74,222,128,.25);
  --ui-danger-soft:rgba(220,38,38,.12);--ui-danger-text:#f87171;--ui-danger-border:rgba(248,113,113,.28);
  --ui-warn-soft:rgba(217,119,6,.12);--ui-warn-text:#fbbf24;--ui-warn-border:rgba(251,191,36,.25);
  --ui-violet-soft:rgba(124,58,237,.14);--ui-violet-text:#c4b5fd;--ui-violet-border:rgba(196,181,253,.25);
  --ui-sidebar:#0c0c0e;
  --ui-sidebar-border:#1f1f23;
  --ui-scroll:#3f3f46;
  --ui-scroll-hover:#52525b;
  --ui-shadow-xs:none;
  --ui-shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --ui-shadow-lg:0 18px 50px -10px rgba(0,0,0,.7);
  --bs-primary-border-subtle:rgba(59,130,246,.35);
}

/* ---------- Base / typography ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html body:not(#\#),
html body:not(#\#).erp-app,
html body:not(#\#).ah-public,
html body:not(#\#).ah-auth{
  font-family:var(--ui-font)!important;
  font-feature-settings:"cv11","ss01","calt"!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  color:var(--ui-fg);
  letter-spacing:-.006em;
}
html body:not(#\#).erp-app button,html body:not(#\#).erp-app input,html body:not(#\#).erp-app select,html body:not(#\#).erp-app textarea,
html body:not(#\#).ah-public button,html body:not(#\#).ah-public input,html body:not(#\#).ah-public select,html body:not(#\#).ah-public textarea,
html body:not(#\#).ah-auth button,html body:not(#\#).ah-auth input{font-family:inherit!important;letter-spacing:inherit}
.urdu,[lang="ur"],.parcel-label .urdu{letter-spacing:0!important}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{letter-spacing:-.02em}
::selection{background:rgba(var(--ui-primary-rgb),.18)}
*:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
.tabular,.value,.table td{font-variant-numeric:tabular-nums}

/* ---------- Lucide icons ---------- */
svg.lucide{width:1em;height:1em;flex-shrink:0;vertical-align:-.14em;stroke-width:2}
.btn svg.lucide{width:16px;height:16px;vertical-align:-3px}
.btn-sm svg.lucide{width:14px;height:14px}
.lucide-spin{animation:uiSpin 1s linear infinite}
@keyframes uiSpin{to{transform:rotate(360deg)}}

/* ---------- Scrollbars (one thin, consistent scrollbar everywhere) ---------- */
*{scrollbar-width:thin;scrollbar-color:var(--ui-scroll) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background-color:var(--ui-scroll);border:3px solid transparent;border-radius:999px;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background-color:var(--ui-scroll-hover)}
*::-webkit-scrollbar-corner{background:transparent}

/* The old shell made BOTH <html> and <body> scroll containers (html overflow-x:hidden
   + body overflow-y:auto) which produced a second scrollbar, broke the sticky topbar
   and caused jump/scroll glitches. Only the viewport scrolls now. */
html:has(body.erp-app){overflow-x:clip!important;overflow-y:auto!important;scrollbar-gutter:stable}
html body:not(#\#).erp-app{overflow:visible!important;overflow-x:clip!important;background:var(--ui-page)!important}
@media(max-width:991.98px){
  html:has(body.erp-app),html body:not(#\#).erp-app,
  html body:not(#\#).erp-app>.erp-shell,html body:not(#\#).erp-app main.erp-main,html body:not(#\#).erp-app #root.erp-content{overflow-x:clip!important;overflow-y:visible!important}
  html:has(body.erp-app){overflow-y:auto!important;scrollbar-gutter:auto}
}
body.erp-app.modal-open,body.erp-app.erp-modal-open{overflow:hidden!important}

/* ---------- Motion: remove distracting animations / shimmer ---------- */
html body:not(#\#) .btn,html body:not(#\#) .btn::before,html body:not(#\#) .btn::after,
html body:not(#\#) .navitem,html body:not(#\#) .action-btn{animation:none!important}
html body:not(#\#) .btn::before,html body:not(#\#) .btn::after{display:none!important}
html body:not(#\#) .stat.stat-live-pulse{animation:none!important;border-color:var(--ui-primary)!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* =====================================================================
   BUTTONS
===================================================================== */
html body:not(#\#) .btn{
  --bs-btn-font-weight:500;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  min-height:36px!important;padding:0 14px!important;
  border-radius:var(--ui-radius)!important;
  font-size:14px!important;font-weight:500!important;line-height:1.2!important;letter-spacing:-.006em!important;
  white-space:nowrap;
  background-image:none!important;
  box-shadow:none!important;
  transform:none!important;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease!important;
  text-transform:none!important;
}
html body:not(#\#) .btn:hover,html body:not(#\#) .btn:active,html body:not(#\#) .btn:focus{transform:none!important}
html body:not(#\#) .btn:focus-visible{box-shadow:0 0 0 3px var(--ui-ring)!important;outline:none!important}
html body:not(#\#) .btn-sm{min-height:32px!important;padding:0 11px!important;font-size:13px!important;gap:6px!important;border-radius:7px!important}
html body:not(#\#) .btn-lg{min-height:44px!important;padding:0 20px!important;font-size:15px!important}
html body:not(#\#) .btn:disabled,html body:not(#\#) .btn.disabled{opacity:.55!important;pointer-events:none}

html body:not(#\#) .btn-primary,html body:not(#\#) .btn.primary{
  background:var(--ui-primary)!important;border:1px solid var(--ui-primary)!important;color:#fff!important;
}
html body:not(#\#) .btn-primary:hover,html body:not(#\#) .btn.primary:hover{background:var(--ui-primary-hover)!important;border-color:var(--ui-primary-hover)!important;color:#fff!important}

html body:not(#\#) .btn-outline-secondary,html body:not(#\#) .btn.secondary,html body:not(#\#) .btn-light,html body:not(#\#) .btn-outline-primary,html body:not(#\#) .btn-secondary{
  background:var(--ui-card)!important;border:1px solid var(--ui-border)!important;color:var(--ui-fg)!important;
  box-shadow:var(--ui-shadow-xs)!important;
}
html body:not(#\#) .btn-outline-secondary:hover,html body:not(#\#) .btn.secondary:hover,html body:not(#\#) .btn-light:hover,html body:not(#\#) .btn-outline-primary:hover,html body:not(#\#) .btn-secondary:hover{background:var(--ui-hover)!important;border-color:var(--ui-border-strong)!important;color:var(--ui-fg)!important}
html body:not(#\#) .btn-outline-primary{color:var(--ui-primary-text)!important}

html body:not(#\#) .btn-success,html body:not(#\#) .btn.success,html body:not(#\#) .btn-outline-success{
  background:var(--ui-success-soft)!important;border:1px solid var(--ui-success-border)!important;color:var(--ui-success-text)!important;
}
html body:not(#\#) .btn-success:hover,html body:not(#\#) .btn.success:hover,html body:not(#\#) .btn-outline-success:hover{background:var(--ui-success)!important;border-color:var(--ui-success)!important;color:#fff!important}

html body:not(#\#) .btn-outline-danger,html body:not(#\#) .btn.danger,html body:not(#\#) .btn-danger{
  background:var(--ui-card)!important;border:1px solid var(--ui-danger-border)!important;color:var(--ui-danger-text)!important;
}
html body:not(#\#) .btn-outline-danger:hover,html body:not(#\#) .btn.danger:hover,html body:not(#\#) .btn-danger:hover{background:var(--ui-danger-soft)!important;border-color:var(--ui-danger)!important;color:var(--ui-danger-text)!important}
html body:not(#\#) .btn-warning,html body:not(#\#) .btn-outline-warning{background:var(--ui-warn-soft)!important;border:1px solid var(--ui-warn-border)!important;color:var(--ui-warn-text)!important}
html body:not(#\#) .btn-dark{background:var(--ui-fg)!important;border:1px solid var(--ui-fg)!important;color:var(--ui-card)!important}
html body:not(#\#) .btn-link{background:transparent!important;border:0!important;color:var(--ui-primary)!important;padding:0 4px!important;min-height:auto!important}

/* Busy state used by the global double-submit guard. */
html body:not(#\#) .btn.is-busy{position:relative;color:transparent!important;pointer-events:none!important}
html body:not(#\#) .btn.is-busy>*{visibility:hidden}
html body:not(#\#) .btn.is-busy::after{
  content:""!important;display:block!important;position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:uiSpin .7s linear infinite!important;
}
html body:not(#\#) .btn-primary.is-busy::after,html body:not(#\#) .btn.primary.is-busy::after{border-color:#fff;border-right-color:transparent}
html body:not(#\#) .btn-outline-secondary.is-busy::after,html body:not(#\#) .btn.secondary.is-busy::after,html body:not(#\#) .btn-light.is-busy::after{border-color:var(--ui-fg);border-right-color:transparent}

/* Icon-only buttons */
html body:not(#\#) .erp-icon-btn,html body:not(#\#) .action-btn{
  width:36px!important;height:36px!important;min-height:36px!important;padding:0!important;
  display:inline-grid!important;place-items:center!important;
  border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius)!important;
  background:var(--ui-card)!important;color:var(--ui-fg-2)!important;box-shadow:var(--ui-shadow-xs)!important;
  transition:background-color .15s ease,border-color .15s ease!important;
}
html body:not(#\#) .erp-icon-btn:hover,html body:not(#\#) .action-btn:hover{background:var(--ui-hover)!important;border-color:var(--ui-border-strong)!important;color:var(--ui-fg)!important}
html body:not(#\#) .action-btn{width:32px!important;height:32px!important;min-height:32px!important;border-radius:7px!important}
html body:not(#\#) .action-btn svg.lucide{width:15px;height:15px}
html body:not(#\#) .action-btn.danger-icon{color:var(--ui-danger-text)!important}
html body:not(#\#) .action-btn.danger-icon:hover{background:var(--ui-danger-soft)!important;border-color:var(--ui-danger-border)!important}
html body:not(#\#) .row-actions{display:flex!important;gap:6px!important;align-items:center}

/* =====================================================================
   FORMS
===================================================================== */
html body:not(#\#) .form-control,html body:not(#\#) .form-select,html body:not(#\#) .input,html body:not(#\#) .select,html body:not(#\#) .textarea{
  min-height:38px!important;
  padding:7px 12px!important;
  font-size:14px!important;font-weight:400!important;line-height:1.4!important;
  color:var(--ui-fg)!important;
  background-color:var(--ui-card)!important;
  border:1px solid var(--ui-input)!important;
  border-radius:var(--ui-radius)!important;
  box-shadow:var(--ui-shadow-xs)!important;
  transition:border-color .15s ease,box-shadow .15s ease!important;
}
html body:not(#\#) .form-control::placeholder,html body:not(#\#) .input::placeholder,html body:not(#\#) .textarea::placeholder{color:#a1a1aa!important;font-weight:400!important;opacity:1}
html body:not(#\#) .form-control:hover,html body:not(#\#) .form-select:hover,html body:not(#\#) .input:hover,html body:not(#\#) .select:hover{border-color:var(--ui-border-strong)!important}
html body:not(#\#) .form-control:focus,html body:not(#\#) .form-select:focus,html body:not(#\#) .input:focus,html body:not(#\#) .select:focus,html body:not(#\#) .textarea:focus{
  border-color:var(--ui-primary)!important;box-shadow:0 0 0 3px var(--ui-ring)!important;outline:none!important;
}
html body:not(#\#) .form-control:disabled,html body:not(#\#) .form-select:disabled,html body:not(#\#) .form-control[readonly]{background-color:var(--ui-subtle)!important;color:var(--ui-muted)!important}
html body:not(#\#) textarea.form-control,html body:not(#\#) .textarea{min-height:92px!important;padding-top:9px!important}
html body:not(#\#) .form-control-lg{min-height:44px!important;font-size:15px!important}
html body:not(#\#) .form-control-sm,html body:not(#\#) .form-select-sm{min-height:32px!important;font-size:13px!important}
/* Selects lost their chevron because older rules reset `background`. Restore it. */
html body:not(#\#) select.form-select,html body:not(#\#) select.select,html body:not(#\#) select.form-control,html body:not(#\#) select.input{
  -webkit-appearance:none!important;appearance:none!important;
  padding-right:34px!important;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e")!important;
  background-repeat:no-repeat!important;background-position:right 10px center!important;background-size:16px 16px!important;
}
html body:not(#\#) select[multiple]{background-image:none!important;padding-right:12px!important}
html body:not(#\#) input[type="date"].form-control,html body:not(#\#) input[type="date"].input{font-variant-numeric:tabular-nums}
html body:not(#\#) .form-check-input{width:16px;height:16px;border-color:var(--ui-border-strong);border-radius:4px;box-shadow:none}
html body:not(#\#) .form-check-input:checked{background-color:var(--ui-primary);border-color:var(--ui-primary)}
html body:not(#\#) input[type="checkbox"]:not(.form-check-input){width:16px;height:16px;accent-color:var(--ui-primary);cursor:pointer;vertical-align:middle}
html body:not(#\#) .input-group-text{background:var(--ui-subtle)!important;border-color:var(--ui-input)!important;color:var(--ui-muted)!important}
html body:not(#\#) .input-group>.form-control,html body:not(#\#) .input-group>.form-select{box-shadow:none!important}

html body:not(#\#) .field label,html body:not(#\#) .form-label{
  display:block;margin-bottom:6px!important;
  font-size:13px!important;font-weight:500!important;line-height:1.35!important;letter-spacing:-.003em!important;
  color:var(--ui-fg)!important;text-transform:none!important;
}
html body:not(#\#) .field label span{font-weight:400!important;color:var(--ui-muted)!important}
html body:not(#\#) .field label em,html body:not(#\#) .required{color:var(--ui-danger)!important;font-style:normal}
html body:not(#\#) .hint,html body:not(#\#) .form-text{font-size:12px!important;line-height:1.45!important;color:var(--ui-muted)!important;margin-top:6px}
html body:not(#\#) .form-error{border-radius:var(--ui-radius)!important;font-size:13px!important;font-weight:500!important;padding:10px 12px!important;background:var(--ui-danger-soft)!important;border:1px solid var(--ui-danger-border)!important;color:var(--ui-danger-text)!important}
html body:not(#\#) .formgrid{gap:16px!important}

/* =====================================================================
   APP SHELL — sidebar
===================================================================== */
html body:not(#\#).erp-app .erp-sidebar{
  --bs-offcanvas-bg:var(--ui-sidebar);
  background:var(--ui-sidebar)!important;
  color:var(--ui-fg)!important;
  border-right:1px solid var(--ui-sidebar-border)!important;
  box-shadow:none!important;
}
html body:not(#\#).erp-app .erp-sidebar-header{padding:14px 16px!important;border-bottom:1px solid var(--ui-sidebar-border)!important;min-height:var(--ui-topbar-h)}
html body:not(#\#).erp-app .erp-brandmark{
  width:34px!important;height:34px!important;border-radius:9px!important;flex:0 0 34px;
  display:grid!important;place-items:center!important;
  background:var(--ui-primary)!important;color:#fff!important;
  font-size:13px!important;font-weight:700!important;letter-spacing:0!important;box-shadow:none!important;
}
html body:not(#\#).erp-app .erp-brand-title{color:var(--ui-fg)!important;font-size:14px!important;font-weight:600!important;letter-spacing:-.01em!important}
html body:not(#\#).erp-app .erp-brand-subtitle{color:var(--ui-muted)!important;font-size:12px!important;font-weight:400!important}
html body:not(#\#).erp-app .erp-sidebar .btn-close{filter:none!important;opacity:.6}
:root[data-bs-theme="dark"] body.erp-app:not(#\#) .erp-sidebar .btn-close{filter:invert(1)!important}

html body:not(#\#).erp-app .erp-workspace-card{
  margin:12px 12px 4px!important;padding:10px 12px!important;
  border:1px solid var(--ui-sidebar-border)!important;border-radius:10px!important;
  background:var(--ui-card)!important;box-shadow:var(--ui-shadow-xs)!important;
}
html body:not(#\#).erp-app .erp-workspace-icon{
  width:30px!important;height:30px!important;border-radius:8px!important;display:grid!important;place-items:center!important;
  background:var(--ui-primary-soft)!important;color:var(--ui-primary-text)!important;font-size:14px;
}
html body:not(#\#).erp-app .erp-workspace-kicker{color:var(--ui-muted)!important;font-size:11px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important}
html body:not(#\#).erp-app .erp-workspace-name{color:var(--ui-fg)!important;font-size:13px!important;font-weight:600!important}
html body:not(#\#).erp-app .erp-workspace-card .badge{
  background:var(--ui-subtle)!important;color:var(--ui-fg-2)!important;border:1px solid var(--ui-border)!important;
  font-size:11px!important;font-weight:500!important;padding:3px 8px!important;letter-spacing:0!important;text-transform:capitalize;
}
html body:not(#\#).erp-app .erp-workspace-trader{color:var(--ui-muted)!important;font-size:12px!important}

html body:not(#\#).erp-app .erp-sidebar-nav{padding:8px 10px 16px!important}
html body:not(#\#).erp-app .erp-sidebar-nav .section{
  margin:16px 10px 6px!important;padding:0!important;
  color:var(--ui-muted)!important;font-size:11.5px!important;font-weight:500!important;
  letter-spacing:0!important;text-transform:none!important;opacity:1!important;
}
html body:not(#\#).erp-app .erp-sidebar-nav .section:first-child{margin-top:6px!important}
html body:not(#\#).erp-app .navitem{
  position:relative;display:flex!important;align-items:center!important;gap:10px!important;
  width:100%!important;min-height:34px!important;margin:1px 0!important;padding:6px 10px!important;
  border:0!important;border-radius:7px!important;background:transparent!important;box-shadow:none!important;
  color:var(--ui-fg-2)!important;font-size:13.5px!important;font-weight:450!important;text-align:left;
  transition:background-color .12s ease,color .12s ease!important;
}
html body:not(#\#).erp-app .navitem::before,html body:not(#\#).erp-app .navitem::after{display:none!important}
html body:not(#\#).erp-app .navitem:hover{background:var(--ui-hover)!important;color:var(--ui-fg)!important}
html body:not(#\#).erp-app .navitem.active{background:var(--ui-card)!important;color:var(--ui-fg)!important;font-weight:550!important;box-shadow:0 0 0 1px var(--ui-sidebar-border),var(--ui-shadow-xs)!important}
:root[data-bs-theme="dark"] body.erp-app:not(#\#) .navitem.active{background:var(--ui-hover)!important}
html body:not(#\#).erp-app .navitem-icon{
  width:18px!important;height:18px!important;min-width:18px;display:grid!important;place-items:center!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  color:var(--ui-muted)!important;font-size:15px!important;
}
html body:not(#\#).erp-app .navitem-icon svg.lucide{width:17px;height:17px}
html body:not(#\#).erp-app .navitem.active .navitem-icon{color:var(--ui-primary)!important}
html body:not(#\#).erp-app .navitem-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

html body:not(#\#).erp-app .erp-sidebar-user{padding:12px!important;border-top:1px solid var(--ui-sidebar-border)!important;background:transparent!important}
html body:not(#\#).erp-app .erp-sidebar-user .text-white,html body:not(#\#).erp-app .erp-sidebar-user .fw-bold{color:var(--ui-fg)!important;font-size:13px;font-weight:600!important}
html body:not(#\#).erp-app .erp-user-meta{color:var(--ui-muted)!important;font-size:12px!important}
html body:not(#\#).erp-app .erp-avatar{
  width:32px!important;height:32px!important;min-width:32px;border-radius:999px!important;display:grid!important;place-items:center!important;
  background:var(--ui-primary-soft)!important;color:var(--ui-primary-text)!important;font-size:12px!important;font-weight:600!important;box-shadow:none!important;border:0!important;
}
html body:not(#\#).erp-app .erp-icon-btn-dark{background:var(--ui-card)!important;color:var(--ui-fg-2)!important;border-color:var(--ui-border)!important}

@media(min-width:992px){
  html body:not(#\#).erp-app .erp-sidebar.offcanvas-lg{width:var(--erp-sidebar-w)!important}
}

/* =====================================================================
   APP SHELL — topbar
===================================================================== */
html body:not(#\#).erp-app header.erp-topbar{
  min-height:var(--ui-topbar-h)!important;height:var(--ui-topbar-h)!important;
  padding-top:0!important;padding-bottom:0!important;
  background:color-mix(in srgb,var(--ui-card) 86%,transparent)!important;
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--ui-border)!important;box-shadow:none!important;
}
html body:not(#\#).erp-app .erp-console-label .fw-bold{font-size:13.5px;font-weight:600!important}
html body:not(#\#).erp-app .erp-console-label small{font-size:12px}
html body:not(#\#).erp-app .erp-live-dot,html body:not(#\#).erp-app .live-dot{width:8px;height:8px;border-radius:50%;background:var(--ui-success)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-success) 18%,transparent)!important;animation:none!important}

/* Search: the icon overlapped the first letters of the placeholder. */
html body:not(#\#).erp-app .erp-search-icon{
  position:absolute!important;left:12px!important;top:50%!important;transform:translateY(-50%)!important;
  z-index:2;pointer-events:none;color:var(--ui-muted)!important;font-size:14px!important;line-height:1;
}
html body:not(#\#).erp-app .erp-search-icon svg.lucide,html body:not(#\#).erp-app svg.lucide.erp-search-icon{width:16px;height:16px}
html body:not(#\#).erp-app .erp-global-search{
  height:38px!important;min-height:38px!important;padding-left:38px!important;padding-right:12px!important;
  background-color:var(--ui-subtle)!important;border-color:transparent!important;box-shadow:none!important;
}
html body:not(#\#).erp-app .erp-global-search:focus{background-color:var(--ui-card)!important;border-color:var(--ui-primary)!important;box-shadow:0 0 0 3px var(--ui-ring)!important}
html body:not(#\#).erp-app .search-results{border-radius:10px!important;border:1px solid var(--ui-border)!important;background:var(--ui-card)!important;box-shadow:var(--ui-shadow-lg)!important;padding:4px!important}

html body:not(#\#).erp-app .erp-scope-chip{
  height:32px;padding:0 10px!important;border:1px solid var(--ui-border)!important;border-radius:999px!important;
  background:var(--ui-card)!important;color:var(--ui-muted)!important;font-size:12px!important;font-weight:500!important;
}
html body:not(#\#).erp-app .erp-primary-action{min-height:36px!important}
html body:not(#\#).erp-app .erp-profile-btn{
  min-height:38px!important;padding:3px 10px 3px 3px!important;border:1px solid var(--ui-border)!important;border-radius:999px!important;
  background:var(--ui-card)!important;box-shadow:var(--ui-shadow-xs)!important;
}
html body:not(#\#).erp-app .erp-profile-btn:hover{background:var(--ui-hover)!important}
html body:not(#\#).erp-app .erp-profile-copy b{font-size:13px;font-weight:600;max-width:140px}
html body:not(#\#).erp-app .erp-profile-copy small{font-size:11.5px;max-width:140px}
html body:not(#\#).erp-app .erp-avatar-light{width:30px!important;height:30px!important;min-width:30px}

/* Notification counter sat outside the button and covered neighbours. */
html body:not(#\#).erp-app #notificationBtn{overflow:visible}
html body:not(#\#).erp-app #notificationBadge{
  top:-5px!important;left:auto!important;right:-6px!important;transform:none!important;
  min-width:18px;height:18px;padding:0 5px!important;border-radius:999px!important;
  display:inline-grid;place-items:center;font-size:10.5px!important;font-weight:600!important;line-height:1!important;
  background:var(--ui-danger)!important;color:#fff!important;border:2px solid var(--ui-card)!important;box-shadow:none!important;
}
html body:not(#\#).erp-app #notificationBadge.hidden{display:none!important}

/* Connection banner (shown while the API auto-retries). */
.erp-conn-banner{
  position:fixed;left:50%;top:12px;z-index:2000;transform:translate(-50%,-140%);
  display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:var(--ui-fg);color:var(--ui-card);font:500 13px/1.2 var(--ui-font);box-shadow:var(--ui-shadow-lg);
  transition:transform .25s ease;pointer-events:none;max-width:calc(100vw - 24px);
}
.erp-conn-banner.show{transform:translate(-50%,0)}
.erp-conn-dot{width:8px;height:8px;border-radius:50%;background:#f59e0b;flex:0 0 8px}

/* Startup loader */
html body:not(#\#) .erp-startup-loader{background:var(--ui-page)!important}
html body:not(#\#) .erp-startup-loader-card{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--ui-fg)}
html body:not(#\#) .erp-startup-loader-mark{border-radius:10px!important;background:var(--ui-primary)!important;color:#fff!important;box-shadow:none!important}

/* =====================================================================
   CONTENT
===================================================================== */
html body:not(#\#).erp-app #root.erp-content{max-width:1480px!important;padding:24px 28px 48px!important}

/* Page header: flat, like a React dashboard page title — no card. */
html body:not(#\#).erp-app .pagehead{
  display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:16px!important;flex-wrap:wrap;
  margin:0 0 20px!important;padding:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
html body:not(#\#).erp-app .pagehead::before,html body:not(#\#).erp-app .pagehead::after{display:none!important}
html body:not(#\#).erp-app .pagehead h1{margin:0!important;font-size:24px!important;font-weight:650!important;line-height:1.2!important;letter-spacing:-.025em!important;color:var(--ui-fg)!important}
html body:not(#\#).erp-app .pagehead p{margin:6px 0 0!important;font-size:14px!important;line-height:1.5!important;color:var(--ui-muted)!important;max-width:760px}
html body:not(#\#).erp-app .pagehead .mb-2{margin-bottom:10px!important}
html body:not(#\#).erp-app .page-actions{display:flex!important;flex-wrap:wrap;gap:8px!important;align-items:center}
html body:not(#\#).erp-app .workspace-pill{
  display:inline-flex!important;align-items:center!important;gap:6px!important;
  padding:3px 9px!important;border-radius:999px!important;border:1px solid var(--ui-border)!important;
  background:var(--ui-card)!important;color:var(--ui-muted)!important;
  font-size:11.5px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;box-shadow:none!important;
}
html body:not(#\#).erp-app .workspace-pill svg.lucide{color:var(--ui-primary)}
/* Duplicate "Create Order": the topbar already has it — hide the copy in each page header. */
html body:not(#\#).erp-app:has(#createOrderTop:not(.hidden)) .pagehead .page-actions [data-create-order]{display:none!important}

/* Cards / panels */
html body:not(#\#).erp-app .panel,html body:not(#\#).erp-app .card{
  border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-lg)!important;
  background:var(--ui-card)!important;box-shadow:var(--ui-shadow-sm)!important;overflow:hidden;
}
html body:not(#\#).erp-app #root>.panel+.panel,html body:not(#\#).erp-app #root>.panel+.grid,html body:not(#\#).erp-app #root>.grid+.panel{margin-top:16px}
html body:not(#\#).erp-app .grid>.panel{margin-top:0!important}
html body:not(#\#).erp-app .panelhead{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px 16px!important;flex-wrap:wrap;
  padding:16px 20px!important;border-bottom:1px solid var(--ui-border)!important;background:transparent!important;
}
html body:not(#\#).erp-app .panelhead h2{margin:0!important;font-size:15px!important;font-weight:600!important;letter-spacing:-.01em!important;color:var(--ui-fg)!important}
html body:not(#\#).erp-app .panelhead p{margin:4px 0 0!important;font-size:13px!important;line-height:1.5!important;color:var(--ui-muted)!important}
html body:not(#\#).erp-app .panelhead>div:first-child{min-width:0;flex:1 1 280px}
html body:not(#\#).erp-app .panelbody,html body:not(#\#).erp-app .panel>.p-4,html body:not(#\#).erp-app .panel>.p-3{padding:16px 20px}

/* Dashboard stat cards */
html body:not(#\#).erp-app .stat{
  position:relative;display:flex!important;flex-direction:column!important;gap:6px!important;
  min-height:0!important;padding:16px 18px!important;
  border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-lg)!important;
  background:var(--ui-card)!important;box-shadow:var(--ui-shadow-sm)!important;
  transition:border-color .15s ease,box-shadow .15s ease,transform .2s ease!important;
}
html body:not(#\#).erp-app .stat::before,html body:not(#\#).erp-app .stat::after{display:none!important}
html body:not(#\#).erp-app .stat-clickable{cursor:pointer}
html body:not(#\#).erp-app .stat-clickable:hover{border-color:var(--ui-border-strong)!important;box-shadow:0 4px 14px -4px rgba(16,24,40,.12)!important}
html body:not(#\#).erp-app .stat .top{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px}
html body:not(#\#).erp-app .stat .label{font-size:13px!important;font-weight:500!important;color:var(--ui-muted)!important;letter-spacing:0!important;text-transform:none!important;line-height:1.3}
html body:not(#\#).erp-app .stat .sicon{
  width:30px!important;height:30px!important;border-radius:8px!important;display:grid!important;place-items:center!important;
  background:var(--ui-subtle)!important;color:var(--ui-fg-2)!important;border:0!important;box-shadow:none!important;font-size:14px;
}
html body:not(#\#).erp-app .stat .sicon svg.lucide{width:16px;height:16px}
html body:not(#\#).erp-app .stat .value{font-size:26px!important;font-weight:650!important;letter-spacing:-.03em!important;line-height:1.15!important;color:var(--ui-fg)!important;margin-top:4px}
html body:not(#\#).erp-app .stat-link-hint{font-size:12px!important;font-weight:500!important;color:var(--ui-muted)!important;margin-top:auto}
html body:not(#\#).erp-app .stat-clickable:hover .stat-link-hint{color:var(--ui-primary)!important}
html body:not(#\#).erp-app .dashboard-live-badge{
  display:inline-flex!important;align-items:center!important;gap:8px!important;margin:0 0 14px!important;padding:4px 10px!important;
  border:1px solid var(--ui-border)!important;border-radius:999px!important;background:var(--ui-card)!important;color:var(--ui-muted)!important;
  font-size:12px!important;font-weight:500!important;box-shadow:none!important;
}
html body:not(#\#).erp-app .dashboard-live-badge b{color:var(--ui-success-text);font-weight:600;font-size:11px;letter-spacing:.04em}
html body:not(#\#).erp-app .mini{border:1px solid var(--ui-border)!important;border-radius:10px!important;background:var(--ui-card)!important;box-shadow:none!important}

/* Filter bars: a wrapping flex row. The old grid made "records" text, pager
   and buttons overlap each other. */
html body:not(#\#).erp-app .erp-filterbar{
  display:flex!important;flex-wrap:wrap!important;align-items:flex-end!important;gap:12px!important;
  grid-template-columns:none!important;
  padding:14px 20px!important;margin:0!important;
  background:var(--ui-card)!important;border:0!important;border-bottom:1px solid var(--ui-border)!important;border-top:0!important;
  border-radius:0!important;box-shadow:none!important;
}
html body:not(#\#).erp-app .erp-filterbar>label{flex:1 1 160px!important;min-width:0!important;max-width:100%;margin:0!important}
html body:not(#\#).erp-app .erp-filterbar>label.filter-search{flex:2 1 240px!important}
html body:not(#\#).erp-app .erp-filterbar>label.filter-page-size{flex:0 1 110px!important}
html body:not(#\#).erp-app .erp-filterbar>label>span{
  display:block!important;margin:0 0 6px!important;font-size:12.5px!important;font-weight:500!important;
  color:var(--ui-muted)!important;letter-spacing:0!important;text-transform:none!important;
}
html body:not(#\#).erp-app .erp-filterbar>.btn{flex:0 0 auto!important;width:auto!important;min-height:38px!important}
html body:not(#\#).erp-app .erp-filterbar .filter-count{
  flex:1 1 auto!important;order:50;align-self:center!important;justify-self:auto!important;grid-column:auto!important;
  margin:0!important;padding:0!important;min-height:0!important;border-radius:0!important;background:transparent!important;
  color:var(--ui-muted)!important;font-size:13px!important;font-weight:500!important;white-space:normal!important;
}
html body:not(#\#).erp-app .erp-filterbar .table-pager{
  order:51;flex:0 0 auto!important;width:auto!important;margin-left:auto!important;
  display:flex!important;align-items:center!important;gap:6px!important;grid-template-columns:none!important;min-width:0!important;
}
html body:not(#\#).erp-app .erp-filterbar .table-pager .btn{min-height:32px!important;padding:0 10px!important;font-size:13px!important}
html body:not(#\#).erp-app .table-page-info{font-size:13px!important;font-weight:500!important;color:var(--ui-muted)!important;white-space:nowrap;padding:0 4px}
html body:not(#\#).erp-app .erp-filterbar-premium{
  border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-lg)!important;margin:0 0 16px!important;
  background:var(--ui-card)!important;box-shadow:var(--ui-shadow-sm)!important;padding:14px 16px!important;
}
html body:not(#\#).erp-app .erp-filterbar:empty{display:none!important}

/* Tables */
html body:not(#\#).erp-app .tablewrap,html body:not(#\#).erp-app .table-responsive{background:var(--ui-card)!important;border:0!important}
html body:not(#\#) .table{
  --bs-table-bg:transparent;--bs-table-hover-bg:var(--ui-hover);--bs-table-striped-bg:var(--ui-subtle);
  --bs-table-border-color:var(--ui-border);
  font-size:13.5px!important;color:var(--ui-fg)!important;margin:0!important;
}
html body:not(#\#) .table>thead>tr>th,html body:not(#\#) .table th{
  position:sticky;top:0;z-index:1;
  padding:10px 14px!important;height:40px;
  background:var(--ui-subtle)!important;color:var(--ui-muted)!important;
  font-size:12.5px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap;
  border-bottom:1px solid var(--ui-border)!important;border-top:0!important;
}
html body:not(#\#) .table>tbody>tr>td,html body:not(#\#) .table td{
  padding:10px 14px!important;border-bottom:1px solid var(--ui-border)!important;vertical-align:middle;
  font-size:13.5px!important;color:var(--ui-fg-2);background:transparent!important;
}
html body:not(#\#) .table>tbody>tr:last-child>td{border-bottom:0!important}
html body:not(#\#) .table-hover>tbody>tr:hover>*{background:var(--ui-hover)!important;--bs-table-bg-state:var(--ui-hover)}
html body:not(#\#) .table td b,html body:not(#\#) .table td strong{font-weight:600;color:var(--ui-fg)}
/* Order numbers rendered as bare <button> showed a black native border box. */
html body:not(#\#) .table td>button:not(.btn):not(.action-btn):not(.vpl-link),
html body:not(#\#) .table td>button.vpl-link{
  appearance:none;-webkit-appearance:none;border:0!important;background:transparent!important;box-shadow:none!important;
  padding:0!important;margin:0;font:inherit!important;font-weight:600!important;
  color:var(--ui-fg)!important;cursor:pointer;text-align:left;white-space:nowrap;
}
html body:not(#\#) .table td>button:not(.btn):not(.action-btn):hover{color:var(--ui-primary)!important;text-decoration:underline;text-underline-offset:3px}
html body:not(#\#) .table td>button.vpl-link{color:var(--ui-primary-text)!important;font-weight:500!important;font-variant-numeric:tabular-nums}
html body:not(#\#) .table td>button.vpl-link:hover{text-decoration:underline;text-underline-offset:3px}

/* Status badges */
html body:not(#\#) .badge{font-weight:500!important;letter-spacing:0!important}
html body:not(#\#) .badge.green,html body:not(#\#) .badge.blue,html body:not(#\#) .badge.amber,html body:not(#\#) .badge.red,html body:not(#\#) .badge.violet,html body:not(#\#) .badge.slate{
  display:inline-flex!important;align-items:center!important;gap:5px;
  padding:2px 8px!important;border-radius:999px!important;
  font-size:11.5px!important;font-weight:500!important;line-height:1.5!important;white-space:nowrap;text-transform:none;
  border:1px solid transparent!important;box-shadow:none!important;
}
html body:not(#\#) .badge.green{background:var(--ui-success-soft)!important;color:var(--ui-success-text)!important;border-color:var(--ui-success-border)!important}
html body:not(#\#) .badge.blue{background:var(--ui-primary-soft)!important;color:var(--ui-primary-text)!important;border-color:var(--bs-primary-border-subtle)!important}
html body:not(#\#) .badge.amber{background:var(--ui-warn-soft)!important;color:var(--ui-warn-text)!important;border-color:var(--ui-warn-border)!important}
html body:not(#\#) .badge.red{background:var(--ui-danger-soft)!important;color:var(--ui-danger-text)!important;border-color:var(--ui-danger-border)!important}
html body:not(#\#) .badge.violet{background:var(--ui-violet-soft)!important;color:var(--ui-violet-text)!important;border-color:var(--ui-violet-border)!important}
html body:not(#\#) .badge.slate{background:var(--ui-subtle)!important;color:var(--ui-fg-2)!important;border-color:var(--ui-border)!important}

/* Empty states */
html body:not(#\#).erp-app .empty,html body:not(#\#).erp-app .empty-state{color:var(--ui-muted)!important}
html body:not(#\#).erp-app .empty .empty-icon,html body:not(#\#).erp-app .empty-state-icon{border-radius:10px!important;background:var(--ui-subtle)!important;border:1px solid var(--ui-border)!important;box-shadow:none!important;color:var(--ui-muted)!important}

/* Skeleton loader: calmer shimmer */
html body:not(#\#) .skeleton-head,html body:not(#\#) .skeleton-card,html body:not(#\#) .skeleton-panel{background:var(--ui-subtle)!important;border-radius:var(--ui-radius-lg)!important;border:1px solid var(--ui-border)!important}

/* Alerts */
html body:not(#\#) .alert{border-radius:10px!important;font-size:13.5px}

/* =====================================================================
   MODAL / DRAWER / TOAST
===================================================================== */
html body:not(#\#) .modal-backdrop.show{opacity:1!important;background:rgba(9,9,11,.45)!important}
html body:not(#\#) .modal-backdrop{background:rgba(9,9,11,.45)!important}
html body:not(#\#) #modal .erp-modal-content,html body:not(#\#) .modal-content{
  border:1px solid var(--ui-border)!important;border-radius:14px!important;background:var(--ui-card)!important;box-shadow:var(--ui-shadow-lg)!important;overflow:hidden;
}
html body:not(#\#) #modal .modalhead{
  display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px;
  padding:18px 22px!important;border-bottom:1px solid var(--ui-border)!important;background:var(--ui-card)!important;
}
html body:not(#\#) #modal .modalhead h2{font-size:17px!important;font-weight:600!important;letter-spacing:-.015em!important;margin:0!important;color:var(--ui-fg)!important}
html body:not(#\#) #modal .modalhead p{font-size:13px!important;color:var(--ui-muted)!important;margin:4px 0 0!important}
html body:not(#\#) #modal .modalbody{padding:20px 22px 0!important;background:var(--ui-card)!important}
html body:not(#\#) #modal .professional-form{background:var(--ui-card)!important}
/* Footer: sticks flush to the bottom of the scroll area (the old negative
   offsets made it jump/overlap and look like a doubled submit button). */
html body:not(#\#) #modal .modal-actions{
  position:sticky!important;bottom:0!important;z-index:10!important;
  display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:8px!important;flex-wrap:wrap;
  margin:20px -22px 0!important;padding:14px 22px!important;
  background:var(--ui-card)!important;border-top:1px solid var(--ui-border)!important;box-shadow:none!important;
}
html body:not(#\#) #modal .modal-actions .btn{min-height:38px!important;font-size:14px!important;flex:0 0 auto}
html body:not(#\#) #modal .form-control,html body:not(#\#) #modal .form-select{font-size:14px!important;min-height:40px!important}
html body:not(#\#) #modal .field label{font-size:13px!important}
html body:not(#\#) #modal .hint{font-size:12px!important}
html body:not(#\#) #modal .btn{font-size:14px!important;min-height:38px!important}
html body:not(#\#) #modal .btn-close,html body:not(#\#) .modal .btn-close{
  width:32px;height:32px;padding:0;border-radius:8px;opacity:.6;background-size:12px;
  border:1px solid var(--ui-border)!important;
}
html body:not(#\#) .modal .btn-close:hover{opacity:1;background-color:var(--ui-hover)}
:root[data-bs-theme="dark"] body:not(#\#) .modal .btn-close{filter:invert(1) grayscale(1)}

html body:not(#\#) .form-section{
  margin-bottom:16px!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-lg)!important;
  background:var(--ui-card)!important;overflow:hidden!important;padding:0!important;box-shadow:none!important;
}
html body:not(#\#) .form-section-head{
  display:flex!important;align-items:center!important;gap:12px!important;
  margin:0!important;padding:12px 16px!important;border-bottom:1px solid var(--ui-border)!important;
  background:var(--ui-subtle)!important;width:100%!important;
}
html body:not(#\#) .form-section-icon{
  width:32px!important;height:32px!important;flex:0 0 32px;border-radius:8px!important;display:grid!important;place-items:center!important;
  background:var(--ui-card)!important;color:var(--ui-primary)!important;border:1px solid var(--ui-border)!important;box-shadow:none!important;
}
html body:not(#\#) .form-section-icon svg{width:16px!important;height:16px!important}
html body:not(#\#) .form-section-head b{display:block;font-size:14px!important;font-weight:600!important;color:var(--ui-fg)!important}
html body:not(#\#) .form-section-head span{display:block;margin-top:2px;font-size:12.5px!important;color:var(--ui-muted)!important}
html body:not(#\#) .form-section>.formgrid,html body:not(#\#) .form-section>.field{padding:16px!important;margin:0!important}

html body:not(#\#) .erp-drawer.offcanvas,html body:not(#\#) #drawer.offcanvas{background:var(--ui-card)!important;border-left:1px solid var(--ui-border)!important;box-shadow:var(--ui-shadow-lg)!important}
html body:not(#\#) .offcanvas-backdrop.show{opacity:1!important;background:rgba(9,9,11,.45)!important}

html body:not(#\#) .erp-toast-container{z-index:2100!important}
html body:not(#\#) #toast.toast{
  min-width:min(360px,calc(100vw - 32px));border-radius:10px!important;border:1px solid var(--ui-border)!important;
  background:var(--ui-card)!important;color:var(--ui-fg)!important;box-shadow:var(--ui-shadow-lg)!important;
}
html body:not(#\#) #toast.toast .toast-body{font-size:13.5px!important;font-weight:500!important;color:var(--ui-fg)!important;padding:12px}
html body:not(#\#) #toast.toast .btn-close{filter:none!important}
:root[data-bs-theme="dark"] body:not(#\#) #toast.toast .btn-close{filter:invert(1)!important}
html body:not(#\#) .erp-toast-icon{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;font-size:14px;background:transparent!important;color:var(--ui-muted)}
html body:not(#\#) #toast.text-bg-success .erp-toast-icon{color:var(--ui-success)}
html body:not(#\#) #toast.text-bg-danger .erp-toast-icon{color:var(--ui-danger)}
html body:not(#\#) #toast.text-bg-warning .erp-toast-icon{color:var(--ui-warn)}
html body:not(#\#) #toast.text-bg-success{border-left:3px solid var(--ui-success)!important}
html body:not(#\#) #toast.text-bg-danger{border-left:3px solid var(--ui-danger)!important}
html body:not(#\#) #toast.text-bg-warning{border-left:3px solid var(--ui-warn)!important}

/* Dropdown menus / popovers from Bootstrap */
html body:not(#\#) .dropdown-menu{border:1px solid var(--ui-border)!important;border-radius:10px!important;box-shadow:var(--ui-shadow-lg)!important;padding:4px!important;background:var(--ui-card)!important}
html body:not(#\#) .dropdown-item{border-radius:6px;font-size:13.5px;padding:7px 10px}

/* Task ticker */
html body:not(#\#) .task-ticker{border-bottom:1px solid var(--ui-border)!important;background:var(--ui-card)!important;color:var(--ui-fg-2)!important;font-size:13px}

/* =====================================================================
   RESPONSIVE (tablet + mobile)
===================================================================== */
@media(max-width:1199.98px){
  html body:not(#\#).erp-app #root.erp-content{padding:20px 20px 40px!important}
}
@media(max-width:991.98px){
  html body:not(#\#).erp-app header.erp-topbar{padding-left:12px!important;padding-right:12px!important}
  html body:not(#\#).erp-app .erp-sidebar.offcanvas-lg{background:var(--ui-sidebar)!important}
  html body:not(#\#).erp-app .erp-main>.d-md-none{padding:12px 16px 0!important}
}
@media(max-width:767.98px){
  :root{--ui-topbar-h:56px}
  html body:not(#\#).erp-app #root.erp-content{padding:16px 14px 32px!important}
  html body:not(#\#).erp-app .pagehead{flex-direction:column!important;align-items:stretch!important;gap:12px!important;margin-bottom:16px!important}
  html body:not(#\#).erp-app .pagehead h1{font-size:21px!important}
  html body:not(#\#).erp-app .pagehead p{font-size:13.5px!important}
  html body:not(#\#).erp-app .page-actions{width:100%}
  html body:not(#\#).erp-app .page-actions .btn{flex:1 1 auto}
  html body:not(#\#).erp-app .panelhead{padding:14px 16px!important}
  /* Long bulk-action toolbars scroll sideways instead of stacking 5 rows high. */
  html body:not(#\#).erp-app .panelhead>.d-flex.flex-wrap{
    flex-wrap:nowrap!important;overflow-x:auto;max-width:100%;width:100%;
    padding-bottom:4px;margin-bottom:-4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  html body:not(#\#).erp-app .panelhead>.d-flex.flex-wrap::-webkit-scrollbar{display:none}
  html body:not(#\#).erp-app .panelhead>.d-flex.flex-wrap>*{flex:0 0 auto}
  html body:not(#\#).erp-app .erp-filterbar{padding:12px 16px!important;gap:10px!important}
  html body:not(#\#).erp-app .erp-filterbar>label,html body:not(#\#).erp-app .erp-filterbar>label.filter-search{flex:1 1 100%!important}
  html body:not(#\#).erp-app .erp-filterbar>label.filter-page-size{flex:1 1 calc(50% - 5px)!important}
  html body:not(#\#).erp-app .erp-filterbar>.btn{flex:1 1 calc(50% - 5px)!important}
  html body:not(#\#).erp-app .erp-filterbar .filter-count{flex:1 1 100%!important;order:50}
  html body:not(#\#).erp-app .erp-filterbar .table-pager{flex:1 1 100%!important;order:51;justify-content:space-between!important;margin:0!important}
  html body:not(#\#).erp-app .erp-filterbar-premium>label{flex:1 1 calc(50% - 5px)!important}
  html body:not(#\#).erp-app .erp-filterbar-premium>label:has(select){flex:1 1 100%!important}
  html body:not(#\#).erp-app .stat{padding:14px!important}
  html body:not(#\#).erp-app .stat .value{font-size:21px!important}
  html body:not(#\#).erp-app .stat .label{font-size:12.5px!important}
  html body:not(#\#).erp-app .stat .sicon{width:28px!important;height:28px!important}
  html body:not(#\#) .table th,html body:not(#\#) .table td{padding:9px 12px!important}

  /* Mobile modal = full-screen sheet with a fixed footer bar. */
  html body:not(#\#) #modal .erp-modal-content{border-radius:0!important;border:0!important}
  html body:not(#\#) #modal .modalhead{padding:14px 16px!important;position:sticky;top:0;z-index:11}
  html body:not(#\#) #modal .modalbody{padding:16px 16px 0!important}
  html body:not(#\#) #modal .modal-actions{margin:16px -16px 0!important;padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important}
  html body:not(#\#) #modal .modal-actions .btn{flex:1 1 0!important}
  html body:not(#\#) .form-section>.formgrid,html body:not(#\#) .form-section>.field{padding:14px!important}

  html body:not(#\#) .erp-toast-container{left:0;right:0;padding:12px!important;display:flex;justify-content:center}
}
@media(max-width:420px){
  html body:not(#\#).erp-app .erp-filterbar>label.filter-page-size,html body:not(#\#).erp-app .erp-filterbar>.btn,
  html body:not(#\#).erp-app .erp-filterbar-premium>label{flex:1 1 100%!important}
  html body:not(#\#) #modal .modal-actions{flex-direction:column-reverse!important}
  html body:not(#\#) #modal .modal-actions .btn{width:100%!important}
}
/* Comfortable touch targets on touch screens */
@media(pointer:coarse){
  html body:not(#\#) .btn{min-height:40px!important}
  html body:not(#\#) .btn-sm{min-height:36px!important}
  html body:not(#\#) .form-control,html body:not(#\#) .form-select,html body:not(#\#) .input,html body:not(#\#) .select{min-height:42px!important;font-size:16px!important}
  html body:not(#\#).erp-app .navitem{min-height:40px!important}
}

/* =====================================================================
   PUBLIC SITE + LOGIN + TRACKING
===================================================================== */
html body:not(#\#).ah-public,html body:not(#\#).ah-auth{background:var(--ui-page)!important;color:var(--ui-fg)!important;font-size:15px}
html body:not(#\#) .ah-logo{
  width:38px!important;height:38px!important;border-radius:10px!important;background:var(--ui-primary)!important;color:#fff!important;
  box-shadow:none!important;font-weight:700!important;font-size:14px!important;letter-spacing:0!important;
}
html body:not(#\#) .ah-public-header{background:color-mix(in srgb,var(--ui-card) 88%,transparent)!important;border-bottom:1px solid var(--ui-border)!important;-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px)}
html body:not(#\#) .ah-public-header .ah-container{min-height:64px!important}
html body:not(#\#) .ah-brand b{font-size:14.5px!important;font-weight:600!important;color:var(--ui-fg)}
html body:not(#\#) .ah-brand small{font-size:12.5px!important;color:var(--ui-muted)!important}
html body:not(#\#) .ah-public-header nav .btn{min-height:34px!important;font-size:13.5px!important}
html body:not(#\#) .ah-hero{padding:72px 0 64px!important;background:radial-gradient(ellipse 60% 50% at 80% 0%,rgba(var(--ui-primary-rgb),.08),transparent 70%),var(--ui-page)!important}
html body:not(#\#) .ah-hero h1{font-size:clamp(2rem,4.6vw,3.5rem)!important;font-weight:700!important;letter-spacing:-.035em!important;line-height:1.08!important;color:var(--ui-fg)}
html body:not(#\#) .ah-hero h1 span{color:var(--ui-primary)!important}
html body:not(#\#) .ah-hero-lead{font-size:16.5px!important;line-height:1.65!important;color:var(--ui-muted)!important;max-width:580px}
html body:not(#\#) .ah-pill{border:1px solid var(--ui-border)!important;background:var(--ui-card)!important;color:var(--ui-fg-2)!important;font-size:13px!important;font-weight:500!important;padding:5px 12px!important;letter-spacing:0!important;text-transform:none!important}
html body:not(#\#) .ah-pill svg.lucide{color:var(--ui-primary)}
html body:not(#\#) .ah-hero .badge.text-bg-light{background:var(--ui-card)!important;border:1px solid var(--ui-border)!important;color:var(--ui-fg-2)!important;font-size:13px!important;font-weight:500!important;padding:6px 12px!important}
html body:not(#\#) .ah-track-card{border:1px solid var(--ui-border)!important;border-radius:16px!important;background:var(--ui-card)!important;box-shadow:var(--ui-shadow-lg)!important}
html body:not(#\#) .ah-track-card-head{padding:20px 22px!important;border-bottom:1px solid var(--ui-border)!important}
html body:not(#\#) .ah-track-card-body{padding:20px 22px!important}
html body:not(#\#) .ah-track-card-head h2{font-size:16px!important;font-weight:600!important}
html body:not(#\#) .ah-track-icon{width:40px!important;height:40px!important;border-radius:10px!important;display:grid!important;place-items:center!important;background:var(--ui-primary-soft)!important;color:var(--ui-primary)!important;font-size:18px}
html body:not(#\#) .ah-track-tabs{padding:4px!important;border:0!important;border-radius:10px!important;background:var(--ui-subtle)!important}
html body:not(#\#) .ah-track-tabs .nav-link{border-radius:7px!important;font-size:13.5px!important;font-weight:500!important;color:var(--ui-muted)!important;padding:7px 10px!important;display:flex;align-items:center;justify-content:center;gap:6px;border:0!important}
html body:not(#\#) .ah-track-tabs .nav-link.active{background:var(--ui-card)!important;color:var(--ui-fg)!important;box-shadow:var(--ui-shadow-sm)!important}
html body:not(#\#) .ah-track-card .btn-outline-primary{color:var(--ui-fg)!important;font-weight:500!important;min-height:42px!important;font-size:14px!important}
html body:not(#\#) .ah-track-card .btn-outline-primary svg.lucide{color:var(--ui-muted)}
html body:not(#\#) .ah-track-card .input-group-lg>.form-control{font-size:16px!important;min-height:46px!important}
html body:not(#\#) .ah-track-card .input-group-text{min-width:46px;justify-content:center}
html body:not(#\#) .ah-track-card .btn-primary{min-height:44px!important;font-size:15px!important}
html body:not(#\#) .ah-feature{border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-lg)!important;background:var(--ui-card)!important;box-shadow:var(--ui-shadow-xs)!important;padding:22px!important}
html body:not(#\#) .ah-feature-no{border-radius:8px!important;background:var(--ui-primary-soft)!important;color:var(--ui-primary-text)!important;font-weight:600!important;font-size:13px!important}
html body:not(#\#) .ah-feature h3{font-size:16px!important;font-weight:600!important;margin-top:14px}
html body:not(#\#) .ah-feature p{font-size:14px!important;color:var(--ui-muted)!important;line-height:1.6}
html body:not(#\#) .ah-notice{background:var(--ui-card)!important;border-color:var(--ui-border)!important}
html body:not(#\#) .ah-notice-inner p{font-size:13.5px;color:var(--ui-muted)}
html body:not(#\#) .ah-notice-icon{border-radius:10px!important;background:var(--ui-subtle)!important;color:var(--ui-muted)!important;display:grid;place-items:center;flex:0 0 36px}
html body:not(#\#) .ah-footer{background:#09090b!important;color:#fafafa}
html body:not(#\#) .ah-footer a{font-size:13.5px!important;color:#a1a1aa!important}
html body:not(#\#) .ah-footer a:hover{color:#fff!important}
html body:not(#\#) .ah-footer small{color:#a1a1aa!important;font-size:13px}
html body:not(#\#) .ah-city-modal .modal-content{border-radius:14px!important}
html body:not(#\#) .ah-city-result,html body:not(#\#) .ah-city-name-result{border-radius:8px!important}
html body:not(#\#) .ah-result-card,html body:not(#\#) .ah-result-meta,html body:not(#\#) .ah-page-card{border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius-lg)!important;background:var(--ui-card)!important;box-shadow:var(--ui-shadow-sm)!important}
html body:not(#\#) .ah-result-label{font-size:12.5px!important;font-weight:500!important;color:var(--ui-muted)!important;text-transform:none!important;letter-spacing:0!important}
html body:not(#\#) .pp-result table{width:100%;font-size:13.5px;border-collapse:collapse}
html body:not(#\#) .pp-result table td,html body:not(#\#) .pp-result table th{padding:9px 12px;border-bottom:1px solid var(--ui-border)}

/* Login */
html body:not(#\#) .ah-auth-wrap{min-height:100vh;min-height:100dvh;padding:24px!important}
html body:not(#\#) .ah-auth-card{border:1px solid var(--ui-border)!important;border-radius:16px!important;background:var(--ui-card)!important;box-shadow:var(--ui-shadow-lg)!important;width:min(960px,100%)!important}
html body:not(#\#) .ah-auth-side{background:#09090b!important;color:#fafafa;padding:44px!important;min-height:560px!important;position:relative;overflow:hidden}
html body:not(#\#) .ah-auth-side::after{content:"";position:absolute;inset:auto -20% -40% auto;width:70%;height:70%;background:radial-gradient(circle,rgba(59,130,246,.35),transparent 65%);pointer-events:none}
html body:not(#\#) .ah-auth-side h1{font-size:30px!important;font-weight:650!important;letter-spacing:-.03em!important;line-height:1.15!important;margin-top:12px}
html body:not(#\#) .ah-auth-side p{color:#a1a1aa!important;font-size:15px;line-height:1.6}
html body:not(#\#) .ah-auth-side .text-info-emphasis{color:#93c5fd!important;font-size:12px;letter-spacing:.08em!important}
html body:not(#\#) .ah-auth-feature{border:1px solid rgba(255,255,255,.1)!important;border-radius:12px!important;background:rgba(255,255,255,.04)!important;padding:16px!important;position:relative;z-index:1}
html body:not(#\#) .ah-auth-feature svg.lucide{width:20px;height:20px;color:#93c5fd}
html body:not(#\#) .ah-auth-form{padding:48px 44px!important}
html body:not(#\#) .ah-auth-kicker{font-size:12.5px!important;font-weight:500!important;color:var(--ui-muted)!important;letter-spacing:0!important;text-transform:none!important}
html body:not(#\#) .ah-auth-form h2{font-size:26px!important;font-weight:650!important;letter-spacing:-.025em!important}
html body:not(#\#) .ah-form-icon{position:relative}
html body:not(#\#) .ah-form-icon>svg.lucide,html body:not(#\#) .ah-form-icon>i{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ui-muted);z-index:2;pointer-events:none}
html body:not(#\#) .ah-form-icon>.form-control{padding-left:38px!important;min-height:42px!important}
html body:not(#\#) .ah-auth-form .btn-primary{min-height:42px!important;font-size:14.5px!important}
.ah-password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:3;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:var(--ui-muted);cursor:pointer}
.ah-password-toggle:hover{background:var(--ui-hover);color:var(--ui-fg)}
.ah-password-toggle svg{width:16px;height:16px}
@media(max-width:991.98px){html body:not(#\#) .ah-auth-form{padding:36px 28px!important}}
@media(max-width:575.98px){
  html body:not(#\#) .ah-auth-wrap{padding:12px!important;align-items:start;padding-top:10vh!important}
  html body:not(#\#) .ah-auth-form{padding:28px 20px!important}
  html body:not(#\#) .ah-hero{padding:40px 0 44px!important}
  html body:not(#\#) .ah-hero-lead{font-size:15px!important}
  html body:not(#\#) .ah-track-card-head,html body:not(#\#) .ah-track-card-body{padding:16px!important}
  html body:not(#\#) .ah-public-header nav .btn{padding:0 10px!important}
}


/* ---------- Fixes found in review ---------- */
html body.erp-app:not(#\#) .page-actions{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
html body.erp-app:not(#\#) .page-actions:empty{display:none!important}
html body:not(#\#) .table td,html body:not(#\#) .table th{letter-spacing:-.003em!important;font-variant-numeric:normal!important}
html body.erp-app:not(#\#) .erp-filterbar input[type="date"]{letter-spacing:0!important}
html body.erp-app:not(#\#) .erp-filterbar .btn:hover{transform:none!important}
html body.erp-app:not(#\#) .erp-filterbar .input::placeholder,html body.erp-app:not(#\#) .erp-filterbar .form-control::placeholder{font-weight:400!important;color:#a1a1aa!important}
html body.erp-app:not(#\#) .erp-filterbar input[type="search"]{padding-left:12px!important}
/* Brand block visible at the top of the desktop sidebar too. */
@media(min-width:992px){
  html body.erp-app:not(#\#) .erp-sidebar .offcanvas-header.erp-sidebar-header{display:flex!important;align-items:center}
}

/* ---------- Bootstrap display utilities must still win over component display rules ---------- */
html body:not(#\#):not(#\#) .hidden,html body:not(#\#):not(#\#) .d-none{display:none!important}
@media(min-width:576px){html body:not(#\#):not(#\#) .d-sm-none{display:none!important}html body:not(#\#):not(#\#) .d-sm-inline{display:inline!important}html body:not(#\#):not(#\#) .d-sm-inline-block{display:inline-block!important}html body:not(#\#):not(#\#) .d-sm-block{display:block!important}html body:not(#\#):not(#\#) .d-sm-flex{display:flex!important}html body:not(#\#):not(#\#) .d-sm-inline-flex{display:inline-flex!important}html body:not(#\#):not(#\#) .d-sm-grid{display:grid!important}}
@media(min-width:768px){html body:not(#\#):not(#\#) .d-md-none{display:none!important}html body:not(#\#):not(#\#) .d-md-inline{display:inline!important}html body:not(#\#):not(#\#) .d-md-inline-block{display:inline-block!important}html body:not(#\#):not(#\#) .d-md-block{display:block!important}html body:not(#\#):not(#\#) .d-md-flex{display:flex!important}html body:not(#\#):not(#\#) .d-md-inline-flex{display:inline-flex!important}html body:not(#\#):not(#\#) .d-md-grid{display:grid!important}}
@media(min-width:992px){html body:not(#\#):not(#\#) .d-lg-none{display:none!important}html body:not(#\#):not(#\#) .d-lg-inline{display:inline!important}html body:not(#\#):not(#\#) .d-lg-inline-block{display:inline-block!important}html body:not(#\#):not(#\#) .d-lg-block{display:block!important}html body:not(#\#):not(#\#) .d-lg-flex{display:flex!important}html body:not(#\#):not(#\#) .d-lg-inline-flex{display:inline-flex!important}html body:not(#\#):not(#\#) .d-lg-grid{display:grid!important}}
@media(min-width:1200px){html body:not(#\#):not(#\#) .d-xl-none{display:none!important}html body:not(#\#):not(#\#) .d-xl-inline{display:inline!important}html body:not(#\#):not(#\#) .d-xl-inline-block{display:inline-block!important}html body:not(#\#):not(#\#) .d-xl-block{display:block!important}html body:not(#\#):not(#\#) .d-xl-flex{display:flex!important}html body:not(#\#):not(#\#) .d-xl-inline-flex{display:inline-flex!important}html body:not(#\#):not(#\#) .d-xl-grid{display:grid!important}}
@media(min-width:1400px){html body:not(#\#):not(#\#) .d-xxl-none{display:none!important}html body:not(#\#):not(#\#) .d-xxl-inline{display:inline!important}html body:not(#\#):not(#\#) .d-xxl-inline-block{display:inline-block!important}html body:not(#\#):not(#\#) .d-xxl-block{display:block!important}html body:not(#\#):not(#\#) .d-xxl-flex{display:flex!important}html body:not(#\#):not(#\#) .d-xxl-inline-flex{display:inline-flex!important}html body:not(#\#):not(#\#) .d-xxl-grid{display:grid!important}}
html body:not(#\#):not(#\#) .hidden{display:none!important}
html body:not(#\#):not(#\#) .justify-content-between{justify-content:space-between!important}
html body:not(#\#):not(#\#) .justify-content-start{justify-content:flex-start!important}
html body:not(#\#):not(#\#) .justify-content-end{justify-content:flex-end!important}
html body:not(#\#):not(#\#) .btn.text-start{text-align:left!important}
html body:not(#\#):not(#\#) .w-100{width:100%!important}
html body:not(#\#) .ah-auth-side h1,html body:not(#\#) .ah-auth-side .fw-bold{color:#fafafa!important}
html body:not(#\#) .ah-auth-side small{color:#a1a1aa!important}

/* =====================================================================
   v4.4.0 — Charts (assets/vendor/erp-charts.js)
===================================================================== */
.erpc{position:relative;width:100%;min-height:120px;font-family:var(--ui-font);color:var(--ui-fg)}
.erpc-svg{display:block;overflow:visible}
.erpc-tick{font-size:11.5px;font-weight:450;font-variant-numeric:tabular-nums}
.erpc-hit{cursor:crosshair}
.erpc-bar{transition:opacity .15s ease}
.erpc-grow{animation:erpcGrow .7s cubic-bezier(.22,1,.36,1) both}
@keyframes erpcGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.erpc-draw{transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1);stroke-dashoffset:0!important}
.erpc-fade{animation:erpcFade .8s ease .25s both}
@keyframes erpcFade{from{opacity:0}to{opacity:1}}
.erpc-legend{display:flex;flex-wrap:wrap;gap:4px 6px;margin:0 0 10px}
.erpc-legend-item{display:inline-flex;align-items:center;gap:7px;padding:4px 9px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-card);color:var(--ui-fg-2);font:500 12px/1.2 var(--ui-font);cursor:pointer;transition:opacity .15s ease,background-color .15s ease}
.erpc-legend-item:hover{background:var(--ui-hover)}
.erpc-legend-item i{width:9px;height:9px;border-radius:3px;display:inline-block}
.erpc-legend-item i.is-line{width:14px;height:3px;border-radius:2px}
.erpc-legend-item.is-off{opacity:.45;text-decoration:line-through}
.erpc-tip{position:absolute;z-index:5;display:none;min-width:170px;max-width:260px;padding:10px 12px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-card);box-shadow:var(--ui-shadow-lg);pointer-events:none;font-size:12.5px}
.erpc-tip-title{font-weight:600;color:var(--ui-fg);margin-bottom:6px}
.erpc-tip-row{display:flex;align-items:center;gap:8px;padding:2px 0;color:var(--ui-muted)}
.erpc-tip-row i{width:8px;height:8px;border-radius:2px;flex:0 0 8px}
.erpc-tip-row span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.erpc-tip-row b{color:var(--ui-fg);font-weight:600;font-variant-numeric:tabular-nums}
.erpc-empty{display:grid;place-items:center;min-height:200px;color:var(--ui-muted);font-size:13.5px;border:1px dashed var(--ui-border);border-radius:10px}
.erpc-donut-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:center;position:relative}
.erpc-donut{flex:0 0 auto;overflow:visible}
.erpc-arc{transition:opacity .2s ease;cursor:pointer}
.erpc-donut-center{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.erpc-donut-ring{position:relative;flex:0 0 auto}
.erpc-donut-ring .erpc-donut-center{inset:0}
.erpc-donut-center b{font-size:22px;font-weight:650;letter-spacing:-.02em;color:var(--ui-fg);font-variant-numeric:tabular-nums}
.erpc-donut-center span{font-size:12px;color:var(--ui-muted);max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.erpc-donut-center em{font-style:normal;font-size:12px;font-weight:600;color:var(--ui-primary)}
.erpc-donut-legend{flex:1 1 200px;min-width:180px;display:flex;flex-direction:column;gap:10px}
.erpc-donut-row{display:grid;grid-template-columns:10px 1fr auto 52px;align-items:center;gap:4px 8px;font-size:13px;cursor:default}
.erpc-donut-row i{width:10px;height:10px;border-radius:3px}
.erpc-donut-row span{color:var(--ui-fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.erpc-donut-row b{font-weight:600;font-variant-numeric:tabular-nums}
.erpc-donut-row em{font-style:normal;color:var(--ui-muted);text-align:right;font-variant-numeric:tabular-nums}
.erpc-donut-bar{grid-column:2/-1;height:4px;border-radius:99px;background:var(--ui-subtle);overflow:hidden}
.erpc-donut-bar div{height:100%;border-radius:99px;transition:width .9s cubic-bezier(.22,1,.36,1)}
html body:not(#\#) #ordersChart,html body:not(#\#) #parcelChart{padding:16px 20px!important}
html body:not(#\#) .chart-fallback-legend,html body:not(#\#) .chart-fallback-svg{display:none}

/* Monthly report */
html body.erp-app:not(#\#) .monthly-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--ui-border)}
html body.erp-app:not(#\#) .monthly-kpis>div{padding:14px 20px;border-right:1px solid var(--ui-border);min-width:0}
html body.erp-app:not(#\#) .monthly-kpis>div:last-child{border-right:0}
html body.erp-app:not(#\#) .monthly-kpis span{display:block;font-size:12.5px;color:var(--ui-muted);font-weight:500}
html body.erp-app:not(#\#) .monthly-kpis b{display:block;margin-top:4px;font-size:20px;font-weight:650;letter-spacing:-.02em;color:var(--ui-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.erp-app:not(#\#) .monthly-kpis em{display:block;font-style:normal;font-size:12px;color:var(--ui-muted);margin-top:2px}
html body.erp-app:not(#\#) .monthly-chart-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);border-bottom:1px solid var(--ui-border)}
html body.erp-app:not(#\#) .monthly-chart-grid>div{padding:16px 20px;min-width:0}
html body.erp-app:not(#\#) .monthly-chart-grid>div+div{border-left:1px solid var(--ui-border)}
html body.erp-app:not(#\#) .chart-title{font-size:13px;font-weight:600;color:var(--ui-fg);margin-bottom:10px}
html body:not(#\#) .monthly-table tfoot td{background:var(--ui-subtle)!important;font-weight:600;border-top:1px solid var(--ui-border)!important;border-bottom:0!important}
html body:not(#\#) .rate-cell{display:flex;align-items:center;gap:8px;min-width:96px}
html body:not(#\#) .rate-cell span{width:44px;font-variant-numeric:tabular-nums;font-weight:500}
html body:not(#\#) .rate-bar{flex:1;height:5px;border-radius:99px;background:var(--ui-subtle);overflow:hidden;min-width:40px}
html body:not(#\#) .rate-bar i{display:block;height:100%;border-radius:99px;background:var(--ui-success)}
html body:not(#\#) .rate-bar.bad i{background:var(--ui-danger)}
html body:not(#\#) .text-success-emphasis{color:var(--ui-success-text)!important}
html body:not(#\#) .text-danger-emphasis{color:var(--ui-danger-text)!important}
@media(max-width:1199.98px){
  html body.erp-app:not(#\#) .monthly-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  html body.erp-app:not(#\#) .monthly-kpis>div{border-bottom:1px solid var(--ui-border)}
  html body.erp-app:not(#\#) .monthly-chart-grid{grid-template-columns:1fr}
  html body.erp-app:not(#\#) .monthly-chart-grid>div+div{border-left:0;border-top:1px solid var(--ui-border)}
}
@media(max-width:767.98px){
  html body.erp-app:not(#\#) .monthly-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body.erp-app:not(#\#) .monthly-kpis>div{padding:12px 16px}
  html body.erp-app:not(#\#) .monthly-kpis b{font-size:18px}
  html body.erp-app:not(#\#) .monthly-chart-grid>div{padding:14px 12px}
  .erpc-donut-wrap{gap:16px}
}

/* =====================================================================
   v4.4.0 — Colour scheme: one status palette everywhere
===================================================================== */
:root{--st-delivered:#10b981;--st-return:#ef4444;--st-transit:#3b82f6;--st-pending:#f59e0b;--st-lost:#64748b;--st-booked:#06b6d4}
html body:not(#\#) .text-primary{color:var(--ui-primary)!important}
html body:not(#\#) .text-success{color:var(--ui-success-text)!important}
html body:not(#\#) .text-danger{color:var(--ui-danger-text)!important}
html body:not(#\#) .text-warning{color:var(--ui-warn-text)!important}
html body:not(#\#) .text-body-secondary,html body:not(#\#) .text-muted{color:var(--ui-muted)!important}
html body:not(#\#) .bg-body,html body:not(#\#) .bg-white{background-color:var(--ui-card)!important}
html body:not(#\#) .bg-light,html body:not(#\#) .bg-body-tertiary{background-color:var(--ui-subtle)!important}
html body:not(#\#) .border,html body:not(#\#) .border-top,html body:not(#\#) .border-bottom{border-color:var(--ui-border)!important}
html body:not(#\#) .text-bg-primary{background:var(--ui-primary)!important;color:#fff!important}
html body:not(#\#) .text-bg-success{background:var(--ui-success-soft)!important;color:var(--ui-success-text)!important}
html body:not(#\#) .text-bg-danger:not(#notificationBadge):not(.toast){background:var(--ui-danger-soft)!important;color:var(--ui-danger-text)!important}
html body:not(#\#) .text-bg-warning:not(.toast){background:var(--ui-warn-soft)!important;color:var(--ui-warn-text)!important}
html body:not(#\#) .text-bg-light{background:var(--ui-subtle)!important;color:var(--ui-fg-2)!important}
html body:not(#\#) .alert-success{background:var(--ui-success-soft)!important;border-color:var(--ui-success-border)!important;color:var(--ui-success-text)!important}
html body:not(#\#) .alert-danger{background:var(--ui-danger-soft)!important;border-color:var(--ui-danger-border)!important;color:var(--ui-danger-text)!important}
html body:not(#\#) .alert-warning{background:var(--ui-warn-soft)!important;border-color:var(--ui-warn-border)!important;color:var(--ui-warn-text)!important}
html body:not(#\#) .alert-info,html body:not(#\#) .alert-primary{background:var(--ui-primary-soft)!important;border-color:var(--bs-primary-border-subtle)!important;color:var(--ui-primary-text)!important}
html body:not(#\#) .alert-light,html body:not(#\#) .alert-secondary{background:var(--ui-subtle)!important;border-color:var(--ui-border)!important;color:var(--ui-fg-2)!important}
html body:not(#\#) hr{border-color:var(--ui-border);opacity:1}
html body:not(#\#) a{color:var(--ui-primary)}
html body:not(#\#) a.btn,html body:not(#\#) .ah-brand,html body:not(#\#) .ah-footer a{color:inherit}
html body:not(#\#) .ah-footer a{color:#a1a1aa!important}

/* =====================================================================
   v4.4.0 — Motion (subtle, professional; disabled for reduced-motion)
===================================================================== */
@keyframes uiRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes uiFadeIn{from{opacity:0}to{opacity:1}}
@keyframes uiPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes uiShimmer{from{background-position:-400px 0}to{background-position:400px 0}}
@keyframes uiSlideIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  html body.erp-app:not(#\#) #root.ui-enter>*{animation:uiRise .5s cubic-bezier(.22,1,.36,1) both}
  html body.erp-app:not(#\#) #root.ui-enter>*:nth-child(2){animation-delay:.04s}
  html body.erp-app:not(#\#) #root.ui-enter>*:nth-child(3){animation-delay:.08s}
  html body.erp-app:not(#\#) #root.ui-enter>*:nth-child(4){animation-delay:.12s}
  html body.erp-app:not(#\#) #root.ui-enter>*:nth-child(5){animation-delay:.16s}
  html body.erp-app:not(#\#) #root.ui-enter>*:nth-child(n+6){animation-delay:.2s}
  html body.erp-app:not(#\#) #root.ui-enter .grid>.stat{animation:uiRise .5s cubic-bezier(.22,1,.36,1) both!important}
  html body.erp-app:not(#\#) #root.ui-enter .grid>.stat:nth-child(2){animation-delay:.05s!important}
  html body.erp-app:not(#\#) #root.ui-enter .grid>.stat:nth-child(3){animation-delay:.1s!important}
  html body.erp-app:not(#\#) #root.ui-enter .grid>.stat:nth-child(4){animation-delay:.15s!important}
  html body.erp-app:not(#\#) #root.ui-enter .grid>.stat:nth-child(5){animation-delay:.2s!important}
  html body.erp-app:not(#\#) #root.ui-enter .grid>.stat:nth-child(6){animation-delay:.25s!important}
  html body.erp-app:not(#\#) #root.ui-enter .grid>.stat:nth-child(7){animation-delay:.3s!important}
  html body.erp-app:not(#\#) #root.ui-enter .grid>.stat:nth-child(n+8){animation-delay:.35s!important}
  html body:not(#\#) #modal.show .erp-modal-content{animation:uiPop .32s cubic-bezier(.22,1,.36,1) both}
  html body:not(#\#) .modal.show .modal-content{animation:uiPop .32s cubic-bezier(.22,1,.36,1) both}
  html body:not(#\#) #toast.toast.show{animation:uiSlideIn .3s cubic-bezier(.22,1,.36,1) both}
  html body:not(#\#) .search-results:not(.hidden),html body:not(#\#) .dropdown-menu.show{animation:uiPop .18s ease both}
  html body:not(#\#) .skeleton-head,html body:not(#\#) .skeleton-card,html body:not(#\#) .skeleton-panel{
    background:linear-gradient(90deg,var(--ui-subtle) 0%,var(--ui-hover) 40%,var(--ui-subtle) 80%)!important;background-size:800px 100%!important;animation:uiShimmer 1.3s linear infinite!important}
  html body.ah-public:not(#\#) .ah-hero .col-lg-7>*{animation:uiRise .6s cubic-bezier(.22,1,.36,1) both}
  html body.ah-public:not(#\#) .ah-hero .col-lg-7>*:nth-child(2){animation-delay:.06s}
  html body.ah-public:not(#\#) .ah-hero .col-lg-7>*:nth-child(3){animation-delay:.12s}
  html body.ah-public:not(#\#) .ah-hero .col-lg-7>*:nth-child(4){animation-delay:.18s}
  html body.ah-public:not(#\#) .ah-track-card{animation:uiPop .6s cubic-bezier(.22,1,.36,1) .1s both}
  html body.ah-public:not(#\#) .ah-feature{animation:uiRise .6s cubic-bezier(.22,1,.36,1) both}
  html body.ah-auth:not(#\#) .ah-auth-card{animation:uiPop .5s cubic-bezier(.22,1,.36,1) both}
  html body:not(#\#) .ah-auth-side::after{animation:uiGlow 8s ease-in-out infinite alternate}
}
@keyframes uiGlow{from{transform:translate(0,0) scale(1);opacity:.8}to{transform:translate(-30px,-20px) scale(1.15);opacity:1}}
/* Interaction feedback */
html body:not(#\#) .btn:active:not(:disabled){transform:scale(.98)!important}
html body:not(#\#) .stat-clickable:active{transform:scale(.995)!important}
html body.erp-app:not(#\#) .stat-clickable:hover{transform:translateY(-2px)!important;transition:transform .2s cubic-bezier(.22,1,.36,1),border-color .15s ease,box-shadow .2s ease!important}
html body.erp-app:not(#\#) .navitem{transition:background-color .15s ease,color .15s ease,padding-left .2s cubic-bezier(.22,1,.36,1)!important}
html body.erp-app:not(#\#) .navitem.active::before{content:""!important;display:block!important;position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--ui-primary);animation:uiFadeIn .25s ease both}
html body.erp-app:not(#\#) .erp-live-dot,html body.erp-app:not(#\#) .live-dot{position:relative}
@media (prefers-reduced-motion:no-preference){
  html body.erp-app:not(#\#) .live-dot::after,html body.erp-app:not(#\#) .erp-live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ui-success);animation:uiPing 2s cubic-bezier(0,0,.2,1) infinite}
}
@keyframes uiPing{75%,100%{transform:scale(2.4);opacity:0}}
html body:not(#\#) .table-hover>tbody>tr>*{transition:background-color .12s ease}
/* Auto pager added under large tables */
html body.erp-app:not(#\#) .erp-auto-pager{display:flex!important;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:12px 20px!important;border:0!important;border-bottom:1px solid var(--ui-border)!important;background:var(--ui-card)!important}
html body.erp-app:not(#\#) .erp-auto-pager .filter-page-size{flex:0 0 110px;margin:0}
html body.erp-app:not(#\#) .erp-auto-pager .filter-page-size>span{display:block;margin:0 0 6px;font-size:12.5px!important;font-weight:500!important;color:var(--ui-muted)!important;text-transform:none!important;letter-spacing:0!important}
html body.erp-app:not(#\#) .erp-auto-pager .filter-count{flex:1 1 auto;align-self:center;margin:0!important;padding:0!important;background:transparent!important;color:var(--ui-muted)!important;font-size:13px!important;font-weight:500!important;min-height:0!important}
html body.erp-app:not(#\#) .erp-auto-pager .table-pager{display:flex!important;align-items:center;gap:6px;width:auto!important;margin-left:auto}
html body.erp-app:not(#\#) .erp-auto-pager .table-pager .btn{min-height:32px!important;font-size:13px!important;padding:0 10px!important}
@media(max-width:767.98px){html body.erp-app:not(#\#) .erp-auto-pager{padding:12px 16px!important}html body.erp-app:not(#\#) .erp-auto-pager .table-pager{width:100%!important;justify-content:space-between;margin:0}}
html body:not(#\#) .btn.warning,html body:not(#\#) .btn.btn-warning{background:var(--ui-warn-soft)!important;border:1px solid var(--ui-warn-border)!important;color:var(--ui-warn-text)!important}
html body:not(#\#) .btn.warning:hover,html body:not(#\#) .btn.btn-warning:hover{background:var(--ui-warn)!important;border-color:var(--ui-warn)!important;color:#fff!important}
html body:not(#\#) .btn.info,html body:not(#\#) .btn.btn-info,html body:not(#\#) .btn-outline-info{background:var(--ui-primary-soft)!important;border:1px solid var(--bs-primary-border-subtle)!important;color:var(--ui-primary-text)!important}
@media(max-width:767.98px){html body.erp-app:not(#\#) .monthly-kpis>div:last-child:nth-child(odd){grid-column:1/-1;border-right:0}html body.erp-app:not(#\#) .monthly-kpis>div:nth-child(even){border-right:0}}