/* Custom styling on top of Pico.css */

:root {
  --pico-font-size: 95%;
  --money-neg: #c0392b;
  --money-pos: #1e874b;
}

main.container { max-width: 1180px; padding-block: 1.5rem; }

.topbar { border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: .5rem; }
.topbar nav { padding-block: .25rem; }
.topbar nav a.active { font-weight: 700; }

.env-badge {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  padding: .15rem .5rem; border-radius: 999px; font-weight: 700;
}
.env-sandbox { background: #fde68a; color: #92400e; }
.env-production { background: #bbf7d0; color: #14532d; }

/* Page header */
.page-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap;
}
.page-head hgroup { margin: 0; }
.page-head .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.page-head .actions button, .page-head .actions [role=button] { margin: 0; width: auto; }

/* Numbers */
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.muted { color: var(--pico-muted-color); }
.small { font-size: .8rem; }
.center { text-align: center; }

.money { font-variant-numeric: tabular-nums; font-weight: 600; }
.money.neg { color: var(--money-neg); }
.money.pos { color: var(--money-pos); }

/* Summary cards */
.summary-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem; margin: 1.25rem 0;
}
.summary-grid article { margin: 0; padding: 1rem; }
.summary-grid header { text-transform: capitalize; color: var(--pico-muted-color); padding: 0; margin-bottom: .25rem; border: 0; }
.summary-grid .big { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Item cards */
.item-card { padding: 1rem 1.25rem; }
.item-card > header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; border: 0; padding: 0; margin-bottom: .5rem;
}
.item-card.needs-auth { border-left: 4px solid #f59e0b; }
.rename-btn {
  background: none; border: 0; width: auto; margin: 0 0 0 .15rem; padding: .1rem .3rem;
  color: var(--pico-muted-color); cursor: pointer; font-size: .85rem; line-height: 1; vertical-align: middle;
}
.rename-btn:hover { color: var(--pico-primary, #0172ad); background: none; }
.item-actions { display: flex; gap: .5rem; }
.item-actions button { margin: 0; width: auto; padding: .35rem .75rem; font-size: .85rem; }
.item-card table { margin: 0; }

.empty { text-align: center; padding: 2.5rem; }

.badge {
  font-size: .7rem; padding: .1rem .45rem; border-radius: 4px; font-weight: 600;
  vertical-align: middle;
}
.badge-warn { background: #fef3c7; color: #92400e; }
.badge-pending { background: #e0e7ff; color: #3730a3; }

/* Filters */
.filters { margin: 1rem 0; padding: 1rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }
.filters .grid { gap: .75rem; }
.filters label { font-size: .8rem; margin-bottom: .5rem; }
.filters input, .filters select { margin-bottom: 0; }
.filter-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .5rem; flex-wrap: wrap; }
.filter-foot button { width: auto; margin: 0; padding: .35rem .75rem; }

/* Transaction table */
#txn-table { font-size: .9rem; }
#txn-table th.sortable { cursor: pointer; user-select: none; }
#txn-table th.sort-asc::after { content: " ▲"; font-size: .7em; }
#txn-table th.sort-desc::after { content: " ▼"; font-size: .7em; }
.txn-row, .acct-row { cursor: pointer; }
.txn-row:hover, .acct-row:hover { background: var(--pico-secondary-focus, rgba(0,0,0,.03)); }

/* Tag chips */
.chip {
  display: inline-flex; align-items: center; gap: .25rem;
  background: var(--pico-secondary-background, #e2e8f0); color: var(--pico-secondary-inverse, #1e293b);
  border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; margin: .1rem .15rem .1rem 0;
}
.chip .x { cursor: pointer; font-weight: 700; line-height: 1; text-decoration: none; }
.chip .x:hover { color: var(--money-neg); }

/* Detail drawer */
.detail-row > td { background: var(--pico-card-sectioning-background-color, #f8fafc); }
.detail { display: flex; flex-direction: column; gap: .6rem; padding: .25rem 0; }
.detail-meta { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: .8rem; color: var(--pico-muted-color); }
.detail .note-input { margin: 0; }
.tag-editor { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tag-editor .tag-input { margin: 0; max-width: 160px; padding: .2rem .5rem; }

.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0; }
.pager button { width: auto; margin: 0; padding: .35rem .9rem; }

/* Toasts */
#toast-host { position: fixed; bottom: 1rem; right: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 1000; }
.toast {
  background: #1e293b; color: #fff; padding: .7rem 1rem; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2); opacity: 0; transform: translateY(8px);
  transition: opacity .25s, transform .25s; max-width: 360px; font-size: .9rem;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: #14532d; }
.toast-error { background: #7f1d1d; }