/* «الموظفون» (#/staff/<place>, the owner's design "V4 Staff"); owned by the staff page builder (docs/UI_V4.md).
   The design's cards (26 px radius, 20 px padding, 52 px ring avatar, 36 px Urbanist counts, quote on #262626),
   the dashed add card; the on/off switch, the edit button and «أسماء ذكرها العملاء» are built from the same parts.
   2026-10-17: «آخر ذكر» (.last-seen), the sort pill (.staff-sort, the reviews page's) and the folded notes. */

.staff-status {
  padding: 12px 16px; border-radius: var(--r-inner); background: var(--card); font-size: var(--fs-ui);
  line-height: 1.6; color: var(--soft-2);
}
.staff-status:empty { display: none; }
.staff-status.good { color: var(--good-text); }
.staff-status.bad { color: var(--bad-text); }
.staff-cards { display: flex; flex-direction: column; gap: var(--gap); }
.staff-intro { font-size: var(--fs-ui); line-height: 1.7; color: var(--muted); max-width: 640px; }
.staff-msg { margin: 0; font-size: var(--fs-meta); line-height: 1.6; color: var(--muted); }
.staff-msg:empty { display: none; }
.staff-msg.good { color: var(--good-text); }
.staff-msg.bad { color: var(--bad-text); }
.on-light .staff-msg.bad { color: var(--bad-ink); }

/* ---------- The owner's list (design grid: auto-fill, min 300 px, gap 10) ---------- */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--gap); }
.scard {
  border-radius: 26px; padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
  background: var(--card); color: var(--text); scroll-margin: 90px;
}
.scard.hl, .nrow.hl { outline: 2px solid var(--ac); outline-offset: 3px; }
/* the fills of the best (accent) and the problem (white) name: after .scard / .nrow, which set the dark fill */
.scard.tone-accent, .nrow.tone-accent { background: var(--ac); color: var(--ink); }
.scard.tone-white, .nrow.tone-white { background: var(--white); color: var(--ink); }
.scard-head { display: flex; align-items: center; gap: 12px; }
.scard-who {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none;
  border-radius: var(--r-inner);
}
a.scard-who:hover { color: inherit; }
a.scard-who:hover .scard-name > .ellipsis { text-decoration: underline; text-underline-offset: 5px; }
.scard-av { width: 52px; height: 52px; border-radius: 50%; flex: none; padding: 3px; background: var(--ac); }
.scard-av > span {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font-size: 18px;
  background: var(--card); color: var(--text);
}
.scard.best .scard-av { background: #000; }
.scard.best .scard-av > span { background: var(--ac); color: var(--ink); }
.scard.warn .scard-av { background: var(--bad); }
.scard.warn .scard-av > span { background: var(--white); color: var(--ink); }
.scard.off .scard-av { background: var(--raised); }
.scard-names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scard-name { font-size: 18px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.scard-name .ph { font-size: 14px; opacity: .55; flex: none; }
.scard-alts { font-size: var(--fs-small); display: flex; align-items: center; gap: 8px; min-width: 0; }
.scard-alts > .ellipsis { opacity: .65; }
.scard-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.scard-edit {
  width: 36px; height: 36px; border-radius: 50%; border: none; display: grid; place-items: center; flex: none;
  background: var(--track); color: inherit; transition: background var(--t-fast);
}
.scard-edit .ph { font-size: 15px; }
.scard-edit:hover { background: var(--raised); }
.scard.on-light .scard-edit { background: rgba(0, 0, 0, .08); }
.scard.on-light .scard-edit:hover { background: rgba(0, 0, 0, .14); }
.scard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.scard-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scard-stat .num { font-size: 36px; }
.scard-stat-l { font-size: var(--fs-small); opacity: .65; }
.scard.warn .scard-stat.bad .num { color: var(--bad-ink); }
.scard-mixed { font-size: var(--fs-small); opacity: .65; margin-top: -6px; }
.scard-quote {
  margin: 0; display: block; font-size: var(--fs-ui); line-height: 1.7; padding: 12px 14px; border-radius: var(--r-inner);
  background: var(--card-2); color: inherit; text-decoration: none; overflow-wrap: anywhere; text-align: start;
  transition: background var(--t-fast);
}
a.scard-quote:hover { color: inherit; background: var(--divider); }
.scard.on-light .scard-quote { background: rgba(0, 0, 0, .07); }
.scard.on-light a.scard-quote:hover { background: rgba(0, 0, 0, .12); }
.scard-none {
  font-size: var(--fs-meta); line-height: 1.6; opacity: .6; padding: 12px 14px; border-radius: var(--r-inner);
  border: 1px dashed currentColor;
}
.scard.off .scard-who { opacity: .55; }
/* English only (the Arabic is untouched): the longer words («No other spellings», «Last mentioned: 11 May», «Bring back»)
   do not fit beside the tools, so when the name column would drop under 200 px the tools move to their own row
   (at the end), and the other spellings wrap instead of being cut. */
:root[dir="ltr"] .scard-head { flex-wrap: wrap; }
:root[dir="ltr"] .scard-who { min-width: min(100%, 200px); }
:root[dir="ltr"] .scard-tools { margin-inline-start: auto; }
:root[dir="ltr"] .scard-alts { flex-wrap: wrap; row-gap: 4px; }
:root[dir="ltr"] .scard-alts > .ellipsis { white-space: normal; overflow-wrap: break-word; }

/* The on/off switch (in place of the design's ×). "On" moves the knob to the end side (--flip). */
.sw {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; min-width: 44px; padding: 0 2px; border: none;
  background: transparent; color: inherit; font-size: var(--fs-meta); flex: none;
}
.sw:disabled { opacity: .55; }
.sw-l { white-space: nowrap; color: var(--ac); }
.sw-track {
  position: relative; width: 46px; height: 28px; border-radius: var(--r-pill); background: var(--raised); flex: none;
  transition: background var(--t-tab) var(--ease);
}
.sw-knob {
  position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted);
  transition: transform var(--t-tab) var(--ease), background var(--t-tab) var(--ease);
}
.sw[aria-checked="true"] .sw-track { background: var(--ac); }
.sw[aria-checked="true"] .sw-knob { background: var(--ink); transform: translateX(calc(-18px * var(--flip))); }
.scard.on-light .sw-track { background: rgba(0, 0, 0, .16); }
.scard.on-light .sw[aria-checked="true"] .sw-track { background: #000; }
.scard.on-light .sw[aria-checked="true"] .sw-knob { background: var(--ac); }
.scard.warn .sw[aria-checked="true"] .sw-knob { background: var(--white); }

/* The design's dashed «أضف موظفاً» card */
.scard-add { gap: 12px; border: 1.5px dashed var(--raised); }
.scard-add-h { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.scard-add-ic {
  width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--ink);
  display: grid; place-items: center; flex: none;
}
.scard-add-ic .ph { font-size: 18px; }
.scard-add .input, .staff-form .input { width: 100%; min-width: 0; }
.scard-add-go { height: 48px; width: 100%; }

/* Edit sheet */
.staff-form { display: flex; flex-direction: column; gap: 12px; }
.staff-label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-meta); color: var(--muted); }
.staff-form .btn { height: 48px; }

/* ---------- «أسماء ذكرها العملاء» ---------- */
.staff-names .card-head { align-items: center; }
.staff-names .card-title-main .badge { font-size: var(--fs-small); }
.staff-names .period-btn { background: var(--card-2); }
.staff-names .period-menu { border: 1px solid var(--raised); }
.staff-names .fchip[aria-pressed="false"] { background: var(--card-2); }
.staff-names-body { display: flex; flex-direction: column; gap: 12px; }
.staff-names-body .empty { background: var(--card-2); }
.staff-more { align-self: center; }
.nlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--gap); }
.nrow {
  border-radius: var(--r-tile-sm); padding: 14px 16px; background: var(--card-2); color: var(--text);
  display: flex; flex-direction: column; gap: 10px; min-width: 0; scroll-margin: 90px;
}
.nrow-main { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; min-width: 0; }
.nrow-main:hover { color: inherit; }
.nrow-main:hover .nrow-name > .ellipsis { text-decoration: underline; text-underline-offset: 5px; }
.nrow-name { font-size: var(--fs-body); display: flex; align-items: center; gap: 6px; min-width: 0; }
.nrow-name .ph { font-size: 13px; opacity: .55; flex: none; }
.nrow-alts { font-size: var(--fs-small); opacity: .65; }
.nrow-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nrow-m { font-size: var(--fs-meta); margin-inline-end: 4px; }
.nrow-m .n { font-size: 18px; font-weight: 500; }
.nrow .tag.zero { opacity: .45; }
.nrow-quote {
  font-size: var(--fs-meta); line-height: 1.7; padding: 10px 12px; border-radius: var(--r-inner); background: var(--card);
  color: inherit; text-decoration: none; overflow-wrap: anywhere; text-align: start; transition: background var(--t-fast);
}
a.nrow-quote:hover { color: inherit; background: var(--track); }
.nrow.on-light .nrow-quote { background: rgba(0, 0, 0, .07); }
.nrow.on-light a.nrow-quote:hover { background: rgba(0, 0, 0, .12); }
.nrow .split.thin { background: rgba(255, 255, 255, .06); border-radius: var(--r-pill); }
.nrow.on-light .split.thin { background: rgba(0, 0, 0, .08); }
.nrow-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nrow-action { display: inline-flex; }
.nrow-action .badge .ph { font-size: 13px; }
.nrow.tone-white .badge.good { background: #000; color: var(--white); }
.nrow.tone-accent .badge.good { background: #000; color: var(--ac); }

/* «آخر ذكر» under every name (cards and rows): small and muted; older than 60 days calmer still + a neutral badge */
.last-seen {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font-size: var(--fs-small);
  line-height: 1.6; opacity: .8;
}
.last-seen.old { opacity: .6; }
.last-seen .badge { font-size: var(--fs-small); line-height: 1.4; }
.scard-names .last-seen { margin-top: 2px; }

/* The chips row + the sort pill (the reviews page's sort: the period menu's look) */
.staff-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.staff-bar > .fchips, .staff-bar > .hscroll { flex: 1 1 auto; min-width: 0; }
.staff-sort-box { margin-inline-start: auto; }
.staff-sort { height: 42px; }
.staff-sort .ph { font-size: 16px; }

/* «مراجعات متقاربة»: 2+ notes fold into one card that opens / closes on tap; «تجاهل» hides one on this device */
.staff-notes { display: flex; flex-direction: column; gap: 8px; }
.staff-notes-list { display: flex; flex-direction: column; gap: 8px; }
.staff-notes-list[hidden] { display: none; }
.staff-notes-sum {
  width: 100%; border: none; font: inherit; text-align: start; cursor: pointer; transition: background var(--t-fast);
}
.staff-notes-sum:hover { background: var(--divider); }
.staff-notes-sum .alert-h { align-items: center; }
.staff-notes-sum-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.staff-notes-caret {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--track); color: var(--text);
}
.staff-notes-caret .ph { font-size: 15px; }
.staff-unhide { align-self: flex-start; padding: 0 10px; }
.staff-ignore { padding: 0 12px; }

/* ---------- Phone (design "V4 Staff" at 390: one column; hit targets 44 px) ---------- */
@media (max-width: 700px) {
  /* the period chip row takes the full line and scrolls inside it (at 360 px its chips are wider than the page) */
  #page[data-page="staff"] .page-head > .period-switch { flex: 1 1 100%; min-width: 0; }
  .scard { border-radius: var(--r-tile); padding: 16px 18px; gap: 12px; }
  .scard-edit { width: 44px; height: 44px; }
  .scard-stat .num { font-size: 32px; }
  .scard-mixed { margin-top: -4px; }
  .staff-names .fchip { height: 44px; }
  .staff-names .card-head { align-items: flex-start; }
  .nrow { padding: 14px; }
  .nrow-main { min-height: 44px; }
  .nrow-quote { min-height: 44px; }
  .staff-more { align-self: stretch; }
  .staff-bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  .staff-sort-box { margin: 0; }
  .staff-sort { height: 44px; width: 100%; justify-content: center; font-size: var(--fs-meta); }
  .staff-sort-box .period-menu { inset-inline-end: auto; inset-inline-start: 0; }
  .staff-notes-caret { width: 44px; height: 44px; }
  .staff-unhide { min-height: 44px; }
}