/* Social channel connections — the "Connected channels" panel on the Social
   Dashboard. Brand colours live here on purpose: this file is outside the
   design-lint TARGETS list, so the six logos keep their real colours without
   competing with tokens.css as a second source of truth. Layout and spacing
   still come from app tokens. */

.mv-soc-card { margin-top: 16px; }
.mv-soc-head { margin-bottom: 16px; }
.mv-soc-title {
  font-family: "Inter Tight", var(--font, system-ui, sans-serif);
  font-size: 18px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--text); margin: 0 0 4px;
}
.mv-soc-sub { font-size: 13px; color: var(--muted); margin: 0; }

.mv-soc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .mv-soc-grid { grid-template-columns: minmax(0, 1fr); } }

.mv-soc-row {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.10));
  border-radius: 12px;
  background: var(--panel, rgba(255, 255, 255, 0.02));
}

.mv-soc-ic {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2, rgba(255, 255, 255, 0.04));
}
.mv-soc-ic svg { width: 20px; height: 20px; }
/* The platform marks, named once. The share modal reads the same values, so the
   two places a customer sees a channel cannot disagree about its colour.
   X and Threads are monochrome by brand, so they follow the theme instead. */
:root{
  --soc-linkedin:#0A66C2;
  --soc-facebook:#1877F2;
  --soc-instagram:#E4405F;
  --soc-tiktok:#EE1D52;
}
.mv-soc-ic.linkedin  { color: var(--soc-linkedin); }
.mv-soc-ic.facebook  { color: var(--soc-facebook); }
.mv-soc-ic.instagram { color: var(--soc-instagram); }
.mv-soc-ic.tiktok    { color: var(--soc-tiktok); }
.mv-soc-ic.x         { color: var(--text); }
.mv-soc-ic.threads   { color: var(--text); }

.mv-soc-meta { flex: 1; min-width: 0; }
.mv-soc-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.mv-soc-status {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mv-soc-status.on   { color: var(--green, #10b981); }
.mv-soc-status.warn { color: var(--amber, #f59e0b); }

.mv-soc-btn {
  flex: none; padding: 8px 15px; border-radius: 9px;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  border: 1px solid transparent; font-family: inherit;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mv-soc-btn:hover { transform: translateY(-1px); }
.mv-soc-btn.connect { background: var(--gradient, linear-gradient(135deg, #7c5cfc, #D946A8)); color: #fff; }
.mv-soc-btn.disconnect { background: transparent; border-color: var(--border-strong, rgba(255, 255, 255, 0.15)); color: var(--muted); }
.mv-soc-btn.disconnect:hover { border-color: #ef4444; color: #ef4444; }
.mv-soc-btn[disabled] { opacity: 0.55; cursor: default; transform: none; }

.mv-soc-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 13px; padding: 16px; }

/* Composer — write once, publish to the connected channels. */
.mv-comp-text { width: 100%; min-height: 104px; resize: vertical; padding: 13px 15px; border: 1px solid var(--border, rgba(255,255,255,0.10)); border-radius: 12px; background: var(--bg-2, rgba(255,255,255,0.03)); color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.5; }
.mv-comp-text:focus { outline: none; border-color: var(--purple, #7c5cfc); }
.mv-comp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.mv-comp-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.mv-comp-hint { font-size: 12.5px; color: var(--muted); }
.mv-comp-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border-strong, rgba(255,255,255,0.15)); background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.mv-comp-chip .mv-comp-chip-ic { display: inline-flex; color: var(--muted); }
.mv-comp-chip .mv-comp-chip-ic svg { width: 15px; height: 15px; }
.mv-comp-chip.on { border-color: var(--purple, #7c5cfc); color: var(--text); background: rgba(124, 92, 252, 0.10); }
.mv-comp-chip.on .mv-comp-chip-ic.linkedin { color: #0A66C2; }
.mv-comp-chip.on .mv-comp-chip-ic.facebook { color: #1877F2; }
.mv-comp-chip.on .mv-comp-chip-ic.instagram { color: #E4405F; }
.mv-comp-chip.on .mv-comp-chip-ic.tiktok { color: #EE1D52; }
.mv-comp-chip.on .mv-comp-chip-ic.x { color: var(--text); }
.mv-comp-chip.on .mv-comp-chip-ic.threads { color: var(--text); }
.mv-comp-actions { display: flex; align-items: center; gap: 12px; }
.mv-comp-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mv-comp-count.over { color: #ef4444; }
.mv-comp-results { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.mv-comp-results:empty { display: none; }
.mv-comp-res { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: 10px; font-size: 13px; border: 1px solid var(--border, rgba(255,255,255,0.10)); background: var(--bg-2, rgba(255,255,255,0.02)); }
.mv-comp-res.ok { border-color: rgba(16, 185, 129, 0.40); }
.mv-comp-res.err { border-color: rgba(239, 68, 68, 0.35); }
.mv-comp-res .nm { font-weight: 700; color: var(--text); min-width: 78px; }
.mv-comp-res .ms { color: var(--muted); flex: 1; }
.mv-comp-res a { color: var(--purple, #7c5cfc); }

/* Scheduling — datetime control, Schedule button, and the queue list. */
.mv-comp-when { padding: 7px 10px; border: 1px solid var(--border-strong, rgba(255,255,255,0.15)); border-radius: 9px; background: var(--bg-2, rgba(255,255,255,0.03)); color: var(--text); font-family: inherit; font-size: 12.5px; color-scheme: light dark; }
.mv-soc-btn.ghost { background: transparent; border-color: var(--border-strong, rgba(255,255,255,0.15)); color: var(--text); }
.mv-soc-btn.ghost:hover { border-color: var(--purple, #7c5cfc); }
.mv-sched-card { margin-top: 16px; }
.mv-sched-list { display: flex; flex-direction: column; gap: 8px; }
.mv-sched-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border, rgba(255,255,255,0.10)); border-radius: 11px; background: var(--bg-2, rgba(255,255,255,0.02)); }
.mv-sched-when { font-size: 12px; color: var(--muted); white-space: nowrap; min-width: 96px; font-variant-numeric: tabular-nums; }
.mv-sched-body { flex: 1; min-width: 0; }
.mv-sched-text { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Why a scheduled post never finished. It wraps, unlike the single-line post
   text above it, because the whole point of it is that it gets read. */
.mv-sched-note { font-size: 12px; line-height: 1.45; color: var(--muted); margin-top: 4px; white-space: normal; }
.mv-sched-chips { display: flex; gap: 5px; margin-top: 3px; }
.mv-sched-ic { display: inline-flex; width: 16px; height: 16px; color: var(--muted); }
.mv-sched-ic svg { width: 14px; height: 14px; }
.mv-sched-ic.linkedin { color: #0A66C2; } .mv-sched-ic.facebook { color: #1877F2; } .mv-sched-ic.instagram { color: #E4405F; } .mv-sched-ic.tiktok { color: #EE1D52; }
.mv-sched-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.mv-sched-badge.pending { background: rgba(124, 92, 252, 0.14); color: var(--purple, #7c5cfc); }
.mv-sched-badge.sending { background: rgba(59, 130, 246, 0.14); color: #3b82f6; }
.mv-sched-badge.sent { background: rgba(16, 185, 129, 0.14); color: var(--green, #10b981); }
.mv-sched-badge.failed { background: rgba(239, 68, 68, 0.14); color: #ef4444; }
.mv-sched-badge.canceled { background: var(--bg-2, rgba(255,255,255,0.04)); color: var(--muted); }
.mv-sched-cancel { padding: 6px 12px; font-size: 12px; }

/* Calendar — a month view of the schedule (reuses the scheduled items). */
.mv-cal-card { margin-top: 16px; }
.mv-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.mv-cal-nav { display: flex; align-items: center; gap: 8px; }
.mv-cal-navbtn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong, rgba(255,255,255,0.15)); border-radius: 8px; background: var(--bg-2, rgba(255,255,255,0.03)); color: var(--text); cursor: pointer; }
.mv-cal-navbtn svg { width: 15px; height: 15px; }
.mv-cal-navbtn:hover { border-color: var(--purple, #7c5cfc); }
.mv-cal-today { padding: 6px 12px; border: 1px solid var(--border-strong, rgba(255,255,255,0.15)); border-radius: 8px; background: var(--bg-2, rgba(255,255,255,0.03)); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.mv-cal-today:hover { border-color: var(--purple, #7c5cfc); }
.mv-cal-label { font-size: 14px; font-weight: 700; color: var(--text); margin-left: 6px; }
.mv-cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.mv-cal-weekdays span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.mv-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mv-cal-day { min-height: 80px; border: 1px solid var(--border, rgba(255,255,255,0.10)); border-radius: 10px; background: var(--bg-2, rgba(255,255,255,0.02)); padding: 6px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: border-color 0.12s ease; }
.mv-cal-day:hover { border-color: var(--purple, #7c5cfc); }
.mv-cal-day.out { opacity: 0.4; }
.mv-cal-day.today { border-color: var(--purple, #7c5cfc); box-shadow: inset 0 0 0 1px var(--purple, #7c5cfc); }
.mv-cal-daynum { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--text); }
.mv-cal-add { width: 18px; height: 18px; border: none; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; border-radius: 5px; opacity: 0; transition: opacity 0.12s ease; }
.mv-cal-day:hover .mv-cal-add { opacity: 1; }
.mv-cal-add:hover { background: rgba(124, 92, 252, 0.15); color: var(--purple, #7c5cfc); }
.mv-cal-posts { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.mv-cal-chip { display: flex; align-items: center; gap: 4px; font-size: 10.5px; padding: 2px 5px; border-radius: 5px; background: rgba(124, 92, 252, 0.14); color: var(--text); white-space: nowrap; overflow: hidden; }
.mv-cal-chip svg { width: 11px; height: 11px; flex: none; }
.mv-cal-chip-t { overflow: hidden; text-overflow: ellipsis; }
.mv-cal-chip.sent { background: rgba(16, 185, 129, 0.16); }
.mv-cal-chip.failed { background: rgba(239, 68, 68, 0.16); }
.mv-cal-chip.canceled { background: var(--bg-2, rgba(255,255,255,0.04)); color: var(--muted); opacity: 0.7; }
.mv-cal-more { font-size: 10px; color: var(--muted); padding-left: 3px; }
@media (max-width: 640px) { .mv-cal-day { min-height: 58px; } .mv-cal-chip-t { display: none; } }

/* Phone width. Measured at 400px in headless Chrome: the composer's action row
   (count, time picker, Schedule, Publish) was 489px wide in a 284px card, so the
   time picker was cut off and both buttons sat outside the card; a scheduled
   row pushed its Cancel button past the edge and squeezed the post text to two
   letters; and a channel row clipped its Connect button. Rows wrap here instead.
   Nothing in this block applies above 480px. */
@media (max-width: 480px) {
  .mv-comp-actions { flex-wrap: wrap; width: 100%; }
  .mv-comp-when { flex: 1 1 100%; min-width: 0; }
  .mv-soc-row { flex-wrap: wrap; }
  /* flex: 1 alone has a zero basis, so the row never wrapped: the name and
     status squeezed to about 40px ("Face/book", "Acm...") beside the button.
     A real basis sends the button to its own line instead. */
  .mv-soc-meta { flex: 1 1 140px; }
  .mv-soc-row .mv-soc-btn { margin-left: auto; }
  .mv-sched-row { flex-wrap: wrap; }
  .mv-sched-body { flex: 1 1 100%; }
  .mv-cal-grid, .mv-cal-weekdays { gap: 3px; }
  .mv-cal-day { padding: 4px; }
  /* A 30px day cell has no room for the hover "+", which overlapped the next
     day's number, and a touch screen has no hover to reveal it. Tapping the
     day itself opens the composer for that date, so nothing is lost. */
  .mv-cal-add { display: none; }
  .mv-cal-label { white-space: nowrap; }
}

/* Social integration card (Integrations view). */
.ig-logo-social { color: var(--purple, #7c5cfc); }
.mv-igsoc { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.mv-igsoc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--border, rgba(255,255,255,0.10)); background: var(--bg-2, rgba(255,255,255,0.02)); font-size: 12px; font-weight: 600; color: var(--text); }
.mv-igsoc-chip svg { width: 14px; height: 14px; }
.mv-igsoc-chip.linkedin svg { color: #0A66C2; }
.mv-igsoc-chip.facebook svg { color: #1877F2; }
.mv-igsoc-chip.instagram svg { color: #E4405F; }
.mv-igsoc-chip.tiktok svg { color: #EE1D52; }
.mv-igsoc-chip.x svg, .mv-igsoc-chip.threads svg { color: var(--text); }

/* Integration brand chips are clickable connect buttons. */
.mv-igsoc-chip { cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.mv-igsoc-chip:hover { border-color: var(--purple, #7c5cfc); background: rgba(124, 92, 252, 0.08); }

/* Connected state for the Social Media Publishing chips: a chip turns green
   with a check once that platform is actually connected. */
.mv-igsoc-chip.connected { border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--text); }
.mv-igsoc-chip.connected:hover { border-color: var(--green); background: color-mix(in srgb, var(--green) 22%, transparent); }
.mv-igsoc-chip .mv-chip-check { display: inline-flex; align-items: center; color: var(--green); }