/*
 * AWS Roadmap - Estilos específicos
 * Gantt chart, Org tree, Migration diagram
 */

/* Org Structure Tree */
.org-tree {
    margin-top: var(--space-md);
}

.org-item {
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-xs) 0;
    border-radius: var(--radius-md);
    background: var(--bg-card-dark);
    border-left: 4px solid var(--border-color);
}

.org-item.management { border-left-color: #f44336; }
.org-item.ou { border-left-color: #ff9800; background: #1f1f3a; }
.org-item.account { border-left-color: #4caf50; margin-left: 20px; }
.org-item.account-problem { border-left-color: var(--color-red); margin-left: 20px; }
.org-item.account-client { border-left-color: #2196f3; margin-left: 20px; }

.org-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.org-item-name {
    font-weight: 600;
    color: var(--text-primary);
}

.org-item-id {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-family: monospace;
}

.org-item-badge {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: rgba(100, 181, 246, 0.2);
    color: var(--color-blue);
}

.indent-1 { margin-left: 20px; }
.indent-2 { margin-left: 40px; }

/* Gantt Chart */
.gantt-container {
    overflow-x: auto;
    margin-top: var(--space-md);
}

.gantt-header {
    display: grid;
    grid-template-columns: 300px repeat(52,36px);
    /* Sem largura, a linha assume só a largura visível do container e o fundo é
       clipado (faixas das WS param ~fim do 1º sem). max-content cresce até a soma
       real das 52 colunas; min-width:100% preenche quando o conteúdo é menor. */
    width: max-content;
    min-width: 100%;
    gap: 1px;
    background: var(--bg-card-dark);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    position: sticky;
    top: 0;
}

.gantt-header-cell {
    padding: 8px 4px;
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.gantt-header-cell.month {
    background: #252560;
    color: var(--color-blue);
    font-weight: 600;
}

.gantt-header-cell.activity-header {
    text-align: left;
    padding-left: var(--space-md);
    color: var(--color-blue);
}

.gantt-row {
    display: grid;
    grid-template-columns: 300px repeat(52,36px);
    /* idem .gantt-header: faixa/hover/divisórias precisam pintar a largura toda. */
    width: max-content;
    min-width: 100%;
    gap: 1px;
    border-bottom: 1px solid var(--border-highlight);
    transition: background var(--transition-fast);
}

.gantt-row:hover {
    background: rgba(100, 181, 246, 0.05);
}

.gantt-row.ws-header {
    background: var(--bg-card-dark);
}

.gantt-activity {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-xs);
}

.gantt-activity input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--color-blue);
}

.gantt-activity.completed label {
    text-decoration: line-through;
    color: var(--text-muted);
}

.gantt-activity label {
    cursor: pointer;
    flex: 1;
}

.gantt-activity .owner-tag {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: rgba(100, 181, 246, 0.2);
    color: var(--color-blue);
}

.gantt-cell {
    min-height: 36px;
    position: relative;
}

.gantt-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    border-radius: var(--radius-sm);
    opacity: 0.85;
}

.gantt-bar.completed {
    opacity: 0.7;                       /* era 0.4 — barra concluída sumia no fundo */
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 5px,
        rgba(0,0,0,0.15) 5px,
        rgba(0,0,0,0.15) 10px
    );
}

/* Linha de tarefa concluída: faixa de fundo sutil (distingue "feito" de "vazio"). */
.gantt-row.done { background: rgba(129, 199, 132, 0.06); }
.gantt-row.done:hover { background: rgba(129, 199, 132, 0.12); }

/* Marcador ✓ na semana REAL de conclusão (completedAt). */
.done-marker {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: var(--color-green);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    cursor: default;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Workstream bars */
.ws1-bar { background: linear-gradient(90deg, #2196f3, #64b5f6); }
.ws2-bar { background: linear-gradient(90deg, #4caf50, #81c784); }
.ws3-bar { background: linear-gradient(90deg, #ff9800, #ffb74d); }
.ws4-bar { background: linear-gradient(90deg, #9c27b0, #ba68c8); }
.ws5-bar { background: linear-gradient(90deg, #f44336, #e57373); }
.ws6-bar { background: linear-gradient(90deg, #00bcd4, #4dd0e1); }
.ws7-bar { background: linear-gradient(90deg, #795548, #a1887f); }
.ws8-bar { background: linear-gradient(90deg, #607d8b, #90a4ae); }
.ws9-bar { background: linear-gradient(90deg, #e91e63, #f48fb1); }

.ws-title {
    font-weight: 600;
    color: var(--color-blue);
    padding: var(--space-sm);
    font-size: var(--font-size-sm);
}

/* Legend */
.legend {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--bg-card-dark);
    border-radius: var(--radius-md);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
}

.legend-color {
    width: 16px;
    height: 10px;
    border-radius: 3px;
}

/* Comparison Cards */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-lg);
    align-items: center;
    margin: var(--space-lg) 0;
}

.comparison-card {
    background: var(--bg-card-dark);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
}

.comparison-card.before {
    border: 2px solid var(--color-red);
}

.comparison-card.after {
    border: 2px solid var(--color-green);
}

.comparison-card h3 {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.comparison-card .number {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: var(--space-sm);
}

.comparison-card.before .number { color: var(--color-red); }
.comparison-card.after .number { color: var(--color-green); }

.comparison-arrow {
    font-size: 2rem;
    color: var(--color-blue);
}

/* Benefits Grid */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.benefit-card {
    padding: var(--space-lg);
    background: var(--bg-card-dark);
    border-radius: var(--radius-lg);
    text-align: center;
}

.benefit-card .icon {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
}

.benefit-card h4 {
    color: var(--color-blue);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.benefit-card p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* Migration Diagram */
.migration-diagram {
    background: var(--bg-card-dark);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin: var(--space-lg) 0;
}

.migration-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-lg);
    align-items: center;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border-highlight);
}

.migration-row:last-child {
    border-bottom: none;
}

.migration-from, .migration-to {
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.migration-from {
    background: rgba(229, 115, 115, 0.1);
    border: 1px solid var(--color-red);
    text-align: right;
}

.migration-to {
    background: rgba(129, 199, 132, 0.1);
    border: 1px solid var(--color-green);
}

.migration-to.new {
    background: rgba(100, 181, 246, 0.1);
    border: 1px solid var(--color-blue);
}

.migration-arrow {
    color: var(--color-blue);
    font-size: 1.5rem;
}

/* Tech Cards */
.tech-card.high-impact { border-left-color: var(--color-green); }
.tech-card.medium-impact { border-left-color: var(--color-yellow); }
.tech-card.governance { border-left-color: var(--color-purple); }

.tech-card .impact {
    margin-top: var(--space-sm);
    font-size: var(--font-size-xs);
    color: var(--color-green);
}

.tech-card .owner {
    margin-top: 8px;
    font-size: var(--font-size-xs);
    color: var(--color-blue);
}

/* Today Marker */
.today-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-red);
    z-index: 10;
}

.month-divider {
    border-left: 1px solid var(--border-color);
}

.last-updated {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    padding: var(--space-lg);
}

/* ============================================
   RESPONSIVE - LARGER SCREENS (2K/4K)
   ============================================ */

/* 2K Screens (1921px+) */
@media (min-width: 1921px) {
    .gantt-header,
    .gantt-row {
        grid-template-columns: 400px repeat(52,70px);
    }

    .gantt-header-cell {
        padding: 10px 6px;
        font-size: 0.78rem;
    }

    .gantt-activity {
        padding: 10px 14px;
        font-size: 0.88rem;
    }

    .gantt-activity input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }

    .gantt-cell {
        min-height: 44px;
    }

    .gantt-bar {
        height: 26px;
    }

    .ws-title {
        font-size: 0.95rem;
        padding: 12px;
    }

    .legend {
        padding: 18px;
        gap: 18px;
    }

    .legend-item {
        font-size: 0.85rem;
    }

    .legend-color {
        width: 20px;
        height: 12px;
    }

    .comparison-card {
        padding: 32px;
    }

    .comparison-card .number {
        font-size: 3.2rem;
    }

    .benefit-card {
        padding: 28px;
    }

    .benefit-card .icon {
        font-size: 2.2rem;
    }

    .benefit-card h4 {
        font-size: 1rem;
    }
}

/* 4K Screens (2561px+) */
@media (min-width: 2561px) {
    .gantt-header,
    .gantt-row {
        grid-template-columns: 500px repeat(52,100px);
    }

    .gantt-header-cell {
        padding: 12px 8px;
        font-size: 0.88rem;
    }

    .gantt-activity {
        padding: 14px 18px;
        font-size: 0.98rem;
    }

    .gantt-activity input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    .gantt-cell {
        min-height: 52px;
    }

    .gantt-bar {
        height: 30px;
    }

    .ws-title {
        font-size: 1.02rem;
        padding: 14px;
    }

    .legend {
        padding: 22px;
        gap: 22px;
    }

    .legend-item {
        font-size: 0.92rem;
    }

    .legend-color {
        width: 24px;
        height: 14px;
    }

    .comparison-card {
        padding: 38px;
    }

    .comparison-card .number {
        font-size: 3.5rem;
    }

    .benefit-card {
        padding: 32px;
    }

    .benefit-card .icon {
        font-size: 2.5rem;
    }

    .benefit-card h4 {
        font-size: 1.08rem;
    }
}

/* Full 4K Screens (3200px+) */
@media (min-width: 3200px) {
    .gantt-header,
    .gantt-row {
        grid-template-columns: 600px repeat(52,115px);
    }

    .gantt-header-cell {
        padding: 14px 10px;
        font-size: 0.92rem;
    }

    .gantt-activity {
        padding: 16px 20px;
        font-size: 1.02rem;
    }

    .gantt-activity input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }

    .gantt-cell {
        min-height: 58px;
    }

    .gantt-bar {
        height: 34px;
    }

    .ws-title {
        font-size: 1.08rem;
        padding: 16px;
    }

    .legend {
        padding: 26px;
        gap: 26px;
    }

    .legend-item {
        font-size: 0.98rem;
    }

    .legend-color {
        width: 28px;
        height: 16px;
    }

    .comparison-card {
        padding: 42px;
    }

    .comparison-card .number {
        font-size: 3.8rem;
    }

    .benefit-card {
        padding: 36px;
    }

    .benefit-card .icon {
        font-size: 2.8rem;
    }

    .benefit-card h4 {
        font-size: 1.12rem;
    }
}

/* ============================================
   RESPONSIVE - SMALLER SCREENS
   ============================================ */

/* Responsive */
@media (max-width: 768px) {
    .gantt-container {
        font-size: var(--font-size-xs);
    }

    .comparison-grid {
        grid-template-columns: 1fr;
    }

    .comparison-arrow {
        transform: rotate(90deg);
    }

    .migration-row {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .migration-from {
        text-align: center;
    }
}

/* Sync Indicator */
.sync-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.sync-saved {
    background: rgba(129, 199, 132, 0.15);
    color: var(--color-green);
}

.sync-syncing {
    background: rgba(255, 183, 77, 0.15);
    color: var(--color-orange);
    animation: pulse 1s infinite;
}

.sync-offline {
    background: rgba(158, 158, 158, 0.15);
    color: var(--text-secondary);
}

.sync-error {
    background: rgba(229, 115, 115, 0.15);
    color: var(--color-red);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* --- Resumo (/aws): grid 2 colunas p/ aproveitar a largura ------------------
   Scoped em #resumo.active pra não furar o display:none/.active das abas.
   grid-auto-flow: dense faz a Timeline preencher o buraco deixado pela seção
   densa (.full) → pares: Visão Geral | Dois Pilares · Ações Reorg | Timeline ·
   Otimização Técnica em linha cheia. */
#resumo.active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* 2 colunas FIXAS (não auto-fit — evita 6 col no 4K) */
    grid-auto-flow: row;                               /* sem dense: ordem visual == DOM */
    gap: var(--space-lg);
    align-items: stretch;                              /* pares da MESMA altura por linha */
}
#resumo > .section {
    height: 100%;                                      /* preenche a altura da linha (quadrantes iguais) */
    margin: 0;                                         /* o gap do grid cuida do espaço */
    padding: var(--space-lg) var(--space-xl);          /* padding vertical menor (era xl) */
}
#resumo .section.full { grid-column: 1 / -1; }         /* seção densa (Otimização) ocupa a linha inteira */
#resumo > .stats-grid { grid-column: 1 / -1; margin: 0; } /* KPIs full-width no topo (só no Resumo) */

/* Abaixo de 1000px: 1 coluna. Mantém .active pra vencer a especificidade da regra base. */
@media (max-width: 1000px) {
    #resumo.active { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Gantt: 1ª coluna "Atividade" CONGELADA (sticky left). Só as colunas de
   semana/mês rolam. Fundo OPACO pra as barras não vazarem por baixo + sombra
   de separação. z-index acima do "hoje" (10) e do ✓ (2) — marcadores ficam
   ATRÁS da coluna fixa ao rolar pra longe (esperado). /aws é dark-locked.
   ========================================================================== */
.gantt-container .gantt-header-cell.activity-header,
.gantt-container .ws-title,
.gantt-container .gantt-activity {
    position: sticky;
    left: 0;
    background: var(--surface);                /* opaco: aproxima o fundo da linha (slate) */
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.35);
    z-index: 20;                               /* acima das barras, do "hoje" (10) e do ✓ (2) */
}
/* faixa de WS / canto do header: tom levemente mais claro (surface-2) */
.gantt-container .ws-title { background: var(--surface-2); }
/* célula-canto do header (sticky nos DOIS eixos) fica acima de tudo */
.gantt-container .gantt-header-cell.activity-header { background: var(--surface-2); z-index: 30; }
/* linha concluída: 1ª coluna com verde OPACO equivalente (não deixa a barra vazar) */
.gantt-container .gantt-row.done .gantt-activity { background: #17231b; }

/* ==========================================================================
   Checklist em 2 colunas (masonry via CSS multi-column). display:block pra
   sobrepor o display:grid do .checklist-grid (senão column-count é ignorado).
   ========================================================================== */
#checklist-container {
    display: block;
    column-count: 2;
    column-gap: var(--space-lg);
}
#checklist-container > .checklist-product {
    break-inside: avoid;
    margin: 0 0 var(--space-lg);
    width: 100%;
}
@media (max-width: 1000px) {
    #checklist-container { column-count: 1; }
}

/* ==========================================================================
   PONTE DESIGN-SYSTEM (theme.css) — piloto /aws
   Remapeia os tokens legados de superfície/texto/borda/fonte para a paleta
   slate do tema (theme.css). NÃO toca nos --color-* (semânticos): barras WS,
   .gantt-row.done, comparison before/after, tech-cards, badges.
   ========================================================================== */
:root {
    --bg-primary:       var(--bg);
    --bg-secondary:     var(--bg);
    --bg-card:          var(--surface);
    --bg-card-solid:    var(--surface);
    --bg-card-dark:     var(--surface);
    --border-color:     var(--surface-border);
    --border-highlight: var(--surface-border);
    --text-primary:     var(--text);
    --text-secondary:   var(--text-body);
    --font-family:      var(--font);
    --font-family-alt:  var(--font);
}

/* roxos hardcoded remanescentes → superfície interna do tema */
.gantt-header-cell.month { background: var(--surface-2); }
.org-item.ou { background: var(--surface-2); }

/* título de seção adota a escala do tema (22px/700, slate forte);
   mantém a barrinha-accent azul (identidade /aws). */
.section h2 { color: var(--text); font-size: var(--fs-section); font-weight: 700; }

/* barra de scroll horizontal do Gantt: discreta (fina, thumb slate sutil) */
.gantt-container { scrollbar-width: thin; scrollbar-color: var(--surface-border) transparent; }
.gantt-container::-webkit-scrollbar { height: 8px; }
.gantt-container::-webkit-scrollbar-track { background: transparent; }
.gantt-container::-webkit-scrollbar-thumb { background: var(--surface-border); border-radius: 4px; }
.gantt-container::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }