/* VERTEX PRO — Compact UI (Windows + Mobile) */

:root {
  --v16-sidebar-open: 282px;
  --v16-sidebar-mini: 78px;
  --vertex-sidebar-open: 282px;
  --vertex-sidebar-mini: 78px;
  --sidebar-open-v8: 282px;
  --sidebar-mini-v8: 78px;
  --vx-compact-pad: 7px;
  --vx-ui-zoom: 0.88;
}

/* تصغير عام للواجهة — تعويض العرض/الارتفاع لملء الشاشة بعد zoom */
html {
  width: 100%;
  overflow-x: hidden;
}

body.app,
body.app.direct-page {
  zoom: var(--vx-ui-zoom);
  font-size: 13px;
  width: calc(100vw / var(--vx-ui-zoom)) !important;
  max-width: calc(100vw / var(--vx-ui-zoom)) !important;
  min-width: calc(100vw / var(--vx-ui-zoom)) !important;
  height: calc(100vh / var(--vx-ui-zoom)) !important;
  max-height: calc(100vh / var(--vx-ui-zoom)) !important;
  min-height: calc(100vh / var(--vx-ui-zoom)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

body.app > .sidebar,
body.app.direct-page > .sidebar,
body.app .sidebar.vertex-sidebar-v16,
body.app.direct-page .sidebar.vertex-sidebar-v16 {
  width: var(--v16-sidebar-open) !important;
  min-width: var(--v16-sidebar-open) !important;
  max-width: var(--v16-sidebar-open) !important;
  flex-shrink: 0 !important;
  height: 100% !important;
  min-height: calc(100vh / var(--vx-ui-zoom)) !important;
  max-height: calc(100vh / var(--vx-ui-zoom)) !important;
  align-self: stretch !important;
  margin: 0 !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
  position: sticky !important;
  top: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.app .sidebar.vertex-sidebar-v16 .vertex-sidebar-shell,
body.app.direct-page .sidebar.vertex-sidebar-v16 .vertex-sidebar-shell {
  min-height: calc(100vh / var(--vx-ui-zoom)) !important;
  height: 100% !important;
  flex: 1 1 auto !important;
}

body.app.sidebar-mini > .sidebar,
body.app.direct-page.sidebar-mini > .sidebar,
body.sidebar-mini.app .sidebar.vertex-sidebar-v16,
body.sidebar-mini.app.direct-page .sidebar.vertex-sidebar-v16 {
  width: var(--v16-sidebar-mini) !important;
  min-width: var(--v16-sidebar-mini) !important;
  max-width: var(--v16-sidebar-mini) !important;
}

body.app.direct-page,
body.app {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--v16-sidebar-open) !important;
}

body.app.direct-page.sidebar-mini,
body.app.sidebar-mini,
body.sidebar-mini.app.direct-page {
  grid-template-columns: minmax(0, 1fr) var(--v16-sidebar-mini) !important;
}

body.app > .main,
body.app.direct-page > .main,
body.app .main,
body.app.direct-page .main {
  height: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  margin-inline: 0 !important;
  padding: var(--vx-compact-pad) !important;
  box-sizing: border-box !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.app > .sidebar,
body.app.direct-page > .sidebar,
body.app .sidebar.vertex-sidebar-v16,
body.app.direct-page .sidebar.vertex-sidebar-v16 {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body.app .main > .content,
body.app.direct-page .main > .content,
body.app .main > section.content,
body.app.direct-page .main > section.content,
body.app .main > .content-wrap,
body.app.direct-page .main > .content-wrap,
body.app .main > [class$="-wrap"],
body.app.direct-page .main > [class$="-wrap"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
}

/* الهيدر */
.vertex-header-bar {
  padding: 5px 9px 7px !important;
  margin-bottom: 8px !important;
  border-radius: 12px !important;
  gap: 6px !important;
}

.vertex-header-title-text {
  font-size: 15px !important;
  min-height: 28px !important;
  padding: 0 9px !important;
}

.vertex-header-icon,
.vertex-header-sidebar-toggle {
  width: 30px !important;
  height: 30px !important;
  font-size: 12px !important;
}

.vertex-header-nav-btn {
  height: 26px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
}

.vertex-header-chip,
.vertex-header-lang-pill,
.vertex-header-notify {
  height: 28px !important;
  font-size: 10px !important;
}

.vertex-header-branch {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.vertex-header-search input {
  height: 30px !important;
  font-size: 12px !important;
  padding: 0 10px !important;
}

.vertex-header-mini-group {
  gap: 5px !important;
}

/* الشريط الجانبي */
.vertex-sidebar-v16,
body .sidebar.vertex-sidebar-v16 {
  padding: 10px 8px !important;
}

.vertex-sidebar-brand-v16 img,
.vertex-sidebar-brand-v16 .vertex-logo-img {
  max-width: 164px !important;
  max-height: 52px !important;
}

body.sidebar-mini .vertex-sidebar-brand-v16 img,
body.app.direct-page.sidebar-mini .vertex-sidebar-brand-v16 img,
body.sidebar-mini .vertex-sidebar-brand-v16 .vertex-logo-img,
body.app.direct-page.sidebar-mini .vertex-sidebar-brand-v16 .vertex-logo-img {
  max-width: 48px !important;
  max-height: 40px !important;
}

.sidebar-controls-v16 {
  gap: 6px !important;
  padding: 6px !important;
  margin-bottom: 8px !important;
}

.side-icon-btn-v16 {
  width: 34px !important;
  height: 30px !important;
  font-size: 11px !important;
}

.vertex-sidebar-menu-v16 .menu-title {
  padding: 6px 6px !important;
  font-size: 10px !important;
}

.vertex-sidebar-menu-v16 .menu-items a,
.vertex-sidebar-menu-v16 .logout,
.vertex-sidebar-logout-v16 {
  padding: 6px 6px !important;
  font-size: 10px !important;
}

/* تابلت — يبقى عرض الشريط الكامل */
@media (max-width: 1100px) {
  body.app,
  body.app.direct-page {
    --vx-ui-zoom: 0.84;
    zoom: var(--vx-ui-zoom);
    width: calc(100vw / var(--vx-ui-zoom)) !important;
    max-width: calc(100vw / var(--vx-ui-zoom)) !important;
    min-width: calc(100vw / var(--vx-ui-zoom)) !important;
    height: calc(100vh / var(--vx-ui-zoom)) !important;
    max-height: calc(100vh / var(--vx-ui-zoom)) !important;
    min-height: calc(100vh / var(--vx-ui-zoom)) !important;
    font-size: 13px;
  }
}

@media (max-width: 900px) {
  :root {
    --v16-sidebar-open: 78px;
    --v16-sidebar-mini: 78px;
    --vertex-sidebar-open: 78px;
    --vertex-sidebar-mini: 78px;
  }

  body.app.direct-page,
  body.app {
    grid-template-columns: minmax(0, 1fr) var(--v16-sidebar-mini) !important;
  }
}

/* موبايل */
@media (max-width: 768px) {
  body.app,
  body.app.direct-page {
    --vx-ui-zoom: 0.8;
    zoom: var(--vx-ui-zoom);
    width: calc(100vw / var(--vx-ui-zoom)) !important;
    max-width: calc(100vw / var(--vx-ui-zoom)) !important;
    min-width: calc(100vw / var(--vx-ui-zoom)) !important;
    height: calc(100vh / var(--vx-ui-zoom)) !important;
    max-height: calc(100vh / var(--vx-ui-zoom)) !important;
    min-height: calc(100vh / var(--vx-ui-zoom)) !important;
    font-size: 12px;
  }

  :root {
    --v16-sidebar-mini: 78px;
    --vertex-sidebar-mini: 78px;
    --vx-compact-pad: 5px;
  }

  .vertex-header-bar {
    padding: 4px 7px 6px !important;
    margin-bottom: 6px !important;
  }

  .vertex-header-title-text {
    font-size: 13px !important;
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vertex-header-main-row {
    gap: 6px !important;
  }

  .vertex-header-mini-group .vertex-header-chip.vertex-header-date {
    display: none !important;
  }
}

@media (max-width: 480px) {
  body.app,
  body.app.direct-page {
    --vx-ui-zoom: 0.74;
    zoom: var(--vx-ui-zoom);
    width: calc(100vw / var(--vx-ui-zoom)) !important;
    max-width: calc(100vw / var(--vx-ui-zoom)) !important;
    min-width: calc(100vw / var(--vx-ui-zoom)) !important;
    height: calc(100vh / var(--vx-ui-zoom)) !important;
    max-height: calc(100vh / var(--vx-ui-zoom)) !important;
    min-height: calc(100vh / var(--vx-ui-zoom)) !important;
  }

  .vertex-header-nav-btn {
    min-width: 30px !important;
    width: 30px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .vertex-header-nav-btn .vh-nav-label {
    display: none !important;
  }
}

/* صفحة الدخول */
body.login-page {
  --vx-login-zoom: 0.92;
  zoom: var(--vx-login-zoom);
  width: calc(100vw / var(--vx-login-zoom));
  min-height: calc(100vh / var(--vx-login-zoom));
  margin: 0;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  body.login-page {
    --vx-login-zoom: 0.86;
    width: calc(100vw / var(--vx-login-zoom));
    min-height: calc(100vh / var(--vx-login-zoom));
  }
}

@media (max-width: 480px) {
  body.login-page {
    --vx-login-zoom: 0.8;
    width: calc(100vw / var(--vx-login-zoom));
    min-height: calc(100vh / var(--vx-login-zoom));
  }
}

/* Firefox — لا يدعم zoom بشكل كامل */
@supports not (zoom: 0.88) {
  body.app,
  body.app.direct-page {
    zoom: 1;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    font-size: 12px;
  }

  body.login-page {
    zoom: 1;
    font-size: 13px;
  }
}

/* ===== VERTEX MODERN SYSTEM THEME — Light ===== */
body:not(.dark).app,
body:not(.dark).app .main,
body:not(.dark).app .content,
body:not(.dark).app.direct-page,
body:not(.dark).app.direct-page .main,
body:not(.dark).app.direct-page .content,
body:not(.dark) [class*="-page"],
body:not(.dark) [class*="-page"] .main,
body:not(.dark) [class*="-list-page"]{
  background:var(--vx-page-bg,#f2f3f5)!important;
  color:#1e293b!important;
}

body:not(.dark).app :is(
  .page-panel,.table-wrap,.table-box-v12,.table-panel,.table-card,.board-panel,
  .filter-panel,.filter-box,.filter-panel-v12,
  .exp-filters,.tk-filters,.ntf-filters,.ia-filters,
  .ws-filter,.tr-person-section,.tr-table-card,
  .alert-strip,
  .ws-table-card,.ss-card,.ss-table-box,.ss-tl-item,
  .ntf-table-card,.ia-table-card,.wt-table-box,.exp-table-box,.safe-page-head,
  .page-header,.topbar,.dashboard-system-top,.tr-export-bar,.content > .filter-panel,
  .si-list-page .si-filter-panel,.vertex-header-bar,
  .vertex-sidebar-v16
){
  background:var(--vx-page-card,#f7f8fa)!important;
  border-color:#e2e8f0!important;
}

body:not(.dark).app :is(
  table th,.table th,.clean-table th,.table-v12 th,.si-table th,.ws-table th,
  .tr-table th,.exp-table th,.ss-table th,.wt-table th,.ntf-table th,.ia-table th,
  .tk-table th,.kpi-table th,.customers-table th,.collect-table th,.dis-table th,
  .stock-table th,.table-head,.si-table-head,.ws-table-head
){
  background:#f8fafc!important;
  color:#334155!important;
  border-bottom-color:#e2e8f0!important;
}

body:not(.dark).app :is(
  table td,.table td,.clean-table td,.table-v12 td,.si-table td,.ws-table td,
  .tr-table td,.exp-table td,.ss-table td,.wt-table td,.ntf-table td,.ia-table td,
  .tk-table td,.kpi-table td,.customers-table td,.collect-table td,.dis-table td,
  .stock-table td
){
  background:var(--vx-page-card2,#fafbfc)!important;
  color:#1e293b!important;
  border-bottom-color:#f1f5f9!important;
}

body:not(.dark).app table tbody tr:nth-child(even) td,
body:not(.dark).app .table tbody tr:nth-child(even) td,
body:not(.dark).app .si-table tbody tr:nth-child(even) td,
body:not(.dark).app .ws-table tbody tr:nth-child(even) td,
body:not(.dark).app .tr-table tbody tr:nth-child(even) td{
  background:#f5f6f8!important;
}

body:not(.dark).app table tbody tr:hover td,
body:not(.dark).app .table tbody tr:hover td,
body:not(.dark).app .si-table tbody tr:hover td,
body:not(.dark).app .ws-table tbody tr:hover td,
body:not(.dark).app .tr-table tbody tr:hover td{
  background:#f1f5f9!important;
}

body:not(.dark).app :is(
  .filter-card input,.filter-card select,.filter-card-v12 input,.filter-card-v12 select,
  .field-v12 input,.field-v12 select,
  .top-minibar .search-wrap input
){
  background:var(--vx-page-card2,#fafbfc)!important;
  border-color:#e2e8f0!important;
  color:#1e293b!important;
}

body:not(.dark).app .smart-search,
body:not(.dark).app .smart-search-v12{
  border-color:#e2e8f0!important;
}

body:not(.dark).app .btn.primary,
body:not(.dark).app .safe-btn.primary,
body:not(.dark).app .vx-btn-apply{
  background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;
  border-color:#1e40af!important;
  color:#fff!important;
}

body:not(.dark).app .tool-btn,
body:not(.dark).app .tools button,
body:not(.dark).app .tools a{
  background:var(--vx-page-card2,#fafbfc)!important;
  border-color:#e2e8f0!important;
  color:#475569!important;
}

body:not(.dark).app .page-header,
body:not(.dark).app .page-header h1,
body:not(.dark).app .page-header small,
body:not(.dark).app .safe-page-head,
body:not(.dark).app .safe-page-head small{
  color:#1e293b!important;
}

/* ===== VERTEX MODERN SYSTEM THEME — Dark ===== */
body.dark.app,
body.dark.app .main,
body.dark.app .content,
body.dark.app.direct-page,
body.dark.app.direct-page .main,
body.dark.app.direct-page .content,
body.dark [class*="-page"],
body.dark [class*="-page"] .main,
body.dark [class*="-list-page"]{
  background:#111827!important;
  color:#e2e8f0!important;
}

body.dark.app :is(
  .page-panel,.table-wrap,.table-box-v12,.table-panel,.table-card,.board-panel,
  .filter-panel,.filter-box,.filter-panel-v12,
  .exp-filters,.tk-filters,.ntf-filters,.ia-filters,
  .ws-filter,.tr-person-section,.tr-table-card,
  .alert-strip,
  .ws-table-card,.ss-card,.ss-table-box,.ss-tl-item,
  .ntf-table-card,.ia-table-card,.wt-table-box,.exp-table-box,.safe-page-head,
  .page-header,.topbar,.dashboard-system-top,.tr-export-bar,.content > .filter-panel,
  .si-list-page .si-filter-panel,.vertex-header-bar,
  .vertex-sidebar-v16
){
  background:#1e293b!important;
  color:#e2e8f0!important;
}

body.dark.app :is(
  table th,.table th,.clean-table th,.table-v12 th,.si-table th,.ws-table th,
  .tr-table th,.exp-table th,.ss-table th,.wt-table th,.ntf-table th,.ia-table th,
  .tk-table th,.kpi-table th,.customers-table th,.collect-table th,.dis-table th,
  .stock-table th,.table-head,.si-table-head,.ws-table-head
){
  background:#1e3a5f!important;
  color:#e2e8f0!important;
}

body.dark.app :is(
  table td,.table td,.clean-table td,.table-v12 td,.si-table td,.ws-table td,
  .tr-table td,.exp-table td,.ss-table td,.wt-table td,.ntf-table td,.ia-table td,
  .tk-table td,.kpi-table td,.customers-table td,.collect-table td,.dis-table td,
  .stock-table td
){
  background:#0f172a!important;
  color:#cbd5e1!important;
}

body.dark.app table tbody tr:nth-child(even) td,
body.dark.app .si-table tbody tr:nth-child(even) td,
body.dark.app .ws-table tbody tr:nth-child(even) td,
body.dark.app .tr-table tbody tr:nth-child(even) td{
  background:#111827!important;
}

body.dark.app table tbody tr:hover td,
body.dark.app .si-table tbody tr:hover td,
body.dark.app .ws-table tbody tr:hover td,
body.dark.app .tr-table tbody tr:hover td{
  background:#162032!important;
}

body.dark.app :is(
  .filter-card input,.filter-card select,.filter-card-v12 input,.filter-card-v12 select,
  .field-v12 input,.field-v12 select
){
  background:#0f172a!important;
  border-color:#334155!important;
  color:#e2e8f0!important;
}

/* ===== Dark mode — slate borders ===== */
body.dark,
body.dark.app{
  --vx-dark-gold-border:#334155;
  --vx-dark-gold-border-soft:rgba(51,65,85,.55);
  --vx-dark-border:#334155;
  --border:#334155;
  --vh-border:#334155;
}

/* ===== Search bars — logo blue/cyan gradient (system-wide) ===== */
:root{
  --vx-logo-sky:#38bdf8;
  --vx-logo-cyan:#22d3ee;
  --vx-logo-blue:#2563eb;
  --vx-logo-deep:#1d4ed8;
  --vx-logo-search-shell:linear-gradient(135deg,#eff6ff 0%,#ecfeff 46%,#dbeafe 100%);
  --vx-logo-search-input:linear-gradient(135deg,#ffffff 0%,#f0f9ff 100%);
  --vx-logo-search-btn:linear-gradient(135deg,#38bdf8 0%,#0ea5e9 42%,#2563eb 100%);
  --vx-logo-search-btn-hover:linear-gradient(135deg,#0ea5e9 0%,#2563eb 55%,#1d4ed8 100%);
  --vx-logo-search-focus:0 0 0 3px rgba(37,99,235,.22);
}

body.app :is(
  .smart-search,.smart-search-v12,.smart-search-row,.smart-search-before-table,
  .si-smart-search,.pi-smart-search,.ws-smart-search,.ss-search-panel,.tr-smart-search
){
  background:var(--vx-logo-search-shell)!important;
  border:1.5px solid #7dd3fc!important;
  border-radius:14px!important;
  box-shadow:0 6px 20px rgba(37,99,235,.12),inset 0 1px 0 rgba(255,255,255,.85)!important;
}

body.app :is(
  .vertex-header-search input[type="search"],
  .smart-search input,.smart-search-v12 input,
  .si-search-wrap input,.pi-search-wrap input,
  .ws-smart-search input,.tr-smart-search input,
  .ss-search-input-wrap,
  .dashboard-global-search input,.top-minibar .search-wrap input,
  .inv-search-row input,.inv-prod-search-wrap input
){
  background:var(--vx-logo-search-input)!important;
  border:1.5px solid #93c5fd!important;
  color:#0f172a!important;
  font-weight:800!important;
  box-shadow:inset 0 1px 2px rgba(37,99,235,.06)!important;
}

body.app :is(
  .vertex-header-search input[type="search"]:focus,
  .smart-search input:focus,.smart-search-v12 input:focus,
  .si-search-wrap input:focus,.pi-search-wrap input:focus,
  .ws-smart-search input:focus,.tr-smart-search input:focus,
  .ss-search-input-wrap:focus-within,
  .inv-search-row input:focus,.inv-prod-search-wrap input:focus
){
  border-color:var(--vx-logo-blue)!important;
  box-shadow:var(--vx-logo-search-focus)!important;
  outline:none!important;
}

.ss-search-input-wrap{
  background:var(--vx-logo-search-input)!important;
  border:1.5px solid #7dd3fc!important;
  box-shadow:inset 0 1px 2px rgba(37,99,235,.06)!important;
}

body.app :is(
  .smart-search button,.smart-search-v12 button,
  .inv-search-btn-product,.inv-search-btn-serial,
  .inv-search-btn,.ss-btn.primary,.ws-smart-search button
){
  background:var(--vx-logo-search-btn)!important;
  border:1px solid var(--vx-logo-deep)!important;
  color:#fff!important;
  box-shadow:0 4px 14px rgba(37,99,235,.28)!important;
}

body.app :is(
  .smart-search button:hover,.smart-search-v12 button:hover,
  .inv-search-btn-product:hover,.inv-search-btn-serial:hover,
  .ss-btn.primary:hover
){
  background:var(--vx-logo-search-btn-hover)!important;
}

body.app .inv-search-box{
  border-radius:14px!important;
  box-shadow:0 6px 18px rgba(37,99,235,.1)!important;
}

body.app .inv-search-serial{
  background:#eff6ff!important;
  border:2px solid #93c5fd!important;
}

body.app .inv-search-product{
  background:#ecfdf5!important;
  border:2px solid #6ee7b7!important;
}

body.app .inv-search-btn-serial{
  background:linear-gradient(135deg,#22d3ee,#0ea5e9,#2563eb)!important;
  border-color:#0284c7!important;
}

body.app .inv-search-lbl{color:#0f172a!important}
body.app .inv-search-hint{color:#0369a1!important}

body.app .si-search-clear:hover,
body.app .pi-search-clear:hover{
  background:var(--vx-logo-blue)!important;
  color:#fff!important;
}

body.app .si-suggest-item:hover,
body.app .si-suggest-item.active,
body.app .pi-suggest-item:hover,
body.app .pi-suggest-item.active{
  background:#eff6ff!important;
  color:var(--vx-logo-deep)!important;
}

/* Dark — logo blues on search */
html body.dark.app :is(
  .smart-search,.smart-search-v12,.si-smart-search,.pi-smart-search,
  .ws-smart-search,.ss-search-panel,.tr-smart-search,.inv-search-box
){
  background:linear-gradient(135deg,#0c1929 0%,#1e3a5f 55%,#0f2747 100%)!important;
  border-color:#38bdf8!important;
  box-shadow:0 8px 24px rgba(0,0,0,.32),inset 0 1px 0 rgba(56,189,248,.12)!important;
}

html body.dark.app :is(
  .vertex-header-search input[type="search"],
  .smart-search input,.smart-search-v12 input,
  .si-search-wrap input,.pi-search-wrap input,
  .ws-smart-search input,.tr-smart-search input,
  .ss-search-input-wrap,.inv-search-row input,.inv-prod-search-wrap input
){
  background:linear-gradient(135deg,#0f172a,#111827)!important;
  border-color:#38bdf8!important;
  color:#e2e8f0!important;
}

html body.dark.app .inv-search-serial{
  background:#1e3a5f!important;
  border-color:#93c5fd!important;
}

html body.dark.app .inv-search-product{
  background:#064e3b!important;
  border-color:#6ee7b7!important;
}

html body.dark.app :is(
  .smart-search button,.smart-search-v12 button,
  .inv-search-btn-product,.inv-search-btn-serial,.ss-btn.primary
){
  background:var(--vx-logo-search-btn)!important;
  border-color:#0ea5e9!important;
  color:#fff!important;
}

/* صنف / قطع — stacked colored badges (all tables) */
.vx-items-stack,
.pi-items-stack,
.si-items-stack{
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:4px!important;
  min-width:78px;
}

.vx-items-stack .si-badge,
.pi-items-stack .si-badge,
.si-items-stack .si-badge,
.vx-item-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  margin:0!important;
  border-radius:8px!important;
  padding:4px 10px!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  box-shadow:0 2px 6px rgba(15,23,42,.06)!important;
}

.vx-badge-item,
.si-badge-item,
.pi-badge-item{
  background:#ede9fe!important;
  color:#5b21b6!important;
  border:1px solid #c4b5fd!important;
}

.vx-badge-piece,
.si-badge-piece,
.pi-badge-piece{
  background:#ffedd5!important;
  color:#c2410c!important;
  border:1px solid #fdba74!important;
}

body.dark .vx-badge-item,
body.dark .si-badge-item,
body.dark .pi-badge-item{
  background:rgba(91,33,182,.32)!important;
  color:#ddd6fe!important;
  border-color:#7c3aed!important;
  box-shadow:none!important;
}

body.dark .vx-badge-piece,
body.dark .si-badge-piece,
body.dark .pi-badge-piece{
  background:rgba(194,65,12,.28)!important;
  color:#fed7aa!important;
  border-color:#ea580c!important;
  box-shadow:none!important;
}