/* SPORYA HUB — unified Font Awesome 6 icon system */
:root{
  --sp-icon-white:#fff;
  --sp-icon-surface:#252538;
  --sp-icon-active:#6541fb;
  --sp-icon-success:#20b486;
  --sp-icon-warning:#f4b740;
  --sp-icon-danger:#e5484d;
  --sp-icon-info:#3b82f6;
  --sp-icon-glow:0 0 20px rgba(101,65,251,.38);
}

.sp-fa-icon{
  color:var(--sp-icon-white)!important;
  line-height:1!important;
  text-align:center;
  flex:0 0 auto;
}
.sp-svg-icon::before{
  display:none!important;
  content:none!important;
}
.sp-svg-icon>.sp-svg-source{
  display:block!important;
  width:1em!important;
  height:1em!important;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:brightness(0) invert(1);
  pointer-events:none;
  user-select:none;
}
.sp-svg-icon.sp-svg-original>.sp-svg-source{filter:none}
[dir="ltr"] .sp-svg-icon[data-sp-svg-asset="actions/back-rtl.svg"]>.sp-svg-source{
  transform:scaleX(-1);
}

/* Navigation: compact outline glyphs; the row carries the interaction state. */
.sidebar nav a>.sp-nav-icon,
.admin-nav a>.sp-nav-icon{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  display:inline-grid!important;
  place-items:center!important;
  background:transparent!important;
  color:currentColor!important;
  font-size:18px!important;
  box-shadow:none;
  transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease!important;
}
.sidebar nav a:hover>.sp-nav-icon,
.admin-nav a:hover>.sp-nav-icon{
  background:rgba(101,65,251,.08)!important;
  border-color:rgba(101,65,251,.16)!important;
  box-shadow:none!important;
  transform:none;
}
.sidebar nav a.active>.sp-nav-icon,
.admin-nav a.active>.sp-nav-icon{
  background:rgba(101,65,251,.12)!important;
  border-color:rgba(101,65,251,.22)!important;
  box-shadow:none!important;
}
.sidebar .logout .sp-nav-icon{font-size:20px!important;color:#fff!important}

/* Section symbols use a quiet outlined surface, not a repeated solid tile. */
.sp-section-icon,
.section-badge>.sp-fa-icon,
.panel-title h2>.sp-fa-icon:first-child,
.panel-title h3>.sp-fa-icon:first-child,
.filters-title h3>.sp-fa-icon:first-child{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  display:inline-grid!important;
  place-items:center!important;
  border:1px solid var(--sp-icon-border,rgba(101,65,251,.18))!important;
  border-radius:10px!important;
  background:var(--sp-icon-surface,rgba(101,65,251,.1))!important;
  color:var(--sp-icon-color,#9d8bff)!important;
  font-size:18px!important;
  box-shadow:none;
}
.page-intro h1>.sp-section-icon{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border-radius:9px!important;
  font-size:17px!important;
  margin:0!important;
}

/* Card glyphs live on a subtle outline surface; solid purple is reserved for actions. */
.sp-card-icon{
  color:var(--sp-icon-color,#9d8bff)!important;
}
.sp-card-icon>.sp-fa-icon,
.sp-card-icon.sp-fa-icon{
  color:inherit!important;
  font-size:18px!important;
}
.stat-icon.sp-card-icon,
.kpi-icon.sp-card-icon,
.feature-icon.sp-card-icon,
.module-caption>span.sp-card-icon,
.workflow-step>span.sp-card-icon,
.role-card>span.sp-card-icon{
  display:grid!important;
  place-items:center!important;
  background:var(--sp-icon-surface,rgba(101,65,251,.1))!important;
  border:1px solid var(--sp-icon-border,rgba(101,65,251,.18))!important;
}
.feature-icon.sp-card-icon,
.module-caption>span.sp-card-icon,
.workflow-step>span.sp-card-icon,
.role-card>span.sp-card-icon{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  border-radius:10px!important;
}
.public-nav a>.sp-public-nav-icon{
  color:#fff!important;
  font-size:20px!important;
}

/* Action icons stay aligned with their labels without adding another visual tile. */
.sp-action{
  position:relative;
  gap:8px!important;
}
.sp-action>.sp-action-icon{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  display:inline-grid!important;
  place-items:center!important;
  border-radius:0!important;
  background:transparent!important;
  color:currentColor!important;
  font-size:16px!important;
  box-shadow:none!important;
}
.sp-action.sp-action-primary>.sp-action-icon,.sp-action.primary>.sp-action-icon,
.sp-action.sp-action-view>.sp-action-icon,.sp-action.sp-action-info>.sp-action-icon,
.sp-action.sp-action-save>.sp-action-icon,.sp-action.sp-action-send>.sp-action-icon,
.sp-action.sp-action-approve>.sp-action-icon,.sp-action.sp-action-excel>.sp-action-icon,
.sp-action.sp-action-restore>.sp-action-icon,.sp-action.sp-action-edit>.sp-action-icon,
.sp-action.sp-action-return>.sp-action-icon,.sp-action.sp-action-reset>.sp-action-icon,
.sp-action.sp-action-warning>.sp-action-icon,.sp-action.sp-action-delete>.sp-action-icon,
.sp-action.sp-action-reject>.sp-action-icon,.sp-action.sp-action-pdf>.sp-action-icon{background:transparent!important;color:currentColor!important}
.sp-action-label{display:inline-block}

/* Icon-only controls retain their 40px touch target and use a native/Bootstrap tooltip. */
.sp-icon-only{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  padding:0!important;
  display:inline-grid!important;
  place-items:center!important;
}
.sp-icon-only>.sp-fa-icon{
  font-size:18px!important;
  color:#fff!important;
}

/* Status icons are outline glyphs with no filled tile; the badge owns the tone. */
.status>.sp-status-icon{
  width:13px!important;
  height:13px!important;
  min-width:13px!important;
  display:inline-grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  font-size:12px!important;
  box-shadow:none!important;
}
.status.pending>.sp-status-icon,
.status.resubmitted>.sp-status-icon,
.status.changes_requested>.sp-status-icon,
.status.needs_update>.sp-status-icon,
.status.incomplete>.sp-status-icon{background:transparent!important}
.status.approved>.sp-status-icon,
.status.completed>.sp-status-icon,
.status.active>.sp-status-icon,
.status.finished>.sp-status-icon,
.status.published>.sp-status-icon{background:transparent!important}
.status.rejected>.sp-status-icon,
.status.urgent>.sp-status-icon,
.status.result_overdue>.sp-status-icon,
.status.inactive>.sp-status-icon,
.status.cancelled>.sp-status-icon{background:transparent!important}
.status.upcoming>.sp-status-icon,
.status.planned>.sp-status-icon{background:transparent!important}
.status>.sp-status-icon>.sp-svg-source{filter:brightness(0) saturate(100%) invert(43%) sepia(91%) saturate(1427%) hue-rotate(196deg) brightness(98%) contrast(96%)!important}
.status.pending>.sp-status-icon>.sp-svg-source,
.status.resubmitted>.sp-status-icon>.sp-svg-source,
.status.changes_requested>.sp-status-icon>.sp-svg-source,
.status.needs_update>.sp-status-icon>.sp-svg-source,
.status.incomplete>.sp-status-icon>.sp-svg-source,
.status.planned>.sp-status-icon>.sp-svg-source,
.status.warning>.sp-status-icon>.sp-svg-source{filter:brightness(0) saturate(100%) invert(69%) sepia(79%) saturate(780%) hue-rotate(355deg) brightness(101%) contrast(92%)!important}
.status.approved>.sp-status-icon>.sp-svg-source,
.status.completed>.sp-status-icon>.sp-svg-source,
.status.active>.sp-status-icon>.sp-svg-source,
.status.finished>.sp-status-icon>.sp-svg-source,
.status.ongoing>.sp-status-icon>.sp-svg-source,
.status.published>.sp-status-icon>.sp-svg-source,
.status.success>.sp-status-icon>.sp-svg-source{filter:brightness(0) saturate(100%) invert(60%) sepia(73%) saturate(445%) hue-rotate(111deg) brightness(90%) contrast(91%)!important}
.status.rejected>.sp-status-icon>.sp-svg-source,
.status.urgent>.sp-status-icon>.sp-svg-source,
.status.result_overdue>.sp-status-icon>.sp-svg-source,
.status.inactive>.sp-status-icon>.sp-svg-source,
.status.cancelled>.sp-status-icon>.sp-svg-source,
.status.suspended>.sp-status-icon>.sp-svg-source,
.status.injured>.sp-status-icon>.sp-svg-source,
.status.danger>.sp-status-icon>.sp-svg-source{filter:brightness(0) saturate(100%) invert(40%) sepia(86%) saturate(1324%) hue-rotate(324deg) brightness(97%) contrast(87%)!important}
.status.draft>.sp-status-icon>.sp-svg-source,
.status.closed>.sp-status-icon>.sp-svg-source,
.status.neutral>.sp-status-icon>.sp-svg-source{filter:brightness(0) saturate(100%) invert(47%) sepia(7%) saturate(647%) hue-rotate(177deg) brightness(88%) contrast(86%)!important}

/* Medal color is carried by the tile only; all medal glyphs remain white. */
.medal-gold .sp-fa-icon,.gold .sp-fa-icon{color:#fff!important}
.medal-silver .sp-fa-icon,.silver .sp-fa-icon{color:#fff!important}
.medal-bronze .sp-fa-icon,.bronze .sp-fa-icon{color:#fff!important}

/* Public area shares the same icon language without changing its decorative artwork. */
.public-site .sp-section-icon,
.public-login-page .sp-section-icon{background:var(--sp-icon-active)!important;color:#fff!important}
.public-site .public-button>.sp-action-icon,
.public-login-page button>.sp-action-icon,
.public-login-page a>.sp-action-icon{font-size:17px!important;color:#fff!important}

@media(max-width:700px){
  .sidebar nav a>.sp-nav-icon,.admin-nav a>.sp-nav-icon{font-size:20px!important}
  .sp-action>.sp-action-icon{width:26px!important;height:26px!important;min-width:26px!important;font-size:16px!important}
}

@media(prefers-reduced-motion:reduce){
  .sp-nav-icon,.sp-action-icon{transition:none!important}
}

/* Light mode keeps the same outline contract with a dark-purple glyph. */
.portal.light .sidebar nav a>.sp-nav-icon,.portal.light .admin-nav a>.sp-nav-icon{background:transparent!important;color:currentColor!important;box-shadow:none!important}
.portal.light .sidebar nav a:hover>.sp-nav-icon,.portal.light .admin-nav a:hover>.sp-nav-icon{background:#f4f1ff!important;border-color:#ded7ff!important;box-shadow:none!important}
.portal.light .sidebar nav a.active>.sp-nav-icon,.portal.light .admin-nav a.active>.sp-nav-icon{background:#eee9ff!important;border-color:#d9d0ff!important;color:#6541fb!important;box-shadow:none!important}

/* In light mode a plain SVG must be dark enough to read; glyphs on colored tiles stay white. */
.portal.light .sp-svg-icon>.sp-svg-source,
.public-site.light .sp-svg-icon>.sp-svg-source,
.public-login-page.light .sp-svg-icon>.sp-svg-source{
  filter:brightness(0) saturate(100%) invert(24%) sepia(93%) saturate(3654%) hue-rotate(252deg) brightness(78%) contrast(102%)
}
.portal.light .sp-action-icon>.sp-svg-source,
.portal.light .sp-status-icon>.sp-svg-source,
.portal.light .sport-symbol .sp-svg-source,
.portal.light .day-toggle span i .sp-svg-source,
.portal.light .topbar .menu-toggle .sp-svg-source,
.portal.light .top-actions>button .sp-svg-source,
.portal.light .notification-bell .sp-svg-source,
.portal.light .user-chip>span .sp-svg-source,
.portal.light .main-content h2>i .sp-svg-source,
.portal.light .main-content h3>i .sp-svg-source,
.public-site.light .sp-action-icon>.sp-svg-source,
.public-site.light .public-language-button .sp-svg-source,
.public-site.light .public-theme-button .sp-svg-source,
.public-site.light .public-login-button .sp-svg-source,
.public-login-page.light button .sp-action-icon>.sp-svg-source,
.public-login-page.light a .sp-action-icon>.sp-svg-source{
  filter:brightness(0) invert(1)
}

/* Public cards consume the same premium outlined icon surface as the portal. */
.public-site :is(.feature-icon,.capability-grid>article>i,.platform-overview-points article>span,
.problem-card>span,.workflow-step>span,.module-caption>span,.role-card>span,
.analytics-card header>i,.trust-points article>span){
  background:var(--public-icon-bg,rgba(101,65,251,.1))!important;
  border:1px solid var(--public-icon-border,rgba(145,125,255,.2))!important;
  color:var(--public-icon-color,#fff)!important;box-shadow:none!important
}
.public-site :is(.feature-icon,.capability-grid>article>i,.platform-overview-points article>span,
.problem-card>span,.workflow-step>span,.module-caption>span,.role-card>span,
.analytics-card header>i,.trust-points article>span)>i{color:inherit!important}