/* Refactored Component Font Styles - Using Centralized Typography System */

/* ==================================================
   BACKTEST DETAIL COMPONENT REFACTORING
   ================================================== */

/* Replace hardcoded font sizes with semantic variables */
.backtest-detail .info-item {
    font-size: var(--font-size-body-sm); /* was 0.875rem */
}

.backtest-detail .status-item label {
    font-size: var(--font-size-label-sm); /* was 0.875rem */
}

.backtest-detail .status-item div {
    font-size: var(--font-size-body); /* was 1rem */
}

.backtest-detail .summary-item label {
    font-size: var(--font-size-label-sm); /* was 0.875rem */
}

.backtest-detail .summary-item .value {
    font-size: var(--font-size-summary-value); /* was 1.25rem */
}

/* Logs section */
.backtest-detail .logs-info {
    font-size: var(--font-size-body-sm); /* was 0.875rem */
}

.backtest-detail .logs-text {
    font-size: var(--font-size-code); /* was 0.875rem */
}

/* Form elements */
.backtest-detail .form-control {
    font-size: var(--font-size-input); /* was 0.875rem */
}

.backtest-detail .input-group-addon {
    font-size: var(--font-size-label-sm); /* was 0.875rem */
}

.backtest-detail .form-text {
    font-size: var(--font-size-help); /* was 0.8125rem */
}

/* ==================================================
   PAGINATED TABLE COMPONENT REFACTORING
   ================================================== */

/* Table controls */
.paginated-table .items-per-page-control {
    font-size: var(--font-size-table-control);
}

.paginated-table .table-info {
    font-size: var(--font-size-table-info);
}

/* Table headers and cells */
.paginated-table .table th {
    font-size: var(--font-size-table-header);
}

.paginated-table .table td {
    font-size: var(--font-size-table-cell);
}

/* Pagination controls */
.paginated-table .pagination__btn {
    font-size: var(--font-size-button-sm);
}

.paginated-table .pagination__ellipsis {
    font-size: var(--font-size-table-info);
}

/* ==================================================
   TABLE FILTER COMPONENT REFACTORING
   ================================================== */

/* Filter button */
.table-filter-btn {
    font-size: var(--font-size-table-control); /* was 0.875rem */
}

/* Filter dropdown */
.table-filter-dropdown {
    font-size: var(--font-size-body-sm);
}

.filter-dropdown-header h4 {
    font-size: var(--font-size-heading-sm);
}

.filter-dropdown-body label {
    font-size: var(--font-size-label-sm);
}

.filter-input,
.filter-type-select,
.filter-operator-select {
    font-size: var(--font-size-input-sm);
}

.filter-dropdown-footer .btn {
    font-size: var(--font-size-button-sm);
}

.form-help {
    font-size: var(--font-size-help);
}

.checkbox-label {
    font-size: var(--font-size-detail) !important;
}

.threshold-value {
    font-size: var(--font-size-badge);
}

.table-filters-summary {
    font-size: var(--font-size-table-info);
}

.clear-all-filters-btn {
    font-size: var(--font-size-button-sm);
}

/* ==================================================
   TRADE SECTION SPECIFIC STYLING
   ================================================== */

/* Use semantic typography classes for trade tables */
.trade-section .paginated-table .table th {
    font-size: var(--font-size-table-header);
    font-weight: var(--font-weight-semibold);
}

.trade-section .paginated-table .table td {
    font-size: var(--font-size-table-cell);
}

/* Strategy and Order ID badges */
.trade-section .strategy-id {
    font-size: var(--font-size-badge-sm); /* was 0.6875rem */
}

.trade-section .order-id {
    font-size: var(--font-size-badge-sm); /* was 0.6875rem */
}

/* Trade section controls */
.trade-section .paginated-table .table-controls {
    font-size: var(--font-size-table-info);
}

.trade-section .paginated-table .table-controls .btn {
    font-size: var(--font-size-button-sm);
}

.trade-section .paginated-table .pagination__btn {
    font-size: var(--font-size-button-sm);
}

/* ==================================================
   RESPONSIVE OVERRIDES USING NEW SYSTEM
   ================================================== */

@media (max-width: 768px) {
    /* Use more compact typography for mobile */
    .trade-section .paginated-table .table th,
    .trade-section .paginated-table .table td {
        font-size: var(--font-size-table-cell-sm);
    }
    
    .trade-section .strategy-id,
    .trade-section .order-id {
        font-size: var(--font-size-caption);
    }
    
    .filter-dropdown-footer .btn {
        font-size: var(--font-size-button-sm);
    }
    
    .checkbox-label {
        font-size: var(--font-size-caption) !important;
    }
}

@media (max-width: 480px) {
    /* Even more compact on very small screens */
    .table-filter-btn {
        font-size: var(--font-size-caption);
    }
    
    .filter-dropdown-body label {
        font-size: var(--font-size-caption);
    }
    
    .filter-input,
    .filter-type-select,
    .filter-operator-select {
        font-size: var(--font-size-caption);
    }
}

/* ==================================================
   MIGRATION HELPERS - Gradual transition support
   ================================================== */

/* These rules help during migration - can be removed once refactoring is complete */
.typography-migrated .table th {
    font-size: var(--font-size-table-header) !important;
}

.typography-migrated .table td {
    font-size: var(--font-size-table-cell) !important;
}

.typography-migrated .btn {
    font-size: var(--font-size-button) !important;
}

.typography-migrated .btn--sm {
    font-size: var(--font-size-button-sm) !important;
}

.typography-migrated .badge {
    font-size: var(--font-size-badge) !important;
}

/* ==================================================
   UTILITY CLASSES FOR COMMON PATTERNS
   ================================================== */

/* Table typography presets */
.table-typography-compact th {
    font-size: var(--font-size-table-cell-sm);
    font-weight: var(--font-weight-semibold);
}

.table-typography-compact td {
    font-size: var(--font-size-table-cell-sm);
}

.table-typography-normal th {
    font-size: var(--font-size-table-header);
    font-weight: var(--font-weight-semibold);
}

.table-typography-normal td {
    font-size: var(--font-size-table-cell);
}

/* Form typography presets */
.form-typography-compact .form-control {
    font-size: var(--font-size-input-sm);
}

.form-typography-compact .form-label {
    font-size: var(--font-size-label-sm);
}

.form-typography-compact .form-help {
    font-size: var(--font-size-caption);
}

/* ID and code snippets */
.id-display {
    font-size: var(--font-size-badge-sm);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-weight: var(--font-weight-medium);
}

.code-snippet {
    font-size: var(--font-size-code-sm);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

/* Status and metric displays */
.metric-value {
    font-size: var(--font-size-stat-value);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.metric-label {
    font-size: var(--font-size-stat-label);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}

.status-indicator {
    font-size: var(--font-size-badge);
    font-weight: var(--font-weight-medium);
}

/* ==================================================
   THEME AND ACCESSIBILITY ENHANCEMENTS
   ================================================== */

/* Support for user preference scaling */
@media (prefers-reduced-motion: no-preference) {
    .typography-animated {
        transition: font-size 0.2s ease;
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .table th,
    .table td {
        font-weight: var(--font-weight-medium);
    }
    
    .badge,
    .status-indicator {
        font-weight: var(--font-weight-semibold);
    }
}

/* Print-specific typography */
@media print {
    .table th,
    .table td {
        font-size: 10pt !important;
    }
    
    .badge,
    .status-indicator {
        font-size: 8pt !important;
    }
    
    .id-display,
    .code-snippet {
        font-size: 9pt !important;
    }
}