/* ===== Production Deliverables Tab ===== */

.prod-deliv-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #999);
  border-bottom: 1px solid var(--border-color, #e0e0e0);
  position: sticky;
  top: 0;
  background: var(--card-bg, rgba(128,128,128,0.06));
  z-index: 1;
}

/* Hide the combined header row (rendered as both .prod-deliv-row and
   .prod-deliv-header by production-page.js). */
.prod-deliv-row.prod-deliv-header {
  display: none;
}

.prod-deliv-row {
  display: flex;
  align-items: center;
  padding: 6px 14px;
  border-bottom: 1px solid rgba(128,128,128,0.06);
  font-size: 13px;
  transition: background 0.1s;
}

.prod-deliv-row:hover {
  background: rgba(128,128,128,0.04);
}

.prod-deliv-cell {
  flex: 0 0 auto;
  min-width: 0;
  padding: 2px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prod-deliv-title {
  flex: 2;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
}

.prod-deliv-status-cell {
  overflow: visible;
  cursor: pointer;
  white-space: normal;
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
}

.prod-deliv-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  overflow: visible;
  justify-content: flex-start;
  align-items: center;
}

.prod-deliv-platform-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  height: 20px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.prod-deliv-posts {
  flex: 0 0 auto;
  padding: 0 8px;
  font-weight: 600;
  white-space: nowrap;
}

/* Content calendar rows — no additional overrides needed; margin-left: auto
   is applied universally to .prod-deliv-status-cell above. */

.prod-deliv-act {
  flex: 0 0 36px;
  display: flex;
  justify-content: center;
}

/* Client group header */
.prod-deliv-client-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(128,128,128,0.04);
  border-bottom: 1px solid rgba(128,128,128,0.08);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}

.prod-deliv-client-row:hover {
  background: rgba(128,128,128,0.08);
}

.prod-deliv-chevron {
  font-size: 10px;
  color: var(--text-muted, #999);
  width: 14px;
  text-align: center;
}

.prod-deliv-client-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary, #1e293b);
}

/* Client name as a data cell inside a deliverable row (hideClientGroups mode) */
.prod-deliv-row .prod-deliv-client-name {
  flex: 1 1 280px;
  min-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prod-deliv-client-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: rgba(128,128,128,0.12);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #888);
  padding: 0 6px;
}

/* Status dropdown */
.prod-deliv-status-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 4px;
  max-height: 280px;
  overflow-y: auto;
  min-width: 200px;
}

.prod-deliv-status-opt {
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
}

.prod-deliv-status-opt:hover {
  background: rgba(128,128,128,0.08);
}

/* ===== Content Calendar Dashboard ===== */
.cc-dashboard { width:100%; height:100%; display:flex; flex-direction:column; overflow:hidden; padding:20px; box-sizing:border-box; }
.cc-dashboard-title-row { display:flex; align-items:center; justify-content:space-between; padding:0 4px 16px; flex-shrink:0; }
.cc-dashboard-title { font-size:20px; font-weight:600; color:var(--text-primary,#1e293b); margin:0; }
.cc-add-row-btn { padding:6px 14px; border:1px solid var(--border-color,#e2e8f0); border-radius:6px; background:var(--card-bg,#fff); font-size:12px; font-weight:600; color:var(--text-secondary,#64748b); cursor:pointer; transition:all 0.15s; }
.cc-add-row-btn:hover { border-color:var(--accent-color,#3b82f6); color:var(--accent-color,#3b82f6); background:rgba(59,130,246,0.04); }

/* Card wrapping the posts table */
.cc-posts-card { flex:1; min-height:0; display:flex; flex-direction:column; background:var(--card-bg,#fff); border:1px solid var(--border-color,#e2e8f0); border-radius:16px; box-shadow:0 2px 12px rgba(0,0,0,0.06); padding:16px; box-sizing:border-box; }

.cc-posts-table-wrap { flex:1; min-height:0; overflow-y:auto; background:var(--card-bg,#fff); border:1px solid var(--border-color,#e2e8f0); border-radius:10px; }
.cc-posts-table { width:100%; }
.cc-posts-header { display:flex; padding:8px 12px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted,#94a3b8); border-bottom:1px solid var(--border-color,#e2e8f0); position:sticky; top:0; background:var(--card-bg,#fff); z-index:1; }
.cc-posts-th { display:flex; align-items:center; }
.cc-posts-th svg { display:block; }
.cc-posts-th-num { flex:0 0 36px; }
.cc-posts-th-date { flex:0 0 110px; }
.cc-posts-th-caption { flex:1.8; min-width:0; }
.cc-posts-th-images { flex:1.6; min-width:0; }
.cc-posts-th-changes { flex:0 0 80px; justify-content:center; color:var(--text-muted,#94a3b8); }
.cc-posts-th-act { flex:0 0 36px; }

.cc-posts-row { display:flex; padding:8px 12px; border-bottom:1px solid rgba(128,128,128,0.06); min-height:70px; align-items:flex-start; }
.cc-posts-row:hover { background:rgba(128,128,128,0.02); }
.cc-posts-cell { padding:2px 4px; }
.cc-posts-num { flex:0 0 36px; font-size:12px; font-weight:600; color:var(--text-muted,#94a3b8); padding-top:6px; }
.cc-posts-date { flex:0 0 110px; }
.cc-posts-caption { flex:1.8; min-width:0; }
.cc-posts-images { flex:1.6; min-width:0; }
.cc-posts-changes { flex:0 0 80px; display:flex; flex-direction:column; gap:3px; }
.cc-posts-act { flex:0 0 36px; display:flex; justify-content:center; padding-top:4px; }

.cc-input { font:inherit; font-size:12px; border:1px solid var(--border-color,#e2e8f0); border-radius:4px; padding:4px 6px; width:100%; background:var(--card-bg,#fff); color:var(--text-primary,#1e293b); }

.cc-caption-editor { min-height:50px; font-size:13px; line-height:1.5; color:var(--text-primary,#1e293b); border:1px solid transparent; border-radius:4px; padding:4px 6px; outline:none; transition:border-color 0.15s; word-break:break-word; }
.cc-caption-editor:focus { border-color:var(--accent-color,#3b82f6); background:var(--card-bg,#fff); }
.cc-caption-editor:empty::before { content:attr(placeholder); color:var(--text-muted,#94a3b8); }

/* Quill rich text caption editor */
.cc-caption-quill { min-height:50px; font-size:13px; }
.cc-caption-quill .ql-toolbar { padding:2px 4px; border:1px solid var(--border-color,#e2e8f0); border-radius:4px 4px 0 0; background:var(--card-bg,#fff); }
.cc-caption-quill .ql-toolbar button { width:22px; height:22px; }
.cc-caption-quill .ql-container { min-height:40px; font-family:inherit; font-size:13px; border:1px solid var(--border-color,#e2e8f0); border-top:none; border-radius:0 0 4px 4px; }
.cc-caption-quill .ql-editor { padding:4px 6px; min-height:32px; }
.cc-caption-quill .ql-editor.ql-blank::before { left:6px; right:6px; font-size:13px; color:var(--text-muted,#94a3b8); font-style:normal; }

.cc-img-grid { display:flex; flex-wrap:wrap; gap:4px; }
.cc-img-thumb { position:relative; width:40px; height:40px; border-radius:4px; overflow:hidden; cursor:pointer; border:1px solid var(--border-color,#e2e8f0); }
.cc-img-thumb img { width:100%; height:100%; object-fit:cover; }
.cc-img-remove { position:absolute; top:0; right:0; width:14px; height:14px; background:rgba(0,0,0,0.6); color:#fff; border:none; font-size:10px; line-height:1; cursor:pointer; display:none; border-radius:0 0 0 3px; }
.cc-img-thumb:hover .cc-img-remove { display:block; }
.cc-img-upload { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:2px dashed var(--border-color,#e2e8f0); border-radius:4px; font-size:18px; color:var(--text-muted,#94a3b8); cursor:pointer; transition:border-color 0.15s,color 0.15s; }
.cc-img-upload:hover { border-color:var(--accent-color,#3b82f6); color:var(--accent-color,#3b82f6); }

/* Per-row change requests */
.cc-cr-item { display:flex; align-items:flex-start; gap:4px; }
.cc-cr-item input[type="checkbox"] { margin-top:3px; flex-shrink:0; width:13px; height:13px; }
.cc-cr-text { flex:1; font-size:11px; color:var(--text-primary,#1e293b); outline:none; border-bottom:1px solid transparent; min-height:16px; line-height:1.3; }
.cc-cr-text:focus { border-bottom-color:var(--accent-color,#3b82f6); }
.cc-cr-text.done { text-decoration:line-through; color:var(--text-muted,#94a3b8); }
.cc-cr-delete { background:none; border:none; color:var(--text-muted,#ccc); font-size:12px; cursor:pointer; padding:0; line-height:1; flex-shrink:0; }
.cc-cr-delete:hover { color:#e74c3c; }
.cc-cr-add-inline { background:none; border:none; font-size:14px; color:var(--text-muted,#94a3b8); cursor:pointer; padding:0 2px; line-height:1; }
.cc-cr-add-inline:hover { color:var(--accent-color,#3b82f6); }

.cc-row-delete { background:none; border:none; color:var(--text-muted,#94a3b8); cursor:pointer; padding:4px; line-height:0; display:flex; align-items:center; justify-content:center; border-radius:4px; transition:color 0.15s, background 0.15s; }
.cc-row-delete svg { display:block; width:16px; height:16px; }
.cc-row-delete:hover { color:#e74c3c; background:rgba(231,76,60,0.08); }

.cc-lightbox { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.85); display:flex; align-items:center; justify-content:center; z-index:10000; }
.cc-lightbox-img { max-width:90vw; max-height:90vh; object-fit:contain; border-radius:8px; }
.cc-lightbox-close { position:absolute; top:20px; right:20px; background:rgba(255,255,255,0.2); border:none; color:#fff; font-size:28px; width:40px; height:40px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cc-lightbox-close:hover { background:rgba(255,255,255,0.3); }

/* Type column — content-sized, sits left next to metadata pills */
.prod-deliv-type {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-secondary,#64748b);
  white-space: nowrap;
}
/* Invisible spacer injected after metadata, before the right cluster */
.prod-deliv-spacer {
  flex: 1 1 auto;
}

/* ===== Website Design Dashboard ===== */
.wd-dashboard { width:100%; height:100%; display:flex; flex-direction:column; overflow-y:auto; padding:0; }
.wd-steps { display:flex; flex-direction:column; gap:16px; padding-bottom:24px; }
.wd-step { background:var(--card-bg,#fff); border:1px solid var(--border-color,#e2e8f0); border-radius:10px; padding:16px; }
.wd-header { padding: 24px; }
.wd-header-title { margin: 0; font-size: 22px; font-weight: 600; color: var(--text-primary,#1e293b); }
.wd-header-sub { margin-top: 4px; color: var(--text-muted,#6b7280); font-size: 13px; }
.wd-body { display: flex; gap: 24px; padding: 0 24px 24px; align-items: flex-start; }
.wd-left { flex: 0 0 calc(70% - 12px); min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.wd-right { flex: 0 0 calc(30% - 12px); min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.wd-materials-recap, .wd-messages-wrap {
  background: var(--card-bg,#fff);
  border: 1px solid var(--border-color,#e2e8f0);
  border-radius: 10px;
  padding: 16px;
}
.wd-link-messages {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary,#1e293b);
  user-select: none;
}
.wd-chat-box { margin-top: 4px; }
.wd-step-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.wd-step-num { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--accent-color,#3b82f6); color:#fff; font-size:13px; font-weight:700; flex-shrink:0; }
.wd-step-title { font-size:15px; font-weight:600; color:var(--text-primary,#1e293b); }
/* Per-image child rows for Agri4All Product Uploads in dept-tabs.
   Indented + lighter background to read as a sub-row of the parent. */
.prod-deliv-row.prod-deliv-row-child { background: rgba(15,118,110,0.04); border-top: 1px dashed rgba(148,163,184,0.25); padding-left: 24px; min-height: 48px; }
.prod-deliv-row.prod-deliv-row-child .prod-deliv-cell { padding-top: 4px; padding-bottom: 4px; }
.prod-deliv-row.prod-deliv-row-child .prod-deliv-child-thumb { flex: 0 0 60px; }
.prod-deliv-row-toggle { transition: color 0.15s, transform 0.15s; }
.prod-deliv-row-toggle:hover { color: #0f766e; }
.prod-deliv-row-toggle.expanded { color: #0f766e; }

/* Locked deliverable rows — types other than agri4all-product-uploads are
   visually present but inactive while the rest of the pipeline is wired up.
   pointer-events on cells (not the row) so client-group collapse still
   responds to row clicks if any caller wires that up. */
.prod-deliv-row.prod-deliv-row-locked { opacity:0.45; cursor:not-allowed; background:repeating-linear-gradient(45deg, transparent 0 6px, rgba(148,163,184,0.06) 6px 12px); position:relative; }
.prod-deliv-row.prod-deliv-row-locked > .prod-deliv-cell { pointer-events:none; filter:grayscale(0.6); }
.prod-deliv-row.prod-deliv-row-locked .proagri-sheet-row-action-btn { pointer-events:none; cursor:not-allowed; opacity:0.6; }
.prod-deliv-row.prod-deliv-row-locked::after { content:'Coming soon'; position:absolute; top:50%; right:14px; transform:translateY(-50%); font-size:9px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#94a3b8; background:rgba(241,245,249,0.85); padding:3px 8px; border-radius:999px; pointer-events:none; }

.wd-upload-area { margin-top:10px; position:relative; border-radius:12px; transition:background 0.18s, box-shadow 0.18s, outline-color 0.18s; outline:2px dashed transparent; outline-offset:4px; }
.wd-upload-area--drag-over { background:rgba(59,130,246,0.06); outline-color:var(--accent-color,#3b82f6); box-shadow:0 0 0 4px rgba(59,130,246,0.10) inset; }
.wd-upload-area--drag-over .cc-img-upload { border-color:var(--accent-color,#3b82f6) !important; color:var(--accent-color,#3b82f6); transform:scale(1.04); }
.wd-upload-area--uploading { opacity:0.6; pointer-events:none; }
.wd-upload-area--uploading::after { content:'Uploading…'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(15,23,42,0.85); color:#fff; padding:8px 16px; border-radius:8px; font-size:12px; font-weight:600; pointer-events:none; }
.wd-file-thumb { position:relative; width:60px; height:60px; border-radius:6px; overflow:hidden; cursor:pointer; border:1px solid var(--border-color,#e2e8f0); display:inline-flex; align-items:center; justify-content:center; }
.wd-file-thumb img { width:100%; height:100%; object-fit:cover; }
.wd-file-thumb:hover .cc-img-remove { display:block; }
.wd-file-link { font-size:9px; text-align:center; padding:4px; color:var(--accent-color,#3b82f6); word-break:break-all; text-decoration:none; }

/* ===== Online Articles Row ===== */
.prod-deliv-amount { flex:0 0 110px; font-weight:600; color:var(--text-primary,#1e293b); text-align:center; }
.prod-deliv-curated { flex:0 0 100px; color:var(--text-secondary,#64748b); font-size:12px; }
.prod-deliv-translate { flex:0 0 auto; overflow:visible; }
.prod-deliv-translate-btn {
  padding:4px 10px; border:1px solid var(--border-color,#e2e8f0);
  background:rgba(128,128,128,0.12); color:var(--text-secondary,#64748b);
  font-size:11px; font-weight:600; border-radius:999px; cursor:pointer;
  white-space:nowrap; transition:all 0.15s;
}
.prod-deliv-translate-btn:hover { border-color:var(--accent-color,#3b82f6); }
.prod-deliv-translate-btn.is-on {
  background:#10b981; border-color:#10b981; color:#fff;
}
.prod-deliv-translate-btn.is-on:hover { background:#059669; border-color:#059669; }

/* Per-deliverable Request Materials button */
.prod-deliv-req-mat { flex:0 0 auto; overflow:visible; }
.prod-deliv-req-mat-btn {
  padding:4px 10px; border:1px solid var(--border-color,#e2e8f0);
  background:var(--card-bg,#fff); color:var(--text-primary,#1e293b);
  font-size:11px; font-weight:600; border-radius:6px; cursor:pointer;
  white-space:nowrap; transition:all 0.15s;
}
.prod-deliv-req-mat-btn:hover {
  border-color:var(--accent-color,#3b82f6);
  color:var(--accent-color,#3b82f6);
  background:rgba(59,130,246,0.04);
}


/* ===== Deliverable status badge colours ===== */
.prod-deliv-status-agri4all-links { background: #16a34a; color: #fff; }
.prod-deliv-status-waiting_for_materials { background: #f59e0b; color: #fff; }
.prod-deliv-status-request_client_materials { background: #6366f1; color: #fff; }
.prod-deliv-status-ready_for_approval { background: #0ea5e9; color: #fff; }

/* ===== Online Article Dashboard ===== */
.oa-dashboard {
  width:100%; height:100%; display:flex; flex-direction:column;
  overflow:hidden; padding:20px; box-sizing:border-box;
}
.oa-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 4px 16px; flex-shrink:0;
}
.oa-title {
  font-size:20px; font-weight:600;
  color:var(--text-primary,#1e293b); margin:0;
}
.oa-materials-recap { flex-shrink:0; }
.oa-bottom-row {
  display:flex; gap:16px; flex:1; min-height:0;
}
.oa-bottom-row .oa-chat-box {
  flex:0 0 30%; margin:0; max-height:none; min-height:0;
}
.oa-article-card {
  flex:1; min-height:0; display:flex; flex-direction:column;
}
.oa-article-header {
  font-size:14px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; color:var(--text-secondary,#64748b);
  margin:0 0 12px 0; padding-bottom:8px;
  border-bottom:1px solid var(--border-color,#e2e8f0);
  flex-shrink:0;
}
.oa-article-card .ql-toolbar.ql-snow {
  border:1px solid var(--border-color,#e2e8f0);
  border-radius:6px 6px 0 0;
  background:rgba(128,128,128,0.04);
}
.oa-article-card .ql-container.ql-snow {
  border:1px solid var(--border-color,#e2e8f0);
  border-top:none;
  border-radius:0 0 6px 6px;
  flex:1;
  min-height:400px;
  font-size:14px;
  display:flex;
  flex-direction:column;
}
.oa-article-card .ql-editor {
  flex:1;
  line-height:1.7;
  color:var(--text-primary,#1e293b);
  min-height:400px;
}
.oa-article-editor img { max-width:100%; margin:8px 0; border-radius:6px; }

/* ===== Agri4All Dashboards ===== */
.a4a-items { display:flex; flex-direction:column; gap:16px; padding-bottom:24px; }
.a4a-item-card { position:relative; background:var(--card-bg,#fff); border:1px solid var(--border-color,#e2e8f0); border-radius:10px; padding:16px; }

/* ===== Agri4All Product Image Wizard-Mirror Dashboard ===== */
.a4api-card-stack { display:flex; flex-direction:column; gap:14px; }
.a4api-field-row { display:flex; flex-direction:column; gap:6px; font-size:13px; }
.a4api-field-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-secondary,#64748b); display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.a4api-field-required { color:#ef4444; font-weight:700; margin-left:4px; }
.a4api-field-help { font-size:11px; color:var(--text-muted,#94a3b8); line-height:1.4; }
.a4api-field-input,
.a4api-field-textarea,
.a4api-field-select {
  width:100%; box-sizing:border-box;
  padding:8px 10px;
  border:1px solid var(--border-color,#e2e8f0);
  border-radius:8px;
  background:var(--surface,#ffffff);
  color:var(--text-primary,#1e293b);
  font:inherit; font-size:13px; line-height:1.45;
  outline:none;
  transition:border-color 0.15s, box-shadow 0.15s;
}
.a4api-field-textarea { resize:vertical; min-height:72px; }
.a4api-field-input:focus,
.a4api-field-textarea:focus,
.a4api-field-select:focus {
  border-color:var(--accent-color,#3b82f6);
  box-shadow:0 0 0 3px rgba(59,130,246,0.14);
}
.a4api-field-input.is-invalid,
.a4api-field-textarea.is-invalid,
.a4api-field-select.is-invalid {
  border-color:#ef4444;
  box-shadow:0 0 0 3px rgba(239,68,68,0.14);
}
.a4api-error { font-size:11px; color:#ef4444; margin-top:2px; font-weight:600; }
.a4api-charcounter { font-size:11px; color:var(--text-muted,#94a3b8); text-align:right; }
.a4api-empty-note { padding:14px; text-align:center; color:var(--text-muted,#94a3b8); font-size:12px; border:1.5px dashed var(--border-color,#e2e8f0); border-radius:10px; background:var(--surface-alt,#f8fafc); }

.a4api-breadcrumb { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.a4api-breadcrumb-arrow { color:var(--text-muted,#94a3b8); font-size:11px; }
.a4api-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  background:var(--surface-alt,#f1f5f9);
  color:var(--text-primary,#1e293b);
  font-size:12px; font-weight:600;
  border:1px solid var(--border-color,#e2e8f0);
  user-select:none;
}
.a4api-chip-close {
  background:none; border:none; color:var(--text-muted,#94a3b8);
  cursor:pointer; font-size:13px; line-height:1; padding:0 2px;
}
.a4api-chip-close:hover { color:#ef4444; }
.a4api-chip-draghandle { cursor:grab; color:var(--text-muted,#94a3b8); font-size:11px; letter-spacing:-1px; }
.a4api-chip-draghandle:active { cursor:grabbing; }
.a4api-chip.is-dragging { opacity:0.4; }
.a4api-chip.is-accent { background:rgba(59,130,246,0.08); border-color:rgba(59,130,246,0.3); color:var(--accent-color,#3b82f6); }
.a4api-chip-addbtn {
  border:1px dashed var(--border-color,#cbd5e1);
  color:var(--accent-color,#3b82f6);
  background:transparent;
  padding:4px 10px; border-radius:999px;
  cursor:pointer; font-size:12px; font-weight:600;
  transition:background 0.15s;
}
.a4api-chip-addbtn:hover { background:rgba(59,130,246,0.06); border-color:var(--accent-color,#3b82f6); }

.a4api-dropzone {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:18px; border:2px dashed var(--border-color,#cbd5e1);
  border-radius:10px;
  background:var(--surface-alt,#f8fafc);
  color:var(--text-secondary,#64748b);
  font-size:12px; cursor:pointer;
  transition:border-color 0.15s, background 0.15s;
}
.a4api-dropzone:hover,
.a4api-dropzone.is-dragover { border-color:var(--accent-color,#3b82f6); background:rgba(59,130,246,0.06); color:var(--accent-color,#3b82f6); }
.a4api-dropzone-filename { font-size:12px; font-weight:700; color:var(--text-primary,#1e293b); word-break:break-all; }
.a4api-dropzone-size { font-size:11px; color:var(--text-muted,#94a3b8); }
.a4api-dropzone-clear {
  background:none; border:1px solid var(--border-color,#e2e8f0); color:var(--text-secondary,#64748b);
  padding:3px 10px; border-radius:999px; font-size:11px; cursor:pointer;
}
.a4api-dropzone-clear:hover { border-color:#ef4444; color:#ef4444; }

.a4api-subcard {
  padding:12px;
  border:1px solid var(--border-color,#e2e8f0);
  border-radius:10px;
  background:var(--surface-alt,#f8fafc);
  display:flex; flex-direction:column; gap:10px;
}
.a4api-subcard-title {
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--text-secondary,#64748b);
  margin:0;
}

.a4api-contact-row {
  padding:12px;
  border:1px solid var(--border-color,#e2e8f0);
  border-radius:10px;
  background:var(--surface-alt,#f8fafc);
  display:flex; flex-direction:column; gap:10px;
}
.a4api-contact-row.is-dragging { opacity:0.4; }
.a4api-contact-header {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.a4api-contact-title { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-secondary,#64748b); display:flex; align-items:center; gap:6px; }
.a4api-contact-actions { display:flex; align-items:center; gap:4px; }
.a4api-iconbtn {
  background:none; border:1px solid transparent;
  padding:4px 8px; border-radius:6px;
  color:var(--text-muted,#94a3b8);
  cursor:pointer; font-size:12px; font-weight:600;
}
.a4api-iconbtn:hover { border-color:var(--border-color,#e2e8f0); color:var(--text-primary,#1e293b); background:var(--surface,#ffffff); }
.a4api-iconbtn.is-danger:hover { color:#ef4444; border-color:#ef4444; }
.a4api-iconbtn:disabled { opacity:0.4; cursor:not-allowed; }

.a4api-media-gallery {
  display:flex; gap:10px; overflow-x:auto; padding:4px 2px 8px;
  scrollbar-width:thin;
}
.a4api-media-thumb {
  flex:0 0 130px;
  border:1.5px solid var(--border-color,#e2e8f0);
  border-radius:10px; padding:6px;
  background:var(--surface,#ffffff);
  display:flex; flex-direction:column; gap:6px;
  font-size:11px; cursor:grab;
}
.a4api-media-thumb:active { cursor:grabbing; }
.a4api-media-thumb.is-dragging { opacity:0.4; }
.a4api-media-thumb.is-cover { border-color:#10B981; box-shadow:0 0 0 2px rgba(16,185,129,0.18); }
.a4api-media-thumb img { width:100%; height:80px; object-fit:cover; border-radius:6px; display:block; background:var(--surface-alt,#f1f5f9); }
.a4api-media-thumb-row { display:flex; align-items:center; justify-content:space-between; gap:4px; font-size:11px; }
.a4api-media-thumb label { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text-secondary,#64748b); font-weight:600; cursor:pointer; }
.a4api-media-eye { background:none; border:none; color:var(--text-muted,#94a3b8); cursor:pointer; padding:0 2px; font-size:12px; }
.a4api-media-eye:hover { color:var(--accent-color,#3b82f6); }

.a4api-seller-pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  font-size:12px; font-weight:700;
  width:fit-content;
}
.a4api-seller-not-registered { background:var(--surface-alt,#f1f5f9); color:var(--text-secondary,#64748b); border:1px solid var(--border-color,#e2e8f0); }
.a4api-seller-awaiting { background:rgba(245,158,11,0.12); color:#b45309; border:1px solid rgba(245,158,11,0.4); }
.a4api-seller-active { background:rgba(16,185,129,0.12); color:#047857; border:1px solid rgba(16,185,129,0.4); }
.a4api-seller-explainer { font-size:12px; color:var(--text-secondary,#64748b); line-height:1.5; }
.a4api-seller-link { font-size:12px; color:var(--accent-color,#3b82f6); text-decoration:none; font-weight:600; }
.a4api-seller-link:hover { text-decoration:underline; }

/* "Default" badge inline with the prefilled seller name on Card 8.
   Muted pill styling to match .a4api-validate-tag (neutral state). */
.seller-default-badge {
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:999px;
  font-size:10px; font-weight:700;
  letter-spacing:0.03em; text-transform:uppercase;
  background:var(--surface-alt,#f1f5f9);
  color:var(--text-secondary,#64748b);
  border:1px solid var(--border-color,#e2e8f0);
}

.a4api-validate-summary { display:flex; flex-wrap:wrap; gap:6px; font-size:12px; }
.a4api-validate-tag {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:999px;
  font-size:11px; font-weight:700;
  background:var(--surface-alt,#f1f5f9);
  color:var(--text-secondary,#64748b);
  border:1px solid var(--border-color,#e2e8f0);
}
.a4api-validate-tag.is-ok { background:rgba(16,185,129,0.1); color:#047857; border-color:rgba(16,185,129,0.35); }
.a4api-validate-tag.is-err { background:rgba(239,68,68,0.1); color:#b91c1c; border-color:rgba(239,68,68,0.35); }

.a4api-jobs-list { display:flex; flex-direction:column; gap:8px; }
.a4api-job-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 10px;
  border:1px solid var(--border-color,#e2e8f0);
  border-radius:8px;
  background:var(--surface,#ffffff);
  font-size:12px;
}
.a4api-job-country { font-weight:700; color:var(--text-primary,#1e293b); display:flex; align-items:center; gap:6px; }
.a4api-job-status {
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px;
  font-size:11px; font-weight:700;
  background:var(--surface-alt,#f1f5f9); color:var(--text-secondary,#64748b);
}
.a4api-job-status.is-ok { background:rgba(16,185,129,0.12); color:#047857; }
.a4api-job-status.is-err { background:rgba(239,68,68,0.12); color:#b91c1c; }
.a4api-job-status.a4api-job-submitting { background:rgba(245,158,11,0.12); color:#b45309; border:1px solid rgba(245,158,11,0.4); }
.a4api-job-status.a4api-job-submitting::before {
  content:''; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#f59e0b; margin-right:6px;
  animation:a4api-pulse 1.1s ease-in-out infinite;
}
@keyframes a4api-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.4; transform:scale(1.25); }
}
.a4api-job-status.a4api-job-pending-alpha { background:rgba(59,130,246,0.12); color:#1d4ed8; border:1px solid rgba(59,130,246,0.35); }
.a4api-job-status.a4api-job-live { background:rgba(16,185,129,0.12); color:#047857; border:1px solid rgba(16,185,129,0.4); }
.a4api-job-status.a4api-job-error { background:rgba(239,68,68,0.12); color:#b91c1c; border:1px solid rgba(239,68,68,0.4); }
.a4api-job-live-chip {
  display:inline-flex; align-items:center; padding:2px 8px; margin-left:6px;
  border-radius:999px; background:#10B981; color:#ffffff;
  font-size:10px; font-weight:700; text-decoration:none;
}
.a4api-job-live-chip:hover { filter:brightness(1.08); text-decoration:none; }
.a4api-job-link { color:var(--accent-color,#3b82f6); text-decoration:none; font-size:11px; font-weight:600; margin-left:6px; }
.a4api-job-link:hover { text-decoration:underline; }
.a4api-job-retry {
  padding:3px 10px; border-radius:6px; font-size:11px; font-weight:700;
  background:transparent; color:var(--accent-color,#3b82f6);
  border:1px solid var(--accent-color,#3b82f6);
  cursor:pointer; margin-left:6px;
}
.a4api-job-retry:hover { background:rgba(59,130,246,0.08); }
.a4api-job-error-detail { font-size:11px; color:#b91c1c; margin-top:4px; line-height:1.4; }

.a4api-preflight-banner {
  display:flex; flex-direction:column; gap:6px;
  padding:12px 14px; border-radius:10px;
  border:1px solid var(--border-color,#e2e8f0);
  border-left-width:4px;
  background:var(--surface,#ffffff);
  font-size:12px; color:var(--text-primary,#1e293b);
}
.a4api-preflight-banner.is-ok {
  border-color:rgba(16,185,129,0.35);
  border-left-color:#10B981;
  background:rgba(16,185,129,0.06);
  color:#047857;
}
.a4api-preflight-banner.is-warn {
  border-color:rgba(245,158,11,0.35);
  border-left-color:#f59e0b;
  background:rgba(245,158,11,0.06);
  color:#b45309;
}
.a4api-preflight-banner.is-err {
  border-color:rgba(239,68,68,0.35);
  border-left-color:#ef4444;
  background:rgba(239,68,68,0.06);
  color:#b91c1c;
}
.a4api-preflight-title { font-weight:800; font-size:13px; }
.a4api-preflight-list { margin:2px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.a4api-preflight-list li { line-height:1.45; }
.a4api-preflight-admin-link {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; margin-left:6px;
  border-radius:6px; border:1px solid currentColor;
  font-size:11px; font-weight:700; text-decoration:none; color:inherit;
}
.a4api-preflight-admin-link:hover { background:rgba(0,0,0,0.04); text-decoration:none; }
.a4api-preflight-loading {
  font-size:12px; color:var(--text-secondary,#64748b); font-style:italic;
  padding:8px 2px;
}
.a4api-seller-refresh-btn {
  padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700;
  background:transparent; color:var(--accent-color,#3b82f6);
  border:1px solid var(--accent-color,#3b82f6);
  cursor:pointer;
}
.a4api-seller-refresh-btn:hover:not(:disabled) { background:rgba(59,130,246,0.08); }
.a4api-seller-refresh-btn:disabled { opacity:0.5; cursor:wait; }
.a4api-seller-admin-link {
  display:inline-flex; align-items:center; padding:4px 10px;
  border-radius:999px; font-size:11px; font-weight:700;
  background:rgba(245,158,11,0.12); color:#b45309;
  border:1px solid rgba(245,158,11,0.4);
  text-decoration:none;
}
.a4api-seller-admin-link:hover { filter:brightness(0.98); text-decoration:none; }

.a4api-preview-toggle {
  background:none; border:1px solid var(--border-color,#e2e8f0);
  color:var(--text-secondary,#64748b); font-size:12px; font-weight:600;
  padding:5px 12px; border-radius:6px; cursor:pointer;
}
.a4api-preview-toggle:hover { border-color:var(--accent-color,#3b82f6); color:var(--accent-color,#3b82f6); }
.a4api-preview-pre {
  margin:0; padding:12px;
  background:var(--surface-alt,#f1f5f9);
  border:1px solid var(--border-color,#e2e8f0);
  border-radius:8px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px; line-height:1.4;
  color:var(--text-primary,#1e293b);
  max-height:280px; overflow:auto; white-space:pre; word-break:normal;
}

.a4api-submit-btn {
  padding:12px 18px; border-radius:10px;
  background:#10B981; color:#ffffff;
  font-weight:800; font-size:14px;
  border:none; cursor:pointer; width:100%;
  transition:filter 0.15s;
}
.a4api-submit-btn:hover:not(:disabled) { filter:brightness(1.08); }
.a4api-submit-btn:disabled { opacity:0.5; cursor:not-allowed; }

.a4api-save-warn { font-size:11px; color:#b45309; font-weight:600; padding:4px 0; }
.a4api-save-status { font-size:11px; color:var(--text-muted,#94a3b8); font-weight:600; font-style:italic; }
.a4api-card-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; padding-top:6px; border-top:1px dashed var(--border-color,#e2e8f0); margin-top:4px; }
.a4api-copy-btn {
  background:none; border:1px solid var(--border-color,#e2e8f0);
  color:var(--text-secondary,#64748b); font-size:11px; font-weight:600;
  padding:4px 10px; border-radius:6px; cursor:pointer;
}
.a4api-copy-btn:hover { border-color:var(--accent-color,#3b82f6); color:var(--accent-color,#3b82f6); }

.a4api-price-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width: 640px) {
  .a4api-price-grid { grid-template-columns:1fr; }
}

/* Dark-theme polish — when body has .dark (existing app convention) these
   vars already flip; the extra rules here override specific backgrounds
   that we did not tie to a var. */
body.dark .a4api-dropzone,
.dark-theme .a4api-dropzone { background:rgba(255,255,255,0.03); }
body.dark .a4api-dropzone:hover,
body.dark .a4api-dropzone.is-dragover,
.dark-theme .a4api-dropzone:hover,
.dark-theme .a4api-dropzone.is-dragover { background:rgba(59,130,246,0.12); }
body.dark .a4api-subcard,
.dark-theme .a4api-subcard,
body.dark .a4api-contact-row,
.dark-theme .a4api-contact-row,
body.dark .a4api-empty-note,
.dark-theme .a4api-empty-note { background:rgba(255,255,255,0.025); }
body.dark .a4api-preview-pre,
.dark-theme .a4api-preview-pre { background:rgba(255,255,255,0.03); }
body.dark .a4api-seller-not-registered,
.dark-theme .a4api-seller-not-registered { background:rgba(255,255,255,0.05); }
body.dark .a4api-validate-tag,
.dark-theme .a4api-validate-tag { background:rgba(255,255,255,0.04); }
body.dark .a4api-preflight-banner,
.dark-theme .a4api-preflight-banner { background:rgba(255,255,255,0.03); color:var(--text-primary,#e2e8f0); }
body.dark .a4api-preflight-banner.is-ok,
.dark-theme .a4api-preflight-banner.is-ok { background:rgba(16,185,129,0.1); color:#6ee7b7; }
body.dark .a4api-preflight-banner.is-warn,
.dark-theme .a4api-preflight-banner.is-warn { background:rgba(245,158,11,0.1); color:#fcd34d; }
body.dark .a4api-preflight-banner.is-err,
.dark-theme .a4api-preflight-banner.is-err { background:rgba(239,68,68,0.1); color:#fca5a5; }
body.dark .a4api-preflight-admin-link:hover,
.dark-theme .a4api-preflight-admin-link:hover { background:rgba(255,255,255,0.06); }
body.dark .a4api-seller-admin-link,
.dark-theme .a4api-seller-admin-link { background:rgba(245,158,11,0.18); color:#fcd34d; border-color:rgba(245,158,11,0.5); }
body.dark .a4api-job-status.a4api-job-submitting,
.dark-theme .a4api-job-status.a4api-job-submitting { background:rgba(245,158,11,0.2); color:#fcd34d; }
body.dark .a4api-job-status.a4api-job-pending-alpha,
.dark-theme .a4api-job-status.a4api-job-pending-alpha { background:rgba(59,130,246,0.2); color:#93c5fd; }
body.dark .a4api-job-status.a4api-job-live,
.dark-theme .a4api-job-status.a4api-job-live { background:rgba(16,185,129,0.18); color:#6ee7b7; }
body.dark .a4api-job-status.a4api-job-error,
.dark-theme .a4api-job-status.a4api-job-error { background:rgba(239,68,68,0.18); color:#fca5a5; }
body.dark .a4api-job-error-detail,
.dark-theme .a4api-job-error-detail { color:#fca5a5; }
body.dark .a4api-media-thumb img,
.dark-theme .a4api-media-thumb img { background:rgba(255,255,255,0.04); }

.a4a-rt-toolbar { display:flex; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--border-color,#e2e8f0); margin-bottom:10px; }
.a4a-rt-btn { padding:4px 12px; border:1px solid var(--border-color,#e2e8f0); border-radius:6px; font-size:12px; font-weight:600; color:var(--text-secondary,#64748b); cursor:pointer; transition:all 0.15s; }
.a4a-rt-btn:hover { border-color:var(--accent-color,#3b82f6); color:var(--accent-color,#3b82f6); background:rgba(59,130,246,0.04); }

/* Multi-section dashboard checkbox + delete + editable name */
.wd-step-header { position:relative; }
.wd-step-checkbox { width:16px; height:16px; margin-right:4px; cursor:pointer; flex-shrink:0; }
.wd-step.wd-step-done { opacity:0.6; }
.wd-step.wd-step-done .wd-step-title { text-decoration:line-through; color:var(--text-muted,#94a3b8); }
.wd-step-delete { margin-left:auto; background:none; border:none; color:var(--text-muted,#ccc); font-size:18px; cursor:pointer; padding:0 6px; line-height:1; }
.wd-step-delete:hover { color:#e74c3c; }
.wd-step-title[contenteditable="true"] { outline:none; border-bottom:1px dashed transparent; padding:2px 4px; border-radius:3px; }
.wd-step-title[contenteditable="true"]:focus { border-bottom-color:var(--accent-color,#3b82f6); background:rgba(59,130,246,0.05); }
.wd-step-title[contenteditable="true"]:hover { border-bottom-color:var(--border-color,#e2e8f0); }

/* Client group action buttons */
.prod-client-btn { padding:4px 12px; border:1px solid var(--border-color,#e2e8f0); border-radius:6px; background:var(--card-bg,#fff); font-size:11px; font-weight:600; color:var(--text-secondary,#64748b); cursor:pointer; transition:all 0.15s; margin-left:6px; white-space:nowrap; }
.prod-client-btn:hover { border-color:var(--accent-color,#3b82f6); color:var(--accent-color,#3b82f6); background:rgba(59,130,246,0.04); }
.prod-client-btn-primary { background:var(--accent-color,#3b82f6); border-color:var(--accent-color,#3b82f6); color:#fff; }
.prod-client-btn-primary:hover { background:#2563eb; color:#fff; }

/* ===== Department Avatars ===== */
.prod-deliv-team { flex:0 0 36px; }
.dept-avatar-row { display:flex; gap:3px; flex-wrap:nowrap; align-items:center; }
.dept-avatar {
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; font-size:9px; font-weight:700;
  cursor:pointer; flex-shrink:0; overflow:hidden;
  border:1.5px solid transparent;
  transition:transform 0.1s, border-color 0.1s;
  user-select:none;
}
.dept-avatar:hover { transform:scale(1.15); border-color:var(--accent-color,#3b82f6); }
.dept-avatar img { width:100%; height:100%; object-fit:cover; }
.dept-avatar-empty {
  background:transparent; border:1.5px dashed #cbd5e1;
  font-weight:400; font-size:11px;
}

/* ===== Employee Picker Modal ===== */
.emp-picker-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.4); z-index:10001;
  display:flex; align-items:center; justify-content:center;
}
.emp-picker-modal {
  background:var(--card-bg,#fff); border-radius:12px;
  width:420px; max-width:90vw; max-height:80vh;
  box-shadow:0 20px 60px rgba(0,0,0,0.2);
  display:flex; flex-direction:column; overflow:hidden;
}
.emp-picker-title {
  margin:0; padding:18px 20px 10px; font-size:16px; font-weight:700;
  color:var(--text-primary,#1e293b);
}
.emp-picker-search {
  margin:0 20px 12px; padding:8px 12px;
  border:1px solid var(--border-color,#e2e8f0); border-radius:6px;
  font-size:13px; outline:none;
}
.emp-picker-search:focus { border-color:var(--accent-color,#3b82f6); }
.emp-picker-list {
  flex:1; overflow-y:auto; padding:0 10px 10px;
}
.emp-picker-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:6px; cursor:pointer;
  transition:background 0.1s;
}
.emp-picker-item:hover { background:rgba(128,128,128,0.06); }
.emp-picker-item.active { background:rgba(59,130,246,0.08); }
.emp-picker-clear {
  color:var(--text-secondary,#94a3b8); font-size:12px;
  border-bottom:1px solid var(--border-color,#e2e8f0); margin-bottom:4px;
}
.emp-picker-clear:hover { color:#e74c3c; }
.emp-picker-info { flex:1; min-width:0; }
.emp-picker-name {
  font-size:13px; font-weight:600; color:var(--text-primary,#1e293b);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.emp-picker-role {
  font-size:11px; color:var(--text-secondary,#64748b); text-transform:capitalize;
}
.emp-picker-you {
  background:rgba(59,130,246,0.1); color:var(--accent-color,#3b82f6);
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:8px;
  text-transform:uppercase;
}

.prod-deliv-status-opt.active {
  background: rgba(59, 130, 246, 0.08);
}

/* ===== CR trigger cell (replaces inline checklist) ===== */
.cc-cr-trigger { display:flex; align-items:center; justify-content:center; gap:4px; background:none; border:1px solid transparent; border-radius:6px; padding:4px 6px; cursor:pointer; color:var(--text-secondary,#64748b); transition:background 0.15s,border-color 0.15s,color 0.15s; width:100%; }
.cc-cr-trigger:hover { background:rgba(59,130,246,0.08); border-color:var(--border-color,#e2e8f0); color:var(--accent-color,#3b82f6); }
.cc-cr-trigger svg { width:16px; height:16px; display:block; }
.cc-cr-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:10px; background:var(--accent-color,#3b82f6); color:#fff; font-size:10px; font-weight:700; line-height:1; }
.cc-cr-count.is-empty { background:var(--border-color,#e2e8f0); color:var(--text-muted,#94a3b8); }

/* ===== CR Modal ===== */
.cc-cr-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:10001; padding:20px; box-sizing:border-box; }
.cc-cr-modal-panel { width:100%; max-width:900px; max-height:90vh; background:var(--card-bg,#fff); border:1px solid var(--border-color,#e2e8f0); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,0.3); display:flex; flex-direction:column; overflow:hidden; }
.cc-cr-modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border-color,#e2e8f0); flex-shrink:0; }
.cc-cr-modal-header h3 { margin:0; font-size:16px; font-weight:700; color:var(--text-primary,#1e293b); }
.cc-cr-modal-close { background:none; border:none; font-size:26px; line-height:1; color:var(--text-muted,#94a3b8); cursor:pointer; padding:0 6px; }
.cc-cr-modal-close:hover { color:var(--text-primary,#1e293b); }

.cc-cr-modal-body { display:flex; gap:0; min-height:400px; flex:1; min-height:0; overflow:hidden; }
.cc-cr-modal-carousel { flex:0 0 60%; background:rgba(0,0,0,0.03); border-right:1px solid var(--border-color,#e2e8f0); display:flex; align-items:center; justify-content:center; position:relative; min-height:400px; padding:12px; box-sizing:border-box; }
.cc-cr-carousel-placeholder { font-size:13px; color:var(--text-muted,#94a3b8); }
.cc-cr-carousel-stage { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.cc-cr-carousel-img { max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; display:block; }
.cc-cr-carousel-nav { position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,0.55); color:#fff; border:none; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cc-cr-carousel-nav:hover { background:rgba(0,0,0,0.75); }
.cc-cr-carousel-prev { left:10px; }
.cc-cr-carousel-next { right:10px; }
.cc-cr-carousel-counter { position:absolute; bottom:10px; right:12px; background:rgba(0,0,0,0.55); color:#fff; font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; }

.cc-cr-modal-form { flex:1; display:flex; flex-direction:column; gap:10px; padding:16px 20px; overflow-y:auto; min-width:0; }
.cc-cr-form-textarea { min-height:140px; resize:vertical; font:inherit; font-size:13px; line-height:1.5; color:var(--text-primary,#1e293b); background:var(--card-bg,#fff); border:1px solid var(--border-color,#e2e8f0); border-radius:6px; padding:8px 10px; outline:none; }
.cc-cr-form-textarea:focus { border-color:var(--accent-color,#3b82f6); }
.cc-cr-form-file-label { display:inline-block; font-size:12px; color:var(--text-secondary,#64748b); cursor:pointer; padding:6px 10px; border:1px dashed var(--border-color,#e2e8f0); border-radius:6px; text-align:center; }
.cc-cr-form-file-label:hover { border-color:var(--accent-color,#3b82f6); color:var(--accent-color,#3b82f6); }
.cc-cr-form-file { display:none; }
.cc-cr-form-selected { font-size:11px; color:var(--text-muted,#94a3b8); }
.cc-cr-form-submit { margin-top:auto; align-self:flex-start; background:var(--accent-color,#3b82f6); color:#fff; border:none; border-radius:6px; padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer; }
.cc-cr-form-submit:hover { filter:brightness(1.08); }
.cc-cr-form-submit:disabled { opacity:0.6; cursor:default; }
.cc-cr-form-meta { font-size:11px; color:var(--text-muted,#94a3b8); }
.cc-cr-form-text-view { font-size:13px; line-height:1.5; color:var(--text-primary,#1e293b); white-space:pre-wrap; word-break:break-word; padding:8px 10px; background:rgba(128,128,128,0.04); border:1px solid var(--border-color,#e2e8f0); border-radius:6px; min-height:80px; }
.cc-cr-form-legacy-note { font-size:10px; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted,#94a3b8); font-weight:600; }
.cc-cr-form-delete { display:inline-flex; align-items:center; gap:6px; margin-top:auto; align-self:flex-start; background:none; color:#e74c3c; border:1px solid #e74c3c; border-radius:6px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; }
.cc-cr-form-delete svg { width:14px; height:14px; }
.cc-cr-form-delete:hover { background:rgba(231,76,60,0.08); }
.cc-cr-form-new { align-self:flex-start; background:none; color:var(--accent-color,#3b82f6); border:1px dashed var(--accent-color,#3b82f6); border-radius:6px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; }
.cc-cr-form-new:hover { background:rgba(59,130,246,0.08); }

.cc-cr-modal-list { display:flex; gap:6px; overflow-x:auto; padding:10px 16px; border-top:1px solid var(--border-color,#e2e8f0); background:rgba(128,128,128,0.03); flex-shrink:0; }
.cc-cr-modal-list-empty { font-size:12px; color:var(--text-muted,#94a3b8); padding:4px 0; }
.cc-cr-chip { flex-shrink:0; max-width:240px; background:var(--card-bg,#fff); border:1px solid var(--border-color,#e2e8f0); border-radius:14px; padding:4px 12px; font-size:11px; font-weight:600; color:var(--text-secondary,#64748b); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-cr-chip:hover { border-color:var(--accent-color,#3b82f6); color:var(--accent-color,#3b82f6); }
.cc-cr-chip.is-selected { background:var(--accent-color,#3b82f6); border-color:var(--accent-color,#3b82f6); color:#fff; }

/* ===== Materials Recap ===== */
.cc-materials-recap { background:var(--card-bg,#fff); border:1px solid var(--border-color,#e2e8f0); border-radius:16px; box-shadow:0 2px 12px rgba(0,0,0,0.06); padding:16px 20px; margin-bottom:16px; flex-shrink:0; }
.cc-recap-loading { font-size:12px; color:var(--text-muted,#94a3b8); }
.cc-recap-empty { font-size:12px; color:var(--text-muted,#94a3b8); }
.cc-recap-header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.cc-recap-title { margin:0; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-secondary,#64748b); }
.cc-recap-timestamp { font-size:11px; color:var(--text-muted,#94a3b8); }
.cc-recap-responses { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.cc-recap-qa { display:flex; flex-direction:column; gap:2px; }
.cc-recap-question { font-size:11px; font-weight:600; color:var(--text-secondary,#64748b); text-transform:uppercase; letter-spacing:0.03em; }
.cc-recap-answer { font-size:13px; color:var(--text-primary,#1e293b); line-height:1.4; word-break:break-word; }
.cc-recap-assets-header { font-size:11px; font-weight:600; color:var(--text-secondary,#64748b); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:6px; }
.cc-recap-assets { display:flex; flex-wrap:wrap; gap:8px; }
.cc-recap-thumb { width:60px; height:60px; padding:0; border:1px solid var(--border-color,#e2e8f0); border-radius:6px; overflow:hidden; cursor:pointer; background:none; }
.cc-recap-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cc-recap-thumb:hover { border-color:var(--accent-color,#3b82f6); }
.cc-recap-file-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; background:var(--bg-secondary,#f1f5f9); border:1px solid var(--border-color,#e2e8f0); border-radius:4px; font-size:12px; color:var(--text-primary,#1e293b); margin:2px 4px 2px 0; }
.cc-recap-file-link { display:inline-flex; align-items:center; gap:4px; padding:6px 10px; background:var(--bg-secondary,#f1f5f9); border:1px solid var(--border-color,#e2e8f0); border-radius:6px; font-size:12px; color:var(--accent-color,#3b82f6); text-decoration:none; }
.cc-recap-file-link:hover { border-color:var(--accent-color,#3b82f6); background:rgba(59,130,246,0.05); }

/* ── Team chat box on CC dashboard ───────────────────────── */
.cc-chat-box { display:flex; flex-direction:column; background:var(--card-bg,#fff); border:1px solid var(--border-color,#e2e8f0); border-radius:16px; padding:12px; margin:0 0 16px 0; max-height:300px; min-height:200px; flex-shrink:0; }
.cc-chat-header { font-size:14px; font-weight:600; color:var(--text-primary,#1e293b); margin-bottom:8px; }
.cc-chat-list { flex:1; overflow-y:auto; border:1px solid var(--border-color,#e2e8f0); border-radius:8px; padding:8px; background:var(--bg-secondary,#f8fafc); display:flex; flex-direction:column; gap:6px; }
.cc-chat-msg { font-size:13px; padding:6px 8px; background:var(--card-bg,#fff); border-radius:6px; }
.cc-chat-msg-header { font-size:11px; color:var(--text-muted,#94a3b8); margin-bottom:2px; }
.cc-chat-msg-header strong { color:var(--text-primary,#1e293b); margin-right:6px; }
.cc-chat-msg-body { color:var(--text-primary,#1e293b); white-space:pre-wrap; word-break:break-word; }
.cc-chat-input-wrap { display:flex; gap:8px; margin-top:8px; }
.cc-chat-input { flex:1; resize:none; min-height:38px; max-height:100px; padding:8px; border:1px solid var(--border-color,#e2e8f0); border-radius:6px; font-family:inherit; font-size:13px; background:var(--card-bg,#fff); color:var(--text-primary,#1e293b); }
.cc-chat-send { padding:8px 16px; background:var(--color-accent,#3b82f6); color:#fff; border:none; border-radius:6px; font-weight:600; cursor:pointer; }
.cc-chat-send:hover { filter:brightness(1.1); }
.cc-chat-send:disabled { opacity:0.5; cursor:not-allowed; }

/* Bottom row layout: chat (left ~30%) | posts card (right ~70%) */
.cc-bottom-row { display:flex; gap:16px; flex:1; min-height:0; margin-top:16px; }
.cc-bottom-row .cc-chat-box { flex:0 0 30%; margin:0; max-height:none; min-height:0; }
.cc-bottom-row .cd-messenger { flex:0 0 30%; margin:0; }
.cc-bottom-row .cd-messenger .cd-messenger-messages { max-height:none; min-height:200px; flex:1; }
.cc-bottom-row .cc-posts-card { flex:1; margin:0; }

/* ── Split-sheet (Follow Ups / Approvals) vertical scroll fix ──
   renderSplitSheetTab builds: .dept-tab-wrap > .dept-dashboard-layout >
   .dept-dashboard-half > .dept-sheet-card > [sheetBody].
   The inner sheetBody already has flex:1/overflow-y:auto inline, but the
   flex chain was not constraining height — .dept-dashboard-half lacked
   min-height:0, so the card grew unbounded and rows piled off-screen.
   Scope these rules to .dept-tab-wrap so we only touch the production
   split-sheet tabs and not any other layout that reuses dept classes. */
.dept-tab-wrap .dept-dashboard-layout {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.dept-tab-wrap .dept-dashboard-half {
  min-height: 0;
  overflow: hidden;
}
.dept-tab-wrap .dept-dashboard-half > .dept-sheet-card {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ===== Production Sheet Table (renderDeptTypeTab + renderClientGroupedSheet) ===== */
/* Used by all dept-type tab views: Posts, Newsletters, Links, Stats, Briefs,
   Production, Editing, Review, Scheduling, Google Ads, Proposals, etc. */

.production-sheet-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  color: var(--text-secondary);
  table-layout: auto;
}

.production-sheet-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  padding: 10px 14px;
  background: var(--bg-secondary, #fafafa);
  border-bottom: 1px solid rgba(128, 128, 128, 0.18);
  white-space: nowrap;
  user-select: none;
}

.production-sheet-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.08);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

/* Client group header row (collapsible parent) */
.production-sheet-table tr.production-client-row > td {
  background: rgba(128, 128, 128, 0.05);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.12);
  letter-spacing: 0.2px;
}

.production-sheet-table tr.production-client-row:hover > td {
  background: rgba(128, 128, 128, 0.09);
}

.production-sheet-table tr.production-client-row .client-toggle,
.production-sheet-table tr.production-client-row .client-count {
  display: inline-block;
  margin-left: 6px;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
}

/* Child (deliverable) rows */
.production-sheet-table tr.production-child-row {
  transition: background 0.15s ease;
}

.production-sheet-table tr.production-child-row:hover > td {
  background: rgba(128, 128, 128, 0.04);
}

.production-sheet-table tr.production-child-row > td.production-indented {
  padding-left: 32px;
  color: var(--text-primary);
  font-weight: 500;
}

/* Type badge */
.production-sheet-table .production-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  background: rgba(128, 128, 128, 0.12);
  color: var(--text-secondary);
  text-transform: lowercase;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* Platforms cell — pills wrap nicely */
.production-sheet-table td:has(.prod-deliv-platform-tag) {
  white-space: normal;
}

.production-sheet-table .prod-deliv-platform-tag {
  display: inline-block;
  margin: 2px 4px 2px 0;
}

/* Action button cell (advance arrow, etc.) — keep tight, no ellipsis */
.production-sheet-table tbody td:last-child {
  text-align: right;
  width: 48px;
  padding-right: 14px;
  overflow: visible;
}

.production-sheet-table .proagri-sheet-row-action-btn {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.production-sheet-table .proagri-sheet-row-action-btn:hover {
  background: rgba(128, 128, 128, 0.12);
  color: var(--color-accent-light, #f5a623);
}

/* Empty state already styled inline by JS, but normalize it just in case */
.dept-sheet-container > div[style*="No items"] {
  font-size: 13px;
}

/* Dark theme adjustments */
[data-theme="dark"] .production-sheet-table thead th,
.theme-dark .production-sheet-table thead th {
  background: var(--bg-secondary, #1e1e1e);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .production-sheet-table tr.production-client-row > td,
.theme-dark .production-sheet-table tr.production-client-row > td {
  background: rgba(255, 255, 255, 0.04);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .production-sheet-table tr.production-client-row:hover > td,
.theme-dark .production-sheet-table tr.production-client-row:hover > td {
  background: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .production-sheet-table tr.production-child-row:hover > td,
.theme-dark .production-sheet-table tr.production-child-row:hover > td {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .production-sheet-table tbody td,
.theme-dark .production-sheet-table tbody td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .production-sheet-table .production-type-badge,
.theme-dark .production-sheet-table .production-type-badge {
  background: rgba(255, 255, 255, 0.08);
}

/* ===== Agri4All product-uploads status pills ===== */
.status-agri4all-links {
  background: #16a34a;
  color: #fff;
}
.status-waiting_for_materials {
  background: #f59e0b;
  color: #fff;
}
.status-request_client_materials {
  background: #6366f1;
  color: #fff;
}
.status-ready_for_approval {
  background: #0ea5e9;
  color: #fff;
}

/* ===== Agri4All image-autofill action bar (per-image dashboard) =====
   These rules mirror the inline <style> block injected by
   openA4AProductImageDashboard so the styles survive even when the scoped
   stylesheet is stripped (e.g. theme dark overrides). */
.a4a-ai-autofill-bar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  margin: 0 0 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.08);
  backdrop-filter: blur(8px);
}

.a4a-ai-autofill-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.a4a-ai-autofill-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  justify-content: flex-end;
}

.a4a-ai-autofill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28);
  transition: filter 0.18s, transform 0.12s, box-shadow 0.18s;
  letter-spacing: 0.01em;
}

.a4a-ai-autofill-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.36);
}

.a4a-ai-autofill-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.a4a-ai-autofill-btn:disabled {
  cursor: default;
  filter: saturate(0.5) brightness(0.95);
  opacity: 0.75;
  box-shadow: none;
}

.a4a-ai-autofill-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  animation: a4a-ai-spin 0.8s linear infinite;
}

@keyframes a4a-ai-spin {
  to {
    transform: rotate(360deg);
  }
}

.a4a-ai-autofill-helper {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
  max-width: 460px;
  text-align: right;
}

.a4a-ai-autofill-toast {
  margin: 0 0 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #ecfdf5;
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #065f46;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12);
  animation: a4a-ai-toast-in 0.18s ease-out;
}

@keyframes a4a-ai-toast-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.a4a-ai-filled-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin-left: 8px;
  border-radius: 9999px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
}

/* Dark-theme polish */
.theme-dark .a4a-ai-autofill-bar {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.72));
  border-color: rgba(167, 139, 250, 0.28);
}

.theme-dark .a4a-ai-autofill-helper {
  color: var(--text-secondary, #94a3b8);
}

.theme-dark .a4a-ai-autofill-toast {
  background: rgba(6, 95, 70, 0.18);
  border-color: rgba(16, 185, 129, 0.45);
  color: #a7f3d0;
}

.theme-dark .a4a-ai-filled-chip {
  background: rgba(167, 139, 250, 0.22);
  color: #ddd6fe;
}

/* ===== Post Date Range card + range picker popup ===== */
.a4api-pdr-pick-wrap {
  display: flex;
  justify-content: flex-start;
  margin-top: 2px;
}
.a4api-pdr-pick-btn {
  appearance: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #1e293b);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.a4api-pdr-pick-btn:hover {
  background: var(--surface-alt, #f8fafc);
  border-color: var(--accent-color, #3b82f6);
}
.a4api-pdr-pick-btn:focus-visible {
  outline: none;
  border-color: var(--accent-color, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.a4api-pdr-popup {
  position: relative;
  width: 300px;
  max-width: 100%;
  margin-top: 8px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  background: var(--card-bg, #ffffff);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.a4api-pdr-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.a4api-pdr-popup-title {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
}
.a4api-pdr-nav {
  appearance: none;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #1e293b);
  cursor: pointer;
}
.a4api-pdr-nav:hover {
  background: var(--surface-alt, #f8fafc);
  border-color: var(--accent-color, #3b82f6);
}

.a4api-pdr-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.a4api-pdr-dow {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
  padding: 4px 0;
}
.a4api-pdr-cell {
  appearance: none;
  font: inherit;
  font-size: 12px;
  padding: 0;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary, #1e293b);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.a4api-pdr-cell:hover {
  background: var(--surface-alt, #f1f5f9);
}
.a4api-pdr-cell.is-in-range {
  background: rgba(59, 130, 246, 0.14);
  color: var(--text-primary, #1e293b);
  border-radius: 0;
}
.a4api-pdr-cell.is-start,
.a4api-pdr-cell.is-end {
  background: var(--accent-color, #3b82f6);
  color: #ffffff;
  font-weight: 700;
}
.a4api-pdr-cell.is-start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.a4api-pdr-cell.is-end { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.a4api-pdr-cell.is-start.is-end { border-radius: 6px; }
.a4api-pdr-cell--blank {
  pointer-events: none;
  background: transparent;
}

.a4api-pdr-popup-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--border-color, #e2e8f0);
}
.a4api-pdr-foot-btn {
  appearance: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #1e293b);
  cursor: pointer;
}
.a4api-pdr-foot-btn:hover {
  background: var(--surface-alt, #f8fafc);
}
.a4api-pdr-foot-btn--primary {
  background: var(--accent-color, #3b82f6);
  color: #ffffff;
  border-color: var(--accent-color, #3b82f6);
}
.a4api-pdr-foot-btn--primary:hover {
  background: #2563eb;
  border-color: #2563eb;
}

/* Dark-theme polish for the range picker */
.theme-dark .a4api-pdr-pick-btn {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(148, 163, 184, 0.25);
  color: var(--text-primary, #e2e8f0);
}
.theme-dark .a4api-pdr-pick-btn:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(96, 165, 250, 0.6);
}
.theme-dark .a4api-pdr-popup {
  background: #0f172a;
  border-color: rgba(148, 163, 184, 0.25);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}
.theme-dark .a4api-pdr-nav,
.theme-dark .a4api-pdr-foot-btn {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(148, 163, 184, 0.25);
  color: var(--text-primary, #e2e8f0);
}
.theme-dark .a4api-pdr-nav:hover,
.theme-dark .a4api-pdr-foot-btn:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(96, 165, 250, 0.6);
}
.theme-dark .a4api-pdr-cell {
  color: var(--text-primary, #e2e8f0);
}
.theme-dark .a4api-pdr-cell:hover {
  background: rgba(148, 163, 184, 0.14);
}
.theme-dark .a4api-pdr-cell.is-in-range {
  background: rgba(96, 165, 250, 0.22);
  color: var(--text-primary, #e2e8f0);
}
.theme-dark .a4api-pdr-cell.is-start,
.theme-dark .a4api-pdr-cell.is-end {
  background: #3b82f6;
  color: #ffffff;
}
.theme-dark .a4api-pdr-foot-btn--primary {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
}
.theme-dark .a4api-pdr-popup-foot {
  border-top-color: rgba(148, 163, 184, 0.25);
}