/* PORTED VERBATIM from vo-app-marketing-hub/apps/Marketing-Hub/marketing-hub-social.css, minus 2 rule(s)
   whose selectors name a class crm.css / ax-containers.css already own.
   DO NOT EDIT — node tools/port-marketing-hub.cjs */
/* ================================================================
   marketing-hub-social.css — Social Media tab styles
   ================================================================ */

/* ── Channel cards ── */
.ms-channel-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px;
  background: var(--glass1, rgba(255,255,255,.06)); border: 1px solid var(--border1, rgba(255,255,255,.08));
  cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s;
}

.ms-channel-card:hover { background: var(--glass2, rgba(255,255,255,.10)); border-color: var(--wt-theme-primary, #6366f1); box-shadow: 0 2px 12px rgba(99,102,241,.12); }

.ms-channel-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}

.ms-channel-icon svg { width: 22px; height: 22px; }

.ms-channel-icon.ms-linkedin  { background: #e0e7ff; }

.ms-channel-icon.ms-instagram { background: #fce7f3; }

.ms-channel-icon.ms-facebook  { background: #dbeafe; }

.ms-channel-icon.ms-twitter   { background: #f1f5f9; }

.ms-channel-icon.ms-youtube   { background: #fee2e2; }

.ms-channel-info { flex: 1; min-width: 0; }

.ms-channel-name { font-size: 13px; font-weight: 600; color: var(--ink1, #fff); }

.ms-channel-sub  { font-size: 10px; color: var(--ink3, #999); margin-top: 2px; }

.ms-channel-metrics { display: flex; align-items: center; gap: 6px; margin-top: 4px; }

.ms-metric { font-size: 10px; color: var(--ink3, #999); }

.ms-metric-val { font-weight: 700; color: var(--ink2, #ccc); }

.ms-metric-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border1, rgba(255,255,255,.15)); }

.ms-channel-badge {
  padding: 4px 12px; border-radius: 10px; font-size: 10px; font-weight: 600; white-space: nowrap;
}

.ms-badge-connected { background: #defbe6; color: #198038; }

.ms-badge-disconnected { background: var(--glass1, rgba(255,255,255,.06)); color: var(--ink3, #999); border: 1px solid var(--border1, rgba(255,255,255,.08)); }

/* ── Stats row ── */
.ms-stats-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }

.ms-stat-card {
  flex: 1; min-width: 120px; padding: 16px 18px; border-radius: 12px;
  background: var(--surf, #fff); border: 1px solid var(--border, #e0e0e0);
  box-shadow: var(--shadow, 0 2px 10px rgba(0,0,0,.05));
}

.ms-stat-val   { font-size: 24px; font-weight: 800; color: var(--ink, #161616); }

.ms-stat-label  { font-size: 11px; color: var(--ink3, #8d8d8d); margin-top: 4px; font-weight: 500; }

/* ── Calendar grid ── */
.ms-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.ms-calendar-title  { font-size: 14px; font-weight: 700; color: var(--ink1, #fff); }

.ms-calendar-nav    { display: flex; gap: 4px; }

.ms-calendar-nav button {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border1, rgba(255,255,255,.08));
  background: var(--glass1, rgba(255,255,255,.06)); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}

.ms-calendar-nav button svg { width: 14px; height: 14px; stroke: var(--ink2, #ccc); fill: none; stroke-width: 2; }

.ms-calendar-nav button:hover { background: var(--glass2, rgba(255,255,255,.10)); border-color: var(--wt-theme-primary, #6366f1); }

.ms-calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
  border-radius: 10px; overflow: hidden;
}

.ms-cal-day-header {
  text-align: center; font-size: 10px; font-weight: 700; color: var(--ink3, #999);
  text-transform: uppercase; padding: 8px 0; letter-spacing: .5px;
  background: var(--glass1, rgba(255,255,255,.03));
}

.ms-cal-day {
  min-height: 72px; padding: 6px; border-radius: 0;
  background: var(--glass1, rgba(255,255,255,.03)); border: 1px solid transparent;
  font-size: 10px; color: var(--ink3, #999); position: relative;
  transition: background .15s, border-color .15s;
}

.ms-cal-day:hover { background: var(--glass2, rgba(255,255,255,.07)); border-color: var(--border1, rgba(255,255,255,.1)); }

.ms-cal-day.is-today {
  background: rgba(99,102,241,.08); border-color: var(--wt-theme-primary, #6366f1);
}

.ms-cal-day.is-today .ms-cal-day-num { color: var(--wt-theme-primary, #6366f1); }

.ms-cal-day.is-other { opacity: .25; }

.ms-cal-day-num { font-weight: 700; margin-bottom: 4px; font-size: 11px; }

.ms-cal-dot {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin: 1px;
}

.ms-cal-dot.dot-linkedin  { background: #0a66c2; }

.ms-cal-dot.dot-instagram { background: #e1306c; }

.ms-cal-dot.dot-facebook  { background: #1877f2; }

.ms-cal-dot.dot-twitter   { background: #1da1f2; }

/* ── Post list ── */
.ms-post-list { display: flex; flex-direction: column; gap: 6px; }

.ms-post-card {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px;
  background: var(--glass1, rgba(255,255,255,.06)); border: 1px solid var(--border1, rgba(255,255,255,.08));
  cursor: pointer; transition: background .15s;
}

.ms-post-card:hover { background: var(--glass2, rgba(255,255,255,.10)); }

.ms-post-platform { font-size: 16px; width: 32px; text-align: center; flex-shrink: 0; }

.ms-post-body { flex: 1; min-width: 0; }

.ms-post-text { font-size: 11px; color: var(--ink1, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ms-post-meta { font-size: 10px; color: var(--ink3, #999); margin-top: 2px; }

/* ── Empty state ── */
.ms-empty { text-align: center; padding: 40px 20px; }

.ms-empty-icon { margin: 0 auto 12px; width: 48px; height: 48px; opacity: .4; }

.ms-empty-icon svg { width: 100%; height: 100%; stroke: var(--ink3, #999); fill: none; stroke-width: 1.5; }

.ms-empty-title { font-size: 13px; font-weight: 600; color: var(--ink2, #ccc); margin-bottom: 4px; }

.ms-empty-sub { font-size: 11px; color: var(--ink3, #999); margin-bottom: 12px; }

/* ── Compose area ── */
.ms-compose-wrap { display: flex; flex-direction: column; gap: 12px; }

.ms-compose-textarea {
  width: 100%; min-height: 100px; padding: 10px 12px; border-radius: 8px;
  background: var(--glass1, rgba(255,255,255,.06)); border: 1px solid var(--border1, rgba(255,255,255,.08));
  color: var(--ink1, #fff); font-size: 12px; font-family: Inter, sans-serif; resize: vertical;
}

.ms-compose-textarea:focus { border-color: var(--wt-theme-primary, #6366f1); outline: none; }

.ms-compose-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.ms-platform-toggle {
  padding: 4px 10px; border-radius: 14px; font-size: 11px; font-weight: 500;
  background: var(--glass1, rgba(255,255,255,.06)); color: var(--ink2, #ccc);
  border: 1px solid transparent; cursor: pointer; transition: all .15s;
}

.ms-platform-toggle:hover { border-color: var(--wt-theme-primary, #6366f1); }

.ms-platform-toggle.is-active { background: var(--wt-theme-primary, #6366f1); color: #fff; border-color: var(--wt-theme-primary, #6366f1); }

.ms-toggle-logo { display: inline-flex; width: 14px; height: 14px; vertical-align: middle; margin-right: 2px; }

.ms-toggle-logo svg { width: 100%; height: 100%; }

.ms-platform-toggle.is-active .ms-toggle-logo svg { fill: #fff; }

/* Schedule date picker */
.ms-schedule-date {
  padding: 5px 10px; border-radius: 8px; font-size: 11px; font-family: Inter, sans-serif;
  background: var(--glass1, rgba(255,255,255,.06)); border: 1px solid var(--border1, rgba(255,255,255,.08));
  color: var(--ink1, #fff);
}

.ms-schedule-date:focus { border-color: var(--wt-theme-primary, #6366f1); outline: none; }

/* Post platform logo in list */
.ms-post-platform { width: 28px; flex-shrink: 0; }

.ms-post-platform svg { width: 20px; height: 20px; }

/* ================================================================
   Content & Social — account cards, drill-down, post cards
   ================================================================
   Reuses the report-card vocabulary from work.css (.rp-card,
   .rp-card-thumb, .rp-card-stats) so a social account reads like every
   other card in the platform. Only what work.css does not already
   provide lives here. */

.cs-card-list { padding: 4px 2px 8px; }

/* Account cards sit tighter than report cards — there are up to nine. */
.cs-card-list.rp-card-list { grid-template-columns: repeat(3, 1fr); gap: 12px; }

@media (max-width: 1180px) {
.cs-card-list.rp-card-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
.cs-card-list.rp-card-list { grid-template-columns: 1fr; }
}

.cs-acct-card { cursor: pointer; }

.cs-acct-card.is-active {
  border-color: var(--rp-card-c, #6366f1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rp-card-c, #6366f1) 22%, transparent),
              0 8px 24px rgba(0,0,0,.08);
}

/* Thumb: the network's own mark on its own colour. */
.cs-thumb { height: 74px; position: relative; }

.cs-thumb-mark { width: 30px; height: 30px; display: block; }

.cs-thumb-mark svg { width: 100%; height: 100%; display: block; }

/* The brand marks carry their own fill; force white on the coloured thumb
   so a black mark (X, TikTok, Threads) stays visible. */
.cs-thumb-mark svg,
.cs-thumb-mark svg path { fill: #fff !important; }

/* Ghost = a network with no account linked yet. */
.cs-thumb-ghost { background: var(--border-s, #f1f5f9); }

.cs-thumb-ghost .cs-thumb-mark { opacity: .5; }

.cs-thumb-ghost .cs-thumb-mark svg,
.cs-thumb-ghost .cs-thumb-mark svg path { fill: var(--ink4, #94a3b8) !important; }

.cs-acct-card.is-ghost { cursor: default; box-shadow: none; border-style: dashed; }

.cs-acct-card.is-ghost:hover { transform: none; }

/* The account's own avatar, over the corner of the thumb. */
.cs-acct-face {
  position: absolute; right: 10px; bottom: -14px;
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--surf, #fff);
  background: var(--surf, #fff);
}

.cs-acct-card .rp-card-name { font-size: 13px; font-weight: 700; line-height: 1.25; }

.cs-acct-card .rp-card-desc { font-size: 10px; color: var(--ink3, #64748b); }

/* Health tags reuse .rp-card-tag's shape, not its colour. */
.cs-tag-rp-ok   { background: #dcfce7; color: #15803d; }

.cs-tag-rp-warn { background: #fef3c7; color: #b45309; }

.cs-tag-rp-bad  { background: #fee2e2; color: #b91c1c; }

.cs-tag-rp-off  { background: var(--border-s, #f1f5f9); color: var(--ink4, #94a3b8); }

.cs-connect-btn { font-size: 10px; padding: 4px 12px; width: 100%; }

/* ── Drill-down bar ─────────────────────────────────────────────
   Shown only while one account is selected. It has to be obvious that
   every number on screen narrowed, or a filtered view reads as a data
   loss. */
.cs-filterbar {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; margin: 0 0 12px;
  background: var(--wt-theme-primary-soft, #eef2ff);
  border: 1px solid color-mix(in srgb, var(--wt-theme-primary, #6366f1) 25%, transparent);
  border-radius: 10px;
}

.cs-filterbar-mark { width: 18px; height: 18px; flex: 0 0 18px; }

.cs-filterbar-mark svg { width: 100%; height: 100%; display: block; }

.cs-filterbar-txt { font-size: 11.5px; color: var(--ink2, #334155); flex: 1; min-width: 0; }

.cs-filterbar-txt b { color: var(--ink1, #0f172a); }

.cs-clear-filter { font-size: 10px; padding: 4px 10px; flex: 0 0 auto; }

/* ── Post rows ──────────────────────────────────────────────────
   The platform mark is the primary identifier on a post, so it gets a
   fixed gutter and never shrinks. */
.cs-post-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 4px; border-bottom: 1px solid var(--line, #eef2f7); }

.cs-post-row:last-child { border-bottom: 0; }

.cs-post-marks { display: flex; gap: 2px; flex: 0 0 auto; margin-top: 1px; }

.cs-post-mark { width: 16px; height: 16px; display: inline-block; }

.cs-post-mark svg { width: 100%; height: 100%; display: block; }

.cs-post-main { flex: 1; min-width: 0; }

.cs-post-text { font-size: 11px; line-height: 1.4; color: var(--ink1, #0f172a); }

.cs-post-meta { font-size: 10px; color: var(--ink3, #64748b); margin-top: 2px; }

.cs-post-link { font-size: 10px; color: var(--brand, #16a34a); text-decoration: none; flex: 0 0 auto; }

.cs-post-link:hover { text-decoration: underline; }

/* ── Linked-accounts header ─────────────────────────────────────── */
.cs-linked-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 2px 2px 12px;
}

.cs-linked-title { display: flex; align-items: baseline; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink1, #0f172a); }

.cs-linked-count { font-size: 20px; font-weight: 800; line-height: 1; color: var(--wt-theme-primary, #6366f1); }

.cs-linked-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.cs-metrics-note { font-size: 10.5px; color: var(--ink4, #94a3b8); font-style: italic; }

.cs-pfm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--border-s, #f1f5f9); color: var(--ink2, #334155);
  font-size: 11px; white-space: nowrap;
}

.cs-pfm-mark { width: 13px; height: 13px; display: block; color: var(--wt-theme-primary, #6366f1); }

.cs-pfm-mark svg { width: 100%; height: 100%; display: block; }

.cs-pfm-txt b { color: var(--ink1, #0f172a); }

.cs-pfm-link { font-size: 11px; color: var(--wt-theme-primary, #6366f1); text-decoration: none; white-space: nowrap; }

.cs-pfm-link:hover { text-decoration: underline; }

/* ── Stat row ───────────────────────────────────────────────────
   The work.css .rp-card-stats rule is flex-wrap, which let a 4th stat drop
   onto its own line and stranded "RATE" under the card. Four fixed columns
   keep every card the same height whatever the numbers are. */
.cs-acct-card .rp-card-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; flex-wrap: nowrap;
}

.cs-acct-card .rp-card-stat { min-width: 0; padding: 2px; }

.cs-acct-card .rp-card-stat-val { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cs-acct-card .rp-card-stat-lbl { font-size: 8.5px; letter-spacing: .3px; }

.cs-acct-card .rp-card-name { overflow-wrap: anywhere; }

/* ── Link-another-network footer ────────────────────────────────
   Replaces one placeholder card per unlinked network — nine of those buried
   the real accounts. */
.cs-linked-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 12px;
  border: 1px dashed var(--border, #e2e8f0); border-radius: 10px;
}

.cs-linked-foot-txt { font-size: 11px; color: var(--ink3, #64748b); }

.cs-linked-foot-marks { display: flex; gap: 6px; flex-wrap: wrap; }

.cs-foot-mark {
  width: 28px; height: 28px; padding: 5px; cursor: pointer;
  border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
  background: var(--surf, #fff); opacity: .55;
  transition: opacity .15s, transform .15s, border-color .15s;
}

.cs-foot-mark svg { width: 100%; height: 100%; display: block; }

.cs-foot-mark:hover { opacity: 1; transform: translateY(-1px); border-color: var(--wt-theme-primary, #6366f1); }

/* ── Channel profile popup ──────────────────────────────────────── */
.cs-modal-host { display: none; }

.cs-modal-host.is-open { display: block; }

.cs-modal-backdrop {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(15, 23, 42, .55);
  animation: csFade .16s ease-out;
}

.cs-modal {
  position: fixed; z-index: 4001;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(760px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  display: flex; flex-direction: column;
  background: var(--surf, #fff);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
  animation: csRise .18s ease-out;
}

@keyframes csFade { from { opacity: 0; } to { opacity: 1; } }

@keyframes csRise { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }

.cs-modal-hero { height: 92px; position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }

.cs-modal-mark { width: 38px; height: 38px; }

.cs-modal-mark svg, .cs-modal-mark svg path { fill: #fff !important; }

.cs-modal-x {
  position: absolute; top: 10px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 0; cursor: pointer; font-size: 19px; line-height: 1;
  background: rgba(255, 255, 255, .22); color: #fff;
}

.cs-modal-x:hover { background: rgba(255, 255, 255, .35); }

.cs-modal-id { display: flex; align-items: center; gap: 12px; padding: 0 20px; margin-top: -22px; flex: 0 0 auto; }

.cs-modal-face {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--surf, #fff); background: var(--surf, #fff); flex: 0 0 auto;
}

.cs-modal-face-blank {
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: var(--ink3, #64748b);
  background: var(--border-s, #f1f5f9);
}

.cs-modal-idtext { flex: 1; min-width: 0; padding-top: 20px; }

.cs-modal-name { font-size: 15px; font-weight: 700; color: var(--ink1, #0f172a); }

.cs-modal-handle { font-size: 11px; color: var(--ink3, #64748b); margin-top: 1px; }

.cs-modal-id .rp-card-tag { align-self: flex-end; }

.cs-modal-body { padding: 16px 20px 4px; overflow-y: auto; flex: 1; }

.cs-modal-stats {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  border: 1px solid var(--border-s, #f1f5f9); border-radius: 10px;
  padding: 10px 4px; margin-bottom: 16px;
}

.cs-modal-stat { text-align: center; min-width: 0; padding: 0 4px; }

.cs-modal-stat + .cs-modal-stat { border-left: 1px solid var(--border-s, #f1f5f9); }

.cs-modal-stat-v { font-size: 16px; font-weight: 800; color: var(--ink1, #0f172a); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }

.cs-modal-stat-l { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink4, #94a3b8); margin-top: 3px; }

.cs-modal-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

@media (max-width: 640px) {
.cs-modal-split { grid-template-columns: 1fr; }

.cs-modal-stats { grid-template-columns: repeat(3, 1fr); row-gap: 10px; }

.cs-modal-stat + .cs-modal-stat { border-left: 0; }
}

.cs-modal-col { min-width: 0; }

.cs-modal-h { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ink4, #94a3b8); margin-bottom: 8px; }

.cs-modal-empty { font-size: 11px; color: var(--ink4, #94a3b8); padding: 6px 0; }

.cs-modal-bar { display: flex; align-items: center; gap: 8px; padding: 4px 0; }

.cs-modal-bar-l { font-size: 11px; color: var(--ink2, #334155); flex: 0 0 62px; }

.cs-modal-bar-t { flex: 1; height: 6px; border-radius: 3px; background: var(--border-s, #f1f5f9); overflow: hidden; }

.cs-modal-bar-t span { display: block; height: 100%; }

.cs-modal-bar-v { font-size: 11px; font-weight: 700; flex: 0 0 auto; color: var(--ink1, #0f172a); }

.cs-modal-kv { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 11px; border-bottom: 1px solid var(--border-s, #f1f5f9); }

.cs-modal-kv span { color: var(--ink3, #64748b); }

.cs-modal-kv b { color: var(--ink1, #0f172a); font-weight: 600; overflow-wrap: anywhere; text-align: right; }

.cs-modal-post { padding: 7px 0; border-bottom: 1px solid var(--border-s, #f1f5f9); }

.cs-modal-post-t { font-size: 11px; line-height: 1.4; color: var(--ink1, #0f172a); }

.cs-modal-post-m { font-size: 10px; color: var(--ink3, #64748b); margin-top: 2px; }

.cs-modal-post-m a { color: var(--brand, #16a34a); text-decoration: none; }

.cs-modal-foot {
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid var(--border-s, #f1f5f9);
  background: var(--wt-page-bg, #f8fafc); flex: 0 0 auto;
}

.cs-modal-foot .mh-btn { font-size: 11px; text-decoration: none; }