/**
 * BluePartner Ops Console — 05 · PAINÉIS
 * Painel de resumo (neon card), stat cards, alertas, modal fullscreen, loading.
 *
 * Nota: SummaryCardNeon.js injeta um <style> próprio em runtime; as regras
 * daqui usam o id #summary-cards para vencer por especificidade sem !important.
 */

/* ═══ PAINEL BASE ═══════════════════════════════════════════════════════ */

.panel,
.summary-cards,
.table-content {
    position: relative;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-panel);
}

.summary-cards:empty {
    display: none;
}

/* Assinatura HUD: ticks de canto no painel de resumo */
.summary-cards::before,
.summary-cards::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
    opacity: 0.55;
}
.summary-cards::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--accent);
    border-left: 2px solid var(--accent);
    border-top-left-radius: var(--r-md);
}
.summary-cards::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
    border-bottom-right-radius: var(--r-md);
}

/* ═══ PAINEL ANALÍTICO (visão geral por serviço) ════════════════════════ */
/* Os estilos do painel (.ap-*) são injetados pelo próprio SummaryCardNeon.js
   e usam apenas tokens deste design system — nada a sobrescrever aqui.
   A raiz mantém a classe .neon-card apenas como marcador de proteção
   (WideLayoutController) e é transparente: o fundo vem de .summary-cards. */

/* ═══ STAT CARDS GLOBAIS ════════════════════════════════════════════════ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}
.stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-panel);
    transition: border-color var(--t-base), transform var(--t-base);
}
.stat-card:hover {
    border-color: var(--accent-border);
    transform: translateY(-2px);
}
.stat-icon {
    font-size: 20px;
    filter: grayscale(0.2);
}
.stat-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.stat-value {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--ink);
}
.stat-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* ═══ ALERTAS ═══════════════════════════════════════════════════════════ */

.alerts-container:empty {
    display: none;
}

.alerts-premium-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
/* Quando renderizada dentro do painel #table-content, ocupa o painel todo */
#table-content .alerts-premium-container {
    padding: 4px 2px;
}

.alerts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.alerts-header h2,
.alerts-header__title {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink);
}
.alerts-header__badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.alert-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.alert-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-inset);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.alert-stat-card--critical { border-left: 3px solid var(--danger); }
.alert-stat-card--warning  { border-left: 3px solid var(--warn); }
.alert-stat-card--info     { border-left: 3px solid var(--info); }
.alert-stat-card__icon { font-size: 17px; }
.alert-stat-card__value {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--ink);
}
.alert-stat-card__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.alerts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alert-card {
    background: var(--bg-inset);
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: var(--r-sm);
    padding: 16px 18px;
    transition: border-color var(--t-fast);
}
.alert-card:hover {
    border-color: var(--line-strong);
}
.alert-card.critical, .alert-card--critical { border-left-color: var(--danger); }
.alert-card.warning,  .alert-card--warning  { border-left-color: var(--warn); }
.alert-card.info,     .alert-card--info     { border-left-color: var(--info); }

.alert-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.alert-card__header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.alert-card__icon { font-size: 16px; }
.alert-card__title,
.alert-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--ink);
}
.alert-card__description,
.alert-description {
    margin-top: 6px;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--ink-2);
}
.alert-card__timestamp,
.alert-timestamp {
    font-family: var(--font-data);
    font-size: 10.5px;
    color: var(--ink-4);
}
.alert-card__badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.alert-badge,
.alert-severity-badge,
.alert-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--line-strong);
    color: var(--ink-2);
    background: var(--bg-raise);
}

.alert-card__recommendation {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--accent-dim);
    border: 1px solid var(--accent-border);
    border-radius: var(--r-sm);
}
.alert-card__recommendation-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--accent-ink);
}
.alert-card__recommendation-text {
    font-size: var(--text-sm);
    color: var(--ink-2);
    line-height: 1.5;
}

/* ── Linha expandível de alerta (markup do AlertsController) ── */
.alert-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    cursor: pointer;
    user-select: none;
}
.alert-icon {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    flex-shrink: 0;
}
.alert-icon--critical { color: var(--danger); }
.alert-icon--warning  { color: var(--warn); }
.alert-icon--info     { color: var(--info); }
.alert-header .alert-title {
    flex: 1;
    min-width: 180px;
}
.alert-service,
.alert-company {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    border: 1px solid var(--line);
    background: var(--bg-raise);
    color: var(--ink-2);
    white-space: nowrap;
}
.alert-expand-icon {
    color: var(--ink-4);
    font-size: 10px;
    transition: transform var(--t-fast);
}

.alert-details {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.alert-details p {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--ink-2);
}
.alert-affected-items {
    padding: 12px 14px;
    background: var(--bg-raise);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: var(--text-sm);
    color: var(--ink-2);
}
.alert-affected-items strong {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}
.alert-affected-items ul {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.alert-recommendation {
    padding: 12px 14px;
    background: var(--accent-dim);
    border: 1px solid var(--accent-border);
    border-radius: var(--r-sm);
    font-size: var(--text-sm);
    color: var(--ink-2);
}
.alert-recommendation strong {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: 6px;
}
.alert-recommendation p {
    margin: 0;
}
.alert-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.alerts-empty {
    text-align: center;
    padding: 42px 20px;
    color: var(--ink-3);
}
.alerts-empty__icon { font-size: 34px; margin-bottom: 10px; }
.alerts-empty__title {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--ink-2);
}
.alerts-empty__description {
    font-size: var(--text-sm);
    margin-top: 6px;
}

.alerts-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: var(--ink-4);
}

/* ═══ MODAL FULLSCREEN ══════════════════════════════════════════════════ */

.fullscreen-modal-backdrop {
    background: rgba(2, 4, 8, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.fullscreen-modal {
    background: var(--bg-panel);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-pop);
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}
.modal-title {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink);
}
.modal-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bg-raise);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--ink-2);
    font-size: 14px;
    transition: border-color var(--t-fast), color var(--t-fast);
}
.modal-close-btn:hover {
    border-color: rgba(248, 113, 113, 0.5);
    color: var(--danger);
}
.modal-body {
    padding: 20px;
}

/* ═══ BARRAS DE PROGRESSO ═══════════════════════════════════════════════ */

.progress-bar-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.progress-bar-bg,
.metric-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(126, 152, 192, 0.15);
    border-radius: var(--r-pill);
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--accent);
    transition: width var(--t-base);
}
.progress-bar-text,
.progress-percent {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--ink-2);
}

/* ═══ ESTADOS DE CARREGAMENTO ═══════════════════════════════════════════ */

/* ⚠️ Os controllers trocam o innerHTML sem remover a classe .loading —
   o estado de loading é estilizado no <p> interno, nunca no container
   (senão o layout de TODAS as abas herdaria flex/centralização). */
.table-content.loading {
    display: block;
}
.table-content > p:only-child {
    text-align: center;
    padding: 70px 20px;
    margin: 0;
    color: var(--ink-3);
    font-size: var(--text-sm);
    letter-spacing: 0.05em;
}

/* Grid de detalhes (linhas expandidas / modal) */
.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}
.detail-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    background: var(--bg-raise);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.detail-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.detail-value {
    font-size: var(--text-sm);
    color: var(--ink);
    word-break: break-word;
}