/*
 * Aparência do portal.
 *
 * O padrão é a identidade do Atrio Remote, descrita em docs/IDENTIDADE_VISUAL.md.
 * Antes era um azul genérico, escolhido quando a identidade ainda não existia; um
 * produto que se apresenta sem marca até alguém configurá-la parece inacabado na
 * primeira tela que o cliente vê.
 *
 * As cores vivem em variáveis porque personalizar é redefinir variável, não
 * reescrever regra. A folha /branding/theme.css, gerada pelo serviço, redefine
 * apenas --brand, --accent, --paper, --brand-ink e --paper-ink. Nenhuma regra
 * daqui deve depender de valor literal dessas cinco — as duas de tinta são
 * decididas pelo serviço a partir da luminância, e não escolhidas por ninguém.
 */

:root {
  /* Azul Atrio: logotipo, títulos e componentes estruturais. */
  --brand: #063B7A;

  /* Azul Profundo: estado pressionado e áreas de maior contraste. */
  --brand-strong: #08254A;

  /*
   * Texto sobre a cor primária.
   *
   * Variável, e não branco fixo, porque a cor primária é personalizável: um
   * cliente que escolha um tom claro precisa de texto escuro no botão. Quem
   * decide é o serviço, pela luminância da cor escolhida — deixar isso como mais
   * um campo do console produziria, com certeza, alguma instalação com botão
   * ilegível.
   */
  --brand-ink: #FFFFFF;

  /*
   * Ciano Conexão: foco, link e indicação de atividade.
   *
   * Em área pequena de propósito. A identidade diz que o ciano em grande
   * superfície tira a sobriedade da marca, e é o tipo de regra que se perde se
   * não estiver escrita ao lado do valor.
   */
  --accent: #00BFD8;

  /* Grafite Azulado e Cinza Ardósia. */
  --ink: #172B3A;
  --ink-soft: #657789;

  /*
   * Fundo da tela. Escuro de propósito: a tela de login é um cartão claro sobre
   * esta moldura, e o cartão só se separa dela se as duas não forem da mesma
   * família. O Gelo #F3F8FA da paleta ficava indistinguível do branco do cartão.
   */
  --paper: #1E3B47;
  --card: #FFFFFF;
  --edge: #DCE6EC;

  /*
   * Texto que fica DIRETO sobre o fundo da tela, como o rodapé do cliente.
   *
   * Variável, e decidida pelo serviço a partir da luminância do fundo escolhido:
   * com fundo escuro precisa ser claro, com fundo claro precisa ser escuro. O
   * valor aqui é o par do --paper acima.
   */
  --paper-ink: #C8D6DE;

  /* Erro / bloqueado, da paleta de estados funcionais. */
  --danger: #C43D4B;

  --bar-height: 3rem;

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);

  /*
   * Inter é a tipografia institucional, e entra se estiver instalada na máquina de
   * quem acessa. O produto não a embarca: font-src é 'self', então seria preciso
   * servir o arquivo daqui, e uma família completa são centenas de kilobytes por
   * sessão para ganhar uma diferença que quase ninguém nota num formulário de
   * login. A identidade prevê Arial ou Helvetica como alternativa, e o resto da
   * pilha cobre o que sobra.
   */
  font: 1rem/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica,
    sans-serif;
}

/* Barra ------------------------------------------------------------ */

.bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--bar-height);
  padding: 0 1rem;
  background: var(--card);
  border-bottom: 1px solid var(--edge);
  flex: none;
}

/*
 * O recurso aberto, ao lado da marca.
 *
 * Discreto de propósito: durante uma sessão a barra é a única coisa entre quem está
 * trabalhando e a tela remota, e o assunto da tela não é o portal.
 */
.session-resource {
  color: var(--ink-soft);
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
}

.session-resource::before {
  content: '·';
  margin-right: 0.75rem;
}

.brand {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.bar-spacer {
  flex: 1;
}

.who {
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.link {
  background: none;
  border: 0;
  padding: 0.25rem 0.5rem;
  color: var(--brand);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: 0.25rem;
}

.link:hover {
  /*
   * Tinta clara fixa, e nao --paper: o fundo da tela virou escuro e e
   * personalizavel, e usa-lo aqui pintaria um retangulo escuro dentro da barra
   * branca. --edge nao e personalizavel e existe justamente como tom de
   * separacao.
   */
  background: var(--edge);
}

/* Telas ------------------------------------------------------------ */

main {
  flex: 1;
  min-height: 0;
  display: flex;
}

.view {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.view[hidden] {
  display: none;
}

.view.fill {
  padding: 0;
  position: relative;
  align-items: stretch;
}

/*
 * A tela de login, que é a personalizável.
 *
 * A classe existe para a folha de tema ter onde pendurar a imagem de fundo do
 * cliente, sem precisar alcançar `body` — o fundo é da tela de login, e não do
 * portal inteiro: durante uma sessão RDP o assunto da tela é a área de trabalho
 * remota, e uma imagem por baixo dela seria só peso.
 */
.view-login {
  background-color: var(--paper);

  /*
   * Coluna, para o rodapé do cliente ficar abaixo do cartão em vez de ao lado.
   * O cartão continua centrado porque `.view` já centra nos dois eixos.
   */
  flex-direction: column;
  gap: 1rem;
}

/*
 * Os textos do cliente.
 *
 * Todos com `hidden` no HTML: uma instalação sem personalização não deve mostrar
 * espaço reservado para texto que não existe.
 */
.welcome {
  margin: 0 0 0.5rem;
  color: var(--ink-soft);
}

/*
 * Aviso legal e informações de suporte, dentro do cartão e abaixo do botão.
 *
 * `pre-line` porque um aviso legal costuma vir com quebras de linha, e elas são
 * conteúdo — mas o texto continua sendo texto: chega por textContent, então a
 * quebra é a única coisa que a marcação preserva.
 */
.legal,
.support {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
  white-space: pre-line;
}

.legal {
  padding-top: 0.875rem;
  border-top: 1px solid var(--edge);
  max-height: 9rem;
  overflow-y: auto;
}

.footer {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--paper-ink);
  text-align: center;
  max-width: 30rem;
  white-space: pre-line;
}

/*
 * Rótulo e campo juntos, para o campo de domínio poder ser escondido inteiro.
 *
 * Sem o agrupador, ocultar o campo deixaria o rótulo órfão na tela — e o rótulo
 * sozinho é pior que o campo visível.
 */
.field {
  display: contents;
}

.field[hidden] {
  display: none;
}

.card {
  width: 100%;
  max-width: 22rem;
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 0.75rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  /*
   * Sombra suave só no cartão de login, para ele se separar de uma imagem de
   * fundo qualquer. Sem ela, um fundo claro enviado pelo cliente faria o cartão
   * desaparecer na imagem.
   */
  box-shadow: 0 1px 2px rgb(8 37 74 / 6%), 0 8px 24px rgb(8 37 74 / 8%);
}

/*
 * O logotipo: o do cliente, ou o do produto quando ninguém enviou um.
 *
 * Altura fixa e largura automática porque logotipo de cliente vem em proporção
 * imprevisível — o do produto é uma assinatura horizontal de 3:1, e um quadrado
 * esticado para caber numa caixa fixa é o defeito visual mais comum deste tipo de
 * personalização. `object-fit: contain` garante que nada seja cortado nem
 * distorcido, seja qual for a proporção.
 */
.brand-mark {
  align-self: center;
  height: 2.75rem;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 0.75rem;
}

.card.wide {
  max-width: 34rem;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

label {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-top: 0.5rem;
}

input {
  font: inherit;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--edge);
  border-radius: 0.375rem;
  background: var(--card);
  color: var(--ink);
}

/*
 * Foco em Ciano Conexão, e não na cor primária.
 *
 * A identidade reserva o ciano para estado ativo e conexão, que é exatamente o que
 * foco é. E resolve um problema prático da personalização: um cliente cuja cor
 * primária seja parecida com a borda do campo teria um anel de foco quase
 * invisível.
 */
input:focus-visible,
button:focus-visible,
.display:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button[type="submit"],
#session-back {
  margin-top: 1rem;
  font: inherit;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 0.375rem;
  background: var(--brand);

  /* Decidido pelo serviço a partir da luminância da cor primária. Ver :root. */
  color: var(--brand-ink);
  cursor: pointer;
}

button[type="submit"]:hover,
#session-back:hover {
  background: var(--brand-strong);
}

button[disabled] {
  opacity: 0.6;
  cursor: default;
}

.error {
  margin: 0.75rem 0 0;
  color: var(--danger);
  font-size: 0.875rem;
}

.hint {
  margin: 0.75rem 0 0;
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

/* Catálogo --------------------------------------------------------- */

.resources {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.resource {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font: inherit;
  text-align: left;
  padding: 0.75rem;
  border: 1px solid var(--edge);
  border-radius: 0.5rem;
  background: var(--card);
  color: inherit;
  cursor: pointer;
}

.resource:hover {
  border-color: var(--brand);
}

.resource-name {
  font-weight: 500;
}

.resource-kind {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

/* Sessão ----------------------------------------------------------- */

.display {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0f14;
  overflow: hidden;

  /*
   * O cursor da sessão é desenhado pelo próprio Guacamole dentro da tela. Sem
   * esconder o do navegador aparecem dois, e o que responde ao movimento não é o
   * que o usuário está olhando.
   */
  cursor: none;
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(11, 15, 20, 0.85);
  color: #f5f7fa;
}

.overlay[hidden] {
  display: none;
}

.overlay-text {
  margin: 0;
  font-size: 0.9375rem;
}

/* Painéis da barra ------------------------------------------------- */

/*
 * Suspensos da barra, e não empurrando o conteúdo.
 *
 * `position: absolute` contra a barra, que por isso é `position: relative`. Abrir um
 * painel no meio de uma sessão não pode redimensionar a tela remota: cada mudança de
 * geometria é renegociada com o motor, e a imagem inteira é redesenhada.
 */
.panel {
  position: absolute;
  top: 100%;
  right: 1rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--card);
  border: 1px solid var(--edge);
  border-top: 0;
  border-radius: 0 0 0.5rem 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
  max-width: min(30rem, calc(100vw - 2rem));
}

.panel[hidden] {
  display: none;
}

.panel-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/*
 * Botão de painel: fundo --paper, e tinta --paper-ink.
 *
 * A tinta era `inherit`, e isso funcionava enquanto --paper era o Gelo claro. Quando
 * a moldura da tela de login passou a ser #1E3B47, o botão virou azul escuro e a
 * tinta continuou herdando --ink, que é escura: texto preto sobre fundo escuro, sem
 * que nada no código mudasse. É a forma silenciosa deste defeito — uma variável muda
 * de tom e todo lugar que herdava tinta em cima dela fica ilegível de uma vez.
 *
 * --paper-ink, e não branco fixo, porque ela é decidida pelo serviço a partir da
 * luminância de --paper: um cliente que personalize o fundo para uma cor clara
 * receberia tinta escura, e branco fixo o deixaria com o mesmo defeito ao contrário.
 */
.panel button {
  align-self: flex-start;
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--edge);
  border-radius: 0.375rem;
  background: var(--paper);
  color: var(--paper-ink);
  cursor: pointer;
}

.panel button:hover {
  border-color: var(--brand);
}

#clipboard-text {
  display: block;
  width: min(28rem, 100%);
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.375rem;
  border: 1px solid var(--edge);
  border-radius: 0.375rem;
  resize: vertical;
}

/* Impressões -------------------------------------------------------- */

.documents {
  list-style: none;
  margin: 0.375rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 8rem;
  overflow-y: auto;
}

.document {
  width: 100%;
  text-align: left;
  font-size: 0.8125rem;
}

#documents-count {
  color: var(--ink-soft);
}

.viewer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.viewer[hidden] {
  display: none;
}

.viewer-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--card);
  border-bottom: 1px solid var(--edge);
  flex: none;
}

.viewer-name {
  font-size: 0.875rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer iframe {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 0;
  background: var(--card);
}

/*
 * O item da área de transferência, marcado quando há algo a resolver.
 *
 * Marcar em vez de abrir o painel sozinho: um painel que se abre por cima da sessão
 * sem ninguém ter pedido interrompe quem está trabalhando, e o que há para resolver
 * — texto que o navegador recusou copiar — pode esperar o próximo intervalo.
 */
.link.is-alert {
  font-weight: 600;
}

.link.is-alert::after {
  content: '';
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  margin-left: 0.375rem;
  vertical-align: 0.125rem;
  border-radius: 50%;
  background: var(--brand);
}

/*
 * Baixar, ao lado de abrir, em cada impressão.
 *
 * Discreto: abrir é a ação comum, baixar é a saída para quando o visualizador do
 * navegador não desenha o documento — e para guardar o arquivo, que a moldura não
 * permite.
 */
.document-download {
  align-self: center;
  font-size: 0.8125rem;
  color: var(--brand);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}

/*
 * Mesmo caso do botão de painel: o fundo do hover é --paper, que é escuro, e a cor
 * do texto era --brand, que também é. Encontrado junto com o outro, procurando todo
 * lugar que pinta --paper atrás de tinta que não é --paper-ink.
 */
.document-download:hover {
  background: var(--paper);
  color: var(--paper-ink);
  text-decoration: underline;
}

.documents li {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
}

/*
  Arquivos da sessão.

  O caminho em destaque, e não num rodapé: a transferência é pelo portal e não por
  disco redirecionado, então quem envia precisa saber em que pasta procurar dentro da
  sessão. É a única informação de caminho do servidor que este portal mostra.
*/
.files-path {
  display: block;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: 6px;
  background: var(--edge);
  color: var(--ink);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.files-drop {
  margin-bottom: 0.75rem;
  padding: 0.875rem;
  border: 1px dashed var(--edge);
  border-radius: 8px;
  text-align: center;
}

/* Realce só enquanto o arquivo está sobre a área: é o retorno que diz que soltar vale. */
.files-drop-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.files-drop .panel-hint {
  margin-bottom: 0.5rem;
}

#files-count {
  color: var(--ink-soft);
}