/* Telas de Planos de Cotas.
   page-hero, stat-card e status-badge nascem em css/paginas/trackingaereo/trackingaereo.css, que é o molde
   estrutural destas telas. As regras estão repetidas aqui porque lá elas estão presas ao arquivo de uma
   página: carregar o CSS inteiro do Tracking Aéreo traria também as regras do grid dele. O lugar certo
   delas é um CSS compartilhado — fica registrado. */

.page-hero {
    display: flex;
    align-items: center;
    background-color: #fff;
    background-image: url('../../../../assets/images/grafismo/vtc-page-header-grafismo.png');
    background-repeat: no-repeat;
    background-position: right center;
    border-radius: 8px;
    border-left: 4px solid #204D8B;
    padding: 14px 50px 14px 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    margin-bottom: 1.5rem;
    position: relative;
}

/* As duas camadas do ícone no azul da faixa — a variante page-hero--primary do Tracking Aéreo. Com o
   laranja da marca na camada de fundo, a 30%, o ícone saía rosado. */
.page-hero-icon {
    flex-shrink: 0;
    margin-right: 16px;
    --fa-primary-color: #204D8B;
    --fa-secondary-color: #204D8B;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.3;
    color: #204D8B;
}

.page-hero-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.page-hero-title {
    font-size: .85rem;
    font-weight: 600;
    color: #212529;
    line-height: 1.3;
}

.page-hero-subtitle {
    font-size: 0.8rem;
    color: #6c757d;
    line-height: 1.4;
}

.stat-card {
    position: relative;
    border-radius: 12px;
    padding: 20px;
    color: #fff;
    overflow: hidden;
    min-height: 130px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    --stat-bg: #6c757d;
    background: var(--stat-bg);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle cx='3' cy='3' r='1.5' fill='rgba(255,255,255,0.15)'/%3E%3Ccircle cx='18' cy='18' r='1.5' fill='rgba(255,255,255,0.15)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    pointer-events: none;
    z-index: 0;
}

.stat-card-icon {
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: 48px;
    opacity: 0.15;
    z-index: 1;
}

.stat-card-title {
    font-size: 13px;
    font-weight: 400;
    opacity: 0.95;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 1;
}

.stat-card-value {
    font-size: 20px;
    font-weight: 700;
    margin: 8px 0;
    z-index: 1;
}

.stat-card-sub {
    font-size: 12px;
    opacity: 0.85;
    z-index: 1;
}

/* A mesma paleta com significado da tela de detalhe (planoscotasdetalhe.css explica cada cor): volume em
   azul, pedidos em verde, divergência em vermelho só quando existe. */
.stat-card--navy   { --stat-bg: #204D8B; }
.stat-card--blue   { --stat-bg: #2F80C0; }
.stat-card--teal   { --stat-bg: #1C8C8C; }
.stat-card--green  { --stat-bg: #2E9E5B; }
.stat-card--red    { --stat-bg: #D64545; }
.stat-card--slate  { --stat-bg: #6B7A90; }

/* Aqui os números não filtram nada: o cursor de mão do molde prometeria um clique que não existe. */
#statCardsPlanos .stat-card {
    cursor: default;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.status-badge--secondary { background-color: #e9ecef; color: #495057; }
.status-badge--info      { background-color: #d6f0f7; color: #0a7bbf; }
.status-badge--warning   { background-color: #fdecd2; color: #b5760a; }
.status-badge--success   { background-color: #d7f2e4; color: #1e7e50; }
.status-badge--danger    { background-color: #fbdcdf; color: #c0392b; }

/* --- Card do plano em andamento --- */

/* Mesmo desenho do page-hero — cantos arredondados e a faixa à esquerda —, com a faixa na cor do status
   do plano. Sem plano em andamento ela fica no azul da casa. */
.plano-andamento {
    border-radius: 8px;
    border-left: 4px solid var(--cor-status-plano, #204D8B);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    margin-bottom: 1rem;
}

/* Cada status tem DOIS tons: o vivo, para preencher (faixa e barra), e o escuro, para texto. O âmbar vivo
   como texto sobre branco ficava claro demais para ler; o escuro é o mesmo do texto da etiqueta de
   status (.status-badge--*), então o número e a etiqueta ao lado leem como uma coisa só. */
.plano-andamento--info      { --cor-status-plano: #1BB5F7; --cor-status-plano-texto: #0a7bbf; }
.plano-andamento--warning   { --cor-status-plano: #F0B429; --cor-status-plano-texto: #b5760a; }
.plano-andamento--success   { --cor-status-plano: #34C759; --cor-status-plano-texto: #1e7e50; }
.plano-andamento--danger    { --cor-status-plano: #FF3B30; --cor-status-plano-texto: #c0392b; }
.plano-andamento--secondary { --cor-status-plano: #ADB5BD; --cor-status-plano-texto: #495057; }

.plano-andamento-vazio {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #6c757d;
}

.plano-andamento-vazio i {
    --fa-primary-color: #34C759;
    --fa-secondary-color: #34C759;
    color: #34C759;
}

.plano-andamento-vazio-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.plano-andamento-vazio-titulo {
    font-size: .9rem;
    font-weight: 600;
    color: #212529;
}

.plano-andamento-vazio-sub {
    font-size: .8rem;
}

.plano-andamento-cabecalho {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

/* O título INTEIRO na cor do status, no tom escuro — o de texto. Só o número colorido, no meio da frase,
   lia como palavra solta; o título inteiro forma um bloco com a etiqueta ao lado. O número se destaca
   pelo peso, não pela cor. */
.plano-andamento-titulo {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cor-status-plano-texto, #212529);
    transition: color .4s ease;
}

.plano-andamento-numero {
    font-weight: 700;
}

.plano-andamento-separador {
    color: #adb5bd;
    font-weight: 400;
}

.plano-andamento-botoes {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.plano-andamento-etapa {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .85rem;
    margin-bottom: 10px;
}

.plano-andamento-etapa-nome {
    font-weight: 600;
    color: #212529;
}

.plano-andamento-etapa-detalhe {
    color: #6c757d;
}

.plano-andamento-progresso {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

/* A mesma barra do detalhe: 8px e cantos arredondados. */
.plano-andamento-progresso .progress {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 4px;
    background-color: #e9ecef;
}

/* A barra na cor do status, como a faixa e a etiqueta: em âmbar, 100% lê como "esperando alguém", e não
   como "concluído". A variável vem da classe de status do card (.plano-andamento--*). */
.plano-andamento-progresso .progress-bar {
    background-color: var(--cor-status-plano, #204D8B);
    transition: width .4s ease, background-color .4s ease;
}

.plano-andamento-progresso-texto {
    font-size: .8rem;
    color: #495057;
    white-space: nowrap;
}

.plano-andamento-rodape {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: .8rem;
    color: #6c757d;
}

.plano-andamento-decorrido {
    color: #adb5bd;
}

/* --- Botões do card ---
   A família btn-portal de trackingaereo.css, replicada pela mesma razão do page-hero no topo deste
   arquivo. Primário em azul da casa, com o laranja só no hover, como lá. */

.btn-portal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.18s ease;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-portal i {
    font-size: 0.92rem;
    flex-shrink: 0;
}

.btn-portal:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(1, 52, 95, 0.18);
}

.btn-portal:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* Desligado tem de parecer desligado — a mesma regra do detalhe (planoscotasdetalhe.css). */
.btn-portal:disabled,
.btn-portal[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

.btn-portal-primary {
    background-color: #204D8B;
    border-color: #204D8B;
    color: #fff;
}

.btn-portal-primary:hover {
    background-color: var(--secondary-color, #f05c29);
    border-color: var(--secondary-color, #f05c29);
    color: #fff;
}

.btn-outline-portal-danger {
    background-color: transparent;
    border-color: #dc3545;
    color: #dc3545;
}

.btn-outline-portal-danger:hover { background-color: #dc3545; border-color: #dc3545; color: #fff; }
.btn-outline-portal-danger:focus { box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18); }

/* --- Faixa de números --- */

.plano-stat-referencia {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6c757d;
    margin-bottom: .5rem;
}

/* --- Filtros da toolbar --- */

/* A toolbar do dxDataGrid fixa a altura do CONTEÚDO em 36px
   (.dx-toolbar .dx-toolbar-items-container, dx.light.css) e a .dx-toolbar tem overflow: visible. Com o
   bloco de filtros em duas linhas — rótulo acima do campo —, o excedente não é cortado: ele VAZA por
   cima do cabeçalho do grid, que é o defeito relatado.

   Liberar a altura é o mesmo conserto que o próprio DevExtreme aplica no dx-gantt
   (.dx-gantt .dx-toolbar .dx-toolbar-items-container { height: auto; min-height: 36px }).

   Tudo escopado em #dataGridPlanosCotas: as outras telas da casa usam a toolbar de uma linha só e não
   podem herdar isto. */
#dataGridPlanosCotas .dx-toolbar .dx-toolbar-items-container {
    height: auto;
    min-height: 36px;
    /* O respiro vertical vive AQUI, no contêiner, e não no bloco de filtros. Posto só no bloco da
       esquerda, ele aumenta a altura daquele lado e o align-items: flex-end da direita passa a alinhar
       pela caixa maior — foi o que jogou o botão Atualizar abaixo da linha do Limpar. No contêiner, os
       dois lados têm a mesma caixa e a mesma base.

       O afastamento da borda do card vem do pt-5 do card-body (Index.cshtml), e não daqui. */
    padding-top: 8px;
    padding-bottom: 4px;
}

/* Com a altura livre, as faixas passam a ter a altura do item mais alto. Sem alinhar, o botão Atualizar
   encosta no topo enquanto os campos ficam embaixo — que é a segunda metade do desalinhamento. */
#dataGridPlanosCotas .dx-toolbar .dx-toolbar-before,
#dataGridPlanosCotas .dx-toolbar .dx-toolbar-after {
    display: flex;
    align-items: flex-end;
}

.filtros-listagem {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

/* A margem padrão da toolbar do grid é 10px (.dx-datagrid-header-panel .dx-toolbar, dx.light.css), que
   foi dimensionada para uma faixa de uma linha só. Com rótulo acima do campo, a faixa é o dobro e a
   mesma margem parece aperto. */
#dataGridPlanosCotas .dx-datagrid-header-panel .dx-toolbar {
    margin-bottom: 14px;
}

.filtros-listagem-campo {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filtros-listagem-campo label {
    margin: 0;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6c757d;
}

.filtros-listagem-campo--botao {
    justify-content: flex-end;
}

/* --- Grid --- */

.plano-numero {
    font-weight: 600;
    color: #204D8B;
}

.plano-falhos {
    color: #c0392b;
    font-weight: 600;
}

.celula-vazia {
    color: #adb5bd;
}

/* Visibilidade por estado da tela, separada do d-none que o permissao() de core.js administra. */
.acao-indisponivel {
    display: none !important;
}