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

.navlist {
  overflow: hidden;
  font-weight: 500;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}

.navlist > a,
.navlist > div,
.navlist > label {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  min-height: 52px;
  color: var(--foreground);
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.navlist > a:not(:last-child),
.navlist > div:not(:last-child),
.navlist > label:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.navlist > a {
  position: relative;
  padding-right: 2.25rem;
}

.navlist > a:before {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted-foreground);
  border-bottom: 2px solid var(--muted-foreground);
  transform: translateY(-50%) rotate(-45deg);
  opacity: 0.4;
}

.navlist > a.active {
  color: var(--primary-foreground);
  background: var(--primary);
}

.navlist > a.active:before {
  border-color: var(--primary-foreground);
  opacity: 0.7;
}

.navlist > a.active span.text-sm {
  color: var(--primary-foreground);
}

@media (hover: hover) {
  .navlist > a:not(.active):hover {
    background: var(--muted);
  }
}

.navlist > div,
.navlist > label {
  justify-content: space-between;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navlist > label select {
  margin-left: auto;
}

.navlist span.text-sm {
  color: var(--muted-foreground);
}

.navlist .icon {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 4px;
  margin-right: 0.75rem;
  border-radius: 0.375rem;
}

.navlist .icon svg {
  width: 100%;
  height: 100%;
}

.navlist > label {
  position: relative;
  padding-right: 2.25rem;
}

.navlist > label::after {
  content: "";
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity: 0.4;
  background: var(--muted-foreground);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.navlist select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  padding-right: 0;
  cursor: pointer;
}

.navlist select:focus,
.navlist select:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Card — visible on desktop (lg+), invisible on mobile */
.card {
  @media (min-width: 1024px) {
    background: var(--card);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    outline: 1px solid var(--border);
    outline-offset: -1px;
    padding: 1.5rem;
  }
}

/* Nested card — contrasts against its parent automatically */
.card-nested {
  background: var(--card);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  outline: 1px solid var(--border);
  outline-offset: -1px;
}

.card .card-nested {
  @media (min-width: 1024px) {
    background: var(--muted);
  }
}

/* Infinite scrolling */
.infinite-scrolling {
  position: relative;
}

.scroll-trigger {
  height: calc(100vh - 200px);
  width: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}