/* Tally custom styles + dark-mode remap. Loaded on every page (and the login
   page) alongside the purged Tailwind build (app.css). Kept hand-written (not
   Tailwind) — it remaps the zinc palette for dark mode by class specificity. */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
.num-mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.pill { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.btn-cat {
  padding: 6px 10px; font-size: 12px; border-radius: 6px;
  border: 1px solid #e4e4e7; background: white; transition: all 0.1s;
  min-width: 32px; min-height: 32px; /* touch-friendly */
}
.btn-cat:hover, .btn-cat:active { transform: translateY(-1px); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
/* Accept / confirm action in the inbox — a real button with the same weight as
   the .btn-cat category buttons, not an underlined text link. Solid green reads
   the same in light and dark, so no dark-mode remap is needed. */
.btn-accept {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 5px 12px; font-size: 12px; font-weight: 600; border-radius: 6px;
  background: #059669; color: #fff; border: 1px solid #059669;
  min-height: 32px; white-space: nowrap; transition: background 0.1s;
}
.btn-accept:hover, .btn-accept:active { background: #047857; border-color: #047857; }
/* Keyboard focus ring. Broad default for every interactive element (only
   shows on keyboard focus, never on mouse click), plus the custom controls
   that aren't native focusable elements. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn-cat:focus-visible, th[data-sort]:focus-visible, summary:focus-visible {
  outline: 2px solid #2563eb; outline-offset: 2px;
}

/* Notch / home-indicator safe areas. base.html sets viewport-fit=cover, so in
   the installed PWA the page draws under the status bar and side insets; pad
   the sticky header and footer back into the safe area. */
header { padding-top: env(safe-area-inset-top); }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
footer { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
/* HTMX in-flight indicator — animated dots so single LLM calls feel responsive. */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }
@keyframes thinking-pulse {
  0%, 80%, 100% { opacity: .3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}
.thinking::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px; margin: 0 2px;
  border-radius: 50%; background: currentColor;
  animation: thinking-pulse 1.4s infinite both;
}
/* Tables: horizontal scroll on narrow screens. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.num-mono, .num-mono td, .num-mono th, td.num-mono, .amount { white-space: nowrap; }
/* Sortable column indicators. data-sort on a th makes it clickable. */
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: #18181b; }
th.sort-asc::after  { content: " ↑"; opacity: .6; }
th.sort-desc::after { content: " ↓"; opacity: .6; }

/* === Dark mode (class strategy) ===
   Rather than sprinkle dark: variants across ~19 templates we remap the
   surface/text/border utilities once. `.dark .bg-white` (0,2,0) wins over
   `.bg-white` (0,1,0) with no !important. */
html.dark { background-color: #09090b; color-scheme: dark; }
.dark .bg-white                 { background-color: #18181b; }  /* zinc-900 */
.dark .bg-zinc-50               { background-color: #09090b; }  /* zinc-950 */
.dark .bg-zinc-100              { background-color: #27272a; }  /* zinc-800 */
/* Hover must be LIGHTER than the surface to be visible. */
.dark .hover\:bg-zinc-100:hover { background-color: #27272a; }
.dark .hover\:bg-zinc-50:hover  { background-color: #27272a; }
.dark .hover\:text-zinc-900:hover { color: #f4f4f5; }
.dark .text-zinc-900            { color: #f4f4f5; }  /* zinc-100 */
.dark .text-zinc-800            { color: #e4e4e7; }
.dark .text-zinc-700            { color: #d4d4d8; }  /* zinc-300 */
.dark .text-zinc-600            { color: #b8b8c0; }
.dark .text-zinc-500            { color: #a1a1aa; }  /* zinc-400 */
.dark .text-zinc-400            { color: #8b8b93; }
.dark .text-zinc-300            { color: #71717a; }
.dark .border-zinc-100          { border-color: #27272a; }
.dark .border-zinc-200          { border-color: #27272a; }  /* zinc-800 */
.dark .border-zinc-300          { border-color: #3f3f46; }  /* zinc-700 */
.dark .divide-zinc-100 > * + *  { border-color: #27272a; }
.dark .btn-cat { background: #27272a; border-color: #3f3f46; color: #e4e4e7; }
.dark .btn-cat:hover, .dark .btn-cat:active { box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.dark input, .dark select, .dark textarea { color-scheme: dark; }
.dark select, .dark option { background-color: #18181b; color: #f4f4f5; }
.dark th[data-sort]:hover { color: #f4f4f5; }
.dark .bg-amber-50   { background-color: #2a2108; }
.dark .bg-amber-200  { background-color: #3a2d0c; }
.dark .border-amber-200 { border-color: #4d3c12; }
.dark .text-amber-600, .dark .text-amber-700, .dark .text-amber-800 { color: #fcd34d; }
.dark .bg-emerald-50  { background-color: #0a2a1c; }
.dark .bg-emerald-100 { background-color: #0f3527; }
.dark .border-emerald-200 { border-color: #1c5240; }
.dark .text-emerald-600, .dark .text-emerald-700, .dark .text-emerald-800 { color: #6ee7b7; }
.dark .bg-rose-50  { background-color: #2a0f15; }
.dark .bg-rose-100 { background-color: #3a141c; }
.dark .text-rose-600, .dark .text-rose-700 { color: #fda4af; }
.dark .bg-sky-100    { background-color: #0a2436; }
.dark .text-sky-800  { color: #7dd3fc; }
.dark .bg-violet-100 { background-color: #1c1533; }
.dark .text-violet-800 { color: #c4b5fd; }
.dark .bg-zinc-200   { background-color: #3f3f46; }  /* zinc-700 (e.g. progress tracks) */