/* Field team page (الفريق الميداني) and its drawer/modals (drawers live outside the page element). */
.team-date { display: flex; align-items: center; gap: 4px; }
.team-date .input { width: auto; min-width: 150px; }
.team-kpis { margin-bottom: var(--gap); }
.team-kpis .kpi { cursor: pointer; }
.team-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.team-role {
  text-align: start; font: inherit; color: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--c-line-soft); border-radius: var(--radius); padding: 14px 16px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px;
}
.team-role.is-active { border-color: var(--c-green); box-shadow: var(--ring); }
.team-role-head { display: flex; align-items: center; gap: 10px; }
.team-role-head b { flex: 1; font-size: var(--fs-md); }
.team-role-glyph { width: 30px; height: 30px; border-radius: 9px; background: var(--c-tint); color: var(--c-forest); display: grid; place-items: center; font-weight: 700; }
.team-role-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--c-gray-tint); }
.team-role-bar .seg { display: block; min-width: 4px; }
.seg-inside, .dot-inside, .lg-inside { background: var(--c-green); }
.seg-outside, .dot-outside, .lg-outside { background: #E2A93B; }
.seg-left, .dot-left, .lg-left { background: #9AA39A; }
.seg-absent, .dot-absent { background: var(--c-orange); }
.team-role-foot { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: var(--fs-xs); color: var(--c-muted-strong); }
.team-role-foot .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 5px; vertical-align: middle; }

.team-map-card { margin-bottom: var(--gap); }
.team-map-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--gap); align-items: start; }
.team-map-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.team-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-xs); color: var(--c-muted-strong); }
.team-legend span { display: inline-flex; align-items: center; gap: 6px; }
.team-legend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.team-legend .lg-park { border-radius: 4px; background: #fff; border: 2px solid var(--c-green); }
.team-legend .lg-ring { background: rgba(118,188,33,.12); border: 2px dashed rgba(17,152,83,.6); }
.team-side { background: var(--c-zebra); border: 1px solid var(--c-line-soft); border-radius: 12px; padding: 14px; max-height: 460px; overflow: auto; }
.team-side h4 { margin: 0; font-size: var(--fs-md); }
.team-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.team-side-parks, .team-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.team-side-parks li, .team-side-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; background: #fff; border-radius: 8px; border: 1px solid var(--c-line-soft); }
.team-side-list li .muted { font-size: var(--fs-xs); margin-inline-start: auto; }
.team-side-parks .ok { color: var(--c-green); font-weight: 700; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--c-forest); font-weight: 600; cursor: pointer; text-align: start; }
.linkish:hover { text-decoration: underline; }
.text-warn { color: #9a5b00; font-weight: 600; }

/* map pins for parks and people */
.pin-park .map-pin-body {
  min-width: 38px; height: 30px; padding: 0 7px; border-radius: 9px; display: flex; align-items: baseline; justify-content: center; gap: 1px;
  background: #fff; border: 2px solid var(--c-green); color: var(--c-forest); box-shadow: 0 2px 6px rgba(0,0,0,.25);
  font: 700 14px/26px "IBM Plex Sans Arabic", Tahoma, sans-serif;
}
.pin-park .map-pin-body small { font-size: 11px; color: var(--c-muted-strong); font-weight: 600; }
.pin-park.has-present .map-pin-body { background: var(--c-green); color: #fff; }
.pin-park.has-present .map-pin-body small { color: rgba(255,255,255,.85); }
.pin-park.none-present .map-pin-body { border-color: var(--c-orange); color: var(--c-orange-700); }
.pin-park.empty .map-pin-body { border-color: var(--c-line); color: var(--c-muted); }
.pin-park.is-selected .map-pin-body { box-shadow: 0 0 0 4px rgba(118,188,33,.45), 0 2px 6px rgba(0,0,0,.25); }
.pin-staff .map-pin-body {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  font: 700 12px/1 "IBM Plex Sans Arabic", Tahoma, sans-serif; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.pin-staff.st-inside .map-pin-body { background: var(--c-green); }
.pin-staff.st-outside .map-pin-body { background: #E2A93B; }
.pin-staff.st-left .map-pin-body { background: #9AA39A; }
.pin-staff.st-absent .map-pin-body { background: var(--c-orange); }
.circle-park { border-color: rgba(17, 152, 83, .5); }

.team-name { display: flex; flex-direction: column; gap: 2px; }
.team-last { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* member drawer */
.team-range { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.team-range .field { margin: 0; }
.team-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.team-timeline li {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center;
  background: #fff; border: 1px solid var(--c-line-soft); border-radius: 10px; padding: 10px 12px; border-inline-start: 4px solid var(--c-green);
}
.team-timeline li.tl-outside { border-inline-start-color: #E2A93B; }
.team-timeline li.tl-left { border-inline-start-color: #9AA39A; }
.team-timeline .tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.team-timeline .tl-body { grid-column: 1 / 2; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-sm); }
.team-timeline li > .btn { grid-row: 1 / span 2; grid-column: 2; }

@media (max-width: 1100px) {
  .team-map-grid { grid-template-columns: minmax(0, 1fr); }
  .team-side { max-height: none; }
}
@media (max-width: 640px) {
  .team-date { width: 100%; }
  .team-date .input { flex: 1; }
  .team-range { grid-template-columns: 1fr 1fr; }
  .team-range .btn { grid-column: 1 / -1; }
}