/* Content Calendar SCHEDULE CARD (P2-4, 2026-08-19).
   Styles for window.buildCcScheduleCard (cc-schedule-card.js). Every class is
   ccs-* prefixed on purpose: the card it replaces uses ccal-sched-* and both
   stylesheets are loaded on the same page, so a shared prefix would have one
   card restyling the other the moment either changes.

   Palette, radii and button styles are the dashboard's own (deliverable-dashboard.css),
   reused rather than re-picked, so this card reads as part of the page. The one
   new pair of tokens is the tab colours, and they carry meaning the spec fixes:
   ORANGE means "not scheduled yet", GREEN means "this will actually go out". Red
   is only ever a failure and never a tab state.

   Colour is never the only signal. Every tab also carries a glyph and a
   sentence, because a green and an orange pill at the same size are the same
   pill to a colour-blind operator, and this card decides whether a client's
   month goes public. */

/* ── head ─────────────────────────────────────────────────────────────────── */
.ccs-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ccs-heads { min-width: 0; flex: 1 1 auto; }
.ccs-headlines { display: flex; flex-direction: column; gap: 4px; }
.ccs-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ccs-line { font-size: 12px; color: #374151; line-height: 1.45; }
.ccs-line.is-bad { color: #b91c1c; font-weight: 600; }
.ccs-line.is-dead { color: #6b7280; }

/* ── the archived banner ──────────────────────────────────────────────────── */
.ccs-banner {
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #9ca3af;
  border-radius: 8px;
  background: #f9fafb;
  color: #4b5563;
  font-size: 12px;
  line-height: 1.5;
}

/* ── the artwork gate panel ─────────────────────────────────────────────────
   :empty on each of these boxes matters. They are all created up front so the
   paint order is fixed, and every one of them is legitimately empty on first
   render and at read-only statuses. Without this an empty bordered panel sits
   above the tabs before the first fetch answers. */
.ccs-gate:empty, .ccs-accounts:empty, .ccs-banner-box:empty { display: none; }
.ccs-gate {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #f9fafb;
}
.ccs-gate.is-hidden { display: none; }
.ccs-gate.is-pass { border-color: #bbf7d0; background: #f0fdf4; }
.ccs-gate.is-fail { border-color: #fed7aa; background: #fffbeb; }

.ccs-checks { display: flex; flex-direction: column; gap: 6px; }
.ccs-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.5; }
.ccs-check-ic {
  flex: 0 0 auto;
  width: 16px;
  text-align: center;
  font-weight: 700;
}
.ccs-check.ok .ccs-check-ic { color: #15803d; }
.ccs-check.bad .ccs-check-ic { color: #b45309; }
.ccs-check.dead .ccs-check-ic { color: #9ca3af; }
.ccs-check-t { color: #374151; min-width: 0; }

.ccs-gaps { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.ccs-gap { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ccs-gap-idx { font-size: 11px; font-weight: 700; color: #6b7280; min-width: 52px; }
.ccs-gap-miss { display: flex; gap: 5px; flex-wrap: wrap; }
.ccs-miss {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.ccs-miss.is-date { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

.ccs-why { margin-top: 8px; font-size: 12px; line-height: 1.5; color: #92400e; }
.ccs-why.is-done { color: #15803d; }

/* ── the run report ───────────────────────────────────────────────────────── */
.ccs-result:empty { display: none; }
.ccs-result {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.5;
}
.ccs-result.is-ok { border-color: #bbf7d0; background: #f0fdf4; }
.ccs-result.is-warn { border-color: #fde68a; background: #fffbeb; }
.ccs-result.is-fail { border-color: #fecaca; background: #fef2f2; }
.ccs-result-t { font-weight: 700; color: #111827; }
.ccs-result-lead { margin-top: 4px; color: #b45309; font-weight: 600; }
.ccs-result.is-fail .ccs-result-lead { color: #b91c1c; }
.ccs-result-note { margin-top: 5px; color: #4b5563; }
.ccs-skiplist { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.ccs-skip { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ccs-skipwhy { color: #4b5563; }

/* ── accounts ─────────────────────────────────────────────────────────────── */
.ccs-accounts { margin-bottom: 12px; }
.ccs-acc-hd {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 6px;
}
.ccs-acc-list { display: flex; flex-direction: column; gap: 4px; }
/* max-width, because ccs-acc-state is pushed right with margin-left:auto and
   this card is full width. Without a cap the state word ends up a thousand
   pixels from the account name it describes and stops reading as the same
   line. 520px keeps the pair inside one eye span on any screen. */
.ccs-acc {
  display: flex;
  align-items: baseline;
  gap: 10px;
  max-width: 520px;
  font-size: 12px;
  color: #374151;
  flex-wrap: wrap;
}
.ccs-acc-dot { color: #d1d5db; font-size: 10px; }
.ccs-acc.is-on .ccs-acc-dot { color: #16a34a; }
.ccs-acc-plat { font-weight: 700; min-width: 76px; }
.ccs-acc-name { color: #6b7280; min-width: 0; overflow-wrap: anywhere; }
.ccs-acc-state { margin-left: auto; font-size: 11px; color: #9ca3af; }
.ccs-acc.is-on .ccs-acc-state { color: #15803d; }
.ccs-acc.is-off .ccs-acc-state { color: #b45309; }
.ccs-acc-empty { font-size: 12px; color: #b45309; }

.ccs-plannote:empty { display: none; }
.ccs-plannote-t {
  margin-bottom: 12px;
  padding: 7px 10px;
  border: 1px solid #fde68a;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-size: 12px;
  line-height: 1.5;
}

/* ── the three tabs ───────────────────────────────────────────────────────── */
.ccs-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ccs-tab {
  flex: 1 1 160px;
  min-width: 0;
  min-height: 56px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: #374151;
}
.ccs-tab:hover { background: #f9fafb; }
.ccs-tab:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
/* The active tab is the one whose rows are in the table below, so it is joined
   to it by a heavier border rather than by colour alone. */
.ccs-tab.is-active { border-color: #111827; box-shadow: inset 0 0 0 1px #111827; }
.ccs-tab.is-orange { border-color: #fed7aa; background: #fffbeb; }
.ccs-tab.is-orange.is-active { border-color: #b45309; box-shadow: inset 0 0 0 1px #b45309; }
.ccs-tab.is-green { border-color: #bbf7d0; background: #f0fdf4; }
.ccs-tab.is-green.is-active { border-color: #15803d; box-shadow: inset 0 0 0 1px #15803d; }

.ccs-tab-top { display: flex; align-items: baseline; gap: 6px; }
.ccs-tab-dot { font-size: 11px; }
.ccs-tab.is-orange .ccs-tab-dot { color: #ea580c; }
.ccs-tab.is-green .ccs-tab-dot { color: #16a34a; }
.ccs-tab-label { font-weight: 700; font-size: 13px; color: #111827; }
.ccs-tab-fail { margin-left: auto; color: #b91c1c; font-weight: 700; }
.ccs-tab-count { font-size: 12px; color: #4b5563; }
.ccs-tab-note {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ── the line item table ──────────────────────────────────────────────────── */
.ccs-scroll {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.ccs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ccs-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7280;
  background: #f9fafb;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}
.ccs-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
}
.ccs-table tr:last-child td { border-bottom: 0; }
.ccs-th-when, .ccs-td-when { width: 200px; }
.ccs-th-act, .ccs-td-act { width: 170px; }
.ccs-row.is-failed { background: #fef2f2; }
.ccs-row.is-published { background: #f9fafb; }

.ccs-empty {
  padding: 16px;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.5;
}

/* Column 1. The whole cell is one button, so the hit area is the row and not a
   12px thumbnail. */
.ccs-postcell {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  min-height: 44px;
  padding: 4px;
  margin: -4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ccs-postcell:hover { background: #f3f4f6; }
.ccs-postcell:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.ccs-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ccs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccs-thumb-play { color: #374151; font-size: 14px; }
.ccs-thumb-none { color: #9ca3af; }
.ccs-postt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ccs-postt-1 { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ccs-kind {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  white-space: nowrap;
}
.ccs-postt-2 { color: #6b7280; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.ccs-rowerr { color: #b91c1c; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }

/* Column 2 */
.ccs-date, .ccs-time {
  display: block;
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  margin-bottom: 4px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  color: #111827;
  background: #fff;
}
.ccs-date:focus, .ccs-time:focus { outline: 2px solid #2563eb; outline-offset: 0; border-color: #2563eb; }
.ccs-tz { font-size: 10px; color: #9ca3af; }
.ccs-whentext { font-size: 12px; color: #374151; white-space: nowrap; }
.ccs-flag { margin-top: 4px; font-size: 11px; color: #92400e; line-height: 1.4; }
.ccs-flag.is-bad { color: #b91c1c; }
.ccs-live {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: #2563eb;
  text-decoration: none;
}
.ccs-live:hover { text-decoration: underline; }

/* Column 3 */
.ccs-td-act { text-align: left; }
.ccs-state { font-size: 12px; margin-bottom: 6px; white-space: nowrap; color: #6b7280; }
.ccs-state.is-scheduled { color: #15803d; }
.ccs-state.is-published { color: #15803d; font-weight: 700; }
.ccs-state.is-failed { color: #b91c1c; font-weight: 700; }
.ccs-state.is-queued { color: #b45309; }

/* ── narrow widths ────────────────────────────────────────────────────────────
   The table stacks rather than scrolling sideways. A month is scheduled from a
   phone often enough that a horizontally scrolling table would hide the
   Schedule button itself, which is the one control the whole card exists for.
   dd-mobile.css (P3-2) owns the page-wide 390px pass; this block only covers
   what is local to this card. */
@media (max-width: 760px) {
  .ccs-head { flex-direction: column; align-items: stretch; }
  .ccs-actions { justify-content: flex-end; }
  .ccs-tab { flex: 1 1 100%; }

  .ccs-scroll { border: 0; overflow-x: visible; }
  .ccs-table, .ccs-table tbody, .ccs-table tr, .ccs-table td { display: block; width: auto; }
  .ccs-table thead { display: none; }
  .ccs-table tr {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 4px 0;
  }
  .ccs-table td { border-bottom: 0; padding: 8px 12px; }
  .ccs-th-when, .ccs-td-when, .ccs-th-act, .ccs-td-act { width: auto; }
  .ccs-date, .ccs-time { min-height: 44px; font-size: 14px; }
  .ccs-td-act .dd-btn { min-height: 44px; width: 100%; justify-content: center; }
}

/* ── Full-width placement ──────────────────────────────────────────────────
   Same trap as the focus points card. renderLayoutBlocks appends a col-2 card
   into .dd-cols, a two-column grid, and the only span rule in
   deliverable-dashboard.css names .dd-posts-card. Without this the Schedule
   card renders at half width and its three tabs, accounts strip and line item
   table all wrap. */
.dd-cols > .ccs-card { grid-column: 1 / -1; }

/* ── the forced-Posted badge ──────────────────────────────────────────────────
   A month moved to Posted by POST /api/social/cc/:id/force-complete carries
   metadata.forcedPosted, and the whole justification for that endpoint asking
   for a typed confirmation is that a forced Posted stays told apart from a
   verified one afterwards. So this reads as a stamp rather than as an error:
   amber, not red, because nothing is broken and nobody has to act. It sits in
   the same head lines column as the published summary it qualifies. */
.ccs-line.ccs-forced {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #92400e;
}
.ccs-forced-badge {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 999px;
  padding: 2px 8px;
}

/* ── the force-complete confirmation ──────────────────────────────────────────
   These render inside the shared bottom sheet (dd-sheet.js), which injects its
   own stylesheet and knows nothing about this card, so the body content this
   card builds is styled here. Kept to the sheet's own type scale so the dialog
   does not read as a second component bolted into the first. */
.ccs-force-t {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}
.ccs-force-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #4b5563;
}
.ccs-force-field {
  display: block;
  margin-top: 14px;
}
.ccs-force-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7280;
}
/* 16px, not 14px: iOS zooms the page when a focused input is under 16px and the
   zoom does not undo itself on blur, which would leave a bottom sheet holding a
   typed confirmation half off the screen. 48px is rule 6's floor. */
.ccs-force-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 11px 12px;
  font: inherit;
  font-size: 16px;
  color: #111827;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
}
.ccs-force-input:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}
.ccs-force-err {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: #b91c1c;
}

/* The sheet paints itself dark at html[data-theme="dark"], so anything this
   card puts inside it has to follow or it renders black on near-black. */
html[data-theme="dark"] .ccs-line.ccs-forced,
html[data-theme="dark"] .ccs-forced-badge { color: #fcd34d; }
html[data-theme="dark"] .ccs-forced-badge {
  background: rgba(245, 158, 11, .16);
  border-color: rgba(245, 158, 11, .45);
}
html[data-theme="dark"] .ccs-force-t { color: #e5e7eb; }
html[data-theme="dark"] .ccs-force-list { color: #c3cbd6; }
html[data-theme="dark"] .ccs-force-label { color: #7d8a9c; }
html[data-theme="dark"] .ccs-force-input {
  color: #e5e7eb;
  background: #111827;
  border-color: #1f2937;
}
html[data-theme="dark"] .ccs-force-err { color: #fca5a5; }