/**
 * Charts Responsive Styles - fondovik.info
 * 
 * Mobile-optimized styles with horizontal scroll for charts
 */

/* ============================================
   MOBILE OPTIMIZATIONS (< 768px)
   ============================================ */

@media (max-width: 768px) {
  /* Enable horizontal scroll for chart containers */
  .chart-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  
  /* Visual hint for horizontal scroll */
  .chart-card::after {
    content: '← Свайп →';
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(37, 99, 235, 0.9);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    animation: fadeInOut 3s ease-in-out;
    z-index: 10;
  }
  
  @keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: 1; }
  }
  
  /* Set minimum width for charts to maintain readability */
  #chart1,
  #chart2,
  #chart4,
  #chart7,
  #fund-chart1,
  #fund-chart2,
  #fund-chart3,
  #fund-chart4,
  #chart8,
  #chart9,
  #chart10,
  #chart11,
  #chart12,
  #chart13 {
    min-width: 600px;
  }
  
  /* Charts with many data points need more width */
  #chart3,
  #chart5,
  #fund-chart5 {
    min-width: 800px;
  }
  
  /* Line charts */
  #chart6a,
  #chart6b {
    min-width: 500px;
  }
  
  #chart14 {
    min-width: 700px;
  }
  
  /* Grid stays 2 columns but allows horizontal scroll */
  .grid-2 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Compact padding for mobile */
  .chart-card {
    padding: var(--space-4, 16px);
  }
  
  .chart-card__title {
    font-size: var(--text-base, 16px);
  }
  
  .chart-card__footer small {
    font-size: 11px;
    line-height: 1.4;
  }
}

/* ============================================
   SMALL MOBILE (< 480px)
   ============================================ */

@media (max-width: 480px) {
  /* Even more compact on very small screens */
  .chart-card {
    padding: var(--space-3, 12px);
    margin-bottom: var(--space-3, 12px);
  }
  
  .chart-card__title {
    font-size: 14px;
    line-height: 1.3;
  }
  
  .chart-card__footer {
    margin-top: var(--space-3, 12px);
    padding-top: var(--space-2, 8px);
  }
  
  .chart-card__footer small {
    font-size: 10px;
  }
  
  /* Maintain same widths for horizontal scroll */
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   FILTER BAR - MOBILE OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch !important;
    gap: var(--space-3, 12px);
  }
  
  .filter-bar__group {
    width: 100%;
  }
  
  .filter-bar__group label {
    font-size: 13px;
    margin-bottom: 4px;
  }
  
  .filter-bar__group input,
  .filter-bar__group select {
    width: 100% !important;
    font-size: 14px;
  }
  
  .filter-bar__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    width: 100%;
  }
  
  .filter-bar__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   KPI CARDS - MOBILE OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-3, 12px);
  }
  
  .kpi-card {
    padding: var(--space-4, 16px);
  }
  
  .kpi-card__label {
    font-size: 12px;
  }
  
  .kpi-card__value {
    font-size: var(--text-xl, 20px);
  }
}

@media (min-width: 480px) and (max-width: 768px) {
  /* 2 columns on medium mobile/small tablets */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================
   SEARCH BAR - MOBILE OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
  .search-bar-wrapper {
    margin-bottom: var(--space-3, 12px);
  }
  
  .search-bar__input {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 12px 16px;
  }
  
  .search-bar__autocomplete {
    max-height: 60vh;
    overflow-y: auto;
  }
  
  .search-bar__item {
    padding: 12px;
    font-size: 14px;
  }
}

/* ============================================
   STOCK HEADER - MOBILE OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
  .stock-header {
    padding: var(--space-4, 16px);
  }
  
  .stock-header__info h2 {
    font-size: var(--text-xl, 20px);
  }
  
  .stock-header__meta {
    flex-direction: column;
    gap: var(--space-2, 8px);
  }
  
  #favorite-button {
    font-size: 13px;
    padding: 8px 12px;
    min-height: 36px;
  }
}

/* ============================================
   DATA TABLES - MOBILE OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
  .data-table-wrapper {
    margin-bottom: var(--space-4, 16px);
  }
  
  .data-table-wrapper__header {
    flex-direction: column;
    align-items: stretch !important;
    gap: var(--space-3, 12px);
  }
  
  .data-table-wrapper__title {
    font-size: var(--text-base, 16px);
  }
  
  #table-search {
    max-width: 100% !important;
    margin-left: 0 !important;
    font-size: 14px;
  }
  
  .table-responsive {
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 6px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .data-table {
    font-size: 12px;
  }
  
  .data-table th,
  .data-table td {
    padding: 8px 6px;
    white-space: nowrap;
  }
  
  .data-table th {
    font-size: 11px;
  }
}

/* ============================================
   MONTH SELECTOR - MOBILE OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
  #month-selector {
    width: 100% !important;
    font-size: 14px;
  }
  
  .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  
  .btn-group .btn {
    flex: 1;
    min-width: 60px;
    font-size: 13px;
    padding: 8px 12px;
  }
}

/* ============================================
   EMPTY STATE - MOBILE OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
  .empty-state {
    padding: 40px 20px !important;
  }
  
  .empty-state h3 {
    font-size: var(--text-lg, 18px);
  }
  
  .empty-state p {
    font-size: 14px;
  }
  
  .empty-state svg {
    width: 48px !important;
    height: 48px !important;
  }
}

/* ============================================
   LOADING OVERLAY - MOBILE OPTIMIZATION
   ============================================ */

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-overlay.show {
  display: flex;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f4f6;
  border-top-color: var(--color-primary, #3b82f6);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

@media (max-width: 768px) {
  .spinner {
    width: 32px;
    height: 32px;
    border-width: 2px;
  }
}

/* ============================================
   TOUCH OPTIMIZATION
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  /* Increase tap targets on touch devices */
  .btn,
  button,
  .search-bar__item,
  .favorite-item {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Prevent text selection on interactive elements */
  .chart-card,
  .kpi-card,
  .btn,
  button {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* Allow text selection in content areas */
  .chart-card__footer,
  .data-table,
  p,
  .empty-state {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* ============================================
   APEXCHARTS SPECIFIC MOBILE FIXES
   ============================================ */

@media (max-width: 768px) {
  /* Ensure ApexCharts toolbar is accessible */
  .apexcharts-toolbar {
    z-index: 11 !important;
  }
  
  /* Make tooltips more readable on mobile */
  .apexcharts-tooltip {
    font-size: 12px !important;
  }
  
  .apexcharts-tooltip-title {
    font-size: 13px !important;
    padding: 6px 8px !important;
  }
  
  .apexcharts-tooltip-series-group {
    padding: 4px 8px !important;
  }
  
  /* Adjust legend for mobile */
  .apexcharts-legend {
    padding: 8px 4px !important;
  }
  
  .apexcharts-legend-text {
    font-size: 11px !important;
  }
}

/* ============================================
   LANDSCAPE ORIENTATION OPTIMIZATION
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
  /* In landscape, charts can be wider */
  #chart1,
  #chart2,
  #chart4,
  #chart7,
  #fund-chart1,
  #fund-chart2,
  #fund-chart3,
  #fund-chart4,
  #chart8,
  #chart9,
  #chart10,
  #chart11,
  #chart12,
  #chart13 {
    min-width: 700px;
  }
  
  #chart3,
  #chart5,
  #fund-chart5 {
    min-width: 900px;
  }
}

/* ============================================
   PRINT STYLES FOR CHARTS
   ============================================ */

@media print {
  .chart-card {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #000;
  }
  
  .filter-bar,
  .search-bar-wrapper,
  .btn,
  button,
  #loading-overlay {
    display: none !important;
  }
  
  .grid-2 {
    grid-template-columns: 1fr !important;
  }
  
  .chart-card__footer {
    font-size: 10pt;
  }
}