/*
 * Entity Side Panel — Interface UI
 * Inline flex panel to the right of the board.
 * Shows full entity details (card view/edit) when clicking
 * board blocks, SHOWCASE references, or card references.
 * Chat, Board, and Side Panel share equal width when all open.
 *
 * Uses variables from /client/css/variables.css
 */

/* ─── Side Panel Container (inline flex child, not overlay) ─── */
.entity-side-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: var(--main-background-color);
    overflow: hidden;
}

/* ─── Side Panel Header ─── */
.side-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    border-bottom: var(--border-width) solid var(--border-color);
    flex-shrink: 0;
    gap: var(--space-2);
    height: 43px;
}

.side-panel-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    width: 100%;
}

/* ─── Side Panel Header Actions (button group right of title) ─── */
.side-panel-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.side-panel-header-actions .unified-control-group {
    position: static;
}

.side-panel-header-actions .unified-control-group::before {
    display: none;
}

.side-panel-header-actions .unified-control-trigger {
    display: none;
}

.side-panel-header-actions .unified-control-items,
.side-panel-header-actions .unified-control-group:hover .unified-control-items,
.side-panel-header-actions .unified-control-group:focus-within .unified-control-items {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    padding-right: 0;
    transition: none;
}

.side-panel-collection-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.side-panel-collection-action-btn {
    height: 26px;
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.side-panel-header-meta-pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border-radius: var(--radius-full);
    border: var(--border-width) solid var(--border-color);
    background: var(--main-background-color-secondary);
    color: var(--color-ink-lighter);
    font-size: 11px;
    white-space: nowrap;
}

/* ─── Shared icon button base (edit, close) ─── */
.side-panel-close-btn,
.side-panel-header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    border: 0.5px solid var(--border-color);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-ink-lighter);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.side-panel-close-btn {
    width: 26px;
}

.side-panel-open-pane-btn {
    width: 26px;
}



/* Edit button */
.side-panel-edit-btn {
    gap: var(--space-1);
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.side-panel-download-btn {
    width: 26px;
}

/* Save / Cancel buttons: icon + label */
.side-panel-save-btn,
.side-panel-cancel-btn,
.side-panel-promote-btn {
    gap: var(--space-1);
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.side-panel-back-btn {
    gap: var(--space-1);
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.side-panel-back-btn:hover {
    background: var(--border-color);
    color: var(--color-ink);
}

.side-panel-save-btn {
    background: transparent;
    color: var(--color-ink-light);
    border-radius: var(--radius-full);
}

/* Save to Library — uses a subtle accent to distinguish from Save Draft */
.side-panel-promote-btn {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 10%, transparent);
    color: var(--color-primary, #6366f1);
    border: 1px solid color-mix(in srgb, var(--color-primary, #6366f1) 25%, transparent);
    border-radius: var(--radius-full);
}

.side-panel-promote-btn:hover {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 18%, transparent);
    color: var(--color-primary, #6366f1);
}

.side-panel-save-btn.is-dirty {
    border-color: #f59e0b;
    color: #b45309;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25) inset;
}

.side-panel-save-btn.is-dirty:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
}

.side-panel-save-hint {
    font-size: var(--text-xs);
    color: #b45309;
    white-space: nowrap;
}

.side-panel-save-btn:hover:not(:disabled) {
    background: var(--main-background-color-third);
    color: var(--color-ink);
}

.side-panel-save-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.side-panel-cancel-btn {
    display: none;
    color: var(--color-ink-light);
}

.side-panel-close-btn:hover,
.side-panel-open-pane-btn:hover,
.side-panel-edit-btn:hover,
.side-panel-cancel-btn:hover,
.side-panel-download-btn:hover {
    background: var(--border-color);
    color: var(--color-ink);
}

/* ─── Side Panel Body ─── */
.side-panel-body {
    /* flex: 1; */
    /* min-height: 0; */
    /* display: flex;
    flex-direction: column;
    justify-content: center; */
    overflow-y: auto;
    width: 100%;
    margin-inline: auto;
    overscroll-behavior: contain;
    overflow-anchor: none;
    padding: var(--space-4) var(--space-4);
    scrollbar-width: thin;
    scrollbar-color: var(--main-background-color-third) var(--main-background-color);
    /* align-content: center;
    flex-wrap: wrap; */
    max-width: 1200px;
}

.side-panel-layout-btn {
    gap: var(--space-1);
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.side-panel-layout-strip {
    border-bottom: var(--border-width) solid var(--border-color);
    background: var(--main-background-color-secondary);
    padding: var(--space-3) var(--space-4);
}

.dpg-layout-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dpg-layout-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.dpg-layout-control {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
}

.dpg-layout-block-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 200px;
    overflow: auto;
}

.dpg-layout-block-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 1rem; 
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--main-background-color);
}

.dpg-layout-block-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dpg-layout-block-title {
    font-size: var(--text-sm);
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dpg-layout-block-meta {
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
}

.dpg-layout-block-btn {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    border: var(--border-width) solid var(--border-color);
    background: var(--main-background-color-secondary);
    color: var(--color-ink);
    cursor: pointer;
}

.dpg-layout-block-btn.is-remove {
    border-color: color-mix(in srgb, var(--color-danger, #ef4444) 45%, var(--border-color));
    color: var(--color-danger, #ef4444);
}

.dpg-grid {
    --dpg-gap: var(--space-2);
    display: grid;
    grid-template-columns: repeat(var(--dpg-columns, 1), minmax(0, 1fr));
    grid-template-rows: repeat(var(--dpg-rows, 1), minmax(var(--dpg-cell-size, 96px), auto));
    gap: var(--dpg-gap);
    align-items: stretch;
    width: 100%;
    overflow: hidden;
}

.dpg-cell {
    aspect-ratio: 1 / 1;
    border: 1px dashed color-mix(in srgb, var(--border-color-strong) 60%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--main-background-color-third) 40%, transparent);
    min-height: 0;
}

.dpg-item {
    aspect-ratio: 1 / 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    /* border: var(--border-width) solid var(--border-color-strong); */
    border-radius: var(--radius-md);
    background: var(--main-background-color);
    padding: var(--space-2);
    z-index: 2;
    overflow: hidden;
}

.dpg-item-content {
    flex: 1;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
}

.dpg-media {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: color-mix(in srgb, var(--main-background-color-third) 50%, transparent);
    color: var(--color-ink);
    font-size: var(--text-xs);
}

.dpg-media-image img,
.dpg-media-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dpg-media-audio {
    padding: var(--space-2);
}

.dpg-media-audio audio {
    width: 100%;
}

.dpg-media-file {
    padding: var(--space-2);
}

.dpg-media-file a {
    color: var(--color-ink);
    text-decoration: underline;
    word-break: break-word;
}

.dpg-media-text {
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--space-4);
    line-height: 1.35;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
}

.dpg-item-text-expand {
    aspect-ratio: auto;
    height: auto;
    max-height: none;
}

.dpg-item-text-expand .dpg-item-content {
    overflow: visible;
    max-height: none;
}

.dpg-item-text-expand .dpg-media-text {
    overflow: visible;
    height: auto;
    max-height: none;
}

.dpg-media-text .markdown-surface {
    width: 100%;
}

.dpg-media-text .markdown-surface > :first-child {
    margin-top: 0;
}

.dpg-media-text .markdown-surface > :last-child {
    margin-bottom: 0;
}

.dpg-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink-lighter);
}

.dpg-empty-message {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-ink-lighter);
    font-size: var(--text-sm);
    padding: var(--space-4);
}

.dpg-item-arrows {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: inline-flex;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.dpg-item:hover .dpg-item-arrows {
    opacity: 1;
    pointer-events: auto;
}

.dpg-item-arrows button {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    border: var(--border-width) solid var(--border-color);
    background: var(--main-background-color-secondary);
    color: var(--color-ink);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}

.dpg-item-arrows button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ─── Side Panel Loading ─── */
.side-panel-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8);
    color: var(--color-ink-lighter);
    font-size: var(--text-sm);
}

.side-panel-loading .loading-dots {
    display: flex;
    gap: var(--space-1);
}

.side-panel-loading .loading-dots span {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background-color: var(--color-ink-lighter);
    animation: sp-dot-pulse 1.4s infinite ease-in-out both;
}
.side-panel-loading .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.side-panel-loading .loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes sp-dot-pulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ─── Side Panel Error ─── */
.side-panel-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6);
    color: var(--color-ink-lighter);
    font-size: var(--text-sm);
    text-align: center;
}

/* ─── Card View in Side Panel ─── */
.sp-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 1rem;
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
}

.sp-card-schema {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    border: var(--border-width) solid var(--border-color);
    background: var(--main-background-color-secondary);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-ink-lighter);
}

.sp-card-published-source {
    margin-bottom: var(--space-4);
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--input-border);
    background: var(--main-background-color-secondary);
}

.sp-card-published-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-lighter);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.sp-card-published-row {
    font-size: var(--text-sm);
    color: var(--color-ink);
    line-height: 1.45;
}

.sp-card-published-key {
    color: var(--color-ink-lighter);
    font-weight: var(--weight-medium);
}

.sp-card-published-value {
    color: var(--color-ink);
    font-weight: var(--weight-medium);
}

.sp-card-fields {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--radius-xl);
    border: var(--border-width) solid var(--border-color);
    overflow: hidden;
    background-color: transparent;
}

.sp-card-fields-collapsible {
    border-radius: var(--radius-xl);
    border: var(--border-width) solid var(--border-color);
    background-color: transparent;
    overflow: hidden;
    margin-bottom: 1rem;
}

.sp-card-fields-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border: none;
    background: color-mix(in srgb, var(--main-background-color-secondary) 60%, var(--main-background-color) 40%);
    color: var(--color-ink);
    cursor: pointer;
    border-bottom: var(--border-width) solid var(--border-color);
    transition: background var(--transition-fast);
}

.sp-card-fields-toggle:hover {
    background: var(--main-background-color-secondary);
}

.sp-card-fields-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink-lighter);
}

.sp-card-fields-arrow {
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
    transition: transform var(--transition-fast);
}

.sp-card-fields-toggle[aria-expanded="true"] .sp-card-fields-arrow {
    transform: rotate(180deg);
}

.sp-card-fields-toggle[aria-expanded="false"] + .sp-card-fields-content {
    display: none;
}

.sp-card-fields-content {
    padding: 0;
}

.sp-card-fields-content .sp-card-fields {
    border: none;
    border-radius: 0;
}

.sp-card-field {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-width) solid var(--border-color);
    transition: background var(--transition-fast);
}

.sp-card-field:last-child {
    border-bottom: none;
}

.sp-field-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-lighter);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-field-value {
    font-size: var(--text-sm);
    color: var(--color-ink);
    line-height: var(--leading-relaxed);
    word-break: break-word;
    min-width: 0;
}

.sp-card-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: 1rem;
}

.sp-card-content > .sp-field-label {
    padding: var(--space-1) var(--space-3);
    background: color-mix(in srgb, var(--main-background-color-secondary) 60%, var(--main-background-color) 40%);
    border-bottom: var(--border-width) solid var(--border-color);
    margin-bottom: 0;
}

.sp-card-title-section {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--main-background-color-third);
    margin-bottom: var(--space-4);
}

.sp-card-content .sp-field-label {
    /* margin-bottom: var(--space-2); */
}

.sp-card-title-section .sp-field-label {
    margin-bottom: var(--space-2);
}

.sp-draft-media-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.sp-draft-media-row-primary {
    /* display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3); */
}

.sp-media-card {
    border: 1px solid var(--border-color-light, var(--border-color));
    border-radius: var(--radius-xl);
    background-color: var(--main-background-color-secondary);
    padding: var(--space-3);
}

.sp-media-card .sp-field-label {
    margin-bottom: var(--space-2);
}

.sp-media-link {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    line-height: 0;
}

.sp-media-card img,
.sp-media-card video {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: var(--radius-lg);
    display: block;
    background: color-mix(in srgb, var(--main-background-color-third) 78%, black 22%);
}

.sp-media-card audio {
    width: 100%;
    display: block;
}

.sp-draft-content-row {
    margin-bottom: 1rem;
}

.sp-media-file-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-ink-light);
    text-decoration: underline;
    word-break: break-all;
}

.sp-media-file-link:hover {
    opacity: 0.85;
}

.sp-media-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    flex-wrap: wrap;
}

.sp-media-download-link,
.sp-media-open-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    border: var(--border-width) solid var(--border-color);
    color: var(--color-ink-light);
    text-decoration: none;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.sp-media-download-link:hover,
.sp-media-open-link:hover {
    background: var(--main-background-color-third);
    border-color: var(--color-ink-lighter);
    color: var(--color-ink);
}

.sp-media-download-link:disabled {
    opacity: 0.7;
    cursor: default;
}

.sp-btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sp-btn-ring {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: sp-btn-ring-spin 0.75s linear infinite;
}

@keyframes sp-btn-ring-spin {
    to { transform: rotate(360deg); }
}

.sp-modality-chooser {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-2);
}

.sp-modality-chooser .modality-upload-slot {
    min-height: 108px;
    border-style: solid;
    background: var(--main-background-color-secondary);
    padding: var(--space-3);
}

.sp-modality-current {
    grid-template-columns: 1fr;
    margin-top: var(--space-2);
}

@media (max-width: 900px) {
    .sp-modality-chooser {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .sp-modality-chooser {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.interface-workspace .interface-chat-container:not(.chat-closed) + .interface-board-container:not(.board-closed) + .workspace-right-panel:not(.panel-closed) .sp-draft-media-row-primary {
    grid-template-columns: 1fr;
}

@media (max-width: 920px) {
    .sp-draft-media-row-primary {
        grid-template-columns: 1fr;
    }
}

.sp-card-content .sp-content-body {
    padding: var(--space-3);
}

.sp-content-body {
    position: relative;
    font-size: var(--text-sm);
    color: var(--color-ink);
    line-height: var(--leading-relaxed);
}

.sp-content-body .sp-content-markdown {
    position: relative;
}

.sp-content-body .sp-content-line-anchors {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sp-content-body .content-line-anchor {
    display: block;
    min-height: 1.6em;
}

.sp-content-body .content-line {
    padding: 2px 4px;
    border-radius: var(--radius-xs);
    transition: background var(--transition-fast);
}

.sp-content-body .content-line.content-line-accurate {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: var(--leading-relaxed);
}

.sp-content-body .content-line.email-thread-spacer {
    padding: 0;
    min-height: 6px;
}

.sp-content-body .content-line.email-thread-message {
    margin-top: var(--space-2);
    padding-top: var(--space-1);
    border-top: 1px solid var(--border-color-light, var(--border-color));
    font-size: var(--text-xs);
    font-weight: var(--weight-bold, 700);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-ink-light);
}

.sp-content-body .content-line.email-thread-meta {
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--color-ink-light);
}

.sp-content-body .content-line .email-thread-meta-label {
    font-weight: var(--weight-semibold, 600);
    color: var(--color-ink);
}

.sp-content-body .content-line .email-thread-meta-value {
    font-weight: var(--weight-regular, 400);
}

.sp-content-body .content-line.email-thread-body {
    font-size: var(--text-sm);
    font-weight: var(--weight-regular, 400);
    line-height: var(--leading-relaxed);
    color: var(--color-ink);
    padding-top: 3px;
    padding-bottom: 3px;
}

/* ─── SHOWCASE Highlight ─── */
.sp-card-field.showcase-highlight,
.sp-content-body .content-line.showcase-highlight,
.sp-content-body .content-line-anchor.showcase-highlight,
.sp-content-body .sp-content-markdown.showcase-highlight {
    background: rgba(99, 102, 241, 0.12);
    border-left: 3px solid var(--color-primary, #6366f1);
    padding-left: var(--space-2);
    animation: sp-highlight-fade 4s ease forwards;
}

@keyframes sp-highlight-fade {
    0% { background: rgba(99, 102, 241, 0.2); }
    70% { background: rgba(99, 102, 241, 0.12); }
    100% { background: transparent; border-left-color: transparent; }
}

/* ─── Edit Form in Side Panel ─── */
.sp-edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 1200px;
}

/* Draft card form: allow type picker to fill panel height */
.sp-draft-form-wrap {
    /* min-height: 100%; */
}

.sp-draft-form-wrap > .card-form-type-picker {
    flex: 1;
    min-height: 300px;
}

/* Type bar inside sp-edit-form: no top gap from the gap property, bleed left/right */
.sp-edit-form .card-form-type-bar {
    /* margin-top: calc(-1 * var(--space-4));
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    border-radius: var(--radius-full); */
}

.sp-edit-form .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.sp-edit-form .form-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-lighter);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sp-edit-form .form-input,
.sp-edit-form .form-textarea {
    width: 100%;
    /* padding: var(--space-2) var(--space-3); */
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--main-background-color-secondary, var(--main-background-color));
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    transition: border-color var(--transition-fast);
    box-sizing: border-box;
}

.sp-edit-form .form-input:focus,
.sp-edit-form .form-textarea:focus {
    outline: none;
    border-color: var(--color-primary, #6366f1);
}

.sp-edit-form .schema-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sp-edit-form .schema-fields-header {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-lighter);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-1);
}

/* Tiptap content area: ensure a minimum editable height */
.sp-edit-form .tiptap-content {
    min-height: 120px;
}

/* ─── Board Block Header Chip (in chat) ─── */
.board-block-header-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    margin: var(--space-2) 0;
    border-radius: var(--radius-md);
    background: var(--hover-background);
    border: 0.5px dashed var(--border-color);
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.board-block-header-chip:hover {
    background: var(--active-background);
    border-color: var(--color-ink-lighter);
}

.board-block-header-chip .bbh-icon {
    font-size: 11px;
    flex-shrink: 0;
}

.board-block-header-chip .bbh-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-primary, #6366f1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.board-block-header-chip .bbh-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.board-block-header-chip .bbh-suffix {
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
    flex-shrink: 0;
}

/* ─── Add to Board Button ─── */
.add-to-board-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 10px;
    margin-top: var(--space-2);
    border: 0.5px solid var(--border-color);
    border-radius: var(--radius-md);
    background: transparent;
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.add-to-board-btn:hover {
    background: var(--hover-background);
    border-color: var(--color-primary, #6366f1);
    color: var(--color-primary, #6366f1);
}

.add-to-board-btn:disabled {
    opacity: 0.6;
    cursor: default;
    border-color: var(--border-color);
    color: var(--color-ink-lighter);
    background: var(--hover-background);
}

/* ─── Chat Panel Styles ─── */
.chat-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.chat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    border-bottom: var(--border-width) solid var(--border-color);
    flex-shrink: 0;
}

.chat-branch-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-ink-light);
}

.chat-header-separator {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--color-ink-lighter);
}

.chat-total-tokens {
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
}

.chat-messages-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-4);
    scrollbar-width: thin;
    scrollbar-color: var(--main-background-color-third) var(--main-background-color);
}

.side-panel-body.side-panel-body-card-form {
    padding: 0;
}

/* ─── form-form-page inside the side panel ───────────────────────────────── */

/* Hide the entire form header — Save lives in the panel header; Back/Cancel in the close btn */
/* Applies in ALL side panel contexts (library and board), not just card-form mode */
.side-panel-body .form-form-header {
    display: none !important;
}

/* Hide the large page H2 — side panel title bar already shows "New Form" / "Edit Form" */
.side-panel-body.side-panel-body-card-form .form-form-page .form-page-title {
    display: none;
}

/* Tighter body padding to fit the narrower panel viewport */
.side-panel-body.side-panel-body-card-form .form-form-body {
    padding: var(--space-3) var(--space-3) var(--space-6);
}

/* Slightly less rounding on sections for the narrower panel */
.side-panel-body.side-panel-body-card-form .form-section {
    /* border-radius: var(--radius-lg); */
}

/* Field config items: tighter in the panel */
.side-panel-body.side-panel-body-card-form .field-config-item {
    border-radius: var(--radius-lg);
}

/* Sections group: match */
.side-panel-body.side-panel-body-card-form .fields-section-group {
    border-radius: var(--radius-lg);
}

.chat-scroll-to-bottom-btn {
    position: absolute;
    bottom: var(--space-4);
    /* left: 50%; */
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--main-background-color);
    color: var(--color-ink-light);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    z-index: 10;
}

.chat-scroll-to-bottom-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-60px);
}

.chat-scroll-to-bottom-btn:hover {
    background: var(--hover-background);
    border-color: var(--color-ink-lighter);
}

/* ─── Chat Empty State ─── */
.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--space-3);
    padding: var(--space-6);
}

.chat-empty-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    text-align: center;
}


/* ─── Mobile ─── */
@media (max-width: 767px) {
    .entity-side-panel {
        width: 100%;
        max-width: 100%;
    }
}

/* ─── Liquid Glass Theme ─── */
html[data-theme="liquid-glass"] .entity-side-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
}

html[data-theme="liquid-glass"] .board-block-header-chip {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
}

/* ─── Dark Themes ─── */
html[data-theme="dark"] .entity-side-panel,
html[data-theme="sakina-purple"] .entity-side-panel,
html[data-theme="deep-blue"] .entity-side-panel,
html[data-theme="dark-brown"] .entity-side-panel,
html[data-theme="dark-green"] .entity-side-panel,
html[data-theme="dark-red"] .entity-side-panel {
    box-shadow: var(--shadow-lg);
}

/* ─── V5 Draft Entity Side Panel ─── */

/* Draft badge in the side panel header title */
.sp-draft-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    border-radius: var(--radius-sm, 3px);
    font-size: 9px;
    font-weight: var(--weight-semibold, 600);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-cleanup, #f59e0b);
    border: 0.5px solid currentColor;
    vertical-align: middle;
    margin-right: var(--space-1, 4px);
    opacity: 0.9;
}

.sp-import-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    border-radius: var(--radius-sm, 3px);
    font-size: 9px;
    font-weight: var(--weight-semibold, 600);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary, #2563eb);
    border: 0.5px solid currentColor;
    vertical-align: middle;
    margin-right: var(--space-1, 4px);
    opacity: 0.9;
}

/* Inline DRAFT badge used inside manual card lists */
.sp-draft-badge-inline {
    display: inline-flex;
    align-items: center;
    padding: 1px 4px;
    border-radius: var(--radius-sm, 3px);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-cleanup, #f59e0b);
    border: 0.5px solid currentColor;
    margin-right: var(--space-1, 4px);
    vertical-align: middle;
}

/* ─── Tag selector (card draft edit) ─── */
.sp-tag-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1, 4px);
    padding: var(--space-1, 4px) 0;
}

.sp-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-xs, 11px);
    cursor: pointer;
    border: 1.5px solid var(--border-color);
    background: transparent;
    color: var(--color-ink);
    user-select: none;
    transition: border-color 0.12s, background 0.12s;
}

.sp-tag-chip:hover {
    background: var(--hover-background);
}

.sp-tag-chip.selected {
    border-color: var(--color-primary, #6366f1);
    background: color-mix(in srgb, var(--color-primary, #6366f1) 10%, transparent);
    color: var(--color-primary, #6366f1);
}

.sp-tag-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    flex-shrink: 0;
}

/* ─── Color palette (tag draft edit) ─── */
.sp-color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1, 4px);
    padding: var(--space-1, 4px) 0;
}

.sp-color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.1s;
    outline: none;
}

.sp-color-swatch:hover {
    transform: scale(1.15);
}

.sp-color-swatch.selected {
    border-color: var(--color-ink);
    transform: scale(1.1);
    box-shadow: 0 0 0 1px var(--main-background-color);
}

.sp-color-hex-input {
    margin-top: var(--space-2, 8px);
    max-width: 120px;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs, 11px);
}

/* ─── Schema field builder (schema draft edit) ─── */
.sp-draft-schema-builder {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--main-background-color);
}

.sp-draft-field-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: color-mix(in srgb, var(--main-background-color-secondary) 60%, var(--main-background-color) 40%);
    border-bottom: var(--border-width) solid var(--border-color);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    color: var(--color-ink-lighter);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sp-draft-col-name { flex: 1; min-width: 0; }
.sp-draft-col-type { width: 110px; flex-shrink: 0; }
.sp-draft-col-req  { width: 28px; flex-shrink: 0; text-align: center; }

.sp-draft-field-row {
    display: flex;
    flex-direction: column;
    border-bottom: var(--border-width) solid var(--border-color);
    background: var(--main-background-color);
    transition: background var(--transition-fast);
}

.sp-draft-field-row.expanded {
 background-color: color-mix(in srgb, var(--main-background-color-secondary) 60%, var(--main-background-color) 40%);
}

.sp-draft-field-row:last-child { border-bottom: none; }
/* .sp-draft-field-row:hover { background: color-mix(in srgb, var(--main-background-color-secondary) 45%, var(--main-background-color) 55%); } */
.sp-draft-field-row.dragging { opacity: 0.5; }
.sp-draft-field-row.drag-over {
    border-top: 2px solid var(--color-target);
    background: color-mix(in srgb, var(--color-target) 5%, var(--main-background-color) 95%);
}

.sp-draft-field-main {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-2);
}

.sp-draft-field-drag {
    color: var(--color-ink-light);
    cursor: grab;
    flex-shrink: 0;
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast);
}

.sp-draft-field-drag:hover { color: var(--color-ink); }
.sp-draft-field-drag:active { cursor: grabbing; }

.sp-draft-field-main .form-input {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
}

.sp-draft-field-main .form-select {
    width: 110px;
    flex-shrink: 0;
    height: 30px;
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
}

.sp-draft-field-req {
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.sp-draft-field-req input[type="checkbox"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

.sp-draft-req-box {
    width: 16px;
    height: 16px;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-sm, 3px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.sp-draft-field-req:has(input:checked) .sp-draft-req-box {
    background: var(--color-target);
    border-color: var(--color-target);
    color: #fff;
}

.sp-draft-field-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.sp-draft-cfg-btn,
.sp-draft-remove-field-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-ink-lighter);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sp-draft-cfg-btn:hover {
    background: color-mix(in srgb, var(--color-target) 10%, var(--main-background-color-secondary) 90%);
    color: var(--color-ink);
}
.sp-draft-cfg-btn.active {
    color: var(--color-target);
    background: color-mix(in srgb, var(--color-target) 12%, var(--main-background-color-secondary) 88%);
}
.sp-draft-remove-field-btn:hover {
    background: color-mix(in srgb, var(--color-error) 9%, var(--main-background-color-secondary) 91%);
    color: var(--color-error);
}

.sp-draft-field-config {
    padding: var(--space-2) var(--space-3) var(--space-3);
    border-top: var(--border-width) solid var(--border-color);
    background: var(--hover-background);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Always-visible inline config (select/multiselect options) */
.sp-draft-field-config-inline {
    border-top: var(--border-width) solid var(--border-color);
}

.sp-draft-config-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-lighter);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sp-draft-option-row {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

.sp-draft-option-row .form-input {
    flex: 1;
    height: 26px;
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
}

.sp-draft-remove-opt-btn {
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--color-ink-lighter);
    cursor: pointer;
    font-size: 11px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sp-draft-remove-opt-btn:hover { background: var(--hover-background); color: var(--color-danger, #ef4444); }

.sp-draft-add-opt-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px 8px;
    border: var(--border-width) dashed var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-ink-lighter);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: border-color 0.1s, color 0.1s;
    align-self: flex-start;
}

.sp-draft-add-opt-btn:hover { border-color: var(--color-primary, #6366f1); color: var(--color-primary, #6366f1); }

.sp-draft-add-field-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    justify-content: center;
    width: 100%;
    height: 32px;
    margin-top: var(--space-2);
    padding: 0 var(--space-3);
    border: var(--border-width) dashed color-mix(in srgb, var(--color-target) 45%, var(--border-color) 55%);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-target) 6%, transparent);
    color: var(--color-ink-light);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.sp-draft-add-field-btn:hover {
    border-color: color-mix(in srgb, var(--color-target) 65%, var(--border-color) 35%);
    background: color-mix(in srgb, var(--color-target) 12%, transparent);
    color: var(--color-ink);
}

/* ─── Schema builder extras ──────────────────────────────────────────────── */

/* Field count pill next to the "Fields" form label */
.sp-schema-field-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    background: color-mix(in srgb, var(--color-target) 14%, var(--main-background-color-secondary) 86%);
    color: var(--color-ink-light);
    margin-left: var(--space-1);
    vertical-align: middle;
}

/* Empty state when no fields exist */
.sp-schema-empty-fields {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-5) var(--space-3);
    text-align: center;
    color: var(--color-ink-lighter);
    min-height: 120px;
}

.sp-schema-empty-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-light);
    margin-top: var(--space-1);
}

.sp-schema-empty-hint {
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
    line-height: 1.4;
    max-width: 200px;
}

/* Schema description in view mode */
.sp-schema-view-description {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    line-height: var(--leading-normal);
}

/* ─── Collection draft edit ─── */
.sp-draft-col-type-toggle {
    display: flex;
    gap: var(--space-4);
}

.sp-draft-radio-label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    cursor: pointer;
    color: var(--color-ink-light);
}

.sp-draft-radio-label input[type="radio"] {
    accent-color: var(--color-primary, #6366f1);
}

.sp-draft-filter-builder {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sp-draft-filter-textarea {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    resize: vertical;
}

.sp-draft-filter-err {
    font-size: var(--text-xs);
    color: var(--color-danger, #ef4444);
    padding: var(--space-1) 0;
}

.sp-draft-hint {
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    color: var(--color-ink-lighter);
    margin-left: var(--space-1);
}

.sp-draft-manual-note {
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
    margin-bottom: var(--space-2);
}

.sp-draft-manual-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.sp-draft-manual-card {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    background: var(--hover-background);
}

.sp-draft-manual-card.draft {
    border-style: dashed;
    border-color: var(--color-cleanup, #f59e0b);
}

.sp-draft-manual-card-id {
    flex: 1;
    font-family: var(--font-mono, monospace);
    color: var(--color-ink-light);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-draft-remove-manual-card,
.sp-draft-remove-manual-draft-card {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--color-ink-lighter);
    cursor: pointer;
    font-size: 11px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sp-draft-remove-manual-card:hover,
.sp-draft-remove-manual-draft-card:hover {
    color: var(--color-danger, #ef4444);
    background: var(--hover-background);
}

/* Filter schema select */
.sp-draft-filter-schemas .form-select {
    font-size: var(--text-sm);
}

/* ─── Collection editor parity with collection modal ─── */
.sp-collection-editor {
    gap: var(--space-5);
}

.sp-collection-form-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sp-collection-section-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    margin: 0;
    padding-bottom: var(--space-2);
    border-bottom: var(--border-width) solid var(--border-color);
}

.sp-collection-section-desc {
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
    margin: 0;
}

.sp-filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--main-background-color-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-xl);
}

.sp-filter-group-mode {
    border-style: dashed;
    background: var(--main-background-color-third);
}

.sp-filter-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sp-filter-control {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sp-filter-hint {
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
}

.sp-filter-empty {
    font-size: var(--text-sm);
    color: var(--color-ink-lighter);
    font-style: italic;
}

.sp-chip-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.sp-chip-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    border: var(--border-width) solid var(--border-color);
    background: var(--main-background-color);
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sp-chip-option input[type="checkbox"] {
    display: none;
}

.sp-chip-option:hover {
    border-color: var(--border-color-strong);
}

.sp-chip-option.selected {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: var(--main-background-color);
}

.sp-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.sp-schema-tag-mode-selector {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sp-radio-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xl);
    border: var(--border-width) solid var(--border-color);
    background: var(--main-background-color);
    color: var(--color-ink-light);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sp-schema-tag-mode-selector .sp-radio-option {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

.sp-radio-option input[type="radio"] {
    display: none;
}

.sp-radio-option:hover {
    border-color: var(--border-color-strong);
}

.sp-radio-option.selected {
    border-color: var(--color-target);
    background: var(--color-target-bg);
    color: var(--color-target);
}

.sp-schema-tag-mode-selector .sp-radio-option.selected {
    border-color: var(--color-operation);
    background: var(--color-operation-bg);
    color: var(--color-ink);
}

.sp-schema-tag-mode-selector .sp-radio-option small {
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
}

.sp-tag-mode-selector {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.sp-date-range-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sp-date-inputs {
    display: flex;
    gap: var(--space-2);
}

.sp-date-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.sp-date-input-group label {
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
}

.sp-field-filters-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sp-field-filters-empty {
    font-size: var(--text-sm);
    color: var(--color-ink-lighter);
    font-style: italic;
}

.sp-field-filter-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--main-background-color);
}

.sp-filter-schema-select { width: 122px; }
.sp-filter-field-select { width: 100px; }
.sp-filter-op-select { width: 90px; }
.sp-filter-value-input,
.sp-filter-value-select {
    flex: 1;
    min-width: 90px;
}

.sp-filter-dot {
    color: var(--color-ink-lighter);
    font-weight: var(--weight-semibold);
}

.sp-remove-filter-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-ink-lighter);
    cursor: pointer;
    font-size: var(--text-lg);
}

.sp-remove-filter-btn:hover {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.sp-add-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) dashed var(--border-color);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-ink-lighter);
    font-size: var(--text-sm);
    cursor: pointer;
}

.sp-add-filter-btn:hover {
    border-color: var(--border-color-strong);
    color: var(--color-ink);
    background: var(--main-background-color);
}

.sp-sort-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sp-sort-field-select {
    flex: 1;
}

.sp-sort-direction-toggle {
    display: flex;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.sp-sort-dir-btn {
    border: none;
    background: var(--main-background-color);
    color: var(--color-ink-light);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
}

.sp-sort-dir-btn + .sp-sort-dir-btn {
    border-left: var(--border-width) solid var(--border-color);
}

.sp-sort-dir-btn:hover {
    background: var(--main-background-color-third);
    color: var(--color-ink);
}

.sp-sort-dir-btn.selected {
    background: var(--color-ink);
    color: var(--main-background-color);
}

.sp-collection-preview-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.sp-preview-loading {
    font-size: var(--text-sm);
    color: var(--color-ink-lighter);
}

.sp-preview-card-count {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--main-background-color-third);
    color: var(--color-ink-light);
    font-size: var(--text-sm);
}

.sp-preview-card-count.has-filters {
    background: var(--color-operation-bg);
    color: var(--color-operation);
}

.sp-preview-card-count .count-number {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: 1;
}

.sp-preview-card-count .count-label {
    font-size: var(--text-xs);
}

.sp-preview-filters {
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
}

@media (max-width: 640px) {
    .sp-date-inputs {
        flex-direction: column;
    }

    .sp-field-filter-row {
        flex-wrap: wrap;
    }

    .sp-filter-schema-select,
    .sp-filter-field-select,
    .sp-filter-op-select {
        width: 100%;
    }
}

/* ─── Actual Entity View (schema, tag, collection) ─── */

.sp-entity-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-1) 0;
}

.sp-view-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.sp-entity-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: var(--radius-full, 9999px);
    font-size: 10px;
    font-weight: var(--weight-semibold, 600);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sp-type-schema    { background: color-mix(in srgb, #6366f1 12%, transparent); color: #6366f1; border: 0.5px solid #6366f1; }
.sp-type-tag       { background: color-mix(in srgb, #10b981 12%, transparent); color: #10b981; border: 0.5px solid #10b981; }
.sp-type-collection{ background: color-mix(in srgb, #f59e0b 12%, transparent); color: #d97706; border: 0.5px solid #d97706; }
.sp-type-smart     { background: color-mix(in srgb, #0ea5e9 12%, transparent); color: #0ea5e9; border: 0.5px solid #0ea5e9; }
.sp-type-manual    { background: color-mix(in srgb, #8b5cf6 12%, transparent); color: #8b5cf6; border: 0.5px solid #8b5cf6; }

.sp-view-subtitle {
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
}

.sp-view-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sp-view-section-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-lighter);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
}

.sp-view-text {
    font-size: var(--text-sm);
    color: var(--color-ink);
    line-height: 1.5;
}

.sp-view-stat {
    font-size: var(--text-sm);
    color: var(--color-ink-light);
}

.sp-view-empty {
    font-size: var(--text-sm);
    color: var(--color-ink-lighter);
    font-style: italic;
    margin: 0;
}

/* Collection card list (view mode) */
.sp-collection-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sp-collection-page-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.sp-collection-view {
    gap: var(--space-3);
}

.sp-collection-tabs-shell {
    display: flex;
    flex-direction: row;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: var(--border-width) solid var(--border-color);
}

.sp-collection-meta-disclosure {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--main-background-color-secondary);
    padding: var(--space-2) var(--space-3);
}

.sp-collection-meta-disclosure summary {
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    list-style: none;
}

.sp-collection-meta-disclosure summary::-webkit-details-marker {
    display: none;
}

.sp-collection-meta-disclosure .sp-view-section {
    margin-top: var(--space-2);
}

.sp-collection-meta-disclosure .sp-view-meta {
    display: flex;
}

.sp-collection-page-frame {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--main-background-color-secondary);
    padding: var(--space-3);
}

.sp-collection-page-tab {
    border: var(--border-width) solid var(--border-color);
    background: var(--main-background-color-secondary);
    color: var(--color-ink-light);
    border-radius: var(--radius-full);
    padding: 4px 12px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.sp-collection-page-tab:hover:not(.active) {
    background: color-mix(in srgb, var(--main-background-color-secondary) 80%, var(--main-background-color-third) 20%);
    color: var(--color-ink);
}

.sp-collection-page-tab.active {
    background: color-mix(in srgb, var(--color-target) 12%, var(--main-background-color) 88%);
    border-color: color-mix(in srgb, var(--color-target) 45%, var(--border-color) 55%);
    color: var(--color-ink);
    font-weight: var(--weight-semibold);
}

.sp-collection-card-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--main-background-color-secondary);
    color: var(--color-ink);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.sp-collection-card-item:hover {
    background: var(--hover-background);
    border-color: var(--border-color-strong);
    transform: translateY(-1px);
}

.sp-collection-card-item:focus-visible {
    outline: 2px solid var(--color-target);
    outline-offset: 1px;
}

.sp-collection-card-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    line-height: var(--leading-normal);
}

.sp-collection-card-preview {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    line-height: var(--leading-normal);
}

.sp-collection-card-item-editable {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    cursor: grab;
    border-color: var(--border-color-strong);
    background: color-mix(in srgb, var(--main-background-color-secondary) 88%, var(--main-background-color));
}

.sp-collection-card-item-editable:active {
    cursor: grabbing;
}

.sp-collection-card-item-editable.is-newly-added {
    border-color: color-mix(in srgb, var(--color-success, #22c55e) 55%, var(--border-color-strong));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success, #22c55e) 25%, transparent);
    background: color-mix(in srgb, var(--color-success, #22c55e) 8%, var(--main-background-color-secondary));
}

.sp-collection-card-main {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}

.sp-collection-card-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sp-collection-card-copy .sp-collection-card-title,
.sp-collection-card-copy .sp-collection-card-preview {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-collection-card-order-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: var(--radius-full, 999px);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    color: var(--color-ink-light);
    border: var(--border-width) solid var(--border-color);
    background: var(--main-background-color);
    flex-shrink: 0;
}

.sp-collection-card-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

.sp-collection-row-btn {
    border: var(--border-width) solid var(--border-color);
    background: var(--main-background-color);
    color: var(--color-ink-light);
    border-radius: var(--radius-full);
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.sp-collection-row-btn:hover:not(:disabled) {
    background: var(--hover-background);
    border-color: var(--border-color-strong);
    color: var(--color-ink);
}

.sp-collection-row-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.sp-collection-row-btn-danger {
    color: var(--color-danger, #ef4444);
    border-color: color-mix(in srgb, var(--color-danger, #ef4444) 40%, var(--border-color));
}

.sp-collection-row-btn-danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-danger, #ef4444) 10%, var(--main-background-color));
    color: color-mix(in srgb, var(--color-danger, #ef4444) 80%, var(--color-ink));
    border-color: color-mix(in srgb, var(--color-danger, #ef4444) 55%, var(--border-color-strong));
}

@media (max-width: 640px) {
    .sp-collection-card-item-editable {
        grid-template-columns: 1fr;
    }

    .sp-collection-card-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

.sp-view-json {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    background: var(--hover-background);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--border-color);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    max-height: 180px;
    overflow-y: auto;
}

.sp-view-filter-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sp-view-filter-pill {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    background: var(--hover-background);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-2);
    line-height: var(--leading-normal);
    word-break: break-word;
}

.sp-view-rows-table-wrap {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: auto;
    max-height: 360px;
}

.sp-view-rows-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
}

.sp-view-rows-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: var(--space-2);
    background: var(--hover-background);
    color: var(--color-ink-lighter);
    border-bottom: var(--border-width) solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: var(--weight-semibold);
}

.sp-view-rows-table tbody td {
    padding: var(--space-2);
    border-bottom: var(--border-width) solid var(--border-color);
    color: var(--color-ink);
    vertical-align: top;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-view-rows-table tbody tr:last-child td {
    border-bottom: none;
}

.sp-view-row-index {
    width: 42px;
    color: var(--color-ink-lighter) !important;
}

.sp-view-cell-empty {
    color: var(--color-ink-lighter);
    font-style: italic;
}

.sp-draft-table-view-filter-row {
    display: grid;
    grid-template-columns: 1.2fr 110px minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-2);
}

.sp-draft-table-view-filter-row .sp-remove-filter-btn {
    margin-left: 0;
}

@media (max-width: 640px) {
    .sp-draft-table-view-filter-row {
        grid-template-columns: 1fr;
    }
}

/* ─── Schema field list (view mode) ─── */
.sp-schema-field-list {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.sp-schema-field-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--hover-background);
    border-bottom: var(--border-width) solid var(--border-color);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-lighter);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sp-schema-col-name { flex: 1; }
.sp-schema-col-type { width: 100px; flex-shrink: 0; }

.sp-schema-field-row {
    display: flex;
    gap: 10px;
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-width) solid var(--border-color);
    font-size: var(--text-sm);
}

.sp-schema-field-row:last-child { border-bottom: none; }

.sp-schema-field-row--wrap {
    flex-wrap: wrap;
    align-items: flex-start;
}

.sp-schema-field-row--wrap .sp-schema-field-options {
    flex-basis: 100%;
    margin-top: 0;
}

.sp-schema-field-row-main {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
}

.sp-schema-field-name {
    flex: 1;
    color: var(--color-ink);
    font-weight: var(--weight-medium);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-schema-field-type {
    width: 100px;
    flex-shrink: 0;
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
}

.sp-schema-field-req {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-primary, #6366f1);
    /* background: color-mix(in srgb, var(--color-primary, #6366f1) 10%, transparent); */
    border-radius: var(--radius-sm);
    padding: 1px 5px;
}

/* ─── View-mode select/multiselect options chips ─────────────────────────── */
.sp-schema-field-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
    padding-left: 0;
}

.sp-schema-field-option-chip {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--hover-background);
    border: var(--border-width) solid var(--border-color);
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Tag color preview (view mode) ─── */
.sp-tag-color-preview {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sp-tag-color-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    border: 0.5px solid rgba(0,0,0,0.1);
}

.sp-tag-color-hex {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    color: var(--color-ink-light);
}

/* ─── Form entity type badge ─────────────────────────────────────────────── */

.sp-type-form {
    background: color-mix(in srgb, var(--color-target) 12%, transparent);
    color: color-mix(in srgb, var(--color-target) 80%, var(--color-ink) 20%);
    border: 0.5px solid color-mix(in srgb, var(--color-target) 45%, transparent);
}

/* ─── Form detail view ───────────────────────────────────────────────────── */

.sp-form-description {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    line-height: 1.5;
}

.sp-form-meta-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.sp-form-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-width) solid var(--border-color);
}

.sp-form-meta-row:last-child {
    border-bottom: none;
}

.sp-form-meta-key {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-lighter);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.sp-form-meta-val {
    font-size: var(--text-sm);
    color: var(--color-ink);
    text-align: right;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-form-meta-mono {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    color: var(--color-ink-light);
}

/* ─── Form action buttons strip ─────────────────────────────────────────── */

.sp-form-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-2);
}

.sp-form-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 var(--space-3);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--main-background-color-secondary);
    color: var(--color-ink-light);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    text-decoration: none;
    transition: border-color var(--transition-fast),
                background var(--transition-fast),
                color var(--transition-fast);
}

.sp-form-action-btn:hover {
    border-color: color-mix(in srgb, var(--color-target) 45%, var(--border-color) 55%);
    background: color-mix(in srgb, var(--color-target) 8%, var(--main-background-color-secondary) 92%);
    color: var(--color-ink);
}

.sp-form-action-primary {
    border-color: color-mix(in srgb, var(--color-target) 40%, var(--border-color) 60%);
    background: color-mix(in srgb, var(--color-target) 10%, var(--main-background-color) 90%);
    color: var(--color-ink);
}

.sp-form-action-primary:hover {
    background: color-mix(in srgb, var(--color-target) 18%, var(--main-background-color) 82%);
    border-color: color-mix(in srgb, var(--color-target) 60%, var(--border-color) 40%);
}

.sp-form-action-danger {
    color: var(--color-error);
    border-color: color-mix(in srgb, var(--color-error) 30%, var(--border-color) 70%);
    background: transparent;
}

.sp-form-action-danger:hover {
    background: color-mix(in srgb, var(--color-error) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-error) 55%, var(--border-color) 45%);
    color: var(--color-error);
}

/* ─── Full form view wrapper ─────────────────────────────────────────────── */

.sp-form-view-full {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ─── Divider between meta/actions and submissions ───────────────────────── */

.sp-form-submissions-divider {
    height: var(--border-width);
    background: var(--border-color);
    margin: var(--space-4) 0 0;
}

/* ─── Submissions section ────────────────────────────────────────────────── */

.sp-form-submissions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) 0 var(--space-4);
}

.sp-form-submissions-loading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    color: var(--color-ink-lighter);
    font-size: var(--text-xs);
}

/* ─── Header: "Submissions (N)" + tab switcher ───────────────────────────── */

.sp-form-submissions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.sp-form-submissions-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-lighter);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sp-form-sub-count {
    font-weight: var(--weight-normal);
}

/* ─── Table / Record tab switcher pills ──────────────────────────────────── */

.sp-form-sub-tabs {
    display: flex;
    gap: var(--space-1);
}

.sp-form-sub-tab {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 var(--space-2);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--main-background-color-secondary);
    color: var(--color-ink-lighter);
    font-size: 11px;
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: border-color var(--transition-fast),
                background var(--transition-fast),
                color var(--transition-fast);
}

.sp-form-sub-tab:hover {
    color: var(--color-ink);
    border-color: color-mix(in srgb, var(--color-target) 35%, var(--border-color) 65%);
}

.sp-form-sub-tab.active {
    background: color-mix(in srgb, var(--color-target) 12%, var(--main-background-color) 88%);
    border-color: color-mix(in srgb, var(--color-target) 45%, var(--border-color) 55%);
    color: var(--color-ink);
    font-weight: var(--weight-semibold);
}

/* ─── Table view ─────────────────────────────────────────────────────────── */

.sp-form-table-wrap {
    overflow-x: auto;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    -webkit-overflow-scrolling: touch;
}

.sp-form-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
}

.sp-form-table thead th {
    padding: var(--space-2) var(--space-3);
    background: var(--main-background-color-secondary);
    border-bottom: var(--border-width) solid var(--border-color);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    color: var(--color-ink-lighter);
    text-align: left;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: sticky;
    top: 0;
}

.sp-form-table tbody td {
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-width) solid var(--border-color);
    color: var(--color-ink);
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.sp-form-table-row {
    cursor: pointer;
    transition: background var(--transition-fast);
}

.sp-form-table-row:hover td {
    background: var(--main-background-color-secondary);
}

.sp-form-table-row:last-child td {
    border-bottom: none;
}

.sp-form-table-empty {
    text-align: center;
    color: var(--color-ink-lighter);
    font-style: italic;
    padding: var(--space-6) var(--space-3);
}

/* ─── Load more button ───────────────────────────────────────────────────── */

.sp-form-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    margin-top: var(--space-2);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--main-background-color-secondary);
    color: var(--color-ink-light);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: border-color var(--transition-fast),
                background var(--transition-fast),
                color var(--transition-fast);
}

.sp-form-load-more:hover {
    border-color: color-mix(in srgb, var(--color-target) 45%, var(--border-color) 55%);
    background: color-mix(in srgb, var(--color-target) 8%, var(--main-background-color-secondary) 92%);
    color: var(--color-ink);
}

/* ─── Record view ────────────────────────────────────────────────────────── */

.sp-form-record {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sp-form-record-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: var(--border-width) solid var(--border-color);
}

.sp-form-record-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 26px;
    padding: 0 var(--space-2);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--main-background-color-secondary);
    color: var(--color-ink-light);
    font-size: 11px;
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: border-color var(--transition-fast),
                background var(--transition-fast),
                color var(--transition-fast);
}

.sp-form-record-nav-btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--color-target) 45%, var(--border-color) 55%);
    background: color-mix(in srgb, var(--color-target) 8%, var(--main-background-color-secondary) 92%);
    color: var(--color-ink);
}

.sp-form-record-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.sp-form-record-counter {
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.sp-form-record-meta {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
}

.sp-form-record-fields {
    /* inherits sp-form-meta-rows layout */
}

.sp-form-record-val {
    /* allow multi-line wrap for long values */
    white-space: normal;
    word-break: break-word;
    text-align: right;
}

/* ─── Empty / error states ───────────────────────────────────────────────── */

.sp-form-record-empty {
    margin: 0;
    padding: var(--space-6) 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-ink-lighter);
    font-style: italic;
}

/* ─── Proposed Changes List Panel ────────────────────────────────────────── */

.sp-proposed-changes-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Filter tabs */
.sp-pc-filter-tabs {
    display: flex;
    gap: 0;
    border-bottom: var(--border-width) solid var(--border-color);
    flex-shrink: 0;
    padding: 0 var(--space-4);
}

.sp-pc-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium, 500);
    color: var(--color-ink-light);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

.sp-pc-filter-tab:hover {
    color: var(--color-ink);
}

.sp-pc-filter-tab.is-active {
    color: var(--color-primary, #6366f1);
    border-bottom-color: var(--color-primary, #6366f1);
}

.sp-pc-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full, 9999px);
    font-size: 10px;
    font-weight: var(--weight-semibold, 600);
    background: var(--main-background-color-third);
    color: var(--color-ink-light);
}

.sp-pc-filter-tab.is-active .sp-pc-tab-count {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 16%, transparent);
    color: var(--color-primary, #6366f1);
}

/* List body */
.sp-pc-list-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sp-pc-empty {
    padding: var(--space-8) 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-ink-lighter);
    font-style: italic;
}

/* Individual proposed change item */
.sp-proposed-change-item {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--main-background-color-secondary);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.sp-proposed-change-item:hover {
    box-shadow: var(--shadow-sm);
    border-color: color-mix(in srgb, var(--color-primary, #6366f1) 30%, var(--border-color));
}

.sp-proposed-change-item--is-pending {
    border-left: 2px solid var(--color-warning, #f59e0b);
}

.sp-proposed-change-item--is-applied {
    border-left: 2px solid var(--color-success);
    opacity: 0.8;
}

.sp-proposed-change-item--is-discarded {
    border-left: 2px solid var(--color-error);
    opacity: 0.65;
}

.sp-proposed-change-item-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.sp-pc-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold, 600);
    border: var(--border-width) solid transparent;
}

.sp-pc-status-badge.is-pending {
    color: color-mix(in srgb, var(--color-warning, #f59e0b) 90%, var(--color-ink));
    background: color-mix(in srgb, var(--color-warning, #f59e0b) 14%, transparent);
    border-color: color-mix(in srgb, var(--color-warning, #f59e0b) 35%, transparent);
}

.sp-pc-status-badge.is-applied {
    color: var(--color-success);
    background: var(--color-success-bg);
    border-color: var(--color-success);
}

.sp-pc-status-badge.is-discarded {
    color: var(--color-error);
    background: var(--color-error-bg);
    border-color: var(--color-error);
}

.sp-pc-type-tag {
    font-size: 10px;
    font-weight: var(--weight-medium, 500);
    color: var(--color-ink-lighter);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sp-pc-change-count {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    margin-left: auto;
}

.sp-pc-date {
    font-size: 10px;
    color: var(--color-ink-lighter);
}

.sp-pc-changed-fields {
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-pc-item-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-1);
}

.sp-pc-review-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold, 600);
    background: var(--main-background-color-third);
    color: var(--color-ink-light);
    border: var(--border-width) solid var(--border-color);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sp-pc-review-btn:hover {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 12%, var(--main-background-color-third));
    color: var(--color-primary, #6366f1);
    border-color: color-mix(in srgb, var(--color-primary, #6366f1) 30%, var(--border-color));
}

/* Back bar and back button */
.sp-pc-back-bar {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-4);
    border-bottom: var(--border-width) solid var(--border-color);
}

.sp-pc-back-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium, 500);
    color: var(--color-ink-light);
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.sp-pc-back-btn:hover {
    color: var(--color-primary, #6366f1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Collection Layout View — Table / Records / Pages tab switcher
   ═══════════════════════════════════════════════════════════════════════════ */

/* Layout mode tab bar (Table | Records | Pages) shown at the top of the view */
.sp-collection-layout-tabs {
    display: flex;
    gap: 1rem;
    padding: var(--space-2) var(--space-4);
    border-bottom: var(--border-width) solid var(--border-color);
    flex-shrink: 0;
    background: var(--main-background-color);
}

.sp-collection-layout-tab {
    flex: 1;
    height: 30px;
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium, 500);
    color: var(--color-ink-light);
    background: var(--main-background-color-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

.sp-collection-layout-tab:hover {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, var(--main-background-color-secondary));
    color: var(--color-ink);
}

.sp-collection-layout-tab.active {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 15%, var(--main-background-color-secondary));
    color: var(--color-primary, #6366f1);
    border-color: color-mix(in srgb, var(--color-primary, #6366f1) 40%, var(--border-color));
    font-weight: var(--weight-semibold, 600);
}

.sp-collection-content-frame {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ── Table view ──────────────────────────────────────────────────────────── */

.sp-coll-table-wrapper {
    overflow-x: auto;
    padding: var(--space-2) var(--space-4) var(--space-4);
}

.sp-coll-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
}

.sp-coll-table-th {
    text-align: left;
    padding: 6px 8px;
    color: var(--color-ink-lighter);
    font-weight: var(--weight-semibold, 600);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: var(--border-width) solid var(--border-color);
    white-space: nowrap;
}

.sp-coll-table-row:nth-child(even) {
    background: var(--main-background-color-secondary);
}

.sp-coll-table-row:hover {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 6%, var(--main-background-color));
}

.sp-coll-table-cell {
    padding: 7px 8px;
    border-bottom: var(--border-width) solid var(--border-color);
    color: var(--color-ink);
    font-size: var(--text-xs);
    vertical-align: middle;
}

.sp-coll-table-title {
    font-weight: var(--weight-medium, 500);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-coll-table-date {
    white-space: nowrap;
    color: var(--color-ink-lighter);
    font-size: 10px;
}

.sp-coll-modality-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--weight-medium, 500);
    text-transform: capitalize;
    background: var(--main-background-color-third);
    color: var(--color-ink-light);
    border: var(--border-width) solid var(--border-color);
}

.sp-coll-modality-badge.sp-coll-modality-image { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.sp-coll-modality-badge.sp-coll-modality-video  { background: #fce7f3; color: #9d174d; border-color: #f9a8d4; }
.sp-coll-modality-badge.sp-coll-modality-audio  { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.sp-coll-modality-badge.sp-coll-modality-file   { background: #ecfdf5; color: #065f46; border-color: #6ee7b7; }
.sp-coll-modality-badge.sp-coll-modality-text   { background: var(--main-background-color-third); color: var(--color-ink-light); }

/* ── Records view (tabbed single-card reader) ────────────────────────────── */

.sp-coll-record-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sp-coll-record-tabs-bar {
    display: flex;
    gap: var(--space-1);
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: var(--space-2) var(--space-4);
    flex-shrink: 0;
    scrollbar-width: thin;
    border-bottom: var(--border-width) solid var(--border-color);
}

.sp-coll-record-tab {
    flex-shrink: 0;
    height: 30px;
    padding: 0 10px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium, 500);
    color: var(--color-ink-light);
    background: var(--main-background-color-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.sp-coll-record-tab:hover {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, var(--main-background-color-secondary));
    color: var(--color-ink);
}

.sp-coll-record-tab.active {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 12%, var(--main-background-color));
    border-color: color-mix(in srgb, var(--color-primary, #6366f1) 40%, var(--border-color));
    color: var(--color-ink);
    font-weight: var(--weight-semibold, 600);
}

.sp-coll-record-card-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    min-height: 0;
}

.sp-coll-record-card-body .dpg-media {
    max-width: 100%;
}

.sp-coll-record-card-body .dpg-media-text {
    font-size: var(--text-sm);
    line-height: 1.6;
}

/* ─── Pages view inside collection ──────────────────────────────────────── */

.sp-collection-pages-view {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl);
    gap: var(--space-2);
    padding: var(--space-3);
    height: 100%;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Collection Editor — Layout Mode Selector + Pages Grid Builder
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wizard: step indicator ───────────────────────────────────────────────── */

.sp-coll-wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-4) var(--space-2);
    gap: 0;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    border-bottom: var(--border-width) solid var(--border-color);
    background: var(--main-background-color-secondary);
}

.sp-coll-wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}

.sp-coll-wizard-step-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--main-background-color);
    color: var(--color-ink-lighter);
    font-size: 11px;
    font-weight: var(--weight-semibold, 600);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.sp-coll-wizard-step.active .sp-coll-wizard-step-dot {
    background: var(--color-primary, #6366f1);
    border-color: var(--color-primary, #6366f1);
    color: #fff;
}

.sp-coll-wizard-step.done .sp-coll-wizard-step-dot {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 15%, var(--main-background-color));
    border-color: var(--color-primary, #6366f1);
    color: var(--color-primary, #6366f1);
}

.sp-coll-wizard-step-label {
    font-size: 10px;
    font-weight: var(--weight-medium, 500);
    color: var(--color-ink-lighter);
    white-space: nowrap;
}

.sp-coll-wizard-step.active .sp-coll-wizard-step-label {
    color: var(--color-primary, #6366f1);
    font-weight: var(--weight-semibold, 600);
}

.sp-coll-wizard-step.done .sp-coll-wizard-step-label {
    color: var(--color-ink-light);
}

.sp-coll-wizard-connector {
    width: 40px;
    height: 2px;
    background: var(--border-color);
    margin: 0 4px;
    margin-bottom: 18px; /* vertically align with dot centers */
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.sp-coll-wizard-connector.done {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 50%, var(--border-color));
}

/* ── Wizard: body + nav ──────────────────────────────────────────────────── */

.sp-collection-wizard {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.sp-coll-wiz-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 0;
    min-height: 0;
}

.sp-coll-wiz-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-top: var(--border-width) solid var(--border-color);
    background: var(--main-background-color-secondary);
    flex-shrink: 0;
    border-radius: var(--radius-xl);
    gap: var(--space-2);
}

.sp-coll-wiz-next {
    margin-left: auto;
}

.sp-coll-wiz-validation {
    font-size: var(--text-xs);
    color: var(--color-error, #ef4444);
    margin: var(--space-2) 0 0;
}

/* ── Wizard: step 1 — cards helpers ─────────────────────────────────────── */

.sp-coll-cards-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.sp-coll-cards-header .sp-collection-section-title {
    margin: 0;
}

.sp-coll-count-badge {
    font-size: 10px;
    font-weight: var(--weight-semibold, 600);
    color: var(--color-primary, #6366f1);
    background: color-mix(in srgb, var(--color-primary, #6366f1) 12%, var(--main-background-color));
    border: var(--border-width) solid color-mix(in srgb, var(--color-primary, #6366f1) 30%, var(--border-color));
    border-radius: var(--radius-full);
    padding: 0 6px;
    line-height: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
}

.sp-coll-optional {
    font-size: var(--text-xs);
    font-weight: var(--weight-regular, 400);
    color: var(--color-ink-lighter);
}

/* ── Wizard: step 2 — layout choice cards ───────────────────────────────── */

.sp-coll-layout-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.sp-coll-layout-card {
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-3);
    cursor: pointer;
    background: var(--main-background-color);
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    user-select: none;
    outline: none;
}

.sp-coll-layout-card:hover {
    border-color: color-mix(in srgb, var(--color-primary, #6366f1) 50%, var(--border-color));
    background: color-mix(in srgb, var(--color-primary, #6366f1) 4%, var(--main-background-color));
}

.sp-coll-layout-card:focus-visible {
    box-shadow: 0 0 0 2px var(--color-primary, #6366f1);
}

.sp-coll-layout-card.active {
    border-color: var(--color-primary, #6366f1);
    background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, var(--main-background-color));
}

.sp-coll-layout-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.sp-coll-layout-card-check {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    background: var(--main-background-color);
    transition: background var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
}

.sp-coll-layout-card.active .sp-coll-layout-card-check {
    background: var(--color-primary, #6366f1);
    border-color: var(--color-primary, #6366f1);
}

.sp-coll-layout-card-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold, 600);
    color: var(--color-ink);
}

.sp-coll-layout-card-desc {
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
    margin: 0;
    line-height: 1.4;
}

/* ── Wizard: step 3 — config tabs ────────────────────────────────────────── */

.sp-coll-config-tabs-bar {
    display: flex;
    gap: 2px;
    padding: var(--space-2) var(--space-4) 0;
    border-bottom: var(--border-width) solid var(--border-color);
    background: var(--main-background-color-secondary);
    flex-shrink: 0;
    border-radius: var(--radius-full);
}

.sp-coll-config-tab {
    height: 30px;
    padding: 0 14px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium, 500);
    color: var(--color-ink-light);
    background: transparent;
    border: var(--border-width) solid transparent;
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sp-coll-config-tab:hover {
    color: var(--color-ink);
    background: color-mix(in srgb, var(--color-primary, #6366f1) 6%, var(--main-background-color));
}

.sp-coll-config-tab.active {
    background: var(--main-background-color);
    color: var(--color-ink);
    border-color: var(--border-color);
    border-bottom-color: var(--main-background-color);
    font-weight: var(--weight-semibold, 600);
    position: relative;
    bottom: -1px;
}

#sp-coll-config-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* ── Table sort controls ─────────────────────────────────────────────────── */

.sp-coll-table-sort-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.sp-coll-sort-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold, 600);
    color: var(--color-ink-light);
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0;
}

.sp-coll-sort-select {
    flex: 1;
    font-size: var(--text-xs);
    height: 30px;
    padding: 0 var(--space-2);
}

.sp-coll-hint-text {
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
    margin: 0 0 var(--space-2);
}

/* Two-column row for wizard config (e.g. sort by + direction) */
.sp-coll-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

/* Back button in wizard nav — same appearance as next but left-aligned */
.sp-coll-wiz-back {
    /* inherits .library-action-btn styles */
}

/* Draft collection view: card preview list */
.sp-collection-card-preview-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-collection-card-preview-item {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--hover-background);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Pages editor — tab bar for page tabs ─────────────────────────────── */

.sp-coll-pages-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.sp-coll-pages-header .sp-collection-section-title {
    margin: 0;
}

.sp-coll-page-edit-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--space-3);
}

.sp-coll-page-edit-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 10px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium, 500);
    color: var(--color-ink-light);
    background: var(--main-background-color-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sp-coll-page-edit-tab:hover {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, var(--main-background-color-secondary));
    color: var(--color-ink);
}

.sp-coll-page-edit-tab.active {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 15%, var(--main-background-color-secondary));
    color: var(--color-primary, #6366f1);
    border-color: color-mix(in srgb, var(--color-primary, #6366f1) 40%, var(--border-color));
    font-weight: var(--weight-semibold, 600);
}

.sp-coll-page-tab-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 11px;
    color: var(--color-ink-lighter);
    line-height: 1;
    transition: background var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
}

.sp-coll-page-tab-remove:hover {
    background: var(--color-error-bg, #fef2f2);
    color: var(--color-error, #ef4444);
}

/* ── Page Grid Editor ────────────────────────────────────────────────────── */

.pge-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pge-page-name-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pge-page-name-input {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium, 500);
}

/* Grid dimension controls (Cols: − N + | Rows: − N +) */
.pge-grid-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pge-ctrl-label {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    font-weight: var(--weight-medium, 500);
}

.pge-ctrl-val {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold, 600);
    color: var(--color-ink);
    min-width: 20px;
    text-align: center;
}

.pge-ctrl-btn {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    border: var(--border-width) solid var(--border-color);
    background: var(--main-background-color-secondary);
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold, 600);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
    line-height: 1;
    padding: 0;
}

.pge-ctrl-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 12%, var(--main-background-color-secondary));
    border-color: color-mix(in srgb, var(--color-primary, #6366f1) 30%, var(--border-color));
}

.pge-ctrl-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.pge-ctrl-sep {
    width: 1px;
    height: 16px;
    background: var(--border-color);
    margin: 0 var(--space-1);
}

/* The grid itself */
.pge-grid {
    display: grid;
    /* Columns default set by --pge-cols; exact pixel sizes applied by JS for 1:1 squares */
    grid-template-columns: repeat(var(--pge-cols, 1), 1fr);
    grid-template-rows: repeat(2, 80px); /* fallback, overridden by applySquareGridCells */
    gap: 6px;
    min-height: 0;
}

/* Empty cell */
.pge-cell-empty {
    background: var(--main-background-color-secondary);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-height driven by the grid row track set in JS */
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.pge-cell-empty:hover {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 5%, var(--main-background-color-secondary));
    border-color: color-mix(in srgb, var(--color-primary, #6366f1) 40%, var(--border-color));
}

.pge-place-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: var(--border-width) solid var(--border-color);
    background: var(--main-background-color);
    color: var(--color-ink-light);
    font-size: 18px;
    line-height: 1;
    font-weight: 300;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    padding: 0;
}

.pge-place-btn:hover {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 12%, var(--main-background-color));
    color: var(--color-primary, #6366f1);
    border-color: color-mix(in srgb, var(--color-primary, #6366f1) 40%, var(--border-color));
}

/* Cell with picker open */
.pge-cell-picker {
    background: var(--main-background-color);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    min-height: var(--pge-cell-size, 80px);
    position: relative;
    z-index: 10;
}

.pge-picker-dropdown {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 200px;
    overflow-y: auto;
}

.pge-picker-header {
    font-size: 10px;
    font-weight: var(--weight-semibold, 600);
    color: var(--color-ink-lighter);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.pge-picker-option {
    text-align: left;
    padding: 5px 8px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium, 500);
    color: var(--color-ink);
    background: var(--main-background-color-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.pge-picker-option:hover {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 12%, var(--main-background-color-secondary));
    color: var(--color-primary, #6366f1);
    border-color: color-mix(in srgb, var(--color-primary, #6366f1) 30%, var(--border-color));
}

.pge-picker-empty {
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
    font-style: italic;
    padding: 4px 0;
}

.pge-picker-cancel {
    margin-top: 4px;
    font-size: 10px;
    color: var(--color-ink-lighter);
    background: none;
    border: none;
    padding: 3px 0;
    cursor: pointer;
    text-align: left;
    transition: color var(--transition-fast);
}

.pge-picker-cancel:hover {
    color: var(--color-error, #ef4444);
}

/* Placed card item */
.pge-card-item {
    background: var(--main-background-color);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition-fast);
    /* No padding — content fills the cell, overlay sits on top */
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
}

.pge-card-item:hover {
    border-color: color-mix(in srgb, var(--color-primary, #6366f1) 40%, var(--border-color));
}

/* Card content fills the cell (background layer) */
.pge-card-content-preview {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none; /* controls must remain clickable */
    display: flex;
    align-items: stretch;
}

.pge-card-content-preview .dpg-media,
.pge-card-content-preview .dpg-media-image,
.pge-card-content-preview .dpg-media-video {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pge-card-content-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pge-card-content-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pge-card-content-preview .dpg-media-text,
.pge-card-content-preview .dpg-media-audio,
.pge-card-content-preview .dpg-media-file {
    padding: 6px;
    font-size: 10px;
    line-height: 1.4;
    color: var(--color-ink-light);
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: block;
}

/* Reset all markdown block elements inside the grid cell preview.
   Browser-default margins on h1/h2/p etc. cause visual overlap when
   the container clips at a fixed height — flatten them all. */
.pge-card-content-preview .dpg-media-text .markdown-surface {
    overflow: hidden;
    height: 100%;
    display: block;
}

.pge-card-content-preview .dpg-media-text .markdown-surface * {
    font-size: 10px !important;
    line-height: 1.4 !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
}

.pge-card-content-preview .dpg-media-text .markdown-surface *:last-child {
    margin-bottom: 0 !important;
}

/* Controls overlay: title bar + span buttons, pinned to bottom */
.pge-card-overlay {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 40%,
        rgba(0,0,0,0.45) 70%,
        rgba(0,0,0,0.72) 100%
    );
    padding: 0 0 4px;
    box-sizing: border-box;
}

.pge-card-title-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    margin-bottom: 2px;
}

.pge-card-label {
    flex: 1;
    font-size: 10px;
    font-weight: var(--weight-semibold, 600);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    min-width: 0;
}

.pge-span-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
    padding: 0 6px;
    flex-shrink: 0;
}

.pge-span-axis {
    font-size: 10px;
    font-weight: var(--weight-semibold, 600);
    color: var(--color-ink-lighter);
    text-transform: uppercase;
    min-width: 12px;
    text-align: center;
}

.pge-span-val {
    font-size: 10px;
    font-weight: var(--weight-semibold, 600);
    color: rgba(255,255,255,0.9);
    min-width: 12px;
    text-align: center;
}

.pge-span-axis {
    font-size: 9px;
    font-weight: var(--weight-semibold, 600);
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    min-width: 10px;
    text-align: center;
}

.pge-span-btn {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
    font-size: 12px;
    line-height: 1;
    font-weight: var(--weight-semibold, 600);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
}

.pge-span-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.5);
}

.pge-span-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.pge-remove-btn {
    /* Now sits inline in the title bar, not absolute */
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.pge-remove-btn:hover {
    background: rgba(239,68,68,0.85);
    color: #fff;
}

/* Unplaced cards pool */
.pge-card-pool {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-2);
    background: var(--main-background-color-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-sm);
    min-height: 36px;
}

.pge-pool-label {
    font-size: 10px;
    font-weight: var(--weight-semibold, 600);
    color: var(--color-ink-lighter);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.pge-pool-card {
    display: inline-block;
    padding: 2px 8px;
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    background: var(--main-background-color);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-full);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.pge-pool-empty {
    font-size: var(--text-xs);
    color: var(--color-ink-lighter);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Searchable Card List — used in collection editor card selector & pages pool
   ═══════════════════════════════════════════════════════════════════════════ */

.sp-col-card-search-wrap {
    display: flex;
    flex-direction: column;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--main-background-color);
}

.sp-col-card-search-input {
    border: none;
    border-bottom: var(--border-width) solid var(--border-color);
    border-radius: 0;
    font-size: var(--text-xs);
    height: 32px;
    padding: 0 var(--space-3);
    background: var(--main-background-color-secondary);
    flex-shrink: 0;
}

.sp-col-card-search-input:focus {
    outline: none;
    box-shadow: none;
    background: var(--main-background-color);
    border-bottom-color: color-mix(in srgb, var(--color-primary, #6366f1) 50%, var(--border-color));
}

.sp-col-card-list-scroll {
    max-height: 180px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.sp-col-card-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px var(--space-3);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
    border-bottom: var(--border-width) solid var(--border-color);
}

.sp-col-card-list-item:last-child {
    border-bottom: none;
}

.sp-col-card-list-item:hover {
    background: var(--main-background-color-secondary);
}

.sp-col-card-list-item.is-selected {
    background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, var(--main-background-color));
}

.sp-col-card-list-item[hidden] {
    display: none;
}

/* Hide native checkbox — visual replaced by .sp-col-card-list-check-indicator */
.sp-col-card-list-cb {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Custom checkbox indicator */
.sp-col-card-list-check-indicator {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--main-background-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    position: relative;
}

/* Checkmark */
.sp-col-card-list-check-indicator::after {
    content: '';
    width: 3px;
    height: 6px;
    border: 1.5px solid transparent;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(0px, -1px);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

/* Selected state — driven by is-selected on the parent label */
.sp-col-card-list-item.is-selected .sp-col-card-list-check-indicator {
    background: var(--color-primary, #6366f1);
    border-color: var(--color-primary, #6366f1);
}

.sp-col-card-list-item.is-selected .sp-col-card-list-check-indicator::after {
    border-color: #fff;
    opacity: 1;
}

/* Hover pre-checks the indicator slightly */
.sp-col-card-list-item:not(.is-selected):hover .sp-col-card-list-check-indicator {
    border-color: var(--border-color-strong);
    background: var(--main-background-color-secondary);
}

.sp-col-card-list-label {
    flex: 1;
    font-size: var(--text-xs);
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    cursor: pointer;
}

.sp-col-card-list-modality {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: var(--weight-medium, 500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink-lighter);
    padding: 1px 5px;
    border-radius: var(--radius-full);
    border: var(--border-width) solid var(--border-color);
    background: var(--main-background-color-secondary);
}

/* Modality tint on list items */
.sp-col-mod-image { color: #1d4ed8; background: #dbeafe; border-color: #93c5fd; }
.sp-col-mod-video  { color: #9d174d; background: #fce7f3; border-color: #f9a8d4; }
.sp-col-mod-audio  { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
.sp-col-mod-file   { color: #065f46; background: #ecfdf5; border-color: #6ee7b7; }

/* ═══════════════════════════════════════════════════════════════════════════
   Collection Editor — Layout Preview (table / record modes)
   ═══════════════════════════════════════════════════════════════════════════ */

.sp-coll-editor-cards-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sp-col-preview-disclosure {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.sp-col-preview-summary {
    display: flex;
    align-items: center;
    padding: 7px var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold, 600);
    color: var(--color-ink-light);
    background: var(--main-background-color-secondary);
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.sp-col-preview-summary::before {
    content: "▶";
    font-size: 8px;
    margin-right: var(--space-2);
    color: var(--color-ink-lighter);
    transition: transform var(--transition-fast);
}

details[open] > .sp-col-preview-summary::before {
    transform: rotate(90deg);
}

.sp-col-preview-body {
    background: var(--main-background-color);
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Compact table wrapper inside preview (no extra padding) */
.sp-col-preview-table-wrap {
    padding: 0;
}

.sp-col-preview-table-wrap .sp-coll-table-wrapper {
    padding: 0;
}

/* Record preview: non-interactive tabs + card body */
.sp-col-preview-record {
    display: flex;
    flex-direction: column;
}

.sp-col-preview-tabs-bar {
    border-bottom: var(--border-width) solid var(--border-color);
}

/* Preview tabs are interactive — user can click to preview different cards */
.sp-col-preview-tabs-bar .sp-coll-record-tab {
    cursor: pointer;
}

.sp-col-preview-card-body {
    pointer-events: none;
    overflow: hidden;
}

.sp-col-preview-more-tab {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 8px;
    font-size: 10px;
    color: var(--color-ink-lighter);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Collection Card Picker — tabbed, server-paginated
   ═══════════════════════════════════════════════════════════════════════════ */

.sp-col-card-picker {
    display: flex;
    flex-direction: column;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--main-background-color);
}

/* ── Tab bar ─────────────────────────────────────────────────────────────── */

.sp-col-picker-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: var(--border-width) solid var(--border-color);
    background: var(--main-background-color-secondary);
    flex-shrink: 0;
}

.sp-col-picker-tabs::-webkit-scrollbar { display: none; }

.sp-col-picker-tab {
    flex-shrink: 0;
    height: 30px;
    padding: 0 10px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium, 500);
    color: var(--color-ink-light);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

.sp-col-picker-tab:hover {
    color: var(--color-ink);
}

.sp-col-picker-tab.active {
    color: var(--color-primary, #6366f1);
    border-bottom-color: var(--color-primary, #6366f1);
    font-weight: var(--weight-semibold, 600);
}

.sp-col-picker-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    min-width: 20px;
    padding: 0 4px;
    font-size: 9px;
    font-weight: var(--weight-semibold, 600);
    color: var(--color-ink-lighter);
    background: var(--main-background-color-third);
    border-radius: var(--radius-full);
}

.sp-col-picker-tab.active .sp-col-picker-tab-count {
    color: var(--color-primary, #6366f1);
    background: color-mix(in srgb, var(--color-primary, #6366f1) 12%, var(--main-background-color));
}

/* ── Search input ─────────────────────────────────────────────────────────── */

.sp-col-picker-search {
    border: none;
    border-bottom: var(--border-width) solid var(--border-color);
    border-radius: 0;
    font-size: var(--text-xs);
    height: 32px;
    padding: 0 var(--space-3);
    background: var(--main-background-color-secondary);
    flex-shrink: 0;
}

.sp-col-picker-search:focus {
    outline: none;
    box-shadow: none;
    background: var(--main-background-color);
    border-bottom-color: color-mix(in srgb, var(--color-primary, #6366f1) 50%, var(--border-color));
}

/* ── Card list (reuses existing .sp-col-card-list-scroll styles) ─────────── */

.sp-col-card-picker .sp-col-card-list-scroll {
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    flex: 1;
}

/* ── Inline loading spinner ──────────────────────────────────────────────── */

.sp-col-picker-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

/* ── Footer: count + load more ───────────────────────────────────────────── */

.sp-col-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px var(--space-3);
    border-top: var(--border-width) solid var(--border-color);
    background: var(--main-background-color-secondary);
    flex-shrink: 0;
    gap: var(--space-2);
}

.sp-col-picker-count {
    font-size: 10px;
    color: var(--color-ink-lighter);
}

.sp-col-picker-load-more {
    font-size: 10px;
    font-weight: var(--weight-semibold, 600);
    color: var(--color-primary, #6366f1);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.sp-col-picker-load-more:hover {
    opacity: 0.75;
}