/* ============================================================================
   POSNHALAM SIGNATURE 2-LAYER DUOTONE ICON SYSTEM (OFFLINE 100% · ZERO CDN)
   Source Standard: Phosphor Duotone (MIT) × Tabler/Lucide (MIT/ISC) · 24x24
   Distinctive 2-Layer Architecture: Tinted Tone Layer (.pos-ico-tone) + 1.9px Stroke
   Synchronized across: POS Thu Ngân, Order ĐT (/order), Bếp KDS (/kds), Cloud & WPF
   ============================================================================ */

:root {
  --pos-ico-tone-alpha: 0.18;
}

.pos-ico-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.16em;
  line-height: 1;
  pointer-events: none;
  flex-shrink: 0;
}

svg.pos-ico {
  display: inline-block;
  width: 1.14em;
  height: 1.14em;
  min-width: 14px;
  min-height: 14px;
  vertical-align: -0.17em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Signature POSNHALAM Duotone Fill Layer (non-CUKCUK architectural depth) */
svg.pos-ico .pos-ico-tone,
svg .pos-ico-tone {
  fill: currentColor;
  stroke: none;
  opacity: var(--pos-ico-tone-alpha, 0.18);
}

/* Boost duotone richness on active / primary / highlighted surfaces */
.active svg.pos-ico,
.btn-primary svg.pos-ico,
.btn-kitchen svg.pos-ico,
.ck-nav-item.active svg.pos-ico,
.ck-metric-ico-circle svg.pos-ico,
.nav-tab.active svg.tab-svg,
.tab-btn.active svg.pos-ico {
  --pos-ico-tone-alpha: 0.26;
}

.pos-ico-wrap > svg.pos-ico {
  vertical-align: middle;
}

/* Optical sizing by UI context */
.pos-ico--xs { width: 13px !important; height: 13px !important; min-width: 13px; min-height: 13px; }
.pos-ico--sm { width: 15px !important; height: 15px !important; min-width: 15px; min-height: 15px; }
.pos-ico--md { width: 17px !important; height: 17px !important; min-width: 17px; min-height: 17px; }
.pos-ico--lg { width: 20px !important; height: 20px !important; min-width: 20px; min-height: 20px; }
.pos-ico--xl { width: 24px !important; height: 24px !important; min-width: 24px; min-height: 24px; }

/* Navigation & Action Button Rhythm */
.btn > svg.pos-ico,
.btn > .pos-ico-wrap,
.kds-btn > svg.pos-ico,
.kds-btn > .pos-ico-wrap,
.kds-tool-btn > svg.pos-ico,
.kds-tool-btn > .pos-ico-wrap,
.cukcuk-seg-btn > svg.pos-ico,
.cukcuk-seg-btn > .pos-ico-wrap,
.pos-op-btn > svg.pos-ico,
.pos-op-btn > .pos-ico-wrap,
.top-plus-item > svg.pos-ico,
.top-plus-item > .pos-ico-wrap,
.chip-btn > svg.pos-ico,
.chip-btn > .pos-ico-wrap,
.area-pill > svg.pos-ico,
.area-pill > .pos-ico-wrap,
.ck-outline-btn > svg.pos-ico,
.ck-outline-btn > .pos-ico-wrap,
.ck-primary-btn > svg.pos-ico,
.ck-primary-btn > .pos-ico-wrap {
  margin-right: 2px;
}

/* Admin & Cloud Sidebar unified icon rail */
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
}
.admin-nav-item > svg.pos-ico,
.admin-nav-item > .pos-ico-wrap {
  width: 17px;
  height: 17px;
  opacity: 0.92;
}
.admin-nav-item.active > svg.pos-ico,
.admin-nav-item.active > .pos-ico-wrap {
  opacity: 1;
}

.ck-nav-ico svg.pos-ico {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.ck-metric-ico-circle svg.pos-ico,
.ck-metric-ico-circle .pos-ico-wrap > svg.pos-ico {
  width: 18px;
  height: 18px;
}
.ck-icon-btn svg.pos-ico {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

/* Mobile Order Bottom Tabbar crisp 22px Duotone icons */
.bottom-tabbar .tab-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}
.bottom-tabbar .tab-ico svg.pos-ico {
  width: 21px;
  height: 21px;
  stroke-width: 1.95;
  vertical-align: middle;
}
.bottom-tabbar .tab-btn.active .tab-ico svg.pos-ico {
  stroke-width: 2.15;
}

/* KDS & Topbar Icon Buttons */
.kds-icon-btn svg.pos-ico,
.icon-btn svg.pos-ico,
.pwa-close-btn svg.pos-ico,
.cukcuk-drawer-close svg.pos-ico {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

/* Search Input with Leading Vector Icon */
.pos-search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.pos-search-field > .pos-search-ico {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #64748b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.pos-search-field > .pos-search-ico svg.pos-ico {
  width: 16px;
  height: 16px;
}
.pos-search-field > input.inp-search,
.pos-search-field > input.input-box {
  padding-left: 34px !important;
  width: 100%;
}

/* Semantic Status Tones (Dual-ring beacon dots) */
svg.pos-ico--dot-green { fill: #16a34a; stroke: none; width: 0.88em; height: 0.88em; min-width: 10px; min-height: 10px; vertical-align: -0.06em; }
svg.pos-ico--dot-amber { fill: #d97706; stroke: none; width: 0.88em; height: 0.88em; min-width: 10px; min-height: 10px; vertical-align: -0.06em; }
svg.pos-ico--dot-red   { fill: #dc2626; stroke: none; width: 0.88em; height: 0.88em; min-width: 10px; min-height: 10px; vertical-align: -0.06em; }
svg.pos-ico--dot-blue  { fill: #0284c7; stroke: none; width: 0.88em; height: 0.88em; min-width: 10px; min-height: 10px; vertical-align: -0.06em; }
svg.pos-ico--dot-slate { fill: #94a3b8; stroke: none; width: 0.88em; height: 0.88em; min-width: 10px; min-height: 10px; vertical-align: -0.06em; }

@media (prefers-reduced-motion: reduce) {
  svg.pos-ico {
    transition: none !important;
    animation: none !important;
  }
}