/* ============================================================
   DRIVE TO STORE — Custom Traits Panel
   ============================================================ */
#rightTabsContent:has(#traits-container.traits-grid) {
    position: relative;
}

#traits-container.traits-grid {

    .gjs-traits-c {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
        padding: 12px;
    }

    /* ---- Group Header Titles ---- */
    .gjs-trt-trait__wrp-group_map,
    .gjs-trt-trait__wrp-group_actions,
    .gjs-trt-trait__wrp-group_website,
    .gjs-trt-trait__wrp-group_typographie {
        grid-column: 1 / -1;
        margin-top: 15px !important;
        margin-bottom: 5px !important;
        padding-bottom: 4px !important;
        border-bottom: 1px solid var(--gjs-border);

        .gjs-trt-trait {
            padding: 0 !important;
            margin-bottom: 0 !important;
        }

        .gjs-trait-group-header {
            font-weight: 700 !important;
            color: #f97316 !important;
            text-transform: uppercase !important;
            font-size: 11px !important;
            letter-spacing: 0.5px !important;
        }

        .gjs-label-wrp {
            display: none !important;
        }

        .gjs-field-wrp,
        .gjs-field {
            background: transparent !important;
            border: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            height: auto !important;
            padding: 0 !important;
        }
    }

    .gjs-trt-trait__wrp-data-stores,
    .gjs-trt-trait__wrp-variable_store,
    .gjs-trt-trait__wrp-data-map_label,
    .gjs-trt-trait__wrp-data-btn_website_show {
        grid-column: 1 / -1;
    }

    .gjs-trt-trait__wrp {
        min-width: 0;
        position: relative;
        z-index: 1;

        &:has(.sp-container:not(.sp-hidden)) {
            z-index: 100 !important;
        }
    }

    .gjs-trt-trait {
        padding: 4px 0 !important;
        margin-bottom: 0 !important;
    }

    .gjs-label-wrp {
        margin-bottom: 4px !important;
    }

    .gjs-trt-trait:not(.gjs-trt-trait--checkbox):not(.gjs-trt-trait--csv):not(.gjs-trt-trait--color):not(:has(.gjs-trait-group-header)) {
        .gjs-field {
            height: 32px !important;
            border: 1px solid var(--wp-trait-border, #e2e8f0) !important;
            border-radius: 6px !important;
            background: var(--gjs-bg-input, #fff) !important;
            box-shadow: none !important;
        }

        input, select {
            font-size: 12px !important;
        }
    }

    /* ---- Color Picker — proper swatch display ---- */
    .gjs-trt-trait--color {

        .gjs-field.gjs-field-color {
            height: 36px !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            padding: 4px 6px !important;
            box-sizing: border-box !important;
            overflow: visible !important;
        }

        /* Text input area (shows hex value / "none") */
        .gjs-input-holder {
            flex: 1 !important;
            min-width: 0 !important;
            order: 1;

            input {
                color: var(--wp-trait-text, #333) !important;
                font-size: 13px !important;
                width: 100% !important;
                padding: 0 !important;
                border: none !important;
                background: transparent !important;
                box-shadow: none !important;
            }
        }

        /* Color swatch container */
        .gjs-field-colorp {
            width: 26px !important;
            height: 26px !important;
            min-width: 26px !important;
            min-height: 26px !important;
            flex: 0 0 26px !important;
            order: 0;
            margin: 0 !important;
            padding: 0 !important;
            right: auto !important;
            top: auto !important;
            border: 1px solid rgba(0, 0, 0, 0.1) !important;
            border-radius: 4px !important;
            box-sizing: border-box !important;
            cursor: pointer !important;
            position: relative !important;

            .gjs-field-colorp-c {
                width: 100% !important;
                height: 100% !important;
                position: relative !important;
            }

            /* Checkerboard background (transparency indicator) */
            .gjs-checker-bg {
                width: 100% !important;
                height: 100% !important;
                border-radius: 3px !important;
            }

            /* Actual color preview */
            .gjs-field-color-picker {
                width: 100% !important;
                height: 100% !important;
                border-radius: 3px !important;
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
            }
        }
    }

    /* Spectrum popup must appear above all other color swatches */
    .sp-container {
        z-index: 1000 !important;
    }

    .gjs-trt-trait--csv .gjs-field {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        height: auto !important;
        padding: 0 !important;
    }

    .gjs-field-import-status {
        margin-top: 8px;
        font-size: 12px;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}