:root {
  --oeukbd-brand: #0a6cf1;
  --oeukbd-muted: #6b7280;
  --oeukbd-border: #E6E8EF;
  --oeukbd-shadow: 0 1px 3px rgba(16,24,40,.06);
  --oeukbd-bg: #ffffff;
}

/* ---------- Toolbar & Filters ---------- */
.oeukbd-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  margin-bottom: 12px;
  z-index: 5; /* ensure over map */
  overflow: visible; /* ensure children can float */
}

.oeukbd-search { flex: 1 1 320px; min-width: 220px; }
.oeukbd-search input,
#oeukbd-search {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--oeukbd-border);
  background: #fff;
  outline: none;
}
#oeukbd-search:focus-visible { box-shadow: 0 0 0 3px rgba(10,108,241,.15); }

/* Keep filters on a single line; allow scroll */
.oeukbd-filterbar,
.oeukbd-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: nowrap;          
  overflow-x: auto;           
  -webkit-overflow-scrolling: touch;
  overflow-y: visible; /* 👈 allow dropdowns to escape vertically */
}
.oeukbd-filterbar::-webkit-scrollbar { height: 6px; }
.oeukbd-filterbar::-webkit-scrollbar-thumb { background: #d9dbe8; border-radius: 999px; }

.oeukbd-dd { 
  position: relative; 
  flex: 0 0 auto; 
  overflow: visible !important; /* 👈 prevent clipping */
}
.oeukbd-dd-btn {
  border: 1px solid var(--oeukbd-border);
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--oeukbd-shadow);
}
.oeukbd-dd-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(10,108,241,.15); }

.oeukbd-dd-menu {
  position: absolute;
  z-index: 1200;               
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  max-height: 360px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--oeukbd-border);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(16,24,40,.12);
  display: none; /* hide by default */
}
.oeukbd-dd-menu.open { display: block; }

.dd-option {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.dd-option:hover { background: #f6f7fb; }
.dd-option input { margin-right: 8px; accent-color: var(--oeukbd-brand); }

.dd-group { padding: 6px 0; }
.dd-group-title {
  font-weight: 600;
  padding: 4px 8px;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-children { padding: 2px 0 6px 8px; }

/* Clear button & view toggle */
.oeukbd-clear,
#oeukbd-clear {
  flex: 0 0 auto;
  border: 1px solid var(--oeukbd-border);
  border-radius: 999px;
  background: #fff;
  padding: 8px 14px;
  box-shadow: var(--oeukbd-shadow);
  cursor: pointer;
}
#oeukbd-clear:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(10,108,241,.15); }

.oeukbd-viewtoggle {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  gap: 0;
  border-radius: 999px;
  background: #f3f4f6;
  padding: 4px;
  box-shadow: var(--oeukbd-shadow);
}
.oeukbd-viewtoggle button {
  border:0;
  background: transparent;
  padding: 8px 14px;
  border-radius: 999px;
  color: #6b7280;
  cursor: pointer;
}
.oeukbd-viewtoggle button.active {
  background: #fff;
  color: var(--oeukbd-brand);
  box-shadow: var(--oeukbd-shadow);
}
.oeukbd-viewtoggle button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(10,108,241,.15); }

/* ---------- Map & List ---------- */
.oeukbd-views { position: relative; z-index: 1; }
#oeukbd-map-canvas {
  width: 100%;
  height: 560px;
  border-radius: 12px;
  border: 1px solid var(--oeukbd-border);
  overflow: hidden;
  background: #f9fafb;
}
.oeukbd-map-loading, .oeukbd-table-loading {
  display:flex;
  align-items:center;
  gap:8px;
  margin: 8px 0;
}
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #E6E8EF;
  border-top-color: var(--oeukbd-brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Table list view */
.oeukbd-tablewrap { position: relative; }
.oeukbd-table {
  width:100%;
  border-collapse: collapse;
  background:#fff;
  border:1px solid var(--oeukbd-border);
  border-radius: 12px;
  overflow: hidden;
}
.oeukbd-table th, .oeukbd-table td {
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--oeukbd-border);
  vertical-align: top;
}
.oeukbd-table th { background:#f9fafb; font-weight:600; }
.oeukbd-table .col-company .company {
  font-weight:600;
  text-decoration:none;
  color:#111827;
}
.oeukbd-table .col-company .company:focus-visible { outline: 2px solid rgba(10,108,241,.4); outline-offset: 2px; }
.oeukbd-table .col-actions a { margin-right: 8px; }

.oeukbd-empty { margin-top: 10px; color: var(--oeukbd-muted); font-style: italic; }

/* Map popup */
.oeukbd-popup .head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.oeukbd-popup .tag { display:inline-block; padding:2px 6px; border-radius:999px; background:#eef2ff; color:#4f46e5; margin-right:4px; font-size:12px; }
.oeukbd-popup .btn { display:inline-block; padding:6px 10px; border-radius:8px; background:var(--oeukbd-brand); color:#fff; text-decoration:none; margin-right:6px; }
.oeukbd-popup .btn.ghost { background:#fff; color:var(--oeukbd-brand); border:1px solid var(--oeukbd-brand); }

/* ---------- Submit form ---------- */
.oeukbd-form-note { margin: 0 0 10px; color: var(--oeukbd-muted); font-size: 14px; }
.section-card {
  background:#fff;
  border:1px solid var(--oeukbd-border);
  border-radius: 14px;
  padding: 14px;
  margin: 12px 0;
  box-shadow: var(--oeukbd-shadow);
}
.section-title {
  font-weight:700;
  font-size: 16px;
  padding: 0 2px 8px;
  display:block;
  border-bottom: 1px solid var(--oeukbd-border);
  margin-bottom: 10px;
}

.oeukbd-submit .grid { display:grid; gap:12px; }
.oeukbd-submit .grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .oeukbd-submit .grid.two { grid-template-columns: 1fr; } }

.oeukbd-submit label { display:grid; gap:6px; font-size:14px; }
.oeukbd-submit input[type="text"],
.oeukbd-submit input[type="email"],
.oeukbd-submit input[type="url"],
.oeukbd-submit textarea {
  border:1px solid var(--oeukbd-border);
  border-radius:10px;
  padding:10px 12px;
  width:100%;
  background:#fff;
  outline: none;
}
.oeukbd-submit input:focus-visible,
.oeukbd-submit textarea:focus-visible { box-shadow: 0 0 0 3px rgba(10,108,241,.15); }
.oeukbd-submit textarea { resize: vertical; }

/* Chips (sectors/regions) */
.chips.compact { display:flex; flex-wrap: wrap; gap:8px; }
.chips.compact .chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--oeukbd-border);
  box-shadow: var(--oeukbd-shadow);
  background:#fff;
  cursor: pointer;
}
.chips.compact .chip input { accent-color: var(--oeukbd-brand); }

/* Capabilities full width */
.cap-wrap { margin-bottom: 12px; }
.subhead { font-weight: 600; margin-bottom: 8px; }
.subhead.with-tools { display:flex; align-items:center; gap:10px; }
.input-search {
  flex: 0 0 260px;
  max-width: 100%;
  border: 1px solid var(--oeukbd-border);
  border-radius: 999px;
  padding: 8px 12px;
  outline: none;
  background: #fff;
}
.input-search:focus-visible { box-shadow: 0 0 0 3px rgba(10,108,241,.15); }

.cap-accordions {
  display:grid;
  gap:10px;
  max-height: 560px;
  overflow:auto;
  border: 1px dashed var(--oeukbd-border);
  border-radius: 12px;
  padding: 8px;
  background: #fafbff;
}
.cap-acc {
  border:1px solid var(--oeukbd-border);
  border-radius: 12px;
  background:#fff;
}
.cap-acc > summary {
  list-style:none;
  cursor:pointer;
  padding:10px 12px;
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:10px;
  align-items:center;
}
.cap-acc > summary::-webkit-details-marker { display:none; }
.cap-acc .title { font-weight:600; }
.cap-acc .count { color: var(--oeukbd-muted); font-size:12px; }
.cap-acc .tools button {
  border:0;
  background:transparent;
  color: var(--oeukbd-brand);
  cursor:pointer;
  font-size:12px;
  margin-left:6px;
}
.cap-options {
  padding:8px 12px 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:6px 14px;
}
.cap-options .check { display:flex; align-items:center; gap:8px; }
.cap-options .check input { accent-color: var(--oeukbd-brand); }
.cap-options.empty { color: var(--oeukbd-muted); font-style:italic; }
@media (max-width: 700px) { .cap-options { grid-template-columns: 1fr; } }

/* Map picker in form */
.pick-map {
  height: 300px;
  border-radius: 12px;
  border:1px solid var(--oeukbd-border);
  overflow:hidden;
  background: #f9fafb;
}

/* Form actions */
.actions {
  display:flex;
  gap:10px;
  align-items:center;
  padding: 6px 0;
}
.actions .primary {
  background: var(--oeukbd-brand);
  color:#fff;
  border:0;
  padding:10px 14px;
  border-radius: 10px;
  cursor:pointer;
}
.actions .primary:disabled { opacity: .6; cursor: not-allowed; }
.form-status { color: var(--oeukbd-muted); }

/* Accessibility helpers */
.oeukbd a:focus-visible,
.oeukbd button:focus-visible { outline: 2px solid rgba(10,108,241,.4); outline-offset: 2px; }

/* Extra safety to keep dropdowns above map on all themes */
.leaflet-container { z-index: 1; }
.oeukbd-toolbar,
.oeukbd-dd-menu { z-index: 1200; }

/* Utility */
@keyframes spin { to { transform: rotate(360deg); } }