/* ============================================================
   Company OS — CSS pseudo-element icons
   Lifted verbatim from company-os V1/src/features/company-os/company-os.css
   These are the icons the production codebase actually uses.
   ============================================================ */

.icon-grid,
.icon-list,
.icon-bars,
.icon-gear,
.search-icon,
.filter-icon {
  width: 15px;
  height: 15px;
  display: inline-block;
  position: relative;
  color: currentColor;
}

/* 4-cell grid — "boards" */
.icon-grid {
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 5px 5px,
    linear-gradient(currentColor, currentColor) 10px 0 / 5px 5px,
    linear-gradient(currentColor, currentColor) 0 10px / 5px 5px,
    linear-gradient(currentColor, currentColor) 10px 10px / 5px 5px;
  background-repeat: no-repeat;
}

/* Three horizontal lines — "list / backlog" */
.icon-list::before,
.icon-bars::before,
.icon-gear::before,
.search-icon::before,
.filter-icon::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.icon-list::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 7px;
  border-top: 2px solid currentColor;
}

/* Three colored bars — "analytics" — the literal 5S color metric */
.icon-bars::before {
  inset: auto 2px 1px 2px;
  height: 12px;
  border: 0;
  background:
    linear-gradient(#4aa3ff, #4aa3ff) 0 7px / 3px 5px,
    linear-gradient(#3ed277, #3ed277) 6px 2px / 3px 10px,
    linear-gradient(#ffb340, #ffb340) 12px 5px / 3px 7px;
  background-repeat: no-repeat;
}

/* Settings — circular */
.icon-gear::before {
  border: 2px solid currentColor;
  border-radius: 50%;
}

/* Search */
.search-icon::before {
  border: 2px solid currentColor;
  border-radius: 50%;
  inset: 1px 4px 4px 1px;
}
.search-icon::after {
  content: "";
  position: absolute;
  width: 6px;
  border-top: 2px solid currentColor;
  right: 0;
  bottom: 1px;
  transform: rotate(45deg);
}

/* Filter */
.filter-icon::before {
  inset: 4px 1px auto 1px;
  border: 0;
  border-top: 2px solid currentColor;
}
.filter-icon::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 8px;
  border-top: 2px solid currentColor;
}

/* Chevron — disclosure arrow */
.chevron {
  border: solid currentColor;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 4px;
  transform: rotate(45deg) translateY(-2px);
}
.chevron-down { transform: rotate(45deg); }
.chevron-up   { transform: rotate(-135deg); }
.chevron-left { transform: rotate(135deg); }
.chevron-right { transform: rotate(-45deg); }

/* Star — favourite */
.star {
  color: #ffc928;
  font-size: 21px;
  line-height: 1;
  font-style: normal;
}
.star::before { content: "*"; }