/* ======================================================
   VDW UNIVERSAL GLASS
   ------------------------------------------------------
   Alleen uiterlijk.
   Geen layout, geen scrollhoogtes, geen top/bottom/position hacks.

   Laden NA ut_vdw_style.css en NA pagina-eigen <style>.

   Nieuwe naamstandaard:
   .vdw_page
   .vdw_header
   .vdw_header-inner
   .vdw_title-container
   .vdw_content
   .vdw_section
   .vdw_section-title
   .vdw_button-row
   .vdw_button
   .vdw_table-container
   .vdw_table
   .vdw_total-bar
   .vdw_modal
   .vdw_modal-content
   ====================================================== */

:root {
  --vdw-glass-radius: 22px;
  --vdw-glass-fill: rgba(255,255,255,0.10);
  --vdw-glass-fill-soft: rgba(255,255,255,0.06);
  --vdw-glass-fill-hover: rgba(255,255,255,0.18);
  --vdw-glass-border: rgba(255,255,255,0.28);
  --vdw-glass-shadow: 0 6px 24px rgba(0,0,0,0.20);
  --vdw-glass-shadow-hover: 0 10px 30px rgba(0,0,0,0.26);
  --vdw-glass-text: #ffffff;
  --vdw-glass-text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 7px rgba(0,0,0,0.45);
  --vdw-glass-saturate: 180%;
  --vdw-glow-color: rgba(175,176,228,0.35);
}

html {
  background: #111 !important;
}

body {
  color: var(--vdw-glass-text) !important;
  background: rgba(0,0,0,0.10) !important;
}

/* Achtergrondfoto: scherp, zonder blur */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #111;
  background-image: url("/vdw_VERBOUW/vdw_AFB/afb_vw_achter.jpg");
  background-image: image-set(
    url("/vdw_VERBOUW/vdw_AFB/afb_vw_achter_3417.webp") type("image/webp"),
    url("/vdw_VERBOUW/vdw_AFB/afb_vw_achter.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

body::after {
  display: none !important;
  content: none !important;
}

/* ======================================================
   BASIS GLASS ELEMENTEN
   ====================================================== */

.vdw_header,
.vdw_sticky-header,
.vdw_dashboard-card,
.vdw_button,
.vdw_total-bar,
.vdw_navbar,
.vdw_modal-content,
.vdw_table-container,
.vdw_card,
.vdw_panel {
  background: var(--vdw-glass-fill) !important;
  border: 1px solid var(--vdw-glass-border) !important;
  border-radius: var(--vdw-glass-radius) !important;
  box-shadow:
    var(--vdw-glass-shadow),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
  -webkit-backdrop-filter: blur(0px) saturate(var(--vdw-glass-saturate)) !important;
  backdrop-filter: blur(0px) saturate(var(--vdw-glass-saturate)) !important;
}

/* Sticky header mag optisch glas zijn, maar layout blijft uit pagina-CSS */
.vdw_sticky-header {
  border-left: none !important;
  border-right: none !important;
}

/* ======================================================
   TEKST OP GLAS
   ====================================================== */

.vdw_header,
.vdw_header h1,
.vdw_header h2,
.vdw_sticky-header,
.vdw_title-container h1,
.vdw_section-title,
.vdw_dashboard-card,
.vdw_dashboard-card *,
.vdw_button,
.vdw_button *,
.vdw_total-bar,
.vdw_total-bar *,
.vdw_navbar,
.vdw_navbar *,
.vdw_modal-content,
.vdw_modal-content h1,
.vdw_modal-content h2,
.vdw_modal-content label {
  color: var(--vdw-glass-text) !important;
  text-shadow: var(--vdw-glass-text-shadow) !important;
}

/* ======================================================
   BUTTONS
   ====================================================== */

.vdw_button {
  background: var(--vdw-glass-fill) !important;
  border: 1px solid var(--vdw-glass-border) !important;
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.vdw_button:hover,
.vdw_dashboard-card:hover {
  background: var(--vdw-glass-fill-hover) !important;
  box-shadow:
    var(--vdw-glass-shadow-hover),
    0 0 18px var(--vdw-glow-color),
    inset 0 1px 0 rgba(255,255,255,0.50) !important;
}

.vdw_button:hover {
  transform: translateY(-2px);
}

.vdw_button:active {
  transform: scale(0.98);
}

/* Sectiekleuren blijven herkenbaar als tekstkleur, achtergrond blijft glas */
.vdw_calculatie .vdw_button,
.vdw_calculatie .vdw_button * {
  color: #DCEBFF !important;
}

.vdw_help .vdw_button,
.vdw_help .vdw_button * {
  color: #F4F4FF !important;
}

.vdw_info .vdw_button,
.vdw_info .vdw_button * {
  color: #D9F3FF !important;
}

.vdw_kopen .vdw_button,
.vdw_kopen .vdw_button * {
  color: #FFE1A8 !important;
}

.vdw_nieuw .vdw_button,
.vdw_nieuw .vdw_button * {
  color: #FFD3E6 !important;
}

.vdw_persoonlijk .vdw_button,
.vdw_persoonlijk .vdw_button * {
  color: #E4DDFF !important;
}

.vdw_planning .vdw_button,
.vdw_planning .vdw_button * {
  color: #D6FFE7 !important;
}

.vdw_pvdw .vdw_button,
.vdw_pvdw .vdw_button * {
  color: #FFF3BF !important;
}

/* Sectietitels dezelfde tekstkleur als de bijbehorende sectie */
.vdw_calculatie .vdw_section-title { color: #DCEBFF !important; }
.vdw_help .vdw_section-title       { color: #F4F4FF !important; }
.vdw_info .vdw_section-title       { color: #D9F3FF !important; }
.vdw_kopen .vdw_section-title      { color: #FFE1A8 !important; }
.vdw_nieuw .vdw_section-title      { color: #FFD3E6 !important; }
.vdw_persoonlijk .vdw_section-title{ color: #E4DDFF !important; }
.vdw_planning .vdw_section-title   { color: #D6FFE7 !important; }
.vdw_pvdw .vdw_section-title       { color: #FFF3BF !important; }

/* Dashboard iconen */
.vdw_dashboard-icon,
.vdw_button i,
.vdw_button span:first-child {
  color: inherit !important;
  text-shadow: var(--vdw-glass-text-shadow) !important;
}

/* ======================================================
   DATUM EN KLOK
   ------------------------------------------------------
   Alleen uiterlijk. Afmetingen/positie blijven uit index.php.
   ====================================================== */

.vdw_header-date,
.vdw_analog-clock {
  background: var(--vdw-glass-fill) !important;
  border: 1px solid var(--vdw-glass-border) !important;
  box-shadow:
    var(--vdw-glass-shadow),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
  -webkit-backdrop-filter: blur(0px) saturate(var(--vdw-glass-saturate)) !important;
  backdrop-filter: blur(0px) saturate(var(--vdw-glass-saturate)) !important;
}

.vdw_header-date-day,
.vdw_header-date-month {
  color: #ffffff !important;
  text-shadow: var(--vdw-glass-text-shadow) !important;
}

.vdw_clock-hour,
.vdw_clock-minute {
  background: rgba(0,0,0,0.70) !important;
}

.vdw_clock-second {
  background: rgba(200,0,0,0.85) !important;
}

.vdw_clock-center {
  background: #000000 !important;
}

/* ======================================================
   FILTERS / DROPDOWNS
   ------------------------------------------------------
   Algemene Glass-afwerking voor filterblokken.
   Alleen uiterlijk en breedte van het filterblok zelf;
   geen pagina-scroll of vaste positionering.
   ====================================================== */

.vdw_filter-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: max-content !important;
  max-width: calc(100% - 30px) !important;
  margin: 10px auto 16px auto !important;
  padding: 10px 18px !important;
  background: var(--vdw-glass-fill) !important;
  border: 1px solid var(--vdw-glass-border) !important;
  border-radius: 18px !important;
  box-shadow:
    var(--vdw-glass-shadow),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
  -webkit-backdrop-filter: blur(0px) saturate(var(--vdw-glass-saturate)) !important;
  backdrop-filter: blur(0px) saturate(var(--vdw-glass-saturate)) !important;
}

.vdw_filter-container label {
  color: var(--vdw-glass-text) !important;
  font-weight: bold !important;
  text-shadow: var(--vdw-glass-text-shadow) !important;
  white-space: nowrap !important;
}

.vdw_filter-container select,
.vdw_filter-container input,
.vdw_filter-container .vdw_select,
.vdw_filter-container .vdw_filter-select {
  min-width: 170px !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  background: rgba(255,255,255,0.88) !important;
  color: #212588 !important;
  text-shadow: none !important;
}

@media only screen and (max-width: 600px) {
  .vdw_filter-container {
    width: calc(100% - 24px) !important;
    flex-wrap: wrap !important;
  }

  .vdw_filter-container select,
  .vdw_filter-container input,
  .vdw_filter-container .vdw_select,
  .vdw_filter-container .vdw_filter-select {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ======================================================
   TABELLEN
   ====================================================== */

.vdw_table-container {
  background: var(--vdw-glass-fill-soft) !important;
}

.vdw_table {
  background: transparent !important;
}

.vdw_table th,
.vdw_table .vdw_th {
  background: rgba(70,73,170,0.58) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.28) !important;
  text-shadow: var(--vdw-glass-text-shadow) !important;
}

.vdw_table th a,
.vdw_table .vdw_th a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.vdw_table td,
.vdw_table .vdw_td,
.vdw_table .vdw_td-right,
.vdw_table .vdw_td-center {
  background: rgba(255,255,255,0.07) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.22) !important;
  text-shadow: var(--vdw-glass-text-shadow) !important;
}

/* Inline lichtgrijs uit bedragkolommen ook glass maken */
.vdw_table td[style*="background-color: #f0f0f0"],
.vdw_table td[style*="background-color:#f0f0f0"],
.vdw_table td[style*="background:#f0f0f0"],
.vdw_table td[style*="background: #f0f0f0"] {
  background: rgba(255,255,255,0.10) !important;
}

.vdw_table tr:hover td,
.vdw_tr:hover td,
.vdw_tr:hover .vdw_td,
.vdw_tr:hover .vdw_td-right,
.vdw_tr:hover .vdw_td-center {
  background: rgba(40,53,147,0.60) !important;
  color: #ffffff !important;
}

/* Statuskleuren mogen zichtbaar blijven, maar tekst leesbaar houden */
.vdw_tr.vdw_checked td,
.vdw_tr.vdw_started td,
.vdw_tr.vdw_wait td {
  text-shadow: none !important;
}

/* ======================================================
   TOTALENBALK
   ====================================================== */

.vdw_total-bar {
  background: var(--vdw-glass-fill) !important;
  border-color: var(--vdw-glass-border) !important;
}

.vdw_total-bar table,
.vdw_total-bar td,
.vdw_total-bar .vdw_table,
.vdw_total-bar .vdw_td,
.vdw_total-table,
.vdw_total-table td {
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.24) !important;
  text-shadow: var(--vdw-glass-text-shadow) !important;
}

/* ======================================================
   MODALS EN FORMULIEREN
   ====================================================== */

.vdw_modal-content {
  background: rgba(255,255,255,0.16) !important;
}

.vdw_modal-content input,
.vdw_modal-content select,
.vdw_modal-content textarea,
.vdw_input,
.vdw_dropdown,
.vdw_textarea,
.vdw_select,
.vdw_filter-select,
.vdw_login-input {
  background: rgba(255,255,255,0.86) !important;
  color: #1f245f !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  border-radius: 10px !important;
  text-shadow: none !important;
}

.vdw_modal-close,
.vdw_close-button {
  color: #ffffff !important;
  text-shadow: var(--vdw-glass-text-shadow) !important;
}

/* ======================================================
   MOBIEL
   ====================================================== */

@media only screen and (max-width: 600px) {
  :root {
    --vdw-glass-radius: 18px;
    --vdw-glass-fill: rgba(255,255,255,0.12);
    --vdw-glass-fill-hover: rgba(255,255,255,0.18);
  }
}