/* vim: set fileencoding=utf-8 */
/* Copyright ⓒ 2025 Michael Scheper, for Psyclopedia */

header {
  justify-content: space-between;
}

header .psyclocatnav {
  flex: 1 1;
}

#narbar-dropdown-set {
  margin-left: 1em;
}


/*** profile and event psyclocontent ***/

/* Reduce padding on narrow screens. */
@media screen and (max-width: 640px) {
  #psyclocontent {
    padding: 0.25rem;
  }
}

/* These navbar pages have a MediaMatchTransfer component, which checks the viewport
 * width. Regardless of whether the MediaMatchTransfer query matches, disable the
 * scrolling in the #psyclocontent container, and put scrollbars inside the tabpanels
 * instead. */

#psyclocontent:has(.psyclocolumns),
#psyclocontent:has(> .media-match-transfer-container) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.psyclosummary-container {
  display: flex;
  flex-direction: column;
}

.media-match-transfer-container {
  flex: 1 1;
  display: flex;
  overflow: hidden;
}

.psyclocontent-column {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 1ex;
  overflow: hidden;
}

.psyclocontent-column > * {
  flex: 0 0;
}

.psyclocontent-column > .psyclotab-container {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.psyclocontent-column > .psyclotab-container .psyclotab-tablist {
  flex: 0 0;
}

/* Put vertical scrollbars in the tabpanels. */
.psyclocontent-column .psyclotab-tabpanel {
  flex: 1 1;
  overflow: hidden auto;
}
/* …except the .noscroll ones, which are under contract to handle scrolling themselves */
.psyclocontent-column .psyclotab-tabpanel.noscroll {
  overflow: hidden;
  display: flex;
}

.psyclocontent-column > .button-bar-bottom {
  flex: 0 0;
}

/* Reduce the tab font on narrow screens. */
@media screen and (max-width: 640px) {
  .psyclotab-container > [role="tablist"] > [role="tab"] {
    font-size: smaller;
  }
}

#media-tablist {
  flex: 2 1;
  padding-left: 1ex;
}

#media-column:not(:has(.psyclocarousel-container)) {
  display: none !important;
}
.psyclotab-tabpanel:has(.psyclocarousel-container) {
  padding-bottom: 0;
}
.psyclotab-tabpanel .psyclocarousel-container {
  width: 100%;
}

.h-status {
  font-family: sans-serif;
}

#psyclocontent .create {
  margin-bottom: 1em;
}

.img-and-button-bar {
  display: flex;
  align-items: center;
}

.img-and-button-bar img {
  width: 10rem;
}

.img-and-button-bar .button-bar {
  padding-left: 1rem;
}

a.psyclosummary:link,
a.psyclosummary:visited,
a.psyclosummary:hover,
a.psyclosummary:active {
  text-decoration: none !important;
  color: var(--psyclocontent-text) !important;
}

.psyclosummary {
  padding: 0.5rem;
  display: flex;
  align-items: center;
  background: var(--panel-background-dd);
  box-shadow: 0.25ex 0.25ex 0.4ex var(--box-shadow-color);

  .image-container {
    display: flex;
    width: 4rem;
  }

  .image-container img {
    object-fit: contain;
    max-width: 4em;
    max-height: 4em;
    margin: auto;
  }

  .detail-container {
    margin-left: 0.5em;
    div:not(:first-child) {
      margin-top: 0.5ex;
    }
    :not(.name):not(.genres):not(.locations) {
      white-space: nowrap;
    }
  }

  &.headliner {
    background: var(--panel-background-highlight);
    .performer {
      font-weight: 600;
    }
  }

  .status {
    text-decoration: none !important;
    font-style: normal !important;
    opacity: 100% !important;
  }
  .status[x-psyclostatus="unconfirmed"],
  .status[x-psyclostatus="confirmed"] {
    opacity: 0 !important;
  }
}

.lineup .psyclosummary .performer {
  font-size: 120%;
}

tr.ticket_class td.cost {
  text-align: right;
}

/** Trix WYSIWYG editor configuration */

.trix-button-group.trix-button-group--text-tools .trix-button[data-trix-action="link"],
.trix-button-group.trix-button-group--block-tools .trix-button.trix-button--icon-code,
.trix-button-group.trix-button-group--file-tools {
  display:none;
}