/* Planner */
/* ======= */
#page_container:has(#gear_planner) {
  height: 100vh;
}

#page_content:has(#gear_planner) {
  flex-grow: 1;

  min-height: 0;

  display: flex;
}

.planner-container {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  column-gap: 0.5rem;
  align-items: stretch;
}


/* Event selector - list of events available to choose from */
.event-selector-container {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 0.5rem;

  background-color: var(--bs-primary-bg-subtle);

  xborder-radius: var(--bs-border-radius);
  border: 1px solid;
  border-color: var(--bs-dark-bg-subtle);

  overflow: hidden;
}

.event-selector-scope-dropdown-container {
  flex-shrink: 1;

  margin-bottom: 1rem;
}

.event-selector-scope-select {
  width: 100%;
}

.event-selector-events-list {
  flex-grow: 1;

  overflow-y: auto;
  overscroll-behavior: contain
}

.event-selector-event-title {
  font-weight: 600;
}

.event-selector-event-datetime {
  color: var(--bs-secondary-color);
}

.event-selector-no-events {
  text-align: center;

  color: var(--bs-secondary-color);
}

/* Completed events are de-emphasised in the events list (label only - leave the checkbox alone
   so it doesn't look disabled) */
.event-selector-event-completed .form-check-label {
  opacity: 0.6;
}

.event-selector-event-completed .event-selector-event-title {
  text-decoration: line-through;
}

.event-selector-event-completed .event-selector-event-title .bi-check-circle-fill {
  color: var(--bs-success);
  text-decoration: none;
}

/* Selected events - list of chosen events */
.selected-events-container {
  flex: 2;

  padding: 0.5rem;

  overflow-y: auto;
  overscroll-behavior: contain
}

.selected-events-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.selected-events-header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.planner-finish-button-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.planner-finish-notice {
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
}

.selected-events-clear {
  font-size: 1rem;
  line-height: 1;

  color: var(--bs-link-color);
  text-decoration: none;
}

.selected-events-clear:hover {
  color: var(--bs-danger);
}

.selected-events-clear.disabled {
  color: var(--bs-secondary-color);
  opacity: 0.4;
  pointer-events: none;
}

.selected-event-card {
  margin-bottom: 1rem;
}

.selected-event-card-drop-highlight {
  background-color: var(--bs-warning-bg-subtle);
}

.selected-event-card-highlighted-item {
  border-color: var(--bs-warning) !important;
}

.selected-event-card-highlighted-item::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  background: rgba(var(--bs-warning-rgb), 0.5);
}

.selected-event-card-title {
  font-weight: 600;
  font-size: 1.25rem;
}

.selected-event-card-datetime {
  font-size: 0.875rem;
}

/* Item list - list of all items */
.item-list-container {
  flex: 2;

  padding: 0.5rem;

  overflow-y: auto;
  overscroll-behavior: contain
}

.item-list-category-container {
  .item-list-category-container+& {
    margin-top: 2rem;
  }
}

.item-list-category-title {
  font-size: 0.875em;

  font-weight: 600;
}


/* Compact item grid - used in item list and in selected events */
/* ============================================================ */
.compact-itemgrid-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  column-gap: 0.7rem;
  row-gap: 0.7rem;

  margin-bottom: 0.5rem;
}

/* Wrapper around a single item - anchors the item's bulk action buttons over its thumbnail. They
   live outside the draggable .gear-item so that clicking one doesn't start a drag. */
.compact-itemgrid-item {
  --pg-planner-thumbnail-size-small: 60px;
  --pg-planner-thumbnail-size-medium: 100px;
  --pg-planner-thumbnail-size-large: 150px;

  position: relative;

  /* Cap the item's whole column (including notes below it) to the thumbnail's width, so
     content like notes text can't grow the column wider than the thumbnail above it */
  width: var(--pg-planner-thumbnail-size-small);

  [data-planner-thumbnail-size-selected-value="medium"] & {
    width: var(--pg-planner-thumbnail-size-medium);
  }

  [data-planner-thumbnail-size-selected-value="large"] & {
    width: var(--pg-planner-thumbnail-size-large);
  }
}

/* Add to / remove from all selected events - shown over the top of the item's thumbnail, centred
   horizontally and inset from the top edge so they clear the thumbnail's border (which thickens
   when the item is in use by a selected event) */
.itemgrid__bulk-actions {
  position: absolute;
  top: 0.25rem;
  left: 50%;
  transform: translateX(-50%);

  /* Sit above the thumbnail image and its reference overlay */
  z-index: 2;

  display: flex;
  gap: 0.25rem;

  /* Only reveal the buttons on hover where there is a pointer that can hover - on touch devices
     they stay visible, since there is no hover state to reveal them with */
  @media (hover: hover) {
    opacity: 0;
    transition: opacity 0.15s ease;

    .compact-itemgrid-item:hover &,
    &:focus-within {
      opacity: 1;
    }
  }
}

/* Each icon gets its own circular backing so it stays legible over any thumbnail image */
.itemgrid__bulk-action-button {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 1.1rem;
  height: 1.1rem;
  padding: 0;

  font-size: 0.9rem;
  line-height: 1;

  color: var(--bs-primary);
  background-color: #FFFFFF;
  border: 0;
  border-radius: 50%;
  cursor: pointer;

  &:hover {
    filter: brightness(0.85);
  }

  &:disabled {
    color: var(--bs-secondary-color);
    opacity: 0.5;
    cursor: default;
    filter: none;
  }

  /* Bootstrap Icons nudge their glyph down off the baseline (vertical-align: -0.125em), which
     leaves the icon sitting off-centre in its circular backing - drop the offset so the glyph's
     box is centred by the flex layout alone */
  & .bi::before {
    display: block;
    vertical-align: 0;
    line-height: 1;
  }
}

.itemgrid__bulk-action-button--danger {
  color: var(--bs-danger);
}

.compact-itemgrid-thumbnail-container {
  --pg-planner-thumbnail-size-small: 60px;
  --pg-planner-thumbnail-size-medium: 100px;
  --pg-planner-thumbnail-size-large: 150px;

  position: relative;
  background-color: #FFFFFFFF;

  width: var(--pg-planner-thumbnail-size-small) !important;
  height: var(--pg-planner-thumbnail-size-small) !important;

  overflow: hidden;
  border-radius: var(--bs-border-radius);

  border: var(--bs-border-width) solid var(--bs-border-color);

  [data-planner-thumbnail-size-selected-value="medium"] & {
    width: var(--pg-planner-thumbnail-size-medium) !important;
    height: var(--pg-planner-thumbnail-size-medium) !important;
  }

  [data-planner-thumbnail-size-selected-value="large"] & {
    width: var(--pg-planner-thumbnail-size-large) !important;
    height: var(--pg-planner-thumbnail-size-large) !important;
  }
}

.compact-itemgrid-thumbnail-image {
  z-index: 0;

  padding: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;
  border: 0;
}

.compact-itemgrid-item-reference-overlay {
  z-index: 1;

  position: absolute;

  width: 100%;

  bottom: 0;

  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-weight: 600;
  font-size: 0.65rem;

  background-color: #FFFFFFCC;
  color: var(--bs-dark);

  overflow: hidden;
}

.compact-itemgrid-item-in-use {
  border-width: 2px;
  border-color: var(--bs-primary);
}

/* Centred rather than stretched to the thumbnail's width now the button is a fixed-size
   icon square (see .pg-button--icon), not a full-width bar. */
.compact-itemgrid-button-remove-item {
  display: flex;
  justify-content: center;

  line-height: 1;
}

.compact-itemgrid-usage-dates {
  font-weight: 600;
  font-size: 0.65rem;

  background-color: #FFFFFFCC;
  color: var(--bs-dark);

}

.compact-itemgrid__item-notes {
  box-sizing: border-box;
  width: 100%;

  border-radius: 0.25rem;
  border: 1px solid var(--bs-dark-border-subtle);

  background-color: rgb(var(--bs-secondary-bg-rgb));
  color: var(--bs-dark-text-emphasis);

  font-size: 0.6rem;
  margin-top: 0.25rem;
  padding: 0.25rem;

  text-wrap: wrap;
  white-space: normal;
  overflow-wrap: break-word;
}

.compact-itemgrid__item-notes--header {
  width: 100%;

  margin-bottom: 0.25rem;

  border-bottom: 1px solid var(--bs-dark-border-subtle);

  font-size: 0.6rem;
  font-weight: 600;
}

/* Thumbnail size buttons */
.planner-thumbnail-size-buttons-container {
  width: 2rem;

  overflow-y: auto;

  overscroll-behavior: contain;
}

.planner-thumbnail-size-button {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--bs-border-radius);
  background-color: transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.planner-thumbnail-size-button.selected {
  border-color: var(--bs-primary);
  background-color: rgba(13, 110, 253, 0.08);
}

.planner-thumbnail-size-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.planner-thumbnail-size-button-icon {
  display: block;

  aspect-ratio: 1 / 1;

  margin: auto;
  margin-top: auto;
  margin-bottom: auto;

  /* line-height: auto; */

  border-radius: var(--bs-border-radius);
}

.planner-thumbnail-small {
  background-color: red;

  width: 45%;
  /* margin: calc((100% - 45%)/2); */
}

.planner-thumbnail-medium {
  background-color: red;

  width: 60%;
  /* margin: calc((100% - 60%)/2); */
}

.planner-thumbnail-large {
  background-color: red;

  width: 75%;
  /* margin: calc((100% - 75%)/2); */
}