:root {
  --pico-font-size: 100%;
}
:root:not([data-theme=dark]), [data-theme=light] {
  --pico-primary: #2e7d32;
  --pico-primary-background: #2e7d32;
  --pico-primary-border: #2e7d32;
  --pico-primary-hover: #1b5e20;
  --pico-primary-hover-background: #1b5e20;
  --pico-primary-hover-border: #1b5e20;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-primary: #66bb6a;
    --pico-primary-background: #388e3c;
    --pico-primary-border: #388e3c;
    --pico-primary-hover: #81c784;
    --pico-primary-hover-background: #43a047;
    --pico-primary-hover-border: #43a047;
  }
}

.brand { font-size: 1.3rem; text-decoration: none; }
.mainnav { flex-wrap: wrap; justify-content: flex-end; }
.mainnav a[aria-current] { font-weight: 600; }
form.inline { display: inline; margin: 0; }
button.small, [role=button].small { padding: .25rem .6rem; font-size: .85rem; width: auto; margin: 0; }
.muted { color: var(--pico-muted-color); }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.badge {
  display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: 1em;
  background: #e65100; color: #fff; font-size: .75rem; text-align: center; line-height: 1.5em;
}
.swatch { display: inline-block; width: .8em; height: .8em; border-radius: 50%; margin-right: .45em; vertical-align: baseline; }

.flash { padding: .75rem 1rem; border-radius: var(--pico-border-radius); }
.flash.ok { background: color-mix(in srgb, #2e7d32 15%, transparent); }
.flash.err { background: color-mix(in srgb, #c62828 18%, transparent); }
.flash.warn { background: color-mix(in srgb, #f9a825 20%, transparent); }
.flash ul { margin: .4rem 0 0; }
#sum-diff.ok { color: #2e7d32; }
#sum-diff.warn { color: #e65100; font-weight: 600; }
.warn-dot { color: #e65100; }

.status { display: inline-block; padding: .05em .55em; border-radius: 1em; font-size: .8rem; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.status-queued, .status-processing { background: #e3f2fd; color: #0d47a1; }
.status-review { background: #fff3e0; color: #e65100; }
.status-done { background: #e8f5e9; color: #1b5e20; }
.status-failed { background: #ffebee; color: #b71c1c; }

.login { max-width: 24rem; margin: 10vh auto; }
.login h1 { text-align: center; }

.month-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
.month-nav h2 { margin: 0; min-width: 12ch; text-align: center; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pico-grid-column-gap); }
.stats article { margin-bottom: var(--pico-spacing); padding: .8rem 1rem; }
.stats .big { font-size: 1.6rem; font-weight: 700; margin: 0; }
.chart-box { position: relative; height: 280px; }
.chart-box.wide { height: 320px; }

.upload-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.upload-row label { flex: 1 1 14rem; margin: 0; }
.upload-row input, .upload-row select, .upload-row button { margin-bottom: 0; }
.upload-row button { flex: 0 0 auto; width: auto; }
.upload-row label[role=button] { position: relative; text-align: center; }
.upload-row label[role=button]:focus-within { box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); }
.camera-btn { font-size: 1.15rem; font-weight: 600; padding-block: .9rem; }
form[data-upload].busy label[role=button] { pointer-events: none; }
form[data-upload].busy label[role=button]:not([aria-busy]) { opacity: .5; }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important; opacity: 0;
}
/* mouse-only devices have no camera to aim – just offer the file picker */
@media (hover: hover) and (pointer: fine) {
  .camera-btn { display: none; }
}
.filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.filters > * { width: auto; margin-bottom: 0; }
.filters input[type=search] { flex: 1 1 14rem; }
.inline-check { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.inline-check input { margin: 0; }

.receipt-head h2 { margin-bottom: .2rem; }
.receipt-head { margin-bottom: 1rem; }
.receipt-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2rem; align-items: start; }
.receipt-image { position: sticky; top: 1rem; margin: 0; }
.receipt-image img { width: 100%; max-height: 85vh; object-fit: contain; border-radius: var(--pico-border-radius); background: #fff; }
.status-box { text-align: center; }

table.items input, table.items select { margin: 0; padding: .35rem .5rem; height: auto; }
table.items td { padding: .25rem .3rem; }
table.items .c-amount { width: 7.5rem; }
table.items .c-amount input { text-align: right; }
table.items .c-qty { width: 4.5rem; }
table.items .c-qty input { text-align: right; }
table.items small.printed { display: block; font-size: .75rem; margin-top: .1rem; overflow-wrap: anywhere; }
table.items .c-cat { width: 13rem; }
table.items .c-del { width: 2.5rem; }
.sum-line { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: flex-end; }
.actions button { width: auto; }
.secondary-actions { margin-top: 1.5rem; }
pre.raw { white-space: pre-wrap; font-size: .8rem; max-height: 30rem; overflow: auto; }

table.categories input { margin: 0; padding: .3rem .5rem; height: auto; }
table.categories input[type=color] { width: 2.5rem; height: 2rem; padding: 0; }
input.narrow { width: 5rem; }
.inline-group { display: flex; gap: .4rem; margin: 0; }
.inline-group input { margin: 0; padding: .3rem .5rem; height: auto; min-width: 9rem; }

@media (max-width: 768px) {
  header nav { flex-wrap: wrap; }
  header nav ul.mainnav { width: 100%; justify-content: space-between; margin: 0; }
  header nav ul.mainnav li { padding: .35rem .2rem; font-size: .95rem; }
  .hide-sm { display: none; }
  .upload-row { gap: .75rem; }
  .camera-btn { flex-basis: 100%; font-size: 1.3rem; padding-block: 1.2rem; }
  .stats .big { font-size: 1.2rem; }
  .receipt-layout { grid-template-columns: 1fr; gap: 1rem; }
  .receipt-image { position: static; }
  .receipt-image img { max-height: 50vh; }
  /* item rows as cards: name on top, qty + amount + category + delete below */
  table.items thead { display: none; }
  table.items, table.items tbody { display: block; }
  table.items tr {
    display: grid; grid-template-columns: 3.5rem 6.5rem 1fr 2.5rem; gap: .35rem;
    padding: .5rem 0; border-bottom: 1px solid var(--pico-muted-border-color);
  }
  table.items td { display: block; padding: 0; border: 0; width: auto !important; min-width: 0; }
  table.items input, table.items select { width: 100%; }
  table.items .c-name { grid-column: 1 / -1; }
}