/* main.css */

/* Theme: graphite and blue ... */
:root {
    --bs-body-bg: #F4F6F8;
    --bs-body-bg-rgb: 244, 246, 248;
    --bs-body-color: #1E2A33;
    --bs-body-color-rgb: 30, 42, 51;
    --bs-border-color: #DDE3E8;
    --bs-primary: #245B78;
    --bs-primary-rgb: 36, 91, 120;
    --bs-secondary-color: #5F6F7A;
    --bs-secondary-rgb: 95, 111, 122;
    --bs-success: #2E7D4F;
    --bs-success-rgb: 46, 125, 79;
    --bs-danger: #C0392B;
    --bs-danger-rgb: 192, 57, 43;
    --bs-warning: #C98F00;
    --bs-warning-rgb: 201, 143, 0;
    --bs-dark: #1F3A4A;
    --bs-dark-rgb: 31, 58, 74;
    --bs-link-color: #245B78;
    --bs-link-color-rgb: 36, 91, 120;
    --bs-link-hover-color: #1A4258;
    --bs-link-hover-color-rgb: 26, 66, 88;
    --bs-focus-ring-color: rgba(36, 91, 120, 0.25);
}

.btn-primary {
    --bs-btn-bg: #245B78;
    --bs-btn-border-color: #245B78;
    --bs-btn-hover-bg: #1E4C65;
    --bs-btn-hover-border-color: #1A4258;
    --bs-btn-active-bg: #1A4258;
    --bs-btn-active-border-color: #163849;
    --bs-btn-disabled-bg: #245B78;
    --bs-btn-disabled-border-color: #245B78;
    --bs-btn-focus-shadow-rgb: 36, 91, 120;
}

.btn-outline-primary {
    --bs-btn-color: #245B78;
    --bs-btn-border-color: #245B78;
    --bs-btn-hover-bg: #245B78;
    --bs-btn-hover-border-color: #245B78;
    --bs-btn-active-bg: #1E4C65;
    --bs-btn-active-border-color: #1E4C65;
    --bs-btn-disabled-color: #245B78;
    --bs-btn-disabled-border-color: #245B78;
    --bs-btn-focus-shadow-rgb: 36, 91, 120;
}

.btn-outline-dark {
    --bs-btn-color: #1F3A4A;
    --bs-btn-border-color: #1F3A4A;
    --bs-btn-hover-bg: #1F3A4A;
    --bs-btn-hover-border-color: #1F3A4A;
    --bs-btn-active-bg: #1F3A4A;
    --bs-btn-active-border-color: #1F3A4A;
    --bs-btn-disabled-color: #1F3A4A;
    --bs-btn-disabled-border-color: #1F3A4A;
    --bs-btn-focus-shadow-rgb: 31, 58, 74;
}

.btn-success {
    --bs-btn-bg: #2E7D4F;
    --bs-btn-border-color: #2E7D4F;
    --bs-btn-hover-bg: #276B44;
    --bs-btn-hover-border-color: #246240;
    --bs-btn-active-bg: #246240;
    --bs-btn-active-border-color: #205838;
}

.btn-danger {
    --bs-btn-bg: #C0392B;
    --bs-btn-border-color: #C0392B;
    --bs-btn-hover-bg: #A93226;
    --bs-btn-hover-border-color: #9D2F24;
    --bs-btn-active-bg: #9D2F24;
    --bs-btn-active-border-color: #912B21;
}

.btn-outline-danger {
    --bs-btn-color: #C0392B;
    --bs-btn-border-color: #C0392B;
    --bs-btn-hover-bg: #C0392B;
    --bs-btn-hover-border-color: #C0392B;
    --bs-btn-active-bg: #A93226;
    --bs-btn-active-border-color: #A93226;
}

/* Button sizes: only three, so buttons side by side line up instead of each one being as wide as
   its text.
   - Text buttons (btn-sm) beside other buttons: same minimum width, so Cancelar and Guardar, the
     shortcuts of the home page, Colunas/Excel/PDF... are equal; only long texts grow. A button on
     its own (Agenda in a card, Sair in the support bar) keeps its natural width.
   - Icon-only buttons (btn-icon, set by main.js on buttons with no text): no minimum, as before.
   - Phone: a group of buttons (btn-row) splits the screen width in equal parts (rule further down).
   Button groups and input groups keep their own widths ... */
.btn-sm:has(~ .btn),
.btn ~ .btn-sm {
    min-width: 6.5rem;
}

/* Wide: buttons one above the other in sections of the same page (e.g. Nova Periodicidade and
   Novo Feriado in Horários de Trabalho), so they line up ... */
.btn-wide {
    min-width: 9rem;
}

.btn-sm.btn-icon,
.btn-group > .btn-sm,
.input-group > .btn-sm {
    min-width: 0;
}

.table-dark {
    --bs-table-bg: #1F3A4A;
    --bs-table-border-color: #2E4E61;
    --bs-table-striped-bg: #274759;
    --bs-table-hover-bg: #274759;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: #245B78;
}

/* Document template fields: the long groups (Cliente, Contrato) scroll inside the menu ... */
.field-menu {
    max-height: 50vh;
    overflow-y: auto;
}

.field-menu .dropdown-item {
    white-space: normal;
}

/* Fields are white; the theme's page background (--bs-body-bg) made them
   grey on the white cards. Disabled and read-only fields stay grey ... */
.form-control,
.form-select,
.select2-container--bootstrap-5 .select2-selection {
    background-color: #FFFFFF;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--bs-secondary-bg);
}

.form-control:focus,
.form-select:focus {
    border-color: #7FA8BF;
    box-shadow: 0 0 0 0.25rem rgba(36, 91, 120, 0.25);
}

.form-check-input:checked {
    background-color: #245B78;
    border-color: #245B78;
}

.form-check-input:focus {
    border-color: #7FA8BF;
    box-shadow: 0 0 0 0.25rem rgba(36, 91, 120, 0.25);
}

.progress {
    --bs-progress-bar-bg: #245B78;
}

/* DataTables ... */
.pagination {
    --bs-pagination-active-bg: #245B78;
    --bs-pagination-active-border-color: #245B78;
    --bs-pagination-hover-color: #1A4258;
    --bs-pagination-focus-color: #1A4258;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(36, 91, 120, 0.25);
}

.dt-search {
    position: relative;
}

.dt-search label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dt-search .bi-search {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #5F6F7A;
    font-size: 0.8rem;
    pointer-events: none;
}

.dt-search input.form-control {
    padding-left: 30px !important;
}

/* Phone: a group of buttons (btn-row: the end of the forms, the shortcuts of the home page) takes the
   whole width, in equal parts, one line; the margins between the buttons give way to the grid's gap.
   A button inside a form (e.g. delete) fills its part too ... */
@media (max-width: 767.98px) {
    .btn-row {
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 0.5rem;
        width: 100%;
    }

    .btn-row > * {
        min-width: 0 !important;
        margin: 0 !important;
    }

    .btn-row > form > .btn {
        width: 100%;
    }

    /* More buttons than fit in one line (e.g. the top of the contract page): two equal columns; with an odd
       number, the first one (the main action) takes the whole line. A dropdown's button fills its part ... */
    .btn-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        width: 100%;
    }

    .btn-grid > * {
        min-width: 0 !important;
        margin: 0 !important;
    }

    .btn-grid > :first-child:nth-last-child(odd) {
        grid-column: 1 / -1;
    }

    .btn-grid > .dropdown > .btn,
    .btn-grid > form > .btn {
        width: 100%;
    }
}

/* Phone: the service lines of the contract forms (service-lines) in two lines each: the service across
   the whole width, then quantity, unit value, total and the delete button, each with its label on top
   (data-label). The totals (Subtotal, IVA, Total) on the right. In one line it was too narrow to read ... */
@media (max-width: 767.98px) {
    table.service-lines thead {
        display: none;
    }

    table.service-lines,
    table.service-lines tbody,
    table.service-lines tfoot {
        display: block;
        width: 100%;
    }

    /* No backgrounds of the table's cells (they showed as grey patches around the inputs) ... */
    table.service-lines > :not(caption) > * > * {
        background-color: transparent;
        box-shadow: none;
    }

    table.service-lines tr.service-row {
        display: grid;
        grid-template-columns: 3.25rem 1fr auto auto;
        gap: 0.4rem;
        align-items: end;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--bs-border-color);
    }

    table.service-lines tr.service-row > td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
    }

    table.service-lines tr.service-row > td:first-child {
        grid-column: 1 / -1;
    }

    /* Numbers on the right, the labels too (quantity, unit value and total line up) ... */
    table.service-lines tr.service-row > td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.15rem;
        font-size: 0.8rem;
        color: var(--bs-secondary-color);
        text-align: right;
    }

    /* The total: its label level with the others, the value level with the inputs' text ... */
    table.service-lines tr.service-row > td.service-line-total {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 0.45rem;
    }

    table.service-lines tfoot tr {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
    }

    table.service-lines tfoot td {
        padding: 0.2rem 0;
        border: 0;
    }

    table.service-lines tfoot td:empty {
        display: none;
    }
}

/* Telemóvel: só a tabela desliza na horizontal - o título, os botões, a
   pesquisa e a paginação ficam à largura do ecrã. Antes deslizava o bloco
   inteiro (o .table-responsive à volta de tudo) ... */
@media (max-width: 767.98px) {
    .dt-layout-table > .dt-layout-full {
        display: block !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dt-layout-table > .dt-layout-full > table {
        white-space: nowrap;
    }

    .w-100.p-4.table-responsive {
        padding: 0.75rem !important;
    }

    /* Forms: the fields set side by side with plain "col" columns (no breakpoint) go one per line,
       the whole width (side by side they were squeezed, ex. the contract's name). "col-auto" stays ... */
    form .row > .col,
    form .row > .col.check-col {
        flex: 1 0 100%;
        max-width: 100%;
    }

    /* A tick box with its list beside it (entries: "Ficha financeira", "Contrato"): the list goes under
       the tick box, the whole width (beside the 150px column it was left with a few letters) ... */
    .d-flex:has(> .check-col) {
        flex-wrap: wrap;
    }

    .d-flex > .check-col + .flex-grow-1 {
        flex: 1 0 100%;
    }

    /* The windows (modals: movement, deadline, appointment, ...) take the whole screen, as Bootstrap's
       modal-fullscreen does: the title stays on top, the buttons at the bottom, only the fields scroll
       (a long window, like the deadline's, no longer hides its buttons) ... */
    .modal-dialog {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .modal-body {
        overflow-y: auto;
    }

    /* Início, "Vencimentos mais urgentes": the four columns didn't fit (date and badges don't break);
       each due date takes two lines: date, kind and the amount on the right, then the client / supplier ... */
    table.due-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.5rem;
        padding: 0.35rem 0;
        border-bottom: 1px solid var(--bs-border-color);
    }

    table.due-table tr:last-child {
        border-bottom: 0;
    }

    table.due-table td {
        display: block;
        border: 0;
        padding: 0;
        background-color: transparent;
        box-shadow: none;
    }

    table.due-table td.due-amount {
        margin-left: auto;
    }

    table.due-table td.due-name {
        order: 3;
        flex-basis: 100%;
    }

    /* The help panel takes the whole screen (its 480px are wider than a phone) ... */
    .help-offcanvas {
        --bs-offcanvas-width: 100%;
    }

    /* The lists (main.js prepareMobileCards marks them "mobile-cards"): each row is a card instead of a
       line that slides, each value with its column's label (data-label), the first titled column as the
       card's title (.mobile-title); the search, the order and the pages of DataTables stay; a totals row
       is a card too. Excel / PDF / Print / Columns make no sense on the phone ... */
    .dt-container:has(table.mobile-cards) .dt-buttons {
        display: none;
    }

    .dt-layout-table > .dt-layout-full > table.mobile-cards {
        white-space: normal;
    }

    table.mobile-cards,
    table.mobile-cards tbody,
    table.mobile-cards tfoot,
    table.mobile-cards tr,
    table.mobile-cards td,
    table.mobile-cards tfoot th {
        display: block;
        width: 100% !important;
    }

    /* Nothing to show (an empty cell, ex. of a totals row): no empty line in the card ... */
    table.mobile-cards td:empty,
    table.mobile-cards tfoot th:empty {
        display: none;
    }

    table.mobile-cards thead {
        display: none;
    }

    /* The cards stand on their own: no frame of the table around them ... */
    table.mobile-cards {
        border: 0 !important;
        box-shadow: none !important;
        background-color: transparent !important;
    }

    table.mobile-cards tr {
        background-color: #FFFFFF;
        border: 1px solid var(--bs-border-color);
        border-radius: 0.75rem;
        margin-bottom: 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    /* The striped and rounded table's cell styles (backgrounds, borders, corners) off inside the cards ... */
    table.mobile-cards > tbody > tr > td,
    table.mobile-cards > tfoot > tr > td,
    table.mobile-cards > tfoot > tr > th {
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0.1rem 0;
        background-color: transparent !important;
        box-shadow: none !important;
        text-align: left !important;
    }

    table.mobile-cards > tbody > tr > td.mobile-title {
        font-size: 1.05rem;
        font-weight: 600;
        padding-bottom: 0.25rem;
    }

    table.mobile-cards td[data-label]::before,
    table.mobile-cards th[data-label]::before {
        content: attr(data-label) ": ";
        color: var(--bs-secondary-color);
        font-size: 0.8rem;
    }

    table.mobile-cards td.mobile-hide,
    table.mobile-cards th.mobile-hide {
        display: none;
    }

    /* "No records" of an empty list: a plain line, not a card ... */
    table.mobile-cards td.dt-empty {
        text-align: center !important;
    }

    table.mobile-cards > tbody > tr > td:last-child .d-flex {
        justify-content: flex-start !important;
        margin-top: 0.35rem;
    }
}

html,
body {
    background-color: #F4F6F8;
    height: 100%;
    width: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.text-justify {
    text-align: justify;
}

/* Checkbox in front of a select (entries: Ficha financeira / Contrato):
   same width for all, so the selects beside them line up ... */
.check-col {
    width: 150px;
    flex-shrink: 0;
}

/* Form pages: full width on small screens, capped on large ones ... */
.page-narrow {
    max-width: 520px;
}

.page-medium {
    max-width: 960px;
}

/* Attachments: an open attachment's row and its "details and versions" panel are framed together,
   so it is clear which document the panel belongs to (also while the panel is opening/closing) ... */
.attachment-item:has(> .collapse.show, > .collapsing) {
    border: 1px solid var(--bs-primary);
    border-radius: 0.5rem;
    margin: 0.25rem 0 0.5rem;
}

.attachment-item:has(> .collapse.show, > .collapsing) > .attachment-row {
    border-top: 0 !important;
    border-radius: 0.5rem 0.5rem 0 0;
    background-color: var(--bs-primary-bg-subtle);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.attachment-panel {
    padding: 0.5rem;
    background-color: var(--bs-tertiary-bg);
    border-radius: 0 0 0.5rem 0.5rem;
}

/* The toggle shows the clock while closed and an arrow up (close) while open; text would not fit
   in the narrow attachments column ... */
.attachment-toggle[aria-expanded="true"] .when-closed,
.attachment-toggle:not([aria-expanded="true"]) .when-open {
    display: none;
}

/* Filter chips (components x-filter.*: Pesquisa Documental and the listings' filters): white and grey
   when not used, blue when a filter is chosen ... */
.filter-chip {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: #7FA8BF;
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary-bg-subtle);
    --bs-btn-active-border-color: var(--bs-primary);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.filter-chip.active {
    color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary);
}

/* The dates' and month's list is a small form: wide enough for the date fields ... */
.filter-dates-menu {
    min-width: 15rem;
}

/* Long lists (people, kinds of record) scroll inside, below the screen's height ... */
.filter-menu {
    max-height: 60vh;
    overflow-y: auto;
}

/* The "Filtros" button of a listing (x-filter.bar): the arrow turns when the panel is open ... */
.filter-toggle .filter-chevron {
    display: inline-block;
    transition: transform 0.2s;
}

.filter-toggle[aria-expanded="true"] .filter-chevron {
    transform: rotate(180deg);
}

/* The field of the two-step authentication card (password, first code), with its buttons beside it on the
   same line and centred on it; on the phone the buttons go under it ... */
.two-factor-field {
    flex: 1 1 14rem;
    max-width: 20rem;
}

/* A row of chips (and its form, in the listings) ... */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.rounded-table {
    border-collapse: separate;
    /* necessário para que o border-radius funcione */
    border-spacing: 0;
    border: 1px solid;
    border-radius: 12px;
    /* Sem overflow:hidden (impedia o cabeçalho de ficar fixo ao rolar) -
       os cantos arredondados são feitos diretamente nas células dos
       extremos em vez de recortar toda a tabela ... */
    width: 100%;
}

.rounded-table thead tr:first-child th:first-child {
    border-top-left-radius: 12px;
}

.rounded-table thead tr:first-child th:last-child {
    border-top-right-radius: 12px;
}

.rounded-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.rounded-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

.rounded-table th,
.rounded-table td {
    padding: 13px 14px;
    border-bottom: 1px solid;
}

.rounded-table tr:last-child td {
    border-bottom: none;
}

/* Tables with a totals row (tfoot): the bottom corners go to the totals row,
   and the last body row keeps its dividing line ... */
.rounded-table tfoot tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.rounded-table tfoot tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

.rounded-table:has(tfoot tr) tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0;
}

.rounded-table:has(tfoot tr) tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0;
}

.rounded-table:has(tfoot tr) tbody tr:last-child td {
    border-bottom: 1px solid;
}

/* Agenda (Processos): a calendar of the cases' deadlines and appointments.
   Fixed layout, so the seven days keep the same width whatever is written in them;
   a minimum width, so on small screens the calendar slides instead of squeezing ... */
.agenda {
    --bs-table-bg: #FFFFFF;
    table-layout: fixed;
    min-width: 700px;
}

.agenda td {
    vertical-align: top;
    padding: 4px;
}

/* A click on a day opens a new appointment on that date ... */
.agenda td.agenda-day {
    cursor: pointer;
}

.agenda-month td {
    height: 110px;
}

.agenda-week td {
    height: 360px;
}

/* Weekends and holidays (courts and services closed) ... */
.agenda td.agenda-closed,
span.agenda-closed {
    background-color: #ECEFF2;
}

/* Court holidays (judicial deadlines are suspended): a light warning tint ... */
.agenda td.agenda-court-holiday,
span.agenda-court-holiday {
    background-color: #FBF4E2;
}

.agenda td.agenda-court-holiday.agenda-closed {
    background-color: #F1E6C8;
}

.agenda-tag {
    font-size: 0.72rem;
}

/* Agenda "Lista" (the phone's view): one card per day; the header carries the colours of the calendar
   (weekend or holiday, court holidays), today stands out with the primary colour ... */
.agenda-list-day .agenda-list-header {
    border-top-left-radius: calc(var(--bs-border-radius-lg) - 1px);
    border-top-right-radius: calc(var(--bs-border-radius-lg) - 1px);
}

.agenda-list-day.agenda-closed .agenda-list-header {
    background-color: #ECEFF2;
}

.agenda-list-day.agenda-court-holiday .agenda-list-header {
    background-color: #FBF4E2;
}

.agenda-list-day.agenda-court-holiday.agenda-closed .agenda-list-header {
    background-color: #F1E6C8;
}

.agenda-list-day.is-today {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 1px var(--bs-primary);
}


/* Shortcuts of the top bar on the phone and tablet (Agenda, Processos, Ponto): icon over a small label,
   the active one in the menu's highlight colour ... */
.navbar-shortcuts .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.15rem 0.5rem;
    line-height: 1.1;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
}

.navbar-shortcuts .nav-link i {
    font-size: 1.15rem;
}

.navbar-shortcuts .nav-link.active {
    color: #D9B26A;
}

/* Breadcrumb at the top of each page (layout-app): small, "›" between links, theme colours ... */
.page-breadcrumb .breadcrumb {
    --bs-breadcrumb-divider: '›';
    --bs-breadcrumb-divider-color: #5F6F7A;
    --bs-breadcrumb-item-active-color: #5F6F7A;
    font-size: 0.85rem;
    flex-wrap: wrap;
}

.page-breadcrumb .breadcrumb-item {
    color: #5F6F7A;
}

.page-breadcrumb .breadcrumb a {
    color: #245B78;
    text-decoration: none;
}

.page-breadcrumb .breadcrumb a:hover {
    text-decoration: underline;
}

/* The page right below the breadcrumb starts closer to it (the pages use p-4, which is !important) ... */
.page-breadcrumb + .p-4 {
    padding-top: 0.75rem !important;
}

.navbar .nav-link.active {
    color: #D9B26A;
}

/* User's name in the top bar: always one line, cut with "..." if long, the full name in the tooltip.
   From 1200px the first name only; at 992-1199px only the person icon, as the menu takes most of the
   bar there (the name used to break in two lines and push logout off screen) ... */
.navbar-user-name {
    display: flex;
    align-items: center;
    min-width: 0;
}

.navbar-user-name i {
    flex-shrink: 0;
}

.navbar-user-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Menu on large screens: each item on one line (some used to break, icon over text, and others not) ... */
@media (min-width: 992px) {
    .navbar-collapse > .navbar-nav > .nav-item > .nav-link {
        white-space: nowrap;
    }
}

/* Laptops and tablets lying down (992-1599px): icon over a small label, like the phone shortcuts,
   so the whole menu fits (side by side it needs about 1500px; it was wider than the screen and
   logout went off it).
   Grid: icon on the first row, label and the dropdown caret side by side on the second ... */
@media (min-width: 992px) and (max-width: 1599.98px) {
    .navbar {
        --bs-navbar-nav-link-padding-x: 0.4rem;
    }

    .navbar-collapse > .navbar-nav > .nav-item > .nav-link {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;
        align-items: center;
        height: 100%;
        line-height: 1.15;
        font-size: 0.8125rem;
    }

    .navbar-collapse > .navbar-nav > .nav-item > .nav-link > i {
        grid-column: 1 / -1;
        justify-self: center;
        margin: 0 0 0.15rem !important;
        font-size: 1.1rem;
    }

    .navbar-collapse > .navbar-nav > .nav-item > .dropdown-toggle::after {
        margin-left: 0.2rem;
    }
}

/* Help, user and logout in the open menu (phone/tablet): own line under the menu, separated by a rule,
   the name on the left and the buttons on the right ... */
@media (max-width: 991.98px) {
    .navbar-user {
        margin-top: 0.5rem;
        padding: 0.75rem 0 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: #1F3A4A;
    --bs-nav-tabs-link-active-bg: #FFFFFF;
    --bs-nav-tabs-link-active-border-color: #DDE3E8 #DDE3E8 #FFFFFF;
}

.nav-tabs .nav-link {
    color: #5F6F7A;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: #DDE3E8 #DDE3E8 #DDE3E8;
    color: #245B78;
}

.navbar[data-bs-theme=dark] .dropdown-menu {
    --bs-dropdown-bg: #1F3A4A;
    --bs-dropdown-border-color: rgba(255, 255, 255, 0.15);
    --bs-dropdown-divider-bg: rgba(255, 255, 255, 0.15);
    --bs-dropdown-link-color: #E6EDF2;
    --bs-dropdown-link-hover-color: #FFFFFF;
    --bs-dropdown-link-hover-bg: #2E4E61;
    --bs-dropdown-link-active-color: #FFFFFF;
    --bs-dropdown-link-active-bg: #245B78;
}

/* Submenus of the top bar (Jurídico › Processos, Gestão › Financeiro, ...): an item with ›
   (.dropdown-submenu) opens its own list beside the menu on large screens (hover or click), and under
   the item, indented, in the phone's open menu (tap; script in main.js) ... */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: calc(-0.5rem - 1px);
    display: none;
}

.dropdown-submenu > .dropdown-menu.show {
    display: block;
}

/* The item's text and its arrow on one line, the arrow at the right edge (with "float" the arrow of a long
   name, ex. Recursos Humanos, dropped to a line of its own) ... */
.dropdown-submenu > .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 1rem;
    white-space: nowrap;
}

.dropdown-submenu > .dropdown-toggle::after {
    margin-left: auto;
}

@media (min-width: 992px) {
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
}

@media (max-width: 991.98px) {
    .dropdown-submenu > .dropdown-menu {
        position: static;
        margin: 0 0 0 1rem;
        border: 0;
        padding-top: 0;
    }
}

/* Help (manual): page with index on the left, "Ajuda" side panel (iframe) and printed manual ... */
/* Large screens: the manual area gets the height left on the screen (script in help.blade.php), and the
   index and the text scroll each on its own, so the menu and the title never leave the screen ... */
@media (min-width: 992px) {
    .help-body-col {
        height: 100%;
        overflow-y: auto;
    }

    #help-text {
        padding-right: 0.75rem;
    }
}

.help-index-chapter + .help-index-chapter {
    margin-top: 1rem;
}

.help-index-chapter-title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 0.35rem;
}

.help-index-link {
    display: block;
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    color: var(--bs-body-color);
    text-decoration: none;
}

.help-index-link:hover {
    background-color: #E6EDF2;
    color: var(--bs-primary);
}

.help-chapter-title {
    margin: 0.5rem 0 1rem;
}

/* Sections reached by a link (#...) stop a little below the top, not glued to it ... */
.help-section {
    scroll-margin-top: 1rem;
    line-height: 1.6;
}

.help-section-title {
    color: var(--bs-dark);
    margin-bottom: 0.75rem;
}

.help-section h6 {
    margin-top: 1.25rem;
    color: var(--bs-dark);
}

.help-section ul,
.help-section ol {
    padding-left: 1.25rem;
}

.help-section li + li {
    margin-top: 0.25rem;
}

.help-tip {
    border-left: 3px solid var(--bs-primary);
    background-color: #EEF3F6;
    padding: 0.5rem 0.75rem;
    border-radius: 0 0.375rem 0.375rem 0;
    margin: 0.75rem 0;
}

.help-offcanvas {
    --bs-offcanvas-width: 480px;
}

.help-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The help opens straight at the section of the page: Bootstrap's smooth scroll (on :root) made the
   text roll down to it, in the "?" panel and in the full manual ... */
html:has(body.help-panel),
html:has(.help-body) {
    scroll-behavior: auto;
}

/* Inside the panel: the search stays at the top while the text scrolls ... */
.help-panel .help-panel-search {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.75rem 1rem;
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.help-panel .help-section {
    padding: 1rem !important;
}

/* Printed manual: A4 pages, cover and contents on pages of their own, each chapter on a new page ... */
.help-print {
    background-color: #FFFFFF;
}

.help-print-toolbar {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.help-print-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.help-print-cover {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 3px solid var(--bs-dark);
    margin-bottom: 2rem;
}

.help-print-brand {
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--bs-primary);
}

.help-print-role {
    font-size: 1.4rem;
    color: var(--bs-dark);
}

.help-print-meta {
    color: var(--bs-secondary-color);
    margin-top: 0.5rem;
}

.help-print-contents {
    margin-bottom: 2rem;
}

.help-print .help-section {
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
}

@media print {
    @page {
        size: A4;
        margin: 18mm 16mm;
    }

    .help-print-page {
        max-width: none;
        padding: 0;
    }

    .help-print-cover {
        min-height: 240mm;
        border-bottom: 0;
        margin-bottom: 0;
        break-after: page;
    }

    .help-print-contents {
        break-after: page;
    }

    .help-print .help-chapter + .help-chapter {
        break-before: page;
    }

    .help-print .help-section-title,
    .help-print .help-section h6 {
        break-after: avoid;
    }

    .help-print table,
    .help-print .help-tip {
        break-inside: avoid;
    }
}

/* Logs (Administração): the changes of each line, "Field: old → new", and the "mais N" that opens the rest ... */
/* The changes column gets room, so "old → new" doesn't break into short lines ... */
#logTable td:last-child {
    min-width: 24rem;
}

.log-change {
    line-height: 1.35;
}

.log-change + .log-change {
    margin-top: 0.15rem;
}

.log-more summary {
    cursor: pointer;
    list-style: none;
}

.log-more summary::-webkit-details-marker {
    display: none;
}

/* Rever Notificações: one card per process, so each stands apart from the next: a graphite header (like the
   tables' headers) with the position and the number, and a coloured left edge that says the case's state
   (found / opened from a case / still to choose / already imported) ... */
.import-card {
    background-color: #FFFFFF;
    border: 1px solid var(--bs-border-color);
    border-left: 6px solid #C98F00;
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(31, 58, 74, 0.10);
}

.import-card.is-found,
.import-card.is-done {
    border-left-color: #2E7D4F;
}

.import-card.is-preset {
    border-left-color: #245B78;
}

.import-card-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: #1F3A4A;
    color: #FFFFFF;
    /* Inside the card's border: the corners follow it (the left edge is thicker) ... */
    border-top-left-radius: calc(0.75rem - 6px);
    border-top-right-radius: calc(0.75rem - 1px);
}

.import-card-position {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #D9B26A;
}

.import-card-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.import-card-meta {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
}

.import-card-body {
    padding: 1rem;
}

/* Imported: the header quieter, the card no longer asks for attention ... */
.import-card.is-done .import-card-header {
    background-color: #274759;
}