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

/* Custom slider styling for better UX */
.slider,
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    height: 8px;
    outline: none;
    border-radius: 4px;
    background: #e5e7eb;
}

.slider::-webkit-slider-track,
input[type="range"]::-webkit-slider-track {
    background: #e5e7eb;
    height: 8px;
    border-radius: 4px;
    border: none;
    outline: none;
}

.slider::-webkit-slider-thumb,
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(135deg, #ea580c, #dc2626);
    height: 20px;
    width: 20px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    border: none;
    outline: none;
}

.slider::-webkit-slider-thumb:hover,
input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.slider::-moz-range-track,
input[type="range"]::-moz-range-track {
    background: #e5e7eb;
    height: 8px;
    border-radius: 4px;
    border: none;
    outline: none;
}

.slider::-moz-range-thumb,
input[type="range"]::-moz-range-thumb {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    height: 20px;
    width: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    outline: none;
}

.slider::-moz-range-thumb:hover,
input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Firefox specific fixes */
input[type="range"]::-moz-range-progress {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    height: 8px;
    border-radius: 4px;
}

/* Ensure sliders are visible */
input[type="range"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 20px;
    padding: 0;
    margin: 8px 0;
}

/* Additional slider container styling */
.slider-container {
    position: relative;
    width: 100%;
    margin: 8px 0;
}

/* Ensure proper spacing and visibility for form range fields */
input[type="range"].slider {
    background: #e5e7eb !important;
    height: 8px !important;
    border-radius: 4px !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Navbar improvements */
nav {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

nav .bg-white\/95 {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/* Improve button styling in navbar */
nav a.bg-gradient-to-r {
    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
}

nav a.bg-gradient-to-r:hover {
    box-shadow: 0 4px 8px rgba(234, 88, 12, 0.3);
    transform: translateY(-1px);
}

/* Alpine.js cloak to prevent flash of unstyled content */
[x-cloak] {
    display: none !important;
}

/* Dropdown menu improvements */
.dropdown-menu {
    transform-origin: top right;
}

/* Ensure dropdowns appear above other content */
nav .relative {
    z-index: 50;
}

/* Dropdown transition classes for fallback JavaScript */
#user-menu-dropdown {
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}

#user-menu-dropdown.opacity-0 {
    opacity: 0;
}

#user-menu-dropdown.opacity-100 {
    opacity: 1;
}

#user-menu-dropdown.scale-95 {
    transform: scale(0.95);
}

#user-menu-dropdown.scale-100 {
    transform: scale(1);
}

/* Line clamp utility for text truncation */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Custom scrollbar for JSON textarea */
.font-mono::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.font-mono::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 3px;
}

.font-mono::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.font-mono::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Ensure proper centering across all viewport sizes */
.container-centered {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Fix any potential layout shifts */
.max-w-7xl,
.max-w-6xl,
.max-w-4xl,
.max-w-2xl,
.max-w-md {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ensure flex containers are properly centered */
.flex.items-center.justify-center {
    margin-left: auto;
    margin-right: auto;
}

/* Container class for consistent centering */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Perfect centering for sections */
section.flex.justify-center {
    width: 100%;
    display: flex;
    justify-content: center;
}

section.flex.justify-center>div {
    width: 100%;
    max-width: 100%;
}