/* DataZist Custom Styles */

/* Font Optimization */
/* Google Fonts disabled due to filtering - using system fonts instead */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); */

/* ============================================
   CRITICAL LAYOUT RULE - NO HORIZONTAL SCROLL
   ============================================
   
   محدوده عرض کلی سایت باید دقیقاً با محدوده چارت‌ها یکسان باشد:
   
   1. هیچ element نباید از حاشیه راست نمودارها تجاوز کند
   2. هیچ element نباید از حاشیه چپ نمودارها تجاوز کند
   3. هیچ چیزی نباید horizontal scroll داشته باشد (به جز modal charts)
   4. این قانون برای header، footer، forms، charts همه اعمال می‌شود
   
   Implementation:
   - overflow-x: hidden در html, body, container, header, forms, charts
   - max-width: 100% or 100vw برای جلوگیری از overflow
   
   Exception: فقط modal charts می‌توانند horizontal scroll داشته باشند
   ============================================ */

/* CRITICAL: No Horizontal Scroll Rule */
html {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #333;
    line-height: 1.6;
    overflow-x: hidden;
    max-width: 100vw;
}

/* Container Width Control */
.container {
    max-width: 100%;
    overflow-x: hidden;
}

/* Custom Colors */
.text-brand {
    color: #3B82F6;
}

.bg-brand {
    background-color: #3B82F6;
}

/* Chart Containers */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

#chartsContainer {
    max-width: 100%;
    overflow-x: hidden;
}

#chartsContainer .grid {
    max-width: 100%;
    overflow-x: hidden;
}

/* Search Form - No Horizontal Scroll */
#searchForm {
    max-width: 100%;
    overflow-x: hidden;
}

#searchForm .grid {
    max-width: 100%;
    overflow-x: hidden;
}

/* Chart Modal Styles */
.chart-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.chart-modal-content {
    background: white;
    border-radius: 12px;
    width: 95vw;
    height: 85vh;
    max-width: 1400px;
    max-height: 900px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.chart-modal-header {
    padding: 20px 24px 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 16px;
}

.chart-modal-title {
    font-size: 24px;
    font-weight: bold;
    color: #111827;
    margin: 0;
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chart-modal-title img {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    height: 18px;
    width: 24px;
}

/* Responsive modal title for mobile */
@media (max-width: 768px) {
    .chart-modal-title {
        font-size: 16px;
    }
    
    .chart-modal-title img {
        height: 14px;
        width: 18px;
    }
    
    .chart-modal-header {
        padding: 16px 20px 0 20px;
        padding-bottom: 12px;
    }
    
    .chart-modal-close {
        font-size: 20px;
        padding: 6px;
    }
    
    .chart-modal-body {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .chart-modal-title {
        font-size: 14px;
    }
    
    .chart-modal-title img {
        height: 12px;
        width: 16px;
    }
    
    .chart-modal-header {
        padding: 12px 16px 0 16px;
        padding-bottom: 10px;
    }
    
    .chart-modal-close {
        font-size: 18px;
        padding: 4px;
    }
    
    .chart-modal-body {
        padding: 16px;
    }
}

.chart-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #6b7280;
    padding: 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.chart-modal-close:hover {
    background-color: #f3f4f6;
    color: #374151;
}

.chart-modal-body {
    flex: 1;
    padding: 24px;
    position: relative;
    overflow-x: auto;  /* Enable horizontal scroll for wide charts */
    overflow-y: hidden;
}

.chart-modal-container {
    width: 100%;
    height: 100%;
    position: relative;
    /* Width will be set dynamically by JavaScript based on bar count */
}

/* Chart title with flag images */
h3.text-lg, .text-lg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

h3.text-lg img, .text-lg img {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    height: 18px;
    width: 24px;
}

/* Expand button styles */
.expand-chart-btn {
    transition: all 0.2s ease;
}

.expand-chart-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Inputs & Form Elements */
input:focus, textarea:focus, select:focus {
    @apply outline-none ring-2 ring-blue-500 border-blue-500;
}

/* Loading Spinner Animation */
.loading-spinner {
    border: 3px solid rgba(59, 130, 246, 0.2);
    border-top: 3px solid #3B82F6;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Accessibility Improvements */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Focus Visible for Keyboard Navigation */
:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Header Layout */
header {
    max-width: 100vw;
    overflow-x: hidden;
}

.header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Match container padding (px-4 = 1rem) */
.header-nav.container {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Logo Styles */
.logo-container {
    display: flex;
    align-items: center;
}

.logo-container img {
    height: 4rem;
    width: auto;
    transition: height 0.2s;
}

.logo-container a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 5rem;
    font-weight: 600;
    color: #3B82F6;
    text-decoration: none;
}

/* Desktop Navigation */
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.desktop-nav a {
    color: #4B5563;
    transition: all 0.2s;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.5rem 0;
    font-weight: 500;
}

.desktop-nav a:hover {
    color: #3B82F6;
}

.desktop-nav a[aria-current="page"] {
    color: #3B82F6;
    border-bottom: 2px solid #3B82F6;
}

/* Login Button */
.login-button {
    background-color: #3B82F6;
    color: white !important;
    padding: 0.625rem 1.75rem !important;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: background-color 0.2s;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.login-button:hover {
    background-color: #2563EB !important;
    color: white !important;
}

.desktop-nav .login-button {
    margin-left: 1rem;
}

/* Mobile Navigation */
.mobile-nav-group {
    display: none;
}

.hamburger-button {
    width: 24px;
    height: 24px;
    position: relative;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    display: none;
}

.hamburger-button span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #4B5563;
    position: absolute;
    left: 0;
    transition: all 0.3s;
}

.hamburger-button span:first-child {
    top: 2px;
}

.hamburger-button span:nth-child(2) {
    top: 11px;
}

.hamburger-button span:last-child {
    bottom: 2px;
}

.mobile-menu-panel {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    background-color: white;
    z-index: 50;
    transition: right 0.3s ease-in-out;
    padding: 2rem 1.5rem;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
    transition: opacity 0.3s ease-in-out;
}

/* Active states - matching JavaScript toggle */
.mobile-menu-overlay.active {
    display: block;
}

.mobile-menu-panel.active {
    right: 0;
}

.hamburger-button.active span:first-child {
    transform: rotate(45deg);
    top: 11px;
}

.hamburger-button.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-button.active span:last-child {
    transform: rotate(-45deg);
    bottom: 11px;
}

.mobile-nav-items {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mobile-nav-items a, .mobile-nav-items button {
    display: block;
    padding: 0.75rem;
    color: #4B5563;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 0.375rem;
}

.mobile-nav-items a:hover, .mobile-nav-items button:hover {
    color: #3B82F6;
    background-color: #F3F4F6;
}

.mobile-nav-items a.active {
    color: #3B82F6;
    background-color: #EBF5FF;
}

/* Mobile Menu Base */
.mobile-menu {
    display: block !important;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .header-nav {
        padding: 0.75rem 1rem;
    }

    .desktop-nav {
        display: none;
    }

    .mobile-nav-group {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .hamburger-button {
        display: block;
    }

    .logo-container img {
        height: 2.5rem;
    }

    .logo-container a {
        font-size: 4rem;
    }

    .login-button {
        padding: 0.5rem 1.25rem !important;
        font-size: 0.875rem;
    }
}

@media (min-width: 769px) {
    .desktop-nav {
        display: flex;
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none;
    }
    
    body {
        font-size: 12pt;
    }
    
    .print-break-inside-avoid {
        page-break-inside: avoid;
    }
}

/* Hide scrollbar for horizontal scroll containers */
.hide-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Country Chip Styles */
.country-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.country-chip-flex {
    flex: 1 1 0;
    min-width: 0;
}

.country-chip .country-checkbox,
.country-chip .country-radio {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.country-chip-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background-color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    transition: all 0.2s ease;
    width: 100%;
}

.country-chip:hover .country-chip-label {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

.country-chip-box {
    position: relative;
    width: 16px;
    height: 16px;
    border: 2px solid #9ca3af;
    border-radius: 3px;
    background-color: #ffffff;
    transition: all 0.2s ease;
}

.country-chip-box::after {
    content: '';
    position: absolute;
    display: none;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.country-chip .country-checkbox:checked ~ .country-chip-label,
.country-chip .country-radio:checked ~ .country-chip-label {
    background-color: #d1fae5;
    border-color: #10b981;
}

.country-chip .country-checkbox:checked ~ .country-chip-label .country-chip-box,
.country-chip .country-radio:checked ~ .country-chip-label .country-chip-box {
    background-color: #10b981;
    border-color: #10b981;
}

.country-chip .country-checkbox:checked ~ .country-chip-label .country-chip-box::after,
.country-chip .country-radio:checked ~ .country-chip-label .country-chip-box::after {
    display: block;
}

/* Country Container Grid Layout - Max 8 per row */
#countryContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    max-width: 100%;
    overflow-x: hidden;
}

/* Country Flag Icon */
.country-flag-icon {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Select All Chip (styled as country chip) */
.select-all-chip {
    border: none;
    background: none;
    padding: 0;
}

.select-all-chip .country-chip-label {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background-color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    transition: all 0.2s ease;
}

.select-all-chip .select-all-text {
    display: inline-block;
    min-width: 40px;
    text-align: center;
}

.select-all-chip:hover .country-chip-label {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

.select-all-chip:active .country-chip-label {
    transform: scale(0.98);
}

.select-all-chip.all-selected .country-chip-label {
    background-color: #d1fae5;
    border-color: #10b981;
    color: #059669;
}

.select-all-chip.all-selected .country-chip-box {
    background-color: #10b981;
    border-color: #10b981;
}

.select-all-chip.all-selected .country-chip-box::after {
    display: block;
}

.select-all-chip.all-selected:hover .country-chip-label {
    background-color: #a7f3d0;
    border-color: #059669;
}

/* Select All Button */
.select-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background-color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.2s ease;
    cursor: pointer;
    outline: none;
}

.select-all-btn:hover {
    background-color: #f9fafb;
    border-color: #3b82f6;
    color: #3b82f6;
}

.select-all-btn:active {
    transform: scale(0.98);
}

.select-all-btn i {
    font-size: 12px;
}

.select-all-btn.all-selected {
    background-color: #eff6ff;
    border-color: #3b82f6;
    color: #3b82f6;
}

/* Mobile responsiveness for country chips */
@media (max-width: 1024px) {
    #countryContainer {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

@media (max-width: 768px) {
    #countryContainer {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 6px;
    }
    
    .country-flag-icon {
        width: 18px;
        height: 13px;
    }
}

@media (max-width: 640px) {
    #countryContainer {
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    }
    
    .country-chip-label {
        padding: 5px 8px;
        font-size: 12px;
        gap: 6px;
    }
    
    .country-chip-box {
        width: 14px;
        height: 14px;
    }
    
    .country-chip-flex {
        flex: 1 1 0;
        min-width: 0;
    }
    
    .select-all-chip .country-chip-label {
        padding: 5px 8px;
        font-size: 12px;
        gap: 6px;
    }
    
    .select-all-chip .select-all-text {
        min-width: 35px;
    }
    
    .select-all-btn {
        padding: 3px 10px;
        font-size: 12px;
    }
    
    .select-all-btn i {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    #countryContainer {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
        gap: 5px;
    }
    
    .country-chip-label {
        padding: 5px 6px;
        font-size: 11px;
        gap: 4px;
    }
    
    .country-chip-box {
        width: 12px;
        height: 12px;
    }
    
    .country-flag-icon {
        width: 16px;
        height: 12px;
    }
    
    .select-all-chip .country-chip-label {
        padding: 5px 6px;
        font-size: 11px;
        gap: 4px;
    }
    
    .select-all-chip .select-all-text {
        min-width: 30px;
    }
    
    .select-all-btn span {
        display: none;
    }
    
    .select-all-btn {
        padding: 4px 8px;
    }
}

/* USD Toggle Floating Button Styles */
.usd-toggle-btn-floating {
    position: fixed;
    bottom: 75px;
    right: 24px; /* Will be overridden by JavaScript for dynamic positioning */
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border: 2px solid #d1d5db;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    z-index: 999;
    backdrop-filter: blur(10px);
}

.usd-toggle-btn-floating:hover {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    border-color: #9ca3af;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.usd-toggle-btn-floating.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #059669;
    color: white;
    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.35);
}

.usd-toggle-btn-floating.active:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    border-color: #047857;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.45);
}

.usd-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    font-size: 13px;
}

.usd-toggle-btn-floating.active .usd-toggle-icon {
    background: rgba(255, 255, 255, 0.5);
    transform: rotate(360deg) scale(1.15);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: rotate(360deg) scale(1.15);
    }
    50% {
        transform: rotate(360deg) scale(1.25);
    }
}

.usd-toggle-text {
    white-space: nowrap;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .usd-toggle-btn-floating {
        bottom: 72px;  /* Increased gap from Back to Top button (72px - 20px = 52px gap) */
        right: 20px;
        padding: 8px 12px;
        gap: 5px;
        font-size: 11px;
    }
    
    .usd-toggle-icon {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .usd-toggle-btn-floating {
        bottom: 75px;  /* Increased gap from Back to Top button (75px - 20px = 55px gap) */
        right: 20px;
        padding: 11px;
        border-radius: 50%;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }
    
    .usd-toggle-text {
        display: none;
    }
    
    .usd-toggle-icon {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }
}

/* Back to Top Button Styles */
.back-to-top-btn {
    position: fixed;
    bottom: 24px;
    right: 24px; /* Will be overridden by JavaScript for dynamic positioning */
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: 2px solid #2563eb;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.25);
    z-index: 999;
    backdrop-filter: blur(10px);
}

.back-to-top-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #1d4ed8;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 28px rgba(59, 130, 246, 0.35);
}

.back-to-top-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    font-size: 13px;
}

.back-to-top-btn:hover .back-to-top-icon {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.back-to-top-text {
    white-space: nowrap;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .back-to-top-btn {
        bottom: 20px;
        right: 20px;
        padding: 8px 12px;
        gap: 5px;
        font-size: 11px;
    }
    
    .back-to-top-icon {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .back-to-top-btn {
        bottom: 20px;
        right: 20px;
        padding: 11px;
        border-radius: 50%;
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.25);
    }
    
    .back-to-top-text {
        display: none;
    }
    
    .back-to-top-icon {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }
}

/* ============================================
   MOBILE CHART CONTAINER PADDING
   ============================================
   Reduce chart container padding in mobile to maximize chart space
   ============================================ */

@media (max-width: 768px) {
    /* Reduce padding for all chart containers in mobile */
    .bg-white.rounded-lg.shadow-md.p-6,
    .bg-white.rounded-lg.shadow-md.p-3 {
        padding: 0.5rem !important; /* 8px instead of 24px (p-6) or 12px (p-3) */
    }
    
    /* Override Tailwind's p-6 and p-3 classes in mobile */
    #chartsContainer .bg-white {
        padding: 0.5rem !important;
    }
}

/* ============================================
   CHART HELP SYSTEM (TOOLTIP + MODAL)
   ============================================ */

/* Chart Help Icon */
.chart-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    border-radius: 50%;
    background-color: #e5e7eb;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    border: none;
    outline: none;
}

.chart-help-icon:hover {
    background-color: #3b82f6;
    color: white;
    transform: scale(1.1);
}

.chart-help-icon:active {
    transform: scale(0.95);
}

.chart-help-icon:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Mobile: Larger touch target */
@media (max-width: 768px) {
    .chart-help-icon {
        width: 24px;
        height: 24px;
        font-size: 14px;
        margin-left: 6px;
    }
}

/* Chart Header Container - Ensure help icon is visible */
.chart-header-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.chart-header-container h3 {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
}

/* Tooltip Styles - Separate from modal */
.chart-help-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background-color: #1f2937;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    white-space: normal;
    max-width: 280px;
    width: max-content;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    margin-bottom: 4px;
}

.chart-help-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1f2937;
}

.chart-help-icon:hover .chart-help-tooltip,
.chart-help-icon:focus .chart-help-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Mobile: Tooltip below icon */
@media (max-width: 768px) {
    .chart-help-tooltip {
        bottom: auto;
        top: 100%;
        transform: translateX(-50%) translateY(8px);
        max-width: 90vw;
        font-size: 11px;
        padding: 10px 14px;
    }
    
    .chart-help-tooltip::after {
        top: auto;
        bottom: 100%;
        border-top-color: transparent;
        border-bottom-color: #1f2937;
    }
    
    .chart-help-icon:hover .chart-help-tooltip,
    .chart-help-icon:focus .chart-help-tooltip {
        transform: translateX(-50%) translateY(0);
    }
}

/* Modal Styles - Separate from tooltip */
.chart-help-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}

.chart-help-modal.active {
    display: flex;
}

.chart-help-modal-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalFadeIn 0.3s ease;
    position: relative;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.chart-help-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.chart-help-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-help-modal-title i {
    color: #3b82f6;
}

.chart-help-modal-close {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.chart-help-modal-close:hover {
    background-color: #f3f4f6;
    color: #1f2937;
}

.chart-help-modal-body {
    color: #4b5563;
    font-size: 14px;
    line-height: 1.7;
}

.chart-help-modal-body p {
    margin-bottom: 12px;
}

.chart-help-modal-body p:last-child {
    margin-bottom: 0;
}

/* Mobile: Modal adjustments */
@media (max-width: 768px) {
    .chart-help-modal {
        padding: 16px;
    }
    
    .chart-help-modal-content {
        padding: 20px;
        max-height: 85vh;
    }
    
    .chart-help-modal-title {
        font-size: 16px;
    }
    
    .chart-help-modal-body {
        font-size: 13px;
    }
}

/* Homepage Slideshow Styles */
#slideshowContainer {
    position: relative;
    width: 100%;
    height: 100%;
}

#slideshowSlides img {
    transition: opacity 0.5s ease-in-out;
}

#slideshowIndicators {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#slideshowIndicators button {
    transition: all 0.3s ease;
}

#slideshowIndicators button:hover {
    transform: scale(1.2);
}

#slideshowPrev,
#slideshowNext {
    transition: all 0.3s ease;
}

#slideshowPrev:hover,
#slideshowNext:hover {
    transform: translateY(-50%) scale(1.1);
}

/* YouTube Videos Grid */
#youtubeVideos .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Slide Edit Modal */
#slideEditModal {
    z-index: 9999;
}

#slideEditModal .max-h-\[90vh\] {
    max-height: 90vh;
}

/* Responsive adjustments for slideshow */
@media (max-width: 1024px) {
    #chartsSlideshowSection .grid {
        grid-template-columns: 1fr;
    }
    
    #slideshowContainer {
        min-height: 300px;
    }
}