/* Gestão IA - estilos customizados (identidade C.5.1) */

/* ============================================
   TOKENS DA MARCA GESTÃO IA
   Paleta amostrada dos swatches oficiais da
   imagem master (NÃO editar "no olho").
   ============================================ */
:root {
    --gestao-navy: #01266d;     /* azul marinho profundo - institucional */
    --gestao-blue: #0058d8;     /* azul royal - ações primárias / ativo */
    --gestao-teal: #02b2bf;     /* turquesa - IA, sucesso, destaques */
    --gestao-cyan: #5cdce6;     /* ciano claro - fundos informativos */
    --gestao-surface: #cbd5e1;  /* cinza azulado claro - superfícies neutras */

    --gestao-text: var(--gestao-navy);
    --gestao-primary: var(--gestao-blue);
    --gestao-accent: var(--gestao-teal);
    --gestao-info: var(--gestao-cyan);
    --gestao-border: #d8e0ec;
    --gestao-bg: #f4f7fb;

    /* alinha os utilitários do Bootstrap (btn-primary etc.) à marca */
    --bs-primary: var(--gestao-blue);
    --bs-primary-rgb: 0, 88, 216;
    --bs-link-color: var(--gestao-blue);
    --bs-link-color-rgb: 0, 88, 216;
    --bs-link-hover-color: var(--gestao-navy);
}

.btn-primary {
    --bs-btn-bg: var(--gestao-blue);
    --bs-btn-border-color: var(--gestao-blue);
    --bs-btn-hover-bg: #0a3a85;
    --bs-btn-hover-border-color: #0a3a85;
    --bs-btn-active-bg: var(--gestao-navy);
    --bs-btn-active-border-color: var(--gestao-navy);
    --bs-btn-disabled-bg: var(--gestao-blue);
    --bs-btn-disabled-border-color: var(--gestao-blue);
}

body {
    font-size: 0.95rem;
    background: var(--gestao-bg);
}

.card {
    border-radius: 0.75rem;
}

.table-sm td { padding: 0.4rem 0.5rem; }

.nav-link.disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================
   NAVBAR GESTÃO IA (clara, recebe o logo aprovado)
   ============================================ */
.navbar-concilia {
    background: #ffffff;
    border-bottom: 1px solid var(--gestao-border);
}

.brand-concilia {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
    text-decoration: none;
}

/* Logo horizontal aprovado (símbolo + nome) */
.brand-concilia .brand-logo {
    height: 42px;
    width: auto;
    display: block;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.brand-concilia:hover .brand-logo { transform: scale(1.03); }

/* navbar clara: links em navy, ativo/hover em azul royal */
.navbar-concilia .navbar-nav .nav-link {
    color: var(--gestao-navy);
    font-weight: 500;
}
.navbar-concilia .navbar-nav .nav-link:hover,
.navbar-concilia .navbar-nav .nav-link:focus {
    color: var(--gestao-blue);
}
.navbar-concilia .navbar-nav .nav-link.active,
.navbar-concilia .navbar-nav .show > .nav-link {
    color: var(--gestao-blue);
    font-weight: 700;
}
.navbar-concilia .dropdown-item.active,
.navbar-concilia .dropdown-item:active {
    background-color: var(--gestao-blue);
}

@media (max-width: 991px) {
    .brand-concilia .brand-logo { height: 36px; }
}

/* ============================================
   HERO HEADER (DASHBOARD)
   ============================================ */
.dashboard-hero {
    background: linear-gradient(135deg, var(--gestao-blue) 0%, var(--gestao-navy) 70%, #001a4d 100%);
    box-shadow: 0 8px 24px rgba(1, 38, 109, 0.20);
}

/* ============================================
   PAINEL MÓDULOS E INTEGRAÇÕES (dashboard)
   ============================================ */
.modulo-card {
    border: 1px solid var(--gestao-border);
    border-radius: 0.75rem;
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.modulo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(1, 38, 109, 0.08);
}
.modulo-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    background: rgba(0, 88, 216, 0.08);
    color: var(--gestao-blue);
}
.badge-status-ativo       { background: var(--gestao-teal); color: #04323a; }
.badge-status-implantacao { background: var(--gestao-blue); color: #fff; }
.badge-status-planejada   { background: var(--gestao-surface); color: var(--gestao-navy); }

/* ============================================
   KPI CARDS
   ============================================ */
.card-kpi {
    border: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

/* ============================================
   ROADMAP DE SPRINTS
   ============================================ */
.sprint-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f8f9fa;
    border: 1px solid transparent;
    min-width: 130px;
    transition: all 0.2s ease;
}
.sprint-step.done { background: #d1e7dd; border-color: #a3cfbb; }
.sprint-step.current {
    background: #cfe2ff;
    border: 2px solid #0d6efd;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.18);
}
.sprint-step.future { opacity: 0.55; }
.sprint-step i { font-size: 18px; }

/* ============================================
   RECURSO DOTS / BARS
   ============================================ */
.recurso-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

.recurso-bar {
    display: block;
    width: 4px;
    height: 40px;
    border-radius: 2px;
}

/* ============================================
   TIMELINE
   ============================================ */
.timeline { position: relative; }
.timeline-item {
    border-left: 2px solid #e9ecef;
    padding-left: 16px;
    padding-bottom: 16px;
    position: relative;
    margin-left: 4px;
}
.timeline-item:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0d6efd;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #0d6efd33;
}

/* ============================================
   HOVER LIFT
   ============================================ */
.hover-lift {
    transition: all 0.2s ease;
    cursor: default;
}
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: #0d6efd33 !important;
}

/* ============================================
   TABELAS
   ============================================ */
.table-hover tbody tr:hover {
    background-color: #f8fafe;
}
.table > :not(caption) > * > * {
    padding: 0.85rem 0.5rem;
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f3f5; }
::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #adb5bd; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .dashboard-hero .display-5 { font-size: 1.8rem; }
    .sprint-step { min-width: 100%; }
}

/* ============================================
   UPLOAD ZONE (OFX)
   ============================================ */
.upload-zone {
    cursor: pointer;
    transition: all 0.2s;
    background: #f8fafe;
    border-color: #cfe2ff !important;
}
.upload-zone:hover, .upload-zone.dragover {
    background: #e7f1ff;
    border-color: #0d6efd !important;
}