/* Kasadmin custom design tokens & utilities.
 *
 * Vervangt de Tabler-laag bovenop Bootstrap. Houden we bewust klein —
 * alleen wat Bootstrap 5.3 niet native dekt of wat we visueel anders willen.
 *
 * Secties:
 *   1. Design tokens (kleuren, radii)
 *   2. Page-title / page-header (vervanger Tabler-classes)
 *   3. Avatar-tegels (vervanger Tabler `.avatar`)
 *   4. Extra subtle kleuren (azure/purple/indigo/orange — niet in BS 5.3 native)
 *   5. Finance utilities (tabular-nums, .money.neg)
 */

/* 1. Design tokens
   ---------------------------------------------------------------- */
:root {
  --ka-radius: .5rem;
  --ka-muted:  #6c757d;
}

/* 2. Page-title / page-header
   ----------------------------------------------------------------
   Tabler had eigen styling op `.page-title` (groter, semibold). We
   houden dezelfde class-naam zodat templates niet hoeven te
   veranderen, maar definiëren 'm zelf — dunner dan Tabler's variant.
*/
.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}
.page-header {
  margin-bottom: 1rem;
}

/* 3. Avatar (kleine icon-tegel met getinte achtergrond)
   ----------------------------------------------------------------
   Gebruikt op /beheer/hub voor module-tegels. Tabler-stijl maar dan
   zelf gedefinieerd zodat we niet langer afhankelijk zijn van Tabler.
*/
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ka-radius);
  font-size: 1rem;
  flex-shrink: 0;
}
.avatar.avatar-sm {
  width: 2rem;
  height: 2rem;
  font-size: .875rem;
}

/* 4. Extra subtle kleuren (BS 5.3 mist deze paar)
   ----------------------------------------------------------------
   azure / purple / indigo / orange — voor de hub-tegels en losse
   badges. Stop bij wat we daadwerkelijk gebruiken; meer toevoegen pas
   wanneer er een use-case is.
*/
.bg-azure-subtle  { background-color: #cfe2ff; }   /* light blue, near BS info */
.bg-purple-subtle { background-color: #e7d6ff; }
.bg-indigo-subtle { background-color: #d2d6f8; }
.bg-orange-subtle { background-color: #ffd8a8; }
.text-azure-emphasis  { color: #052c65; }
.text-purple-emphasis { color: #432c7a; }
.text-indigo-emphasis { color: #2e338e; }
.text-orange-emphasis { color: #8a4b00; }

/* 5. Finance utilities
   ----------------------------------------------------------------
   Tabular-nums op alle geld-cellen zodat cijfers uitlijnen. Negatieve
   bedragen krijgen .money.neg (rood) — gebruikt in transacties-tabel.
*/
.money,
td.money,
.table td.num,
.table td.bedrag {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.money.neg { color: #d6336c; }

/* 6. Transactie-type-markering (v6.2)
   ----------------------------------------------------------------
   Linker-border always-on per type (uitgave/inkomst/overboeking).
   Hele-rij-tint alleen op :hover — geeft scan-feedback bij beweging
   van de muis zonder de tabel statisch druk te maken (cel-tint v6.1
   was overdone bij 50+ regels).
*/
.tx-row.tx-out      { border-left: 3px solid var(--bs-danger-border-subtle,  #f1aeb5); }
.tx-row.tx-in       { border-left: 3px solid var(--bs-success-border-subtle, #a3cfbb); }
.tx-row.tx-transfer { border-left: 3px solid var(--bs-primary-border-subtle, #9ec5fe); }

/* Hover op een rij → hele rij krijgt zachte type-tint. Bootstrap's
   .table-hover styling op de td's overrulen we met --bs-table-hover-bg
   per rij-type, zodat de hover-kleur de type-semantiek volgt i.p.v.
   neutraal grijs. */
.table-hover > tbody > tr.tx-out:hover      { --bs-table-hover-bg: var(--bs-danger-bg-subtle,  #f8d7da); }
.table-hover > tbody > tr.tx-in:hover       { --bs-table-hover-bg: var(--bs-success-bg-subtle, #d1e7dd); }
.table-hover > tbody > tr.tx-transfer:hover { --bs-table-hover-bg: var(--bs-primary-bg-subtle, #cfe2ff); }

/* Sticky thead — header blijft zichtbaar bij scroll door lange tabellen.
   `top:0` t.o.v. document-scroll (navbar is niet sticky). Witte bg
   verbergt door-scrollend rij-content. z-index 2 om boven row-content
   (z:1 default) te blijven.

   BELANGRIJK: `position: sticky` werkt alleen als de scroll-ancestor
   geen `overflow: auto/scroll/hidden` heeft. Bootstrap's `.table-
   responsive` zet `overflow-x: auto` (en browser maakt overflow-y
   impliciet auto) — dat breekt sticky. Daarom de wrapper-override
   hieronder: neutraliseer overflow op desktop; behoud horizontale
   scroll alleen op <lg waar de tabel te breed kan worden. */
.table-sticky > thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--bs-body-bg, #fff);
}
.table-sticky-host { overflow: visible; }
@media (max-width: 991.98px) {
  .table-sticky-host { overflow-x: auto; }
}

/* 7. Voorkom horizontale layout-shift bij scrollbar verschijnen/verdwijnen
   tussen pagina's. */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

/* 8. Account-code-badge (v6.1 — uitgebreid v6.3)
   ----------------------------------------------------------------
   Visuele identifier voor rekening- en kalemkod-codes. Een mono-font
   code in een pill leest als identifier; subtle primary-tint geeft
   net genoeg contrast zonder met data-cijfers te concurreren.
   Hergebruik op alle plekken waar zo'n 3-cijferige code verschijnt.

   Hover-state alleen op klikbare varianten (<a>/<button>) — op een
   <span> als pure identifier moet hover NIET klikbaar suggereren.
*/
.account-code-badge {
  display: inline-block;
  font-family: var(--bs-font-monospace);
  font-size: .8125rem;
  font-weight: 500;
  padding: .15rem .55rem;
  border-radius: .375rem;
  background: var(--bs-primary-bg-subtle, #cfe2ff);
  color: var(--bs-primary-text-emphasis, #052c65);
  border: 1px solid var(--bs-primary-border-subtle, #9ec5fe);
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .12s ease;
}
a.account-code-badge:hover,
a.account-code-badge:focus,
button.account-code-badge:hover,
button.account-code-badge:focus {
  background: var(--bs-primary-border-subtle, #9ec5fe);
  color: var(--bs-primary-text-emphasis, #052c65);
  text-decoration: none;
}

/* X. Entity-link — klikbare entiteit-naam (v6.6)
   ----------------------------------------------------------------
   Verwant aan account-code-badge maar voor display-namen (huurder,
   leningnemer). Een subtle pill + chevron signaleert klikbaarheid
   zonder als "code"-style te lezen. Body-tekst (sans, niet mono).
   Hover-state alleen op klikbare varianten.
*/
.entity-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .55rem .15rem .6rem;
  border-radius: var(--bs-border-radius, .375rem);
  background: var(--bs-secondary-bg-subtle, #fcfcfd);
  color: var(--bs-body-color, #212529);
  border: 1px solid var(--bs-border-color, #dee2e6);
  font-weight: 500;
  text-decoration: none;
  line-height: 1.3;
  transition: background-color .12s ease;
}
.entity-link::after {
  content: "›";
  color: var(--bs-secondary-color, #6c757d);
  font-weight: 400;
  margin-left: .15rem;
  font-size: 1.05em;
  line-height: 1;
}
a.entity-link:hover,
a.entity-link:focus {
  background: var(--bs-tertiary-bg, #e9ecef);
  color: var(--bs-body-color, #212529);
  text-decoration: none;
}

/* 9. Intent-cards op /transacties (v6.2)
   ----------------------------------------------------------------
   3 cards bovenaan transacties-overzicht (Uitgegeven/Ontvangen/
   Overboeking) krijgen lichte type-tint + "+ Boek"-pill rechts.
   Card-radius matched de pill-radius (--bs-border-radius default).
   Hover: iets donkerder fill als micro-feedback dat het klikbaar is.
*/
.intent-card-out      { background-color: var(--bs-danger-bg-subtle,  #f8d7da); }
.intent-card-in       { background-color: var(--bs-success-bg-subtle, #d1e7dd); }
.intent-card-transfer { background-color: var(--bs-primary-bg-subtle, #cfe2ff); }

.intent-card { transition: filter .12s ease; }
.intent-card:hover { filter: brightness(.96); }

.intent-pill {
  display: inline-block;
  font-size: .75rem;
  font-weight: 500;
  padding: .25rem .65rem;
  border-radius: var(--bs-border-radius, .375rem);
  line-height: 1.2;
  white-space: nowrap;
}

/* 11. Module-card count-badge (v6.2)
   ----------------------------------------------------------------
   Standaard BS-badge is .75em — bij een dashboard-anker voor minder
   ervaren user te subtiel. Vergroot naar leesbaar formaat + meer
   padding zodat de count direct opvalt zonder alarmistisch te zijn.
*/
.module-card-count {
  font-size: .95rem;
  padding: .25rem .65rem;
  min-width: 2.1rem;
  line-height: 1.1;
}

/* 12. Active-state in top-nav: lichte primary-bg + medium weight. */
.navbar-nav .nav-link.active {
  background: var(--bs-primary-bg-subtle, #cfe2ff);
  color: var(--bs-primary-text-emphasis, #052c65);
  border-radius: .375rem;
  font-weight: 500;
}
.navbar-nav .nav-link { border-radius: .375rem; }

/* Compact brand wordmark (rechts naast user-menu). */
.navbar-brand-compact {
  font-weight: 600;
  font-size: .9rem;
  color: var(--bs-secondary-color, #6c757d);
  text-decoration: none;
}
.navbar-brand-compact:hover { color: var(--bs-body-color, #212529); }