/*
 * Camada visual carregada DEPOIS do Bootstrap.
 *
 * O app.css é carregado antes do Bootstrap no _Layout, então regras de mesma
 * especificidade lá perdem para o framework. Este arquivo existe para o que
 * precisa vencer o Bootstrap sem depender de !important nem de <style> na página.
 *
 * Quase tudo aqui é escopado em .hd-page para não alterar telas que não foram
 * revisadas. Só o cabeçalho e o menu lateral têm regras globais, porque são
 * compartilhados e foram pedidos explicitamente.
 */

:root {
    --hd-border: #e3e8ef;
    --hd-border-strong: #cbd5e1;
    --hd-muted: #64748b;
    --hd-radius: 10px;
    --hd-radius-sm: 8px;
    --hd-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --hd-shadow-hover: 0 4px 12px rgba(16, 24, 40, .08);
    --hd-focus-ring: 0 0 0 3px rgba(13, 71, 161, .18);
    --hd-control-height: 36px;
    --hd-scrollbar-thumb: rgba(100, 116, 139, .35);
    --hd-scrollbar-thumb-hover: rgba(71, 85, 105, .55);
    --hd-option-selected: #e8f1fd;
}

/* ---------------------------------------------------------------- página --- */

.hd-page {
    /* Em monitores largos a tabela de 14 colunas esticada fica ilegível.
       O teto é generoso para não apertar a tabela nas resoluções comuns. */
    max-width: 1680px;
}

.hd-page-header {
    margin-bottom: 1.25rem;
}

.hd-page-title {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--hd-text);
}

.hd-page-subtitle {
    margin: .25rem 0 0;
    font-size: .85rem;
    color: var(--hd-muted);
}

/* ----------------------------------------------------------------- cards --- */

.hd-page .hd-card {
    background: #fff;
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius);
    box-shadow: var(--hd-shadow);
}

.hd-page .hd-card-body {
    padding: 1.125rem 1.25rem;
}

/* --------------------------------------------------------------- filtros --- */

.hd-page .hd-filters .form-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--hd-muted);
    margin-bottom: .3rem;
}

.hd-page .hd-filters .form-control,
.hd-page .hd-filters .form-select {
    font-size: .82rem;
    border-color: var(--hd-border-strong);
    border-radius: var(--hd-radius-sm);
    padding: .4rem .65rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}

/* select[multiple] tem altura própria; igualar só os de linha única
   preserva o comportamento de múltipla escolha dos filtros. */
.hd-page .hd-filters .form-control:not(textarea),
.hd-page .hd-filters .form-select:not([multiple]) {
    min-height: var(--hd-control-height);
}

/* A opção selecionada num listbox de uma linha recebe o realce cinza do sistema,
   que ocupa a linha inteira e num campo de 34px é lido como barra de rolagem.
   Aqui ele vira um realce leve da própria paleta.

   As duas declarações são feias por necessidade, não por descuido:
   - o linear-gradient é o que vence o realce nativo no WebKit/Blink, que ignora
     background-color puro em option:checked;
   - o !important é o que vence no Firefox.

   ATENÇÃO — verificado e sem efeito no macOS: ali o listbox de select[multiple] é
   pintado pelo renderizador nativo do sistema, que ignora background em option
   mesmo com appearance: none (que o .form-select do Bootstrap já aplica). A regra
   fica porque resolve no Chrome/Edge de Windows e Linux e no Firefox; no macOS o
   bloco cinza continua, e só sai trocando o controle. */
.hd-page .hd-filters .form-select[multiple] option:checked {
    background: var(--hd-option-selected) linear-gradient(0deg, var(--hd-option-selected) 0%, var(--hd-option-selected) 100%) !important;
    color: var(--hd-primary) !important;
    font-weight: 600;
}

.hd-page .hd-filters .form-control:hover:not(:disabled),
.hd-page .hd-filters .form-select:hover:not(:disabled) {
    border-color: var(--hd-primary-light);
}

.hd-page .hd-filters .form-control:focus,
.hd-page .hd-filters .form-select:focus {
    border-color: var(--hd-primary);
    box-shadow: var(--hd-focus-ring);
}

.hd-page .hd-filters .form-control:disabled,
.hd-page .hd-filters .form-select:disabled {
    background-color: #f1f5f9;
    color: var(--hd-muted);
    cursor: not-allowed;
}

/* Busca geral em destaque na primeira linha */
.hd-page .hd-search .input-group-text {
    background: #fff;
    border-color: var(--hd-border-strong);
    border-right: 0;
    border-radius: var(--hd-radius-sm) 0 0 var(--hd-radius-sm);
    color: var(--hd-muted);
    padding-left: .75rem;
}

.hd-page .hd-search .form-control {
    border-left: 0;
    border-radius: 0 var(--hd-radius-sm) var(--hd-radius-sm) 0;
    padding-left: .25rem;
}

/* Sem isto, o foco desenha a borda só na metade direita do grupo. */
.hd-page .hd-search:focus-within .input-group-text,
.hd-page .hd-search:focus-within .form-control {
    border-color: var(--hd-primary);
}

.hd-page .hd-search:focus-within {
    border-radius: var(--hd-radius-sm);
    box-shadow: var(--hd-focus-ring);
}

.hd-page .hd-search .form-control:focus {
    box-shadow: none;
}

/* --------------------------------------------------------------- botões --- */

.hd-page .hd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.hd-page .hd-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: var(--hd-control-height);
    min-width: 124px;
    padding: .4rem .85rem;
    font-size: .8rem;
    font-weight: 600;
    border-radius: var(--hd-radius-sm);
    white-space: nowrap;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.hd-page .hd-actions .btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--hd-shadow-hover);
}

.hd-page .hd-actions .btn:focus-visible {
    box-shadow: var(--hd-focus-ring);
    outline: none;
}

.hd-page .hd-actions .btn:disabled {
    transform: none;
    box-shadow: none;
    opacity: .65;
}

/* Secundário: fundo claro com contorno, para não competir com o primário. */
.hd-page .hd-actions .btn-hd-secondary {
    background-color: #fff;
    border: 1px solid var(--hd-border-strong);
    color: #475569;
}

.hd-page .hd-actions .btn-hd-secondary:hover:not(:disabled) {
    background-color: #f8fafc;
    border-color: var(--hd-muted);
    color: #1e293b;
}

.hd-spin {
    display: inline-block;
    animation: hd-spin .8s linear infinite;
}

@keyframes hd-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------- tabela --- */

.hd-page .hd-table-card {
    overflow: hidden; /* mantém os cantos arredondados sobre a tabela */
}

/* Barra vertical espúria no card da tabela. O .table-responsive do Bootstrap
   declara só overflow-x: auto, e pela especificação o eixo restante deixa de ser
   visible e passa a auto. A barra horizontal (necessária, são 15 colunas) come
   altura do content box, o que faz a tabela transbordar na vertical pela mesma
   espessura da barra — e ganhar uma segunda barra, que não rola nada de útil.
   Fixar o eixo vertical em hidden corta esse ciclo sem esconder conteúdo: a
   altura do card acompanha a tabela. */
.hd-page .hd-table-card .table-responsive {
    overflow-y: hidden;
}

.hd-page .hd-table {
    font-size: .82rem;
    margin-bottom: 0;
    --bs-table-bg: transparent;
}

.hd-page .hd-table > thead > tr > th {
    background: #f8fafc;
    border-bottom: 1px solid var(--hd-border);
    color: var(--hd-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .7rem .75rem;
    vertical-align: middle;
    white-space: nowrap;
}

.hd-page .hd-table > tbody > tr > td {
    border-top: 0;
    border-bottom: 1px solid #f1f5f9;
    padding: .62rem .75rem;
    vertical-align: middle;
    color: var(--hd-text);
}

.hd-page .hd-table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.hd-page .hd-table > tbody > tr:hover > td {
    background-color: #f8fafc;
}

/* Modo compacto ("zoom"): fonte e espaçamentos menores para caber mais chamados na tela. */
.hd-page .hd-table.hd-table-compact {
    font-size: .72rem;
}

.hd-page .hd-table.hd-table-compact > thead > tr > th {
    font-size: .62rem;
    padding: .35rem .5rem;
}

.hd-page .hd-table.hd-table-compact > tbody > tr > td {
    padding: .3rem .5rem;
}

/* Número do chamado não pode quebrar no meio: é o identificador que se procura. */
.hd-page .hd-cell-nowrap {
    white-space: nowrap;
}

.hd-page .hd-cell-number {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Número do chamado como link: mesmo destino do botão "Ver", num alvo maior de leitura. */
.hd-page .hd-ticket-link {
    color: var(--hd-primary);
    text-decoration: none;
}

.hd-page .hd-ticket-link:hover {
    text-decoration: underline;
}

.hd-page .hd-ticket-link:focus-visible {
    outline: 2px solid var(--hd-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Texto longo trunca com reticências, mas o valor inteiro fica no title. */
.hd-page .hd-cell-truncate {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-page .hd-cell-truncate-sm {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-page .hd-table .sort-btn {
    cursor: pointer;
    margin-left: 2px;
    padding: 0 2px;
    font-size: .8em;
    line-height: 1;
    border: none;
    background: transparent;
    color: inherit;
    opacity: .45;
    border-radius: 3px;
}

.hd-page .hd-table .sort-btn:hover:not(:disabled) {
    opacity: .95;
}

.hd-page .hd-table .sort-btn:focus-visible {
    opacity: 1;
    outline: 2px solid var(--hd-primary);
    outline-offset: 1px;
}

.hd-page .hd-table .sort-btn.active {
    opacity: 1;
    color: var(--hd-primary);
}

.hd-page .hd-table th.sortable-cell {
    user-select: none;
}

/* --------------------------------------------------------------- badges --- */

.hd-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.35;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* O ponto é reforço visual; quem comunica o estado é o texto ao lado,
   para que a informação não dependa só de cor. */
.hd-badge::before {
    content: "";
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.hd-badge-gray   { background: #f1f5f9; border-color: #dde3ea; color: #475569; }
.hd-badge-blue   { background: #e8f1fd; border-color: #c6ddf9; color: #1156a5; }
.hd-badge-cyan   { background: #e4f5fb; border-color: #bde5f2; color: #0b6f8c; }
.hd-badge-amber  { background: #fdf3e2; border-color: #f6e0b8; color: #92600b; }
.hd-badge-green  { background: #e7f6ec; border-color: #c3e8d0; color: #17683a; }
.hd-badge-red    { background: #fdecec; border-color: #f8cfcf; color: #a12626; }

/* --------------------------------------------------------------- rodapé --- */

.hd-page .hd-table-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
    font-size: .8rem;
    color: var(--hd-muted);
}

.hd-page .hd-table-footer .page-link {
    border-radius: 6px;
    margin: 0 1px;
    border-color: var(--hd-border);
    color: var(--hd-primary);
    font-size: .8rem;
}

.hd-page .hd-table-footer .page-item.active .page-link {
    background-color: var(--hd-primary);
    border-color: var(--hd-primary);
    color: #fff;
}

.hd-page .hd-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--hd-muted);
}

/* ------------------------------------------------- cabeçalho e menu (global) --- */

/* Sidebar em coluna: o menu cresce e a área de ajuda fica presa no rodapé. */
.app-sidebar {
    display: flex;
    flex-direction: column;
    padding: 12px 0 0;
}

.app-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 12px 12px;
    gap: 4px;
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    /* A borda transparente reserva o espaço do indicador, para que o item ativo
       não empurre os vizinhos ao ganhar a barra lateral. */
    border-left: 3px solid transparent;
    border-radius: var(--hd-radius-sm);
    padding: .6rem .75rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--hd-text);
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.app-nav-link:hover {
    background: rgba(13, 71, 161, 0.05);
    color: var(--hd-primary);
}

.app-nav-link.active {
    border-left-color: var(--hd-primary);
    font-weight: 600;
    background: #e8f0fe;
    color: var(--hd-primary);
}

.app-nav-link:focus-visible {
    outline: 2px solid var(--hd-primary);
    outline-offset: -2px;
}

/* O item de seção (Dashboard) segue o mesmo peso dos demais: no visual de
   referência a hierarquia vem dos títulos de grupo, não do peso da fonte. */
.app-nav-link--section {
    font-weight: 500;
    color: var(--hd-text);
}

.app-nav-link--section:hover {
    color: var(--hd-primary);
}

.app-nav-link--section.active {
    font-weight: 600;
    color: var(--hd-primary);
}

.app-nav-group-title {
    padding: 18px 12px 6px;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--hd-muted);
}

.app-nav-icon {
    font-size: 1.05rem;
    opacity: .8;
    flex: 0 0 auto;
}

.app-nav-link.active .app-nav-icon {
    opacity: 1;
}

/* Rodapé de ajuda do sidebar */
.app-sidebar-help {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-top: auto;
    border-top: 1px solid var(--hd-border);
    padding: .9rem 1rem;
    font-size: .82rem;
}

.app-sidebar-help-icon {
    font-size: 1.1rem;
    color: var(--hd-muted);
    flex: 0 0 auto;
}

.app-sidebar-help-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-sidebar-help-title {
    color: var(--hd-text);
    font-weight: 600;
}

.app-sidebar-help-link {
    color: var(--hd-primary);
    font-weight: 500;
    text-decoration: none;
}

.app-sidebar-help-link:hover {
    text-decoration: underline;
}

.app-sidebar-help-link:focus-visible {
    outline: 2px solid var(--hd-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

.app-user-name {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.app-logout {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 6px;
    transition: background-color .12s ease;
    text-decoration: none;
}

.app-logout:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ---------------------------------------------------- barras de rolagem --- */

/* Regra global de propósito: a tela tem vários contêineres que rolam ao mesmo
   tempo (conteúdo principal, tabela larga, filtros de múltipla escolha) e as
   barras cheias do sistema disputavam atenção com o conteúdo. Aqui elas ficam
   finas e translúcidas — a rolagem é a mesma, só o peso visual muda.

   São dois mecanismos de propósito, para cobrir os navegadores em uso:
   - scrollbar-width/color é o padrão (Firefox sempre; Chrome 121+; Safari 18.2+)
     e preserva a barra sobreposta, que aparece ao rolar e depois some. As duas
     propriedades são herdadas, então declarar no html alcança os contêineres
     internos, inclusive os listbox dos filtros;
   - ::-webkit-scrollbar atende o WebKit anterior ao 18.2, que não entende o
     padrão. Ele tem um custo conhecido: onde a barra era sobreposta, passa a ser
     clássica e sempre visível. Fina e translúcida, mas presente. */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--hd-scrollbar-thumb) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--hd-scrollbar-thumb);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--hd-scrollbar-thumb-hover);
}

/* --------------------------------------------------------------- kanban --- */

/* O board rola na horizontal e usa a largura toda: com sete colunas, o teto de 1680px da
   página deixaria cada coluna estreita demais para o cartão caber sem quebrar o número. */
.hd-page--board {
    max-width: none;
}

.hd-board-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
}

.hd-board-header-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.hd-board-updated {
    color: var(--hd-muted);
    font-size: .8rem;
}

.hd-kanban {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: .5rem;
}

.hd-kanban-col {
    display: flex;
    flex-direction: column;
    /* Nem encolhe nem estica: a coluna tem a mesma largura em qualquer quantidade de colunas,
       e o que não couber vira rolagem horizontal do board. */
    flex: 0 0 280px;
    max-height: calc(100vh - 320px);
    background: #f8fafc;
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius);
    padding: .6rem;
}

/* Alvo do arrastar: precisa ser visível antes de soltar, senão não dá para saber onde cai. */
.hd-kanban-col--over {
    border-color: var(--hd-primary);
    border-style: dashed;
    background: var(--hd-option-selected);
    box-shadow: var(--hd-focus-ring);
}

.hd-kanban-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .4rem;
}

.hd-kanban-col-count {
    background: #fff;
    border: 1px solid var(--hd-border);
    border-radius: 999px;
    color: var(--hd-muted);
    font-size: .72rem;
    font-weight: 600;
    min-width: 1.6rem;
    padding: .05rem .4rem;
    text-align: center;
}

.hd-kanban-col-sum {
    color: var(--hd-muted);
    font-size: .72rem;
    margin-bottom: .4rem;
}

.hd-kanban-col-body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    overflow-y: auto;
    /* Área de soltar mesmo com a coluna vazia. */
    min-height: 60px;
}

.hd-kanban-empty {
    color: var(--hd-muted);
    font-size: .78rem;
    margin: .5rem 0 0;
    text-align: center;
}

.hd-kanban-card {
    background: #fff;
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-sm);
    box-shadow: var(--hd-shadow);
    padding: .6rem;
}

.hd-kanban-card--movable {
    cursor: grab;
}

.hd-kanban-card--movable:active {
    cursor: grabbing;
}

/* Cartão de onde o arrasto saiu: fica no lugar, apagado, marcando a origem enquanto o
   cursor procura a coluna de destino. */
.hd-kanban-card--dragging {
    opacity: .4;
    border-style: dashed;
}

.hd-kanban-card:hover {
    box-shadow: var(--hd-shadow-hover);
}

/* A barra à esquerda diz, em repouso, quais cartões se movem — sem depender de tentar
   arrastar para descobrir. */
.hd-kanban-card--movable {
    border-left: 3px solid var(--hd-border-strong);
}

.hd-kanban-card--movable:hover {
    border-left-color: var(--hd-primary);
}

/* Gravação em curso: o cartão continua legível, mas mostra que ainda não terminou. */
.hd-kanban-card--busy {
    opacity: .55;
    pointer-events: none;
}

.hd-kanban-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
}

.hd-kanban-card-title {
    color: var(--hd-text);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 .2rem;
    /* Duas linhas: o título do chamado é longo e o cartão precisa manter altura previsível. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hd-kanban-card-subtitle {
    color: var(--hd-muted);
    font-size: .75rem;
    margin: 0 0 .35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-kanban-card-meta,
.hd-kanban-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .1rem .6rem;
    color: var(--hd-muted);
    font-size: .74rem;
}

.hd-kanban-card-foot {
    border-top: 1px solid var(--hd-border);
    justify-content: space-between;
    margin-top: .4rem;
    padding-top: .4rem;
}

.hd-kanban-card-facts {
    display: flex;
    gap: .6rem;
}

.hd-kanban-card-owner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-kanban-late {
    color: #a12626;
    font-weight: 600;
}

/* ------------------------------------------------------- modal do board --- */

.hd-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .45);
}

.hd-modal {
    background: #fff;
    border-radius: var(--hd-radius);
    box-shadow: var(--hd-shadow-hover);
    max-width: 520px;
    padding: 1.25rem;
    width: 100%;
}

.hd-modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 .5rem;
}

.hd-modal-text {
    color: var(--hd-muted);
    font-size: .85rem;
}

.hd-modal-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* --------------------------------------------------------- responsividade --- */

@media (max-width: 1399.98px) {
    .hd-page .hd-cell-truncate { max-width: 180px; }
    .hd-page .hd-cell-truncate-sm { max-width: 120px; }
}

@media (max-width: 767.98px) {
    .hd-page-title { font-size: 1.2rem; }

    /* No celular a coluna ocupa quase a tela inteira: o board vira uma coluna por vez,
       percorrida na horizontal. */
    .hd-kanban-col { flex-basis: 84vw; max-height: none; }
    .hd-page .hd-card-body { padding: 1rem; }

    /* Empilhado no celular: botão de largura cheia é mais fácil de acertar com o dedo. */
    .hd-page .hd-actions { flex-direction: column; }
    .hd-page .hd-actions .btn { width: 100%; }

    .app-user { padding: 0 12px; gap: 8px; }
    .app-user-name { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Respeita quem pediu menos animação no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
    .hd-page .hd-actions .btn,
    .app-nav-link,
    .app-logout {
        transition: none;
    }

    .hd-page .hd-actions .btn:hover:not(:disabled) {
        transform: none;
    }

    .hd-spin {
        animation: none;
    }
}