/* ============================================================
   NEXUS — Indicadores Dia a Dia
   Adicionar ao final de /srv/r2/nexus/frontend/css/style.css
   
   Paleta V2 (mesma do painel Produção Online):
   - Bordô: #940910 | Dourado: #F2A20C | Dark: #1F2326
   - Pills: v2-g (verde), v2-y (amarelo), v2-o (laranja), v2-r (vermelho)
   ============================================================ */

/* --- CONTAINER PRINCIPAL --- */
.ind-panel {
    padding: 20px 24px;
    max-width: 100%;
}

.ind-panel-title {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1F2326;
    margin: 0 0 16px 0;
}

/* --- BREADCRUMB + SELETOR DE MESES --- */
.ind-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.ind-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-size: 13px;
}

.ind-bc-link {
    color: #940910;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.15s;
}
.ind-bc-link:hover { opacity: 0.7; }

.ind-bc-active {
    color: #1F2326;
    font-weight: 600;
}

.ind-bc-sep {
    color: #aaa;
    font-size: 14px;
}

.ind-meses-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
}

.ind-meses-btn {
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #4b5563;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.15s;
}
.ind-meses-btn:hover { border-color: #940910; color: #940910; }
.ind-meses-btn.active {
    background: #940910;
    color: #fff;
    border-color: #940910;
}


/* --- BARRA DE FILTROS --- */
.ind-filtros-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.ind-filtro-dropdown {
    position: relative;
}

.ind-filtro-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.ind-filtro-btn:hover { border-color: #940910; }
.ind-filtro-btn.active {
    border-color: #940910;
    background: #fef2f2;
    color: #940910;
}

.ind-filter-badge {
    background: #940910;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

.ind-filtro-options {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 220px;
    max-height: 320px;
    overflow: hidden;
    display: none;
    flex-direction: column;
}
.ind-filtro-options.open {
    display: flex;
}

.ind-filtro-search {
    padding: 8px 10px 4px;
}
.ind-filtro-search input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    outline: none;
    box-sizing: border-box;
}
.ind-filtro-search input:focus { border-color: #940910; }

.ind-filtro-actions {
    display: flex;
    gap: 12px;
    padding: 4px 12px 6px;
    font-size: 11px;
}
.ind-filtro-actions a {
    color: #940910;
    text-decoration: none;
    font-weight: 500;
}
.ind-filtro-actions a:hover { text-decoration: underline; }

.ind-filtro-list {
    overflow-y: auto;
    max-height: 240px;
    padding: 0 6px 8px;
}

.ind-filtro-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    color: #374151;
    transition: background 0.1s;
}
.ind-filtro-item:hover { background: #f9fafb; }
.ind-filtro-item input[type="checkbox"] {
    accent-color: #940910;
    width: 14px;
    height: 14px;
}

.ind-limpar-todos {
    padding: 5px 12px;
    border: none;
    border-radius: 6px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.ind-limpar-todos:hover { background: #fecaca; }


/* --- MATRIZ / TABELA --- */
.ind-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.ind-matriz {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-size: 13px;
    min-width: 500px;
}

/* Header */
.ind-matriz thead th {
    background: #f5f6f8;
    color: #5a6270;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 10px 14px;
    text-align: center;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

.ind-th-indicador {
    text-align: left !important;
    position: sticky;
    left: 0;
    z-index: 3 !important;
    background: #f5f6f8 !important;
    min-width: 200px;
    border-right: 2px solid #e5e7eb;
}

.ind-th-periodo:hover {
    background: #eef0f3 !important;
    color: #940910;
}

.ind-drill-arrow {
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.15s;
    color: #940910;
}
.ind-th-periodo:hover .ind-drill-arrow {
    opacity: 1;
}

.ind-dia-semana {
    font-size: 9px;
    color: #9ca3af;
    text-transform: capitalize;
    font-weight: 400;
}

/* Body */
.ind-matriz tbody tr {
    transition: background 0.1s;
}
.ind-matriz tbody tr:nth-child(even) {
    background: #fafbfc;
}
.ind-matriz tbody tr:hover {
    background: #f0f4ff !important;
}

.ind-td-nome {
    padding: 9px 14px;
    font-weight: 600;
    color: #1F2326;
    white-space: nowrap;
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 1;
    border-right: 2px solid #e5e7eb;
    font-size: 12px;
}
.ind-matriz tbody tr:nth-child(even) .ind-td-nome {
    background: #fafbfc;
}
.ind-matriz tbody tr:hover .ind-td-nome {
    background: #f0f4ff !important;
}

.ind-td-valor {
    padding: 7px 10px;
    text-align: center;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', 'Inter', monospace;
    font-size: 12px;
    white-space: nowrap;
}

/* Pills V2 dentro da matriz (herda do NEXUS existente) */
.ind-td-valor .v2-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

/* Se as classes V2 ainda não existirem no style.css, descomentar abaixo: */
/*
.v2-g  { background: #dcfce7; border: 1px solid #4ade80; color: #14532d; }
.v2-gl { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; }
.v2-y  { background: #fef9c3; border: 1px solid #facc15; color: #713f12; }
.v2-o  { background: #ffedd5; border: 1px solid #fb923c; color: #7c2d12; }
.v2-r  { background: #fee2e2; border: 1px solid #f87171; color: #7f1d1d; }
*/


/* --- LOADING & EMPTY STATES --- */
.ind-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: #9ca3af;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.ind-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e5e7eb;
    border-top-color: #940910;
    border-radius: 50%;
    animation: ind-spin 0.7s linear infinite;
}
@keyframes ind-spin {
    to { transform: rotate(360deg); }
}

.ind-empty, .ind-error {
    padding: 48px 20px;
    text-align: center;
    color: #9ca3af;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}
.ind-error { color: #ef4444; }


/* --- RESPONSIVIDADE MOBILE --- */
@media (max-width: 768px) {
    .ind-panel {
        padding: 12px 10px;
    }
    
    .ind-nav-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ind-filtros-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    
    .ind-filtro-options {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 16px 16px 0 0;
        max-height: 60vh;
        min-width: auto;
    }
    
    .ind-th-indicador {
        min-width: 140px;
        font-size: 10px;
    }
    
    .ind-td-nome {
        font-size: 11px;
        padding: 6px 8px;
    }
    
    .ind-td-valor {
        font-size: 11px;
        padding: 5px 6px;
    }
    
    .ind-td-valor .v2-pill {
        font-size: 10px;
        padding: 1px 5px;
    }
}


/* ============================================================
   HIERARQUIA VISUAL: MÊS > SEMANA > DIA
   ============================================================ */

/* MÊS — destaque forte, bordô escuro */
.ind-th-mes {
    background: #940910 !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.3px;
    border-left: 3px solid #6d060b !important;
    text-transform: uppercase;
}
.ind-th-mes.ind-th-clickable:hover {
    background: #7a060c !important;
}

/* SEMANA — intermediário, cinza escuro */
.ind-th-semana {
    background: #374151 !important;
    color: #f3f4f6 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    border-left: 2px solid #4b5563 !important;
}
.ind-th-semana.ind-th-clickable:hover {
    background: #4b5563 !important;
}

/* DIA — leve, fundo claro */
.ind-th-dia {
    background: #f0f1f4 !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    border-left: 1px solid #e5e7eb !important;
}

/* Seta expand/collapse mais visível */
.ind-th-mes .ind-drill-arrow,
.ind-th-semana .ind-drill-arrow {
    opacity: 1;
}

/* Separador visual nas colunas de dados (body) */
.ind-matriz tbody td {
    border-left: 1px solid #f0f0f0;
}

/* Coluna de mês no body — borda esquerda forte */
.ind-matriz tbody tr td:nth-child(n+2) {
    border-left: 1px solid #f0f0f0;
}

/* Dia da semana (Tue, Wed) com cor mais visível */
.ind-dia-semana {
    color: #9ca3af !important;
    font-size: 9px !important;
    text-transform: capitalize;
}

/* Clickable cursor */
.ind-th-clickable {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}