:root {
  /* Theme tokens: Gombactronz Solutions — Dark technical */
  --vp-void:      #0A0E1A;
  --vp-panel:     #111827;
  --vp-surface:   #1A2235;
  --vp-border:    #1E2A3A;

  --vp-snow:      #E8EDF5;
  --vp-muted:     #8892A4;

  --vp-cyan:      #00D8FF;
  --vp-cyan-dim:  #0099BB;
  --vp-phosphor:  #39D98A;
  --vp-alert:     #FF5B5B;
  --vp-amber:     #F5A623;

  --vp-font-ui:   Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --vp-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --vp-radius-sm: 5px;
  --vp-radius-md: 8px;
  --vp-radius-lg: 12px;

  --vp-border-default: 0.5px solid var(--vp-border);
  --vp-border-subtle:  0.5px solid rgba(30,42,58,0.6);
  /* Compatibility tokens used across legacy styles */
  --vp-blue: #1D4ED8;
  --vp-red: #EF4444;
  --vp-green: #16A34A;
  --vp-text-nav: var(--vp-snow);
}

*{box-sizing:border-box;margin:0;padding:0}
html, body {height:100%;}
body{font-family:var(--vp-font-ui);background:var(--vp-void);color:var(--vp-snow);}
button,input,select,textarea{font:inherit}
button{border:none}
.button, a.button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:#1D4ED8;color:#fff;border-radius:12px;text-decoration:none;box-shadow:0 12px 24px rgba(15,23,42,.08);cursor:pointer}
.button:hover,a.button:hover{background:#1e40af}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.table-wrapper{overflow-x:auto;background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);padding:12px}
.app{display:flex;min-height:100vh;overflow:hidden}
.sidebar{position:sticky;top:0;align-self:flex-start;min-height:100vh}
.main{flex:1;display:flex;flex-direction:column;min-height:100vh;overflow:hidden}
.content{flex:1;overflow-y:auto;padding:24px}
table{width:100%;border-collapse:collapse}
thead tr{background:rgba(15,23,42,.04)}
th,td{padding:12px 10px;text-align:left;border-bottom:1px solid rgba(15,23,42,.08)}
th{font-size:12px;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em}
.flash-container{position:fixed;top:18px;right:18px;display:flex;flex-direction:column;gap:10px;z-index:50}
.flash-message{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:14px;min-width:280px;box-shadow:0 15px 35px rgba(15,23,42,.12);font-size:13px}
.flash-message.success{background:#ecfdf5;color:#166534;border:1px solid #bbf7d0}
.flash-message.warning{background:#fffbeb;color:#b45309;border:1px solid #fde68a}
.flash-message.danger, .flash-message.error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.flash-message.info{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.flash-message .close-btn{background:transparent;border:none;color:inherit;font-size:16px;cursor:pointer;line-height:1}
.search-form{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.search-form label{flex:1;min-width:220px}
.search-form input{width:100%;padding:10px 12px;border:1px solid var(--color-border-tertiary);border-radius:12px;background:var(--color-background-secondary)}
.search-form button{margin-top:4px}
.sidebar{width:220px;flex-shrink:0;background:var(--vp-navy);border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;padding:0}
/* sidebar uses theme panel background */
.sidebar{width:220px;flex-shrink:0;background:var(--vp-panel);border-right:1px solid var(--vp-border);display:flex;flex-direction:column;padding:0}
.logo{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.logo-mark{display:flex;align-items:center;gap:10px}
.logo-icon{width:32px;height:32px;background:#1D4ED8;border-radius:8px;display:flex;align-items:center;justify-content:center}
.logo-icon i{color:#fff;font-size:18px}
.logo-text{font-size:15px;font-weight:500;color:var(--color-text-primary)}
.logo-sub{font-size:11px;color:var(--color-text-tertiary);margin-top:1px}
nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:2px}
nav-section{font-size:10px;font-weight:500;color:var(--vp-muted);letter-spacing:.08em;text-transform:uppercase;padding:10px 8px 4px}
nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--border-radius-md);font-size:13.5px;color:var(--vp-text-nav);cursor:pointer;transition:background .12s,color .12s;text-decoration:none}
nav-item:hover{background:rgba(255,255,255,0.03);color:var(--vp-snow)}
.nav-item.active{background:rgba(247,201,72,.12);color:var(--vp-amber);font-weight:500;border-left:4px solid var(--vp-amber)}
.nav-item i{font-size:17px;flex-shrink:0}
.nav-item .badge{margin-left:auto;background:var(--vp-red);color:#fff;font-size:10px;border-radius:99px;padding:1px 6px;font-weight:500}
.nav-bottom{padding:12px 10px;border-top:1px solid rgba(255,255,255,.08)}
/* Override common Tailwind utilities inside the themed sidebar for better contrast */
.sidebar .text-gray-400{color:var(--vp-muted) !important}
.sidebar a{color:var(--vp-snow) !important;background:transparent !important}
.sidebar a:hover{background:rgba(255,255,255,0.03) !important;color:var(--vp-snow) !important}
.sidebar .ml-2.inline-block.bg-red-100{background:rgba(255,91,91,0.12) !important;color:var(--vp-alert) !important}
.sidebar .ml-2.inline-block.bg-blue-100{background:rgba(0,216,255,0.08) !important;color:var(--vp-cyan) !important}
.sidebar .logo-text{color:var(--vp-snow) !important}
.sidebar .logo-sub{color:var(--vp-muted) !important}
.sidebar .text-xs{color:var(--vp-muted) !important}
.sidebar .rounded{border-radius:8px}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{background:var(--color-background-secondary);border-bottom:1px solid rgba(15,23,42,.08);padding:0 24px;height:56px;display:flex;align-items:center;gap:12px;flex-shrink:0}
  /* topbar uses theme surface */
.topbar{background:var(--vp-surface);border-bottom:0.5px solid var(--vp-border);padding:0 24px;height:56px;display:flex;align-items:center;gap:12px;flex-shrink:0;color:var(--vp-snow)}
.search-wrap{flex:1;max-width:400px;position:relative}
.search-wrap i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--color-text-tertiary);font-size:16px}
.search-wrap input{width:100%;padding:7px 12px 7px 34px;border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);background:var(--color-background-secondary);font-size:13px;color:var(--color-text-primary);outline:none}
.scan-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);font-size:13px;background:transparent;color:var(--color-text-secondary);cursor:pointer}
.scan-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--vp-radius-md);font-size:13px;cursor:pointer}
.scan-btn i{font-size:16px}
.pay-btn{display:flex;align-items:center;gap:6px;padding:7px 16px;background:#1D4ED8;border:none;border-radius:var(--border-radius-md);font-size:13px;color:#fff;cursor:pointer;font-weight:500}
.pay-btn{display:flex;align-items:center;gap:6px;padding:7px 16px;border-radius:var(--vp-radius-md);font-size:13px;color:var(--vp-void);font-weight:500}

/* Themed buttons */
.vp-scan-btn{background:var(--vp-cyan);color:var(--vp-void);border:1px solid rgba(0,0,0,0.06)}
.vp-scan-btn:hover{background:var(--vp-cyan-dim)}
.vp-newsale-btn{background:var(--vp-phosphor);color:var(--vp-void)}
.vp-newsale-btn:hover{opacity:0.95}
.vp-logout-btn{background:transparent;color:var(--vp-alert);border:1px solid transparent}
.vp-logout-btn:hover{background:rgba(255,91,91,0.06)}

/* Avatar styling */
.avatar{width:32px;height:32px;border-radius:50%;background:var(--vp-panel);border:1px solid var(--vp-border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;color:var(--vp-muted);flex-shrink:0}
.pay-btn i{font-size:16px}
.topbar-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.avatar{width:32px;height:32px;border-radius:50%;background:#1D4ED8;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;color:#fff;flex-shrink:0}
.content{flex:1;overflow-y:auto;padding:24px}
.page-title{font-size:18px;font-weight:500;margin-bottom:4px}
.page-sub{font-size:13px;color:var(--color-text-secondary);margin-bottom:24px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.kpi{background:var(--color-background-secondary);border:0.5px solid rgba(15,23,42,.08);border-radius:var(--border-radius-lg);padding:16px}
.kpi-label{font-size:12px;color:var(--color-text-secondary);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.kpi-label i{font-size:15px}
.kpi-val{font-size:22px;font-family:var(--font-mono);color:var(--vp-amber);font-weight:500;margin-bottom:4px}
.kpi-delta{font-size:12px;display:flex;align-items:center;gap:3px}
.kpi-delta.up{color:var(--vp-green)}
.kpi-delta.down{color:var(--vp-red)}
.row2{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:16px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px}
.card{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);padding:18px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card-title{font-size:13.5px;font-weight:500}
.card-action{font-size:12px;color:#1D4ED8;cursor:pointer}
.chart-area{width:100%;height:130px;position:relative}
svg.chart{width:100%;height:100%}
.part-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:0.5px solid var(--color-border-tertiary)}
.part-row:last-child{border-bottom:none}
.part-num{font-size:12px;font-weight:500;font-family:var(--font-mono);color:var(--vp-blue);width:110px;flex-shrink:0}
.part-desc{font-size:12px;color:var(--color-text-secondary);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.part-qty{font-size:12px;font-weight:500;width:36px;text-align:right;flex-shrink:0}
.part-bar-wrap{width:60px;flex-shrink:0}
.part-bar{height:4px;background:#1D4ED8;border-radius:99px;opacity:.8}
.stock-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:0.5px solid var(--color-border-tertiary);font-size:12px}
.stock-row:last-child{border-bottom:none}
.stock-name{flex:1;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stock-loc{color:var(--color-text-tertiary);font-size:11px;width:70px;flex-shrink:0}
.pill{padding:2px 8px;border-radius:99px;font-size:11px;font-weight:500;flex-shrink:0}
.pill.green{background:rgba(22,163,74,.12);color:var(--vp-green)}
.pill.red{background:rgba(220,38,38,.12);color:var(--vp-red)}
.pill.amber{background:rgba(247,201,72,.16);color:var(--vp-amber)}
.sale-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:0.5px solid var(--color-border-tertiary);font-size:12px}
.sale-row:last-child{border-bottom:none}
.sale-ref{font-family:var(--font-mono);font-size:11px;color:var(--vp-blue);width:90px;flex-shrink:0}
.sale-who{flex:1;color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sale-amt{font-family:var(--font-mono);font-weight:500;color:var(--vp-amber);width:70px;text-align:right;flex-shrink:0}
.donut-wrap{display:flex;align-items:center;gap:16px}
.legend{display:flex;flex-direction:column;gap:7px;font-size:12px}
.leg-row{display:flex;align-items:center;gap:6px}
.leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.leg-label{color:var(--color-text-secondary);flex:1}
.leg-pct{font-weight:500;margin-left:auto}
.inv-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.inv-stat{background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:10px 12px}
.inv-stat-lbl{font-size:11px;color:var(--color-text-tertiary);margin-bottom:4px}
.inv-stat-val{font-size:16px;font-weight:500}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:18px;align-items:start;margin-top:12px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.detail-grid .card{padding:16px}
dl{margin:0}
dt{font-size:11px;color:var(--color-text-secondary);margin-top:12px}
dd{margin:4px 0 0;font-size:14px;color:var(--color-text-primary)}
.status-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:600;text-transform:capitalize}
.status-pill.pending{background:rgba(251,191,36,.12);color:#b45309}
.status-pill.ready{background:rgba(34,197,94,.12);color:#15803d}
.status-pill.fulfilled{background:rgba(22,163,74,.12);color:#166534}
.status-pill.cancelled{background:rgba(239,68,68,.12);color:#b91c1c}
.status-pill.paid{background:rgba(22,163,74,.12);color:#166534}
.status-pill.open{background:rgba(251,191,36,.12);color:#b45309}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:18px;margin-top:16px}
.settings-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(15,23,42,.06)}
.settings-label{font-size:12px;color:var(--color-text-secondary)}
.settings-value{font-size:14px;font-weight:600;color:var(--color-text-primary)}
.card h2{margin:0 0 12px;font-size:15px}
.page-sub{margin-bottom:18px}

/* New-part redesign styles */
.section-card{background:var(--color-background-secondary);border:1px solid var(--color-border-tertiary);border-radius:12px;padding:14px}
.section-head{font-size:16px;font-weight:600;color:var(--color-text-primary);margin-bottom:10px}
.section-body{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column}
.field-label{font-size:14px;color:var(--color-text-secondary);margin-bottom:6px;font-weight:500}
.required{color:var(--vp-red);margin-left:6px}
.input{height:40px;padding:10px 12px;border:1px solid var(--color-border-tertiary);border-radius:8px;background:var(--color-background-secondary);color:var(--color-text-primary)}
.input.textarea{height:auto;min-height:80px;padding:10px}
.input:focus{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,0.12);border-color:var(--vp-blue)}
.two-col-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-2x2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field.short .input{height:36px}
.input-with-prefix{display:flex;align-items:center;border:1px solid var(--color-border-tertiary);border-radius:8px;overflow:hidden;background:var(--color-background-secondary)}
.input-with-prefix .prefix{padding:8px 10px;background:var(--color-surface,#F8F9FB);color:var(--color-text-secondary);border-right:1px solid var(--color-border-tertiary);font-weight:600}
.input-with-prefix input{border:0;outline:none;flex:1;padding:10px}
.actions-bar .ghost{background:transparent;color:var(--color-text-primary);border:1px solid var(--color-border-tertiary);box-shadow:none}
.actions-bar .primary, button.primary{background:var(--vp-blue);color:#fff}
.actions-bar .primary:hover{background:var(--vp-blue)}
details summary.section-head{cursor:pointer;list-style:none}

@media(max-width:768px){
  .row2{display:block}
  .form-grid, .two-col-grid, .grid-2x2{grid-template-columns:1fr}
  .actions-bar{position:fixed;left:0;right:0;bottom:0;padding:12px;background:rgba(255,255,255,0.96);box-shadow:0 -6px 18px rgba(15,23,42,.06);gap:8px}
}

/* Import page */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-muted, #888);
  margin: 0 0 .6rem;
}

.import-rule {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--card-bg, #fff);
  border: 0.5px solid var(--border, rgba(0,0,0,.12));
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 1.5rem;
  font-size: 14px;
  color: var(--text-secondary, #555);
  line-height: 1.6;
}
.import-rule i { font-size: 17px; margin-top: 2px; flex-shrink: 0; opacity: .5; }
.import-rule p { margin: 0; }
.import-rule strong { color: var(--text-primary, #111); font-weight: 600; }

.import-fields-card { padding: 0; overflow: hidden; margin-bottom: 1.5rem; }
.import-fields-grid { display: grid; grid-template-columns: 1fr 1fr; }

.import-field-group { padding: 18px 20px; }
.import-field-group--right { border-left: 0.5px solid var(--border, rgba(0,0,0,.1)); }

.import-group-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-tertiary, #aaa);
  margin: 0 0 8px;
}

.import-field-row {
  padding: 5px 0;
  border-bottom: 0.5px solid var(--border, rgba(0,0,0,.07));
}
.import-field-row:last-child { border-bottom: none; }
.import-field-row code {
  font-family: var(--font-mono, monospace);
  font-size: 12.5px;
  color: var(--text-primary, #111);
  background: none;
  padding: 0;
}

.import-upload-card { max-width: 420px; margin-bottom: 2rem; }

.import-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px dashed var(--border, rgba(0,0,0,.18));
  border-radius: 8px;
  padding: 2rem 1.5rem;
  cursor: pointer;
  text-align: center;
  margin-bottom: 12px;
  transition: background .15s;
}
.import-dropzone:hover { background: var(--bg-secondary, #f7f7f7); }
.import-dropzone i { font-size: 26px; opacity: .35; margin-bottom: 4px; }
.import-dropzone input { display: none; }
.import-dropzone-label { font-size: 14px; color: var(--text-secondary, #555); }
.import-dropzone-sub { font-size: 12px; color: var(--text-tertiary, #aaa); }

.import-upload-btn { width: 100%; justify-content: center; }