/* 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 */
}
.dd-cols .dd-posts-card { 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; }

/* 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;
}
.dd-media-block:last-child { margin-bottom: 0; }
.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; }
/* 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; }
.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; }

/* ── 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 {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  background: #0f172a; padding: 18px;
}
.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;
}

/* 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; }

/* 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; }
.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; }