/*
 * 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.
 */

/* Scrollbar hide utility */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

/* Line clamp utilities */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Place label overlay */
.place-label {
  position: absolute;
  padding: 4px 8px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  border: 1px solid #E5E7EB;
  pointer-events: none;
  transform: translateX(-50%);
  z-index: 100;
}

.place-label--selected {
  background-color: #97520c;
  color: white;
  border-color: #7d4410;
  font-weight: 600;
}

/* Sidebar loading overlay */
.sidebar-loading {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.sidebar-loading.active {
  opacity: 1;
  pointer-events: auto;
}

.sidebar-loading__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #f3e8e0;
  border-top-color: #97520c;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}