/* ─────────────────────────────────────────────────────────────────────────────
   Groups mode (private-practice-owner) — Phase 1 view styling.
   Self-contained: every selector is scoped under #groups-game with pg- prefixed
   ids, so it can't touch the base game's calendar. Reuses the shared theme vars
   and the global .appt / .card / .bar classes for visual consistency.
   ───────────────────────────────────────────────────────────────────────────── */

#groups-game {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 14px;
  background:
    linear-gradient(180deg, var(--wall-top) 0%, var(--wall-mid) 55%, var(--wall-bot) 100%);
}
#groups-game.show { display: flex; }

/* ---- Top HUD: week · quota · score · bank. The quota + score blocks mirror
   the solo HUD (#hud-quota / #hud-score) so they read identically. ---- */
#pg-hud {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
  background: linear-gradient(180deg, var(--wood-light), var(--wood));
  border: 3px solid var(--wood-dark);
  border-radius: 10px;
  box-shadow: 0 4px 0 var(--outline), inset 0 2px 0 rgba(255, 233, 179, 0.3);
  padding: 8px 16px;
  color: var(--ink-on-wood);
}
#pg-hud .pg-week {
  font-family: var(--font-pixel);
  font-size: 13px;
  text-shadow: var(--px-text);
  white-space: nowrap;
}
#pg-hud .pg-bank {
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--gold-light);
  text-shadow: var(--px-text);
  white-space: nowrap;
  margin-left: auto;
}
#pg-hud .pg-bank.debt { color: #ff8c6b; }

/* Weekly Quota — matches solo's #hud-quota / #quota-bar. */
#pg-hud-quota { flex: 1; max-width: 400px; }
#pg-quota-bar {
  position: relative;
  height: 24px;
  background: #4a2a10;
  border: 3px solid var(--outline);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.4);
}
#pg-quota-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 50%, #e08a12 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45);
  transition: width 0.25s;
}
#pg-quota-fill.met { background: linear-gradient(180deg, var(--green-bright) 0%, var(--green) 55%, #3d7d18 100%); }
#pg-quota-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-pixel);
  font-size: 9px;
  color: #fff;
  text-shadow: 1px 1px 0 var(--outline), -1px -1px 0 var(--outline), 1px -1px 0 var(--outline), -1px 1px 0 var(--outline);
}

/* Score — matches solo's #hud-score / #score / #combo. */
#pg-hud-score {
  text-align: center;
  min-width: 120px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#pg-score {
  font-family: var(--font-pixel);
  font-size: 18px;
  color: #fff;
  text-shadow: 2px 2px 0 var(--outline);
  font-variant-numeric: tabular-nums;
}
#pg-combo {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--gold-light);
  text-shadow: 1px 1px 0 var(--outline);
}

/* ---- Clinician tab strip — real folder tabs sitting on the calendar ---- */
#pg-clins {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  padding-left: 6px;
  /* Overlap the calendar's top border by its full width so the active tab's
     body reads as continuous with the calendar panel below. */
  margin-bottom: -3px;
  position: relative;
  z-index: 2;
}
/* Practice-wide reputation — sits to the right of all the clinician tabs (not in
   a tab), pushed there by margin-left:auto, compact and vertically centered in
   the row. Mirrors the look of the solo ⭐ Rep meter. */
#pg-rep {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 3px solid var(--wood-dark);
  border-radius: 9px;
  background: linear-gradient(180deg, var(--paper-dark), var(--wood-light));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
}
#pg-rep .pg-rep-ic { font-size: 14px; line-height: 1; flex: 0 0 auto; }
#pg-rep .pg-rep-bar {
  width: 64px;
  height: 9px;
  border: 2px solid var(--outline);
  border-radius: 5px;
  background: rgba(46, 21, 5, 0.3);
  overflow: hidden;
  flex: 0 0 auto;
}
#pg-rep .pg-rep-fill {
  height: 100%;
  width: 50%;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  transition: width 0.25s;
}
#pg-rep.low .pg-rep-fill { background: linear-gradient(180deg, #ff8c6b, var(--red)); }
#pg-rep .pg-rep-val {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--ink);
  min-width: 16px;
  text-align: right;
}
.pg-clin-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Share the calendar width so 1–3 tabs always sit in a single row on top. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 210px;
  padding: 6px 10px 6px 8px;
  border: 3px solid var(--wood-dark);
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, var(--paper-dark), var(--wood-light));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: filter 0.08s, margin-top 0.08s;
  color: var(--ink);
  font-family: var(--font);
  position: relative;
}
/* Inactive tabs sit a touch lower & dimmer, so the active one stands taller —
   tucked "behind" the calendar's lip like a real tab. */
.pg-clin-tab:not(.active) { margin-top: 4px; filter: brightness(0.95); }
.pg-clin-tab:hover { filter: brightness(1.06); }
.pg-clin-tab.active {
  background: var(--paper-light);                 /* matches the calendar body */
  border-bottom-color: var(--paper-light);        /* dissolve the seam into the panel */
  box-shadow: 0 -3px 0 var(--gold), inset 0 2px 0 rgba(255, 255, 255, 0.5);
  z-index: 3;
}
.pg-clin-tab.burned { filter: grayscale(0.5) brightness(0.9); }
.pg-clin-tab .pg-clin-face { font-size: 22px; line-height: 1; }
.pg-clin-tab .pg-clin-info { flex: 1; min-width: 0; }
.pg-clin-tab .pg-clin-name {
  font-family: var(--font-pixel);
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.pg-clin-tab .pg-meter-row { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.pg-clin-tab .pg-meter-row:last-child { margin-bottom: 0; }
.pg-clin-tab .pg-m-ic { font-size: 10px; line-height: 1; width: 12px; text-align: center; flex: 0 0 auto; }
.pg-clin-tab .pg-emeter,
.pg-clin-tab .pg-nmeter {
  flex: 1;
  height: 9px;
  border: 2px solid var(--outline);
  border-radius: 5px;
  background: rgba(46, 21, 5, 0.3);
  overflow: hidden;
}
.pg-clin-tab .pg-efill { height: 100%; width: 100%; transition: width 0.2s, background 0.2s; }
.pg-clin-tab .pg-efill.high { background: linear-gradient(180deg, var(--green-bright), var(--green)); }
.pg-clin-tab .pg-efill.mid  { background: linear-gradient(180deg, var(--gold-light), var(--gold)); }
.pg-clin-tab .pg-efill.low  { background: linear-gradient(180deg, #ff8c6b, var(--red)); }
/* 📝 notes backlog fills toward full as paperwork piles up — Admin drains it. */
.pg-clin-tab .pg-nfill { height: 100%; width: 0%; transition: width 0.2s, background 0.2s; background: linear-gradient(180deg, #8fa0c8, #5a6ea8); }
.pg-clin-tab .pg-nfill.heavy { background: linear-gradient(180deg, #c8743a, #9a4a16); }
.pg-clin-tab .pg-clin-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.pg-clin-tab .pg-clin-rev { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
/* 🤖 per-clinician AI badge — a static marker shown when a clinician is on the AI
   Co-Pilot. The toggle itself lives on the right-column tool rail (#pg-tool-ai),
   acting on the active clinician, so the tab only needs to show the state. */
.pg-clin-tab .pg-ai-badge {
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--sky-light), var(--sky));
  box-shadow: 0 0 0 2px rgba(63, 155, 216, 0.4);
}
/* AI-engaged clinician: a cool cyan accent on the tab */
.pg-clin-tab.ai.active { box-shadow: 0 -3px 0 var(--sky), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
/* AI-placed blocks get a robot marker so you can see (and override) them */
.pg-day-col .pg-blocks .appt.ai::before {
  content: "🤖";
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: 10px;
  filter: drop-shadow(0 1px 0 rgba(46, 21, 5, 0.5));
}

/* ---- Main row: [tabs + calendar] | side ---- */
#pg-main { display: flex; gap: 12px; flex: 1; min-height: 0; }

/* The tabs and the calendar share a column so the tabs attach to the calendar
   only — the side panel stays full-height beside them. */
#pg-cal-wrap {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#pg-calendar {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--paper-light);
  border: 3px solid var(--wood-dark);
  border-radius: 0 8px 8px 8px;
  padding: 8px 10px 10px;
  overflow: hidden;
}
#pg-head { display: flex; flex: 0 0 auto; }
#pg-head .pg-gutter-head { width: 44px; flex: 0 0 auto; }
#pg-day-heads { display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; }
.pg-day-head {
  position: relative;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 4px 0 6px;
}
.pg-day-head.weekend { color: #b8895a; }
.pg-day-head.today {
  color: var(--wood-dark);
  background: linear-gradient(180deg, var(--gold) 0%, rgba(255, 196, 0, 0.2) 100%);
  border-radius: 5px 5px 0 0;
}
.pg-day-head.past { opacity: 0.4; }

/* Day off / out-of-office affordance + state — mirrors solo. A hover tooltip
   below each future day's header advertises the whole-cell click target. */
.pg-day-off-pill {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 3px;
  padding: 3px 7px;
  font-family: var(--font-pixel);
  font-size: 7px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #fff;
  background: var(--green);
  border: 2px solid rgba(46, 21, 5, 0.4);
  border-radius: 6px;
  box-shadow: 0 3px 0 rgba(46, 21, 5, 0.3);
  opacity: 0;
  transform: translate(-50%, -3px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
  z-index: 20;
}
.pg-day-head:hover .pg-day-off-pill { opacity: 1; transform: translate(-50%, 0); }
.pg-day-head.today .pg-day-off-pill,
.pg-day-head.past .pg-day-off-pill { display: none; }
.pg-day-head.day-off {
  color: var(--mint);
  background: linear-gradient(180deg, rgba(46, 158, 88, 0.25) 0%, rgba(46, 158, 88, 0.08) 100%);
  border-radius: 5px 5px 0 0;
}
.pg-day-head.day-off .pg-day-off-pill { display: none; }
.pg-day-col.day-off::after {
  content: "🌴 OFF";
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
  font-family: var(--font-pixel);
  font-size: 7px;
  letter-spacing: 0.06em;
  color: var(--mint);
  pointer-events: none;
  background:
    repeating-linear-gradient(45deg,
      rgba(46, 158, 88, 0.10) 0, rgba(46, 158, 88, 0.10) 7px,
      rgba(46, 158, 88, 0.18) 7px, rgba(46, 158, 88, 0.18) 14px);
}

#pg-body { display: flex; flex: 1; min-height: 0; }
#pg-gutter { width: 44px; flex: 0 0 auto; position: relative; }
#pg-gutter .pg-time {
  position: absolute;
  right: 6px;
  font-size: 12px;
  color: var(--ink-soft);
  transform: translateY(-50%);
}
#pg-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex: 1;
  position: relative;
  border: 3px solid var(--wood-dark);
  border-radius: 4px;
  background: var(--paper-light);
  overflow: hidden;
}
.pg-day-col {
  position: relative;
  border-right: 2px solid rgba(91, 43, 10, 0.18);
  background:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(100% / 11 - 2px),
      rgba(91, 43, 10, 0.14) calc(100% / 11 - 2px),
      rgba(91, 43, 10, 0.14) calc(100% / 11));
}
.pg-day-col:last-child { border-right: none; }
.pg-day-col.weekend { background-color: rgba(232, 150, 63, 0.12); }
.pg-day-col.past { filter: sepia(0.4) contrast(0.9) brightness(0.82); }
.pg-day-col.today { box-shadow: inset 0 0 0 3px rgba(255, 196, 0, 0.6); }
.pg-day-col .pg-blocks { position: absolute; inset: 0; }
/* Mirror solo: the calendar uses the default cursor, and only the blocks switch
   it contextually — move over a relocatable block, ew-/ns-resize over a break/
   lunch/admin grip (see .appt.movable / .appt-fill-handle / .appt-grow-handle). */

/* Placement preview ghost — follows the cursor, tints green (valid) / red
   (blocked), and surfaces the client's time constraint before you click. */
#pg-ghost {
  position: absolute;
  left: 3px;
  right: 3px;
  border-radius: 4px;
  z-index: 4;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 1px 3px;
  text-align: center;
  overflow: hidden;
  font-size: 14px;
  transition: top 0.06s, height 0.06s;
}
#pg-ghost.valid {
  background: color-mix(in srgb, var(--ghost-color, #52a821) 30%, transparent);
  border: 3px dashed var(--green);
  color: #1d4d0a;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
#pg-ghost.invalid {
  background: rgba(232, 72, 44, 0.18);
  border: 3px dashed var(--red);
  color: #8e1d0c;
}
#pg-ghost .pg-ghost-time { font-weight: 700; line-height: 1.1; }
#pg-ghost .pg-ghost-rule {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  padding: 1px 5px;
  border-radius: 999px;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.6);
  color: #1d4d0a;
}
#pg-ghost.invalid .pg-ghost-rule { color: #8e1d0c; background: rgba(255, 255, 255, 0.65); }
#pg-ghost .pg-ghost-rule.bad { background: rgba(255, 255, 255, 0.7); }
#pg-ghost.tight .pg-ghost-time { display: none; }

/* The shared red sweep line — one clock for the whole practice. */
#pg-sweep {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 3px solid var(--red);
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(2px 2px 0 rgba(46, 21, 5, 0.35));
}
/* Matches solo's .sweep-dot: a pulsing rounded square with an outline ring. */
#pg-sweep .pg-sweep-dot {
  position: absolute;
  left: -5px;
  top: -8px;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--red);
  border: 2px solid #ffd9c2;
  box-shadow: 0 0 0 2px var(--outline);
  animation: dot-pulse 1s infinite;
}

/* ---- Availability lines (shared practice hours) — mirrors solo ---- */
/* The lines themselves never intercept grid clicks; only their handles do. */
#pg-night-zone, #pg-dawn-zone {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
}
#pg-night-zone {
  background:
    repeating-linear-gradient(45deg,
      rgba(40, 33, 84, 0.32) 0, rgba(40, 33, 84, 0.32) 6px,
      rgba(28, 23, 60, 0.40) 6px, rgba(28, 23, 60, 0.40) 12px);
}
#pg-dawn-zone {
  background:
    repeating-linear-gradient(45deg,
      rgba(255, 196, 0, 0.18) 0, rgba(255, 196, 0, 0.18) 6px,
      rgba(255, 168, 60, 0.26) 6px, rgba(255, 168, 60, 0.26) 12px);
}
#pg-eod-line, #pg-morning-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  z-index: 7;
  pointer-events: none;
  filter: drop-shadow(1px 2px 0 rgba(46, 21, 5, 0.35));
}
#pg-eod-line { border-top: 3px dashed #b9a7ff; }
#pg-morning-line { border-top: 3px dashed #ffb13d; }
.pg-eod-handle, .pg-morning-handle {
  position: absolute;
  right: 6px;
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: ns-resize;
  user-select: none;
  touch-action: none;
  pointer-events: auto;
  box-shadow: 0 2px 0 rgba(46, 21, 5, 0.4);
}
.pg-eod-handle {
  bottom: 4px;
  background: #2a2350;
  color: #efeaff;
  border: 2px solid #b9a7ff;
}
.pg-eod-handle:hover { background: #3a316f; }
.pg-morning-handle {
  top: 4px;
  background: #8a4a12;
  color: #fff3d1;
  border: 2px solid #ffb13d;
}
.pg-morning-handle:hover { background: #a35d1c; }

/* ---- Side panel: shared incoming queue + tools ---- */
#pg-side {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
  /* Pin the panel to its 300px basis: without this, a card whose content can't
     shrink (long names / constraint chips) inflates the auto min-width and shoves
     the calendar sideways. Cards inside are then capped to fit (see #pg-queue). */
  min-width: 0;
}
#pg-side .pg-panel-title {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--ink-on-wood);
  background: linear-gradient(180deg, var(--wood-light), var(--wood));
  border: 3px solid var(--wood-dark);
  border-radius: 8px;
  padding: 8px 10px;
  text-shadow: var(--px-text);
}
#pg-side .pg-hint { font-size: 13px; color: var(--ink-soft); padding: 0 2px; }
/* The shared queue reuses the global .card component (see game.css). The padding
   + negative margin give the selected card's ring room without losing width. */
#pg-queue {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 5px 7px;
  margin: -5px -7px;
}
#pg-queue .pg-empty { font-size: 14px; color: var(--ink-soft); text-align: center; padding: 18px 6px; opacity: 0.8; }
/* Cap every request card to the panel width and make its text fields yield, so
   metadata-heavy cards (VIP + recurring + constraint chips, long client names)
   wrap/ellipsize within the card instead of widening it and shifting the grid. */
#pg-queue .card { max-width: 100%; box-sizing: border-box; }
#pg-queue .card .card-client { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pg-queue .card .card-mid { min-width: 0; }

/* Tools row — the same .tool component as solo (Break / Lunch / Admin + slots). */
#pg-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 0 0 auto; }
#pg-tools .tool[hidden] { display: none; }

/* Floating collectible power-ups (🍎💎⏰) arcing up the active calendar. */
#pg-calendar .pg-fruit {
  position: absolute;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  z-index: 6;
  pointer-events: auto;
  user-select: none;
  filter: drop-shadow(2px 3px 0 rgba(46, 21, 5, 0.35));
  will-change: transform, top, left;
}
#pg-calendar .pg-fruit:hover { filter: drop-shadow(2px 3px 0 rgba(46, 21, 5, 0.35)) brightness(1.12); }

/* ---- Between-week / summary panel reuses the shared .overlay/.panel look ---- */
#pg-summary .panel,
#pg-month-end .panel { max-width: min(560px, 92vw); }
#pg-summary #pg-sum-btns,
#pg-month-end #pg-mo-btns { flex-wrap: wrap; gap: 8px; }
#pg-summary .pg-stat-rows,
#pg-month-end .pg-stat-rows { margin: 6px 0 14px; text-align: left; }
#pg-summary .pg-stat-rows > div,
#pg-month-end .pg-stat-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 2px;
  border-bottom: 2px dotted rgba(91, 43, 10, 0.2);
  font-size: 17px;
}
#pg-summary .pg-stat-rows b,
#pg-month-end .pg-stat-rows b { font-family: var(--font-pixel); font-size: 11px; }
#pg-summary .pg-warn, #pg-month-end .pg-warn { color: var(--red); }
#pg-summary .pg-good, #pg-month-end .pg-good { color: var(--green); }
/* The "Total bills" / "Bank after" rows read as a ledger footer. */
#pg-month-end .pg-stat-rows > div:nth-last-child(2) { border-top: 2px solid rgba(91, 43, 10, 0.3); margin-top: 2px; }