* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 26%, transparent); outline-offset: 2px; }
.hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { letter-spacing: -.035em; }
small { color: var(--text-muted); }
code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }

label > span, .field-label { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--text-soft); font-size: .88rem; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; padding: 11px 12px; color: var(--text); background: var(--surface); transition: border-color .18s, box-shadow .18s, background .18s; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--line-strong)); }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); outline: none; }
textarea { resize: vertical; min-height: 90px; }
input[type="month"], input[type="date"] { color-scheme: light dark; }

button { border: 0; cursor: pointer; }
.primary, .secondary, .danger, .text-button, .icon-button, .row-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 39px; border-radius: 9px; padding: 9px 13px; font-size: .86rem; font-weight: 750; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease; }
.primary { color: #fff; background: var(--primary); box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 22%, transparent); }
.primary:hover { transform: translateY(-1px); background: var(--primary-dark); box-shadow: 0 10px 26px color-mix(in srgb, var(--primary) 26%, transparent); }
.secondary { border: 1px solid var(--line-strong); color: var(--text); background: var(--surface); }
.secondary:hover { border-color: var(--teal-line); color: var(--primary-dark); background: var(--primary-soft); }
.danger { border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--line)); color: var(--danger); background: var(--danger-soft); }
.text-button { min-height: auto; padding: 5px 0; color: var(--primary); background: transparent; }
.icon-button { width: 37px; height: 37px; padding: 0; border: 1px solid var(--line); color: var(--text-soft); background: var(--surface-soft); }
.row-button { min-height: 31px; padding: 5px 9px; border: 1px solid var(--line); color: var(--text-soft); background: var(--surface); font-size: .78rem; }
.row-button:hover { color: var(--primary); border-color: var(--teal-line); background: var(--primary-soft); }
/* Destructive row action (delete). Uses the danger token so a ledger delete is
   visually distinct from Statement/Edit, which never remove data. */
.row-button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 26%, var(--line)); }
.row-button.danger:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
button:disabled { opacity: .56; cursor: not-allowed; transform: none !important; }

svg { display: block; }


/* Match the original Tizori app's slim translucent pill scrollbars. */
html,
body,
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

*::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-corner {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  min-height: 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
  background-clip: padding-box;
}

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}