/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Inside dashboard: stat card hover affordance */
.inside-dashboard-card {
  transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.inside-dashboard-card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-2px);
}

.inside-dashboard-card a {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .inside-dashboard-card {
    transition: none;
  }

  .inside-dashboard-card:hover {
    transform: none;
  }
}

/* Pagination */

.pagination-goto {
  max-width: 6.5rem;
}

.pagination-prev-next {
  flex-grow: 0.9;
}

@media (min-width: 576px) {
  .pagination-prev-next {
    flex-grow: 0.65;
  }
}

@media (min-width: 768px) {
  .pagination-prev-next {
    flex-grow: 0.4;
  }
}

@media (min-width: 992px) {
  .pagination-prev-next {
    flex-grow: 0;
    width: 18rem;
  }
}

/* PaginationCursor */

.pagination-cursor-goto select {
  max-width: 6.5rem;
}

.pagination-cursor-goto input {
  max-width: 12rem;
}

.pagination-cursor-prev-next {
  flex-grow: 0.9;
}

@media (min-width: 576px) {
  .pagination-cursor-prev-next {
    flex-grow: 0.65;
  }
}

@media (min-width: 768px) {
  .pagination-cursor-prev-next {
    flex-grow: 0.4;
  }
}

@media (min-width: 992px) {
  .pagination-cursor-prev-next {
    flex-grow: 0;
    width: 18rem;
  }
}

/* Multi-select filter: match form-select appearance, hide Bootstrap's caret, use Bootstrap Icons */
.multi-select-filter .dropdown-toggle {
  min-width: 12rem;
  background-image: none;
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
}

.multi-select-filter .dropdown-menu {
  min-width: 16rem;
  max-height: 20rem;
  overflow-y: auto;
}

.multi-select-filter .dropdown-toggle:hover,
.multi-select-filter .dropdown-toggle:focus {
  border-color: var(--bs-border-color);
  background-color: var(--bs-body-bg);
}

.multi-select-filter .dropdown-toggle::after {
  display: none;
}

/* Servers index filter */
.servers-index-filter-game {
  flex-grow: 1;
}

.servers-index-filter-game .multi-select-filter .dropdown-toggle {
  width: 100%;
}

.servers-index-filter-period-country {
  flex-grow: 1;
  min-width: 0;
}

.servers-index-filter-period-country__field {
  min-width: 0;
}

.servers-index-filter-period-country .multi-select-filter .dropdown-toggle,
.servers-index-filter-period-country .form-select {
  min-width: 0;
  width: 100%;
}

@media (min-width: 576px) {
  .servers-index-filter-period-country .multi-select-filter .dropdown-toggle,
  .servers-index-filter-period-country .form-select {
    min-width: 12rem;
  }
}

/* Servers index filter: expand to fill, Game > Country > Period when space allows */
@media (min-width: 768px) {
  .servers-index-filter-game {
    flex-grow: 2;
  }

  .servers-index-filter-period-country {
    flex-grow: 1;
  }

  .servers-index-filter-period-country__period {
    flex-grow: 1;
  }

  .servers-index-filter-period-country__country {
    flex-grow: 1.5;
  }
}

.ranking-badge {
  min-width: 3rem;
}

.server-card-banner {
  height: 140px;
}

.clipboard-fallback-textarea {
  position: fixed;
  left: -9999px;
  opacity: 0;
}