/* Accendis overrides on top of Velzon.
 *
 * Loaded after custom.min.css; uses Velzon's own CSS custom properties
 * where possible so future Velzon upgrades don't break us. Selectors
 * match Velzon's specificity (`:root[data-sidebar="dark"]`) so our
 * values win over the defaults.
 */

/* Dev-environment banner: styling ships inline from Acc_DevEnvBanner()
 * so it works across all apps (admin/portal/auth). See functions.php. */

/* ---------- Accendis-blue sidebar (dark-mode default) ---------- */
:root[data-sidebar="dark"] {
  --vz-vertical-menu-bg:                  #1e4880;
  --vz-vertical-menu-title-color:         #a9c2e8;
  --vz-vertical-menu-item-color:          rgba(255, 255, 255, .82);
  --vz-vertical-menu-item-hover-color:    #ffffff;
  --vz-vertical-menu-item-active-color:   #ffffff;
  --vz-vertical-menu-item-active-bg-color: rgba(255, 255, 255, .12);
  --vz-vertical-menu-sub-item-color:      rgba(255, 255, 255, .7);
  --vz-vertical-menu-sub-item-hover-color: #ffffff;
  --vz-vertical-menu-border:              rgba(255, 255, 255, .08);
  --vz-sidebar-bg:                        #1e4880;
}

/* ---------- FA icon spacing in the sidebar ----------
 * Velzon's CSS has `.nav-link svg { margin-right: .665rem; }` for
 * SVG icons. We use FA's <i> tags; mirror the same spacing so icon
 * and label don't sit glued together. */
.navbar-menu .navbar-nav .nav-link i {
  width: 18px;
  margin-right: 0.665rem;
  text-align: center;
}

/* ---------- DataTable sort indicators (FA Pro instead of MDI) ----------
 * Velzon's app.min.css uses 'Material Design Icons' for the sort
 * glyphs (\f0360 / \f035d). We dropped MDI in favour of FA Pro, so
 * override the content with FA glyphs — otherwise the headers
 * reserve space for an icon that never renders. */
table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_desc_disabled:before {
  content: "\f0d8"; /* fa-solid sort-up */
  font-family: "Font Awesome 7 Pro", "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 0.7em;
  top: 11px;
  right: 0.5rem;
  opacity: 0.35;
}
table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_desc_disabled:after {
  content: "\f0d7"; /* fa-solid sort-down */
  font-family: "Font Awesome 7 Pro", "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 0.7em;
  top: 18px;
  right: 0.5rem;
  opacity: 0.35;
}
table.dataTable > thead .sorting_asc:before     { opacity: 1; }
table.dataTable > thead .sorting_desc:after     { opacity: 1; }

/* dataTables.bootstrap5.min.css zet `font-size:.8em` op een specifiekere
 * selector (`thead>tr>th.sorting:before`) dan Velzon's MDI-override, dus
 * onze 0.7em hierboven wordt overruled. Met dezelfde selector-shape én
 * latere load-order winnen we 't terug. */
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > th.sorting_asc_disabled:before,
table.dataTable thead > tr > th.sorting_asc_disabled:after,
table.dataTable thead > tr > th.sorting_desc_disabled:before,
table.dataTable thead > tr > th.sorting_desc_disabled:after {
  font-size: 0.7em;
}

/* ---------- Card-header filter btn-group ----------
 * Velzon's btn-check labels carry a default margin-bottom (.5rem)
 * which pulls them out of vertical alignment with the adjacent
 * primary button. Reset + give a bit more room before the action. */
.card-header .btn-group .btn,
.card-header .btn-check + .btn {
  margin-bottom: 0;
}
.card-header .btn-group {
  margin-right: 10px;
}

/* Velzon flattens .btn-check+.btn:hover back to the default btn colours,
 * which leaves the active/inactief toggles without any hover feedback.
 * Restore the BS5 outline-hover (filled secondary) for the unchecked
 * state; the checked state keeps its own active styling. */
.card-header .btn-group .btn-check:not(:checked) + .btn-outline-secondary:hover {
  color: #fff;
  background-color: var(--vz-secondary);
  border-color: var(--vz-secondary);
}

/* ---------- Mobile responsiveness ----------
 * On small viewports relax the card-header and DataTable controls
 * so everything stays readable. */
@media (max-width: 575.98px) {
  .card-header.d-flex {
    gap: 0.75rem !important;
  }
  /* filter buttons + Add button on one row, title above */
  .card-header .card-title { width: 100%; }
  /* DataTable filter input full width */
  .dataTables_wrapper div.dataTables_filter input { width: 100%; }
  /* smaller pagination on phones */
  .dataTables_wrapper .pagination { font-size: .85rem; }
}

/* DataTables controls row: keep length-select and search input
 * side-by-side on every viewport. Velzon's CSS sets the wrapping
 * .col-md-6 to width:100% (stacks them); force back to 50/50.
 * Velzon also centers length+filter under 767px; restore left/right. */
.dataTables_wrapper > .row > .col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
  width: 50%;
}
@media screen and (max-width: 767px) {
  div.dataTables_wrapper div.dataTables_length { text-align: left; }
  div.dataTables_wrapper div.dataTables_filter { text-align: right; }
}

/* Match the height of the length <select> and the filter <input>;
 * BS5/Velzon ship them with slightly different paddings. The select
 * needs extra right-padding to leave room for its dropdown arrow. */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  height: calc(1.5em + 0.75rem + 2px);
  line-height: 1.5;
}
.dataTables_wrapper .dataTables_filter input {
  padding: 0.375rem 0.75rem;
  max-width: 250px;
}
.dataTables_wrapper .dataTables_length select {
  padding: 0.375rem 2rem 0.375rem 0.75rem;
}

/* Below 480px reclaim the page-content side-padding so the table
 * can use the full width. Keep .container-fluid padding intact —
 * the page-title/breadcrumbs above the card live in that container
 * and lose their margins if it goes to 0. */
@media (max-width: 480px) {
  .page-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* card-body padding may still feel cramped on phones */
  .card > .card-body { padding-left: 0.75rem; padding-right: 0.75rem; }
  .card > .card-header { padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* Hide the selectbox column on narrow screens — the floating
 * checkbox under the +/- control adds no value when there's no
 * bulk-action UI visible. Selectbox column carries class
 * 'checkboxcontainer'; we hide it in both the main table and the
 * responsive detail row. */
@media (max-width: 767.98px) {
  table.dataTable > thead > tr > th.checkboxcontainer,
  table.dataTable > tbody > tr > td.checkboxcontainer {
    display: none !important;
  }
  /* selectbox is the first visible column → data-dt-column="0" in
   * the Responsive detail list */
  ul.dtr-details > li[data-dt-column="0"] { display: none; }
}

/* Magnifier glyph inside the search input on narrow screens. The
 * 'Zoeken:' label is hidden there (see above), so this keeps the
 * input self-explanatory. SVG inline so no extra HTTP request. */
@media (max-width: 540px) {
  .dataTables_wrapper .dataTables_filter input {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23878a99'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.5rem center;
    background-size: 0.9rem;
    padding-left: 1.85rem;
  }
}

/* Under 540px the 50/50 split leaves the filter input no room to
 * shrink. Let the length cell auto-size to its <select>, and let
 * the filter cell flex-grow + the input fill it. Also hide the
 * 'Zoeken:' label-text to free more space. */
@media (max-width: 540px) {
  .dataTables_wrapper > .row > .col-md-6 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .dataTables_wrapper > .row > .col-md-6:last-child {
    flex: 1 1 auto;
    min-width: 0;
  }
  .dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0;
    line-height: 1;
  }
  .dataTables_wrapper .dataTables_filter label {
    justify-content: flex-end;
  }
  .dataTables_wrapper .dataTables_filter label input {
    font-size: 0.875rem;
    line-height: normal;
    width: 100%;
    min-width: 0;
    flex: 0 1 auto;
    margin-left: auto;
  }
}

/* Pagination on small screens: replace 'Vorige'/'Volgende' text with
 * a FA chevron so the row fits a 360px phone. */
@media (max-width: 480px) {
  .dataTables_wrapper .pagination .page-item.previous .page-link,
  .dataTables_wrapper .pagination .page-item.next .page-link {
    /* Hide the "Vorige"/"Volgende" text. Don't pin a line-height
     * on the link itself — let the ::before drive the line-box
     * height so it matches the number-links automatically. */
    font-size: 0;
  }
  .dataTables_wrapper .pagination .page-item.previous .page-link::before,
  .dataTables_wrapper .pagination .page-item.next .page-link::before {
    font-family: "Font Awesome 7 Pro", "Font Awesome 7 Free";
    font-weight: 900;
    /* font-size matches what number-links inherit from .pagination
     * (0.85rem set higher up); unitless line-height keeps the box
     * the same height as the number-links. */
    font-size: 0.85rem;
    line-height: 1.5;
  }
  .dataTables_wrapper .pagination .page-item.previous .page-link::before { content: "\f053"; /* fa-chevron-left  */ }
  .dataTables_wrapper .pagination .page-item.next .page-link::before     { content: "\f054"; /* fa-chevron-right */ }
}

/* Under 800px the 'resultaten weergeven' label-text crowds the
 * search field. Hide the label text but keep the <select> visible
 * (font-size:0 collapses the text node; select restores its own). */
@media (max-width: 800px) {
  .dataTables_wrapper .dataTables_length label {
    font-size: 0;
    line-height: 1;
  }
  .dataTables_wrapper .dataTables_length label select {
    font-size: 0.875rem;
    line-height: normal;
  }
  /* search input no longer needs full width */
  .dataTables_wrapper div.dataTables_filter input { width: auto; }
}

/* DataTables Responsive plus/minus toggle: use FA glyphs instead of
 * the default png/svg sprite. */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  font-family: "Font Awesome 7 Pro", "Font Awesome 7 Free";
  font-weight: 900;
  content: "\f067"; /* fa-plus */
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--vz-primary);
  font-size: 0.7rem;
  line-height: 1.4em;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
  content: "\f068"; /* fa-minus */
  background: none;
}

/* ---------- DataTable: truncate long company/person names ----------
 * Prevents a single long name from stretching the whole table.
 * Ellipsis with a max-width on the detail link; the full name shows
 * on hover via the title attribute set in formatAppDataTableColumn_name. */
table.dataTable td a.companydetail {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
table.dataTable td.companynamecell {
  max-width: 280px;
}

/* ---------- Actions dropdown ----------
 * Two things this fixes:
 *  1. td.itemactions has text-center for the icon-row; that inherits
 *     into the menu items, so force text-align:start inside the menu.
 *  2. The DataTable lives in a .table-responsive wrapper with
 *     overflow:auto; without an explicit background and an elevated
 *     z-index the menu paints semi-transparent over the rows below
 *     (rows show through). Set bg + shadow + z-index explicitly. */
td.itemactions .dropdown-menu {
  background-color: var(--vz-dropdown-bg, #fff);
  --bs-dropdown-bg: var(--vz-dropdown-bg, #fff);
  border: 1px solid var(--vz-dropdown-border-color, rgba(0, 0, 0, .15));
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
  text-align: start !important;
  min-width: 11rem;
  z-index: 1056;
}
td.itemactions .dropdown-menu .dropdown-item {
  text-align: start !important;
  white-space: nowrap;
  background-color: transparent;
}
/* Hover style for dropdown items in action menus — matches the
 * iconlist hover so they're visually consistent (subtle-primary,
 * dark-mode-aware via CSS variables). Scoped to .actions-dropdown and
 * td.itemactions so it also works on dropdowns outside the DataTable
 * (e.g. the /abonnementen/ overview). */
td.itemactions .dropdown-menu .dropdown-item:hover,
td.itemactions .dropdown-menu .dropdown-item:focus,
.actions-dropdown .dropdown-menu .dropdown-item:hover,
.actions-dropdown .dropdown-menu .dropdown-item:focus {
  background-color: var(--vz-primary-bg-subtle);
  color: var(--vz-primary);
}
td.itemactions .dropdown-menu .dropdown-item:hover i,
td.itemactions .dropdown-menu .dropdown-item:focus i,
.actions-dropdown .dropdown-menu .dropdown-item:hover i,
.actions-dropdown .dropdown-menu .dropdown-item:focus i {
  color: inherit;  /* override the "text-muted" on the icon */
}
/* Delete actions: red-tint hover, parallel to the iconlist. */
td.itemactions .dropdown-menu .dropdown-item.deletecompany:hover,
td.itemactions .dropdown-menu .dropdown-item.deletecontact:hover,
td.itemactions .dropdown-menu .dropdown-item.deletecustomer:hover,
td.itemactions .dropdown-menu .dropdown-item.deleteitem:hover,
td.itemactions .dropdown-menu .dropdown-item.text-danger:hover,
.actions-dropdown .dropdown-menu .dropdown-item.deletecompany:hover,
.actions-dropdown .dropdown-menu .dropdown-item.deletecontact:hover,
.actions-dropdown .dropdown-menu .dropdown-item.deletecustomer:hover,
.actions-dropdown .dropdown-menu .dropdown-item.deleteitem:hover,
.actions-dropdown .dropdown-menu .dropdown-item.text-danger:hover {
  background-color: var(--vz-danger-bg-subtle);
  color: var(--vz-danger);
}
td.itemactions .dropdown-menu hr.dropdown-divider {
  margin: 0.25rem 0;
}
td.itemactions .dropdown { text-align: start; }

/* Let the menu escape the .table-responsive overflow wrapper. */
.table-responsive { overflow: visible; }
@media (max-width: 575.98px) {
  /* on very small screens we still want horizontal scroll fallback */
  .table-responsive { overflow-x: auto; }
}

/* Min-row-height op alle admin-DataTables, zodat overzichten zonder
 * actie-kolom (/ipadressen/, /handles/) dezelfde rij-spacing krijgen
 * als /relaties/ (waar de 1.875rem-hoge actie-icoontjes de rij oprekken).
 * `height` op td/th wordt in tables als min-height behandeld; ook de
 * thead krijgt dezelfde hoogte zodat header en rows gelijk lopen. */
table.dataTable > thead > tr > th,
table.dataTable > tbody > tr > td { height: 2.5rem; }

/* Headers: tekst verticaal centreren, 16px font. */
table.dataTable > thead > tr > th {
  vertical-align: middle;
  font-size: 16px;
}

/* Badges in DataTable-cellen zijn met Bootstraps default 0.75em moeilijk
 * leesbaar (type/status-labels op /servers/, /handles/, /prijsafspraken/).
 * 0.85em + iets lichtere weight tikt 't beter af. */
table.dataTable .badge {
  font-size: 0.85em;
  font-weight: 500;
}

/* ---------- DataTable item actions (icon row) ----------
 * Icons get a light-grey tile with a thin border and centered glyph.
 * Hover = subtle primary; delete-style links hover into subtle danger.
 *
 * Scoped to .actions-iconlist so it doesn't bleed into the dropdown
 * (which lives in .actions-dropdown and uses BS5's own dropdown-item
 * styling — display:block, not inline-flex). */
/* Actie-kolom in álle tabellen (DataTables én gewone tabellen op
 * dashboards): shrink-to-content, nowrap, 15px links voor lucht t.o.v.
 * de vorige kolom; rechts geen extra ruimte (de laatste icon-link
 * heeft zelf geen margin-right via .actions-iconlist a:last-child). */
th.itemactions,
td.itemactions {
  width: 1%;
  white-space: nowrap;
  padding-left: 15px;
  padding-right: 0;
}
.actions-iconlist a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  background-color: var(--vz-light);
  border: 1px solid var(--vz-border-color);
  border-radius: 0.375rem;
  color: var(--vz-secondary-color, var(--vz-body-color));
  margin-right: 0.25rem;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.actions-iconlist a:last-child { margin-right: 0; }
.actions-iconlist a i { font-size: 0.85rem; line-height: 1; }
.actions-iconlist a:hover {
  background-color: var(--vz-primary-bg-subtle);
  border-color: var(--vz-primary);
  color: var(--vz-primary);
}
.actions-iconlist a.deletecompany:hover,
.actions-iconlist a.deletecontact:hover,
.actions-iconlist a.deletecustomer:hover,
.actions-iconlist a.deleteitem:hover {
  background-color: var(--vz-danger-bg-subtle);
  border-color: var(--vz-danger);
  color: var(--vz-danger);
}

/* ---------- Breadcrumb separator as FA chevron (FA Pro 7) ---------- */
.breadcrumb-item + .breadcrumb-item::before {
  content: "\f054";
  font-family: "Font Awesome 7 Pro", "Font Awesome 7 Free", "Font Awesome 7 Brands";
  font-weight: 900;
  font-size: 0.6rem;
  color: var(--vz-text-muted);
  vertical-align: middle;
  padding-right: 0.5rem;
}

/* ---------- Dropdown caret as FA chevron (FA Pro 7) ----------
 * Velzon ships .dropdown-toggle::after with a Material Design Icons
 * glyph (\f0140). MDI is not loaded, so the caret renders as a square.
 * Replace with fa-chevron-down. */
.dropdown-toggle::after {
  content: "\f078";
  font-family: "Font Awesome 7 Pro", "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 0.7rem;
  line-height: 1;
  border: 0;
  vertical-align: middle;
}

/* ---------- Detail popover ----------
 * Bootstrap's default .popover max-width (276px) is too narrow for the
 * relaties-detail labels (e.g. "Telefoon mobiel"). Widen a bit, and
 * lay out the header as flex so the close-button sits at the right. */
.popover.companydetail-popover {
  max-width: 360px;
}
.popover.companydetail-popover .popover-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.popover.companydetail-popover .popover-header .btn-close {
  --bs-btn-close-bg-size: 0.7em;
  padding: 0.35rem;
  margin-left: auto;
}

/* ---------- Tables: links wat lucht in de eerste content-kolom ----------
 * BS5/Velzon default zit te dicht op de tabelrand. De id-kolom heeft
 * `class:'never'` (Responsive-plugin = altijd verbergen) maar staat
 * wél als eerste DOM-cel in elke rij — daardoor matcht een naïeve
 * `:first-child`-selector de onzichtbare id en doet de regel niets.
 *
 * Daarom: pak de eerste cel ná `.never` (skip checkbox/dtr-control)
 * én de cel ná `.dtr-control` (voor pages mét responsive-toggle).
 * Header + body krijgen identiek dezelfde waarde, anders schuift de
 * kolomtitel zichtbaar t.o.v. de content eronder. */
.card .table > thead > tr > th.never + th:not(.checkboxcontainer):not(.dtr-control),
.card .table > thead > tr > th.dtr-control + th,
.card .table > tbody > tr > td.never + td:not(.checkboxcontainer):not(.dtr-control),
.card .table > tbody > tr > td.dtr-control + td {
  padding-left: 13px;
}

/* ---------- Geneste modals — parent dimmen ----------
 * BS5 ondersteunt stacked modals technisch, maar visueel zie je
 * vooral een witte achtergrond van de onderliggende modal door de
 * topmost-modal's body. Add een dim-class op de parent zodra een
 * kind opent zodat er een rustige scheidslaag ontstaat. */
.modal.is-behind .modal-content {
  opacity: 0.25;
  filter: blur(2px);
  transition: opacity 0.15s ease, filter 0.15s ease;
  pointer-events: none;
}

/* ---------- Modal header in page-bg colour ----------
 * openFormModal puts class `modal-header-page` on the header so the
 * top of the dialog blends into the page background colour. */
/* Velzon's custom.min.css heeft een regel
 *   .modal-dialog:not(.modal-dialog-scrollable) .modal-header { padding-bottom: 0 }
 * die onze niet-scrollable modals (sinds we die class weghaalden ivm
 * Choices.js-dropdown-clipping) hun bottom-padding kost. Met hogere
 * specificiteit (modal-dialog ook in selector) winnen we 'm terug. */
.modal-dialog .modal-header.modal-header-page {
  background-color: var(--vz-body-bg);
  padding-top:    0.9rem;
  padding-bottom: 0.9rem;
}

/* Choices.js zet standaard margin-bottom:24px op .choices. In
 * card-headers (filters van DataTables) zorgt dat voor scheve
 * uitlijning t.o.v. naburige knoppen. */
.card-header .choices { margin-bottom: 0; }

/* Filter-selects in de card-header zijn smal (180–200px) zodat ze de
 * tabel-actiebalk niet domineren. De uitklap-lijst mag wél breder
 * worden zodat lange categorie-/pakketnamen passen. white-space:nowrap
 * + auto-width zorgt dat 'ie precies de breedte van z'n langste item
 * krijgt (begrensd op 480px voor extreme gevallen). */
.card-header .choices__list--dropdown,
.card-header .choices__list[aria-expanded] {
  width: auto !important;
  min-width: 100%;
  max-width: 480px;
}
.card-header .choices__list--dropdown .choices__item,
.card-header .choices__list[aria-expanded] .choices__item {
  white-space: nowrap;
}

/* Choices.js normalisatie (admin én portal — één accendis.css).
 * - inner op form-control-hoogte + witte achtergrond (de portal mist
 *   Velzon's app.min.css-override, waardoor 'ie anders grijs/te hoog is);
 * - dropdown groeit mee met de breedste optie (i.p.v. per teken afbreken
 *   in smalle selects zoals de DNS-record-type-picker), witte bg;
 * - dropdown-opties houden horizontale padding + blijven op één regel. */
.choices__inner {
  min-height: calc(1.5em + 0.75rem + 2px);
  background-color: #fff;
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
  width: auto;
  min-width: 100%;
  max-width: 480px;
  background-color: #fff;
}
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  padding-left: 0.9rem;
  padding-right: 0.9rem;
  white-space: nowrap;
}

/* Choices.js dropdown moet boven naburige input-group-buttons en
 * password-toggle-iconen liggen, anders verdwijnt 'ie deels achter
 * de iconen wanneer 'ie omhoog uitklapt. */
.choices.is-open { z-index: 5; }
.choices__list--dropdown,
.choices__list[aria-expanded] { z-index: 10; }

/* Choices.js binnen niet-scrollable modals: modal-body/content
 * mogen niet clippen anders verdwijnt de dropdown achter de footer.
 * Z-index moet boven Bootstrap's modal (1055) uit zodat 'ie áltijd
 * visueel boven de modal-footer ligt. */
.modal-dialog:not(.modal-dialog-scrollable) .modal-body,
.modal-dialog:not(.modal-dialog-scrollable) .modal-content { overflow: visible; }
.modal .choices.is-open { z-index: 1060; }
.modal .choices__list--dropdown,
.modal .choices__list[aria-expanded] { z-index: 1060; }

/* ---------- Choices.js dropdown caret as FA chevron ----------
 * Velzon's app.min.css sets the choices caret to MDI \f0140 in
 * "Material Design Icons". MDI is not loaded so it renders as a
 * square. Replace with FA Pro 7 fa-chevron-down. */
.choices[data-type*="select-one"]::after {
  content: "\f078";
  font-family: "Font Awesome 7 Pro", "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 0.7rem;
  border: 0;
}

/* ---------- Choices.js dark-mode kleuren ----------
 * choices.min.css hard-codeert #fff / #f9f9f9 voor inner+dropdown, dus
 * in dark mode (data-bs-theme="dark") krijg je een wit blok dat slecht
 * leest. Vervang met BS5/Velzon theme-vars zodat 't volgt met de
 * actuele kleurenset. */
[data-bs-theme="dark"] .choices__inner,
[data-bs-theme="dark"] .choices__list--dropdown,
[data-bs-theme="dark"] .choices__list[aria-expanded] {
  background-color: var(--vz-secondary-bg, var(--bs-body-bg));
  color:            var(--bs-body-color);
  border-color:     var(--vz-border-color, var(--bs-border-color));
}
[data-bs-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted,
[data-bs-theme="dark"] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: var(--vz-tertiary-bg, rgba(255,255,255,.06));
  color:            var(--bs-body-color);
}
[data-bs-theme="dark"] .choices__list[aria-expanded] .choices__input,
[data-bs-theme="dark"] .choices[data-type*="select-one"] .choices__input {
  background-color: var(--vz-secondary-bg, var(--bs-body-bg));
  color:            var(--bs-body-color);
  border-color:     var(--vz-border-color, var(--bs-border-color));
}
[data-bs-theme="dark"] .choices__heading {
  color:            var(--bs-secondary-color);
  border-color:     var(--vz-border-color, var(--bs-border-color));
}

/* ---------- Upcoming-invoices tooltip (factuurdashboard belletje) ----------
 * Default BS5-tooltip is text-align:center + max-width:200px → lange
 * regels wrappen + alles staat gecentreerd. Voor de "binnenkort
 * factureren"-tooltip willen we per regel bij elkaar + links uitgelijnd. */
.upcoming-tooltip .tooltip-inner {
  text-align: left;
  max-width: 480px;
  white-space: nowrap;          /* houdt elke <br>-regel op één lijn */
  padding: 8px 12px;
  line-height: 1.6;
}


/* Globaal: voorkom horizontale scroll op mobile. Een uitschietend
 * element (lange badge, table-responsive met negatieve margins, etc.)
 * kan anders de hele page horizontaal scrollable maken. */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; max-width: 100%; }
}

/* ---------- Quill rich-text editor ----------
 * Velzon's app.min.css zet borders op .ql-toolbar / .ql-container die net
 * niet matchen met onze form-controls. Vlak ze gelijk + match border-radius.
 * Editor-area krijgt een min-hoogte zodat 'm niet collapses bij lege state. */
.ql-toolbar.ql-snow {
  border: 1px solid #ced4da;
  border-bottom: 0;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  background: #f8f9fa;
}
.ql-container.ql-snow {
  border: 1px solid #ced4da;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  /* Scroll-cap zit op de container ipv editor; anders blijft 't geheel
   * groeien naar content-height en valt 't over de volgende form-rij.
   * !important nodig omdat Quill's eigen .ql-container een 'height:100%'
   * zet en in combinatie met onze container 'm soms overrules. */
  max-height: 320px !important;
  overflow-y: auto !important;
  height: auto !important;
}
.ql-editor {
  min-height: 120px;
  font-size: 0.875rem;
  line-height: 1.5;
  overflow: visible !important;  /* scroll zit op container, niet editor */
}
.ql-editor p,
.ql-editor ul,
.ql-editor ol { margin-bottom: 0.4rem; }

/* ---------- 2FA digit-input cells ----------
 * Bij smallere viewports + de 6-col grid binnen de auth-card wordt
 * elke cel maar ~50-60px breed; form-control-lg's default padding
 * (1rem horizontaal) + font-size 1.25rem laat 't cijfer-glyph half
 * buiten de cel vallen.
 *
 * Algemene rule: 0 horizontale padding + min-width:0 zodat de flex-
 * cellen kunnen krimpen. Onder 1200px viewport óók de font-size
 * verkleinen zodat in een smal popup-venster (zoals de Office
 * Add-in auth-dialog) alles past. */
.verifycodecontainer .col { min-width: 0; }   /* sta krimpen toe */

.verifycodenumber {
  /* Glyph-overflow-fix: Velzon's display-cut heeft glyphs die over de
   * em-square uitlopen waardoor 't cijfer half buiten de cel valt.
   * Forceer een neutrale sans-serif zonder letter-spacing — dat alleen
   * is genoeg op desktop, daar laten we form-control-lg verder ongemoeid
   * zodat de cellen weer als chunky vierkant renderen zoals voorheen. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  min-width: 0;
}

/* Onder 1200px viewport (incl. de Office Add-in popup-dialog) wordt
 * elke cel maar ~50-60px breed; form-control-lg's default padding
 * (1rem horizontaal) + font-size 1.25rem laat 't cijfer-glyph dan half
 * buiten de cel vallen. Daar compact maken — desktop blijft groot. */
@media (max-width: 1199.98px) {
  .verifycodenumber {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    padding: 0.4rem 0 !important;
    min-height: auto !important;
  }
}
@media (max-width: 575px) {
  .verifycodenumber {
    font-size: 0.95rem !important;
  }
}

/* ---------- Tables: links wat lucht in de eerste kolom ----------
 * BS5/Velzon default = 0.75rem cell-padding. In tabellen zonder
 * checkbox-/control-prefix valt de eerste content-tekst te dicht op
 * de tabelrand. Alleen lucht voor "echte" content-kolommen — niet voor
 * de checkbox-kolom en niet voor de DataTables-responsive control-kolom
 * (`.dtr-control`). (Geport uit de portal-css zodat admin + portal één
 * accendis.css delen.) */
.card .table > thead > tr > th:first-child:not(.checkboxcontainer):not(.dtr-control),
.card .table > tbody > tr > td:first-child:not(.checkboxcontainer):not(.dtr-control) {
  padding-left: 1rem;
}
.card .table > thead > tr > th.dtr-control + th,
.card .table > tbody > tr > td.dtr-control + td {
  padding-left: 0.5rem;
}
td.itemactions .dropdown-menu .dropdown-item:focus {
  background-color: var(--vz-tertiary-bg, rgba(0, 0, 0, .04));
}