/* --- Base Desktop Layout --- */
body { margin: 0; padding: 0; display: flex; height: 100vh; overflow: hidden; background-color: #f1f5f9; font-family: sans-serif; }
.sidebar { width: 320px; background: white; border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; flex-shrink: 0; }
.main-content { flex: 1; padding: 2rem; overflow-y: auto; }
.editor-form { background: white; padding: 2rem; border-radius: 12px; border: 1px solid #e2e8f0; max-width: 900px; margin: 0 auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.full-width { grid-column: span 2; }

/* --- Component Styles --- */
.dynamic-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; background: #f8fafc; padding: 10px; border-radius: 6px; border: 1px solid #e2e8f0; }
.dynamic-row input, .dynamic-row select { padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box; }

/* New Inline Button Styles */
.btn-action { padding: 0; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; }
.btn-plus { background: #10b981; color: white; }
.btn-plus:hover { background: #059669; }
.btn-minus { background: #ef4444; color: white; }
.btn-minus:hover { background: #dc2626; }

/* --- MOBILE RESPONSIVE OVERRIDES --- */
@media (max-width: 768px) {
    body { flex-direction: column; overflow: auto; height: auto; }
    .sidebar { width: 100%; height: auto; max-height: 350px; border-right: none; border-bottom: 2px solid #cbd5e1; }
    .main-content { padding: 1rem; overflow-y: visible; }
    .editor-form { padding: 1.5rem 1rem; }
    .form-grid { grid-template-columns: 1fr; gap: 1rem; }
    .full-width { grid-column: span 1; }
    
    .dynamic-row { flex-wrap: wrap; justify-content: flex-end; }
    .dynamic-row input, .dynamic-row select { width: 100%; flex: 1 1 100% !important; }
}