:root { --pico-font-size: 100%; }
.container { max-width: 720px; padding-bottom: 6rem; }

/* Top nav */
.topnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1rem; background: #0d4f3c; color: #fff;
}
.topnav a { color: #fff; text-decoration: none; }
.topnav .brand { font-weight: 700; font-size: 1.05rem; }
.navlinks { display: flex; gap: 1rem; align-items: center; }
.linklike {
  background: none; border: none; color: inherit; padding: 0; margin: 0;
  font: inherit; cursor: pointer; text-decoration: underline; width: auto;
}
.topnav .linklike { text-decoration: none; opacity: .85; }

.pagetitle { margin: 1.2rem 0 .3rem; font-size: 1.15rem; }
.muted { color: var(--pico-muted-color, #777); }
.small { font-size: .85rem; }
.inline { display: inline; margin: 0; }

.alert { background: #fdecea; color: #8a1f11; padding: .6rem .8rem; border-radius: 8px; }
.notice { background: #e7f6ec; color: #14532d; padding: .6rem .8rem; border-radius: 8px; }
@media (prefers-color-scheme: dark) {
  .alert { background: #46201b; color: #ffb4a8; }
  .notice { background: #143323; color: #8fd9a8; }
}

/* Balance cards */
.balance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; }
.balance-card { margin: 0; padding: .9rem 1rem; }
.balance-card header { margin: 0 0 .2rem; padding: 0; background: none; font-weight: 600; }
.balance { font-size: 1.45rem; font-weight: 700; margin: 0 0 .2rem; }
.amount-pos { color: #1a7f4b; }
.amount-neg { color: #c0392b; }

/* Entry list */
.entry-list { display: flex; flex-direction: column; gap: .45rem; margin: .5rem 0 1rem; }
.entry-row {
  display: flex; justify-content: space-between; gap: .8rem; align-items: center;
  padding: .65rem .85rem; border-radius: 10px; text-decoration: none;
  background: var(--pico-card-background-color, #fff);
  box-shadow: var(--pico-card-box-shadow, 0 1px 3px rgba(0,0,0,.08));
  color: inherit;
}
.entry-main { display: flex; flex-direction: column; min-width: 0; }
.entry-note {
  font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw;
}
.entry-side { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; flex-shrink: 0; }
.entry-amount { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Badges */
.badge {
  display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: .1rem .45rem; border-radius: 99px;
}
.badge-topay { background: #fff3cd; color: #7a5b00; }
.badge-paid { background: #d9f2e3; color: #14532d; }
.badge-received { background: #dbeafe; color: #1e3a8a; }
@media (prefers-color-scheme: dark) {
  .badge-topay { background: #4d3f10; color: #ffdf80; }
  .badge-paid { background: #143323; color: #8fd9a8; }
  .badge-received { background: #1c2c4d; color: #a8c7fa; }
}

/* Detail */
.detail-amount { margin: .2rem 0; }
.entry-note-full { font-size: 1.05rem; white-space: pre-wrap; }
.kv td:first-child { color: var(--pico-muted-color, #777); width: 40%; }
.kv td { padding: .3rem .2rem; }
.shots { display: flex; flex-wrap: wrap; gap: .6rem; }
.shots img { max-width: 100%; width: 300px; border-radius: 10px; border: 1px solid var(--pico-muted-border-color, #ddd); }
.rowactions { display: flex; gap: .6rem; align-items: center; margin: .4rem 0; }
.danger, .danger-btn { color: #c0392b; }
.danger-btn { background: none; border: 1px solid #c0392b; width: auto; }

/* Forms */
.inlineradio { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1.2rem; }
.attach-row { display: flex; align-items: center; gap: .8rem; margin: .4rem 0 .8rem; }
.thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--pico-muted-border-color, #ddd); }
.preview-thumb { margin: .3rem 0 .8rem; }
.preview-thumb img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; }
input[type="file"] { padding: .3rem; }

/* Filters */
.filters { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .3rem; }
.filters select, .filters input, .filters button {
  width: auto; min-width: 7.5rem; margin: 0; flex-shrink: 0;
  font-size: .9rem; padding: .35rem .6rem; height: auto;
}

/* Floating action buttons */
.fabwrap { position: fixed; right: 1rem; bottom: 1.1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 10; }
.fab {
  background: #0d4f3c; color: #fff; text-decoration: none; font-weight: 600;
  padding: .65rem 1rem; border-radius: 99px; box-shadow: 0 3px 10px rgba(0,0,0,.25);
  text-align: center; font-size: .95rem;
}
.fab-alt { background: #1e3a8a; }

/* Auth card */
.authcard { max-width: 420px; margin: 8vh auto 0; }

.user-card { padding: .9rem 1rem; margin: .6rem 0; }
.user-card header { background: none; margin: 0; padding: 0; }
.user-card.inactive { opacity: .6; }

/* Report */
.filter-label { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .85rem; white-space: nowrap; }
.filter-label input { width: auto; margin: 0; font-size: .9rem; padding: .35rem .5rem; height: auto; }
.report-head h2 { margin-bottom: .1rem; }
.report-head p { margin: 0 0 .2rem; }
.report-group { margin: 1.2rem 0; break-inside: avoid; }
.report-group h3 { margin-bottom: .4rem; font-size: 1.05rem; }
.report-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.report-table th, .report-table td { padding: .35rem .5rem; border-bottom: 1px solid var(--pico-muted-border-color, #ddd); text-align: left; vertical-align: top; }
.report-table thead th { border-bottom: 2px solid currentColor; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.report-table tfoot th { border-bottom: none; border-top: 2px solid currentColor; }
.report-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-table .nowrap { white-space: nowrap; }
.report-grand { margin-top: .5rem; }

@media print {
  .topnav, .fabwrap, .noprint { display: none !important; }
  body { background: #fff; color: #000; }
  .container { max-width: 100%; padding: 0; margin: 0; }
  .report-table th, .report-table td { border-color: #999; padding: .25rem .4rem; }
  .amount-neg { color: #000; }
  a { color: inherit; text-decoration: none; }
}