/* player-talks.css — Player Talks coverage matrix (js/player-talks.js),
   reached from the EDM Tools header button.

   Scoped under #player-talks-root (mount()'s own container) plus the
   #ptk-chip-popover, which is deliberately NOT nested under that root —
   it's appended straight to document.body (same pattern as the Meeting
   Types admin panel's own color popover in index.html) so it isn't
   clipped by the matrix's own overflow:auto scroll container. Reuses the
   app's shared --text/--surface/--border/--accent tokens rather than
   redefining a palette of its own. */

#player-talks-root * { box-sizing: border-box; }
#player-talks-root {
  font-size: 0.85rem;
  color: var(--text);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}
.ptk-loading, .ptk-error { padding: 2rem; text-align: center; color: var(--text3); }
.ptk-error { color: var(--bad-text); }

.ptk-topbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.75rem; flex: none; }
.ptk-cal-nav { display: flex; align-items: center; gap: 0.6rem; }
.ptk-cal-nav-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.ptk-cal-nav-btn:hover { background: var(--border); }
.ptk-cal-nav-btn:disabled,
.ptk-cal-nav-btn:disabled:hover { opacity: 0.4; cursor: default; background: var(--surface2); }
.ptk-cal-month-label { font-size: 1.1rem; font-weight: 700; min-width: 12ch; text-align: center; }
.ptk-topbar-actions { display: flex; align-items: center; gap: 0.5rem; }

/* The calendar matrix is the primary view, so it gets all the vertical
   room (flex:1) -- the Player Tracker below is collapsed behind its own
   header by default (see .ptk-tracker-section-open), so it doesn't need
   to steal space from the matrix just by existing in the DOM. */
.ptk-body { flex: 1; min-height: 260px; display: flex; gap: 1rem; overflow: hidden; }
.ptk-matrix-col { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

/* The matrix can run 28-31 columns wide -- this is its own horizontal
   scroll container (per CLAUDE.md's Season Charts convention for wide
   gridded content), independent of the page body, which never scrolls
   sideways. */
.ptk-matrix-scroll { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }

.ptk-matrix { border-collapse: separate; border-spacing: 0; font-size: 0.72rem; }
.ptk-matrix th, .ptk-matrix td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 0.25rem; vertical-align: top; }
.ptk-matrix th { background: var(--surface2); position: sticky; top: 0; z-index: 2; font-weight: 700; text-align: center; white-space: nowrap; }
/* Sticky player-name column + sticky header row, same "both axes pinned"
   idea as the Lineup Tool calendar and Master Roster -- z-index 3 so the
   top-left corner cell (both sticky rules apply at once) stays above
   every other sticky cell it overlaps while scrolling either direction. */
.ptk-th-player { position: sticky; left: 0; z-index: 3; text-align: left !important; min-width: 150px; background: var(--surface2); }
.ptk-td-player { position: sticky; left: 0; z-index: 1; background: var(--surface); font-weight: 600; white-space: nowrap; padding: 0.3rem 0.5rem; cursor: pointer; }
.ptk-td-player.ptk-missing { color: var(--bad-text); }
.ptk-td-player:hover { background: var(--surface2); }
.ptk-group-row td { background: var(--surface2); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text3); position: sticky; left: 0; padding: 0.3rem 0.5rem; }
.ptk-day-th { min-width: 74px; }
.ptk-day-num { font-size: 0.75rem; }
.ptk-day-dow { font-size: 0.6rem; color: var(--text3); font-weight: 400; }
.ptk-day-game { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 0.58rem; font-weight: 700; margin-top: 2px; }
/* .lg-team-logo (sizing) + .team-logo-XXX (the actual background image)
   are both defined globally in index.html/injectTeamLogoCSS() -- this
   just layers a smaller fixed size on top for the matrix header. */
.ptk-day-logo { width: 14px; height: 14px; background-size: contain; background-repeat: no-repeat; background-position: center; display: inline-block; }
.ptk-cell { min-width: 74px; cursor: pointer; }
.ptk-cell:hover { background: var(--surface2); }
.ptk-cell.ptk-selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.ptk-chip { display: block; width: 100%; border: none; border-radius: 4px; color: #fff; font-size: 0.62rem; font-weight: 700; padding: 0.12rem 0.3rem; margin-bottom: 2px; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ptk-panel { width: 280px; flex: none; display: flex; flex-direction: column; gap: 0.6rem; border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem; overflow-y: auto; background: var(--surface); }
.ptk-panel h3 { margin: 0 0 0.2rem; font-size: 0.9rem; }
.ptk-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; }
.ptk-field label { font-weight: 600; color: var(--text3); text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.04em; }
.ptk-field select, .ptk-field input, .ptk-field textarea {
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); color: var(--text);
  padding: 0.35rem 0.5rem; font-size: 0.8rem; font-family: inherit;
}
.ptk-field textarea { resize: vertical; min-height: 60px; }
.ptk-type-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.35rem; }
.ptk-submit-btn { background: var(--accent); border: 1px solid var(--accent); color: #fff; font-weight: 600; border-radius: 6px; padding: 0.45rem 0.8rem; font-size: 0.82rem; cursor: pointer; }
.ptk-submit-btn:disabled { opacity: 0.5; cursor: default; }
.ptk-submit-status { font-size: 0.72rem; color: var(--text3); }
.ptk-submit-status.err { color: var(--bad-text); }
.ptk-locked-coach { font-size: 0.8rem; padding: 0.35rem 0.5rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text3); }

.ptk-former { flex: none; border-top: 1px solid var(--border); margin-top: 0.75rem; padding-top: 0.6rem; }
.ptk-former-toggle { background: none; border: none; color: var(--text3); font-size: 0.75rem; font-weight: 700; cursor: pointer; padding: 0.2rem 0; text-transform: uppercase; letter-spacing: 0.04em; }
.ptk-former-toggle:hover { color: var(--text); }
.ptk-former-body { margin-top: 0.5rem; }
.ptk-former-empty { font-size: 0.75rem; color: var(--text3); padding: 0.4rem 0; }

/* ── Player Tracker — full history, all months, one player at a time ──
   Sits below .ptk-body (outside its overflow:hidden), so it relies on
   #player-talks-root's own overflow-y:auto to come into view -- see the
   comment on .ptk-body above for why that split exists. */
.ptk-tracker { flex: none; border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 0.6rem; }
.ptk-tracker-section-open .ptk-tracker-title { margin-bottom: 0.5rem; }
.ptk-tracker-title { display: flex; align-items: center; gap: 0.4rem; width: 100%; background: none; border: none; margin: 0; font-size: 0.8rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; cursor: pointer; padding: 0.2rem 0; }
.ptk-tracker-title:hover { color: var(--text); }
.ptk-tracker-title .ptk-tracker-caret { width: auto; }
.ptk-tracker-list { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ptk-tracker-group { background: var(--surface2); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text3); padding: 0.3rem 0.6rem; }
.ptk-tracker-row { border-top: 1px solid var(--border); }
.ptk-tracker-row:first-child { border-top: none; }
.ptk-tracker-toggle { width: 100%; display: flex; align-items: center; gap: 0.5rem; background: var(--surface); border: none; color: var(--text); font-size: 0.8rem; font-weight: 600; padding: 0.45rem 0.6rem; cursor: pointer; text-align: left; }
.ptk-tracker-toggle:hover { background: var(--surface2); }
.ptk-tracker-caret { color: var(--text3); font-size: 0.7rem; width: 1em; flex: none; }
.ptk-tracker-open > .ptk-tracker-toggle { background: var(--surface2); }
.ptk-tracker-body { padding: 0.4rem 0.6rem 0.7rem 2rem; }
.ptk-hist-loading, .ptk-hist-empty, .ptk-hist-error { font-size: 0.75rem; color: var(--text3); padding: 0.2rem 0; }
.ptk-hist-error { color: var(--bad-text); }
.ptk-hist-list { display: flex; flex-direction: column; gap: 0.35rem; }
.ptk-hist-entry { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.76rem; padding: 0.25rem 0; border-bottom: 1px dashed var(--border); }
.ptk-hist-entry:last-child { border-bottom: none; }
.ptk-hist-date { color: var(--text3); min-width: 6.5em; font-variant-numeric: tabular-nums; }
.ptk-hist-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.4em; padding: 0 0.3em; border-radius: 4px; color: #fff; font-size: 0.65rem; font-weight: 700; }
.ptk-hist-coach { font-weight: 600; }
.ptk-hist-type { font-weight: 600; font-size: 0.72rem; }
.ptk-hist-notes { color: var(--text3); font-style: italic; flex-basis: 100%; }

/* ── Chip detail popover — appended to document.body, not scoped under
   #player-talks-root (see file header comment) ─────────────────────── */
#ptk-chip-popover { position: fixed; z-index: 9999; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.8rem; box-shadow: 0 4px 16px rgba(0,0,0,0.35); font-size: 0.78rem; width: 220px; color: var(--text); }
#ptk-chip-popover .ptk-cp-row { margin-bottom: 0.3rem; }
#ptk-chip-popover .ptk-cp-label { color: var(--text3); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; }
#ptk-chip-popover .ptk-cp-delete { margin-top: 0.4rem; width: 100%; background: none; border: 1px solid var(--bad-text); color: var(--bad-text); border-radius: 6px; padding: 0.3rem; font-size: 0.75rem; cursor: pointer; }
#ptk-chip-popover .ptk-cp-delete:hover { background: var(--bad-text); color: #fff; }

/* ── Admin View modal — appended to document.body, same reasoning as the
   chip popover above ─────────────────────────────────────────────────── */
#ptk-audit-modal { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; }
.ptk-audit-card { width: min(1000px, 92vw); max-height: 82vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); color: var(--text); font-size: 0.85rem; }
.ptk-audit-header { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--border); flex: none; }
.ptk-audit-header h3 { margin: 0; font-size: 1rem; }
.ptk-audit-close { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; padding: 0.3rem 0.7rem; font-size: 0.8rem; }
.ptk-audit-close:hover { background: var(--border); }
.ptk-audit-scroll-outer { flex: 1; min-height: 0; overflow-y: auto; padding: 0.9rem 1.1rem; display: flex; flex-direction: column; gap: 1.2rem; }
.ptk-mt-section h4, .ptk-audit-section h4 { margin: 0 0 0.4rem; font-size: 0.78rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; }
.ptk-mt-hint { margin: 0 0 0.6rem; font-size: 0.72rem; color: var(--text3); }
.ptk-audit-scroll { overflow-x: auto; }
.ptk-audit-table { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
.ptk-audit-table th, .ptk-audit-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.ptk-audit-table th { color: var(--text3); font-weight: 700; text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.03em; position: sticky; top: 0; background: var(--surface); }
.ptk-audit-table td { white-space: normal; }
.ptk-audit-when { color: var(--text3); font-variant-numeric: tabular-nums; }
.ptk-audit-action-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.ptk-audit-action-create { background: rgba(6,122,63,0.18); color: #0e9f52; }
.ptk-audit-action-delete { background: rgba(186,12,12,0.18); color: var(--bad-text); }
.ptk-audit-action-restore { background: rgba(41,107,190,0.18); color: #4f8fe0; }
.ptk-audit-type { font-weight: 600; margin-left: 0.3rem; }
.ptk-audit-restore-btn { background: none; border: 1px solid var(--accent); color: var(--accent); border-radius: 6px; padding: 0.2rem 0.55rem; font-size: 0.72rem; cursor: pointer; }
.ptk-audit-restore-btn:hover { background: var(--accent); color: #fff; }
.ptk-audit-restore-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Meeting Types admin CRUD (inside the Admin View modal above) ───── */
.ptk-mt-list { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ptk-mt-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.ptk-mt-row:last-child { border-bottom: none; }
.ptk-mt-swatch { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); cursor: pointer; flex: none; padding: 0; }
.ptk-mt-label { flex: 1; min-width: 0; border: 1px solid transparent; background: none; color: var(--text); font-size: 0.82rem; padding: 0.2rem 0.35rem; border-radius: 5px; font-family: inherit; }
.ptk-mt-label:hover, .ptk-mt-label:focus { border-color: var(--border); background: var(--surface2); outline: none; }
.ptk-mt-remove { background: none; border: none; color: var(--text3); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0.1rem 0.4rem; border-radius: 5px; flex: none; }
.ptk-mt-remove:hover { color: var(--bad-text); background: var(--surface2); }
.ptk-mt-add { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.ptk-mt-add input { flex: 1; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); color: var(--text); padding: 0.35rem 0.5rem; font-size: 0.8rem; font-family: inherit; }
.ptk-mt-add button { background: var(--accent); border: 1px solid var(--accent); color: #fff; font-weight: 600; border-radius: 6px; padding: 0.35rem 0.8rem; font-size: 0.8rem; cursor: pointer; }

#ptk-mt-color-popover { position: fixed; z-index: 9999; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem; box-shadow: 0 4px 16px rgba(0,0,0,0.35); width: 176px; }
.ptk-mt-color-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.5rem; }
.ptk-mt-color-item { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.ptk-mt-color-item:hover { border-color: var(--border); }
.ptk-mt-color-current { border-color: var(--text); }
.ptk-mt-color-custom { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; color: var(--text3); border-top: 1px solid var(--border); padding-top: 0.5rem; }
.ptk-mt-color-custom input[type="color"] { width: 32px; height: 22px; border: none; background: none; padding: 0; cursor: pointer; }

/* ── Month print (printMonth() in js/player-talks.js) ───────────────────
   Not inside @media print: the page is laid out and measured off screen
   before printing, so it has to look exactly as it prints -- px sizes and
   fixed colours rather than the app's tokens, which follow dark mode. The
   width and zoom are inline, set by layoutPrint(). Same flow as
   css/recap-print.css. */
#ptk-print-root { position: absolute; left: -100000px; top: 0; background: #fff; color: #111; font-size: 10px; line-height: 1.25; }
#ptk-print-root * { box-sizing: border-box; }
.ptk-pr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid #111; padding-bottom: 3px; margin-bottom: 4px; }
.ptk-pr-title { font-size: 15px; font-weight: 700; white-space: nowrap; }
.ptk-pr-title span { font-weight: 400; margin-left: 6px; }
.ptk-pr-sub { font-size: 9px; color: #444; white-space: nowrap; }
.ptk-pr-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 8.5px; margin-bottom: 3px; }
.ptk-pr-legend-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #555; min-width: 48px; }
.ptk-pr-key { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.ptk-pr-swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.ptk-pr-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 4px; }
.ptk-pr-table th, .ptk-pr-table td { border: 1px solid #b4b4b4; padding: 1px; text-align: center; vertical-align: middle; }
.ptk-pr-table tbody td { height: var(--ptk-pr-row-h, 15px); }
.ptk-pr-table .ptk-pr-wk { border-left: 2px solid #6b6b6b; }
.ptk-pr-table th { background: #f1f1f1; font-weight: 700; }
.ptk-pr-col-count { width: 26px; }
.ptk-pr-dnum { font-size: 9.5px; }
.ptk-pr-dow { font-size: 7.5px; font-weight: 400; color: #555; }
.ptk-pr-opp { font-size: 7.5px; white-space: nowrap; overflow: hidden; }
.ptk-pr-table .ptk-pr-gd { background: #e3eaf5; }
.ptk-pr-table .ptk-pr-player { text-align: left; padding: 1px 4px; white-space: nowrap; }
.ptk-pr-name { display: inline-block; font-size: 10px; font-weight: 600; }
.ptk-pr-missing .ptk-pr-name { color: #c00000; }
.ptk-pr-table .ptk-pr-count { font-size: 10px; font-weight: 700; }
.ptk-pr-table .ptk-pr-group td { background: #f1f1f1; text-align: left; font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #444; padding: 1px 4px; height: 12px; }
/* Inline, so a wide column (a zoomed-down page) holds several a line. */
.ptk-pr-chip { display: inline-block; vertical-align: middle; min-width: 18px; max-width: 100%; padding: 0 2px; border-radius: 2px; color: #fff; font-size: 8px; font-weight: 700; line-height: 11px; margin: 1px 0.5px; white-space: nowrap; overflow: hidden; }
.ptk-pr-foot { font-size: 7.5px; color: #555; margin-top: 3px; }

@media print {
  body.ptk-printing { display: block !important; min-height: 0 !important; background: #fff !important; }
  body.ptk-printing > *:not(#ptk-print-root) { display: none !important; }
  body.ptk-printing #ptk-print-root {
    position: static;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  #ptk-print-root .ptk-pr-page { break-inside: avoid; page-break-inside: avoid; }
}

/* -- Player Talks reminder (js/player-talks-reminder.js) -----------------
   The header's Admin button while any coach has no talk logged today, and
   the line it adds to the top of the Admin menu. Fixed colours: yellow on
   navy in the header, dark text on pale yellow in the menu. */
#admin-menu-btn.ptr-attn,
#admin-menu-btn.ptr-attn:hover { background: #ffc72c; border-color: #ffc72c; color: #00205b; font-weight: 600; }
.admin-menu-item.ptr-item { display: flex; flex-direction: column; gap: 2px; white-space: normal; max-width: 280px; border-bottom: 1px solid var(--border); border-radius: 6px 6px 0 0; margin-bottom: 2px; }
.admin-menu-item.ptr-item.ptr-pending,
.admin-menu-item.ptr-item.ptr-pending:hover { background: #fff3bf; color: #3d3200; }
.ptr-item .ptr-title { display: block; font-weight: 600; }
.ptr-item .ptr-detail { display: block; font-size: 0.74rem; line-height: 1.3; }