/* Hand-authored utilities the vendored TailAdmin Tailwind build (style.css) did not
   compile. Kept separate from that generated file so it survives a kit refresh and
   stays clearly ours. Loaded AFTER style.css, so equal-specificity rules here win. */

/* The vendored build only emitted `.xl:grid-cols-3`; the merchant overview wants the
   three period cards (Today / week-to-date / month-to-date) in one row at every width. */
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Same reason: the merchant home top row is Balance + the three period cards on one
   row (four across), and the vendored build never emitted `.grid-cols-4`. */
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* The vendored build didn't emit `.tabular-nums`; the money figures use it so digits
   share a fixed advance width and line up cleanly across the cards. */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* A sidebar menu item rendered as a form submit button (the Logout item posts a
   CSRF-protected form). Strip the native button chrome so it matches the <a> items. */
button.menu-item {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

/* The vendored TailAdmin build hides the native date picker indicator
   (input[type="date"]::-webkit-calendar-picker-indicator { display: none }) because it
   ships flatpickr. We use the NATIVE picker instead, so restore the indicator — this
   rule loads after style.css at equal specificity, so `display: block` wins. In dark
   mode (the `.dark` ancestor class) the default near-black glyph would vanish, so
   invert it to a light one. */
input[type="date"]::-webkit-calendar-picker-indicator {
  display: block;
  cursor: pointer;
  opacity: 0.65;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
.dark input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}