/*
 * board-cards.css — the performance card's looks, shared by every board.
 *
 * The companion of assets/board-cards.js: that file decides what a card SAYS, this one decides how it
 * looks. They were both inside dashboard.html until 2026-09-10; the custom board needs the same cards,
 * and a second copy of either is the copy that rots.
 *
 * Moving these was safe to do without reordering anything, and that was checked rather than assumed:
 * of the 584 rules in the page's stylesheet, exactly 36 mention a card class, NO other rule targets
 * one, and none of them appear inside a media query — so nothing competes with these and the cascade
 * cannot change. (Verified by tools/validate.js, which fails if a card selector reappears in the page.)
 *
 * Two rules here reach past the performance card on purpose: the hover underline and the
 * pointer-cursor affordance are shared with the post and ad cards, so that all three card surfaces
 * mean the same thing by the same mark. They are harmless on a page that has no post cards.
 */

    /* Empty-state that explains a metric filter rather than implying missing data. */
    .metric-na-msg { font-style: italic; }
    /* Auto video-only badge: shown on IG/FB columns that a Views filter switched to video posts. */
    .auto-video-badge {
      display: flex; align-items: center; gap: 4px;
      margin: 6px 8px 4px; padding: 4px 8px;
      background: #FFF4E0; border: 1px solid #FFD98A; border-radius: 6px;
      color: #9A6A12; font-size: 10.5px; font-weight: 600; line-height: 1.3;
      cursor: help; letter-spacing: 0.01em;
    }
    /* Two-column founder row: account | metrics */
    .founder-row {
      display: flex;
      gap: 8px;
      padding: 8px 12px;
      border-bottom: 1px solid var(--border);
    }
    .founder-row:last-child { border-bottom: none; }
    .founder-row.is-pinned {
      background: rgba(255, 184, 59, 0.10);
      border-radius: 6px;
      margin-bottom: 2px;
    }
    .rank-badge.pin-badge {
      background: rgba(255, 184, 59, 0.20);
      color: #b8860b;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pinned-divider {
      border: none;
      border-top: 1px solid rgba(255, 184, 59, 0.35);
      margin: 6px 8px;
    }
    /* ── Account column ── */
    .founder-account {
      width: 88px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    /* ── OPEN THE ACCOUNT ON ITS OWN PLATFORM ────────────────────────────────────────────────
       The card already tells you who and how well; this is the way OUT to the source. The icon
       matches the one the post cards use so both cards mean the same thing by the same mark.
       `.acct-open` wraps things that already had a look of their own — an avatar, a name — so it
       inherits everything and only adds the pointer. */
    a.acct-open { color: inherit; text-decoration: none; cursor: pointer; }
    a.acct-open:hover .founder-name,
    a.acct-open:hover .post-author-name { text-decoration: underline; }
    /* Top-right of the card, in the gutter beside the avatar — the corner the eye leaves from. */
    .acct-open-icon {
      position: absolute; top: 0; right: 0;
      display: flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; border-radius: 4px;
      color: #aaa; opacity: .75; transition: opacity .15s, color .15s, background .15s;
    }
    .acct-open-icon:hover { opacity: 1; color: var(--text-primary, #1a1a1a); background: rgba(0,0,0,.06); }
    .founder-row .acct-open-icon { z-index: 2; }
    .account-top {
      position: relative;
      display: flex;
      align-items: flex-end;
      /* padding-top removed — reclaimed for the MRR line below.
         Rank badge sits in the avatar's left gutter (margin-left:15px) at top:0. */
      margin-bottom: 4px;
    }
    .rank-badge {
      position: absolute;
      top: 0;             /* original position — sits in the 15px left gutter, fully visible */
      left: 0;
      z-index: 2;         /* keep above avatar in case of any slight overlap */
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #17AE42;
      color: #fff;
      font-size: 9px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    .founder-avatar {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      overflow: hidden;
      background: #f0f0f0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-left: 15px;
    }
    .founder-avatar img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .avatar-initials {
      font-size: 14px;
      font-weight: 500;
      color: #999;
      user-select: none;
    }
    .founder-name {
      font-size: 11px;
      font-weight: 500;
      color: #964B00;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .founder-followers {
      font-size: 10px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 3px;
    }
    .founder-mrr {
      font-size: 10px;
      color: #1a8a4a;          /* green to read as "money/positive" */
      font-weight: 400;
      display: flex;
      align-items: center;
      gap: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* One-time / non-subscription revenue. Same money-green as recurring MRR (it IS real revenue),
       but marked so the number is never mistaken for recurring MRR. See ONE_TIME_MRR_TIP. */
    .mrr-onetime-mark {
      font-size: 0.72em;
      font-weight: 700;
      margin-left: 2px;
      opacity: 0.75;
      cursor: help;
      vertical-align: super;
      line-height: 0;
    }
    .founder-mrr.is-onetime { cursor: help; }
    .founder-mrr.is-unknown {
      color: var(--text-muted);
      font-weight: 500;
    }
    .mrr-bar-track {
      width: 100%;
      height: 5px;
      background: #e8e8e8;
      border-radius: 2px;
      overflow: hidden;
      margin-top: 2px;
    }
    .mrr-bar-fill {
      height: 100%;
      background: #7FB996;     /* discreet green — softer than the #1a8a4a MRR text */
      border-radius: 2px;
      min-width: 0;            /* allow true-zero width when MRR is 0/null */
    }
    .follower-bar-track {
      width: 100%;
      height: 5px;
      background: #e8e8e8;
      border-radius: 2px;
      overflow: hidden;
      margin-top: 2px;
    }
    .follower-bar-fill {
      height: 100%;
      background: #B6804B;
      border-radius: 2px;
      min-width: 2px;
    }
    /* ── Metrics column ── */
    .founder-metrics {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .metric-bars {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .metric-bar-row { display: flex; align-items: center; gap: 2px 4px; }
    .bar-track {
      width: 45px;
      min-width: 45px;
      flex-shrink: 0;
      height: 10px;
      background: #eeeeee;
      border-radius: 2px;
      overflow: hidden;
    }
    .bar-fill {
      height: 100%;
      border-radius: 2px;
      min-width: 2px;
    }
    .metric-name {
      flex: 1;
      font-size: 10px;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: visible;
    }
    .metric-val {
      width: 36px;
      flex-shrink: 0;
      font-size: 10px;
      color: var(--text-muted);
      text-align: right;
      white-space: nowrap;
    }
    .founder-avatar[data-acct-hover],
    .post-avatar-wrap[data-acct-hover],
    .ad-avatar-hov[data-acct-hover],
    .gantt-avatar-wrap[data-acct-hover] { box-shadow: 0 0 0 1.5px rgba(0,0,0,.07); }