/* Client admin shell — Lucide stroke icons + ghost/module chips */

:root {
  --dash-chip-size: 2.25rem;
  --dash-chip-size-sm: 1.875rem;
  --dash-kpi-badge-size: 2.75rem;
  --dash-chip-radius: 0.625rem;
  --dash-chip-bg: rgba(255, 255, 255, 0.06);
  --dash-chip-border: rgba(255, 255, 255, 0.08);
  --dash-icon-size: 22px;
  --dash-icon-size-sm: 20px;
}

/*
 * Module tone map (sidebar):
 * indigo — Overview | amber — Orders | cyan — Stock
 * emerald — Catalog | violet — CRM | fuchsia — Marketing
 * sky — Finance/Reports | zinc — Settings
 */

[data-lucide],
svg.lucide,
svg.dash-icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  stroke-width: 1.75;
  vertical-align: middle;
  color: inherit;
}

[data-lucide].w-5,
[data-lucide].h-5,
svg.lucide.w-5,
svg.lucide.h-5 {
  width: 1.25rem;
  height: 1.25rem;
}

[data-lucide].h-4,
[data-lucide].w-4,
svg.lucide.h-4,
svg.lucide.w-4 {
  width: 1rem;
  height: 1rem;
}

[data-lucide].w-3,
[data-lucide].h-3,
svg.lucide.w-3,
svg.lucide.h-3 {
  width: 0.75rem;
  height: 0.75rem;
}

#main-sidebar svg.lucide,
#main-sidebar .sidebar-link > svg,
#main-sidebar .sidebar-group-toggle > svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

#main-sidebar .sidebar-chevron,
#main-sidebar svg.sidebar-chevron {
  width: 0.75rem !important;
  height: 0.75rem !important;
  transition: transform 0.2s ease;
}

/* ── Icon chips ── */
.dash-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dash-chip-size);
  height: var(--dash-chip-size);
  flex-shrink: 0;
  border-radius: var(--dash-chip-radius);
  border: 1px solid var(--dash-chip-border);
  background: var(--dash-chip-bg);
  color: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.dash-icon-chip--sm {
  width: var(--dash-chip-size-sm);
  height: var(--dash-chip-size-sm);
  border-radius: calc(var(--dash-chip-radius) - 0.125rem);
}

/* Ghost: neutral canvas — dual-tone icon carries color */
.dash-icon-chip--ghost {
  background: var(--dash-chip-bg);
  border-color: var(--dash-chip-border);
  color: inherit;
}

.dash-icon-chip--ghost.dash-icon-chip--brand-fb {
  border-color: color-mix(in srgb, #3b82f6 35%, transparent);
}

.dash-icon-chip--brand-fb .fa-facebook {
  color: #60a5fa;
  font-size: 0.875rem;
}

/* Module parent chips — border accent + stroke icon color */
.dash-icon-chip--module-indigo {
  background: var(--dash-chip-bg);
  border-color: color-mix(in srgb, #6366f1 45%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #6366f1 12%, transparent);
  color: #a5b4fc;
}
.dash-icon-chip--module-amber {
  background: var(--dash-chip-bg);
  border-color: color-mix(in srgb, #f59e0b 45%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f59e0b 12%, transparent);
  color: #fbbf24;
}
.dash-icon-chip--module-cyan {
  background: var(--dash-chip-bg);
  border-color: color-mix(in srgb, #22d3ee 45%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #22d3ee 12%, transparent);
  color: #67e8f9;
}
.dash-icon-chip--module-emerald {
  background: var(--dash-chip-bg);
  border-color: color-mix(in srgb, #10b981 45%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #10b981 12%, transparent);
  color: #34d399;
}
.dash-icon-chip--module-violet {
  background: var(--dash-chip-bg);
  border-color: color-mix(in srgb, #8b5cf6 45%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #8b5cf6 12%, transparent);
  color: #c4b5fd;
}
.dash-icon-chip--module-fuchsia {
  background: var(--dash-chip-bg);
  border-color: color-mix(in srgb, #d946ef 45%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d946ef 12%, transparent);
  color: #e879f9;
}
.dash-icon-chip--module-sky {
  background: var(--dash-chip-bg);
  border-color: color-mix(in srgb, #0ea5e9 45%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #0ea5e9 12%, transparent);
  color: #38bdf8;
}
.dash-icon-chip--module-slate {
  background: var(--dash-chip-bg);
  border-color: color-mix(in srgb, #94a3b8 40%, transparent);
  color: #cbd5e1;
}
.dash-icon-chip--module-zinc {
  background: var(--dash-chip-bg);
  border-color: color-mix(in srgb, #a1a1aa 35%, transparent);
  color: #d4d4d8;
}
.dash-icon-chip--module-orange {
  background: var(--dash-chip-bg);
  border-color: color-mix(in srgb, #f97316 45%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f97316 12%, transparent);
  color: #fb923c;
}
.dash-icon-chip--module-teal {
  background: var(--dash-chip-bg);
  border-color: color-mix(in srgb, #14b8a6 45%, transparent);
  color: #2dd4bf;
}
.dash-icon-chip--module-rose {
  background: var(--dash-chip-bg);
  border-color: color-mix(in srgb, #f43f5e 45%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f43f5e 12%, transparent);
  color: #fb7185;
}

.dash-icon-chip [data-lucide],
.dash-icon-chip svg.lucide,
.dash-icon-chip .fa-brands {
  width: 1.125rem;
  height: 1.125rem;
  font-size: 0.875rem;
  line-height: 1;
  color: inherit;
}

.dash-icon-chip--sm [data-lucide],
.dash-icon-chip--sm svg.lucide,
.dash-icon-chip--sm .fa-brands {
  width: 0.95rem;
  height: 0.95rem;
  font-size: 0.8125rem;
}

/* Light panel icon chips (Customization, Settings, white cards) */
#result-view .dash-icon-chip {
  --dash-chip-bg: #f3f4f6;
  --dash-chip-border: #e5e7eb;
  color: #6b7280;
}

#result-view .dash-icon-chip[class*="--indigo"] { color: #6366f1; border-color: color-mix(in srgb, #6366f1 30%, #e5e7eb); background: color-mix(in srgb, #6366f1 8%, #f3f4f6); }
#result-view .dash-icon-chip[class*="--violet"] { color: #7c3aed; border-color: color-mix(in srgb, #8b5cf6 30%, #e5e7eb); background: color-mix(in srgb, #8b5cf6 8%, #f3f4f6); }
#result-view .dash-icon-chip[class*="--emerald"] { color: #059669; border-color: color-mix(in srgb, #10b981 30%, #e5e7eb); background: color-mix(in srgb, #10b981 8%, #f3f4f6); }
#result-view .dash-icon-chip[class*="--amber"] { color: #d97706; border-color: color-mix(in srgb, #f59e0b 30%, #e5e7eb); background: color-mix(in srgb, #f59e0b 8%, #f3f4f6); }
#result-view .dash-icon-chip[class*="--cyan"] { color: #0891b2; border-color: color-mix(in srgb, #06b6d4 30%, #e5e7eb); background: color-mix(in srgb, #06b6d4 8%, #f3f4f6); }
#result-view .dash-icon-chip[class*="--rose"] { color: #e11d48; border-color: color-mix(in srgb, #f43f5e 30%, #e5e7eb); background: color-mix(in srgb, #f43f5e 8%, #f3f4f6); }
#result-view .dash-icon-chip[class*="--sky"] { color: #0284c7; border-color: color-mix(in srgb, #0ea5e9 30%, #e5e7eb); background: color-mix(in srgb, #0ea5e9 8%, #f3f4f6); }
#result-view .dash-icon-chip[class*="--slate"],
#result-view .dash-icon-chip[class*="--zinc"] { color: #64748b; border-color: #e5e7eb; background: #f3f4f6; }
#result-view .dash-icon-chip[class*="--fuchsia"] { color: #c026d3; border-color: color-mix(in srgb, #d946ef 30%, #e5e7eb); background: color-mix(in srgb, #d946ef 8%, #f3f4f6); }
#result-view .dash-icon-chip[class*="--orange"] { color: #ea580c; border-color: color-mix(in srgb, #f97316 30%, #e5e7eb); background: color-mix(in srgb, #f97316 8%, #f3f4f6); }
#result-view .dash-icon-chip[class*="--teal"] { color: #0d9488; border-color: color-mix(in srgb, #14b8a6 30%, #e5e7eb); background: color-mix(in srgb, #14b8a6 8%, #f3f4f6); }

.customization-tab-btn .dash-icon-chip {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
}

.customization-tab-btn .dash-icon-chip [data-lucide],
.customization-tab-btn .dash-icon-chip svg.lucide {
  width: 1rem;
  height: 1rem;
}

/* Legacy flat icons — transition shim (no drop-shadow) */
.dash-flat-icon {
  display: inline-block;
  width: var(--dash-icon-size);
  height: var(--dash-icon-size);
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
  pointer-events: none;
  filter: none;
}

svg.dash-flat-icon {
  overflow: visible;
  fill: currentColor;
  filter: none;
}

svg.dash-flat-icon use {
  pointer-events: none;
}

.dash-flat-icon--sm,
.dash-icon-chip--sm .dash-flat-icon {
  width: var(--dash-icon-size-sm);
  height: var(--dash-icon-size-sm);
}

.dash-icon-chip .dash-flat-icon {
  width: var(--dash-icon-size);
  height: var(--dash-icon-size);
}

.dash-kpi-badge .dash-flat-icon {
  width: 1.35rem;
  height: 1.35rem;
}

.dash-flat-icon--lg {
  width: 1.5rem;
  height: 1.5rem;
}

.dash-flat-icon--xl {
  width: 2rem;
  height: 2rem;
}

img.dash-flat-icon.dash-flat-spin,
.dash-flat-spin {
  animation: dash-flat-spin 0.8s linear infinite;
}

@keyframes dash-flat-spin {
  to { transform: rotate(360deg); }
}

/* Circular KPI badges */
.dash-kpi-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dash-kpi-badge-size);
  height: var(--dash-kpi-badge-size);
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dash-kpi-badge [data-lucide],
.dash-kpi-badge svg.lucide {
  width: 1.25rem;
  height: 1.25rem;
  color: inherit;
}

/* Legacy tone variants — still used by KPI badges / panels */
.dash-icon-chip--slate,
.dash-kpi-badge.dash-icon-chip--slate {
  background: color-mix(in srgb, #94a3b8 18%, transparent);
  border-color: color-mix(in srgb, #94a3b8 22%, transparent);
  color: #cbd5e1;
}

.dash-icon-chip--amber,
.dash-kpi-badge.dash-icon-chip--amber {
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  border-color: color-mix(in srgb, #f59e0b 22%, transparent);
  color: #fbbf24;
}

.dash-icon-chip--cyan,
.dash-kpi-badge.dash-icon-chip--cyan {
  background: color-mix(in srgb, #22d3ee 18%, transparent);
  border-color: color-mix(in srgb, #22d3ee 22%, transparent);
  color: #67e8f9;
}

.dash-icon-chip--emerald,
.dash-kpi-badge.dash-icon-chip--emerald {
  background: color-mix(in srgb, #10b981 18%, transparent);
  border-color: color-mix(in srgb, #10b981 22%, transparent);
  color: #34d399;
}

.dash-icon-chip--indigo,
.dash-kpi-badge.dash-icon-chip--indigo {
  background: color-mix(in srgb, #6366f1 18%, transparent);
  border-color: color-mix(in srgb, #6366f1 22%, transparent);
  color: #a5b4fc;
}

.dash-icon-chip--violet,
.dash-kpi-badge.dash-icon-chip--violet {
  background: color-mix(in srgb, #8b5cf6 18%, transparent);
  border-color: color-mix(in srgb, #8b5cf6 22%, transparent);
  color: #c4b5fd;
}

.dash-icon-chip--fuchsia,
.dash-kpi-badge.dash-icon-chip--fuchsia {
  background: color-mix(in srgb, #d946ef 18%, transparent);
  border-color: color-mix(in srgb, #d946ef 22%, transparent);
  color: #e879f9;
}

.dash-icon-chip--orange,
.dash-kpi-badge.dash-icon-chip--orange {
  background: color-mix(in srgb, #f97316 18%, transparent);
  border-color: color-mix(in srgb, #f97316 22%, transparent);
  color: #fb923c;
}

.dash-icon-chip--teal,
.dash-kpi-badge.dash-icon-chip--teal {
  background: color-mix(in srgb, #14b8a6 18%, transparent);
  border-color: color-mix(in srgb, #14b8a6 22%, transparent);
  color: #2dd4bf;
}

.dash-icon-chip--rose,
.dash-kpi-badge.dash-icon-chip--rose {
  background: color-mix(in srgb, #f43f5e 18%, transparent);
  border-color: color-mix(in srgb, #f43f5e 22%, transparent);
  color: #fb7185;
}

.dash-icon-chip--sky,
.dash-kpi-badge.dash-icon-chip--sky {
  background: color-mix(in srgb, #0ea5e9 18%, transparent);
  border-color: color-mix(in srgb, #0ea5e9 22%, transparent);
  color: #38bdf8;
}

.dash-icon-chip--zinc,
.dash-kpi-badge.dash-icon-chip--zinc {
  background: color-mix(in srgb, #a1a1aa 16%, transparent);
  border-color: color-mix(in srgb, #a1a1aa 20%, transparent);
  color: #d4d4d8;
}

.dash-icon-chip--sky .fa-facebook {
  color: #60a5fa;
}

.dash-icon-chip--zinc .fa-tiktok {
  color: #e4e4e7;
}

/* Sidebar hover — chip surface only; Lucide stroke keeps module color */
.sidebar-link:hover .dash-icon-chip,
.sidebar-group-toggle:hover .dash-icon-chip {
  border-color: color-mix(in srgb, #ffffff 18%, transparent);
  background: color-mix(in srgb, #ffffff 9%, transparent);
}

/* Sublink hierarchy: muted stroke → brighter on hover/active */
#main-sidebar .sidebar-sublink .dash-icon-chip {
  color: #a1a1aa;
}
#main-sidebar .sidebar-sublink:hover .dash-icon-chip {
  color: #e4e4e7;
}
#main-sidebar .sidebar-sublink.active .dash-icon-chip {
  color: #e4e4e7;
}
#main-sidebar [data-module="orders"] .sidebar-sublink.active .dash-icon-chip { color: #fbbf24; }
#main-sidebar [data-module="stock"] .sidebar-sublink.active .dash-icon-chip { color: #67e8f9; }
#main-sidebar [data-module="catalog"] .sidebar-sublink.active .dash-icon-chip { color: #34d399; }
#main-sidebar [data-module="crm"] .sidebar-sublink.active .dash-icon-chip { color: #c4b5fd; }
#main-sidebar [data-module="marketing"] .sidebar-sublink.active .dash-icon-chip { color: #e879f9; }
#main-sidebar [data-module="finance"] .sidebar-sublink.active .dash-icon-chip { color: #38bdf8; }
#main-sidebar [data-module="settings"] .sidebar-sublink.active .dash-icon-chip { color: #e4e4e7; }
#main-sidebar .sidebar-sublink.sidebar-sublink-featured .dash-icon-chip {
  color: #c4b5fd;
}

#main-sidebar a.sidebar-link[data-module="overview"] .dash-icon-chip--ghost {
  color: #a5b4fc;
}

/* Active: module ring — never force icons red */
.sidebar-link.active .dash-icon-chip {
  background: color-mix(in srgb, #ffffff 10%, transparent);
  border-color: color-mix(in srgb, #ffffff 22%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #ffffff 10%, transparent);
}

.sidebar-link.active[data-module="overview"] .dash-icon-chip,
[data-module="overview"] > .sidebar-group-toggle .dash-icon-chip {
  border-color: color-mix(in srgb, #6366f1 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #6366f1 20%, transparent);
  color: #a5b4fc;
}

.sidebar-link.active[data-module="orders"] .dash-icon-chip,
[data-module="orders"] .sidebar-link.active .dash-icon-chip,
[data-module="orders"].sidebar-nav-group.sidebar-group-open > .sidebar-group-toggle .dash-icon-chip {
  border-color: color-mix(in srgb, #f59e0b 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #f59e0b 20%, transparent);
  color: #fbbf24;
}

.sidebar-link.active[data-module="stock"] .dash-icon-chip,
[data-module="stock"] .sidebar-link.active .dash-icon-chip,
[data-module="stock"].sidebar-nav-group.sidebar-group-open > .sidebar-group-toggle .dash-icon-chip {
  border-color: color-mix(in srgb, #22d3ee 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #22d3ee 20%, transparent);
  color: #67e8f9;
}

.sidebar-link.active[data-module="catalog"] .dash-icon-chip,
[data-module="catalog"] .sidebar-link.active .dash-icon-chip,
[data-module="catalog"].sidebar-nav-group.sidebar-group-open > .sidebar-group-toggle .dash-icon-chip {
  border-color: color-mix(in srgb, #10b981 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #10b981 20%, transparent);
  color: #34d399;
}

.sidebar-link.active[data-module="crm"] .dash-icon-chip,
[data-module="crm"] .sidebar-link.active .dash-icon-chip,
[data-module="crm"].sidebar-nav-group.sidebar-group-open > .sidebar-group-toggle .dash-icon-chip {
  border-color: color-mix(in srgb, #8b5cf6 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #8b5cf6 20%, transparent);
  color: #c4b5fd;
}

.sidebar-link.active[data-module="marketing"] .dash-icon-chip,
[data-module="marketing"] .sidebar-link.active .dash-icon-chip,
[data-module="marketing"].sidebar-nav-group.sidebar-group-open > .sidebar-group-toggle .dash-icon-chip {
  border-color: color-mix(in srgb, #d946ef 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #d946ef 20%, transparent);
  color: #e879f9;
}

.sidebar-link.active[data-module="finance"] .dash-icon-chip,
[data-module="finance"] .sidebar-link.active .dash-icon-chip,
[data-module="finance"].sidebar-nav-group.sidebar-group-open > .sidebar-group-toggle .dash-icon-chip {
  border-color: color-mix(in srgb, #0ea5e9 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #0ea5e9 20%, transparent);
  color: #38bdf8;
}

.sidebar-link.active[data-module="settings"] .dash-icon-chip,
[data-module="settings"] .sidebar-link.active .dash-icon-chip,
[data-module="settings"].sidebar-nav-group.sidebar-group-open > .sidebar-group-toggle .dash-icon-chip {
  border-color: color-mix(in srgb, #a1a1aa 45%, transparent);
  color: #d4d4d8;
}

.sidebar-sublink-featured .dash-icon-chip--ghost {
  background: color-mix(in srgb, #ffffff 10%, transparent);
  border-color: color-mix(in srgb, #8b5cf6 28%, transparent);
}

#main-sidebar .dash-icon-chip svg.lucide,
#main-sidebar .sidebar-link .dash-icon-chip > svg,
#main-sidebar .sidebar-group-toggle .dash-icon-chip > svg {
  width: 1.125rem;
  height: 1.125rem;
}

#main-sidebar .dash-icon-chip--sm svg.lucide,
#main-sidebar .sidebar-sublink .dash-icon-chip > svg {
  width: 0.95rem;
  height: 0.95rem;
}

#open-sidebar-btn [data-lucide],
#open-sidebar-btn svg.lucide {
  width: 1.25rem;
  height: 1.25rem;
  color: inherit;
}

/* Section title colored dots */
#main-sidebar .sidebar-section-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

#main-sidebar .sidebar-section-title::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: #71717a;
  flex-shrink: 0;
}

#main-sidebar .sidebar-section-title[data-tone="overview"]::before { background: #818cf8; }
#main-sidebar .sidebar-section-title[data-tone="orders"]::before { background: #fbbf24; }
#main-sidebar .sidebar-section-title[data-tone="stock"]::before { background: #22d3ee; }
#main-sidebar .sidebar-section-title[data-tone="catalog"]::before { background: #34d399; }
#main-sidebar .sidebar-section-title[data-tone="crm"]::before { background: #a78bfa; }
#main-sidebar .sidebar-section-title[data-tone="marketing"]::before { background: #e879f9; }
#main-sidebar .sidebar-section-title[data-tone="reports"]::before,
#main-sidebar .sidebar-section-title[data-tone="finance"]::before { background: #38bdf8; }
#main-sidebar .sidebar-section-title[data-tone="settings"]::before { background: #a1a1aa; }
#main-sidebar .sidebar-section-title[data-tone="design"]::before { background: #c4b5fd; }

/* Flaticon free-license style credit */
.dash-icon-attribution {
  font-size: 10px;
  line-height: 1.35;
  color: #71717a;
  padding: 0.5rem 0.75rem 0.75rem;
}
.dash-icon-attribution a {
  color: #a1a1aa;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dash-icon-attribution a:hover {
  color: #e4e4e7;
}