/* ═══════════════════════════════════════════════════════════════════════════
   AYAN ERP - Transactions / Transaction Sheet: frozen header, pinned Actions
   column and Compact View (2026-10-12). Companion of assets/ayan_sheet_view.js.

   • .table-responsive-container is the one scroll box of the sheet (both directions,
     max-height 75vh), so the header row can stay pinned to its top edge.
   • The header cells are solid green (#198754) with white text. The old header was
     semi-transparent, so the rows showed through it while scrolling.
   • The last column (Edit / Delete buttons) is pinned to the right edge, solid white,
     so the buttons can always be clicked whatever the horizontal scroll position. Only
     tables whose last column holds buttons get table.ayan-pin-last (set by the script),
     so a report whose last column is a figure is never covered.
   • .ayan-cv-hide hides an all-empty column while Compact View is on.
   Selectors start with "html body", repeat the class and use !important on purpose:
   several older style layers in index.php style every table header with !important
   and up to two classes (for example "html body .tbl.tbl thead th").
   ═══════════════════════════════════════════════════════════════════════════ */

html body .table-responsive-container.table-responsive-container.table-responsive-container {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 75vh !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  position: relative !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: #ffffff !important;
  border-radius: 10px;
}
html body .table-responsive-container.table-responsive-container.table-responsive-container::-webkit-scrollbar { width: 10px; height: 10px; }
html body .table-responsive-container.table-responsive-container.table-responsive-container::-webkit-scrollbar-thumb { background: #19875499; border-radius: 8px; }
html body .table-responsive-container.table-responsive-container.table-responsive-container::-webkit-scrollbar-track { background: #f1f5f2; }

/* The table must not clip its sticky cells, and must keep its own width. */
html body .table-responsive-container.table-responsive-container.table-responsive-container > table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
}

/* ── 1. Header frozen at the top ─────────────────────────────────────────── */
html body .table-responsive-container.table-responsive-container.table-responsive-container > table > thead > tr > th,
html body .table-responsive-container.table-responsive-container.table-responsive-container > table > thead > tr > td {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  background: #198754 !important;
  background-color: #198754 !important;
  background-image: none !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body .table-responsive-container.table-responsive-container.table-responsive-container > table > thead > tr > th *,
html body .table-responsive-container.table-responsive-container.table-responsive-container > table > thead > tr > td * {
  color: inherit;
}
html body .table-responsive-container.table-responsive-container.table-responsive-container > table > thead > tr {
  background: #198754 !important;
}
/* an older theme layer paints a light gradient over each header cell with ::after: keep it solid */
html body .table-responsive-container.table-responsive-container.table-responsive-container > table > thead > tr > th::before,
html body .table-responsive-container.table-responsive-container.table-responsive-container > table > thead > tr > th::after {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ── 2. Actions column pinned to the right edge ─────────────────────────── */
html body .table-responsive-container.table-responsive-container.table-responsive-container > table.ayan-pin-last > tbody > tr > td:last-child:not([colspan]),
html body .table-responsive-container.table-responsive-container.table-responsive-container > table.ayan-pin-last > tfoot > tr > td:last-child:not([colspan]),
html body .table-responsive-container.table-responsive-container.table-responsive-container > table.ayan-pin-last > tfoot > tr > th:last-child:not([colspan]) {
  position: sticky !important;
  right: 0 !important;
  z-index: 15 !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: -3px 0 5px rgba(0, 0, 0, 0.08) !important;
}
/* the header cell of that column is pinned both ways and sits above everything */
html body .table-responsive-container.table-responsive-container.table-responsive-container > table.ayan-pin-last > thead > tr > th:last-child,
html body .table-responsive-container.table-responsive-container.table-responsive-container > table.ayan-pin-last > thead > tr > td:last-child {
  right: 0 !important;
  z-index: 25 !important;
  box-shadow: -3px 2px 5px rgba(0, 0, 0, 0.15) !important;
}
html body .table-responsive-container.table-responsive-container.table-responsive-container > table.ayan-pin-last > tfoot > tr > td:last-child:not([colspan]),
html body .table-responsive-container.table-responsive-container.table-responsive-container > table.ayan-pin-last > tfoot > tr > th:last-child:not([colspan]) {
  z-index: 22 !important;
  background-color: #f0fdf4 !important;
}
html body .table-responsive-container.table-responsive-container.table-responsive-container > table.ayan-pin-last > tbody > tr > td:last-child:not([colspan]) button {
  position: relative;
  z-index: 1;
}

/* Dark theme: keep the pinned column solid, in the dark card colour. */
html[data-theme="dark"] body .table-responsive-container.table-responsive-container.table-responsive-container {
  background: var(--dm-card, #1f2937) !important;
}
html[data-theme="dark"] body .table-responsive-container.table-responsive-container.table-responsive-container > table.ayan-pin-last > tbody > tr > td:last-child:not([colspan]),
html[data-theme="dark"] body .table-responsive-container.table-responsive-container.table-responsive-container > table.ayan-pin-last > tfoot > tr > td:last-child:not([colspan]),
html[data-theme="dark"] body .table-responsive-container.table-responsive-container.table-responsive-container > table.ayan-pin-last > tfoot > tr > th:last-child:not([colspan]) {
  background-color: var(--dm-card, #1f2937) !important;
}

/* ── 3. Compact View ─────────────────────────────────────────────────────── */
html body .ayan-cv-hide.ayan-cv-hide.ayan-cv-hide { display: none !important; }

html body .ayan-cv-btn.ayan-cv-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px !important;
  border: 1px solid #198754 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #198754 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
html body .ayan-cv-btn.ayan-cv-btn[aria-pressed="true"] {
  background: #198754 !important;
  color: #ffffff !important;
}
html body .ayan-cv-btn.ayan-cv-btn:focus-visible { outline: 3px solid #86efac; outline-offset: 2px; }
html body .ayan-cv-note {
  display: inline-block;
  margin-left: 6px;
  font-size: 11.5px;
  color: #4b5563;
  white-space: nowrap;
}

/* the small bar above a table that has no Smart Filter header */
html body .ayan-cv-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px; }
html body .ayan-flt-tg .ayan-cv-btn.ayan-cv-btn { margin-left: auto; }

/* New Transaction form: cost heads not used on this entry */
html body #se-cost .se-cr.ayan-cv-row-hide { display: none !important; }
html body #se-cost .ayan-cost-cv {
  border: 1px solid #198754 !important; background: #ffffff !important; color: #198754 !important;
  border-radius: 8px !important; font-weight: 700 !important; font-size: 12px !important;
  padding: 5px 10px !important; min-height: 32px; cursor: pointer; margin-right: 6px;
}
html body #se-cost .ayan-cost-cv[aria-pressed="true"] { background: #f0fdf4 !important; }

/* Printing: no scroll box, no pinning, every column the screen shows. */
@media print {
  html body .table-responsive-container.table-responsive-container.table-responsive-container { max-height: none !important; overflow: visible !important; }
  html body .table-responsive-container.table-responsive-container.table-responsive-container > table > thead > tr > th,
  html body .table-responsive-container.table-responsive-container.table-responsive-container > table > tbody > tr > td,
  html body .table-responsive-container.table-responsive-container.table-responsive-container > table > tfoot > tr > td { position: static !important; box-shadow: none !important; }
  html body .ayan-cv-btn.ayan-cv-btn, html body .ayan-cv-note, html body .ayan-cv-bar, html body .ayan-cost-cv { display: none !important; }
}

/* Phones: the Edit / Delete column stays pinned but narrow - its buttons wrap onto
   two or three short lines instead of covering most of the screen. */
@media (max-width: 600px) {
  html body .table-responsive-container.table-responsive-container.table-responsive-container > table.ayan-pin-last > tbody > tr > td:last-child:not([colspan]) {
    white-space: normal !important;
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
  }
  html body .table-responsive-container.table-responsive-container.table-responsive-container > table.ayan-pin-last > tbody > tr > td:last-child:not([colspan]) button {
    margin: 1px !important;
  }
  html body .table-responsive-container.table-responsive-container.table-responsive-container > table.ayan-pin-last > thead > tr > th:last-child {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    white-space: normal !important;
  }
}