/* Kids Wallet — mobile-first, RTL. Single source of styling; no inline styles anywhere. */
:root {
  --blue: #2b6cb0; --bg: #f5f7fa; --card: #ffffff; --ink: #1a202c;
  --muted: #718096; --pos: #2f855a; --neg: #c53030; --line: #e2e8f0;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: -apple-system, "Segoe UI", Arial, sans-serif; }
.container { max-width: 640px; margin: 0 auto; padding: 12px 16px 40px; }
/* `button_to` controls that must read as links: strip the native button chrome and
   inherit the surrounding text. Context rules below (.topbar, .row-actions) recolor them. */
.linklike { color: inherit; background: none; border: none; padding: 0;
  font: inherit; text-decoration: underline; cursor: pointer; }
.topbar { display: flex; justify-content: space-between; align-items: center;
  background: var(--blue); color: #fff; padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top)); }
.topbar a, .topbar .linklike { color: #fff; text-decoration: none; background: none;
  border: none; font-size: 1em; cursor: pointer; margin-inline-start: 12px; }
.brand { font-weight: 700; }
.card { background: var(--card); border-radius: 14px; padding: 16px; margin: 12px 0;
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%); }
.card h2 { margin: 0 0 4px; font-size: 1.1em; }
.card h2 a { color: var(--ink); text-decoration: none; }
.balance { font-size: 2em; font-weight: 700; margin: 4px 0 12px; }
.balance.amount-neg { color: var(--neg); }
.quick-actions { display: flex; gap: 10px; }
/* Used on both `<a>` links and `input[type="submit"]`; the appearance/font resets strip the
   UA button chrome so a submit is pixel-identical to the links it sits beside. */
.btn { display: inline-block; flex: 1; text-align: center; padding: 12px;
  border-radius: 10px; border: none; font-size: 1em; font-family: inherit;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: var(--blue); color: #fff; text-decoration: none; }
.btn-danger { background: var(--neg); }
.btn-secondary { background: var(--line); color: var(--ink); }
.entry-row { display: flex; justify-content: space-between; gap: 8px;
  padding: 10px 2px; border-bottom: 1px solid var(--line); align-items: baseline; }
.entry-row .meta { color: var(--muted); font-size: 0.85em; }
.amount-pos { color: var(--pos); font-weight: 600; }
.amount-neg { color: var(--neg); font-weight: 600; }
.form-grid { display: grid; gap: 12px; }
.form-grid label { font-size: 0.9em; color: var(--muted); display: block; margin-bottom: 4px; }
/* Text-ish fields only. Submits must keep their `.btn` look and checkboxes their native
   size, so neither may pick up the full-width white field styling. */
.form-grid input:not([type="submit"]):not([type="checkbox"]),
.form-grid select { width: 100%; padding: 12px; font-size: 1em;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; }
/* Checkbox and its text on one line, box centred against the text (RTL: box on the right). */
.form-grid .check-row { display: flex; align-items: center; gap: 8px; margin-bottom: 0; }
.form-grid .check-row input[type="checkbox"] { width: auto; margin: 0; flex: none; }
.login-form { display: grid; gap: 12px; max-width: 360px; margin: 15vh auto 0; }
.login-form input { padding: 14px; font-size: 1em; border: 1px solid var(--line); border-radius: 10px; }
/* Same UA chrome/font reset as `.btn`: without it this button renders in the browser's own
   control font while every other button in the app uses the page font. */
.login-form input[type="submit"] { background: var(--blue); color: #fff; border: none;
  font-family: inherit; appearance: none; -webkit-appearance: none; }
.flash-notice { color: var(--pos); }
.flash-alert { color: var(--neg); }
.row-actions a, .row-actions .linklike { color: var(--muted); font-size: 0.85em;
  margin-inline-start: 8px; }
/* `button_to` wraps its button in a block-level <form>; inline keeps delete on the meta line. */
.row-actions form.button_to { display: inline; }
@media (min-width: 700px) {
  .container { max-width: 900px; }
  .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* button_to wraps in a block-level form; keep the topbar logout inline beside the settings link */
.topbar form.button_to { display: inline; }