/* Deliverable dashboard — full-page view for one content calendar (2026-06-19).
   Rendered into #dashboardContent by window.renderDeliverableDashboard().
   Layout: back bar → team card → info card → posts table. Reuses the
   production page's neutral palette; all classes are dd-* prefixed. */

.dd-wrap {
  padding: 20px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  /* #dashboardContent is a bounded flex column (height:100%; overflow:hidden);
     fill it as a flex child and let THIS element own the vertical scroll. */
  flex: 1 1 auto;
  max-height: 100%;
  box-sizing: border-box;
  overflow-y: auto;       /* whole panel scrolls (esp. the website-design view) */
  /* Hide the scrollbar (still scrollable). */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge / IE */
}
.dd-wrap::-webkit-scrollbar { display: none; }   /* Chrome / Safari */

/* ── 2-column layout (content-calendar view) ──────────────────────────────
   topbar spans full width (it's a sibling on .dd-wrap); .dd-cols holds the
   2-column row plus the full-width posts card. LEFT = Team + Brief stacked,
   RIGHT = Focus Points; the posts card spans both columns underneath. */
.dd-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.dd-col-left,
.dd-col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;           /* let children shrink instead of overflowing */
}
/* Full width blocks span both columns. Keyed on STRUCTURE, not on a class:
   every .dd-cols in this dashboard holds exactly .dd-col-left and
   .dd-col-right as its column wrappers, so any OTHER direct child is by
   definition a full width block sitting below them. Spanning used to be keyed
   on .dd-posts-card, which the hardcoded render path stamps by hand and the
   layout path (renderLayoutBlocks) does not, so a col:2 card coming from a
   layout rendered at left column width with a dead column beside it and the
   auto grid re-solved around it. This rule catches every col:2 card, including
   the next one nobody remembers to stamp. */
.dd-cols > :not(.dd-col-left):not(.dd-col-right) { grid-column: 1 / -1; }

/* Stack to one column on narrower viewports. */
@media (max-width: 1024px) {
  .dd-cols { grid-template-columns: 1fr; }
}

/* ── Focus Points card ──────────────────────────────────────────────────── */
.dd-focus-body { display: flex; flex-direction: column; gap: 12px; }
.dd-focus-row { display: flex; flex-direction: column; gap: 3px; }
.dd-focus-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6b7280;
}
.dd-focus-value {
  font-size: 13px;
  color: #111827;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.dd-focus-muted { color: #9ca3af; font-size: 13px; }

/* Generic Brief card — sub-section heading for nested checklist groups.
   Spans both grid columns so each section's rows group cleanly beneath it. */
.dd-brief-section {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6b7280;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #f0f1f3;
}
.dd-brief-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── Top bar (back arrow + title) ─────────────────────────────────────── */
.dd-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dd-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .12s, border-color .12s;
}
.dd-back-btn:hover { background: #f3f4f6; border-color: #d1d5db; }
.dd-back-btn svg { width: 20px; height: 20px; }

.dd-title-group { display: flex; flex-direction: column; min-width: 0; }
.dd-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-subtitle { font-size: 13px; color: #6b7280; margin-top: 2px; }
/* small client-rating badge, sits above-and-left of the client name */
.dd-rating-row { display: flex; align-items: center; margin-bottom: 4px; }

.dd-loading, .dd-error { color: #6b7280; font-size: 14px; padding: 8px 0; }
.dd-error { color: #b91c1c; }

/* ── Generic card ─────────────────────────────────────────────────────── */
.dd-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 16px 18px;
}
.dd-card-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 12px;
}

/* ── Team card ────────────────────────────────────────────────────────── */
.dd-team-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.dd-team-member {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 5px 14px 5px 5px;
  background: #fff;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.dd-team-member:hover { border-color: #c7d2fe; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.dd-team-meta { display: flex; flex-direction: column; line-height: 1.2; }
.dd-team-dept { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #9ca3af; }
.dd-team-name { font-size: 13px; font-weight: 600; color: #111827; }
.dd-team-empty { color: #9ca3af; font-size: 13px; }
/* Placeholder pill-buttons for Add role / Custom role (ticket #107) */
.dd-team-add {
  border-style: dashed;
  border-color: #cbd5e1;
  color: #6366f1;
  font-weight: 600;
  font-size: 13px;
  background: #fafbff;
  padding: 9px 16px;
  gap: 6px;
}
.dd-team-add:hover { border-color: #a5b4fc; background: #f5f6ff; box-shadow: none; }
.dd-team-member-custom .dd-team-dept { color: #6366f1; }

/* Initials avatar (shared shape across team + table) */
.dd-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
  user-select: none;
}
.dd-avatar.dd-avatar-empty {
  background: #f3f4f6 !important;
  color: #9ca3af;
  border: 1px dashed #cbd5e1;
}

/* ── Info card ────────────────────────────────────────────────────────── */
.dd-info-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 720px) { .dd-info-grid { grid-template-columns: 1fr 1fr; } }
.dd-info-row { display: flex; gap: 8px; font-size: 14px; align-items: baseline; }
.dd-info-label { color: #6b7280; min-width: 130px; flex: 0 0 auto; }
.dd-info-value { color: #111827; word-break: break-word; }
.dd-info-value a { color: #2563eb; text-decoration: none; }
.dd-info-value a:hover { text-decoration: underline; }

/* ── Posts table ──────────────────────────────────────────────────────── */
.dd-posts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.dd-posts-head .dd-card-title { margin: 0; }

.dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.dd-btn:hover { background: #f3f4f6; border-color: #c7d2fe; }
.dd-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.dd-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.dd-btn-sm { font-size: 12px; padding: 5px 9px; }
.dd-btn-danger { color: #b91c1c; border-color: #fecaca; }
.dd-btn-danger:hover { background: #fef2f2; border-color: #fca5a5; }

.dd-posts-scroll {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.dd-posts-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 920px; }
.dd-posts-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7280;
  padding: 11px 14px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.dd-posts-table tbody tr { transition: background .12s; }
.dd-posts-table tbody tr:hover { background: #fbfcfe; }
.dd-posts-table td {
  padding: 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}
.dd-posts-table tr:last-child td { border-bottom: none; }
.dd-col-num   { width: 40px; color: #9ca3af; font-weight: 700; font-size: 13px; }
.dd-col-date  { width: 150px; }
.dd-col-cap   { min-width: 240px; }
.dd-col-media { width: 280px; }
.dd-col-cr    { width: 240px; }
.dd-col-act   { width: 46px; }

/* Post-date control */
.dd-date-cell { display: flex; flex-direction: column; }
.dd-date-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 13px;
  cursor: pointer;
  max-width: 100%;
  text-align: left;
  white-space: nowrap;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.dd-date-btn .dd-date-ico { flex: 0 0 auto; color: #6b7280; }
.dd-date-btn .dd-date-text { overflow: hidden; text-overflow: ellipsis; }
.dd-date-btn.dd-date-empty { color: #9ca3af; font-weight: 500; }
.dd-date-btn.dd-date-empty .dd-date-ico { color: #9ca3af; }
.dd-date-btn:hover { border-color: #93c5fd; background: #f8faff; }
.dd-date-btn:focus-visible { outline: none; border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.dd-date-input { width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; }

/* Caption editor — toolbar + divider + editable area, all inside one box */
.dd-cap-cell { display: flex; flex-direction: column; }
.dd-cap-shell {
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
.dd-cap-shell:focus-within { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59,130,246,.16); }
.dd-cap-toolbar {
  display: flex; gap: 3px; flex-wrap: wrap;
  padding: 6px 8px; background: #f9fafb;
}
.dd-cap-tool {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  cursor: pointer; color: #4b5563;
  transition: background .12s, color .12s, border-color .12s;
}
.dd-cap-tool svg { display: block; }
.dd-cap-tool:hover { background: #fff; border-color: #e5e7eb; color: #1d4ed8; }
.dd-cap-tool:active { background: #eef2ff; }
.dd-cap-divider { height: 1px; background: #eceef1; }
.dd-cap-editor {
  min-height: 78px;
  padding: 11px 12px;
  font-size: 13px;
  line-height: 1.55;
  color: #111827;
  outline: none;
  background: #fff;
  overflow-wrap: anywhere;
}
.dd-cap-editor:empty::before { content: attr(data-ph); color: #9ca3af; }
.dd-cap-editor ul { margin: 4px 0; padding-left: 20px; }
.dd-cap-editor li { margin: 2px 0; }
/* Shared Quill rich editor (window.mountRichEditor) hosts — caption + notes.
   The snow theme supplies its own toolbar/border; we only size + round it so
   it sits cleanly inside the cell. */
.dd-cap-quill .ql-toolbar.ql-snow,
.dd-note-quill .ql-toolbar.ql-snow {
  border-top-left-radius: 10px; border-top-right-radius: 10px;
  border-color: #d1d5db; background: #f9fafb;
}
.dd-cap-quill .ql-container.ql-snow,
.dd-note-quill .ql-container.ql-snow {
  border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
  border-color: #d1d5db; font-size: 13px;
}
.dd-cap-quill .ql-editor { min-height: 78px; }
.dd-note-quill .ql-editor { min-height: 64px; }
.dd-cap-quill .ql-editor.ql-blank::before,
.dd-note-quill .ql-editor.ql-blank::before { color: #9ca3af; font-style: normal; }

.dd-saving-tag { font-size: 11px; color: #9ca3af; margin-top: 5px; min-height: 14px; padding-left: 2px; }
.dd-saving-tag.is-saving { color: #2563eb; }
.dd-saving-tag.is-error { color: #b91c1c; }

/* Emoji picker */
.dd-emoji-pop {
  position: absolute;
  z-index: 9000;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  max-width: 280px;
}
.dd-emoji-pop button {
  border: none; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 4px; border-radius: 6px;
}
.dd-emoji-pop button:hover { background: #f3f4f6; }

/* Media sections — collapsible toggles */
.dd-media-block {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.dd-media-block:last-child { margin-bottom: 0; }
/* Drag-and-drop target state: highlights the whole card while a file/link is dragged over it. */
.dd-media-block.is-dragover {
  border-color: #6366f1;
  background: #eef2ff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.dd-media-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%;
  border: none; background: #f9fafb;
  padding: 8px 11px;
  cursor: pointer;
  font: inherit; text-align: left;
  transition: background .12s;
}
.dd-media-header:hover { background: #f1f5f9; }
.dd-media-header-left { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.dd-media-plat-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto; color: #fff;
}
.dd-media-plat-facebook { background: #1877f2; }
.dd-media-plat-instagram { background: linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7); }
.dd-media-plat-stories { background: #111827; }
.dd-media-label {
  font-size: 12px; font-weight: 700; letter-spacing: .01em; color: #374151;
}
.dd-media-count {
  font-size: 11px; font-weight: 700; color: #3730a3; background: #e0e7ff;
  border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center;
}
.dd-media-chev-wrap { display: inline-flex; color: #9ca3af; flex: 0 0 auto; }
.dd-media-chev { transition: transform .18s ease; }
.dd-media-block.is-open .dd-media-chev { transform: rotate(180deg); }
.dd-media-body { padding: 10px 11px; }
.dd-media-items { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.dd-media-empty {
  font-size: 12px; color: #9ca3af; padding: 8px 10px; width: 100%;
  border: 1px dashed #e5e7eb; border-radius: 9px; background: #fafbfc; text-align: center;
}
.dd-media-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #e5e7eb; border-radius: 10px; padding: 5px 9px 5px 5px; background: #f9fafb;
  font-size: 12px; max-width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
.dd-media-chip:hover { border-color: #cbd5e1; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
/* Uniform thumbnails: fixed square box, cover-cropped so every asset aligns. */
.dd-media-chip img, .dd-media-chip video {
  width: 40px; height: 40px; object-fit: cover; border-radius: 7px; flex: 0 0 auto;
  background: #eef2f6; display: block; border: 1px solid #e5e7eb;
}
.dd-media-vico { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 7px; background: #eef2ff; color: #4338ca; flex: 0 0 auto; border: 1px solid #e0e7ff; }
.dd-media-chip .dd-media-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #374151; max-width: 150px; }
.dd-media-chip .dd-media-name a { color: #2563eb; text-decoration: none; }
.dd-media-chip .dd-media-name a:hover { text-decoration: underline; }
.dd-media-chip-x {
  border: none; background: none; cursor: pointer; color: #9ca3af;
  font-size: 16px; line-height: 1; padding: 0 1px; flex: 0 0 auto;
}
.dd-media-chip-x:hover { color: #b91c1c; }
/* Legacy media rows holding a dead `blob:` url — the file was never stored on
   the server, so there is no thumbnail to show. Amber, not red: the row is
   recoverable by deleting it and re-uploading. */
.dd-media-chip-dead { border-color: #fcd34d; background: #fffbeb; }
.dd-media-chip-dead:hover { border-color: #f59e0b; }
.dd-media-dead-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 7px; flex: 0 0 auto;
  background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
  font-weight: 700; font-size: 15px; cursor: help;
}
/* Image thumbnails open the full-screen preview overlay on click. */
.dd-media-thumb-clickable { cursor: zoom-in; transition: filter .12s, border-color .12s; }
.dd-media-thumb-clickable:hover { filter: brightness(.92); border-color: #93c5fd; }
.dd-media-controls { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.dd-media-upload {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; border: 1px dashed #cbd5e1; border-radius: 8px;
  padding: 6px 11px; cursor: pointer; color: #374151; background: #fff;
  transition: border-color .12s, color .12s, background .12s;
}
.dd-media-upload:hover { border-color: #93c5fd; color: #1d4ed8; background: #f8faff; }
.dd-media-upload svg { color: #6b7280; }
.dd-media-upload input { display: none; }
.dd-media-vidbtn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; border: 1px solid #d1d5db; border-radius: 8px;
  padding: 6px 11px; cursor: pointer; color: #374151; background: #fff;
  transition: border-color .12s, color .12s, background .12s;
}
.dd-media-vidbtn:hover { border-color: #93c5fd; color: #1d4ed8; background: #f8faff; }

/* Change-request cards */
.dd-cr-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.dd-cr-card {
  border: 1px solid #e5e7eb; border-radius: 10px; padding: 9px 11px; background: #fafafa;
}
.dd-cr-top { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.dd-cr-name { font-size: 12px; font-weight: 700; color: #111827; }
.dd-cr-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 6px; border-radius: 999px;
}
.dd-cr-tag.is-client { background: #fef3c7; color: #92400e; }
.dd-cr-tag.is-crm { background: #e0e7ff; color: #3730a3; }

/* Agri4All Posts — metadata summary chips, one colour per post type.
   Surviving booleans show the type name; surviving amounts show "… xN". */
.dd-a4a-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dd-a4a-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.dd-a4a-tag.is-fb  { background: #dbeafe; color: #1e40af; }   /* Facebook — blue */
.dd-a4a-tag.is-igp { background: #fce7f3; color: #9d174d; }   /* Instagram posts — pink/purple */
.dd-a4a-tag.is-igs { background: #ede9fe; color: #5b21b6; }   /* Instagram stories — violet */
.dd-cr-body { font-size: 12px; color: #374151; line-height: 1.45; overflow-wrap: anywhere; }
.dd-cr-shots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.dd-cr-shots img { width: 40px; height: 40px; object-fit: cover; border-radius: 5px; border: 1px solid #e5e7eb; }
.dd-cr-empty { font-size: 12px; color: #9ca3af; margin-bottom: 10px; }

/* "+ Add change request" trigger */
.dd-cr-addbtn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; border: 1px dashed #cbd5e1; border-radius: 8px;
  padding: 7px 12px; cursor: pointer; color: #374151; background: #fff; width: 100%;
  justify-content: center;
  transition: border-color .12s, color .12s, background .12s;
}
.dd-cr-addbtn:hover { border-color: #93c5fd; color: #1d4ed8; background: #f8faff; }

.dd-col-act .dd-btn { padding: 6px; width: 32px; height: 32px; justify-content: center; }

/* ── Posts: stacked-card layout on narrow screens ─────────────────────────
   Below 760px the 5-column table is too wide; collapse each row into a
   vertical card with full-width, labelled fields (no horizontal scroll,
   no tall empty cells). */
@media (max-width: 760px) {
  .dd-posts-scroll { overflow-x: visible; border: none; border-radius: 0; }
  .dd-posts-table { min-width: 0; width: 100%; display: block; }
  .dd-posts-table thead { display: none; }
  .dd-posts-table tbody { display: block; }
  .dd-posts-table tr {
    display: block;
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    padding: 14px;
    margin-bottom: 14px;
  }
  .dd-posts-table tr:last-child td { border-bottom: 1px solid #f1f5f9; }
  .dd-posts-table td {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 0 14px 0;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
  }
  /* Field label above each stacked cell */
  .dd-posts-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 7px;
  }
  /* Row header: post number + delete on one line, no label/border */
  .dd-posts-table td.dd-col-num {
    font-size: 13px;
    color: #111827;
    padding-bottom: 12px;
  }
  .dd-posts-table td.dd-col-num::before { display: none; }
  .dd-posts-table td.dd-col-num {
    color: #111827; font-weight: 800; font-size: 14px;
  }
  /* Delete button: pin to the top-right of the card, hide its label */
  .dd-posts-table td.dd-col-act {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 0;
    border-bottom: none;
  }
  .dd-posts-table td.dd-col-act::before { display: none; }
  /* Last real field shouldn't carry a divider */
  .dd-posts-table td.dd-col-cr { padding-bottom: 0; border-bottom: none; }
  /* Let captions + media use the full card width */
  .dd-cap-cell, .dd-media-block, .dd-cr-card, .dd-cr-addbtn { width: 100%; }
}

/* ── Shared anchored popup (video / change-request forms) ─────────────── */
.dd-popup {
  position: absolute; z-index: 9100;
  width: 280px; max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,23,42,.18);
  overflow: hidden;
}
.dd-popup-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid #f1f5f9; background: #f9fafb;
}
.dd-popup-title { font-size: 13px; font-weight: 700; color: #111827; }
.dd-popup-x {
  border: none; background: none; cursor: pointer; color: #9ca3af;
  font-size: 18px; line-height: 1; padding: 0 2px;
}
.dd-popup-x:hover { color: #374151; }
.dd-popup-body { padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.dd-popup-hint { font-size: 11px; color: #6b7280; }
.dd-popup-input, .dd-popup-ta {
  width: 100%; box-sizing: border-box;
  font-size: 13px; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px;
  font-family: inherit; outline: none; transition: border-color .12s, box-shadow .12s;
}
.dd-popup-ta { resize: vertical; min-height: 64px; line-height: 1.45; }
.dd-popup-input:focus, .dd-popup-ta:focus { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.dd-popup-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dd-popup-files { font-size: 11px; color: #2563eb; }

/* ═══════════════════════════════════════════════════════════════════════
   Website-design dashboard (type === 'website-design')
   Two-column grid: main (left) + sidebar (right); stacks on narrow widths.
   ═══════════════════════════════════════════════════════════════════════ */
.dd-wd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (min-width: 821px) {
  .dd-wd-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.dd-wd-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;            /* let children shrink instead of overflowing the column */
}
.dd-wd-muted { color: #9ca3af; font-size: 13px; }

/* Designs card */
.dd-wd-designs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.dd-wd-design-card {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  padding: 8px;
  width: 180px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dd-wd-design-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
}
.dd-wd-design-pdf {
  width: 100%;
  height: 200px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
}
.dd-wd-openlink {
  font-size: 12px;
  color: #2563eb;
  text-decoration: none;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.dd-wd-openlink:hover { text-decoration: underline; }
.dd-wd-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  color: #9ca3af;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.dd-wd-del:hover { color: #b91c1c; }

.dd-wd-design-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.dd-wd-linkrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.dd-wd-linklabel {
  flex: 0 1 140px;
  min-width: 0;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 7px;
}
.dd-wd-linkurl {
  flex: 1 1 180px;
  min-width: 0;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 7px;
}

/* Internal design-changes resolved tag */
.dd-wd-resolved {
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
  margin-top: 6px;
}
.dd-cr-card .dd-btn { margin-top: 8px; }

/* CR complete / undo controls */
.dd-cr-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.dd-cr-actions .dd-wd-resolved { margin-top: 0; }
.dd-cr-actions .dd-btn { margin-top: 0; }
.dd-btn-complete { background: #16a34a; border-color: #16a34a; color: #fff; }
.dd-btn-complete:hover { background: #15803d; border-color: #15803d; }
.dd-btn-undo { color: #6b7280; border-color: #e5e7eb; }
.dd-btn-undo:hover { background: #f3f4f6; border-color: #d1d5db; }

/* Request Materials card */
.dd-wd-materials { display: flex; flex-direction: column; gap: 12px; }
.dd-wd-qa { display: flex; flex-direction: column; gap: 3px; }
.dd-wd-q {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6b7280;
}
.dd-wd-a {
  font-size: 13px;
  color: #111827;
  overflow-wrap: anywhere;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.dd-wd-a-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  cursor: pointer;
}

/* Focus-points card: file/attachment answers (mirrors .dd-wd-a-thumb / .dd-wd-openlink) */
.dd-focus-thumb {
  margin: 2px 6px 2px 0;
  vertical-align: middle;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  cursor: pointer;
}
.dd-focus-filelink { color: #2563eb; text-decoration: none; font-size: 13px; }
.dd-focus-filelink:hover { text-decoration: underline; }

/* Notes card */
.dd-wd-notes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.dd-wd-note {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fafafa;
  padding: 8px 28px 8px 10px;
}
.dd-wd-note-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.dd-wd-note-author { font-size: 12px; font-weight: 700; color: #111827; }
.dd-wd-note-date { font-size: 11px; color: #9ca3af; }
.dd-wd-note-body {
  font-size: 13px;
  color: #374151;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.dd-wd-note .dd-wd-del { top: 6px; right: 6px; background: transparent; box-shadow: none; }
.dd-wd-note-add { display: flex; flex-direction: column; gap: 6px; }
.dd-wd-note-add .dd-btn { align-self: flex-start; }

/* ── Title row: heading + a small "View JSON" button beside it ───────────── */
.dd-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dd-title-row .dd-title { min-width: 0; }   /* let the title ellipsize, not the button */
.dd-viewjson {
  flex: 0 0 auto;
  padding: 3px 10px;
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1.4;
  color: #374151; background: #fff;
  border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer;
  white-space: nowrap;
}
.dd-viewjson:hover { background: #f3f4f6; }
.dd-viewjson:disabled { opacity: .6; cursor: default; }

/* ── #192 / #152 Notes & activity ────────────────────────────────────────── */
/* Full-width card appended below every dashboard. Two columns on desktop
   (write on the left, history on the right); stacked on narrow screens. */
.dd-notes-activity { margin-top: 16px; }
.dd-na-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.dd-na-col { min-width: 0; }
.dd-na-subtitle {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  margin: 4px 0 8px;
}
.dd-na-add { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.dd-na-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  resize: vertical;
}
.dd-na-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}
.dd-na-add .dd-btn { align-self: flex-start; }
.dd-na-error { margin-top: 8px; font-size: 12px; font-weight: 600; color: #b91c1c; }
.dd-na-error[hidden] { display: none; }

.dd-na-activity { display: flex; flex-direction: column; gap: 6px; }
/* One line per event, so a long history stays scannable. The actor is the
   thing being looked for ("did someone else work on this"), so it leads. */
.dd-na-act {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.45;
  background: #f8fafc;
  border-radius: 6px;
}
.dd-na-act-who { font-weight: 700; color: #334155; }
.dd-na-act-what { color: #475569; min-width: 0; overflow-wrap: anywhere; }
.dd-na-act-when { margin-left: auto; color: #94a3b8; white-space: nowrap; }

@media (max-width: 860px) {
  .dd-na-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dd-na-act-when { margin-left: 0; }
}

html[data-theme="dark"] .dd-na-subtitle { color: #94a3b8; }
html[data-theme="dark"] .dd-na-input {
  color: #e2e8f0;
  background: #0f172a;
  border-color: #334155;
}
html[data-theme="dark"] .dd-na-act { background: rgba(148, 163, 184, 0.10); }
html[data-theme="dark"] .dd-na-act-who { color: #e2e8f0; }
html[data-theme="dark"] .dd-na-act-what { color: #cbd5e1; }
html[data-theme="dark"] .dd-na-act-when { color: #64748b; }
html[data-theme="dark"] .dd-na-error { color: #fca5a5; }

/* ── #154 header status control ──────────────────────────────────────────── */
/* The pill itself is styled by production-page.css (.prod-status-pill and
   friends, already loaded). Only the header placement + the error line live
   here, so the pill can never drift from the sheet's. */
.dd-title-status {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
.dd-title-status-pill { cursor: pointer; }
.dd-title-status-pill:disabled { opacity: .6; cursor: default; }
/* A blocked advance / server rejection has to be visible right where the click
   was — a silently-reverting pill is the failure mode this replaces. */
.dd-title-status-msg {
  max-width: 320px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: #b91c1c;
}
.dd-title-status-msg[hidden] { display: none; }
.dd-title-status-menu { max-height: 320px; overflow-y: auto; }

html[data-theme="dark"] .dd-title-status-msg { color: #fca5a5; }

/* ── JSON modal ──────────────────────────────────────────────────────────── */
.dd-json-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.dd-json-panel {
  background: #fff; border-radius: 12px;
  width: min(900px, 100%); max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  overflow: hidden;
}
.dd-json-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid #e5e7eb;
}
.dd-json-title { font-weight: 700; font-size: 16px; flex: 1; }
.dd-json-copy {
  padding: 6px 12px; font-size: 13px; font-weight: 600;
  color: #fff; background: #2563eb; border: 0; border-radius: 8px; cursor: pointer;
}
.dd-json-copy:hover { background: #1d4ed8; }
.dd-json-close {
  width: 32px; height: 32px; font-size: 22px; line-height: 1;
  color: #6b7280; background: transparent; border: 0; border-radius: 8px; cursor: pointer;
}
.dd-json-close:hover { background: #f3f4f6; }
.dd-json-pre {
  margin: 0; padding: 16px; overflow: auto; flex: 1;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.5; color: #111827;
  white-space: pre; word-break: normal;
}
.dd-json-copyta { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* ── Full-screen post-image preview + change-request overlay ───────────────
   Clicking a content-calendar post image opens a split-pane overlay: a large
   image preview on the left, a scrollable change-request panel on the right
   (~360px). Reuses the .dd-cr-* card styling inside the panel. */
.dd-preview-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.dd-preview-panel {
  background: #fff; border-radius: 14px; overflow: hidden;
  width: min(1200px, 100%); height: min(800px, 92vh);
  display: flex;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.dd-preview-img-pane {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  background: #0f172a; padding: 18px;
}
.dd-preview-del {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; font-weight: 600; line-height: 1;
  color: #fff; background: #dc2626; border: 0; border-radius: 8px;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.dd-preview-del:hover { background: #b91c1c; }
.dd-preview-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
.dd-preview-img-missing { color: #cbd5e1; font-size: 14px; }
.dd-preview-cr-pane {
  flex: 0 0 360px; width: 360px; max-width: 360px;
  display: flex; flex-direction: column;
  border-left: 1px solid #e5e7eb; background: #fff;
}
.dd-preview-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid #e5e7eb; flex: 0 0 auto;
}
.dd-preview-titlewrap { flex: 1; min-width: 0; }
.dd-preview-title { font-weight: 700; font-size: 16px; color: #111827; }
.dd-preview-sub { font-size: 12px; color: #6b7280; margin-top: 2px; }
.dd-preview-close {
  width: 32px; height: 32px; font-size: 22px; line-height: 1; flex: 0 0 auto;
  color: #6b7280; background: transparent; border: 0; border-radius: 8px; cursor: pointer;
}
.dd-preview-close:hover { background: #f3f4f6; }
.dd-preview-cr-body { flex: 1; overflow-y: auto; padding: 14px 16px; }

/* Tablet / mobile: stack the panes vertically so neither is cut off. */
@media (max-width: 760px) {
  .dd-preview-overlay { padding: 0; }
  .dd-preview-panel {
    flex-direction: column; border-radius: 0;
    width: 100%; height: 100%;
  }
  .dd-preview-img-pane { flex: 1 1 auto; min-height: 0; }
  .dd-preview-cr-pane {
    flex: 0 0 auto; width: 100%; max-width: 100%; max-height: 50%;
    border-left: 0; border-top: 1px solid #e5e7eb;
  }
}

/* ── Website card (agri4all-product-uploads) ──────────────────────────────
   Single synced URL field + "No website available" checkbox. Matches the
   dashboard card styling; writes the SAME metadata keys as the production
   sheet so both surfaces stay in sync. */
.dd-website-body { display: flex; flex-direction: column; gap: 10px; }
.dd-website-input {
  width: 100%;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #111827;
  background: #fff;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dd-website-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
}
.dd-website-input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}
.dd-website-nowebsite {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #6b7280;
  cursor: pointer;
  user-select: none;
}
.dd-website-nowebsite input { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════
   Online-articles dashboard (type === 'online-articles')
   Follows the dd-wd-* conventions: cards, muted text, upload labels.
   ═══════════════════════════════════════════════════════════════════════ */

/* Upload area: holds the per-platform upload columns */
.dd-oa-upload-area {
  margin-top: 14px;
}

/* Upload row: one column per platform, side by side, wraps when 3-4 */
.dd-oa-upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
}

/* Single upload column (one platform). flex:1 1 220px so two sit side by
   side and three/four wrap cleanly; min-width keeps content from cutting off. */
.dd-oa-upload-col {
  flex: 1 1 220px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Bold platform label ABOVE each upload field */
.dd-oa-upload-platform {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Preview list: stacked blocks, one per uploaded article (per column) */
.dd-oa-preview-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

/* Individual preview block */
.dd-oa-preview-block {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  padding: 10px 12px 10px 12px;
  padding-right: 34px;  /* room for the × button */
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;     /* contain the body scroll, prevent block overflow */
}

/* Filename above the preview */
.dd-oa-preview-fname {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Delete button (positioned top-right, matches dd-wd-del style) */
.dd-oa-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  color: #9ca3af;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.dd-oa-del:hover { color: #b91c1c; }

/* Word-document rendered body: scrollable, max-height capped */
.dd-oa-preview-body {
  font-size: 13px;
  color: #111827;
  line-height: 1.6;
  overflow-y: auto;
  max-height: 340px;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
  /* Indent mammoth-generated content slightly */
  padding: 0 2px;
}
.dd-oa-preview-body::-webkit-scrollbar { width: 5px; }
.dd-oa-preview-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
/* Normalise mammoth HTML output: suppress extra spacing */
.dd-oa-preview-body p { margin: 0 0 6px; }
.dd-oa-preview-body ul,
.dd-oa-preview-body ol { margin: 0 0 6px; padding-left: 18px; }
.dd-oa-preview-body li { margin-bottom: 2px; }

/* PDF preview iframe */
.dd-oa-preview-pdf {
  width: 100%;
  height: 360px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
}

/* Previous Articles card: carded download list */
.dd-oa-prev-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dd-oa-prev-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
  padding: 8px 10px;
  min-width: 0;
  /* Prevent long filenames from pushing the download button off-screen;
     horizontal scroll on the row beats text cutoff. */
  overflow-x: auto;
}

.dd-oa-prev-name {
  font-size: 13px;
  color: #374151;
  word-break: break-word;
  overflow-wrap: anywhere;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Platform chip next to the filename in the Previous Articles list */
.dd-oa-prev-platform {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: #0f766e;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* Download button: reuses dd-btn sizing, distinct teal tint */
.dd-oa-download-btn {
  flex: 0 0 auto;
  text-decoration: none;
  color: #0f766e;
  border-color: #99f6e4;
  background: #f0fdfa;
  white-space: nowrap;
}
.dd-oa-download-btn:hover {
  background: #ccfbf1;
  border-color: #5eead4;
  color: #0f766e;
}

/* Responsive: on narrow screens stack the upload columns full width */
@media (max-width: 600px) {
  .dd-oa-upload-col {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Responsive: on narrow screens stack the prev-card column */
@media (max-width: 480px) {
  .dd-oa-prev-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .dd-oa-download-btn { align-self: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MAGAZINE dashboard
   Reuses .dd-oa-preview-block / .dd-oa-preview-body / .dd-oa-preview-pdf /
   .dd-oa-del for the Article + Design preview lists; adds magazine-only bits
   below (subtype pill, image-preview block, image thumbnail grid).
   ═══════════════════════════════════════════════════════════════════════ */

/* Colour-coded subtype pill in the Brief card (background set inline) */
.dd-mag-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* Editable publication-tag control (pill-styled <select>, coloured by value) */
.dd-mag-tag-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: 100%;
}
.dd-mag-tag-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: #6b7280;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 26px 4px 10px;
  max-width: 100%;
  cursor: pointer;
  /* caret drawn inline so the pill stays self-contained (no overflow) */
  background-image:
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 9px 9px;
}
.dd-mag-tag-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .35);
}
.dd-mag-tag-select.is-placeholder {
  color: #6b7280;
  background-color: #f3f4f6;
  border-color: #d1d5db;
  font-weight: 500;
  /* dark caret for the light placeholder pill */
  background-image:
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* native dropdown list items render on a normal light background */
.dd-mag-tag-select option {
  color: #111827;
  background: #fff;
  font-weight: 500;
}
.dd-mag-tag-wrap .dd-saving-tag { margin-top: 0; }

/* Editable Brief text fields (page size / page type / special position / line item) */
.dd-mag-edit-input {
  font: inherit;
  font-size: 13px;
  color: #111827;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px 8px;
  width: 100%;
  max-width: 260px;
  box-sizing: border-box;
}
.dd-mag-edit-input::placeholder { color: #9ca3af; }
.dd-mag-edit-input:hover { border-color: #9ca3af; }
.dd-mag-edit-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .25); }
/* Editable Brief rows: span the full Brief width (not cramped in the 2-col grid);
   input fills the row, the saving tag stays on one line beside it (no vertical wrap). */
.dd-mag-edit-row { grid-column: 1 / -1; }
.dd-mag-edit-value { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.dd-mag-edit-value .dd-mag-edit-input { flex: 1 1 220px; max-width: 420px; min-width: 0; }
.dd-mag-edit-value .dd-saving-tag { margin-top: 0; white-space: nowrap; flex: 0 0 auto; }

/* Article / Design preview list (stacked blocks, one per file) */
.dd-mag-preview-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

/* Image rendered inside a preview block (Design card image uploads) */
.dd-mag-preview-img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  display: block;
}

/* Images card: responsive thumbnail grid */
.dd-mag-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

/* Single image cell (thumbnail + delete x) */
.dd-mag-img-cell {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  min-width: 0;
}

.dd-mag-img-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  display: block;
}

/* The image grid's delete x reuses .dd-oa-del positioning — no extra rule
   needed (it is position:absolute top/right within the cell). */

/* Responsive: tighten the image grid on narrow screens */
@media (max-width: 480px) {
  .dd-mag-img-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   AGRI4ALL-BANNERS dashboard (Team controls + Brief + Banner Assets + Google Ads)
   ═══════════════════════════════════════════════════════════════════════ */

/* — Team card controls (shared by the reusable window.renderTeamCard) — */
.dd-team-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.dd-team-select {
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  cursor: pointer;
  max-width: 100%;
}
.dd-team-customrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  width: 100%;
  margin-top: 4px;
}
.dd-team-customlabel {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}
.dd-team-member { position: relative; }
.dd-team-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  color: #9ca3af;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.dd-team-del:hover { color: #b91c1c; }

/* — Brief card (per-month banner surfaces) — */
.dd-banner-brief { display: flex; flex-direction: column; gap: 12px; }
.dd-banner-brief-month {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  padding: 10px 12px;
}
.dd-banner-brief-head { font-size: 13px; font-weight: 700; color: #111827; }
.dd-banner-brief-sub { font-size: 11px; color: #9ca3af; margin: 2px 0 8px; }
.dd-banner-brief-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px solid #f1f5f9;
}
.dd-banner-brief-row:first-of-type { border-top: none; }
.dd-banner-brief-platform { font-size: 13px; font-weight: 600; color: #1f2937; }
.dd-banner-brief-imp { font-size: 12px; color: #2563eb; font-weight: 600; white-space: nowrap; }

/* — Banner Assets card — */
.dd-banner-assets { display: flex; flex-direction: column; gap: 12px; }
.dd-banner-asset-row {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dd-banner-asset-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.dd-banner-asset-label { font-size: 13px; font-weight: 600; color: #111827; }
.dd-banner-asset-head .dd-wd-del { position: static; }
.dd-banner-asset-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  background: #fff;
  border: 1px dashed #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.dd-banner-asset-img {
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
  cursor: pointer;
  display: block;
}
.dd-banner-asset-empty { font-size: 12px; color: #9ca3af; padding: 24px 0; }

.dd-banner-addsize {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 4px;
}
.dd-banner-newsize {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  width: 100%;
}
.dd-banner-newsize-label {
  flex: 1 1 160px;
  min-width: 0;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}
.dd-banner-newsize-dim {
  width: 70px;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}
.dd-banner-newsize-x { color: #9ca3af; }

/* — Google Ads Upload card — */
.dd-banner-links { display: flex; flex-direction: column; gap: 8px; }
.dd-banner-link-row {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dd-banner-link-label { font-size: 13px; font-weight: 600; color: #111827; }
.dd-banner-link-url {
  font-size: 12px;
  color: #2563eb;
  text-decoration: none;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.dd-banner-link-url:hover { text-decoration: underline; }
.dd-banner-link-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.dd-banner-sched {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}
.dd-banner-sched-title { font-size: 13px; font-weight: 700; color: #111827; margin-bottom: 8px; }
.dd-banner-sched-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dd-banner-sched-date,
.dd-banner-sched-time {
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
}
/* flatpickr altInput inherits these classes; keep it readable and clickable. */
.dd-banner-sched-row .flatpickr-input[readonly] {
  background: #fff;
  cursor: pointer;
  min-width: 150px;
}
.dd-banner-sched-row input.flatpickr-input.dd-banner-sched-time { min-width: 120px; }

.dd-banner-campaign {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dd-banner-field { display: flex; flex-direction: column; gap: 4px; }
.dd-banner-field-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #9ca3af;
}
.dd-banner-field-input {
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}
.dd-banner-openads {
  margin-top: 14px;
  text-decoration: none;
  align-self: flex-start;
}

@media (max-width: 480px) {
  .dd-banner-link-actions .dd-btn { flex: 1 1 auto; text-align: center; }
}

/* Upload timestamp shown next to a stored file's name (· 22 Jun 2026 14:30). */
.dd-asset-uploaded {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  color: #9ca3af;
  white-space: nowrap;
}
.dd-wd-design-meta { margin-top: 4px; }

/* — Video Budgets card — */
.dd-budget-list { display: flex; flex-direction: column; gap: 8px; }
.dd-budget-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dd-budget-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}
.dd-budget-amt-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.dd-budget-amt-prefix { color: #6b7280; font-size: 13px; }
.dd-budget-amount {
  width: 110px;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  text-align: right;
}
.dd-budget-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
}
.dd-budget-total-label { font-size: 13px; font-weight: 600; color: #6b7280; }
.dd-budget-total-val { font-size: 16px; font-weight: 700; color: #111827; }
.dd-budget-add { margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════════════
   AGRI4ALL-PRODUCT-UPLOADS — "Product Images" card (a4apu-*)
   Each image is a row: thumbnail (left) → Change Requests mini-card (middle)
   → "Change request" button (right). Reuses the dashboard's neutral palette
   (#e5e7eb borders, #f9fafb insets, teal accent #0f766e family for primaries,
   #16a34a success for resolved). Stacks to one column at ≤640px.
   ═══════════════════════════════════════════════════════════════════════ */

/* Vertical stack of image rows */
.a4apu-img-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* One image row: thumb + CR column + request button, side by side */
.a4apu-img-row {
  display: flex;
  flex-wrap: wrap;            /* wraps gracefully on narrow widths */
  align-items: flex-start;
  gap: 16px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

/* Thumbnail container — a button, stripped of default chrome */
.a4apu-img-thumb {
  flex: 0 0 120px;
  width: 120px;
  max-width: 100%;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;            /* kill inline-img descender gap */
  transition: border-color .12s, box-shadow .12s, filter .12s;
}
.a4apu-img-thumb:hover { border-color: #93c5fd; box-shadow: 0 1px 4px rgba(0,0,0,.08); filter: brightness(.97); }
.a4apu-img-thumb:focus-visible { outline: none; border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.a4apu-img-thumb img {
  width: 100%;
  height: auto;
  max-height: 120px;
  object-fit: cover;
  border-radius: 7px;
  display: block;
}

/* Agri4All Posts — plain multi-image upload grid (metadata.post_images.files[]).
   Reuses .a4apu-img-thumb for each tile and .dd-wd-del for the corner remove
   button; the cell just needs relative positioning so the delete overlays. */
.dd-post-images-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.dd-post-image-cell { position: relative; }

/* Middle column — the Change Requests mini-card; takes the slack */
.a4apu-cr-col {
  flex: 1 1 220px;
  min-width: 0;              /* let long CR text wrap instead of overflowing */
  padding: 10px 12px;
  border: 1px solid #eef0f2;
  border-radius: 10px;
  background: #f9fafb;       /* light inset */
}

/* Stacked list of change-request chips */
.a4apu-cr-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* A single change-request chip */
.a4apu-cr-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  line-height: 1.45;
  color: #374151;
}
.a4apu-cr-item > span,
.a4apu-cr-item .a4apu-cr-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;   /* body text wraps, never overflows */
}
/* Resolved: muted, struck, success-tinted left border */
.a4apu-cr-item.is-resolved {
  opacity: .6;
  border-left-color: #16a34a;
}
.a4apu-cr-item.is-resolved .a4apu-cr-text,
.a4apu-cr-item.is-resolved > span { text-decoration: line-through; }

/* Tiny inline resolve (✓) / undo controls — unobtrusive */
.a4apu-cr-resolve,
.a4apu-cr-undo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.a4apu-cr-resolve { color: #16a34a; }
.a4apu-cr-resolve:hover { background: #f0fdf4; border-color: #bbf7d0; }
.a4apu-cr-undo { color: #6b7280; }
.a4apu-cr-undo:hover { background: #f3f4f6; border-color: #e5e7eb; color: #374151; }

/* Empty-state placeholder */
.a4apu-cr-empty {
  font-size: 12px;
  font-style: italic;
  color: #9ca3af;            /* secondary text */
}

/* Per-image "Change request" button — secondary/outline, top-aligned */
.a4apu-cr-btn {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.a4apu-cr-btn:hover { background: #f8faff; border-color: #93c5fd; color: #1d4ed8; }

/* Dashed upload / drop zone */
.a4apu-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 16px;
  margin-top: 12px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #fafbfc;
  text-align: center;
  color: #6b7280;
  font-size: 13px;
  transition: border-color .12s, background .12s;
}
.a4apu-upload-zone:hover { border-color: #94a3b8; background: #f1f5f9; }

/* Upload button — neutral/outline (no green), secondary-button styling */
.a4apu-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.a4apu-upload-btn:hover { background: #f3f4f6; border-color: #9ca3af; }

/* ── Change-request modal (centered popup) ──────────────────────────────── */
.a4apu-cr-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;             /* above everything */
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.a4apu-cr-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.a4apu-cr-modal-card {
  width: 90%;
  max-width: 520px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 90vh;
  overflow-y: auto;
}
.a4apu-cr-modal-img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}
.a4apu-cr-modal-ta {
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: #111827;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  resize: vertical;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.a4apu-cr-modal-ta:focus { border-color: #5eead4; box-shadow: 0 0 0 3px rgba(15,118,110,.16); }

/* Footer button row — right-aligned with gap */
.a4apu-cr-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.a4apu-cr-modal-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border: 1px solid #0f766e;
  border-radius: 8px;
  background: #0f766e;
  color: #fff;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.a4apu-cr-modal-submit:hover { background: #0c5f59; border-color: #0c5f59; }
.a4apu-cr-modal-cancel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.a4apu-cr-modal-cancel:hover { background: #f3f4f6; color: #374151; }

/* ── Responsive: stack each row to a column at ≤640px ────────────────────── */
@media (max-width: 640px) {
  .a4apu-img-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .a4apu-img-thumb {
    flex: 0 0 auto;
    width: 100%;             /* thumbnail on top, full width */
  }
  .a4apu-img-thumb img { max-height: 200px; }
  .a4apu-cr-col { flex: 1 1 auto; width: 100%; }
  .a4apu-cr-btn {            /* request button full-width at the bottom */
    align-self: stretch;
    width: 100%;
    justify-content: center;
  }
}

/* JS renders the CR body with the shared .dd-cr-body class — carry the
   resolved line-through onto it too (matches .a4apu-cr-text styling). */
.a4apu-cr-item.is-resolved .dd-cr-body { text-decoration: line-through; }

/* ── A4A dashboard 2-col layout ─────────────────────────────────────────────
   Team (left) + Request Materials (right) on row 1, Brief (left) on row 2,
   Product Images spanning the full width below. Stacks to one column on
   narrow screens. */
.a4apu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.a4apu-grid > .dd-card { margin: 0; }
.a4apu-images-card { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .a4apu-grid { grid-template-columns: 1fr; }
  .a4apu-images-card { grid-column: 1 / -1; }
}

/* A4A Product Images table — image column (CC posts-table styling reused). */
.dd-col-a4aimg { width: 150px; }
.dd-posts-table .dd-col-a4aimg .a4apu-img-thumb { margin: 0; }
/* Thumbnail wrapper so the corner .dd-wd-del remove button overlays the image. */
.a4apu-img-cell { position: relative; display: inline-block; }

/* Change-request popup — screenshot upload previews (upload on select). */
.dd-cr-shot-previews { display: flex; flex-wrap: wrap; gap: 8px; }
.dd-cr-shot-tile { position: relative; width: 60px; height: 60px; border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb; background: #f3f4f6; }
.dd-cr-shot-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dd-cr-shot-ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.6); color: #b91c1c; font-weight: 700; }
.dd-cr-shot-tile:not(.is-uploading):not(.is-error) .dd-cr-shot-ov { display: none; }
.dd-cr-shot-tile.is-error { border-color: #fca5a5; }
.dd-cr-shot-spin { width: 18px; height: 18px; border: 2px solid #cbd5e1; border-top-color: #1d4ed8; border-radius: 50%; animation: dd-cr-spin .7s linear infinite; }
@keyframes dd-cr-spin { to { transform: rotate(360deg); } }

/* CR card screenshot thumbnails → fullscreen lightbox. */
.dd-cr-shots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dd-cr-shot-thumb { padding: 0; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; width: 56px; height: 56px; background: #f3f4f6; cursor: pointer; }
.dd-cr-shot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dd-cr-shot-thumb:hover { border-color: #93c5fd; }
.dd-img-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.dd-img-lightbox-img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: default; }
.dd-img-lightbox-x { position: fixed; top: 18px; right: 22px; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.dd-img-lightbox-x:hover { background: rgba(255,255,255,.3); }

/* Popup never overflows the viewport — body scrolls if content is tall. */
.dd-popup { display: flex; flex-direction: column; }
.dd-popup-body { overflow-y: auto; }

/* WD internal-change add-note block — clean full-width textarea + button. */
.dd-cr-add { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; align-items: flex-start; }
.dd-cr-add .dd-popup-ta { width: 100%; box-sizing: border-box; }

/* ── Per-image dashboard (openA4AProductImageDashboard) ─────────────────────
   Single left-aligned column: image preview, then a clearly-separated Team
   card and Brief card (one .dd-card each, stacked). */
/* Two columns: LEFT = Team + Brief (35%), RIGHT = Image + Categories (65%). */
.a4apu-img-dash {
  display: grid;
  grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
  align-items: start;
  gap: 16px;
  text-align: left;
}
.a4apu-img-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.a4apu-img-dash .dd-card { margin: 0; text-align: left; }

/* ── Listing-readiness / verification card (full-width, traffic-light) ────── */
.a4apu-verify-card { grid-column: 1 / -1; border-width: 1px; border-style: solid; }
.a4apu-verify-head { display: flex; align-items: flex-start; gap: 10px; }
.a4apu-verify-dot {
  flex: 0 0 auto;
  width: 12px; height: 12px;
  margin-top: 4px;
  border-radius: 50%;
  background: #9ca3af;
  box-shadow: 0 0 0 3px rgba(156, 163, 175, .18);
}
.a4apu-verify-titles { min-width: 0; }
.a4apu-verify-status { font-size: 13px; font-weight: 600; color: #374151; margin-top: 2px; }
.a4apu-verify-note { margin-top: 8px; }
.a4apu-verify-missing { margin: 10px 0 0; padding-left: 20px; }
.a4apu-verify-missing li { font-size: 13px; line-height: 1.5; color: #92400e; }
.a4apu-verify-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.a4apu-verify-recheck { font-size: 13px; }
/* Refill — teal accent so it reads as the "regenerate" action vs the neutral Re-check. */
.a4apu-verify-refill { font-size: 13px; background: #0f766e; border-color: #0f766e; color: #fff; }
.a4apu-verify-refill:hover:not(:disabled) { background: #0d5f59; border-color: #0d5f59; }
.a4apu-verify-refill:disabled { opacity: .6; cursor: default; }

/* GREEN — ready to publish. */
.a4apu-verify-card.is-green { border-color: #a7f3d0; background: #f0fdf4; }
.a4apu-verify-card.is-green .a4apu-verify-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
.a4apu-verify-card.is-green .a4apu-verify-status { color: #15803d; }

/* ORANGE — draft exists but missing/issues remain. */
.a4apu-verify-card.is-orange { border-color: #fcd34d; background: #fffbeb; }
.a4apu-verify-card.is-orange .a4apu-verify-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.a4apu-verify-card.is-orange .a4apu-verify-status { color: #b45309; }

/* RED — no draft / autofill failed. */
.a4apu-verify-card.is-red { border-color: #fecaca; background: #fef2f2; }
.a4apu-verify-card.is-red .a4apu-verify-dot { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .18); }
.a4apu-verify-card.is-red .a4apu-verify-status { color: #b91c1c; }
/* The left column is only 35% wide — force the Brief's info-grid to a single
   stacked column so values don't collapse to one char per line (the grid's own
   2-col rule keys off viewport width, not container width). */
.a4apu-img-col-left .dd-info-grid { grid-template-columns: 1fr; }
/* A4A product-uploads dashboard brief: the card sits in a half-width grid
   column, so the 2-col info grid squeezes values into ~15px and char-wraps
   them vertically. Force 1 column (same fix as the per-image dashboard). */
.a4apu-dash .dd-info-grid { grid-template-columns: 1fr; }
.a4apu-img-col-left .dd-info-label { min-width: 92px; }
/* Header preview fills the right column. */
.a4apu-img-preview-thumb { display: block; width: 100%; max-width: 100%; }
.a4apu-img-preview-thumb img { width: 100%; max-height: 280px; object-fit: contain; }
.a4apu-img-cat-value { font-size: 14px; font-weight: 600; color: #111827; }

/* ── Interactive Categories card (picker + dynamic per-leaf fields) ───────── */
.a4apu-img-cat-path {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 12px;
  word-break: break-word;
}
.a4apu-img-cat-path.a4apu-img-cat-path-empty { color: #9ca3af; font-weight: 500; }

/* Cascading picker selects — stack each Category/Subcategory/Leaf row left. */
.a4apu-img-cat-picker .a4a-catpick { display: flex; flex-direction: column; gap: 10px; }
.a4apu-img-cat-picker .a4a-catpick-field { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.a4apu-img-cat-picker .a4a-catpick-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #6b7280;
}
.a4apu-img-cat-picker .a4a-catpick-select {
  width: 100%;
  padding: 7px 10px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
}
.a4apu-img-cat-picker .a4a-catpick-select:disabled { background: #f9fafb; color: #9ca3af; }
.a4apu-img-cat-picker .a4a-catpick-loading,
.a4apu-img-cat-picker .a4a-catpick-error { font-size: 13px; color: #6b7280; }
.a4apu-img-cat-picker .a4a-catpick-retry {
  margin-left: 8px;
  padding: 3px 10px;
  font-size: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

/* Dynamic per-leaf fields — one left-aligned label+input row each. */
.a4apu-img-cat-fields { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.a4apu-img-field { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.a4apu-img-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #6b7280;
}
.a4apu-img-field-control { display: flex; align-items: center; gap: 8px; }
.a4apu-img-field-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
}
.a4apu-img-field-input.a4apu-img-field-check { flex: 0 0 auto; width: 18px; height: 18px; }
.a4apu-img-field-unit { font-size: 13px; color: #6b7280; flex: 0 0 auto; }

/* Seller contact card rows reuse .dd-info-row/.dd-info-label/.dd-info-value. */
.a4apu-img-seller-body { display: flex; flex-direction: column; gap: 8px; }

/* Link-a-seller search control inside the seller card. */
.a4apu-img-seller-search { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.a4apu-img-seller-results { display: flex; flex-direction: column; gap: 4px; }
.a4apu-img-seller-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  padding: 7px 10px;
  font-size: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  cursor: pointer;
}
.a4apu-img-seller-result:hover { background: #f3f4f6; }
.a4apu-img-seller-result-name { font-weight: 600; }
.a4apu-img-seller-result-src { font-size: 11px; color: #6b7280; flex: 0 0 auto; }
.a4apu-img-seller-change {
  align-self: flex-start;
  margin-top: 4px;
  padding: 0;
  border: none;
  background: none;
  color: #2563eb;
  font-size: 13px;
  cursor: pointer;
}
.a4apu-img-seller-change:hover { text-decoration: underline; }

/* Main Address Location card — reuses .a4apu-img-cat-fields / .a4apu-img-field. */
.a4apu-img-address-display .a4apu-img-field-control { align-items: center; }
.a4apu-img-address-display .a4apu-img-field-label { text-transform: none; font-weight: 600; letter-spacing: 0; font-size: 13px; color: #374151; }
.a4apu-img-address-maplink { margin-top: 14px; }
.a4apu-img-address-maplink-a { font-size: 13px; color: #2563eb; text-decoration: none; }
.a4apu-img-address-maplink-a:hover { text-decoration: underline; }

/* ── Media card (cover / extras / social) ──────────────────────────────────
   Three stacked, left-aligned sections under one .dd-card. Reuses
   .a4apu-img-thumb for every thumbnail. */
.a4apu-img-media-card .a4apu-media-section { margin-top: 16px; }
.a4apu-img-media-card .a4apu-media-section:first-of-type { margin-top: 14px; }
.a4apu-media-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.a4apu-media-section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 8px;
}
.a4apu-media-section-head .a4apu-media-section-label { margin-bottom: 0; }
.a4apu-media-counter { font-size: 12px; color: #9ca3af; font-variant-numeric: tabular-nums; }
.a4apu-media-caption { margin-top: 8px; font-size: 12px; line-height: 1.4; color: #9ca3af; }

/* Cover thumbnail — a touch larger, contained (not cropped). */
.a4apu-media-cover-thumb { width: 100%; max-width: 320px; flex: 0 0 auto; display: block; }
.a4apu-media-cover-thumb img { max-height: 220px; object-fit: contain; background: #f9fafb; }

/* Thumbnail grid for extras + social. */
.a4apu-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.a4apu-media-cell { position: relative; }
.a4apu-media-thumb { width: 100%; flex: 0 0 auto; }
.a4apu-media-thumb img { height: 96px; max-height: 96px; object-fit: cover; }
.a4apu-media-social-cell { max-width: 240px; }
.a4apu-media-social-cell .a4apu-media-thumb img { height: auto; max-height: 160px; object-fit: contain; background: #f9fafb; }

/* Remove (×) button overlaid on a thumbnail cell. */
.a4apu-media-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(17, 24, 39, .72);
  color: #fff;
  font-size: 15px;
  line-height: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
}
.a4apu-media-remove:hover { background: rgba(220, 38, 38, .9); }

/* Cover-swap UI: badge on the current cover, "Make cover" on the others, and
   a "use design image" revert under a custom cover. */
.a4apu-media-cell.is-cover .a4apu-media-thumb,
.a4apu-media-cover-thumb.is-cover {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
  border-radius: 6px;
}
.a4apu-media-cover-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 1px 7px;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}
.a4apu-media-make-cover {
  margin-top: 5px;
  width: 100%;
  padding: 3px 6px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fafafa;
  color: #374151;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.a4apu-media-make-cover:hover { border-color: #93c5fd; background: #f5f9ff; }
.a4apu-media-cover-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.a4apu-media-cover-revert {
  padding: 5px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fafafa;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.a4apu-media-cover-revert:hover { border-color: #93c5fd; background: #f5f9ff; }

/* "+ Add images" drop zone. */
.a4apu-media-drop {
  margin-top: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 12px;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  background: #fafafa;
  color: #374151;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.a4apu-media-drop:hover { border-color: #93c5fd; background: #f5f9ff; }
.a4apu-media-drop.is-dragover { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; }
.a4apu-media-drop.is-busy { opacity: .6; pointer-events: none; }
.a4apu-media-drop.is-full,
.a4apu-media-drop:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.a4apu-media-drop-text { font-size: 13px; font-weight: 600; }
.a4apu-media-drop-hint { font-size: 11px; color: #9ca3af; }

/* "+ Add social image" button. */
.a4apu-media-add-social {
  padding: 8px 14px;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  background: #fafafa;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.a4apu-media-add-social:hover { border-color: #93c5fd; background: #f5f9ff; }
.a4apu-media-social.is-busy { opacity: .6; pointer-events: none; }

/* ── Catalogue (PDF) card ───────────────────────────────────────────────────*/
.a4apu-img-catalogue-hint {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 10px;
}
.a4apu-img-catalogue-card.is-busy { opacity: .6; pointer-events: none; }
.a4apu-img-catalogue-add {
  padding: 8px 14px;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  background: #fafafa;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.a4apu-img-catalogue-add:hover { border-color: #93c5fd; background: #f5f9ff; }
.a4apu-img-catalogue-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
}
.a4apu-img-catalogue-link {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.a4apu-img-catalogue-link:hover { text-decoration: underline; }
.a4apu-img-catalogue-remove {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.a4apu-img-catalogue-remove:hover { background: rgba(220, 38, 38, .9); }
.a4apu-img-catalogue-send {
  margin-top: 8px;
  padding: 7px 12px;
  border: 1px solid #2563eb;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, opacity .12s;
}
.a4apu-img-catalogue-send:hover { background: #1d4ed8; }
.a4apu-img-catalogue-send:disabled { opacity: .55; cursor: default; }

@media (max-width: 860px) {
  /* Stack: categories+media drop below team+brief on narrow screens. */
  .a4apu-img-dash { grid-template-columns: 1fr; }
  .a4apu-img-preview-thumb img { max-height: 220px; }
  .a4apu-media-cover-thumb { max-width: 100%; }
  .a4apu-media-cover-thumb img { max-height: 200px; }
  .a4apu-media-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .a4apu-media-thumb img { height: 84px; max-height: 84px; }
}

/* ── Additional Countries / Locations card ──────────────────────────────────
   Reuses .dd-card / .a4apu-img-field / .a4apu-img-field-input; adds the
   stacked per-country blocks, contact sub-rows and add/remove controls. */
.a4apu-img-countries-hint {
  font-size: 12px;
  color: #6b7280;
  margin: 4px 0 12px;
  text-align: left;
  line-height: 1.45;
}
.a4apu-img-countries-list { display: flex; flex-direction: column; gap: 14px; }
.a4apu-img-countries-empty { font-size: 13px; }
.a4apu-img-country-block {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.a4apu-img-country-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.a4apu-img-country-head-title {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  text-align: left;
}
.a4apu-img-country-grp {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.a4apu-img-country-grp + .a4apu-img-country-grp {
  padding-top: 12px;
  border-top: 1px solid #eceef1;
}
.a4apu-img-country-amounts { display: flex; flex-direction: column; gap: 10px; }
.a4apu-img-field-textarea { resize: vertical; min-height: 64px; font-family: inherit; line-height: 1.45; }
.a4apu-img-desc-textarea { width: 100%; min-height: 160px; resize: vertical; font-family: inherit; line-height: 1.45; }
.a4apu-img-country-subhead {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #6b7280;
  text-align: left;
}
.a4apu-img-country-contacts-list { display: flex; flex-direction: column; gap: 10px; }
.a4apu-img-contact-row {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.a4apu-img-contact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.a4apu-img-contact-head-title {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  text-align: left;
}
.a4apu-img-country-remove {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: #f3f4f6;
  color: #b91c1c;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.a4apu-img-country-remove:hover { background: #fee2e2; }
.a4apu-img-country-addbtn {
  align-self: flex-start;
  margin-top: 12px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  cursor: pointer;
}
.a4apu-img-country-addbtn:hover { background: #dbeafe; }
.a4apu-img-contact-add { margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════════
   DESIGNS dashboard (posts / videos / agri4all-posts)
   ═══════════════════════════════════════════════════════════════════════ */
.dd-design-cols { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 1024px) { .dd-design-cols { grid-template-columns: 1fr; } }

.dd-design-hint {
  font-size: 12px;
  line-height: 1.5;
  color: #6b7280;
  margin-bottom: 10px;
}

/* ── Deliverables / Sizes — counter chips with a progress fill (signature) ── */
.dd-design-counters { display: flex; flex-wrap: wrap; gap: 8px; }
.dd-design-counter {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #f9fafb;
  padding: 5px 12px;
  font-size: 12.5px;
  color: #374151;
  isolation: isolate;
}
.dd-design-counter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  background: #e0e7ff;
  border-radius: 999px 0 0 999px;
  transition: width .25s ease;
}
.dd-design-counter.is-active { border-color: #a5b4fc; }
.dd-design-counter.is-complete { border-color: #34d399; }
.dd-design-counter.is-complete .dd-design-counter-fill { background: #d1fae5; }
.dd-design-counter-label { font-weight: 600; }
.dd-design-counter-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: #4b5563;
  white-space: nowrap;
}
.dd-design-counter.is-complete .dd-design-counter-num { color: #047857; }

/* ── Group dashboard: per-deliverable status strip + bespoke cards ─────────── */
.dd-group-status-list { display: flex; flex-direction: column; gap: 6px; }
.dd-group-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.dd-group-status-name {
  font-size: 12.5px;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-group-status {
  flex: none;
  display: inline-flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #f3f4f6;
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #4b5563;
  white-space: nowrap;
}
.dd-group-bespoke { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }

/* ── Post Images — drop zone + stacked post rows ─────────────────────────── */
.dd-design-drop {
  border: 1.5px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  padding: 18px 14px;
  text-align: center;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  margin-bottom: 12px;
}
.dd-design-drop:hover { background: #f1f5f9; border-color: #94a3b8; }
.dd-design-drop.is-over { background: #eef2ff; border-color: #6366f1; color: #4338ca; }

.dd-design-stack { display: flex; flex-direction: column; gap: 10px; }
.dd-design-postrow {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}
.dd-design-postimg {
  flex: 0 0 auto;
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dd-design-postimg img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
}
.dd-design-postdim {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: #9ca3af;
}
.dd-design-tagsel { flex: 1 1 auto; min-width: 0; }
.dd-design-tagsel-title { font-size: 12px; font-weight: 600; color: #4b5563; margin-bottom: 6px; }
.dd-design-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.dd-design-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #a5b4fc;
  background: #e0e7ff;
  color: #3730a3;
  border-radius: 999px;
  padding: 2px 4px 2px 10px;
  font-size: 11.5px;
  font-weight: 600;
}
.dd-design-chip-txt { line-height: 1.4; }
.dd-design-chip-x {
  border: none;
  background: transparent;
  color: #6366f1;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.dd-design-chip-x:hover { color: #dc2626; }
.dd-design-chip-add {
  border: 1px dashed #c7d2fe;
  background: #f5f7ff;
  color: #4f46e5;
  cursor: pointer;
  padding: 2px 10px;
}
.dd-design-chip-add:hover { background: #eef2ff; }

/* ── Post Media — per-artwork-type collapsible sections (#150) ───────────── */
/* Same collapsible vocabulary as the content-calendar .dd-media-block, kept
   compact so a client with six artwork types still fits without a wall of
   card. Section keys come from ctrl.counters, never a hardcoded type list. */
.dd-design-postbody { min-width: 0; }
.dd-design-sections { display: flex; flex-direction: column; gap: 8px; }
.dd-design-sec {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.dd-design-sec-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%;
  border: none; background: #f9fafb;
  padding: 8px 11px;
  cursor: pointer;
  font: inherit; text-align: left;
  transition: background .12s;
}
.dd-design-sec-head:hover { background: #f1f5f9; }
.dd-design-sec-head-left {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
}
.dd-design-sec-label {
  font-size: 12px; font-weight: 700; letter-spacing: .01em; color: #374151;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dd-design-sec-count {
  font-size: 11px; font-weight: 700; color: #3730a3; background: #e0e7ff;
  border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center;
  flex: 0 0 auto;
}
.dd-design-sec-chev-wrap { display: inline-flex; color: #9ca3af; flex: 0 0 auto; }
.dd-design-sec-chev { transition: transform .18s ease; }
.dd-design-sec.is-open .dd-design-sec-chev { transform: rotate(180deg); }
.dd-design-sec-body { padding: 10px 11px; }
.dd-design-sec-body .dd-design-stack { margin-bottom: 10px; }
/* The shared .dd-design-drop carries a bottom margin for the flat card; inside
   a section the spacing comes from the actions row instead. */
.dd-design-sec-body .dd-design-drop { margin-bottom: 0; }
.dd-design-sec-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dd-design-drop-sm { padding: 11px 12px; font-size: 12px; }
/* Unsorted — last section, dashed + amber so it reads as a pile still to file. */
.dd-design-sec-unsorted { border-style: dashed; border-color: #fcd34d; }
.dd-design-sec-unsorted .dd-design-sec-head { background: #fffbeb; }
.dd-design-sec-unsorted .dd-design-sec-head:hover { background: #fef3c7; }
.dd-design-sec-unsorted .dd-design-sec-label { color: #b45309; }
.dd-design-sec-unsorted .dd-design-sec-count { color: #b45309; background: #fef3c7; }

@media (max-width: 760px) {
  /* Sections stack full width; drop zones stay a comfortable tap target and
     the add button spans the row (nothing here is hover-only). */
  .dd-design-sec, .dd-design-sec-actions .dd-btn { width: 100%; }
  .dd-design-drop-sm { padding: 15px 12px; }
  .dd-design-sec-body { padding: 10px; }
}

/* ── Auction per-item publish state (Post Images card) ───────────────────── */
.dd-item-state-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dd-item-state {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid #fcd34d;
  background: #fffbeb;
  color: #b45309;
}
.dd-item-state.is-posted { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.dd-item-state.is-archived { border-color: #e5e7eb; background: #f3f4f6; color: #6b7280; }

/* ── "＋ add" floating menu of counters ──────────────────────────────────── */
.dd-design-menu {
  position: absolute;
  z-index: 1000;
  min-width: 180px;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
  padding: 6px;
}
.dd-design-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: #374151;
  font-size: 12.5px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.dd-design-menu-item:hover { background: #f3f4f6; }
.dd-design-menu-empty { color: #9ca3af; font-size: 12.5px; padding: 8px 10px; }

/* ── Auto-assign settings popup ──────────────────────────────────────────── */
.dd-design-popup {
  width: min(640px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px 20px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .3);
}
.dd-design-rules { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }
.dd-design-rule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fafafa;
}
.dd-design-rule-lbl { font-size: 12.5px; color: #6b7280; }
.dd-design-rule-x { color: #9ca3af; font-weight: 600; }
.dd-design-rule-inp {
  width: 66px;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 12.5px;
}
.dd-design-rule-keys { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dd-design-popup-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Shared design-family cards (Auction / LinkedIn / X / Newsletter …) ───── */
.dd-text-area {
  width: 100%;
  box-sizing: border-box;
  min-height: 88px;
  resize: vertical;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: #1f2937;
}
.dd-text-area:focus { outline: 2px solid #bfdbfe; border-color: #60a5fa; }
.dd-design-src-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: 1px 7px;
}

/* per-brand publish chips */
.dd-brand-pubs { display: flex; flex-wrap: wrap; gap: 8px; }
.dd-brand-pub {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #f9fafb;
  padding: 7px 12px;
  cursor: pointer;
  text-align: left;
}
.dd-brand-pub:hover { background: #f3f4f6; }
.dd-brand-pub-name { font-size: 12.5px; font-weight: 600; color: #374151; }
.dd-brand-pub-state { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #9ca3af; }
.dd-brand-pub.is-scheduled { border-color: #fcd34d; background: #fffbeb; }
.dd-brand-pub.is-scheduled .dd-brand-pub-state { color: #b45309; }
.dd-brand-pub.is-newsletter_scheduled { border-color: #fcd34d; background: #fffbeb; }
.dd-brand-pub.is-newsletter_scheduled .dd-brand-pub-state { color: #b45309; }
.dd-brand-pub.is-posted, .dd-brand-pub.is-sent, .dd-brand-pub.is-newsletter_sent {
  border-color: #34d399; background: #ecfdf5;
}
.dd-brand-pub.is-posted .dd-brand-pub-state,
.dd-brand-pub.is-sent .dd-brand-pub-state,
.dd-brand-pub.is-newsletter_sent .dd-brand-pub-state { color: #047857; }

/* auction manual details */
.dd-auction-details { display: flex; flex-direction: column; gap: 8px; }
.dd-auction-detail-row { display: flex; align-items: center; gap: 10px; }
.dd-auction-detail-label { flex: 0 0 92px; font-size: 12.5px; color: #6b7280; font-weight: 600; }
.dd-auction-detail-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  color: #1f2937;
}
.dd-auction-detail-input:focus { outline: 2px solid #bfdbfe; border-color: #60a5fa; }

/* 1fr / 2fr layout (X dashboard, wire-cols-33) */
.dd-cols-33 { grid-template-columns: 1fr 2fr; }
@media (max-width: 1024px) { .dd-cols-33 { grid-template-columns: 1fr; } }

/* ── Content-calendar PostPilot push control ─────────────────────────────── */
.dd-postpilot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.dd-postpilot-btn {
  border-color: #c7d2fe;
  background: #eef2ff;
  color: #4338ca;
}
.dd-postpilot-btn:hover:not(:disabled) { background: #e0e7ff; }
.dd-postpilot-btn:disabled { opacity: .6; cursor: default; }
.dd-postpilot-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #6ee7b7;
}
.dd-postpilot-when { font-size: 10.5px; color: #9ca3af; }
.dd-postpilot-note { font-size: 11px; color: #9ca3af; }
.dd-postpilot-note.is-error { color: #dc2626; }

/* locked "coming soon" card */
.dd-locked-card { opacity: .72; }
.dd-lock-badge {
  font-size: 11px; font-weight: 600; color: #6b7280;
  background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 6px; padding: 1px 8px;
}
/* website-design link/file section cards */
.dd-wd-link-up { margin-top: 8px; }
.dd-wd-link-files { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.dd-wd-link-file { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }

/* ── Google Ads dashboard ────────────────────────────────────────────────── */
.dd-gate-tag { color: #c2410c; background: #fff7ed; border-color: #fed7aa; }
.dd-ai-tag { color: #7c3aed; background: #faf5ff; border-color: #d8b4fe; }
.dd-manual-tag { color: #2563eb; background: #eff6ff; border-color: #bfdbfe; }
.dd-ga-checklist { display: flex; flex-direction: column; gap: 6px; }
.dd-ga-check-row { display: flex; align-items: center; gap: 8px; }
.dd-ga-check-row input[type=checkbox] { width: 16px; height: 16px; flex: 0 0 auto; }
.dd-ga-check-label {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid transparent; border-radius: 6px;
  padding: 4px 8px; font: inherit; font-size: 13px; color: #1f2937; background: transparent;
}
.dd-ga-check-label:focus { outline: none; border-color: #d1d5db; background: #fff; }
.dd-ga-check-label:disabled { color: #6b7280; }
.dd-ga-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dd-ga-complete { border-color: #6ee7b7; background: #f0fdf4; }
.dd-ga-field { margin-top: 12px; }
.dd-ga-field-lab { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #4b5563; margin-bottom: 5px; }
.dd-ga-meeting { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* AI re-prompt button on the per-image Category/Description cards */
.dd-reprompt-btn { margin-left: 8px; border-color: #d8b4fe; background: #faf5ff; color: #7c3aed; }
.dd-reprompt-btn:hover { background: #f3e8ff; }

/* Mobile Brief readability (approved): keep the generic Brief info-grid single
   column and let long values wrap on whole words at narrow widths, so labels
   like values never break character-by-character. Scoped to dashboard cards. */
@media (max-width: 640px) {
  .dd-cols .dd-card .dd-info-grid { grid-template-columns: 1fr; }
  .dd-cols .dd-card .dd-info-row { flex-wrap: wrap; gap: 2px 8px; }
  .dd-cols .dd-card .dd-info-label { min-width: 0; }
  .dd-cols .dd-card .dd-info-value { overflow-wrap: anywhere; }
}

.dd-design-drop.is-busy { opacity: .7; pointer-events: none; border-color: #c4b5fd; background: #f5f3ff; }

/* ── Generalized production-sheet per-item drill-in (styled here because this
   CSS is globally loaded; production-page.css is not mine to edit) ─────────── */
.prod-item-eye {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  background: #fff;
  color: #4b5563;
  cursor: pointer;
}
.prod-item-eye:hover { background: #eef2ff; border-color: #a5b4fc; color: #4338ca; }
.prod-item-eye svg { width: 15px; height: 15px; }
.prod-split-tags { font-size: 12px; color: #6b7280; }
.prod-split-state {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #9ca3af;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 1px 7px;
}
.prod-split-state-scheduled, .prod-split-state-newsletter_scheduled { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.prod-split-state-posted, .prod-split-state-newsletter_sent, .prod-split-state-agri4all { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }

/* Focused item highlight after a drill-in. Works for block items (post-image
   rows, brand chips) AND table rows — a <tr> ignores box-shadow/background, so
   the cells flash their own background and the row gets a left accent bar. */
.dd-item-focus {
  animation: dd-item-pulse 2.6s ease;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
@keyframes dd-item-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99,102,241,0); background-color: transparent; }
  12%  { box-shadow: 0 0 0 3px rgba(99,102,241,.7); background-color: rgba(224,231,255,.85); }
  55%  { box-shadow: 0 0 0 3px rgba(99,102,241,.35); background-color: rgba(224,231,255,.5); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); background-color: transparent; }
}
/* Table rows (CC posts): flash the cells + an accent bar on the first cell. */
tr.dd-item-focus { animation: none; }
tr.dd-item-focus > td { animation: dd-item-pulse-cell 2.6s ease; }
tr.dd-item-focus > td:first-child { box-shadow: inset 3px 0 0 0 #6366f1; }
@keyframes dd-item-pulse-cell {
  0%   { background-color: transparent; }
  12%  { background-color: rgba(224,231,255,.85); }
  55%  { background-color: rgba(224,231,255,.5); }
  100% { background-color: transparent; }
}

/* ── Booking Form Details card (tickets #111 → #110) — read-only, sourced from
   the booking form's OWN formatDeliverables output ── */
/* The month group IS the alignment grid: two columns (count, label) shared by
   every section inside it, so the whole booking form lines up on one pair of
   edges instead of stepping per section. Month + service headings span both. */
.dd-output-group {
  margin-top: 14px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  align-items: baseline;
}
.dd-output-group:first-child { margin-top: 0; }
/* Month header (e.g. "July 2026" or a campaign range), mirrors the booking-form
   document's red month <h3>. */
.dd-output-month {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 700;
  color: #d72626;
  margin-bottom: 6px;
}
.dd-output-cat {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6b7280;
  margin: 8px 0 4px;
}
.dd-output-cat:first-of-type { margin-top: 0; }
/* A4A product-uploads: Team + Booking Form Details stack in one grid cell. */
.a4apu-team-host { display: flex; flex-direction: column; gap: 16px; }
/* Count cell. max-content on the group's first column sizes it to the widest
   count in the month, so "1 x" and "100 x" share a right edge and every label
   after them starts at the same x. */
.dd-output-count {
  font-size: 13px;
  line-height: 1.6;
  color: #111827;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  /* Equal-width digits, so the right edges line up exactly. */
  font-variant-numeric: tabular-nums;
}
.dd-output-label {
  font-size: 13px;
  line-height: 1.6;
  color: #374151;
  /* min-width:0 lets the 1fr column actually shrink so a long label wraps
     inside the card instead of widening the grid. */
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Count-less lines (country / "FACEBOOK | INSTAGRAM" subheads, free text) sit in
   the LABEL column rather than spanning both, so every piece of line text in the
   card shares one left edge. Spanning would start them at the count column and
   leave the card looking ragged against the counted lines. */
.dd-output-label-full { grid-column: 2; }

/* ── Production (materials-gathering) dashboard ────────────────────────────
   4 quadrants on a 2-col grid: LEFT = Team + Booking Form PDF, RIGHT =
   Material Request + Deliverables. Rides .dd-cols (1fr 1fr, stacks < 1024px). */
.dd-prod-cols { align-items: start; }
.dd-prod-pdf-quadrant { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Signed-PDF preview: a fixed-height iframe that scrolls its own content; the
   wrapper clips so a wide PDF never pushes the page into horizontal overflow. */
.dd-prod-pdf-card { min-width: 0; }
.dd-prod-pdf-frame-wrap {
  width: 100%;
  height: 520px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #f9fafb;
}
.dd-prod-pdf-frame { width: 100%; height: 100%; border: 0; display: block; }
.dd-prod-pdf-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Deliverables quadrant — one row per child deliverable. */
.dd-prod-deliverables-card { min-width: 0; }
.dd-prod-deliv-list { display: flex; flex-direction: column; gap: 8px; }
.dd-prod-deliv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  background: #fcfcfd;
}
.dd-prod-deliv-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.dd-prod-deliv-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  overflow-wrap: anywhere;
}
.dd-prod-deliv-type {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 999px;
  padding: 2px 8px;
}
.dd-prod-deliv-pill { display: inline-flex; }
.dd-prod-deliv-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dd-prod-btn-wait { opacity: .5; cursor: not-allowed; }
.dd-prod-deliv-all {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eef0f3;
  display: flex;
  justify-content: flex-end;
}

/* ── #134 dark mode overrides ───────────────────────────────────────────────
   Append-only. Every rule below is scoped to html[data-theme="dark"], so with
   no attribute (or data-theme="light") this block contributes nothing and the
   light rendering above is untouched.

   Surface ladder used throughout — page #0f172a < card #1e293b < inset/raised
   #273449, with form fields RECESSED to #172033 so an editable box always reads
   as a hole in its card rather than another panel. Neutral literals map:
     #fff card            → #1e293b        #f9fafb/#fafafa inset → #273449
     #f3f4f6 hover        → #334155        #e5e7eb/#d1d5db border → #334155/#475569
     #f1f5f9 hairline     → rgba(148,163,184,.14)
     #111827/#1f2937 text → #e2e8f0        #374151/#4b5563 → #cbd5e1
     #6b7280 → #94a3b8                     #9ca3af → #7d8a9c   (2 muted levels kept)
   Saturated hues keep their meaning and flip to translucent-tint + light-fg.
   --------------------------------------------------------------------------- */

/* ── Focus Points + generic Brief ───────────────────────────────────────── */
html[data-theme="dark"] .dd-focus-label,
html[data-theme="dark"] .dd-brief-section {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-focus-value {
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-focus-muted {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-brief-section {
  border-top-color: rgba(148, 163, 184, 0.14);
}
html[data-theme="dark"] .dd-focus-thumb {
  border-color: #334155;
}
html[data-theme="dark"] .dd-focus-filelink {
  color: #60a5fa;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .dd-back-btn {
  border-color: #334155;
  background: #1e293b;
  color: #cbd5e1;
}
html[data-theme="dark"] .dd-back-btn:hover {
  background: #334155;
  border-color: #475569;
}
html[data-theme="dark"] .dd-subtitle {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-loading,
html[data-theme="dark"] .dd-error {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-error {
  color: #f87171;
}

/* ── Generic card ────────────────────────────────────────────────────────── */
html[data-theme="dark"] .dd-card {
  border-color: #334155;
  background: #1e293b;
}
html[data-theme="dark"] .dd-card-title {
  color: #94a3b8;
}

/* ── Team card ───────────────────────────────────────────────────────────── */
html[data-theme="dark"] .dd-team-member {
  border-color: #334155;
  background: #273449;
}
html[data-theme="dark"] .dd-team-member:hover {
  border-color: rgba(129, 140, 248, 0.55);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .dd-team-dept {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-team-name {
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-team-empty {
  color: #7d8a9c;
}
/* Add role / Custom role stay indigo-tinted dashed affordances. */
html[data-theme="dark"] .dd-team-add {
  border-color: #475569;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.10);
}
html[data-theme="dark"] .dd-team-add:hover {
  border-color: #818cf8;
  background: rgba(99, 102, 241, 0.18);
}
html[data-theme="dark"] .dd-team-member-custom .dd-team-dept {
  color: #a5b4fc;
}
/* The empty-avatar rule is !important in light mode, so match it. */
html[data-theme="dark"] .dd-avatar.dd-avatar-empty {
  background: #273449 !important;
  color: #7d8a9c;
  border-color: #475569;
}
html[data-theme="dark"] .dd-team-select,
html[data-theme="dark"] .dd-team-customlabel {
  border-color: #475569;
  background: #172033;
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-team-del {
  background: #273449;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  color: #94a3b8;
}
html[data-theme="dark"] .dd-team-del:hover {
  color: #f87171;
}

/* ── Info card ───────────────────────────────────────────────────────────── */
html[data-theme="dark"] .dd-info-label {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-info-value {
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-info-value a {
  color: #60a5fa;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .dd-btn {
  border-color: #475569;
  background: #273449;
  color: #cbd5e1;
}
html[data-theme="dark"] .dd-btn:hover {
  background: #334155;
  border-color: #64748b;
}
/* Primary stays brand blue — white on #2563eb clears AA and reads as the one
   filled action on the card, so only the hover step is re-tuned for dark. */
html[data-theme="dark"] .dd-btn-primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
html[data-theme="dark"] .dd-btn-primary:hover {
  background: #3b82f6;
  border-color: #3b82f6;
}
/* Danger rests neutral and only tints on hover, exactly as it does in light —
   a resting red wash would make every delete button shout. */
html[data-theme="dark"] .dd-btn-danger {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.42);
}
html[data-theme="dark"] .dd-btn-danger:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.60);
}
html[data-theme="dark"] .dd-btn-complete {
  background: #15803d;
  border-color: #15803d;
  color: #f0fdf4;
}
html[data-theme="dark"] .dd-btn-complete:hover {
  background: #16a34a;
  border-color: #16a34a;
}
html[data-theme="dark"] .dd-btn-undo {
  color: #94a3b8;
  border-color: #334155;
}
html[data-theme="dark"] .dd-btn-undo:hover {
  background: #334155;
  border-color: #475569;
}

/* ── Posts table ─────────────────────────────────────────────────────────── */
html[data-theme="dark"] .dd-posts-scroll {
  border-color: #334155;
}
html[data-theme="dark"] .dd-posts-table th {
  color: #94a3b8;
  background: #273449;
  border-bottom-color: #334155;
}
html[data-theme="dark"] .dd-posts-table tbody tr:hover {
  background: #273449;
}
html[data-theme="dark"] .dd-posts-table td {
  border-bottom-color: rgba(148, 163, 184, 0.14);
}
html[data-theme="dark"] .dd-col-num {
  color: #7d8a9c;
}

/* ── Post-date control ───────────────────────────────────────────────────── */
html[data-theme="dark"] .dd-date-btn {
  border-color: #475569;
  background: #273449;
  color: #cbd5e1;
}
html[data-theme="dark"] .dd-date-btn .dd-date-ico {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-date-btn.dd-date-empty,
html[data-theme="dark"] .dd-date-btn.dd-date-empty .dd-date-ico {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-date-btn:hover {
  border-color: #60a5fa;
  background: #334155;
}
html[data-theme="dark"] .dd-date-btn:focus-visible {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.28);
}
html[data-theme="dark"] .dd-date-input {
  border-color: #475569;
  background: #172033;
  color: #e2e8f0;
}

/* ── Caption editor ──────────────────────────────────────────────────────── */
html[data-theme="dark"] .dd-cap-shell {
  border-color: #475569;
  background: #172033;
}
html[data-theme="dark"] .dd-cap-shell:focus-within {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.24);
}
html[data-theme="dark"] .dd-cap-toolbar {
  background: #273449;
}
html[data-theme="dark"] .dd-cap-tool {
  color: #cbd5e1;
}
html[data-theme="dark"] .dd-cap-tool:hover {
  background: #334155;
  border-color: #475569;
  color: #93c5fd;
}
html[data-theme="dark"] .dd-cap-tool:active {
  background: rgba(99, 102, 241, 0.22);
}
html[data-theme="dark"] .dd-cap-divider {
  background: rgba(148, 163, 184, 0.14);
}
html[data-theme="dark"] .dd-cap-editor {
  color: #e2e8f0;
  background: #172033;
}
html[data-theme="dark"] .dd-cap-editor:empty::before {
  color: #7d8a9c;
}
/* Quill hosts — theme.css already darkens .ql-toolbar/.ql-container globally;
   these two only carry the page's own border + toolbar-tint literals. */
html[data-theme="dark"] .dd-cap-quill .ql-toolbar.ql-snow,
html[data-theme="dark"] .dd-note-quill .ql-toolbar.ql-snow {
  border-color: #475569;
  background: #273449;
}
html[data-theme="dark"] .dd-cap-quill .ql-container.ql-snow,
html[data-theme="dark"] .dd-note-quill .ql-container.ql-snow {
  border-color: #475569;
}
html[data-theme="dark"] .dd-cap-quill .ql-editor.ql-blank::before,
html[data-theme="dark"] .dd-note-quill .ql-editor.ql-blank::before {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-saving-tag {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-saving-tag.is-saving {
  color: #60a5fa;
}
html[data-theme="dark"] .dd-saving-tag.is-error {
  color: #f87171;
}

/* ── Emoji picker ────────────────────────────────────────────────────────── */
html[data-theme="dark"] .dd-emoji-pop {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .dd-emoji-pop button:hover {
  background: #334155;
}

/* ── Media sections ──────────────────────────────────────────────────────── */
html[data-theme="dark"] .dd-media-block {
  border-color: #334155;
  background: #1e293b;
}
html[data-theme="dark"] .dd-media-block.is-dragover {
  border-color: #818cf8;
  background: rgba(99, 102, 241, 0.20);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.22);
}
html[data-theme="dark"] .dd-media-header {
  background: #273449;
}
html[data-theme="dark"] .dd-media-header:hover {
  background: #334155;
}
/* Facebook blue and the Instagram gradient are brand marks — left alone.
   Stories was near-black (#111827), which vanishes on a dark card. */
html[data-theme="dark"] .dd-media-plat-stories {
  background: #475569;
}
html[data-theme="dark"] .dd-media-label {
  color: #cbd5e1;
}
html[data-theme="dark"] .dd-media-count {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.20);
}
html[data-theme="dark"] .dd-media-chev-wrap {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-media-empty {
  color: #7d8a9c;
  border-color: #334155;
  background: #273449;
}
html[data-theme="dark"] .dd-media-chip {
  border-color: #334155;
  background: #273449;
}
html[data-theme="dark"] .dd-media-chip:hover {
  border-color: #475569;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
}
html[data-theme="dark"] .dd-media-chip img,
html[data-theme="dark"] .dd-media-chip video {
  background: #172033;
  border-color: #334155;
}
html[data-theme="dark"] .dd-media-vico {
  background: rgba(99, 102, 241, 0.18);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.35);
}
html[data-theme="dark"] .dd-media-chip .dd-media-name {
  color: #cbd5e1;
}
html[data-theme="dark"] .dd-media-chip .dd-media-name a {
  color: #60a5fa;
}
html[data-theme="dark"] .dd-media-chip-x {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-media-chip-x:hover {
  color: #f87171;
}
/* Dead blob: rows stay amber-coded (recoverable), not red. */
html[data-theme="dark"] .dd-media-chip-dead {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
}
html[data-theme="dark"] .dd-media-chip-dead:hover {
  border-color: rgba(245, 158, 11, 0.70);
}
html[data-theme="dark"] .dd-media-dead-ico {
  background: rgba(245, 158, 11, 0.20);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.40);
}
/* Thumbnails brighten rather than dim on hover — the light-mode filter would
   push an already-dark tile further into the background. */
html[data-theme="dark"] .dd-media-thumb-clickable:hover {
  filter: brightness(1.12);
  border-color: #60a5fa;
}
html[data-theme="dark"] .dd-media-upload,
html[data-theme="dark"] .dd-media-vidbtn {
  border-color: #475569;
  color: #cbd5e1;
  background: #273449;
}
html[data-theme="dark"] .dd-media-upload:hover,
html[data-theme="dark"] .dd-media-vidbtn:hover {
  border-color: #60a5fa;
  color: #93c5fd;
  background: #334155;
}
html[data-theme="dark"] .dd-media-upload svg {
  color: #94a3b8;
}

/* ── Change-request cards ────────────────────────────────────────────────── */
html[data-theme="dark"] .dd-cr-card {
  border-color: #334155;
  background: #273449;
}
html[data-theme="dark"] .dd-cr-name {
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-cr-tag.is-client {
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
}
html[data-theme="dark"] .dd-cr-tag.is-crm {
  background: rgba(99, 102, 241, 0.20);
  color: #a5b4fc;
}
html[data-theme="dark"] .dd-cr-body {
  color: #cbd5e1;
}
html[data-theme="dark"] .dd-cr-shots img {
  border-color: #334155;
}
html[data-theme="dark"] .dd-cr-empty {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-cr-addbtn {
  border-color: #475569;
  color: #cbd5e1;
  background: #273449;
}
html[data-theme="dark"] .dd-cr-addbtn:hover {
  border-color: #60a5fa;
  color: #93c5fd;
  background: #334155;
}

/* Agri4All post-type chips — one hue each, tint + light fg. */
html[data-theme="dark"] .dd-a4a-tag.is-fb {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}
html[data-theme="dark"] .dd-a4a-tag.is-igp {
  background: rgba(236, 72, 153, 0.18);
  color: #f9a8d4;
}
html[data-theme="dark"] .dd-a4a-tag.is-igs {
  background: rgba(139, 92, 246, 0.20);
  color: #c4b5fd;
}

/* ── Posts: stacked-card layout (≤760px) ─────────────────────────────────── */
@media (max-width: 760px) {
  html[data-theme="dark"] .dd-posts-table tr {
    border-color: #334155;
    background: #1e293b;
  }
  html[data-theme="dark"] .dd-posts-table tr:last-child td,
  html[data-theme="dark"] .dd-posts-table td {
    border-bottom-color: rgba(148, 163, 184, 0.14);
  }
  html[data-theme="dark"] .dd-posts-table td[data-label]::before {
    color: #94a3b8;
  }
  html[data-theme="dark"] .dd-posts-table td.dd-col-num {
    color: #e2e8f0;
  }
}

/* ── Shared anchored popup ───────────────────────────────────────────────── */
html[data-theme="dark"] .dd-popup {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .dd-popup-head {
  border-bottom-color: #334155;
  background: #273449;
}
html[data-theme="dark"] .dd-popup-title {
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-popup-x {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-popup-x:hover {
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-popup-hint {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-popup-input,
html[data-theme="dark"] .dd-popup-ta {
  border-color: #475569;
  background: #172033;
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-popup-input::placeholder,
html[data-theme="dark"] .dd-popup-ta::placeholder {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-popup-input:focus,
html[data-theme="dark"] .dd-popup-ta:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.24);
}
html[data-theme="dark"] .dd-popup-files {
  color: #60a5fa;
}

/* ── Website-design dashboard ────────────────────────────────────────────── */
html[data-theme="dark"] .dd-wd-muted {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-wd-design-card {
  border-color: #334155;
  background: #273449;
}
html[data-theme="dark"] .dd-wd-design-img,
html[data-theme="dark"] .dd-wd-design-pdf {
  background: #172033;
}
html[data-theme="dark"] .dd-wd-design-pdf {
  border-color: #334155;
}
html[data-theme="dark"] .dd-wd-openlink {
  color: #60a5fa;
}
/* The corner × sat on a white disc; re-disc it against the raised surface. */
html[data-theme="dark"] .dd-wd-del {
  background: rgba(30, 41, 59, 0.92);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  color: #94a3b8;
}
html[data-theme="dark"] .dd-wd-del:hover {
  color: #f87171;
}
html[data-theme="dark"] .dd-wd-linklabel,
html[data-theme="dark"] .dd-wd-linkurl {
  border-color: #475569;
  background: #172033;
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-wd-resolved {
  color: #4ade80;
}
html[data-theme="dark"] .dd-wd-q {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-wd-a {
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-wd-a-thumb {
  border-color: #334155;
}

/* Notes card */
html[data-theme="dark"] .dd-wd-note {
  border-color: #334155;
  background: #273449;
}
html[data-theme="dark"] .dd-wd-note-author {
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-wd-note-date {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-wd-note-body {
  color: #cbd5e1;
}
/* The in-note delete is transparent-backed, so only its ink needs flipping —
   restated because the .dd-wd-del override above would otherwise re-disc it. */
html[data-theme="dark"] .dd-wd-note .dd-wd-del {
  background: transparent;
  box-shadow: none;
}

/* ── Title row + View JSON ───────────────────────────────────────────────── */
html[data-theme="dark"] .dd-viewjson {
  color: #cbd5e1;
  background: #273449;
  border-color: #475569;
}
html[data-theme="dark"] .dd-viewjson:hover {
  background: #334155;
}

/* ── JSON modal ──────────────────────────────────────────────────────────── */
html[data-theme="dark"] .dd-json-overlay {
  background: rgba(0, 0, 0, 0.62);
}
html[data-theme="dark"] .dd-json-panel {
  background: #1e293b;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.60);
}
html[data-theme="dark"] .dd-json-head {
  border-bottom-color: #334155;
}
html[data-theme="dark"] .dd-json-title {
  color: #e2e8f0;
}
/* Copy stays brand blue (white on #2563eb clears AA); only the hover step is
   re-tuned, since light's darker #1d4ed8 reads as receding on a dark panel. */
html[data-theme="dark"] .dd-json-copy:hover {
  background: #3b82f6;
}
html[data-theme="dark"] .dd-json-close {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-json-close:hover {
  background: #334155;
}
/* The payload pre is a reading surface — recess it so the JSON sits in a well. */
html[data-theme="dark"] .dd-json-pre {
  color: #e2e8f0;
  background: #172033;
}

/* ── Full-screen preview + change-request overlay ────────────────────────── */
html[data-theme="dark"] .dd-preview-overlay {
  background: rgba(0, 0, 0, 0.80);
}
html[data-theme="dark"] .dd-preview-panel {
  background: #1e293b;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.60);
}
/* .dd-preview-img-pane is already #0f172a in light mode — deliberately left. */
html[data-theme="dark"] .dd-preview-img {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .dd-preview-img-missing {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-preview-cr-pane {
  border-left-color: #334155;
  background: #1e293b;
}
html[data-theme="dark"] .dd-preview-head {
  border-bottom-color: #334155;
}
html[data-theme="dark"] .dd-preview-title {
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-preview-sub {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-preview-close {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-preview-close:hover {
  background: #334155;
}
@media (max-width: 760px) {
  html[data-theme="dark"] .dd-preview-cr-pane {
    border-top-color: #334155;
  }
}

/* ── Website card (agri4all-product-uploads) ─────────────────────────────── */
html[data-theme="dark"] .dd-website-input {
  border-color: #475569;
  color: #e2e8f0;
  background: #172033;
}
html[data-theme="dark"] .dd-website-input:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.28);
}
html[data-theme="dark"] .dd-website-input:disabled {
  background: #273449;
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-website-nowebsite {
  color: #94a3b8;
}

/* ── Online-articles dashboard ───────────────────────────────────────────── */
html[data-theme="dark"] .dd-oa-upload-platform,
html[data-theme="dark"] .dd-oa-preview-fname {
  color: #cbd5e1;
}
html[data-theme="dark"] .dd-oa-preview-block {
  border-color: #334155;
  background: #273449;
}
html[data-theme="dark"] .dd-oa-del {
  background: rgba(30, 41, 59, 0.92);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  color: #94a3b8;
}
html[data-theme="dark"] .dd-oa-del:hover {
  color: #f87171;
}
/* Mammoth-rendered article body: light-authored HTML on a dark card, so force
   the text colour and give the custom scrollbar a visible thumb. */
html[data-theme="dark"] .dd-oa-preview-body {
  color: #e2e8f0;
  scrollbar-color: #475569 transparent;
}
html[data-theme="dark"] .dd-oa-preview-body::-webkit-scrollbar-thumb {
  background: #475569;
}
/* A PDF renders its own white page; keep the frame light so it does not sit on
   a dark seam, and just darken the chrome around it. */
html[data-theme="dark"] .dd-oa-preview-pdf {
  border-color: #334155;
}
html[data-theme="dark"] .dd-oa-prev-card {
  border-color: #334155;
  background: #273449;
}
html[data-theme="dark"] .dd-oa-prev-name {
  color: #cbd5e1;
}
html[data-theme="dark"] .dd-oa-prev-platform,
html[data-theme="dark"] .dd-oa-download-btn {
  color: #5eead4;
  background: rgba(20, 184, 166, 0.16);
  border-color: rgba(20, 184, 166, 0.38);
}
html[data-theme="dark"] .dd-oa-download-btn:hover {
  background: rgba(20, 184, 166, 0.26);
  border-color: rgba(20, 184, 166, 0.55);
  color: #99f6e4;
}

/* ── Magazine dashboard ──────────────────────────────────────────────────── */
/* .dd-mag-pill takes its background inline from JS (a saturated hue) — only the
   placeholder state and the native option list carry literals here. */
html[data-theme="dark"] .dd-mag-tag-select.is-placeholder {
  color: #cbd5e1;
  background-color: #334155;
  border-color: #475569;
  background-image:
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .dd-mag-tag-select:focus {
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.45);
}
html[data-theme="dark"] .dd-mag-tag-select option {
  color: #e2e8f0;
  background: #1e293b;
}
html[data-theme="dark"] .dd-mag-edit-input {
  color: #e2e8f0;
  background: #172033;
  border-color: #475569;
}
html[data-theme="dark"] .dd-mag-edit-input::placeholder {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-mag-edit-input:hover {
  border-color: #64748b;
}
html[data-theme="dark"] .dd-mag-edit-input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.30);
}
html[data-theme="dark"] .dd-mag-preview-img {
  border-color: #334155;
  background: #172033;
}
html[data-theme="dark"] .dd-mag-img-cell {
  border-color: #334155;
  background: #273449;
}

/* ── Agri4All-banners: Brief + Assets + Google Ads ───────────────────────── */
html[data-theme="dark"] .dd-banner-brief-month,
html[data-theme="dark"] .dd-banner-asset-row,
html[data-theme="dark"] .dd-banner-link-row {
  border-color: #334155;
  background: #273449;
}
html[data-theme="dark"] .dd-banner-brief-head,
html[data-theme="dark"] .dd-banner-asset-label,
html[data-theme="dark"] .dd-banner-link-label,
html[data-theme="dark"] .dd-banner-sched-title {
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-banner-brief-sub {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-banner-brief-row {
  border-top-color: rgba(148, 163, 184, 0.14);
}
html[data-theme="dark"] .dd-banner-brief-platform {
  color: #cbd5e1;
}
html[data-theme="dark"] .dd-banner-brief-imp,
html[data-theme="dark"] .dd-banner-link-url {
  color: #60a5fa;
}
/* The asset preview is a dashed drop well INSIDE an already-raised row, so it
   recesses rather than raises — otherwise the two surfaces flatten together. */
html[data-theme="dark"] .dd-banner-asset-preview {
  background: #172033;
  border-color: #475569;
}
html[data-theme="dark"] .dd-banner-asset-empty {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-banner-newsize-label,
html[data-theme="dark"] .dd-banner-newsize-dim,
html[data-theme="dark"] .dd-banner-field-input,
html[data-theme="dark"] .dd-banner-sched-date,
html[data-theme="dark"] .dd-banner-sched-time {
  border-color: #475569;
  background: #172033;
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-banner-newsize-x {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-banner-sched-row .flatpickr-input[readonly] {
  background: #172033;
}
html[data-theme="dark"] .dd-banner-sched,
html[data-theme="dark"] .dd-banner-campaign {
  border-top-color: rgba(148, 163, 184, 0.14);
}
html[data-theme="dark"] .dd-banner-field-label {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-asset-uploaded {
  color: #7d8a9c;
}

/* ── Video Budgets card ──────────────────────────────────────────────────── */
html[data-theme="dark"] .dd-budget-amt-prefix,
html[data-theme="dark"] .dd-budget-total-label {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-budget-label,
html[data-theme="dark"] .dd-budget-amount {
  border-color: #475569;
  background: #172033;
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-budget-total {
  border-top-color: #334155;
}
html[data-theme="dark"] .dd-budget-total-val {
  color: #e2e8f0;
}

/* ── A4A product-uploads: Product Images card ────────────────────────────── */
html[data-theme="dark"] .a4apu-img-row {
  border-color: #334155;
  background: #1e293b;
}
html[data-theme="dark"] .a4apu-img-thumb {
  border-color: #334155;
  background: #172033;
}
html[data-theme="dark"] .a4apu-img-thumb:hover {
  border-color: #60a5fa;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  filter: brightness(1.08);
}
html[data-theme="dark"] .a4apu-img-thumb:focus-visible {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.28);
}
html[data-theme="dark"] .a4apu-cr-col {
  border-color: #334155;
  background: #273449;
}
/* CR chips sit inside the raised CR column, so they drop back to card level. */
html[data-theme="dark"] .a4apu-cr-item {
  border-color: #334155;
  border-left-color: #475569;
  background: #1e293b;
  color: #cbd5e1;
}
html[data-theme="dark"] .a4apu-cr-item.is-resolved {
  border-left-color: #4ade80;
}
html[data-theme="dark"] .a4apu-cr-resolve {
  color: #4ade80;
}
html[data-theme="dark"] .a4apu-cr-resolve:hover {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.40);
}
html[data-theme="dark"] .a4apu-cr-undo {
  color: #94a3b8;
}
html[data-theme="dark"] .a4apu-cr-undo:hover {
  background: #334155;
  border-color: #475569;
  color: #e2e8f0;
}
html[data-theme="dark"] .a4apu-cr-empty {
  color: #7d8a9c;
}
html[data-theme="dark"] .a4apu-cr-btn {
  border-color: #475569;
  background: #273449;
  color: #cbd5e1;
}
html[data-theme="dark"] .a4apu-cr-btn:hover {
  background: #334155;
  border-color: #60a5fa;
  color: #93c5fd;
}
html[data-theme="dark"] .a4apu-upload-zone {
  border-color: #475569;
  background: #172033;
  color: #94a3b8;
}
html[data-theme="dark"] .a4apu-upload-zone:hover {
  border-color: #64748b;
  background: #273449;
}
html[data-theme="dark"] .a4apu-upload-btn {
  border-color: #475569;
  background: #273449;
  color: #cbd5e1;
}
html[data-theme="dark"] .a4apu-upload-btn:hover {
  background: #334155;
  border-color: #64748b;
}

/* Change-request modal */
html[data-theme="dark"] .a4apu-cr-modal-backdrop {
  background: rgba(0, 0, 0, 0.62);
}
html[data-theme="dark"] .a4apu-cr-modal-card {
  background: #1e293b;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.60);
}
html[data-theme="dark"] .a4apu-cr-modal-img {
  border-color: #334155;
  background: #172033;
}
html[data-theme="dark"] .a4apu-cr-modal-ta {
  color: #e2e8f0;
  background: #172033;
  border-color: #475569;
}
html[data-theme="dark"] .a4apu-cr-modal-ta::placeholder {
  color: #7d8a9c;
}
html[data-theme="dark"] .a4apu-cr-modal-ta:focus {
  border-color: #5eead4;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.22);
}
/* Submit keeps the teal accent; #0f766e is too dark to read as filled on a
   dark card, so it steps up one stop. */
html[data-theme="dark"] .a4apu-cr-modal-submit {
  border-color: #0d9488;
  background: #0d9488;
  color: #f0fdfa;
}
html[data-theme="dark"] .a4apu-cr-modal-submit:hover {
  background: #14b8a6;
  border-color: #14b8a6;
}
html[data-theme="dark"] .a4apu-cr-modal-cancel {
  color: #94a3b8;
}
html[data-theme="dark"] .a4apu-cr-modal-cancel:hover {
  background: #334155;
  color: #e2e8f0;
}

/* CR screenshot tiles + lightbox */
html[data-theme="dark"] .dd-cr-shot-tile,
html[data-theme="dark"] .dd-cr-shot-thumb {
  border-color: #334155;
  background: #273449;
}
html[data-theme="dark"] .dd-cr-shot-thumb:hover {
  border-color: #60a5fa;
}
html[data-theme="dark"] .dd-cr-shot-tile.is-error {
  border-color: rgba(239, 68, 68, 0.60);
}
/* The upload overlay was a white veil over the tile — invert it to a dark one
   so the error glyph stays legible instead of glowing. */
html[data-theme="dark"] .dd-cr-shot-ov {
  background: rgba(15, 23, 42, 0.70);
  color: #fca5a5;
}
html[data-theme="dark"] .dd-cr-shot-spin {
  border-color: #475569;
  border-top-color: #60a5fa;
}
html[data-theme="dark"] .dd-img-lightbox {
  background: rgba(0, 0, 0, 0.88);
}

/* ── Listing-readiness / verification card (traffic-light) ───────────────── */
html[data-theme="dark"] .a4apu-verify-dot {
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.20);
}
html[data-theme="dark"] .a4apu-verify-status {
  color: #cbd5e1;
}
html[data-theme="dark"] .a4apu-verify-missing li {
  color: #fcd34d;
}
html[data-theme="dark"] .a4apu-verify-refill {
  background: #0d9488;
  border-color: #0d9488;
  color: #f0fdfa;
}
html[data-theme="dark"] .a4apu-verify-refill:hover:not(:disabled) {
  background: #14b8a6;
  border-color: #14b8a6;
}
html[data-theme="dark"] .a4apu-verify-card.is-green {
  border-color: rgba(34, 197, 94, 0.42);
  background: rgba(34, 197, 94, 0.12);
}
html[data-theme="dark"] .a4apu-verify-card.is-green .a4apu-verify-dot {
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.24);
}
html[data-theme="dark"] .a4apu-verify-card.is-green .a4apu-verify-status {
  color: #86efac;
}
html[data-theme="dark"] .a4apu-verify-card.is-orange {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
}
html[data-theme="dark"] .a4apu-verify-card.is-orange .a4apu-verify-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.24);
}
html[data-theme="dark"] .a4apu-verify-card.is-orange .a4apu-verify-status {
  color: #fcd34d;
}
html[data-theme="dark"] .a4apu-verify-card.is-red {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
}
html[data-theme="dark"] .a4apu-verify-card.is-red .a4apu-verify-dot {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.24);
}
html[data-theme="dark"] .a4apu-verify-card.is-red .a4apu-verify-status {
  color: #fca5a5;
}

/* ── Per-image dashboard: categories, fields, seller, address ────────────── */
html[data-theme="dark"] .a4apu-img-cat-value,
html[data-theme="dark"] .a4apu-img-cat-path {
  color: #e2e8f0;
}
html[data-theme="dark"] .a4apu-img-cat-path.a4apu-img-cat-path-empty {
  color: #7d8a9c;
}
html[data-theme="dark"] .a4apu-img-cat-picker .a4a-catpick-label,
html[data-theme="dark"] .a4apu-img-field-label {
  color: #94a3b8;
}
html[data-theme="dark"] .a4apu-img-cat-picker .a4a-catpick-select,
html[data-theme="dark"] .a4apu-img-field-input {
  border-color: #475569;
  background: #172033;
  color: #e2e8f0;
}
html[data-theme="dark"] .a4apu-img-cat-picker .a4a-catpick-select option {
  background: #1e293b;
  color: #e2e8f0;
}
html[data-theme="dark"] .a4apu-img-field-input::placeholder {
  color: #7d8a9c;
}
html[data-theme="dark"] .a4apu-img-cat-picker .a4a-catpick-select:disabled {
  background: #273449;
  color: #7d8a9c;
}
html[data-theme="dark"] .a4apu-img-cat-picker .a4a-catpick-loading,
html[data-theme="dark"] .a4apu-img-cat-picker .a4a-catpick-error,
html[data-theme="dark"] .a4apu-img-field-unit {
  color: #94a3b8;
}
html[data-theme="dark"] .a4apu-img-cat-picker .a4a-catpick-retry {
  border-color: #475569;
  background: #273449;
  color: #cbd5e1;
}
html[data-theme="dark"] .a4apu-img-seller-result {
  border-color: #334155;
  background: #273449;
  color: #e2e8f0;
}
html[data-theme="dark"] .a4apu-img-seller-result:hover {
  background: #334155;
}
html[data-theme="dark"] .a4apu-img-seller-result-src {
  color: #94a3b8;
}
html[data-theme="dark"] .a4apu-img-seller-change,
html[data-theme="dark"] .a4apu-img-address-maplink-a {
  color: #60a5fa;
}
html[data-theme="dark"] .a4apu-img-address-display .a4apu-img-field-label {
  color: #cbd5e1;
}

/* ── Per-image dashboard: Media card ─────────────────────────────────────── */
html[data-theme="dark"] .a4apu-media-section-label {
  color: #94a3b8;
}
html[data-theme="dark"] .a4apu-media-counter,
html[data-theme="dark"] .a4apu-media-caption {
  color: #7d8a9c;
}
html[data-theme="dark"] .a4apu-media-cover-thumb img,
html[data-theme="dark"] .a4apu-media-social-cell .a4apu-media-thumb img {
  background: #172033;
}
/* The remove × already floats a dark disc — only its hover red is re-tuned. */
html[data-theme="dark"] .a4apu-media-remove {
  background: rgba(2, 6, 23, 0.78);
}
html[data-theme="dark"] .a4apu-media-remove:hover {
  background: rgba(220, 38, 38, 0.92);
}
html[data-theme="dark"] .a4apu-media-cell.is-cover .a4apu-media-thumb,
html[data-theme="dark"] .a4apu-media-cover-thumb.is-cover {
  outline-color: #60a5fa;
}
html[data-theme="dark"] .a4apu-media-cover-badge {
  background: #3b82f6;
  color: #f8fafc;
}
html[data-theme="dark"] .a4apu-media-make-cover,
html[data-theme="dark"] .a4apu-media-cover-revert,
html[data-theme="dark"] .a4apu-media-drop,
html[data-theme="dark"] .a4apu-media-add-social,
html[data-theme="dark"] .a4apu-img-catalogue-add {
  border-color: #475569;
  background: #273449;
  color: #cbd5e1;
}
html[data-theme="dark"] .a4apu-media-make-cover:hover,
html[data-theme="dark"] .a4apu-media-cover-revert:hover,
html[data-theme="dark"] .a4apu-media-drop:hover,
html[data-theme="dark"] .a4apu-media-add-social:hover,
html[data-theme="dark"] .a4apu-img-catalogue-add:hover {
  border-color: #60a5fa;
  background: #334155;
}
html[data-theme="dark"] .a4apu-media-drop.is-dragover {
  border-color: #60a5fa;
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}
html[data-theme="dark"] .a4apu-media-drop-hint {
  color: #7d8a9c;
}

/* ── Per-image dashboard: Catalogue (PDF) card ───────────────────────────── */
html[data-theme="dark"] .a4apu-img-catalogue-hint {
  color: #94a3b8;
}
html[data-theme="dark"] .a4apu-img-catalogue-file {
  border-color: #334155;
  background: #273449;
}
html[data-theme="dark"] .a4apu-img-catalogue-link {
  color: #60a5fa;
}
html[data-theme="dark"] .a4apu-img-catalogue-remove {
  background: rgba(2, 6, 23, 0.72);
}
html[data-theme="dark"] .a4apu-img-catalogue-remove:hover {
  background: rgba(220, 38, 38, 0.92);
}
html[data-theme="dark"] .a4apu-img-catalogue-send {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}
html[data-theme="dark"] .a4apu-img-catalogue-send:hover {
  background: #3b82f6;
}

/* ── Additional Countries / Locations card ───────────────────────────────── */
html[data-theme="dark"] .a4apu-img-countries-hint,
html[data-theme="dark"] .a4apu-img-country-subhead {
  color: #94a3b8;
}
html[data-theme="dark"] .a4apu-img-country-block {
  border-color: #334155;
  background: #273449;
}
html[data-theme="dark"] .a4apu-img-country-head-title {
  color: #e2e8f0;
}
html[data-theme="dark"] .a4apu-img-country-grp + .a4apu-img-country-grp {
  border-top-color: rgba(148, 163, 184, 0.14);
}
/* Contact rows nest inside the raised country block, so they step back down. */
html[data-theme="dark"] .a4apu-img-contact-row {
  border-color: #334155;
  background: #1e293b;
}
html[data-theme="dark"] .a4apu-img-contact-head-title {
  color: #cbd5e1;
}
html[data-theme="dark"] .a4apu-img-country-remove {
  background: #334155;
  color: #fca5a5;
}
html[data-theme="dark"] .a4apu-img-country-remove:hover {
  background: rgba(239, 68, 68, 0.24);
}
html[data-theme="dark"] .a4apu-img-country-addbtn {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.38);
}
html[data-theme="dark"] .a4apu-img-country-addbtn:hover {
  background: rgba(59, 130, 246, 0.24);
}

/* ── Designs dashboard: counters, status strip ───────────────────────────── */
html[data-theme="dark"] .dd-design-hint {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-design-counter {
  border-color: #475569;
  background: #273449;
  color: #cbd5e1;
}
/* The progress fill sits behind the chip's own text (z-index:-1), so it stays a
   translucent wash rather than a solid pale slab. */
html[data-theme="dark"] .dd-design-counter-fill {
  background: rgba(99, 102, 241, 0.30);
}
html[data-theme="dark"] .dd-design-counter.is-active {
  border-color: #818cf8;
}
html[data-theme="dark"] .dd-design-counter.is-complete {
  border-color: #34d399;
}
html[data-theme="dark"] .dd-design-counter.is-complete .dd-design-counter-fill {
  background: rgba(16, 185, 129, 0.26);
}
html[data-theme="dark"] .dd-design-counter-num {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-design-counter.is-complete .dd-design-counter-num {
  color: #6ee7b7;
}
html[data-theme="dark"] .dd-group-status-name {
  color: #cbd5e1;
}
html[data-theme="dark"] .dd-group-status {
  border-color: #475569;
  background: #273449;
  color: #cbd5e1;
}

/* ── Designs dashboard: Post Images drop zone + rows ─────────────────────── */
html[data-theme="dark"] .dd-design-drop {
  border-color: #475569;
  background: #172033;
  color: #94a3b8;
}
html[data-theme="dark"] .dd-design-drop:hover {
  background: #273449;
  border-color: #64748b;
}
html[data-theme="dark"] .dd-design-drop.is-over {
  background: rgba(99, 102, 241, 0.20);
  border-color: #818cf8;
  color: #a5b4fc;
}
html[data-theme="dark"] .dd-design-drop.is-busy {
  border-color: #7c6ce0;
  background: rgba(139, 92, 246, 0.16);
}
html[data-theme="dark"] .dd-design-postrow {
  border-color: #334155;
  background: #1e293b;
}
html[data-theme="dark"] .dd-design-postimg img {
  border-color: #334155;
  background: #172033;
}
html[data-theme="dark"] .dd-design-postdim {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-design-tagsel-title {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-design-chip {
  border-color: rgba(99, 102, 241, 0.50);
  background: rgba(99, 102, 241, 0.20);
  color: #c7d2fe;
}
html[data-theme="dark"] .dd-design-chip-x {
  color: #a5b4fc;
}
html[data-theme="dark"] .dd-design-chip-x:hover {
  color: #f87171;
}
html[data-theme="dark"] .dd-design-chip-add {
  border-color: rgba(99, 102, 241, 0.45);
  background: rgba(99, 102, 241, 0.10);
  color: #a5b4fc;
}
html[data-theme="dark"] .dd-design-chip-add:hover {
  background: rgba(99, 102, 241, 0.22);
}

/* Post Media per-artwork-type sections (#150) */
html[data-theme="dark"] .dd-design-sec {
  border-color: #334155;
  background: #1e293b;
}
html[data-theme="dark"] .dd-design-sec-head {
  background: #172033;
}
html[data-theme="dark"] .dd-design-sec-head:hover {
  background: #273449;
}
html[data-theme="dark"] .dd-design-sec-label {
  color: #cbd5e1;
}
html[data-theme="dark"] .dd-design-sec-count {
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.22);
}
html[data-theme="dark"] .dd-design-sec-chev-wrap {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-design-sec-unsorted {
  border-color: rgba(252, 211, 77, 0.45);
}
html[data-theme="dark"] .dd-design-sec-unsorted .dd-design-sec-head {
  background: rgba(180, 83, 9, 0.18);
}
html[data-theme="dark"] .dd-design-sec-unsorted .dd-design-sec-head:hover {
  background: rgba(180, 83, 9, 0.28);
}
html[data-theme="dark"] .dd-design-sec-unsorted .dd-design-sec-label {
  color: #fcd34d;
}
html[data-theme="dark"] .dd-design-sec-unsorted .dd-design-sec-count {
  color: #fcd34d;
  background: rgba(180, 83, 9, 0.30);
}

/* Auction per-item publish state — amber pending, green posted, slate archived. */
html[data-theme="dark"] .dd-item-state {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.14);
  color: #fcd34d;
}
html[data-theme="dark"] .dd-item-state.is-posted {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.14);
  color: #6ee7b7;
}
html[data-theme="dark"] .dd-item-state.is-archived {
  border-color: #334155;
  background: #273449;
  color: #94a3b8;
}

/* ── Designs dashboard: floating menu + auto-assign popup ────────────────── */
html[data-theme="dark"] .dd-design-menu {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .dd-design-menu-item {
  color: #cbd5e1;
}
html[data-theme="dark"] .dd-design-menu-item:hover {
  background: #334155;
}
html[data-theme="dark"] .dd-design-menu-empty {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-design-popup {
  background: #1e293b;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.60);
}
html[data-theme="dark"] .dd-design-rule {
  border-color: #334155;
  background: #273449;
}
html[data-theme="dark"] .dd-design-rule-lbl {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-design-rule-x {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-design-rule-inp {
  border-color: #475569;
  background: #172033;
  color: #e2e8f0;
}

/* ── Shared design-family cards ──────────────────────────────────────────── */
html[data-theme="dark"] .dd-text-area,
html[data-theme="dark"] .dd-auction-detail-input {
  border-color: #475569;
  background: #172033;
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-text-area::placeholder,
html[data-theme="dark"] .dd-auction-detail-input::placeholder {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-text-area:focus,
html[data-theme="dark"] .dd-auction-detail-input:focus {
  outline-color: rgba(96, 165, 250, 0.45);
  border-color: #60a5fa;
}
html[data-theme="dark"] .dd-design-src-tag {
  color: #86efac;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.38);
}
html[data-theme="dark"] .dd-brand-pub {
  border-color: #475569;
  background: #273449;
}
html[data-theme="dark"] .dd-brand-pub:hover {
  background: #334155;
}
html[data-theme="dark"] .dd-brand-pub-name {
  color: #cbd5e1;
}
html[data-theme="dark"] .dd-brand-pub-state {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-brand-pub.is-scheduled,
html[data-theme="dark"] .dd-brand-pub.is-newsletter_scheduled {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.14);
}
html[data-theme="dark"] .dd-brand-pub.is-scheduled .dd-brand-pub-state,
html[data-theme="dark"] .dd-brand-pub.is-newsletter_scheduled .dd-brand-pub-state {
  color: #fcd34d;
}
html[data-theme="dark"] .dd-brand-pub.is-posted,
html[data-theme="dark"] .dd-brand-pub.is-sent,
html[data-theme="dark"] .dd-brand-pub.is-newsletter_sent {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.14);
}
html[data-theme="dark"] .dd-brand-pub.is-posted .dd-brand-pub-state,
html[data-theme="dark"] .dd-brand-pub.is-sent .dd-brand-pub-state,
html[data-theme="dark"] .dd-brand-pub.is-newsletter_sent .dd-brand-pub-state {
  color: #6ee7b7;
}
html[data-theme="dark"] .dd-auction-detail-label {
  color: #94a3b8;
}

/* ── Content-calendar PostPilot push control ─────────────────────────────── */
html[data-theme="dark"] .dd-postpilot-btn {
  border-color: rgba(99, 102, 241, 0.45);
  background: rgba(99, 102, 241, 0.16);
  color: #a5b4fc;
}
html[data-theme="dark"] .dd-postpilot-btn:hover:not(:disabled) {
  background: rgba(99, 102, 241, 0.26);
}
html[data-theme="dark"] .dd-postpilot-pill {
  background: rgba(16, 185, 129, 0.16);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.45);
}
html[data-theme="dark"] .dd-postpilot-when,
html[data-theme="dark"] .dd-postpilot-note {
  color: #7d8a9c;
}
html[data-theme="dark"] .dd-postpilot-note.is-error {
  color: #fca5a5;
}
html[data-theme="dark"] .dd-lock-badge {
  color: #94a3b8;
  background: #273449;
  border-color: #334155;
}
html[data-theme="dark"] .dd-wd-link-file {
  color: #cbd5e1;
}

/* ── Google Ads dashboard ────────────────────────────────────────────────── */
html[data-theme="dark"] .dd-gate-tag {
  color: #fdba74;
  background: rgba(249, 115, 22, 0.14);
  border-color: rgba(249, 115, 22, 0.40);
}
html[data-theme="dark"] .dd-ai-tag,
html[data-theme="dark"] .dd-reprompt-btn {
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(139, 92, 246, 0.42);
}
html[data-theme="dark"] .dd-reprompt-btn:hover {
  background: rgba(139, 92, 246, 0.26);
}
html[data-theme="dark"] .dd-manual-tag {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.42);
}
/* The checklist label is a borderless input until focused — it needs an
   explicit colour or it falls back to the UA's black-on-white. */
html[data-theme="dark"] .dd-ga-check-label {
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-ga-check-label:focus {
  border-color: #475569;
  background: #172033;
}
html[data-theme="dark"] .dd-ga-check-label:disabled {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-ga-complete {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.14);
  color: #6ee7b7;
}
html[data-theme="dark"] .dd-ga-field-lab {
  color: #94a3b8;
}

/* ── Production-sheet drill-in affordances ───────────────────────────────── */
html[data-theme="dark"] .prod-item-eye {
  border-color: #475569;
  background: #273449;
  color: #cbd5e1;
}
html[data-theme="dark"] .prod-item-eye:hover {
  background: rgba(99, 102, 241, 0.20);
  border-color: #818cf8;
  color: #a5b4fc;
}
html[data-theme="dark"] .prod-split-tags {
  color: #94a3b8;
}
html[data-theme="dark"] .prod-split-state {
  color: #94a3b8;
  background: #273449;
  border-color: #334155;
}
html[data-theme="dark"] .prod-split-state-scheduled,
html[data-theme="dark"] .prod-split-state-newsletter_scheduled {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.45);
}
html[data-theme="dark"] .prod-split-state-posted,
html[data-theme="dark"] .prod-split-state-newsletter_sent,
html[data-theme="dark"] .prod-split-state-agri4all {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.45);
}

/* Drill-in focus pulse. The light keyframes flash a pale indigo (#e0e7ff) that
   reads as a white strobe on a dark page, and @keyframes cannot be overridden
   from a scoped selector — so the animation is re-pointed at a dark twin that
   flashes a translucent indigo instead. */
html[data-theme="dark"] .dd-item-focus {
  animation-name: dd-item-pulse-dark;
}
@keyframes dd-item-pulse-dark {
  0%   { box-shadow: 0 0 0 0 rgba(129, 140, 248, 0); background-color: transparent; }
  12%  { box-shadow: 0 0 0 3px rgba(129, 140, 248, .75); background-color: rgba(99, 102, 241, .30); }
  55%  { box-shadow: 0 0 0 3px rgba(129, 140, 248, .40); background-color: rgba(99, 102, 241, .18); }
  100% { box-shadow: 0 0 0 0 rgba(129, 140, 248, 0); background-color: transparent; }
}
html[data-theme="dark"] tr.dd-item-focus > td {
  animation-name: dd-item-pulse-cell-dark;
}
html[data-theme="dark"] tr.dd-item-focus > td:first-child {
  box-shadow: inset 3px 0 0 0 #818cf8;
}
@keyframes dd-item-pulse-cell-dark {
  0%   { background-color: transparent; }
  12%  { background-color: rgba(99, 102, 241, .30); }
  55%  { background-color: rgba(99, 102, 241, .18); }
  100% { background-color: transparent; }
}

/* ── Booking Form Details card ───────────────────────────────────────────── */
/* The month heading mirrors the booking-form document's red <h3>; #d72626 only
   reaches ~3:1 on a dark card, so it lifts to the same red used elsewhere. */
html[data-theme="dark"] .dd-output-month {
  color: #f87171;
}
html[data-theme="dark"] .dd-output-cat {
  color: #94a3b8;
}
html[data-theme="dark"] .dd-output-count {
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-output-label {
  color: #cbd5e1;
}

/* ── Production (materials-gathering) dashboard ──────────────────────────── */
html[data-theme="dark"] .dd-prod-pdf-frame-wrap {
  border-color: #334155;
  background: #172033;
}
html[data-theme="dark"] .dd-prod-deliv-row {
  border-color: #334155;
  background: #273449;
}
html[data-theme="dark"] .dd-prod-deliv-name {
  color: #e2e8f0;
}
html[data-theme="dark"] .dd-prod-deliv-type {
  color: #94a3b8;
  background: #334155;
}
html[data-theme="dark"] .dd-prod-deliv-all {
  border-top-color: rgba(148, 163, 184, 0.14);
}