/* ========================================
   Split-Pane Layout for v8Edit
   Replaces sidebar with integrated detail pane
   ======================================== */

/* ----------------------------------------
   CSS Custom Properties (Theme)
   ---------------------------------------- */
:root {
    /* Professional monotone/gray color scheme */
    --sp-primary: #4a5568;
    /* Slate gray */
    --sp-primary-dim: #718096;
    /* Medium gray */
    --sp-primary-bg: #f7fafc;
    /* Light gray background */
    --sp-primary-dark: #2d3748;
    /* Dark gray for headers */
    --sp-accent: #3182ce;
    /* Blue accent for links/actions */

    /* Layout - Compact for MS-DOS style efficiency */
    --sp-header-height: 36px;
    --sp-search-height: auto;
    --sp-divider-width: 6px;
    --sp-default-split: 65%;
    /* List pane default width */

    /* Spacing */
    --sp-gap: 0.35rem;
    --sp-radius: 3px;
}

/* ----------------------------------------
   Main App Layout (CSS Grid)
   ---------------------------------------- */
.splitpane-app {
    display: grid;
    grid-template-rows: var(--sp-header-height) auto 1fr;
    grid-template-areas:
        "header"
        "search"
        "content";
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg);
}

/* ----------------------------------------
   Header
   ---------------------------------------- */
.sp-header {
    grid-area: header;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 0.75rem;
    background-color: var(--sp-primary-dark);
    color: white;
}

.sp-header-left {
    display: flex;
    gap: 0.75rem;
}

.sp-logo {
    display: flex;
    align-self: center;
    align-items: center;
    padding-bottom: 0.1rem;
    gap: 0.4rem;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 300;
    text-decoration: none;
    color: white;
}

.sp-logo img {
    width: 22px;
    height: 22px;
}

.sp-nav {
    display: flex;
    gap: 0.25rem;
}

.sp-nav a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 0.2rem 0.6rem;
    border-radius: var(--sp-radius) var(--sp-radius) 0 0;
    font-weight: 500;
    font-size: 1.05em;
    transition: background-color 0.15s ease;
}

.sp-nav a:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.sp-nav a.active {
    background-color: var(--bg);
    color: var(--sp-primary);
}

.sp-header-right {
    display: flex;
    align-self: center;
    align-items: center;
    gap: 0.5rem;
}

.sp-header-right a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 0.2rem;
    border-radius: var(--sp-radius);
    transition: background-color 0.15s ease;
}

.sp-header-right .material-symbols-outlined {
    font-size: 20px;
}

.sp-header-right a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Detail pane toggle button (docked ↔ popup) */
.sp-detail-toggle-btn {
    background: none;
    border: 1px solid #ddd;
    color: #666;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--sp-radius);
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8em;
    transition: all 0.15s ease;
}

.sp-detail-toggle-btn:hover {
    background: #f0f0f0;
    color: #333;
    border-color: #bbb;
}

.sp-detail-toggle-btn .material-symbols-outlined {
    font-size: 18px;
}

/* ----------------------------------------
   Search Bar
   ---------------------------------------- */
.sp-search {
    grid-area: search;
    padding: 0.35rem 0.75rem;
    background-color: var(--bg);
    border-bottom: 1px solid var(--border);
}

.sp-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.sp-search-form fieldset {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: none;
    margin: 0;
}

.sp-search-form input {
    padding: 0.35em 0.5em;
    font-size: 1.1em;
    height: 32px;
    box-sizing: border-box;
}

.sp-search-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
    font-size: 0.85em;
}

.sp-presets {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.sp-preset-btn {
    padding: 0.2rem 0.6rem;
    font-size: 0.85em;
    background-color: var(--sp-primary-bg);
    border: 1px solid var(--sp-primary-dim);
    border-radius: var(--sp-radius);
    color: var(--sp-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sp-preset-btn:hover {
    background-color: var(--sp-primary-dim);
    color: white;
}

.sp-result-count {
    color: var(--border-dark);
}

.sp-result-count strong {
    color: var(--sp-primary);
    font-weight: 700;
}

/* ----------------------------------------
   Split-Pane Content Area
   ---------------------------------------- */
.sp-content {
    grid-area: content;
    display: flex;
    overflow: hidden;
    background-color: var(--bg);
}

.car-detail-pane-content.has-related-parts {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.car-detail-primary {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.car-detail-pane-content.has-related-parts>.car-detail-primary {
    flex: 0 0 var(--related-parts-top-height, 46%);
    min-height: 160px;
}

.car-detail-primary>.sp-detail-content {
    overflow: visible;
}

.related-parts-divider {
    flex: 0 0 var(--sp-divider-width);
    cursor: row-resize;
    background-color: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.related-parts-divider:hover,
.sp-resizing-related-parts .related-parts-divider {
    background-color: var(--sp-primary-dim);
}

.related-parts-divider::before {
    content: '';
    width: 40px;
    height: 2px;
    background-color: #bbb;
    border-radius: 1px;
    transition: background-color 0.15s ease;
}

.related-parts-divider:hover::before,
.sp-resizing-related-parts .related-parts-divider::before {
    background-color: white;
}

.embedded-parts-workspace {
    flex: 1 1 auto;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg);
}

.embedded-parts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid var(--border);
    background-color: #f8f9fa;
}

.embedded-parts-workspace>.sp-search {
    flex: 0 0 auto;
    grid-area: auto;
}

.embedded-parts-workspace>.sp-content {
    flex: 1 1 auto;
    min-height: 0;
    grid-area: auto;
}

.embedded-parts-workspace .sp-list-pane {
    min-width: 220px;
}

.embedded-parts-workspace .sp-detail-pane {
    min-width: 200px;
}

/* ----------------------------------------
   List Pane (Left)
   ---------------------------------------- */
.sp-list-pane {
    flex: 0 0 var(--sp-list-width, var(--sp-default-split));
    min-width: 300px;
    max-width: calc(100% - 250px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border);
}

.sp-list-container {
    flex: 1;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #dedede #f1f1f1;
}

.sp-list-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.sp-list-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.sp-list-container::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 3px;
}

/* ----------------------------------------
   List Table
   ---------------------------------------- */
.sp-table {
    /* Width is set inline to the sum of column widths so resize is local
       (spreadsheet-style). Trailing empty space appears when narrower than the pane. */
    width: max-content;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9em;
    table-layout: fixed;
}

.sp-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f8f9fa;
    box-shadow: 0 1px 0 0 var(--border);
}

.sp-table th {
    position: relative;
    text-align: left;
    padding: 0.35rem 0.5rem;
    font-weight: 600;
    color: #666;
    font-size: 0.9em;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid #e0e0e0;
}

.sp-table th .th-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-table th:last-child {
    border-right: none;
}

.sp-table tbody tr {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.sp-table tbody tr:hover {
    background-color: #f5f5f5;
}

/* Selected row (cursor position) */
.sp-table tbody tr.selected {
    background-color: var(--sp-primary-bg);
    outline: 2px solid var(--sp-primary);
    outline-offset: -2px;
}

.sp-table tbody tr.selected:hover {
    background-color: var(--sp-primary-bg);
}

.sp-table td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #f0f0f0;
    font-family: var(--monospace-jp-font);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-table td:last-child {
    border-right: none;
}

.sp-table td:first-child {
    font-weight: 500;
    color: var(--sp-primary);
}

/* ----------------------------------------
   Resizable Divider
   ---------------------------------------- */
.sp-divider {
    flex: 0 0 var(--sp-divider-width);
    background-color: #e8e8e8;
    cursor: col-resize;
    position: relative;
    transition: background-color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-divider:hover {
    background-color: var(--sp-primary-dim);
}

.sp-divider.dragging {
    background-color: var(--sp-primary-dark);
}

/* Drag handle visual indicator */
.sp-divider::before {
    content: '';
    width: 2px;
    height: 40px;
    background-color: #bbb;
    border-radius: 1px;
    transition: background-color 0.15s ease;
}

.sp-divider:hover::before,
.sp-divider.dragging::before {
    background-color: white;
}

/* ----------------------------------------
   Detail Pane (Right)
   ---------------------------------------- */
.sp-detail-pane {
    flex: 1;
    min-width: 250px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg);
}

.sp-detail-header {
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.sp-detail-title {
    color: var(--sp-accent);
    font-weight: 500;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35em;
    margin: 0;
}

.sp-detail-title .material-symbols-outlined {
    line-height: 1.0;
    color: var(--sp-accent);
}

.sp-detail-actions {
    display: flex;
    gap: 0.5rem;
}

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

/* Detail view - grid table layout */
.sp-detail-grid {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 80px minmax(0, 1fr);
    gap: 0;
    border-radius: 0;
    overflow: hidden;
    font-size: 0.9em;
}

.sp-detail-row {
    display: contents;
}

.sp-detail-label {
    background-color: var(--sp-primary-bg);
    padding: 0.4rem 0.7rem;
    color: var(--sp-primary);
    border-bottom: 1px solid white;
    display: flex;
    align-items: center;
}

.sp-detail-value {
    grid-column: 2 / -1;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    font-family: var(--monospace-jp-font);
    background-color: white;
    display: flex;
    align-items: center;
}

.sp-detail-row-inline .sp-detail-value {
    grid-column: auto;
}

.sp-detail-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.3rem;
    border-top: 1px solid var(--border);
    background-color: #fafafa;
}

.sp-bracket-code {
    color: #6b7280;
    font-size: 0.82em;
    margin-right: 0.35em;
}

.sp-detail-row:last-child .sp-detail-label,
.sp-detail-row:last-child .sp-detail-value {
    border-bottom: none;
}

/* Empty/placeholder state for detail pane */
.sp-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    text-align: center;
    padding: 2rem;
}

.sp-detail-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* ----------------------------------------
   Edit Mode (within detail pane)
   ---------------------------------------- */
.sp-detail-pane.editing .sp-detail-header {
    background-color: #fff8e1;
    border-bottom-color: #ffc107;
}

.sp-detail-pane.editing .sp-detail-title {
    color: #f57c00;
}

.sp-edit-form .sp-detail-value {
    padding: 0;
}

.sp-edit-form input[type="text"] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: none;
    font-family: var(--monospace-jp-font);
    font-size: inherit;
    background-color: white;
}

.sp-edit-form input[type="text"]:focus {
    outline: none;
    background-color: #fffef5;
}

.sp-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid var(--border);
    background-color: #fafafa;
}

/* ----------------------------------------
   React Mount Points & Overlays
   (must not create implicit grid rows inside .splitpane-app)
   ---------------------------------------- */
.splitpane-app>#sidebar,
.splitpane-app>#notification-root {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    pointer-events: none;
}

/* Re-enable pointer events on actual rendered content */
.splitpane-app>#sidebar>*,
.splitpane-app>#notification-root>* {
    pointer-events: auto;
}

/* ----------------------------------------
   Loading Indicator (Infinite Scroll)
   ---------------------------------------- */
.sp-loading-indicator {
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    text-align: center;
    padding: 1rem;
    color: #666;
    border-top: 1px solid var(--border);
    z-index: 5;
}

/* ----------------------------------------
   Utility Classes
   ---------------------------------------- */
.sp-hidden {
    display: none !important;
}

/* Disable text selection during resize */
.sp-resizing {
    user-select: none;
    cursor: col-resize;
}

.sp-resizing * {
    cursor: col-resize !important;
}

/* ----------------------------------------
   Button Styles (Warm theme)
   ---------------------------------------- */
.sp-btn {
    padding: 0.4rem 0.8rem;
    border-radius: var(--sp-radius);
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.sp-btn-primary {
    background-color: var(--sp-primary);
    border: 1px solid var(--sp-primary);
    color: white;
}

.sp-btn-primary:hover {
    background-color: #3d6a4a;
}

.sp-btn-secondary {
    background-color: white;
    border: 1px solid var(--border);
    color: #666;
}

.sp-btn-secondary:hover {
    background-color: #f5f5f5;
    border-color: #999;
}

.sp-btn-success {
    background-color: #4caf50;
    border: 1px solid #4caf50;
    color: white;
}

.sp-btn-success:hover {
    background-color: #388e3c;
}

.sp-btn-info {
    background-color: #1976d2;
    border: 1px solid #1976d2;
    color: white;
}

.sp-btn-info:hover {
    background-color: #1565c0;
}

/* ----------------------------------------
   Responsive Adjustments
   ---------------------------------------- */
@media (max-width: 900px) {
    .sp-content {
        flex-direction: column;
    }

    .sp-list-pane {
        flex: 0 0 var(--sp-list-height, 50%);
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .sp-divider {
        flex: 0 0 var(--sp-divider-width);
        cursor: row-resize;
        width: 100%;
    }

    .sp-divider::before {
        width: 40px;
        height: 2px;
    }

    .sp-detail-pane {
        min-width: auto;
    }
}

/* ----------------------------------------
   View Mode Layouts (docked / popup / hidden)
   ---------------------------------------- */
/* Docked: default — detail pane visible inline (no overrides needed) */

/* Popup: detail opens in separate window, hide inline detail pane.
 * / and /parts stretch the list. /editor uses data-popup-detached (below)
 * so the main window becomes full-width list only when the right stack
 * is detached — docked geometry still never collapses for empty/loading. */
.view-mode-popup .sp-detail-pane,
.view-mode-popup .sp-divider {
    display: none;
}

.view-mode-popup .sp-list-pane {
    flex: 1;
    max-width: 100%;
    border-right: none;
}

/* ----------------------------------------
   Checkbox Column
   ---------------------------------------- */
.sp-checkbox-header,
.sp-checkbox-cell {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    text-align: center;
    padding: 0.2rem !important;
    border-right: 1px solid #e0e0e0;
}

.sp-checkbox-cell input[type="checkbox"],
.sp-checkbox-header input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--sp-accent);
}

/* Selected row highlight */
.sp-table tbody tr.checked {
    background-color: #e3f2fd !important;
}

.sp-table tbody tr.checked:hover {
    background-color: #bbdefb !important;
}

/* ----------------------------------------
   Bulk Action Bar
   ---------------------------------------- */
.sp-bulk-actions {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: #e3f2fd;
    border-top: 2px solid var(--sp-accent, #1a73e8);
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 20;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    /* Slide-up animation */
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.2s ease, opacity 0.15s ease;
}

.sp-bulk-actions.hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    display: none;
}

.sp-bulk-count {
    font-weight: 600;
    color: #1a3a5c;
    margin-right: auto;
    font-size: 0.9em;
}

.sp-bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--sp-radius);
    background: white;
    color: #666;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.15s;
}

.sp-bulk-btn:hover {
    background: var(--sp-primary-bg);
    border-color: var(--sp-primary-dim);
}

.sp-bulk-btn .material-symbols-outlined {
    font-size: 18px;
}

.sp-bulk-clear {
    color: #666;
}

/* ----------------------------------------
   Column Selector
   ---------------------------------------- */
.sp-search-info-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sp-column-selector {
    position: relative;
    display: inline-block;
}

.sp-column-selector-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--sp-radius);
    padding: 3px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #666;
    transition: all 0.15s;
}

.sp-column-selector-toggle:hover {
    background: var(--sp-primary-bg);
    border-color: var(--sp-primary-dim);
    color: var(--sp-primary);
}

.sp-column-selector-toggle .material-symbols-outlined {
    font-size: 18px;
}

.sp-column-selector-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    min-width: 200px;
    max-height: 370px;
    overflow: hidden;
    margin-top: 4px;
}

.sp-column-selector-dropdown.open {
    display: block;
}

.sp-column-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    font-weight: 500;
    font-size: 0.9em;
    color: var(--sp-primary);
}

.sp-column-selector-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #999;
    display: flex;
}

.sp-column-selector-close:hover {
    color: var(--sp-primary);
}

.sp-column-selector-close .material-symbols-outlined {
    font-size: 18px;
}

.sp-column-selector-list {
    max-height: 220px;
    overflow-y: auto;
    padding: 6px 0;
}

.sp-column-selector-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.1s;
    font-size: 0.9em;
}

.sp-column-selector-item:hover {
    background: var(--sp-primary-bg);
}

.sp-column-selector-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--sp-accent);
}

.sp-column-selector-footer {
    padding: 10px 12px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 8px;
}

.sp-column-selector-reset,
.sp-column-selector-reset-widths {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--sp-radius);
    background: white;
    cursor: pointer;
    font-size: 0.8em;
    color: #666;
    transition: all 0.15s;
}

.sp-column-selector-reset:hover,
.sp-column-selector-reset-widths:hover {
    background: var(--sp-primary-bg);
    border-color: var(--sp-primary-dim);
}

/* Changed column indicator (draft differs from saved) */
.sp-column-selector-item--changed {
    background: #fffbeb;
}

/* Save/Discard action bar (appears only when draft has changes) */
.sp-column-selector-actions {
    padding: 8px 12px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 8px;
}

.sp-column-selector-action-discard,
.sp-column-selector-action-apply {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--sp-radius);
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
    transition: all 0.15s;
}

.sp-column-selector-action-discard {
    background: white;
    color: #666;
}

.sp-column-selector-action-discard:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

.sp-column-selector-action-apply {
    background: var(--sp-primary);
    color: white;
    border-color: var(--sp-primary);
}

.sp-column-selector-action-apply:hover {
    background: var(--sp-primary-dim);
    border-color: var(--sp-primary-dim);
}

.sp-column-selector-action-apply:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ----------------------------------------
   Column Resize Handles
   ---------------------------------------- */
.sp-column-resize-handle {
    position: absolute;
    right: -5px;
    top: 0;
    bottom: 0;
    width: 11px;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
    touch-action: none;
}

.sp-column-resize-handle:hover,
.sp-column-resize-handle.resizing {
    background: var(--sp-accent);
    opacity: 0.5;
}

.sp-column-resize-handle.resizing::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--sp-accent, #2563eb);
    opacity: 1;
    pointer-events: none;
}

/* ----------------------------------------
   Parts List View
   ---------------------------------------- */
.sp-parts-table-wrapper {
    overflow-x: auto;
    margin: 1rem 0;
}

.sp-parts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.sp-parts-table thead {
    background: #f7fafc;
    border-bottom: 2px solid #e2e8f0;
}

.sp-parts-table th {
    text-align: left;
    padding: 0.5rem;
    font-weight: 600;
    color: var(--sp-primary-dark);
}

.sp-parts-table tbody tr {
    border-bottom: 1px solid #e2e8f0;
}

.sp-parts-table tbody tr:hover {
    background: #f7fafc;
}

.sp-parts-table td {
    padding: 0.5rem;
    color: var(--sp-primary);
}

.sp-parts-count {
    padding: 0.5rem 0;
    text-align: right;
    font-size: 0.8rem;
    color: var(--sp-primary-dim);
}

.sp-parts-search-form {
    align-items: center;
}

.sp-parts-search-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    font-size: 0.85rem;
    color: var(--sp-primary);
    white-space: nowrap;
}

.sp-list-loading {
    display: grid;
    min-height: 12rem;
    place-items: center;
    color: var(--sp-primary-dim);
}

.sp-parts-workspace-table tbody tr {
    cursor: pointer;
}

/* Non-editor fallback; /editor uses soft teal rules under .sp-editor-layout */
.sp-parts-workspace-table tbody tr.active {
    background: #e6f0ff;
}

.sp-editor-layout .sp-parts-workspace-table tbody tr.active {
    background: transparent; /* cells own the soft fill */
}

.sp-parts-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem;
    color: var(--sp-primary-dim);
    font-size: 0.85rem;
}

.sp-part-pane .part-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sp-error-message {
    margin: 0.75rem 0;
    padding: 0.75rem;
    border: 1px solid #f2b8b5;
    border-radius: 4px;
    background: #fff4f4;
    color: #b3261e;
    font-size: 0.9rem;
}

.sp-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--sp-primary-dim);
}

.sp-empty-state p {
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* ----------------------------------------
   Editor layout (/editor — three-pane mock)
   docs/mocks/editor-layout-mock.html
   ---------------------------------------- */

/*
 * Pattern B (Cobalt) skin tokens.
 * These live on the editor app shell so the established `/` and `/parts`
 * workspaces retain their current theme while all editor chrome can share one
 * readable, JP-safe visual vocabulary.
 */
.splitpane-app:has(.sp-editor-layout) {
    --editor-font: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    --editor-data-font: "Source Han Code JP", "M+ 1M", "MS Gothic", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --editor-bg: #f2f4f6;
    --editor-panel: #fdfdfd;
    --editor-surface: #ffffff;
    --editor-surface-subtle: #f8f9fa;
    --editor-line: #c7cdd4;
    --editor-line-soft: #dfe3e8;
    --editor-text: #171b20;
    --editor-muted: #656d76;
    --editor-header: #242a31;
    --editor-header-text: #fbfcfd;
    --editor-header-muted: #d9dee4;
    --editor-header-line: #1a1f25;
    --editor-selected: #6f747d;
    --editor-selected-text: #ffffff;
    --editor-selected-soft: #eceff2;
    --editor-accent: #1b67b6;
    --editor-accent-line: #15539e;
    /* Dual region accents: vehicle (top) vs parts (bottom); list uses neutral rail */
    --editor-accent-vehicle: #1b67b6;
    --editor-accent-parts: #0f766e;
    --editor-parts-selected-soft: #e0f2f1;
    --editor-list-rail: #9aa4b1;
    --editor-accent-warm: #c5721a;
    --editor-accent-good: #208b62;
    --editor-edit-surface: #fbf4ea;
    --editor-edit-label: #f5ebe0;
    --editor-edit-line: #e5d5c0;
    --editor-create-surface: #eef8f3;
    --editor-create-label: #e3f2ea;
    --editor-create-line: #c5dfd2;
    --editor-button: #ffffff;
    --editor-button-text: #242a31;
    --editor-button-border: #9aa4b1;
    --editor-input-bg: #ffffff;
    --editor-input-line: #c8ced6;
    --editor-focus-surface: #fffef5;
    --editor-dirty-text: #6b5b43;
    --editor-splitter: #d7dce2;
    --editor-splitter-line: #c0c7cf;
    --editor-splitter-grip: #6c747d;
    --editor-table-head: #f4f6f8;
    --editor-table-head-text: #3d444d;
    --editor-table-row-alt: #fbfcfd;
    --editor-table-grid: #e5e8ec;
    --editor-table-grid-strong: #d3d8de;
    --editor-detail-label: #f2f4f6;

    /*
     * Type scale (client readability pass — mid-age editorial staff).
     * Body 16 / labels 13 / meta+strip 12. Density tokens track the scale so
     * cells and controls do not clip larger glyphs.
     */
    --editor-font-size: 16px;
    --editor-font-size-label: 13px;
    --editor-font-size-meta: 12px;
    --editor-font-size-strip: 12px;
    --editor-row-height: 30px;
    --editor-field-row-height: 31px;
    --editor-cell-x: 7px;
    --editor-cell-y: 4px;
    --editor-control-height: 29px;
    --editor-strip-row-height: 21px;
    --editor-strip-height: 48px; /* 2 rows + gap + padding */
    --editor-vehicle-max-height: min(46vh, 360px);
    /* Floor so empty/loading vehicle chrome stays visible (never flex-shrink to 0). */
    --editor-vehicle-min-height: min(30vh, 160px);
    --editor-radius: 2px;

    color: var(--editor-text);
    background: var(--editor-panel);
    font-family: var(--editor-font);
    font-size: var(--editor-font-size);
}

.splitpane-app:has(.sp-editor-layout) .sp-header {
    background: var(--editor-header);
    color: var(--editor-header-text);
    border-bottom: 1px solid var(--editor-header-line);
}

.splitpane-app:has(.sp-editor-layout) .sp-header-right {
    color: var(--editor-header-muted);
}

.splitpane-app:has(.sp-editor-layout) .sp-nav a.active {
    background: var(--editor-muted);
    color: var(--editor-header-text);
}

/* Pack A: search band is form-only (no sp-search-info row under the form). */
.splitpane-app:has(.sp-editor-layout) .sp-search {
    padding: 0.4rem 0.75rem;
    background: var(--editor-surface-subtle);
    border-bottom-color: var(--editor-line);
}

.splitpane-app:has(.sp-editor-layout) .sp-search-form {
    flex-wrap: nowrap;
}

.splitpane-app:has(.sp-editor-layout) .sp-search-form input {
    border: 1px solid var(--editor-input-line);
    border-radius: var(--editor-radius);
    background: var(--editor-input-bg);
    color: var(--editor-text);
    font-family: var(--editor-font);
}

.splitpane-app:has(.sp-editor-layout) .sp-search-form button {
    width: 31px;
    min-width: 31px;
    min-height: var(--editor-control-height);
    padding: 0;
    border: 1px solid var(--editor-button-border);
    border-radius: var(--editor-radius);
    background: var(--editor-button);
    color: var(--editor-button-text);
}

.splitpane-app:has(.sp-editor-layout) .sp-search-form button[type="submit"] {
    border-color: var(--editor-accent-line);
    background: var(--editor-accent);
    color: var(--editor-selected-text);
}

.splitpane-app:has(.sp-editor-layout) :is(button, input, textarea, select):focus-visible {
    outline: 2px solid var(--editor-accent);
    outline-offset: 1px;
}

.splitpane-app:has(.sp-editor-layout) .sp-btn {
    min-height: var(--editor-control-height);
    padding: 3px 10px;
    border-radius: var(--editor-radius);
    font-family: var(--editor-font);
    font-size: var(--editor-font-size-meta);
    font-weight: 700;
    line-height: 1;
}

.splitpane-app:has(.sp-editor-layout) .sp-btn-secondary {
    border-color: var(--editor-button-border);
    background: var(--editor-button);
    color: var(--editor-button-text);
}

.splitpane-app:has(.sp-editor-layout) .sp-btn-primary {
    border-color: var(--editor-accent-line);
    background: var(--editor-accent);
    color: var(--editor-selected-text);
}

.splitpane-app:has(.sp-editor-layout) .sp-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Full-viewport fixed shell: no document scroll; panes fill remaining height. */
.splitpane-app:has(.sp-editor-layout) {
    overflow: hidden;
}

.splitpane-app:has(.sp-editor-layout) > .sp-content.sp-editor-layout {
    min-height: 0;
    overflow: hidden;
}

.sp-editor-layout {
    display: grid;
    height: 100%;
    grid-template-columns: minmax(min(360px, 42vw), 42%) 10px minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    background-color: var(--editor-bg);
}

/*
 * Exception (multi-monitor): when vehicle+parts are detached to a floating
 * window, the main /editor shell is list-only at full content width.
 * Invariant still holds for docked mode — empty/loading never collapses panes.
 */
.sp-editor-layout[data-popup-detached="true"] {
    grid-template-columns: minmax(0, 1fr);
}

.sp-editor-layout[data-popup-detached="true"] > .sp-list-pane {
    border-right: none;
}

/* List-header re-dock chrome when the right stack is detached. */
.sp-editor-detached-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.35rem;
}

.sp-editor-detached-status {
    font-size: var(--editor-font-size-meta);
    color: var(--editor-muted);
    white-space: nowrap;
}

/*
 * Right stack: fixed two-row shell (vehicle top, parts bottom).
 * Must use grid — flex + .sp-detail-pane { flex: 1 1 0% } + min-height:0 let
 * parts (flex: 1 1 auto) crush the vehicle pane to ~1px once the parts table loads.
 */
.sp-editor-layout > .sp-right-stack {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(220px, 1fr);
    overflow: hidden;
    background: var(--editor-panel);
}

.sp-editor-layout .sp-editor-vehicle-empty {
    padding: 1.25rem 1rem;
}

.sp-editor-layout .sp-editor-vehicle-empty-title {
    margin: 0 0 0.35rem;
    font-weight: 700;
    color: var(--editor-text);
}

.sp-editor-layout > .sp-list-pane {
    flex: none;
    max-width: none;
    min-width: 0;
    min-height: 0;
    border-right: 0;
    display: flex;
    flex-direction: column;
    background: var(--editor-panel);
}

/* Default detail headers in editor use vehicle cobalt; list/parts override below. */
.sp-editor-layout .sp-detail-header {
    min-height: 36px;
    padding: 0 9px;
    background: var(--editor-surface-subtle);
    border-bottom: 2px solid var(--editor-accent-vehicle);
    box-shadow: inset 6px 0 0 var(--editor-accent-vehicle);
}

.sp-editor-layout .sp-detail-title {
    padding: 0;
    color: var(--editor-button-text);
    font-family: var(--editor-font);
    font-size: var(--editor-font-size-label);
    font-weight: 800;
}

.sp-editor-layout .sp-detail-title .material-symbols-outlined {
    color: var(--editor-accent-vehicle);
}

.sp-editor-layout .sp-detail-actions {
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
}

/*
 * List pane header (検索結果): neutral gray rail — not vehicle cobalt.
 * Overrides .sp-detail-header blue rail when both classes are present.
 */
.sp-editor-layout .sp-list-pane .sp-detail-header.sp-pane-header,
.sp-editor-layout .sp-list-pane .sp-pane-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
    padding: 4px 10px 4px 12px;
    border-bottom: 1px solid var(--editor-table-grid-strong);
    background: var(--editor-table-head);
    box-shadow: inset 6px 0 0 var(--editor-list-rail);
}

.sp-editor-layout .sp-list-pane .sp-pane-header .sp-detail-title {
    margin: 0;
    padding-left: 6px; /* space after gray rail before 検索結果 */
    font-size: var(--editor-font-size-label);
    font-weight: 600;
    color: var(--editor-table-head-text);
}

.sp-editor-layout .sp-list-pane .sp-pane-header .sp-detail-title strong {
    font-weight: 800;
    color: var(--editor-text);
}

/* Keep non-list pane-header rules if used elsewhere */
.sp-editor-layout .sp-pane-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
}

.sp-editor-layout .sp-pane-header .sp-detail-title {
    margin: 0;
    font-size: var(--editor-font-size-label);
    font-weight: 600;
    color: var(--editor-table-head-text);
}

.sp-editor-layout .sp-pane-header .sp-detail-title strong {
    font-weight: 800;
    color: var(--editor-text);
}

.sp-editor-layout .sp-pane-header .sp-presets {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sp-editor-layout .sp-pane-header .sp-column-selector-toggle {
    width: 31px;
    min-width: 31px;
    min-height: var(--editor-control-height);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--editor-button-border);
    border-radius: var(--editor-radius);
    background: var(--editor-button);
    color: var(--editor-button-text);
    cursor: pointer;
}

.sp-editor-layout .sp-pane-header .sp-column-selector-toggle .material-symbols-outlined {
    font-size: 18px;
}

.sp-editor-layout .sp-list-container {
    flex: 1 1 auto;
    min-height: 0;
    background: var(--editor-surface);
}

.sp-editor-layout .sp-table {
    color: var(--editor-text);
    font-size: var(--editor-font-size);
}

.sp-editor-layout .sp-table thead {
    background: var(--editor-table-head);
    box-shadow: 0 1px 0 var(--editor-table-grid-strong);
}

.sp-editor-layout .sp-table th,
.sp-editor-layout .sp-table td {
    height: var(--editor-row-height);
    max-height: var(--editor-row-height);
    padding: var(--editor-cell-y) var(--editor-cell-x);
    border-right: 1px solid var(--editor-table-grid);
    border-bottom: 1px solid var(--editor-table-grid);
    vertical-align: middle;
}

.sp-editor-layout .sp-table th {
    background: var(--editor-table-head);
    border-bottom-color: var(--editor-table-grid-strong);
    color: var(--editor-table-head-text);
    font-family: var(--editor-font);
    font-size: var(--editor-font-size-label);
    font-weight: 700;
}

.sp-editor-layout .sp-table td {
    color: var(--editor-text);
    font-family: var(--editor-data-font);
}

/* Exclude .active as well as .selected so parts soft-select is not washed out */
.sp-editor-layout .sp-table tbody tr:nth-child(even):not(.selected):not(.active) td {
    background: var(--editor-table-row-alt);
}

.sp-editor-layout .sp-table tbody tr:hover:not(.selected):not(.active) td {
    background: var(--editor-selected-soft);
}

.sp-editor-layout .sp-table tbody tr.checked:not(.selected):not(.active) td {
    background: var(--editor-selected-soft);
}

/* Vehicle list (selected): strong slate + white text */
.sp-editor-layout .sp-list-pane .sp-table tbody tr.selected td {
    background: var(--editor-selected);
    color: var(--editor-selected-text);
}

.sp-editor-layout .sp-list-pane .sp-table tbody tr.selected {
    outline: 2px solid var(--editor-selected);
    outline-offset: -2px;
}

.sp-editor-layout .sp-list-pane .sp-table tbody tr.selected .sp-bracket-code {
    color: rgba(255, 255, 255, 0.8);
}

/*
 * Parts list (active): soft teal wash + dark text.
 * Avoid white-on-light ghost rows (class is .active, not .selected).
 */
.sp-editor-layout .sp-parts-workspace-table tbody tr.active td {
    background: var(--editor-parts-selected-soft);
    color: var(--editor-text);
}

.sp-editor-layout .sp-parts-workspace-table tbody tr.active {
    outline: 2px solid var(--editor-accent-parts);
    outline-offset: -2px;
}

.sp-editor-layout .sp-parts-workspace-table tbody tr.active:hover td {
    background: var(--editor-parts-selected-soft);
    color: var(--editor-text);
}

.sp-editor-layout :is(.sp-checkbox-cell, .sp-checkbox-header) input[type="checkbox"] {
    accent-color: var(--editor-accent);
}

.sp-editor-layout .sp-column-resize-handle {
    background: linear-gradient(to right, transparent 0 3px, var(--editor-splitter-grip) 3px 4px, transparent 4px);
}

.sp-editor-layout .sp-column-resize-handle:is(:hover, .resizing) {
    background: var(--editor-accent);
}

.sp-editor-layout > .sp-divider {
    flex: none;
    width: auto;
    cursor: col-resize;
    background: var(--editor-splitter);
    border-left: 1px solid var(--editor-splitter-line);
    border-right: 1px solid var(--editor-splitter-line);
    position: relative;
    z-index: 4;
}

.sp-editor-layout > .sp-divider::before,
.sp-editor-layout > .sp-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 2px;
    height: 42px;
    transform: translateY(-50%);
    background: var(--editor-splitter-grip);
}

.sp-editor-layout > .sp-divider::before {
    left: 3px;
}

.sp-editor-layout > .sp-divider::after {
    right: 3px;
}

.sp-editor-layout > .sp-divider.active {
    background: var(--editor-accent);
}

/*
 * Right stack: vehicle height is content-driven (compact field grid), not user-resized.
 * Parts pane fills the remainder so the table top edge stays at a stable eye line.
 * Horizontal splitter removed (backlog: 高さを固定).
 * Note: .sp-editor-layout > .sp-right-stack repeats grid so it wins over any flex rules.
 */
.sp-right-stack {
    display: grid;
    grid-template-rows: auto minmax(220px, 1fr);
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

/* Vehicle (top): cobalt blue identity — never flex-shrink away under parts */
.sp-right-stack > .sp-detail-pane {
    flex: none;
    min-height: var(--editor-vehicle-min-height, 160px);
    min-width: 0;
    max-height: var(--editor-vehicle-max-height);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--editor-panel);
    border-bottom: 1px solid var(--editor-table-grid-strong);
}

.sp-editor-layout > .sp-right-stack > .sp-detail-pane {
    /* Explicitly kill global .sp-detail-pane { flex: 1 } inside the grid stack */
    flex: none;
    min-height: var(--editor-vehicle-min-height);
    max-height: var(--editor-vehicle-max-height);
}

.sp-editor-layout .sp-right-stack > .sp-detail-pane > .sp-detail-header {
    border-bottom-color: var(--editor-accent-vehicle);
    box-shadow: inset 6px 0 0 var(--editor-accent-vehicle);
}

.sp-editor-layout .sp-right-stack > .sp-detail-pane > .sp-detail-header .sp-detail-title .material-symbols-outlined {
    color: var(--editor-accent-vehicle);
}

/* Edit/create must beat vehicle blue (higher specificity on mode classes) */
.sp-editor-layout .sp-right-stack > .sp-detail-pane.editing > .sp-detail-header {
    border-bottom-color: var(--editor-accent-warm);
    box-shadow: inset 6px 0 0 var(--editor-accent-warm);
}

.sp-editor-layout .sp-right-stack > .sp-detail-pane.creating > .sp-detail-header {
    border-bottom-color: var(--editor-accent-good);
    box-shadow: inset 6px 0 0 var(--editor-accent-good);
}

/* Parts (bottom): teal identity — fills 1fr row; table scrolls inside */
.sp-right-stack > .embedded-parts-workspace {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--editor-panel);
    border-top: 2px solid var(--editor-accent-parts);
    box-shadow: inset 6px 0 0 var(--editor-accent-parts);
    /* Neutralize .embedded-parts-workspace { flex: 1 1 auto } for grid sizing */
    flex: none;
}

.sp-editor-layout > .sp-right-stack > .embedded-parts-workspace {
    flex: none;
    min-height: 0;
}

/* Pack C: parts region is strip + table only — table fills remaining height. */
.sp-right-stack > .embedded-parts-workspace > .sp-list-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.sp-parts-action-bar,
.sp-compatibles-context {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 4px 8px;
    border-bottom: 1px solid var(--editor-line, #dde3ea);
    background: var(--editor-surface-subtle, #f8fafc);
}

.sp-compatibles-context-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

.sp-compatibles-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--editor-panel, #fff);
}

.embedded-parts-workspace > .sp-compatibles-panel > .sp-compatibles-heading {
    display: none;
}

.sp-compatibles-heading {
    margin: 0;
    padding: 0.25rem 0.5rem;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    background: #f1f5f9;
    border-bottom: 1px solid var(--border, #dde3ea);
}

.sp-compatibles-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.sp-compatibles-table {
    width: 100%;
}

.sp-compatibles-table th,
.sp-compatibles-table td {
    white-space: nowrap;
}

.sp-compatibles-empty {
    color: #64748b;
    text-align: center;
}

/* Mode chrome: browse hides edit-only controls; edit hides create/enter */
.sp-detail-pane[data-mode="browse"] .sp-mode-status,
.sp-detail-pane[data-mode="browse"] .sp-dirty,
.sp-detail-pane[data-mode="browse"] .js-cancel-edit,
.sp-detail-pane[data-mode="browse"] .js-save-edit,
.sp-detail-pane[data-mode="edit"] .js-create-record,
.sp-detail-pane[data-mode="edit"] .js-enter-edit {
    display: none;
}

.sp-mode-status {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: var(--editor-radius, var(--sp-radius, 2px));
    background: var(--editor-accent-warm, #c5721a);
    color: var(--editor-selected-text, #ffffff);
    font-size: var(--editor-font-size-meta, 12px);
    font-weight: 800;
}

.sp-detail-pane.creating .sp-mode-status {
    background: var(--editor-accent-good, #208b62);
}

/*
 * Pack D: full-pane edit surface (header + body + content padding),
 * not header-only. Field cards stay white for readability.
 */
.sp-editor-layout .sp-detail-pane.editing {
    background: var(--editor-edit-surface);
}

.sp-editor-layout .sp-detail-pane.editing .sp-detail-header {
    background: var(--editor-edit-surface);
    border-bottom-color: var(--editor-accent-warm);
    box-shadow: inset 6px 0 0 var(--editor-accent-warm);
}

.sp-editor-layout .sp-detail-pane.creating .sp-detail-header {
    background: var(--editor-create-surface);
    border-bottom-color: var(--editor-accent-good);
    box-shadow: inset 6px 0 0 var(--editor-accent-good);
}

.sp-editor-layout .sp-detail-pane.creating {
    background: var(--editor-create-surface);
}

.sp-editor-layout .sp-detail-pane > .sp-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* While editing: let Combobox lists escape field cells (still scroll content if needed). */
.sp-editor-layout .sp-detail-pane.editing > .sp-detail-body {
    overflow: visible;
}

.sp-editor-layout .sp-detail-pane.editing {
    overflow: visible;
}

.sp-editor-layout .sp-detail-pane.editing > .sp-detail-body,
.sp-editor-layout .sp-detail-pane.editing .sp-detail-content {
    background: var(--editor-edit-surface);
}

.sp-editor-layout .sp-detail-pane.creating > .sp-detail-body,
.sp-editor-layout .sp-detail-pane.creating .sp-detail-content {
    background: var(--editor-create-surface);
}

.sp-editor-layout .sp-detail-pane.editing .sp-detail-grid-compact .sp-detail-row {
    border-color: var(--editor-edit-line);
}

.sp-editor-layout .sp-detail-pane.editing .sp-detail-grid-compact .sp-detail-label {
    background: var(--editor-edit-label);
}

.sp-editor-layout .sp-detail-pane.creating .sp-detail-grid-compact .sp-detail-row {
    border-color: var(--editor-create-line);
}

.sp-editor-layout .sp-detail-pane.creating .sp-detail-grid-compact .sp-detail-label {
    background: var(--editor-create-label);
}

/* Fallback (non-editor) still recolors header + content when .editing is set */
.sp-detail-pane.editing .sp-detail-header {
    background: #fbf4ea;
    border-bottom-color: #c5721a;
    box-shadow: inset 6px 0 0 #c5721a;
}

.sp-detail-pane.editing > .sp-detail-content,
.sp-detail-pane.editing > .sp-detail-content .sp-detail-content {
    background: #fbf4ea;
}

/* Compact mock-style vehicle field grid (4 field cards per row) */
.sp-editor-layout .sp-detail-grid-compact,
.sp-detail-grid-compact {
    display: grid;
    grid-template-columns: repeat(4, minmax(145px, 1fr));
    gap: 5px 8px;
    border-radius: 0;
    overflow: visible;
    font-size: var(--editor-font-size, 14px);
}

.sp-editor-layout .sp-detail-grid-compact .sp-detail-row,
.sp-detail-grid-compact .sp-detail-row {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    min-height: var(--editor-field-row-height, 31px);
    border: 1px solid var(--editor-line-soft, #dfe3e8);
    background: var(--editor-surface, #ffffff);
}

.sp-editor-layout .sp-detail-grid-compact .sp-detail-label,
.sp-detail-grid-compact .sp-detail-label {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    background: var(--editor-detail-label, #f2f4f6);
    border-right: 1px solid var(--editor-line-soft, #dfe3e8);
    border-bottom: none;
    color: var(--editor-table-head-text, #3d444d);
    font-weight: 700;
    white-space: nowrap;
    font-size: var(--editor-font-size-label, 13px);
}

.sp-editor-layout .sp-detail-grid-compact .sp-detail-value,
.sp-detail-grid-compact .sp-detail-value {
    grid-column: auto;
    min-width: 0;
    max-width: 100%;
    padding: 4px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: none;
    font-family: var(--editor-data-font, var(--monospace-jp-font));
    background: var(--editor-surface, #ffffff);
}

/* Long 類別 / グレード: never grow the row height in browse (Pack D). */
.sp-editor-layout .sp-detail-grid-compact .sp-detail-row--clamp,
.sp-detail-grid-compact .sp-detail-row--clamp {
    min-height: var(--editor-field-row-height, 31px);
    max-height: var(--editor-field-row-height, 31px);
    align-items: stretch;
}

.sp-editor-layout .sp-detail-grid-compact .sp-detail-row--clamp .sp-detail-value,
.sp-detail-grid-compact .sp-detail-row--clamp .sp-detail-value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-editor-layout .sp-detail-grid-compact.sp-edit-form .sp-detail-value,
.sp-detail-grid-compact.sp-edit-form .sp-detail-value {
    padding: 0;
    /* Critical: browse ellipsis uses overflow:hidden; edit must show Combobox lists. */
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}

/* Never clamp height on edit-form rows (類別 / combobox need full interactive cells). */
.sp-editor-layout .sp-detail-grid-compact.sp-edit-form .sp-detail-row,
.sp-detail-grid-compact.sp-edit-form .sp-detail-row {
    max-height: none;
    min-height: var(--editor-field-row-height, 31px);
    overflow: visible;
    position: relative;
    z-index: 0;
}

.sp-editor-layout .sp-detail-grid-compact.sp-edit-form .sp-detail-row--combobox:focus-within,
.sp-detail-grid-compact.sp-edit-form .sp-detail-row--combobox:focus-within {
    z-index: 20;
}

.sp-editor-layout .sp-detail-grid-compact.sp-edit-form input,
.sp-detail-grid-compact.sp-edit-form input,
.sp-editor-layout .sp-detail-grid-compact.sp-edit-form .sp-detail-value > div > input,
.sp-detail-grid-compact.sp-edit-form .sp-detail-value > div > input {
    width: 100%;
    min-height: var(--editor-control-height, 29px);
    max-height: var(--editor-control-height, 29px);
    padding: 4px 6px;
    border: 0;
    border-radius: 0;
    font-family: var(--editor-data-font, var(--monospace-jp-font));
    font-size: inherit;
    background: var(--editor-input-bg, #ffffff);
    box-sizing: border-box;
}

/* Compact Combobox density driven by type-scale tokens (not hard-coded px in TS). */
.sp-editor-layout .sp-combobox--compact input,
.splitpane-app:has(.sp-editor-layout) .sp-combobox--compact input {
    min-height: var(--editor-control-height, 29px) !important;
    max-height: var(--editor-control-height, 29px) !important;
    padding: 4px 6px !important;
    font-size: inherit;
}

/* Combobox root inside compact edit cells */
.sp-editor-layout .sp-detail-grid-compact.sp-edit-form .sp-combobox,
.sp-detail-grid-compact.sp-edit-form .sp-combobox {
    position: relative;
    z-index: 1;
}

.sp-editor-layout .sp-detail-grid-compact.sp-edit-form .sp-combobox-list,
.sp-detail-grid-compact.sp-edit-form .sp-combobox-list {
    z-index: 5000;
}

.sp-editor-layout .sp-detail-grid-compact.sp-edit-form input:focus,
.sp-detail-grid-compact.sp-edit-form input:focus {
    outline: none;
    background-color: var(--editor-focus-surface, #fffef5);
}

.sp-editor-layout .sp-detail-grid-compact.sp-edit-form input:focus-visible,
.sp-editor-layout .sp-detail-grid-compact.sp-edit-form .sp-detail-value > div > input:focus-visible {
    outline: 2px solid var(--editor-accent);
    outline-offset: -2px;
}

/* Compact edit: ruibetsu expansion lives under the grid (not inside the cell). */
.sp-ruibetsu-preview-compact {
    margin-top: 6px;
    min-width: 0;
}

.sp-ruibetsu-preview {
    font-size: 0.78rem;
    padding: 0.2rem 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-ruibetsu-preview--ok {
    color: #2e7d32;
}

.sp-ruibetsu-preview--error {
    color: #c62828;
}

.sp-editor-bulk-notice {
    padding: 1rem;
    font-size: var(--editor-font-size, 14px);
    color: var(--editor-table-head-text, #3d444d);
    line-height: 1.5;
}

.sp-editor-bulk-notice a {
    color: var(--editor-accent, #1b67b6);
}

.sp-editor-bulk-notice .sp-btn {
    margin-top: 0.75rem;
}

.sp-editor-layout .sp-detail-pane > .sp-detail-body > .sp-detail-content,
.sp-editor-layout .sp-detail-pane .sp-detail-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 8px;
}

/* Editing: prefer overflow-x clip only so lists can extend; vertical scroll if form is tall */
.sp-editor-layout .sp-detail-pane.editing > .sp-detail-body > .sp-detail-content,
.sp-editor-layout .sp-detail-pane.editing .sp-detail-content {
    overflow-x: hidden;
    overflow-y: auto;
}

.sp-editor-layout .sp-dirty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--editor-dirty-text);
    font-weight: 800;
    font-size: var(--editor-font-size-meta);
}

.sp-editor-layout .sp-dirty::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--editor-accent-warm);
}

@media (max-width: 1100px) {
    .sp-editor-layout .sp-detail-grid-compact,
    .sp-detail-grid-compact {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }
}

@media (max-width: 800px) {
    .sp-editor-layout .sp-detail-grid-compact,
    .sp-detail-grid-compact {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }
}

/*
 * Function-key genre strip (Pack C / mock style.css):
 * 5×2 keys; height from type-scale tokens — no parts toolbar under it.
 */
.sp-editor-layout .sp-function-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(72px, 1fr));
    grid-template-rows: repeat(2, var(--editor-strip-row-height));
    grid-auto-rows: var(--editor-strip-row-height);
    gap: 1px;
    flex: 0 0 var(--editor-strip-height);
    box-sizing: border-box;
    padding: 2px;
    background: var(--editor-header-muted);
    border-bottom: 1px solid var(--editor-line);
}

.sp-editor-layout .sp-function-key {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 2px 3px;
    background: var(--editor-surface-subtle);
    border: 1px solid var(--editor-line);
    border-radius: 0;
    color: var(--editor-text);
    font-family: var(--editor-font);
    font-size: var(--editor-font-size-strip);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.sp-editor-layout .sp-function-key:hover {
    background: var(--editor-selected-soft);
}

.sp-editor-layout .sp-function-key strong {
    margin-right: 3px;
    font-family: var(--editor-data-font);
    color: var(--editor-accent-parts);
}

.sp-editor-layout .sp-function-key.active,
.sp-editor-layout .sp-function-key[aria-pressed="true"] {
    background: var(--editor-parts-selected-soft);
    border-color: var(--editor-accent-parts);
    box-shadow: inset 0 0 0 1px var(--editor-accent-parts);
}

/* Visually hidden filter/count status (replaces removed toolbar meta). */
.sp-parts-status-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sp-editor-layout .sp-parts-function-note {
    margin: 0;
    padding: 4px 8px 5px;
    color: var(--editor-muted);
    font-family: var(--editor-font);
    font-size: 11px;
    line-height: 1.3;
    border-bottom: 1px solid var(--editor-line);
    background: var(--editor-surface-subtle);
}

.sp-parts-empty,
.sp-parts-empty-cell {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--editor-muted, #999);
}

.sp-parts-workspace-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.sp-parts-workspace-table:focus {
    outline: 2px solid var(--editor-accent, var(--sp-accent, #3182ce));
    outline-offset: -2px;
}

.sp-editor-layout .sp-table th {
    position: sticky;
    top: 0;
    z-index: 2;
}

@media (max-width: 900px) {
    .sp-editor-layout {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(180px, 40%) 10px minmax(0, 1fr);
    }

    .sp-editor-layout > .sp-divider {
        cursor: row-resize;
        width: 100%;
    }

    .sp-right-stack {
        min-height: 280px;
    }
}