/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 */

/* Additional custom styles */

/* Sheet nativo: entra da direita. Fora do Tailwind para vencer o stylesheet UA do <dialog>. */
dialog.native-dialog-sheet {
  inset-inline-end: 0;
  margin: 0;
  margin-inline-start: auto;
  height: 100dvh;
  max-height: 100dvh;
  width: min(100vw, 42rem);
  max-width: 42rem;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 300ms ease-out;
}

dialog.native-dialog-sheet.is-open {
  transform: translateX(0);
}

dialog.native-dialog-sheet::backdrop {
  background: rgb(2 6 23 / 0.7);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 300ms ease-out;
}

dialog.native-dialog-sheet.is-open::backdrop {
  opacity: 1;
}

dialog.native-dialog-modal {
  width: min(calc(100vw - 2rem), 36rem);
  max-height: min(70dvh, 40rem);
  margin: auto;
  overflow: auto;
  border-radius: 1rem;
}

dialog.native-dialog-modal::backdrop {
  background: rgb(2 6 23 / 0.92);
}

/*
 * O blur no ::backdrop do <dialog> faz o Chrome não pintar o conteúdo
 * (o fundo fica borrado e o cartão "Carregando…" some). O véu fica
 * num filho, atrás do cartão.
 */
#app-page-loading[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

#app-page-loading::backdrop {
  background: transparent;
  backdrop-filter: none;
}

#app-page-loading .app-page-loading-scrim {
  position: absolute;
  inset: 0;
  background: rgb(28 25 23 / 0.2);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

html.dark #app-page-loading .app-page-loading-scrim {
  background: rgb(0 0 0 / 0.4);
}

#app-page-loading .app-page-loading-card {
  position: relative;
  z-index: 1;
}

/* Linha ativa da solicitação. bg-sky-50 sozinho vira um bloco claro no tema escuro. */
tr[data-item].is-selecionada {
  background-color: rgb(240 249 255);
}

html.dark tr[data-item].is-selecionada {
  background-color: rgb(56 189 248 / 0.14);
}