/* ═══════════════════════════════════════════════════════════════
   Tracker Equipe de Sala — ECC
   Complementa o Bootstrap 5.3; nada aqui redefine componente dele.

   A tela pequena é o caso principal: a equipe usa isso em pé, na
   sacristia, com o celular na mão. Por isso a tabela de atividades
   vira um cartão por atividade abaixo de 992px e a navegação desce
   para uma barra fixa no rodapé, ao alcance do polegar.

   O tema escuro é o do próprio Bootstrap (data-bs-theme), então toda
   cor fixada aqui precisa do seu par em [data-bs-theme="dark"].
   ═══════════════════════════════════════════════════════════════ */

:root {
    --ecc-primary: #1f5f4b;   /* verde da identidade do tracker */
    --ecc-accent:  #c9962b;   /* dourado, usado só em detalhe    */
    --ecc-nav-h:   62px;      /* altura da barra de rodapé do celular */
}

body { background-color: #f7f8f7; }
[data-bs-theme="dark"] body { background-color: #1c1f1e; }

/* Evitar que o iOS aumente a fonte ao girar o aparelho. */
html { -webkit-text-size-adjust: 100%; }

/* ─── Cabeçalho ────────────────────────────────────────────── */
.cabecalho {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: 1.25rem;
}
.cabecalho-marca {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    min-width: 0;
}
.logo-topo { height: 46px; width: auto; max-width: 100%; }
.logo-login { height: 48px; width: auto; max-width: 100%; }

.countdown-badge {
    font-size: .82rem;
    padding: .45em .8em;
    letter-spacing: .01em;
    white-space: normal;
    text-align: left;
}

.btn-theme-flutuante { position: fixed; top: 1rem; right: 1rem; z-index: 5; }

.tela-login { max-width: 400px; margin: 3rem auto; }

/* ─── Barra de navegação fixa do celular ───────────────────── */
.nav-rodape {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1030;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    height: var(--ecc-nav-h);
    background-color: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -2px 10px rgba(0,0,0,.06);
    /* Respeita a faixa do gesto de home no iPhone. */
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-rodape a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--bs-secondary-color);
    font-size: .7rem;
    line-height: 1;
    padding: .35rem .2rem;
    border-top: 3px solid transparent;
}
.nav-rodape a i { font-size: 1.25rem; }
.nav-rodape a.ativo {
    color: var(--bs-primary);
    border-top-color: var(--bs-primary);
    font-weight: 600;
}

/* A barra fixa cobriria o fim da página; este respiro devolve o espaço. */
@media (max-width: 991.98px) {
    body { padding-bottom: calc(var(--ecc-nav-h) + env(safe-area-inset-bottom, 0px) + .5rem); }
}

/* ─── Cartões de número do dashboard ───────────────────────── */
.card-stat { transition: transform .12s ease, box-shadow .12s ease; }
.card-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 .4rem .9rem rgba(0,0,0,.10);
}

/* ─── Badges de prioridade ─────────────────────────────────── */
.badge-urgente    { background-color: #dc3545; color: #fff; }
.badge-muito_alta { background-color: #fd7e14; color: #fff; }
.badge-alta       { background-color: #ffc107; color: #212529; }
.badge-media      { background-color: #0dcaf0; color: #212529; }
.badge-baixa      { background-color: #6c757d; color: #fff; }

/* ─── Badges de status ─────────────────────────────────────── */
.badge-a_fazer      { background-color: #6c757d; color: #fff; }
.badge-em_andamento { background-color: #0d6efd; color: #fff; }
.badge-concluido    { background-color: #198754; color: #fff; }

/* ─── Situação de prazo ────────────────────────────────────────
   Faixa colorida à esquerda em vez de fundo inteiro: o fundo competiria
   com o realce de "alterações não salvas", que é amarelo e precisa
   continuar visível por cima de qualquer estado de prazo.              */
tr.prazo-atrasada > td:first-child { box-shadow: inset 4px 0 0 #dc3545; }
tr.prazo-hoje     > td:first-child { box-shadow: inset 4px 0 0 #fd7e14; }
tr.prazo-proxima  > td:first-child { box-shadow: inset 4px 0 0 #ffc107; }
tr.prazo-sem_data > td:first-child { box-shadow: inset 4px 0 0 #adb5bd; }

tr.prazo-atrasada:not(.concluido) > td { background-color: #fff5f5; }
[data-bs-theme="dark"] tr.prazo-atrasada:not(.concluido) > td { background-color: #2e1f21; }

/* ─── Linha com alterações não salvas ──────────────────────── */
tr.has-changes {
    outline: 2px solid #ffc107;
    outline-offset: -2px;
    background-color: #fffdf0 !important;
}
[data-bs-theme="dark"] tr.has-changes { background-color: #3a3200 !important; }

tr.has-changes .task-save { animation: pulse-save 1.2s ease-in-out infinite; }
@keyframes pulse-save {
    0%, 100% { opacity: 1; }
    50%      { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
    tr.has-changes .task-save { animation: none; }
    .card-stat { transition: none; }
}

/* ─── Subtarefas (etapas) ──────────────────────────────────── */
tr.subtask-row > td { background-color: #eceeef; }
[data-bs-theme="dark"] tr.subtask-row > td { background-color: #26292b; }

/* ─── Linha concluída ──────────────────────────────────────── */
tr.concluido > td { opacity: .55; }
tr.concluido .task-title { text-decoration: line-through; }

/* ─── Campos inline da tabela ──────────────────────────────── */
.task-progress    { width: 72px; }
.task-status      { min-width: 132px; }
.task-responsible { min-width: 118px; }

/* ─── Campo de notas (contenteditable) ─────────────────────── */
.task-notes {
    font-size: .8em;
    font-family: inherit;
    line-height: 1.5;
    min-height: 38px;
    max-height: 220px;
    overflow: auto;
    cursor: text;
    white-space: pre-wrap;
}
.task-notes:empty::before {
    content: attr(data-placeholder);
    color: #adb5bd;
}
[data-bs-theme="dark"] .task-notes {
    background-color: #2b3035;
    color: #dee2e6;
    border-color: #495057;
}
.task-notes table {
    border-collapse: collapse;
    width: 100%;
    margin: 4px 0;
    font-size: inherit;
}
.task-notes table td,
.task-notes table th {
    border: 1px solid #dee2e6;
    padding: 3px 6px;
    vertical-align: top;
}
.task-notes table th { background-color: #f1f3f5; font-weight: 600; }
[data-bs-theme="dark"] .task-notes table td,
[data-bs-theme="dark"] .task-notes table th { border-color: #495057; }
[data-bs-theme="dark"] .task-notes table th { background-color: #343a40; }

/* ─── Aviso de expiração de sessão ─────────────────────────── */
.session-warning {
    position: fixed;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #664d03;
    padding: .6rem 1.2rem;
    border-radius: .5rem;
    font-size: .9rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    z-index: 1040;
    white-space: nowrap;
}
[data-bs-theme="dark"] .session-warning {
    background-color: #3a2e00;
    border-color: #ffc107;
    color: #ffe083;
}
@media (max-width: 991.98px) {
    /* Acima da barra de navegação, e sem estourar a largura da tela. */
    .session-warning {
        bottom: calc(var(--ecc-nav-h) + env(safe-area-inset-bottom, 0px) + .5rem);
        left: .5rem; right: .5rem;
        transform: none;
        white-space: normal;
        text-align: center;
    }
}

/* No desktop o "#" tem coluna própria; o id repetido no título só serve ao
   cartão do celular, então nasce escondido e a media query o revela. */
.id-no-cartao { display: none; }

/* ═══════════════════════════════════════════════════════════════
   SELEÇÃO EM LOTE
   ═══════════════════════════════════════════════════════════════ */

.celula-check { text-align: center; }
.celula-check .form-check-input { margin: 0; cursor: pointer; }

/* Linha marcada: realce discreto para não competir com o amarelo de
   "alterações não salvas", que é mais urgente.
   O segundo seletor iguala a especificidade da regra de linha atrasada — que
   também usa !important — e vem depois, então vence. Sem ele o realce sumiria
   justamente nas linhas vermelhas, que são a maior parte de uma triagem. */
tr.linha-marcada > td,
tr.linha-marcada.prazo-atrasada:not(.concluido) > td { background-color: #cfe2ff !important; }

[data-bs-theme="dark"] tr.linha-marcada > td,
[data-bs-theme="dark"] tr.linha-marcada.prazo-atrasada:not(.concluido) > td { background-color: #1b3a5c !important; }

/* Botões que só fazem sentido com o modo de seleção ligado. */
.so-em-selecao { display: none; }
body.modo-selecao .so-em-selecao { display: inline-block; }

.barra-selecao {
    position: fixed;
    bottom: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1045;                    /* acima da nav do rodapé (1030) */
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: min(560px, calc(100vw - 1.5rem));
    padding: .55rem .9rem;
    border-radius: .6rem;
    background-color: #212529;
    color: #f8f9fa;
    box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.3);
    font-size: .9rem;
}
[data-bs-theme="dark"] .barra-selecao {
    background-color: #343a40;
    border: 1px solid #495057;
}
.barra-selecao.d-none { display: none !important; }

/* ─── Nota dentro do relatório ─────────────────────────────── */
.report-note {
    color: #6c757d;
    border-left: 2px solid #dee2e6;
    padding-left: .4rem;
    margin-top: .2rem;
}

/* ═══════════════════════════════════════════════════════════════
   TABELA QUE VIRA CARTÃO  (.tabela-cartoes)
   ───────────────────────────────────────────────────────────────
   Abaixo de 992px cada <tr> vira um cartão e cada <td> uma linha
   "rótulo: valor". O rótulo sai do atributo data-rotulo do próprio
   <td>, então a marcação é UMA só: não há versão mobile duplicada
   para sair de sincronia com a de desktop.

   Células sem data-rotulo (título, notas, ações) ocupam a largura
   inteira do cartão, sem rótulo à esquerda.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    .tabela-cartoes thead { display: none; }

    .tabela-cartoes,
    .tabela-cartoes tbody,
    .tabela-cartoes td {
        display: block;
        width: 100%;
    }
    /* O <tr> fica com width:auto, não 100%: o cartão da etapa tem margem à
       esquerda, e 100% + margem somam mais que a tela — o que produzia uma
       rolagem horizontal fantasma na página inteira. Bloco sem largura fixa
       já ocupa o espaço restante e respeita a margem. */
    .tabela-cartoes tr {
        display: block;
        width: auto;
    }

    /* O wrapper do Bootstrap não precisa mais rolar na horizontal.
       Classe explícita no wrapper em vez de :has(), que ainda falha em
       navegadores mais antigos e deixaria a rolagem fantasma. */
    .tabela-cartoes-wrap { overflow-x: visible; }

    .tabela-cartoes { border: 0; }

    .tabela-cartoes > tbody > tr {
        border: 1px solid var(--bs-border-color);
        border-radius: .6rem;
        margin-bottom: .85rem;
        padding: .7rem .85rem .55rem;
        background-color: var(--bs-body-bg);
        box-shadow: 0 1px 2px rgba(0,0,0,.05);
    }

    .tabela-cartoes > tbody > tr > td {
        border: 0 !important;
        padding: .3rem 0;
        display: flex;
        align-items: center;
        gap: .6rem;
        min-height: 0;
    }

    .tabela-cartoes > tbody > tr > td[data-rotulo]::before {
        content: attr(data-rotulo);
        flex: 0 0 8.5rem;
        font-size: .7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--bs-secondary-color);
    }

    /* Só campo de formulário estica para ocupar a linha. Um badge ou um texto
       curto esticado viraria uma faixa colorida de ponta a ponta, que lê como
       barra de progresso e não como etiqueta. */
    .tabela-cartoes > tbody > tr > td[data-rotulo] > .form-control,
    .tabela-cartoes > tbody > tr > td[data-rotulo] > .form-select {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* O alinhamento à direita das colunas numéricas só faz sentido em tabela;
       no cartão o valor tem de encostar no rótulo. */
    .tabela-cartoes > tbody > tr > td { text-align: left !important; }

    /* Células de largura inteira, sem rótulo */
    .celula-titulo,
    .celula-notas,
    .celula-acoes { display: block !important; }

    .celula-titulo {
        padding-bottom: .45rem !important;
        margin-bottom: .3rem;
        border-bottom: 1px solid var(--bs-border-color) !important;
        font-size: 1rem;
    }
    .celula-titulo .task-title { font-size: 1rem; }

    .celula-notas .task-notes { max-height: 160px; }
    .celula-notas::before { display: none; }

    .celula-acoes {
        padding-top: .55rem !important;
        margin-top: .35rem;
        border-top: 1px solid var(--bs-border-color) !important;
        display: flex !important;
        flex-wrap: wrap;
        gap: .4rem;
        align-items: center;
    }
    /* Alvos de toque maiores: 38px é o mínimo confortável para o polegar. */
    .celula-acoes .btn,
    .celula-anexos .btn { min-width: 44px; min-height: 38px; }
    .celula-acoes .task-save { flex: 1 1 auto; }

    /* O "#" da tabela some: o id já aparece junto do título no cartão. */
    .celula-id { display: none !important; }
    .id-no-cartao { display: inline; }

    /* A caixa de seleção vai para o canto superior direito do cartão, e só
       aparece com o modo de seleção ligado — no uso normal ela roubaria
       espaço da linha do título sem servir para nada. */
    .tabela-cartoes > tbody > tr { position: relative; }
    .celula-check { display: none !important; }
    body.modo-selecao .tabela-cartoes .celula-check {
        display: block !important;
        position: absolute;
        top: .55rem;
        right: .6rem;
        width: auto;
        padding: 0;
        z-index: 2;
    }
    /* Alvo de toque decente: a caixa nativa de 1rem é pequena para o polegar. */
    body.modo-selecao .celula-check .form-check-input { width: 1.5rem; height: 1.5rem; }
    /* Espaço para a caixa não encostar no título. */
    body.modo-selecao .tabela-cartoes .celula-titulo { padding-right: 2.4rem !important; }

    /* Acima da navegação do rodapé, e ocupando a largura da tela. */
    .barra-selecao {
        bottom: calc(var(--ecc-nav-h) + env(safe-area-inset-bottom, 0px) + .5rem);
        left: .5rem;
        right: .5rem;
        transform: none;
        min-width: 0;
        flex-wrap: wrap;
    }

    /* A faixa de prazo passa do primeiro td para a borda do cartão. */
    .tabela-cartoes > tbody > tr > td:first-child { box-shadow: none !important; }
    .tabela-cartoes > tbody > tr.prazo-atrasada { border-left: 4px solid #dc3545; }
    .tabela-cartoes > tbody > tr.prazo-hoje     { border-left: 4px solid #fd7e14; }
    .tabela-cartoes > tbody > tr.prazo-proxima  { border-left: 4px solid #ffc107; }
    .tabela-cartoes > tbody > tr.prazo-sem_data { border-left: 4px solid #adb5bd; }

    /* A etapa fica recuada e mais discreta que a atividade-mãe. */
    .tabela-cartoes > tbody > tr.subtask-row {
        margin-left: 1.1rem;
        background-color: var(--bs-tertiary-bg);
    }
    .tabela-cartoes > tbody > tr.subtask-row > td { background-color: transparent; }

    .tabela-cartoes > tbody > tr.concluido > td { opacity: .6; }

    /* Campos de formulário no cartão ocupam a linha e não encolhem. */
    .tabela-cartoes .task-progress,
    .tabela-cartoes .task-status,
    .tabela-cartoes .task-responsible { width: 100%; min-width: 0; }

    /* 16px evita o zoom automático do Safari ao focar um campo. */
    .tabela-cartoes .form-control,
    .tabela-cartoes .form-select { font-size: 16px; }
}

/* ─── Filtros recolhíveis no celular ───────────────────────── */
.filtros-toggle { width: 100%; }
@media (min-width: 992px) {
    /* No desktop os filtros estão sempre abertos; o botão não existe.
       flex e não block: o formulário é um .row do Bootstrap, e display:block
       desmontaria a grade das colunas. */
    .filtros-toggle { display: none; }
    .filtros-colapso {
        display: flex !important;
        height: auto !important;
        visibility: visible !important;
    }
}

/* ─── Ajustes gerais de tela pequena ───────────────────────── */
@media (max-width: 575.98px) {
    .logo-topo { height: 38px; }
    .cabecalho { margin-bottom: .9rem; }
    .container, .container-fluid { padding-left: .75rem; padding-right: .75rem; }
    h1.h4 { font-size: 1.15rem; }
    .card-body { padding: .9rem; }
    .tela-login { margin: 1.5rem auto; }
    /* Campos maiores que 16px evitam o zoom do Safari ao focar. */
    .form-control, .form-select { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   Impressão — o relatório de pendências é feito para sair no papel
   ou virar PDF. Some tudo que é controle de tela, o tema volta ao
   claro (fundo escuro consome tinta e sai ilegível) e cada frente
   de trabalho evita quebrar no meio.
   ═══════════════════════════════════════════════════════════════ */
@media print {
    .no-print,
    .nav-rodape,
    .barra-selecao,
    .celula-check,
    .cabecalho,
    .btn,
    .alert-dismissible .btn-close { display: none !important; }

    /* Uma linha marcada na tela não deve sair sombreada no papel. */
    tr.linha-marcada > td { background: transparent !important; }

    body,
    [data-bs-theme="dark"] body {
        background: #fff !important;
        color: #000 !important;
        padding-bottom: 0 !important;
    }

    .container, .container-fluid { max-width: 100% !important; width: 100% !important; }

    .card { border: 1px solid #ccc !important; box-shadow: none !important; }

    /* No papel a tabela é sempre tabela, nunca cartão — mesmo que a
       impressão saia de um celular, onde a media query de tela valeria. */
    .tabela-cartoes,
    .tabela-cartoes thead,
    .tabela-cartoes tbody,
    .tabela-cartoes tr,
    .tabela-cartoes td { display: revert !important; }
    .tabela-cartoes thead { display: table-header-group !important; }
    .tabela-cartoes td::before { content: none !important; }
    .celula-id { display: table-cell !important; }
    .id-no-cartao { display: none !important; }

    .report-group { break-inside: avoid; page-break-inside: avoid; }
    table         { break-inside: auto; }
    tr            { break-inside: avoid; page-break-inside: avoid; }
    thead         { display: table-header-group; }

    /* Badges coloridos viram contorno: economiza tinta e continua legível
       em impressora preto-e-branco, onde os fundos viram cinza chapado. */
    .badge {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #666 !important;
        font-weight: 600;
    }

    tr.prazo-atrasada > td:first-child { box-shadow: inset 4px 0 0 #000 !important; }
    tr.prazo-atrasada:not(.concluido) > td { background: #f2f2f2 !important; }

    a { text-decoration: none !important; color: #000 !important; }

    .report-head { border-bottom: 2px solid #000; padding-bottom: .5rem; }
    .report-foot { border-top: 1px solid #ccc; padding-top: .4rem; }

    @page { margin: 1.2cm; }
}