/* ================================================
   Beheer & Jacht — Natuur/Jacht Thema
   Kleurenpalet: donkergroen, bruin, beige, goud
   ================================================ */

:root {
  --groen-donker: #1a3a1a;
  --groen-midden: #2d5a2d;
  --groen-licht: #4a7c4a;
  --bruin: #5c3d1e;
  --bruin-licht: #8b6340;
  --beige: #f5f0e8;
  --beige-donker: #e8dfc8;
  --goud: #c9a84c;
  --goud-licht: #e2c070;
  --wit: #ffffff;
  --tekst-donker: #1a1a1a;
  --tekst-midden: #4a4a4a;
  --tekst-licht: #8a8a8a;
  --rood: #8b1a1a;
  --rood-licht: #c0392b;
  --schaduw: rgba(26, 58, 26, 0.15);
  --schaduw-zwaar: rgba(26, 58, 26, 0.3);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--beige);
  color: var(--tekst-donker);
  min-height: 100vh;
}

/* ------------------------------------------------
   Achtergrond patroon (subtiele natuur textuur)
   ------------------------------------------------ */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(45, 90, 45, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(92, 61, 30, 0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ================================================
   LOGIN PAGINA
   ================================================ */
.login-pagina {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--groen-donker) 0%, var(--groen-midden) 50%, var(--bruin) 100%);
  position: relative;
  overflow: hidden;
}

.login-pagina::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background-image:
    radial-gradient(circle at 30% 40%, rgba(201, 168, 76, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.04) 0%, transparent 50%);
  animation: subtielBeweeg 20s ease-in-out infinite alternate;
}

@keyframes subtielBeweeg {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(2%, 1%) rotate(1deg); }
}

.login-kaart {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 16px;
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 1;
  border-top: 4px solid var(--goud);
}

.login-logo {
  text-align: center;
  margin-bottom: 36px;
}

.login-logo .icoon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 12px;
  display: block;
}

.login-logo h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--groen-donker);
  letter-spacing: -0.5px;
}

.login-logo p {
  font-size: 13px;
  color: var(--tekst-licht);
  margin-top: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ================================================
   FORMULIER ELEMENTEN
   ================================================ */
.formulier-groep {
  margin-bottom: 20px;
}

.formulier-groep label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tekst-midden);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.formulier-groep input,
.formulier-groep select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--beige-donker);
  border-radius: 8px;
  font-size: 15px;
  color: var(--tekst-donker);
  background: var(--beige);
  transition: border-color 0.2s, background 0.2s;
  outline: none;
}

.formulier-groep input:focus,
.formulier-groep select:focus {
  border-color: var(--groen-licht);
  background: var(--wit);
  box-shadow: 0 0 0 3px rgba(74, 124, 74, 0.12);
}

/* ================================================
   KNOPPEN
   ================================================ */
.knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.knop-primair {
  background: linear-gradient(135deg, var(--groen-midden), var(--groen-donker));
  color: var(--wit);
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(26, 58, 26, 0.3);
}

.knop-primair:hover {
  background: linear-gradient(135deg, var(--groen-licht), var(--groen-midden));
  box-shadow: 0 6px 16px rgba(26, 58, 26, 0.4);
  transform: translateY(-1px);
}

.knop-primair:active {
  transform: translateY(0);
}

.knop-groen {
  background: var(--groen-midden);
  color: var(--wit);
  box-shadow: 0 2px 8px var(--schaduw);
}

.knop-groen:hover {
  background: var(--groen-licht);
  transform: translateY(-1px);
}

.knop-goud {
  background: var(--goud);
  color: var(--groen-donker);
  box-shadow: 0 2px 8px rgba(201, 168, 76, 0.3);
}

.knop-goud:hover {
  background: var(--goud-licht);
  transform: translateY(-1px);
}

.knop-rood {
  background: var(--rood-licht);
  color: var(--wit);
}

.knop-rood:hover {
  background: var(--rood);
  transform: translateY(-1px);
}

.knop-grijs {
  background: var(--beige-donker);
  color: var(--tekst-midden);
}

.knop-grijs:hover {
  background: #d5c8ae;
}

.knop-klein {
  padding: 7px 14px;
  font-size: 13px;
}

/* ================================================
   MELDING / ALERT
   ================================================ */
.melding {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.melding-fout {
  background: rgba(192, 57, 43, 0.1);
  border: 1px solid rgba(192, 57, 43, 0.3);
  color: var(--rood);
}

.melding-succes {
  background: rgba(45, 90, 45, 0.1);
  border: 1px solid rgba(45, 90, 45, 0.3);
  color: var(--groen-midden);
}

/* ================================================
   APP LAYOUT (NAVIGATIE + INHOUD)
   ================================================ */
.app-wrapper {
  display: flex;
  min-height: 100vh;
}

/* Zijbalk navigatie */
.zijbalk {
  width: 260px;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--groen-donker) 0%, #142814 100%);
  color: var(--wit);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  box-shadow: 4px 0 20px var(--schaduw-zwaar);
}

.zijbalk-header {
  padding: 28px 24px 20px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
}

.zijbalk-header .logo-icoon {
  font-size: 36px;
  display: block;
  margin-bottom: 8px;
}

.zijbalk-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--goud);
  letter-spacing: -0.3px;
}

.zijbalk-header p {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}

.zijbalk-nav {
  flex: 1;
  padding: 20px 12px;
}

.nav-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.35);
  padding: 12px 12px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  font-weight: 500;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  margin-bottom: 2px;
}

.nav-item:hover {
  background: rgba(255,255,255,0.08);
  color: var(--wit);
}

.nav-item.actief {
  background: rgba(201, 168, 76, 0.15);
  color: var(--goud);
  border: 1px solid rgba(201, 168, 76, 0.2);
}

.nav-item .nav-icoon {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.zijbalk-footer {
  padding: 16px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.gebruiker-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.gebruiker-avatar {
  width: 36px;
  height: 36px;
  background: var(--goud);
  color: var(--groen-donker);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

.gebruiker-naam {
  font-size: 13px;
  font-weight: 600;
  color: var(--wit);
}

.gebruiker-rol {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
}

/* Hoofd inhoud */
.hoofd-inhoud {
  margin-left: 260px;
  flex: 1;
  padding: 0;
  min-height: 100vh;
}

.pagina-header {
  background: var(--wit);
  border-bottom: 2px solid var(--beige-donker);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}

.pagina-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--groen-donker);
}

.pagina-header p {
  font-size: 13px;
  color: var(--tekst-licht);
  margin-top: 2px;
}

.pagina-inhoud {
  padding: 32px;
}

/* ================================================
   KAARTEN
   ================================================ */
.kaart {
  background: var(--wit);
  border-radius: 12px;
  box-shadow: 0 2px 12px var(--schaduw);
  border: 1px solid rgba(232, 223, 200, 0.8);
  overflow: hidden;
}

.kaart-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--beige-donker);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kaart-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--groen-donker);
  display: flex;
  align-items: center;
  gap: 8px;
}

.kaart-inhoud {
  padding: 24px;
}

/* ================================================
   TABEL
   ================================================ */
.tabel-wrapper {
  overflow-x: auto;
}

.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabel th {
  background: var(--beige);
  padding: 11px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--tekst-midden);
  border-bottom: 2px solid var(--beige-donker);
}

.tabel td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--beige-donker);
  color: var(--tekst-donker);
  vertical-align: middle;
}

.tabel tr:last-child td {
  border-bottom: none;
}

.tabel tr:hover td {
  background: rgba(245, 240, 232, 0.5);
}

.tabel-acties {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Lege staat */
.leeg-staat {
  text-align: center;
  padding: 48px 24px;
  color: var(--tekst-licht);
}

.leeg-staat .leeg-icoon {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
  opacity: 0.4;
}

/* ================================================
   ROL BADGES
   ================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge-admin {
  background: rgba(201, 168, 76, 0.15);
  color: #8b6800;
  border: 1px solid rgba(201, 168, 76, 0.3);
}

.badge-editor {
  background: rgba(45, 90, 45, 0.12);
  color: var(--groen-midden);
  border: 1px solid rgba(45, 90, 45, 0.2);
}

.badge-readonly {
  background: rgba(139, 99, 64, 0.12);
  color: var(--bruin-licht);
  border: 1px solid rgba(139, 99, 64, 0.2);
}

.badge-globaal {
  background: rgba(26, 58, 26, 0.12);
  color: var(--groen-donker);
  border: 1px solid rgba(26, 58, 26, 0.2);
}

/* ================================================
   MODAL / DIALOOG
   ================================================ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 20px;
  backdrop-filter: blur(2px);
}

.modal-overlay.zichtbaar {
  display: flex;
}

.modal {
  background: var(--wit);
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  border-top: 4px solid var(--goud);
  animation: modalInkomen 0.2s ease-out;
  margin: auto;
  align-self: flex-start;
}

@keyframes modalInkomen {
  from { opacity: 0; transform: scale(0.96) translateY(-8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--groen-donker);
  margin-bottom: 20px;
}

.modal-acties {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
}

/* ================================================
   SELECTIE (TENANT KIEZER)
   ================================================ */
.tenant-kiezer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--beige);
  border-radius: 10px;
  border: 1px solid var(--beige-donker);
}

.tenant-kiezer label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tekst-midden);
  white-space: nowrap;
}

.tenant-kiezer select {
  flex: 1;
  padding: 9px 12px;
  border: 2px solid var(--beige-donker);
  border-radius: 8px;
  font-size: 14px;
  background: var(--wit);
  color: var(--tekst-donker);
  outline: none;
}

.tenant-kiezer select:focus {
  border-color: var(--groen-licht);
}

/* ================================================
   GRID LAYOUT
   ================================================ */
.raster-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ================================================
   UNDER CONSTRUCTION PAGINA
   ================================================ */
.constructie-pagina {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--groen-donker) 0%, var(--groen-midden) 50%, var(--bruin) 100%);
  text-align: center;
  padding: 32px;
  position: relative;
  overflow: hidden;
}

.constructie-pagina::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(201, 168, 76, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.04) 0%, transparent 50%);
}

.constructie-kaart {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 56px 48px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  border-top: 4px solid var(--goud);
  position: relative;
  z-index: 1;
}

.constructie-kaart .hoofd-icoon {
  font-size: 72px;
  display: block;
  margin-bottom: 20px;
}

.constructie-kaart h1 {
  font-size: 28px;
  font-weight: 800;
  color: var(--groen-donker);
  margin-bottom: 8px;
}

.constructie-kaart .tenant-naam {
  font-size: 18px;
  color: var(--goud);
  font-weight: 600;
  margin-bottom: 20px;
}

.constructie-kaart p {
  font-size: 15px;
  color: var(--tekst-midden);
  line-height: 1.6;
  margin-bottom: 32px;
}

/* ================================================
   HULPKLASSEN
   ================================================ */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.tekst-licht { color: var(--tekst-licht); }
.tekst-klein { font-size: 12px; }
.verborgen { display: none !important; }

/* ================================================
   SCROLLBAR
   ================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--beige); }
::-webkit-scrollbar-thumb { background: var(--beige-donker); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bruin-licht); }

/* ================================================
   RESPONSIEF
   ================================================ */
@media (max-width: 768px) {
  .zijbalk { width: 220px; }
  .hoofd-inhoud { margin-left: 220px; }
  .raster-2 { grid-template-columns: 1fr; }
  .pagina-inhoud { padding: 20px; }
}

@media (max-width: 600px) {
  .zijbalk { display: none; }
  .hoofd-inhoud { margin-left: 0; }
}