html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 5px;
}

/* Global page title sizing: slightly smaller across the site */
.container main h1,
.page-title {
  font-size: 1.8rem; /* adjust this value to taste (e.g. 1.1rem or 1.3rem) */
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Opdrachten table compact styling to fit more columns */
.opdrachten-table {
  font-size: 0.85rem; /* slightly smaller text */
}

/* Allow header cells to wrap (preferably into two lines) while keeping data cells single-line */
.opdrachten-table thead th {
  padding: 0.35rem 0.5rem;
  white-space: normal;         /* allow wrapping in headings */
  overflow-wrap: break-word;   /* break only at word boundaries when possible */
  word-break: normal;          /* avoid breaking words arbitrarily */
  max-width: 9rem;            /* adjust to encourage two-line headings */
  line-height: 1.15;
  vertical-align: bottom;
  text-align: left;
}

.opdrachten-table tbody td {
  padding: 0.35rem 0.5rem;     /* reduce cell padding */
  white-space: nowrap;         /* keep data on one line */
}

/* allow table to scroll horizontally on small screens */
.opdrachten-wrapper {
  overflow-x: auto;
}
/**/
/* Optional: make header text slightly bolder and smaller for clarity */
.opdrachten-table thead th {
  font-weight: 600;
  font-size: 0.82rem;
}

@media (max-width: 575.98px) {
  .opdrachten-table thead th {
    max-width: 6.5rem; /* encourage more wrapping on very small screens */
  }
}

/* Ensure table has a reasonable minimum width on desktop so the Edit button is visible */
@media (min-width: 992px) {
  .opdrachten-table {
    min-width: 1200px;  /*increase as needed to accommodate columns */
  }
   Reserve space for the action column so buttons are not clipped 
  .opdrachten-table th:last-child,
  .opdrachten-table td:last-child {
    width: 110px;
    white-space: nowrap;
    text-align: center;
  }
}

/* Highlight Code cell */
.code-cell {
 color: #b22222; /* firebrick */
 font-weight:600;
}