/*
 * NEXT Symposium — Indico conference stylesheet
 *
 * Palette rationale:
 *   Header: deep institutional navy (#14304f) — reads sober / trust
 *   Subtitle & announcements: warm cream (#f4f0e6) with navy text — softens
 *      the clinical feel typical of conference software
 *   Accent (selected menu item, hover underlines): warm gold (#b8892b)
 *   Menu: soft cool-gray, thin borders — quiet, doesn't fight for attention
 *
 * The Indico standard.css exposes these `--conf-theme-*` variables. Anything
 * beyond that lives in the freeform block at the bottom.
 */

:root {
  /* Header — deep navy, white text, subtle darker underline */
  --conf-theme-header-bg: #14304f;
  --conf-theme-header-border-bottom: #0b1e33;
  --conf-theme-header-text: #ffffff;

  /* Subtitle strip below the header — warm cream, navy text */
  --conf-theme-subtitle-bg: #f4f0e6;
  --conf-theme-subtitle-border: #e0d8c3;
  --conf-theme-subtitle-text: #14304f;

  /* Left-side navigation menu */
  --conf-theme-menu-bg: #f7f8fa;
  --conf-theme-menu-border: #d9dde3;
  --conf-theme-menu-link: #14304f;
  --conf-theme-menu-selected: #b8892b;             /* warm gold accent */
  --conf-theme-menu-selected-bg: #ffffff;
  --conf-theme-menu-selected-border: #b8892b;
  --conf-theme-hover-bg: #e9edf3;
  --conf-theme-hover-color: #14304f;
  --conf-theme-title-sprite-bg: transparent;
  --conf-theme-announcement-sprite-bg: transparent;
  --conf-theme-announcement-border-top: 1px solid var(--conf-theme-announcement-border);
  --conf-theme-announcement-border-bottom: none;

  /* Support box (contact info in the sidebar) */
  --conf-theme-support-bg: #f7f8fa;
  --conf-theme-support-border: #d9dde3;
  --conf-theme-support-header-bg: #14304f;
  --conf-theme-support-header-text: #ffffff;
  --conf-theme-support-text: #4a5566;

  /* Announcements banner (news / notices strip) */
  --conf-theme-announcement-bg: #f4f0e6;
  --conf-theme-announcement-border: #d8ccae;
  --conf-theme-announcement-text: #14304f;

  /* Sprite image — Indico's built-in blue variant matches the palette */
  --conf-theme-sprite-image: url('/images/conf/sprites_blue.png');
}

/* Session-legend chair labels.
 * The compact timetable displays a row of coloured filter chips at the top:
 *   <div class="legendItem">
 *     <div class="timeTableItemColour" style="background: rgb(227, 242, 211);"></div>
 *     <span>Topic 1: Fusion</span>
 *   </div>
 * The chair is appended INLINE (no line break) via ::after on the legendItem.
 * We also reorder the legend chips to match the timetable order using CSS
 * flex `order:` (Indico's default alphabetical / discovery order isn't ideal
 * for a chronological programme). */
/* Legend chips — Indico's default uses float:left + max-width:200px, laying
 * out 3-per-row grid. We drop the float, use inline-block with the container
 * set to `white-space: nowrap` so all chips stay on ONE line, and let each
 * chip size to its actual content. */
/* IMPORTANT: Indico's JS wraps the chips in an anonymous <div> inside
 * #legendItemContainer:
 *     <div id="legendItemContainer"><div><div class="legendItem">…</div>…</div></div>
 * so the grid must go on that inner wrapper, not on #legendItemContainer. */
.timeTableLegend #legendItemContainer,
.timeTableLegend #legendItemContainer > div {
  display: grid !important;
  grid-auto-flow: column !important;      /* all chips in ONE row */
  grid-auto-columns: max-content !important;  /* each column = its content width */
  gap: 4px !important;
  overflow: visible !important;
  justify-content: start !important;
}
.timeTableLegend .legendItem {
  float: none !important;
  max-width: none !important;
  min-width: 0 !important;
  width: auto !important;
  display: inline-block !important;
  vertical-align: top !important;
  margin: 2px 4px 2px 0 !important;
  padding: 3px 8px !important;
  line-height: 1.2 !important;
  overflow: visible !important;
}
.timeTableLegend .legendItem > .timeTableItemColour {
  display: inline-block !important;
  float: none !important;
  vertical-align: middle !important;
  margin-right: 5px !important;
}
.timeTableLegend .legendItem > span {
  display: inline !important;
  white-space: nowrap !important;
  font-size: 12px !important;            /* explicit px so em-inheritance can't shrink it per chip */
  vertical-align: middle !important;
  line-height: 1.25 !important;
}
.timeTableLegend .legendItem::after {
  content: "";
  display: block !important;              /* chair on a new line inside chip */
  padding-left: 22px !important;
  font-size: 12px !important;            /* same as title, explicit px */
  font-style: italic !important;
  color: #555 !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
}

/* Reorder chips so "Topic: Demands and Strategies" appears LEFTMOST. Day-1
 * default DOM order (by session-id) is: Fusion(1), Fission(2), Economy(3),
 * Demands(4). We pull Demands (4th child) to order -1 (before all others).
 * On Day 2 there are only 2 chips (Topic 4 + Break-outs); this rule is
 * harmless because there's no 4th child. Requires CSS Grid or Flex on the
 * container (see grid rule above). */
.timeTableLegend .legendItem:nth-child(4) {
  order: -1 !important;
}

/* (Extra-tight rule for Fusion/Fission removed — same padding for all chips
 * now, so all four look uniform.) */

/* (Removed: rule that shrunk Demands/Economy font — all chips now uniform 14px.) */

/* Ordering matches chronological first appearance in the programme:            */
/*   Day 1 09:00 Demands & Strategies · 11:00 Fusion · 13:45 Fission ·          */
/*   16:00 Economy & Society · Day 2 09:00 Energy grid · 11:15 Break-outs       */
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="#c2ecef"]),
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(194, 236, 239)"]),
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(194,236,239)"])
  { order: 1 !important; }
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="#e3f2d3"]),
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(227, 242, 211)"]),
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(227,242,211)"])
  { order: 2 !important; }
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="#ecc495"]),
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(236, 196, 149)"]),
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(236,196,149)"])
  { order: 3 !important; }
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="#dfebff"]),
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(223, 235, 255)"]),
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(223,235,255)"])
  { order: 4 !important; }
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="#feffbf"]),
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(254, 255, 191)"]),
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(254,255,191)"])
  { order: 5 !important; }
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="#eee0ef"]),
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(238, 224, 239)"]),
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(238,224,239)"])
  { order: 6 !important; }

/* Chair-label content per session, appended inline (single line) */

.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="#c2ecef"])::after,
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(194, 236, 239)"])::after,
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(194,236,239)"])::after {
  content: "Chair: M. Pepe Altarelli";
}
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="#e3f2d3"])::after,
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(227, 242, 211)"])::after,
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(227,242,211)"])::after {
  content: "Chair: R. Kienberger";
}
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="#ecc495"])::after,
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(236, 196, 149)"])::after,
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(236,196,149)"])::after {
  content: "Chair: C. Reiter";
}
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="#dfebff"])::after,
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(223, 235, 255)"])::after,
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(223,235,255)"])::after {
  content: "Chair: M. Molls";
}
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="#feffbf"])::after,
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(254, 255, 191)"])::after,
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(254,255,191)"])::after {
  content: "Chair: S. Paul";
}
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="#eee0ef"])::after,
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(238, 224, 239)"])::after,
.timeTableLegend .legendItem:has(> .timeTableItemColour[style*="rgb(238,224,239)"])::after {
  content: "A: R. Kienberger · B: C. Reiter · C: t.b.d.";
}

/* Event banner / logo (top of the conference page) — Indico renders the
 * .confLogo image at its native pixel size. Our banner is high-resolution,
 * so it overflows the page width. Constrain it to the container width. */
img.confLogo,
.conference-header img.confLogo,
.confHeader img.confLogo {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* ------------------------------------------------------------------
 * Freeform tweaks — small typographic and layout adjustments.
 * Keep these conservative; anything more ambitious risks breaking the
 * layout across Indico versions.
 * ------------------------------------------------------------------ */

/* Slightly more breathing room in the header title */
.conf .conf-header .title,
.conf-header h1,
.event-header h1 {
  letter-spacing: 0.01em;
  font-weight: 600;
}

/* Menu items: a hair more padding, quieter borders */
.conf-menu a,
.side-menu .title,
#event-side-menu a {
  letter-spacing: 0.01em;
}

/* Selected menu item: left-side gold rule instead of a heavy background */
.conf-menu .selected,
#event-side-menu .active a {
  border-left: 3px solid var(--conf-theme-menu-selected);
  padding-left: 0.6em;
}

/* Bring body text a touch closer to institutional-report spacing */
body {
  line-height: 1.55;
}

/* Rounded corners on the support box — subtly softer */
.support-box,
#conference-support-box {
  border-radius: 4px;
}

/* Announcement border: use warm accent so it reads as a highlight strip */
.conf-announcement,
#announcement {
  border-left: 4px solid var(--conf-theme-menu-selected);
}

/* Chairs section:
 * - Stack the "Organizing Committee" heading ABOVE the name list
 *   (Indico default is a flex row: icon + heading | list, so the list
 *   gets a narrow leftover column and long names wrap awkwardly).
 * - Rename the auto-generated "Chairpersons" heading via a pseudo-element,
 *   and keep it at body-text size (Indico default h3 is too large). */
.infoline.chairs {
  display: block !important;
  overflow: visible !important;
}
.infoline.chairs h3 {
  display: block !important;
  width: 100% !important;
  margin: 0 0 0.2em 0 !important;
  padding: 0 !important;
  font-size: 1rem !important;      /* ← smaller "Organizing Committee" heading */
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
.infoline.chairs h3 .icon,
.infoline.chairs h3::before {
  font-size: 1rem !important;      /* icon glyph in the h3 also shrinks */
}
.infoline.chairs h3 > span { display: none !important; }
.infoline.chairs h3::after {
  content: "Organizing Committee" !important;
  display: inline !important;
  font: inherit !important;
  color: inherit !important;
}
.infoline.chairs > .text,
.infoline.chairs ul.chair_list {
  display: block !important;
  width: 100% !important;
}
.infoline.chairs ul.chair_list li {
  white-space: normal !important;   /* names may wrap if truly too long */
}

/* Extra Info block:
 * The FIRST paragraph ("Contact: NEXT@tum.de") stays outside any grey box,
 * as a plain-text line right under the Organizing Committee list.
 * Everything below sits inside a wrapper div (.local-organizers-box) in the
 * additional_info HTML — that wrapper gets the grey background back. */
.infoline.info {
  display: block !important;
  overflow: visible !important;
  margin-top: -0.4em !important;   /* pull NEXT@tum.de closer to the chair list above */
  padding: 0 !important;
  background: transparent !important;
}
.infoline.info > h3 { display: none !important; }
.infoline.info > .text {
  display: block !important;
  width: 100% !important;
}
.infoline.info > .text > p:first-child {
  margin-top: 0 !important;
  margin-bottom: 0.8em !important;
}
.infoline.info ul {
  display: block !important;
  width: 100% !important;
  padding-left: 1.4em !important;
  margin: 0.3em 0 !important;
}
.infoline.info ul li { white-space: normal !important; }

/* Rename Indico's built-in "call for abstracts" strings to include
 * "and statements". IMPORTANT: only target the Abstracts action-box,
 * NOT the Registration action-box (both use .action-box). We use the
 * unique .icon-file-content icon as the sibling anchor. */
.action-box .section .icon-file-content ~ .text .label { font-size: 0 !important; }
.action-box .section .icon-file-content ~ .text .label::before {
  content: "Submission of abstracts and statements is now open" !important;
  display: inline-block !important;
  font-size: 1rem !important;
  font-weight: inherit !important;
  color: inherit !important;
}
.action-box .section .icon-file-content ~ .text > div:not(.label) { font-size: 0 !important; }
.action-box .section .icon-file-content ~ .text > div:not(.label)::before {
  content: "Use the menu on the left to submit an abstract (invited talks) or a statement (open to all)." !important;
  display: inline-block !important;
  font-size: 0.9rem !important;
  color: inherit !important;
}

/* Hide the default "Submit new abstract" button on the ABSTRACTS action-box
 * only (Registration keeps its "Apply now" button intact). */
.action-box .section .icon-file-content ~ .toolbar,
.action-box .section .icon-file-content ~ .toolbar a.i-button,
.action-box .section .icon-file-content ~ .toolbar button {
  display: none !important;
}

/* Rename every "Submit new abstract" / "Submit an Abstract" button that
 * Indico auto-generates on the /abstracts/ page, so the submission modal
 * that opens from any of these entry points has the right label. */
.js-show-abstract-form,
button.js-show-abstract-form,
a.js-show-abstract-form {
  font-size: 0 !important;
  color: transparent !important;
}
.js-show-abstract-form::before {
  content: "Open submission form" !important;
  display: inline-block !important;
  font-size: 1rem !important;
  color: #fff !important;
}

/* When the abstract-submission modal is open, relabel its title bar to
 * "Statement / Abstract submission form". We cover several candidate
 * selectors because Indico's dialog machinery can render the title in
 * more than one place. */
.ui-dialog-title,
.exclusivePopup .title,
.ajax-dialog .header .title {
  /* fallback: keep original if the selector below doesn't match */
}
.ui-dialog .ui-dialog-titlebar-title,
.ui-dialog-titlebar .ui-dialog-title,
.qtip-title {
  font-size: 0 !important;
}
.ui-dialog .ui-dialog-titlebar-title::before,
.ui-dialog-titlebar .ui-dialog-title::before,
.qtip-title::before {
  content: "Statement / Abstract submission form" !important;
  display: inline-block !important;
  font-size: 1rem !important;
  color: inherit !important;
}

/* Inject a visible page heading on the /abstracts/ landing page above the
 * form so even if the modal title doesn't get replaced by CSS, the user
 * sees the right label. Targets the form's own container. */
form[action="/event/8014/abstracts/submit"]::before {
  content: "Statement / Abstract submission form" !important;
  display: block !important;
  font-size: 1.4em !important;
  font-weight: 700 !important;
  color: #14304f !important;
  margin: 0 0 0.8em 0 !important;
  padding-bottom: 0.4em !important;
  border-bottom: 2px solid #14304f !important;
}

/* Highlight the Contribution Type dropdown so it's the visually loudest
 * field on the form — since we can't auto-preselect Abstract vs Statement
 * based on which landing page the user came from (Indico's form ignores
 * URL parameters and blocks custom scripts), we at least make sure people
 * can't miss the field. */
form[action="/event/8014/abstracts/submit"] #form-group-submitted_contrib_type {
  background: #fff9dd !important;
  border: 2px solid #b8892b !important;
  padding: 0.6em !important;
  border-radius: 4px !important;
  margin: 0.6em 0 !important;
}
form[action="/event/8014/abstracts/submit"] #form-group-submitted_contrib_type::before {
  content: "Please select the contribution type that matches how you arrived here — 'Abstract' if you are an invited speaker submitting for your talk, 'Statement' if you are contributing to a discussion session." !important;
  display: block !important;
  margin-bottom: 0.4em !important;
  font-size: 0.9em !important;
  color: #6f5410 !important;
}

/* ==== "View abstracts and statements" landing page — cards only ====
 * Indico's Markdown renderer strips <input> and <label>, so the interactive
 * radio-tab filter isn't possible. Instead we render two clearly separated
 * sections (Abstracts / Statements) on the page and use <details> cards
 * for each submission, which is HTML5-native and needs no scripting. */
.abst-list { margin: 0.5em 0 1.4em 0; }
.abst-list .abst-card {
  border: 1px solid #d9dde3;
  border-radius: 4px;
  margin-bottom: 0.5em;
  background: #fff;
}
.abst-list .abst-card > summary {
  padding: 0.6em 0.8em;
  cursor: pointer;
  font-weight: 600;
  background: #f7f8fa;
  list-style: none;
}
.abst-list .abst-card[open] > summary { border-bottom: 1px solid #d9dde3; }
.abst-list .abst-card .abst-body { padding: 0.6em 0.8em; }
.abst-list .abst-card .abst-meta { color: #667; font-size: 0.85em; margin: 0 0 0.5em 0; }
.abst-list .abst-empty { color: #667; font-style: italic; }

/* Grey info box around the Local Organizers section only. */
.infoline.info .local-organizers-box {
  background: #f4f4f4 !important;
  padding: 10px 12px !important;
  margin-top: 1.2em !important;   /* ← visible gap below the NEXT@tum.de line */
}
.infoline.info .local-organizers-box > p:first-child { margin-top: 0 !important; }
.infoline.info .local-organizers-box > p:last-child  { margin-bottom: 0 !important; }