/* ========================================================================== */ /* group-trades.css — R-057 T2 visual identity package per D-117 + D-070 */ /* Per-feature CSS module joining canonical-15 → canonical-16 at S46. */ /* Loaded via in index.html . */ /* ========================================================================== */ /* Group identity colors live in theme-shared.css Tier 0 (--badge-group-wallets + --badge-group-wallets-soft) per S66 Phase D — operator-approved single-hex constant across all themes; the prior @media (prefers-color-scheme: dark) variant was a pre-4-theme-system artifact and has been retired. */ /* Group leader card — inset top-edge accent stripe per D-117. Layered ON TOP of the existing .tc-card per-row PnL accent (which lives on background-image gradient); .tc-group-card adds an inset shadow stripe at the top edge as a second visual marker. */ .tc-card.tc-group-card { box-shadow: inset 0 3px 0 var(--badge-group-wallets), 0 2px 10px rgba(0,0,0,0.3); } /* Subtle body tint per D-117 (~3% saturation shift; uses theme-aware soft accent) */ .tc-card.tc-group-card::before { content: ""; position: absolute; inset: 0; background: var(--badge-group-wallets-soft); pointer-events: none; border-radius: inherit; z-index: 0; } .tc-card.tc-group-card { position: relative; } .tc-card.tc-group-card > * { position: relative; z-index: 1; } /* GROUP (N) badge — header chip clickable to dedicated tab (T5 placeholder). S68 Rev A3: normalized to universal badge language (dark bg + identity-color text + subtle border) to sit visually as a peer of STRATEGY/TP/LIVE/WALLET badges. Purple identity preserved via text color. */ .tc-group-badge { display: inline-flex; align-items: center; justify-content: center; padding: 3px 9px; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; background: rgba(0,0,0,0.35); color: var(--badge-group-wallets); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-sm); cursor: pointer; user-select: none; vertical-align: middle; transition: filter 120ms ease; } .tc-group-badge:hover { filter: brightness(1.15); } /* Intel drawer addendum — PARTICIPATING WALLETS section per D-117 */ .ic-participants { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border-default); border-left: 3px solid var(--badge-group-wallets); border-radius: 4px; background: var(--surface-raised); } .ic-participants-header { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } /* Subgrid parent — defines columns ONCE so all rows align vertically. Justify-content: center → whole grid centers within section width. Each .ic-participants-row uses grid-template-columns: subgrid to inherit these tracks. */ .ic-participants-grid { display: grid; grid-template-columns: auto auto auto auto; justify-content: center; gap: 0; } .ic-participants-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; column-gap: 28px; align-items: center; padding: 10px 16px; font-size: 12px; border-bottom: 1px solid var(--border-default); } .ic-participants-row:last-child { border-bottom: none; } .ic-participants-row .name { font-weight: 600; } .ic-participants-row .alloc { color: var(--text-muted); font-size: 11px; text-align: center; min-width: 80px; } /* SOL / Tokens stacked mini-grid — descriptors left-aligned, values right-aligned, vertically stacked rows */ .ic-participants-data { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center; } .ic-participants-data .data-label { font-size: 9px; letter-spacing: 0.7px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); text-align: left; } .ic-participants-data .data-value { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } .ic-participants-decouple { display: flex; align-items: center; justify-content: flex-end; min-width: 88px; } .ic-participants-row .decouple-btn { font-size: 10px; padding: 4px 10px; background: transparent; border: 1px solid var(--border-default); color: var(--text-muted); border-radius: 3px; cursor: pointer; } .ic-participants-row .decouple-btn:hover { border-color: var(--global-red); color: var(--global-red); } /* ── R-057 T3 (S47, D-114 + D-156) — NEEDS_OPERATOR + decoupled-note styling ── */ /* Leader-card top-of-card "NEEDS OP (k)" red badge — sits next to GROUP(N). Appears when any sibling in the group has groupFanOutStatus === 'NEEDS_OPERATOR'. */ .tc-needs-operator-badge { display: inline-block; padding: 2px 8px; margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; background: var(--global-red); color: #fff; border-radius: 3px; user-select: none; vertical-align: middle; transition: filter 120ms ease; } .tc-needs-operator-badge:hover { filter: brightness(1.1); } /* Per-sibling NEEDS OP badge inside Intel drawer participants row */ .ic-needs-operator-badge { display: inline-block; padding: 1px 6px; margin-left: 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; background: var(--global-red); color: #fff; border-radius: 2px; vertical-align: middle; } /* Per-sibling row variant — subtle red left border indicates the row that needs operator attention. */ .ic-participants-row.needs-operator { border-left: 3px solid var(--global-red); background: rgba(204, 43, 43, 0.04); /* translucent --global-red #CC2B2B */ } /* Footnote line shown when one or more siblings have been decoupled. Reminds operator that those rows exist as standalone cards elsewhere. */ .ic-participants-decoupled-note { margin-top: 8px; padding: 8px 12px; font-size: 11px; font-style: italic; color: var(--text-muted); border-top: 1px dashed var(--border-default); } /* Group preview dialog — D-112 dialog-preview affordance shown before commit on group entry */ .gt-preview-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; } .gt-preview-modal { background: var(--surface-raised); border: 1px solid var(--border-default); border-left: 3px solid var(--badge-group-wallets); border-radius: 6px; padding: 20px 24px; min-width: 360px; max-width: 480px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); } .gt-preview-title { font-size: 14px; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 12px; } .gt-preview-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--border-default); } .gt-preview-row:last-of-type { border-bottom: none; margin-bottom: 12px; } .gt-preview-row .pw-name { font-weight: 600; } .gt-preview-row .pw-mult { color: var(--text-muted); font-size: 11px; } .gt-preview-row .pw-sol { font-weight: 600; } .gt-preview-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; } .gt-preview-btn { padding: 6px 14px; font-size: 12px; border: 1px solid var(--border-default); border-radius: 4px; cursor: pointer; background: transparent; color: var(--text-primary); } .gt-preview-btn.confirm { background: var(--badge-group-wallets); border-color: var(--badge-group-wallets); color: #fff; } .gt-preview-btn.confirm:hover { filter: brightness(1.1); } .gt-preview-btn.cancel:hover { border-color: var(--text-muted); } /* ── R-057 T5 (S60) — GROUPED POSITIONS dedicated tab ── */ /* Container wrapping one group (header row + member trade cards). No horizontal margin so inner trade cards line up edge-to-edge with OPEN POSITIONS cards. */ .group-card-container { margin: 12px 0; padding: 0; border: 1px solid var(--border-default); border-left: 4px solid var(--badge-group-wallets); border-radius: 6px; background: var(--surface-raised); overflow: hidden; } .group-card-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--badge-group-wallets-soft); border-bottom: 1px solid var(--border-default); gap: 16px; flex-wrap: wrap; } .group-card-header-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .group-card-header-right { display: flex; gap: 16px; font-size: 11px; color: var(--text-muted); flex-wrap: wrap; } .group-card-title { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; color: var(--badge-group-wallets); } .group-card-wallets { font-size: 11px; color: var(--text-muted); letter-spacing: 0.3px; } .group-card-stat { display: inline-flex; align-items: baseline; gap: 6px; font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; } .group-card-stat-value { font-weight: 700; font-size: 12px; color: var(--text-primary); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: normal; } .group-card-members { display: flex; flex-direction: column; gap: 8px; padding: 0; } /* Filter chip shown when GROUPED POSITIONS is scoped to a single group via GROUP(N) badge click */ .gt-filter-chip { display: inline-flex; align-items: center; gap: 10px; margin: 12px 16px 4px; padding: 6px 12px; background: var(--badge-group-wallets-soft); border: 1px solid var(--badge-group-wallets); border-radius: 16px; font-size: 12px; color: var(--text-primary); } .gt-filter-chip code { background: rgba(0,0,0,0.15); padding: 1px 6px; border-radius: 3px; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .gt-filter-chip-clear { cursor: pointer; font-weight: 700; color: var(--badge-group-wallets); user-select: none; padding: 2px 4px; transition: filter 120ms ease; } .gt-filter-chip-clear:hover { filter: brightness(1.2); } /* R-057 T5 (S60) — inline sort controls variant for GROUPED POSITIONS. Strips the drawer-context padding from .sort-controls so the controls sit flush inside the lp-toggle-bar (which already has its own 12px 24px 8px padding). */ .sort-controls.sort-controls-inline { padding: 0; width: 100%; }