/*
 * assets/board-ads.css — WHAT AN AD CARD LOOKS LIKE. Shared by every board that draws ads, so the
 * custom board is styled by the same rules as the boards it is sold beside.
 *
 * Moved out of dashboard.html on 2026-09-10, alongside assets/board-ads.js which owns the markup.
 * 🔴 A STYLESHEET REGRESSION IS INVISIBLE TO THE MARKUP TEST: tools/ad_render_equivalence.cjs
 * compares HTML, and the HTML is identical whether these rules load or not. If you change anything
 * here, look at the page.
 *
 * ⚠️ NOT everything an ad card needs is in this file. The card body reuses the organic-post media
 * machinery — .post-media-wrap, the YouTube thumb and play overlay, the inline video player, the
 * read-more control and the load-more button — and those rules still live in each page. A page that
 * loads this file and not those draws cards whose media area is unstyled, which looks like a broken
 * image rather than a missing rule.
 */

    /* Ads platform columns */
    #ads-columns-block {
      display: flex;
      flex-direction: row;
      gap: 16px;
      padding: 24px 24px 32px 24px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    #ads-columns-block::-webkit-scrollbar { display: none; }
    .ad-platform-col {
      width: 300px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      border-top: none;
      border-radius: 12px;
      background: #ffffff;
      overflow: visible;
      position: relative;
      transition: width 0.25s ease, opacity 0.25s ease;
    }
    .ads-columns-row.has-expanded .ad-platform-col { opacity: 0.25; transition: opacity 0.25s ease; }
    .ads-columns-row.has-expanded .ad-platform-col.expanded { opacity: 1; }
    .ad-platform-col.expanded { width: calc(300px * 3 + 16px * 2); }
    .ad-col-expand-btn {
      position: absolute;
      right: -14px;
      top: 230px;
      width: 14px;
      height: 40px;
      background: #344072;
      border-radius: 0 6px 6px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      color: #FFB83B;
      font-size: 14px;
      border: none;
      padding: 0;
    }
    .ad-col-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 12px;
      border-bottom: 1px solid #e5e5e5;
      flex-shrink: 0;
      position: relative;
    }
    .ad-col-header svg { display: block; width: 15px; height: 15px; flex-shrink: 0; }
    .ad-col-platform-name { font-size: 12px; font-weight: 500; color: #1a1a1a; }

    /* ── AD COLUMN INFO POPOVER ────────────────────────────── */
    .ad-col-info-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      margin-left: 4px;
      padding: 0;
      border: none;
      background: transparent;
      color: #999;
      cursor: pointer;
      border-radius: 50%;
      transition: color 0.15s;
      flex-shrink: 0;
    }
    .ad-col-info-btn:hover { color: #555; }
    .ad-col-info-btn svg { width: 14px; height: 14px; display: block; }

    .ad-col-info-popover {
      position: absolute;
      top: 100%;
      left: 0;
      margin-top: 6px;
      width: 280px;
      padding: 12px 14px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
      font-family: 'DM Sans', sans-serif;
      font-size: 12px;
      line-height: 1.5;
      color: #333;
      z-index: 100;
      display: none;
    }
    .ad-col-info-popover.open { display: block; }
    .ad-col-info-popover strong { color: #1a1a1a; font-weight: 600; }
    .ad-col-info-popover p { margin: 0 0 8px 0; }
    .ad-col-info-popover p:last-child { margin-bottom: 0; }
    .ad-col-info-popover code {
      background: #f3f3f3;
      padding: 1px 5px;
      border-radius: 3px;
      font-size: 11px;
      font-family: 'DM Mono', monospace;
    }
    .ad-col-dropdowns {
      display: flex;
      gap: 6px;
      padding: 8px 12px;
      border-bottom: 1px solid #e5e5e5;
      flex-shrink: 0;
    }
    .ad-col-dropdown {
      font-family: 'DM Sans', sans-serif;
      font-size: 11px;
      border: 1px solid #e5e5e5;
      border-radius: 6px;
      padding: 3px 8px;
      background: #fff;
      color: #1a1a1a;
      cursor: pointer;
      flex: 1;
    }
    .ad-col-body {
      /* Bounded height + internal scroll, matching .post-col-body (the organic tab). WITHOUT the cap
         the body grew unbounded and the flex row stretched the column to the tallest sibling's
         ~7500px 20-card list — which is what left the huge gap when a column was expanded. A capped
         body means every column is the same height and scrolls internally, so an expanded column
         sizes to that same height and the siblings stay fully visible (dimmed) — no collapse hack. */
      max-height: calc(100vh + 300px);
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: thin;
      scrollbar-color: #cccccc transparent;
    }
    .ad-col-body.grid-view {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      align-items: start;
      /* align-content:start guards the few-cards case: if the grid content is shorter than the
         capped body height, a grid's default align-content (stretch) would balloon the rows to fill
         it and leave gaps. start packs rows to their content height. */
      align-content: start;
      padding: 12px;
    }
    .ad-col-body.grid-view .ad-card {
      border: 1px solid #e5e5e5;
      border-radius: 10px;
      margin-bottom: 0;
    }
    .ad-col-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      color: #aaa;
      font-size: 13px;
    }

    /* Ad cards */
    .ad-card { padding: 12px; background: #fff; }
    /* Single column (non-expanded): rounded cards with gap */
    .ad-col-body:not(.grid-view) .ad-card {
      margin: 8px 10px;
      border: 1px solid #e5e5e5;
      border-radius: 10px;
    }
    .ad-card-row-a {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 8px;
    }
    .ad-card-left { display: flex; align-items: center; gap: 8px; flex-shrink: 1; min-width: 0; }   /* no overflow:hidden here — it clipped the hoverable-avatar ring; the name stack below clips instead */
    .ad-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
    .ad-avatar-fallback {
      width: 28px; height: 28px; border-radius: 50%;
      background: #344072; color: #FFB83B;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 600; flex-shrink: 0;
    }
    .ad-name-stack { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }   /* truncates the name/domain (moved off .ad-card-left) */
    .ad-account-name { font-size: 13px; font-weight: 600; color: #964B00; }
    .ad-domain { font-size: 11px; color: #888; }
    .ad-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
    .ad-date-range { display: flex; align-items: center; gap: 3px; font-size: 11px; color: #555; white-space: nowrap; }
    /* Stands in for the date line when an ad has no published run dates — deliberately quiet and
       calendar-less, so it reads as a stated fact rather than a date that failed to load. */
    .ad-no-dates {
      font-size: 10px; color: #8a8f9c; background: #f2f4f7; border-radius: 999px;
      padding: 2px 7px; white-space: nowrap; cursor: default;
    }
    /* One-line note under a column header (LinkedIn: why undated ads ignore the date picker). */
    .ad-col-note {
      margin: 0 10px 8px; padding: 7px 9px; background: #f7f9fc; border: 1px solid #e6ebf2;
      border-radius: 6px; font-size: 11px; line-height: 1.45; color: #5b6478;
    }
    .ad-col-note strong { color: #2f3646; font-weight: 700; }
    .ad-last-shown { font-size: 10px; color: #aaa; }
    .ad-sub-platforms { display: flex; gap: 3px; margin-top: 2px; }
    .ad-sub-icon {
      display: inline-flex; width: 14px; height: 14px;
      overflow: hidden; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .ad-sub-icon svg { width: 14px; height: 14px; }
    .ad-card-row-b { margin-bottom: 8px; }
    .ad-copy-text {
      font-size: 13px; color: #1a1a1a;
    }
    .ad-card-row-c { margin-bottom: 8px; }
    .ad-video-ph {
      position: relative; aspect-ratio: 16/9; background: #111;
      display: flex; align-items: center; justify-content: center;
      border-radius: 6px; overflow: hidden;
    }
    .ad-play-btn {
      width: 44px; height: 44px; background: #cc0000; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
    }