/* BizCenter — tablet / iPad refinements
 * Loaded after the React bundle's main.css so it can override.
 * Served by nginx from /opt/bizcenter/shared/css/tablet.css.
 */

/* ── 1. Make wide list tables horizontally scrollable on every screen size
 *      where they don't fully fit. The shipped CSS only does this at <=768px,
 *      so iPad landscape (1024px) clips the right-most "Aktionen" cell.
 *      Range up to iPad-Pro landscape (1366px). */
@media (max-width: 1366px) {
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .table-container table {
    min-width: 720px;
  }
}

/* ── 2. On touch devices (iPad et al.) pin the last column (= action buttons)
 *      to the right edge so users never have to scroll horizontally just to
 *      reach the row actions. */
@media (hover: none) and (pointer: coarse) and (max-width: 1366px) {
  .table-container table th:last-child,
  .table-container table td:last-child {
    position: sticky;
    right: 0;
    background: #fff;
    box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.12);
    z-index: 1;
  }
  /* Zebra-striped tables (every even row) need the sticky cell to match */
  .table-container table tbody tr:nth-child(2n) td:last-child {
    background: #f9fafb;
  }
  /* Header row keeps its grey */
  .table-container table thead th:last-child {
    background: #f3f4f6;
  }
}

/* ── 3. Bigger tap targets and a touch more spacing inside action groups
 *      so two buttons sitting next to each other don't fat-finger. */
@media (hover: none) and (pointer: coarse) {
  .table-actions {
    gap: .75rem;
  }
  .table-actions .btn,
  .table-actions .btn-sm {
    min-height: 38px;
    min-width: 38px;
    padding-left: .65rem;
    padding-right: .65rem;
  }
  /* Form buttons stretched full-width on portrait keep their height */
  .header-actions .btn { min-height: 44px; }
}

/* ── 4. iPad portrait (~768px): make line-item editors stack so the
 *      delete/edit buttons aren't squeezed into a sliver. */
@media (max-width: 820px) {
  .line-item-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .li-actions {
    justify-content: flex-end;
    grid-column: 1 / -1 !important;
  }
}

/* ── 5. Modals — the bundle caps .modal-card at 440px which squeezes the
 *      Ausgabe form's 2-column grid and its receipt-drop area into a
 *      narrow, overlapping mess. Widen, make scrollable, and fix the
 *      receipt area while we're here. */
.modal-card {
  max-width: 640px !important;   /* enough room for the 2-col expense form */
  width: 100% !important;
  max-height: 92vh;              /* never taller than the viewport */
  display: flex;
  flex-direction: column;
}

/* Center is fine on desktop, but on iPad with the soft keyboard up we want
 * the modal anchored near the top so users can still see what they're typing. */
.modal-backdrop {
  align-items: flex-start !important;
  padding: 4vh 1rem !important;
  overflow-y: auto;
}

/* The form area itself should scroll inside the modal if content overflows
 * (long expense forms, line-item editors with many rows, etc.). */
.modal-form {
  overflow-y: auto;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}

/* Header + actions remain sticky to top/bottom of the modal */
.modal-header { flex-shrink: 0; }

/* Receipt dropzone: give it a sensible minimum size so it doesn't collapse
 * to a thin strip when the form is dense. */
.receipt-drop {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Receipt preview row (filename + actions) wraps cleanly on narrow widths. */
@media (max-width: 560px) {
  .receipt-preview {
    flex-direction: column;
    align-items: stretch !important;
    gap: .5rem;
  }
}

/* ── 6. On narrow viewports, force the expense-form grid to single column
 *      a bit earlier — the original 720px breakpoint still gets cramped
 *      inside the modal until the modal is roomy. */
@media (max-width: 700px) {
  .expense-form-grid {
    grid-template-columns: 1fr !important;
  }
}