/* Site Manager (/site-manager): portaal voor hallen. Bouwt op app.css en
   landing.css; alleen wat hier specifiek is. Groot genoeg te lezen en te
   zoomen (geen vaste tekstgroottes onder 0,8rem). */
.sm-page { background: var(--bg); color: var(--text); min-height: 100vh; }
.sm-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .8rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface);
}
.sm-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.1rem; }
.sm-brand-sub { color: var(--accent); }
.sm-header-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sm-main { max-width: 860px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.sm-center { display: flex; justify-content: center; padding: 3rem 0; }
.sm-hero h1 { font-size: 1.6rem; margin: .5rem 0; }
.sm-hero p { font-size: 1.02rem; line-height: 1.5; }
.sm-points { padding-left: 1.2rem; line-height: 1.6; margin: .8rem 0 1.4rem; }
.sm-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin: .8rem 0;
}
.sm-tabs { display: flex; gap: .4rem; margin-bottom: 1rem; }
.sm-tab {
  flex: 1; padding: .6rem; border-radius: var(--radius); border: 1px solid var(--border);
  background: transparent; color: var(--text); font-weight: 600; cursor: pointer; min-height: 44px;
}
.sm-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.sm-muted { color: var(--text-muted); }
.sm-small { font-size: .85rem; line-height: 1.45; }
.sm-msg { margin-top: .8rem; line-height: 1.45; }
.sm-msg.error { color: var(--warning); }
.sm-site-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.sm-site-name { font-size: 1.1rem; font-weight: 700; }
.sm-badge {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--surface-2, rgba(127,127,127,.15)); color: var(--text);
}
.sm-badge.owner { background: var(--accent); color: #fff; }
.sm-badge.pending { background: transparent; border: 1px dashed var(--text-muted); color: var(--text-muted); }
.sm-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.sm-row input { flex: 1; min-width: 10rem; }
.sm-row button, .sm-add button, .sm-result button { min-height: 44px; }
.sm-result {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem 0; border-bottom: 1px solid var(--border);
}
.sm-result:last-child { border-bottom: none; }
.sm-add input[type="search"], .sm-add input[type="text"], .sm-add select, .sm-row input {
  width: 100%; padding: .6rem .7rem; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 1rem;
}
.sm-new { margin-top: 1rem; }
.sm-new summary { cursor: pointer; font-weight: 600; padding: .4rem 0; }
.sm-place { display: block; width: 100%; text-align: left; padding: .5rem; margin: .2rem 0; }
.sm-place.active { outline: 2px solid var(--accent); }
.sm-members { margin-top: .8rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.sm-member { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .3rem 0; }
.sm-invite {
  border: 1px solid var(--accent); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: .8rem;
  display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.sm-toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 1000;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .7rem 1.1rem; box-shadow: 0 6px 24px rgba(0,0,0,.2); max-width: 90vw;
}
.sm-toast.error { border-color: var(--warning); }

/* Fase 3: routes van een site */
#sm-routes-back { margin-bottom: .6rem; min-height: 44px; }
.sm-rpane { margin-top: .4rem; }
.sm-filter-row input { min-height: 44px; }
.sm-check { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; cursor: pointer; }
.sm-check input { width: 1.1rem; height: 1.1rem; }
.sm-route { border: 1px solid var(--border); border-radius: var(--radius); margin: .45rem 0; background: var(--surface); }
.sm-route.archived { opacity: .7; }
.sm-route.open { border-color: var(--accent); }
.sm-route-head {
  display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; padding: .6rem .7rem;
  background: none; border: 0; color: var(--text); cursor: pointer; min-height: 52px; font: inherit;
}
.sm-grade {
  flex: 0 0 auto; min-width: 2.8rem; text-align: center; font-weight: 700; padding: .25rem .4rem;
  border-radius: var(--radius); background: var(--surface-2, rgba(127,127,127,.15));
}
.sm-route-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.sm-route-name { font-weight: 600; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; overflow-wrap: anywhere; }
.sm-route-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.sm-dot { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; border: 1px solid rgba(127,127,127,.6); }
.sm-badge.conflict { background: var(--warning); color: #fff; }
.sm-route-edit { padding: .2rem .8rem .9rem; border-top: 1px solid var(--border); }
.sm-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; margin: .7rem 0; }
.sm-field { display: flex; flex-direction: column; gap: .25rem; }
.sm-field input, .sm-field select, .sm-map-row select {
  width: 100%; padding: .55rem .6rem; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 1rem; min-height: 44px;
}
.sm-compare { margin-top: .6rem; }
.sm-compare h4 { margin: .4rem 0; }
.sm-cmp { padding: .4rem 0; border-bottom: 1px solid var(--border); }
.sm-cmp-field { font-weight: 600; margin-bottom: .2rem; }
.sm-cmp-line { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding: .15rem 0; }
.sm-cmp-line.differs > span { color: var(--warning); }
.sm-cmp-line button { min-height: 40px; }
.sm-file { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.sm-map { display: flex; flex-direction: column; gap: .5rem; margin: .6rem 0; }
.sm-map-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(9rem, 14rem); gap: .6rem; align-items: center;
  padding: .45rem 0; border-bottom: 1px solid var(--border); }
.sm-map-left { min-width: 0; overflow-wrap: anywhere; }
.sm-map-col { font-weight: 600; }
@media (max-width: 520px) { .sm-map-row { grid-template-columns: 1fr; } }
.sm-group { margin: .4rem 0; }
.sm-group summary { cursor: pointer; font-weight: 600; padding: .35rem 0; }
.sm-group ul { margin: .2rem 0 .4rem; padding-left: 1.2rem; line-height: 1.5; overflow-wrap: anywhere; }
.sm-run.undone { opacity: .65; }

/* Kleur en conflictkeuze (colors.js, site-manager.js::loadComparison) */
.sm-dot.unknown { background: repeating-linear-gradient(45deg, rgba(127,127,127,.45) 0 3px, transparent 3px 6px); }
.sm-cmp.conflict { border-left: 3px solid var(--warning); padding-left: .6rem; }
.sm-cmp-value { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.sm-recommend { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .4rem 0 .8rem; }
.sm-recommend .btn-primary { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; }