/* ScreenYourBrand – Light Pro UI (Bootstrap-aligned)
   Goals:
   - One consistent spacing + typography everywhere
   - #141414 as the brand accent
   - All radii = 4px
   - No hover effects (per request)
   - Fully responsive incl. mobile hamburger nav
*/

*{ box-sizing:border-box; }

:root{
  --radius: 4px;

  /* Light Pro palette */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f2f4f7;
  --surface-3: #e9edf2;
  --border: rgba(20,20,20,0.14);
  --text: #141414;
  --muted: rgba(20,20,20,0.64);

  /* Brand accent */
  --primary: #141414;
  --primary-contrast: #ffffff;
  --danger: #dc2626;

  /* Layout */
  --pad-page: 32px;
  --pad-card: 18px;
  --gap: 18px;
  --shadow-1: 0 10px 22px rgba(20,20,20,0.08);
  --shadow-2: 0 18px 42px rgba(20,20,20,0.12);
  --ring: 0 0 0 3px rgba(20,20,20,0.12);

  --font: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fs-0: 14px;
  --fs-1: 16px;
  --fs-2: 20px;
  --fs-3: 24px;
  --lh: 1.55;
}

/* Bootstrap variable alignment */
:root{
  --bs-body-font-family: var(--font);
  --bs-body-font-size: var(--fs-0);
  --bs-body-line-height: var(--lh);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-border-radius: 4px;
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 4px;
  --bs-primary: var(--primary);
  --bs-danger: var(--danger);
}

body{
  margin:0;
  font-family: var(--font);
  font-size: var(--fs-0);
  line-height: var(--lh);
  background: var(--bg);
  color: var(--text);
}

/* Typography */
h1,.h1{ font-size: var(--fs-3); margin:0 0 10px; }
h2{ font-size: var(--fs-2); margin:0 0 10px; }
h3{ font-size: var(--fs-1); margin:0 0 10px; }
p{ margin:0 0 10px; }
.muted{ color: var(--muted); }
.small{ font-size:12px; color: var(--muted); }

/* Layout */
.container{ max-width: 1100px; margin: var(--pad-page) auto; padding: 0 16px; }
.container--full{ max-width: 1200px; }
.container--designer{ max-width: 1400px; }

/* Surfaces */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-card);
  box-shadow: var(--shadow-1);
}

.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }

/* Header + nav */
.header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:12px;
  padding: 12px 18px;
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top:0;
  z-index: 40;
  backdrop-filter: blur(10px);
}

.brand{ font-weight:800; letter-spacing: -0.2px; }

.topnav{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}
.topnav--right{ margin-left:auto; }

.topnav-link{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius: var(--radius);
  font-size:14px;
  font-weight:700;
  color: var(--text);
  text-decoration:none;
  white-space:nowrap;
  background: transparent;
  border: 0;
}
.topnav-link.active{ background: var(--primary); color: var(--primary-contrast); }

/* Dropdowns */
.nav-dropdown{ position:relative; display:inline-flex; }
.nav-dropdown-toggle{ cursor:pointer; }
.nav-dropdown-toggle .caret{ font-size:12px; margin-left:6px; opacity:0.7; }
.nav-dropdown-menu{
  display:none;
  position:absolute;
  right:0;
  top: calc(100% + 8px);
  min-width: 220px;
  padding:6px;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  z-index: 50;
}
.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu{ display:block; }

.nav-dropdown-item{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:flex-start;
  padding:10px 10px;
  border-radius: var(--radius);
  font-size: var(--fs-0);
  font-weight:700;
  color: var(--text);
  text-decoration:none;
  background:transparent;
  border:0;
  cursor:pointer;
  white-space:nowrap;
}
.nav-dropdown-sep{ height:1px; background: var(--border); margin:6px 4px; border-radius: var(--radius); }
.nav-dropdown-button{ text-align:left; }

/* Buttons */
button, .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding: 0 14px;
  gap:8px;
  font-weight:700;
  font: inherit;
  line-height:1;
  border-radius: var(--radius);
  cursor:pointer;
  border: 1px solid transparent;
  background: var(--primary);
  color: var(--primary-contrast);
  text-decoration:none;
  -webkit-appearance:none;
  appearance:none;
}

.btn.secondary{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn.danger{ background: var(--danger); border-color: transparent; color:#fff; }
.btn.ghost{ background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn:disabled, button:disabled{ opacity:0.55; cursor:not-allowed; }

/* Remove hover effects entirely (keep same appearance) */
button:hover, .btn:hover{ background: var(--primary); color: var(--primary-contrast); }
.btn.secondary:hover{ background: var(--surface); color: var(--text); }
.btn.danger:hover{ background: var(--danger); color:#fff; }
.btn.ghost:hover{ background: transparent; color: var(--text); }

.topnav-link:hover{ background: transparent; color: inherit; }
.nav-dropdown-item:hover{ background: transparent; color: inherit; }
a:hover{ opacity: 1; }

/* Keep accessible focus ring */
:focus-visible{ outline: none; box-shadow: var(--ring); }

/* Forms – consistent look */
label{ font-size:12px; color: var(--muted); display:block; margin-bottom:6px; }

/* Bootstrap form elements: force the same sizing/placeholder styling as our base inputs */
.form-label{ font-size:12px; color: var(--muted); margin-bottom:6px; }
.form-control,
.form-select{
  width:100%;
  padding:10px 12px;
  font-size:14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}
.form-control:focus,
.form-select:focus{
  border-color: var(--border);
  box-shadow: var(--ring);
}
.form-control::placeholder{ color: rgba(0,0,0,.45); }

/* Ensure bootstrap radios/checkboxes match radius rule */
.form-check-input{ border-radius: var(--radius); }
input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=url],
select,
textarea{
  width:100%;
  padding:10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}

.field-row{ display:flex; gap:10px; align-items:center; width:100%; }
.field-row > *{ flex:1 1 auto; }
.field-row > button, .field-row > .btn{ flex:0 0 auto; }

.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

/* Tables */
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ border-bottom: 1px solid var(--border); padding: 10px; text-align:left; vertical-align: top; }
.table td.actions{ text-align:right; width:1%; white-space:nowrap; }
.table td.actions form{ display:flex; justify-content:flex-end; }

/* Simple list rows (used in Admin > Bord toevoegen > Overzicht borden) */
.list-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 10px;
}
.list-row .info{ min-width:0; }
.list-row .actions{ margin-left:auto; display:flex; justify-content:flex-end; }
.list-row .actions form{ margin:0; }
@media (max-width: 640px){
  .list-row{ flex-direction:column; align-items:stretch; }
  .list-row .actions{ justify-content:flex-end; }
}

/* Media / library cards */
.library-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }
.library-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-1); display:flex; flex-direction:column; }
.library-thumb{ background: var(--surface-2); border-bottom:1px solid var(--border); aspect-ratio: 16/10; display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; }
.library-thumb img{ width:100%; height:100%; object-fit: cover; }
.library-meta{ padding: 12px 14px; display:flex; flex-direction:column; gap:4px; }
.library-name{ font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.library-actions{ padding: 12px 14px; display:flex; gap:10px; border-top: 1px solid var(--border); }

/* Previews */
.preview{ aspect-ratio: 16/9; background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.preview img{ width:100%; height:100%; object-fit: contain; }

/* Badges */
.badge{ background: var(--surface-2); color: var(--text); padding:2px 8px; border-radius: var(--radius); font-size:12px; border:1px solid var(--border); }

/* Mobile nav (hamburger) */
.nav-burger{
  display:none;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  height: 38px;
  width: 44px;
  padding:0;
}
.nav-burger svg{ width:18px; height:18px; }

@media (max-width: 860px){
  .container{ margin: 22px auto; }

  .nav-burger{ display:inline-flex; }

  /* Stack header items and turn nav into a panel */
  .header{ flex-wrap: wrap; }
  .topnav{
    width:100%;
    justify-content:flex-start;
    gap:8px;
    flex-wrap: wrap;
    display:none;
  }
  .header.nav-open .topnav{ display:flex; }

  .topnav-link{ width:auto; }
  .nav-dropdown-menu{ position: static; min-width: 100%; box-shadow:none; margin-top:6px; }
  .nav-dropdown{ width:100%; flex-wrap:wrap; }
}

@media (max-width: 640px){
  .form-row{ grid-template-columns: 1fr; }
  .field-row{ flex-direction: column; align-items: stretch; }
  .field-row > button, .field-row > .btn{ width:100%; }
}

/* Auth pages (login / forgot / reset / first-login) */
.auth-body{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.auth-container{ width:100%; max-width: 520px; }
.auth-brand{ font-weight: 900; font-style: italic; text-align:center; margin: 0 0 14px; }
.auth-card{ padding: 22px; }
.auth-actions{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }

/* Password eye toggle */
.pw-wrap{ position:relative; }
.pw-wrap input{ padding-right: 46px; }
.pw-toggle{
  position:absolute;
  right:6px;
  top:50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: transparent;
  border: 1px solid transparent;
  padding:0;
  cursor:pointer;
  color: var(--muted);
}
.pw-toggle svg{ width:20px; height:20px; display:block; }
.pw-toggle:hover{ background: transparent; color: var(--muted); }

/* Password requirement list (reset + first-login) */
.req-list{ list-style:none; padding-left:0; margin: -6px 0 10px; }
.req-list li{ font-size:12px; display:flex; align-items:center; gap:6px; color: var(--muted); }
.req-list li.ok{ color: #065f46; }
.req-list li .mark{ display:inline-block; width:16px; text-align:center; font-weight:700; }
.helper{ font-size:12px; color: var(--muted); margin-top:-6px; margin-bottom:10px; }

/* ------------------------------------------------------------
   Designer (spot design tool)
   Scoped so global/Bootstrap styles cannot break placement.
   ------------------------------------------------------------ */

.designer-page{ width:100%; }

.designer-toolbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--gap);
}

.designer-toolbar-left{ min-width: 220px; }
.designer-toolbar-right{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }

.designer-page .toolbtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  line-height: 1;
}
.designer-page .toolbtn--small{ padding: 7px 10px; font-weight: 700; }
.designer-page .toolbtn svg{ width:18px; height:18px; }
/* No hover state (requested) */
.designer-page .toolbtn:hover{ background: var(--surface); color: var(--text); }

/* Icon sizing consistency (Bootstrap can alter inline SVG sizing/alignment) */
.designer-page svg.i{
  width:18px;
  height:18px;
  flex: 0 0 18px;
  display:block;
}
.designer-page svg.i-stroke{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Simple dropdown (same open/close behavior as designer “Voeg toe”) */
.designer-page .dropdown{ position:relative; }
.designer-page .dropdown-menu{
  display:none;
  position:absolute;
  left:0;
  right:auto;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  box-shadow: var(--shadow-2);
  z-index: 50;
}
.designer-page .dropdown.open .dropdown-menu{ display:block; }
.designer-page .dropdown-item{
  width:100%;
  border:0;
  background: transparent;
  padding: 8px 10px;
  border-radius: var(--radius);
  display:flex;
  align-items:center;
  
  justify-content: flex-start;
gap:10px;
  text-align:left;
  color: var(--text);
  font-weight: 600;
}
.designer-page .dropdown-item:hover{ background: transparent; }
.designer-page .dropdown-sep{ height:1px; background: var(--border); margin:6px 0; }
.designer-page .dropdown-title{ font-size:12px; color: var(--muted); padding: 6px 10px 2px; }

.designer-wrap{
  display:grid;
  grid-template-columns: 380px 1fr;
  gap: var(--gap);
  align-items: stretch;
  /* Ensure the stage can size to the viewport so the preview always fits without scrolling */
  min-height: calc(100vh - 220px);
}

.designer-panel{
  display:flex;
  flex-direction:column;
  gap: var(--gap);
  min-height: 0;
  max-height: calc(100vh - 220px);
  overflow:auto;
  padding-right: 4px;
}
.designer-card{ padding: 16px; }
.designer-card-title{ font-size: 14px; font-weight: 800; margin: 0 0 10px; }

.designer-metrics-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top:10px; }
.designer-metric input, .designer-page .inp, .designer-page .textarea, .designer-page select{
  width:100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.designer-page .textarea{ resize: vertical; min-height: 72px; }
.designer-page input[type="color"].color-input{ width: 54px; height: 38px; padding:0; border-radius: var(--radius); }

.designer-grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.segmented{ display:flex; gap:6px; }
.segmented--full{ width:100%; }
.segmented-btn{
  flex:1;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.segmented-btn:hover{ background: var(--surface); }

.designer-inline-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top: 12px; }
.designer-inline-actions-right{ display:flex; gap:8px; }

.designer-stage{ min-height: 0; }
.designer-preview{
  flex:1;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px;
}
.designer-preview canvas{
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid rgba(20,20,20,0.10);
}

@media (max-width: 992px){
  .designer-wrap{ grid-template-columns: 1fr; }
  .designer-toolbar-left{ min-width: 0; }
  .designer-toolbar{ flex-wrap: wrap; }
}

@media (max-width: 520px){
  .designer-grid-2{ grid-template-columns: 1fr; }
  .designer-metrics-row{ grid-template-columns: 1fr; }
  .designer-toolbar-right{ justify-content:flex-start; }
}

/* ---------- Admin: Nieuwe gebruiker (rolkeuze + overzicht) ---------- */
.role-toggle{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
}
.role-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor:pointer;
  user-select:none;
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  width: 100%;
}
.role-chip input{ margin:0; }
.role-chip input{ display:none; }
.role-chip span{
  display:inline-block;
  width: 100%;
  text-align: center;
}
.role-chip input:checked + span{
  font-weight: 700;
}
.role-chip input:checked + span{
  position: relative;
}
.role-chip input:checked + span::after{
  content:'';
  position:absolute;
  left:-12px; right:-12px; top:-10px; bottom:-10px;
  border:1px solid rgba(20,20,20,0.45);
  border-radius: var(--radius);
  box-shadow: var(--ring);
  pointer-events:none;
}

@media (max-width: 520px){
  .role-toggle{ flex-wrap:wrap; }
}

@media (max-width: 520px){
  .role-toggle{ flex-wrap: wrap; }
}

.user-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
  justify-content:center;
}
.user-edit-form{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  width:100%;
}
.user-edit-form .u-name{ flex: 1 1 220px; min-width: 180px; }
.user-edit-form .u-email{ flex: 2 1 360px; min-width: 240px; }
.user-edit-form .u-save{ flex: 0 0 auto; }
.user-delete-form{ margin:0; }

@media (max-width: 720px){
  .user-edit-form{ flex-wrap:wrap; justify-content:flex-end; }
  .user-edit-form .u-name,
  .user-edit-form .u-email{ flex: 1 1 100%; }
}

/* Utilities */
.mt-2{ margin-top:8px; }
.mb-3{ margin-bottom:16px; }

/* Page heading */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin: 0 0 16px; }
.page-title{ margin:0; }

/* Cards / sections */
.section-card{ margin-bottom:16px; }
.card-title{ margin:0 0 8px; }

/* Spots grid */
.spot-grid{ display:grid; gap:16px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .spot-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .spot-grid{ grid-template-columns: repeat(3, 1fr); } }

.spot-preview{
  aspect-ratio: 16/9;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.spot-preview img{ width:100%; height:100%; object-fit: contain; }

.spot-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px; }

/* Admin spot rows */
.spot-admin-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.spot-admin-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.inline-form{ display:flex; gap:10px; align-items:center; }

/* Divider */
.divider{ border:none; border-top:1px solid var(--border); margin:12px 0; }

/* Bulk upload form */
.bulk-form{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.bulk-form input[type="file"]{ flex: 1 1 260px; }

/* Modal (generic) */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.68);
  z-index: 9999;
}
.modal.active{ display:flex !important; }
.modal-close{
  position:absolute;
  top: 20px;
  right: 25px;
  font-size: 32px;
  width: 40px;
  height: 40px;
  color: #fff;
  cursor:pointer;
  background: rgba(0,0,0,0.5);
  border-radius: var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}
.modal-card{ width: min(980px, 92vw); max-height: 88vh; overflow:auto; }
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.modal-head-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }


/* Spot preview modal image */
#spotModalImg{ max-width:90vw; max-height:90vh; border-radius: var(--radius); box-shadow: 0 4px 25px rgba(0,0,0,0.3); }



/* Fix: left-align 'Voeg toe' menu items */
.designer-page .dropdown-menu{
  text-align:left;
}

.designer-page .dropdown-item{
  justify-content:flex-start !important;
  text-align:left !important;
}

.designer-page .dropdown-item *{
  text-align:left !important;
}




/* Stronger fix: ensure 'Voeg toe' dropdown items are left-aligned (override generic button styles) */
.designer-page #addMenu .dropdown-item,
.designer-page .dropdown-menu .dropdown-item{
  display:flex !important;
  width:100% !important;
  justify-content:flex-start !important;
  text-align:left !important;
}

.designer-page #addMenu .dropdown-item svg,
.designer-page .dropdown-menu .dropdown-item svg{
  flex: 0 0 auto;
}

.designer-page #addMenu .dropdown-item span,
.designer-page .dropdown-menu .dropdown-item span{
  text-align:left !important;
}




/* FINAL FIX — left align 'Voeg toe' menu items (override global button flex centering) */
.designer-page #addMenu button.dropdown-item{
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  text-align:left !important;
  gap:10px;
}

.designer-page #addMenu button.dropdown-item span{
  flex:0 1 auto;
  text-align:left !important;
}

.designer-page #addMenu{
  text-align:left;
}




/* DEFINITIVE FIX — 'Voeg toe' dropdown: stack items and stretch full width so content can be left-aligned */
.designer-page #addMenu.dropdown-menu{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important; /* makes children take full width */
  justify-content:flex-start !important;
}

.designer-page #addMenu.dropdown-menu > *{
  width:100% !important;
}

.designer-page #addMenu button.dropdown-item{
  width:100% !important;
  justify-content:flex-start !important;
  text-align:left !important;
}




/* Force dropdown items to take full menu width so left-align is visible */
.designer-page #addMenu button.dropdown-item{
  width:100% !important;
  box-sizing:border-box;
}



/* ---- FORCE LEFT ALIGN (Voeg toe menu) ---- */
.designer-page #addMenu.dropdown-menu{
  display:block; /* when open, still block; safe */
  text-align:left !important;
}

.designer-page #addMenu{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important; /* make items full width */
}

.designer-page #addMenu > .dropdown-item,
.designer-page #addMenu > button.dropdown-item{
  width:100% !important;
  box-sizing:border-box !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  text-align:left !important;
}

.designer-page #addMenu > .dropdown-item svg,
.designer-page #addMenu > button.dropdown-item svg{
  margin:0 !important;
}

.designer-page #addMenu > .dropdown-item span,
.designer-page #addMenu > button.dropdown-item span{
  text-align:left !important;
}



/* --- FIX: 'Voeg toe' menu should only show when dropdown is open --- */
.designer-page #addMenu.dropdown-menu{
  display: none !important;
}
.designer-page #addDropdown.open #addMenu.dropdown-menu,
.designer-page #addDropdown.is-open #addMenu.dropdown-menu{
  display: block !important;
}