/* Components CSS - Centralized styling for all dynamic components */

/* Anti-FOUC and Skeleton Loading Styles */
.table-skeleton {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-hover) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

/* Smooth transitions for FOUC prevention */
.fade-in {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.fade-in.loaded {
    opacity: 1;
}

/* Pick Card Styling */
.pick-card-normal {
    background-color: var(--card-bg);
    line-height: 1.2;
}

.pick-card-featured {
    background-color: rgba(250, 204, 21, 0.1);
    line-height: 1.2;
}

.pick-ticker-link {
    color: var(--text-primary);
    font-family: 'Cousine', monospace;
    line-height: 1;
}

/* Compact Pick Card Optimizations */
.pick-card-normal, .pick-card-featured {
    min-height: 0;
    padding: 0.5rem !important; /* Reduced overall card padding */
}

.pick-card-normal > div, .pick-card-featured > div {
    margin-bottom: 0.25rem; /* Reduced from 0.375rem */
}

.pick-card-normal > div:last-child, .pick-card-featured > div:last-child {
    margin-bottom: 0;
}

/* Extra compact spacing for record breaker sections */
.pick-card-normal .grid.grid-cols-2.gap-1\.5,
.pick-card-featured .grid.grid-cols-2.gap-1\.5 {
    gap: 0.25rem !important; /* Smaller gap */
    margin-bottom: 0.25rem !important;
}

/* Minimize space in pick card headers */
.pick-card-normal .flex.justify-between.items-center,
.pick-card-featured .flex.justify-between.items-center {
    margin-bottom: 0.25rem !important;
}

/* Compact record breaker cards specifically */
.record-breakers-section .pick-card-normal,
.record-breakers-section .pick-card-featured {
    margin-bottom: 0.5rem !important; /* Reduce space between cards */
}

/* TARGET: Record Breakers - Work with original Tailwind Grid structure */
#top-picks-content {
    padding: 1rem !important; /* Match original p-4 (16px) */
}

/* Fix grid container whitespace - the real culprit */
#top-picks-content .grid {
    gap: 0.25rem !important; /* Tight spacing */
    align-items: start !important; /* Prevent cards from stretching vertically */
    height: auto !important; /* Natural height - no fixed height */
    min-height: 0 !important; /* No minimum height */
    max-height: fit-content !important; /* Only as tall as content */
    padding: 0 !important; /* Remove any internal padding */
    margin: 0 !important; /* Remove any margins */
    display: grid !important; /* Ensure proper grid display */
    grid-template-rows: auto !important; /* Rows only as tall as needed */
    align-content: start !important; /* Pack content to top */
}

/* Minimal card styling - let Tailwind classes handle layout */
#top-picks-content .grid > div {
    /* Don't override flex properties - let Tailwind grid work */
    padding: 0.5rem !important; /* Match original p-2 (8px) */
    line-height: 1.2 !important; /* Compact text */
    height: auto !important; /* Natural height */
    align-self: start !important; /* Prevent individual card stretching */
}

/* TARGET: Fix the problematic internal stats grid */
#top-picks-content .grid.grid-cols-2.gap-1\.5.text-xs {
    gap: 0.125rem !important; /* Minimal gap instead of gap-1.5 */
    margin-bottom: 0 !important; /* Remove any bottom margin */
    align-items: start !important; /* Prevent stretching */
}

/* TARGET: Fix the stats grid children */
#top-picks-content .grid.grid-cols-2.gap-1\.5.text-xs > div {
    margin-bottom: 0 !important; /* Remove margins */
    padding: 0 !important; /* Remove padding */
    align-self: start !important; /* No stretching */
}

/* TARGET: Fix the flex containers within stats */
#top-picks-content .grid.grid-cols-2.gap-1\.5.text-xs .flex.justify-between {
    margin-bottom: 0.0625rem !important; /* Minimal 1px spacing */
    line-height: 1.1 !important; /* Very tight */
}

/* Compact internal spacing within cards */
#top-picks-content .mb-1\.5 {
    margin-bottom: 0.25rem !important; /* Tighter than mb-1.5 */
}

#top-picks-content .mb-1 {
    margin-bottom: 0.125rem !important; /* Tighter than mb-1 */
}

#top-picks-content .gap-1\.5 {
    gap: 0.25rem !important; /* Tighter than gap-1.5 */
}

/* Remove excess whitespace from last elements in cards */
#top-picks-content .grid > div > *:last-child {
    margin-bottom: 0 !important;
}

/* Ensure minimal height for grid items */
#top-picks-content .grid > div {
    min-height: auto !important;
    max-height: fit-content !important;
}

/* Ensure text stays compact */
#top-picks-content .text-xs {
    line-height: 1.1 !important;
}

#top-picks-content .text-sm {
    line-height: 1.2 !important;
}

/* Minimize record breaker stats grid spacing */
.record-summary-container + .grid,
.record-details-container .grid {
    gap: 0.125rem !important; /* Very tight grid spacing */
    margin-top: 0.25rem !important;
    margin-bottom: 0.125rem !important;
}

/* Compact text sizing in record breakers */
.record-summary-container .text-xs,
.record-details-container .text-xs {
    line-height: 1.2 !important; /* Tighter line height */
}

/* Remove excessive margins from grid containers in record cards */
.pick-card-normal .grid-cols-6,
.pick-card-featured .grid-cols-6 {
    gap: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

/* Record Breaking Details - Optimized for minimal space */
.record-summary-container {
    background-color: rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: opacity 0.2s ease;
    padding: 0.25rem 0.5rem !important; /* Reduced padding */
    margin-bottom: 0.25rem !important; /* Reduced margin */
    border-radius: 4px;
}

.record-summary-container:hover {
    opacity: 0.8;
}

.record-details-container {
    background-color: rgba(0, 0, 0, 0.02);
    padding: 0.375rem !important; /* Reduced padding */
    margin-bottom: 0.25rem !important; /* Reduced margin */
    border-radius: 4px;
}

/* Reduce spacing inside record details */
.record-details-container .mb-2 {
    margin-bottom: 0.25rem !important;
}

.record-details-container .mb-1\.5 {
    margin-bottom: 0.25rem !important;
}

.record-details-container .p-1\.5 {
    padding: 0.25rem !important;
}

.record-category-title {
    color: var(--red);
}

.record-score-text {
    color: rgba(var(--text-primary-rgb), 0.7);
}

.record-stat-label {
    color: rgba(var(--text-primary-rgb), 0.6);
}

.record-stat-value {
    color: var(--text-primary);
}

.record-delta-value {
    color: var(--green);
}

/* Pick Stats Grid */
.pick-stat-label {
    color: rgba(var(--text-primary-rgb), 0.6);
}

.pick-stat-value {
    color: var(--text-primary);
}

.pick-stat-relvol {
    color: #ea580c;
}

.pick-stat-rotation {
    color: #9333ea;
}

/* Table Row Styling */
.ticker-row-normal {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    transition: all 0.15s ease-in-out;
    color: var(--text-primary);
}

.ticker-row-pick {
    background-color: rgba(250, 204, 21, 0.2);
    border-bottom: 1px solid var(--border-color);
    transition: all 0.15s ease-in-out;
    color: var(--text-primary);
}

.ticker-link-main {
    font-family: 'Cousine', monospace;
}

/* Watchlist Row Styling */
.watchlist-row {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.watchlist-empty-message {
    color: var(--text-primary);
    opacity: 0.7;
}

/* Superstar Watchlist Special Styling */
.superstar-row {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    background: linear-gradient(45deg, rgba(255,215,0,0.05), rgba(255,237,78,0.05));
}

.superstar-score {
    color: #000;
    font-weight: bold;
}

/* Market Stats Styling */
.market-stat-value {
    color: #000;
    font-weight: bold;
}

/* Section Title Styling */
.section-title {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.125rem;
    font-weight: 600;
    text-align: left; /* Functional titles stay left-aligned */
    margin-bottom: 0.75rem;
}

/* CNN-Style Section Bars - Bold vertical accent on left side */
.section-with-bar {
    position: relative;
    padding-left: 1rem;
}

.section-with-bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #f9fafb; /* Ultra light grey - ghost-like presence */
    border-radius: 2px;
}

/* History daily headers get slightly thinner bars */
.history-daily-header.section-with-bar::before {
    background-color: #fafbfc; /* Nearly invisible for history headers */
    width: 3px;
}

[data-theme="dark"] .section-with-bar::before {
    background-color: #374151; /* Subtle dark grey for dark mode */
}

[data-theme="dark"] .history-daily-header.section-with-bar::before {
    background-color: #4b5563; /* Slightly lighter for dark mode history headers */
}

/* CSS Variables for Theme Support */
:root {
    /* Base colors for light mode - true inverse foundation */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --bg-hover: #f3f4f6;
    
    /* Legacy compatibility */
    --card-bg: #ffffff;
    --text-primary: #000000;  /* Pure black for true inverse */
    --text-primary-rgb: 0, 0, 0;
    --text-secondary: #4b5563;
    --text-tertiary: #9ca3af;
    --text-muted: #6b7280;
    --text-time: #6b7280;
    
    /* Border colors */
    --border-primary: #e5e7eb;
    --border-secondary: #d1d5db;
    --border-color: #e5e7eb; /* Legacy compatibility */
    
    /* Status colors */
    --success: #10b981;
    --success-bg: #d1fae5;
    --error: #ef4444;
    --error-bg: #fee2e2;
    --warning: #f59e0b;
    --warning-bg: #fef3c7;
    --info: #3b82f6;
    --info-bg: #dbeafe;
    
    /* Legacy status colors */
    --red: #ef4444;
    --green: #10b981;
    --blue: #3b82f6;
    
    /* Component-specific colors */
    --table-header-bg: #f9fafb;
    --table-row-hover: #f9fafb;
    --stat-box-bg: #f8fafc;
    --stat-box-hover-bg: #f1f5f9;
}

[data-theme="dark"] {
    /* True inverse - pure black/white contrast */
    --bg-primary: #000000;  /* Pure black */
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;
    --bg-hover: #1a1a1a;
    
    /* Legacy compatibility */
    --card-bg: #111111;
    --text-primary: #ffffff;  /* Pure white */
    --text-primary-rgb: 255, 255, 255;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --text-muted: #9ca3af;
    --text-time: #d1d5db;
    
    /* Inverted border colors */
    --border-primary: #333333;
    --border-secondary: #4b5563;
    --border-color: #333333; /* Legacy compatibility */
    
    /* Adjusted status colors for dark mode */
    --success: #34d399;
    --success-bg: #064e3b;
    --error: #f87171;
    --error-bg: #7f1d1d;
    --warning: #fbbf24;
    --warning-bg: #78350f;
    --info: #60a5fa;
    --info-bg: #1e3a8a;
    
    /* Legacy status colors */
    --red: #f87171;
    --green: #34d399;
    --blue: #60a5fa;
    
    /* Component-specific colors */
    --table-header-bg: #1a1a1a;
    --table-row-hover: #1a1a1a;
    --stat-box-bg: #1a1a1a;
    --stat-box-hover-bg: #333333;
}

/* Dark theme hover effects */
/* [data-theme="dark"] .watchlist-row:hover {
    background-color: rgba(96, 165, 250, 0.1);
    box-shadow: 2px 0 4px rgba(96, 165, 250, 0.2);
} */

/* Dark theme hover effects - disabled for cleaner look */
/* [data-theme="dark"] .ticker-row-normal:hover,
[data-theme="dark"] .ticker-row-pick:hover {
    background-color: rgba(96, 165, 250, 0.15);
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.25);
} */

/* Watchlist Row Styling Base */
.watchlist-row {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

/* Hover effect for entire watchlist row when ticker is hovered - disabled for cleaner look */
/* .watchlist-row:hover {
    background-color: rgba(59, 130, 246, 0.05);
    transform: translateX(2px);
    box-shadow: 2px 0 4px rgba(59, 130, 246, 0.1);
} */

/* Main table row hover effect - disabled for cleaner look */
/* .ticker-row-normal:hover,
.ticker-row-pick:hover {
    background-color: rgba(59, 130, 246, 0.08);
    transform: scale(1.005);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
} */

/* Remove underlines from watchlist titles */
.watchlist-title {
    text-decoration: none !important;
}

/* Override any underline classes on watchlist headers */
h4.underline {
    text-decoration: none !important;
}

/* Update Volume Compare Classes for better integration */
.volume-higher-cell {
    font-weight: bold;
}

.volume-lower-cell {
    color: var(--red);
    font-weight: bold;
}

/* Price Direction Styling */
.price-positive {
    color: var(--green);
}

.price-negative {
    color: var(--red);
}

/* Volume Comparison Classes */
.volume-increased {
    color: var(--green);
    font-weight: bold;
}

.volume-decreased {
    color: var(--red);
    font-weight: bold;
}

/* Relative Volume Classes */
.relvol-normal {
    color: var(--text-primary);
}

.relvol-moderate {
    color: #f97316;
    font-weight: bold;
}

.relvol-high {
    color: #ef4444;
    font-weight: bold;
}

.relvol-extreme {
    color: #dc2626;
    font-weight: bold;
    text-shadow: 0 0 1px rgba(220, 38, 38, 0.3);
}

/* Float Rotation Classes */
.float-rotation-low {
    color: var(--text-primary);
}

.float-rotation-moderate {
    color: #f97316;
    font-weight: bold;
}

.float-rotation-high {
    color: #ef4444;
    font-weight: bold;
}

/* Button Styling */
.action-button {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #000000;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.action-button:hover {
    background-color: #f3f4f6;
}

/* Dark mode fix for action buttons */
[data-theme="dark"] .action-button {
    background-color: #374151;
    color: #ffffff;
    border: 1px solid #9ca3af;
}

[data-theme="dark"] .action-button:hover {
    background-color: #4b5563;
}

/* Badge Styling */
.record-badge {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #000000;
}

/* Dark mode fix for badges */
[data-theme="dark"] .record-badge {
    background-color: #374151;
    color: #ffffff;
    border: 1px solid #9ca3af;
}

/* Pick ticker link dark mode fix */
[data-theme="dark"] .pick-ticker-link {
    color: #ffffff !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.25rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .pick-card-featured {
        background-color: rgba(250, 204, 21, 0.3);
        border: 2px solid #000000;
    }
    
    .ticker-row-pick {
        background-color: rgba(250, 204, 21, 0.4);
        border: 2px solid #000000;
    }
    
    .superstar-row {
        background: rgba(255,215,0,0.2);
        border: 2px solid #000000;
    }
}

/* Print Styles */
@media print {
    .pick-card-featured,
    .ticker-row-pick,
    .superstar-row {
        background-color: #ffffff !important;
        border: 1px solid #000000 !important;
    }
    
    .section-title,
    .section-subtitle {
        color: #000000 !important;
    }
}

/* HTML Template Components */

/* Professional Header/Navigation Styling */
.header {
    transition: all 0.3s ease;
}

.professional-nav {
    background-color: var(--bg-primary);  /* Same as footer - light background */
    border-top: 1px solid var(--border-primary);  /* Subtle border like footer */
    border-bottom: 1px solid var(--border-primary);  /* Subtle border like footer */
    transition: all 0.3s ease;
}

/* Integrated Site Title - styled like menu items but larger */
.nav-title-integrated {
    color: var(--text-primary) !important;  /* Normal text color for light background */
    text-decoration: none;
    padding: 12px 20px;
    margin: 0 8px 0 2px;
    border-radius: 0;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    font-weight: 900;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid transparent;
    background-color: transparent;
    border-right: 1px solid var(--border-primary);  /* Subtle divider */
    /* Prevent font rendering shifts */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Maintain consistent width */
    box-sizing: border-box;
    display: inline-block;
    min-width: fit-content;
}

.nav-title-integrated:hover {
    background-color: var(--bg-hover);  /* Subtle hover effect */
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary);  /* Subtle border on hover */
    border-radius: 6px;  /* Modern rounded corners */
    /* Remove transform to prevent layout shift */
}

.nav-link-professional {
    font-family: 'Cousine', monospace;
    color: var(--text-primary) !important;  /* Normal text color for light background */
    text-decoration: none;
    padding: 12px 18px;
    margin: 0 2px;
    border-radius: 6px;  /* Modern rounded corners */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    background-color: transparent;
    /* Prevent font rendering shifts */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Maintain consistent width */
    box-sizing: border-box;
    display: inline-block;
    min-width: fit-content;
}

.nav-link-professional:hover {
    background-color: var(--bg-hover);  /* Subtle hover effect */
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary);  /* Subtle border on hover */
    /* Remove transform to prevent layout shift */
}

.nav-link-professional.active {
    background-color: var(--bg-hover);  /* Subtle active state */
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary);  /* Subtle border for active */
}

/* Dark theme navigation - keeping same subtle approach */
[data-theme="dark"] .professional-nav {
    background-color: var(--bg-primary);    /* Consistent with light mode approach */
    border-top: 1px solid var(--border-primary);
    border-bottom: 1px solid var(--border-primary);
}

[data-theme="dark"] .nav-link-professional {
    color: var(--text-primary) !important;  /* Theme-appropriate text color */
}

[data-theme="dark"] .nav-title-integrated {
    color: var(--text-primary) !important;  /* Theme-appropriate text color */
    border-right: 1px solid var(--border-primary);
}

[data-theme="dark"] .nav-title-integrated:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
}

[data-theme="dark"] .nav-link-professional:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary);
}

[data-theme="dark"] .nav-link-professional.active {
    background-color: var(--bg-hover);
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary);
}

/* Search Bar Styling in Navigation */
.professional-nav input[type="text"] {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #666666 !important;
    font-family: 'Cousine', monospace;
    font-weight: 600;
    padding: 8px 12px;
    font-size: 0.85rem;
}

.professional-nav input[type="text"]:focus {
    border-color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
}

.professional-nav input[type="text"]::placeholder {
    color: #666666;
    font-weight: 500;
}

/* Theme Toggle Button in Navigation */
.professional-nav .theme-toggle {
    background-color: #ffffff;
    color: #000000;
    border: 2px solid #666666;
    padding: 8px;
    transition: all 0.2s ease;
    font-weight: bold;
}

.professional-nav .theme-toggle:hover {
    background-color: #000000;
    color: #ffffff;
    border-color: #ffffff;
    transform: translateY(-1px);
}

/* Dark theme search and toggle */
[data-theme="dark"] .professional-nav input[type="text"] {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #333333 !important;
}

[data-theme="dark"] .professional-nav input[type="text"]:focus {
    border-color: #000000 !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .professional-nav input[type="text"]::placeholder {
    color: #999999;
}

[data-theme="dark"] .professional-nav .theme-toggle {
    background-color: #000000;
    color: #ffffff;
    border: 2px solid #333333;
}

[data-theme="dark"] .professional-nav .theme-toggle:hover {
    background-color: #ffffff;
    color: #000000;
    border-color: #000000;
}

/* Integrated Search Bar - styled like menu items */
.nav-search-integrated {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid transparent !important;
    font-family: 'Cousine', monospace;
    font-weight: 700;
    padding: 12px 14px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    border-radius: 0;
}

.nav-search-integrated:focus {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
    box-shadow: none !important;
    outline: none !important;
}

.nav-search-integrated::placeholder {
    color: #666666;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.nav-search-integrated:focus::placeholder {
    color: #cccccc;
}

/* Integrated Theme Toggle - styled like menu items */
.nav-toggle-integrated {
    background-color: #000000;
    color: #ffffff;
    border: 2px solid transparent;
    padding: 12px 14px;
    transition: all 0.3s ease;
    font-weight: bold;
    border-radius: 0;
    margin: 0 2px;
}

.nav-toggle-integrated:hover {
    background-color: #1f2937;
    color: #ffffff;
    border: 2px solid #1f2937;
    transform: translateY(-1px);
}

/* Dark theme integrated elements */
[data-theme="dark"] .nav-search-integrated {
    background-color: #000000 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .nav-search-integrated:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #ffffff !important;
}

[data-theme="dark"] .nav-search-integrated::placeholder {
    color: #999999;
}

[data-theme="dark"] .nav-search-integrated:focus::placeholder {
    color: #333333;
}

[data-theme="dark"] .nav-toggle-integrated {
    background-color: #000000;
    color: #ffffff;
}

[data-theme="dark"] .nav-toggle-integrated:hover {
    background-color: #1f2937;
    color: #ffffff;
    border: 2px solid #1f2937;
}

/* Live Clock and Market Countdown - styled like menu items */
.nav-clock-container {
    display: flex;
    flex-direction: column;
    margin-left: 16px;
    padding-left: 16px;
}

.nav-clock-integrated {
    background-color: var(--section-header-bg);
    color: var(--section-header-text);
    font-family: 'Cousine', monospace;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 6px 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    border: 2px solid transparent;
}

.nav-market-countdown {
    background-color: var(--section-header-bg);
    color: var(--section-header-text);
    font-family: 'Cousine', monospace;
    font-weight: 600;
    font-size: 0.7rem;
    padding: 2px 12px;
    text-align: center;
    border: 2px solid transparent;
    opacity: 0.9;
}

/* Market Report Section - Enhanced for 70/30 layout */
.market-report-section {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

/* Compact Market Report content area with reduced padding */
.market-report-content {
    font-family: 'Cousine', monospace;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.5rem !important; /* Further reduced from 0.75rem */
}

.market-report-text {
    color: var(--text-primary);
    flex: 1;
    line-height: 1.4; /* Reduced from 1.6 */
    font-size: 0.8rem; /* Reduced from 0.95rem */
}

/* Make paragraphs in market report more compact */
.market-report-text p {
    margin-bottom: 0.5rem; /* Reduced from 1rem */
    font-size: 0.8rem; /* Reduced from 0.95rem */
}

/* Make strong/bold text in market report stand out more */
.market-report-text strong {
    font-weight: 700;
    color: var(--text-primary);
}

/* Market Stats Section - Enhanced for 70/30 layout */
.market-stats-section {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

/* Compact Market Stats content area with reduced padding */
.market-stats-content {
    font-family: 'Cousine', monospace;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.5rem !important; /* Further reduced from 0.75rem */
}

/* Adjust market stat boxes for more compact layout */
.market-stat-box {
    background-color: var(--stat-box-bg);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    min-height: 40px; /* Further reduced from 45px */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.2rem; /* Further reduced padding */
}

.market-stat-box:hover {
    background-color: var(--stat-box-hover-bg);
    border-color: var(--border-hover-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Collapsed state styling - hide content when collapsed */
.market-report-content.hidden {
    display: none !important;
}

.market-stats-content.hidden {
    display: none !important;
}

/* When sections have collapsed content, minimize the entire section container */
.market-report-section.content-collapsed .table-container,
.market-stats-section.content-collapsed .table-container {
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
}

/* Specifically target the grid columns to collapse when content is hidden */
.lg\\:col-span-7:has(.market-report-section.content-collapsed),
.lg\\:col-span-3:has(.market-stats-section.content-collapsed) {
    min-height: auto !important;
    height: auto !important;
}

/* Fallback approach - target the parent divs directly */
.market-report-section.content-collapsed,
.market-stats-section.content-collapsed {
    min-height: auto !important;
    height: auto !important;
    margin-bottom: 0.25rem !important;
}

/* When both sections are collapsed, reduce the entire grid spacing */
.grid:has(.market-report-section.content-collapsed):has(.market-stats-section.content-collapsed) {
    margin-bottom: 0.5rem !important;
}

/* Direct targeting of the collapsed containers */
#market-report.content-collapsed,
#market-stats.content-collapsed {
    margin-bottom: 0 !important;
}

#market-report.content-collapsed .table-container,
#market-stats.content-collapsed .table-container {
    margin-bottom: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
}

/* When all content is collapsed, minimize the entire grid */
.grid.all-content-collapsed {
    margin-bottom: 0.25rem !important;
    gap: 0.25rem !important;
    min-height: auto !important;
}

.grid.all-content-collapsed .lg\\:col-span-7,
.grid.all-content-collapsed .lg\\:col-span-3 {
    min-height: auto !important;
}

/* Additional aggressive spacing reduction */
.all-content-collapsed .table-container {
    margin-bottom: 0 !important;
    padding: 0 !important;
    border-radius: 0.375rem !important;
}

/* Individual section collapsed state */
.market-section-collapsed {
    min-height: auto !important;
    height: auto !important;
}

/* Make numbers slightly smaller for compact layout */
.market-stat-number {
    color: var(--text-primary);
    font-weight: 700;
    font-family: 'Cousine', monospace;
    font-size: 1.1rem; /* Reduced from default (~1.25rem) */
}

.market-stat-label {
    color: var(--text-secondary);
    font-family: 'Cousine', monospace;
    line-height: 1.1; /* Tighter line height */
    font-size: 0.65rem; /* Smaller label text */
}

/* Smooth transitions for market section width changes */
.market-report-section,
.market-stats-section {
    transition: all 0.3s ease;
}

/* Responsive adjustments for the 70/30 layout */
@media (max-width: 1024px) {
    /* Return to larger grid on mobile for better readability */
    .market-stats-content .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important; /* Reduced gap on mobile */
    }
    
    .market-stat-number {
        font-size: 1.25rem; /* Slightly larger on mobile for readability */
    }
    
    /* Maintain compact text on mobile */
    .market-report-text {
        font-size: 0.75rem; /* Even smaller on mobile */
    }
    
    .market-report-text p {
        font-size: 0.75rem;
        margin-bottom: 0.375rem; /* Even more compact on mobile */
    }
}

/* Enhanced text size on larger screens where we have more space */
@media (min-width: 1200px) {
    .market-report-text {
        font-size: 1rem; /* Even larger on desktop */
    }
    
    .market-report-text p {
        font-size: 1rem;
        margin-bottom: 1.25rem; /* More spacing between paragraphs */
    }
}

@media (min-width: 1600px) {
    .market-report-text {
        font-size: 1.1rem; /* Maximum size on very large screens */
    }
    
    .market-report-text p {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }
}

/* Professional Section Headers - matching navigation style but slim */
.section-header-professional {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-family: 'Cousine', monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none !important;
    padding: 8px 16px;
    text-align: center;
}

.section-header-professional h2 {
    color: #ffffff !important;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 900;
}

.section-header-professional p {
    color: #cccccc !important;
    margin: 2px 0 0 0;
    font-size: 0.65rem;
    opacity: 0.9;
}

/* Dark theme support for section headers */
[data-theme="dark"] .section-header-professional {
    background-color: var(--card-bg) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .section-header-professional h2,
[data-theme="dark"] .section-header-professional h3 {
    color: #ffffff !important;
}

[data-theme="dark"] .section-header-professional p {
    color: #333333 !important;
}

/* Collapsible Section Headers - slim version with collapse functionality */
.section-header-collapsible {
    background-color: var(--section-header-bg, #ffffff) !important;
    color: var(--section-header-text, #000000) !important;
    font-family: 'Cousine', monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid var(--section-header-border, #000000) !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: var(--section-header-border, #000000) !important;
    padding: 6px 12px; /* Reduced from 8px 16px */
    text-align: center;
    box-sizing: border-box !important;
}

.section-header-collapsible h2 {
    color: var(--section-header-text) !important;
    margin: 0;
    font-size: 1rem !important; /* Slightly smaller */
    font-weight: 900;
}

.section-header-collapsible p {
    color: var(--section-header-text) !important;
    margin: 2px 0 0 0;
    font-size: 0.75rem !important; /* Smaller subtitle */
    opacity: 0.8;
}

.section-header-collapsible span {
    color: var(--section-header-text) !important;
}

/* Dark theme support for collapsible section headers - handled by CSS variables */

/* Refresh button styling */
.section-header-professional button {
    background-color: #333333 !important;
    border: 1px solid #555555 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .section-header-professional button {
    background-color: #cccccc !important;
    border: 1px solid #999999 !important;
    color: #000000 !important;
}

/* Professional Footer - matching header styling */
.footer-professional {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-family: 'Cousine', monospace;
    border-top: 1px solid var(--border-primary) !important;
    border-bottom: none !important;
    padding: 16px 24px;
}

.footer-professional a {
    color: var(--text-primary) !important;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-professional a:hover {
    opacity: 0.8;
}

.footer-professional .disclaimer {
    color: var(--text-secondary) !important;
    opacity: 0.9;
}

/* Professional Table Headers - lighter black for better hierarchy */
.table-header-professional {
    background-color: #333333 !important;
    color: #ffffff !important;
    font-family: 'Cousine', monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 0.75rem;
    padding: 8px 4px !important;
    border-bottom: 1px solid #555555 !important;
}

.table-header-professional th {
    color: #ffffff !important;
    font-weight: 700;
    padding: 8px 4px !important;
}

/* Dark theme support for table headers */
[data-theme="dark"] .table-header-professional {
    background-color: #cccccc !important;
    color: #000000 !important;
    border-bottom: 1px solid #999999 !important;
}

[data-theme="dark"] .table-header-professional th {
    color: #000000 !important;
}

/* Watchlist Headers - matching navigation style but smaller and slim */
.watchlist-header-professional {
    background-color: var(--section-header-bg, #ffffff) !important;
    color: var(--section-header-text, #000000) !important;
    font-family: 'Cousine', monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid var(--section-header-border, #000000) !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: var(--section-header-border, #000000) !important;
    border-bottom: 2px solid var(--section-header-border, #000000) !important;
    padding: 6px 12px;
    box-sizing: border-box !important;
}

.watchlist-header-professional h4 {
    color: var(--section-header-text) !important;
    font-size: 0.8rem;
    font-weight: 900;
    margin: 0;
}

.watchlist-header-professional p {
    color: var(--section-header-text) !important;
    font-size: 0.65rem;
    margin: 1px 0 0 0;
    opacity: 0.8;
}

.watchlist-header-professional .px-4 {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.watchlist-header-professional .py-2 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Dark theme support for watchlist headers */
/* Dark theme support for watchlist headers - handled by CSS variables */

.market-report-header {
    border-bottom: 1px solid var(--border-color);
    font-family: 'Cousine', monospace;
    background-color: var(--card-bg);
    color: var(--text-primary);
}

.market-report-content {
    font-family: 'Cousine', monospace;
}

.market-report-text {
    color: var(--text-primary);
}

/* Professional Table Styling */
.table-professional {
    width: 100%;
    font-family: 'Cousine', monospace;
    color: var(--text-primary);
}

/* Watchlist containers support container queries for responsiveness */
.card-container {
    container-type: inline-size;
    overflow: visible; /* Allow content to expand naturally */
}

.table-professional-small {
    width: 100%;
    font-size: 0.75rem;
    font-weight: bold;
    font-family: 'Cousine', monospace;
    color: var(--text-primary);
    table-layout: auto; /* Allow responsive layout based on content and space */
}

/* Responsive watchlist table column widths - flex based on available space */
.table-professional-small th:nth-child(1), 
.table-professional-small td:nth-child(1) { 
    min-width: 40px; 
    width: auto; /* Let ticker column size naturally */
} /* TICKER */

.table-professional-small th:nth-child(2), 
.table-professional-small td:nth-child(2) { 
    min-width: 35px;
    width: auto;
} /* PRICE */

.table-professional-small th:nth-child(3), 
.table-professional-small td:nth-child(3) { 
    min-width: 45px;
    width: auto;
} /* VOLUME/SCORE */

.table-professional-small th:nth-child(4), 
.table-professional-small td:nth-child(4) { 
    min-width: 40px;
    width: auto;
} /* CHG OPEN */

.table-professional-small th:nth-child(5), 
.table-professional-small td:nth-child(5) { 
    min-width: 35px;
    width: auto;
} /* REL VOL */

/* Responsive text sizing based on container width */
.table-professional-small td {
    font-size: clamp(0.6rem, 1.5vw, 0.8rem); /* Scales between 0.6rem and 0.8rem */
    padding: clamp(0.15rem, 0.5vw, 0.3rem) clamp(0.2rem, 0.5vw, 0.4rem);
    line-height: 1.2;
    white-space: nowrap;
    overflow: visible;
}

/* Specific styling for numeric columns in watchlists */
.table-professional-small td:nth-child(2),
.table-professional-small td:nth-child(3),
.table-professional-small td:nth-child(4),
.table-professional-small td:nth-child(5) {
    font-weight: bold;
    text-align: right;
}

/* Watchlist ticker column - allow emojis and tickers to show fully */
.table-professional-small td:nth-child(1) {
    font-weight: bold;
    overflow: visible;
}

/* Ensure watchlist tables are fully responsive */
.table-professional-small {
    min-width: 0;
    font-size: clamp(0.6rem, 1.5vw, 0.8rem); /* Base responsive font size */
}

/* Container-based responsive adjustments */
@container (min-width: 300px) {
    .table-professional-small td {
        font-size: 0.7rem;
        padding: 0.25rem 0.3rem;
    }
    
    .watchlist-header-cell,
    .watchlist-header-cell-right {
        font-size: 0.7rem;
        padding: 0.25rem 0.3rem;
    }
}

@container (min-width: 400px) {
    .table-professional-small td {
        font-size: 0.75rem;
        padding: 0.3rem 0.4rem;
    }
    
    .watchlist-header-cell,
    .watchlist-header-cell-right {
        font-size: 0.75rem;
        padding: 0.3rem 0.4rem;
    }
}

/* Fallback media queries for better browser support */
@media (min-width: 1200px) {
    .table-professional-small td {
        font-size: 0.75rem;
        padding: 0.25rem 0.35rem;
    }
    
    .watchlist-header-cell,
    .watchlist-header-cell-right {
        font-size: 0.75rem;
        padding: 0.25rem 0.35rem;
    }
}

@media (min-width: 1600px) {
    .table-professional-small td {
        font-size: 0.8rem;
        padding: 0.3rem 0.4rem;
    }
    
    .watchlist-header-cell,
    .watchlist-header-cell-right {
        font-size: 0.8rem;
        padding: 0.3rem 0.4rem;
    }
}

.table-professional-medium {
    width: 100%;
    font-size: 0.875rem;
    font-family: 'Cousine', monospace;
    color: var(--text-primary);
}

/* Table header cells - remove individual styling */
.table-header-cell {
    padding: 0.5rem 0.75rem;
    text-align: right;
    cursor: pointer;
    font-size: 0.75rem;
}

.table-header-cell:hover {
    opacity: 0.8;
}

.table-header-cell-left {
    padding: 0.5rem 0.75rem;
    text-align: left;
    cursor: pointer;
    font-size: 0.75rem;
}

.table-header-cell-left:hover {
    opacity: 0.8;
}

/* Watchlist table header cells - responsive sizing */
.watchlist-header-cell {
    padding: clamp(0.2rem, 0.5vw, 0.3rem) clamp(0.2rem, 0.5vw, 0.4rem);
    text-align: left;
    font-size: clamp(0.6rem, 1.5vw, 0.75rem); /* Responsive font size */
    font-weight: bold;
    white-space: nowrap;
    overflow: visible;
}

.watchlist-header-cell-right {
    padding: clamp(0.2rem, 0.5vw, 0.3rem) clamp(0.2rem, 0.5vw, 0.4rem);
    text-align: right;
    font-size: clamp(0.6rem, 1.5vw, 0.75rem); /* Responsive font size */
    font-weight: bold;
    white-space: nowrap;
    overflow: visible;
}

/* Loading cell styling */
.table-loading-cell {
    padding: 1rem;
    text-align: center;
    color: var(--text-primary);
    opacity: 0.7;
}

/* Table controls styling */
.table-controls-bar {
    background-color: var(--table-header-bg);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Cousine', monospace;
}

.substats-bar {
    background-color: var(--table-header-bg);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    font-family: 'Cousine', monospace;
}

/* Dark mode fixes for table controls */
[data-theme="dark"] .table-controls-bar {
    background-color: var(--table-header-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .substats-bar {
    background-color: var(--table-header-bg);
    color: var(--text-primary);
}

/* Volume filter button dark mode fix */
[data-theme="dark"] .volume-filter-btn {
    background-color: rgba(59, 130, 246, 0.2);
    color: var(--blue);
    border: 1px solid var(--border-color);
}

/* Refresh button dark mode fix */
[data-theme="dark"] .refresh-btn {
    background-color: #4b5563;
    color: #ffffff;
    border: 1px solid #6b7280;
}

/* Common reusable styles */
.card-container {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

.loading-text {
    font-family: 'Cousine', monospace;
    color: var(--text-primary);
    opacity: 0.7;
}

.collapse-icon {
    color: var(--text-primary);
    opacity: 0.8;
    font-size: 0.75rem !important; /* Smaller than text-sm (0.875rem) */
    line-height: 1 !important;
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif; /* Use system font for more consistent Unicode rendering */
    font-weight: normal;
    text-align: center;
}

[data-theme="dark"] .collapse-icon {
    color: var(--text-primary);
    opacity: 0.9;
}

.stats-divider {
    border-top: 1px solid var(--border-color);
}

.stats-label {
    color: var(--text-primary);
    opacity: 0.7;
}

.stats-value {
    color: var(--text-primary);
}

.market-status-active {
    color: var(--green);
}

/* Form controls */
.search-input {
    border: 1px solid var(--border-color);
    font-family: 'Cousine', monospace;
    background-color: var(--search-bg);
    color: var(--text-primary);
}

.volume-filter-btn {
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid var(--border-color);
    font-family: 'Cousine', monospace;
    color: var(--text-primary);
}

.refresh-btn {
    background-color: #333333;
    border: 1px solid #555555;
    font-family: 'Cousine', monospace;
    color: #ffffff;
}

.pagination-controls {
    font-family: 'Cousine', monospace;
}

/* Substat filter buttons */
.substat-rising-volume {
    background-color: rgba(22, 163, 74, 0.2);
    color: var(--green);
    border: 1px solid var(--border-color);
}

.substat-falling-volume {
    background-color: rgba(220, 38, 38, 0.2);
    color: var(--red);
    border: 1px solid var(--border-color);
}

.substat-gap-up-change-down {
    background-color: rgba(234, 88, 12, 0.2);
    color: var(--orange, #f59e0b);
    border: 1px solid var(--border-color);
}

.substat-gap-down-change-up {
    background-color: rgba(59, 130, 246, 0.2);
    color: var(--blue, #3b82f6);
    border: 1px solid var(--border-color);
}

.substat-high-relvol {
    background-color: rgba(139, 92, 246, 0.2);
    color: var(--purple, #8b5cf6);
    border: 1px solid var(--border-color);
}

.substat-high-float-rotation {
    background-color: rgba(250, 204, 21, 0.2);
    color: var(--yellow, #facc15);
    border: 1px solid var(--border-color);
}

.substat-info-box {
    background-color: var(--table-header-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* Dark mode fixes for filter buttons */
[data-theme="dark"] .substat-rising-volume {
    background-color: rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .substat-falling-volume {
    background-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .substat-gap-up-change-down {
    background-color: rgba(251, 146, 60, 0.3);
}

[data-theme="dark"] .substat-gap-down-change-up {
    background-color: rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .substat-high-relvol {
    background-color: rgba(168, 85, 247, 0.3);
}

[data-theme="dark"] .substat-high-float-rotation {
    background-color: rgba(250, 204, 21, 0.3);
}

/* Status bar */
.status-bar {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-family: monospace;
}

/* Section header modifications */
.section-header-left-aligned {
    text-align: left;
}

.main-table-title {
    font-family: 'Cousine', monospace;
    color: var(--text-primary) !important;
    margin: 0;
    font-size: 1.1rem;
}

.main-table-subtitle {
    font-family: 'Cousine', monospace;
    color: var(--text-secondary) !important;
    margin: 2px 0 0 0;
    font-size: 0.65rem;
}

/* Enhanced table styling for better column separation */
.table-professional-medium {
    border-collapse: collapse;
    width: 100%;
    font-family: 'Cousine', monospace;
    color: var(--text-primary);
    table-layout: auto; /* Allow columns to size naturally */
}

.table-professional-medium td {
    border-bottom: 1px solid var(--border-color);
    font-weight: bold; /* Make all table text bold */
}

/* Smaller sort arrows for better visual balance */
.table-header-professional th span {
    font-size: 0.6rem !important;
    opacity: 0.6;
    margin-left: 2px;
}

/* Active/Selected table header styling with blue underline */
.table-header-professional th.header-active {
    border-bottom: 3px solid #3b82f6 !important; /* Blue underline */
    position: relative;
}

.table-header-professional th.header-active span {
    color: #3b82f6 !important; /* Blue arrow */
    opacity: 1 !important; /* Full opacity for active arrow */
}

/* Dark theme support for active headers */
[data-theme="dark"] .table-header-professional th.header-active {
    border-bottom: 3px solid #60a5fa !important; /* Lighter blue for dark theme */
}

[data-theme="dark"] .table-header-professional th.header-active span {
    color: #60a5fa !important; /* Lighter blue arrow for dark theme */
}

/* Enhanced border styling for better visual separation */
.border-r.border-gray-300 {
    border-right: 1px solid #d1d5db;
}

/* Improve table row hover effect with better column separation visibility */
.ticker-row-normal:hover .border-r.border-gray-300,
.ticker-row-pick:hover .border-r.border-gray-300 {
    border-right-color: #9ca3af;
}

/* Dark theme support for enhanced borders */
[data-theme="dark"] .border-r.border-gray-300 {
    border-right-color: #4b5563;
}

[data-theme="dark"] .ticker-row-normal:hover .border-r.border-gray-300,
[data-theme="dark"] .ticker-row-pick:hover .border-r.border-gray-300 {
    border-right-color: #6b7280;
}

/* Fixed table layout for consistent column widths */
.table-professional-medium {
    width: 100%;
    table-layout: fixed;
    min-width: 720px; /* Reduced from 800px to fit better */
}

/* Utility classes for standardized theming */
.card {
    background-color: var(--bg-primary);
    border: none;
    color: var(--text-primary);
}

.card-secondary {
    background-color: var(--bg-secondary);
    border: none;
}

.btn-primary {
    background-color: var(--text-primary);
    color: var(--bg-primary);
    border: 2px solid var(--text-primary);
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.btn-secondary {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background-color: var(--bg-hover);
}

/* Theme-aware back button - professional styling for both light and dark modes */
.btn-back {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    transition: all 0.3s cubic-bezier(.17,.17,.3,1);
    text-decoration: none;
    font-weight: 500;
}

.btn-back:hover {
    background-color: var(--bg-hover);
    border-color: var(--text-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: var(--text-primary);
}

[data-theme="dark"] .btn-back:hover {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.table-row:hover {
    background-color: var(--bg-hover);
}

.status-positive {
    color: var(--success);
}

.status-negative {
    color: var(--error);
}

.status-warning {
    color: var(--warning);
}

.status-info {
    color: var(--info);
}

.bg-themed {
    background-color: var(--bg-primary);
}

.bg-themed-secondary {
    background-color: var(--bg-secondary);
}

.text-themed {
    color: var(--text-primary);
}

.text-themed-secondary {
    color: var(--text-secondary);
}

.border-themed {
    border-color: var(--border-primary);
}

/* Component-Based Section Classes */

/* Primary sections (main content areas) */
.section-primary {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease;
}

/* Secondary sections (alternating sections for visual hierarchy) */
.section-secondary {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: background-color 0.3s ease;
}

/* Tertiary sections (deeper nested content) */
.section-tertiary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    transition: background-color 0.3s ease;
}

/* Card components - primary */
.card-primary {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

/* Card components - secondary */
.card-secondary {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

/* Special card states - highlighted/featured */
.card-highlight {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-secondary);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

/* Form containers */
.form-container {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    border-radius: 0.5rem;
    padding: 1.5rem;
}

/* Input styling for forms */
.input-themed {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.input-themed:focus {
    border-color: var(--info);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ===== FILTER SECTION STYLING ===== */
/* Compact filter grid - reduce vertical spacing */
.filter-grid-compact {
    gap: 0.5rem !important; /* Reduced from gap-3 (0.75rem) */
}

/* Form inputs and selects - unified styling */
input[type="number"],
input[type="text"],
select {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

input[type="number"]:focus,
input[type="text"]:focus,
select:focus {
    border-color: var(--info) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
}

/* Placeholder text styling */
input[type="number"]::placeholder,
input[type="text"]::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7;
}

/* Select dropdown arrow and options */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* Select options styling */
select option {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    padding: 0.5rem;
}

/* Dark theme specific dropdown arrow */
[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%9ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Filter labels - reduce bottom margin */
.filter-label-compact {
    margin-bottom: 0.25rem !important; /* Reduced from mb-1 (0.25rem) to even smaller */
    color: var(--text-primary) !important;
}

/* ===== DEBUG: FORCE FILTER HEADER COLORS ===== */
/* Ultra-specific selectors to ensure filter header gets proper theming */
.filter-header-text {
    color: var(--text-primary) !important;
    font-family: 'Cousine', monospace !important;
}

/* More specific selector for filter header in filter section */
.filter-section-compact h4.filter-header-text,
.filter-section-compact .filter-header-text {
    color: var(--text-primary) !important;
    font-family: 'Cousine', monospace !important;
}

/* Even more specific - target the exact element structure */
div.filter-section-compact div.filter-header-compact h4.filter-header-text {
    color: var(--text-primary) !important;
}

/* Dark mode specific override for filter header */
[data-theme="dark"] .filter-header-text,
[data-theme="dark"] .filter-section-compact h4.filter-header-text,
[data-theme="dark"] div.filter-section-compact div.filter-header-compact h4.filter-header-text {
    color: var(--text-primary) !important;
}

/* Nuclear option - force dark mode colors directly */
[data-theme="dark"] .filter-header-text {
    color: #ffffff !important;
}

[data-theme="dark"] .filter-section-compact h4 {
    color: #ffffff !important;
}

/* Light mode explicit colors */
[data-theme="light"] .filter-header-text {
    color: #000000 !important;
}

[data-theme="light"] .filter-section-compact h4 {
    color: #000000 !important;
}

/* Filter section container - tighter spacing */
.filter-section-compact {
    padding: 0.75rem !important; /* Reduced from p-3 (0.75rem) */
    margin-bottom: 1rem !important; /* Reduced from mb-4 (1rem) */
    background-color: var(--bg-primary) !important;
}

/* Filter header row - tighter spacing */
.filter-header-compact {
    margin-bottom: 0.75rem !important; /* Reduced from mb-3 (0.75rem) */
}

/* Filter button row - tighter spacing */
.filter-buttons-compact {
    margin-top: 0.75rem !important; /* Reduced from mt-3 (0.75rem) */
}

/* Time display specific styling */
.time-display {
    color: var(--text-time);
    font-family: monospace;
}

/* Panel containers for consistent sections */
.panel-container {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Content wrapper for main page areas */
.content-wrapper {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    transition: all 0.3s ease;
}

/* Fixed column widths to prevent header jumping - optimized for smaller space */
.table-professional-medium th:nth-child(1), 
.table-professional-medium td:nth-child(1) { width: 90px; } /* TICKER - slightly reduced */
.table-professional-medium th:nth-child(2), 
.table-professional-medium td:nth-child(2) { width: 70px; } /* PRICE */
.table-professional-medium th:nth-child(3), 
.table-professional-medium td:nth-child(3) { width: 100px; } /* VOLUME - reduced but still wide enough */
.table-professional-medium th:nth-child(4), 
.table-professional-medium td:nth-child(4) { width: 80px; } /* PREV VOL */
.table-professional-medium th:nth-child(5), 
.table-professional-medium td:nth-child(5) { width: 75px; } /* CHANGE */
.table-professional-medium th:nth-child(6), 
.table-professional-medium td:nth-child(6) { width: 80px; } /* CHG OPEN */
.table-professional-medium th:nth-child(7), 
.table-professional-medium td:nth-child(7) { width: 70px; } /* FLOAT */
.table-professional-medium th:nth-child(8), 
.table-professional-medium td:nth-child(8) { width: 75px; } /* REL VOL */
.table-professional-medium th:nth-child(9), 
.table-professional-medium td:nth-child(9) { width: 70px; } /* GAP % */

/* Handle text overflow in fixed width cells */
.table-professional-medium td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Special handling for ticker column with emojis */
.table-professional-medium td:nth-child(1) {
    font-family: 'Cousine', monospace;
    overflow: visible; /* Allow emojis to show */
    white-space: nowrap;
}

/* Ensure consistent emoji rendering */
.ticker-link-main {
    display: inline-block;
    line-height: 1.2;
    vertical-align: middle;
}

/* Numeric columns - ensure consistent alignment */
.table-professional-medium td:nth-child(2),
.table-professional-medium td:nth-child(3),
.table-professional-medium td:nth-child(4),
.table-professional-medium td:nth-child(5),
.table-professional-medium td:nth-child(6),
.table-professional-medium td:nth-child(7),
.table-professional-medium td:nth-child(8),
.table-professional-medium td:nth-child(9) {
    text-align: right;
    font-family: 'Cousine', monospace;
}

/* Professional Table Headers - Dark headers with rounded corners for all pages */
.section-header {
    background-color: var(--section-header-bg);
    color: var(--section-header-text);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 600;
    border-bottom: 2px solid var(--border-primary);
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
}

/* Table Container with rounded corners - no borders or shadows */
.table-container {
    background-color: var(--bg-primary);
    border-radius: 0.5rem;
    overflow: hidden;
    border: none;
    box-shadow: none;
    margin-bottom: 1.5rem;
}

[data-theme="dark"] .table-container {
    border: none;
    box-shadow: none;
}

/* Professional Table Headers */
.table-header {
    background-color: var(--section-header-bg);
    color: var(--section-header-text);
}

.table-header th {
    color: var(--section-header-text) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--section-header-bg);
    border-right: none;
}

/* Card Headers */
.card-header {
    background-color: var(--section-header-bg);
    color: var(--section-header-text);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--border-primary);
}

/* Update existing header classes to use new dark styling */
.section-header-collapsible {
    background-color: var(--section-header-bg, #ffffff) !important;
    color: var(--section-header-text, #000000) !important;
    border: 2px solid var(--section-header-border, #000000) !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: var(--section-header-border, #000000) !important;
    padding: 6px 12px; /* Reduced from 8px 16px */
    border-radius: 0;
    cursor: pointer;
    transition: opacity 0.2s;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem !important;
    letter-spacing: 0.5px;
    text-align: center;
    box-sizing: border-box !important;
}

.section-header-professional {
    background-color: var(--section-header-bg) !important;
    color: var(--section-header-text) !important;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--border-primary);
}

.watchlist-header-professional {
    background-color: var(--section-header-bg) !important;
    color: var(--section-header-text) !important;
    padding: 0.75rem 1rem;
    border-radius: 0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-primary);
}

/* Watchlist table containers - remove border */
.watchlist-table-container {
    background-color: var(--bg-primary);
    border-radius: 0;
    overflow: hidden;
    border: none;
    margin-bottom: 1rem;
}

/* ============================================================================
   COMPREHENSIVE WHITESPACE REDUCTION FOR TIGHTER LAYOUT
   ============================================================================ */

/* Reduce global grid gaps only for main layout grids */
.grid.grid-cols-1,
.grid.grid-cols-5,
.grid.grid-cols-10 {
    gap: 0.75rem !important; /* Reduced from default 1.5rem */
}

/* Tighter section spacing for main layout */
.mb-4:not(.watchlist-empty-message) {
    margin-bottom: 0.75rem !important; /* Reduced from 1rem */
}

.mb-6:not(.watchlist-empty-message) {
    margin-bottom: 1rem !important; /* Reduced from 1.5rem */
}

/* Compact padding classes override - but preserve functionality */
.market-report-content.p-3,
.market-stats-content.p-3,
#top-picks-content.p-3 {
    padding: 0.5rem !important; /* Reduced from 0.75rem */
}

/* Tighter table spacing */
.table-professional th,
.table-professional td,
.table-professional-small th,
.table-professional-small td {
    padding: 4px 8px !important; /* Reduced vertical padding */
}

/* Compact watchlist spacing */
.watchlist-header-professional .py-2 {
    padding-top: 3px !important; /* Reduced from 4px */
    padding-bottom: 3px !important; /* Reduced from 4px */
}

.watchlist-header-professional .px-4 {
    padding-left: 6px !important; /* Reduced from 8px */
    padding-right: 6px !important; /* Reduced from 8px */
}

/* Tighter market report tabs */
.market-report-tabs {
    margin-bottom: 0.5rem !important; /* Reduced spacing */
}

/* Reduce line height for more content density - but be selective */
.market-report-text,
.market-stats-content,
.section-header-collapsible {
    line-height: 1.3 !important; /* Reduced from default 1.5 */
}

/* Compact card containers */
.card-container,
.table-container {
    margin-bottom: 0.75rem !important;
}

/* Tighter section headers */
.section-header-collapsible h2 {
    font-size: 1rem !important; /* Slightly smaller */
    margin: 0 !important;
}

.section-header-collapsible p {
    font-size: 0.75rem !important; /* Smaller subtitle */
    margin: 0 !important;
    opacity: 0.8;
}

/* Mobile optimizations for tighter layout */
@media (max-width: 768px) {
    .grid.grid-cols-1,
    .grid.grid-cols-5,
    .grid.grid-cols-10 {
        gap: 0.5rem !important;
    }
    
    .market-report-content.p-3,
    .market-stats-content.p-3,
    #top-picks-content.p-3 {
        padding: 0.375rem !important;
    }
    
    .mb-4:not(.watchlist-empty-message), 
    .mb-6:not(.watchlist-empty-message) {
        margin-bottom: 0.5rem !important;
    }
}

/* FINAL OVERRIDE: Ensure borders are always visible */
.section-header-collapsible,
div.section-header-collapsible,
section .section-header-collapsible {
    border: 2px solid #000000 !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #000000 !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

[data-theme="dark"] .section-header-collapsible,
[data-theme="dark"] div.section-header-collapsible,
[data-theme="dark"] section .section-header-collapsible {
    border-color: #ffffff !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}

.watchlist-header-professional {
    border: 2px solid #000000 !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #000000 !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

[data-theme="dark"] .watchlist-header-professional {
    border-color: #ffffff !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* ===== MODERN ENHANCEMENTS - Inspired by premium web applications ===== */

/* ENHANCEMENT: Smooth Loading Animations */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.table-skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 25%,
        var(--bg-tertiary) 50%,
        var(--bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ENHANCEMENT: Refined Transitions with Professional Easing */
.ticker-row-normal,
.ticker-row-pick,
.pick-card-normal,
.pick-card-featured,
.watchlist-row {
    transition: all 0.2s cubic-bezier(.17,.17,.3,1);
}

/* ENHANCEMENT: Subtle hover effects for cards */
.pick-card-normal:hover,
.pick-card-featured:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .pick-card-normal:hover,
[data-theme="dark"] .pick-card-featured:hover {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
}

/* ENHANCEMENT: Professional scrollbar styling */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .custom-scrollbar {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

[data-theme="dark"] .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ENHANCEMENT: Smooth number transitions */
.stat-value {
    transition: color 0.3s ease, transform 0.2s ease;
}

.stat-value.updated {
    animation: pulse 0.6s ease;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ENHANCEMENT: Better focus states for accessibility */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ENHANCEMENT: Loading state for data refresh */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

[data-theme="dark"] .loading-overlay {
    background: rgba(0, 0, 0, 0.8);
}

/* ENHANCEMENT: Refined typography with system fonts */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ENHANCEMENT: Smooth accordion animations */
.section-header-collapsible {
    transition: background-color 0.2s ease;
}

.section-header-collapsible:hover {
    background-color: var(--bg-hover);
}

#top-picks-content,
#market-report-content,
#watchlist-content {
    transition: max-height 0.3s cubic-bezier(.17,.17,.3,1), 
                opacity 0.2s ease;
}

/* ENHANCEMENT: Subtle shadows for depth */
.card-container {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease;
}

.card-container:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

[data-theme="dark"] .card-container {
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .card-container:hover {
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.04);
}

/* ENHANCEMENT: Table row hover refinements */
.ticker-row-normal:hover,
.ticker-row-pick:hover {
    transform: translateX(2px);
    background-color: var(--bg-hover);
}

.watchlist-row:hover {
    transform: translateX(2px);
    background-color: var(--bg-hover);
}

/* ENHANCEMENT: Button hover refinements */
.action-button {
    transition: all 0.2s cubic-bezier(.17,.17,.3,1);
}

.action-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .action-button:hover {
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05);
}

/* ENHANCEMENT: Navigation hover refinements */
.nav-link-professional:hover,
.nav-title-integrated:hover {
    transform: translateY(-1px);
}

/* ENHANCEMENT: Market stats box improvements */
.market-stat-box {
    transition: all 0.2s cubic-bezier(.17,.17,.3,1);
}

.market-stat-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .market-stat-box:hover {
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.05);
}

/* ENHANCEMENT: Theme toggle smooth animation */
.theme-toggle {
    transition: all 0.3s cubic-bezier(.17,.17,.3,1);
}

.theme-toggle:hover {
    transform: rotate(180deg) scale(1.1);
}

/* ENHANCEMENT: Collapse icon animation */
.collapse-icon {
    transition: transform 0.3s cubic-bezier(.17,.17,.3,1);
}

.collapse-icon.collapsed {
    transform: rotate(-90deg);
}

/* ENHANCEMENT: Loading spinner for async operations */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner {
    border: 2px solid var(--border-primary);
    border-top: 2px solid var(--blue);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

/* ENHANCEMENT: Smooth data update indicators */
.data-updated {
    animation: dataFlash 1s ease;
}

@keyframes dataFlash {
    0% { background-color: rgba(16, 185, 129, 0.1); }
    50% { background-color: rgba(16, 185, 129, 0.3); }
    100% { background-color: transparent; }
}

[data-theme="dark"] .data-updated {
    animation: dataFlashDark 1s ease;
}

@keyframes dataFlashDark {
    0% { background-color: rgba(52, 211, 153, 0.1); }
    50% { background-color: rgba(52, 211, 153, 0.3); }
    100% { background-color: transparent; }
}

/* ENHANCEMENT: Improved responsive behavior */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ENHANCEMENT: High contrast mode support */
@media (prefers-contrast: high) {
    .pick-card-normal,
    .pick-card-featured,
    .ticker-row-normal,
    .ticker-row-pick {
        border: 2px solid var(--text-primary);
    }
    
    .action-button {
        border: 2px solid var(--text-primary);
    }
}

/* ===== END MODERN ENHANCEMENTS ===== */

/* ===== MODERN TICKER STYLING - Inverted to match new design ===== */

/* Hot Tickers Section - Modern Light Design with Invisible Border */
#hot-tickers {
    background-color: var(--bg-primary) !important;
    border: none !important; /* Remove border for cleaner look */
    border-radius: 8px !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    min-height: 140px; /* Ensure adequate height for ticker content */
}

#hot-tickers:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* Ticker Display Container - Force all text to use theme colors */
.ticker-display {
    color: var(--text-primary) !important;
    font-family: 'Cousine', monospace;
    text-align: center;
    padding: 1.5rem 1rem; /* Increased top/bottom padding for better vertical spacing */
    height: 100%;
    min-height: 120px; /* Ensure minimum height to prevent cutoffs */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.4; /* Increased line height for better text spacing */
    overflow: visible;
    background-color: var(--bg-primary) !important;
    border-radius: 6px;
}

/* Force ALL text inside ticker to use proper theme colors */
.ticker-display * {
    color: var(--text-primary) !important;
}

/* Override any inline styles or other color declarations */
#hot-tickers-display,
#hot-tickers-display *,
.ticker-display span,
.ticker-display div {
    color: var(--text-primary) !important;
}

/* Ticker Symbol Large */
.ticker-symbol-large {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 0.5rem; /* Increased bottom margin for better spacing */
    color: var(--text-primary) !important;
    text-shadow: none;
    letter-spacing: 1px;
    line-height: 1.1; /* Tighter line height for the symbol itself */
}

/* Ticker Price and Change */
.ticker-price {
    color: var(--text-primary) !important;
    font-weight: 600;
    font-size: 1.1em;
    margin-bottom: 0.125rem;
}

.ticker-change-positive {
    color: var(--success) !important;
    font-weight: bold;
    font-size: 0.9em;
}

.ticker-change-negative {
    color: var(--error) !important;
    font-weight: bold;
    font-size: 0.9em;
}

/* Loading State */
.loading-fade {
    color: var(--text-secondary) !important;
    font-style: italic;
    animation: fade 1.5s ease-in-out infinite alternate;
}

@keyframes fade {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Ticker News Text */
.ticker-news-text {
    color: var(--text-secondary) !important;
    font-size: 0.75em;
    margin-top: 0.5rem; /* Increased top margin for better spacing from ticker symbol */
    opacity: 0.8;
    text-align: center;
    line-height: 1.4; /* Increased line height for better readability of longer headlines */
    padding: 0 0.5rem; /* Add horizontal padding to prevent text from touching edges */
}

/* Ticker Scroll Animation - if used */
.ticker-scroll {
    animation: scroll-left 30s linear infinite;
}

@keyframes scroll-left {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Dark Theme Support for Ticker */
[data-theme="dark"] #hot-tickers {
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] #hot-tickers:hover {
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.05);
}

/* Modern Ticker Header (if there's a title) */
.ticker-header-modern {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-primary);
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

/* Responsive Ticker */
@media (max-width: 768px) {
    .ticker-symbol-large {
        font-size: 1.4em;
    }
    
    .ticker-price {
        font-size: 1em;
    }
    
    .ticker-display {
        padding: 0.75rem;
    }
}

/* ===== END MODERN TICKER STYLING =====*/

/* ===== HISTORY PAGE CARD HEADERS - Modern Light Design ===== */

/* Daily Header Cards - Remove black background */
.history-daily-header {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-primary) !important;
    border-radius: 8px 8px 0 0;
    padding: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.history-daily-header:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* Force all text in daily headers to use theme colors */
.history-daily-header,
.history-daily-header *,
.history-daily-header .text-xl,
.history-daily-header .text-sm,
.history-daily-header .text-gray-300 {
    color: var(--text-primary) !important;
}

/* Stats text in headers */
.history-daily-header .text-green-400 {
    color: var(--success) !important;
}

/* Subtitle styling */
.history-daily-header .text-gray-300 {
    color: var(--text-secondary) !important;
    opacity: 0.8;
}

/* Dark theme support */
[data-theme="dark"] .history-daily-header {
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .history-daily-header:hover {
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.05);
}

/* ===== END HISTORY PAGE STYLING =====*/

/* ===== HISTORY PAGE GRID WHITESPACE FIX - Same fix as record breakers ===== */

/* History page stock cards grid container - fix whitespace */
.history-page .grid {
    gap: 0.25rem !important; /* Tight spacing */
    align-items: start !important; /* Prevent cards from stretching vertically */
    height: auto !important; /* Natural height - no fixed height */
    min-height: 0 !important; /* No minimum height */
    max-height: fit-content !important; /* Only as tall as content */
    padding: 0 !important; /* Remove any internal padding */
    margin: 0 !important; /* Remove any margins */
    display: grid !important; /* Ensure proper grid display */
    grid-template-rows: auto !important; /* Rows only as tall as needed */
    align-content: start !important; /* Pack content to top */
}

/* History page individual cards - minimal spacing */
.history-page .grid > div {
    padding: 0.25rem !important; /* Minimize card padding */
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* History page internal stats grids */
.history-page .grid.grid-cols-2.gap-1\.5.text-xs {
    gap: 0.0625rem !important; /* 1px gap */
    margin: 0 !important;
    margin-top: auto !important; /* Push to bottom of flex card */
}

/* History page stat rows */
.history-page .grid.grid-cols-2.gap-1\.5.text-xs .flex {
    margin-bottom: 0 !important;
    line-height: 1 !important;
    min-height: 1rem !important; /* Fixed height for consistency */
}

/* Remove internal spacing in history cards */
.history-page .mb-1\.5,
.history-page .mb-1,
.history-page .mb-2 {
    margin-bottom: 0.0625rem !important; /* 1px only */
}

.history-page .p-1\.5 {
    padding: 0.0625rem !important; /* 1px only */
}

/* Force last elements to have zero margin */
.history-page * :last-child {
    margin-bottom: 0 !important;
}

/* ===== END HISTORY PAGE GRID FIX =====*/

/* ===== UNIFIED CARD SYSTEM - Shared across all pages ===== */

/* Stock Pick Cards - Base Styling (used on main page and history page) */
.stock-card-base {
    padding: 0.5rem;
    border-radius: 8px;
    border-width: 2px;
    border-style: solid;
    transition: all 0.2s cubic-bezier(.17,.17,.3,1);
    background-color: #f9fafb; /* Light grey background for better visibility in light mode */
    color: var(--text-primary);
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-color: #d1d5db; /* Darker grey border for better visibility */
}

.stock-card-base:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--text-primary);
}

[data-theme="dark"] .stock-card-base {
    background-color: var(--card-bg);
    border-color: var(--border-primary);
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .stock-card-base:hover {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

/* Stock Card Variants */
.stock-card-normal {
    border-color: #d1d5db; /* Darker grey border for better visibility */
    background-color: #f9fafb; /* Light grey background instead of pure white */
}

.stock-card-featured {
    border-color: #facc15; /* Yellow border for high-score picks */
    background-color: rgba(250, 204, 21, 0.15); /* Slightly more yellow tint */
    box-shadow: 0 2px 4px rgba(250, 204, 21, 0.2);
}

/* Dark mode overrides for card variants */
[data-theme="dark"] .stock-card-normal {
    border-color: var(--border-primary);
    background-color: var(--card-bg);
}

[data-theme="dark"] .stock-card-featured {
    background-color: rgba(250, 204, 21, 0.1);
}

.stock-card-featured:hover {
    box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3);
    border-color: #f59e0b; /* Slightly darker yellow on hover */
}

/* Legacy class mappings for backward compatibility */
.pick-card-normal {
    /* Inherits from stock-card-base and stock-card-normal */
    padding: 0.5rem;
    border-radius: 8px;
    border-width: 2px;
    border-style: solid;
    transition: all 0.2s cubic-bezier(.17,.17,.3,1);
    background-color: #f9fafb; /* Light grey background for better visibility */
    color: var(--text-primary);
    line-height: 1.2;
    border-color: #d1d5db; /* Darker grey border for better visibility */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pick-card-normal:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--text-primary);
}

.pick-card-featured {
    /* Inherits from stock-card-base and stock-card-featured */
    padding: 0.5rem;
    border-radius: 8px;
    border-width: 2px;
    border-style: solid;
    transition: all 0.2s cubic-bezier(.17,.17,.3,1);
    background-color: rgba(250, 204, 21, 0.15); /* Slightly more yellow tint */
    color: var(--text-primary);
    line-height: 1.2;
    border-color: #facc15; /* Yellow border for high-score picks */
    box-shadow: 0 2px 4px rgba(250, 204, 21, 0.2);
}

.pick-card-featured:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3);
    border-color: #f59e0b; /* Slightly darker yellow on hover */
}

[data-theme="dark"] .pick-card-normal {
    background-color: var(--card-bg);
    border-color: var(--border-primary);
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .pick-card-featured {
    background-color: rgba(250, 204, 21, 0.1);
}

[data-theme="dark"] .pick-card-normal:hover,
[data-theme="dark"] .pick-card-featured:hover {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

/* Stock Card Header - Ticker and Price Row */
.stock-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.stock-card-ticker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stock-card-ticker-link {
    color: var(--text-primary);
    font-family: 'Cousine', monospace;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
    line-height: 1;
}

.stock-card-ticker-link:hover {
    text-decoration: underline;
}

.stock-card-chart-icon {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.stock-card-chart-icon:hover {
    opacity: 1;
}

.stock-card-price-info {
    text-align: right;
}

.stock-card-price {
    font-family: 'Cousine', monospace;
    font-weight: bold;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.stock-card-gap {
    font-size: 0.75rem;
    font-weight: 600;
}

.stock-card-gap-positive {
    color: var(--success);
}

.stock-card-gap-negative {
    color: var(--error);
}

/* Record Summary Section */
.stock-card-record-summary {
    cursor: pointer;
    transition: opacity 0.2s ease;
    margin-bottom: 0.375rem;
}

.stock-card-record-summary:hover {
    opacity: 0.8;
}

.stock-card-record-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem;
    border-radius: 4px;
    border: 1px solid var(--border-primary);
    background-color: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .stock-card-record-container {
    background-color: rgba(255, 255, 255, 0.02);
}

.stock-card-record-title {
    color: var(--error);
    font-weight: bold;
    font-size: 0.75rem;
}

.stock-card-record-score {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.stock-card-record-icon {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Record Details Section (Expandable) */
.stock-card-record-details {
    margin-bottom: 0.375rem;
    padding: 0.375rem;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.01);
    font-size: 0.75rem;
}

[data-theme="dark"] .stock-card-record-details {
    background-color: rgba(255, 255, 255, 0.01);
}

.stock-card-record-category {
    font-weight: 600;
    color: var(--error);
    margin-bottom: 0.25rem;
}

.stock-card-record-stat {
    margin-bottom: 0.125rem;
}

.stock-card-record-label {
    color: var(--text-secondary);
}

.stock-card-record-value {
    color: var(--text-primary);
    font-weight: bold;
}

.stock-card-record-delta {
    color: var(--success);
    font-weight: bold;
}

/* Stats Grid Section */
.stock-card-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
    font-size: 0.75rem;
}

.stock-card-stats-column {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.stock-card-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stock-card-stat-label {
    color: var(--text-secondary);
}

.stock-card-stat-value {
    color: var(--text-primary);
    font-family: 'Cousine', monospace;
    font-weight: 600;
}

.stock-card-stat-relvol {
    color: #ea580c;
    font-family: 'Cousine', monospace;
    font-weight: 600;
}

.stock-card-stat-rotation {
    color: #9333ea;
    font-family: 'Cousine', monospace;
    font-weight: 600;
}

/* Daily Header Cards (History Page) */
.history-daily-header {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-primary) !important;
    border-radius: 8px 8px 0 0;
    padding: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.history-daily-header:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* Force all text in daily headers to use theme colors */
.history-daily-header,
.history-daily-header *,
.history-daily-header .text-xl,
.history-daily-header .text-sm {
    color: var(--text-primary) !important;
}

/* Stats text in headers */
.history-daily-header .text-green-400,
.history-daily-header .font-bold {
    color: var(--success) !important;
}

/* Dark theme support */
[data-theme="dark"] .history-daily-header {
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .history-daily-header:hover {
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.05);
}

/* Stats Cards (used on various pages) */
.stats-card-base {
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    min-width: 150px;
    transition: all 0.2s cubic-bezier(.17,.17,.3,1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.stats-card-base:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.stats-card-gradient {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: white;
}

.stats-card-number {
    font-size: 1.875rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.stats-card-label {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* ===== END UNIFIED CARD SYSTEM =====*/