/* Components - buttons, tables, forms, modals */

/* Buttons */
.btn{ padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); color:var(--text); cursor:pointer}
.btn.danger{ background:#362020; border-color:#5c2b2b; color:#ffb8b8}
.btn.solid{ background:#213544}
.btn.primary{ background:var(--mint); color:#042420; border:none}
.btn:disabled{ opacity:.5; cursor:not-allowed}

.btn-ghost{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 12px;
}
.btn-ghost:hover{ border-color: rgba(46,230,184,.55); box-shadow: 0 0 0 2px rgba(46,230,184,.15) inset; }
.btn-ghost.is-disabled, .btn-ghost:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn-ghost.small{ padding: 6px 10px; font-size: 13px; margin-left: 8px; vertical-align: middle; }
.btn-ghost.disabled, .btn-ghost[disabled]{
  opacity: 0.4; pointer-events: none; cursor: not-allowed;
}

.btn-primary{
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #0a0f0e;
  font-weight: 600;
  transition: filter .12s ease, box-shadow .12s ease, transform .02s ease;
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-primary:active{ transform: translateY(1px); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }

.icon-btn{
  width:36px;height:36px;border-radius:12px;background:var(--mint);color:#042420;border:none;cursor:pointer;
  font-size:20px;line-height:1;font-weight:700;display:grid;place-items:center;
}

/* Tables */
.table{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px}
.table thead th{
  background:var(--panel-2); border-bottom:1px solid var(--line); padding:12px 14px; color:var(--muted);
  font-weight:600; text-align:left; position:sticky; top:0;
}
.table thead th.num{ text-align:right;}
.table tbody td{
  padding:14px; border-bottom:1px solid var(--line); vertical-align:middle;
}
.table .num{ text-align:right; font-variant-numeric: tabular-nums;}

.tx-table tbody tr:hover{ background:var(--accent);}
.tx-table{ table-layout:fixed; }
.tx-table th, .tx-table td{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Left-align Amount column specifically on Transactions */
.tx-table thead th:nth-child(5), .tx-table tbody td:nth-child(5){ text-align:left; }

/* Status pills */
.status-pill{ display:inline-flex; gap:6px; align-items:center; padding:4px 10px; border-radius:999px; background:#1a2330; color:var(--muted);}
.status-pill::before{ content:""; width:8px;height:8px;border-radius:4px;background:#caa73d}
.status-pill.expected::before{
  background: #9aa2af;
}
.status-pill.ok{
  padding: 4px 10px;
  background: transparent;
  color: transparent;
  border: 0;
  min-width: 0;
  line-height: 1;
  vertical-align: middle;
}
.status-pill.ok::before{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  display: inline-block;
}
.status-pill.skipped::before{
  background:#ff4d4d !important;
}

/* Transaction row styling */
.tx-table tbody tr.skipped td{
  text-decoration: line-through;
  opacity: .75;
}
.tx-table tbody tr.expected td{
  opacity: .6;
}
.tx-table tbody tr.skipped td:last-child {
  text-decoration: none;
  opacity: 1;
}

/* Amount coloring by group + status */
.tx-table .amount-income.pending { color: rgba(52, 241, 201, 0.40); }
.tx-table .amount-income.cleared { color: var(--mint); }
.tx-table .amount-expense.pending { color: rgba(255, 107, 107, 0.40); }
.tx-table .amount-expense.cleared { color: var(--danger); }

/* Date group separator rows */
.tx-table tbody tr.date-sep td{
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Expected filter checkbox */
.chk{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background: rgba(255,255,255,0.02);
  cursor:pointer;
  user-select:none;
}
.chk:focus{ outline:2px solid var(--mint); outline-offset:2px; }
.chk .box{
  width:16px; height:16px;
  border:1.5px solid rgba(255,255,255,0.35);
  border-radius:4px;
  position:relative;
}
.chk[aria-checked="true"] .box{
  background: var(--mint);
  border-color: var(--mint);
}
.chk[aria-checked="true"] .box::after{
  content:"";
  position:absolute;
  left:4px; top:1px;
  width:5px; height:9px;
  border:2px solid #0f1419;
  border-top:0; border-left:0;
  transform: rotate(45deg);
}
.chk .lbl{ font-size:12px; color: var(--muted); }