/* ============================================================
   DOTUS ERP Design System
   Enterprise-grade flat UI for logistics/order management
   ============================================================ */

/* === 1. Design Tokens === */
:root {
  /* Sidebar */
  --sb-bg: #1e293b;
  --sb-bg-dark: #0f172a;
  --sb-text: #94a3b8;
  --sb-text-hover: #e2e8f0;
  --sb-text-active: #ffffff;
  --sb-hover: rgba(255,255,255,.06);
  --sb-active: rgba(59,130,246,.15);
  --sb-border: rgba(255,255,255,.08);
  --sb-w: 240px;
  --sb-wc: 64px;

  /* Topbar */
  --top-h: 50px;
  --top-bg: #ffffff;
  --top-border: #e2e8f0;

  /* Page */
  --body-bg: #f0f2f5;
  --content-bg: #ffffff;

  /* Semantic */
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --primary-light: rgba(59,130,246,.08);
  --success: #16a34a;
  --success-light: rgba(22,163,74,.08);
  --warning: #d97706;
  --warning-light: rgba(217,119,6,.08);
  --danger: #dc2626;
  --danger-light: rgba(220,38,38,.08);
  --info: #0891b2;

  /* Text */
  --text: #0f172a;
  --text-sub: #475569;
  --text-muted: #94a3b8;
  --text-light: #cbd5e1;

  /* Border & Shadow */
  --border: #e0e4ea;
  --border-light: #f0f2f5;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.07);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.10);

  /* Radius */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;

  /* Font */
  --font: "Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo",sans-serif;
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
}

/* === 2. Reset & Base === */
*,*::before,*::after { box-sizing:border-box; }
html,body {
  height:100%; margin:0;
  font-family:var(--font);
  font-size:13px;
  line-height:1.5;
  color:var(--text);
  background:var(--body-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; }

/* Custom scrollbar (Webkit) */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(148,163,184,.35); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(148,163,184,.55); }
* { scrollbar-width:thin; scrollbar-color:rgba(148,163,184,.35) transparent; }

/* Kill old decorative elements */
.bg-lines,.bg-pastel,.blob,.b1,.b2,.b3,#cardShield,#travelBg { display:none!important; }

/* === 3. App Shell (Grid Layout) === */
.erp-app {
  display:grid;
  grid-template-columns:var(--sb-w) 1fr;
  grid-template-rows:var(--top-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  height:100vh;
  overflow:hidden;
}
.erp-app.no-side {
  grid-template-columns:1fr;
  grid-template-areas:
    "topbar"
    "main";
}
.erp-app.sb-collapsed {
  grid-template-columns:var(--sb-wc) 1fr;
}
@media(max-width:768px){
  .erp-app {
    grid-template-columns:1fr;
    grid-template-areas:"topbar" "main";
  }
}

/* === 4. Sidebar === */
.erp-sidebar {
  grid-area:sidebar;
  background:var(--sb-bg);
  border-right:1px solid var(--sb-border);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.12) transparent;
}
.erp-sidebar::-webkit-scrollbar { width:4px; }
.erp-sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:4px; }

/* Brand block */
.erp-sb-brand {
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--sb-border);
  text-decoration:none!important;
  color:#fff;
  flex-shrink:0;
}
.erp-sb-brand:hover { text-decoration:none!important; }
.erp-sb-logo {
  width:32px; height:32px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.1);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
}
.erp-sb-logo img { width:100%; height:100%; object-fit:contain; padding:3px; }
.erp-sb-title { font-size:14px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.erp-sb-sub { font-size:10px; color:var(--text-muted); white-space:nowrap; }

/* Toggle */
.erp-sb-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  border:1px solid var(--sb-border);
  border-radius:var(--radius);
  background:transparent;
  color:var(--sb-text);
  cursor:pointer;
  font-size:14px;
  margin-left:auto;
  flex-shrink:0;
}
.erp-sb-toggle:hover { background:var(--sb-hover); color:var(--sb-text-hover); }

/* Nav */
.erp-sb-nav {
  flex:1;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.erp-sb-section {
  padding:12px 12px 4px;
  font-size:10px;
  font-weight:600;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.erp-sb-divider {
  height:1px;
  background:var(--sb-border);
  margin:6px 12px;
}
.erp-sb-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 12px;
  border-radius:var(--radius);
  text-decoration:none!important;
  color:var(--sb-text);
  font-size:13px;
  font-weight:500;
  transition:background .12s,color .12s;
  border:1px solid transparent;
  white-space:nowrap;
}
.erp-sb-item:hover {
  background:var(--sb-hover);
  color:var(--sb-text-hover);
  text-decoration:none!important;
}
.erp-sb-item.active {
  background:var(--sb-active);
  color:var(--sb-text-active);
  border-color:rgba(59,130,246,.25);
}
.erp-sb-icon {
  width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  opacity:.65;
  font-size:14px;
}
.erp-sb-item.active .erp-sb-icon { opacity:1; }
.erp-sb-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.erp-sb-badge {
  font-size:10px;
  padding:2px 6px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.08);
  color:var(--text-muted);
  font-weight:600;
  flex-shrink:0;
}
.erp-sb-badge.ez { background:rgba(56,189,248,.12); color:#7dd3fc; }
.erp-sb-badge.nv { background:rgba(74,222,128,.12); color:#86efac; }

/* User */
.erp-sb-user {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  font-size:12px;
  color:var(--sb-text);
}
.erp-sb-dot {
  width:7px; height:7px;
  border-radius:50%;
  background:var(--success);
  flex-shrink:0;
}

/* Footer & Logout */
.erp-sb-footer {
  margin-top:auto;
  padding:10px 8px;
  border-top:1px solid var(--sb-border);
  flex-shrink:0;
}
.erp-sb-logout {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  padding:7px;
  border-radius:var(--radius);
  text-decoration:none!important;
  font-weight:600;
  font-size:12px;
  color:var(--sb-text);
  background:rgba(255,255,255,.05);
  border:1px solid var(--sb-border);
  transition:background .12s,color .12s;
  cursor:pointer;
}
.erp-sb-logout:hover { background:rgba(220,38,38,.15); color:#fca5a5; text-decoration:none!important; }

/* Collapsed sidebar */
.sb-collapsed .erp-sb-title,
.sb-collapsed .erp-sb-sub,
.sb-collapsed .erp-sb-label,
.sb-collapsed .erp-sb-badge,
.sb-collapsed .erp-sb-section,
.sb-collapsed .erp-sb-user span:not(.erp-sb-dot) { display:none; }
.sb-collapsed .erp-sb-item { justify-content:center; padding:9px 0; }
.sb-collapsed .erp-sb-brand { justify-content:center; padding:14px 8px; gap:0; }
.sb-collapsed .erp-sb-footer { padding:10px 4px; }
.sb-collapsed .erp-sb-logout span { display:none; }

/* Mobile sidebar */
@media(max-width:768px){
  .erp-sidebar {
    position:fixed;
    left:-260px; top:0; bottom:0;
    width:240px;
    z-index:100;
    transition:left .2s ease;
    box-shadow:var(--shadow-lg);
  }
  .erp-sidebar.open { left:0; }
  .erp-sb-overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,.4);
    z-index:99;
    display:none;
  }
  .erp-sb-overlay.on { display:block; }
}

/* === 5. Topbar === */
.erp-topbar {
  grid-area:topbar;
  display:flex;
  align-items:center;
  gap:8px;
  height:var(--top-h);
  padding:0 20px;
  background:#ffffff;
  border-bottom:1px solid var(--border);
  min-width:0;
  position:relative;
  z-index:10;
}
.erp-tb-burger {
  display:none;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  cursor:pointer;
  color:var(--text-sub);
  font-size:16px;
  flex-shrink:0;
}
@media(max-width:768px){ .erp-tb-burger { display:inline-flex; } }

.erp-tb-title {
  font-size:14px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

.erp-tb-nav {
  display:flex;
  align-items:center;
  gap:2px;
  overflow:hidden;
  min-width:0;
  flex:1;
}
.erp-tb-link {
  display:inline-flex;
  align-items:center;
  padding:6px 14px;
  border-radius:20px;
  text-decoration:none!important;
  font-size:12px;
  font-weight:500;
  color:var(--text-sub);
  white-space:nowrap;
  transition:all .15s ease;
  border:1px solid transparent;
  letter-spacing:-.01em;
}
.erp-tb-link:hover {
  background:var(--primary-light);
  color:var(--primary);
  text-decoration:none!important;
}
.erp-tb-link.on {
  background:var(--primary);
  color:#fff;
  font-weight:600;
  border-color:var(--primary);
  box-shadow:0 2px 6px rgba(59,130,246,.25);
}
.erp-tb-link.disabled { opacity:.4; cursor:default; pointer-events:none; }

/* Overflow "More" menu */
.erp-tb-more-wrap { position:relative; margin-left:auto; flex-shrink:0; }
.erp-tb-more-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 12px;
  border:1px solid var(--border);
  border-radius:20px;
  background:#fff;
  font-size:12px;
  font-weight:500;
  color:var(--text-sub);
  cursor:pointer;
  transition:all .15s ease;
}
.erp-tb-more-btn:hover { background:var(--primary-light); color:var(--primary); border-color:rgba(59,130,246,.2); }
.erp-tb-more-panel {
  display:none;
  position:absolute;
  right:0; top:calc(100% + 4px);
  min-width:160px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  padding:4px;
  z-index:50;
}
.erp-tb-more-panel.on { display:block; }
.erp-tb-more-panel a {
  display:block;
  padding:6px 10px;
  border-radius:var(--radius);
  font-size:12px;
  font-weight:500;
  color:var(--text-sub);
  text-decoration:none!important;
}
.erp-tb-more-panel a:hover { background:#f4f5f7; color:var(--text); }
.erp-tb-more-panel a.disabled { opacity:.45; cursor:default; }

.erp-tb-right {
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  flex-shrink:0;
}
.erp-tb-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px;
  font-size:11px;
  color:var(--text-sub);
  background:var(--border-light);
  border:1px solid var(--border);
  border-radius:var(--radius);
}

/* === 6. Main Content === */
.erp-main {
  grid-area:main;
  overflow-y:auto;
  overflow-x:hidden;
  padding:20px;
  background:var(--body-bg);
  min-width:0;
}

/* === 7. Cards === */
.erp-card {
  background:var(--content-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.erp-card+.erp-card { margin-top:12px; }

.erp-card-header,.erp-card-hd {
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#f8f9fb;
}
.erp-card-title { font-size:13px; font-weight:600; color:var(--text); letter-spacing:-.01em; }
.erp-card-sub { font-size:11px; color:var(--text-muted); margin-top:1px; }
.erp-card-body { padding:16px; }
.erp-card-body.compact { padding:12px; }
.erp-card-body.flush { padding:0; }

/* === 8. Tables === */
.erp-tbl-wrap { overflow-x:auto; }
.erp-tbl {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.erp-tbl th {
  position:sticky; top:0; z-index:2;
  background:#f4f5f7;
  text-align:left;
  font-size:11px;
  font-weight:600;
  color:var(--text-sub);
  padding:8px 10px;
  border-bottom:2px solid var(--border);
  white-space:nowrap;
  letter-spacing:.02em;
  text-transform:none;
}
.erp-tbl td {
  padding:7px 10px;
  border-bottom:1px solid var(--border-light);
  font-size:12px;
  color:var(--text);
  vertical-align:top;
}
.erp-tbl tbody tr:nth-child(even) { background:#fafbfc; }
.erp-tbl tbody tr:hover { background:rgba(59,130,246,.04); }
.erp-tbl tbody tr { transition:background .1s; }
.erp-tbl .total-row td { font-weight:700; background:#f4f5f7; border-top:2px solid var(--border); }
.erp-tbl .text-right { text-align:right; }
.erp-tbl .text-center { text-align:center; }
.erp-tbl .nowrap { white-space:nowrap; }

/* === 9. Buttons === */
.erp-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:7px 14px;
  height:34px;
  border:1px solid #d1d5db;
  border-radius:var(--radius);
  background:#ffffff;
  color:var(--text);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:all .15s ease;
  font-family:var(--font);
  line-height:1.4;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.erp-btn:hover { background:#f4f5f7; border-color:#94a3b8; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.erp-btn:active { background:#eceef2; box-shadow:inset 0 1px 2px rgba(0,0,0,.06); transform:translateY(0); }
.erp-btn:disabled,.erp-btn.disabled { opacity:.5; cursor:not-allowed; pointer-events:none; box-shadow:none; }

.erp-btn.primary {
  background:linear-gradient(180deg,#3b82f6,#2563eb);
  color:#fff;
  border-color:var(--primary-hover);
  box-shadow:0 1px 3px rgba(37,99,235,.25);
}
.erp-btn.primary:hover { background:linear-gradient(180deg,#60a5fa,#3b82f6); box-shadow:0 2px 6px rgba(37,99,235,.3); }
.erp-btn.primary:active { background:#2563eb; box-shadow:inset 0 1px 3px rgba(0,0,0,.2); }

.erp-btn.danger {
  background:linear-gradient(180deg,#ef4444,#dc2626);
  color:#fff;
  border-color:#dc2626;
  box-shadow:0 1px 3px rgba(220,38,38,.2);
}
.erp-btn.danger:hover { background:linear-gradient(180deg,#f87171,#ef4444); box-shadow:0 2px 6px rgba(220,38,38,.25); }

.erp-btn.success {
  background:linear-gradient(180deg,#22c55e,#16a34a);
  color:#fff;
  border-color:var(--success);
  box-shadow:0 1px 3px rgba(22,163,74,.2);
}
.erp-btn.success:hover { background:linear-gradient(180deg,#4ade80,#22c55e); box-shadow:0 2px 6px rgba(22,163,74,.25); }

.erp-btn.outline {
  background:transparent;
  color:var(--primary);
  border-color:var(--primary);
  box-shadow:none;
}
.erp-btn.outline:hover {
  background:var(--primary);
  color:#fff;
  box-shadow:0 1px 3px rgba(37,99,235,.25);
}

.erp-btn.ghost {
  background:transparent;
  color:var(--text-sub);
  border-color:transparent;
  box-shadow:none;
}
.erp-btn.ghost:hover { background:#f4f5f7; color:var(--text); }

.erp-btn.sm { padding:4px 10px; height:28px; font-size:12px; }
.erp-btn.lg { padding:9px 20px; height:40px; font-size:14px; font-weight:600; }
.erp-btn.block { width:100%; }

/* === 10. Form Controls === */
.erp-input,.erp-select,.erp-textarea {
  width:100%;
  padding:7px 11px;
  height:34px;
  border:1px solid #d1d5db;
  border-radius:var(--radius);
  background:#ffffff;
  font-size:13px;
  font-family:var(--font);
  color:var(--text);
  outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.03);
}
.erp-textarea { min-height:80px; height:auto; resize:vertical; }
.erp-select { padding-right:28px; cursor:pointer; appearance:auto; }
.erp-input::placeholder,.erp-textarea::placeholder { color:var(--text-light); font-weight:400; }
.erp-input:hover,.erp-select:hover,.erp-textarea:hover {
  border-color:#94a3b8;
  background:#fff;
}
.erp-input:focus,.erp-select:focus,.erp-textarea:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(59,130,246,.12),inset 0 1px 2px rgba(0,0,0,.04);
  background:#fff;
  outline:none;
}
.erp-input:disabled,.erp-select:disabled,.erp-textarea:disabled {
  background:#f4f5f7;
  color:var(--text-muted);
  cursor:not-allowed;
  box-shadow:none;
}
.erp-input:read-only {
  background:#f8f9fb;
  color:var(--text-sub);
  box-shadow:none;
}

.erp-label {
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--text-sub);
  margin-bottom:4px;
  letter-spacing:.02em;
}
.erp-field { margin-bottom:14px; }
.erp-field:last-child { margin-bottom:0; }

/* Inline field layout (label + input side by side) */
.erp-field-inline {
  display:flex;
  align-items:center;
  gap:8px;
}
.erp-field-inline .erp-label { margin-bottom:0; white-space:nowrap; }

input[type="date"].erp-input { padding:5px 10px; }
input[type="number"].erp-input { font-variant-numeric:tabular-nums; }

/* === 11. Badges === */
.erp-badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:var(--radius-sm);
  font-size:11px;
  font-weight:500;
  background:var(--border-light);
  color:var(--text-sub);
  border:1px solid var(--border);
  white-space:nowrap;
}
.erp-badge.success { background:var(--success-light); color:var(--success); border-color:rgba(22,163,74,.15); }
.erp-badge.warning { background:var(--warning-light); color:var(--warning); border-color:rgba(217,119,6,.15); }
.erp-badge.danger  { background:var(--danger-light);  color:var(--danger);  border-color:rgba(220,38,38,.15); }
.erp-badge.primary { background:var(--primary-light); color:var(--primary); border-color:rgba(59,130,246,.15); }
.erp-badge.pill { border-radius:999px; }

/* === 12. Modals === */
.erp-modal-bg {
  position:fixed; inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:9999;
  background:rgba(15,23,42,.5);
}
.erp-modal-bg.on { display:flex; }

.erp-modal {
  width:min(560px,100%);
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  max-height:90vh;
  display:flex;
  flex-direction:column;
}
.erp-modal.wide { width:min(800px,100%); }

.erp-modal-hd {
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-shrink:0;
}
.erp-modal-title { font-size:14px; font-weight:600; }
.erp-modal-close {
  width:28px; height:28px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  color:var(--text-sub);
  transition:background .12s;
}
.erp-modal-close:hover { background:#f4f5f7; }
.erp-modal-bd { padding:16px; overflow-y:auto; }
.erp-modal-ft {
  padding:10px 16px;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-shrink:0;
}

/* === 13. Flash/Alerts === */
.erp-flash {
  display:flex;
  gap:8px;
  align-items:flex-start;
  border-radius:var(--radius);
  padding:10px 12px;
  margin-bottom:12px;
  font-size:13px;
  border:1px solid var(--border);
  background:var(--border-light);
}
.erp-flash.success { border-color:rgba(22,163,74,.2); background:var(--success-light); }
.erp-flash.error   { border-color:rgba(220,38,38,.2); background:var(--danger-light); }
.erp-flash.warning { border-color:rgba(217,119,6,.2); background:var(--warning-light); }
.erp-flash-icon {
  width:20px; height:20px;
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
  flex-shrink:0;
}
.erp-flash.success .erp-flash-icon { background:rgba(22,163,74,.15); color:var(--success); }
.erp-flash.error .erp-flash-icon   { background:rgba(220,38,38,.15); color:var(--danger); }

/* === 14. Pagination === */
.erp-pager {
  display:flex;
  align-items:center;
  gap:3px;
  margin-top:12px;
  flex-wrap:wrap;
}
.erp-pager a,.erp-pager span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px; height:28px;
  padding:0 6px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
  text-decoration:none!important;
  color:var(--text-sub);
  font-weight:500;
}
.erp-pager a:hover { background:#f4f5f7; color:var(--text); }
.erp-pager .on,.erp-pager .active {
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

/* === 15. Accordion === */
.erp-acc {
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#fff;
}
.erp-acc+.erp-acc { margin-top:8px; }
.erp-acc-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 14px;
  background:#f4f5f7;
  border:0;
  cursor:pointer;
  width:100%;
  text-align:left;
  font-weight:600;
  font-size:13px;
  color:var(--text);
  font-family:var(--font);
  transition:background .12s;
}
.erp-acc-head:hover { background:#eceef2; }
.erp-acc-head:active { background:#e4e6eb; }
.erp-acc-arrow {
  width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease;
  color:var(--text-muted);
  flex-shrink:0;
  font-size:12px;
}
.erp-acc.open .erp-acc-arrow { transform:rotate(180deg); }
.erp-acc-body { padding:12px 14px; display:none; }
.erp-acc.open .erp-acc-body { display:block; }

/* === 16. Filter Bar === */
.erp-filters {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-end;
  padding:12px 16px;
  background:#f8f9fb;
  border-bottom:1px solid var(--border);
}
.erp-filter-group { display:flex; flex-direction:column; gap:3px; }
.erp-filter-group .erp-label { margin-bottom:0; }
.erp-filter-actions { display:flex; gap:6px; align-items:flex-end; margin-left:auto; }

/* Quick date chips */
.erp-chip {
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  font-size:11px;
  font-weight:500;
  color:var(--text-sub);
  cursor:pointer;
  transition:background .12s,border-color .12s;
  text-decoration:none!important;
  white-space:nowrap;
}
.erp-chip:hover { background:#f4f5f7; border-color:#cbd5e1; }
.erp-chip.on,.erp-chip.active {
  background:var(--primary-light);
  border-color:rgba(59,130,246,.25);
  color:var(--primary);
  font-weight:600;
}

/* === 17. KPI / Stat Cards === */
.erp-kpi-row {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin-bottom:16px;
}
.erp-kpi {
  background:var(--content-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:14px 16px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .15s,transform .15s;
}
.erp-kpi:hover { box-shadow:var(--shadow); transform:translateY(-1px); }
.erp-kpi-label {
  font-size:11px;
  font-weight:600;
  color:var(--text-muted);
}
.erp-kpi-value {
  margin-top:4px;
  font-size:20px;
  font-weight:700;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.erp-kpi-sub { font-size:11px; color:var(--text-muted); margin-top:2px; }
.erp-kpi.border-primary { border-left:3px solid var(--primary); }
.erp-kpi.border-success { border-left:3px solid var(--success); }
.erp-kpi.border-warning { border-left:3px solid var(--warning); }
.erp-kpi.border-danger  { border-left:3px solid var(--danger); }

/* === 18. Select2 Overrides === */
.select2-container * { font-family:var(--font)!important; }
.select2-container--default .select2-selection--single {
  height:34px;
  border-radius:var(--radius)!important;
  border:1px solid #d1d5db!important;
  background:#ffffff!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.03)!important;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.select2-container--default .select2-selection--single:hover {
  border-color:#94a3b8!important;
  background:#ffffff!important;
}
.select2-container--default.select2-container--open .select2-selection--single {
  border-color:var(--primary)!important;
  box-shadow:0 0 0 3px rgba(59,130,246,.12),inset 0 1px 2px rgba(0,0,0,.04)!important;
  background:#fff!important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height:32px;
  color:var(--text);
  padding-left:11px;
  font-size:13px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height:32px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color:var(--text-light); }
.select2-dropdown {
  border-radius:var(--radius-lg)!important;
  border:1px solid var(--border)!important;
  box-shadow:var(--shadow-md)!important;
  overflow:hidden;
}
.select2-container--default .select2-results__option {
  padding:7px 11px;
  font-size:13px;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background:var(--primary-light)!important;
  color:var(--text)!important;
}
.select2-container--default .select2-results__option--selected {
  background:#f4f5f7!important;
  font-weight:500;
}
.select2-container--default .select2-selection--multiple {
  min-height:34px;
  border-radius:var(--radius)!important;
  border:1px solid #d1d5db!important;
  background:#ffffff!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.03)!important;
  padding:2px 6px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border-radius:var(--radius-sm)!important;
  border:1px solid var(--border)!important;
  background:#eceef2!important;
  color:var(--text)!important;
  font-weight:500;
  font-size:12px;
  padding:1px 6px;
  margin:2px 4px 0 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color:var(--text-muted)!important;
  margin-right:4px;
}
.select2-search--inline .select2-search__field { font-size:13px!important; }
.select2-search--dropdown .select2-search__field {
  padding:7px 11px;
  border:1px solid #d1d5db!important;
  border-radius:var(--radius)!important;
  font-size:13px;
}

/* === 19. Loading Spinner === */
.erp-loading-bg {
  position:fixed; inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.35);
  z-index:99999;
}
.erp-loading-bg.on { display:flex; }
.erp-loading-box {
  background:#fff;
  border-radius:var(--radius-lg);
  padding:24px 32px;
  text-align:center;
  box-shadow:var(--shadow-lg);
}
.erp-spinner {
  width:28px; height:28px;
  border:3px solid var(--border);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:erp-spin .6s linear infinite;
  margin:0 auto 10px;
}
@keyframes erp-spin { to { transform:rotate(360deg); } }
.erp-loading-msg { font-size:13px; color:var(--text-sub); font-weight:500; }

/* === 20. Login Page === */
.erp-login-page {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--body-bg);
  padding:16px;
}
.erp-login-card {
  width:min(400px,100%);
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.erp-login-header {
  padding:28px 28px 16px;
  text-align:center;
  border-bottom:1px solid var(--border);
  background:#f8f9fb;
}
.erp-login-header img { height:28px; }
.erp-login-header .sub { font-size:11px; color:var(--text-muted); margin-top:8px; }
.erp-login-body { padding:24px 28px; }
.erp-login-body .erp-field { margin-bottom:14px; }
.erp-login-body .erp-input { padding:9px 12px; height:40px; font-size:14px; }
.erp-login-error {
  display:flex; gap:8px; align-items:flex-start;
  border:1px solid rgba(220,38,38,.25);
  background:var(--danger-light);
  color:#991b1b;
  padding:10px 12px;
  border-radius:var(--radius);
  margin-bottom:14px;
  font-size:13px;
}

/* === 21. Dashboard === */
.erp-dash-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
@media(max-width:980px){ .erp-dash-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .erp-dash-grid { grid-template-columns:1fr; } }

.erp-menu-card {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  text-decoration:none!important;
  color:inherit;
  box-shadow:var(--shadow-sm);
  transition:all .18s ease;
}
.erp-menu-card:hover { border-color:var(--primary); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.erp-menu-card.disabled { opacity:.5; cursor:default; }
.erp-menu-card.disabled:hover { border-color:var(--border); box-shadow:var(--shadow-sm); transform:none; }
.erp-menu-card.enabled { border-left:3px solid var(--primary); }
.erp-menu-card .mc-icon {
  width:36px; height:36px;
  border-radius:var(--radius);
  background:var(--primary-light);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
}
.erp-menu-card .mc-title { font-size:14px; font-weight:600; }
.erp-menu-card .mc-desc { font-size:12px; color:var(--text-muted); }
.erp-menu-card .mc-badge {
  display:inline-flex;
  padding:2px 6px;
  border-radius:var(--radius-sm);
  font-size:10px;
  font-weight:600;
  background:var(--warning-light);
  color:var(--warning);
  align-self:flex-start;
}

/* === 22. Full-height Page Layout === */
.erp-wrap.fill {
  display:flex;
  flex-direction:column;
  height:calc(100vh - var(--top-h) - 32px);
}
.erp-wrap.fill > .erp-card {
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.erp-wrap.fill > .erp-card > .erp-card-body {
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
.erp-wrap.fill .erp-tbl-wrap {
  flex:1;
  overflow:auto;
  min-height:0;
}
.erp-wrap.fill .erp-tbl thead th {
  position:sticky;
  top:0;
  z-index:2;
  background:#f4f5f7;
  box-shadow:inset 0 -1px 0 var(--border);
}

/* === 23. Utilities === */
.erp-wrap { max-width:100%; padding:4px 8px; }
.erp-wrap.narrow { max-width:1100px; margin:0 auto; }

.erp-grid { display:grid; gap:12px; }
.erp-grid-2 { grid-template-columns:repeat(2,1fr); }
.erp-grid-3 { grid-template-columns:repeat(3,1fr); }
.erp-grid-4 { grid-template-columns:repeat(4,1fr); }
.erp-grid-full { grid-column:1/-1; }
@media(max-width:768px){ .erp-grid-2,.erp-grid-3,.erp-grid-4 { grid-template-columns:1fr; } }

.erp-flex { display:flex; gap:8px; align-items:center; }
.erp-flex-between { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.erp-flex-wrap { flex-wrap:wrap; }

.erp-ml-auto { margin-left:auto; }
.erp-mr-auto { margin-right:auto; }
.erp-mt-0  { margin-top:0; }
.erp-mt-4  { margin-top:4px; }
.erp-mt-8  { margin-top:8px; }
.erp-mt-12 { margin-top:12px; }
.erp-mt-16 { margin-top:16px; }
.erp-mb-8  { margin-bottom:8px; }
.erp-mb-12 { margin-bottom:12px; }
.erp-mb-16 { margin-bottom:16px; }
.erp-p-0   { padding:0; }

.erp-text-muted { color:var(--text-muted); }
.erp-text-sub   { color:var(--text-sub); }
.erp-text-sm    { font-size:12px; }
.erp-text-xs    { font-size:11px; }
.erp-text-right { text-align:right; }
.erp-text-center { text-align:center; }
.erp-fw-600 { font-weight:600; }
.erp-fw-700 { font-weight:700; }
.erp-mono   { font-family:var(--font-mono); font-size:12px; }

.erp-hr { height:1px; background:var(--border); margin:12px 0; border:0; }

.erp-hidden { display:none!important; }
.erp-sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Semantic text */
.text-ok,.text-success { color:var(--success); }
.text-warn,.text-warning { color:var(--warning); }
.text-bad,.text-danger { color:var(--danger); }
.text-info { color:var(--info); }
.text-muted { color:var(--text-muted); }

/* Summary badges (used in order pages for counts) */
.erp-summary-badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#ffffff;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
  color:var(--text-sub);
}
.erp-summary-badge .val { font-weight:700; color:var(--primary); }

/* Distribution bars / pills for filter categories */
.erp-dist-btn {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  font-size:12px;
  cursor:pointer;
  transition:border-color .12s;
  text-decoration:none!important;
  color:var(--text);
}
.erp-dist-btn:hover { border-color:var(--primary); }

/* Page hero / header section */
.erp-page-header {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.erp-page-title { font-size:18px; font-weight:700; color:var(--text); }
.erp-page-sub { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* Scroll shadow for tables */
.erp-tbl-wrap {
  position:relative;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:#fff;
}
.erp-tbl-wrap .erp-tbl th:first-child { border-top-left-radius:var(--radius-lg); }
.erp-tbl-wrap .erp-tbl th:last-child { border-top-right-radius:var(--radius-lg); }

/* File upload area */
.erp-upload-area {
  width:100%;
  padding:16px;
  border:2px dashed var(--border);
  border-radius:var(--radius-lg);
  background:var(--border-light);
  text-align:center;
  cursor:pointer;
  transition:border-color .12s;
}
.erp-upload-area:hover { border-color:var(--primary); }
.erp-upload-area input[type=file] {
  width:100%; padding:8px;
  border:none; background:transparent;
}

/* Status message box */
.erp-msg {
  padding:12px 14px;
  border-radius:var(--radius);
  background:var(--border-light);
  border:1px solid var(--border);
  font-size:13px;
  white-space:pre-wrap;
}
.erp-msg.ok   { border-color:rgba(22,163,74,.25); background:var(--success-light); }
.erp-msg.err  { border-color:rgba(220,38,38,.25); background:var(--danger-light); color:#991b1b; }
.erp-msg.warn { border-color:rgba(217,119,6,.25); background:var(--warning-light); }

/* Stock number formatting */
.erp-stock-cell { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.erp-stock-num { font-weight:700; font-variant-numeric:tabular-nums; text-align:right; min-width:60px; }

/* Debug modal */
.erp-dbg-pre {
  font-family:var(--font-mono);
  font-size:12px;
  white-space:pre-wrap;
  background:var(--border-light);
  padding:12px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  max-height:60vh;
  overflow:auto;
}

/* Code inline */
code {
  padding:2px 5px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--border-light);
  font-family:var(--font-mono);
  font-size:12px;
}

/* ============================================================
   MOBILE RESPONSIVE (max-width: 768px)
   ============================================================ */
@media(max-width:768px){

  /* --- App Shell --- */
  :root {
    --top-h:48px;
  }

  /* --- Topbar: hide nav, clean mobile header --- */
  .erp-topbar {
    padding:0 12px;
    gap:6px;
  }
  .erp-topbar::after { height:2px; opacity:.5; }
  .erp-tb-nav { display:none; }
  .erp-tb-more-wrap { display:none!important; }
  .erp-tb-burger {
    display:inline-flex;
    width:36px; height:36px;
  }

  /* --- Sidebar: full overlay mobile drawer --- */
  .erp-sidebar {
    position:fixed;
    left:-280px; top:0; bottom:0;
    width:260px;
    z-index:200;
    transition:left .25s cubic-bezier(.4,0,.2,1);
    box-shadow:none;
  }
  .erp-sidebar.open {
    left:0;
    box-shadow:4px 0 24px rgba(0,0,0,.2);
  }
  .erp-sb-overlay {
    position:fixed; inset:0;
    background:rgba(15,23,42,.45);
    z-index:199;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s,visibility .25s;
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
  }
  .erp-sb-overlay.on {
    opacity:1;
    visibility:visible;
  }

  /* --- Main Content: more breathing room --- */
  .erp-main {
    padding:10px;
  }

  /* --- Cards: mobile spacing --- */
  .erp-card { border-radius:var(--radius); }
  .erp-card-header,.erp-card-hd { padding:10px 12px; }
  .erp-card-body { padding:12px; }

  /* --- Tables: compact mobile --- */
  .erp-tbl th { padding:6px 8px; font-size:10px; }
  .erp-tbl td { padding:6px 8px; font-size:11px; }
  .erp-tbl-wrap { border-radius:var(--radius); }

  /* --- Buttons: bigger touch targets --- */
  .erp-btn {
    padding:8px 14px;
    height:38px;
    font-size:13px;
  }
  .erp-btn.sm { padding:6px 10px; height:32px; font-size:12px; }
  .erp-btn.lg { padding:10px 20px; height:44px; }

  /* --- Forms: full width, bigger touch --- */
  .erp-input,.erp-select,.erp-textarea {
    padding:8px 11px;
    height:38px;
    font-size:16px; /* prevent iOS zoom (must be >=16px) */
  }
  .erp-textarea { height:auto; }

  /* --- Filters: stack vertically --- */
  .erp-filters {
    flex-direction:column;
    align-items:stretch;
    padding:10px 12px;
    gap:10px;
  }
  .erp-filter-group { width:100%; }
  .erp-filter-group .erp-input,
  .erp-filter-group .erp-select,
  .erp-filter-group select { width:100%!important; }
  .erp-filter-actions {
    width:100%;
    margin-left:0;
    display:flex;
    gap:8px;
  }
  .erp-filter-actions .erp-btn { flex:1; justify-content:center; }

  /* --- Accordion: mobile spacing --- */
  .erp-acc-head { padding:10px 12px; font-size:13px; }
  .erp-acc-body { padding:10px 12px; }

  /* --- KPI: 2-column on mobile --- */
  .erp-kpi-row {
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }
  .erp-kpi { padding:10px 12px; }
  .erp-kpi-value { font-size:16px; }
  .erp-kpi:hover { transform:none; }

  /* --- Pagination: bigger touch area --- */
  .erp-pager { gap:4px; }
  .erp-pager a,.erp-pager span {
    min-width:32px;
    height:32px;
    font-size:12px;
  }

  /* --- Summary badges: compact --- */
  .erp-summary-badge { font-size:11px; padding:3px 8px; }

  /* --- Chips: bigger touch --- */
  .erp-chip { padding:6px 12px; font-size:12px; }

  /* --- Dashboard grid --- */
  .erp-dash-grid { grid-template-columns:1fr; gap:8px; }

  /* --- Full-height layout: disable on mobile --- */
  .erp-wrap.fill { height:auto; }
  .erp-wrap.fill > .erp-card > .erp-card-body { overflow:visible; }
  .erp-wrap.fill .erp-tbl-wrap { flex:none; overflow-x:auto; }

  /* --- Modals: full width on mobile --- */
  .erp-modal { width:calc(100vw - 24px); max-height:85vh; }
  .erp-modal.wide { width:calc(100vw - 24px); }
  .erp-modal-hd { padding:10px 12px; }
  .erp-modal-bd { padding:12px; }

  /* --- Misc mobile --- */
  .erp-flex-between { flex-direction:column; align-items:stretch; }
  .erp-page-header { flex-direction:column; gap:8px; }
  .erp-dist-btn { font-size:11px; padding:4px 8px; }

  /* Select2 mobile fix */
  .select2-container { width:100%!important; }
}

/* Small phone (max-width: 420px) */
@media(max-width:420px){
  .erp-kpi-row { grid-template-columns:1fr; }
  .erp-main { padding:8px; }
  .erp-card-body { padding:10px; }
}

/* Print */
@media print {
  .erp-sidebar,.erp-topbar,.erp-sb-overlay { display:none!important; }
  .erp-app { display:block; }
  .erp-main { padding:0; overflow:visible; }
}