/* OpenMirror Custom Styles */

/* HTMX Indicators */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: flex; /* Changed from inline-block to flex for better Tailwind compatibility */
}

.htmx-request.htmx-indicator {
    display: flex; /* Changed from inline-block to flex for better Tailwind compatibility */
}

/* Focus ring visibility for accessibility */
*:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Smooth transitions for theme changes */
html {
    transition: background-color 0.2s ease-in-out;
    /* Reserve space for scrollbar to prevent layout shift */
    scrollbar-gutter: stable;
}

body {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Item card transitions (no hover animation to avoid vibration) */
.item-card {
    transition: box-shadow 0.2s ease-in-out;
}

/* Smooth transition for grid layout changes */
#items-grid {
    transition: all 0.3s ease-in-out;
}

/* Smooth transition for filter layout changes */
.layout-container {
    transition: all 0.3s ease-in-out;
}

/* HTMX swap transitions removed - now in base.html.twig inline styles */

/* Modal backdrop animation */
.modal-backdrop {
    animation: fadeIn 0.2s ease-in-out;
}

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

/* Modal content slide animation when navigating between items */
/* Very subtle slide from top effect - only affects modal body content */
#modal-root.htmx-swapping .modal-body {
    opacity: 0.75;
    transform: translateY(-5px);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

#modal-root.htmx-settling .modal-body {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}

/* Loading spinner animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Scrollbar styling for dark theme */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #374151;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}
/* Container utilities */
.container {
    max-width: 1280px;
}

/* Import layout variant CSS */
@import './variants/openmirror-classic.css';
@import './variants/openmirror-glass.css';
@import './variants/openmirror-minimal.css';
@import './variants/openmirror-ornate.css';
@import './variants/openmirror-hero.css';
@import './variants/openmirror-replit.css';

/* Admin-only: Owned by us border */
.om-owned-border {
    outline: 2px dashed #f59e0b;
    outline-offset: 4px;
    border-radius: 12px;
    box-shadow: 0 0 0 2px rgba(245,158,11,.15);
}

[data-theme="light"] .om-owned-border {
    outline-color: #b45309;
    box-shadow: 0 0 0 2px rgba(180,83,9,.12);
}

.layout-container {
    transition: all 0.2s ease-in-out;
}

/* Layout: TOP */
.layout-top .filters-wrapper {
}

/* Layout: LEFT */
.layout-left {
    display: flex !important;
    flex-direction: row;
    gap: 1rem;
    max-width: 1536px !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    padding-bottom: 2rem !important;
}
.layout-left .filters-wrapper {
    margin-bottom: 0;
    margin-right: 1.5rem;
    width: 20rem;
    flex-shrink: 0;
    /* Sticky sidebar - stays visible during scroll */
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}
.layout-left .grid-wrapper {
    flex: 1;
}

/* Layout: CLASSIC */
.layout-classic .filters-wrapper {
    margin-bottom: 1.5rem;
}

/* Layout: TAGS */
.layout-tags .filters-wrapper {
    margin-bottom: 1.5rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .layout-left {
        flex-direction: column;
    }
    .layout-left .filters-wrapper {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1.5rem;
    }
}

/* Modal Variant 15 styles */
.preview-container {
    min-height: 400px;
    max-height: 600px;
    overflow-y: auto;
}

.preview-container .item-hover {
    width: 100%;
    max-width: 100%;
}

/* TomSelect Dropdown - Limit height to avoid taking too much space */
.ts-dropdown {
    max-height: 300px !important;
    overflow-y: auto !important;
}

/* TomSelect dropdown scrollbar styling */
.ts-dropdown::-webkit-scrollbar {
    width: 8px;
}

.ts-dropdown::-webkit-scrollbar-track {
    background: var(--muted, #f1f5f9);
}

.ts-dropdown::-webkit-scrollbar-thumb {
    background: var(--text-muted, #94a3b8);
    border-radius: 4px;
}

.ts-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--text, #475569);
}

/* ============================================================================
   MODAL RESPONSIVE STYLES
   ============================================================================ */

/* Tablet and below (< 1024px) */
@media (max-width: 1023px) {
    /* Modal container - reduce padding */
    .modal-container > div:first-of-type {
        padding: 0.5rem;
    }
    
    /* Modal content box - full width on tablet */
    .modal-content-box {
        max-width: 95vw !important;
        max-height: 95vh !important;
    }
    
    /* Modal header - stack vertically on small screens */
    .modal-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        padding: 0.75rem 1rem !important;
    }
    
    .modal-header > div:first-child {
        width: 100%;
    }
    
    .modal-header > div:last-child {
        width: 100%;
        justify-content: flex-start !important;
    }
    
    /* Modal header title - reduce size */
    .modal-header h2 {
        font-size: 1.25rem !important;
    }
    
    /* Badges - wrap properly */
    .modal-header .flex-wrap {
        flex-wrap: wrap !important;
    }
    
    /* Modal body - reduce padding */
    .modal-body {
        padding: 1rem !important;
    }
    
    /* Preview section - stack vertically */
    .modal-preview-section {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* Info grid - single column */
    .modal-info-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Actions - stack on very small screens */
    .modal-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .modal-actions > * {
        width: 100% !important;
    }
}

/* Mobile only (< 640px) */
@media (max-width: 639px) {
    /* Modal container - minimal padding */
    .modal-container > div:first-of-type {
        padding: 0.25rem;
        align-items: flex-start !important;
    }
    
    /* Modal content box - full screen on mobile */
    .modal-content-box {
        max-width: 100vw !important;
        max-height: 100vh !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
    }
    
    /* Close button - reposition inside on mobile */
    .modal-container > div > div > button:first-child {
        top: 0.5rem !important;
        right: 0.5rem !important;
        position: fixed !important;
        z-index: 50 !important;
    }
    
    /* Modal header - compact */
    .modal-header {
        padding: 0.5rem 0.75rem !important;
        padding-top: 3rem !important; /* Space for close button */
    }
    
    .modal-header h2 {
        font-size: 1.125rem !important;
        line-height: 1.5 !important;
    }
    
    .modal-header p {
        font-size: 0.75rem !important;
    }
    
    /* Header icon - hide on very small screens */
    .modal-header .header-icon {
        display: none !important;
    }
    
    /* Badges - smaller */
    .modal-header .flex-wrap > * {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    /* CRITICAL: Modal body - single column layout */
    .modal-body {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        padding: 0.75rem !important;
        gap: 1rem !important;
    }
    
    /* Preview container - reduce height */
    .modal-body .preview-container {
        min-height: 300px !important;
        max-height: 400px !important;
    }
    
    /* Preview section - more compact */
    .modal-preview-section {
        padding: 0.5rem !important;
        gap: 0.75rem !important;
    }
    
    /* Action buttons - grid 2 columns instead of 3 */
    .modal-actions {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    /* Similar items - smaller cards */
    .modal-similar .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    /* Navigation buttons - smaller */
    .modal-navigation button {
        padding: 0.5rem !important;
        font-size: 0.875rem !important;
    }
    
    /* POE Item sockets - scale down for mobile visibility */
    .poe-icon {
        transform: scale(0.8);
        transform-origin: center center;
    }
    
    /* Ensure POE item preview scales properly in modal */
    [data-poe-item] {
        max-width: 100% !important;
        overflow-x: auto;
    }
}