:root {
    --primary: #3498db;
    --secondary: #2c3e50;
    --success: #2ecc71;
    --warning: #f39c12;
    --danger: #e74c3c;
    --light: #ecf0f1;
    --dark: #34495e;
    --gray: #95a5a6;
    --border-radius: 8px;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;

    /* Cores do modo claro */
    --bg-color: #f5f7fa;
    --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --card-bg: white;
    --text-color: #333;
    --header-bg: white;
    --table-header-bg: #2c3e50;
    --table-border: #eee;
    --hover-bg: #f9f9f9;

    /* Tamanhos de fonte aumentados para TV */
    --font-size-large: 1.3rem;
    --font-size-xlarge: 1.6rem;
    --font-size-xxlarge: 2.5rem;
    --font-size-header: 2.8rem;
}

.dark-mode {
    /* Cores do modo escuro */
    --bg-color: #1a1a1a;
    --bg-gradient: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    --card-bg: #2d3748;
    --text-color: #e2e8f0;
    --header-bg: #2d3748;
    --table-header-bg: #4a5568;
    --table-border: #4a5568;
    --hover-bg: #4a5568;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-gradient);
    color: var(--text-color);
    line-height: 1.6;
    padding: 20px;
    min-height: 100vh;
    transition: var(--transition);
    font-size: var(--font-size-large);
}

.container {
    max-width: 1800px;
    margin: 0 auto;
}

header {
    background: var(--header-bg);
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    transition: var(--transition);
}

h1 {
    color: var(--text-color);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: var(--font-size-header);
}

h1 i {
    color: var(--primary);
    font-size: 2.2rem;
}

.subtitle {
    color: var(--gray);
    font-size: var(--font-size-xlarge);
}

.header-controls {
    display: flex;
    gap: 20px;
    align-items: center;
}

.theme-toggle {
    background: var(--primary);
    color: white;
    border: none;
    padding: 15px 20px;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
    font-size: var(--font-size-large);
}

.theme-toggle:hover {
    background: #2980b9;
    transform: translateY(-2px);
}

.refresh-info {
    background: var(--card-bg);
    padding: 10px 15px;
    border-radius: var(--border-radius);
    font-size: var(--font-size-large);
    color: var(--gray);
    display: flex;
    align-items: center;
    gap: 10px;
}

.screensaver-info {
    background: var(--card-bg);
    padding: 10px 15px;
    border-radius: var(--border-radius);
    font-size: var(--font-size-large);
    color: var(--gray);
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-note {
    background: var(--card-bg);
    padding: 20px 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 25px;
    border-left: 6px solid var(--primary);
    font-size: var(--font-size-large);
    color: var(--gray);
}

.info-note i {
    color: var(--primary);
    margin-right: 10px;
    font-size: 1.4rem;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 35px;
}

.stat-card {
    background: var(--card-bg);
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
    transition: var(--transition);
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.stat-card.critical {
    border-left: 6px solid var(--danger);
}

.stat-card.warning {
    border-left: 6px solid var(--warning);
}

.stat-card i {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.stat-value {
    font-size: var(--font-size-xxlarge);
    font-weight: bold;
    margin: 15px 0;
    color: var(--text-color);
}

.stat-label {
    color: var(--gray);
    font-size: var(--font-size-large);
}

.table-container {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    margin-bottom: 35px;
    transition: var(--transition);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-large);
}

thead {
    background: var(--table-header-bg);
    color: white;
}

th {
    padding: 20px;
    text-align: left;
    font-weight: 600;
    font-size: var(--font-size-xlarge);
}

tbody tr {
    border-bottom: 1px solid var(--table-border);
    transition: var(--transition);
}

tbody tr:hover {
    background: var(--hover-bg);
}

td {
    padding: 18px 20px;
}

.badge {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: var(--font-size-large);
    font-weight: 600;
    text-align: center;
    min-width: 100px;
}

.sla-badge {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: var(--font-size-large);
    font-weight: 600;
    text-align: center;
    min-width: 120px;
}

.sla-normal { background-color: #2ecc71; color: white; }
.sla-warning { background-color: #f39c12; color: white; }
.sla-critical { background-color: #e74c3c; color: white; font-weight: bold; }
.sla-na { background-color: #95a5a6; color: white; }

/* ====================
   URGÊNCIAS
   ==================== */
.urgencia-critica { background-color: #e60000; color: white; font-weight: bold; }
.urgencia-alta { background-color: #ff5722; color: white; }
.urgencia-normal { background-color: #ffcb00; color: black; }
.urgencia-baixa { background-color: #4caf50; color: white; }
.urgencia-nivel1 { background-color: #81c784; color: black; }
.urgencia-nivel2 { background-color: #ff9800; color: black; }
.urgencia-2 { background-color: #9c27b0; color: white; }
.urgencia-3 { background-color: #3f51b5; color: white; }
.urgencia-4 { background-color: #009688; color: white; }
.urgencia-5 { background-color: #795548; color: white; }
.urgencia-default { background-color: #e0e0e0; color: black; }

/* ====================
   STATUS
   ==================== */
.status-a_fazer { background-color: #9e9e9e; color: white; }
.status-aguardando_deploy { background-color: #6a1b9a; color: white; }
.status-aguardando_sea { background-color: #00897b; color: white; }
.status-aguardando_info { background-color: #ff9800; color: black; }
.status-aguardando_cliente { background-color: #ff5722; color: white; }
.status-aguardando_cldf { background-color: #3949ab; color: white; }
.status-aguardando_sesc { background-color: #5d4037; color: white; }
.status-aguardando_tst { background-color: #00695c; color: white; }
.status-aguardando_solicitante { background-color: #f57c00; color: white; }
.status-ajustes { background-color: #ffeb3b; color: black; }
.status-cancelado { background-color: #d32f2f; color: white; text-decoration: line-through; }
.status-disponivel_teste { background-color: #2196f3; color: white; }
.status-em_analise { background-color: #0288d1; color: white; }
.status-em_execucao { background-color: #303f9f; color: white; }
.status-em_testes { background-color: #7b1fa2; color: white; }
.status-em_triagem { background-color: #cddc39; color: black; }
.status-finalizado { background-color: #00c853; color: white; font-weight: bold; }
.status-gmud { background-color: #009688; color: white; }
.status-homologado { background-color: #4caf50; color: white; }
.status-homologacao { background-color: #8bc34a; color: black; }
.status-impedimento { background-color: #e65100; color: white; }
.status-nao_iniciado { background-color: #9e9e9e; color: white; }
.status-default { background-color: #eeeeee; color: black; }

/* ====================
   SLA NEGATIVO
   ==================== */
.sla-negativo {
    color: #e74c3c !important;
    font-weight: bold;
    font-size: var(--font-size-xlarge);
}

footer {
    text-align: center;
    color: var(--gray);
    margin-top: 40px;
    padding: 25px;
    font-size: var(--font-size-large);
}

/* Indicador de atividade (invisível) */
.activity-indicator {
    position: fixed;
    top: -10px;
    left: -10px;
    width: 5px;
    height: 5px;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .header-controls {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .stats-container {
        grid-template-columns: 1fr;
    }

    .table-container {
        overflow-x: auto;
    }

    table {
        min-width: 1200px;
    }
}