/* Safetyman ERP — Shared shell (panels, pages, Lucide, service/settings) */

/* ── Scrollbars (theme-aware · inventory table, pricing list, sidebar, etc.) ── */
.app,
.app * {
  scrollbar-width: thin;
  scrollbar-color: var(--erp-scrollbar-thumb) var(--erp-scrollbar-track);
}
.app *::-webkit-scrollbar {
  width: var(--erp-scrollbar-size);
  height: var(--erp-scrollbar-size);
}
.app *::-webkit-scrollbar-track {
  background: var(--erp-scrollbar-track);
  border-radius: 999px;
}
.app *::-webkit-scrollbar-thumb {
  background-color: var(--erp-scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.app *::-webkit-scrollbar-thumb:hover {
  background-color: var(--erp-scrollbar-thumb-hover);
}
.app *::-webkit-scrollbar-corner {
  background: transparent;
}

.erp-ico, [data-lucide] {
  width: 1.05em; height: 1.05em; stroke-width: 2;
  vertical-align: -.15em; flex-shrink: 0;
}
.sb-nav-btn [data-lucide] { width: 18px; height: 18px; }

/* ── Page chrome ── */
.erp-page-head, .dash-page-head, .wh-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-bottom: 20px;
}
.erp-page-head h1, .dash-page-title, .wh-head h1 {
  font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--erp-text);
  display: flex; align-items: center; gap: 8px;
}
.erp-page-head p, .dash-page-sub, .wh-head p {
  font-size: 13px; color: var(--erp-text-muted); margin-top: 4px;
}

/* ── Panel (shared) ── */
.erp-panel, .dash-panel, .wh-card-pro, .wh-side-card, .view-panel.erp-page > .card {
  background: var(--erp-surface);
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius-lg);
  overflow: hidden;
  box-shadow: var(--erp-shadow);
}
.erp-panel-head, .dash-panel-head, .wh-card-head-pro, .inv-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--erp-border);
  background: color-mix(in srgb, var(--erp-surface) 92%, var(--erp-bg));
}
.erp-panel-head h2, .dash-panel-head h2, .wh-card-title, .wh-side-title {
  font-size: 14px; font-weight: 600; color: var(--erp-text);
  display: flex; align-items: center; gap: 8px; letter-spacing: -.01em; margin: 0;
}
.erp-panel-head h2 [data-lucide], .dash-panel-head h2 [data-lucide],
.erp-panel-head h2 .erp-ico, .dash-panel-head h2 .erp-ico { color: var(--erp-accent); }

/* ── KPI strip ── */
.dash-kpi-strip {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px;
}
@media (min-width: 768px) { .dash-kpi-strip { grid-template-columns: repeat(4, 1fr); } }
.dash-kpi-mini {
  background: var(--erp-surface); border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius-lg); padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; box-shadow: var(--erp-shadow);
}
.dash-kpi-mini-ico {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dash-kpi-mini-ico.red { background: rgba(239,68,68,.12); color: var(--erp-red); }
.dash-kpi-mini-ico.orange { background: rgba(249,115,22,.12); color: var(--erp-orange); }
.dash-kpi-mini-ico.green { background: rgba(34,197,94,.12); color: var(--erp-green); }
.dash-kpi-mini-ico.blue { background: rgba(59,130,246,.12); color: var(--erp-blue); }
.dash-kpi-mini-val { font-size: 22px; font-weight: 700; color: var(--erp-text); line-height: 1; font-variant-numeric: tabular-nums; }
.dash-kpi-mini-lbl { font-size: 11px; color: var(--erp-text-muted); margin-top: 3px; }

/* ── Service / Settings pages ── */
.view-panel.erp-page .filter-tabs { margin-bottom: 16px; }
.view-panel.erp-page .filter-tab {
  background: var(--erp-surface); border-color: var(--erp-border); color: var(--erp-text-muted);
}
.view-panel.erp-page .filter-tab.active {
  background: var(--erp-accent); border-color: var(--erp-accent); color: #fff;
}
.view-panel.erp-page .card {
  background: var(--erp-surface); border-color: var(--erp-border);
  border-radius: var(--erp-radius-lg); box-shadow: var(--erp-shadow);
}
.view-panel.erp-page .table-scroll th { background: var(--erp-surface-2); border-color: var(--erp-border); color: var(--erp-text-muted); }
.view-panel.erp-page .table-scroll td { border-color: var(--erp-border); color: var(--erp-text); }
.view-panel.erp-page .empty-state { color: var(--erp-text-muted); }
.view-panel.erp-page .set-2col {
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 900px) { .view-panel.erp-page .set-2col { grid-template-columns: 1fr 1fr; } }
.view-panel.erp-page .sys-info .si .k { color: var(--erp-text-muted); }
.view-panel.erp-page .sys-info .si .v { color: var(--erp-text); }

/* ── Dark sidebar polish ── */
html[data-theme="dark"] .sidebar { background: var(--erp-surface-2); border-color: var(--erp-border); }
html[data-theme="dark"] .sb-nav-btn.active { background: var(--erp-accent-soft); color: var(--erp-accent); }
html[data-theme="dark"] .glass-header { background: rgba(9, 9, 11, .85); border-color: var(--erp-border); }
html[data-theme="dark"] .gh-search { background: var(--erp-surface); border-color: var(--erp-border); }
html[data-theme="dark"] .gh-theme { background: var(--erp-surface-2); border-color: var(--erp-border); }

/* ── Inventory token overrides ── */
.wh-root .wh-kpi, .wh-root .wh-add, .wh-root .wh-item-card, .wh-root .wh-move-card,
.wh-root .wh-shopee-banner, .wh-root .wh-tabs-segment {
  background: var(--erp-surface); border-color: var(--erp-border); color: var(--erp-text);
}
.wh-root .wh-tabs, .wh-root .wh-search input, .wh-root .wh-select,
.wh-root .wh-filter-toggle, .wh-root .wh-card:not(.wh-card-pro) {
  background: var(--erp-surface); border-color: var(--erp-border); color: var(--erp-text);
}
.wh-root .wh-tab.active { background: var(--erp-accent-soft); color: var(--erp-accent); }
.wh-root .wh-card-filters { background: var(--erp-surface-2); border-color: var(--erp-border); }
.wh-root .wh-table th { background: var(--erp-surface-2); border-color: var(--erp-border); color: var(--erp-text-muted); }
.wh-root .wh-table th.wh-sortable:hover { background: var(--erp-hover); color: var(--erp-text); }
.wh-root .wh-table td { border-color: var(--erp-border); color: var(--erp-text); }
.wh-root .wh-table tbody tr { background: var(--erp-surface); }
.wh-root .wh-table tbody tr:hover { background: var(--erp-hover); }
.wh-root .wh-empty, .wh-root .wh-side-empty { color: var(--erp-text-muted); }
.wh-root .wh-side-title-warn { color: var(--erp-orange); }