/* draft_target_board_v4.css — Draft Targets board (see draft_target_board_v4.js)
   Shell mirrors player_ranking_sheet_ui_v4.css so the board sits in the app's
   modal family rather than inventing a look of its own. */

#draftTargetsModal .dtb-backdrop {
    position: fixed; inset: 0; z-index: 1999;
    background: var(--jt-overlay-bg); backdrop-filter: var(--jt-overlay-blur);
}
#draftTargetsModal .dtb-shell {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
#draftTargetsModal .dtb-modal {
    pointer-events: auto; position: relative;
    display: flex; flex-direction: column;
    background: var(--jt-modal-bg); border: 1px solid var(--jt-modal-border);
    border-radius: 12px; box-shadow: var(--jt-modal-shadow);
    width: min(1040px, 95vw); height: min(760px, 92vh);
    overflow: hidden;
}

/* ── header ── */
#draftTargetsModal .dtb-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; flex: none;
    border-bottom: 1px solid var(--jt-border-primary);
    cursor: grab;
}
#draftTargetsModal .dtb-title  { font-size: .95rem; font-weight: 800; white-space: nowrap; }
#draftTargetsModal .dtb-league {
    font-size: .7rem; color: var(--jt-text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#draftTargetsModal .dtb-spacer { flex: 1; }
#draftTargetsModal .dtb-status {
    font-size: .68rem; color: var(--jt-text-muted); white-space: nowrap;
}
#draftTargetsModal .dtb-status--err { color: var(--jt-accent-red); }
#draftTargetsModal .dtb-close {
    width: 26px; height: 26px; border: none; background: transparent;
    color: var(--jt-text-secondary); font-size: 1rem; cursor: pointer; border-radius: 6px;
}
#draftTargetsModal .dtb-close:hover { background: var(--jt-bg-hover); color: var(--jt-text-primary); }

/* ReportActions/minimize chrome ships on-dark; this header is a plain surface,
   so flip the toolbar in light theme. Same fix as the ranking sheet. */
[data-theme="light"] #draftTargetsModal .dtb-header .ra-btn,
[data-theme="light"] #draftTargetsModal .dtb-header .jt-mp-minimize-btn {
    background: var(--jt-bg-tertiary);
    color: var(--jt-text-primary);
    border-color: var(--jt-border-secondary);
}

/* ── control bar ── */
#draftTargetsModal .dtb-bar {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    padding: 7px 14px; flex: none;
    background: var(--jt-bg-secondary);
    border-bottom: 1px solid var(--jt-border-primary);
}
#draftTargetsModal .dtb-lbl {
    font-size: .58rem; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--jt-text-muted);
}
#draftTargetsModal .dtb-slotsrc {
    font-size: .68rem; font-weight: 600; color: var(--jt-text-secondary);
    padding: 2px 8px; border-radius: 5px; background: var(--jt-bg-tertiary);
    border: 1px solid var(--jt-border-secondary);
}
#draftTargetsModal .dtb-sep { width: 1px; height: 16px; background: var(--jt-border-primary); }
#draftTargetsModal .dtb-btn {
    background: var(--jt-bg-tertiary); color: var(--jt-text-secondary);
    border: 1px solid var(--jt-border-secondary); border-radius: 6px;
    padding: 3px 9px; font-size: .7rem; font-weight: 600; cursor: pointer;
}
#draftTargetsModal .dtb-btn:hover:not([disabled]) {
    background: var(--jt-bg-elevated); color: var(--jt-text-primary);
}
/* A limit you've reached should look reached, not broken. */
#draftTargetsModal .dtb-btn[disabled] { opacity: .42; cursor: not-allowed; }
#draftTargetsModal .dtb-btn--off      { opacity: .42; cursor: not-allowed; }
#draftTargetsModal .dtb-jerry {
    background: var(--jt-accent-purple-bg); color: var(--jt-accent-purple-text);
    border-color: var(--jt-accent-purple-border);
}
#draftTargetsModal .dtb-meta {
    font-size: .68rem; color: var(--jt-text-secondary); white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── body: the columns ── */
#draftTargetsModal .dtb-body {
    flex: 1; min-height: 0; overflow: auto;
    background: var(--jt-bg-primary);
}
#draftTargetsModal .dtb-cols {
    display: flex; gap: 10px; padding: 10px 12px; align-items: flex-start;
}
#draftTargetsModal .dtb-col {
    flex: 1; min-width: 0;
    background: var(--jt-bg-secondary);
    border: 1px solid var(--jt-border-primary);
    border-radius: 8px; overflow: hidden;
}
/* The standby plans dim rather than hide: the whole point of a second plan is
   reading it against the live one. */
#draftTargetsModal .dtb-col--standby { opacity: .68; }
#draftTargetsModal .dtb-col--standby:hover { opacity: 1; }
#draftTargetsModal .dtb-col--add {
    max-width: 190px; border-style: dashed; background: var(--jt-bg-primary);
}

#draftTargetsModal .dtb-plan-hd {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 9px;
    background: var(--jt-bg-tertiary);
    border-bottom: 1px solid var(--jt-border-primary);
}
#draftTargetsModal .dtb-live {
    font-size: .58rem; font-weight: 800; letter-spacing: .04em;
    padding: 2px 7px; border-radius: 5px; cursor: pointer;
    background: var(--jt-bg-elevated); color: var(--jt-text-muted);
    border: 1px solid var(--jt-border-secondary);
}
#draftTargetsModal .dtb-live.on {
    background: var(--jt-accent-blue-bg); color: var(--jt-accent-blue-text);
    border-color: var(--jt-accent-blue-border);
}
#draftTargetsModal .dtb-plan-nm {
    font-weight: 700; font-size: .74rem; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#draftTargetsModal .dtb-plan-nm:hover { color: var(--jt-accent-blue-hover); }
#draftTargetsModal .dtb-plan-shape {
    margin-left: auto; flex: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .56rem; color: var(--jt-text-muted); white-space: nowrap;
}
#draftTargetsModal .dtb-plan-x {
    flex: none; border: none; background: transparent; cursor: pointer;
    color: var(--jt-text-disabled-grey); font-size: .7rem; padding: 0 2px;
}
#draftTargetsModal .dtb-plan-x:hover { color: var(--jt-accent-red); }

/* ── a slot ── */
#draftTargetsModal .dtb-slot { border-top: 1px solid var(--jt-border-muted); }
#draftTargetsModal .dtb-slot:first-of-type { border-top: none; }
#draftTargetsModal .dtb-slot-hd {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; background: var(--jt-bg-tertiary);
}
#draftTargetsModal .dtb-slot--done .dtb-slot-hd { background: var(--jt-accent-green-bg); }
#draftTargetsModal .dtb-slot--dead .dtb-slot-hd { background: var(--jt-accent-red-bg); }
#draftTargetsModal .dtb-slot--empty .dtb-slot-hd { background: var(--jt-accent-amber-bg); }

/* Position chips reuse the app's --jt-pos-* fills with their paired inks, so a
   slot key here is the same colour as that position everywhere else. */
#draftTargetsModal .dtb-k {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .56rem; font-weight: 700; flex: none;
    min-width: 34px; text-align: center; padding: 2px 4px; border-radius: 4px;
    background: var(--jt-bg-elevated); color: var(--jt-text-secondary);
}
#draftTargetsModal .dtb-k-QB  { background: var(--jt-pos-qb);  color: var(--jt-pos-qb-on); }
#draftTargetsModal .dtb-k-RB  { background: var(--jt-pos-rb);  color: var(--jt-pos-rb-on); }
#draftTargetsModal .dtb-k-WR  { background: var(--jt-pos-wr);  color: var(--jt-pos-wr-on); }
#draftTargetsModal .dtb-k-TE  { background: var(--jt-pos-te);  color: var(--jt-pos-te-on); }
#draftTargetsModal .dtb-k-K   { background: var(--jt-pos-k);   color: var(--jt-pos-k-on); }
#draftTargetsModal .dtb-k-DST { background: var(--jt-pos-def); color: var(--jt-pos-def-on); }
/* Flex slots get the theme's own flex colours — amber for FLEX, indigo for
   superflex — so a slot that accepts several positions doesn't wear one of
   their colours and read as dedicated. */
#draftTargetsModal .dtb-k-FLEX      { background: var(--jt-pos-flex); color: var(--jt-pos-flex-on); }
#draftTargetsModal .dtb-k-WRT       { background: var(--jt-pos-flex); color: var(--jt-pos-flex-on); }
#draftTargetsModal .dtb-k-WR2       { background: var(--jt-pos-rbwr); color: var(--jt-pos-rbwr-on); }
#draftTargetsModal .dtb-k-RECFLEX   { background: var(--jt-pos-wrte); color: var(--jt-pos-wrte-on); }
#draftTargetsModal .dtb-k-WRRBFLEX  { background: var(--jt-pos-rbwr); color: var(--jt-pos-rbwr-on); }
#draftTargetsModal .dtb-k-SFLEX,
#draftTargetsModal .dtb-k-SUPERFLEX,
#draftTargetsModal .dtb-k-SF,
#draftTargetsModal .dtb-k-OP        { background: var(--jt-pos-op);   color: var(--jt-pos-op-on); }

#draftTargetsModal .dtb-cap {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .58rem; font-weight: 600; flex: none; cursor: pointer;
    color: var(--jt-accent-blue-text);
}
#draftTargetsModal .dtb-cap:hover { text-decoration: underline; text-underline-offset: 2px; }
#draftTargetsModal .dtb-cap--off  { color: var(--jt-text-disabled-grey); }
#draftTargetsModal .dtb-slot-n {
    margin-left: auto; flex: none;
    font-size: .56rem; color: var(--jt-text-muted); white-space: nowrap;
}
#draftTargetsModal .dtb-slot--dead .dtb-slot-n { color: var(--jt-accent-red-text); font-weight: 700; }
#draftTargetsModal .dtb-slot-x {
    flex: none; border: none; background: transparent; cursor: pointer;
    color: var(--jt-text-disabled-grey); font-size: .54rem; padding: 0 2px;
}
#draftTargetsModal .dtb-slot-x:hover { color: var(--jt-accent-red); }

/* ── a target row ── */
#draftTargetsModal .dtb-t {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 8px 3px 10px; font-size: .72rem;
    border-top: 1px solid var(--jt-border-muted);
    cursor: grab;
}
#draftTargetsModal .dtb-t:first-of-type { border-top: none; }
#draftTargetsModal .dtb-t:hover { background: var(--jt-bg-hover); }
#draftTargetsModal .dtb-t.dtb-dragging { opacity: .35; }
#draftTargetsModal .dtb-ord {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .58rem; color: var(--jt-text-muted); width: 12px; flex: none;
}
#draftTargetsModal .dtb-nm {
    display: flex; align-items: center; gap: 4px;
    flex: 1; min-width: 0; font-weight: 600; cursor: pointer;
}
#draftTargetsModal .dtb-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
#draftTargetsModal .dtb-nm:hover .dtb-name {
    color: var(--jt-accent-blue-hover);
    text-decoration: underline; text-underline-offset: 2px;
}
#draftTargetsModal .dtb-nm .injury-designation {
    flex: none; font-size: .52rem; padding: 0 3px; line-height: 1.5;
}
#draftTargetsModal .dtb-nm .player-note-badge,
#draftTargetsModal .dtb-nm .player-note-pip { flex: none; }
#draftTargetsModal .dtb-rk {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .56rem; color: var(--jt-text-muted); flex: none;
}
#draftTargetsModal .dtb-pr {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .58rem; color: var(--jt-text-secondary); flex: none;
    min-width: 26px; text-align: right;
}
/* Not an error — just the thing worth knowing before you bid. */
#draftTargetsModal .dtb-pr--over { color: var(--jt-accent-red-text); font-weight: 700; }
#draftTargetsModal .dtb-t-x {
    flex: none; border: none; background: transparent; cursor: pointer;
    color: var(--jt-text-disabled-grey); font-size: .58rem; padding: 0 2px;
}
#draftTargetsModal .dtb-t-x:hover { color: var(--jt-accent-red); }

/* Gone to someone else. He stays visible so the list can't silently reshuffle
   under you mid-draft. */
#draftTargetsModal .dtb-t--gone { opacity: .45; }
#draftTargetsModal .dtb-t--gone .dtb-name { text-decoration: line-through; }
/* Gone to YOU. */
#draftTargetsModal .dtb-t--mine { background: var(--jt-accent-green-bg); }
#draftTargetsModal .dtb-t--mine .dtb-name { color: var(--jt-accent-green-text); }
#draftTargetsModal .dtb-t--mine .dtb-ord  { color: var(--jt-accent-green-text); font-weight: 700; }
/* Who you're bidding on. */
#draftTargetsModal .dtb-t--next { background: var(--jt-accent-blue-bg); }

#draftTargetsModal .dtb-drop {
    margin: 5px 8px; padding: 6px;
    border: 1px dashed var(--jt-border-secondary); border-radius: 6px;
    font-size: .62rem; color: var(--jt-text-muted); text-align: center; cursor: pointer;
}
#draftTargetsModal .dtb-drop:hover {
    border-color: var(--jt-accent-blue-border); color: var(--jt-accent-blue-text);
}
#draftTargetsModal .dtb-drop--jerry {
    border-color: var(--jt-accent-purple-border); color: var(--jt-accent-purple-text);
}

#draftTargetsModal .dtb-plan-ft {
    display: flex; gap: 5px; align-items: center; flex-wrap: wrap;
    padding: 5px 9px; border-top: 1px solid var(--jt-border-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .58rem; color: var(--jt-text-muted);
}
#draftTargetsModal .dtb-good { color: var(--jt-accent-green-text); }
#draftTargetsModal .dtb-warn { color: var(--jt-accent-amber-text); }
#draftTargetsModal .dtb-bad  { color: var(--jt-accent-red-text); font-weight: 700; }

/* ── empty state ── */
#draftTargetsModal .dtb-empty {
    padding: 40px 28px; max-width: 62ch; margin: 0 auto;
    color: var(--jt-text-secondary); font-size: .8rem; line-height: 1.55;
}
#draftTargetsModal .dtb-empty b { color: var(--jt-text-primary); font-size: .9rem; }
#draftTargetsModal .dtb-empty-note {
    margin-top: 14px; padding: 10px 12px; border-radius: 6px;
    background: var(--jt-accent-amber-bg); color: var(--jt-accent-amber-text);
    border: 1px solid var(--jt-accent-amber-border); font-size: .74rem;
}

/* ── phones ── */
@media (max-width: 640px) {
    #draftTargetsModal .dtb-cols { flex-direction: column; }
    #draftTargetsModal .dtb-col--add { max-width: none; }
}

/* ── print ────────────────────────────────────────────────────────────────
   Scoped to this surface's own body class. Several modules ship a "print only
   me" rule and whichever sits on top wins — which is how printing the cheat
   sheet once produced the Player List. The guard on .jt-print-targets is what
   ends that race. */
@media print {
    body.jt-print-targets > :not([data-jt-print-root]) { display: none !important; }
    body.jt-print-targets #draftTargetsModal .dtb-backdrop { display: none !important; }
    body.jt-print-targets #draftTargetsModal .dtb-shell {
        position: static; display: block; pointer-events: auto;
    }
    body.jt-print-targets #draftTargetsModal .dtb-modal {
        position: static; width: auto; height: auto; max-width: none; max-height: none;
        border: none; box-shadow: none; overflow: visible;
        background: #fff; color: #000;
    }
    body.jt-print-targets #draftTargetsModal .dtb-body { overflow: visible; background: #fff; }
    body.jt-print-targets #draftTargetsModal .dtb-close,
    body.jt-print-targets #draftTargetsModal .dtb-actions-mount,
    body.jt-print-targets #draftTargetsModal .dtb-bar,
    body.jt-print-targets #draftTargetsModal .dtb-drop,
    body.jt-print-targets #draftTargetsModal .dtb-t-x,
    body.jt-print-targets #draftTargetsModal .dtb-slot-x,
    body.jt-print-targets #draftTargetsModal .dtb-plan-x { display: none !important; }
    /* A plan is read top to bottom on paper; never split a slot across pages. */
    body.jt-print-targets #draftTargetsModal .dtb-slot { break-inside: avoid; page-break-inside: avoid; }
    body.jt-print-targets #draftTargetsModal .dtb-col  { break-inside: avoid; page-break-inside: avoid; }
    /* Standby plans print at full strength — on paper there is no hover to
       recover them with. */
    body.jt-print-targets #draftTargetsModal .dtb-col--standby { opacity: 1; }
    body.jt-print-targets #draftTargetsModal .dtb-col--add { display: none !important; }
    @page { size: landscape; margin: 10mm; }
}