/* ============================================================
   ta-studio-components-v1.0.21.css
   INBXIFY TA Studio — Components tab styles + Assembler picker
                       + post-CMS-write reload banner

   Complete replacement for ta-studio-components-v1.0.12.css.
   Delete the v1.0.12 link from the Webflow <head> and load
   ONLY this file. Per the project versioning rule: increment
   filenames and remove old versions — never mix versions.

   v1.0.21 — .cmp-expand-btn permanent dark-blue + white +, no hover (base = former hover state)

   Companion to ta-components-tab-v1.0.10.js. Additive block
   only — no existing rules modified. All prior rules from
   v1.0.14 are preserved verbatim below the new section.

   NEW § ATTACH INLINE PANEL
   Classes added:
     .cmp-attach-trigger        — "Attach ▾" primary button in card
                                  actions row; no visual change beyond
                                  the ix-btn--primary variant it already
                                  carries via ix-buttons.
     .cmp-inline-edit--attach   — modifier on .cmp-inline-edit when in
                                  attach mode; adds slightly more top
                                  padding to accommodate the two-row
                                  type + picker layout.
     .cmp-attach-inline-label   — "Attach to…" mono section label above
                                  the type button row.
     .cmp-attach-type-row       — flex row holding the four type buttons.
     .cmp-attach-type-btn       — individual asset-type disclosure button
                                  (Article / Ad / Event / RE Listing).
                                  Pill-style, secondary at rest.
     .cmp-attach-type-btn--active
                                — gold border + cream bg when that type
                                  is selected. Same visual language as
                                  .cmp-picker--active (v1.0.3).
     .cmp-attach-picker-wrap    — wrapper around the asset picker select;
                                  gains .has-pending when assetId is set
                                  (the platform's gold-border dirty state).
     .cmp-attach-picker-label   — small mono label above picker select.
     .cmp-attach-picker-select  — the <select> itself; extends .cmp-fc-select
                                  sizing, full width.
     .cmp-detail-customer-edit  — wrapper for the Customer section in the
                                  drawer (moved from card face in v1.0.8).
     .cmp-detail-section-label  — mono section label inside drawer.
     .cmp-detail-field-label    — field label inside drawer customer edit.

   Hardcoding: none. All colors via CSS vars / literal DS tokens already
   present in this file (--ix-gold, --ix-cream, etc.). No new HC entries.

   Webflow head deploy:
     SWAP: ta-studio-components-v1.0.20.css → ta-studio-components-v1.0.21.css
     (JS unchanged — ta-components-tab-v1.0.14.js stays)
   ============================================================ */

/* ============================================================
   § SEARCH+FILTER ROW + LIST LAYOUT (v1.0.14 NEW)
   ============================================================ */

/* ── Search + filter icon on one row ── */
.cmp-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.cmp-search-row .cmp-search {
  flex: 1 1 auto;
  margin-bottom: 0; /* override any standalone margin */
}

/* Filter icon button */
.cmp-filter-wrap {
  position: relative;
  flex-shrink: 0;
}
.cmp-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: #ffffff;
  border: 1px solid #d4cfbf;
  border-radius: 6px;
  color: #5a6a5a;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  position: relative;
}
.cmp-filter-btn:hover {
  border-color: #8a8a7a;
  background: #f4f1ea;
  color: #1a3a3a;
}
.cmp-filter-btn--active {
  border-color: #C4A35A;
  background: #FAF9F5;
  color: #1a3a3a;
}

/* Active-filter count badge */
.cmp-filter-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #C4A35A;
  color: #ffffff;
  border-radius: 8px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

/* Filter popover */
.cmp-filter-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 260px;
  background: #ffffff;
  border: 1px solid #d4cfbf;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(26, 58, 58, 0.14);
  z-index: 200;
  overflow: hidden;
}
.cmp-filter-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid #e8e4d8;
}
.cmp-filter-popover-title {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5a6a5a;
  font-weight: 600;
}
.cmp-filter-reset-link {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  color: #C4A35A;
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cmp-filter-reset-link:hover { color: #8a6f35; }
.cmp-filter-popover-body {
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 480px;
  overflow-y: auto;
}
/* Inside popover, each filter label spans full width */
.cmp-filter-popover-body .cmp-fc {
  min-width: 0;
  width: 100%;
}
.cmp-filter-popover-body .cmp-fc-select {
  width: 100%;
}

/* ── List row layout ── */
.cmp-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #e8e4d8;
  border-radius: 8px;
  overflow: hidden;
}

/* Each row */
.cmp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #ffffff;
  border-bottom: 1px solid #f0ece4;
  cursor: pointer;
  transition: background 0.1s;
  min-height: 56px;
}
.cmp-row:last-child { border-bottom: none; }
.cmp-row:hover { background: #faf9f5; }
.cmp-row--selected { background: #fdf8ee; }
.cmp-row--editing {
  background: #faf9f5;
  border-left: 3px solid #5b7fff;
  padding-left: 9px; /* compensate for border */
}

/* Thumbnail — fixed 80×56 */
.cmp-row-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 56px;
  border-radius: 4px;
  overflow: hidden;
  background: #f4f1ea;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.cmp-row-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cmp-row-thumb--empty {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a8a7a;
}

/* Name + meta — takes remaining width */
.cmp-row-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cmp-row-name {
  font-size: 13px;
  font-weight: 600;
  color: #1a3a3a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmp-row-meta {
  font-size: 11px;
  color: #5a6a5a;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Actions — right side, never wraps */
.cmp-row-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Expand panel — full-width row below the main row */
.cmp-row-panel {
  padding: 10px 14px 12px 104px; /* align with name column (80px thumb + 12px gap + 12px pad) */
  background: #faf9f5;
  border-bottom: 1px solid #f0ece4;
  border-left: 3px solid #5b7fff;
}
.cmp-row-panel:last-child { border-bottom: none; }

/* ============================================================
   § EXPAND BUTTON — self-contained (v1.0.19)
   ============================================================
   Own class, no dependency on ix-lightbox injected styles or SVG
   currentColor cascade. Plain text "+" — cannot be stroke-hidden
   or clipped. Blue circle, white +, centered. */

.cmp-expand-host { position: relative; }

.cmp-expand-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #4060dd !important;
  color: #ffffff !important;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  padding: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* ============================================================
   § DETAILS MODAL + ROW CURSOR + CLOSE BTN (v1.0.17 — preserved)
   ============================================================ */

/* Rows are not clickable — remove pointer cursor */
.cmp-row { cursor: default; }
.cmp-row:hover { background: #faf9f5; } /* keep subtle hover for readability */

/* Modal host — full-viewport overlay */
.cmp-detail-host {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1100;
}
.cmp-detail-host.cmp-detail-host--open { pointer-events: auto; }
.cmp-detail-host:not(.cmp-detail-host--open) { display: none; }

/* Backdrop */
.cmp-detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.45);
  cursor: pointer;
  z-index: 1099;
}

/* Centered modal */
.cmp-detail-modal {
  position: relative;
  z-index: 1100;
  width: 75vw;
  max-width: 900px;
  max-height: 85vh;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cmp-modal-in 0.15s ease-out;
}
@keyframes cmp-modal-in {
  from { transform: scale(0.96) translateY(8px); opacity: 0.6; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* Modal header */
.cmp-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e8e4d8;
  flex-shrink: 0;
}
.cmp-detail-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1a3a3a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

/* Close button — readable, never ghost-on-cream */
.cmp-detail-close-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f1ea;
  border: 1px solid #c4bfb0;
  border-radius: 50%;
  font-size: 16px;
  color: #1a3a3a;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  margin-left: 10px;
  transition: background 0.12s;
}
.cmp-detail-close-btn:hover { background: #ece8df; border-color: #8a8a7a; }

/* Modal body — scrollable */
.cmp-detail-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px;
}

/* ============================================================
   § ATTACH PANEL + CIRCLE FIX (v1.0.16 — preserved)
   ============================================================ */

/* Hide Webflow's native checkbox/circle that appears on CMS
   collection list items. Our list rows have no selection UI. */
.media-wrapper .w-checkbox,
.media-wrapper .w-checkbox-input,
[data-item] .w-checkbox,
[data-item] .w-checkbox-input { display: none !important; }

/* Attach panel — full-width block below the triggering row.
   Replaces cmp-inline-edit--attach. Clean flat surface matching
   the approved mockup: label → type pills → picker → actions. */
.cmp-attach-panel {
  padding: 12px 14px 14px;
  background: #faf9f5;
  border-top: 1px dashed #e8e4d8;
}

.cmp-attach-panel-label {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #1a3a3a;
  font-weight: 600;
  margin-bottom: 10px;
}

/* ============================================================
   § BUTTON READABILITY + DRAWER (v1.0.15 — preserved)
   ============================================================ */

/* Selection checkbox circle — corporate blue #5b7fff
   Was white/transparent, unreadable against cream cards.
   Rule: the selection circle must always use the corporate blue
   so the selected state is unmistakable at a glance. */

/* ============================================================
   § ATTACH INLINE PANEL (v1.0.13 — preserved)
   ============================================================ */

/* Attach panel modifier — slightly more vertical room than the
   status edit panel because it has two rows (type + picker). */
.cmp-inline-edit--attach {
  padding-top: 12px;
}

/* "Attach to…" section label */
.cmp-attach-inline-label {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #1a3a3a;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Type selection row — four pills side by side, wrap if needed */
.cmp-attach-type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

/* Individual type button — secondary pill at rest */
.cmp-attach-type-btn {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  background: #ffffff;
  color: #1a3a3a;
  border: 1px solid #d4cfbf;
  border-radius: 14px;
  cursor: pointer;
  line-height: 1.2;
  transition: border-color 0.12s, background 0.12s;
}
.cmp-attach-type-btn:hover {
  border-color: #8a8a7a;
  background: #f4f1ea;
}

/* Active type — gold border + cream background.
   Same visual language as .cmp-picker--active (v1.0.3). */
.cmp-attach-type-btn--active {
  border: 2px solid #C4A35A;
  padding: 4px 9px; /* compensate for 2px border */
  background: #FAF9F5;
  color: #1a3a3a;
  font-weight: 600;
}
.cmp-attach-type-btn--active:hover {
  border-color: #C4A35A;
  background: #FAF9F5;
}

/* Asset picker wrapper — gains .has-pending when a selection is held */
.cmp-attach-picker-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.cmp-attach-picker-wrap.has-pending .cmp-attach-picker-select {
  border: 2px solid #C4A35A !important;
  padding: 5px 7px; /* compensate for 2px border */
  box-shadow: 0 0 0 1px rgba(196, 163, 90, 0.20);
}

/* Picker label — mono, small */
.cmp-attach-picker-label {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8a7a;
}

/* Picker select — full width, inherits .cmp-fc-select sizing */
.cmp-attach-picker-select {
  width: 100%;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  padding: 6px 8px;
  background: #ffffff;
  color: #1a3a3a;
  border: 1px solid #d4cfbf;
  border-radius: 4px;
  min-height: 30px;
  cursor: pointer;
}
.cmp-attach-picker-select:focus {
  outline: none;
  border-color: #5b7fff;
  box-shadow: 0 0 0 2px rgba(91,127,255,0.12);
}

/* ── Drawer: Customer edit section (moved from card face in v1.0.8) ── */
.cmp-detail-customer-edit {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--ix-border, #e4e0d4);
}

/* Section label inside drawer */
.cmp-detail-section-label {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8a8a7a;
  margin-bottom: 8px;
}

/* Field label inside drawer customer edit */
.cmp-detail-field-label {
  display: block;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8a7a;
  margin-bottom: 4px;
}

/* ============================================================
   PRESERVED FROM v1.0.12 — NO CHANGES BELOW THIS LINE
   ============================================================ */

/* ─── Root container ─── */
.cmp-root {
  padding: 16px 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #1a3a3a;
  position: relative;
}

/* ─── Header ─── */
.cmp-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 2px solid #e8e4d8;
  margin-bottom: 16px;
  gap: 16px;
}
.cmp-header-left { flex: 1; min-width: 0; }
.cmp-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: #1a3a3a;
}
.cmp-subtitle {
  font-size: 12px;
  color: #8a8a7a;
  line-height: 1.4;
}
.cmp-header-right { flex-shrink: 0; }
.cmp-count {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #5a6a5a;
  padding: 4px 10px;
  background: #f4f1ea;
  border-radius: 4px;
  letter-spacing: 0.03em;
}

/* ─── Search row (v1.0.2) ─── */
.cmp-searchrow { margin-bottom: 12px; }
.cmp-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #d4cfbf;
  border-radius: 6px;
  min-height: 38px;
  transition: border-color 0.15s;
}
.cmp-search:focus-within { border-color: #5b7fff; }
.cmp-search--active {
  border: 2px solid #C4A35A;
  padding: 7px 11px;
}
.cmp-search-icon { color: #8a8a7a; flex-shrink: 0; }
.cmp-search-input {
  flex: 1; min-width: 0;
  border: none; background: transparent;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px; color: #1a3a3a;
  padding: 0; outline: none;
}
.cmp-search-input::placeholder { color: #a8a59c; }
.cmp-search-clear {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px; padding: 3px 7px;
  background: transparent; border: 1px solid transparent;
  border-radius: 4px; color: #5a6a5a;
  cursor: pointer; line-height: 1; flex-shrink: 0;
}
.cmp-search-clear:hover { background: #f4f1ea; border-color: #d4cfbf; color: #1a3a3a; }

/* ─── Filter bar ─── */
.cmp-filterbar {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 10px; padding: 12px; background: #f4f1ea;
  border-radius: 6px; margin-bottom: 16px;
}
.cmp-fc { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.cmp-fc-label {
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #8a8a7a; padding-left: 2px;
}
.cmp-fc-select {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px; padding: 7px 10px;
  background: #ffffff; color: #1a3a3a;
  border: 1px solid #d4cfbf; border-radius: 4px;
  cursor: pointer; min-height: 34px;
  transition: border-color 0.15s;
}
.cmp-fc-select:hover { border-color: #1a3a3a; }
.cmp-fc-select:focus {
  outline: none; border-color: #5b7fff;
  box-shadow: 0 0 0 2px rgba(91,127,255,0.15);
}
.cmp-fc.cmp-fc--active .cmp-fc-select {
  border: 2px solid #C4A35A; padding: 6px 9px;
}
.cmp-clear-all {
  margin-left: auto;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px; font-weight: 500; color: #C4A35A;
  background: none; border: none; padding: 8px 10px;
  cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  align-self: center;
}
.cmp-clear-all:hover { color: #8a6f35; }

/* ─── Grid ─── */
.cmp-grid-wrap { position: relative; }
.cmp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
@media (max-width: 899px) { .cmp-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
@media (max-width: 599px) { .cmp-grid { grid-template-columns: 1fr; } }

/* ─── Card ─── */
.cmp-card {
  background: #ffffff; border: 1px solid #e8e4d8;
  border-radius: 8px; padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cmp-card:hover { border-color: #c4bfb0; box-shadow: 0 2px 8px rgba(26,58,58,0.06); }
.cmp-card--archived { opacity: 0.65; }
.cmp-card--busy { opacity: 0.5; pointer-events: none; }

.cmp-thumb {
  aspect-ratio: 16 / 9; background: #f4f1ea;
  border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cmp-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-thumb-empty {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; color: #8a8a7a;
}

.cmp-text-preview {
  aspect-ratio: 16 / 9; background: #f4f1ea;
  border-radius: 6px; padding: 10px 12px;
  font-size: 11px; line-height: 1.5; color: #5a6a5a; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
}

.cmp-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cmp-card-name {
  font-size: 13px; font-weight: 600; color: #1a3a3a;
  line-height: 1.35; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cmp-card-meta {
  font-size: 11px; color: #5a6a5a;
  display: flex; align-items: center; gap: 6px;
}
.cmp-card-sub { font-size: 11px; color: #8a8a7a; }

.cmp-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.cmp-dot--available { background: #10b981; }
.cmp-dot--attached  { background: #5b7fff; }
.cmp-dot--archived  { background: #9ca3af; }
.cmp-dot--unknown   { background: #d4cfbf; }

/* Card actions row */
.cmp-card-actions {
  display: flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: 4px; position: relative;
}
.cmp-btn {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px; font-weight: 500; padding: 6px 12px;
  background: #f4f1ea; color: #1a3a3a;
  border: 1px solid #c4bfb0; border-radius: 4px;
  cursor: pointer; transition: background 0.1s, border-color 0.1s; line-height: 1.2;
}
.cmp-btn:hover { background: #ece8df; border-color: #8a8a7a; }
.cmp-btn--icon { padding: 6px 9px; margin-left: auto; font-size: 14px; line-height: 1; }

.cmp-overflow {
  position: absolute; right: 0; bottom: calc(100% + 4px);
  background: #ffffff; border: 1px solid #d4cfbf;
  border-radius: 6px; box-shadow: 0 4px 12px rgba(26,58,58,0.12);
  min-width: 180px; z-index: 10; padding: 4px;
}
.cmp-overflow[hidden] { display: none; }
.cmp-overflow-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; background: none; border: none;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px; color: #1a3a3a; cursor: pointer; border-radius: 4px;
}
.cmp-overflow-item:hover { background: #f4f1ea; }
.cmp-overflow-danger { color: #c0392b; }
.cmp-overflow-danger:hover { background: #fdebea; color: #8a2a20; }

/* ─── Empty state ─── */
.cmp-empty { padding: 48px 20px; text-align: center; }
.cmp-empty-inner { max-width: 400px; margin: 0 auto; }
.cmp-empty-title { font-size: 15px; font-weight: 600; color: #1a3a3a; margin-bottom: 6px; }
.cmp-empty-sub { font-size: 13px; color: #8a8a7a; line-height: 1.5; }
.cmp-empty-clear {
  display: inline-block; margin-top: 12px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px; font-weight: 500; color: #C4A35A;
  background: none; border: none; padding: 6px 12px;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.cmp-empty-clear:hover { color: #8a6f35; }

/* ─── Detail drawer (legacy classes — kept for backward compat) ─── */
.cmp-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(26,58,58,0.45); z-index: 10000;
  animation: cmpFadeIn 0.15s ease;
}
.cmp-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 20vw; min-width: 260px; background: #ffffff;
  border-left: 1px solid #d4cfbf;
  box-shadow: -4px 0 16px rgba(26,58,58,0.18);
  z-index: 10001; transform: translateX(100%);
  transition: transform 0.22s ease; overflow-y: auto;
  font-family: 'DM Sans', system-ui, sans-serif; color: #1a3a3a;
}
.cmp-drawer--open { transform: translateX(0); }

/* ─── v1.0.3: State B (editing) card ─── */
.cmp-card--editing { border-color: #5b7fff; box-shadow: 0 2px 12px rgba(91,127,255,0.12); }

.cmp-attach-edit {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: auto; padding: 10px 2px 2px;
  border-top: 1px dashed #e8e4d8;
}
.cmp-attach-label {
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #1a3a3a; font-weight: 600;
}
.cmp-attach-row {
  display: grid; grid-template-columns: minmax(0,90px) 1fr;
  gap: 8px; align-items: end;
}
.cmp-attach-status, .cmp-attach-picker { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cmp-attach-status .cmp-fc-select, .cmp-attach-picker .cmp-fc-select {
  width: 100%; min-height: 30px; font-size: 12px; padding: 6px 8px;
}
.cmp-picker--active .cmp-fc-select { border: 2px solid #C4A35A; padding: 5px 7px; }
.cmp-attach-actions { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.cmp-attach-actions .cmp-btn { font-size: 11px; padding: 6px 14px; }
.cmp-attach-cancel {
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px;
  font-weight: 500; color: #C4A35A; background: none; border: none;
  padding: 6px 4px; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  margin-left: auto; line-height: 1.2;
}
.cmp-attach-cancel:hover { color: #8a6f35; }
.cmp-attach-actions .cmp-btn--primary:disabled {
  background: #e8e4d8; color: #8a8a7a; border-color: #d4cfbf; cursor: not-allowed;
}

/* ─── v1.0.4: Attach failure UX ─── */
.cmp-card--attach-failed { border-color: #c0392b; box-shadow: 0 2px 12px rgba(192,57,43,0.12); }
.cmp-attach-error {
  background: #fdebea; border: 1px solid #e7b4af;
  border-left: 4px solid #c0392b; border-radius: 4px;
  color: #8a2a20; font-size: 11.5px; line-height: 1.45;
  padding: 8px 10px; margin-top: 2px;
}

/* ─── v1.0.5: Assembler field-level Attach ─── */
.asm-img-slot--picking {
  background: #faf9f5; border: 1px dashed #d4cfbf;
  border-radius: 6px; padding: 12px; margin: 4px -4px;
}
.asm-img-slot-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.asm-link-btn {
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px;
  font-weight: 500; color: #C4A35A; background: none; border: none;
  padding: 6px 4px; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; line-height: 1.2;
}
.asm-link-btn:hover { color: #8a6f35; }

.asm-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 8px; margin-top: 4px; }
.asm-gallery-item { background: #ffffff; border: 1px solid #e8e4d8; border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.asm-gallery-thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: 4px; background: #f4f1ea; }
.asm-gallery-thumb--empty { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.06em; }
.asm-gallery-name { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.04em; color: #8a8a7a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.asm-pick {
  margin-top: 12px; border: 1px solid #e8e4d8; border-radius: 6px;
  background: #faf9f5; overflow: hidden;
}
.asm-pick-head { padding: 10px 12px; border-bottom: 1px solid #e8e4d8; display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.asm-pick-title { font-size: 12px; font-weight: 600; color: #1a3a3a; flex: 1 1 auto; line-height: 1.3; }
.asm-pick-locks { display: flex; flex-wrap: wrap; gap: 4px; }
.asm-pick-lock { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: #5a6a5a; background: #eee9dc; border-radius: 10px; padding: 2px 7px; }
.asm-pick-filters { padding: 8px 12px; border-bottom: 1px solid #e8e4d8; display: flex; gap: 10px; flex-wrap: wrap; }
.asm-pick-filter { display: flex; flex-direction: column; gap: 3px; min-width: 120px; flex: 1 1 auto; }
.asm-pick-filter-lbl { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8a7a; }
.asm-pick-list { padding: 8px; max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.asm-pick-empty { padding: 24px 12px; text-align: center; font-size: 12px; color: #8a8a7a; }
.asm-pick-card {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; background: #ffffff;
  border: 1px solid #e8e4d8; border-radius: 6px;
  cursor: pointer; transition: border-color 0.12s;
}
.asm-pick-card:hover { border-color: #c4bfb0; }
.asm-pick-card--selected { border: 2px solid #C4A35A; background: #faf9f5; padding: 5px 7px; }
.asm-pick-error { background: #fdebea; border: 1px solid #e7b4af; border-left: 4px solid #c0392b; border-radius: 4px; color: #8a2a20; font-size: 11px; line-height: 1.4; padding: 6px 10px; margin: 4px 8px; }
.asm-pick-footer { padding: 8px 12px; border-top: 1px solid #e8e4d8; display: flex; align-items: center; gap: 10px; }

/* ─── Inline edit (v1.0.5 + v1.0.7 migrations) ─── */
.cmp-inline-edit {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: auto; padding: 8px 2px 2px;
  border-top: 1px dashed #e8e4d8;
}
.cmp-inline-field {
  display: flex; flex-direction: column; gap: 3px;
}
.cmp-inline-field.has-pending .cmp-inline-field-select {
  border: 2px solid #C4A35A !important;
  box-shadow: 0 0 0 1px rgba(196,163,90,0.20);
}
.cmp-inline-field-lbl {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8a7a;
}
.cmp-inline-field-select {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px; padding: 6px 8px; min-height: 30px;
  background: #ffffff; color: #1a3a3a;
  border: 1px solid #d4cfbf; border-radius: 4px; cursor: pointer;
}
.cmp-inline-actions { display: flex; align-items: center; gap: 8px; }

/* has-pending: universal gold-border dirty state for any select/field */
.has-pending .cmp-fc-select,
.has-pending .cmp-inline-field-select {
  border: 2px solid #C4A35A !important;
  box-shadow: 0 0 0 1px rgba(196,163,90,0.20);
}

/* ─── Bulk bar (v1.0.12 rewrite) ─── */
.cmp-bulkbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 10px 14px; margin-bottom: 16px;
  background: #FAF9F5; border-left: 3px solid #C4A35A;
  border-radius: 4px; border: 1px solid var(--ix-border, #e4e0d4);
  border-left-width: 3px;
}
.cmp-bulkbar[hidden] { display: none; }
.cmp-bulkbar-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; width: 100%; }
.cmp-bulkbar-count {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px;
  color: #5a6478; padding: 4px 8px; background: #ebe5d4;
  border-radius: 10px; white-space: nowrap;
}

/* No .cmp-bulkbar .ix-btn--* overrides. ix-buttons-v1.0.4 renders correctly. */
.cmp-bulk-actions { display: flex; gap: 8px; }
.cmp-bulk-edit {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  background: #FFFFFF; padding: 8px 12px; border-radius: 4px;
  border: 1px solid var(--ix-border, #e4e0d4);
}
.cmp-bulk-field { display: flex; flex-direction: column; gap: 3px; min-width: 200px; }
.cmp-bulk-field-lbl {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em; color: #5A6478;
}
.cmp-bulk-field-select {
  height: 32px; padding: 0 8px; background: #fff;
  border: 1px solid var(--ix-border-input, #ddd9c8); border-radius: 4px;
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px;
  color: var(--ix-text-dark, #1e2a3a);
}
.cmp-bulk-field.has-pending .cmp-bulk-field-select {
  border-color: var(--ix-gold) !important;
  box-shadow: 0 0 0 1px var(--ix-gold) inset;
}
.cmp-bulk-confirm-text { font-family: 'DM Sans', system-ui, sans-serif; font-size: 13px; color: var(--ix-text-dark, #1e2a3a); }

/* ─── Detail Drawer (v1.0.1 renamed classes) ─── */
body.cmp-detail-locked { overflow: hidden; }
.cmp-detail-host {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 20vw;
  min-width: 260px; /* floor so it stays usable on smaller displays */
  pointer-events: none; z-index: 1100;
}
.cmp-detail-host.cmp-detail-host--open { pointer-events: auto; }
.cmp-detail-host:not(.cmp-detail-host--open) { display: none; }
.cmp-detail-host .cmp-detail-backdrop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(20,20,20,0.32); cursor: pointer; z-index: 1099;
}
.cmp-detail-host .cmp-detail-drawer {
  position: relative; height: 100%; width: 100%;
  background: #fff; box-shadow: -4px 0 18px rgba(0,0,0,0.18);
  display: flex; flex-direction: column; z-index: 1100;
  animation: cmp-detail-slide-in 0.18s ease-out;
}
@keyframes cmp-detail-slide-in {
  from { transform: translateX(20px); opacity: 0.6; }
  to   { transform: translateX(0); opacity: 1; }
}
.cmp-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--ix-border, #e4e0d4);
}
.cmp-detail-title {
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 15px;
  font-weight: 600; color: var(--ix-text-dark, #1e2a3a);
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.cmp-detail-body { flex: 1 1 auto; overflow-y: auto; padding: 18px; }
.cmp-detail-thumb {
  display: block; width: 100%; max-height: 240px;
  object-fit: contain; background: var(--ix-cream);
  border: 1px solid var(--ix-border); border-radius: 6px; margin: 0 0 16px;
}
.cmp-detail-dl {
  display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; margin: 0 0 18px;
}
.cmp-detail-dl dt.cmp-detail-key {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ix-text-light, #8a8e9a); padding-top: 2px;
}
.cmp-detail-dl dd.cmp-detail-val {
  margin: 0; color: var(--ix-text-dark, #1e2a3a);
  font-size: 12px; word-break: break-word;
}
.cmp-detail-deferred {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; background: var(--ix-surface, #fdfcf9);
  border: 1px solid var(--ix-border); border-left: 3px solid var(--ix-gold);
  border-radius: 4px; font-size: 11px; color: var(--ix-text-mid, #5a6478); line-height: 1.45;
}
.cmp-detail-deferred-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }

/* ─── Toast ─── */
.cmp-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 1200; padding: 10px 18px;
  background: var(--ix-teal); color: var(--ix-cream);
  border-radius: 6px; font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.cmp-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── Empty state action ─── */
.cmp-empty-action { margin-top: 14px; }

@keyframes cmpFadeIn { from { opacity: 0; } to { opacity: 1; } }
