/* Centrale authenticatie — Versie: 2.0.0 — Datum: 26-10-2026.
 * Hergebruik van VERBOUW_TEST authenticatie v1.3.0; definitieve rootrelease. */
/* Centrale authenticatie testasset. Versie: 2.0.0 */
/* ======================================================
   VDW UNIVERSAL GLASS
   ------------------------------------------------------
   Alleen uiterlijk.
   Geen layout, geen scrollhoogtes, geen top/bottom/position hacks.

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

   Nieuwe naamstandaard:
   .vw_page
   .vw_header
   .vw_header-inner
   .vw_title-container
   .vw_content
   .vw_section
   .vw_section-title
   .vw_button-row
   .vw_button
   .vw_table-container
   .vw_table
   .vw_total-bar
   .vw_modal
   .vw_modal-content
   ====================================================== */

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

html {
  background: #111 !important;
}

body {
  color: var(--vw-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: linear-gradient(135deg, #212588, #7072cf);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

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

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

.vw_header,
.vw_sticky-header,
.vw_dashboard-card,
.vw_button,
.vw_total-bar,
.vw_navbar,
.vw_modal-content,
.vw_table-container,
.vw_card,
.vw_panel {
  background: var(--vw-glass-fill) !important;
  border: 1px solid var(--vw-glass-border) !important;
  border-radius: var(--vw-glass-radius) !important;
  box-shadow:
    var(--vw-glass-shadow),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
  -webkit-backdrop-filter: blur(0px) saturate(var(--vw-glass-saturate)) !important;
  backdrop-filter: blur(0px) saturate(var(--vw-glass-saturate)) !important;
}

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

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

.vw_header,
.vw_header h1,
.vw_header h2,
.vw_sticky-header,
.vw_title-container h1,
.vw_section-title,
.vw_dashboard-card,
.vw_dashboard-card *,
.vw_button,
.vw_button *,
.vw_total-bar,
.vw_total-bar *,
.vw_navbar,
.vw_navbar *,
.vw_modal-content,
.vw_modal-content h1,
.vw_modal-content h2,
.vw_modal-content label {
  color: var(--vw-glass-text) !important;
  text-shadow: var(--vw-glass-text-shadow) !important;
}

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

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

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

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

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

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

.vw_help .vw_button,
.vw_help .vw_button * {
  color: #F4F4FF !important;
}

.vw_info .vw_button,
.vw_info .vw_button * {
  color: #D9F3FF !important;
}

.vw_kopen .vw_button,
.vw_kopen .vw_button * {
  color: #FFE1A8 !important;
}

.vw_nieuw .vw_button,
.vw_nieuw .vw_button * {
  color: #FFD3E6 !important;
}

.vw_persoonlijk .vw_button,
.vw_persoonlijk .vw_button * {
  color: #E4DDFF !important;
}

.vw_planning .vw_button,
.vw_planning .vw_button * {
  color: #D6FFE7 !important;
}

.vw_pvdw .vw_button,
.vw_pvdw .vw_button * {
  color: #FFF3BF !important;
}

/* Sectietitels dezelfde tekstkleur als de bijbehorende sectie */
.vw_calculatie .vw_section-title { color: #DCEBFF !important; }
.vw_help .vw_section-title       { color: #F4F4FF !important; }
.vw_info .vw_section-title       { color: #D9F3FF !important; }
.vw_kopen .vw_section-title      { color: #FFE1A8 !important; }
.vw_nieuw .vw_section-title      { color: #FFD3E6 !important; }
.vw_persoonlijk .vw_section-title{ color: #E4DDFF !important; }
.vw_planning .vw_section-title   { color: #D6FFE7 !important; }
.vw_pvdw .vw_section-title       { color: #FFF3BF !important; }

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

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

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

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

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

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

.vw_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.
   ====================================================== */

.vw_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(--vw-glass-fill) !important;
  border: 1px solid var(--vw-glass-border) !important;
  border-radius: 18px !important;
  box-shadow:
    var(--vw-glass-shadow),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
  -webkit-backdrop-filter: blur(0px) saturate(var(--vw-glass-saturate)) !important;
  backdrop-filter: blur(0px) saturate(var(--vw-glass-saturate)) !important;
}

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

.vw_filter-container select,
.vw_filter-container input,
.vw_filter-container .vw_select,
.vw_filter-container .vw_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) {
  .vw_filter-container {
    width: calc(100% - 24px) !important;
    flex-wrap: wrap !important;
  }

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

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

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

.vw_table {
  background: transparent !important;
}

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

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

.vw_table td,
.vw_table .vw_td,
.vw_table .vw_td-right,
.vw_table .vw_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(--vw-glass-text-shadow) !important;
}

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

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

/* Statuskleuren mogen zichtbaar blijven, maar tekst leesbaar houden */
.vw_tr.vw_checked td,
.vw_tr.vw_started td,
.vw_tr.vw_wait td {
  text-shadow: none !important;
}

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

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

.vw_total-bar table,
.vw_total-bar td,
.vw_total-bar .vw_table,
.vw_total-bar .vw_td,
.vw_total-table,
.vw_total-table td {
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.24) !important;
  text-shadow: var(--vw-glass-text-shadow) !important;
}

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

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

.vw_modal-content input,
.vw_modal-content select,
.vw_modal-content textarea,
.vw_input,
.vw_dropdown,
.vw_textarea,
.vw_select,
.vw_filter-select,
.vw_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;
}

.vw_modal-close,
.vw_close-button {
  color: #ffffff !important;
  text-shadow: var(--vw-glass-text-shadow) !important;
}

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

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