/* ═══════════════════════════════════════════════
   Trade WebExp — Dashboard CSS
   Dark theme profissional para análise de trades
   ═══════════════════════════════════════════════ */

/* ─── Reset & Base ─── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Colors */
    --bg-primary: #0a0e17;
    --bg-secondary: #111827;
    --bg-card: #16202e;
    --bg-card-hover: #1a2738;
    --border-color: #2a3a50;
    --border-glow: rgba(0, 255, 136, 0.4);
    --text-primary: #e8eef6;
    --text-secondary: #8b9bb4;
    --text-muted: #5a6b85;
    --accent-blue: #3b82f6;
    --accent-purple: #8b5cf6;
    /* Score colors */
    --score-high: #00ff88;
    --score-medium: #ffaa00;
    --score-low: #ff4444;
    /* Confidence */
    --conf-high: #00ff88;
    --conf-medium: #ffaa00;
    --conf-low: #ff4444;
    /* Badge */
    --badge-bg: rgba(255, 255, 255, 0.08);
    --badge-border: rgba(255, 255, 255, 0.15);
    /* Shadows */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 15px rgba(0, 255, 136, 0.3);
    /* Radius */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;
}

html {
    font-size: 15px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* ─── Custom Scrollbar ─── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #3a4a60;
}

/* ─── Header ─── */
#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.5rem;
    background: linear-gradient(135deg, #0d1320 0%, #16202e 100%);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.4rem;
    font-weight: 800;
}
.logo-icon {
    font-size: 1.6rem;
    filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.5));
}
.logo-text {
    color: var(--text-primary);
    letter-spacing: -0.5px;
}
.logo-accent {
    color: var(--score-high);
}

.header-tagline {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 400;
    padding-left: 1rem;
    border-left: 1px solid var(--border-color);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.clock {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

.ws-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-xs);
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s;
}
.ws-status.connected {
    background: rgba(0, 255, 136, 0.1);
    color: var(--score-high);
}
.ws-status.disconnected {
    background: rgba(255, 68, 68, 0.1);
    color: var(--score-low);
}
.ws-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}
.ws-status.connected .ws-dot {
    animation: pulse-dot 2s infinite;
}
.ws-status.disconnected .ws-dot {
    background: var(--score-low);
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.5); }
    50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(0, 255, 136, 0); }
}

/* ─── Filtros ─── */
.filters-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 1.5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.filter-group label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}
.filter-group select {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.2s;
    font-family: inherit;
}
.filter-group select:hover {
    border-color: var(--accent-blue);
}
.filter-group select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.btn-refresh {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.btn-refresh:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-blue);
}
.btn-refresh:active {
    transform: scale(0.96);
}

.filter-info {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}
.filter-info span {
    color: var(--text-primary);
    font-weight: 700;
}

/* ─── Main Layout ─── */
.main-layout {
    display: flex;
    flex: 1;
    gap: 1rem;
    padding: 1rem 1.5rem;
    align-items: flex-start;
}

.match-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1rem;
    min-height: 300px;
}

/* ─── Loading / No Data ─── */
.loading-msg {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--score-high);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.no-data-msg {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* ─── Match Card ─── */
.match-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.match-card:hover {
    background: var(--bg-card-hover);
    border-color: #3a4a60;
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

/* High IA Score glow */
.match-card.high-score {
    border-color: rgba(0, 255, 136, 0.3);
    box-shadow: var(--shadow-glow);
}
.match-card.high-score:hover {
    border-color: rgba(0, 255, 136, 0.5);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

/* Card top — league + status */
.card-league {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
}
.league-badge {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.league-flag {
    font-size: 1rem;
}
.match-status {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
.status-live {
    background: rgba(255, 68, 68, 0.15);
    color: #ff6666;
}
.status-live::before {
    content: '🔴 ';
    animation: pulse-dot 1.5s infinite;
}
.status-scheduled {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-blue);
}
.status-finished {
    background: rgba(138, 139, 148, 0.15);
    color: var(--text-muted);
}

/* Teams + Score */
.card-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
}
.team-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
}
.team-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}
.team-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
}
.team-logo-placeholder {
    width: 32px;
    height: 32px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.score-display {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.score-display .score-sep {
    color: var(--text-muted);
    font-weight: 400;
}
.minute-badge {
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 0.15rem;
}

/* Score change animation */
.score-changed {
    animation: score-flash 0.6s ease;
}
@keyframes score-flash {
    0% { transform: scale(1); color: var(--text-primary); }
    50% { transform: scale(1.3); color: var(--score-high); }
    100% { transform: scale(1); color: var(--text-primary); }
}

/* IA Score Bar */
.ia-score-section {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.ia-score-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
}
.ia-score-label span:first-child {
    color: var(--text-muted);
    font-weight: 500;
}
.ia-score-value {
    font-weight: 800;
    font-size: 1rem;
}
.ia-bar {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.ia-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
    position: relative;
}
.ia-bar-fill.high {
    background: linear-gradient(90deg, #00cc6a, #00ff88);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}
.ia-bar-fill.medium {
    background: linear-gradient(90deg, #cc8800, #ffaa00);
    box-shadow: 0 0 6px rgba(255, 170, 0, 0.3);
}
.ia-bar-fill.low {
    background: linear-gradient(90deg, #cc3333, #ff4444);
}

/* Card details row */
.card-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.detail-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
}
.detail-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Confidence badge */
.confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.confidence-high {
    background: rgba(0, 255, 136, 0.12);
    color: var(--conf-high);
    border: 1px solid rgba(0, 255, 136, 0.3);
}
.confidence-medium {
    background: rgba(255, 170, 0, 0.12);
    color: var(--conf-medium);
    border: 1px solid rgba(255, 170, 0, 0.3);
}
.confidence-low {
    background: rgba(255, 68, 68, 0.12);
    color: var(--conf-low);
    border: 1px solid rgba(255, 68, 68, 0.3);
}

/* Recommendations */
.card-recommendations {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.rec-pill {
    background: var(--badge-bg);
    border: 1px solid var(--badge-border);
    border-radius: 20px;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.rec-pill.highlight {
    background: rgba(0, 255, 136, 0.1);
    border-color: rgba(0, 255, 136, 0.3);
    color: var(--score-high);
}

/* Tese expandable */
.card-tese {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.tese-toggle {
    background: none;
    border: none;
    color: var(--accent-blue);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0;
    transition: color 0.2s;
}
.tese-toggle:hover {
    color: #60a5fa;
}
.tese-text {
    display: none;
    margin-top: 0.4rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-xs);
    border-left: 3px solid var(--accent-blue);
    line-height: 1.5;
}
.tese-text.expanded {
    display: block;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Quick stats */
.card-stats {
    display: flex;
    gap: 0.8rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}
.stat-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 0.1rem;
}
.stat-mini-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.stat-mini-value {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Card animation on update */
.match-card.updating {
    animation: card-update 0.5s ease;
}
@keyframes card-update {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
    100% { transform: scale(1); }
}

/* New card entrance */
.match-card.entering {
    animation: card-enter 0.4s ease;
}
@keyframes card-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Alerts Panel ─── */
.alerts-panel {
    width: 300px;
    flex-shrink: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 200px);
    position: sticky;
    top: 120px;
}

.alerts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border-color);
}
.alerts-header h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}
.alerts-count {
    background: var(--badge-bg);
    border: 1px solid var(--badge-border);
    border-radius: 12px;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.alerts-list {
    overflow-y: auto;
    flex: 1;
    padding: 0.5rem;
}

.alert-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 1.5rem 0.5rem;
    font-size: 0.85rem;
}

.alert-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-blue);
    border-radius: var(--radius-xs);
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
    transition: all 0.2s;
}
.alert-item:hover {
    background: var(--bg-card-hover);
}
.alert-item.severity-critical {
    border-left-color: var(--score-low);
}
.alert-item.severity-warning {
    border-left-color: var(--score-medium);
}
.alert-item.severity-info {
    border-left-color: var(--accent-blue);
}
.alert-type {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}
.alert-message {
    color: var(--text-primary);
    line-height: 1.3;
    font-size: 0.8rem;
}
.alert-time {
    color: var(--text-muted);
    font-size: 0.72rem;
    margin-top: 0.3rem;
}
.alert-minute {
    display: inline-block;
    background: var(--badge-bg);
    border-radius: 3px;
    padding: 0.1rem 0.35rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-left: 0.3rem;
}

/* ─── Footer ─── */
#footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1.5rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: auto;
}

.footer-section {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.footer-title {
    font-weight: 600;
    color: var(--text-secondary);
}

.api-status-list {
    display: flex;
    gap: 0.8rem;
}
.api-status {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
}
.api-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    display: inline-block;
    transition: background 0.3s;
}
.api-status.active .api-dot {
    background: var(--score-high);
    box-shadow: 0 0 6px rgba(0, 255, 136, 0.5);
}
.api-status.inactive .api-dot {
    background: var(--score-low);
}
.api-status.unknown .api-dot {
    background: var(--score-medium);
}
.api-name {
    color: var(--text-secondary);
    font-weight: 500;
}

.footer-version {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
    .main-layout {
        flex-direction: column;
    }
    .alerts-panel {
        width: 100%;
        max-height: 300px;
        position: relative;
        top: 0;
    }
    .match-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    #header {
        padding: 0.6rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .header-tagline {
        display: none;
    }
    .filters-bar {
        padding: 0.5rem 1rem;
        gap: 0.5rem;
    }
    .filter-group label {
        display: none;
    }
    .filter-info {
        margin-left: 0;
    }
    .main-layout {
        padding: 0.5rem 1rem;
    }
    .match-grid {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    .card-details {
        grid-template-columns: 1fr;
    }
    .alerts-panel {
        max-height: 250px;
    }
    #footer {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    .api-status-list {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .filters-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-group {
        width: 100%;
    }
    .filter-group select {
        width: 100%;
    }
    .btn-refresh {
        width: 100%;
    }
    .filter-info {
        text-align: center;
    }
    .score-display {
        font-size: 1.2rem;
    }
}

/* ─── Utility ─── */
.hidden { display: none !important; }
.text-center { text-align: center; }