/* ════════════════════════════════════════════════════════════════════════════
   تقييم الفرق — `#/team-eval` (team-eval.js)
   كل الكلاسات ببادئة `te-` (اتعمل `grep` قبلها: مافيش ولا كلاس بالبادئة دي في
   أي ملف تاني — درس «الاسم متحجوز»).

   🎨 **ألوان الرسوم** اتفحصت بـ`validate_palette` (فرق الألوان لعمى الألوان ≥ ٨
      والتباين ≥ ٣:١) في الوضعين:
      الفترتين: دهبي = الفترة الأقدم · أخضر = الأحدث.
      ملكية الخسارة: أول ٣ خانات من البالِت المرجعية + أصفر، و«غير مصنّف» رمادي
      محايد (مش لون فئة). والنص عمره ما بيلبس لون السلسلة — الألوان على العلامات بس.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --te-p1: #b8862a; --te-p2: #0a7a5a;
  --te-own-emp: #2a78d6; --te-own-mkt: #eb6834; --te-own-cli: #1baf7a; --te-own-co: #eda100;
  --te-good: #0ca30c; --te-bad: #d03b3b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --te-p1: #b88a30; --te-p2: #2fa585;
    --te-own-emp: #3987e5; --te-own-mkt: #d95926; --te-own-cli: #199e70; --te-own-co: #c98500;
  }
}
:root[data-theme="dark"] {
  --te-p1: #b88a30; --te-p2: #2fa585;
  --te-own-emp: #3987e5; --te-own-mkt: #d95926; --te-own-cli: #199e70; --te-own-co: #c98500;
}

.te-page { min-width: 0; }

/* ── المرشحات والتابات ── */
.te-filters {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--shadow-sm);
}
.te-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
.te-f > span { font-size: 12px; color: var(--muted); font-weight: 600; }
.te-f select {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 10px; min-height: 38px; max-width: 100%; font: inherit; color: inherit;
}
.te-f select:disabled { opacity: .6; cursor: not-allowed; }
.te-seg {
  display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 2px; padding: 3px;
  border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line);
}
.te-seg button {
  border: 0; background: transparent; padding: 6px 12px; border-radius: 9px; cursor: pointer;
  color: var(--muted); font: inherit; font-weight: 600; font-size: 13px;
}
.te-seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.te-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; overflow-x: auto; }
.te-tabs button {
  border: 0; background: transparent; padding: 10px 14px; cursor: pointer; color: var(--muted);
  font: inherit; font-weight: 600; border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.te-tabs button.on { color: var(--primary); border-bottom-color: var(--primary); }
.te-note { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.te-note.te-warn { color: var(--warn); background: var(--warn-tint); padding: 8px 12px; border-radius: var(--radius-xs); }
.te-period { font-size: 12.5px; }

/* ── البطاقات ── */
.te-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 16px 18px; margin-bottom: 14px; min-width: 0;
}
.te-card h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 17px; }
.te-card h4 { margin: 0; font-family: var(--font-display); font-size: 15px; }
.te-sub { color: var(--muted); font-size: 12.5px; margin: 0 0 10px; }
.te-head { display: flex; justify-content: space-between; gap: 8px 14px; align-items: flex-start; flex-wrap: wrap; }
.te-empty { color: var(--muted); text-align: center; padding: 24px 10px; }
.te-foot { color: var(--faint); font-size: 12px; margin: 10px 0 0; }
.te-grid2 { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.te-grid3 { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.te-grid2 > .te-card, .te-grid3 > .te-card { margin-bottom: 0; }
.te-grid2 { margin-bottom: 14px; }

.te-kpis { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
.te-kpis .te-card { margin-bottom: 0; }
.te-kpi-lab { color: var(--muted); font-size: 13px; font-weight: 600; }
.te-kpi-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: 6px; }
.te-kpi-row b { font-family: var(--font-display); font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.te-kpi-prev { color: var(--muted); font-size: 12.5px; margin-top: 4px; }

.te-delta { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 99px; white-space: nowrap; }
.te-delta.up { background: var(--ok-tint); color: var(--ok); }
.te-delta.down { background: var(--danger-tint); color: var(--danger); }
.te-delta.flat { background: var(--bg-2); color: var(--muted); }
.te-arrow { font-size: 10.5px; margin-inline-start: 3px; }
.te-arrow.good { color: var(--ok); }
.te-arrow.bad { color: var(--danger); }
.te-chip {
  display: inline-flex; align-items: center; font-size: 11.5px; padding: 1px 8px; border-radius: 99px;
  background: var(--bg-2); color: var(--muted); font-weight: 600; white-space: nowrap;
}
.te-chip.info { background: var(--info-tint); color: var(--info); }

/* ── الجداول (بتتسحب جوّه حاويتها — القاعدة ١٠) ── */
.te-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.te-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.te-table th, .te-table td { padding: 8px 10px; text-align: start; border-bottom: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.te-table thead th { background: var(--card-2); color: var(--muted); font-weight: 600; font-size: 12px; }
.te-table tr.te-grp th { text-align: center; color: var(--ink); border-inline-start: 1px solid var(--line); }
.te-table .pa { border-inline-start: 1px solid var(--line); }
.te-table tbody tr:last-child td { border-bottom: 0; }
.te-table tbody tr:hover td { background: var(--card-2); }
.te-name { font-weight: 700; position: sticky; inset-inline-start: 0; background: var(--card); z-index: 1; }
.te-table tbody tr:hover td.te-name { background: var(--card-2); }
.te-name small { color: var(--muted); font-weight: 500; }
.te-p1v { color: var(--muted); }
.te-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--primary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.te-pill { display: inline-block; min-width: 40px; text-align: center; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: var(--primary-tint); color: var(--primary); }
tr.te-leader td { background: var(--accent-tint); }
.te-idle { font-weight: 800; color: var(--danger); }

/* ── التنبيهات والمش مربوطين (291) ── */
.te-alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.te-alerts li { padding: 7px 10px; border-radius: var(--radius-xs); background: var(--card-2); border-inline-start: 3px solid var(--line-strong); font-size: 13px; }
.te-alerts li.good { border-inline-start-color: var(--ok); }
.te-alerts li.bad { border-inline-start-color: var(--danger); }
.te-details { margin: -6px 0 12px; font-size: 13px; color: var(--muted); }
.te-details summary { cursor: pointer; color: var(--primary); font-weight: 600; }
.te-details ul { margin: 6px 0 0; padding-inline-start: 20px; }
.te-details li { margin-bottom: 2px; }

/* ── الرسوم ── */
.te-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.te-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }
.te-legend i.p1, .te-bar-trk i.p1 { background: var(--te-p1); }
.te-legend i.p2, .te-bar-trk i.p2 { background: var(--te-p2); }
.te-bars { display: grid; gap: 8px; margin-top: 10px; }
.te-bar-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 56px; gap: 8px; align-items: center; }
.te-bar-lab { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.te-bar-trk { display: grid; gap: 2px; }
.te-bar-trk i { display: block; height: 9px; border-radius: 0 4px 4px 0; min-width: 0; }
[dir="rtl"] .te-bar-trk i { border-radius: 4px 0 0 4px; }
.te-bar-val { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

.te-stack-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: center; margin-top: 10px; }
.te-stack { display: flex; gap: 2px; height: 18px; border-radius: 5px; overflow: hidden; background: var(--bg-2); }
.te-stack i { display: block; height: 100%; }
.own-emp { background: var(--te-own-emp); }
.own-mkt { background: var(--te-own-mkt); }
.own-cli { background: var(--te-own-cli); }
.own-co { background: var(--te-own-co); }
.own-other { background: var(--faint); }

/* ── بطاقة الفريق ── */
.te-teamhead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.te-ring { position: relative; width: 124px; height: 124px; }
.te-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.te-ring circle { fill: none; stroke-width: 10; }
.te-ring .bg { stroke: var(--bg-2); }
.te-ring .fg { stroke: var(--te-p2); stroke-linecap: round; }
.te-ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.te-ring-in b { font-family: var(--font-display); font-size: 34px; line-height: 1; }
.te-ring-in span { font-size: 12px; color: var(--muted); }
.te-title-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.te-rank { font-weight: 700; color: var(--primary); background: var(--primary-tint); padding: 2px 10px; border-radius: 99px; font-size: 12.5px; }
.te-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 14px; }
.te-meta div { display: flex; flex-direction: column; }
.te-meta span { font-size: 12px; color: var(--muted); }

.te-axes { display: grid; gap: 10px; }
.te-axis { display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.te-axis-nm { font-weight: 600; font-size: 13.5px; }
.te-axis-nm small { display: block; color: var(--faint); font-weight: 500; font-size: 11.5px; }
.te-trk { height: 10px; border-radius: 99px; background: var(--bg-2); overflow: hidden; position: relative; }
.te-trk i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 99px; background: var(--faint); }
.te-axis.strong .te-trk i { background: var(--te-good); }
.te-axis.weak .te-trk i { background: var(--te-bad); }
.te-axis.off .te-trk { background: repeating-linear-gradient(45deg, var(--bg-2) 0 6px, var(--line) 6px 8px); }
.te-axis-sc { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.te-tag { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; background: var(--bg-2); color: var(--muted); }
.te-tag.strong { background: var(--ok-tint); color: var(--ok); }
.te-tag.weak { background: var(--danger-tint); color: var(--danger); }
.te-tag.off { background: var(--warn-tint); color: var(--warn); }

.te-report p { margin: 0 0 10px; }
.te-report h4 { margin: 12px 0 6px; }
.te-report ol { margin: 0; padding-inline-start: 22px; }
.te-report li { margin-bottom: 6px; }
.te-money { background: var(--card-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 6px; }
.te-money-amt { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--accent); }

/* ── الاتجاه ── */
.te-trend .te-title-row { justify-content: space-between; }
.te-trend-lab { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 99px; }
.te-trend-lab.up { background: var(--ok-tint); color: var(--ok); }
.te-trend-lab.down { background: var(--danger-tint); color: var(--danger); }
.te-trend-lab.flat { background: var(--bg-2); color: var(--muted); }
.te-spark { width: 100%; height: auto; display: block; }
.te-spark .grid { stroke: var(--line); stroke-width: 1; }
.te-spark .ln { fill: none; stroke: var(--te-p2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.te-spark .pt { fill: var(--te-p2); stroke: var(--card); stroke-width: 2; }
.te-spark .lab { fill: var(--muted); font-size: 11px; font-family: inherit; }
.te-mini { width: 100%; font-size: 12px; border-collapse: collapse; margin-top: 4px; }
.te-mini th, .te-mini td { padding: 3px 4px; text-align: start; font-variant-numeric: tabular-nums; }
.te-mini th { color: var(--faint); font-weight: 600; }

/* ── الجوال (القاعدة ١٠: مافيش طفح أفقي على مستوى الصفحة) ── */
@media (max-width: 1100px) {
  .te-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .te-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .te-grid2, .te-grid3 { grid-template-columns: minmax(0, 1fr); }
  .te-teamhead { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .te-axis { grid-template-columns: minmax(0, 1fr) auto; }
  .te-axis .te-trk { grid-column: 1 / -1; order: 3; }
  .te-axis .te-tag { order: 4; justify-self: start; }
}
@media (max-width: 480px) {
  .te-kpis { grid-template-columns: minmax(0, 1fr); }
  .te-bar-row { grid-template-columns: 72px minmax(0, 1fr) 48px; }
}