/* =============================================================================================
   Renumeração de empregados (VB6 Renumera.frm) — same look as the Utilizadores screen: solid panels,
   15px text, compact rows. On desktop the page fits the window and only the table scrolls, under its fixed
   dark header.
   ============================================================================================= */
.renumeracao {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    font-size: .95rem;
    color: var(--cr-text);
}

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

    .renumeracao .form-control-sm,
    .renumeracao .form-select-sm {
        font-size: .9rem;
        min-height: 1.85rem;
        padding-top: .15rem;
        padding-bottom: .15rem;
        color: var(--cr-text);
        border-color: rgba(15, 36, 64, 0.42);
    }

        .renumeracao .form-control-sm::placeholder {
            color: var(--cr-text-3);
            opacity: 1;
        }

/* ---- Bar: units, search, the button ---- */
.renumeracao-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    margin-bottom: .6rem;
}

/* The unit list on the left; the rest of the bar on the right. */
.renumeracao-barra > .controlo:first-child {
    margin-right: auto;
}

.tabela-renumeracao .col-unidade-atual {
    width: 6rem;
}

.renumeracao-procura {
    width: 16rem;
}

/* ---- Table: its own scroll area ---- */
/* (.tabela-rolagem itself is in chronos.css, shared with the other tables.) */
@media (min-width: 641px) {
    /* The page is the window's height: the result and the bar keep their size, the table takes the rest. */
    main > .content > .renumeracao {
        flex: 1 1 0;
        min-height: 0;
    }

    .renumeracao > * {
        flex: none;
    }

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

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

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

    /* A long result list scrolls too, so the table below keeps room. */
    .renumeracao-resultado {
        max-height: 40vh;
        overflow: auto;
    }
}

/* ---- Table ---- */
.tabela-renumeracao {
    font-size: .92rem;
}

    /* Header in the light blue of the app, so it stands out from the rows; fixed while the rows scroll. */
    .tabela-renumeracao thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #dce7ff;
        color: var(--cr-blue-600);
        font-weight: 700;
        padding: .45rem .6rem;
        border-bottom: 1px solid rgba(42, 91, 234, 0.3);
        vertical-align: middle;
    }

        .tabela-renumeracao thead th:first-child {
            border-top-left-radius: 8px;
        }

        .tabela-renumeracao thead th:last-child {
            border-top-right-radius: 8px;
        }

    .tabela-renumeracao td {
        padding: .2rem .6rem;
        border-bottom-color: var(--cr-line-strong);
    }

    .tabela-renumeracao .col-num {
        width: 6rem;
        text-align: right;
    }

    .tabela-renumeracao .col-novo {
        width: 8rem;
    }


    /* Rows in white (dismissed in red, below); the row under the mouse in a strong blue, so you see which one
       you are working on (rule at the end: it wins over every other colour). */

    /* Dismissed employees keep their own colour, as in VB6 (over the stripes). */
    .tabela-renumeracao tbody tr.demitido:nth-child(n) td {
        background: #f8dcdc;
    }

    .tabela-renumeracao .distintivo {
        margin-left: .4rem;
        font-size: .72rem;
        padding: .05rem .45rem;
    }

    /* A row with a new number stands out, so the user sees what will change. */
    .tabela-renumeracao tbody tr.alterada:nth-child(n) td {
        background: #c2d6ff;
    }

        .tabela-renumeracao tr.alterada td:first-child {
            box-shadow: inset 3px 0 0 var(--cr-blue-600);
        }

    .tabela-renumeracao tbody tr.com-erro:nth-child(n) td {
        background: #fde8e8;
    }

.erro-linha {
    margin-top: .1rem;
    font-size: .82rem;
    font-weight: 600;
    color: #a3202f;
}

.nota-renumeracao {
    margin: .7rem 0 0;
    padding-top: .45rem;
    border-top: 1px solid var(--cr-line);
    font-size: .84rem;
    color: var(--cr-text-2);
}

/* ---- Result of the last renumbering ---- */
.renumeracao-resultado .painel-titulo {
    color: #0d7048;
}

.renumeracao-resultado td {
    padding: .35rem .6rem;
}

.renumeracao-tabelas {
    font-size: .84rem;
    color: var(--cr-text-2);
}

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

    .tabela-renumeracao tbody tr:hover:nth-child(n) td:first-child {
        box-shadow: inset 3px 0 0 var(--cr-blue-600);
    }