/**
 * =========================================
 * NXVest - Custom Styles (Tailwind Extension)
 * =========================================
 */

/* ========== Tailwind Directives (NPM only) ========== */
/* Uncomment if using NPM build */
/*
@tailwind base;
@tailwind components;
@tailwind utilities;
*/

/* ========== Custom Base Styles ========== */
@layer base {
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }

    /* Body defaults */
    body {
        @apply antialiased;
    }

    /* Custom selection color */
    ::selection {
        @apply bg-primary-500 text-white;
    }

    /* Focus outline style */
    :focus-visible {
        @apply outline-2 outline-offset-2 outline-primary-500;
    }
}

/* ========== Custom Component Classes ========== */
@layer components {
    /* Logo gradient text */
    .logo-gradient {
        @apply bg-gradient-to-r from-primary-500 to-primary-400 bg-clip-text text-transparent;
    }

    /* Card hover glow effect */
    .card-glow:hover {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
    }

    /* Refresh button spin animation */
    #refresh-icon.animate-spin {
        animation: spin 1s linear infinite;
    }

    /* New data indicator pulse */
    #new-data-indicator button {
        animation: pulse-glow 2s ease-in-out infinite;
    }

    @keyframes pulse-glow {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
        }
        50% {
            box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
        }
    }

    /* Metric value colors */
    .metric-positive {
        @apply text-profit;
    }

    .metric-negative {
        @apply text-loss;
    }

    /* Custom scrollbar */
    .custom-scrollbar::-webkit-scrollbar {
        @apply w-2 h-2;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        @apply bg-dark-100 rounded-full;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        @apply bg-dark-300 rounded-full hover:bg-dark-400;
    }

    /* Chart.js tooltip override */
    .chartjs-tooltip {
        @apply !bg-dark-50 !border !border-dark-200 !rounded-lg !shadow-lg;
    }
}

/* ========== Custom Utilities ========== */
@layer utilities {
    /* Text shadow for emphasis */
    .text-glow {
        text-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
    }

    /* Gradient border */
    .border-gradient {
        border: 1px solid transparent;
        background: linear-gradient(var(--tw-gradient-stops)) border-box;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
    }

    /* Hide scrollbar but keep functionality */
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    /* Line clamp utilities */
    .line-clamp-1 {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ========== Chart.js Custom Styles ========== */
.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* ========== Animations ========== */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(99, 102, 241, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
    }
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* ========== Print Styles ========== */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        @apply bg-white text-black;
    }

    .card, .chart-container {
        @apply border border-gray-300;
        break-inside: avoid;
    }
}


/**
 * =========================================
 * NXVest - Supplementary Styles
 * =========================================
 * 
 * This file contains styles that complement Tailwind CSS:
 * - Custom animations
 * - Scrollbar styling
 * - Font smoothing
 * - Chart.js overrides
 * - Special utilities
 * 
 * NOTE: All main styling is done via Tailwind classes in HTML
 */

/* ==================== */
/* BASE & FONT SMOOTHING */
/* ==================== */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    text-rendering: optimizeLegibility;
}

/* ==================== */
/* CUSTOM SCROLLBAR */
/* ==================== */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #3f3f46 #18181b;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #18181b;
}

::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #52525b;
}

/* Hide scrollbar for specific elements */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ==================== */
/* CUSTOM ANIMATIONS */
/* ==================== */

/* Fade In */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Fade In Up (for cards) */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Slide In Right (for modals/sidebars) */
@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* Scale In (for tooltips/popovers) */
@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scale-in {
    animation: scale-in 0.2s ease-out forwards;
}

/* Shimmer (for skeleton loaders) */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.animate-shimmer {
    background: linear-gradient(
        90deg,
        #27272a 0%,
        #3f3f46 50%,
        #27272a 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ==================== */
/* CHART.JS OVERRIDES */
/* ==================== */

/* Ensure canvas is responsive */
canvas {
    max-width: 100%;
    height: auto !important;
}

/* Chart tooltip styles (backup, Chart.js handles most of this) */
.chartjs-tooltip {
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* ==================== */
/* FORM ELEMENTS */
/* ==================== */

/* Remove default focus outline, use custom */
input:focus,
select:focus,
button:focus,
textarea:focus {
    outline: none;
}

/* Custom focus ring */
.focus-ring:focus {
    box-shadow: 0 0 0 2px #18181b, 0 0 0 4px #8b5cf6;
}

/* Search input clear button (WebKit) */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 16px;
    width: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2371717a'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") center/contain no-repeat;
    cursor: pointer;
}

/* ==================== */
/* TABLE UTILITIES */
/* ==================== */

/* Sticky table header */
.table-sticky-header thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Alternating row colors (optional) */
.table-striped tbody tr:nth-child(even) {
    background-color: rgba(39, 39, 42, 0.3);
}

/* ==================== */
/* SELECTION HIGHLIGHT */
/* ==================== */

::selection {
    background-color: #8b5cf6;
    color: #ffffff;
}

::-moz-selection {
    background-color: #8b5cf6;
    color: #ffffff;
}

/* ==================== */
/* PRINT STYLES */
/* ==================== */

@media print {
    body {
        background: white;
        color: black;
    }
    
    .no-print {
        display: none !important;
    }
    
    /* Force page breaks */
    .page-break-before {
        page-break-before: always;
    }
    
    .page-break-after {
        page-break-after: always;
    }
}

/* ==================== */
/* UTILITIES */
/* ==================== */

/* Text truncate with ellipsis (multi-line) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Gradient text */
.text-gradient {
    background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass effect (frosted glass) */
.glass {
    background: rgba(24, 24, 27, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Glow effects */
.glow-primary {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

.glow-profit {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.glow-loss {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

/* ==================== */
/* TRANSITION UTILITIES */
/* ==================== */

/* Smooth height transition for collapsibles */
.transition-height {
    transition: height 0.3s ease-out;
    overflow: hidden;
}

/* Icon rotation (for chevrons) */
.rotate-180 {
    transform: rotate(180deg);
}

/* ==================== */
/* ACCESSIBILITY */
/* ==================== */

/* Skip link for keyboard navigation */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #8b5cf6;
    color: white;
    padding: 8px 16px;
    z-index: 100;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==================== */
/* RESPONSIVE FIXES */
/* ==================== */

/* Prevent horizontal scroll on mobile */
html, body {
    overflow-x: hidden;
}

/* Fix for iOS input zoom */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="search"],
    select {
        font-size: 16px;
    }
}

/* ==================== */
/* LOADING STATES */
/* ==================== */

/* Skeleton pulse (alternative to Tailwind animate-pulse) */
.skeleton {
    position: relative;
    overflow: hidden;
    background-color: #27272a;
}

.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.05),
        transparent
    );
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    100% {
        transform: translateX(100%);
    }
}