/* overzicht.css
   Doel: alleen de OVERZICHT-pagina (cards/tables/layout).
   Belangrijk: GEEN site-wide header/footer styling (dat komt uit /assets/css/admin.css). */

/* ===== Basis (pagina) ===== */
body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: #f2f4f6;
  color: #000;
  font-variant-numeric: tabular-nums;
}

/* ===== Content-breedte (dashboard) =====
   Header/footer (site-hf) blijven onafhankelijk (admin.css). */
:root {
  --overzicht-max: 1700px;
  --overzicht-pad-x: 20px;
}
/* ===== Overzicht interne header ===== */

/* ===== Overzicht interne header ===== */

.header {
    background: #428c97;
    color: #fff;

    margin-top: 14px;

    padding: 18px 40px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;

    border-radius: 10px;
}

/* Titel links */
.header h1 {
    margin: 0;

    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
}

/* Middenblok */
.header-center {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Knoppen */
.nav-links {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nav-links button {
    padding: 12px 22px;

    font-size: 17px;
    font-weight: 600;

    border: none;
    border-radius: 10px;

    cursor: pointer;
}

/* Info rechts */
.header-grid {
    display: grid;
    grid-template-columns: 140px 180px;

    row-gap: 8px;
    column-gap: 24px;

    align-items: center;

    font-size: 18px;
    line-height: 1.3;
}

/* ===== Dashboard cards ===== */
.dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-top: 18px;
}

.card {
  background: #fff;
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  min-width: 0;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 16px;
  border-bottom: 1px solid #eee;
  padding-bottom: 6px;
}

.card.blue { border-left: 5px solid #2c7be5; }
.card.green { border-left: 5px solid #00a854; }
.card.orange { border-left: 5px solid #fa8c16; }
.card.purple { border-left: 5px solid #722ed1; }
.card.red { border-left: 5px solid #f5222d; }

.row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0;
}

/* ===== Weekoverzicht ===== */
.week-table {
  margin-top: 15px;
  background: #fff;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  overflow-x: auto; /* voorkomt horizontale scroll op pagina */
}

#weekOverzicht {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
  min-width: 720px;
}

#weekOverzicht th {
  background: #2f5f66;
  padding: 10px 6px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  border-bottom: 2px solid #ddd;
}

#weekOverzicht td {
  padding: 10px 6px;
  font-size: 18px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

#weekOverzicht thead th {
  background: #3b7881;
  color: #fff;
  border-bottom: 2px solid #244a50;
}

#weekOverzicht td.week {
  font-weight: 600;
  width: 60px;
}

#weekOverzicht th,
#weekOverzicht td {
  width: 11%;
}

/* visuele accenten */
.totaal { font-weight: 600; }
.meer { color: #fa8c16; }
.niet-ot { color: #999; }
.honderd { color: #00a854; font-weight: 700; }

#weekOverzicht tbody tr:hover {
  background: #f5f7fa;
}

#weekOverzicht td,
#weekOverzicht th {
  border-right: 1px solid #e5e7ea;
}
#weekOverzicht td:last-child,
#weekOverzicht th:last-child {
  border-right: none;
}


@media (max-width: 1000px) {
  .dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  :root { --overzicht-pad-x: 14px; }
  .dashboard { grid-template-columns: 1fr; }
}

/* TVT-kaart: waarschuwing bij negatief saldo (opname te hoog) */
.tvt-kaart-waarschuwing {
    margin: 10px 0 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: #b00020;
    line-height: 1.4;
}