/* =================================================================
   Component Design System
   ================================================================= 
   
   A comprehensive component library implementing the brand design
   system with modular, accessible, and responsive components.
   
   Structure:
   1. Button Components
   2. Form Elements
   3. Card Components
   4. Feedback Components
   5. Navigation Components
   6. Modal & Overlay Components
   
   All components use CSS custom properties from variables.css
   and follow BEM-like naming conventions for maintainability.
   ================================================================= */

/* =================================================================
   1. Button Components (Minimal Reset for Third-Party)
   ================================================================= 
   
   NOTE: All button styling is now handled by the Button.svelte component.
   This minimal reset only provides compatibility for third-party content.
   Use the Button component for all new development.
   ================================================================= */

/* Minimal button reset for third-party components */
.btn {
    box-sizing: border-box;
    font-family: inherit;
}

/* =================================================================
   Third-Party Button Styling (Clerk, etc.)
   =================================================================
   
   These styles ensure third-party auth buttons (e.g., Clerk SignInButton)
   match our design system. Uses CSS custom properties for consistency.
   ================================================================= */

/* Clerk SignInButton styling - matches our primary button variant */
.cl-signInButton,
.cl-button,
[data-clerk-button] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--spacing-sm, 0.5rem) !important;
    padding: var(--spacing-md, 0.75rem) var(--spacing-lg, 1.25rem) !important;
    border: none !important;
    border-radius: var(--radius-md, 8px) !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: var(--text-base, 1rem) !important;
    line-height: 1 !important;
    min-height: 44px !important;
    background: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    box-shadow: 0 4px 20px rgb(95 140 107 / 35%) !important;
}

.cl-signInButton:hover,
.cl-button:hover,
[data-clerk-button]:hover {
    background: var(--btn-primary-hover) !important;
    box-shadow: 0 6px 25px rgb(95 140 107 / 45%) !important;
    transform: translateY(-2px) !important;
}

.cl-signInButton:focus-visible,
.cl-button:focus-visible,
[data-clerk-button]:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgb(95 140 107 / 40%) !important;
}

/* Featured button styling - for highlighted CTAs */
.featured-button {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgb(95 140 107 / 35%) !important;
    position: relative;
    overflow: hidden;
}

.featured-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgb(255 255 255 / 20%),
        transparent
    );
    transition: left 0.6s ease-in-out;
}

.featured-button:hover::before {
    left: 100%;
}

/* Animation for loading states (compatibility only) */
@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Note: .btn selector removed in Phase 6 cleanup - minimal reset kept for third-party compatibility */

/* =================================================================
   3. Card Components (Now Owned by Card.svelte Component)
   ================================================================= 
   
   NOTE: All card styling is now handled by the Card.svelte component.
   Card component ownership implemented in Phase 5.
   These global styles have been removed in favor of component ownership.
   ================================================================= */

/* =================================================================
   4. Feedback Components
   ================================================================= */

/* Alert styles removed in Phase 6 - migrated to dev component pages as scoped CSS */


/* Progress Bar and Skeleton Loader removed in Phase 6 - moved to components that use them */

/* =================================================================
   5. Navigation Components
   ================================================================= */

/* Navbar styles removed in Phase 6 - migrated to Navbar component scoped CSS */

/* Footer, Breadcrumbs, and Tabs removed in Phase 6 - unused patterns */

/* Utility: Non-interactive overlays (prevent input interception) */
.overlay-noninteractive { pointer-events: none; }

/* =================================================================
   6. Modal & Overlay Components
   ================================================================= */

/* Modal & Dialog styles removed in Phase 6 - no usage detected in codebase */

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background-color: rgb(0 0 0 / 90%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    cursor: zoom-out;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    background: none;
    border: none;
    color: var(--brand-white);
    font-size: var(--text-2xl);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.lightbox-close:hover {
    opacity: 1;
}

/* Tooltip */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip-content {
    position: absolute;
    bottom: calc(100% + var(--spacing-sm));
    left: 50%;
    transform: translateX(-50%);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--gray-900);
    color: var(--brand-white);
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 10;
}

.tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--gray-900);
}

.tooltip:hover .tooltip-content {
    opacity: 1;
    visibility: visible;
}

/* =================================================================
   Animations
   ================================================================= */

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

@keyframes progress-shine {
    to { transform: translateX(100%); }
}

@keyframes skeleton-loading {
    to { background-position: -200% 0; }
}

/* =================================================================
   Responsive Design
   ================================================================= */

@media (width <= 768px) {
    /* Mobile Navigation - migrated to Navbar component scoped CSS in Phase 6 */
    
    /* Mobile Modals */
    .modal {
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    
}