/* ================== Design tokens ================== */
:root{
  --bg:#0b0c10;
  --fg:#e5e7eb;
  --muted:#9ca3af;
  --accent:#22d3ee;
  --danger:#ef4444;
  --ok:#22c55e;
  --chip:#374151;
  --chip2:#1f2937;
}

/* ================== Base ================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  margin: 0;
  padding: 2rem;
}
h1 { margin: 0 0 1rem 0; font-size: 1.5rem; }
h3 { margin: 0 0 .25rem 0; }

/* ================== Layout ================== */
.container { max-width: 900px; margin: 0 auto; }
.header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 1rem; }
.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:900px){ .grid2{ grid-template-columns:1fr; } }

.card {
  background:#111827;
  border:1px solid #1f2937;
  border-radius:14px;
  padding:1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}

/* ================== Controls ================== */
button,
.btn,
a.btn{
  display:inline-block;
  font-weight:600;
  cursor:pointer;
  border-radius:12px;
  border:1px solid #374151;
  background:#0f172a;
  color:var(--fg);
  padding:.5rem .75rem;
  text-decoration:none;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
button:hover,
.btn:hover,
a.btn:hover { transform: translateY(-1px); }

.btn-lg { padding:.6rem 1rem; font-size:1.05rem; border-radius:14px; }
.btn-accent { border-color: var(--accent); }
.btn-danger { border-color: var(--danger); }
.btn-green  { border-color: var(--ok); }

/* specifieke grote toggle-knop animatie */
#btn-toggle { transition: background .15s ease, border-color .15s ease, transform .05s ease; }
#btn-toggle:active { transform: scale(0.98); }

/* inputs */
input[type="date"], input[type='number'], input[type='text']{
  background:#0f172a; color:var(--fg);
  border:1px solid #374151; padding:.5rem; border-radius:8px;
}

/* sessie-kiezer */
#session-picker{
  background:#0f172a; border:1px solid #374151; border-radius:10px;
  color:var(--fg); padding:.35rem .5rem; font-size:.95rem;
}

/* ================== Badges & chips ================== */
.chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.badge {
  padding:.25rem .5rem; border-radius:999px; font-size:.8rem;
  background: var(--chip2); color: var(--muted); border:1px solid #374151;
}
a.badge, a.badge:link, a.badge:visited { text-decoration:none; color:var(--fg); }

.badge-total { border-color:#374151; }
.badge.badge-blue  { color: var(--accent); border-color: var(--accent); background: rgba(34,211,238,.15); }
.badge.badge-green { color: var(--ok);     border-color: var(--ok);     background: rgba(34,197,94,.15); }
.badge.badge-red   { color: var(--danger); border-color: var(--danger); background: rgba(239,68,68,.15); }

/* ================== Players ================== */
.player {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.5rem .75rem; border-radius:12px; background: var(--chip);
}
.player .name { font-weight:600; }
.player .sum  { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ================== Lists & rows ================== */
.list { display:flex; flex-direction:column; gap:.5rem; max-height:360px; overflow:auto; }
.row {
  display:flex; gap:.5rem; align-items:center; justify-content:space-between;
  background:#0b1220; border:1px solid #1e293b; padding:.5rem .75rem; border-radius:10px;
}
.row.src-bank   { border-left:4px solid var(--ok);     padding-left:.5rem; }
.row.src-player { border-left:4px solid var(--danger); padding-left:.5rem; }

/* ================== Tables ================== */
.table { width:100%; border-collapse: collapse; margin-top:.5rem; }
.table th, .table td { padding:.5rem; border-bottom:1px solid #1f2937; text-align:left; }
.table th { color: var(--muted); font-weight:600; }

/* Alleen in de Overzicht-tabel: kop & totaal cursief/vet */
#tbl-overview thead th { font-style: italic; }
#tbl-overview tfoot td { font-style: italic; font-weight:600; border-top:2px solid #1f2937; }

/* Invoer-tabel: smallere velden (afrekening) */
#tbl-inputs input[type="number"]{ width:56px; padding:.35rem .4rem; text-align:right; }

/* ================== Utilities ================== */
.small { font-size:.85rem; color: var(--muted); }
.icon  { opacity:.9; }
.footer { margin-top:1rem; display:flex; gap:.5rem; align-items:center; }
.positive { color: var(--ok); }
.negative { color: var(--danger); }

/* hr helper */
.hr { border:0; height:1px; background:#1f2937; margin:.5rem 0; }

/* balansnotitie */
.balance-note{ font-size:1.25rem; font-weight:700; margin-top:.5rem; }
.balance-note.ok{   color: var(--ok); }
.balance-note.warn{ color: var(--danger); }


/* ===== v8: hard no-wrap on purchase meta + smaller delete button on mobile ===== */
@media (max-width: 480px){
  .list .row{ gap:.45rem; }
  .list .row button{
    width: 32px; height: 32px; border-radius: 9px; font-size: 16px;
  }
  .list .row .meta{
    display:flex;
    align-items:center;
    gap:.3rem;
    flex:1 1 auto;
    min-width:0;
    white-space: nowrap !important;    /* enforce */
  }
  .list .row .meta strong{
    font-weight: 400 !important;
    font-size: .95rem !important;
    flex: 0 0 auto;
  }
  .list .row .meta .small{
    font-size: .9rem !important;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap !important;    /* enforce for children */
  }
  .list .row .meta .small:last-of-type{
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}


/* ===== v9: compact delete button on mobile (inline, consistent baseline) ===== */
@media (max-width: 480px){
  .list .row{
    align-items: center;
  }
  .list .row button{
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    line-height: 1 !important;
    border-width: 1px !important;         /* dunner randje */
    border-radius: 8px !important;
    box-shadow: none !important;           /* geen extra glow */
    margin-left: .4rem !important;         /* klein beetje ruimte */
    transform: none !important;            /* geen hover-raise die layout schuift */
  }
  .list .row button:active{ transform: scale(0.96) !important; }
}


/* ===== Icon-only save button in Afrekening (#tbl-inputs) ===== */
#tbl-inputs [data-save]{
  font-size: 0 !important;        /* hide "Opslaan" text */
  width: 40px;
  min-height: 36px;
  padding: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#tbl-inputs [data-save]::after{
  content: "✓";
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 420px){
  #tbl-inputs [data-save]{ width: 36px; min-height: 30px; }
  #tbl-inputs [data-save]::after{ font-size: 17px; }
}

/* ——— Afrekening-kaart smaller maken zonder HTML aanpassing ——— */
.card:has(#tbl-inputs){
  max-width: 560px;          /* pas evt. aan naar 520–600px */
  margin-inline: auto;       /* centreert de card */
}

/* Zorg dat de tabel netjes binnen die smallere card past */
.card:has(#tbl-inputs) .table{
  width: 100%;
}

/* Iets compacter op small screens */
@media (max-width: 480px){
  .card:has(#tbl-inputs){ max-width: 96vw; }  /* net iets van de randen af */
  #tbl-inputs th, #tbl-inputs td{ padding: .4rem; }
  #tbl-inputs input[type="number"]{ width: 52px; }  /* iets smaller */
}

/* ——— Afrekening (#tbl-inputs): alles links uitlijnen ——— */
#tbl-inputs,
#tbl-inputs th,
#tbl-inputs td{
  text-align: left;
}

/* Overschrijf evt. utility-classes die centreren of rechts uitlijnen */
#tbl-inputs .text-right,
#tbl-inputs .text-center{
  text-align: left !important;
}

/* Inputs ook links laten uitlijnen */
#tbl-inputs input[type="number"],
#tbl-inputs input[type="text"],
#tbl-inputs select{
  text-align: left;
}

/* Als er cellen met flex staan: inhoud links starten */
#tbl-inputs .flex{
  justify-content: flex-start;
}

/* Actie-kolom niet centreren */
#tbl-inputs .actions{
  margin-left: 0;
  margin-right: auto;
}

/* (Optioneel) kaartkop links */
.card:has(#tbl-inputs) .card-header{
  text-align: left;
}

/* Afrekening-kaart links uitlijnen ipv centreren */
.card:has(#tbl-inputs){
  max-width: 560px;      /* breedte zoals je ‘m nu goed vindt */
  margin-left: 0 !important;
  margin-right: auto !important;
}
/* ——— Overzicht: kleinere typografie op small screens ——— */
@media (max-width: 600px){
  /* basis */
  .card:has(#tbl-overview){ font-size: .95rem; }

  /* titel */
  .card:has(#tbl-overview) h2,
  .card:has(#tbl-overview) .card-title{ font-size: 1.05rem; }

  /* tabel */
  #tbl-overview th,
  #tbl-overview td{
    font-size: .7rem;
    padding: .45rem .5rem;
  }
  #tbl-overview tfoot td{ font-size: .78rem; }

  /* badges/pills boven de tabel */
  .card:has(#tbl-overview) .badge,
  .card:has(#tbl-overview) .chip,
  .card:has(#tbl-overview) .pill{
    font-size: .85rem;
    padding: .35rem .55rem;
  }

  /* knoppen (bijv. Export CSV) */
  .card:has(#tbl-overview) .btn{
    font-size: .9rem;
    padding: .45rem .6rem;
  }
}

/* ——— Compacte Export CSV-knop ——— */
.card:has(#tbl-overview) .btn,
.card:has(#tbl-overview) button,
.card:has(#tbl-overview) input[type="button"] {
  font-size: 0.75rem;       /* kleiner lettertype */
  padding: 0.25rem 0.6rem;  /* minder ruimte binnenin */
  border-radius: 0.4rem;    /* iets rond, past bij rest */
  line-height: 1.1;
  min-width: auto;          /* geen vaste breedte */
}

/* iets compacter nog op mobiele schermen */
@media (max-width: 480px) {
  .card:has(#tbl-overview) .btn,
  .card:has(#tbl-overview) button,
  .card:has(#tbl-overview) input[type="button"] {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
  }
}
/* ——— Export CSV (Overzicht huidige avond @ index.php) compact ——— */
#link-export-overview{
  font-size: 0.72rem !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 0.35rem !important;
  line-height: 1.1 !important;
  min-width: 0;
}
@media (max-width: 480px){
  #link-export-overview{
    font-size: 0.68rem !important;
    padding: 0.18rem 0.45rem !important;
  }
}
/* +5 knoppen: rood/groen afhankelijk van toggle */
.btn-add.mode-player {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.btn-add.mode-bank {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}
}
/* Kleuren voor tekstlabels rood/groen */
.text-red   { color: var(--danger); font-weight: 600; }
.text-green { color: var(--ok);     font-weight: 600; }

/* Subtiele highlight tijdens optellen bij speler (layout blijft gelijk) */
.player .sum {
  transition: transform .15s ease, color .15s ease, background-color .15s ease;
  border-radius: .4rem;
  padding: 0 .2rem;
}
.player .sum.sum-anim{
  color: var(--accent);
  background-color: #1f2937; /* donkergrijs chip */
  transform: scale(1.06);
}

/* Perfecte uitlijning van elke spelersregel */
.player {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  background: #1e293b;
  margin-bottom: 0.4rem;
}

/* Zorg dat de naam altijd links staat */
.player .name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bedrag rechts uitlijnen */
.player .sum {
  text-align: right;
  min-width: 80px;  /* voorkomt schuiven */
}

/* De +€5 knop krijgt vaste breedte */
.player .btn-add {
  width: 70px;
  text-align: center;
  padding: 0.35rem 0.6rem;
}