/* Critical fixes for groupset/trip detail pages */
/* These were previously only in the Django template inline <style> */

/* Promote heavy subtrees to their own compositor layers so
   the modal dimmer fade-in doesn't force a full-page repaint. */
.blog-post {
  contain: layout style paint;
}
.blog-post .leaflet-container {
  will-change: transform;
}

/* Fix for Leaflet tiles being hidden by Bootstrap and Fomantic UI's responsive image styles */
.leaflet-tile-container img,
.leaflet-tile-pane img,
.leaflet-tile {
  width: 256px !important;
  height: 256px !important;
  max-width: none !important;
  display: block !important;
}
/* Ensure Leaflet containers don't get collapsed */
.leaflet-container img {
  max-width: none !important;
  max-height: none !important;
}

/* Map day tabs — Fomantic UI pointing secondary menu */
/* Dark background — when trip has a background image */
.inner-block.dark-bg .ui.secondary.pointing.menu {
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

.inner-block.dark-bg .ui.secondary.pointing.menu .item {
  color: rgba(255, 255, 255, 0.85);
  border-color: transparent;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.inner-block.dark-bg .ui.secondary.pointing.menu .item:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.inner-block.dark-bg .ui.secondary.pointing.menu .active.item {
  color: #fff;
  border-color: #fff;
  font-weight: 600;
}

/* Fomantic basic buttons on dark background */
.inner-block.dark-bg .ui.basic.button {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}
.inner-block.dark-bg .ui.basic.button:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

/* Reaction pills on dark background */
.inner-block.dark-bg .reaction-pill {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}
.inner-block.dark-bg .reaction-pill:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
}
.inner-block.dark-bg .reaction-pill-active {
  background: rgba(100, 180, 255, 0.25);
  border-color: rgba(100, 180, 255, 0.5);
  color: #90c8f8;
}
.inner-block.dark-bg .reaction-pill-active:hover {
  background: rgba(100, 180, 255, 0.35);
}
.inner-block.dark-bg .reaction-pill-add {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6);
}
.inner-block.dark-bg .reaction-pill-add:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
}
.inner-block.dark-bg .reaction-picker-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Comment editor on dark background */
.inner-block.dark-bg .comment-editor {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}
.inner-block.dark-bg .comment-editor .comment-editor-tiptap p.is-editor-empty:first-child::before {
  color: rgba(255, 255, 255, 0.4);
}

/* Description editor on dark background */
.inner-block.dark-bg .trip-description-editor {
  border-color: rgba(255, 255, 255, 0.3);
}
.inner-block.dark-bg .tiptap-toolbar {
  background: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.inner-block.dark-bg .tiptap-toolbar-btn {
  color: rgba(255, 255, 255, 0.8);
}
.inner-block.dark-bg .tiptap-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}
.inner-block.dark-bg .tiptap-toolbar-btn.active {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.inner-block.dark-bg .tiptap-toolbar-divider {
  background: rgba(255, 255, 255, 0.2);
}
.inner-block.dark-bg .tiptap-editor-content {
  color: rgba(255, 255, 255, 0.9);
}
.inner-block.dark-bg .tiptap-editor-content .tiptap p.is-editor-empty:first-child::before {
  color: rgba(255, 255, 255, 0.4);
}

/* Login prompt on dark background */
.inner-block.dark-bg .trip-login-prompt {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
}
.inner-block.dark-bg .trip-login-prompt a {
  color: #90c8f8;
}

/* Comment action links on dark background */
.inner-block.dark-bg .comment-actions a {
  color: rgba(255, 255, 255, 0.6);
}
.inner-block.dark-bg .comment-actions a:hover {
  color: rgba(255, 255, 255, 0.9);
}