/* PersonalizationPanel — Drawer-based page customization */

.pb-panel-section {
    padding: var(--spacing-md) var(--spacing-lg);
}

.pb-panel-option {
    padding: var(--spacing-sm) 0;
}

.pb-panel-group {
    margin-bottom: var(--spacing-lg);
}

.pb-panel-group > h4 {
    margin-bottom: var(--spacing-sm);
}

.pb-panel-item {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.pb-panel-item:hover {
    background: var(--color-bg-subtle);
}

/* Sortable list */
.pb-sortable-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Drag handle */
.pb-drag-handle {
    cursor: grab;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.pb-drag-handle:hover {
    opacity: 1;
}

.pb-panel-item:active .pb-drag-handle {
    cursor: grabbing;
}

/* Drag states */
.pb-panel-item.pb-dragging {
    opacity: 0.4;
}

.pb-panel-item.pb-drag-over {
    border-top: 2px solid var(--color-primary);
    padding-top: calc(var(--spacing-xs) - 2px);
}

/* Layout row preview */
.pb-layout-row {
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
}

.pb-layout-add {
    padding: var(--spacing-sm) 0;
}

.cursor-pointer {
    cursor: pointer;
}