/* Content Calendar, the FOCUS POINTS card (2026-08-19).
   Styles for window.buildCcFocusPointsCard in dd-focus-points-card.js.

   Every class here is ccfp-* prefixed and nothing in this file restyles a dd-*
   class. The card deliberately REUSES .dd-card, .dd-card-title, .dd-btn,
   .dd-date-btn, .dd-date-cell, .dd-cap-quill and .dd-saving-tag from
   deliverable-dashboard.css, so the date button and the rich editor look
   identical to the ones in the posts table. Re-declaring any of those here
   would fork the look the first time that file changes.

   Two things this file exists to supply that the posts table never had:

   1. THE DROP MARKERS. The posts table's drag classes (dd-drop-before,
      dd-drop-after, dd-row-dragging) have NO css anywhere in this repo, so its
      reorder gives no visual feedback at all. The ccfp equivalents below are
      real: a 2px accent line on the edge the row will land against, and a faded
      source row while it travels.
   2. A REAL TOUCH TARGET ON THE HANDLE. 28px wide and full row height, because
      the grip is the only way to start a drag and a 12px glyph is not something
      a finger or a shaky mouse can catch.

   Dark mode follows the app convention, html[data-theme="dark"] overrides at the
   bottom, never a media query: the theme is a user setting in this app, not the
   operating system's. */

.ccfp-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ccfp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* The header row count badge. A pill and not bare text, because it sits at the
   opposite end of the same line as the title and needs to read as a value rather
   than as a second heading. is-zero keeps the pill in place at 0 instead of
   hiding it, so the header does not change height when the last row is removed. */
.ccfp-head-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  color: #374151;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ccfp-head-count.is-zero {
  background: transparent;
  color: #9ca3af;
}

/* ── Header link block ──────────────────────────────────────────────────────
   Generate link / the URL / Copy link / Send to client / Resend link. It sits
   above the table on purpose: the send decision is about the whole month, not
   about a row. */
.ccfp-linkbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
}
.ccfp-link-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ccfp-link-sent {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
}
/* The URL is long and must never push the card wider than its column, so it
   wraps at any character rather than overflowing the grid. */
.ccfp-link-url {
  font-size: 12px;
  color: #2563eb;
  text-decoration: none;
  word-break: break-all;
  max-width: 100%;
}
.ccfp-link-url:hover { text-decoration: underline; }
.ccfp-link-note { font-size: 12px; color: #6b7280; }
.ccfp-link-note.is-ok { color: #15803d; }
.ccfp-link-note.is-warn { color: #b45309; }

/* ── Inline message line (validation, copy feedback, send errors) ─────────── */
.ccfp-msg {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f3f4f6;
}
.ccfp-msg.is-error { color: #b91c1c; background: #fef2f2; }
.ccfp-msg.is-ok { color: #15803d; background: #f0fdf4; }
.ccfp-msg.is-warn { color: #b45309; background: #fffbeb; }

/* ── Table ────────────────────────────────────────────────────────────────── */
.ccfp-scroll { overflow-x: auto; }
.ccfp-table {
  width: 100%;
  border-collapse: collapse;
  /* The description column has to be free to take everything left over, and a
     fixed layout would let one long word set the column widths instead. */
  table-layout: auto;
}
.ccfp-th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #6b7280;
  padding: 4px 6px;
  white-space: nowrap;
}
/* Four columns, indexed the same way buildRow emits its four cells: the grip
   and the number share column 0, then date, then description (no width so it
   takes everything left over), then the insert and delete buttons. */
.ccfp-th-0 { width: 62px; }
.ccfp-th-1 { width: 150px; }
.ccfp-th-3 { width: 84px; }
.ccfp-row { border-top: 1px solid #f0f1f3; }
.ccfp-td { padding: 8px 6px; vertical-align: top; }
.ccfp-col-num { white-space: nowrap; }
.ccfp-col-desc { min-width: 260px; }

.ccfp-num-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Full height, 28px wide: this glyph is the ONLY way to start a drag, so it has
   to be catchable. cursor: grab tells the pointer what it is before the drag,
   and user-select: none stops a slow press turning into a text selection. */
.ccfp-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-height: 32px;
  color: #9ca3af;
  font-size: 14px;
  line-height: 1;
  cursor: grab;
  user-select: none;
  border-radius: 6px;
}
.ccfp-handle:hover { color: #4b5563; background: #f3f4f6; }
.ccfp-handle:active { cursor: grabbing; }
.ccfp-handle.is-static { cursor: default; color: #d1d5db; }
.ccfp-handle.is-static:hover { background: transparent; color: #d1d5db; }
.ccfp-num-text { font-size: 13px; color: #6b7280; font-weight: 600; }

/* Drop feedback. The marker is an inset box-shadow rather than a border so the
   row does not change height as it moves, which would make the list jump under
   the pointer mid-drag. */
.ccfp-row-dragging { opacity: .45; }
.ccfp-drop-before td { box-shadow: inset 0 2px 0 0 #2563eb; }
.ccfp-drop-after td { box-shadow: inset 0 -2px 0 0 #2563eb; }
/* Send validation highlight: the rows missing a date or a description. */
.ccfp-row-invalid td { background: #fef2f2; }

.ccfp-desc { width: 100%; }
/* Fallback editor, only ever rendered when window.mountRichEditor is absent.
   Kept visually equal to the Quill container so the fallback is not a downgrade
   anyone has to explain. */
.ccfp-desc-plain {
  min-height: 64px;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  background: #fff;
  overflow-wrap: anywhere;
}
.ccfp-desc-plain:focus { outline: none; border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59, 130, 246, .18); }
.ccfp-desc-plain:empty::before {
  content: attr(data-ph);
  color: #9ca3af;
}

/* Frozen (readonly) rendering, from focus_points_approved onward. */
.ccfp-frozen-date { font-size: 13px; color: #374151; padding: 6px 2px; }
.ccfp-frozen-desc { font-size: 13px; color: #374151; line-height: 1.5; overflow-wrap: anywhere; }
.ccfp-frozen-desc p { margin: 0 0 6px; }
.ccfp-frozen-desc p:last-child { margin-bottom: 0; }
.ccfp-frozen-empty { color: #9ca3af; }

.ccfp-act-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ccfp-insert { font-weight: 700; }

.ccfp-empty {
  color: #9ca3af;
  text-align: center;
  padding: 22px;
  font-size: 13px;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.ccfp-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ccfp-foot-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ccfp-foot .dd-saving-tag { margin-top: 0; }
.ccfp-count { font-size: 12px; color: #9ca3af; }

/* ── The header overflow "⋯" ───────────────────────────────────────────────
   Mobile only, and display:none is the default rather than the exception, so a
   desktop card never grows a menu duplicating controls that are already on it.
   Sized to 44px because it is a touch target the moment it is visible at all.
   It sits ABOVE the narrow-screen block on purpose: the media query turns it
   back on with a rule of the same specificity, so source order is the only
   thing deciding, and a base rule written after it would win everywhere. */
.ccfp-more {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-left: 8px;
  padding: 0 8px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #6b7280;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.ccfp-more:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
/* The "i" launcher takes its colours from tour.css .dd-focus-i. This only stops
   it and the overflow crowding each other on the header line. */
.ccfp-info + .ccfp-more { margin-left: 8px; }

/* ── Narrow screens ───────────────────────────────────────────────────────
   The table stays a table down to 760px and then stacks each row into a card,
   the same shape the posts table uses below the same breakpoint. Stacking is
   what makes the description usable on a phone: in a table it would be a 40px
   wide column. The insert button matters more here than anywhere else, because
   native drag and drop does not fire on touch at all. */
@media (max-width: 760px) {
  .ccfp-table thead { display: none; }
  .ccfp-table,
  .ccfp-table tbody,
  .ccfp-row,
  .ccfp-td { display: block; width: 100%; }
  .ccfp-row {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 10px;
  }
  .ccfp-td { padding: 6px 0; }
  .ccfp-td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 4px;
  }
  /* The row number already reads as the heading of the stacked card, so the
     duplicate label above the grip would just be noise. */
  .ccfp-col-num[data-label]::before { display: none; }
  .ccfp-col-desc { min-width: 0; }

  /* The drag grip is GONE below this width, not merely restyled. Touch fires no
     dragstart, no dragover and no drop, so the grip was a control that looked
     like it worked and never could. Its replacement is the Move button the card
     mounts into this same cell through window.ddMoveMode, which is why the two
     are never both on screen. The drop marker rules that used to live here went
     with it: they painted drop feedback for events that never arrive. */
  .ccfp-handle { display: none; }

  /* The row card's header line: number left, Move next to it, remove pushed to
     the far end. The distance is the point, not the tidiness. A thumb aiming
     for a reorder must not be able to land on a delete, so the two controls sit
     at opposite ends of the line. */
  .ccfp-num-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .ccfp-num-cell .ccfp-del {
    margin-left: auto;
    min-width: 44px;
    min-height: 44px;
  }
  .ccfp-num-text { font-size: 15px; font-weight: 700; }

  /* The native date input is the primary control here, not a fallback, so it
     gets the full row width and a real tap target. dd-mobile.css already puts
     16px on every input inside .dd-wrap, which is what stops iOS zooming the
     page in on focus and never zooming back out. It is repeated here because
     this card is mounted by a layout config and must not depend on which
     ancestor it lands under to stay usable. */
  .ccfp-col-date .dd-date-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    font-size: 16px;
  }

  /* "+ Add row" lives in the header overflow on a phone, and at status 1 in the
     sticky bar. It is HIDDEN rather than removed from the DOM because the same
     button is still the desktop footer control and the card must not grow a
     second Add. */
  .ccfp-foot .ccfp-add { display: none; }
  .ccfp-more { display: inline-flex; }

  .ccfp-empty-row { display: block; }
  .ccfp-linkbox { width: 100%; }
  .ccfp-link-actions .dd-btn { min-height: 40px; }
  /* Every remaining tap target on the row reaches 44px. The insert control keeps
     its place beside the delete for the person who wants a row in the middle of
     the month rather than at the end of it. */
  .ccfp-act-wrap .dd-btn { min-width: 44px; min-height: 44px; }
}


/* ── Dark theme ───────────────────────────────────────────────────────────── */
html[data-theme="dark"] .ccfp-linkbox {
  background: #1e293b;
  border-color: #334155;
}
html[data-theme="dark"] .ccfp-link-sent { color: #e2e8f0; }
html[data-theme="dark"] .ccfp-link-url { color: #60a5fa; }
html[data-theme="dark"] .ccfp-link-note { color: #94a3b8; }
html[data-theme="dark"] .ccfp-link-note.is-ok { color: #4ade80; }
html[data-theme="dark"] .ccfp-link-note.is-warn { color: #fbbf24; }
html[data-theme="dark"] .ccfp-msg { color: #e2e8f0; background: #1e293b; }
html[data-theme="dark"] .ccfp-msg.is-error { color: #f87171; background: #3f1d1d; }
html[data-theme="dark"] .ccfp-msg.is-ok { color: #4ade80; background: #14311f; }
html[data-theme="dark"] .ccfp-msg.is-warn { color: #fbbf24; background: #3a2c10; }
html[data-theme="dark"] .ccfp-th { color: #94a3b8; }
html[data-theme="dark"] .ccfp-row { border-top-color: #334155; }
html[data-theme="dark"] .ccfp-handle { color: #64748b; }
html[data-theme="dark"] .ccfp-handle:hover { color: #cbd5e1; background: #334155; }
html[data-theme="dark"] .ccfp-handle.is-static,
html[data-theme="dark"] .ccfp-handle.is-static:hover { color: #475569; background: transparent; }
html[data-theme="dark"] .ccfp-num-text { color: #94a3b8; }
html[data-theme="dark"] .ccfp-drop-before td,
html[data-theme="dark"] .ccfp-drop-before { box-shadow: inset 0 2px 0 0 #60a5fa; }
html[data-theme="dark"] .ccfp-drop-after td,
html[data-theme="dark"] .ccfp-drop-after { box-shadow: inset 0 -2px 0 0 #60a5fa; }
html[data-theme="dark"] .ccfp-row-invalid td { background: #3f1d1d; }
html[data-theme="dark"] .ccfp-desc-plain {
  background: #0f172a;
  border-color: #475569;
  color: #e2e8f0;
}
html[data-theme="dark"] .ccfp-desc-plain:empty::before { color: #7d8a9c; }
html[data-theme="dark"] .ccfp-frozen-date,
html[data-theme="dark"] .ccfp-frozen-desc { color: #e2e8f0; }
html[data-theme="dark"] .ccfp-frozen-empty { color: #7d8a9c; }
html[data-theme="dark"] .ccfp-empty { color: #7d8a9c; }
html[data-theme="dark"] .ccfp-count { color: #7d8a9c; }
html[data-theme="dark"] .ccfp-more {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}
@media (max-width: 760px) {
  html[data-theme="dark"] .ccfp-row { border-color: #334155; }
  html[data-theme="dark"] .ccfp-td[data-label]::before { color: #7d8a9c; }
  /* The Move mode injects its own styles from dd-move-mode.js at one class deep
     with no id, so these win without !important. */
  html[data-theme="dark"] .dd-move-btn {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
  }
  html[data-theme="dark"] .dd-move-picked { background: #1e3a5f; }
}

/* ── Full-width placement ──────────────────────────────────────────────────
   The configured layout gives this card col 2, and renderLayoutBlocks appends
   a col-2 card straight into .dd-cols, which is a two-column grid. Spanning is
   not something the layout code does: deliverable-dashboard.css spans exactly
   one hardcoded class (.dd-cols .dd-posts-card). So a col-2 card that does not
   claim the span itself silently renders at half width in the left column,
   which is what this card did until now. Scoped to .dd-cols so the card is
   still free to sit in a one-column context elsewhere. */
.dd-cols > .ccfp-card { grid-column: 1 / -1; }

html[data-theme="dark"] .ccfp-head-count {
  border-color: #334155;
  background: #1e293b;
  color: #e2e8f0;
}
html[data-theme="dark"] .ccfp-head-count.is-zero {
  background: transparent;
  color: #7d8a9c;
}