/**
 * TipAnalyser Plugin Style Overrides
 * Harmonizes the tipanalyser-display plugin with our navy/gold theme
 */

/* ==========================================================================
   Base Plugin Overrides
   ========================================================================== */

.tipanalyser-container {
    font-family: var(--font-body, system-ui, sans-serif);
}

/* ==========================================================================
   Category Colors - Override blue with navy
   ========================================================================== */

.tip-category-title {
    color: var(--color-primary, #1e3a5f);
}

.tip-category-divider::before {
    background: linear-gradient(
        to right,
        transparent,
        var(--color-border, rgba(30, 58, 95, 0.2)),
        transparent
    );
}

/* ==========================================================================
   Race Card Styling
   ========================================================================== */

.tip-race-card {
    border-color: var(--color-border, rgba(30, 58, 95, 0.1));
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
}

.tip-race-card:hover {
    border-color: var(--color-primary, #1e3a5f);
    box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
}

/* Race Header - Use our gradient */
.tip-race-header {
    background: linear-gradient(
        135deg,
        var(--color-gray-50, #f8f9fa) 0%,
        var(--color-gray-100, #f1f5f9) 100%
    );
    border-bottom-color: var(--color-primary, #1e3a5f);
}

.tip-race-title {
    color: var(--color-primary, #1e3a5f);
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: var(--font-bold, 700);
}

.tip-race-subtitle {
    color: var(--color-text-secondary, #6b7280);
}

/* ==========================================================================
   Table Styling
   ========================================================================== */

.tip-race-card table {
    border-collapse: collapse;
}

.tip-race-card thead {
    background-color: var(--color-primary, #1e3a5f);
}

.tip-race-card thead th {
    color: var(--color-white, #ffffff);
    font-weight: var(--font-semibold, 600);
    padding: 12px 16px;
    text-align: left;
    border: none;
}

.tip-race-card tbody tr {
    border-bottom: 1px solid var(--color-border, rgba(30, 58, 95, 0.1));
}

.tip-race-card tbody tr:hover {
    background-color: var(--color-gray-50, #f8f9fa);
}

.tip-race-card tbody td {
    padding: 12px 16px;
    vertical-align: middle;
}

/* ==========================================================================
   Position/Ranking Indicators
   ========================================================================== */

.tip-position,
.tip-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background-color: var(--color-accent-gold, #d4a73a);
    color: var(--color-white, #ffffff);
    font-weight: var(--font-bold, 700);
    font-size: 12px;
    border-radius: var(--radius-sm, 6px);
}

.tip-position.top-pick,
.tip-rank.top-pick {
    background-color: var(--color-primary, #1e3a5f);
}

/* ==========================================================================
   Confidence Meters
   ========================================================================== */

.tip-confidence-bar {
    background-color: var(--color-gray-200, #e2e8f0);
    border-radius: var(--radius-full, 9999px);
    overflow: hidden;
    height: 8px;
}

.tip-confidence-fill {
    background: linear-gradient(
        90deg,
        var(--color-primary, #1e3a5f),
        var(--color-accent-gold, #d4a73a)
    );
    height: 100%;
    border-radius: var(--radius-full, 9999px);
    transition: width 0.3s ease;
}

/* High confidence */
.tip-confidence-fill.high {
    background: var(--color-success, #22c55e);
}

/* Medium confidence */
.tip-confidence-fill.medium {
    background: var(--color-accent-gold, #d4a73a);
}

/* Low confidence */
.tip-confidence-fill.low {
    background: var(--color-cta, #E94E37);
}

/* ==========================================================================
   Value Indicators
   ========================================================================== */

.tip-value-badge {
    display: inline-block;
    padding: 4px 8px;
    background-color: var(--color-gray-100, #f1f5f9);
    border-radius: var(--radius-sm, 6px);
    font-size: 12px;
    font-weight: var(--font-semibold, 600);
}

.tip-value-badge.good-value {
    background-color: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.tip-value-badge.poor-value {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* ==========================================================================
   Expert Sources Styling
   ========================================================================== */

.tip-expert-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-secondary, #6b7280);
    font-size: 12px;
}

.tip-expert-count::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: var(--color-primary, #1e3a5f);
    border-radius: 50%;
}

/* ==========================================================================
   Bootstrap Table Harmony
   ========================================================================== */

/* Ensure Bootstrap classes work with our theme */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--color-gray-50, #f8f9fa);
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(30, 58, 95, 0.05);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--color-border, rgba(30, 58, 95, 0.1));
}

/* ==========================================================================
   Error States
   ========================================================================== */

.tip-error {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: var(--color-cta, #E94E37);
    color: #991b1b;
    border-radius: var(--radius-md, 8px);
}

/* ==========================================================================
   Loading States
   ========================================================================== */

.tip-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

.tip-loading::after {
    content: '';
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-gray-200, #e2e8f0);
    border-top-color: var(--color-primary, #1e3a5f);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    .tip-race-header {
        flex-direction: column;
        text-align: center;
    }

    .tip-race-title {
        font-size: 20px;
    }

    .tip-race-card table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tip-race-card thead th,
    .tip-race-card tbody td {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .tip-race-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .tip-race-header {
        background: #f5f5f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}