/* Global font and base styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: transparent;
    font-size: 14px;
}

h1, h2, h3, label {
    font-weight: bold;
    font-size: 14px;
}


:root {
    --bg-light: #ffffff;
    --bg-dark: #111111;
    --text-light: #0f0f0f;
    --text-dark: #e6e6e6;
}


/* Container-based theme */
.container.light-body {
    background-color: var(--bg-light);
    color: var(--text-light);
}

.container.dark-body {
    background-color: #151820;
    color: var(--text-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    border: 1px solid #2a2f3a;
}


label, .btn, .rc-slider {
    color: inherit; /* ensures all text follows body color */
}



/* Container styling */
.container {
    width: 100%;
    max-width: none;
    padding: 20px;
    background-color: var(--bg-light);
    color: inherit;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    min-height: 100vh;
    box-sizing: border-box;
}


/* Dark mode override for container background */
.dark-body .container {
    background-color: #151820 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    border: 1px solid #2a2f3a;
}



/* Scrollbars */
.dark-body ::-webkit-scrollbar-thumb { background: #2a2f3a; }
.dark-body ::-webkit-scrollbar-track { background: #171a22; }

/* Images dark mode */
.container.dark-body #haskoning-logo,
.container.dark-body #tijdlijntool-logo {
    filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(1.05);
    transition: filter 0.25s ease; /* smooth toggle */
 }


/* Checklists */
#klant-categorie-checklist input[type="checkbox"],
#klant-checklist input[type="checkbox"],
#projectsoort-checklist input[type="checkbox"],
#om-checklist input[type="checkbox"],
#tm-checklist input[type="checkbox"],
#ts-checklist input[type="checkbox"],
#pm-checklist input[type="checkbox"],
#contractvorm-checklist input[type="checkbox"] {
    margin-right: 6px;
    accent-color: #0078D4;
}


/* Ensure checklist text uses Arial */
#klant-categorie-checklist label,
#klant-checklist label,
#contractvorm-checklist label,
#om-checklist label,
#tm-checklist label,
#ts-checklist label,
#pm-checklist label,
#projectsoort-checklist label {
    font-family: Arial, sans-serif;
    font-weight: normal;
    display: block;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
    font-size: 12px;
}

#klant-categorie-checklist label:hover,
#klant-checklist label:hover,
#contractvorm-checklist label:hover,
#om-checklist label:hover,
#tm-checklist label:hover,
#ts-checklist label:hover,
#pm-checklist label:hover,
#projectsoort-checklist label:hover {
    background-color: #e6f0ff;
}

#asset-outline-toggle label {
    font-family: Arial, sans-serif;
    padding-top: 15px !important;
    display: block;
}

/* Make native form controls render dark */
.dark-body {
  color-scheme: dark;
}




/* ---------- dcc.Checklist dark theme ---------- */


/* Inherit text color in dark sections */
.dark-body #klant-categorie-checklist label,
.dark-body #klant-checklist label,
.dark-body #contractvorm-checklist label,
.dark-body #om-checklist label,
.dark-body #tm-checklist label,
.dark-body #ts-checklist label,
.dark-body #pm-checklist label,
.dark-body #projectsoort-checklist label {
    color: inherit;
    background-color: transparent;
}

/* Dark hover for checklist items */
.dark-body #klant-categorie-checklist label:hover,
.dark-body #klant-checklist label:hover,
.dark-body #contractvorm-checklist label:hover,
.dark-body #om-checklist label:hover,
.dark-body #tm-checklist label:hover,
.dark-body #ts-checklist label:hover,
.dark-body #pm-checklist label:hover,
.dark-body #projectsoort-checklist label:hover {
    background-color: #1f2530 !important; /* darker hover for contrast */
}

/* Checkbox accent (tick color) in dark mode */
.dark-body #klant-categorie-checklist input[type="checkbox"],
.dark-body #klant-checklist input[type="checkbox"],
.dark-body #contractvorm-checklist input[type="checkbox"],
.dark-body #om-checklist input[type="checkbox"],
.dark-body #tm-checklist input[type="checkbox"],
.dark-body #ts-checklist input[type="checkbox"],
.dark-body #pm-checklist input[type="checkbox"],
.dark-body #projectsoort-checklist input[type="checkbox"] {
  accent-color: #43a6f0; /* brighter blue on dark */
}



/* ---------- dcc.Slider dark theme (rc-slider) ---------- */

/* Base slider text color when inside a dark section */
.dark-body .rc-slider {
  color: #e6e6e6; /* affects tooltip fonts via inheritance */
}

/* The rail (full length background line) */
.dark-body .rc-slider-rail {
  background-color: #2a2f3a;   /* dark neutral */
}

/* The active portion of the track (left of handle) */
.dark-body .rc-slider-track {
  background-color: #43a6f0;   /* your dark accent (light blue) */
}

/* The handle itself */
.dark-body .rc-slider-handle {
  border: 2px solid #43a6f0;
  background-color: #151820;   /* match container panel */
  box-shadow: 0 0 0 4px rgba(67, 166, 240, 0.15); /* focus ring-esque */
}

/* On hover/focus */
.dark-body .rc-slider-handle:hover,
.dark-body .rc-slider-handle:focus {
  border-color: #7ac3ff;
  box-shadow: 0 0 0 6px rgba(122, 195, 255, 0.20);
}

/* Slider marks (ticks) */
.dark-body .rc-slider-mark {
  color: #cbd5e1; /* tick labels */
}
.dark-body .rc-slider-mark-text {
  color: #cbd5e1;
}
.dark-body .rc-slider-dot {
  border-color: #3a444f;
  background: #1c212b;
}

/* Tooltip (if enabled via Slider.tooltip) */
.dark-body .rc-slider-tooltip {
  border: 0;
}
.dark-body .rc-slider-tooltip-inner {
  background-color: #1f2530;
  color: #e6e6e6;
  border: 1px solid #2a2f3a;
}
.dark-body .rc-slider-tooltip-arrow {
  border-top-color: #1f2530 !important; /* ensure arrow matches tooltip */
}



/* Remove the theme switch icons */
label.fa.fa-moon.form-label,
label.fa.fa-sun.form-label {
    display: none !important;
}




/* Keep columns on the SAME line; prevent wrapping */
.row-flex {
  display: flex;          /* Bootstrap already sets flex, but we assert it */
  flex-wrap: nowrap;      /* CRITICAL: don't allow wrap */
  width: 100%;
  gap: 12px;              /* optional spacing between left/right */
}

/* LEFT column: fixed narrow width */
.col-left {
  flex: 0 0 56px;         /* fixed 56px; adjust to 48–64px to taste */
  max-width: 56px;
}

/* RIGHT column: take remaining space */
.col-right {
  flex: 1 1 auto;         /* grow to fill remaining width */
  min-width: 0;           /* allow child to shrink without overflowing */
  display: flex;          /* let inner .graph-wrap stretch */
}

/* Graph container should stretch */
.graph-wrap {
width: 100%;
overflow: visible;
}



/* Light blue button with dark text, consistent across light/dark themes */
.btn-ms-blue {
  background-color: #0078D4 !important; /* Microsoft blue */
  color: #ffffff !important;            /* white text */
  font-weight: bold !important;         /* bold text */
  font-family: Arial, sans-serif !important; /* Arial font */
  border: none !important;
  box-shadow: none;
}

.btn-ms-blue:hover,
.btn-ms-blue:focus {
  background-color: #006bb3 !important; /* slightly darker on hover */
  color: #ffffff !important;
  text-decoration: none;
}

.btn-ms-blue:active {
  background-color: #005a9e !important; /* even darker when active */
  color: #ffffff !important;
}






/* Prevent Chrome/Firefox scroll anchoring jumping on DOM changes */
.scroll-container {
    overflow-anchor: none;
}

/* Optional: turn off smooth behavior during programmatic updates */
.scroll-snap {
    scroll-snap-type: y mandatory; /* keep vertical snapping if you like it */
    scroll-behavior: auto;
}

/* If smooth causes jumps, remove it or make it conditional */
.scroll-snap.smooth {
    scroll-behavior: smooth; /* use only when user scrolls, not during re-renders */
}


.scroll-snap label {
    scroll-snap-align: start;
}



/* Space below the tabs */
.top-tabs {
  margin-bottom: 10px; /* adjust as needed */
}


/* Center the tabs bar itself and remove underline */
.top-tabs .nav.nav-tabs {
  justify-content: center;
  border-bottom: 1px solid #ccc; /* subtle line under all tabs */
  gap: 16px;
}

.top-tabs .nav-tabs .nav-link {
  background: none; /* remove button background */
  border: none; /* remove button border */
  color: #333;
  font-weight: bold;
  padding: 8px 12px;
  font-size: 1rem;
  text-transform: none;
}


/* Active tab: bold + underline */
.top-tabs .nav-tabs .nav-link.active {
  color: #0078D4; /* highlight color */
  border-bottom: 3px solid #0078D4; /* underline active tab */
  background: none;
}


/* Hover effect */
.top-tabs .nav-tabs .nav-link:hover {
  color: #005a9e;
  text-decoration: none;
}



/* Dark mode tab baseline + colors */
.dark-body .top-tabs .nav.nav-tabs {
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.dark-body .top-tabs .nav-tabs .nav-link {
  color: #ddd;
}
.dark-body .top-tabs .nav-tabs .nav-link:hover {
  color: #e6e6e6;
}
.dark-body .top-tabs .nav-tabs .nav-link.active {
  color: #43a6f0;
  border-bottom: 3px solid #43a6f0;
}

/* --- IMPORTANT: strip borders from inner structural DIVs only --- */
/* We avoid affecting form controls, inputs, buttons, etc. */
.top-tabs .tab-pane div {
  border: none !important;
}

/* Safety: don't hide borders on form controls/components */
.top-tabs .tab-pane :is(input, select, textarea, button, .form-control, .rc-slider, .btn, .dash-checkbox, .dash-dropdown) {
  border: initial; /* let components render their own borders */
}

/* Ensure only the active pane is visible (in case other CSS conflicts) */
.top-tabs .tab-pane { display: none; }
.top-tabs .tab-pane.active { display: block; }



/* Inner tab panel styling */
.tab-panel {
  background-color: #f9f9f9; /* light mode */
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}


/* Dark mode: slightly lighter than container */
.dark-body .tab-panel {
  background-color: #1E2430; /* slightly lighter than #151820 */
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Remove borders from inner divs */
.tab-panel div {
   border: none !important;
}





/* Filters grid: two columns on wide screens, single column on narrow */
.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 16px;
}

/* Checklist block spacing */
.filter-block {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
}

/* Tight switches: override Bootstrap margin */

/* Keep default look when ON — do not touch the checked state */
.toggles-tight .form-switch .form-check-input:checked {
  outline: 1px solid #888;     /* visible but subtle */
}

.toggles-tight .form-switch .form-check-label {
font-size: 13px !important;
}

/* OFF state: add a subtle outline around the slider without changing size */
.toggles-tight .form-switch .form-check-input:not(:checked) {
  outline: 1px solid #888;     /* visible but subtle */
  outline-offset: 1px;         /* pulls outline slightly away from the switch */
  box-shadow: none !important; /* remove Bootstrap glow if present */
}

/* (Optional) Improve visibility in dark theme */
.dark-body .toggles-tight .form-switch .form-check-input:not(:checked) {
  outline: 2px solid #bbb;
}





/* Sliders row: side-by-side columns */
.sliders-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 6px;
  align-items: center;
}
.slider-col {
  min-width: 240px;
}






/* =============================
   DROPDOWN
   ============================= */

.file-dropdown .dash-dropdown .Select-control {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    color: #333;
    min-height: 36px;
    padding-right: 32px !important;
    position: relative;
}

/* Center menu text */
.Select-menu-outer,
.Select-option {
    text-align: center !important;
}

/* Placeholder, value, input text */
.file-dropdown .dash-dropdown .Select-placeholder,
.file-dropdown .dash-dropdown .Select-value-label,
.file-dropdown .dash-dropdown .Select-input > input {
    color: #333 !important;
}

/* Light menu panel */
.Select-menu-outer {
    background-color: #ffffff;
    border: 1px solid #dddddd;
}

/* Light options */
.Select-option {
    background-color: #ffffff;
    color: #333;
}

.Select-option.is-focused {
    background-color: #e6f0ff;
}

.Select-option.is-selected {
    background-color: #d9e8ff;
}

/* Arrow — Light mode */
.file-dropdown .dash-dropdown .Select-arrow-zone {
    position: absolute;
    right: 4px;
    top: 0;
    bottom: 0;
    display: flex !important;
    align-items: center;
    pointer-events: none;
}

.file-dropdown .dash-dropdown .Select-arrow {
    border-style: solid;
    border-width: 6px 6px 3px !important;
    border-color: #444 transparent transparent !important;
}



/* =============================
   DARK MODE — DROPDOWN
   ============================= */

/* Control box */
.dark-body .file-dropdown .dash-dropdown .Select-control {
    background-color: #1f2430 !important;
    border: 1px solid #3a3f4b !important;
    color: #e5e9f0 !important;
    min-height: 36px;
    padding-right: 32px !important;
    position: relative;
}

/* Hover / focus */
.dark-body .file-dropdown .dash-dropdown .Select-control:hover,
.dark-body .file-dropdown .dash-dropdown .Select.is-focused .Select-control {
    border-color: #5a6274 !important;
}

/* Text inside */
.dark-body .file-dropdown .dash-dropdown .Select-placeholder,
.dark-body .file-dropdown .dash-dropdown .Select-value-label,
.dark-body .file-dropdown .dash-dropdown .Select-input > input {
    color: #e5e9f0 !important;
}

/* Menu panel (outside file-dropdown) */
.dark-body .Select-menu-outer {
    background-color: #1a1f29 !important;
    border: 1px solid #3a3f4b !important;
    color: #e5e9f0 !important;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.45) !important;
}

/* Options */
.dark-body .Select-option {
    background-color: transparent !important;
    color: #e5e9f0 !important;
}

.dark-body .Select-option.is-focused {
    background-color: #2a3140 !important;
    color: #ffffff !important;
}

.dark-body .Select-option.is-selected {
    background-color: #3a4254 !important;
    color: #ffffff !important;
}

/* Arrow — Blue (with absolute positioning) */
:root { --dropdown-blue: #2F80ED; }

.dark-body .file-dropdown .dash-dropdown .Select-arrow-zone {
    position: absolute;
    right: 4px;
    top: 0;
    bottom: 0;
    display: flex !important;
    align-items: center;
    pointer-events: none;
}

.dark-body .file-dropdown .dash-dropdown .Select-arrow {
    border-style: solid;
    border-width: 6px 6px 3px !important;
    border-color: var(--dropdown-blue) transparent transparent !important;
}

.dark-body .file-dropdown .dash-dropdown .Select-control:hover .Select-arrow {
    border-color: #5AA0FF transparent transparent !important;
}



/* Popover */
.popover {
    background-color: #E6F2FF !important; /* soft light blue */
    color: #003366 !important;            /* navy text */
    border: 1px solid #B8D8FF !important; /* subtle border */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Body text */
.popover .popover-body {
    color: #003366 !important;
}

/* If you use a custom header div */
.popover-header {
    background-color: #E6F2FF !important;
    color: #003366 !important;
    border-bottom: 1px solid #B8D8FF !important;
}

/* ------------------------------
   FIX THE ARROW
   Restore Bootstrap arrow shape
   ------------------------------ */

/* Remove background because it breaks the triangle */
.popover .popover-arrow {
    width: 1rem !important;
    height: 0.5rem !important;
}

/* Bootstrap uses border colors to make triangles */
.popover.bs-popover-bottom .popover-arrow::after {
    border-bottom-color: #E6F2FF !important;
}

.popover.bs-popover-bottom .popover-arrow::before {
    border-bottom-color: #B8D8FF !important;
}


.popover {
  z-index: 10010 !important;
}


#settings-icon, #info-icon {
  position: relative;
  z-index: 10020;
}


/* Numeric input dark mode */
.dark-body input[type="number"] {
    background-color: #1f2430 !important;
    border: 1px solid #3a3f4b !important;
    color: #e5e9f0 !important;
}

.dark-body input[type="number"]:focus {
    background-color: #1f2430 !important;
    border-color: #5a6274 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}


.advies-filter-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

/* Operator dropdown */
.advies-operator {
    width: 50px;
    flex: 0 0 50px;
    height: 36px !important;
    min-height: 36px !important;
}

/* Number input */
.advies-input {
    width: 80px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 2px 8px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;

}

.advies-operator .Select-placeholder,
.advies-operator .Select-value {
    line-height: 34px !important;
    font-size: 12px !important;
}


/* Bootstrap input often adds extra vertical alignment */
.advies-input {
    width: 80px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 36px !important;
    box-sizing: border-box !important;
    vertical-align: top;
}


/* Light mode */
.advies-input::-webkit-inner-spin-button,
.advies-input::-webkit-outer-spin-button {
    opacity: 1;
}

/* Dark mode */
.dark-body .advies-input {
    accent-color: var(--dropdown-blue);
}