/* Collateral — generalized 5-department task tracker (rebuild of
 * design-collateral.css). Scoped under .col-page so it never collides with other
 * pages. Responsive: the table scrolls horizontally on narrow screens rather than
 * cutting content; the create modal reflows to a single column on mobile.
 * All classes/ids are col- prefixed. Orange accent kept. */

.col-page {
  display: block;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
.col-page * { box-sizing: border-box; }

/* -- header -- */
.col-head {
  margin: 0 0 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.col-head-main { min-width: 0; }
.col-new-btn { flex: 0 0 auto; white-space: nowrap; }
.col-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
}
.col-sub {
  font-size: 13px;
  color: #64748b;
  max-width: 60ch;
}

/* -- fields (shared by modal) -- */
.col-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.col-field-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.col-field-row .col-field { flex: 1 1 180px; }
.col-field-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
}
.col-input {
  font-size: 14px;
  color: #0f172a;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
  min-width: 0;
}
.col-input:focus {
  outline: none;
  border-color: var(--color-accent-light, #f5a623);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.12);
}
.col-add-msg {
  font-size: 12px;
  color: #64748b;
}
.col-add-msg--err { color: #991b1b; }

/* -- buttons -- */
.col-btn {
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  border: 1px solid transparent;
}
.col-btn--primary {
  background: var(--color-accent-light, #f5a623);
  color: #fff;
}
.col-btn--primary:hover:not(:disabled) { background: var(--color-accent-dark, #d4791a); }
.col-btn--primary:disabled { opacity: 0.6; cursor: default; }
.col-btn--ghost {
  background: #fff;
  border-color: #cbd5e1;
  color: #334155;
}
.col-btn--ghost:hover { background: #f8fafc; }

/* -- states -- */
.col-loading,
.col-empty {
  padding: 24px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
}
.col-error {
  padding: 16px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  border-radius: 10px;
  color: #991b1b;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* -- toolbar (Design tabs + search) -- */
.col-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.col-search {
  flex: 1 1 240px;
  max-width: 420px;
  min-width: 0;
}

/* Active | Completed segmented control (Design department only). */
.col-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 3px;
}
.col-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.col-tab:hover { color: #334155; }
.col-tab.is-active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.col-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  background: #e2e8f0;
  border-radius: 999px;
}
.col-tab-count[hidden] { display: none; }
.col-tab.is-active .col-tab-count {
  background: var(--color-accent-light, #f5a623);
  color: #fff;
}

/* -- table -- */
.col-table-wrap {
  width: 100%;
  overflow-x: auto;   /* scroll instead of cutting content on narrow screens */
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}
.col-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.col-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
  padding: 10px 14px;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.col-row {
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.col-row:last-child { border-bottom: none; }
.col-row:hover { background: #f8fafc; }
.col-row--leaving { opacity: 0; transform: translateX(24px); }
.col-cell {
  padding: 10px 14px;
  color: #0f172a;
  vertical-align: middle;
}
.col-cell--name { font-weight: 600; }
.col-name-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.col-name-text { min-width: 0; word-break: break-word; }
.col-completed-at {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  white-space: nowrap;
}
.col-cell--actions { text-align: right; white-space: nowrap; }
.col-cell--status,
.col-cell--resp,
.col-cell--due,
.col-cell--dept,
.col-cell--client { white-space: nowrap; }

/* -- hover-revealed icon buttons (match the department-sheet row actions) -- */
.col-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.col-iconbtn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: block;
}
.col-iconbtn:hover { background: rgba(128, 128, 128, 0.15); color: #333; }
.col-iconbtn:disabled { cursor: default; }
.col-iconbtn--view { color: #3b82f6; }
.col-iconbtn--view:hover { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.col-iconbtn--delete { color: #94a3b8; }
.col-iconbtn--delete:hover { background: rgba(231, 76, 60, 0.15); color: #e74c3c; }
.col-iconbtn--err { color: #991b1b; }
.col-iconbtn--busy { opacity: 0.5; }

/* Hover-reveal: buttons occupy layout space always (no row-height jump); only
 * opacity + pointer-events toggle when the row is hovered. */
.col-reveal {
  opacity: 0;
  pointer-events: none;
}
.col-row:hover .col-reveal,
.col-reveal:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
/* Touch devices have no hover — keep row actions permanently visible. */
@media (hover: none) {
  .col-reveal { opacity: 1; pointer-events: auto; }
}

/* -- status pill / cell (reuses production-page.css .prod-status-*) -- */
.col-status-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.col-status-pill { max-width: 220px; }
.col-status-none { font-size: 12px; color: #94a3b8; }

/* ==========================================================================
 *  DEPARTMENT PILL (headline feature)
 * ========================================================================== */
.col-dept-box { display: inline-flex; align-items: center; }
.col-dept-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 10px 4px 12px;
  cursor: pointer;
  transition: filter 0.12s ease, box-shadow 0.12s ease;
  white-space: nowrap;
}
.col-dept-pill:hover { filter: brightness(0.97); }
.col-dept-pill.is-saving { opacity: 0.6; }
.col-dept-pill.is-error { box-shadow: 0 0 0 2px #ef4444; }
.col-dept-chev { display: inline-flex; opacity: 0.65; }
.col-dept-chev svg { display: block; }

/* Per-department colour chips (light bg + saturated text/border). */
.col-dept-pill--editorial    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.col-dept-pill--design       { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.col-dept-pill--video        { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; }
.col-dept-pill--agri4all     { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.col-dept-pill--social-media { background: #fdf2f8; color: #be185d; border-color: #fbcfe8; }
.col-dept-pill--none {
  background: transparent; color: #94a3b8; border-color: #cbd5e1; border-style: dashed;
}

/* Department dropdown (body-appended floating menu). */
.col-dept-menu,
.col-status-menu,
.col-client-menu {
  position: fixed;
  z-index: 10050;
  /* Floor under the inline clamp positionColFloating sets. Without it a menu
     that reaches this CSS without being positioned has overflow but no bound,
     so it grows past the bottom of the screen instead of scrolling. */
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  padding: 4px;
}
.col-dept-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  font-size: 13px;
  color: #0f172a;
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
}
.col-dept-option:hover { background: #f1f5f9; }
.col-dept-option.is-current { background: #f8fafc; font-weight: 700; }
.col-dept-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
}
.col-dept-dot--editorial    { background: #2563eb; }
.col-dept-dot--design       { background: #ea580c; }
.col-dept-dot--video        { background: #9333ea; }
.col-dept-dot--agri4all     { background: #059669; }
.col-dept-dot--social-media { background: #db2777; }

/* -- transient toast (dept move confirmation) -- */
.col-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  z-index: 10060;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.col-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
 *  CLIENT CELL (optional link)
 * ========================================================================== */
.col-client-box { display: inline-flex; align-items: center; max-width: 200px; }
.col-client-box.is-error .col-client-chip,
.col-client-box.is-error .col-client-link { box-shadow: 0 0 0 2px #ef4444; }
.col-client-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 200px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 3px 4px 3px 12px;
  cursor: pointer;
}
.col-client-chip:hover { background: #e2e8f0; }
.col-client-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.col-client-unlink {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #94a3b8;
  font-size: 11px;
  cursor: pointer;
}
.col-client-unlink:hover { background: #fee2e2; color: #b91c1c; }
.col-client-link {
  font-size: 12.5px;
  font-weight: 500;
  color: #94a3b8;
  background: transparent;
  border: 1px dashed #cbd5e1;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.col-client-link:hover { border-color: #94a3b8; color: #334155; }

/* client picker floating menu */
.col-client-menu { padding: 8px; }
.col-client-search { margin-bottom: 8px; }
.col-client-list { display: flex; flex-direction: column; gap: 2px; }
.col-client-option {
  text-align: left;
  font-size: 13px;
  color: #0f172a;
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
}
.col-client-option:hover { background: #f1f5f9; }
.col-client-empty {
  font-size: 12.5px;
  color: #94a3b8;
  padding: 8px 10px;
}

/* ==========================================================================
 *  RESPONSIBLE + DUE (reuse production-page.css .prod-due-*, employee picker)
 * ========================================================================== */
.col-due-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.col-resp-btn {
  display: inline-flex;
  align-items: center;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.col-resp-btn:hover { border-color: #cbd5e1; background: #f1f5f9; }
.col-resp-btn.is-empty {
  border-style: dashed;
  border-color: #cbd5e1;
  background: transparent;
  color: #94a3b8;
  font-weight: 500;
}
.col-resp-btn.is-empty:hover { border-color: #94a3b8; color: #334155; }
.col-resp-btn.is-error {
  border-color: #ef4444;
  background: #fef2f2;
  color: #b91c1c;
}
.col-resp-select,
.col-due-input { max-width: 180px; font-size: 12.5px; padding: 4px 8px; }

/* ==========================================================================
 *  CREATE MODAL  (body inside the lifted .cl-modal shell)
 * ========================================================================== */
.col-modal { width: 560px; max-width: 92vw; }
.col-modal .col-field { margin-bottom: 12px; }
.col-modal .col-field-row { margin-bottom: 12px; }
.col-modal .col-field-row .col-field { margin-bottom: 0; }
.col-modal-actions { align-items: center; }
.col-modal-actions .col-add-msg { margin-right: auto; }

/* -- simplified status-chain builder (label + color only) -- */
.col-chain-builder {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}
.col-chain-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.col-chain-hint {
  font-size: 11px;
  color: #94a3b8;
}
.col-chain-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.col-chain-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px;
}
.col-chain-color {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.col-chain-label { flex: 1 1 auto; }
.col-chain-remove {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
}
.col-chain-remove:hover { color: #991b1b; border-color: #fecaca; background: #fef2f2; }
.col-chain-add { align-self: flex-start; }

/* -- mobile -- */
@media (max-width: 640px) {
  .col-head { flex-direction: column; align-items: stretch; }
  .col-new-btn { align-self: flex-start; }
  .col-field-row { flex-direction: column; }
  .col-modal { width: 100%; }
}

/* ── #134 dark mode overrides ─────────────────────────────── */
html[data-theme="dark"] .col-title,
html[data-theme="dark"] .col-cell,
html[data-theme="dark"] .col-dept-option,
html[data-theme="dark"] .col-client-option { color: #e2e8f0; }

html[data-theme="dark"] .col-sub,
html[data-theme="dark"] .col-field-label,
html[data-theme="dark"] .col-add-msg,
html[data-theme="dark"] .col-loading,
html[data-theme="dark"] .col-empty,
html[data-theme="dark"] .col-table thead th { color: #94a3b8; }

html[data-theme="dark"] .col-input {
  color: #e2e8f0;
  background: #0f172a;
  border-color: #334155;
}
html[data-theme="dark"] .col-input::placeholder { color: #64748b; }
html[data-theme="dark"] .col-input:focus { box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.20); }

html[data-theme="dark"] .col-add-msg--err,
html[data-theme="dark"] .col-iconbtn--err { color: #fca5a5; }

html[data-theme="dark"] .col-btn--primary { color: #0b1220; }
html[data-theme="dark"] .col-btn--ghost {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}
html[data-theme="dark"] .col-btn--ghost:hover { background: #334155; }

html[data-theme="dark"] .col-error {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

/* segmented control */
html[data-theme="dark"] .col-tabs {
  background: #0f172a;
  border-color: #334155;
}
html[data-theme="dark"] .col-tab { color: #94a3b8; }
html[data-theme="dark"] .col-tab:hover { color: #e2e8f0; }
html[data-theme="dark"] .col-tab.is-active {
  background: #334155;
  color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .col-tab-count {
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.18);
}
html[data-theme="dark"] .col-tab.is-active .col-tab-count { color: #0b1220; }

/* table */
html[data-theme="dark"] .col-table-wrap {
  border-color: #334155;
  background: #1e293b;
}
html[data-theme="dark"] .col-table thead th { border-bottom-color: #334155; }
html[data-theme="dark"] .col-row { border-bottom-color: rgba(148, 163, 184, 0.14); }
html[data-theme="dark"] .col-row:hover { background: #273449; }
html[data-theme="dark"] .col-completed-at { color: #94a3b8; }

html[data-theme="dark"] .col-iconbtn:hover { background: rgba(255, 255, 255, 0.10); color: #e2e8f0; }
html[data-theme="dark"] .col-iconbtn--view { color: #60a5fa; }
html[data-theme="dark"] .col-iconbtn--view:hover { background: rgba(96, 165, 250, 0.18); color: #93c5fd; }
html[data-theme="dark"] .col-iconbtn--delete:hover { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }

/* department pills — each keeps its hue as a translucent tint + light text */
html[data-theme="dark"] .col-dept-pill--editorial {
  background: rgba(37, 99, 235, 0.18); color: #93c5fd; border-color: rgba(96, 165, 250, 0.36);
}
html[data-theme="dark"] .col-dept-pill--design {
  background: rgba(234, 88, 12, 0.18); color: #fdba74; border-color: rgba(251, 146, 60, 0.36);
}
html[data-theme="dark"] .col-dept-pill--video {
  background: rgba(147, 51, 234, 0.20); color: #d8b4fe; border-color: rgba(192, 132, 252, 0.36);
}
html[data-theme="dark"] .col-dept-pill--agri4all {
  background: rgba(5, 150, 105, 0.20); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.36);
}
html[data-theme="dark"] .col-dept-pill--social-media {
  background: rgba(219, 39, 119, 0.20); color: #f9a8d4; border-color: rgba(244, 114, 182, 0.36);
}
html[data-theme="dark"] .col-dept-pill--none { border-color: #475569; }
html[data-theme="dark"] .col-dept-pill:hover { filter: brightness(1.14); }

/* floating menus */
html[data-theme="dark"] .col-dept-menu,
html[data-theme="dark"] .col-status-menu,
html[data-theme="dark"] .col-client-menu {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .col-dept-option:hover,
html[data-theme="dark"] .col-client-option:hover { background: #334155; }
html[data-theme="dark"] .col-dept-option.is-current { background: #273449; }
html[data-theme="dark"] .col-client-empty,
html[data-theme="dark"] .col-status-none,
html[data-theme="dark"] .col-chain-hint { color: #94a3b8; }

/* The toast is already the page background colour in dark mode, so it needs to
   invert rather than stay slate-on-slate. */
html[data-theme="dark"] .col-toast {
  background: #e2e8f0;
  color: #0f172a;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

/* client + responsible cells */
html[data-theme="dark"] .col-client-chip {
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.14);
  border-color: #334155;
}
html[data-theme="dark"] .col-client-chip:hover { background: rgba(148, 163, 184, 0.24); }
html[data-theme="dark"] .col-client-unlink:hover { background: rgba(239, 68, 68, 0.20); color: #fca5a5; }
html[data-theme="dark"] .col-client-link { border-color: #475569; }
html[data-theme="dark"] .col-client-link:hover { border-color: #94a3b8; color: #e2e8f0; }

html[data-theme="dark"] .col-resp-btn {
  color: #cbd5e1;
  background: #273449;
  border-color: #334155;
}
html[data-theme="dark"] .col-resp-btn:hover { border-color: #475569; background: #334155; }
html[data-theme="dark"] .col-resp-btn.is-empty {
  border-color: #475569;
  background: transparent;
  color: #94a3b8;
}
html[data-theme="dark"] .col-resp-btn.is-empty:hover { border-color: #94a3b8; color: #e2e8f0; }
html[data-theme="dark"] .col-resp-btn.is-error {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
}

/* chain builder */
html[data-theme="dark"] .col-chain-builder {
  border-color: #334155;
  background: #0f172a;
}
html[data-theme="dark"] .col-chain-row {
  border-color: #334155;
  background: #1e293b;
}
html[data-theme="dark"] .col-chain-color {
  border-color: #475569;
  background: #1e293b;
}
html[data-theme="dark"] .col-chain-remove {
  border-color: #334155;
  background: #1e293b;
  color: #94a3b8;
}
html[data-theme="dark"] .col-chain-remove:hover {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(239, 68, 68, 0.14);
}