/* =============================================================================================
   Inicialização de saldos de férias (VB6 init_ferias.frm) — filter bar, actions, the editable grid in its own
   scroll area (fixed header, white rows, ticked rows in light blue), import preview / column linking, rules.
   ============================================================================================= */
.ferias {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

    .ferias .barra-filtros,
    .ferias .cabecalho-pagina {
        margin-bottom: 0;
    }

    .ferias .painel {
        padding: .8rem 1rem .9rem;
        background: rgba(255, 255, 255, 0.96);
        border-color: var(--cr-line);
    }

/* Segments as links (the ChronosWeb ones are buttons). */
.segmentado a {
    border-radius: 7px;
    padding: .22rem .7rem;
    color: var(--cr-text-2);
    font-size: .86rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

    .segmentado a:hover:not(.ativo) {
        color: var(--cr-text);
        background: var(--barra-hover);
    }

    .segmentado a.ativo {
        background: var(--barra-ativo-fundo);
        color: var(--barra-destaque);
        font-weight: 600;
        box-shadow: var(--barra-ativo-sombra), inset 0 0 0 1px var(--barra-ativo-borda);
    }

.ferias-unidade {
    width: auto;
    min-width: 16rem;
}

.ferias-procura {
    width: 15rem;
}

/* ---- Actions ---- */
.ferias-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem .5rem;
    margin-bottom: .65rem;
}

.ferias-acoes .espaco {
    flex: 1 1 0;
}

/* "Corrigir escalas": a tick box inside a button frame; ticked, it fills like a pressed button. */
.ferias-corrigir {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    cursor: pointer;
}

    .ferias-corrigir .form-check-input {
        float: none;
        margin: 0;
        cursor: pointer;
    }

    .ferias-corrigir:has(input:checked) {
        background: rgba(42, 91, 234, 0.12);
        color: var(--cr-blue-600);
        border-color: var(--cr-blue-600);
    }

.ferias-importar {
    margin: 0;
    cursor: pointer;
}

/* ---- Grid ---- */
.tabela-ferias .num {
    text-align: right;
}

.tabela-ferias th.num {
    text-align: right;
}

.tabela-ferias .col-marca {
    width: 2.6rem;
}

    .tabela-ferias .col-marca .form-check-input {
        float: none;
        margin: 0;
    }

.tabela-ferias .col-num {
    width: 4.5rem;
}

.tabela-ferias td {
    padding: .25rem .6rem;
}

.tabela-ferias .col-nome {
    white-space: normal;
}

.tabela-ferias .col-editavel {
    width: 6.2rem;
}

    .tabela-ferias .col-editavel .form-control {
        width: 5.4rem;
        margin-left: auto;
        padding: .1rem .4rem;
        min-height: 1.75rem;
        text-align: right;
        font-size: .88rem;
    }

.tabela-ferias .col-init,
.tabela-ferias .col-saldo {
    font-weight: 700;
    color: var(--cr-ink-900);
}

.tabela-ferias .col-faltas {
    color: var(--cr-text-2);
    font-size: .84rem;
}

/* All rows white (as the other tables); ticked rows in light blue; no balance yet in grey text; the row under the
   mouse in a strong blue so you know which one you are working on. */
.tabela-ferias tbody tr:nth-child(even) td {
    background: #fff;
}

.tabela-ferias tbody tr.marcada:nth-child(n) td {
    background: #e2ebff;
}

.tabela-ferias tbody tr.sem-saldo td.col-nome {
    color: var(--cr-text-3);
}

.tabela-ferias tbody tr.alterada td:first-child {
    box-shadow: inset 3px 0 0 var(--cr-warning);
}

.tabela-ferias tbody tr:hover:nth-child(n) td {
    background: #c3d6ff;
}

/* Bottom line: the note on the left, Guardar on the right, apart from the table above. */
.ferias-rodape {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: .9rem;
    padding-top: .7rem;
    border-top: 1px solid var(--cr-line);
}

.nota-ferias {
    flex: 1;
    margin: 0;
    font-size: .84rem;
    color: var(--cr-text-2);
}

.ferias-rodape .btn {
    flex: none;
}

/* ---- Import ---- */
.ferias-previa-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: .6rem;
}

    .ferias-previa-topo .espaco {
        flex: 1;
    }

.ferias-previa-resumo {
    font-size: .88rem;
    color: var(--cr-text-2);
}

.tabela-ferias-previa .num {
    text-align: right;
}

.tabela-ferias-previa tr.ignorada td {
    color: var(--cr-text-3);
}

.previa-estado {
    font-size: .82rem;
    color: var(--cr-warning);
}

.ferias-mapa-campos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .6rem 1rem;
    margin-bottom: .8rem;
}

    .ferias-mapa-campos .campo {
        display: flex;
        flex-direction: column;
        gap: .2rem;
    }

    .ferias-mapa-campos .campo-rotulo {
        font-size: .78rem;
        font-weight: 600;
        color: var(--cr-text-2);
    }

.ferias-mapa-botoes {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

/* ---- Rules ---- */
.ferias-regras > summary {
    cursor: pointer;
    margin-bottom: 0;
}

.ferias-regras[open] > summary {
    margin-bottom: .8rem;
}

.ferias-regras-grelha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem 1.5rem;
    margin-bottom: .8rem;
}

    .ferias-regras-grelha h3 {
        margin: .2rem 0 .4rem;
        font-size: .9rem;
        font-weight: 700;
        color: var(--cr-ink-900);
    }

.ferias-regras fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.regra {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .35rem;
    font-size: .88rem;
}

    .regra > span:first-child {
        flex: 1;
    }

    .regra .form-control {
        width: 4.5rem;
        text-align: right;
    }

.regras-faltas .lista-compacta {
    max-height: 16rem;
    overflow: auto;
    font-size: .86rem;
}

.marca-ferias {
    margin-left: .3rem;
    padding: 0 .35rem;
    border-radius: 4px;
    background: var(--cr-blue-100);
    color: var(--cr-blue-600);
    font-family: var(--cr-font-mono);
    font-size: .72rem;
    font-weight: 700;
}

@media (min-width: 641px) {
    main > .content > .ferias {
        flex: 1 1 0;
        min-height: 0;
    }

    .ferias > * {
        flex: none;
    }

    .ferias > .ferias-painel {
        flex: 0 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .ferias-painel > * {
        flex: none;
    }

    .ferias-painel > .tabela-rolagem {
        flex: 0 1 auto;
        min-height: 0;
        overflow: auto;
    }

    .ferias-previa .tabela-rolagem {
        max-height: 50vh;
        overflow: auto;
    }
}