/* =========================================================
   overrides-2025.css (optimized)
   Doel: overlappende styling zonder HTML of bestaande CSS aan te passen
   Specifiek: 90vw layout (5% marge), table full width, th + btn-u donkergroen/wit, font 12px
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --green-900: #000090;     /* donkergroen */
  --green-800: #000080;     /* hover */
  --white: #ffffff;
  --text: #111827;          /* fallback text */
  --muted: #6b7280;
  --border: rgba(17,24,39,.15);
  --surface: #ffffff;

  --radius: 12px;
  --focus: 0 0 0 3px rgba(11,61,46,.25);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}

/* ---------- Base typography (12px overal) ---------- */
html, body{
  font-family: var(--font) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--text) !important;
}

/* Zorg dat veel voorkomende elementen niet “terug” schalen */
body, p, span, a, li, td, th, label, input, select, textarea, button{
  font-size: 12px !important;
}

/* ---------- Layout: maximaal 5% ruimte links/rechts ---------- */
/* Zet algemene containers op 90vw, zonder je HTML te hoeven kennen */
.container,
.container-fluid,
.wrapper,
.page-content,
.content,
main,
#content,
#page,
#wrapper{
  max-width: 90vw !important;   /* 100% - 2x5% */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Als er extra padding/marges zitten die de breedte “opeten” */
.container,
.container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------- Tables: altijd full width ---------- */
table,
.table{
  width: 100% !important;
  max-width: 100% !important;
}

/* Visueel netter (zonder risico) */
table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* ---------- Table headers: donkergroen + wit ---------- */
th,
table thead th,
.table thead th{
  background-color: var(--green-900) !important;
  color: var(--white) !important;
  font-weight: 600 !important;
  border-bottom: none !important;
  white-space: nowrap; /* veel headers zijn korte labels; voorkomt rare wraps */
}

/* Table cells iets leesbaarder */
table td,
.table td{
  vertical-align: middle;
}

/* ---------- Buttons: btn-u donkergroen + wit ---------- */
.btn-u{
  background-color: var(--green-900) !important;
  color: var(--white) !important;
  border: 1px solid var(--green-900) !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  text-decoration: none !important;
  display: inline-block;
}

/* Hover / focus */
.btn-u:hover{
  background-color: var(--green-800) !important;
  border-color: var(--green-800) !important;
  color: var(--white) !important;
}
.btn-u:focus{
  outline: none !important;
  box-shadow: var(--focus) !important;
}

/* Disabled */
.btn-u.disabled,
.btn-u:disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
}

/* ---------- Kleine polish (veilig) ---------- */
a{ text-underline-offset: 2px; }

input:focus, select:focus, textarea:focus, button:focus{
  outline: none !important;
  box-shadow: var(--focus) !important;
}

/* Als de UI “te smal” blijft door vaste width op een tabel-wrapper */
.table-responsive,
.table-container,
.dataTables_wrapper{
  width: 100% !important;
  max-width: 100% !important;
}


/* =========================================================
   HARD LAYOUT OVERRIDE
   body = 90% breed, gecentreerd
   ========================================================= */

html, body {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
}

body {
  width: 90% !important;
  max-width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-family: ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial !important;
  line-height: 1.45;
}

/* Zorg dat children geen eigen max-width forceren */
body > * {
  max-width: 100% !important;
}

/* =========================================================
   TABLES — altijd volledige breedte van body
   ========================================================= */

table,
.table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0;
}

/* =========================================================
   TABLE HEADERS — donkergroen + wit
   ========================================================= */

th,
table thead th,
.table thead th {
  background-color: #0b3d2e !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 600;
  border-bottom: none !important;
  white-space: nowrap;
}

/* =========================================================
   BUTTONS — .btn-u donkergroen + wit
   ========================================================= */

.btn-u {
  background-color: #0b3d2e !important;
  color: #ffffff !important;
  border: 1px solid #0b3d2e !important;
  font-size: 12px !important;
  font-weight: 600;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  text-decoration: none !important;
}

/* Hover */
.btn-u:hover {
  background-color: #095c45 !important;
  border-color: #095c45 !important;
  color: #ffffff !important;
}

/* Disabled */
.btn-u:disabled,
.btn-u.disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* =========================================================
   FORMS & TEXT — alles 12px
   ========================================================= */

p, span, a, li, td, label,
input, select, textarea, button {
  font-size: 12px !important;
}
/* =========================================================
   CONTAINER + HEADER — altijd 100% breed
   ========================================================= */

header,
.navbar,
.container,
.container-fluid,
.wrapper,
.page-header,
.header {
  width: 100% !important;
  max-width: 100% !important;
}

/* Voorkom dat padding de breedte verkleint */
.container,
.container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Zorg dat header niet gecentreerd wordt door parent rules */
header,
.navbar {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Logo blijft 40px hoog (veilig) */
.logo img,
.header-logo img,
.navbar-brand img,
#logo img {
  max-height: 40px !important;
  height: auto !important;
  width: auto !important;
}

/* =========================================================
   TYPOGRAFIE — alles 1.2em
   ========================================================= */

html {
  font-size: 1em !important;
}

body,
p, span, a, li, td, th, label,
input, select, textarea, button {
  font-size: 1em !important;
  line-height: 1.45;
}