/* Import Design System */
@import './design-system.css';

/* Adding tailwind */
@import "tailwindcss";

/* Additional app-wide styles go here */

/* Print-only scoping for PrintReceiptModal (components/shared/PrintReceiptModal.jsx) —
   when printing, hide everything on the page except the #print-receipt
   block and lay it out as its own page, rather than opening a separate
   window/tab just to print a receipt. */
@media print {
  body * {
    visibility: hidden;
  }
  #print-receipt,
  #print-receipt * {
    visibility: visible;
  }
  #print-receipt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

/* S/N column on every table on the Reports page (owner's ask, 2026-09-14).
   Generated here rather than hand-added to each of the ~20 report tables, so a
   table added later gets it too. Rows number from 1 per table; footer rows
   (totals) get an empty cell so their columns stay aligned. */
[data-component="AdminReports"] table tbody {
  counter-reset: report-sn;
}
[data-component="AdminReports"] table tr::before {
  display: table-cell;
  padding: 1rem 1.5rem;
  vertical-align: middle;
  white-space: nowrap;
  text-align: left;
}
[data-component="AdminReports"] table thead tr::before {
  content: "S/N";
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: color-mix(in srgb, var(--text-color) 76%, transparent);
}
[data-component="AdminReports"] table tbody tr::before {
  counter-increment: report-sn;
  content: counter(report-sn);
  color: color-mix(in srgb, var(--text-color) 60%, transparent);
}
[data-component="AdminReports"] table tfoot tr::before {
  content: "";
}

/* S/N and the first column stay put while a wide report table scrolls
   sideways, so it is always clear which row - which guest - the figures on the
   right belong to (owner's ask, 2026-09-18). The S/N cell gets a fixed width
   so the first column knows exactly where to stop. Both need a solid
   background, or the columns scrolling underneath would show through them. A
   first cell spanning several columns (Analysis's Net Total) is left alone: it
   would slide across and cover the figures beside it. */
[data-component="AdminReports"] table tr::before {
  position: sticky;
  left: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 5.5rem;
  min-width: 5.5rem;
  background-color: #fff;
}
[data-component="AdminReports"] table tr > :first-child:not([colspan]) {
  position: sticky;
  left: 5.5rem;
  z-index: 2;
  background-color: #fff;
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--text-color) 12%, transparent);
}
[data-component="AdminReports"] table tfoot tr::before,
[data-component="AdminReports"] table tfoot tr > :first-child:not([colspan]) {
  background-color: color-mix(in srgb, var(--text-color) 3%, #fff);
}
/* The hovered row's grey (below) reaches the pinned cells too; the first
   column keeps its dividing line on top of it. */
[data-component="AdminReports"] table tbody tr:hover::before {
  box-shadow: inset 0 0 0 100vmax rgb(128 128 128 / 14%);
}
[data-component="AdminReports"] table tbody tr:hover > :first-child:not([colspan]) {
  box-shadow:
    inset -1px 0 0 color-mix(in srgb, var(--text-color) 12%, transparent),
    inset 0 0 0 100vmax rgb(128 128 128 / 14%);
}

/* Every table, on the guest site and in the PMS: the row under the pointer
   turns grey, so it is always clear which row is being read (owner's ask,
   2026-09-18). Drawn as an inset shade over each cell rather than as the
   row's background, so a row with a colour of its own keeps it underneath.
   Mid-grey at low strength darkens a light row and lightens a dark one - the
   guest site's rooms table is dark. */
tbody tr:hover > td,
tbody tr:hover > th {
  box-shadow: inset 0 0 0 100vmax rgb(128 128 128 / 14%);
}
/* A pinned identifying column (ui.js's table.stickyTd, and the pages that
   hand-roll it) draws its dividing line as a box-shadow, which the rule above
   replaces outright - so the line vanished on whichever row the pointer was
   over. Same fix as Reports' own first column above: both shadows together. */
tbody tr:hover > td.sticky {
  box-shadow:
    inset -1px 0 0 color-mix(in srgb, var(--text-color) 12%, transparent),
    inset 0 0 0 100vmax rgb(128 128 128 / 14%);
}

/* Motion in the admin (2026-09-19). Table rows fade in as they're inserted -
   a new arrival, a freshly loaded page of results - but never on a mere
   re-render, since a CSS animation only runs when its element enters the
   page. Room Chart bars grow in from their start date the same way. Plain
   keyframes rather than the motion library, since these are bulk elements
   (components/shared/motion.js has the component-level animations). Fill
   mode is `backwards`, not `both`: an animation still in effect after it ends
   would keep each row a stacking context of its own for good, trapping
   anything that overflows a row beneath the next one. */
[data-component="AdminRoot"] tbody > tr {
  animation: admin-row-in 0.3s ease-out backwards;
}
@keyframes admin-row-in {
  from { opacity: 0; }
}
.admin-bar-in {
  transform-origin: left center;
  animation: admin-bar-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes admin-bar-in {
  from { opacity: 0; transform: scaleX(0.4); }
}
@media (prefers-reduced-motion: reduce) {
  [data-component="AdminRoot"] tbody > tr,
  .admin-bar-in {
    animation: none;
  }
}