/**
 * NX FILTRATION - CUSTOM STYLING
 * Gegenereerd op: 17-10-2025
 * 
 * LET OP: Dit bestand is gegenereerd vanuit console-test.js
 * Wijzigingen ALTIJD eerst testen in console-test.js!
 * 
 * VERSIE: 3.0 - HELDERBLAUW IONISCH DESIGN
 * - Nieuwe moderne helderblauw design (geïnspireerd op ionische tabellen)
 * - Bootstrap subgrid styling met card header
 * - Zebra striping met lichtblauw
 * - Oude Fluent UI styling behouden als backup
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTIE 1: NIEUWE STYLING - HELDERBLAUW IONISCH DESIGN
   Datum: 17-10-2025
   Voor: Bootstrap table.table-striped (subgrids in formulieren)
   Design: Moderne card-based layout met helderblauwe accenten
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  --nx-blue-bright: #1E66FF;
  --nx-blue-dark: #0052cc;
  --nx-light-row: #f7faff;
  --nx-border: #e6eefc;
  --nx-card-bg: #fff;
  --nx-radius: 12px;
}

/* --- PAGE ACHTERGROND (licht blauw tint) --- */
div[style*="background: rgb(250, 250, 250)"],
div[style*="background-color: rgb(250, 250, 250)"] {
  background: #f6f9ff !important;
  background-color: #f6f9ff !important;
}

/* --- VERWIJDER ONGEWENSTE BORDERS --- */
.crmEntityFormView,
.entitylist,
.modal-content,
.popover-content {
  border: none !important;
}

/* --- TABEL CONTAINER (Card Style met Shadow) --- */
table.table.table-striped,
table.table-striped {
  --bs-table-striped-bg: var(--nx-light-row) !important;
  --bs-table-striped-color: #111827 !important;
  --bs-table-accent-bg: transparent !important;
  background-color: var(--nx-card-bg) !important;
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 0 0 var(--nx-radius) var(--nx-radius) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  box-shadow: 0 6px 18px rgba(7, 18, 66, 0.06) !important;
  font-family: Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  margin: 0 0 15px 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Zorg dat table wrapper ook geen overflow heeft */
.view-grid.table-responsive {
  overflow: visible !important;
}

/* --- DONKERBLAUWE HEADER (zoals ionische tabellen) --- */
table.table.table-striped thead,
table.table-striped thead {
  background: var(--nx-blue-dark) !important;
  border: none !important;
}

table.table.table-striped thead th {
  color: white !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-align: left !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  background: transparent !important;
}

table.table.table-striped thead th * {
  color: white !important;
}

/* --- RIJ STYLING (zebra striping met lichtblauw) --- */
table.table-striped tbody tr,
table.table-striped > tbody > tr {
  border-bottom: 1px solid var(--nx-border) !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

/* Witte achtergrond voor odd rows */
table.table-striped tbody tr:nth-child(odd),
table.table-striped tbody tr:nth-of-type(odd),
table.table-striped > tbody > tr:nth-child(odd) {
  background-color: #ffffff !important;
  background-image: none !important;
  background: #ffffff !important;
}

/* Lichtblauwe zebra striping voor even rows */
table.table-striped tbody tr:nth-child(even),
table.table-striped tbody tr:nth-of-type(even),
table.table-striped > tbody > tr:nth-child(even) {
  background-color: var(--nx-light-row) !important;
  background-image: none !important;
  background: var(--nx-light-row) !important;
}

/* Hover effect - lichtblauw voor alle rijen */
table.table.table-striped tbody tr:hover,
table.table-striped tbody tr:hover {
  background-color: #e8f2ff !important;
  background: #e8f2ff !important;
  box-shadow: 0 2px 8px rgba(30, 102, 255, 0.1) !important;
}

/* --- CELL STYLING --- */
table.table.table-striped tbody td,
table.table-striped tbody td,
table.table.table-striped > tbody > tr > td,
table.table-striped > tbody > tr > td {
  padding: 12px 16px !important;
  font-size: 0.94rem !important;
  color: #111827 !important;
  text-align: left !important;
  border-bottom: 1px solid var(--nx-border) !important;
  border-right: none !important;
  border-left: none !important;
  background-color: transparent !important;
  background: transparent !important;
  transition: background-color 0.15s ease !important;
}

table.table.table-striped tbody tr:hover td,
table.table-striped tbody tr:hover td {
  background-color: transparent !important;
}

/* --- LINKS --- */
table.table-striped tbody td a {
  color: var(--nx-blue-bright) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

table.table-striped tbody td a:hover {
  color: var(--nx-blue-dark) !important;
  text-decoration: underline !important;
}

/* --- BUTTONS IN TABLE --- */
table.table-striped .btn,
table.table-striped .btn:hover,
table.table-striped .btn:focus,
table.table-striped .btn:active,
table.table-striped .dropdown-toggle,
table.table-striped .dropdown-toggle:hover,
table.table-striped .dropdown-toggle:focus,
table.table-striped .dropdown-toggle:active {
  color: #6c757d !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 8px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: none !important;
  transform: none !important;
}

/* --- DROPDOWN MENU ITEMS --- */
.dropdown-menu {
  z-index: 9999 !important;
}

.dropdown-menu .dropdown-item {
  color: #212529 !important;
  background-color: transparent !important;
  font-size: 14px !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  color: #212529 !important;
  background-color: #f8f9fa !important;
}

.dropdown-menu .dropdown-item:active {
  color: #fff !important;
  background-color: #0a0ae6 !important;
}

/* Dropdown menu item icons en spans moeten ook de juiste kleur hebben */
.dropdown-menu .dropdown-item span,
.dropdown-menu .dropdown-item .fa,
.dropdown-menu .dropdown-item .fa-solid,
.dropdown-menu .dropdown-item .fa-trash-can {
  color: inherit !important;
}

/* NAVIGATIE/PROFIEL DROPDOWN - Witte tekst voor ALLE items */
a.dropdown-item[href*="/profile"],
a.dropdown-item[href*="/Account"],
a.dropdown-item[aria-label="Profile"],
a.dropdown-item[aria-label="Sign out"] {
  color: #ffffff !important;
}

a.dropdown-item[href*="/profile"]:hover,
a.dropdown-item[href*="/Account"]:hover,
a.dropdown-item[aria-label="Profile"]:hover,
a.dropdown-item[aria-label="Sign out"]:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ZEER SPECIFIEKE overrides voor items binnen table headers */
table thead .dropdown-menu .dropdown-item,
table thead .dropdown-menu .dropdown-item a,
table thead .dropdown-menu .dropdown-item span,
table.table-striped thead .dropdown-menu .dropdown-item,
table.table-striped thead .dropdown-menu .dropdown-item * {
  color: #212529 !important;
  background: transparent !important;
}

table thead .dropdown-menu .dropdown-item:hover,
table thead .dropdown-menu .dropdown-item:hover *,
table.table-striped thead .dropdown-menu .dropdown-item:hover,
table.table-striped thead .dropdown-menu .dropdown-item:hover * {
  color: #212529 !important;
  background-color: #f8f9fa !important;
}

/* Overschrijf ALL wildcard selectors van table headers */
table.table-striped thead th * .dropdown-item,
table.table-striped thead th * .dropdown-item * {
  color: #212529 !important;
}

/* --- SIGN IN, REGISTER, UPDATE & SUBMIT BUTTONS --- */
/* Aparte styling voor login/register/profile pagina's - witte tekst op blauwe achtergrond */
/* LET OP: Alleen specifieke buttons met ID, NIET de navigatie links */
button#submit-signin-local.btn.btn-primary,
button#submit-forgot-password.btn.btn-primary,
input#customSubmitButton.btn.btn-primary[type="submit"],
input#ContentContainer_MainContent_MainContent_ContentBottom_SubmitButton.btn.btn-primary[type="button"] {
  background: var(--nx-blue-bright) !important;
  color: white !important;
  border: 1px solid var(--nx-blue-bright) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
  text-transform: none !important;
  box-shadow: 0 2px 6px rgba(30, 102, 255, 0.25) !important;
  min-height: 32px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

button#submit-signin-local.btn.btn-primary:hover,
button#submit-forgot-password.btn.btn-primary:hover,
input#customSubmitButton.btn.btn-primary[type="submit"]:hover,
input#ContentContainer_MainContent_MainContent_ContentBottom_SubmitButton.btn.btn-primary[type="button"]:hover {
  background: var(--nx-blue-dark) !important;
  color: white !important;
  border-color: var(--nx-blue-dark) !important;
  box-shadow: 0 2px 8px rgba(0, 82, 204, 0.35) !important;
  text-decoration: none !important;
}

button#submit-signin-local.btn.btn-primary:active,
button#submit-forgot-password.btn.btn-primary:active,
input#customSubmitButton.btn.btn-primary[type="submit"]:active,
input#ContentContainer_MainContent_MainContent_ContentBottom_SubmitButton.btn.btn-primary[type="button"]:active {
  background: #003d99 !important;
  transform: translateY(1px) !important;
}

button#submit-signin-local.btn.btn-primary:focus,
button#submit-forgot-password.btn.btn-primary:focus,
input#customSubmitButton.btn.btn-primary[type="submit"]:focus,
input#ContentContainer_MainContent_MainContent_ContentBottom_SubmitButton.btn.btn-primary[type="button"]:focus {
  outline: 2px solid white !important;
  outline-offset: 2px !important;
}

/* Forgot Password link - zelfde button stijl (NIET nav-link!) */
a[href*="forgotpassword"]:not(.nav-link),
a[href*="ForgotPassword"]:not(.nav-link),
a.btn-link[href*="password"]:not(.nav-link) {
  background: white !important;
  color: var(--nx-blue-bright) !important;
  border: 1px solid #e0e7ff !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
  text-transform: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  min-height: 32px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

a[href*="forgotpassword"]:not(.nav-link):hover,
a[href*="ForgotPassword"]:not(.nav-link):hover,
a.btn-link[href*="password"]:not(.nav-link):hover {
  background: #f0f4ff !important;
  color: var(--nx-blue-bright) !important;
  border-color: var(--nx-blue-bright) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  text-decoration: none !important;
}

/* --- ADD BUTTON - Witte button met blauwe text (zoals ionische tabellen) --- */
/* Exclude tab buttons, nav buttons, nav-link items, en login page buttons */
a.btn.btn-primary:not(.nav-link),
button[title*="Add"]:not(.power-pages-tab-button):not(.tab-nav-prev):not(.tab-nav-next),
button[aria-label*="Add"]:not(.power-pages-tab-button):not(.tab-nav-prev):not(.tab-nav-next),
button#balanced-btn,
button#populate-default-values-btn {
  background: white !important;
  color: var(--nx-blue-bright) !important;
  border: 1px solid #e0e7ff !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
  text-transform: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  min-height: 32px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

a.btn.btn-primary:not(.nav-link):hover,
button[title*="Add"]:not(.power-pages-tab-button):not(.tab-nav-prev):not(.tab-nav-next):hover,
button[aria-label*="Add"]:not(.power-pages-tab-button):not(.tab-nav-prev):not(.tab-nav-next):hover,
button#balanced-btn:hover,
button#populate-default-values-btn:hover {
  background: #f0f4ff !important;
  color: var(--nx-blue-bright) !important;
  border-color: var(--nx-blue-bright) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  text-decoration: none !important;
}

a.btn.btn-primary:not(.nav-link):active,
button[title*="Add"]:not(.power-pages-tab-button):not(.tab-nav-prev):not(.tab-nav-next):active,
button[aria-label*="Add"]:not(.power-pages-tab-button):not(.tab-nav-prev):not(.tab-nav-next):active,
button#balanced-btn:active,
button#populate-default-values-btn:active {
  background: #e8f0ff !important;
  transform: translateY(1px) !important;
}

a.btn.btn-primary:not(.nav-link):focus,
button[title*="Add"]:not(.power-pages-tab-button):not(.tab-nav-prev):not(.tab-nav-next):focus,
button[aria-label*="Add"]:not(.power-pages-tab-button):not(.tab-nav-prev):not(.tab-nav-next):focus,
button#balanced-btn:focus,
button#populate-default-values-btn:focus {
  outline: 2px solid var(--nx-blue-bright) !important;
  outline-offset: 2px !important;
}

/* --- STANDARD INPUT FIELDS (Modern Blue Style) --- */
/* Alleen binnen portal-form - niet op login/register pagina's */
.portal-form input.text.decimal.form-control,
.portal-form input.text.form-control,
.portal-form input.decimal.form-control,
.portal-form input.whole.form-control,
.portal-form input.form-control[type="text"],
.portal-form input.form-control[type="number"],
.portal-form input.form-control[type="email"],
.portal-form input.form-control[type="password"],
.portal-form input.form-control[type="tel"],
.portal-form input.form-control,
input#cw_conc {
  background: white !important;
  color: #111827 !important;
  border: 1px solid #e0e7ff !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-family: Inter, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  min-height: 36px !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* Input fields met validation border (groen linkerkant) */
input.form-control[style*="border-left"] {
  border-top: 1px solid #e0e7ff !important;
  border-right: 1px solid #e0e7ff !important;
  border-bottom: 1px solid #e0e7ff !important;
  /* border-left blijft intact voor validatie kleuren (groen/oranje/rood) */
}

/* --- SELECT DROPDOWNS (met pijltje) --- */
/* Alleen binnen portal-form - niet op login/register pagina's */
.portal-form select.form-control.form-select.picklist,
.portal-form select.lookup.form-control,
.portal-form select.form-control {
  background: white !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 12px !important;
  color: #111827 !important;
  border: 1px solid #e0e7ff !important;
  border-radius: 8px !important;
  padding: 8px 32px 8px 12px !important;
  font-size: 14px !important;
  font-family: Inter, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  min-height: 36px !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}



/* --- SELECT DROPDOWNS (met pijltje) --- */
/* Alleen binnen portal-form - niet op login/register pagina's */
select.form-control.form-select.picklist,
select.lookup.form-control,
select.form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 12px !important;
  border-top: 1px solid #e0e7ff !important;
  border-right: 1px solid #e0e7ff !important;
  border-bottom: 1px solid #e0e7ff !important;
}





/* --- SELECT DROPDOWNS READONLY (zonder pijltje) --- */
select.readonly.form-control.form-select.picklist,
select.readonly.lookup.form-control,
select[readonly].form-control.form-select.picklist,
select[readonly].lookup.form-control {
  background: var(--nx-light-row) !important;
  background-image: none !important;
  color: #6b7280 !important;
  border: 1px solid var(--nx-border) !important;
  padding: 8px 12px !important;
  cursor: not-allowed !important;
}

input.text.decimal.form-control:focus,
input.text.form-control:focus,
input.decimal.form-control:focus,
input.whole.form-control:focus,
input.form-control[type="text"]:focus,
input.form-control[type="number"]:focus,
input.form-control[type="email"]:focus,
input.form-control[type="password"]:focus,
input.form-control[type="tel"]:focus,
input.form-control:focus {
  outline: 2px solid var(--nx-blue-bright) !important;
  outline-offset: 0px !important;
  border-color: var(--nx-blue-bright) !important;
  box-shadow: 0 2px 8px rgba(30, 102, 255, 0.15) !important;
}

select.form-control.form-select.picklist:focus,
select.lookup.form-control:focus,
select.form-control:focus {
  outline: 2px solid var(--nx-blue-bright) !important;
  outline-offset: 0px !important;
  border-color: var(--nx-blue-bright) !important;
  box-shadow: 0 2px 8px rgba(30, 102, 255, 0.15) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231E66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 12px !important;
}

/* --- READONLY INPUT FIELDS (Total meq/l, Balanced) --- */
input.readonly,
input[readonly] {
  background-color: var(--nx-light-row) !important;
  color: #6b7280 !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 0.94rem !important;
  font-family: Inter, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  min-height: 36px !important;
}

/* --- LABELS voor readonly fields --- */
label.field-label {
  color: #111827 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  display: block !important;
  font-family: Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* --- SUBGRID LABELS (Card Header Style zoals ionische tabellen) --- */
h3.form-subgrid-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: -1px !important;
  margin-top: 24px !important;
  gap: 15px !important;
  padding: 14px 20px !important;
  border-bottom: none !important;
  box-shadow: 0 6px 18px rgba(7, 18, 66, 0.06) !important;
  border-radius: var(--nx-radius) var(--nx-radius) 0 0 !important;
  background: var(--nx-blue-bright) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Verwijder witte achtergrond van parent containers */
h3.form-subgrid-heading::before {
  content: '' !important;
  position: absolute !important;
  top: -20px !important;
  left: -20px !important;
  right: -20px !important;
  bottom: 0 !important;
  background: transparent !important;
  z-index: -1 !important;
}

/* Zorg dat parent container geen witte achtergrond heeft */
.control:has(h3.form-subgrid-heading),
div:has(> h3.form-subgrid-heading) {
  background: transparent !important;
  padding: 0 !important;
}

label.field-label[for*="Subgrid"],
label.field-label[for*="subgrid"] {
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
  display: inline-block !important;
  font-family: Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  letter-spacing: 0 !important;
  flex-grow: 1 !important;
  text-transform: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Toolbar inside h3 (after JS moves it) */
h3.form-subgrid-heading > div.view-toolbar {
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

h3.form-subgrid-heading > div.view-toolbar .toolbar-actions {
  margin: 0 !important;
}

/* Remove border from grid-actions */
.grid-actions,
div.grid-actions {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* --- TABLE CELLS met form controls --- */
td.form-control-cell {
  vertical-align: top !important;
}

td.form-control-cell .table-info {
  margin-bottom: 8px !important;
}

td.form-control-cell .control {
  display: block !important;
}

/* --- UNIT FIELD WRAPPER FIX --- */
/* Fix voor unit-field-wrapper met validation warnings - overschrijf inline styles */
div.unit-field-wrapper[style] {
  font-size: 14px !important;
  line-height: 1.5 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Input binnen unit-field-wrapper - behoud ruimte voor unit label */
.unit-field-wrapper input.form-control {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Unit label rechts blijft op zijn plek */
.unit-field-wrapper .unit-label {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  height: 38px !important;
  line-height: 38px !important;
}

/* Validation warning - neem normale ruimte in onder het input veld */
div[id^="inline-validation-warning"],
div[id^="inline-validation-error"] {
  position: static !important;
  display: flex !important;
  width: 100% !important;
  margin-top: 4px !important;
  clear: both !important;
  float: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FILE UPLOAD STYLING - PDF & Word Documents
   Datum: 3 november 2025
   Voor: File upload controls in formulieren
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Verberg Change File en Delete buttons */
.btn-for-file-input,
.btn-for-delete {
  display: none !important;
}

/* File control container - moderne card style */
.file-control-container {
  background: white !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: var(--nx-radius) !important;
  padding: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.15s ease !important;
}

.file-control-container:hover {
  box-shadow: 0 4px 12px rgba(30, 102, 255, 0.12) !important;
  border-color: var(--nx-blue-bright) !important;
}

/* File link container */
.container-filelink-delete.file-link-and-delete {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
}

/* File name container met icon */
.break-file-name.file-name-container {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* File link styling */
.file-name-container a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--nx-blue-bright) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  transition: all 0.15s ease !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  background: #f7faff !important;
}

.file-name-container a:hover {
  color: var(--nx-blue-dark) !important;
  background: #e8f2ff !important;
  text-decoration: none !important;
}

/* Icon voor file type - voeg toe via CSS before pseudo-element */
.file-name-container a::before {
  content: "📄" !important;
  font-size: 20px !important;
  display: inline-block !important;
}

/* File naam styling */
.file-name-container span {
  color: inherit !important;
  font-family: Inter, 'Segoe UI', sans-serif !important;
}

/* Label styling voor file fields */
label#cw_fbprojectionreportpdf_label,
label#cw_fbprojectionreportword_label {
  color: #374151 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Table cell voor file fields */
td.cell:has(.file-control-container) {
  padding: 12px !important;
}

/* Verberg "No file selected" text */
.file-name-container div[style*="display:none"] {
  display: none !important;
}

/* Container voor file input - verberg volledig */
.container-file-input {
  display: none !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTIE 2: OUDE STYLING - FLUENT UI PROJECT TABLE (BACKUP)
   Datum: Oorspronkelijk 17-10-2025
   Voor: ms-DetailsList (Fluent UI tabellen op projectenpagina)
   Status: BEHOUDEN ALS BACKUP
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* --- PAGE ACHTERGROND (grijs naar wit) --- */
div[style*="background: rgb(250, 250, 250)"],
div[style*="background-color: rgb(250, 250, 250)"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* --- TABEL CONTAINER --- */
.ms-DetailsList {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 15px 0;
}

/* --- BLAUWE HEADER (zoals STAGE PARAMETERS) --- */
.ms-DetailsHeader {
  background: linear-gradient(135deg, #0a0ae6 0%, #3838f0 100%) !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
}

.ms-DetailsList-headerWrapper {
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ms-DetailsHeader-cell {
  border-right: 1px solid #ffffff !important;
  border-left: none !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 12px 8px !important;
  background: transparent !important;
  margin: 0 !important;
}

.ms-DetailsHeader-cell:first-child {
  border-left: none !important;
}

.ms-DetailsHeader-cell:last-child {
  border-right: none !important;
}

.ms-DetailsHeader-cellTitle {
  color: white !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  text-align: center;
  letter-spacing: 0.3px;
}

.ms-DetailsHeader-cellName {
  color: white !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* --- RIJ STYLING (zebra striping) --- */
.ms-DetailsRow {
  border-bottom: 1px solid #e0e0e0 !important;
  transition: all 0.2s ease;
  cursor: pointer;
}

.ms-DetailsRow:nth-child(odd) {
  background-color: #ffffff !important;
}

.ms-DetailsRow:nth-child(even) {
  background-color: #f8f9fa !important;
}

.ms-DetailsRow:hover {
  background-color: #e8f4f8 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* --- CELL STYLING --- */
.ms-DetailsRow-cell {
  padding: 10px 8px !important;
  font-size: 12px !important;
  color: #2c3e50 !important;
  text-align: left !important;
  border-right: 1px solid #e0e0e0;
  background-color: transparent !important;
  transition: background-color 0.2s ease;
}

.ms-DetailsRow:hover .ms-DetailsRow-cell {
  background-color: #e8f4f8 !important;
}

/* --- LINKS (Project Namen) --- */
.ms-DetailsRow-cell a.ms-Link {
  color: #2c3e50 !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  transition: all 0.2s ease;
}

.ms-DetailsRow-cell a.ms-Link:hover {
  color: #0a0ae6 !important;
  text-decoration: underline !important;
}

/* --- MORE BUTTON (drie puntjes) --- */
.ms-Button--icon {
  color: #6c757d !important;
  transition: all 0.2s ease;
  border-radius: 4px;
  padding: 6px 8px;
  background: transparent !important;
}

.ms-Button--icon:hover {
  background-color: rgba(10, 10, 230, 0.1) !important;
  color: #0a0ae6 !important;
}

/* --- COLUMN FILTER CHEVRON --- */
.ms-DetailsHeader-filterChevron {
  color: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.2s ease;
}

.ms-DetailsHeader-cellTitle:hover .ms-DetailsHeader-filterChevron {
  color: white !important;
}

/* --- FOCUS STATES --- */
.ms-DetailsRow:focus-within {
  outline: 2px solid #0a0ae6;
  outline-offset: -2px;
}


/* ===================================
   NX FILTRATION - GEAVANCEERD
   =================================== */

/* --- COMMAND BAR CONTAINER (cleaner) --- */
.ms-CommandBar {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* --- SEARCH BOX - Subtiele Stijl --- */
.ms-SearchBox {
  border: 1px solid #d0d0d0 !important;
  border-radius: 4px !important;
  transition: all 0.2s ease;
  background: white !important;
  box-shadow: none !important;
}

.ms-SearchBox:focus-within {
  border-color: #0a0ae6 !important;
  box-shadow: 0 0 0 1px #0a0ae6 !important;
}

.ms-SearchBox-field {
  font-size: 14px !important;
}

.ms-SearchBox-iconContainer {
  color: #6c757d !important;
}

.ms-SearchBox:focus-within .ms-SearchBox-iconContainer {
  color: #0a0ae6 !important;
}

/* --- BUTTONS (New Projection) - Clean Moderne Stijl --- */
.ms-Button--default:not(.ms-Button--hasMenu),
.ms-CommandBarItem-link:not(.ms-Button--hasMenu) {
  background: white !important;
  color: #333333 !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 4px !important;
  padding: 8px 16px !important;
  font-weight: 400 !important;
  transition: all 0.15s ease !important;
  text-transform: none !important;
  box-shadow: none !important;
  min-height: 32px !important;
}

.ms-Button--default:not(.ms-Button--hasMenu):hover,
.ms-CommandBarItem-link:not(.ms-Button--hasMenu):hover {
  background: #f5f5f5 !important;
  border-color: #0a0ae6 !important;
  color: #0a0ae6 !important;
  box-shadow: none !important;
}

.ms-Button--default:not(.ms-Button--hasMenu):active,
.ms-CommandBarItem-link:not(.ms-Button--hasMenu):active {
  background: #e8e8e8 !important;
}

/* --- DROPDOWN MENU (PP_Projection_View) - Clean Stijl --- */
.ms-Button--hasMenu:not(.ms-Button--icon) {
  background: white !important;
  color: #333333 !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  font-weight: 400 !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
  min-height: 32px !important;
}

.ms-Button--hasMenu:not(.ms-Button--icon):hover {
  background: #f5f5f5 !important;
  border-color: #0a0ae6 !important;
  color: #0a0ae6 !important;
  box-shadow: none !important;
}

.ms-Button--hasMenu:not(.ms-Button--icon) .ms-Button-icon,
.ms-Button--hasMenu:not(.ms-Button--icon) .ms-Button-menuIcon {
  color: #666666 !important;
  transition: color 0.15s ease;
}

.ms-Button--hasMenu:not(.ms-Button--icon):hover .ms-Button-icon,
.ms-Button--hasMenu:not(.ms-Button--icon):hover .ms-Button-menuIcon {
  color: #0a0ae6 !important;
}

.ms-Button--hasMenu:not(.ms-Button--icon) .ms-Button-label {
  color: #333333 !important;
  transition: color 0.15s ease;
}

.ms-Button--hasMenu:not(.ms-Button--icon):hover .ms-Button-label {
  color: #0a0ae6 !important;
}

/* --- TABEL ACTION BUTTONS (More icon) blijven grijs --- */
.ms-Button--icon.ms-Button--hasMenu {
  background: transparent !important;
  color: #6c757d !important;
  border: none !important;
  box-shadow: none !important;
}

.ms-Button--icon.ms-Button--hasMenu:hover {
  background-color: rgba(10, 10, 230, 0.08) !important;
  color: #0a0ae6 !important;
}

/* --- LOADING SPINNER --- */
.ms-Spinner {
  color: #0504c8 !important;
}

/* --- SCROLL BAR --- */
.ms-DetailsList::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.ms-DetailsList::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.ms-DetailsList::-webkit-scrollbar-thumb {
  background: #0504c8;
  border-radius: 4px;
}

.ms-DetailsList::-webkit-scrollbar-thumb:hover {
  background: #0403a0;
}

/* --- STATUS BADGES (Saved, New, etc) --- */
.ms-DetailsRow-cell[data-automation-key="cw_projectionstatus"] {
  font-weight: 500;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .ms-DetailsRow-cell {
    padding: 12px 8px !important;
    font-size: 12px !important;
  }
  
  .ms-DetailsHeader-cellTitle {
    font-size: 13px !important;
  }
}