/* ========================
   Global Styling & Layout
   ======================== */

/* Hide timezone and page header (not needed for public view) */
.timezone,
.page-header {
  display: none;
}

/* General text styling for conference content */
.conference-page .page-content,
.conferenceDetails .description {
  color: #000;
  font-size: 16px;
}

/* Add spacing below the date/place section */
.datePlace {
  margin-bottom: 20px;
}

/* Prepend custom workshop title above date/place */
.datePlace::before {
  content: "Energy System Optimization Workshop @ TU Graz\A";
  font-size: 22px;
  display: block;
  margin-top: 15px;
  margin-bottom: 15px;
}

/* =========================
   Conference Title Box
   ========================= */

/* Background and border color for the title box */
.confTitleBox {
  background: #3b5a70;
  border-color: #3b5a70;
}

/* Flex layout for logo and title in the header */
.confTitleBox h1 .conference-title-link {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #fcfcfc;
}

/* Prevent logo from shrinking inside flex layout */
.confLogoBox {
  flex-shrink: 0;
}

/* Logo image size and display */
.confLogoBox img {
  height: 100px;
  display: block;
}

/* =============================
   Conference Header & Headings
   ============================= */

/* Headings in page and content sections */
.conference-page header h2,
.conference-page .page-content h2,
.conference-page .page-content h3 {
  color: #3b5a70;
}

/* Header title section typography adjustments */
.conference-page header .title > .text > .title-with-actions h2,
.conference-page header .title > .text > .title-with-actions h3 {
  font-size: 150%;
  font-weight: bold;
  display: inline;
  margin-right: 0;
}

/* Heading background in support box */
.support_box > h3 {
  background: #3b5a70;
}

/* ===========================
   Main Content Container
   =========================== */

/* Limit main content container width and ensure box sizing */
#confSectionsBox {
  width: 100%;
  max-width: 950px;
  box-sizing: border-box;
}

/* ===============================
   Logos Above Conference Title Box
   =============================== */

/* Insert three logos above the title box */
.confTitleBox::before {
  content: "";
  display: block;
  width: 100%;
  height: 75px;
  background-color: white;

  background-image:
    url('https://indico.tugraz.at/event/84/images/54-Logo_IEE_mit_Schriftzug_EN.png'),   /* Left logo */
    url('https://indico.tugraz.at/event/84/images/56-Logo_RC-Energetic_mit_Text.png'),   /* Center logo */
    url('https://indico.tugraz.at/event/84/images/50-TUGraz_logo.png');                  /* Right logo */

  background-repeat: no-repeat;
  background-size:
    190px auto,   /* Left */
    175px auto,   /* Center */
    125px auto;   /* Right */

  background-position:
    15px center,
    center center,
    calc(100% - 15px) center;
}

/* Adjust logo alignment on wide screens (≥951px) */
@media (min-width: 951px) {
  .confTitleBox::before {
    background-position:
      calc(50% - 375px) center,  /* Left */
      center center,             /* Center */
      calc(50% + 375px) center;  /* Right */
  }
}

/* ===========================
   Adjust Timetable
   =========================== */

#timetable div[style*="width: 710px"] {
  width: 100% !important;
  box-sizing: border-box;
}

#timetable. ui-tabs.ui-corner-all.ui-widget.ui-widget-content {
  width: 100% !important;
}

#timetable .timetableBlock {
  width: calc(100% - 30px) !important;
}

#timetable .hourLine.ui-droppable {
  width: calc(100% + 35px) !important;
}

#timetable .timetableHeader {
  width: calc(100% + 35px) !important;
}

/* Ensure the tab bar wraps cleanly and takes full width */
.tabExtraButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start; /* or center if you prefer */
  margin-top: 10px;
  margin-bottom: 15px;
  position: relative;
  z-index: 10;
  width: fit-content;
}

/* Let each button shrink and wrap nicely */
.tabExtraButtons .buttonContainer {
  flex: 0 1 auto;
}

/* Ensure the container below it (e.g. timetable) does not overlap */
#timetable {
  clear: both;
  margin-top: 10px;
}


/* ===========================
   Responsive Styling: ≤980px
   =========================== */

@media (max-width: 980px) {
  /* Make title/subtitle boxes responsive */
  .confTitle,
  .confSubTitle,
  .confSubTitleContent,
  .f-self-stretch.confSubTitle,
  .confTitleBox {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  /* Add horizontal padding for content */
  .confSubTitleBox,
  #confSectionsBox {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* Hide footer to avoid layout issues */
  .footer {
    display: none;
  }

}


/* ===========================
   Responsive Styling: ≤580px
   =========================== */

@media (max-width: 580px) {
  /* Resize logo banner and images responsively */
  .confTitleBox::before {
    height: clamp(25px, 10vw, 55px);
    background-size:
      clamp(80px, 30vw, 190px) auto,
      clamp(70px, 27vw, 175px) auto,
      clamp(50px, 18vw, 125px) auto;
  }

  /* Adjust logo image height for smaller screens */
  .confLogoBox img {
    height: clamp(50px, 10vw, 100px);
  }

  /* Scale title font and spacing */
  .confTitleBox h1 .conference-title-link {
    font-size: clamp(18px, 4vw, 32px);
    line-height: 1em;
  }

  .conference-title-link {
    padding: clamp(10px, 4vw, 25px) 0;
  }

  /* Typography for date/place section */
  .datePlace {
    font-size: clamp(10px, 2.5vw, 12pt);
    line-height: 1em;
    margin-bottom: clamp(10px, 2vw, 20px);
  }

  .datePlace::before {
    font-size: clamp(14px, 3vw, 22px);
    margin-top: clamp(5px, 2vw, 15px);
    margin-bottom: clamp(5px, 2vw, 15px);
    line-height: 1.1em;
  }

  /* Stack page layout vertically on small screens */
  .conference-page {
    flex-direction: column;
  }

  /* Move left menu above main content */
  .conf_leftMenu {
    order: -1;
    width: 100%;
  }

  /* Expand main content to full width */
  .conf_mainContent {
    width: 100%;
  }

  /* Remove left margin from body */
  .confBodyBox {
    margin-left: 0px;
  }
  
}

  /* Hide dark mode logos in light mode */
  .logo.dark-mode {
    display: none;
}



/* ========================
   Dark Mode Styling
   ======================== */

@media (prefers-color-scheme: dark) {

  /* Hide light mode logos in dark mode */
  .logo.light-mode {
    display: none;
  }
  /* Show dark mode logos in dark mode */
  .logo.dark-mode {
    display: inline;
  }
  
  /* Set dark background and text color */
  body,
  .conference-page .page-content,
  .conferenceDetails .description,
  .conf_mainContent,
  #confSectionsBox {
    background-color: #1e1e1e;
    color: #fcfcfc;
  }

  /* Dark theme styling for title box */
  .confTitleBox {
    background-color: #2a3b4d;
    border-color: #2a3b4d;
  }

  /* Dark mode heading and support box colors */
  .conference-page header h2,
  .conference-page .page-content h2,
  .conference-page .page-content h3,
  .support_box > h3 {
    color: #ffffff;
  }

  /* Highlight selected menu items */
  .menuConfSelected,
  .menuConfMiddleCellSelected {
    background: #252E33;
    border-top: 1px solid #3A474E;
    border-bottom: 1px solid #3A474E;
  }

  /* Support box background and borders */
  .support_box,
  #outer {
    background: #161C1D;
    border: 1px solid #3A474E;
  }

  /* Highlight menu title links */
  .menuConfTitle a {
    color: #88B9DE;
  }
  
  /* Dark theme for location place */
  .infoline.location .place,
  .conference-page header h3,
  .infoline.date .datetime {
    color: #88B9DE;
  }
  

  /* Dark theme text color for common elements */
  h1, h2, h3, h4, h5, h6,
  td, dl, ol, blockquote {
    color: #ffffff;
  }

  /* Background color for infoline info box */
  .infoline.info {
    background: #47484D;
  }

  /* Ensure white title text in dark mode */
  .confTitleBox h1 .conference-title-link {
    color: #ffffff;
  }

  /* Dark mode logos above title box */
  .confTitleBox::before {
    background-color: #1e1e1e;
    background-image:
      url('https://indico.tugraz.at/event/84/images/59-Logo_IEE_mit_Schriftzug_EN_dark.png'),
      url('https://indico.tugraz.at/event/84/images/60-Logo_RC-Energetic_mit_Text_dark.png'),
      url('https://indico.tugraz.at/event/84/images/58-TUGraz_logo_dark.png');
  }
}