/*
  Alibris – stilovi za `rwd-table` tabele u sadržaju stranica/članaka.

  Markup koji ovo očekuje (klase su već u vašem sadržaju):

    <table class="rwd-table w-100 rounded-0 mt-0">
      <tbody>
        <tr><th class="text-center w-20"><strong>Mesec</strong></th> …</tr>
        <tr class="rwd-td">
          <td data-th="Mesec" class="bg-dark-gray text-center-mobile">Januar</td>
          <td class="text-center text-center-mobile" data-th="Radni sati">176</td>
          …

  `data-th` nosi naziv kolone i koristi se na telefonu, gde se svaki red
  prikazuje kao kartica „naziv kolone → vrednost”, pa nema bočnog skrola.

  Paleta je ista kao u platnoj listi kalkulatora (boje iz PayBridge.cs).
  Varijable su namerno ponovljene ovde, da bi tabela izgledala ispravno i na
  stranicama na kojima kalkulator nije prisutan.
*/

.rwd-table {
  --pbt-head: #185678;
  --pbt-band: #e0f0f8;
  --pbt-grid: #cdddE7;
  --pbt-zebra: #fafcfd;
  --pbt-cross: #dcedf6;   /* red i kolona do ćelije pod mišem */
  --pbt-active: #b9dcec;  /* sama ćelija pod mišem */
  --pbt-text: #304c5c;

  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--pbt-grid);
  color: var(--pbt-text);
  font-variant-numeric: tabular-nums;
  margin: 0 0 24px;
}

/* Zaglavlje */
.rwd-table.rwd-table th {
  background: var(--pbt-head);
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 12px 10px;
  border: 1px solid var(--pbt-head);
  white-space: nowrap;
}
.rwd-table.rwd-table th strong { font-weight: 700; }

/*
  Ćelije.

  Zebra podloga stoji na REDU, a ćelije su providne. Da je zebra na ćeliji,
  njen selektor bi bio specifičniji od crosshair pravila, pa se osenčavanje ne
  bi videlo na parnim redovima. Ovako crosshair samo preboji providnu ćeliju i
  nema nadmetanja u specifičnosti.
*/
.rwd-table.rwd-table tr.rwd-td { background: #fff; }
.rwd-table.rwd-table tr.rwd-td:nth-of-type(even) { background: var(--pbt-zebra); }

.rwd-table.rwd-table td {
  background: transparent;
  border: 1px solid var(--pbt-grid);
  padding: 10px;
  text-align: center;
  color: var(--pbt-text);
  font-size: .95rem;   /* tema nameće 12px, što je presitno za ovu tabelu */
  transition: background-color .12s ease;
}

/* Prva kolona (naziv meseca) – svetloplava traka, kao oznaka reda */
.rwd-table.rwd-table td.bg-dark-gray,
.rwd-table.rwd-table tbody tr.rwd-td td:first-child {
  background: var(--pbt-band);
  color: var(--pbt-head);
  font-weight: 700;
  text-align: left;
}

/*
  ---------- Crosshair ----------
  Klase postavlja paybridge-table.js: `is-cross` dobijaju sve ćelije levo do
  prve kolone i sve iznad do zaglavlja, a `is-cross-active` sama ćelija pod
  mišem. Ovo se ne može uraditi čistim CSS-om jer ne postoji selektor za
  prethodnu braću ćelije, ni za redove iznad.
*/
/* Selektori nose `td:first-child` i udvojenu klasu da bi nadjačali i pravilo za
   prvu kolonu iznad njih, koje je inače specifičnije. */
.rwd-table.rwd-table td.is-cross,
.rwd-table.rwd-table tbody tr.rwd-td td.is-cross,
.rwd-table.rwd-table tbody tr.rwd-td td:first-child.is-cross,
.rwd-table.rwd-table tbody tr.rwd-td:nth-of-type(even) td.is-cross {
  background: var(--pbt-cross);
}
.rwd-table.rwd-table th.is-cross {
  background: #12455f;  /* zaglavlje kolone pod mišem, tamnije */
}
.rwd-table.rwd-table td.is-cross-active,
.rwd-table.rwd-table tbody tr.rwd-td td.is-cross-active,
.rwd-table.rwd-table tbody tr.rwd-td td:first-child.is-cross-active,
.rwd-table.rwd-table tbody tr.rwd-td:nth-of-type(even) td.is-cross-active {
  background: var(--pbt-active);
  color: var(--pbt-head);
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--pbt-head);
}

/* Kada se pređe mišem, kursor pokazuje da je ćelija „aktivna” za čitanje */
.rwd-table tbody tr.rwd-td td { cursor: default; }

/*
  ---------- Telefon ----------
  Ispod 768px svaki red postaje kartica. Zaglavlje se sklanja, a naziv kolone
  dolazi iz `data-th`, pa tabela ne mora da se skroluje postrance.
*/
@media (max-width: 767px) {
  .rwd-table, .rwd-table tbody, .rwd-table tr, .rwd-table td { display: block; width: 100%; }
  .rwd-table { border: 0; }

  .rwd-table tr:first-of-type { display: none; }  /* red sa <th> zaglavljima */

  .rwd-table tr.rwd-td {
    border: 1px solid var(--pbt-grid);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 14px;
  }

  .rwd-table tr.rwd-td td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 0;
    border-bottom: 1px solid var(--pbt-grid);
    text-align: right;
    padding: 10px 14px;
  }
  .rwd-table tr.rwd-td td:last-child { border-bottom: 0; }

  /* Naziv kolone ispred vrednosti */
  .rwd-table tr.rwd-td td::before {
    content: attr(data-th);
    font-weight: 700;
    color: var(--pbt-head);
    text-align: left;
    flex: 0 0 auto;
  }
  /* Prvi red kartice je naziv meseca – prikazuje se kao naslov, bez oznake */
  .rwd-table tr.rwd-td td:first-child {
    background: var(--pbt-head);
    color: #fff;
    font-size: 1.05rem;
    justify-content: center;
    text-align: center;
  }
  .rwd-table tr.rwd-td td:first-child::before { content: none; }

  /* Crosshair nema smisla u kartičnom prikazu */
  .rwd-table td.is-cross, .rwd-table td.is-cross-active {
    background: inherit; box-shadow: none; font-weight: inherit;
  }
}

@media print {
  .rwd-table td.is-cross, .rwd-table td.is-cross-active,
  .rwd-table th.is-cross { background: #fff !important; box-shadow: none !important; }
  .rwd-table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}