/* Small additions on top of Tailwind. */

[x-cloak] { display: none !important; }

html { -webkit-tap-highlight-color: transparent; }

/* Strip the spinner from money inputs — agents type digits, they don't nudge. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Subtle flash when HTMX swaps the commission preview, so the change is noticed. */
#commission-preview.htmx-swapping { opacity: 0.55; }
#commission-preview { transition: opacity 120ms ease-in-out; }

/* Tabular figures keep money columns aligned. */
.font-mono, td, .tabular { font-variant-numeric: tabular-nums; }

/* Chart.js runs with maintainAspectRatio off, so a canvas sizes itself to its
   parent — the height attribute on the element is ignored. Every chart is
   wrapped in a height-constrained div; this is the backstop if one is ever
   added without a wrapper. */
canvas { max-height: 60vh; }

@media print {
  aside, nav, form, .no-print, button { display: none !important; }
  body { background: #fff; }
}

/* Alpine sets x-cloak on elements that must not appear until it has decided
   whether to show them. The table/grid switch renders BOTH layouts and toggles
   one off, so without this the page flashes duplicated content on every load. */
[x-cloak] { display: none !important; }