/* =============================================================================================
   Empregados (VB6 emprega_ago.frm) — the whole screen in the window on desktop: the list on the left
   (own scroll), the card on the right (identity strip, tabs, side column with holidays and the
   automatic justification). Each tab is laid out to fit without scrolling; only the list, the
   justification table and, on narrow windows, the yearly roster scroll inside their boxes.
   ============================================================================================= */
.empregados {
    --e-contorno: var(--cr-line-strong);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    font-size: .92rem;
}

.emp-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem 1rem;
}

    .emp-cabecalho .rotulo-modulo {
        margin: 0;
    }

.emp-alerta {
    flex: 1 1 20rem;
    font-size: .88rem;
}

.empregados .painel {
    padding: .8rem .95rem;
    background: #fff;
}

.empregados .painel-titulo {
    margin-bottom: .6rem;
    font-size: .88rem;
}

.empregados .form-control-sm,
.empregados .form-select-sm {
    min-height: 1.85rem;
    padding-top: .16rem;
    padding-bottom: .16rem;
    font-size: .86rem;
    color: var(--cr-text);
    border-color: var(--e-contorno);
}

    .empregados .form-control-sm:disabled,
    .empregados .form-select-sm:disabled,
    .empregados .form-control-sm[readonly] {
        background: #f5f6f8;
        color: var(--cr-text-2);
    }

.empregados .campo {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 0;
    margin: 0;
}

/* Mandatory field: "*" after the label (legend in the card's footer); red border when a save left it empty. */
.obrigatorio {
    margin-left: .2rem;
    color: var(--cr-danger);
    font-weight: 700;
}

.campo.em-falta .form-control,
.campo.em-falta .form-select {
    border-color: var(--cr-danger);
    box-shadow: 0 0 0 2px rgba(200, 40, 60, .15);
}

.emp-legenda-obrigatorio {
    color: var(--cr-text-2);
    font-size: .84rem;
}

.empregados .campo-rotulo {
    font-family: var(--cr-font);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cr-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campo-escondido .form-control {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: #f5f6f8;
    color: var(--cr-text-3);
}

.distintivo-perigo { background: rgba(196, 43, 59, 0.12); color: var(--cr-danger); }

.emp-nota {
    margin: .35rem 0 0;
    font-size: .8rem;
    color: var(--cr-text-2);
}

/* ---- Two columns: list | card ---- */
.emp-grelha {
    display: grid;
    grid-template-columns: 21rem minmax(0, 1fr);
    gap: .6rem;
    min-height: 0;
}

/* ---- List of the unit ---- */
.emp-lista {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-height: 0;
}

.emp-lista-filtros {
    display: flex;
    gap: .3rem;
}

.emp-filtro {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex: 1;
    justify-content: center;
    padding: .3rem .5rem;
    border: 1px solid var(--cr-line-strong);
    border-radius: 6px;
    background: #fff;
    color: var(--cr-text-2);
    font-size: .84rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

    .emp-filtro .icone {
        width: .9rem;
        height: .9rem;
    }

    .emp-filtro:hover {
        background: var(--cr-surface-2);
        color: var(--cr-text);
    }

    .emp-filtro.ativo {
        background: var(--cr-blue-100);
        border-color: #b3c6ec;
        color: var(--cr-blue-600);
    }

.emp-lista-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    font-size: .84rem;
    color: var(--cr-text-2);
}

.emp-lista-nomes {
    flex: 1 1 auto;
    min-height: 8rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0 -.3rem;
    padding: 0 .3rem;
}

.emp-lista-grupo {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .5rem .4rem .2rem;
    background: #fff;
    color: var(--cr-text-3);
    font-size: .78rem;
    font-weight: 600;
}

/* Number column as wide as the longest number of the list (--num-digitos, set on the list; 5 at least), the same in
   every row, so the names line up and get the room. */
.emp-lista-opcao {
    display: grid;
    grid-template-columns: calc(var(--num-digitos, 5) * .52rem + .3rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: .4rem;
    padding: .3rem .45rem .3rem .3rem;
    border-radius: 5px;
    color: var(--cr-text);
    text-decoration: none;
    font-size: .9rem;
}

    .emp-lista-opcao .mono {
        color: var(--cr-text-3);
        font-size: .82rem;
        text-align: right;
    }

    .emp-lista-opcao:hover {
        background: var(--cr-hover);
    }

    .emp-lista-opcao.ativa {
        background: var(--cr-blue-100);
        color: var(--cr-blue-600);
        font-weight: 500;
    }

        .emp-lista-opcao.ativa .mono {
            color: var(--cr-blue-600);
        }

    .emp-lista-opcao.demitido .emp-lista-nome,
    .emp-lista-opcao.transferido .emp-lista-nome {
        color: var(--cr-text-3);
    }

/* Employees: the short name (Nome abreviado); the full name stays in the tooltip and in the search. */
.emp-lista-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .86rem;
}

.emp-marca {
    padding: 0 .3rem;
    border-radius: 4px;
    background: rgba(196, 43, 59, 0.1);
    color: var(--cr-danger);
    font-size: .68rem;
    font-weight: 700;
}

.emp-lista-opcao.transferido .emp-marca {
    background: rgba(184, 110, 0, 0.12);
    color: var(--cr-warning);
}

.emp-novo {
    display: flex;
    gap: .3rem;
    padding-top: .4rem;
    border-top: 1px solid var(--cr-line);
}

    .emp-novo input {
        width: 6.5rem;
    }

    .emp-novo .btn {
        flex: 1;
    }

/* ---- The card ---- */
.emp-ficha {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 0;
    min-height: 0;
}

/* Top of the employee card (identity, options, Mais), over the tabs — also over a tab's own criteria bar (app.css gives
   .barra-filtros z-index 5: with the same 5 the bar of "Picagens no mapa" covered the "Mais opções" list). */
.emp-topo {
    position: relative;
    z-index: 30;
    margin-bottom: .7rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--cr-line);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* The photo's top level with the titles of the first row of fields (user's request 2026-10-20). */
    align-items: start;
    gap: .5rem 1rem;
}

/* Portrait, as the user photo of the ZKTeco face terminals (V3L, SenseFace 4B, iFace400: 480×640, 3:4), a little
   shorter at 4:5 (user's requests 2026-10-16). The photo fills the frame (cover), losing a little of its top and bottom
   or, an older square one (300×300), of its sides — never the face. */
.emp-foto {
    position: relative;
    display: grid;
    place-items: center;
    width: 5.4rem;
    aspect-ratio: 4 / 5;
    border-radius: 8px;
    overflow: hidden;
    background: var(--cr-blue-100);
    box-shadow: inset 0 0 0 1px #d6e1fc;
    color: var(--cr-blue-600);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

    .emp-foto img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 30%;
    }

/* Number | Nome | Nome abreviado on the first row; the badges and options below start where Nome starts. */
.emp-identidade {
    display: grid;
    grid-template-columns: 3.6rem minmax(14rem, 1fr) minmax(11rem, 17rem) max-content max-content;
    align-items: end;
    gap: .35rem .6rem;
    min-width: 0;
}

.emp-linha-1 {
    display: contents;
}

.emp-numero {
    padding-bottom: .35rem;
    color: var(--cr-text-3);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-align: right;   /* a fixed column (Nome keeps one width for every employee); the number against the left edge of Nome */
}

/* The names lead the card. */
.empregados .emp-nome .form-control,
.empregados .emp-nome-curto .form-control {
    font-size: .95rem;
    font-weight: 500;
    color: var(--cr-strong);
}

.emp-linha-2 {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .9rem;
    min-height: 1.4rem;
}

.emp-opcao {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--cr-text);
    font-size: .82rem;
    cursor: pointer;
    white-space: nowrap;
}

    .emp-opcao .form-check-input {
        width: 1rem;
        height: 1rem;
        margin: 0;
    }

/* Overtime of the year: a read-only field like Nome (title above, value below). */
/* Overtime: just as wide as its title. */
.empregados .campo.emp-extras {
    min-width: max-content;
}

    .empregados .emp-extras .campo-rotulo {
        overflow: visible;
    }

.emp-extras-valor {
    min-width: 0;
    background: var(--cr-surface-2);
    color: var(--cr-strong);
    font-weight: 600;
    text-align: right;
}

.emp-acoes {
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .35rem;
}

.emp-navegar {
    display: inline-flex;
    gap: 2px;
}

    .emp-navegar .btn {
        padding: .28rem .45rem;
        line-height: 1;
    }

        .emp-navegar .btn .icone {
            width: 1rem;
            height: 1rem;
        }

    .emp-navegar .btn[aria-disabled="true"] {
        opacity: .35;
        pointer-events: none;
    }

.emp-mais {
    position: relative;
}

    /* The card's actions in the app's blue, as wide as its text (user's request 2026-10-20). */
    .emp-mais > summary {
        list-style: none;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: .4rem;
    }

        .emp-mais > summary::-webkit-details-marker {
            display: none;
        }

.emp-mais-lista {
    position: absolute;
    right: 0;
    top: calc(100% + .3rem);
    z-index: 60;
    display: flex;
    flex-direction: column;
    min-width: 15rem;
    padding: .3rem;
    background: var(--cr-surface-solid);
    border: 1px solid var(--cr-line);
    border-radius: 8px;
    box-shadow: var(--cr-shadow-lg);
}

.emp-mais-opcao {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .6rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--cr-text);
    font-size: .86rem;
    text-align: left;
    text-decoration: none;
}

    .emp-mais-opcao:hover {
        background: var(--cr-hover);
    }

    .emp-mais-opcao.sem-acesso {
        color: rgba(16, 36, 69, 0.42);
        cursor: not-allowed;
    }

        .emp-mais-opcao.sem-acesso:hover {
            background: none;
        }

    .emp-mais-opcao .icone {
        width: .85rem;
        height: .85rem;
        flex: none;
    }

/* ---- Body: tabs | side column ---- */
.emp-corpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: .6rem;
    min-height: 0;
}

.emp-abas {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.emp-aba-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Fixed footer of the card: Suprimir on the left, the "unsaved" notice and Guardar on the right. */
.emp-rodape {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .7rem -.95rem -.8rem;
    padding: .6rem .95rem;
    border-top: 1px solid var(--cr-line);
    border-radius: 0 0 var(--cr-radius) var(--cr-radius);
    background: #fafbfc;
}

    .emp-rodape .espaco {
        flex: 1;
    }

.emp-por-guardar {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #7a4a00;
    font-size: .84rem;
    font-weight: 600;
}

    .emp-por-guardar[hidden] {
        display: none;
    }

    .emp-por-guardar .icone {
        width: .95rem;
        height: .95rem;
    }

.emp-abas-titulos {
    display: flex;
    gap: .25rem;
    margin: -.2rem 0 .75rem;
    border-bottom: 1px solid var(--cr-line-strong);
}

/* Folder tabs (user's request 2026-10-20): each one outlined on a faint grey, the chosen one white, joined to the
   card below, with a blued-steel edge on top. */
.emp-aba-titulo {
    margin-bottom: -1px;
    padding: .4rem .9rem;
    border: 1px solid var(--cr-line-strong);
    border-bottom-color: transparent;
    border-radius: 6px 6px 0 0;
    background: var(--cr-surface-2);
    color: var(--cr-text-2);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

    .emp-aba-titulo:hover {
        color: var(--cr-text);
        background: var(--cr-hover);
    }

    .emp-aba-titulo.inativa {
        color: #848d9b;
        cursor: not-allowed;
    }

        .emp-aba-titulo.inativa:hover {
            background: var(--cr-surface-2);
        }

.emp-aba {
    display: none;
    min-height: 0;
}

/* The checked radio shows its panel and lights its title (no script: works before chronos.js). */
#aba-gerais:checked ~ .emp-aba-gerais,
#aba-pessoais:checked ~ .emp-aba-pessoais,
#aba-producao:checked ~ .emp-aba-producao,
#aba-formacao:checked ~ .emp-aba-formacao {
    display: grid;
}

#aba-escala:checked ~ .emp-aba-escala,
#aba-picagens:checked ~ .emp-aba-picagens {
    display: flex;
}

#aba-gerais:checked ~ .emp-abas-titulos label[for="aba-gerais"],
#aba-pessoais:checked ~ .emp-abas-titulos label[for="aba-pessoais"],
#aba-producao:checked ~ .emp-abas-titulos label[for="aba-producao"],
#aba-escala:checked ~ .emp-abas-titulos label[for="aba-escala"],
#aba-formacao:checked ~ .emp-abas-titulos label[for="aba-formacao"],
#aba-picagens:checked ~ .emp-abas-titulos label[for="aba-picagens"] {
    color: var(--cr-blue-600);
    border-top: 2px solid var(--cr-blue-600);
    border-bottom-color: #fff;
    background: #fff;
    padding-top: calc(.4rem - 1px);
    font-weight: 600;
}

.emp-aba-radio:focus-visible ~ .emp-abas-titulos {
    outline: 2px solid rgba(29, 79, 184, 0.4);
    outline-offset: 2px;
}

.emp-aba-gerais,
.emp-aba-pessoais {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    align-items: stretch;
}

.emp-aba-producao {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    align-items: stretch;
}

.emp-bloco {
    display: flex;
    flex-direction: column;
    gap: .42rem;
    min-width: 0;
    margin: 0;
    padding: .1rem .9rem .2rem;
    border: 0;
    border-left: 1px solid var(--cr-line);
    border-radius: 0;
    background: none;
}

    .emp-bloco:first-of-type {
        padding-left: 0;
        border-left: 0;
    }

    .emp-bloco > legend {
        float: left;
        width: 100%;
        margin: 0 0 .25rem;
        padding: 0;
        color: var(--cr-text);
        font-size: .9rem;
        font-weight: 600;
        letter-spacing: -.005em;
    }

.emp-pares {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem .5rem;
}

.emp-plano-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8.6rem auto;
    gap: .3rem;
}

.emp-vinculo {
    align-self: flex-start;
}

    .emp-vinculo label {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .18rem .65rem;
        border-radius: 7px;
        font-size: .84rem;
        cursor: pointer;
    }

        .emp-vinculo label:has(input:checked) {
            background: #fff;
            color: var(--cr-text);
            font-weight: 500;
            box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), inset 0 0 0 1px var(--cr-line-strong);
        }

    .emp-vinculo input {
        position: absolute;
        opacity: 0;
    }

.emp-turno-valores {
    display: grid;
    grid-template-columns: 3.6rem auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .25rem;
    color: var(--cr-text-2);
    font-size: .8rem;
}

/* Months with fixed shift allowance (VB6 fgt): twelve small toggles. */
.emp-meses-titulo {
    margin-top: .35rem;
    color: var(--cr-text);
    font-size: .84rem;
    font-weight: 600;
}

.emp-meses {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    margin-top: .2rem;
}


    .emp-meses label {
        position: relative;
        cursor: pointer;
    }

    .emp-meses input {
        position: absolute;
        opacity: 0;
    }

    .emp-meses span {
        display: block;
        padding: .32rem 0;
        border: 1px solid var(--cr-line-strong);
        border-radius: 6px;
        background: #fff;
        color: var(--cr-text);
        font-size: .86rem;
        font-weight: 500;
        text-align: center;
    }

    .emp-meses label:hover span {
        border-color: #aab2bd;
        background: var(--cr-surface-2);
    }

    .emp-meses input:checked + span {
        background: var(--cr-blue-600);
        border-color: #173f94;
        color: #fff;
        font-weight: 600;
    }

        .emp-meses input:checked + span::before {
            content: "✓ ";
        }

    .emp-meses input:focus-visible + span {
        box-shadow: var(--cr-glow);
    }

    .emp-meses input:disabled + span {
        opacity: .6;
        cursor: not-allowed;
    }

    /* The current month: bolder, a blue line along its foot (a frame is the focus ring's). */
    .emp-meses .mes-atual span {
        font-weight: 600;
        box-shadow: inset 0 -2px 0 var(--cr-blue-600);
    }

.emp-morada {
    min-height: 4.2rem;
    resize: vertical;
}

/* ---- Yearly roster (VB6 fg2 / fg3) ---- */
/* The roster tab fits its room: the table takes what the bar and the legend leave and its rows share that height,
   so the table itself never scrolls (rows only shrink to a minimum on very small windows). */
.emp-aba-escala {
    flex-direction: column;
    gap: .45rem;
    min-height: 0;
}

    /* At least the 12 months at a readable height; on a window too short for that the tab scrolls, never the table. */
    .emp-aba-escala > .emp-escala-rolagem {
        flex: 1 1 0;
        min-height: 15rem;
        overflow: hidden auto;   /* a window too short for the 12 months: the grid scrolls rather than cut December */
    }

    .emp-aba-escala > .emp-escala-barra,
    .emp-aba-escala > .emp-legenda {
        flex: none;
    }

/* Picagens no mapa: the period on top, then the map with the list of punches on its right. */
.emp-aba-picagens {
    flex-direction: column;
    gap: .45rem;
}

.emp-picagens {
    flex: 1 1 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 29rem;
    gap: .6rem;
    min-height: 24rem;
}

    .emp-picagens > .tabela-rolagem {
        align-self: start;
        min-width: 0;
        max-height: 100%;
        overflow: auto;
    }

    /* The place name wraps: the list keeps its width beside the map. */
    .emp-picagens td:last-child {
        white-space: normal;
    }

    .emp-picagens tr[data-lat]:not([data-lat=""]) {
        cursor: pointer;
    }

    /* A punch without a position: the whole row in red. */
    .emp-picagens tbody tr.sem-posicao td {
        background: #fde3e3;
        color: var(--cr-danger);
    }

/* The pins of the work places: the default pin turned green. */
.emp-mapa .pin-local {
    filter: hue-rotate(250deg);
}

/* isolate: Leaflet's own z-indexes (up to 1000) stay under the app's menus and dialogs. */
.emp-mapa {
    isolation: isolate;
    min-height: 24rem;
    border: 1px solid var(--cr-line-strong);
    border-radius: 7px;
}

@media (max-width: 1100px) {
    .emp-picagens {
        grid-template-columns: minmax(0, 1fr);
    }
}

.emp-escala-aviso {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border: 1px solid #f3c7cc;
    border-radius: 6px;
    background: #fdf1f2;
    color: #8e1e2a;
    font-size: .86rem;
    font-weight: 500;
}

    .emp-escala-aviso .icone {
        width: 1rem;
        height: 1rem;
    }

.emp-escala-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .8rem;
}

    .emp-escala-barra .espaco {
        flex: 1;
    }

.emp-contagem {
    font-size: .82rem;
    color: var(--cr-text-2);
    white-space: nowrap;
}

    .emp-contagem b {
        color: var(--cr-strong);
        font-family: var(--cr-font-mono);
        font-weight: 600;
    }

    .emp-contagem.excedido b {
        color: var(--cr-danger);
    }

.emp-escala-rolagem {
    overflow-x: auto;
    border: 1px solid var(--cr-line-strong);
    border-radius: 8px;
    background: #fff;
}

.emp-escala {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: var(--cr-font-mono);
    font-size: .64rem;
}

    .emp-escala th {
        padding: .2rem 0;
        border: 1px solid var(--grelha);
        background: #f5f6f8;
        color: var(--cr-text-2);
        font-weight: 600;
        text-align: center;
    }

    .emp-escala thead th:first-child,
    .emp-escala tbody th {
        width: 2.8rem;
    }

    .emp-escala tbody th {
        font-family: var(--cr-font-display);
        font-size: .74rem;
        border-right: 1px solid var(--grelha-forte);
    }

    .emp-escala thead th {
        border-bottom: 1px solid var(--grelha-forte);
    }

    .emp-escala td {
        height: 1.3rem;
        font-size: .72rem;
        min-width: 1.6rem;
        padding: 0 1px;
        /* Gridlines strong enough to follow a row or a column (also over the coloured days). */
        border: 1px solid var(--grelha);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
        color: var(--cr-text);
    }

/* The VB6 colours, in the tones of the new palette. Days already gone are a little darker. */
.d-sabado { background: #e6efff; }
.d-domingo { background: #cfdcfb; }
.d-feriado { background: #c9efd9; color: #0d5c3d !important; font-weight: 700; }
.d-folga { background: #d9d4fb; color: #3c2f8f !important; }
.d-compensacao { background: #fde9a8; color: #6b4b00 !important; }
.d-obrigatoria { background: #fbd78a; color: #6b4b00 !important; }
.d-descanso { background: #ead2f5; color: #5c2a77 !important; }
.d-ferias { background: #1f9a63; color: #fff !important; font-weight: 700; }
.d-feriasfimsemana { background: #63be93; color: #fff !important; }
/* Half a holiday: the cell split 50 / 50 on its diagonal (holiday green above, white below), "FE" with a white halo. */
.d-meiodiaferias {
    background: linear-gradient(135deg, #1f9a63 0 50%, #fff 50%);
    color: #0b2e1f !important;
    font-weight: 800;
    text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff;
}
.d-falta { background: #fde2e5; color: #8e1e2a !important; font-weight: 600; }
.d-extra { background: #dbeafe; color: #1d4ed8 !important; font-weight: 600; }
.d-previsto { background: repeating-linear-gradient(135deg, #fff 0 4px, #fdecee 4px 8px); color: #8e1e2a !important; }
.d-inexistente { background: #26344d; }

.emp-escala td.passado { filter: brightness(.94); }

/* Several justification codes on one day: vertical bands in each code's colour (Empregados.razor EstiloJustif); the first
   code in dark ink with a white halo so it reads over any band. The legend sample uses two neutral reds. */
.d-varios {
    color: #1d2433 !important;
    font-weight: 800;
    text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff;
    box-shadow: inset 0 0 0 1px rgba(29, 36, 51, .35);
}
.d-varios-amostra { background: linear-gradient(to right, #f4a3ad 0 50%, #9cc3f5 50% 100%); }

/* Each day is a link to that day in Atualização de movimentos de ponto: the whole cell, in the cell's own colours. */
.emp-escala td > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 1.35rem;
    color: inherit;
    text-decoration: none;
}

    .emp-escala td > a:hover,
    .emp-escala td > a:focus-visible {
        outline: 2px solid var(--cr-blue-600);
        outline-offset: -1px;
    }

.emp-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    /* Room for the hover / focus outline of the samples (3px outside), so the last row is never clipped. */
    padding: 4px;
    font-size: .88rem;
}

/* Colour sample + name; the description shows in the tooltip (data-dica). */
.emp-legenda-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--cr-text);
    cursor: help;
    border-radius: 5px;
}

    .emp-legenda-item:hover .emp-legenda-cor,
    .emp-legenda-item:focus-visible .emp-legenda-cor {
        outline: 2px solid var(--cr-blue-500);
        outline-offset: 1px;
    }

    .emp-legenda-item:focus-visible {
        outline: none;
    }

.emp-legenda-cor {
    display: inline-grid;
    place-items: center;
    min-width: 2rem;
    height: 1.45rem;
    padding: 0 .3rem;
    border: 1px solid #dde1e6;
    border-radius: 4px;
    font-family: var(--cr-font-mono);
    font-size: .72rem;
    color: var(--cr-text);
}

/* ---- Side column ---- */
.emp-lado {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-height: 0;
    overflow-y: auto;
}

.emp-ferias dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .35rem .6rem;
    margin: 0;
    font-size: .9rem;
}

.emp-ferias dt {
    font-weight: 400;
    color: var(--cr-text-2);
}

.emp-ferias dd {
    margin: 0;
    color: var(--cr-strong);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.emp-ferias .total {
    padding-top: .3rem;
    border-top: 1px solid var(--cr-line);
    color: var(--cr-text);
    font-weight: 600;
}

.emp-ferias-aviso {
    margin: .6rem 0 0;
    padding: .4rem .6rem;
    border: 1px solid #f3dbab;
    border-radius: 6px;
    background: #fff8eb;
    color: #7a4a00;
    font-size: .84rem;
}

    .emp-ferias-aviso.perigo {
        border-color: #f3c7cc;
        background: #fdf1f2;
        color: #8e1e2a;
    }

.emp-justif {
    display: flex;
    flex-direction: column;
    /* Room for a few rows; with more, the table scrolls inside the card. */
    min-height: 12rem;
    flex: 1 1 auto;
}

.emp-justif-nova {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .45rem;
}

/* The period (one calendar, PeriodoSelector SoEscolher) and the add button. */
.emp-justif-datas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .25rem;
}

    .emp-justif-datas .periodo {
        display: flex;
        width: 100%;
    }

    .emp-justif-datas .periodo-datas {
        flex: 1;
        font-size: .82rem;
    }

    .emp-justif-datas .btn {
        padding: .2rem .45rem;
    }

/* The table fits the panel's width: fixed columns, the date field fills its cell. With many rows it scrolls inside
   the card (never out of it). */
.emp-justif-tabela {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
}

    .emp-justif-tabela .tabela-dados {
        table-layout: fixed;
        font-size: .8rem;
    }

        .emp-justif-tabela .tabela-dados th:nth-child(1) { width: 3.6rem; }
        .emp-justif-tabela .tabela-dados th:nth-child(2) { width: 6.2rem; }

        .emp-justif-tabela .tabela-dados th {
            font-size: .74rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .emp-justif-tabela .tabela-dados th:nth-child(4) { width: 2.2rem; }
        /* The delete button (1.6rem) inside its cell. */
        .emp-justif-tabela .tabela-dados td:nth-child(4) { padding: .1rem .3rem; }

        .emp-justif-tabela .tabela-dados th,
        .emp-justif-tabela .tabela-dados td {
            padding: .25rem .4rem;
        }

    .emp-justif-tabela .form-control-sm {
        width: 100%;
        text-align: left;
        padding-right: .1rem !important;
        min-height: 1.6rem;
        padding: 0 .3rem;
        font-size: .8rem;
    }

.emp-justif-fim {
    margin: 0;
}

.btn-icone {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--cr-text-2);
}

    .btn-icone:hover {
        background: #fdf1f2;
        color: var(--cr-danger);
    }

    .btn-icone .icone {
        width: .9rem;
        height: .9rem;
    }

.emp-vazio {
    align-self: start;
}

/* ---- Desktop: the page is exactly the window (no page scroll) ---- */
@media (min-width: 1101px) {
    main > .content > .empregados {
        flex: 1 1 0;
        min-height: 0;
    }

    .empregados > .emp-grelha {
        flex: 1 1 0;
    }

    .emp-ficha > .emp-corpo {
        flex: 1 1 0;
    }

    /* The 4px pad (taken back by the margin) keeps the fields' 3px focus ring inside the scrolling panel, never cut. */
    .emp-abas > .emp-aba {
        flex: 1 1 0;
        overflow: auto;
        padding: 4px;
        margin: 0 -4px;
    }
}

/* ---- Narrower windows: side column under the tabs, then everything stacks ---- */
@media (max-width: 1500px) {
    /* The card's buttons go down to the options row, on the right. */
    .emp-identidade {
        grid-template-columns: 3.6rem minmax(11rem, 1fr) minmax(10rem, 14rem) max-content;
    }

    .emp-linha-2 {
        grid-column: 2 / 3;
    }

    .emp-linha-1 .emp-acoes {
        grid-row: 2;
        grid-column: 3 / -1;
        align-self: start;
    }

    .emp-aba-gerais,
    .emp-aba-pessoais {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 1100px) {
    .emp-grelha,
    .emp-corpo {
        grid-template-columns: minmax(0, 1fr);
    }

    .emp-lista-nomes {
        max-height: 14rem;
    }

    .emp-identidade {
        grid-template-columns: 3.6rem minmax(0, 1fr);
    }

        .emp-linha-1 .emp-nome-curto,
        .emp-linha-1 .emp-extras,
        .emp-linha-1 .emp-acoes {
            grid-column: 2 / -1;
        }

        .emp-linha-1 .emp-acoes {
            grid-row: auto;
            justify-self: start;
        }

    .emp-linha-2 {
        grid-column: 2 / -1;
    }
}

@media (max-width: 640.98px) {
    .emp-topo {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .emp-aba-gerais,
    .emp-aba-pessoais,
    .emp-aba-producao {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Print (Imprimir ficha, the VB6 FichaEmp): the card only, every tab one after the other ---- */
@media print {
    .barra-topo, .barra-estado, .emp-lista, .emp-acoes, .emp-rodape, .emp-abas-titulos, .emp-justif-nova, .emp-alerta, .fundo-app > .mostrador {
        display: none !important;
    }

    .emp-grelha, .emp-corpo {
        display: block;
    }

    .emp-aba {
        display: grid !important;
        margin-bottom: .6rem;
    }

    .emp-aba-escala {
        display: flex !important;
    }

    /* «Imprimir escala»: the employee's identity and the roster tab only (VB6 Print_Escalas_Anomalias). */
    html.imprimir-escala .emp-aba:not(.emp-aba-escala), html.imprimir-escala .emp-lado, html.imprimir-escala .emp-escala-barra .btn,
    html.imprimir-escala .emp-escala-barra .segmentado {
        display: none !important;
    }

    /* A live map of tiles: not part of the printed card. */
    .emp-aba-picagens {
        display: none !important;
    }

    .empregados .painel {
        box-shadow: none;
        backdrop-filter: none;
    }
}

.emp-sem-linhas {
    color: var(--cr-text-3) !important;
    font-style: italic;
    text-align: center;
}

/* Search box of the list: larger, like the names under it. */
.emp-lista input[type="search"] {
    height: auto;
    padding: .42rem .65rem;
    font-size: .98rem;
}

/* A day's code never runs over its neighbours (EUREST's S/CART, ENCERR…; 2026-10-21): 3 characters at most, cut inside
   the cell; the justification colour comes from the code (inline style), the whole code in the tooltip / legend. */
.emp-escala td { overflow: hidden; }
.emp-escala td > a { white-space: nowrap; overflow: hidden; }
/* The roster tab's legend small and in one flow (user's request 2026-10-21), so the 12 months keep their room. */
.emp-aba-escala > .emp-legenda { font-size: .74rem; gap: .25rem .7rem; padding: 2px 4px; }
.emp-aba-escala > .emp-legenda .emp-legenda-cor { height: 1.2rem; min-width: 1.8rem; font-size: .66rem; }
/* Rows may shrink below the link's usual height before December would be cut. */
.emp-aba-escala .emp-escala td { height: auto; }
.emp-aba-escala .emp-escala td > a { min-height: 1.05rem; }

/* The roster bar in one line of pills (2026-10-21): years, view, then the counts as the tables' foot chips. */
.emp-escala-barra { flex-wrap: nowrap; }
.emp-escala-barra .segmentado { flex: none; }
.emp-escala-kpis { flex-wrap: nowrap; gap: .35rem; }
.emp-escala-kpis .kpi.excedido .kpi-valor { color: var(--cr-danger); }