/* ===========================================================================
   Inline rows as cards + an editing sheet, on phones
   ===========================================================================
   A tabular inline is a wide table - Prestazioni is nine columns - and on a
   390px screen django's own responsive rules leave only the first visible
   one standing. The result was a fattura on which you could type a
   procedure name and nothing else: no price, no multiplier, no teeth, no
   total. Not cramped: missing.

   So on a phone each row becomes a summary card, and editing one opens a
   sheet over the page with every field in it, stacked and labelled.

   The sheet does not copy the fields - it MOVES the row's own <tr> into a
   table inside itself, and moves it back on close. That matters: these
   inputs carry django formset names (receiptprocedure_set-0-price_at_time
   and so on), and a duplicate set would post twice and need syncing.
   Moving also keeps every listener attached - the price autofill, the
   teeth widget, the quantity badge - because moving a node does not
   detach anything. The <tr> stays a <tr> for the same reason:
   teeth_widget.js reads its row with selectEl.closest("tr").

   Everything here is gated on .rowsheet-on, which inline-sheet.js adds only
   below the breakpoint. With the script blocked, or on a desktop, the table
   renders exactly as django built it.
   =========================================================================== */

/* --- The list of cards --------------------------------------------------- */

.rowsheet-list {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rowsheet-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--md-radius);
  background: var(--md-surface);
  color: var(--body-fg);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.rowsheet-card:hover {
  background: var(--darkened-bg);
}

.rowsheet-card-main {
  flex: 1 1 auto;
  min-width: 0;
}

.rowsheet-card-title {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rowsheet-card-title.is-empty {
  color: var(--body-quiet-color);
  font-style: italic;
  font-weight: 400;
}

.rowsheet-card-meta {
  display: block;
  margin-top: 3px;
  font-size: 0.74rem;
  color: var(--body-quiet-color);
}

.rowsheet-card-total {
  flex: none;
  font-weight: 700;
  font-size: 0.85rem;
}

/* A row whose DELETE box is ticked is still in the formset until save, so
   it stays listed - struck through rather than silently gone. */
.rowsheet-card.is-deleted .rowsheet-card-title,
.rowsheet-card.is-deleted .rowsheet-card-total {
  text-decoration: line-through;
  opacity: 0.55;
}

.rowsheet-empty {
  margin: 0;
  padding: 14px;
  font-size: 0.8rem;
  color: var(--body-quiet-color);
}

/* The tile that starts a new row. An outline rather than a filled button:
   it is a placeholder for a card that isn't there yet, and it sits in the
   same column as the cards it will become. */
.rowsheet-add-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px dashed var(--border-color);
  border-radius: var(--md-radius);
  background: none;
  color: var(--link-fg);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.rowsheet-add-tile:hover,
.rowsheet-add-tile:focus {
  border-color: var(--md-accent);
  background: var(--md-accent-soft);
}

.rowsheet-add-plus {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
}

/* --- Hiding the real table ----------------------------------------------- */

/* Not display:none - django's inlines.js appends new rows here and the other
   scripts bind to the fields as the page loads.

   Parked off to the left rather than clipped small. "width: 1px" does not
   shrink a table (table layout sizes to its content regardless), so the real
   1129px-wide table was still inside .inline-group - which django gives
   overflow-x: auto. Every section of a receipt was therefore its own
   sideways-draggable strip, sliding around independently of the page.
   Content at a negative offset adds no scrollable area in a left-to-right
   page, and visibility:hidden takes the fields out of the tab order; a row
   moved into the sheet is no longer a descendant, so it is visible again. */
.rowsheet-on .rowsheet-hidden-table {
  position: absolute;
  top: 0;
  left: -10000px;
  visibility: hidden;
}

/* django's own add link: the tile at the end of the card list does this job
   now, and does it where the eye already is. */
.rowsheet-on .add-row {
  display: none;
}

/* --- The sheet ----------------------------------------------------------- */

/* Below the teeth widget's own overlay (z-index 1000) on purpose: the teeth
   picker is opened FROM this sheet and has to appear over it. */
.rowsheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.rowsheet-backdrop.is-open {
  opacity: 1;
}

.rowsheet {
  position: fixed;
  z-index: 910;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--body-bg);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.3);
  transform: translateY(100%);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.rowsheet.is-open {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .rowsheet,
  .rowsheet-backdrop {
    transition: none;
  }
}

.rowsheet-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--hairline-color);
}

/* The grab handle above the title - the visual cue that this is a sheet you
   can dismiss, not a page you have navigated to. */
.rowsheet-head::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--border-color);
}

.rowsheet-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--body-loud-color);
}

.rowsheet-close {
  flex: none;
  border: none;
  border-radius: 999px;
  padding: 9px 20px;
  background: var(--default-button-bg);
  color: var(--button-fg);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.rowsheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px 16px;
}

/* --- The moved-in row ---------------------------------------------------- */

/* The <tr> keeps its tag but stops behaving like one: every cell becomes a
   labelled block. The label text is copied onto each cell as data-label by
   the script, from the table's own <thead>. */
.rowsheet-body table,
.rowsheet-body tbody,
.rowsheet-body tr {
  display: block;
  width: 100%;
  border: none;
  background: none;
}

.rowsheet-body td,
.rowsheet-body th {
  display: block;
  width: auto;
  padding: 0;
  margin: 0 0 16px;
  border: none;
  background: none;
}

.rowsheet-body td::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--body-quiet-color);
}

/* Cells with nothing for a person to fill in: django's hidden pk/fk holders,
   the fields the search box writes into behind the scenes, and the row's own
   delete control (the sheet offers its own button for that). */
.rowsheet-body td.original,
.rowsheet-body td.hidden,
.rowsheet-body td.delete,
.rowsheet-body td.rowsheet-skip {
  display: none;
}

.rowsheet-body input[type="text"],
.rowsheet-body input[type="number"],
.rowsheet-body input[type="date"],
.rowsheet-body select,
.rowsheet-body textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  font-size: 1rem; /* 16px: anything smaller makes iOS zoom the page on focus */
}

/* The multiplier normally shows as a "×1" pill you tap to reveal the input -
   a nice trick in a dense table row, and pointless in a sheet that has room
   for the real control. !important because the badge script sets both of
   these as inline styles. */
.rowsheet-body .qty-badge {
  display: none !important;
}

.rowsheet-body input[name$="-quantity"] {
  display: block !important;
}

/* The teeth button is the row's real control (its <select> stays hidden and
   is written by the picker), so it is sized up rather than replaced. */
.rowsheet-body .teeth-widget {
  display: block;
}

.rowsheet-body .teeth-open-btn {
  width: 100%;
  max-width: none;
  min-height: 42px;
  font-size: 0.85rem;
}

.rowsheet-body .help,
.rowsheet-body .helptext {
  display: block;
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: var(--body-quiet-color);
}

.rowsheet-body .errorlist {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 0.75rem;
  color: var(--error-fg);
}

/* --- Footer -------------------------------------------------------------- */

.rowsheet-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline-color);
  background: var(--md-surface-sunken);
}

.rowsheet-delete {
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 9px 18px;
  background: transparent;
  color: var(--error-fg);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.rowsheet-add {
  margin-left: auto;
  border: none;
  border-radius: 999px;
  padding: 9px 20px;
  background: var(--md-accent-soft);
  color: var(--md-accent-strong);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

/* --- The "Aggiungi prestazione" row -------------------------------------- */

.rowsheet-on .add-row a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
}

/* The teeth picker is a fixed overlay of its own; on a phone its 760px panel
   needs to behave. The teeth inside it size themselves now (teeth_widget.css
   shares the width between them rather than fixing each one), so only the
   panel's own padding is adjusted here. */
@media (max-width: 767px) {
  .teeth-modal {
    padding: 14px 10px;
    width: auto;
  }
}