/*
 * Layout comun pentru paginile de raport:
 *   .report-header  -- titlul centrat pe latimea zonei de raport, actiunile lipite la dreapta
 *   .report-scroll  -- tabelul isi are propriul scroll, cu capul de tabel fix
 *
 * Mod de folosire: docs/how-to/0001-tabel-scrolabil-in-rapoarte.md
 * Inaltimea lui .report-scroll o pune la runtime static/js/report_layout.js;
 * valorile de aici sunt cele care tin pana ruleaza JS-ul.
 */

/* --- antetul raportului ------------------------------------------------- */

/* Coloana 1 e goala si coloana 3 (actiunile) primesc partea egala din spatiul
   ramas, deci coloana din mijloc sta centrata pe toata latimea zonei de raport,
   nu pe spatiul ramas langa butoane. */
.report-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  grid-column-gap: 10px;
  margin-bottom: 8px;
}

.report-header .report-title { grid-column: 2; text-align: center; }
.report-header .report-actions { grid-column: 3; justify-self: end; }
/* optional: informatie pe coloana goala din stanga (ex. firma, la raportul de
   gestiune); nu muta centrul, coloana are aceeasi latime ca inainte */
.report-header .report-left { grid-column: 1; justify-self: start; }

/* h3-urile de informatie (<h3><small>) din stanga si de langa butoane stau pe
   rand cu ele, fara marginile implicite ale lui h3 */
.report-header .report-left h3,
.report-header .report-actions h3 {
  display: inline-block;
  margin: 0 10px 0 0;
  vertical-align: middle;
}

/* web/page_title.html vine cu propriul .row .col-md-12; ii scoatem marginile
   negative si padding-ul, ca sa nu decaleze centrul. */
.report-header .report-title .row { margin: 0; text-align: center; }
.report-header .report-title .col-md-12 { padding-left: 0; padding-right: 0; }
.report-header .report-title h3 { margin: 0; }

/* Sub breakpointul col-md zona de raport ocupa toata latimea: titlu sus,
   actiuni dedesubt, ca sa nu se inghesuie pe un rand. */
@media (max-width: 991px) {
  .report-header { grid-template-columns: 1fr; }
  .report-header .report-left,
  .report-header .report-title,
  .report-header .report-actions { grid-column: 1; justify-self: stretch; }
}

/* --- tabelul scrolabil -------------------------------------------------- */

/* charts.css pune body { margin: 25px }. Sub un tabel care se opreste oricum la
   marginea ferestrei, marginea aia de jos e doar spatiu mort; clasa o pune
   report_layout.js, doar pe paginile care chiar au tabel scrolabil. */
body.has-report-scroll { margin-bottom: 0; }

.report-scroll {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  overflow-x: auto;
  /* fara spatiu mort intre ultimul rand si marginea de jos a ferestrei
     (valorile vin din .well, unde e cazul) */
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.report-scroll table {
  margin-bottom: 0;
  /* OBLIGATORIU: cu border-collapse:collapse (default in Bootstrap) Chrome
     picteaza randurile din tbody PESTE celulele position:sticky, indiferent de
     z-index -- se vad randurile trecand prin capul de tabel. In modul separate
     fiecare celula isi deseneaza propria bordura, deci si border-bottom-ul de
     sub header ramane la locul lui. */
  border-collapse: separate;
  border-spacing: 0;
}

.report-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  /* fundal opac, altfel randurile se vad prin el */
  background-color: #f5f5f5;
}

/* .table-bordered in modul separate: fiecare celula isi deseneaza bordura, deci
   intre doua celule vecine linia iese dubla. Celulele pastreaza doar sus si
   stanga, iar tabelul inchide dreapta si jos -- asa conturul ramane intreg si
   cand un rand are mai putine celule decat capul (solduri si totaluri la
   raportul de gestiune, sub coloana de debug). Linia groasa de sub cap o
   deseneaza th-ul, ca sa se mute cu el cand e sticky; primul rand din tbody
   renunta la linia de sus, altfel s-ar aduna cu ea. */
.report-scroll .table-bordered { border-width: 0 1px 1px 0; }
.report-scroll .table-bordered > thead > tr > th,
.report-scroll .table-bordered > thead > tr > td,
.report-scroll .table-bordered > tbody > tr > th,
.report-scroll .table-bordered > tbody > tr > td { border-width: 1px 0 0 1px; }
.report-scroll .table-bordered > thead > tr > th,
.report-scroll .table-bordered > thead > tr > td { border-bottom-width: 2px; }
.report-scroll .table-bordered > tbody > tr:first-child > th,
.report-scroll .table-bordered > tbody > tr:first-child > td { border-top-width: 0; }

/* Cutia poate tine si un grid Bootstrap in loc de tabel (monetar: un card per
   monetar). Marginile negative ale lui .row ar iesi din cutie si ar aduce o
   bara de scroll orizontala. */
.report-scroll > .row { margin-left: 0; margin-right: 0; }