/* BSC'68 groene thema-styling */
:root{
  --brand-bg: #E6F3E6;
  --brand-white: #FFFFFF;
  --brand-primary: #005C29;   /* donker groen */
  --brand-primary-2: #008C3F; /* iets lichter groen */
  --brand-sticky: #005C29;    /* tabel header achtergrond */
  --brand-muted: #D0E8D0;     /* zachte randkleur/achtergrond */
  --brand-row: #F0F8F0;       /* edit cell bg */
  --brand-row-hover: #E0F0E0; /* edit cell hover */
  --brand-shadow: rgba(0,0,0,0.1);
  --brand-focus: rgba(0, 92, 41, .25); /* focus ring */
}

/* basis */
body {
  background-color: var(--brand-bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

.container {
  max-width: 1400px;
  background-color: var(--brand-white);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px var(--brand-shadow);
}

/* branding */
.brand-logo{ height:44px; width:auto; object-fit:contain; }

h1 {
  color: var(--brand-primary);
  margin-bottom: 1.5rem;
}

/* tabs */
.nav-tabs .nav-link {
  color: #495057;
  font-weight: 500;
  border: none;
  border-bottom: 2px solid transparent;
  background-color: var(--brand-bg);
}

.nav-tabs .nav-link.active {
  color: var(--brand-primary);
  border-bottom: 2px solid var(--brand-primary-2);
  background-color: var(--brand-white);
}

/* tabel + scroll */
.table-responsive { max-height: 500px; overflow-y: auto; }

.table {
  background-color: var(--brand-white);
  box-shadow: 0 2px 4px var(--brand-shadow);
}

/* smallere datumkolom links */
.table th:first-child,
.table td:first-child {
  width: 8%;
  white-space: nowrap;
  padding: 8px;
}

/* sticky header */
.table th {
  background-color: var(--brand-sticky);
  color: var(--brand-white);
  position: sticky;
  top: 0;
  z-index: 10;
  text-align: center;
}

.table td { text-align: center; }

/* inline edit cellen */
.table td.editable { background-color: var(--brand-row); cursor: text; }
.table td.editable:hover { background-color: var(--brand-row-hover); }

/* knoppen */
.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-primary:hover {
  background-color: var(--brand-primary-2);
  border-color: var(--brand-primary-2);
}

.btn-outline-primary {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-outline-success { color: #198754; border-color: #198754; }
.btn-outline-success:hover { color:#fff; background-color:#198754; border-color:#198754; }

.btn-outline-danger { color: #dc3545; border-color: #dc3545; }
.btn-outline-danger:hover { color:#fff; background-color:#dc3545; border-color:#dc3545; }

/* focus states */
.form-control:focus,
.form-select:focus,
.btn:focus {
  box-shadow: 0 0 0 .2rem var(--brand-focus);
  border-color: var(--brand-primary-2);
}

/* accordeon */
.accordion-button {
  background-color: var(--brand-bg);
  color: var(--brand-primary);
}
.accordion-button:not(.collapsed) {
  background-color: var(--brand-muted);
  color: var(--brand-primary);
}
.accordion-item {
  margin-bottom: 1rem;
  background-color: var(--brand-white);
  border: 1px solid var(--brand-muted);
}
.accordion-body table { margin-bottom: 0; }

/* login */
.login-form {
  max-width: 400px;
  margin: 100px auto;
  padding: 20px;
  background-color: var(--brand-white);
  border-radius: 8px;
  box-shadow: 0 2px 4px var(--brand-shadow);
}

/* utilities */
.hidden { display: none; }


/* training status color coding */
:root{
  --status-v-bg:#d1f7e1; --status-v-fg:#0f5132; /* groen */
  --status-a-bg:#ffe8cc; --status-a-fg:#8a4b00; /* oranje */
  --status-z-bg:#dbeafe; --status-z-fg:#0c4a6e; /* blauw */
  --status-b-bg:#dbeafe; --status-b-fg:#0c4a6e; /* blauw */
  --status-s-bg:#fff9c4; --status-s-fg:#665c00; /* geel */
  --status-x-bg:#fde2e1; --status-x-fg:#842029; /* rood */
}
td[data-status="V"], td[data-status="v"]{ background-color:var(--status-v-bg)!important; color:var(--status-v-fg)!important; }
td[data-status="A"], td[data-status="a"]{ background-color:var(--status-a-bg)!important; color:var(--status-a-fg)!important; }
td[data-status="Z"], td[data-status="z"]{ background-color:var(--status-z-bg)!important; color:var(--status-z-fg)!important; }
td[data-status="B"], td[data-status="b"]{ background-color:var(--status-b-bg)!important; color:var(--status-b-fg)!important; }
td[data-status="S"], td[data-status="s"]{ background-color:var(--status-s-bg)!important; color:var(--status-s-fg)!important; }
td[data-status="X"], td[data-status="x"]{ background-color:var(--status-x-bg)!important; color:var(--status-x-fg)!important; }
/* make selects inherit cell color for better UX */
td[data-status] .form-select{ background-color: inherit; color: inherit; }