/*
 * Full Play-by-Play styles
 *
 * Phase 2 layout:
 *   ┌─────────────────────────────────────────────────────────┐
 *   │  Mode pill        Undo                                  │
 *   ├──────────────────────────────────────┬──────────────────┤
 *   │  Player rows: name + action buttons  │  Modifier        │
 *   │  (≈ 66% width)                       │  panel (≈ 33%)   │
 *   ├──────────────────────────────────────┴──────────────────┤
 *   │  Bottom 20% — reserved for future ultra-compact log     │
 *   └─────────────────────────────────────────────────────────┘
 */

.panel-playByPlayFull {
    display: flex;
    flex-direction: column;
}

/* Role-disabled: a non-Active-Coach is viewing the panel. Fade the
 * interactive surfaces (player rows, modifier chips, bottom actions) so
 * it's visually clear the buttons aren't actionable. The mini log stays
 * full-opacity since reading is still useful. The header (mode pill /
 * Start Point) gets its own per-state styling and isn't faded here. */
.panel-playByPlayFull.role-disabled .full-pbp-rows-area,
.panel-playByPlayFull.role-disabled .full-pbp-modifier-row,
.panel-playByPlayFull.role-disabled .full-pbp-bottom-actions {
    opacity: 0.55;
}

/* Reset main.css's global `button { padding: 10px 15px; margin: 10px; }`
 * for buttons inside this panel — every button class here sets its own
 * padding, but the 10px global margin leaked through (most visibly on
 * the name button, which was inflating each row by ~20px vertically).
 * Setting margin: 0 here ensures the per-button rules below control the
 * actual size from a clean slate. */
.panel-playByPlayFull button {
    margin: 0;
}

.panel-playByPlayFull .panel-content.full-pbp-content {
    flex: 1 1 auto;
    display: flex;
    padding: 0;
    overflow: hidden;
}

.full-pbp-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

/* Header */
.full-pbp-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid #ddd;
    gap: 8px;
}

.full-pbp-mode-pill {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95em;
    color: #fff;
    background: #888;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.full-pbp-mode-pill.mode-offense { background: #2563eb; }   /* blue */
.full-pbp-mode-pill.mode-defense { background: #dc2626; }   /* red  */

.full-pbp-mode-pill:hover  { filter: brightness(1.08); }
.full-pbp-mode-pill:active { filter: brightness(0.92); }

/* Start Point button — replaces the mode pill between points. Same shape
 * and rough size as the pill so the header layout doesn't jump. */
.full-pbp-start-point-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 999px;
    border: none;
    background: #16a34a;        /* green — go */
    color: #fff;
    font-weight: 600;
    font-size: 0.95em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.full-pbp-start-point-btn:hover  { background: #15803d; }
.full-pbp-start-point-btn:active { background: #166534; }
/* Feedback colors — match the Select Line / PBP panel palette
   (panelSystem.css ~1285) so the same lineup state reads the same way
   wherever the Start Point button appears. count-warning was previously
   collapsed with `.inactive` (both grey) which made a real wrong-count
   warning look like a disabled button to the AC. */
.full-pbp-start-point-btn.feedback-count-warning  { background: #dc3545; color: #fff; }
.full-pbp-start-point-btn.feedback-gender-warning { background: #f59e0b; color: #fff; }
.full-pbp-start-point-btn.feedback-ok             { background: #16a34a; color: #fff; }
.full-pbp-start-point-btn.inactive {
    background: #d6d6d6;
    color: #888;
    cursor: not-allowed;
}
/* Inactive + feedback combos: dimmed but the warning hue still shows
   through, so a non-Active-Coach can read the lineup state without
   acting on it (pure grey would erase the warning info). */
.full-pbp-start-point-btn.inactive.feedback-ok             { background: #6fae7d; color: #fff; opacity: 0.85; }
.full-pbp-start-point-btn.inactive.feedback-count-warning  { background: #b97a82; color: #fff; opacity: 0.85; }
.full-pbp-start-point-btn.inactive.feedback-gender-warning { background: #d29a55; color: #fff; opacity: 0.85; }

.full-pbp-no-point-msg {
    flex: 1 1 auto;
    text-align: center;
    color: #777;
    font-style: italic;
    font-size: 0.95em;
}

.full-pbp-undo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid #bbb;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
    color: #333;
}
.full-pbp-undo-btn:hover  { background: #f4f4f4; }
.full-pbp-undo-btn:active { background: #ececec; }
.full-pbp-undo-btn i      { font-size: 0.9em; }

/* Player rows: size to content (8 rows × ~44px ≈ 352px on phone).
 * The mini-log absorbs whatever vertical slack is left after the
 * fixed-content strips around it — see .full-pbp-log-reserve below.
 * `flex: 0 1 auto` lets rows-area shrink under pressure (extreme
 * narrow viewports) and falls back to scrolling when truly necessary. */
.full-pbp-rows-area {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px;
    box-sizing: border-box;
}

/* Modifier row — full-width horizontal strip below the player rows.
 * Title on the left, then a horizontally scrollable chip list. Active
 * chips fill in blue to match Simple mode's "armed" look. */
.full-pbp-modifier-row {
    flex: 0 0 auto;
    background: #fff;
    border-top: 1px solid #ddd;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
}

.full-pbp-modifier-row-label {
    flex: 0 0 auto;
    font-size: 0.78em;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.full-pbp-modifier-row-chips {
    flex: 1 1 auto;
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}

.full-pbp-modifier-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid #cfcfcf;
    border-radius: 999px;
    background: #f7f7f7;
    color: #333;
    font-size: 0.82em;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.full-pbp-modifier-chip input[type="checkbox"] { display: none; }
.full-pbp-modifier-chip.checked {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

/* Bottom action row — full-width strip below the modifier row.
 *   D-mode: 1fr auto 1fr   (They turnover | Events | They score)
 *   O-mode: just Events    (centered via auto + grid)
 *
 * Hues match Simple mode's score buttons at lower saturation so the
 * row reads as muted "opponent" actions rather than competing with
 * the player rows above. */
.full-pbp-bottom-actions {
    flex: 0 0 auto;
    display: grid;
    gap: 6px;
    padding: 8px 12px;
    background: #fff;
    border-top: 1px solid #ddd;
}
.full-pbp-bottom-actions.mode-defense {
    grid-template-columns: 1fr auto 1fr;
}
.full-pbp-bottom-actions.mode-offense {
    grid-template-columns: 1fr;
    justify-items: center;
}

.full-pbp-bottom-actions button {
    margin: 0;
    border-radius: 6px;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 0.95em;
    line-height: 1.2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.full-pbp-bottom-actions .full-pbp-they-turnover-btn {
    border: 1px solid #16a34a;
    background: #dcfce7;
    color: #166534;
}
.full-pbp-bottom-actions .full-pbp-they-turnover-btn:hover  { background: #bbf7d0; }
.full-pbp-bottom-actions .full-pbp-they-turnover-btn:active { background: #86efac; }

.full-pbp-bottom-actions .full-pbp-they-score-btn {
    border: 1px solid #dc2626;
    background: #fee2e2;
    color: #991b1b;
}
.full-pbp-bottom-actions .full-pbp-they-score-btn:hover  { background: #fecaca; }
.full-pbp-bottom-actions .full-pbp-they-score-btn:active { background: #fca5a5; }

.full-pbp-bottom-actions .full-pbp-game-events-btn {
    border: 1px solid #aaa;
    background: #f4f4f4;
    color: #555;
}
.full-pbp-bottom-actions .full-pbp-game-events-btn:hover  { background: #e8e8e8; }
.full-pbp-bottom-actions .full-pbp-game-events-btn:active { background: #d8d8d8; }
.full-pbp-bottom-actions .full-pbp-game-events-btn i { margin-right: 4px; opacity: 0.8; }

/* Player row — grid `1fr auto`: name stretches to fill all available
 * horizontal space, actions take only what their content needs. Lets
 * long names ("Daniel", "Harold", "Unknown") render in full and keeps
 * action buttons from being wider than their labels demand. */
.full-pbp-player-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    margin-bottom: 6px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    min-height: 48px;
}

.full-pbp-player-row.is-holder {
    background: #fff3d6;       /* warm yellow — current holder */
    border-color: #e0a64b;
    box-shadow: 0 0 0 2px rgba(224, 166, 75, 0.25);
}

/* Unknown player row — visually distinct so it's easy to skip past when
 * scanning, but still tappable. */
.full-pbp-player-row.is-unknown {
    background: #f3f4f6;
    border-style: dashed;
    border-color: #c0c0c0;
}
.full-pbp-player-row.is-unknown .full-pbp-name-btn {
    color: #6b7280;
    font-style: italic;
    font-weight: 500;
}

/* Between-points: rows are visible (so the user sees who played the
 * previous point) but greyed and non-interactive — no events should
 * be entered while the Start Point button is showing. */
.full-pbp-player-row.between-points {
    opacity: 0.45;
    pointer-events: none;
    box-shadow: none;
}

.full-pbp-name-btn {
    /* Grid track handles the column width; name is ellipsized on
     * overflow so a long name doesn't push the action buttons off. */
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 1.05em;
    font-weight: 600;
    text-align: left;
    padding: 8px 10px;
    cursor: pointer;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.full-pbp-name-btn:active { background: rgba(0, 0, 0, 0.05); }

/* Actions: every button is content-sized via auto columns. "Block"
 * (~50px) and "D!" (~30px) no longer waste the same area as
 * "Throwaway" (~80px) — each button takes only what its label needs.
 * Net effect: name column gets wider, actions cluster compactly on
 * the right edge of the row. */
.full-pbp-row-actions {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 1px;
    padding: 0;
}

.full-pbp-row-actions-defense {
    /* D-mode rows: block / interception / "…" */
}

.full-pbp-row-action {
    min-width: 0;
    margin: 0;
    border: 1px solid #c8c8c8;
    border-radius: 2px;
    background: #f7f7f7;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    padding: 7px 10px;
    color: #333;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

/* "…" button: narrow, just a few px of breathing room around the
 * three dots so the tap target stays usable on phone. */
.full-pbp-row-action-more {
    padding: 7px 8px;
    color: #555;
    font-weight: 700;
}
.full-pbp-row-action:hover  { background: #ebebeb; }
.full-pbp-row-action:active { background: #dcdcdc; }

.full-pbp-row-action-drop         { color: #b91c1c; }   /* red — receiver error */
.full-pbp-row-action-throwaway    { color: #b91c1c; }   /* red — thrower error */
.full-pbp-row-action-score        { color: #047857; }   /* green — goal */
.full-pbp-row-action-break        { color: #1d4ed8; }   /* blue — modifier */
.full-pbp-row-action-block        { color: #047857; }   /* green — defender win */
.full-pbp-row-action-interception { color: #047857; font-weight: 700; }

.full-pbp-row-action.armed {
    background: #1d4ed8;
    color: #fff;
    border-color: #1d4ed8;
}

/* Modifier column placeholder — fleshed out in phase 4. */
.full-pbp-placeholder {
    color: #aaa;
    font-style: italic;
    text-align: center;
    padding: 12px 8px;
    font-size: 0.9em;
}

/* Density toggle — `.density-compact` on the panel root tightens the
 * player-row sizing back to the build-206 values (smaller rows fit
 * more on a short viewport). The default (no class) is the roomier
 * build-207 values defined above. The mini-log absorbs the resulting
 * slack either way (`.full-pbp-log-reserve` is `flex: 1 1 auto`). */
.panel-playByPlayFull.density-compact .full-pbp-player-row {
    min-height: 40px;
    margin-bottom: 4px;
}
.panel-playByPlayFull.density-compact .full-pbp-name-btn {
    padding: 6px 8px;
}
.panel-playByPlayFull.density-compact .full-pbp-row-action {
    padding: 5px 10px;
}
.panel-playByPlayFull.density-compact .full-pbp-row-action-more {
    padding: 5px 8px;
}

/* Density toggle button in the header. Icon-only; small enough not
 * to compete with the mode pill or Undo. Sits between them. */
.full-pbp-density-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #bbb;
    border-radius: 6px;
    background: #fff;
    color: #555;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.full-pbp-density-btn:hover  { background: #f4f4f4; }
.full-pbp-density-btn:active { background: #ececec; }
.full-pbp-density-btn i { font-size: 0.9em; }

/* Mini event log — flexes to absorb whatever vertical slack is left
 * after the header / rows-area / modifier-row / bottom-actions are
 * laid out. min-height keeps it usable even on very tall row counts;
 * on roomy viewports the log just gets bigger. */
.full-pbp-log-reserve {
    flex: 1 1 auto;
    min-height: 110px;
    border-top: 1px solid #ddd;
    background: #fafafa;
    overflow: hidden;
}

.full-pbp-log-list {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    /* Left-justified; right padding leaves clearance for the mic FAB
     * pinned in the bottom-right corner so log lines stay readable
     * end-to-end without the disc icon obscuring them. */
    padding: 4px 80px 4px 8px;
    box-sizing: border-box;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78em;
    line-height: 1.35;
    color: #333;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
}