/* ============================================================================
   EVENT SESSION PRESENTATION | RainFocus + AEM
   ============================================================================

   Load this event-owned stylesheet AFTER the platform/catalog styles on each
   page that needs it. Use raw CSS in a RainFocus CSS field, or link to the
   hosted .css file from the RainFocus/AEM page head. Do not paste <style> tags
   into a CSS field. Remove matching older overrides after verifying the file.

   COLOR VARIABLES
     All event-level badge and tag colors are defined in Section 00 below.
     Edit the variables there to keep AEM and RainFocus in sync.

   PAGE MAP
     00  Event color variables
     01  Grid badge and gray-tag appearance: .grid-card-* classes
     02  RainFocus catalog card badges: show/hide and legacy color overrides
     03  Catalog list card gray attribute labels
     04  Session detail gray attribute labels and Key Takeaways exception

   SCOPE / DEPENDENCIES
   - Section 01 styles existing elements; the stage-creative footer JS creates
     .grid-card-badges, .grid-card-pill and .grid-card-tags on that grid only.
     CSS alone cannot create those badges or determine which data is present.
   - AEM may use Section 01 by rendering those same classes on its own cards.
     Sections 02-04 target the known RainFocus markup. If AEM uses different
     markup, its selectors must be mapped separately before styling will work.
   - Sections 02-04 do not choose which session-detail fields RainFocus outputs;
     the widget/attribute configuration controls content availability.
   - Original NVIDIA external catalog CSS is not copied into this file. These
     event overrides still depend on that stylesheet for the rest of the UI.
   ============================================================================ */

/* 00 | EVENT COLOR PALETTE
   --------------------------------------------------------------------------
   Edit these seven colors to update the event's pills and gray tags.
   The native RainFocus badge mapping below may use a different palette
   color from the generated grid pill for the same session type.
   -------------------------------------------------------------------------- */
:root {
  --esp-keynote: #76b900;       /* Keynote and Pregame: green */
  --esp-talk: #f9c500;          /* Talk, Panel, Theater, Lightning, Fireside: yellow */
  --esp-training-lab: #ef9100;  /* Generated grid Training Lab: orange */
  --esp-experts: #952fc6;       /* Connect With the Experts: purple */
  --esp-workshop: #1dbba4;      /* Full-Day Workshop: teal */

  --esp-native-dli-lab: #f29900;/* Native DLI Training Lab badge: orange */
  --esp-tag: #e0e0e0;           /* Attribute tags on cards and details */
}


/* 01 | GRID CARDS: GENERATED BADGES AND ATTRIBUTE TAGS
   --------------------------------------------------------------------------
   These are the actual colors from the previous stage-grid stylesheet.

   SESSION TYPE                 COLOR         CLASS
   Keynote, Pregame            NVIDIA green  --keynote, --pregame
   Talk, Panel, Theater Talk,  Yellow        --talk, --panel, --theater-talk,
     Lightning Talk, Fireside                  --lightning-talk, --fireside-chat
   Training Lab                Orange        --training-lab
   Connect With the Experts    Purple        --connect-with-the-experts
   Full-Day Workshop           Teal          --full-day-workshop
   Featured                    White/outline --featured

   The grid JS places Session Type and Featured badges before the card title.
   It places Key Theme, Industry Segment, Technical Level gray tags at the
   bottom of the card body, in that order. AEM must output equivalent markup
   for these styles to apply. These selectors intentionally do not style list
   cards or the platform's .badge elements.
   -------------------------------------------------------------------------- */

.grid-card-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 0;
  margin: 0 0 10px;
}

.grid-card-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 8px;
  border: 0;
  border-radius: 50px;
  color: #000;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

.grid-card-pill--featured {
  background: #fff;
  border: 1.5px solid #636363;
}

/* GREEN: Keynote / Pregame */
.grid-card-pill--keynote,
.grid-card-pill--pregame { background: var(--esp-keynote); }

/* YELLOW: Talk / Panel / Theater Talk / Lightning Talk / Fireside Chat */
.grid-card-pill--talk,
.grid-card-pill--panel,
.grid-card-pill--theater-talk,
.grid-card-pill--lightning-talk,
.grid-card-pill--fireside-chat { background: var(--esp-talk); }

/* ORANGE: Training Lab */
.grid-card-pill--training-lab { background: var(--esp-training-lab); }

/* PURPLE: Connect With the Experts */
.grid-card-pill--connect-with-the-experts {
  background: var(--esp-experts);
  color: #fff;
}

/* TEAL: Full-Day Workshop */
.grid-card-pill--full-day-workshop { background: var(--esp-workshop); }

/* GRAY: Key Theme, Industry Segment, Technical Level on grid cards */
.grid-card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 10px 0 0;
}

.grid-card-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px;
  background: var(--esp-tag);
  color: #000;
  font-size: 11px !important;
  font-weight: 400;
  line-height: 12px;
}


/* 02 | RAINFOCUS CATALOG BADGES (LIST / CARD / MODAL)
   --------------------------------------------------------------------------
   SHOW: Session Type badge; In Person / Virtual on full-day workshop cards;
         Training Lab and Capacity Checkbox on catalog cards.
   HIDE: duplicate Submission Type on catalog cards AND their modal;
         native Featured Sessions badge on catalog cards;
         Training Lab badge's extra ::after label on cards/details/modal.

   The stage-grid JS creates its own outlined Featured pill. That is separate
   from the native Featured Sessions badge hidden here.

   The old footer set native Fireside Chat red first, then yellow later.
   Only the final yellow rule is retained to remove the dead conflict.
   The native badge colors below are intentionally separate from Section 01:
     Fireside Chat: yellow (#f9c500)
     Talks & Panels: orange (#ef9100)
     DLI Training Lab: orange (#f29900)
     Training Lab: yellow (#f9c500), when RainFocus uses .rf-training-lab
   Verify actual badge classes in this event before consolidating these two
   Training Lab selectors or changing native colors to match generated pills.
   -------------------------------------------------------------------------- */

/* Hide Submission Type; keep Session Type visible. */
[id*=rf-].rf-widget .catalog-result .badges .badge.rf-submission-type,
.rf-default-modal .catalog-result .badges .badge.rf-submission-type {
  display: none;
}

/* Hide RainFocus's native Featured badge on cards. */
[id*=rf-].rf-widget .catalog-result .badges .badge.rf-featured-sessions,
.badge-attribute-featuredsessions {
  display: none !important;
}

/* Preserve attendance mode badges on Full-Day Workshop cards. */
[id*=rf-].rf-widget .catalog-result.session-type-dli-full-day-workshop .badges .rf-in-person,
[id*=rf-].rf-widget .catalog-result.session-type-dli-full-day-workshop .badges .rf-virtual {
  display: block !important;
}

/* Native Session Type colors (separate from the generated grid pills). */
[id*='rf-'].rf-widget .catalog-result .badges > .rf-session-type.rf-fireside-chat {
  background-color: var(--esp-talk);
}
[id*='rf-'].rf-widget .catalog-result .badges > .rf-session-type.rf-talks--panels {
  background-color: var(--esp-training-lab);
}
[id*='rf-'].rf-widget .catalog-result .badges > .rf-dli-training-lab {
  display: block;
  background-color: var(--esp-native-dli-lab);
  color: #000;
}
[id*='rf-'].rf-widget .catalog-result .badges > .rf-training-lab {
  display: block;
  background-color: var(--esp-talk);
  color: #000;
}

/* Remove the appended Training Lab label; preserve the badge itself. */
[id*=rf-].rf-widget .catalog-result .badges .badge.rf-training-lab::after,
[id*=rf-].rf-widget .session-details-page .badges .badge.rf-training-lab::after,
.rf-default-modal .catalog-result .badges .badge.rf-training-lab::after,
.rf-default-modal .session-details-page .badges .badge.rf-training-lab::after {
  display: none;
}

/* Preserve the original Full-Day Workshop suffix on the native card badge. */
[id*='rf-'].rf-widget .catalog-result .badges > .badge.badge-attribute-sessiontype.rf-full-day-workshop::after {
  content: " $";
}

/* Capacity Checkbox: outlined badge; suppress duplicate attribute name. */
[id*=rf-].rf-widget .catalog-result .badges .badge.rf-capacity-checkbox.badge-attribute-capacitycheckbox {
  display: block;
  border: 2px solid;
}
.attribute-CapacityCheckbox span.attribute-name { display: none; }
.attribute-CapacityCheckbox span.attribute-values {
  border: 2px solid #000;
  border-radius: 12px;
  padding: 2px 8px 3px;
  font-size: 12px;
}


/* 03 | RAINFOCUS LIST CARDS: GRAY ATTRIBUTE TAGS
   --------------------------------------------------------------------------
   Hide attribute names; render their existing values as gray tags on session
   result cards. This is the original broad RainFocus selector, which applies
   to every attribute in matching .user-text-content, not only Key Theme.
   -------------------------------------------------------------------------- */

.catalog-result.session-result .user-text-content:has(.attribute-name) span.attribute-name {
  display: none;
}
.catalog-result.session-result .user-text-content:has(.attribute-name) span.attribute-values {
  background: var(--esp-tag);
  padding: 5px;
  font-size: 12px;
}
.catalog-result.session-result .user-text-content:has(.attribute-name) {
  display: inline-block;
  margin-right: 10px;
  padding-bottom: 9px;
}


/* 04 | SESSION DETAIL: ATTRIBUTES AND KEY TAKEAWAYS
   --------------------------------------------------------------------------
   Key Theme, Industry Segment and Technical Level remain in the page output.
   Their names are visually hidden; values become gray tags. Other fields and
   the Key Takeaways content are left to RainFocus's content configuration.
   For SB61112 and SB61113, the original rule removes the list indentation
   from Point/Takeaway attributes because each has only one item.
   -------------------------------------------------------------------------- */

.session-details-container .user-text-content .attribute-KeyTheme:has(.attribute-name) span.attribute-name,
.session-details-container .user-text-content .attribute-IndustrySegment:has(.attribute-name) span.attribute-name,
.session-details-container .user-text-content .attribute-TechnicalLevel:has(.attribute-name) span.attribute-name {
  display: none;
}

.session-details-container .user-text-content .attribute-KeyTheme:has(.attribute-name) span.attribute-values,
.session-details-container .user-text-content .attribute-IndustrySegment:has(.attribute-name) span.attribute-values,
.session-details-container .user-text-content .attribute-TechnicalLevel:has(.attribute-name) span.attribute-values {
  background: var(--esp-tag);
  padding: 5px;
  font-size: 12px;
}

.session-details-container .user-text-content:has(.attribute-KeyTheme),
.session-details-container .user-text-content:has(.attribute-IndustrySegment),
.session-details-container .user-text-content:has(.attribute-TechnicalLevel) {
  display: inline-block;
  margin-right: 10px;
  padding-bottom: 9px;
}

/* Session IDs SB61112 / SB61113 only: single Key Takeaway, no list indent. */
#widget-page-session-details:has([aria-label*="[SB61112]"]) div[class*="attribute-Point"],
#widget-page-session-details:has([aria-label*="[SB61113]"]) div[class*="attribute-Point"] {
  display: block !important;
  margin-left: 0 !important;
}