/* ─────────────────────────────────────────────────────────────
Create / Edit modal — PolyDrobe app surface
Used for Variants, Bundles and Collections.
Prefix: .cm- (create-modal)
Ported from the Claude Design prototype (modal-styles.css). Raw hex
mapped to the project's purple token (#a413ec). Dark-mode variants
added under `.dark .cm-*` (app toggles dark via `class` on ).
Dark panel family: --bg-app-dark #1c1022 / --surface-card-app #231c27
/ --sidebar-nav #160d1b.
───────────────────────────────────────────────────────────── */
/* ── Modal panel ────────────────────────────────────────────── */
.cm {
background: #fff;
border-radius: 16px;
box-shadow:
0 24px 80px rgba(26, 15, 33, 0.28),
0 2px 4px rgba(26, 15, 33, 0.06),
inset 0 0 0 1px rgba(255, 255, 255, 0.6);
display: flex;
flex-direction: column;
max-height: calc(100vh - 32px);
width: 100%;
overflow: hidden;
position: relative;
font-family: var(--font-ui, "Space Grotesk"), system-ui, sans-serif;
color: #1a0f21;
}
.dark .cm {
background: #231c27;
box-shadow:
0 24px 80px rgba(0, 0, 0, 0.55),
0 2px 4px rgba(0, 0, 0, 0.4),
inset 0 0 0 1px rgba(255, 255, 255, 0.06);
color: #f0ecf4;
}
/* Final widths (design): variant 860 / bundle 980 / collection 960. */
.cm--variant { max-width: 860px; }
.cm--bundle { max-width: 980px; }
.cm--collection { max-width: 960px; }
/* Standalone (full-page) render — no overlay; let it flow. */
.cm--standalone {
box-shadow: none;
border: 1px solid #ececee;
max-height: none;
}
.dark .cm--standalone { border-color: rgba(255, 255, 255, 0.08); }
/* ── Header ─────────────────────────────────────────────────── */
.cm-head {
padding: 18px 24px 14px;
border-bottom: 1px solid #f3f0f5;
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
gap: 16px;
flex: 0 0 auto;
}
.dark .cm-head { border-bottom-color: rgba(255, 255, 255, 0.07); }
.cm-head-l {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.cm-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #7a0fb2;
}
.cm-eyebrow.is-variant { color: #1a0f21; }
.cm-eyebrow.is-bundle { color: #7a0fb2; }
.cm-eyebrow.is-collection { color: #1d4ed8; }
.dark .cm-eyebrow.is-variant { color: #f0ecf4; }
.dark .cm-eyebrow.is-bundle { color: #c44bf0; }
.dark .cm-eyebrow.is-collection { color: #60a5fa; }
.cm-eyebrow .mi { font-size: 13px; }
.cm-eyebrow .dot {
width: 4px;
height: 4px;
border-radius: 999px;
background: currentColor;
margin: 0 4px;
}
.cm-title {
font-family: var(--font-display, "Space Grotesk");
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
color: #1a0f21;
margin: 0;
line-height: 1.2;
}
.dark .cm-title { color: #f0ecf4; }
.cm-sub {
font-size: 12.5px;
color: #6b6476;
line-height: 1.4;
max-width: 56ch;
}
.dark .cm-sub { color: #b8adc4; }
.cm-head-r {
display: flex;
align-items: center;
gap: 6px;
}
.cm-iconbtn {
width: 36px;
height: 36px;
display: grid;
place-items: center;
background: transparent;
border: none;
cursor: pointer;
color: #6b6476;
border-radius: 8px;
}
.cm-iconbtn:hover { background: #f4f1f7; color: #1a0f21; }
.dark .cm-iconbtn { color: #b8adc4; }
.dark .cm-iconbtn:hover { background: rgba(255, 255, 255, 0.06); color: #f0ecf4; }
.cm-iconbtn .mi { font-size: 20px; }
/* ── Body ───────────────────────────────────────────────────── */
.cm-body {
display: grid;
min-height: 0;
overflow: hidden;
flex: 1 1 auto;
}
.cm--variant .cm-body { grid-template-columns: 312px 1fr; }
.cm--bundle .cm-body { grid-template-columns: 380px 1fr; }
.cm--collection .cm-body { grid-template-columns: 360px 1fr; }
/* Collapse to single column on small screens. */
@media (max-width: 720px) {
.cm--variant .cm-body,
.cm--bundle .cm-body,
.cm--collection .cm-body {
grid-template-columns: 1fr;
}
.cm-pane + .cm-pane { border-left: none; border-top: 1px solid #f3f0f5; }
.dark .cm-pane + .cm-pane { border-top-color: rgba(255, 255, 255, 0.07); }
.cm-pane--picker { max-height: 360px; }
}
.cm-pane {
padding: 22px 24px;
overflow: auto;
min-width: 0;
scrollbar-width: thin;
scrollbar-color: #d9d4df transparent;
}
.cm-pane + .cm-pane { border-left: 1px solid #f3f0f5; }
.dark .cm-pane + .cm-pane { border-left-color: rgba(255, 255, 255, 0.07); }
/* Standalone single-column body. */
.cm--standalone .cm-body { grid-template-columns: 1fr; }
.cm--standalone .cm-pane { overflow: visible; }
.cm--standalone .cm-pane + .cm-pane { border-left: none; border-top: 1px solid #f3f0f5; }
.dark .cm--standalone .cm-pane + .cm-pane { border-top-color: rgba(255, 255, 255, 0.07); }
/* Pane top label */
.cm-pane-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #9488a0;
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 6px;
}
.cm-pane-label .req { color: #a413ec; font-size: 13px; line-height: 0; margin-top: 6px; }
.cm-pane-label .count {
margin-left: auto;
font-family: var(--font-mono, "JetBrains Mono");
font-size: 11px;
letter-spacing: 0;
color: #1a0f21;
background: #f4f1f7;
padding: 1px 7px;
border-radius: 999px;
text-transform: none;
font-weight: 600;
}
.dark .cm-pane-label .count { color: #f0ecf4; background: rgba(255, 255, 255, 0.08); }
/* ── Cover / preview (left, variant) ────────────────────────── */
.cm-cover {
position: relative;
border-radius: 12px;
overflow: hidden;
background:
radial-gradient(at 30% 20%, #f4eeff 0%, transparent 60%),
radial-gradient(at 70% 80%, #fff5f5 0%, transparent 60%),
#ffffff;
aspect-ratio: 1 / 1;
border: 1px solid #ececee;
display: grid;
place-items: center;
}
.dark .cm-cover {
background:
radial-gradient(at 30% 20%, rgba(164, 19, 236, 0.12) 0%, transparent 60%),
#1c1022;
border-color: rgba(255, 255, 255, 0.08);
}
.cm-cover > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cm-cover-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 28px;
text-align: center;
}
.cm-cover-empty .mi { font-size: 40px; color: #c1b8cc; }
.cm-cover-empty .ttl { font-size: 13px; color: #1a0f21; font-weight: 600; }
.cm-cover-empty .sub { font-size: 11.5px; color: #9488a0; max-width: 22ch; line-height: 1.4; }
.dark .cm-cover-empty .ttl { color: #f0ecf4; }
/* Floating cover badges */
.cm-cover-badges {
position: absolute;
top: 10px;
left: 10px;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.cm-cover-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(0, 0, 0, 0.04);
padding: 4px 8px;
font-size: 10.5px;
font-weight: 600;
border-radius: 999px;
color: #1a0f21;
backdrop-filter: blur(8px);
}
.cm-cover-badge .mi { font-size: 12px; color: #6b6476; }
.cm-cover-actions {
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
gap: 6px;
}
/* Cover meta strip below */
.cm-cover-meta {
margin-top: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.cm-meta-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
}
.cm-meta-row .k { color: #9488a0; }
.cm-meta-row .v {
font-family: var(--font-mono, "JetBrains Mono");
font-weight: 500;
color: #1a0f21;
}
.dark .cm-meta-row .v { color: #f0ecf4; }
/* Remove-thumbnail control. */
.cm-cover-remove {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 10px;
background: transparent;
border: none;
cursor: pointer;
color: #c1272d;
font-size: 11.5px;
font-weight: 600;
font-family: inherit;
padding: 4px 6px;
border-radius: 6px;
}
.cm-cover-remove:hover { background: #fff5f5; }
.dark .cm-cover-remove { color: #f87171; }
.dark .cm-cover-remove:hover { background: rgba(248, 113, 113, 0.12); }
.cm-cover-remove .mi { font-size: 15px; }
/* ── Item picker / list (left pane of bundles/collections) ──── */
.cm-itempick-search {
display: flex;
align-items: center;
gap: 8px;
height: 34px;
padding: 0 10px;
border: 1px solid #e4e1e8;
border-radius: 8px;
background: #fff;
}
.dark .cm-itempick-search { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); }
.cm-itempick-search.is-focused {
border-color: #c79af2;
box-shadow: 0 0 0 3px rgba(164, 19, 236, 0.12);
}
.cm-itempick-search .mi { font-size: 16px; color: #9488a0; }
.cm-itempick-search input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
font-size: 12.5px;
font-family: var(--font-ui, "Space Grotesk");
color: #1a0f21;
}
.dark .cm-itempick-search input { color: #f0ecf4; }
.cm-itempick-search input::placeholder { color: #9488a0; }
.cm-itempick-list {
overflow: auto;
scrollbar-width: thin;
scrollbar-color: #d9d4df transparent;
}
.cm-pick-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 10px;
align-items: center;
padding: 8px;
border-radius: 8px;
cursor: pointer;
transition: background 120ms;
}
/* Asset picker rows have no trailing add affordance (click-to-select). */
.cm-pick-row--noadd { grid-template-columns: 36px 1fr; }
.cm-pick-row:hover { background: #faf8fc; }
.dark .cm-pick-row:hover { background: rgba(255, 255, 255, 0.04); }
.cm-pick-row.is-selected { background: rgba(164, 19, 236, 0.06); }
.cm-pick-row.is-disabled { opacity: 0.4; cursor: not-allowed; }
.cm-pick-row .thumb {
width: 36px;
height: 36px;
border-radius: 6px;
background: #fbf9fd;
overflow: hidden;
display: grid;
place-items: center;
}
.dark .cm-pick-row .thumb { background: rgba(255, 255, 255, 0.05); }
.cm-pick-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cm-pick-row .thumb .mi { font-size: 16px; color: #c1b8cc; }
.cm-pick-row .nm {
font-size: 12.5px;
font-weight: 600;
color: #1a0f21;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dark .cm-pick-row .nm { color: #f0ecf4; }
.cm-pick-row .sub {
font-size: 11px;
color: #9488a0;
display: flex;
align-items: center;
gap: 6px;
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cm-pick-row .add {
width: 26px;
height: 26px;
display: grid;
place-items: center;
border-radius: 6px;
border: 1px solid #e4e1e8;
background: #fff;
color: #6b6476;
cursor: pointer;
}
.dark .cm-pick-row .add { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: #b8adc4; }
.cm-pick-row .add .mi { font-size: 16px; }
.cm-pick-row.is-selected .add { background: #a413ec; border-color: #a413ec; color: #fff; }
/* "Selected items" strip inside the bundle/collection picker pane */
.cm-selected-strip {
border: 1px solid #f0ecf3;
background: #fbf9fd;
border-radius: 10px;
padding: 10px;
}
.dark .cm-selected-strip { border-color: rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.02); }
.cm-selected-strip .head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.cm-selected-strip .lbl {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #6b6476;
}
.dark .cm-selected-strip .lbl { color: #b8adc4; }
.cm-selected-strip .clear {
font-size: 11px;
color: #6b6476;
background: transparent;
border: none;
cursor: pointer;
font-weight: 600;
font-family: inherit;
}
.cm-selected-strip .clear:hover { color: #a413ec; }
.dark .cm-selected-strip .clear { color: #b8adc4; }
.cm-selected-list { display: flex; flex-direction: column; gap: 4px; }
.cm-sel-row {
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid #ececee;
border-radius: 8px;
padding: 5px 8px 5px 5px;
}
.cm-sel-row .grip,
.cm-sel-row .thumb,
.cm-sel-row .qty,
.cm-sel-row .rm { flex: 0 0 auto; }
.cm-sel-row .meta { flex: 1 1 auto; }
/* error rows wrap full-width */
.cm-sel-row > .cm-error,
.cm-sel-row > [role="alert"] { flex-basis: 100%; }
.dark .cm-sel-row { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
.cm-sel-row .grip { display: grid; place-items: center; color: #c1b8cc; cursor: grab; }
.cm-sel-row .grip .mi { font-size: 16px; }
.cm-sel-row .thumb {
width: 28px;
height: 28px;
border-radius: 5px;
overflow: hidden;
background: #fbf9fd;
display: grid;
place-items: center;
}
.dark .cm-sel-row .thumb { background: rgba(255, 255, 255, 0.05); }
.cm-sel-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cm-sel-row .thumb .mi { font-size: 14px; color: #c1b8cc; }
.cm-sel-row .meta { min-width: 0; }
.cm-sel-row .nm {
font-size: 12px;
font-weight: 600;
color: #1a0f21;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dark .cm-sel-row .nm { color: #f0ecf4; }
.cm-sel-row .sub { font-size: 11px; color: #9488a0; white-space: nowrap; }
/* qty stepper (bundle only) */
.cm-sel-row .qty {
display: inline-flex;
align-items: center;
background: #f4f1f7;
border-radius: 6px;
padding: 0;
font-family: var(--font-mono, "JetBrains Mono");
font-size: 11px;
font-weight: 600;
color: #1a0f21;
height: 30px;
gap: 4px;
width: 56px;
}
/* Compact the Django-rendered number input that lands inside .qty so it
reads as the design's qty stepper rather than a full-width field. */
.cm-sel-row .qty > input {
width: 100%;
min-height: 0;
height: 30px;
padding: 0 8px;
border: none;
background: transparent;
border-radius: 6px;
text-align: center;
font-family: var(--font-mono, "JetBrains Mono");
font-size: 12px;
font-weight: 600;
color: #1a0f21;
box-shadow: none;
-moz-appearance: textfield;
}
.dark .cm-sel-row .qty > input { color: #f0ecf4; }
.cm-sel-row .qty > input:focus { outline: none; box-shadow: none; border: none; }
.dark .cm-sel-row .qty { background: rgba(255, 255, 255, 0.08); color: #f0ecf4; }
.cm-sel-row .qty button {
width: 16px;
height: 16px;
display: grid;
place-items: center;
background: transparent;
border: none;
color: #6b6476;
cursor: pointer;
border-radius: 3px;
}
.cm-sel-row .qty button:hover { background: #fff; color: #1a0f21; }
.dark .cm-sel-row .qty button { color: #b8adc4; }
.cm-sel-row .qty button .mi { font-size: 14px; }
.cm-sel-row .qty input {
width: 26px;
border: none;
background: transparent;
text-align: center;
font-family: inherit;
font-size: 11px;
font-weight: 600;
color: inherit;
-moz-appearance: textfield;
outline: none;
}
.cm-sel-row .qty input::-webkit-outer-spin-button,
.cm-sel-row .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cm-sel-row .rm {
width: 22px;
height: 22px;
display: grid;
place-items: center;
background: transparent;
border: none;
cursor: pointer;
color: #c1b8cc;
border-radius: 5px;
}
.cm-sel-row .rm:hover { color: #c1272d; background: #fff5f5; }
.dark .cm-sel-row .rm:hover { background: rgba(248, 113, 113, 0.12); color: #f87171; }
.cm-sel-row .rm .mi { font-size: 14px; }
.cm-sel-row.sortable-ghost { border-color: #a413ec; box-shadow: 0 4px 12px rgba(164, 19, 236, 0.18); opacity: 0.6; }
.cm-sel-row.sortable-chosen { border-color: #a413ec; }
/* collection status dot pill */
.cm-sel-status {
font-size: 10.5px;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
white-space: nowrap;
}
/* ── Form (right pane) ──────────────────────────────────────── */
.cm-form { display: grid; gap: 16px; }
.cm-fieldrow { display: grid; gap: 14px; }
.cm-fieldrow--2 { grid-template-columns: 1fr 1fr; }
.cm-fieldrow--name-slug { grid-template-columns: 2fr 1fr; }
@media (max-width: 520px) {
.cm-fieldrow--2,
.cm-fieldrow--name-slug { grid-template-columns: 1fr; }
}
.cm-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cm-label {
font-size: 11.5px;
font-weight: 600;
color: #1a0f21;
display: flex;
align-items: center;
gap: 6px;
}
.dark .cm-label { color: #f0ecf4; }
.cm-label .req { color: #a413ec; font-weight: 700; }
.cm-section-head .ttl .req { color: #a413ec; font-weight: 700; margin-left: 2px; }
.cm-label .opt { margin-left: auto; font-size: 10.5px; font-weight: 500; color: #9488a0; }
.cm-label .help { margin-left: auto; font-size: 10.5px; color: #9488a0; font-weight: 500; }
.cm-hint { font-size: 11px; color: #9488a0; line-height: 1.4; }
/* When a two-column field row mixes a one-line and a wrapping (two-line) hint,
the taller hint would push only its own input down, leaving the controls in
the row misaligned. Reserving a consistent two-line min-height for every hint
in the row keeps the input controls on the same baseline. */
.cm-fieldrow--align-hints .cm-hint { min-height: calc(2 * 1.4 * 11px); }
@media (max-width: 520px) {
/* Single-column on narrow screens — no cross-column alignment to preserve. */
.cm-fieldrow--align-hints .cm-hint { min-height: 0; }
}
.cm-error { font-size: 11px; color: #c1272d; line-height: 1.4; }
.dark .cm-error { color: #f87171; }
/* Inputs — applied via .cm-input / .cm-textarea classes added to the
Django-rendered widgets through their `class` attr override at render
time, OR wrapping native widgets. We also style raw widgets that land
inside .cm-form via descendant selectors so server-rendered selects
inherit the look. */
.cm-input,
.cm-form input[type="text"]:not(.cm-bare),
.cm-form input[type="number"]:not(.cm-bare),
.cm-form input[type="date"]:not(.cm-bare),
.cm-form textarea:not(.cm-bare),
.cm-select {
width: 100%;
min-height: 36px;
padding: 0 12px;
background: #fff;
border: 1px solid #e4e1e8;
border-radius: 8px;
font-size: 13px;
font-family: var(--font-ui, "Space Grotesk");
color: #1a0f21;
transition: border-color 120ms, box-shadow 120ms;
appearance: none;
}
.dark .cm-input,
.dark .cm-form input[type="text"]:not(.cm-bare),
.dark .cm-form input[type="number"]:not(.cm-bare),
.dark .cm-form input[type="date"]:not(.cm-bare),
.dark .cm-form textarea:not(.cm-bare),
.dark .cm-select {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.1);
color: #f0ecf4;
}
.cm-input::placeholder,
.cm-form input::placeholder,
.cm-form textarea::placeholder { color: #9488a0; }
.cm-input:focus,
.cm-form input:focus,
.cm-form textarea:focus,
.cm-select:focus {
outline: none;
border-color: #a413ec;
box-shadow: 0 0 0 3px rgba(164, 19, 236, 0.12);
}
.cm-form textarea:not(.cm-bare) {
min-height: 76px;
padding: 9px 12px;
resize: vertical;
line-height: 1.5;
}
.cm-select,
.cm-form select:not(.cm-bare) {
width: 100%;
min-height: 36px;
padding: 0 30px 0 12px;
background-color: #fff;
border: 1px solid #e4e1e8;
border-radius: 8px;
font-size: 13px;
font-family: var(--font-ui, "Space Grotesk");
color: #1a0f21;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
}
.dark .cm-form select:not(.cm-bare) {
background-color: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.1);
color: #f0ecf4;
}
.cm-form select:not(.cm-bare):focus {
outline: none;
border-color: #a413ec;
box-shadow: 0 0 0 3px rgba(164, 19, 236, 0.12);
}
/* slug auto-badge */
.cm-slug-wrap { position: relative; }
.cm-slug-wrap input { padding-right: 56px; font-family: var(--font-mono, "JetBrains Mono"); font-size: 12px; }
.cm-slug-auto {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #9488a0;
background: #f4f1f7;
padding: 2px 6px;
border-radius: 4px;
pointer-events: none;
}
.dark .cm-slug-auto { background: rgba(255, 255, 255, 0.08); }
/* ── Sections inside the form ───────────────────────────────── */
.cm-section {
display: grid;
gap: 14px;
padding-top: 18px;
border-top: 1px solid #f3f0f5;
}
.dark .cm-section { border-top-color: rgba(255, 255, 255, 0.07); }
.cm-section:first-child { padding-top: 0; border-top: none; }
.cm-section-head {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 -2px;
}
.cm-section-head .ttl {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #1a0f21;
display: inline-flex;
align-items: center;
gap: 6px;
}
.dark .cm-section-head .ttl { color: #f0ecf4; }
.cm-section-head .ttl .mi { font-size: 14px; color: #6b6476; }
.dark .cm-section-head .ttl .mi { color: #b8adc4; }
.cm-section-head .count {
font-family: var(--font-mono, "JetBrains Mono");
font-size: 10.5px;
background: #f4f1f7;
color: #6b6476;
padding: 1px 6px;
border-radius: 999px;
font-weight: 600;
}
.dark .cm-section-head .count { background: rgba(255, 255, 255, 0.08); color: #b8adc4; }
.cm-section-head .action {
margin-left: auto;
background: transparent;
border: none;
cursor: pointer;
color: #a413ec;
font-size: 11.5px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
border-radius: 4px;
font-family: inherit;
}
.cm-section-head .action .mi { font-size: 14px; }
.cm-section-head .action:hover { background: rgba(164, 19, 236, 0.06); }
.cm-section-help { font-size: 11px; color: #9488a0; line-height: 1.4; margin: -2px 0; }
/* ── Scalable picker — pill + popover ───────────────────────── */
.cm-pill {
display: inline-flex;
align-items: center;
min-height: 36px;
width: 100%;
padding: 0 8px 0 10px;
background: #fff;
border: 1px solid #e4e1e8;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
color: #1a0f21;
font-family: inherit;
cursor: pointer;
gap: 8px;
text-align: left;
position: relative;
transition: border-color 120ms, box-shadow 120ms;
}
.dark .cm-pill { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); color: #f0ecf4; }
.cm-pill:hover { border-color: #d9d4df; }
.cm-pill.is-open,
.cm-pill:focus-visible {
border-color: #a413ec;
box-shadow: 0 0 0 3px rgba(164, 19, 236, 0.12);
outline: none;
}
.cm-pill .dot { width: 9px; height: 9px; border-radius: 999px; background: #d0c9d6; flex: 0 0 auto; }
.cm-pill .bar { width: 14px; height: 4px; border-radius: 2px; background: #d0c9d6; flex: 0 0 auto; }
.cm-pill .lead-mi { font-size: 16px; color: #6b6476; flex: 0 0 auto; }
.cm-pill .lbl {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
}
.cm-pill .ct {
font-family: var(--font-mono, "JetBrains Mono");
font-size: 11px;
font-weight: 500;
color: #9488a0;
}
.cm-pill .caret { font-size: 18px; color: #9488a0; margin-right: -2px; flex: 0 0 auto; }
.cm-pill .placeholder { color: #9488a0; font-weight: 500; }
/* Popover panel */
.cm-pop {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: #fff;
border: 1px solid #ececee;
border-radius: 10px;
box-shadow: 0 12px 40px rgba(26, 15, 33, 0.18), 0 1px 2px rgba(26, 15, 33, 0.06);
z-index: 30;
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 320px;
}
.dark .cm-pop { background: #231c27; border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
/* Drop-up variant: when the trigger sits too low in a tall scrollable modal,
the popover flips above the trigger so its bottom never clips below the
viewport (set by the tag picker's viewport-aware Alpine logic). */
.cm-pop--up {
top: auto;
bottom: calc(100% + 4px);
}
.cm-pop-search {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
border-bottom: 1px solid #f3f0f5;
flex: 0 0 auto;
}
.dark .cm-pop-search { border-bottom-color: rgba(255, 255, 255, 0.07); }
.cm-pop-search .mi { font-size: 16px; color: #9488a0; }
.cm-pop-search input {
border: none;
outline: none;
background: transparent;
font-size: 12.5px;
flex: 1;
min-width: 0;
font-family: inherit;
color: #1a0f21;
}
.dark .cm-pop-search input { color: #f0ecf4; }
.cm-pop-search input::placeholder { color: #9488a0; }
.cm-pop-list {
flex: 1;
min-height: 0;
overflow: auto;
padding: 4px;
scrollbar-width: thin;
scrollbar-color: #d9d4df transparent;
}
.cm-pop-item {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 10px;
padding: 7px 10px;
border-radius: 6px;
cursor: pointer;
font-size: 12.5px;
}
.cm-pop-item:hover,
.cm-pop-item.is-active { background: rgba(164, 19, 236, 0.08); }
.cm-pop-item .ico { width: 9px; height: 9px; border-radius: 999px; background: #d0c9d6; }
.cm-pop-item .ico--bar { width: 16px; height: 4px; border-radius: 2px; }
.cm-pop-item .nm {
font-weight: 600;
color: #1a0f21;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dark .cm-pop-item .nm { color: #f0ecf4; }
.cm-pop-item .desc { font-size: 11px; color: #9488a0; font-weight: 500; }
.cm-pop-item .ct { font-family: var(--font-mono, "JetBrains Mono"); font-size: 10.5px; color: #9488a0; }
.cm-pop-item .check { color: #a413ec; font-size: 16px; visibility: hidden; }
.cm-pop-item.is-selected .check { visibility: visible; }
.cm-pop-empty { padding: 14px; font-size: 12px; color: #9488a0; font-style: italic; text-align: center; }
/* Multi-select chips inside the trigger (tags) */
.cm-pill--multi {
min-height: 36px;
height: auto;
padding: 4px 8px 4px 6px;
align-items: center;
flex-wrap: wrap;
gap: 5px;
cursor: text;
}
.cm-pill--multi .placeholder { flex: 1; padding-left: 4px; font-size: 12.5px; }
.cm-pill--multi .input {
flex: 1;
min-width: 80px;
border: none;
outline: none;
background: transparent;
font-size: 12.5px;
height: 24px;
padding: 0 4px;
color: #1a0f21;
font-family: inherit;
}
.dark .cm-pill--multi .input { color: #f0ecf4; }
.cm-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 4px 3px 9px;
background: #f4f1f7;
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
color: #1a0f21;
}
.dark .cm-tag { background: rgba(255, 255, 255, 0.08); color: #f0ecf4; }
.cm-tag .v { font-family: var(--font-mono, "JetBrains Mono"); font-weight: 500; color: #6b6476; }
.dark .cm-tag .v { color: #b8adc4; }
.cm-tag .x {
width: 16px;
height: 16px;
display: grid;
place-items: center;
border: none;
background: transparent;
color: #6b6476;
border-radius: 999px;
cursor: pointer;
}
.cm-tag .x:hover { background: #e4e1e8; color: #1a0f21; }
.dark .cm-tag .x { color: #b8adc4; }
.dark .cm-tag .x:hover { background: rgba(255, 255, 255, 0.12); color: #f0ecf4; }
.cm-tag .x .mi { font-size: 12px; }
/* ── Read-only inherited category ───────────────────────────── */
.cm-inherited-cat {
display: flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 0 12px;
border: 1px solid #ecebef;
border-radius: 10px;
background: #f7f5fa;
color: #6b6476;
font-size: 12.5px;
}
.dark .cm-inherited-cat { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.07); color: #b8adc4; }
.cm-inherited-cat > .mi { font-size: 16px; color: #9488a0; flex-shrink: 0; }
.cm-cat-path { display: inline-flex; align-items: center; gap: 6px; color: #1a0f21; font-weight: 500; flex-wrap: wrap; }
.dark .cm-cat-path { color: #f0ecf4; }
.cm-cat-path .sep { color: #c1b8cc; }
.cm-inherited-cat .lock {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10.5px;
font-weight: 600;
color: #9488a0;
background: #efecf3;
padding: 3px 8px;
border-radius: 999px;
white-space: nowrap;
}
.dark .cm-inherited-cat .lock { background: rgba(255, 255, 255, 0.06); }
.cm-inherited-cat .lock .mi { font-size: 12px; }
/* ── Currency combo (money input) ───────────────────────────── */
.cm-money {
display: grid;
grid-template-columns: 96px 1fr;
border: 1px solid #e4e1e8;
border-radius: 8px;
overflow: hidden;
background: #fff;
min-height: 36px;
}
.dark .cm-money { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); }
.cm-money:focus-within { border-color: #a413ec; box-shadow: 0 0 0 3px rgba(164, 19, 236, 0.12); }
/* ── Progress preview (collection) ──────────────────────────── */
.cm-progress {
border: 1px solid #f0ecf3;
border-radius: 10px;
padding: 12px;
background: #fbf9fd;
display: flex;
flex-direction: column;
gap: 8px;
}
.dark .cm-progress { border-color: rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.02); }
.cm-progress .row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.cm-progress .k { color: #6b6476; }
.dark .cm-progress .k { color: #b8adc4; }
.cm-progress .v { font-family: var(--font-mono, "JetBrains Mono"); font-weight: 600; color: #1a0f21; }
.dark .cm-progress .v { color: #f0ecf4; }
.cm-progress .track { height: 6px; border-radius: 3px; background: #ece8ef; overflow: hidden; }
.dark .cm-progress .track { background: rgba(255, 255, 255, 0.08); }
.cm-progress .fill { height: 100%; background: linear-gradient(90deg, #a413ec, #c084fc); border-radius: 3px; }
/* ── Picker pane (left): search + floating results + selected strip ── */
.cm-pane--picker {
display: flex;
flex-direction: column;
overflow: hidden;
}
.cm-pane--picker .cm-pane-label { flex: 0 0 auto; }
.cm-itempick-bar { position: relative; flex: 0 0 auto; margin-bottom: 12px; z-index: 20; }
.cm-itempick-pop {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 40;
display: flex;
flex-direction: column;
max-height: 320px;
background: #fff;
border: 1px solid #e7e2ec;
border-radius: 12px;
box-shadow: 0 18px 44px rgba(26, 15, 33, 0.18);
overflow: hidden;
}
.dark .cm-itempick-pop { background: #231c27; border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); }
.cm-itempick-pop .cm-itempick-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 6px 6px; }
.cm-selected-strip--fill {
flex: 1 1 auto;
min-height: 0;
margin-bottom: 0;
display: flex;
flex-direction: column;
}
.cm-selected-strip--fill .head { flex: 0 0 auto; }
.cm-selected-strip--fill .cm-selected-list {
flex: 1;
min-height: 0;
overflow-y: auto;
padding-right: 2px;
margin-right: -2px;
}
.cm-selected-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 24px 12px;
text-align: center;
color: #9488a0;
font-size: 12px;
}
.cm-selected-empty .mi { font-size: 28px; color: #c1b8cc; }
/* ── Footer ─────────────────────────────────────────────────── */
.cm-foot {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
padding: 14px 24px;
border-top: 1px solid #f3f0f5;
background: #fbf9fd;
flex: 0 0 auto;
}
.dark .cm-foot { border-top-color: rgba(255, 255, 255, 0.07); background: #160d1b; }
.cm-foot-l {
display: flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
color: #6b6476;
min-width: 0;
}
.dark .cm-foot-l { color: #b8adc4; }
.cm-foot-l .mi { font-size: 14px; color: #9488a0; flex: 0 0 auto; }
.cm-foot-r { display: flex; gap: 8px; }
.cm-btn {
min-height: 36px;
padding: 0 16px;
border-radius: 9px;
font-size: 13px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-family: inherit;
border: 1px solid transparent;
transition: background 120ms, transform 120ms;
text-decoration: none;
}
.cm-btn .mi { font-size: 16px; }
/* Aligned with the canonical .btn-secondary (static_src/tailwind.css): same
neutral-outlined family — gray-200 border, white bg, gray-900 text, gray-50
hover, and a primary focus-visible ring. Keeps cm geometry (36px / 13px /
radius 9px) so it still pairs with .cm-btn--primary. */
.cm-btn--ghost { background: #fff; border-color: #e5e7eb; color: #111827; }
.cm-btn--ghost:hover { background: #f9fafb; }
.cm-btn--ghost:focus-visible {
outline: none;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #a413ec;
}
.dark .cm-btn--ghost { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); color: #f0ecf4; }
.dark .cm-btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }
.dark .cm-btn--ghost:focus-visible {
box-shadow: 0 0 0 2px #1c1022, 0 0 0 4px #a413ec;
}
.cm-btn--primary {
background: #a413ec;
color: #fff;
box-shadow: 0 1px 2px rgba(164, 19, 236, 0.28), 0 0 0 1px rgba(164, 19, 236, 0.04);
}
.cm-btn--primary:hover { background: #9310d6; }
.cm-btn--primary:disabled { opacity: 0.4; cursor: not-allowed; }
.cm-btn--primary .spin { animation: cm-spin 0.8s linear infinite; }
@keyframes cm-spin { to { transform: rotate(360deg); } }
/* JSON validity badge */
.cm-json-badge { margin-top: 6px; font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }
.cm-json-badge .mi { font-size: 14px; }
.cm-json-ok { color: #1f7a3d; }
.dark .cm-json-ok { color: #34d399; }
.cm-json-bad { color: #c1272d; }
.dark .cm-json-bad { color: #f87171; }
/* checkbox row (is_featured etc.) */
.cm-checkrow { display: flex; align-items: center; gap: 8px; }
.cm-checkrow label { font-size: 12.5px; font-weight: 600; color: #1a0f21; }
.dark .cm-checkrow label { color: #f0ecf4; }
/* date-disabled hint */
.cm-date-hint { font-size: 11px; color: #9488a0; font-style: italic; }
/* ── Variant quick-create: parent-asset search + new-asset card ──
Used by variants/quick_create_modal.html. The asset search is a bare
combobox that writes into the hidden Django `asset`