/* components.css — botões, inputs, chips, tabelas, controles */

/* ===== Botões ===== */
.btn{
  appearance: none;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.07);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  transition: transform .08s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
  user-select: none;
}

.btn:hover{ background: rgba(255,255,255,.10); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity: .55; cursor: not-allowed; }

.btn.primary{
  border-color: rgba(var(--primary-rgb), .55);
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .92), rgba(var(--accent-rgb), .40));
  box-shadow: 0 14px 35px rgba(0,0,0,.22);
}
.btn.primary:hover{ background: linear-gradient(135deg, rgba(var(--primary-rgb), .98), rgba(var(--accent-rgb), .44)); }

.btn.ghost{
  background: transparent;
}
.btn.ghost:hover{ background: rgba(255,255,255,.07); }

.btn.danger{
  border-color: rgba(var(--danger-rgb), .45);
  background: rgba(var(--danger-rgb), .12);
}

.btn.icon{
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
}

.btn-sm{
  padding: 6px 10px;
  font-size: 13px;
}

.w-full{ width: 100%; }

/* ===== Campos / Inputs ===== */
.field{ display: grid; gap: 6px; margin-top: 10px; }
.field > span{ font-size: 12px; color: var(--muted); }
.field.mini{ margin-top: 0; }

.input-lite,
.field input,
.field select,
.field textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,.14);
  color: var(--text);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.field input[type="text"],
.field input[type="search"],
.field textarea,
.input-lite{
  padding: 12px 14px;
  font-size: 15px;
  background-color: var(--bg-spot-2);
}

.field input[type="number"],
.field input[type="date"],
.field select,
select.input-lite{
  padding: 10px 12px;
  font-size: 14px;
}

.field textarea{ min-height: 92px; resize: vertical; }

.input-lite::placeholder,
.field input::placeholder,
.field textarea::placeholder{ color: var(--placeholder); }

.field input:focus,
.field select:focus,
.field textarea:focus,
.input-lite:focus{
  border-color: rgba(var(--primary-rgb), .60);
  box-shadow: var(--focus);
  background: rgba(0,0,0,.10);
}

.field input:disabled,
.field select:disabled,
.input-lite:disabled{ opacity: .65; cursor: not-allowed; }

.field.field-strong input{
  font-size: 17px;
  font-weight: 800;
}

/* ===== Chips ===== */
.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.chip[data-type="ok"]{
  color: rgba(var(--ok-rgb), .95);
  border-color: rgba(var(--ok-rgb), .25);
  background: rgba(var(--ok-rgb), .12);
}

/* ===== KPIs ===== */
.kpi{
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.06);
}
.kpi-strong{
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .18), rgba(var(--accent-rgb), .10));
  border-color: rgba(var(--primary-rgb), .25);
}
.kpi-value{ font-size: 20px; font-weight: 900; margin-top: 6px; }

/* ===== Form helpers ===== */
.inline-form{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.inline-form .input-lite{ flex: 1; min-width: 220px; }

.helper{ margin-top: 10px; font-size: 13px; }

.alert{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--danger-rgb), .35);
  background: rgba(var(--danger-rgb), .12);
  color: var(--text);
}

/* Segmented (login) */
.segmented{ margin-top: 12px; display: flex; justify-content: flex-end; }
.seg-btn{
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
}
.seg-btn:hover{ background: rgba(255,255,255,.10); }
.seg-btn.is-active{ border-color: rgba(var(--primary-rgb), .45); background: rgba(var(--primary-rgb), .14); }

/* ===== Checkgrid (home) ===== */
.checkgrid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.checkgrid label{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.05);
}
.checkgrid input{ width: 18px; height: 18px; accent-color: rgb(var(--primary-rgb)); }

/* ===== Chips list ===== */
.chips-list{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ===== Table container ===== */
.table-lite{
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(0,0,0,.08);
}

.table-lite table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table-lite th,
.table-lite td{
  border: 1px solid var(--glass-border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}

.table-lite thead th{
  background: rgba(255,255,255,.10);
  font-weight: 800;
}

.table-lite tbody tr:nth-child(even) td{
  background: rgba(255,255,255,.03);
}

.table-lite tbody tr:hover td{
  background: rgba(var(--primary-rgb), .10);
}

.td-money{ white-space: nowrap; text-align: right; }
.td-action{ white-space: nowrap; text-align: right; }

/* Lançamentos em div (fallback com bordas) */
.tx-table{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tx-row{
  display: contents;
}

.tx-cell{
  padding: 10px 12px;
  border-right: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  font-size: 14px;
}

.tx-cell:last-child{
  border-right: none;
}

.tx-head .tx-cell{
  font-weight: 600;
  background: rgba(255,255,255,.10);
}

.tx-row:not(.tx-head):hover .tx-cell{
  background: rgba(124,92,255,.08);
}

.table-lite .btn,
.tx-cell .btn{
  padding: 6px 10px;
  font-size: 13px;
}

/* Cabeçalho do card + ações */
.tx-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.tx-head h2{ margin: 0; }

.tx-actions{
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.tx-actions input{ flex: 1 1 360px; min-width: 220px; }
.tx-actions select{ flex: 0 0 220px; min-width: 180px; }

.tx-body{
  width: 100%;
}

@media (max-width: 760px){
  .checkgrid{ grid-template-columns: 1fr; }
  .tx-head{ flex-wrap: wrap; }
  .tx-actions{ width: 100%; justify-content: stretch; flex-wrap: wrap; }
  .tx-actions input, .tx-actions select{ flex: 1 1 100%; min-width: 0; }
}

/* Descrição e valores no formulário */
.tx-desc{ grid-column: 1 / -1; }
#txDesc{
  min-height: 84px;
  resize: vertical;
}

.tx-form .field-strong{ grid-column: 1 / -1; }

/* Grid do formulário de transações */
.tx-form .tx-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.tx-payment{ grid-column: 1; }
.tx-amount{ grid-column: 2; }

.tx-amount input{
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
}

.tx-form .btn.primary.w-full{
  margin-top: 10px;
}

@media (max-width: 760px){
  .tx-form .tx-grid{ grid-template-columns: 1fr; }
  .tx-payment, .tx-amount{ grid-column: auto; }
  .bn-balance{ display: none; }
}

/* ===== Bottom nav ===== */
.bottom-nav{
  position: static;
  left: auto; right: auto; bottom: auto;
  z-index: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: 10px 12px;
  margin-top: 14px;
  background: var(--glass-nav-bg);
  border-top: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.bn-item{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: var(--muted);
  position: relative;
}

.bn-item:hover{ background: rgba(255,255,255,.06); color: var(--text); }

.bn-item.is-active{
  color: var(--text);
  background: rgba(var(--primary-rgb), .12);
  border-color: rgba(var(--primary-rgb), .22);
}

.bn-ico svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
  opacity: .85;
  transition: transform .18s ease, opacity .18s ease;
}

.bn-item.is-active .bn-ico svg{
  opacity: 1;
  transform: translateY(-1px);
  filter: drop-shadow(0 2px 6px rgba(var(--primary-rgb), .35));
}

.bn-item:hover .bn-ico svg{
  opacity: .95;
}

.bn-item[aria-label="Home"] .bn-ico svg,
.bn-item[aria-label="Mês"] .bn-ico svg{
  transform: scale(.95);
}

.bn-item small{
  font-size: 11px;
  letter-spacing: .02em;
}

.bn-active-pill{
  position: absolute;
  bottom: 6px;
  width: 36px;
  height: 4px;
  border-radius: 99px;
  background: rgba(var(--primary-rgb), .90);
}

.bn-balance{
  min-width: 124px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.05);
  display: grid;
  align-content: center;
}

.bn-balance-label{ font-size: 11px; color: var(--muted); }
.bn-balance-value{ font-weight: 900; }

/* Select styling */
#themeSelect,#currencySelect,#monthSelect{
  background: var(--bg-spot-1);
  color: #fff;
}

@media (max-width: 520px){
  .checkgrid{ grid-template-columns: 1fr; }
  .bn-balance{ display: none; }
}

/* =========================
   MÊS — tabela e gráficos responsivos
========================= */

/* Canvas do Chart.js sempre responsivo dentro do card */
.chart-box canvas{
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Tabela: no mobile, vira scroll horizontal ao invés de “espremer” tudo */
.table-lite{
  overflow: hidden; /* default mantém borda/raio bonitos */
}

/* Em telas menores, permite scroll horizontal com toque */
@media (max-width: 760px){
  .table-lite{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-lite table{
    min-width: 720px; /* garante colunas legíveis, sem virar “tudo quebrado” */
  }
}

/* Recuperação de senha */
.hidden{
  display: none;
}

.btn-forgot{
  margin-top: 10px;
  font-size: 13px;
  opacity: .85;
}

.btn-forgot:hover{
  opacity: 1;
}

/* Alerta de sucesso */
.alert.success{
  border-color: rgba(var(--ok-rgb), .35);
  background: rgba(var(--ok-rgb), .14);
  color: var(--text);
}