/* ============================================================================
   CUSTOM APPLICATION STYLES
   ============================================================================

   This file contains only custom CSS for the BayClub application.
   Tailwind and DaisyUI are imported separately via tailwind.css.

   Note: This file is imported by tailwind.css and processed together.
   ============================================================================ */


/* ============================================================================
   CSS CUSTOM PROPERTIES
   ============================================================================ */

/* Inter font with system fallback */
html {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Prevent horizontal page scroll from fixed-width descendants like the mobile dock or absolute badges. */
    overflow-x: clip;
}

:root {
    /* Navigation gradients - reusable color-mix patterns */
    --nav-hover-bg: linear-gradient(to right,
        color-mix(in oklch, var(--color-primary), transparent 85%),
        color-mix(in oklch, var(--color-secondary), transparent 90%));
    --nav-active-bg: linear-gradient(to right,
        color-mix(in oklch, var(--color-primary), transparent 80%),
        color-mix(in oklch, var(--color-secondary), transparent 85%));

    /* Scrollbar colors - consistent across components */
    --scrollbar-track: var(--color-base-200);
    --scrollbar-thumb: var(--color-primary);
    --scrollbar-thumb-hover: color-mix(in oklch, var(--color-primary), black 20%);

    /* Spacing scale - standardized spacing values */
    --space-xs: 0.25rem;    /* 4px - Extra small spacing */
    --space-sm: 0.5rem;     /* 8px - Small spacing */
    --space-md: 1rem;       /* 16px - Medium spacing (default) */
    --space-lg: 1.5rem;     /* 24px - Large spacing */
    --space-xl: 2rem;       /* 32px - Extra large spacing */
    --space-2xl: 3rem;      /* 48px - 2x large spacing */
}

/* ============================================================================
   DAISYUI THEME CUSTOMIZATION - Blue Primary Color (Figma Match)
   ============================================================================ */

/* Light theme - Bright blue primary matching Figma design (#3B82F6 / blue-500) */
[data-theme="light"] {
    --color-primary: #3B82F6;                       /* Tailwind blue-500 - exact Figma match */
    --color-primary-content: #ffffff;               /* White text on primary */
    --color-secondary: #8B5CF6;                     /* Purple secondary */
    --color-secondary-content: #ffffff;
    --color-accent: #14B8A6;                        /* Teal accent */
    --color-accent-content: #ffffff;
}

/* Dark theme - Blue primary */
[data-theme="dark"] {
    --color-primary: #60A5FA;                       /* Tailwind blue-400 - lighter for dark mode */
    --color-primary-content: #1e293b;               /* Dark text on primary */
    --color-secondary: #A78BFA;                     /* Lighter purple for dark mode */
    --color-secondary-content: #1e293b;
    --color-accent: #2DD4BF;                        /* Lighter teal for dark mode */
    --color-accent-content: #1e293b;
}


/* ============================================================================
   NAVIGATION COMPONENTS
   ============================================================================ */

/* Sidebar Menu Styling
   - Custom gradient hover effects and active state
   - Tailwind handles: transitions (transition-all duration-200)
   ========================================================================== */

.drawer-side .menu li > a {
    transition: all 0.2s ease;
}

.drawer-side .menu li > a:hover {
    background: var(--nav-hover-bg);
    transform: translateX(4px);
}

.drawer-side .menu li > a.active {
    background: var(--nav-active-bg);
    border-left: 4px solid var(--color-primary);
    font-weight: 600;
    color: var(--color-primary);
}

.drawer-side .menu li > a.active i {
    color: var(--color-primary);
}

/* Top Navigation Tabs (Desktop)
   - Rounded pill buttons with border outline
   - Active state: filled primary background
   - Applied via ActiveRouteTagHelper
   ========================================================================== */

#main-nav-tabs a {
    border: 1px solid var(--color-base-300);
    background-color: transparent;
    transition: all 0.2s ease;
}

#main-nav-tabs a:hover {
    background-color: var(--color-base-200);
}

#main-nav-tabs a.is-active {
    background-color: var(--color-primary);
    color: var(--color-primary-content);
    border-color: var(--color-primary);
    font-weight: 600;
}

/* Dock Navigation (Mobile Bottom Bar)
   - Active state styling for dock links
   - Z-index fix to ensure dock appears above stretched-link cards
   ========================================================================== */

.dock {
    z-index: 100 !important; /* Higher than card z-index (20) to ensure dock is always visible */
}

/* Keep the dock the same max width as the top navbar's .container so the bottom
   bar doesn't extend past the content above it. Default .dock is fixed and
   spans left:0 → right:0; at each breakpoint we clamp the max width and center. */
@media (min-width: 640px) {
    .dock {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        max-width: 640px;
    }
}
@media (min-width: 768px) {
    .dock {
        max-width: 768px;
    }
}

.dock a {
    position: relative;
    z-index: 101; /* Ensure dock links are clickable */
}

.dock a.is-active,
.dock a.is-active:visited,
.dock a.is-active:any-link {
    background-color: transparent !important;
    color: var(--color-primary) !important;
    border-top: 3px solid var(--color-primary);
    border-radius: 0;
    font-weight: 600;
}

.dock a.is-active i,
.dock a.is-active:visited i,
.dock a.is-active:any-link i {
    color: var(--color-primary) !important;
}

/* Navigation Loading Progress Bar
   ========================================================================== */

.progress-bar {
    width: 30%;
    transform-origin: left;
    animation: progress-bar-slide 1.5s ease-in-out infinite;
}


/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/* Alpine.js Cloak Support
   - Prevents flash of unstyled content for Alpine.js components
   - Elements with x-cloak are hidden until Alpine.js initializes
   ========================================================================== */

[x-cloak] {
    display: none !important;
}

/* Shared Scrollbar Styling
   - Applied to both gallery and media carousel
   - Webkit-specific styling for Chrome/Safari
   ========================================================================== */

.scrollbar-thin-primary {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.scrollbar-thin-primary::-webkit-scrollbar {
    height: 8px;
}

.scrollbar-thin-primary::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 4px;
}

.scrollbar-thin-primary::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

.scrollbar-thin-primary::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}


/* ============================================================================
   CARD & LIST COMPONENTS
   ============================================================================ */

/* Card Lists with Alternating Border Colors
   - Applies to Posts, Auctions, and Reference Checks
   - Odd cards: Primary color border
   - Even cards: Secondary color border
   ========================================================================== */

.posts-list .card,
.auctions-list .card,
.reference-checks-list .card {
    border-width: 1px;
    border-left-width: 4px;
}

.posts-list .card:nth-of-type(odd),
.auctions-list .card:nth-of-type(odd),
.reference-checks-list .card:nth-of-type(odd) {
    border-color: var(--color-primary);
}

.posts-list .card:nth-of-type(even),
.auctions-list .card:nth-of-type(even),
.reference-checks-list .card:nth-of-type(even) {
    border-color: var(--color-secondary);
}

/* Stretched Link Pattern for Clickable Cards
   - Makes entire card clickable while preserving nested interactive elements
   - Uses ::after pseudo-element to cover the card
   - z-index ensures links and buttons remain clickable
   ========================================================================== */

.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    content: "";
    background-color: transparent;
}

/* Only interactive elements need to be above the stretched link.
   z-index is applied to all of them, but position: relative is only forced on
   elements that don't already opt into another positioning context — otherwise
   we'd silently override Tailwind's .absolute/.fixed/.sticky utilities. */
.card-body a:not(.stretched-link),
.card-body button,
.card-body [data-media-urls] img {
    z-index: 20;
}

.card-body a:not(.stretched-link):not(.absolute):not(.fixed):not(.sticky),
.card-body button:not(.absolute):not(.fixed):not(.sticky),
.card-body [data-media-urls] img {
    position: relative;
}

/* Add hover effect to show the card is clickable */
.card:has(.stretched-link):hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
    cursor: pointer;
}


/* ============================================================================
   ANIMATIONS & KEYFRAMES
   ============================================================================ */

@keyframes progress-bar-slide {
    0% {
        left: -30%;
    }
    100% {
        left: 100%;
    }
}

/* Toast Notification Animations */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
}

.animate-fade-out {
    animation: fade-out 0.3s ease-in forwards;
}


/* ============================================================================
   THEME-SPECIFIC STYLES
   ============================================================================ */

/* Icon Colors for Sidebar Menu - Removed in favor of semantic classes
   - Now using .icon-posts, .icon-auctions, .icon-reference-checks
   - See "Feature-Specific Icon Colors" section below
   ========================================================================== */

/* Feature-Specific Icon Colors
   - Semantic classes for consistent icon colors across the app
   - Used in navigation, landing page, and feature cards
   ========================================================================== */

.icon-posts {
    color: var(--color-primary);
}

.icon-auctions {
    color: var(--color-secondary);
}

.icon-reference-checks {
    color: var(--color-accent);
}

/* ============================================================================
   MENTION LINKS
   Clickable @mention links in posts, comments, and auctions
   ============================================================================ */

.mention-link {
    color: var(--color-info);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.mention-link:hover {
    color: color-mix(in oklch, var(--color-info), black 20%);
    text-decoration: underline;
}

/* ============================================================================
   TRIX EDITOR CUSTOMIZATION
   Show bold, italic, strikethrough buttons but strip formatting on save
   Hide other formatting options - Dark mode compatible styling
   ============================================================================ */

/* Hide quote, code, heading buttons */
trix-toolbar .trix-button--icon-quote,
trix-toolbar .trix-button--icon-code,
trix-toolbar .trix-button--icon-heading-1,
trix-toolbar .trix-button-group--block-tools {
    display: none !important;
}

/* Hide list buttons (bullet and number) */
trix-toolbar .trix-button--icon-bullet-list,
trix-toolbar .trix-button--icon-number-list {
    display: none !important;
}

/* Hide indent/outdent buttons */
trix-toolbar .trix-button--icon-decrease-nesting-level,
trix-toolbar .trix-button--icon-increase-nesting-level {
    display: none !important;
}

/* Hide attachment and link buttons */
trix-toolbar .trix-button--icon-attach,
trix-toolbar .trix-button--icon-link,
trix-toolbar .trix-button-group--file-tools {
    display: none !important;
}

/* Keep visible: bold, italic, strikethrough (but formatting will be stripped on save) */

/* Trix toolbar styling for light and dark modes */
trix-toolbar {
    background-color: oklch(var(--b2));
    border: 1px solid oklch(var(--bc) / 0.2);
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.5rem;
}

/* Trix editor content area */
trix-editor {
    background-color: oklch(var(--b1));
    color: oklch(var(--bc));
    border: 1px solid oklch(var(--bc) / 0.2);
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
    padding: 0.75rem;
    min-height: 8rem;
}

/* Toolbar button groups - white background for icon visibility in dark mode */
trix-toolbar .trix-button-group {
    background-color: white;
}

/* Toolbar buttons */
trix-toolbar .trix-button {
    background-color: transparent;
    border: 1px solid oklch(var(--bc) / 0.2);
    color: oklch(var(--bc));
    transition: all 0.2s ease;
}

trix-toolbar .trix-button:hover {
    background-color: oklch(var(--bc) / 0.1);
    border-color: oklch(var(--bc) / 0.3);
}

/* Active/selected button state */
trix-toolbar .trix-button.trix-active {
    background-color: oklch(var(--p));
    color: oklch(var(--pc));
    border-color: oklch(var(--p));
}

/* Disabled button state */
trix-toolbar .trix-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Trix editor focus state — custom ring instead of browser default */
trix-editor:focus {
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--p));
}

/* Placeholder text */
trix-editor:empty:not(:focus)::before {
    color: oklch(var(--bc) / 0.5);
}


/* ============================================================================
   TRIBUTE.JS MENTION AUTOCOMPLETE - DARK MODE SUPPORT
   ============================================================================
   Override default Tribute.js styles with DaisyUI theme variables
   Addresses CONCERN #4: Editable styles with dark mode support
   ========================================================================== */

/* Mention dropdown container */
.tribute-container {
    border-radius: var(--rounded-box, 0.5rem);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    z-index: 1000;
}

/* Dropdown menu background - uses DaisyUI theme colors */
.tribute-container ul {
    background: var(--color-base-200) !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: var(--rounded-box, 0.5rem);
    max-height: 300px;
    overflow-y: auto;
}

/* Menu item hover/highlight state */
.tribute-container li.highlight {
    background: var(--color-base-300) !important;
    border-left: 3px solid var(--color-primary) !important;
    padding-left: calc(0.5rem - 3px) !important;
}

/* Menu item layout - DaisyUI classes handle most styling */
.tribute-container li {
    background: var(--color-base-200) !important;
    color: var(--color-base-content) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.5rem 1rem !important;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* ============================================================================
   MOBILE SCROLLBAR HIDE
   ============================================================================
   Hide scrollbars on mobile devices while maintaining scroll functionality
   ========================================================================== */

@media (max-width: 767px) {
    /* Hide scrollbar for Chrome, Safari and Opera */
    *::-webkit-scrollbar {
        display: none;
    }

    /* Hide scrollbar for IE, Edge and Firefox */
    * {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
}


/* ============================================================================
   VIEW TRANSITIONS - MPA NAVIGATION
   ============================================================================
   Cross-document view transitions for smooth page navigation
   Requires: Chrome 111+, Safari 18+, Firefox 144+
   Progressive enhancement - gracefully degrades on unsupported browsers
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    /* Enable cross-document view transitions for same-origin navigations */
    @view-transition {
        navigation: auto;
    }
    
    /* Name the main content area for consistent transitions */
    #main-content {
        view-transition-name: main-content;
    }
    
    /* Persistent layout elements - each needs unique name to stay fixed during transitions */
    header {
        view-transition-name: header;
    }
    nav {
        view-transition-name: nav;
    }
    footer {
        view-transition-name: footer;
    }
    .dock {
        view-transition-name: mobile-dock;
    }

    /* Main content cross-fade animation */
    ::view-transition-group(main-content) {
        animation-duration: 250ms;
        animation-timing-function: ease-out;
    }

    ::view-transition-old(main-content) {
        animation: fade-out 250ms ease-out;
    }

    ::view-transition-new(main-content) {
        animation: fade-in 250ms ease-in;
    }

    /* Prevent dock from cross-fading during navigation (avoids active state flash) */
    ::view-transition-old(mobile-dock),
    ::view-transition-new(mobile-dock) {
        animation: none;
    }

    @keyframes fade-out {
        from { opacity: 1; }
        to { opacity: 0; }
    }

    @keyframes fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    /* Optional: Named transitions for specific elements (e.g., auction images)
       To use: add style="view-transition-name: auction-{id}-image" to matching elements
    ::view-transition-image-pair(auction-image) {
        isolation: auto;
    }
    */
}