/* Font Size Fixes for Mobile Legibility */
/* Ensures all text is at least 12px (0.75rem) for mobile readability */
/* WCAG guidelines recommend minimum 12px for body text */

:root {
    /* Minimum font sizes for different text types */
    --min-font-size: 0.75rem;  /* 12px - absolute minimum */
    --min-font-size-labels: 0.8125rem;  /* 13px - for labels and small text */
    --min-font-size-body: 0.875rem;  /* 14px - for body text */
}

/* Global minimum font size enforcement */
body {
    font-size: 16px !important;  /* Base font size for rem calculations */
    min-font-size: var(--min-font-size);
}

/* Fix very small font sizes - replace with minimum acceptable sizes */
* {
    /* Prevent any text from being smaller than 12px */
    font-size: max(var(--min-font-size), inherit);
}

/* Fix specific small font size instances */
/* Replace 10px, 11px with 12px minimum */
.stat-label,
.price-label,
.symbol-ticker,
.badge,
.small,
small {
    font-size: var(--min-font-size-labels) !important;  /* 13px minimum */
    line-height: 1.4;
}

/* Fix 0.625rem (10px) instances */
[style*="font-size: 0.625rem"],
[style*="font-size: 10px"],
[style*="font-size: 11px"] {
    font-size: var(--min-font-size) !important;
}

/* Fix breadcrumb text sizes */
.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a {
    font-size: var(--min-font-size-labels) !important;
    min-height: 20px;
}

/* Fix notification badge */
.notification-badge {
    font-size: var(--min-font-size) !important;
    min-width: 18px;
    min-height: 18px;
    line-height: 18px;
}

/* Fix price and stat displays */
.stat-value,
.price-value,
.current-price {
    font-size: max(1rem, var(--min-font-size-body)) !important;
}

/* Fix change badges */
.change-badge,
.change-positive,
.change-negative,
.change-neutral,
.change {
    font-size: var(--min-font-size-labels) !important;
    padding: 0.25rem 0.5rem;
}

/* Fix dropdown items */
.dropdown-item {
    font-size: var(--min-font-size-body) !important;
    min-height: 36px;
    padding: 0.5rem 1rem;
}

/* Fix form controls */
.form-control,
.form-select,
.form-label,
.form-text,
input,
select,
textarea {
    font-size: var(--min-font-size-body) !important;
    min-height: 38px;
}

/* Fix button text */
.btn {
    font-size: var(--min-font-size-body) !important;
    min-height: 38px;
    padding: 0.5rem 1rem;
}

.btn-sm {
    font-size: var(--min-font-size-labels) !important;
    min-height: 32px;
    padding: 0.375rem 0.75rem;
}

/* Fix table text */
table td,
table th,
.table td,
.table th {
    font-size: var(--min-font-size-body) !important;
    padding: 0.75rem;
}

/* Fix card text */
.card-body,
.card-text,
.card-subtitle {
    font-size: var(--min-font-size-body) !important;
}

/* Fix list items */
.list-group-item,
.dropdown-menu li,
ul li,
ol li {
    font-size: var(--min-font-size-body) !important;
}

/* Fix navigation text */
.nav-link,
.navbar-nav .nav-link {
    font-size: var(--min-font-size-body) !important;
    min-height: 40px;
    padding: 0.5rem 1rem;
}

/* Fix footer text */
.footer p,
.footer ul li,
.footer ul li a,
.footer .small {
    font-size: var(--min-font-size-labels) !important;
}

/* Fix tooltip and popover text */
.tooltip,
.popover {
    font-size: var(--min-font-size-labels) !important;
}

/* Fix modal text */
.modal-body,
.modal-footer {
    font-size: var(--min-font-size-body) !important;
}

/* Fix alert text */
.alert {
    font-size: var(--min-font-size-body) !important;
}

/* Fix search suggestions */
.search-suggestion-item,
.autocomplete-item {
    font-size: var(--min-font-size-body) !important;
    min-height: 36px;
}

/* Fix WebSocket status indicators */
.connection-status,
.ws-status,
.websocket-indicator {
    font-size: var(--min-font-size-labels) !important;
}

/* Mobile-specific font size adjustments */
@media (max-width: 768px) {
    /* Increase base font size on mobile for better readability */
    body {
        font-size: 16px !important;
    }
    
    /* Ensure all text is at least 14px on mobile */
    p, 
    div, 
    span, 
    li, 
    a, 
    td, 
    th {
        font-size: max(0.875rem, inherit) !important;  /* 14px minimum */
    }
    
    /* Headings should be proportionally larger */
    h1 { font-size: max(1.75rem, 28px) !important; }
    h2 { font-size: max(1.5rem, 24px) !important; }
    h3 { font-size: max(1.25rem, 20px) !important; }
    h4 { font-size: max(1.125rem, 18px) !important; }
    h5 { font-size: max(1rem, 16px) !important; }
    h6 { font-size: max(0.9375rem, 15px) !important; }
    
    /* Labels and metadata can be slightly smaller but still readable */
    .stat-label,
    .price-label,
    .symbol-ticker,
    .text-muted,
    .small,
    small {
        font-size: max(0.8125rem, 13px) !important;  /* 13px minimum on mobile */
    }
    
    /* Ensure buttons are easily tappable */
    .btn {
        font-size: 1rem !important;  /* 16px */
        min-height: 44px !important;  /* iOS recommendation */
        padding: 0.75rem 1.25rem !important;
    }
    
    .btn-sm {
        font-size: 0.9375rem !important;  /* 15px */
        min-height: 36px !important;
        padding: 0.5rem 1rem !important;
    }
    
    /* Form controls need to be easily readable */
    .form-control,
    .form-select,
    input,
    select,
    textarea {
        font-size: 16px !important;  /* Prevents iOS zoom on focus */
        min-height: 44px !important;
    }
    
    /* Navigation should be easily tappable */
    .nav-link,
    .navbar-nav .nav-link,
    .dropdown-item {
        font-size: 1rem !important;  /* 16px */
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
    }
    
    /* Cards and list items */
    .card-body,
    .list-group-item {
        font-size: 0.9375rem !important;  /* 15px */
    }
    
    /* Price displays should be prominent */
    .current-price,
    .price-value {
        font-size: 1.125rem !important;  /* 18px */
    }
    
    /* Stats should be readable */
    .stat-value {
        font-size: 1rem !important;  /* 16px */
    }
    
    /* Badges and indicators */
    .badge,
    .change-badge {
        font-size: 0.875rem !important;  /* 14px */
        padding: 0.375rem 0.625rem !important;
    }
    
    /* Footer text can be slightly smaller but still readable */
    .footer p,
    .footer li,
    .footer a {
        font-size: 0.875rem !important;  /* 14px */
    }
}

/* Very small mobile devices (under 380px width) */
@media (max-width: 380px) {
    /* Further adjustments for very small screens */
    body {
        font-size: 15px !important;
    }
    
    /* Minimum 13px for all text */
    * {
        font-size: max(0.8125rem, inherit) !important;
    }
    
    /* Slightly smaller headings to fit screen */
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.125rem !important; }
    h4 { font-size: 1rem !important; }
    h5 { font-size: 0.9375rem !important; }
    h6 { font-size: 0.875rem !important; }
}

/* High DPI screens - ensure crisp text */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}

/* Print styles - ensure readability */
@media print {
    body {
        font-size: 12pt !important;
    }
    
    p, li, td, th {
        font-size: 11pt !important;
    }
    
    h1 { font-size: 18pt !important; }
    h2 { font-size: 16pt !important; }
    h3 { font-size: 14pt !important; }
    h4, h5, h6 { font-size: 12pt !important; }
}

/* Override inline styles with small fonts */
[style*="font-size: 0.6"],
[style*="font-size: 0.5"],
[style*="font-size: 8px"],
[style*="font-size: 9px"],
[style*="font-size: 10px"],
[style*="font-size: 11px"] {
    font-size: var(--min-font-size) !important;
}

/* Specific component fixes */
.symbol-card-universal .stat-label {
    font-size: 0.8125rem !important;  /* 13px */
}

.symbol-card-universal .stat-value {
    font-size: 0.875rem !important;  /* 14px */
}

/* WebSocket and real-time indicators */
.websocket-status,
.connection-indicator {
    font-size: 0.8125rem !important;  /* 13px */
}

/* Ensure icons don't become too large when fixing text */
.fa,
.fas,
.far,
.fab,
.fal,
.fad {
    font-size: inherit !important;
}

/* Icon-only buttons can be smaller */
.btn-icon-only {
    font-size: 1rem !important;
}

/* Prevent layout shifts from font size changes */
* {
    line-height: normal;
}

/* Maintain aspect ratios for elements with fixed heights */
.fixed-height {
    min-font-size: initial;
}