/* ==========================================================================
   teams.css — خاص بصفحة تحليل الفرق وخريطة تغطية الوظائف
   ========================================================================== */

[hidden] { display: none !important; }

[data-group="analysts"]  { --group-color: var(--lav); }
[data-group="diplomats"] { --group-color: var(--green); }
[data-group="sentinels"] { --group-color: var(--blue); }
[data-group="explorers"] { --group-color: var(--pink); }

.team-global-alert { margin-block-end: var(--gap); }

/* ---------- لافتة الانضمام ---------- */
.join-banner {
  margin-block-end: var(--gap);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.join-banner__info { display: grid; gap: 8px; max-width: 60ch; }
.join-banner__info .chip { width: fit-content; background: rgba(17, 17, 17, 0.14); }
.join-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.join-test-btn { border-color: rgba(17, 17, 17, 0.25); }

/* ---------- شبكة الهيرو ---------- */
.team-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch;
}

.team-builder {
  grid-column: span 8;
  padding: clamp(22px, 3vw, 38px);
  display: grid;
  gap: 20px;
}

.team-roster {
  --d: 100ms;
  grid-column: span 4;
  padding: clamp(22px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.team-builder__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.team-builder__head .chip { width: fit-content; margin-block-end: 10px; }
.team-builder__title { font-size: clamp(1.65rem, 3.4vw, 2.45rem); line-height: 1.2; }
.team-builder__title mark {
  background: var(--pink);
  color: var(--on-color);
  padding: 0 0.25em;
  border-radius: 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.team-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.team-tool-btn { padding: 9px 16px; font-size: 0.84rem; }

/* ---------- اسم الفريق وحفظه ---------- */
.team-name-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--card-2);
}

.team-field { display: grid; gap: 6px; min-width: 0; }
.team-field--grow { flex: 1; min-width: 220px; }
.team-field__label { font-size: 0.82rem; font-weight: 700; color: var(--muted); }

.team-input,
.team-select {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--card);
  font: inherit;
  color: inherit;
  font-size: 0.92rem;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.team-input:focus,
.team-select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 35%, transparent);
}

.team-select-wrap { position: relative; display: flex; align-items: center; }
.team-select { appearance: none; -webkit-appearance: none; padding-inline-end: 36px; cursor: pointer; font-weight: 600; }
.select-chevron { position: absolute; inset-inline-end: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }

.team-save-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.team-save-actions .btn { padding: 11px 18px; font-size: 0.86rem; }
.team-del-btn { color: var(--err); border-color: color-mix(in srgb, var(--err) 30%, transparent); }
.team-del-btn:hover { border-color: var(--err); }

.invite-result {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border-radius: var(--r-pill);
  background: var(--dark);
}
.invite-link-input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  padding: 8px 14px; font-size: 0.84rem; color: var(--on-dark); outline: none;
}
.invite-copy-btn { padding: 9px 18px; font-size: 0.82rem; }

/* ---------- نموذج إضافة عضو ---------- */
.add-member-form {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: var(--r-card);
  background: var(--card-2);
}

.add-member-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

.add-member-submit .btn { min-height: 46px; padding: 10px 22px; width: 100%; }
.add-member-quick { display: flex; flex-wrap: wrap; gap: 10px; }
.mini-link { font-size: 0.84rem; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- قائمة الأعضاء ---------- */
.roster-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.roster-title { font-size: 1.15rem; }
.chip--pink { background: var(--pink) !important; color: var(--on-color); }

.roster-empty { padding-block: 16px; }
.roster-list {
  display: grid;
  gap: 10px;
  max-height: 410px;
  overflow-y: auto;
  padding-inline-end: 2px;
}

.member-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.08);
}

.member-badge {
  min-width: 58px;
  padding: 8px 6px;
  border-radius: var(--r-sm);
  background: var(--group-color, var(--pink));
  color: var(--on-color);
  font-family: var(--font-latin);
  font-weight: 800;
  font-size: 0.92rem;
  text-align: center;
}

.member-info { min-width: 0; display: grid; gap: 2px; }
.member-info b { font-size: 0.94rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-info span { font-size: 0.78rem; color: var(--on-dark-muted); }

.member-del {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--on-dark-muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.member-del:hover { background: rgba(255, 125, 151, 0.2); color: #ff8ea4; }

/* ---------- التحليل العلوي: الحلقة وتوزيع العائلات ---------- */
.team-top-analysis { margin-block-start: var(--gap); }

.team-overview-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--gap);
  align-items: stretch;
}

.balance-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: clamp(24px, 3vw, 36px);
}

.team-ring { position: relative; width: 132px; aspect-ratio: 1; flex: none; }
.team-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.team-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.team-ring__track { stroke: rgba(255, 255, 255, 0.12); }
.team-ring__fill {
  stroke: var(--pink);
  stroke-dasharray: var(--v, 0) 100;
  transition: stroke-dasharray 1s var(--ease-ios);
}
.team-ring__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.team-ring__label b { font-size: 1.55rem; line-height: 1.1; }
.team-ring__label small { font-size: 0.75rem; color: var(--on-dark-muted); }

.balance-info { display: grid; gap: 10px; }
.balance-info .chip { width: fit-content; }
.balance-title { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }

.families-card { display: grid; gap: 14px; align-content: center; }

.families-bar {
  display: flex;
  height: 22px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--track);
  gap: 3px;
}

.fam-seg {
  height: 100%;
  background: var(--group-color);
  transition: flex-grow 700ms var(--spring-smooth);
}

.families-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fam-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--card-2);
  font-size: 0.85rem;
}
.fam-stat__name { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.fam-stat__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--group-color); }

/* ---------- الأبعاد والوظائف ---------- */
.team-dims-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

.team-dim-card { display: grid; gap: 10px; }
.team-dim-card__poles {
  direction: ltr;
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 700;
}

.team-dim-bar {
  direction: ltr;
  display: flex;
  height: 14px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--track);
  gap: 2px;
}

.team-dim-bar__left { background: var(--dim-c, var(--pink)); height: 100%; transition: width 700ms var(--spring-smooth); }
.team-dim-bar__right { background: var(--dark); height: 100%; flex: 1; }
[data-theme="dark"] .team-dim-bar__right { background: rgba(255, 255, 255, 0.22); }

.team-fn-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

.team-fn-card { display: grid; gap: 10px; align-content: start; }
.team-fn-card.is-gap { border: 1.5px dashed color-mix(in srgb, var(--err) 45%, transparent); }
.team-fn-card.is-strong { background: var(--card-2); box-shadow: inset 0 0 0 2px var(--pink); }

.team-fn-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.team-fn-card__code { font-family: var(--font-latin); font-size: 1.3rem; font-weight: 800; }

.fn-meter { height: 8px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.fn-meter__fill { height: 100%; background: var(--ink); border-radius: inherit; transition: width 800ms var(--spring-smooth); }
.team-fn-card.is-strong .fn-meter__fill { background: var(--pink); }
.team-fn-card.is-gap .fn-meter__fill { background: var(--err); }
.team-fn-card__holders { font-size: 0.8rem; color: var(--muted); }

/* ---------- القوة والفجوات والعمليات ---------- */
.dual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.dual-title { font-size: 1.25rem; margin-block-end: 14px; }

.team-list { display: grid; gap: 12px; }
.team-list li {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.44);
}
.team-list b { font-size: 0.96rem; }
.team-list span { font-size: 0.86rem; color: rgba(17, 17, 17, 0.78); line-height: 1.55; }

.ops-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.ops-title { margin-block-start: 10px; }

/* ---------- الاستجابة والطباعة ---------- */
@media (max-width: 1080px) {
  .team-builder,
  .team-roster { grid-column: 1 / -1; }
  .team-overview-grid,
  .ops-grid { grid-template-columns: 1fr; }
  .team-fn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .add-member-grid { grid-template-columns: 1fr; }
  .team-dims-grid,
  .dual-grid { grid-template-columns: 1fr; }
  .balance-card { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
  .team-fn-grid,
  .families-legend { grid-template-columns: 1fr; }
}

@media print {
  body { background: #fff !important; color: #111 !important; }
  [data-shell="header"], [data-shell="footer"], .add-member-form, .team-toolbar, .team-save-actions, .member-del, #teamInviteBox { display: none !important; }
  .card { break-inside: avoid; border: 1px solid #ddd; }
  .reveal { opacity: 1 !important; transform: none !important; }
}