.navbar-vertical .nav-link:focus-visible {
  outline: 2px solid var(--falcon-primary);
  outline-offset: -2px;
  box-shadow: none;
  transition: none;
}

.navbar-vertical .navbar-brand:focus-visible {
  outline: 2px solid var(--falcon-primary);
  outline-offset: -6px;
}

.form-control:focus,
.form-select:focus {
  outline: 2px solid var(--falcon-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 0.2rem var(--falcon-focus-ring-color);
}

.btn:focus-visible {
  outline: 2px solid var(--falcon-primary);
  outline-offset: 2px;
}

a:focus-visible {
  outline: 2px solid var(--falcon-primary);
  outline-offset: 2px;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  outline-color: #5a9aec;
  box-shadow: 0 0 0 0.2rem rgba(90, 154, 236, 0.4);
}

.autocomplete-container {
  z-index: 10;
  position: relative;
}

/* Campo de busca de pessoa com botões de ação ao lado. Presos ao topo porque a mensagem de erro
   cresce abaixo do campo e esticaria a altura deles. */
.person-field {
  align-items: flex-start;
}

/* O que entra no flex é o wrapper que o simple_form põe em volta do autocomplete, não o input: a
   margem dele desalinharia os botões, e o espaçamento do campo fica por fora, na linha inteira.
   O !important é para vencer a utilitária de spacing. */
.person-field > .autocomplete-wrapper {
  flex: 1;
  min-width: 0;
  margin-bottom: 0 !important;
}

/* Os atalhos entram na linha do campo, então o elemento que os endereça não pode virar um item dela:
   vazio, enquanto não há ninguém escolhido, ele ainda consumiria o espaçamento entre os itens. */
.person-field-shortcuts {
  display: contents;
}

/* O conteúdo do modal chega dentro do frame do Turbo, do controller que o abre e, quando é cadastro,
   do próprio form — três elementos entre o `.modal-content` e o `.modal-body`. O flex tem de atravessar
   todos: sem isso o corpo não encolhe e o rodapé sai da tela em vez de o miolo rolar por dentro. */
.modal-dialog-scrollable #modal_frame,
.modal-dialog-scrollable #modal_frame > [data-controller~="open-modal"],
.modal-dialog-scrollable #modal_frame > [data-controller~="open-modal"] > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.autocomplete-container ul {
  position: absolute;
  width: 100%;
}

/* A opção que o teclado alcança na lista do autocomplete recebe a classe `active`. O fundo do item vem
   de `bg-body-tertiary`, utilitária e por isso `!important`, que vence o fundo de
   `.list-group-item.active` e deixa de pé só a cor de texto dela — branca, invisível sobre o fundo
   claro do tema claro. Repõe o par inteiro. Os dois `!important` são para vencer utilitárias que também
   o são: o fundo do item e o `text-primary` do atalho de cadastrar, que sobre o destaque ficaria com
   contraste pior do que o texto comum. `gray-900` acompanha o tema e rende 8:1 nos dois. */
.list-group-item.bg-body-tertiary.active {
  background-color: var(--falcon-secondary-bg) !important;
  color: var(--falcon-gray-900) !important;
}

.modal .autocomplete-container {
  z-index: 1060;
}

.modal .autocomplete-container ul {
  z-index: 1061;
}

.modal .autocomplete-container:focus-within {
  z-index: 1080;
}

.modal .autocomplete-container:focus-within ul {
  z-index: 1081;
}

/* Foi necessário adicionar esta customização pois o item ativo da paginação não muda cor do texto */
.pagination li.active a {
  color: var(--falcon-primary);
}

/* Foi necessário manter estes css personalizados para trocar o formato do checkbox usado para marcar a tarefa como concluída */
.custom-checkbox input[type=checkbox] {
  display: none;
}

.custom-checkbox input[type=checkbox]+label::before {
  content: "\F28A";
}

.custom-checkbox input[type=checkbox]+label {
  color: var(--falcon-gray);
  font-size: 2.5rem;
  line-height: 0;
  display: inline-block;
  padding: 0 0 0 0px;
}

.custom-checkbox input[type=checkbox]:checked+label::before {
  content: "\F26B";
}

.custom-checkbox input[type=checkbox]:checked+label {
  color: var(--falcon-green);
  font-size: 2.5rem;
  line-height: 0;
  display: inline-block;
  padding: 0 0 0 0px;
}

/* Foi necessário manter esta customização para que o filtro ativo fique destacado */
#filters li a.active {
  color: var(--falcon-navbar-vertical-default-link-active-color);
}

.fs--1 {
  font-size: .8333333333rem !important;
}

.fs--2 {
  font-size: .6944444444rem !important;
}

.tooltip {
  --falcon-tooltip-max-width: 400px;
}

@keyframes progressAnimation {
  0% {
    width: 0%;
  }

  50% {
    width: 50%;
  }

  80% {
    width: 70%;
  }

  100% {
    width: 80%;
  }
}

@keyframes bootstrapStripes {
  0% {
    background-position: 1rem 0;
  }

  100% {
    background-position: 0 0;
  }
}

.animate-progress {
  animation: progressAnimation 10s linear, bootstrapStripes 1s linear infinite;
  animation-fill-mode: forwards;
}

.dt-container .sort:after {
  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNyA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNi41MjU1NiAzLjVDNi45NDkzNyAzLjUgNy4xNjEyOCAzLjA2MjUgNi44NTUxOSAyLjc5MTY3TDMuODQxNCAwLjEyNUMzLjY1MzA0IC0wLjA0MTY2NjcgMy4zNDY5NiAtMC4wNDE2NjY3IDMuMTU4NTkgMC4xMjVMMC4xNDQ4MDkgMi43OTE2N0MtMC4xNjEyNzkgMy4wNjI1IDAuMDUwNjI3OSAzLjUgMC40NzQ0NDEgMy41SDYuNTI1NTZaIiBmaWxsPSIjQjZDMkQyIi8+CjxwYXRoIGQ9Ik0wLjQ3NDQ0MiA1LjVDMC4wNTA2MjgyIDUuNSAtMC4xNjEyNzkgNS45Mzc1IDAuMTQ0ODA5IDYuMjA4MzNMMy4xNTg1OSA4Ljg3NUMzLjM0Njk2IDkuMDQxNjcgMy42NTMwNCA5LjA0MTY3IDMuODQxNDEgOC44NzVMNi44NTUxOSA2LjIwODMzQzcuMTYxMjggNS45Mzc1IDYuOTQ5MzcgNS41IDYuNTI1NTYgNS41TDAuNDc0NDQyIDUuNVoiIGZpbGw9IiNCNkMyRDIiLz4KPC9zdmc+Cg==");
}

.dt-container .sort.dt-ordering-asc:after {
  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNyA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNi41MjU1NiAzLjVDNi45NDkzNyAzLjUgNy4xNjEyOCAzLjA2MjUgNi44NTUxOSAyLjc5MTY3TDMuODQxNCAwLjEyNUMzLjY1MzA0IC0wLjA0MTY2NjcgMy4zNDY5NiAtMC4wNDE2NjY3IDMuMTU4NTkgMC4xMjVMMC4xNDQ4MDkgMi43OTE2N0MtMC4xNjEyNzkgMy4wNjI1IDAuMDUwNjI3OSAzLjUgMC40NzQ0NDEgMy41SDYuNTI1NTZaIiBmaWxsPSIjQjZDMkQyIi8+Cjwvc3ZnPgo=") !important;
  top: -2px !important;
}

.dt-container .sort.dt-ordering-desc:after {
  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNyA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC40NzQ0NDIgMC41MDAwMDFDMC4wNTA2MjgyIDAuNTAwMDAxIC0wLjE2MTI3OSAwLjkzNzUgMC4xNDQ4MDkgMS4yMDgzM0wzLjE1ODU5IDMuODc1QzMuMzQ2OTYgNC4wNDE2NyAzLjY1MzA0IDQuMDQxNjcgMy44NDE0MSAzLjg3NUw2Ljg1NTE5IDEuMjA4MzNDNy4xNjEyOCAwLjkzNzUwMSA2Ljk0OTM3IDAuNTAwMDAxIDYuNTI1NTYgMC41MDAwMDFMMC40NzQ0NDIgMC41MDAwMDFaIiBmaWxsPSIjQjZDMkQyIi8+Cjwvc3ZnPgo=") !important;
  top: -2px !important;
}

.avatar-initials {
  width: 28px;
  height: 28px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.sortable-ghost {
  opacity: 0.1;
}

.sortable-chosen {
  transform: rotate(0.8deg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.sortable-chosen-column {
  transform: rotate(0.2deg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.sortable-drag {
  transform: rotate(0.8deg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.kanban-column-header {
  align-items: flex-start;
}

.task-historic-attach-btn {
  background-color: var(--falcon-body-tertiary-bg);
  border: 0;
  box-shadow: none;
  color: var(--falcon-card-color);
  padding: 0.25rem 0.65rem;
  transition: box-shadow 0.15s ease-in-out, color 0.15s ease-in-out;
}

.task-historic-attach-btn:hover {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.12);
}

.task-historic-pending-hint {
  display: none;
  align-items: center;
  color: var(--falcon-gray-500);
}

.task-historic-pending-hint i {
  font-size: 0.85rem;
}

@media (hover: none) and (pointer: coarse) {
  .task-historic-pending-hint {
    display: inline-flex;
  }
}

.task-historic-attach-btn:focus-visible {
  box-shadow: 0 0 0 0.2rem var(--falcon-focus-ring-color);
}


.kanban-items-container {
  min-height: 30px;

  max-height: calc(100vh - (var(--falcon-top-nav-height) + 18rem));
}

.grabbing * {
  cursor: grabbing !important;
}

.column-title {
  width: 17rem;
}

.column-title.grab{
  cursor: grab;
  user-select: none;
}
.kanban-item {
  cursor: default;
}

.kanban-item.grab {
  cursor: grab !important;
}

.kanban-column-header form{
  width: 280px;
}
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5rem;
}

.skeleton-text-large {
  width: 80%;
  height: 1.2em;
}

.skeleton-text-small {
  width: 60%;
  height: 0.9em;
}

.skeleton-text-xs {
  width: 40%;
  height: 0.8em;
}

.skeleton-avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

.skeleton-card {
  opacity: 0.8;
  pointer-events: none;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-color-scheme: dark) {
  .skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
  }

  .skeleton-avatar {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
  }
}
turbo-frame .kanban-item:first-child {
  padding-top: 1rem !important;
}
p.hide-if-has-siblings {min-height: 30px;}

.hide-if-has-siblings:not(:only-child) {
  display: none !important;
}

.frame-kanban-items-container{
  display: block;
  min-height: 20px;
}

.view-mode-toggle {
  @media (max-width: 767.98px) {
    .btn-group {
      width: 100%;

      .btn {
        flex: 1;
        min-width: 60px;
        padding: 0.375rem 0.5rem;

        i {
          font-size: 1rem;
        }
      }
    }
  }

  @media (min-width: 768px) {
    .btn {
      min-width: 100px;
    }
  }
}
.view-mode-btn {
 min-height: 29px;
}

.kanban-container {
  padding-bottom: 1rem;
  overflow-x: auto !important;
  overflow-y: hidden;
  scrollbar-width: auto;
  scrollbar-color: var(--falcon-gray-500) var(--falcon-emphasis-bg);
}

.kanban-container::-webkit-scrollbar {
  height: 20px;
  -webkit-appearance: none;
}

.kanban-container::-webkit-scrollbar-track {
  background-color: var(--falcon-emphasis-bg);
  border-radius: 10px;
  margin: 0 8px;
}

.kanban-container::-webkit-scrollbar-thumb {
  background-color: var(--falcon-gray-500);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
  min-width: 50px;
}

.kanban-container::-webkit-scrollbar-thumb:hover {
  background-color: var(--falcon-gray-600);
}

.kanban-container::-webkit-scrollbar-thumb:active {
  background-color: var(--falcon-gray-700);
}

.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .navbar-collapse {
  width: 0.125rem !important;
}

.tasks-kanban .card .card-header {
  border-bottom: unset !important
}

/* O board do kanban mantém o padding inferior justo (comportamento anterior à flag). O :has
   restringe ao kanban, sem afetar as demais telas em largura total. */
.content:has(.tasks-kanban) {
  padding-bottom: 10px;
}

.kanban-items-container .kanban-item:first-of-type {
  margin-top: 0 !important;
}


.kanban-item .card-body {
 padding: 10px 10px
}

.kanban-item-footer {
  margin-top: 10px;
}

.kanban-column-header {
   padding: 1.25rem 1.25rem 0.5rem 1.25rem
}

.kanban-item {
  margin-top: 15px;
}

/* As três regras de impressão que têm de valer em **qualquer** layout, e por isso ficam aqui e não
   no printing.css: este arquivo é o único que a página pública do orçamento, o login e os dois
   layouts internos carregam. Tudo o mais que é do papel — as folhas e o tratamento das telas do app
   — mora no printing.css. */
@media print {
  tr {
    --falcon-table-striped-bg: #f2f2f2 !important; /* cinza claro */
  }

  table {
    width: 100% !important;
    table-layout: fixed;
    word-wrap: break-word;
  }

  #navbar-top {
    display: none !important;
  }
}

.ibs-cbs-highlight {
  position: relative;
  padding: 0.75rem 1rem 0.75rem 1.25rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.ibs-cbs-highlight h5 {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.ibs-cbs-highlight::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 6px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.06) inset;
}

@media (prefers-color-scheme: dark) {
  .ibs-cbs-highlight::before {
    background: rgba(9, 48, 106, 0.9);
    box-shadow: none;
  }
}
:root {
  --preview-header-height: 80px;
  --preview-footer-height: 88px;
  --preview-content-gap: 16px;

  --z-backdrop: 1050;
  --z-content: 1055;
  --z-overlay: 1070;

  --color-white: #fff;
  --color-dark-text: #212529;
  --color-selection-bg: #c6dbff;
  --color-selection-text: rgba(31, 41, 55, 0.9);
}

.attachment-preview-backdrop { z-index: var(--z-backdrop); }

.attachment-preview-header,
.attachment-preview-footer,
.attachment-preview-nav { z-index: var(--z-overlay); }

.attachment-preview-content {
  left: 0;
  right: 0;
  top: calc(var(--preview-header-height) + var(--preview-content-gap));
  bottom: var(--preview-footer-height);
  z-index: var(--z-content);
  overflow: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
}

.attachment-preview-icon,
.attachment-preview-file-icon {
  font-size: 1.25rem;
  color: var(--color-white);
}

.attachment-preview-header-action .attachment-preview-icon {
  font-size: 1.5rem;
}

.attachment-preview-close,
.attachment-preview-header-action,
.attachment-preview-btn,
.attachment-preview-pageinfo,
.attachment-preview-page-label {
  color: var(--color-white);
}

.attachment-preview-close { font-size: 0.95rem; }

.attachment-preview-close:is(:hover, :focus),
.attachment-preview-header-action:is(:hover, :focus),
.attachment-preview-nav:is(:hover, :focus) {
  color: var(--color-white);
  text-decoration: none;
}

.attachment-preview-filename {
  color: var(--color-white);
  max-width: 50vw;
  word-break: break-all;
  font-size: 1.05rem;
}

.attachment-preview-header [data-attachment--viewer-target="fileSize"] {
  font-size: 0.9rem;
}

.attachment-preview-content--pdf,
.attachment-preview-content--scroll-y {
  align-items: flex-start !important;
}

.attachment-preview-content--pdf,
.attachment-preview-content--scroll-x {
  justify-content: flex-start !important;
}

.attachment-preview-content--scroll-y,
.attachment-preview-content--scroll-x {
  padding: 12px;
}

.attachment-preview-media {
  max-width: 94%;
  max-height: 94%;
  object-fit: contain;
}

.attachment-preview-pdf-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: max-content;
  min-width: 100%;
  padding: 12px 0 24px;
  overflow-anchor: none;
}

.attachment-preview-pdf-page {
  display: flex;
  justify-content: center;
  position: relative;
}

.attachment-preview-pdf-page .attachment-preview-media {
  max-width: none;
  max-height: none;
}

.attachment-preview-pdf-page .textLayer {
  --min-font-size: 1;
  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv: calc(1 / var(--min-font-size));
  position: absolute;
  inset: 0;
  overflow: clip;
  transform-origin: 0 0;
  line-height: 1;
  z-index: 1;
  caret-color: CanvasText;
  user-select: text;
}

.attachment-preview-pdf-page .textLayer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  transform-origin: 0 0;
  cursor: text;
  line-height: 1;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.attachment-preview-pdf-page .textLayer span::selection {
  background: var(--color-selection-bg);
  color: var(--color-selection-text);
}

.attachment-preview-pdf-page .textLayer br::selection {
  background: transparent;
}

.attachment-preview-pdf-page .textLayer .markedContent {
  display: contents;
}

.attachment-preview-pdf-page .textLayer .endOfContent {
  position: absolute;
  inset: 100% 0 0;
  display: block;
  z-index: 0;
  cursor: default;
  user-select: none;
}

.attachment-preview-text {
  user-select: text;
  cursor: text;
  width: 90%;
  max-width: 960px;
  height: 100%;
  max-height: 100%;
  align-self: stretch;
  box-sizing: border-box;
  background: var(--color-white);
  color: var(--color-dark-text);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.attachment-preview-fallback {
  --fallback-bg: rgba(255, 255, 255, 0.92);
  --fallback-color: var(--falcon-body-color);
  --fallback-error: #b02a37;
  --fallback-btn-bg: var(--falcon-gray-100);
  --fallback-btn-color: var(--falcon-body-color);
  --fallback-btn-border: rgba(0, 0, 0, 0.12);

  background: var(--fallback-bg);
  color: var(--fallback-color);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  padding: 0.75rem 1rem;
}

.attachment-preview-fallback .btn {
  background: var(--fallback-btn-bg);
  color: var(--fallback-btn-color);
  border-color: var(--fallback-btn-border);
}

.attachment-preview-fallback .btn:is(:hover, :focus) {
  filter: brightness(0.95);
}

.attachment-preview-fallback--error {
  color: var(--fallback-error);
}

[data-bs-theme="dark"] .attachment-preview-fallback {
  --fallback-bg: rgba(0, 0, 0, 0.65);
  --fallback-color: var(--falcon-body-color);
  --fallback-error: #f1aeb5;
  --fallback-btn-bg: rgba(255, 255, 255, 0.16);
  --fallback-btn-color: var(--falcon-body-color);
  --fallback-btn-border: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.attachment-preview-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.45);
  color: var(--color-white);
}

.attachment-preview-nav--prev { left: 16px; }
.attachment-preview-nav--next { right: 16px; }

.attachment-preview-notification {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.875rem;
  pointer-events: none;
  z-index: var(--z-overlay);
  white-space: nowrap;
}

.attachment-preview-toolbar {
  background: rgba(24, 36, 52, 0.9);
  border-radius: 14px;
  padding: 14px 19px;
}

.attachment-preview-pageinfo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}

.attachment-preview-page-input {
  width: 68px;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  text-align: center;
  padding: 0.2rem 0.4rem;
}

.attachment-preview-page-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.attachment-card {
  display: inline-block;
  width: 220px;
  max-width: 100%;
  vertical-align: top;
  cursor: pointer;
}

.attachment-card[data-deleted="true"] {
  cursor: default;
  opacity: 0.5;
}

.attachment-card__preview,
.attachment-card__preview--deleted {
  background: var(--bs-tertiary-bg);
  min-height: 120px;
}

.attachment-card__preview--deleted {
  border: 1px dashed var(--bs-border-color);
  cursor: default !important;
}

.attachment-card__icon-circle {
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.06);
}

[data-bs-theme="dark"] .attachment-card__icon-circle {
  background: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .attachment-card.card {
  border-color: var(--falcon-gray-600) !important;
}

.attachment-card__status-icon {
  width: 32px;
  height: 32px;
  background: var(--bs-tertiary-bg);
}

.attachment-card__thumbnail-img,
.attachment-card__thumbnail-canvas {
  max-width: 100%;
  max-height: 100%;
}

.attachment-card__thumbnail-img {
  object-fit: contain;
}

@media (min-width: 576px) {
  .attachment-card__preview,
  .attachment-card__preview--deleted { min-height: 40px; }

  .attachment-card__icon-circle {
    width: 52px;
    height: 52px;
  }
}

@media (min-width: 768px) {
  .attachment-card__preview,
  .attachment-card__preview--deleted { min-height: 40px; }

  .attachment-card__icon-circle {
    width: 60px;
    height: 60px;
  }

  .attachment-card__status-icon {
    width: 36px;
    height: 36px;
  }
}

.task-historics-form-fixed {
  background: var(--falcon-body-tertiary-bg);
  padding: 1rem;
  border-bottom: 1px solid var(--falcon-border-color);
}

.task-historics-list-scroll,
.task-historics-scroll {
  overflow-y: auto;
  position: relative;
}

.task-historics-list-scroll {
  max-height: 700px;
  padding: 0 1rem 1rem;
}

.task-historics-scroll {
  max-height: 400px;
}

.task-historics-list-scroll::before,
.task-historics-scroll::before,
.task-historics-list-scroll::after,
.task-historics-scroll::after {
  content: '';
  position: sticky;
  left: 0;
  right: 0;
  height: 10px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 1;
}

.task-historics-list-scroll::before,
.task-historics-scroll::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
}

.task-historics-list-scroll::after,
.task-historics-scroll::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
}

[data-bs-theme="dark"] .task-historics-list-scroll::before,
[data-bs-theme="dark"] .task-historics-scroll::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), transparent);
}

[data-bs-theme="dark"] .task-historics-list-scroll::after,
[data-bs-theme="dark"] .task-historics-scroll::after {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.06), transparent);
}

.name-wrap {
  overflow-wrap: anywhere;
  word-wrap: break-word;
  hyphens: auto;
}

/* Wrapper que ocupa a mesma altura de um form-control,
   permitindo centralizar conteúdo em relação ao input ao lado. */
.form-control-aligned {
  min-height: calc(1.5em + 0.75rem + 2px);
}

@media (max-width: 767.98px) {
  .product-tab-search-bar {
    position: sticky;
    top: 73px;
    z-index: 9;
    background-color: var(--falcon-card-bg, var(--falcon-body-bg));
  }
}


/* Linhas do rateio: colunas de largura fixa para percentual e valor ficarem alinhados entre as linhas
   e entre os dois blocos — números só se comparam quando terminam na mesma coluna. As medidas vivem
   aqui, e não no atributo `style` da linha, porque a linha é renderizada uma vez por item. */
.apportionment-row + .apportionment-row {
  border-top: 1px solid var(--falcon-border-color);
}

.apportionment-row:hover {
  background-color: var(--falcon-tertiary-bg);
}

.apportionment-progress {
  width: 72px;
  height: 5px;
  flex: none;
}

.apportionment-percentage {
  width: 5.5rem;
}

.apportionment-value {
  width: 7.5rem;
}

.text-monetary {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#integration-form .form-group {
  position: relative;
}

#integration-form .invalid-feedback {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 0.125rem;
}

/* Payment-rate matrix editor: render the cells as a flush grid instead of a
   field-per-cell form. Inputs are borderless and fill their cell; the lines
   come from the table, and a focus ring appears only on the active cell so the
   grid still scrolls horizontally and stays compact. */
.rate-matrix-table th,
.rate-matrix-table td {
  white-space: nowrap;
}

.rate-matrix-grid th,
.rate-matrix-grid td {
  border-inline-end: 1px solid var(--bs-border-color);
}

.rate-matrix-grid th:last-child,
.rate-matrix-grid td:last-child {
  border-inline-end: 0;
}

/* The debit ("À vista") column is a single flat rate, set apart from the
   installment grid with a subtle tint that reads in both light and dark. */
.rate-matrix-debit {
  background-color: rgba(var(--bs-emphasis-color-rgb), 0.04);
}

/* Pin the brand / payment-method column so it stays visible while the
   installment columns scroll horizontally. Sticky cells need an opaque
   background (table cells are transparent by default) so the scrolling columns
   don't show through: the header keeps its own gray-200, the body cells match
   the card background — including the row-hover shade. The header cell sits a
   layer above so the top-left corner wins during scroll. Only the first header
   row pins: the brand cell spans both rows, so the second row's first child is
   "À vista", which belongs to the scrolling grid. */
.rate-matrix-table thead tr:first-child th:first-child,
.rate-matrix-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}

.rate-matrix-table thead tr:first-child th:first-child {
  z-index: 3;
}

.rate-matrix-table tbody td:first-child {
  background-color: var(--falcon-card-bg);
}

.rate-matrix-table tbody tr:hover td:first-child {
  background-color: var(--falcon-gray-100);
}

.rate-matrix-cell-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.125rem;
  height: 100%;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
}

.rate-matrix-cell {
  width: 4.5rem;
  min-width: 4.5rem;
  border: 0;
  padding-inline: 0;
  background-color: transparent;
  box-shadow: none;
  /* Rates always show four decimals; drop the native spinners so their arrows
     never eat into the width and clip the value. */
  appearance: textfield;
  -moz-appearance: textfield;
}

.rate-matrix-cell::-webkit-outer-spin-button,
.rate-matrix-cell::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.rate-matrix-cell:hover {
  background-color: var(--bs-tertiary-bg);
}

.rate-matrix-cell:focus {
  position: relative;
  z-index: 1;
  background-color: var(--bs-body-bg);
  border-radius: var(--bs-border-radius-sm);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.rate-matrix-max {
  width: 4.25rem;
}

.verification-code.form-control {
  height: 3.5rem;
  /* O letter-spacing também entra depois do último dígito; o padding à esquerda compensa para o
     código ficar centralizado de verdade. */
  padding: 0 0 0 0.5em;
  text-align: center;
  font-size: 1.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5em;
}

.verification-code.form-control::placeholder {
  color: var(--falcon-gray-300);
}

.cursor-pointer {
  cursor: pointer;
}

.command-palette__dialog {
  max-width: 34rem;
  margin-top: 6rem;
}

.command-palette__content {
  overflow: hidden;
  border: 0;
  border-radius: 0.625rem;
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.25);
}

.command-palette__search {
  position: relative;
  border-bottom: 1px solid var(--falcon-border-color);
}

.command-palette__search-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  color: var(--falcon-gray-500);
  pointer-events: none;
}

.command-palette__input.form-control {
  height: 3.25rem;
  padding-left: 2.75rem;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  font-size: 1rem;
}

.command-palette__results {
  max-height: 21rem;
  overflow-y: auto;
  padding: 0.5rem;
}

.command-palette__results:empty {
  padding: 0;
}

.command-palette__option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 0.375rem;
  background-color: transparent;
  color: var(--falcon-body-color);
  text-align: left;
}

.command-palette__option--active {
  background-color: var(--falcon-primary);
  color: #fff;
}

.command-palette__option-label {
  font-weight: 500;
}

.command-palette__option-group {
  flex-shrink: 0;
  color: var(--falcon-gray-500);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.command-palette__option--active .command-palette__option-group {
  color: rgba(255, 255, 255, 0.75);
}

.command-palette__empty {
  margin: 0;
  padding: 1.5rem 1rem;
  color: var(--falcon-gray-500);
  text-align: center;
}

.command-palette__footer {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--falcon-border-color);
  background-color: var(--falcon-gray-100);
  color: var(--falcon-gray-600);
  font-size: 0.75rem;
}

.command-palette__footer kbd {
  padding: 0.05rem 0.25rem;
  border-radius: 0.1875rem;
  background-color: var(--falcon-gray-300);
  color: var(--falcon-gray-700);
}

.command-palette-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem 0.3rem 0.75rem;
  border: 1px solid var(--falcon-border-color);
  border-radius: 2rem;
  background-color: var(--falcon-card-bg, var(--falcon-body-bg));
  color: var(--falcon-gray-600);
  font-size: 0.8rem;
  line-height: 1.5;
}

.command-palette-trigger:hover,
.command-palette-trigger:focus-visible {
  border-color: var(--falcon-primary);
  color: var(--falcon-gray-800);
}

.command-palette-trigger__keys kbd {
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--falcon-border-color);
  border-radius: 0.1875rem;
  background-color: var(--falcon-gray-300);
  color: var(--falcon-gray-700);
  font-size: 0.7rem;
}

.command-palette-trigger__keys kbd + kbd {
  margin-left: 0.15rem;
}

/* Abaixo de md o espaço da navbar é do nome do usuário: sobra só a lupa. */
@media (max-width: 767.98px) {
  .command-palette-trigger {
    padding: 0.3rem 0.5rem;
    border-radius: 50%;
  }

  .command-palette-trigger__label,
  .command-palette-trigger__keys {
    display: none;
  }
}

/* Item ativo do menu principal: texto na cor primária e indicador de 3px à esquerda,
   no lugar do preenchimento sólido que o tema dá a qualquer `dropdown-item`. O grupo
   que contém o item ativo acompanha a mesma cor. */
#navbarTopNav .dropdown-item.active {
  position: relative;
  background-color: transparent;
  color: var(--falcon-primary);
  font-weight: 600;
}

#navbarTopNav .dropdown-item.active::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background-color: var(--falcon-primary);
}

#navbarTopNav .dropdown-item.active:hover,
#navbarTopNav .dropdown-item.active:focus {
  background-color: var(--falcon-dropdown-link-hover-bg);
  color: var(--falcon-primary);
}

#navbarTopNav .nav-link.active {
  color: var(--falcon-primary);
}

/* O tema marca foco com um halo de 4px na cor primária. Em volta do rótulo de um grupo
   isso vira uma moldura, bem visível no tema escuro, e o grupo abre ao receber foco de
   qualquer forma. O sublinhado diz a mesma coisa ocupando o traço do próprio texto. */
#navbarTopNav .main-menu__group:focus-visible {
  box-shadow: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Com os nove grupos ocupando a barra, o gatilho só cabe com rótulo e teclas quando
   sobra largura; abaixo disso fica só a lupa. */
@media (max-width: 1399.98px) {
  .navbar-expand-xl .command-palette-trigger {
    padding: 0.3rem 0.5rem;
    border-radius: 50%;
  }

  .navbar-expand-xl .command-palette-trigger__label,
  .navbar-expand-xl .command-palette-trigger__keys {
    display: none;
  }
}

/* A lista de permissões da credencial da API tem uma linha por recurso e uma por permissão, e cresce
   a cada recurso novo: sem limite de altura ela empurra os botões de gravar e as mensagens de erro
   do formulário para fora da tela. Rola por dentro, acompanhando a viewport para mostrar mais linhas
   em telas altas, com piso de 16rem e teto de 30rem.

   A barra não fica escondida até o hover como a do tema: é uma lista de marcação onde a completude
   importa, e quem não percebe que há mais recursos abaixo concede menos permissão do que queria —
   falha que só aparece depois, na chamada da API. O tamanho do polegar ainda diz quanto falta, o
   que a linha cortada na base não diz. */
.api-permissions-scroll {
  max-height: clamp(16rem, calc(100vh - 30rem), 30rem);
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--falcon-gray-600) transparent;
}

/* O card de consentimento é pequeno e de tamanho fixo (col-xxl-4), diferente da tela cheia da
   credencial: a lista de permissões rola por dentro com altura fixa, sem acompanhar a viewport,
   para o botão de autorizar continuar sempre visível abaixo dela. */
.supplier-consent-permissions {
  max-height: 18rem;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--falcon-gray-600) transparent;
}

.btn-monde-connect {
  background: var(--falcon-card-bg, #fff);
  color: var(--falcon-gray-900, #344050);
  border-color: var(--falcon-border-color, #d8e2ef);
}