/**
 * ContentBlocks Debug Layout CSS
 * Spezifische Styles für Layout Debug-Modal
 */

/* Layout Debug Modal spezifische Styles */
.cb-debug-modal[data-debug-type="layout"] .cb-debug-section {
    margin-bottom: 6px !important;
    padding: 6px !important;
    border-radius: 3px !important;
}

.cb-debug-modal[data-debug-type="layout"] .cb-debug-header {
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
}

.cb-debug-modal[data-debug-type="layout"] .cb-debug-header h4 {
    font-size: 14px !important;
    margin: 0 0 2px 0 !important;
}

.cb-debug-modal[data-debug-type="layout"] .cb-debug-header small {
    font-size: 10px !important;
}

.cb-debug-modal[data-debug-type="layout"] .cb-debug-section h5 {
    font-size: 12px !important;
    margin: 0 0 4px 0 !important;
}

.cb-debug-modal[data-debug-type="layout"] .cb-debug-section h6 {
    font-size: 11px !important;
    margin: 0 0 3px 0 !important;
}

/* Layout Debug spezifische Input-Styles */
.cb-debug-modal[data-debug-type="layout"] input[type="text"],
.cb-debug-modal[data-debug-type="layout"] select {
    padding: 4px 6px !important;
    font-size: 12px !important;
    border-radius: 3px !important;
}

.cb-debug-modal[data-debug-type="layout"] button {
    padding: 6px 12px !important;
    font-size: 13px !important;
    border-radius: 3px !important;
}

/* Layout Debug Checkbox-Styles */
.cb-debug-modal[data-debug-type="layout"] .cb-debug-field.checkbox-field {
    gap: 4px !important;
    margin-bottom: 4px !important;
}

.cb-debug-modal[data-debug-type="layout"] .cb-debug-field.checkbox-field label {
    font-size: 12px !important;
}

.cb-debug-modal[data-debug-type="layout"] .cb-debug-field.checkbox-field input[type="checkbox"] {
    margin: 0 !important;
}

/* Layout Debug spezifische Farben */
.cb-debug-modal[data-debug-type="layout"] .btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

.cb-debug-modal[data-debug-type="layout"] .btn-danger:hover {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
}

/* Layout Debug spezifische Hover-Effekte */
.cb-debug-modal[data-debug-type="layout"] .cb-debug-field:hover {
    background-color: #f8f9fa !important;
    border-radius: 3px !important;
}

/* Layout Debug spezifische Focus-Styles */
.cb-debug-modal[data-debug-type="layout"] input:focus,
.cb-debug-modal[data-debug-type="layout"] select:focus {
    border-color: #007bff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* Layout Debug spezifische Button-Styles */
.cb-debug-modal[data-debug-type="layout"] .btn {
    transition: all 0.3s ease !important;
}

.cb-debug-modal[data-debug-type="layout"] .btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}