/* PETRA KSA AI Assistant - TEAM ACTIVITY (web/static/people.js; owner 2026-10-01: "فيجواليزيشن احترافي مرتب تبين لك كل
   التفاصيل كيف الاكتيفيتي تاعت الأشخاص على البورتال"). His tokens only. The wide pieces (the charts, the timeline, the
   month grid) scroll inside their own box on a phone - the page itself never scrolls sideways. */
.pp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px;margin-bottom:12px}
.pp-nav{display:inline-flex;align-items:center;gap:6px}
.pp-nav b{min-width:160px;text-align:center;font-size:14px;font-weight:600;color:var(--ink)}
.pp-nav .btn{font-size:16px;line-height:1;padding-inline:10px}
.pp-date{display:inline-flex;align-items:center;gap:6px;color:var(--ink-3)}
.pp-date .ic{width:16px;height:16px;flex:0 0 16px}
.pp-date .inp{width:auto;min-width:0;padding-block:4px}
.pp-at{margin-inline-start:auto;font-size:12px}
.pp-note{margin:0 0 12px}
.kpis.pp-kpis{grid-template-columns:repeat(5,minmax(0,1fr));margin:0 0 12px}
.pp-kpis .kpi-n .pp-of{font-size:.55em;font-weight:500;color:var(--ink-3)}
.pp-kpis .kpi-x{display:block;margin-top:4px;font-size:12px;color:var(--ink-3)}
.pp-chart,.pp-tl,.pp-heat,.pp-people{margin-bottom:12px}
.pp-chart .pad,.pp-tl .pad,.pp-heat .pad{padding-top:8px}
.pp-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 8px;font-size:12px;color:var(--ink-2)}
.pp-legend span{display:inline-flex;align-items:center;gap:6px}
.pp-legend .lg{display:inline-block;flex:0 0 12px;width:12px;height:12px;border-radius:3px}
.pp-scroll{overflow-x:auto;overscroll-behavior-x:contain}
.pp-svg{display:block;width:100%;min-width:640px;height:auto}
.pp-g{stroke:var(--rule);stroke-width:1}
.pp-ax{font-family:var(--sans);font-size:11px;fill:var(--ink-3)}
.pp-axl{fill:var(--ok)}
rect.pp-cact,.lg.pp-cact{fill:var(--brand);background:var(--brand)}
rect.pp-cidle,.lg.pp-cidle{fill:color-mix(in srgb,var(--brand) 26%,transparent);background:color-mix(in srgb,var(--brand) 26%,transparent)}
.pp-line{fill:none;stroke:var(--ok);stroke-width:2;stroke-linejoin:round}
.lg.pp-line{height:3px;border-radius:2px;background:var(--ok)}
.pp-pt{fill:var(--ok);stroke:var(--surface);stroke-width:1.5}
.pp-hit{fill:transparent}
.pp-col:hover .pp-hit{fill:var(--brand-soft)}
.pp-col.fut .pp-hit{fill:var(--surface-2)}
.pp-nowx{stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:4 3}
/* the day's timeline: a name column and a track a person */
.pp-tlg{min-width:640px}
.pp-tr{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:center;gap:0 10px;min-height:36px;border-bottom:1px solid var(--rule)}
.pp-tlg>.pp-tr:last-child{border-bottom:0}
.pp-axis{min-height:26px;border-bottom:1px solid var(--rule-2)}
.pp-who{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 0;border:0;background:none;color:var(--ink);font:inherit;font-size:13px;text-align:start;cursor:pointer}
span.pp-who{cursor:default}
.pp-who b{min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-who small{margin-inline-start:auto;padding-inline-start:6px;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
button.pp-who:hover b,button.pp-who:focus-visible b{color:var(--brand-ink)}
.pp-track{position:relative;height:22px;border-radius:6px;background:var(--surface-2)}
.pp-ticks{height:18px;background:none}
.pp-ticks span{position:absolute;top:1px;transform:translateX(-50%);font-size:11px;color:var(--ink-3)}
.pp-ticks span:first-child{transform:none}
.pp-ticks span:last-child{transform:translateX(-100%)}   /* the end hours stay inside the track: no sideways scroll */
.pp-sp{position:absolute;top:3px;bottom:3px;min-width:3px;border-radius:4px;background:color-mix(in srgb,var(--brand) var(--p),var(--surface-2))}
.pp-mk{position:absolute;top:-3px;bottom:-3px;width:3px;margin-inline-start:-1px;border-radius:2px;background:var(--ink-3)}
.pp-mk.k-request,.lg.k-request{background:var(--red)}
.pp-mk.k-file,.lg.k-file{background:var(--ok)}
.pp-mk.k-assistant,.lg.k-assistant{background:var(--warn)}
.lg.pp-mkl{width:4px;flex-basis:4px;height:14px;border-radius:2px}
.lg.k-other,.pp-mk.k-other,.pp-mk.k-session{background:var(--ink-3)}
.pp-nowl{position:absolute;top:-5px;bottom:-5px;width:0;border-inline-start:2px dashed var(--ink-2);pointer-events:none}
.pp-off{margin:10px 0 0;font-size:12.5px}
/* a week / a month: a cell a person a day */
.pp-hg{display:grid;grid-template-columns:190px repeat(var(--n),minmax(30px,1fr)) 54px;min-width:calc(244px + var(--n) * 30px);align-items:center}
.pp-hr{display:contents}
.pp-hr.off .pp-who b{color:var(--ink-3);font-weight:500}
.pp-hd{display:flex;flex-direction:column;align-items:center;padding:2px 0 6px;font-size:12px;color:var(--ink-2)}
.pp-hd small{font-size:10px;color:var(--ink-3)}
.pp-hd.we{color:var(--ink-3)}
.pp-hd.td{color:var(--brand-ink);font-weight:700}
.pp-hd.fut{opacity:.5}
.pp-cell{margin:2px;min-width:0;min-height:30px;padding:0;border:0;border-radius:6px;background:var(--surface-2);color:var(--ink-2);font:inherit;font-size:11px;cursor:pointer}
.pp-cell.on{background:color-mix(in srgb,var(--brand) var(--p),var(--surface-2));color:var(--ink)}
.pp-cell.hi{color:var(--on-brand);font-weight:600}
.pp-cell:hover:not(:disabled),.pp-cell:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.pp-cell:disabled{cursor:default;background:repeating-linear-gradient(135deg,var(--surface-2) 0 4px,transparent 4px 8px)}
.lg.pp-hl{background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 18%,var(--surface-2)),var(--brand))}
.pp-sum{display:flex;align-items:center;justify-content:flex-end;padding-inline-end:4px;font-size:12px;font-weight:600;color:var(--ink)}
.pp-hh .pp-sum{font-weight:500;color:var(--ink-3)}
/* everyone */
.pp-people .pp-row{cursor:pointer}
.pp-people .pp-row:hover td,.pp-people .pp-row:focus-visible td,.pp-people .pp-row.open td{background:var(--brand-soft)}
.pp-people .pp-row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.pp-people .pp-row.off td{color:var(--ink-3)}
.pp-people .pp-row .ppl-dot{display:inline-block;margin-inline-end:8px;vertical-align:middle}
.pp-people .mx{min-width:680px}                       /* a phone scrolls the table in its own box, as the charts */
.pp-people .mx th,.pp-people .mx td.num{white-space:nowrap}
.pp-people .pp-grp td{padding-block:6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2)}
.pp-people .pp-det>td{padding:4px 8px 12px;background:var(--surface)}
.pp-detail{max-width:920px}
.pp-wait{margin:8px 0}
.pp-days{display:flex;align-items:flex-end;gap:4px;padding:6px 2px;overflow-x:auto}
.pp-dbar{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:24px;padding:2px 0;border:0;border-radius:6px;background:none;color:var(--ink-2);font:inherit;cursor:pointer}
.pp-dbar:hover:not(:disabled),.pp-dbar:focus-visible{background:var(--brand-soft)}
.pp-dbt{position:relative;display:block;width:14px;height:72px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.pp-dbt i,.pp-dbt b{position:absolute;inset-inline:0;bottom:0}
.pp-dbt i{background:color-mix(in srgb,var(--brand) 26%,transparent)}
.pp-dbt b{background:var(--brand)}
.pp-dbar small{font-size:10px;line-height:1.2;text-align:center}
.pp-dbar:disabled{opacity:.4;cursor:default}
@media (max-width:1100px){.kpis.pp-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .kpis.pp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-bar{padding:10px 12px}
  .pp-nav{flex:1 1 100%;justify-content:space-between}
  .pp-nav b{min-width:0}
  .pp-at{margin-inline-start:0}
  .pp-tr{grid-template-columns:128px minmax(0,1fr)}
  .pp-tr .pp-who small{display:none}                     /* the name has the column; the table below has the time */
  .pp-people .mx th:first-child{width:200px}             /* who and their active time in view; a swipe for the rest */
  .pp-tlg{min-width:560px}
  .pp-hg{grid-template-columns:128px repeat(var(--n),minmax(28px,1fr)) 46px;min-width:calc(174px + var(--n) * 28px)}
}
@media (max-width:480px){.pp-kpis .kpi-n{font-size:18px}}
@media (prefers-reduced-motion:no-preference){
  .pp-sp,.pp-cell,.pp-dbar{transition:filter .15s var(--e),background-color .15s var(--e)}
  .pp-sp:hover{filter:brightness(1.15)}
}