/* =========================================================
   overrides-2025-navy.css
   Primair kleur: #000080 (donkerblauw / navy)
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --blue-900: #000080;     /* navy */
  --blue-800: #0000a8;     /* hover (iets lichter) */
  --white: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: rgba(17,24,39,.15);
  --surface: #ffffff;

  --radius: 12px;
  --focus: 0 0 0 3px rgba(0,0,128,.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;
}

body, p, span, a, li, td, th, label,
input, select, textarea, button{
  font-size: 12px !important;
}

/* ---------- Layout ---------- */
.container,
.container-fluid,
.wrapper,
.page-content,
.content,
main,
#content,
#page,
#wrapper{
  max-width: 90vw !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.container,
.container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

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

table td,
.table td{
  vertical-align: middle;
}

/* ---------- Table headers: navy + wit ---------- */
th,
table thead th,
.table thead th{
  background-color: var(--blue-900) !important;
  color: var(--white) !important;
  font-weight: 600 !important;
  border-bottom: none !important;
  white-space: nowrap;
}

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

.btn-u:hover{
  background-color: var(--blue-800) !important;
  border-color: var(--blue-800) !important;
  color: var(--white) !important;
}

.btn-u:focus{
  outline: none !important;
  box-shadow: var(--focus) !important;
}

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

/* ---------- Focus & links ---------- */
a{ text-underline-offset: 2px; }

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

/* ---------- Table wrappers ---------- */
.table-responsive,
.table-container,
.dataTables_wrapper{
  width: 100% !important;
  max-width: 100% !important;
}

/* ---------- Body hard override ---------- */
html, body{
  margin: 0 !important;
  padding: 0 !important;
}

body{
  width: 90% !important;
  max-width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body > *{
  max-width: 100% !important;
}

/* ---------- Header & containers ---------- */
header,
.navbar,
.container,
.container-fluid,
.wrapper,
.page-header,
.header{
  width: 100% !important;
  max-width: 100% !important;
}

header,
.navbar{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

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