/*
 * app/assets/stylesheets/application.css
 * 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.
 */

dialog[open] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }

@keyframes flash-highlight {
  0%   { background-color: #fefcbf; }
  100% { background-color: transparent; }
}

.flash-highlight {
  animation: flash-highlight 2s ease-out;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #444; /* your preferred color */
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    background-color: #444;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

input[type="range"]::-ms-thumb {
    background-color: #444;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

/* Hide scrollbar while keeping scroll functionality */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

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

/* Smooth Turbo page transitions for mobile */
@media (max-width: 768px) {
    /* Ensure body maintains background during transitions */
    body {
        background-color: #f9fafb;
    }

    /* Smooth fade transition for Turbo visits */
    main {
        animation: fadeIn 0.15s ease-in;
    }

    @keyframes fadeIn {
        from {
            opacity: 0.95;
        }
        to {
            opacity: 1;
        }
    }

    /* Prevent white/black flash during page load */
    html {
        background-color: #f9fafb;
    }
}