:root{
  --elc-primary: var(--elc-color-primary, var(--e-global-color-primary, #111111));
  --elc-accent: var(--elc-color-accent, var(--e-global-color-secondary, #2f7d32));
  --elc-border: rgba(0,0,0,.12);
  --elc-radius: 14px;
  --elc-card-bg: rgba(255,255,255,.92);
  --elc-text: #111111;
  --elc-muted: rgba(0,0,0,.65);
}

.elc-wrap{ font-family: inherit; }
/*
  IMPORTANT:
  We deliberately avoid enforcing a fixed max-width here so the Connect pages
  inherit the theme's normal content width (Elementor/Gutenberg/etc.).
  Previously this nested container made the Opdrachtenbord / Dashboard appear
  smaller than the rest of www.elstrom.be.
*/
.elc-container{ width:100%; }
.elc-wrap *, .elc-wrap *:before, .elc-wrap *:after{ box-sizing: border-box; }

/* Entry (login/register) toggle */
.elc-hidden{ display:none !important; }
.elc-entry-actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.elc-register-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }

/* Entry tabs (Login / Account aanmaken) */
.elc-entry-tabs{ margin: 12px 0 16px; }
.elc-entry-tabs .elc-tab{ cursor: pointer; }


.elc-grid{ display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items:start; }
.elc-grid-2{ display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.elc-grid-3{ display:grid; gap:12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.elc-card{
  background: var(--elc-card-bg);
  border:1px solid var(--elc-border);
  border-radius: var(--elc-radius);
  padding:16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  color: var(--elc-text);
}
.elc-card-inner{ background: rgba(255,255,255,.65); }
.elc-card-compact{ padding:12px; }
.elc-card-nested{ margin-top:12px; padding:12px; background: rgba(0,0,0,.03); }

.elc-field{ margin-bottom:12px; }
.elc-field label{ display:block; font-weight:600; margin-bottom:6px; }
.elc-field input[type="text"],
.elc-field input[type="email"],
.elc-field input[type="password"],
.elc-field input[type="number"],
.elc-field select,
.elc-field textarea{
  width:100%;
  border:1px solid var(--elc-border);
  border-radius: 10px;
  padding:10px 12px;
  font: inherit;
  background: #fff;
}

.elc-radio{ display:flex; gap:14px; flex-wrap:wrap; }
.elc-radio label{ font-weight:500; }

.elc-btn{
  display:inline-block;
  border:0;
  background: var(--elc-accent);
  color: #fff;
  padding:10px 14px;
  border-radius: 999px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
}
.elc-btn:hover{ filter: brightness(0.95); }
.elc-btn-secondary{
  background: transparent;
  color: var(--elc-primary);
  border:1px solid var(--elc-border);
}

.elc-btn-small, .elc-btn-sm{ padding:6px 12px; font-size: 13px; }
.elc-btn-icon{ display:inline-flex; align-items:center; gap:8px; }
.elc-icon{ display:inline-block; vertical-align:middle; }

.elc-link{ color: var(--elc-primary); text-decoration: underline; }
.elc-muted{ color: var(--elc-muted); }

.elc-alert{ margin:12px 0; padding:12px 14px; border-radius: 12px; border:1px solid var(--elc-border); font-weight:700; }
.elc-alert-success{ background: #198754; border-color:#146c43; color:#fff; }
.elc-alert-warn{ background: #ffc107; border-color:#ffca2c; color:#111; }
.elc-alert-error{ background: #dc3545; border-color:#b02a37; color:#fff; }
.elc-alert-info{ background: #0d6efd; border-color:#0a58ca; color:#fff; }
.elc-alert a{ color: inherit; text-decoration: underline; }

.elc-topbar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:12px; padding:12px; border:1px solid var(--elc-border); border-radius: var(--elc-radius); background: var(--elc-card-bg); color: var(--elc-text); }
.elc-topbar-right{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.elc-user{ font-weight:700; }

.elc-field-checkbox label{ display:flex; align-items:center; gap:8px; font-weight:600; }
.elc-field-checkbox input[type="checkbox"]{ width:16px; height:16px; }

.elc-status-grid{ display:flex; gap:12px; flex-wrap:wrap; margin: 12px 0; }

@media (max-width: 720px){
  .elc-grid-2, .elc-grid-3{ grid-template-columns: 1fr; }

  /* Mobile topbar buttons (Planer/Rapport/Uitloggen) */
  .elc-topbar{ align-items:flex-start; }
  .elc-topbar-right{ width:100%; }
  .elc-topbar-right a.elc-btn{ flex: 1 1 calc(50% - 8px); justify-content:center; text-align:center; }
  .elc-topbar-right a.elc-btn.elc-btn-sm{ padding:10px 12px; font-size:14px; }
}

@media (max-width: 420px){
  .elc-topbar-right a.elc-btn{ flex: 1 1 100%; }
}

.elc-inline-form{ display:inline-block; margin-left:6px; }
.elc-inline-form .elc-btn{ margin:0; }

.elc-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.elc-tab{ padding:8px 12px; border:1px solid var(--elc-border); border-radius: 999px; text-decoration:none; color: var(--elc-primary); background: rgba(255,255,255,.65); }
.elc-tab.active{ background: var(--elc-primary); color:#fff; border-color: var(--elc-primary); }

.elc-table-wrap{ overflow:auto; }
.elc-table{ width:100%; border-collapse: collapse; }
.elc-table th, .elc-table td{ border-bottom:1px solid var(--elc-border); padding:10px 8px; text-align:left; }
.elc-table th{ font-weight:800; color: var(--elc-primary); }

.elc-badge{ display:inline-block; padding:2px 8px; border-radius: 999px; border:1px solid var(--elc-border); font-size:12px; }
.elc-badge.elc-ok{ background: rgba(46,125,50,.14); border-color: rgba(46,125,50,.3); }
.elc-badge.elc-new{ background: rgba(255,193,7,.22); border-color: rgba(255,193,7,.45); color: #111; font-weight: 800; }


.elc-lang{ display:flex; align-items:center; gap:8px; }
.elc-lang select{ width:auto; }

.elc-panel{ margin-top:10px; }

.elc-list{ padding-left: 18px; }

.elc-chat{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.elc-chat-msg{ padding:10px; border:1px solid var(--elc-border); border-radius: 12px; background: rgba(255,255,255,.85); }
.elc-chat-msg.mine{ border-color: rgba(46,125,50,.35); background: rgba(46,125,50,.08); }
.elc-chat-msg.system{ background: rgba(0,0,0,.04); border-style:dashed; text-align:center; }
.elc-chat-msg.system .elc-chat-meta{ color: var(--elc-muted); }
.elc-chat-meta{ font-size:12px; color: var(--elc-muted); margin-bottom:6px; }

.elc-filter{
  margin:12px 0;
  padding:12px;
  border:1px dashed var(--elc-border);
  border-radius: 12px;
  background: rgba(255,255,255,.55);
}

/* v0.3.4 – stronger scoping to prevent theme collisions */
.elc-wrap{ color: var(--elc-text); }
.elc-wrap .elc-card,
.elc-wrap .elc-topbar{
  background: var(--elc-card-bg) !important;
  color: var(--elc-text) !important;
}
.elc-wrap .elc-tab{ background: rgba(255,255,255,.65); color: var(--elc-primary); }
.elc-wrap .elc-tab.active{ background: var(--elc-primary); color:#fff; border-color: var(--elc-primary); }
.elc-wrap .elc-filter{ border-style: solid; background: rgba(255,255,255,.65); }

/* Leaflet map (Opdrachtenbord) */
.elc-map{
  width: 100%;
  height: 420px;
  border-radius: var(--elc-radius);
  border:1px solid var(--elc-border);
  overflow: hidden;
  background: rgba(0,0,0,.04);
}

@media (max-width: 720px){
  .elc-map{ height: 320px; }
}

/* Message attachments */
.elc-chat-atts{
  margin-top: 8px;
  font-size: 13px;
  color: var(--elc-muted);
}
.elc-chat-atts a{ word-break: break-word; }