/* massarLAB Central Icon System */
:root {
  --massar-icon-size: 1.15rem;
  --massar-icon-stroke: 1.9;
  --massar-icon-muted: #667085;
  --massar-icon-primary: #245c4f;
  --massar-icon-danger: #b42318;
  --massar-icon-warning: #b54708;
  --massar-icon-success: #067647;
}

.massar-icon {
  width: var(--massar-icon-width, var(--massar-icon-size));
  height: var(--massar-icon-height, var(--massar-icon-size));
  min-width: var(--massar-icon-width, var(--massar-icon-size));
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -0.16em;
  overflow: visible;
  color: inherit;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--massar-icon-stroke);
  pointer-events: none;
}

.massar-icon--legacy {
  margin-inline: 0.08em 0.32em;
}

[dir="rtl"] .massar-icon--legacy {
  margin-inline: 0.08em 0.32em;
}

.massar-icon--xs { --massar-icon-size: 0.8rem; }
.massar-icon--sm { --massar-icon-size: 1rem; }
.massar-icon--md { --massar-icon-size: 1.25rem; }
.massar-icon--lg { --massar-icon-size: 1.5rem; }
.massar-icon--xl { --massar-icon-size: 2rem; }
.massar-icon--2xl { --massar-icon-size: 2.5rem; }

.massar-icon--muted { color: var(--massar-icon-muted); }
.massar-icon--primary { color: var(--massar-icon-primary); }
.massar-icon--success { color: var(--massar-icon-success); }
.massar-icon--warning { color: var(--massar-icon-warning); }
.massar-icon--danger { color: var(--massar-icon-danger); }

.massar-icon-spin,
.massar-icon--refresh.massar-icon-spin,
[aria-busy="true"] > .massar-icon--refresh {
  animation: massar-icon-spin 0.9s linear infinite;
  transform-origin: center;
}

@keyframes massar-icon-spin {
  to { transform: rotate(360deg); }
}

button > .massar-icon,
a > .massar-icon,
label > .massar-icon,
.nav-item > .massar-icon,
.menu-item > .massar-icon {
  margin-inline-end: 0.42rem;
}

.icon > .massar-icon,
.icon.massar-icon,
button.icon-only > .massar-icon,
a.icon-only > .massar-icon {
  margin-inline-end: 0;
}

button.icon-only,
a.icon-only {
  min-width: 2.5rem;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar-nav .icon.massar-icon,
.sidebar-nav .icon > .massar-icon,
[data-team-chat-nav] .massar-icon {
  --massar-icon-size: 1.18rem;
  margin-inline-end: 0;
}

.empty-state > .massar-icon,
.empty-state .icon > .massar-icon,
.empty-state .icon.massar-icon {
  --massar-icon-size: 2.25rem;
}

.massar-icon-placeholder,
[data-massar-icon]:not(svg) {
  display: inline-block;
  width: 1em;
  height: 1em;
}

@media (prefers-reduced-motion: reduce) {
  .massar-icon-spin,
  [aria-busy="true"] > .massar-icon--refresh {
    animation: none;
  }
}

/* Support option icons use the SVG as the visual tile. */
.massar-support-icon.massar-icon {
  box-sizing: border-box;
  padding: 10px;
  stroke-width: 1.8;
}


/* massarLAB Navigation & Statistics Color System — 2026-07-28 */
:root {
  --massar-sidebar-icon: #a9afb7;
  --massar-sidebar-icon-hover: #9fd3b2;
  --massar-stat-green: #2f8f5b;
  --massar-stat-green-bg: #eaf6ef;
  --massar-stat-blue: #3674c8;
  --massar-stat-blue-bg: #edf4ff;
  --massar-stat-purple: #7559c7;
  --massar-stat-purple-bg: #f2eeff;
  --massar-stat-gold: #b87912;
  --massar-stat-gold-bg: #fff7df;
  --massar-stat-orange: #c96d1b;
  --massar-stat-orange-bg: #fff0e3;
}

/* Sidebar icons stay calm, become green on hover, and white when active. */
.sidebar .sidebar-nav .nav-item .icon,
.sidebar .sidebar-nav .nav-item > .massar-icon,
.sidebar .sidebar-nav .nav-item .icon.massar-icon,
.sidebar .sidebar-nav .nav-item .icon > .massar-icon {
  color: var(--massar-sidebar-icon) !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.sidebar .sidebar-nav .nav-item:hover .icon,
.sidebar .sidebar-nav .nav-item:hover > .massar-icon,
.sidebar .sidebar-nav .nav-item:hover .icon.massar-icon,
.sidebar .sidebar-nav .nav-item:hover .icon > .massar-icon {
  color: var(--massar-sidebar-icon-hover) !important;
  transform: translateY(-1px) !important;
}

.sidebar .sidebar-nav .nav-item.active .icon,
.sidebar .sidebar-nav .nav-item.active > .massar-icon,
.sidebar .sidebar-nav .nav-item.active .icon.massar-icon,
.sidebar .sidebar-nav .nav-item.active .icon > .massar-icon,
html.pre-section-groupTeams .sidebar .sidebar-nav .nav-item[data-admin-section="groupTeams"] .icon,
html.pre-section-groupTeams .sidebar .sidebar-nav .nav-item[data-admin-section="groupTeams"] .massar-icon {
  color: #ffffff !important;
  transform: none !important;
}

/* Statistics icon tiles: shared sizing and visual rhythm. */
.stats-grid .stat-card .stat-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 13px !important;
  margin-bottom: 12px !important;
  font-size: 0 !important;
  background: #f2f4f5 !important;
  color: #667085 !important;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.035) !important;
}

.stats-grid .stat-card .stat-icon .massar-icon,
.stats-grid .stat-card .stat-icon.massar-icon {
  --massar-icon-size: 23px;
  margin: 0 !important;
  color: inherit !important;
  stroke-width: 1.9 !important;
}

/* Teams / groups — green. */
.stats-grid .stat-card[data-stat="teams"] .stat-icon,
.stats-grid .stat-card[data-stat="groups"] .stat-icon {
  color: var(--massar-stat-green) !important;
  background: var(--massar-stat-green-bg) !important;
}
.stats-grid .stat-card[data-stat="teams"] .stat-num,
.stats-grid .stat-card[data-stat="teams"] .stat-number,
.stats-grid .stat-card[data-stat="groups"] .stat-num,
.stats-grid .stat-card[data-stat="groups"] .stat-number {
  color: var(--massar-stat-green) !important;
}

/* Members / users — blue. */
.stats-grid .stat-card[data-stat="members"] .stat-icon,
.stats-grid .stat-card[data-stat="users"] .stat-icon,
.stats-grid .stat-card[data-stat="subscriptions"] .stat-icon {
  color: var(--massar-stat-blue) !important;
  background: var(--massar-stat-blue-bg) !important;
}
.stats-grid .stat-card[data-stat="members"] .stat-num,
.stats-grid .stat-card[data-stat="members"] .stat-number,
.stats-grid .stat-card[data-stat="users"] .stat-num,
.stats-grid .stat-card[data-stat="users"] .stat-number,
.stats-grid .stat-card[data-stat="subscriptions"] .stat-num,
.stats-grid .stat-card[data-stat="subscriptions"] .stat-number {
  color: var(--massar-stat-blue) !important;
}

/* Administrators — purple. */
.stats-grid .stat-card[data-stat="admins"] .stat-icon {
  color: var(--massar-stat-purple) !important;
  background: var(--massar-stat-purple-bg) !important;
}
.stats-grid .stat-card[data-stat="admins"] .stat-num,
.stats-grid .stat-card[data-stat="admins"] .stat-number {
  color: var(--massar-stat-purple) !important;
}

/* Pending invitations — gold. */
.stats-grid .stat-card[data-stat="pending-invites"] .stat-icon,
.stats-grid .stat-card[data-stat="invites"] .stat-icon {
  color: var(--massar-stat-gold) !important;
  background: var(--massar-stat-gold-bg) !important;
}
.stats-grid .stat-card[data-stat="pending-invites"] .stat-num,
.stats-grid .stat-card[data-stat="pending-invites"] .stat-number,
.stats-grid .stat-card[data-stat="invites"] .stat-num,
.stats-grid .stat-card[data-stat="invites"] .stat-number {
  color: var(--massar-stat-gold) !important;
}

/* Join requests — orange. */
.stats-grid .stat-card[data-stat="pending-requests"] .stat-icon,
.stats-grid .stat-card[data-stat="requests"] .stat-icon {
  color: var(--massar-stat-orange) !important;
  background: var(--massar-stat-orange-bg) !important;
}
.stats-grid .stat-card[data-stat="pending-requests"] .stat-num,
.stats-grid .stat-card[data-stat="pending-requests"] .stat-number,
.stats-grid .stat-card[data-stat="requests"] .stat-num,
.stats-grid .stat-card[data-stat="requests"] .stat-number {
  color: var(--massar-stat-orange) !important;
}

/* Keep icon tiles balanced on small screens. */
@media (max-width: 760px) {
  .stats-grid .stat-card .stat-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
}