/* =========================================================
   ELIZNA ADMIN ICON ARCHITECTURE R12-R4
   28 AUGUST 2026
   ========================================================= */

/* Brand icons used only in approved dashboard contexts */
.elz-r12-brand-icon {
  display: inline-block;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-right: 6px;
  border-radius: 5px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 2px 4px rgba(46,35,20,.10));
}

.elz-r12-brand-icon[data-brand="shopify"] {
  background-image: url("/assets/elizna-channel-shopify-r12.svg");
}
.elz-r12-brand-icon[data-brand="amazon"] {
  background-image: url("/assets/elizna-channel-amazon-r12.svg");
}
.elz-r12-brand-icon[data-brand="walmart"] {
  background-image: url("/assets/elizna-channel-walmart-r12.svg");
}
.elz-r12-brand-icon[data-brand="ebay"] {
  background-image: url("/assets/elizna-channel-ebay-r12.svg");
}

.cc-product-channels .elz-r12-brand-icon {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  margin-right: 4px;
}

.cc-alert-links .elz-r12-brand-icon {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  margin-right: 5px;
}

.cc-system-tiles .elz-r12-brand-icon {
  width: 13px;
  height: 13px;
  flex-basis: 13px;
  margin-right: 5px;
}

.elz-r12-brand-decorated {
  display: inline-flex !important;
  align-items: center;
  min-width: 0;
}

/* Section glyphs */
.elz-r12-section-glyph {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0 7px 4px 0;
  border-radius: 7px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  vertical-align: middle;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 5px 10px rgba(77,54,25,.10);
}

.elz-r12-section-glyph[data-kind="commerce"],
.elz-r12-section-glyph[data-kind="activity"] {
  background: linear-gradient(145deg,#e4bf6b,#a77a2c);
}

.elz-r12-section-glyph[data-kind="marketplace"] {
  background: linear-gradient(145deg,#75acec,#3d70b8);
}

.elz-r12-section-glyph[data-kind="product"],
.elz-r12-section-glyph[data-kind="ai"] {
  background: linear-gradient(145deg,#c27bca,#754081);
}

.elz-r12-section-glyph[data-kind="customer"] {
  background: linear-gradient(145deg,#59cca0,#0e8e69);
}

.elz-r12-section-glyph[data-kind="support"] {
  background: linear-gradient(145deg,#ff9d8d,#cb5d55);
}

.elz-r12-section-glyph[data-kind="system"] {
  background: linear-gradient(145deg,#55bda0,#27785f);
}

/* ---------------------------------------------------------
   Sidebar
   Generic premium icons use CSS only.
   This does not mutate or rename native navigation nodes.
   --------------------------------------------------------- */

body aside a[href^="#/"],
body nav a[href^="#/"] {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body aside a[href^="#/"]::before,
body nav a[href^="#/"]::before {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  border-radius: 6px;
  background:
    linear-gradient(145deg,#fff,#ead9b5);
  color: #765525;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 3px 7px rgba(79,58,27,.07);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

/* Overview */
body aside a[href="#/"]::before,
body nav a[href="#/"]::before {
  content: "⌂";
}

/* Products */
body aside a[href^="#/products"]::before,
body nav a[href^="#/products"]::before {
  content: "▣";
}

/* Customer */
body aside a[href^="#/customer-experience"]::before,
body nav a[href^="#/customer-experience"]::before {
  content: "◉";
}

/* Support */
body aside a[href^="#/support"]::before,
body nav a[href^="#/support"]::before {
  content: "☏";
}

/* Media */
body aside a[href^="#/media-moderation"]::before,
body nav a[href^="#/media-moderation"]::before {
  content: "▤";
}

/* Commerce Intelligence base */
body aside a[href="#/commerce-intelligence"]::before,
body nav a[href="#/commerce-intelligence"]::before {
  content: "↗";
}

/* Marketplace Center */
body aside a[href="#/commerce-intelligence?view=marketplace-center"]::before,
body nav a[href="#/commerce-intelligence?view=marketplace-center"]::before {
  content: "◇";
}

/* Inventory */
body aside a[href^="#/inventory-control"]::before,
body nav a[href^="#/inventory-control"]::before {
  content: "⬡";
}

/* Admin Users */
body aside a[href^="#/settings?view=admin-users"]::before,
body nav a[href^="#/settings?view=admin-users"]::before {
  content: "◎";
}

/* ELIZNA AI */
body aside a[href*="view=elizna-ai"]::before,
body nav a[href*="view=elizna-ai"]::before {
  content: "✦";
  color: #764381;
  background: linear-gradient(145deg,#fff,#f0dff4);
}

/* Settings */
body aside a[href="#/settings"]::before,
body nav a[href="#/settings"]::before {
  content: "⚙";
}

/* Amazon Business Center — real Amazon brand icon via CSS.
   No JS child-node injection. */
body aside a[href="#/commerce-intelligence/amazon?view=business-center"]::before,
body nav a[href="#/commerce-intelligence/amazon?view=business-center"]::before {
  content: "";
  background:
    #fff url("/assets/elizna-channel-amazon-r12.svg")
    center / 17px 17px no-repeat;
}

/* Remove any old injected brand-icon node from nav visually;
   cleanup JS also removes them physically. */
body aside a > .elz-brand-icon,
body nav a > .elz-brand-icon {
  display: none !important;
}

/* Keep dashboard labels aligned */
.cc-radar .elz-r12-brand-decorated,
.cc-product-channels .elz-r12-brand-decorated,
.cc-bars .elz-r12-brand-decorated,
.cc-alert-links .elz-r12-brand-decorated,
.cc-system-tiles .elz-r12-brand-decorated {
  gap: 2px;
}

/* Section header text and glyph alignment */
.cc-card-head > div > .elz-r12-section-glyph + span {
  vertical-align: middle;
}

/* Responsive */
@media(max-width:760px) {
  body aside a[href^="#/"]::before,
  body nav a[href^="#/"]::before {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
  }

  .elz-r12-brand-icon {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }
}