/*
 * 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.
 *= require tailwind
 *= require_self
 */

/* Custom Scrollbar Styles */
:root {
  --sb-track-color: #0d0d0d;
  --sb-thumb-color: #c10008;
  --sb-size: 8px;
}

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size);
}

::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 8px;
  border: 0px solid #7a0000;
}

::-webkit-scrollbar-thumb:hover {
  background: #e50010;
}

/* Firefox */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    scrollbar-width: thin;
  }
}

.sm-sb {
  --sb-size: 4px;
}

.md-sb {
  --sb-size: 8px;
}

.lg-sb {
  --sb-size: 12px;
}

@media (max-width: 640px) {
  body {
    overflow-x: hidden;
  }

  #initiative-panel {
    left: 0;
    right: 0;
    width: min(calc(100vw - 2rem));
    max-width: 380px;
    margin-left: 1rem;
    margin-right: 1rem;
    transform: none;
    top: 1rem;
    bottom: calc(4.5rem + env(safe-area-inset-bottom));
    max-height: calc(100vh - 7.5rem);
    height: auto;
    overflow: hidden;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  #initiative-panel > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  #initiative-panel > div:first-child > div {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  #initiative-panel > div:first-child > div > button {
    flex: 1 1 auto;
  }

  #initiative-list {
    max-height: calc(100vh - 13rem);
    overflow-y: auto;
  }

  #initiative-list * {
    max-width: 100%;
    box-sizing: border-box;
  }

  #initiative-list {
    overflow-x: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .initiative-item {
    width: 100%;
    align-items: stretch;
  }

  .initiative-item,
  .initiative-name,
  .initiative-score,
  .initiative-status {
    min-width: 0;
    max-width: 100%;
  }

  .initiative-name {
    display: block;
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
  }

  #initiative-list .initiative-item,
  #initiative-list .initiative-name,
  #initiative-list .initiative-score,
  #initiative-list .initiative-status {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #initiative-list * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  #initiative-hide-btn {
    min-width: 2.25rem;
    min-height: 2.25rem;
  }

  #initiative-pin-btn {
    left: 0;
    right: 0;
    width: min(calc(100vw - 2rem));
    max-width: 380px;
    margin-left: 1rem;
    margin-right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 45;
  }

  #bestiary-hide-btn {
    min-width: 2.25rem;
    min-height: 2.25rem;
  }

  #bestiary-pin-btn {
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 45;
  }

  #connection-status {
    white-space: normal;
  }

  [data-bestiary-dropdown] {
    width: min(90vw, 22rem);
  }

  .invite-tooltip {
    max-width: 90vw;
    white-space: normal;
  }
}

/* Initiative Panel Animations */
@keyframes slideInFromButton {
  from {
    opacity: 0;
    transform: translate(var(--start-x), var(--start-y)) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes slideOutToButton {
  from {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(var(--end-x), var(--end-y)) scale(0.8);
  }
}

#initiative-panel.animate-open {
  animation: slideInFromButton 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#initiative-panel.animate-close {
  animation: slideOutToButton 0.2s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
}

#bestiary-panel.animate-open {
  animation: slideInFromButton 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#bestiary-panel.animate-close {
  animation: slideOutToButton 0.2s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
}

/* Collapsible Sections Animations */
@keyframes expandContent {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: var(--max-height);
    opacity: 1;
  }
}

@keyframes collapseContent {
  from {
    max-height: var(--max-height);
    opacity: 1;
  }
  to {
    max-height: 0;
    opacity: 0;
  }
}

.collapsible-content {
  overflow: hidden;
}

.collapsible-content.animate-expand {
  animation: expandContent 0.2s ease-out forwards;
}

.collapsible-content.animate-collapse {
  animation: collapseContent 0.2s ease-in forwards;
}

/* Toggle Button Rotation Animations */
@keyframes rotateUp {
  from {
    transform: rotate(-180deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes rotateDown {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-180deg);
  }
}

.toggle-btn.rotate-up {
  animation: rotateUp 0.3s ease-out forwards;
}

.toggle-btn.rotate-down {
  animation: rotateDown 0.3s ease-out forwards;
}

/* Content Slide Animations */
@keyframes slideDown {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-10px);
    opacity: 0;
  }
}

.content-slide-down {
  animation: slideDown 0.15s ease-out forwards;
}

.content-slide-up {
  animation: slideUp 0.15s ease-in forwards;
}