/* Complements to Pico CSS; keep this minimal. */

table.transactions th[scope="rowgroup"] {
  padding-top: calc(var(--pico-spacing) * 1.5);
  color: var(--pico-muted-color);
  font-size: 0.875em;
  font-weight: normal;
}

table.transactions td.cleared {
  width: 1%;
}

table.transactions td.cleared input {
  margin: 0;
}

table.transactions td.amount {
  text-align: right;
  white-space: nowrap;
}

a[aria-disabled="true"] {
  opacity: var(--pico-form-element-disabled-opacity);
  pointer-events: none;
}

/* Floating action button (possibly a dropdown, with its menu opening upwards) */

body > main {
  padding-bottom: 6rem;
}

button.fab,
details.dropdown.fab {
  position: fixed;
  right: max(1.5rem, env(safe-area-inset-right));
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  z-index: 10;
  margin: 0;
}

button.fab,
details.dropdown.fab > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border-radius: 50%;
  box-shadow: var(--pico-card-box-shadow);
  font-size: 2rem;
  line-height: 1;
}

details.dropdown.fab > summary::after {
  display: none;
}

details.dropdown.fab > summary + ul {
  top: auto;
  right: 0;
  bottom: 100%;
  left: auto;
  width: max-content;
  margin-bottom: 0.5rem;
}

/* Label suggestions (replacing <datalist>, unsupported by Firefox for Android) */

.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pico-spacing) * 0.5);
  margin-top: calc(var(--pico-spacing) * -0.5);
  margin-bottom: var(--pico-spacing);
}

.suggestions button {
  width: auto;
  margin: 0;
  padding: 0.25rem 0.75rem;
  font-size: 0.875em;
}

table.transactions tr.transaction {
  cursor: pointer;
}

/* Pico only makes submit buttons full-width; do the same for other buttons at the bottom of dialogs */
dialog form > button,
dialog article > button,
dialog article > a[role="button"] {
  width: 100%;
}

/* long URLs must not overflow dialogs */
dialog code {
  overflow-wrap: anywhere;
}

/* "Three dots" menu in the top bar: no chevron, menu aligned to the right */

nav details.dropdown.menu > summary {
  border: none;
  background: none;
  color: var(--pico-primary);
  font-size: 1.5em;
  line-height: 1;
}

details.dropdown.menu > summary::after {
  display: none;
}

details.dropdown.menu > summary + ul {
  right: 0;
  left: auto;
}

/* Cloud icons (sync status), in the top bar and on the account cards */
a.sync-indicator svg {
  display: block;
}

.sync-indicator.synced {
  color: var(--pico-primary);
}

.sync-indicator.dirty {
  color: var(--pico-del-color);
}

.sync-indicator.offline {
  color: var(--pico-muted-color);
}

article .sync-indicator svg {
  vertical-align: baseline;
}

/* QR code of the synchronization URL (always dark on light, to remain scannable in dark mode) */
figure.qrcode {
  max-width: 16rem;
  margin: 0 auto var(--pico-spacing);
}

figure.qrcode svg {
  display: block;
  width: 100%;
  height: auto;
}

p.sync-error {
  color: var(--pico-del-color);
}

/* QR code scanner */
figure.qrscan video {
  display: block;
  width: 100%;
  border-radius: var(--pico-border-radius);
}

/* App icon (💸) at the top left, linking to the home screen */
nav a.brand {
  font-size: 1.5em;
  line-height: 1;
}