/*
 * Tribus — folha de estilo do aplicativo.
 *
 * A moldura veio do desenho aprovado: um cartao branco muito arredondado sobre
 * fundo cinza, com a trilha marrom flutuando dentro dele. Tres coisas nao sao
 * decoracao e explicam quase todo o arquivo:
 *
 *   - a trilha e so icone, e nao vai ate o fim do cartao. O rotulo mora no
 *     title, e a saida e uma pilula solta embaixo, fora da trilha;
 *   - nao ha tabela em lugar nenhum. Cada lancamento e uma linha-cartao com
 *     chip de icone; o que esta vencido vem com a linha inteira preenchida de
 *     marrom, que e o mesmo gesto do aparelho ligado no desenho;
 *   - a moldura tem altura fixa e quem rola e a lista de dentro. E um programa
 *     de mesa, nao uma pagina: a barra de cima e a coluna da direita nao somem
 *     ao descer a lista.
 *
 * O marrom e a cor de selecao e de acao. O azul da logo carrega titulo, porque
 * marrom sobre branco nao tem contraste para texto. As duas saem da marca.
 */

:root {
  --tbs-brown: #b38553;
  --tbs-brown-deep: #9c7043;
  --tbs-navy: #10396f;

  --tbs-ink: #1d2739;
  --tbs-soft: #6d7789;
  --tbs-muted: #98a1b1;

  --tbs-page: #e8ecf1;
  --tbs-card: #ffffff;
  --tbs-sunken: #f4f6f9;
  --tbs-line: #eef1f6;

  /* Cor de dado: a da marca fica fora da faixa de luminosidade e do piso de
     croma que paleta de grafico exige. Estas passaram nas seis verificacoes e
     continuam sendo o marrom e o azul da Tribus. */
  --tbs-in: #1e5aa8;
  --tbs-out: #c07c28;

  /* Estado. Reservadas: nunca viram "mais uma cor". */
  --tbs-good: #1c7a52;
  --tbs-warn: #9a6608;
  --tbs-bad: #b04236;

  /* O canto da moldura. Mora numa variavel porque a trilha tem de acompanhar:
     com numeros diferentes, o canto dela fica mais redondo que o da janela e
     sobra o branco da aplicacao por baixo. A casca do programa muda so isto. */
  --tbs-frame: 34px;

  --tbs-shadow: 0 1px 2px rgb(22 32 50 / 5%), 0 10px 30px rgb(22 32 50 / 7%);
  --tbs-shadow-lift: 0 2px 6px rgb(22 32 50 / 6%), 0 18px 44px rgb(22 32 50 / 10%);
  --tbs-shadow-brown: 0 10px 24px rgb(179 133 83 / 34%);
}

* { box-sizing: border-box; }

/*
 * Barra de rolagem.
 *
 * A do sistema e cinza, grossa e quadrada, e num cartao de canto arredondado
 * ela aparece como uma peca de outro programa. Esta e fina, arredondada e da
 * cor da marca, e vale em tudo que rola: a lista, a coluna da direita, o modal.
 *
 * As duas sintaxes existem porque nenhuma cobre tudo sozinha: a padrao
 * (scrollbar-color) nao deixa arredondar, e a do WebKit nao existe no Firefox.
 * O aplicativo de mesa roda sobre WebView2, que usa a do WebKit.
 */
* {
  scrollbar-width: thin;
  scrollbar-color: #d6c0a5 transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #d9c5ac;
  border-radius: 999px;
  /* A borda transparente encolhe o polegar sem encolher a area de clique: ele
     fica fino de ver e continua facil de pegar com o mouse. */
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--tbs-brown); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--tbs-page);
  color: var(--tbs-ink);
  font: 14px/1.45 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { margin: 0; color: var(--tbs-navy); font-weight: 650; letter-spacing: -0.015em; }
a { color: var(--tbs-navy); }
.tbs-icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ================================================================= moldura */

.tbs-app {
  position: relative;
  max-width: 1280px;
  height: calc(100vh - 44px);
  margin: 22px auto;
  background: var(--tbs-card);
  border-radius: var(--tbs-frame);
  box-shadow: var(--tbs-shadow-lift);
  overflow: hidden;
}

/* A trilha flutua: canto de cima acompanha o cartao, o de baixo e redondo, e
   ela para antes do fim para a pilula de sair caber embaixo. */
.tbs-rail {
  position: absolute;
  inset: 0 auto auto 0;
  width: 76px;
  height: 74%;
  background: var(--tbs-brown);
  border-radius: var(--tbs-frame) 0 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  gap: 4px;
  z-index: 2;
}

.tbs-rail-brand { display: block; padding: 4px 0 14px; }
.tbs-rail-brand img { display: block; }

.tbs-rail-item {
  width: 58px;
  height: 46px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 14px;
  text-decoration: none;
  transition: background-color 140ms ease;
}
.tbs-rail-item:hover { background: rgb(255 255 255 / 16%); }

/* A secao atual e um recorte branco que encosta na area de conteudo: a pagina
   entrando na trilha, e nao uma cor diferente. */
.tbs-rail-item.tbs-current {
  width: 76px;
  background: var(--tbs-card);
  color: var(--tbs-brown-deep);
  border-radius: 16px 0 0 16px;
  margin-right: -16px;
  padding-right: 16px;
}

.tbs-exit {
  position: absolute;
  left: 20px;
  bottom: 22px;
  z-index: 2;
}
.tbs-exit button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  background: var(--tbs-sunken);
  color: var(--tbs-soft);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.tbs-exit button:hover { background: #e9edf3; }

/* ================================================================= conteudo */

.tbs-main {
  margin-left: 76px;
  height: 100%;
  padding: 24px 28px 24px 32px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tbs-top { display: flex; align-items: center; gap: 20px; flex: none; }

.tbs-search {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 400px;
  max-width: 100%;
  height: 46px;
  padding: 0 18px;
  background: var(--tbs-card);
  border-radius: 999px;
  box-shadow: var(--tbs-shadow);
  color: var(--tbs-muted);
}
.tbs-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--tbs-ink);
  outline: none;
}
.tbs-search:focus-within { box-shadow: var(--tbs-shadow), 0 0 0 2px var(--tbs-brown); }

.tbs-who { margin-left: auto; text-align: right; line-height: 1.25; }
.tbs-who b { display: block; font-size: 13px; font-weight: 650; color: var(--tbs-navy); }
.tbs-who span { display: block; font-size: 11.5px; color: var(--tbs-muted); }

.tbs-hello { margin: 20px 0 3px; font-size: 27px; font-weight: 400; color: var(--tbs-navy); }
.tbs-hello b { font-weight: 700; color: var(--tbs-brown-deep); }

.tbs-cap {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tbs-muted);
}

.tbs-cols {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 26px;
  margin-top: 14px;
}
.tbs-cols.tbs-alone { grid-template-columns: minmax(0, 1fr); }

/*
 * A area de trabalho fica sobre um painel cinza rebaixado, e so ela: a coluna
 * da direita continua no branco. E o que, no desenho, separa "onde se trabalha"
 * de "o que esta ao lado" sem precisar de linha divisoria nenhuma.
 */
.tbs-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--tbs-sunken);
  border-radius: 26px;
  padding: 18px 20px 20px;
}
.tbs-aside { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; }

/* ================================================================== numeros */

/* Espacamento da coluna da esquerda mora aqui, e nao em cada tela: assim uma
   tela nova nasce com o mesmo ritmo das outras sem ninguem lembrar. */
.tbs-left > .tbs-cap { margin: 16px 0 9px; flex: none; }
.tbs-left > .tbs-cap:first-child { margin-top: 4px; }
.tbs-left > .tbs-feed + .tbs-cap { margin-top: 14px; }
.tbs-aside > .tbs-cap { margin: 6px 0 2px; }
.tbs-aside > .tbs-cap:first-child { margin-top: 0; }

.tbs-strip { display: flex; gap: 12px; flex: none; margin-top: 14px; }

.tbs-tile {
  flex: 1;
  min-width: 0;
  padding: 13px 16px 14px;
  background: var(--tbs-card);
  border-radius: 20px;
  box-shadow: var(--tbs-shadow);
}
.tbs-tile p {
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tbs-soft);
}
.tbs-tile p i { width: 9px; height: 9px; border-radius: 3px; display: block; flex: none; }
.tbs-mark-in { background: var(--tbs-in); }
.tbs-mark-out { background: var(--tbs-out); }

.tbs-tile strong {
  display: block;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tbs-tile strong small { font-size: 12px; color: var(--tbs-muted); font-weight: 600; margin-right: 3px; }
.tbs-tile span { font-size: 11px; color: var(--tbs-muted); }

/* O resultado tem polaridade, e a cor vem com a palavra junto: cor sozinha nao
   diz nada a quem nao a distingue. */
.tbs-tile-win strong { color: var(--tbs-good); }
.tbs-tile-lose strong { color: var(--tbs-bad); }

/* ================================================================== filtros */

.tbs-filters { display: flex; gap: 8px; margin: 14px 0 10px; flex: none; flex-wrap: wrap; }
.tbs-pill {
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--tbs-card);
  box-shadow: var(--tbs-shadow);
  font-size: 12px;
  font-weight: 600;
  color: var(--tbs-soft);
  text-decoration: none;
  white-space: nowrap;
}
.tbs-pill:hover { color: var(--tbs-ink); }
.tbs-pill.tbs-on { background: var(--tbs-brown); color: #fff; box-shadow: var(--tbs-shadow-brown); }

/* =================================================================== linhas */

/* Quem rola e a lista, nao a pagina: a barra de cima e a coluna da direita
   ficam onde estao. */
.tbs-feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 4px 4px 2px;
}

.tbs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  background: var(--tbs-card);
  border-radius: 17px;
  box-shadow: var(--tbs-shadow);
  flex: none;
}

.tbs-row-icon {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--tbs-sunken);
  color: var(--tbs-brown-deep);
}
.tbs-row-text { flex: 1; min-width: 0; }
.tbs-row-text b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tbs-row-text span {
  display: block;
  font-size: 11.5px;
  color: var(--tbs-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tbs-row-date { font-size: 12px; color: var(--tbs-soft); font-variant-numeric: tabular-nums; flex: none; }
.tbs-row-amount {
  width: 112px;
  text-align: right;
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.tbs-amount-in { color: var(--tbs-good); }
.tbs-row-actions { display: flex; gap: 6px; flex: none; }

/* Vencido: a linha inteira preenchida. E o mesmo gesto do aparelho ligado no
   desenho, e faz o atraso saltar sem precisar de outra tela. */
.tbs-row-hot { background: var(--tbs-brown); box-shadow: var(--tbs-shadow-brown); }
.tbs-row-hot .tbs-row-icon { background: rgb(255 255 255 / 22%); color: #fff; }
.tbs-row-hot .tbs-row-text b,
.tbs-row-hot .tbs-row-date,
.tbs-row-hot .tbs-row-amount { color: #fff; }
.tbs-row-hot .tbs-row-text span { color: rgb(255 255 255 / 80%); }

/* Linha resolvida: sem peso, mas ainda legivel. */
.tbs-row-done { box-shadow: none; background: var(--tbs-sunken); }
.tbs-row-done .tbs-row-text b { color: var(--tbs-soft); font-weight: 550; }
.tbs-row-done .tbs-row-amount { color: var(--tbs-soft); }

.tbs-ghost {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 11px;
  background: var(--tbs-sunken);
  color: var(--tbs-soft);
  cursor: pointer;
  padding: 0;
}
.tbs-ghost:hover { background: #e6ebf1; color: var(--tbs-ink); }
.tbs-row-hot .tbs-ghost { background: rgb(255 255 255 / 22%); color: #fff; }
.tbs-row-hot .tbs-ghost:hover { background: rgb(255 255 255 / 34%); }
.tbs-ghost-danger:hover { color: var(--tbs-bad); }

.tbs-empty {
  margin: 0;
  padding: 26px 18px;
  text-align: center;
  color: var(--tbs-muted);
  font-size: 13px;
  background: var(--tbs-card);
  border-radius: 17px;
  box-shadow: var(--tbs-shadow);
}

/* ============================================================ coluna direita */

/*
 * Faixa de acao: icone em cima, rotulo embaixo.
 *
 * O icone desce 17px dentro da faixa, aqui e nao so no painel — a coluna da
 * direita usa a mesma peca, e sem isto os dois lugares ficavam com o icone
 * grudado no topo. O `top` nao muda o tamanho da caixa, so desenha mais abaixo;
 * o vao de 20px devolve ao rotulo o respiro que o deslocamento come.
 *
 * O line-height fixo e de proposito: o rotulo e um no de texto solto dentro do
 * grid, e a folga da linha dele era parte do desalinho.
 */
.tbs-act {
  display: grid;
  place-items: center;
  gap: 20px;
  height: 86px;
  line-height: 1.2;
  background: var(--tbs-card);
  border-radius: 18px;
  box-shadow: var(--tbs-shadow);
  color: var(--tbs-soft);
  text-decoration: none;
  font-size: 11.5px;
  flex: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  text-align: center;
}
.tbs-act .tbs-icon { position: relative; top: 17px; }
.tbs-act:hover { color: var(--tbs-ink); }
.tbs-act-on { background: var(--tbs-brown); color: #fff; box-shadow: var(--tbs-shadow-brown); }
.tbs-act-on:hover { color: #fff; background: var(--tbs-brown-deep); }

.tbs-mini {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  background: var(--tbs-card);
  border-radius: 16px;
  box-shadow: var(--tbs-shadow);
  flex: none;
}
.tbs-mini-icon {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: var(--tbs-sunken);
  border-radius: 11px;
  color: var(--tbs-brown-deep);
}
.tbs-mini-text { flex: 1; min-width: 0; }
.tbs-mini-text b { display: block; font-size: 12.5px; font-weight: 600; }
.tbs-mini-text span { display: block; font-size: 11px; color: var(--tbs-muted); }
.tbs-mini-value { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbs-mini-hot { background: var(--tbs-brown); box-shadow: var(--tbs-shadow-brown); }
.tbs-mini-hot .tbs-mini-icon { background: rgb(255 255 255 / 22%); color: #fff; }
.tbs-mini-hot .tbs-mini-text b, .tbs-mini-hot .tbs-mini-value { color: #fff; }
.tbs-mini-hot .tbs-mini-text span { color: rgb(255 255 255 / 80%); }

/* =================================================================== botoes */

.tbs-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--tbs-card);
  box-shadow: var(--tbs-shadow);
  color: var(--tbs-soft);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.tbs-button:hover { color: var(--tbs-ink); }
.tbs-button-primary { background: var(--tbs-brown); color: #fff; box-shadow: var(--tbs-shadow-brown); }
.tbs-button-primary:hover { background: var(--tbs-brown-deep); color: #fff; }
.tbs-button-flat { box-shadow: none; background: var(--tbs-sunken); }
.tbs-button:disabled { opacity: 0.5; cursor: not-allowed; }

.tbs-head { display: flex; align-items: center; gap: 12px; flex: none; }
.tbs-head > :last-child:not(h1):not(p) { margin-left: auto; }

/* ================================================================ formulario */

.tbs-form { display: flex; flex-direction: column; gap: 14px; }
.tbs-field { display: flex; flex-direction: column; gap: 5px; }
.tbs-field > label { font-size: 12.5px; font-weight: 600; color: var(--tbs-soft); }
.tbs-field input,
.tbs-field select,
.tbs-field textarea {
  padding: 11px 13px;
  border: 1px solid var(--tbs-line);
  border-radius: 13px;
  background: var(--tbs-card);
  font: inherit;
  color: var(--tbs-ink);
  outline: none;
}
.tbs-field input:focus,
.tbs-field select:focus,
.tbs-field textarea:focus { border-color: var(--tbs-brown); box-shadow: 0 0 0 3px rgb(179 133 83 / 18%); }
.tbs-field-hint { font-size: 11.5px; color: var(--tbs-muted); }
.tbs-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tbs-form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 2px; }

/* ================================================================== recados */

.tbs-notice-slot { flex: none; margin-top: 12px; }
.tbs-notice {
  margin: 0;
  padding: 11px 16px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 550;
}
.tbs-notice-ok { background: #e6f4ed; color: var(--tbs-good); }
.tbs-notice-warn { background: #fbf1dd; color: var(--tbs-warn); }
.tbs-notice-error { background: #fbeae8; color: var(--tbs-bad); }

/* =================================================================== modal */

/* Insercao e alteracao em modal, nunca em aba nova: a pessoa nao perde de vista
   a lista de onde saiu. */
.tbs-modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tbs-modal[hidden] { display: none; }
.tbs-modal-backdrop { position: absolute; inset: 0; background: rgb(22 32 50 / 42%); }
.tbs-modal-box {
  position: relative;
  width: min(520px, 100%);
  max-height: 88vh;
  overflow: auto;
  padding: 20px 22px 22px;
  background: var(--tbs-card);
  border-radius: 26px;
  box-shadow: 0 24px 60px rgb(22 32 50 / 26%);
}
.tbs-modal-head { display: flex; align-items: center; margin-bottom: 14px; }
.tbs-modal-head h2 { font-size: 17px; }
.tbs-modal-close {
  margin-left: auto;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--tbs-muted);
  cursor: pointer;
  padding: 0 4px;
}

/* ==================================================================== login */

/*
 * Tela dividida: a marca de um lado, a porta do outro. A borda esquerda do
 * painel marrom e um arco grande, e nao um corte reto — e o que faz os dois
 * lados parecerem uma peca so em vez de duas colunas.
 */
.tbs-login { display: flex; min-height: 100vh; background: var(--tbs-card); }

.tbs-login-left {
  flex: 1;
  position: relative;
  display: grid;
  place-items: center;
  padding: 40px;
  overflow: hidden;
}
.tbs-login-left > img { width: min(330px, 70%); height: auto; position: relative; }

/* As curvas finas saem do canto de cima e descem: dao movimento sem ocupar
   lugar, e nao competem com a logo. */
.tbs-login-curves { position: absolute; inset: 0; pointer-events: none; }

.tbs-login-right {
  width: 46%;
  min-width: 420px;
  background: var(--tbs-brown);
  border-radius: 200px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 30px 76px;
  position: relative;
}
.tbs-login-right > img { width: 190px; height: auto; }

.tbs-login-card {
  width: min(330px, 100%);
  background: var(--tbs-card);
  border-radius: 18px;
  padding: 24px 26px 26px;
  box-shadow: 0 18px 44px rgb(0 0 0 / 16%);
}
.tbs-login-card h1 { font-size: 17px; font-weight: 550; text-align: center; margin-bottom: 18px; }
.tbs-login-card .tbs-field input { border-radius: 9px; }
.tbs-login-card .tbs-button { width: 100%; justify-content: center; padding: 11px; border-radius: 9px; }

.tbs-login-forgot {
  display: block;
  text-align: right;
  font-size: 11.5px;
  color: var(--tbs-brown-deep);
  text-decoration: none;
  margin-top: -4px;
}

.tbs-login-foot {
  position: absolute;
  bottom: 22px;
  left: 20px;
  right: 20px;
  text-align: center;
  font-size: 10.5px;
  color: rgb(255 255 255 / 76%);
  line-height: 1.8;
}
.tbs-login-foot b { color: #fff; }

@media (max-width: 860px) {
  /* Em tela estreita o lado da marca sai inteiro: a logo ja esta no painel. */
  .tbs-login-left { display: none; }
  .tbs-login-right { width: 100%; min-width: 0; border-radius: 0; }
}

/* ================================================================= estreito */

@media (max-width: 1040px) {
  .tbs-cols { grid-template-columns: minmax(0, 1fr); }
  .tbs-aside { flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .tbs-aside > * { flex: 1 1 200px; }
  .tbs-cap { flex-basis: 100%; }
}

@media (max-width: 720px) {
  .tbs-app { height: auto; min-height: 100vh; margin: 0; border-radius: 0; }
  .tbs-rail {
    position: static;
    flex-direction: row;
    width: 100%;
    height: auto;
    border-radius: 0;
    padding: 8px 10px;
    overflow-x: auto;
  }
  .tbs-rail-brand { display: none; }
  .tbs-rail-item { border-radius: 12px; flex: none; }
  .tbs-rail-item.tbs-current { width: 58px; margin-right: 0; padding-right: 0; border-radius: 12px; }

  .tbs-main { margin-left: 0; height: auto; padding: 16px 14px 90px; }
  .tbs-feed { overflow: visible; }
  .tbs-strip { flex-direction: column; }
  .tbs-who { display: none; }
  .tbs-search { width: 100%; }
  .tbs-row-date { display: none; }
  .tbs-row-amount { width: auto; }
  .tbs-pair { grid-template-columns: minmax(0, 1fr); }
  /* A saida vira uma pilula fixa no rodape, para nao sumir no fim da rolagem. */
  .tbs-exit { left: 14px; bottom: 14px; position: fixed; }
}

/* =================================================== painel (o desenho)

   Reproduz o desenho aprovado: o mostrador no meio, os tres quadradinhos a
   esquerda, as barras a direita — tudo sobre o painel cinza rebaixado — e as
   quatro faixas de acao embaixo, FORA do painel, no branco.

   Vive ao lado da lista, em /painel, para os dois serem comparados no mesmo
   sistema e com o mesmo dado. Um dos dois sai depois. */

.tbs-board { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }

/*
 * O painel abraça o mostrador em vez de esticar. Quando ele crescia para ocupar
 * a altura toda, sobrava um vazio grande em cima e embaixo da peça — o cinza
 * virava fundo, e não moldura.
 */
.tbs-board-panel {
  flex: none;
  background: var(--tbs-sunken);
  border-radius: 26px;
  padding: 16px 24px 18px;
  display: flex;
  flex-direction: column;
}

.tbs-board-stage {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 40px);
  margin-top: 4px;
}

/* O espaço que sobra vai para a lista do que foi resolvido por último, que é
   quem cresce e rola. */
.tbs-board-recent {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 4px 2px 2px;
}

/* --- os tres quadradinhos, como Cool / Heat / Auto */
.tbs-chips { display: flex; flex-direction: column; gap: 12px; flex: none; }
.tbs-chip {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  background: var(--tbs-card);
  border-radius: 20px;
  box-shadow: var(--tbs-shadow);
  color: var(--tbs-soft);
  text-decoration: none;
  font-size: 10.5px;
  text-align: center;
  line-height: 1.15;
}
.tbs-chip:hover { color: var(--tbs-ink); }
.tbs-chip-on { background: var(--tbs-brown); color: #fff; box-shadow: var(--tbs-shadow-brown); }
.tbs-chip-on:hover { color: #fff; }

/* --- os passos de mes, como o menos e o mais */
.tbs-step {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 16px;
  background: var(--tbs-card);
  box-shadow: var(--tbs-shadow);
  color: var(--tbs-soft);
  text-decoration: none;
  cursor: pointer;
}
.tbs-step .tbs-icon { stroke-width: 2.1; display: block; }
.tbs-step:hover { color: var(--tbs-ink); }

/* --- o mostrador */
.tbs-dial { position: relative; width: 236px; height: 236px; flex: none; }
.tbs-dial svg { display: block; }
.tbs-dial figcaption {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 2px;
}
.tbs-dial .tbs-dial-label {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 74%);
}
.tbs-dial .tbs-dial-value {
  font-size: 24.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tbs-dial .tbs-dial-note { font-size: 10.5px; color: rgb(255 255 255 / 80%); }

/* --- as barras dos meses */
.tbs-bars { display: flex; align-items: flex-end; gap: 14px; height: 130px; flex: none; padding-bottom: 18px; margin-right: 6px; }
.tbs-bars div {
  width: 10px;
  min-height: 4px;
  background: #e2e7ee;
  border-radius: 6px;
  position: relative;
  align-self: flex-end;
}
.tbs-bars div.tbs-bar-now { background: var(--tbs-brown); }
.tbs-bars small {
  position: absolute;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  color: var(--tbs-muted);
}

/* --- as quatro faixas de acao, fora do painel

   Ficam logo abaixo do mostrador e ACIMA da lista: sao o que se faz, e nao o
   que se olha. Icone maior que o das outras pecas, porque aqui ele e o alvo do
   clique e nao um enfeite ao lado do texto. */
.tbs-board-actions { display: flex; gap: 12px; flex: none; }
.tbs-board-actions .tbs-act { flex: 1; height: 102px; gap: 26px; font-size: 12.5px; }
/* No painel o icone e maior: ali ele e o alvo do clique, e nao um enfeite ao
   lado do texto. A descida de 17px vem da regra geral de .tbs-act. */
.tbs-board-actions .tbs-act .tbs-icon { width: 34px; height: 34px; stroke-width: 1.45; }

@media (max-width: 1180px) {
  .tbs-bars { display: none; }
}
@media (max-width: 900px) {
  .tbs-board-stage { flex-direction: column; gap: 18px; }
  .tbs-chips { flex-direction: row; }
  .tbs-board-actions { flex-wrap: wrap; }
  .tbs-board-actions .tbs-act { flex: 1 1 140px; }
}

/* ================================================== balão e lista própria

   O balão do sistema e a lista aberta de um <select> são desenhados pelo
   sistema operacional, não pela página: fonte dele, canto quadrado, atraso
   dele. No meio de uma moldura arredondada eles aparecem como peça de outro
   programa — e no aplicativo de mesa isso fica gritante.

   Os dois abaixo são nossos. O <select> continua existindo no HTML e é ele
   que o formulário envia: a lista bonita só o dirige. Sem JavaScript, o
   select nativo aparece e funciona como sempre. */

/*
 * Azul da marca, e nao o cinza-escuro do sistema.
 *
 * O balao do Windows 11 tambem e uma caixa escura arredondada: o primeiro
 * desenho ficou tao parecido com ele que a troca nao se notava. Este e
 * inconfundivelmente nosso — a cor dos titulos, e a mesma sombra dos cartoes.
 */
.tbs-tip {
  position: fixed;
  z-index: 300;
  padding: 7px 12px;
  background: var(--tbs-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.3;
  border-radius: 10px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 20px rgb(16 57 111 / 34%);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 110ms ease, transform 110ms ease;
}
.tbs-tip[data-open] { opacity: 1; transform: none; }
.tbs-tip[hidden] { display: none; }

/* ---------------------------------------------------------- lista propria */

.tbs-select { position: relative; }
/* O nativo fica no HTML — e ele que o formulario envia —, so sai da vista. */
.tbs-select > select { position: absolute; opacity: 0; pointer-events: none; width: 100%; height: 100%; }

.tbs-select-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--tbs-line);
  border-radius: 13px;
  background: var(--tbs-card);
  font: inherit;
  color: var(--tbs-ink);
  text-align: left;
  cursor: pointer;
}
.tbs-select-button:focus-visible,
.tbs-select[data-open] .tbs-select-button {
  outline: none;
  border-color: var(--tbs-brown);
  box-shadow: 0 0 0 3px rgb(179 133 83 / 18%);
}
.tbs-select-button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbs-select-button svg { flex: none; color: var(--tbs-muted); transition: transform 140ms ease; }
.tbs-select[data-open] .tbs-select-button svg { transform: rotate(180deg); }

.tbs-select-list {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  background: var(--tbs-card);
  border-radius: 16px;
  box-shadow: 0 2px 6px rgb(22 32 50 / 8%), 0 18px 40px rgb(22 32 50 / 18%);
  list-style: none;
  margin: 0;
}
.tbs-select-list[hidden] { display: none; }

/* Abre para cima quando nao ha espaco embaixo — dentro de um modal isso e o
   caso comum, e uma lista cortada pela borda e pior que uma lista invertida. */
.tbs-select[data-up] .tbs-select-list { top: auto; bottom: calc(100% + 6px); }

.tbs-select-list li {
  padding: 9px 12px;
  border-radius: 11px;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tbs-select-list li[data-active] { background: var(--tbs-sunken); }
.tbs-select-list li[aria-selected='true'] {
  background: var(--tbs-brown);
  color: #fff;
  font-weight: 600;
}